:root{
  --bg:#111110;
  --panel:#191918;
  --ink:#f2efe7;
  --muted:#a3a29b;
  --orange:#ff6b2b;
  --line:#33332f;
  --sans:'Manrope',sans-serif;
  --serif:'Instrument Serif',Georgia,serif}
*{
  box-sizing:border-box}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased}
body.modal-open{
  overflow:hidden}
button,input,textarea,select{
  font:inherit}
button,a,input,textarea,select{
  -webkit-tap-highlight-color:transparent}
a{
  color:inherit;
  text-decoration:none}
button{
  color:inherit;
  cursor:pointer}
img{
  display:block;
  max-width:100%;
  height:auto}
button{
  border:0}
h1,h2,h3,p{
  margin:0}
h1,h2,h3{
  font-weight:500;
  line-height:1.12}
h1,h2{
  letter-spacing:-.055em}
em{
  font-family:var(--serif);
  font-weight:400;
  letter-spacing:-.03em}
::selection{
  background:var(--orange);
  color:var(--bg)}
:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:6px}
[hidden]{
  display:none!important}
.section-pad{
  padding-left:6%;
  padding-right:6%}
.skip-link{
  position:fixed;
  top:-100px;
  left:20px;
  padding:12px;
  background:var(--orange);
  color:#111;
  z-index:100}
.skip-link:focus{
  top:10px}
.header{
  height:105px;
  padding:0 6%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:20;
  background:var(--bg)}
.wordmark{
  display:inline-flex;
  flex-wrap:wrap;
  position:relative;
  font-size:34px;
  letter-spacing:-2px;
  line-height:1;
  font-weight:800;
  width:175px}
.wordmark-dot{
  color:var(--orange)}
.wordmark-sub{
  width:100%;
  font-size:8px;
  font-weight:500;
  letter-spacing:2.05px;
  margin-top:9px}
.nav{
  display:flex;
  align-items:center;
  gap:35px;
  font-size:12px}
.nav>a:not(.nav-contact){
  color:#c7c6be}
.nav>a:hover{
  color:var(--orange)}
.nav-contact{
  border:1px solid #5b5a53;
  border-radius:4px;
  padding:11px 18px;
  margin-left:12px;
  display:flex;
  gap:32px}
.nav-contact span{
  color:var(--orange);
  font-size:18px;
  line-height:1.1}
.menu-toggle{
  display:none;
  background:none;
  width:44px;
  height:44px}
.eyebrow{
  font-size:9px;
  font-weight:600;
  letter-spacing:1.65px;
  display:flex;
  align-items:center;
  gap:12px;
  line-height:1.7}
.tiny-star{
  color:var(--orange);
  font-size:22px;
  line-height:1}
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  min-height:735px;
  padding-top:74px;
  padding-bottom:105px;
  align-items:center;
  overflow:hidden}
.hero-copy{
  position:relative;
  z-index:2}
.hero h1{
  font-size:clamp(62px,6.5vw,106px);
  line-height:1.045;
  font-weight:500;
  margin:27px 0 26px;
  letter-spacing:-.065em}
.hero h1 em{
  color:var(--orange);
  font-size:1.13em;
  line-height:.85}
.hero-description{
  color:var(--muted);
  max-width:345px;
  font-size:14px;
  line-height:1.8}
.hero-actions{
  display:flex;
  align-items:center;
  gap:24px;
  margin-top:30px}
.button{
  border-radius:4px;
  padding:15px 21px;
  display:inline-flex;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  line-height:1.4;
  font-size:12px;
  font-weight:600;
  transition:background .2s,transform .2s}
.button:hover{
  transform:translateY(-3px)}
.button-orange{
  background:var(--orange);
  color:#17120f}
.button-orange:hover{
  background:#ff8149}
.button span{
  font-size:20px;
  font-weight:400;
  line-height:1}
.text-link{
  display:inline-flex;
  gap:16px;
  align-items:center;
  font-size:11px}
.text-link:hover{
  color:var(--orange)}
.text-link span{
  font-size:18px}
.hero-art{
  position:relative;
  height:475px;
  margin-left:20px;
  isolation:isolate}
.art-orbit{
  position:absolute;
  width:430px;
  height:430px;
  border:1px solid #2d2c28;
  border-radius:50%;
  top:22px;
  left:10px}
.art-orbit:before{
  content:'';
  position:absolute;
  inset:36px;
  border:1px dashed #2b2a26;
  border-radius:50%}
.brand-sheet{
  position:absolute;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-align:left;
  width:300px;
  height:340px;
  padding:22px;
  box-shadow:0 20px 70px #0005;
  border-radius:2px;
  transition:transform .5s}
.sheet-back{
  top:20px;
  left:125px;
  transform:rotate(11deg);
  background:#b7ccce;
  color:#173239;
  z-index:0}
.sheet-back:hover{
  transform:rotate(7deg) translateY(-6px)}
.sheet-front{
  top:100px;
  left:25px;
  transform:rotate(-8deg);
  background:#eeeadd;
  color:#1e3027;
  z-index:1}
.sheet-front:hover{
  transform:rotate(-4deg) translateY(-7px)}
.sheet-top{
  font-size:7px;
  letter-spacing:1.3px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  width:100%;
  border-bottom:1px solid #233b2829;
  padding-bottom:12px;
  white-space:nowrap}
.brand-sheet img{
  width:100%;
  height:220px;
  object-fit:contain;
  padding:18px 0}
.sheet-caption{
  font-size:8px;
  border-top:1px solid #233b2829;
  padding-top:10px;
  width:100%;
  display:flex;
  justify-content:space-between}
.sheet-back .sheet-caption{
  font-size:7px}
.art-star{
  position:absolute;
  right:-10px;
  bottom:8px;
  font-family:Arial,sans-serif;
  color:var(--orange);
  font-size:162px;
  line-height:1;
  z-index:3;
  animation:turn 90s linear infinite}
.art-note{
  position:absolute;
  left:3px;
  bottom:-22px;
  font-size:9px;
  color:#a6a49b;
  line-height:1.5;
  transform:rotate(-8deg)}
.hero-bottom{
  position:absolute;
  left:6%;
  right:6%;
  bottom:30px;
  display:flex;
  justify-content:space-between;
  color:#a5a39a;
  font-size:8px;
  letter-spacing:1.4px}
.hero-bottom p span{
  color:var(--orange);
  margin:0 11px}
.hero-bottom a{
  display:flex;
  gap:27px}
.hero-bottom a span{
  color:var(--orange);
  font-size:14px}
.statement-strip{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-around;
  padding:20px 3%;
  font-size:16px;
  font-weight:500;
  letter-spacing:2px;
  overflow:hidden;
  white-space:nowrap;
  gap:28px}
.statement-strip span:nth-child(even){
  color:var(--orange);
  font-size:27px;
  line-height:1}
.projects{
  padding-top:100px;
  padding-bottom:90px}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:46px;
  gap:30px}
.section-number{
  color:var(--orange);
  margin-right:6px}
.section-heading h2{
  font-size:clamp(36px,4.1vw,62px);
  margin-top:19px}
.section-heading>p{
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  padding-bottom:5px}
.section-heading em{
  color:var(--orange)}
.project-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:38px 28px}
.project-card{
  padding:0;
  background:none;
  text-align:left;
  min-width:0}
.project-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  min-height:350px;
  aspect-ratio:1.5;
  overflow:hidden;
  border-radius:3px}
.project-visual img{
  width:63%;
  height:66%;
  object-fit:contain;
  transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.project-card:hover .project-visual img{
  transform:scale(1.055)}
.project-category{
  position:absolute;
  top:23px;
  left:25px;
  font-size:8px;
  letter-spacing:1.4px;
  opacity:.65}
.project-open{
  position:absolute;
  right:20px;
  bottom:20px;
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border:1px solid currentColor;
  border-radius:50%;
  font-size:17px;
  opacity:.6;
  transition:transform .3s}
.project-card:hover .project-open{
  transform:rotate(45deg);
  opacity:1}
.project-refrescana{
  background:#e9edcf;
  color:#264a2b}
.project-luan{
  background:#b8ccd3;
  color:#102c42}
.project-luan img{
  width:66%;
  height:74%}
.project-marina{
  background:#f2d9bb;
  color:#a54b27}
.project-farmavet{
  background:#dbe8df;
  color:#335647}
.project-farmavet img{
  width:70%;
  height:60%}
.project-glaucia{
  background:#e9e1ef;
  color:#675174}
.project-glaucia img{
  width:57%;
  height:65%}
.project-roniclei{
  background:#e9e6de;
  color:#36313a}
.project-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding-top:15px}
.project-meta strong{
  font-size:13px;
  font-weight:500}
.project-meta>span{
  font-size:10px;
  color:var(--muted)}
.projects-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  margin-top:42px}
.button-outline{
  border:1px solid #57564f;
  background:transparent;
  color:var(--ink)}
.button-outline:hover{
  background:#22221e}
.projects-more>span{
  font-size:10px;
  color:var(--muted)}
.services{
  padding-top:90px;
  padding-bottom:100px;
  background:#171716;
  border-top:1px solid #242422}
.service-feature{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  background:#22221e;
  border:1px solid #38382f;
  border-radius:4px;
  padding:45px;
  margin-bottom:38px}
.pill{
  border:1px solid #786249;
  color:#efac7d;
  padding:6px 10px;
  font-size:8px;
  letter-spacing:1.5px;
  border-radius:20px}
.service-feature h3{
  font-size:61px;
  letter-spacing:-3px;
  margin-top:28px;
  line-height:1.05}
.service-feature h3 em{
  color:var(--orange);
  font-size:1.2em}
.service-feature-copy{
  position:relative;
  z-index:2;
  max-width:440px}
.service-feature-copy>p{
  font-size:12px;
  color:#bfbeb5;
  margin-bottom:16px}
.service-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:22px 0}
.service-tags span{
  font-size:8px;
  border:1px solid #4a4a40;
  padding:5px 8px;
  border-radius:3px}
.orange-link{
  color:var(--orange)}
.feature-star{
  position:absolute;
  left:28%;
  bottom:-53px;
  color:#ff6b2b10;
  font-size:220px;
  line-height:1;
  pointer-events:none}
.service-accordion details{
  border-bottom:1px solid #363630}
.service-accordion summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:25px;
  padding:25px 0;
  cursor:pointer}
.service-accordion summary::-webkit-details-marker{
  display:none}
.service-index{
  color:#77786e;
  font-size:9px;
  width:32px}
.service-accordion h3{
  font-size:20px;
  letter-spacing:-.6px;
  flex:1}
.service-summary{
  font-size:10px;
  color:#9a9b90;
  margin-right:50px}
.accordion-icon{
  font-size:23px;
  line-height:1;
  color:var(--orange);
  font-weight:400;
  transition:transform .3s}
.service-accordion details[open] .accordion-icon{
  transform:rotate(45deg)}
.service-detail{
  padding:0 70px 26px 57px;
  max-width:730px}
.service-detail p{
  font-size:12px;
  line-height:1.9;
  color:#b2b3a8;
  margin-bottom:15px}
.registration{
  background:var(--orange);
  color:#24170f;
  padding-top:80px;
  padding-bottom:34px;
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px 70px}
.registration .section-number{
  color:#3c2416}
.registration .eyebrow{
  color:#56321e}
.registration h2{
  font-size:clamp(34px,3.6vw,56px);
  margin:20px 0;
  line-height:1.1}
.registration h2 em{
  display:block}
.registration-intro>p:not(.eyebrow){
  font-size:12px;
  max-width:340px;
  line-height:1.9}
.button-dark{
  background:#1b1916;
  color:#f7eadb;
  margin-top:28px}
.button-dark:hover{
  background:#30251c}
.registration-benefits{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px 25px;
  align-content:center}
.registration-benefits article{
  border-top:1px solid #82411c66;
  padding-top:12px}
.registration-benefits article>span{
  font-size:22px}
.registration-benefits h3{
  font-size:13px;
  font-weight:700;
  margin:12px 0 10px}
.registration-benefits p{
  font-size:10px;
  line-height:1.9;
  color:#512e1b}
.registration-note{
  grid-column:1/-1;
  border-top:1px solid #82411c66;
  padding-top:22px;
  font-size:9px;
  line-height:1.9;
  color:#512e1b}
.registration-note a{
  text-decoration:underline;
  text-underline-offset:3px;
  white-space:nowrap}
.about{
  padding-top:110px;
  padding-bottom:100px;
  display:grid;
  grid-template-columns:1fr 1.1fr;
  gap:70px}
.name-art{
  position:relative;
  font-size:144px;
  letter-spacing:-13px;
  line-height:.8;
  font-weight:800;
  padding:55px 0 20px;
  width:340px;
  color:#e5e2d8}
.name-art>span{
  display:block}
.name-art>i{
  position:absolute;
  font-family:var(--serif);
  font-weight:400;
  font-size:75px;
  letter-spacing:-4px;
  bottom:-7px;
  right:-6px;
  color:var(--orange);
  transform:rotate(-10deg)}
.name-art>b{
  position:absolute;
  font:100px/1 Arial,sans-serif;
  right:-10px;
  top:30px;
  color:var(--orange);
  font-weight:400}
.about-caption{
  font-size:7px;
  letter-spacing:1.2px;
  color:#88887d;
  margin-top:39px}
.about-copy h2{
  font-size:clamp(31px,3.4vw,50px);
  margin:9px 0 25px}
.about-copy h2 em{
  color:var(--orange)}
.about-copy>p{
  font-size:12px;
  color:var(--muted);
  margin-bottom:17px;
  line-height:1.9}
.location{
  border-top:1px solid #3a3a32;
  padding-top:26px;
  margin-top:30px;
  display:flex;
  gap:13px;
  align-items:start}
.location-dot{
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin-top:7px;
  flex-shrink:0}
.location strong{
  font-size:11px;
  font-weight:500}
.location p{
  font-size:11px;
  margin:4px 0 9px;
  color:#c2c1b8}
.location small{
  display:block;
  color:#8f9085;
  font-size:9px;
  line-height:1.8;
  max-width:360px}
.process{
  padding-top:65px;
  padding-bottom:80px;
  border-top:1px solid var(--line);
  display:flex;
  gap:70px}
.process-title{
  min-width:240px}
.process-title h2{
  font-size:40px;
  margin-top:20px}
.process-title em{
  color:var(--orange)}
.process-steps{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:30px;
  align-items:start;
  padding-top:8px}
.process-steps article>span{
  font-size:10px;
  color:var(--orange)}
.process-steps h3{
  font-size:13px;
  margin:24px 0 12px;
  letter-spacing:-.3px}
.process-steps p{
  font-size:10px;
  color:var(--muted);
  line-height:1.9}
.contact{
  border-top:1px solid var(--line);
  background:#1b1b18;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  padding-top:90px;
  padding-bottom:90px}
.contact h2{
  font-size:clamp(36px,4.1vw,62px);
  margin:23px 0}
.contact h2 em{
  color:var(--orange)}
.contact-copy>p:not(.eyebrow){
  font-size:12px;
  line-height:1.9;
  color:var(--muted);
  max-width:330px}
.contact-number{
  display:flex;
  gap:26px;
  font-size:24px;
  letter-spacing:-1px;
  margin:29px 0 5px;
  align-items:center;
  width:fit-content}
.contact-number span{
  color:var(--orange)}
.contact-note{
  font-size:9px;
  color:#96978b}
.brief-form{
  padding-top:5px}
.field{
  margin-bottom:22px}
.field label{
  display:block;
  font-size:10px;
  margin-bottom:8px;
  color:#e3e2d8}
.field label span{
  font-size:8px;
  color:#97988a}
.field input,.field select,.field textarea{
  color:#e4e2d8;
  background:transparent;
  border:0;
  border-bottom:1px solid #555548;
  padding:9px 0 13px;
  border-radius:0;
  width:100%;
  font-size:12px;
  resize:vertical;
  outline-offset:4px}
.field input::placeholder,.field textarea::placeholder{
  color:#828478;
  opacity:1}
.field select{
  color:#aaa99c;
  cursor:pointer}
.field select option{
  background:#22221e;
  color:var(--ink)}
.brief-form>.button{
  width:100%;
  margin-top:6px}
.form-note{
  color:#97988b;
  font-size:8px;
  line-height:1.8;
  margin-top:14px;
  max-width:370px}
#form-feedback{
  font-size:11px;
  margin-top:15px;
  color:var(--ink)}
#form-feedback a{
  text-decoration:underline}
.footer{
  padding-top:50px;
  padding-bottom:24px}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-bottom:40px;
  gap:25px}
.footer-top>p{
  font-size:10px;
  color:var(--muted);
  line-height:1.8}
.footer-bottom{
  border-top:1px solid var(--line);
  padding-top:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  color:#828479;
  font-size:8px}
.privacy-button{
  padding:2px 0;
  background:none;
  color:#b2b3a8;
  font-size:8px}
.privacy-button:hover{
  color:var(--orange)}
dialog{
  border:1px solid #44443a;
  border-radius:7px;
  padding:0;
  color:var(--ink);
  background:var(--panel);
  max-width:min(90vw,850px);
  max-height:90vh;
  max-height:90dvh;
  overflow:auto}
dialog::backdrop{
  background:#000c;
  backdrop-filter:blur(8px)}
.dialog-close{
  position:absolute;
  right:16px;
  top:16px;
  border-radius:50%;
  background:#111e;
  color:#fff;
  width:36px;
  height:36px;
  font-size:25px;
  line-height:1;
  z-index:2}
.dialog-project-visual{
  height:min(55vh,470px);
  width:min(85vw,840px);
  padding:55px;
  display:flex;
  align-items:center;
  justify-content:center}
.dialog-project-visual img{
  width:75%;
  height:100%;
  object-fit:contain}
.dialog-project-info{
  padding:28px;
  display:flex;
  gap:25px;
  align-items:center;
  justify-content:space-between}
.dialog-project-info h2{
  margin-top:10px;
  font-size:29px}
.dialog-project-info .button{
  white-space:nowrap}
.privacy-dialog{
  padding:45px;
  max-width:560px}
.privacy-dialog h2{
  font-size:32px;
  margin:18px 0 23px}
.privacy-dialog>p:not(.eyebrow){
  font-size:12px;
  line-height:1.9;
  color:#b8b8ab;
  margin-bottom:15px}
.js .reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s ease}
.js .reveal.visible{
  opacity:1;
  transform:none}
@keyframes turn{
  to{
    transform:rotate(360deg)}
}
@media(min-width:1550px){
  .section-pad,.header{
    padding-left:max(6%,calc((100vw - 1450px)/2));
    padding-right:max(6%,calc((100vw - 1450px)/2))}
  .hero-bottom{
    left:max(6%,calc((100vw - 1450px)/2));
    right:max(6%,calc((100vw - 1450px)/2))}
  .hero-art{
    margin-left:65px}
  .art-star{
    right:30px}
  .hero{
    min-height:820px}
  .hero h1{
    font-size:110px}
  .brand-sheet{
    width:340px;
    height:380px}
  .brand-sheet img{
    height:250px}
  .sheet-back{
    left:150px}
  .sheet-front{
    left:45px}
}
@media(max-width:1100px){
  .hero{
    padding-top:60px;
    min-height:680px}
  .hero h1{
    font-size:72px}
  .hero-art{
    transform:scale(.85);
    transform-origin:center right;
    margin-left:-35px}
  .hero-actions{
    align-items:start;
    flex-direction:column;
    gap:17px}
  .art-star{
    right:-30px}
  .project-visual{
    min-height:290px}
  .service-feature{
    padding:32px}
  .registration{
    gap:35px}
  .about{
    gap:35px}
  .name-art{
    font-size:122px;
    width:290px}
  .name-art>i{
    font-size:64px}
  .process{
    gap:35px}
  .process-title{
    min-width:200px}
  .process-steps{
    gap:20px}
  .contact{
    gap:40px}
  .nav{
    gap:25px}
  .nav-contact{
    margin-left:0}
}
@media(max-width:800px){
  .header{
    height:88px}
  .wordmark{
    font-size:30px;
    width:160px}
  .wordmark-sub{
    font-size:7px;
    letter-spacing:1.8px}
  .nav{
    gap:22px}
  .nav-contact{
    padding:9px 12px;
    gap:12px}
  .nav>a{
    font-size:10px}
  .hero{
    grid-template-columns:1fr 1fr;
    min-height:650px;
    padding-top:45px}
  .hero .eyebrow{
    font-size:7px;
    letter-spacing:1.1px}
  .hero h1{
    font-size:60px}
  .hero-description{
    font-size:12px;
    max-width:280px}
  .hero-art{
    transform:scale(.68);
    margin-left:-110px;
    transform-origin:center right}
  .hero-copy .button{
    font-size:10px;
    padding:14px;
    gap:18px}
  .hero-copy .text-link{
    font-size:10px}
  .statement-strip{
    font-size:12px;
    gap:20px}
  .statement-strip span:nth-child(even){
    font-size:20px}
  .projects,.services{
    padding-top:65px;
    padding-bottom:65px}
  .section-heading>p{
    max-width:190px;
    font-size:10px}
  .section-heading h2{
    font-size:40px}
  .project-visual{
    min-height:240px}
  .project-category{
    font-size:6px;
    left:18px;
    top:18px}
  .project-meta strong{
    font-size:11px}
  .project-meta>span{
    font-size:8px}
  .project-grid{
    gap:28px 20px}
  .service-feature h3{
    font-size:46px}
  .service-feature-copy>p{
    font-size:11px}
  .service-summary{
    margin-right:15px;
    font-size:9px}
  .service-accordion h3{
    font-size:17px}
  .registration{
    padding-top:60px;
    grid-template-columns:1fr;
    gap:35px}
  .registration-intro>p:not(.eyebrow){
    max-width:450px}
  .registration h2{
    font-size:47px;
    max-width:550px}
  .registration-benefits{
    gap:25px 40px}
  .registration-benefits p{
    font-size:11px}
  .about{
    padding-top:70px;
    padding-bottom:70px;
    gap:35px;
    grid-template-columns:.85fr 1.15fr}
  .name-art{
    font-size:105px;
    letter-spacing:-10px;
    width:240px}
  .name-art>i{
    font-size:55px}
  .name-art>b{
    font-size:75px;
    right:0;
    top:32px}
  .about .eyebrow{
    font-size:8px}
  .about-copy h2{
    font-size:32px}
  .about-caption{
    font-size:6px;
    max-width:200px}
  .process{
    flex-direction:column;
    gap:30px}
  .process-title h2 br{
    display:none}
  .contact{
    padding-top:65px;
    padding-bottom:65px}
  .contact h2{
    font-size:39px}
  .contact .eyebrow{
    font-size:7px;
    letter-spacing:1px}
  .contact-number{
    font-size:21px}
  .footer-bottom{
    flex-wrap:wrap}
  .footer-bottom>span:last-child{
    width:100%}
}
@media(max-width:600px){
  html{
    scroll-padding-top:25px}
  .section-pad{
    padding-left:6%;
    padding-right:6%}
  .header{
    height:84px}
  .menu-toggle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:6px;
    border:1px solid #44443b;
    border-radius:3px}
  .menu-toggle span{
    display:block;
    width:18px;
    height:1px;
    background:var(--ink);
    transition:transform .2s}
  .menu-toggle[aria-expanded=true] span:first-child{
    transform:translateY(3.5px) rotate(45deg)}
  .menu-toggle[aria-expanded=true] span:last-child{
    transform:translateY(-3.5px) rotate(-45deg)}
  .nav{
    display:none;
    position:absolute;
    top:83px;
    left:0;
    right:0;
    background:#181816;
    border-bottom:1px solid var(--line);
    padding:25px 6%;
    align-items:stretch;
    flex-direction:column;
    gap:23px}
  .nav.open{
    display:flex}
  .nav>a{
    font-size:14px}
  .nav-contact{
    width:fit-content;
    padding:12px 18px;
    gap:30px}
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding-top:42px;
    padding-bottom:82px;
    gap:0;
    overflow:hidden}
  .hero .eyebrow{
    font-size:7px;
    letter-spacing:1.15px;
    gap:8px}
  .tiny-star{
    font-size:19px}
  .hero h1{
    font-size:clamp(57px,14vw,79px);
    margin-top:23px;
    margin-bottom:24px;
    line-height:1.03}
  .hero-description{
    font-size:12px;
    max-width:300px}
  .hero-actions{
    flex-direction:row;
    align-items:center;
    gap:18px;
    margin-top:26px;
    flex-wrap:wrap}
  .hero-copy .button{
    font-size:10px;
    padding:14px 15px;
    gap:20px}
  .hero-copy .text-link{
    font-size:9px;
    gap:7px}
  .hero-art{
    height:380px;
    width:430px;
    margin:5px auto -28px;
    transform:scale(.78);
    transform-origin:top left;
    left:calc(50% - 165px)}
  .brand-sheet{
    width:260px;
    height:300px;
    padding:18px}
  .sheet-back{
    left:120px;
    top:30px}
  .sheet-front{
    left:30px;
    top:91px}
  .brand-sheet img{
    height:190px}
  .art-orbit{
    width:360px;
    height:360px;
    left:20px;
    top:0}
  .art-star{
    font-size:129px;
    right:3px;
    bottom:5px}
  .art-note{
    left:15px;
    bottom:-27px}
  .hero-bottom{
    bottom:22px;
    gap:15px;
    align-items:center;
    font-size:6px;
    letter-spacing:.8px}
  .hero-bottom p span{
    margin:0 4px}
  .hero-bottom a{
    gap:8px}
  .statement-strip{
    padding:17px 6%;
    gap:18px;
    justify-content:start;
    font-size:10px;
    letter-spacing:1.2px}
  .statement-strip span:nth-child(even){
    font-size:18px}
  .projects{
    padding-top:58px;
    padding-bottom:55px}
  .section-heading{
    display:block;
    margin-bottom:30px}
  .eyebrow{
    font-size:8px;
    letter-spacing:1.2px}
  .section-heading h2{
    font-size:39px;
    margin-top:16px}
  .section-heading>p{
    max-width:100%;
    margin-top:19px;
    font-size:11px;
    line-height:1.8}
  .project-grid{
    grid-template-columns:1fr;
    gap:28px}
  .project-visual{
    min-height:260px;
    aspect-ratio:1.3}
  .project-category{
    font-size:7px;
    top:20px;
    left:20px}
  .project-meta{
    padding-top:12px}
  .project-meta strong{
    font-size:12px}
  .project-meta>span{
    font-size:9px}
  .projects-more{
    margin-top:32px;
    gap:16px;
    flex-direction:column}
  .projects-more>span{
    font-size:9px}
  .button{
    font-size:11px}
  .services{
    padding-top:58px;
    padding-bottom:58px}
  .service-feature{
    grid-template-columns:1fr;
    padding:27px;
    gap:25px;
    margin-bottom:15px}
  .service-feature h3{
    font-size:50px;
    margin-top:20px}
  .service-feature-copy>p{
    font-size:12px}
  .service-tags{
    margin:20px 0}
  .feature-star{
    left:auto;
    right:-28px;
    top:0;
    bottom:auto;
    font-size:200px}
  .service-accordion summary{
    gap:12px;
    padding:24px 0}
  .service-index{
    width:22px;
    font-size:8px}
  .service-accordion h3{
    font-size:16px;
    letter-spacing:-.5px}
  .service-summary{
    display:none}
  .accordion-icon{
    font-size:22px}
  .service-detail{
    padding-left:34px;
    padding-right:15px}
  .registration{
    padding-top:53px;
    padding-bottom:27px;
    gap:32px}
  .registration h2{
    font-size:40px;
    margin:20px 0;
    letter-spacing:-1.5px}
  .registration-intro>p:not(.eyebrow){
    font-size:12px}
  .registration .button{
    margin-top:24px}
  .registration-benefits{
    gap:27px 22px}
  .registration-benefits h3{
    font-size:12px;
    line-height:1.4}
  .registration-benefits p{
    font-size:10px;
    line-height:1.8}
  .registration-note{
    font-size:8px}
  .about{
    grid-template-columns:1fr;
    padding-top:57px;
    padding-bottom:55px;
    gap:38px}
  .name-art{
    font-size:117px;
    letter-spacing:-10px;
    line-height:.78;
    padding-top:35px;
    width:265px;
    margin:0 auto}
  .name-art>b{
    top:20px;
    right:-2px;
    font-size:85px}
  .name-art>i{
    font-size:65px;
    bottom:-5px}
  .about-caption{
    text-align:center;
    max-width:100%;
    margin-top:32px;
    font-size:6px;
    letter-spacing:1.5px}
  .about-copy h2{
    font-size:37px;
    margin-top:0}
  .about-copy>p{
    font-size:12px}
  .location{
    margin-top:25px}
  .location small{
    font-size:9px}
  .process{
    padding-top:42px;
    padding-bottom:55px;
    gap:28px}
  .process-title h2{
    font-size:36px;
    margin-top:15px}
  .process-steps{
    grid-template-columns:1fr;
    gap:24px;
    padding-top:0}
  .process-steps article{
    border-top:1px solid #33332e;
    padding-top:18px;
    display:grid;
    grid-template-columns:32px 1fr;
    gap:7px 11px}
  .process-steps h3{
    margin:0;
    font-size:14px;
    line-height:1.7}
  .process-steps p{
    grid-column:2;
    font-size:11px}
  .contact{
    grid-template-columns:1fr;
    gap:33px;
    padding-top:55px;
    padding-bottom:55px}
  .contact h2{
    font-size:43px;
    letter-spacing:-2px;
    margin:20px 0}
  .contact .eyebrow{
    font-size:7px;
    letter-spacing:1.1px}
  .contact-copy>p:not(.eyebrow){
    max-width:100%;
    font-size:12px}
  .contact-number{
    font-size:25px;
    margin-top:23px}
  .contact-note{
    font-size:10px}
  .brief-form{
    padding-top:0;
    border-top:1px solid #3d3d33;
    padding-top:30px}
  .field label{
    font-size:11px}
  .field input,.field select,.field textarea{
    font-size:13px}
  .form-note{
    font-size:9px}
  .brief-form>.button{
    padding:17px}
  .footer{
    padding-top:35px;
    padding-bottom:22px}
  .footer-top{
    align-items:start;
    flex-wrap:wrap;
    gap:27px;
    padding-bottom:28px}
  .footer-top>p{
    font-size:9px}
  .footer-top>.text-link{
    width:100%;
    font-size:10px}
  .footer-bottom{
    font-size:7px;
    align-items:center;
    gap:14px}
  .privacy-button{
    font-size:8px}
  .dialog-project-visual{
    height:350px;
    padding:35px 20px;
    width:88vw}
  .dialog-project-visual img{
    width:90%}
  .dialog-project-info{
    flex-direction:column;
    align-items:start;
    padding:24px}
  .dialog-project-info .eyebrow{
    font-size:7px}
  .dialog-project-info h2{
    font-size:27px}
  .privacy-dialog{
    padding:40px 24px 24px}
  .privacy-dialog h2{
    font-size:30px}
  .privacy-dialog p{
    font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto}
  *,*:before,*:after{
    animation:none!important;
    transition:none!important}
  .js .reveal{
    opacity:1;
    transform:none}
}
/* Portfolio update: preserve the original logos and their aspect ratios. */
.sheet-tecnobuild {
  background: #f2f1ec;
  color: #272825;
}
.sheet-tecnobuild img {
  width: 100%;
  object-fit: contain;
}
.project-tecnobuild {
  background: #f2f1ec;
  color: #272825;
}
.project-tecnobuild img {
  width: 80%;
  height: 56%;
}
.project-kore {
  background: #e8ede4;
  color: #314537;
}
.project-kore img {
  width: 52%;
  height: auto;
  max-height: 65%;
  object-fit: contain;
}
.project-registered {
  position: absolute;
  left: 25px;
  bottom: 26px;
  font-size: 7px;
  letter-spacing: 1.2px;
  padding: 5px 9px;
  border: 1px solid #27282540;
  border-radius: 20px;
}
@media (max-width: 600px) {
  .project-registered {
    left: 20px;
    bottom: 23px;
    font-size: 6px;
  }
}

/* Mobile fixes: constrain grid tracks rather than hide overflowing content. */
.hero-copy,
.contact-copy,
.brief-form,
.field {
  min-width: 0;
}
.art-orbit,
.art-star,
.art-note,
.feature-star {
  pointer-events: none;
}
@media (max-width: 600px) {
  .hero,
  .contact {
    grid-template-columns: minmax(0, 1fr);
  }
  .hero-copy {
    width: 100%;
  }
  .hero-art {
    justify-self: center;
    left: auto;
    margin: 20px 0 -55px;
    transform: scale(.72);
    transform-origin: top center;
  }
  .hero h1 {
    font-size: clamp(48px, 14vw, 79px);
  }
  .hero h1 em {
    display: block;
    margin-top: 2px;
  }
  .hero-actions {
    row-gap: 18px;
  }
  .hero-copy .text-link {
    min-height: 44px;
  }
  .field input,
  .field select,
  .field textarea {
    min-width: 0;
    max-width: 100%;
    font-size: 16px;
  }
  .brief-form > .button {
    gap: 12px;
    text-align: left;
    white-space: normal;
  }
  .brief-form > .button span {
    flex-shrink: 0;
  }
  .service-feature {
    min-width: 0;
    overflow: hidden;
  }
  .dialog-close {
    width: 44px;
    height: 44px;
  }
  .dialog-project-visual {
    width: 100%;
    height: min(350px, 52vh);
    height: min(350px, 52dvh);
  }
  .dialog-project-info {
    min-width: 0;
  }
  .dialog-project-info h2 {
    overflow-wrap: anywhere;
  }
  .dialog-project-info .button {
    max-width: 100%;
    white-space: normal;
  }
}
@media (max-width: 360px) {
  .hero-art {
    height: 340px;
    transform: scale(.60);
    margin-bottom: -66px;
  }
  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
@media (hover: none) {
  .button:hover,
  .project-card:hover .project-visual img,
  .project-card:hover .project-open {
    transform: none;
  }
  .sheet-back:hover {
    transform: rotate(11deg);
  }
  .sheet-front:hover {
    transform: rotate(-8deg);
  }
}

@media (max-width: 600px) {
  .project-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .project-visual {
    width: 100%;
    min-height: 0;
  }
}