/* Identidade: SOL (círculo) · ARCO (quarto de círculo / arco) · HORIZONTE (hairline)
   Regra nova: toda forma tem uma função. Nada decorativo solto. */
:root{
  --e:cubic-bezier(.16,1,.3,1);
  --paper:oklch(.965 .012 80);--sand:oklch(.9 .035 72);--sand-d:oklch(.85 .045 68);--ink:oklch(.25 .028 45);
  --clay:oklch(.6 .15 42);--mute:oklch(.48 .04 55);
  --hair:color-mix(in oklab,var(--ink) 22%,transparent);
  --serif:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Inter",system-ui,sans-serif;

  /* sistema de espaço: tudo deriva destes valores */
  --wrap:80rem;
  --gut:clamp(1.25rem,4vw,2.5rem);          /* margem lateral */
  --sec:clamp(4.5rem,10vw,8.5rem);          /* respiro vertical entre seções */
  --head:clamp(2.5rem,5vw,4.25rem);         /* título → conteúdo */
  --arc:clamp(2rem,5.5vw,4.5rem);           /* curvatura do horizonte entre seções */
  --cut:clamp(3rem,9vw,7rem);               /* canto em arco das molduras */
  --nav-h:4.5rem;
}
*,::before,::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 1rem);font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink)}
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.55;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.3, 0 0 0 0 0.22, 0 0 0 0 0.18, 0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
h1,h2,h3{font-family:var(--serif);font-weight:400;letter-spacing:-.025em}
a{color:inherit;text-decoration:none}ul,ol{list-style:none}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--clay);outline-offset:3px;border-radius:2px}
::selection{background:var(--clay);color:var(--paper)}
.page{position:relative;overflow-x:clip}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto}
.it{font-style:italic;color:var(--clay)}
.mini{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.skip{position:fixed;left:1rem;top:-4rem;z-index:300;padding:.7rem 1rem;background:var(--ink);color:var(--paper);font-size:.8rem;transition:top .25s}
.skip:focus{top:1rem}

/* elementos da marca */
.label{display:inline-flex;align-items:center;gap:.7rem;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--mute)}
.label::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--clay);flex:none}
.label::after{content:"";width:3rem;height:1px;background:var(--hair)}
.lnk{display:inline-flex;align-items:center;gap:1rem;font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.lnk::after{content:"↗";display:grid;place-items:center;width:2.7rem;height:2.7rem;border-radius:50%;border:1px solid currentColor;font-size:.95rem;letter-spacing:0;transition:background .45s var(--e),border-color .45s var(--e),color .45s var(--e),transform .45s var(--e)}
.lnk:hover::after{background:var(--clay);border-color:var(--clay);color:var(--paper);transform:rotate(45deg)}
.lnk.fill::after{background:var(--clay);border-color:var(--clay);color:var(--paper)}
.lnk.sm::after{width:2.1rem;height:2.1rem;font-size:.8rem}

/* animações de entrada */
@keyframes fu{from{opacity:0;transform:translateY(18px)}}
@keyframes chin{to{transform:none}}
@keyframes archIn{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sunrise{from{opacity:0;transform:translateY(40%) scale(.88)}}
@keyframes mq{to{transform:translateX(-50%)}}
.fu{animation:fu .9s var(--e) both;animation-delay:var(--d,0s)}
.js .reveal{opacity:0;translate:0 var(--y,16px);transition:opacity .8s var(--e) var(--d,0s),translate .8s var(--e) var(--d,0s)}
.js .reveal.in{opacity:1;translate:none}

/* ───────── nav ───────── */
.nav{position:fixed;inset:0 0 auto;z-index:60;height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 var(--gut);color:var(--ink);transition:background .4s,box-shadow .4s}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--clay);transform:scaleX(var(--sp,0));transform-origin:left}
.nav.scrolled{background:color-mix(in oklab,var(--paper) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--hair)}
.nav.is-open{background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--paper)}
.nav.is-open::after{opacity:0}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--serif);font-size:1.45rem;letter-spacing:-.01em}
.brand img{width:2.2rem;height:2.2rem;border-radius:50%;object-fit:cover}
.nav-links{display:none;gap:2.4rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase}
.nav-links a{position:relative;padding:.4rem 0;transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--clay);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--e)}
.nav-links a:hover{color:var(--clay)}
.nav-links a.on::after,.nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{display:flex;align-items:center;gap:.8rem}
.nav-cta .lnk{display:none}
.menu-btn{position:relative;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid currentColor}
.menu-btn span{position:absolute;left:50%;top:50%;width:1rem;height:1px;background:currentColor;transition:transform .5s var(--e)}
.menu-btn span:first-child{transform:translate(-50%,-3px)}
.menu-btn span:last-child{transform:translate(-50%,3px)}
.nav.is-open .menu-btn span:first-child{transform:translate(-50%,0) rotate(45deg)}
.nav.is-open .menu-btn span:last-child{transform:translate(-50%,0) rotate(-45deg)}

.menu{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2.5rem;padding:6rem var(--gut) 2.5rem;background:var(--ink);color:var(--paper);visibility:hidden;clip-path:circle(0 at calc(100% - var(--gut) - 1.4rem) 2.25rem);transition:clip-path .9s var(--e),visibility 0s .9s}
.menu.open{visibility:visible;clip-path:circle(150vmax at calc(100% - var(--gut) - 1.4rem) 2.25rem);transition:clip-path .9s var(--e),visibility 0s}
.m-nav{display:grid;gap:.4rem}
.m-link,.m-cta{opacity:0;transform:translateY(1.4rem);transition:opacity .6s var(--e),transform .8s var(--e),color .3s}
.m-link{font:clamp(2.8rem,13vw,4.5rem)/1.05 var(--serif);letter-spacing:-.025em}
.m-link:hover{color:var(--clay)}
.menu.open .m-link,.menu.open .m-cta{opacity:1;transform:none;transition-delay:calc(.25s + var(--i)*.07s)}

/* ───────── hero: cabe inteiro na primeira tela ───────── */
.hero{position:relative;display:flex;flex-direction:column;min-height:100svh;padding-top:var(--nav-h);overflow:clip}
.hero-main{flex:1 1 auto;width:100%;max-width:calc(var(--wrap) + var(--gut)*2);margin-inline:auto;padding:clamp(.25rem,1.5svh,1rem) var(--gut) clamp(1rem,2.8svh,1.9rem);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(7rem,1fr);gap:clamp(.6rem,1.8svh,1.5rem)}
.h-copy{position:relative;z-index:3;display:flex;flex-direction:column;align-items:flex-start}
.h1{margin-top:clamp(.5rem,1.4svh,1.1rem);font-size:clamp(2.5rem,min(13.5vw,7.2svh),4.6rem);line-height:.92;color:var(--ink)}
.h1-l{display:block;white-space:nowrap;overflow:hidden;padding:.05em .14em .16em 0;margin-bottom:-.14em}
.h1-l.it{padding-left:min(8vw,3.5rem)}
.js .h1 .ch{display:inline-block;transform:translateY(112%);animation:chin 1s var(--e) forwards;animation-delay:var(--cd,0s)}
.lead{margin-top:clamp(.7rem,1.8svh,1.6rem);max-width:27rem;font-size:clamp(.84rem,1.75svh,1rem);color:var(--mute);line-height:1.55}
.lead b{color:var(--ink);font-weight:500}
.h-btns{margin-top:clamp(.8rem,2.2svh,1.9rem);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.1rem}
.h-btns .lnk{gap:.6rem;font-size:.62rem;letter-spacing:.13em}
.h-btns .lnk::after{width:2.3rem;height:2.3rem}

/* foto em arco + sol atrás: o sol nasce por trás do ombro do arco */
.h-photo{position:relative;min-height:0;container-type:size}
.ph-box{position:relative;isolation:isolate;margin-left:auto;height:100%;aspect-ratio:3/4.3;max-width:100%}
@supports (container-type:size){.ph-box{height:min(100cqh,calc(100cqw*1.4333))}}
.ph-box::before{content:"";position:absolute;z-index:-1;inset:.9rem .9rem -.9rem -.9rem;border:1px solid var(--ink);border-radius:999px 999px 0 0;animation:fu 1s var(--e) .9s both}
.sun{position:absolute;z-index:0;right:-24%;top:-3%;width:100%;aspect-ratio:1;border-radius:50%;background:var(--clay);animation:sunrise 1.4s var(--e) .35s both}
.arch{position:absolute;inset:0;z-index:1;overflow:hidden;border-radius:999px 999px 0 0;background:var(--sand);animation:archIn 1.25s var(--e) .15s both}
.arch img{width:100%;height:100%;object-fit:cover;object-position:50% 18%}

/* horizonte: faixa de serviços (também fecha a primeira tela) */
.services{flex:none;position:relative;overflow:hidden;border-top:1px solid var(--ink);border-bottom:1px solid var(--hair);background:var(--paper)}
.services::before,.services::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:clamp(1.5rem,6vw,5rem);pointer-events:none}
.services::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.services::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
.svc-track{display:flex;width:max-content;animation:mq 46s linear infinite}
.services:hover .svc-track{animation-play-state:paused}
.svc-track ul{display:flex;flex:none}
.svc-track li{display:flex;align-items:center;gap:1.6rem;padding:clamp(.7rem,1.8svh,1.05rem) 0 clamp(.7rem,1.8svh,1.05rem) 1.6rem;font:clamp(1.15rem,2.4svh,1.4rem)/1 var(--serif);letter-spacing:-.01em;white-space:nowrap}
.svc-track li::after{content:"";width:.38rem;height:.38rem;border-radius:50%;background:var(--clay)}

/* ───────── sobre ───────── */
.about{padding:var(--sec) var(--gut) calc(var(--sec)*.55)}
.a-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:1.5rem}
.a-label,.a-h2{grid-column:1/-1}
.a-h2{margin-top:1.25rem;font-size:clamp(2.6rem,7vw,6.25rem);line-height:.98}
.skills{grid-column:1/-1;margin-top:var(--head);display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--hair)}
.skills li{padding:.85rem 0;border-bottom:1px solid var(--hair);font:1.5rem/1.2 var(--serif);transition:color .3s,padding-left .5s var(--e)}
.skills li:hover{color:var(--clay);padding-left:.6rem}
.a-side{grid-column:1/-1;margin-top:var(--head);display:flex;flex-direction:column;align-items:flex-start;gap:2rem}
.a-p{max-width:32rem;font-size:1.1rem;line-height:1.75;color:var(--mute)}

/* ───────── projetos ───────── */
.projects{position:relative;padding:calc(var(--sec)*.55) var(--gut) calc(var(--sec) + var(--arc))}
.p-head{display:grid;gap:var(--head) 1.5rem;margin-bottom:var(--head)}
.p-title h2{margin-top:1rem;font-size:clamp(3rem,8.5vw,7.5rem);line-height:.9}
.p-title h2 .it{display:block}
.p-intro{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;max-width:30rem;color:var(--mute);line-height:1.7}
.p-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(2.75rem,6vw,4.5rem) clamp(1.25rem,3vw,2.5rem)}
.card-btn{display:block;width:100%;text-align:left;cursor:pointer}
.vid{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--sand);border-radius:0 0 0 var(--cut)}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .9s var(--e)}
.card-btn:hover .vid video,.card-btn:focus-visible .vid video{transform:scale(1.04)}
.arrow{position:absolute;right:1.1rem;bottom:1.1rem;display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--clay);color:var(--paper);font-size:1.05rem;transition:transform .5s var(--e)}
.card-btn:hover .arrow,.card-btn:focus-visible .arrow{transform:rotate(45deg) scale(1.08)}
.cap{display:block;margin-top:1.1rem}
.cat{display:block;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--mute)}
.ttl{display:block;margin-top:.45rem;font:clamp(1.8rem,3.2vw,2.7rem)/1 var(--serif);letter-spacing:-.02em;transition:color .3s}
.card-btn:hover .ttl{color:var(--clay)}

/* modal */
.modal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:1rem;opacity:0;transition:opacity .3s ease-out}
.modal.show{display:flex}.modal.in{opacity:1}
.backdrop{position:absolute;inset:0;background:color-mix(in oklab,var(--ink) 55%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.panel{position:relative;z-index:10;display:grid;width:100%;max-width:72rem;max-height:calc(100svh - 2rem);overflow:auto;gap:1.5rem;background:var(--paper);padding:1rem;opacity:0;transform:translateY(40px) scale(.97);transition:opacity .6s var(--e),transform .6s var(--e)}
.modal.in .panel{opacity:1;transform:none}
.p-vid{width:100%;aspect-ratio:var(--vr,16/9);max-height:min(72svh,44rem);overflow:hidden;background:var(--ink);border-radius:0 0 0 var(--cut)}
.p-vid video{width:100%;height:100%;object-fit:contain}
.p-info{display:flex;flex-direction:column;padding:.5rem}
.p-title{margin-top:1rem;font-size:clamp(2.2rem,4vw,2.9rem);line-height:1}
.p-desc{margin-top:1rem;font-size:.92rem;line-height:1.65;color:var(--mute)}
.p-stack{margin-top:1.5rem}
.tags{margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.4rem 1rem;font:italic 1.1rem var(--serif)}
.tags span::before{content:"● ";font-size:.5rem;color:var(--clay);vertical-align:middle}
.p-cta{margin-top:auto;padding-top:2rem}
.close{position:absolute;right:1rem;top:1rem;z-index:2;display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--ink);color:var(--paper);font-size:1.4rem;line-height:1;transition:background .2s}
.close:hover{background:var(--clay)}

/* ───────── números ───────── */
.stats{position:relative;z-index:1;margin-top:calc(var(--arc)*-1);padding:calc(var(--sec)*.6 + var(--arc)) var(--gut) calc(var(--sec)*.75 + var(--arc));background:var(--ink);color:var(--paper);border-radius:50% 50% 0 0/var(--arc) var(--arc) 0 0}
.sg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3.25rem 1.5rem}
.js .stat{opacity:0;transform:translateY(22px);transition:opacity .8s var(--e) var(--d),transform .8s var(--e) var(--d)}
.js .on .stat{opacity:1;transform:none}
.num{font-family:var(--serif);font-size:clamp(3.2rem,6.2vw,5.75rem);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.03em;white-space:nowrap}
.suf{color:var(--clay);font-style:italic}
.ln{margin-top:1.1rem;height:1px;background:color-mix(in oklab,var(--paper) 30%,transparent)}
.js .ln{transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--e) calc(var(--d) + .3s)}
.js .on .ln{transform:scaleX(1)}
.lbl{margin-top:.8rem;font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:color-mix(in oklab,var(--paper) 65%,transparent)}

/* ───────── processo ───────── */
.process{position:relative;z-index:2;margin-top:calc(var(--arc)*-1);background:var(--paper);border-radius:50% 50% 0 0/var(--arc) var(--arc) 0 0;padding-bottom:var(--arc)}
.pr-pin{padding:calc(var(--sec)*.8 + var(--arc)) var(--gut) var(--sec)}
.pr-in{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--head)}
.pr-h2{margin-top:1rem;font-size:clamp(3.2rem,9vw,6rem);line-height:.9}
.pr-stage{display:none}

/* passos: trilho com formas que acendem conforme o progresso (sequência real, por isso numerados) */
.pr-steps{--row-h:3.5rem;--node:1.5rem;position:relative;margin-top:var(--head);padding-left:3.25rem}
.pstep{position:relative;--f:0;--ic:var(--ink);--ib:var(--ink)}
.js .pstep:not(.is-done):not(.is-active){--ic:transparent;--ib:color-mix(in oklab,var(--ink) 38%,transparent)}
.pstep.is-active{--ic:var(--clay);--ib:var(--clay)}
.pstep::before,.pstep::after{content:"";position:absolute;left:calc(var(--node)/2 - 3.25rem);top:calc(var(--row-h)/2);bottom:calc(var(--row-h)/-2);width:1px;margin-left:-.5px}
.pstep::before{background:var(--hair)}
.pstep::after{background:var(--clay);transform:scaleY(var(--f));transform-origin:top}
.pstep:last-child::before,.pstep:last-child::after{display:none}
.ico{position:absolute;z-index:1;left:-3.25rem;top:calc((var(--row-h) - var(--node))/2);display:grid;place-items:end center;width:var(--node);height:var(--node);padding-bottom:.2rem;background:var(--paper);border-radius:50%}
.ico i{display:block;background:var(--ic);border:1px solid var(--ib);transition:background-color .6s var(--e),border-color .6s var(--e)}
.i1{width:.45rem;height:.45rem;border-radius:50%}
.i2{width:.95rem;height:.95rem;border-radius:50%;background:transparent!important}
.i3{width:1rem;height:1rem;border-radius:100% 0 0 0}
.i4{width:1.25rem;height:.625rem;border-radius:1.25rem 1.25rem 0 0}
.i5{width:1.2rem;height:1.2rem;border-radius:50%}
.pstep-t{font:inherit;letter-spacing:0}
.pstep-btn{display:flex;align-items:center;gap:1rem;width:100%;height:var(--row-h);text-align:left;font:clamp(1.65rem,2.4vw,2.1rem)/1 var(--serif);letter-spacing:-.02em;transition:color .5s var(--e);cursor:default}
.pstep-btn:disabled{color:inherit}
.pstep-n{flex:none;min-width:1.9rem;font:italic 1.05rem var(--serif);letter-spacing:0;color:var(--clay)}
.js .pstep:not(.is-done):not(.is-active) .pstep-btn{color:var(--mute)}
.pstep-body{display:grid;grid-template-rows:1fr;transition:grid-template-rows .8s var(--e)}
.pstep-in{min-height:0;overflow:hidden;padding-left:2.9rem}
.pstep-in p{max-width:26rem;padding-bottom:1.5rem;font-size:.95rem;line-height:1.65;color:var(--mute)}

/* ── versão fixa (desktop): palco sticky que acompanha o scroll ── */
@media (min-width:64rem) and (min-height:40rem) and (prefers-reduced-motion:no-preference){
  .js .pr-track{height:calc(100svh + 5*50svh)}
  .js .pr-pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:var(--nav-h) var(--gut) 1.25rem}
  .js .pr-in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:clamp(2rem,5vw,5rem)}
  .js .pr-h2{font-size:clamp(3rem,5.4vw,5.25rem)}
  .js .pr-steps{margin-top:clamp(1.5rem,4svh,2.5rem)}
  .js .pstep-btn{cursor:pointer}
  .js .pstep-btn:hover{color:var(--clay)}
  .js .pstep::after{transition:transform .9s var(--e)}
  .js .pstep:not(.is-active) .pstep-body{grid-template-rows:0fr}
  .js .pstep-in p{opacity:0;transform:translateY(.6rem);transition:opacity .5s var(--e),transform .8s var(--e)}
  .js .pstep.is-active .pstep-in p{opacity:1;transform:none;transition-delay:.18s}

  .pr-stage{--u:clamp(.85rem,1.75vw,1.65rem);--water:26%;--oh:clamp(2.6rem,4.4vw,4rem);display:block;position:relative;overflow:hidden;width:100%;max-width:42rem;margin-inline:auto;height:min(33rem,calc(100svh - var(--nav-h) - 3.5rem));border-radius:999px 999px 0 0;background:linear-gradient(var(--sand),color-mix(in oklab,var(--sand) 65%,var(--paper)))}
  .pr-glow{position:absolute;inset:0;z-index:0;opacity:var(--p,0);background:radial-gradient(70% 80% at 50% calc(100% - var(--water)),color-mix(in oklab,var(--clay) 44%,transparent),transparent 70%)}
  /* halos: anéis que irradiam do horizonte a cada etapa concluída */
  .pr-halo{position:absolute;z-index:1;left:50%;bottom:var(--water);width:calc(var(--u)*var(--k));aspect-ratio:1;translate:-50% 50%;border-radius:50%;border:1px solid color-mix(in oklab,var(--clay) 55%,transparent);opacity:clamp(0,calc(var(--s,0) - var(--a)),1);scale:calc(.7 + clamp(0,calc(var(--s,0) - var(--a)),1)*.3);transition:opacity .9s var(--e),scale 1.3s var(--e)}
  .ha{--k:13;--a:1}.hb{--k:17.5;--a:2}.hc{--k:22;--a:3}
  .pr-water{position:absolute;z-index:2;left:0;right:0;bottom:0;height:var(--water);background:var(--sand-d);border-top:1px solid var(--ink)}
  .pr-odo{position:absolute;left:clamp(1.25rem,4vw,2.25rem);bottom:clamp(.9rem,2.4svh,1.5rem);height:var(--oh);overflow:hidden;font:italic var(--oh)/1 var(--serif);color:var(--clay)}
  .pr-odo-in{display:flex;flex-direction:column;transform:translateY(calc(var(--s,0)*var(--oh)*-1));transition:transform .95s var(--e)}
  .pr-odo-in span{display:block;height:var(--oh)}
  .pr-meter{position:absolute;right:clamp(1.25rem,4vw,2.25rem);bottom:clamp(1.4rem,3.4svh,2.1rem);width:min(38%,11rem);height:1px;background:color-mix(in oklab,var(--ink) 28%,transparent)}
  .pr-meter i{position:absolute;inset:0;background:var(--clay);transform:scaleX(var(--p,0));transform-origin:left}
  /* uma só forma que se transforma: ponto → anel → arco → meia-lua → sol */
  .pr-sun{position:absolute;z-index:3;left:50%;bottom:var(--water);translate:-50% 0;width:var(--w);height:var(--h);border-radius:var(--br);background:var(--bg);border:1px solid var(--bd);transition:width 1.1s var(--e),height 1.1s var(--e),border-radius 1.1s var(--e),background-color .8s var(--e),border-color .8s var(--e)}
  .pr-sun::after{content:"";position:absolute;left:-1px;right:-1px;top:calc(100% + 1px);height:100%;background:inherit;border:inherit;border-radius:inherit;transform:scaleY(-1);opacity:.16;-webkit-mask-image:linear-gradient(#000,transparent 70%);mask-image:linear-gradient(#000,transparent 70%)}
  .pr-stage[data-s="0"]{--w:calc(var(--u)*1.2);--h:var(--w);--br:50%;--bg:var(--ink);--bd:var(--ink)}
  .pr-stage[data-s="1"]{--w:calc(var(--u)*3);--h:var(--w);--br:50%;--bg:transparent;--bd:var(--ink)}
  .pr-stage[data-s="2"]{--w:calc(var(--u)*5);--h:var(--w);--br:100% 0 0 0;--bg:var(--ink);--bd:var(--ink)}
  .pr-stage[data-s="3"]{--w:calc(var(--u)*7);--h:calc(var(--u)*3.5);--br:calc(var(--u)*7) calc(var(--u)*7) 0 0;--bg:var(--clay);--bd:var(--clay)}
  .pr-stage[data-s="4"]{--w:calc(var(--u)*9);--h:var(--w);--br:50%;--bg:var(--clay);--bd:var(--clay)}
}

/* ───────── depoimentos ───────── */
.tm{position:relative;z-index:3;margin-top:calc(var(--arc)*-1);background:var(--sand);border-radius:50% 50% 0 0/var(--arc) var(--arc) 0 0;padding:calc(var(--sec)*.8 + var(--arc)) 0 calc(var(--sec) + var(--arc));overflow:hidden}
.tm .wrap{width:calc(100% - var(--gut)*2)}
.tm-head{margin-bottom:var(--head)}
.tm-head h2{margin-top:1rem;font-size:clamp(2.8rem,7vw,6rem);line-height:.95}
.tm-head h2 .it{display:block}
.tm-stage{display:grid;justify-items:center;align-items:stretch;padding:1.25rem var(--gut) 1.75rem;touch-action:pan-y;outline-offset:-4px}
.tc{grid-area:1/1;width:min(88vw,34rem);display:flex;flex-direction:column;justify-content:space-between;background:var(--paper);padding:2.2rem 2.2rem 2rem;box-shadow:0 30px 60px -30px rgb(60 40 30/.4)}
.tc.anim{transition:transform .7s var(--e),opacity .7s var(--e),filter .7s var(--e)}
.q{height:3.2rem;font:7rem/1 var(--serif);color:var(--clay)}
.q-txt{margin-top:.5rem;font:clamp(1.3rem,2.3vw,1.7rem)/1.3 var(--serif)}
.who{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem}
.ini{display:grid;place-items:center;flex:none;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--clay);color:var(--paper);font-size:.72rem;font-weight:600}
.nm{font-size:.85rem;font-weight:600}
.rl{font-size:.75rem;color:var(--mute)}
.tm-nav{display:flex;align-items:center;justify-content:center;gap:1.4rem;margin-top:1.5rem}
.rbtn{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;border:1px solid var(--ink);transition:background .3s,border-color .3s,color .3s}
.rbtn:hover{background:var(--clay);border-color:var(--clay);color:var(--paper)}
.count{min-width:4.5rem;text-align:center;font-size:.72rem;letter-spacing:.2em;color:var(--mute)}

/* ───────── contato ───────── */
.contact{position:relative;z-index:4;margin-top:calc(var(--arc)*-1);background:var(--ink);color:var(--paper);border-radius:50% 50% 0 0/var(--arc) var(--arc) 0 0;padding:calc(var(--sec)*.8 + var(--arc)) var(--gut) calc(var(--sec)*.8)}
.contact .label{color:color-mix(in oklab,var(--paper) 65%,transparent)}
.ct-h2{margin-top:1.4rem;font-size:clamp(3rem,9vw,8rem);line-height:.9}
.it2{display:block;font-style:italic;color:var(--clay)}
.ct-row{margin-top:var(--head);padding-top:2rem;display:grid;gap:2rem;border-top:1px solid color-mix(in oklab,var(--paper) 22%,transparent)}
.ct-p{max-width:22rem;line-height:1.65;color:color-mix(in oklab,var(--paper) 72%,transparent)}
.ct-btns{display:flex;flex-wrap:wrap;align-items:center;gap:1.5rem 2.5rem}
.mail{font:clamp(1.3rem,2.6vw,2rem) var(--serif);border-bottom:1px solid color-mix(in oklab,var(--paper) 50%,transparent);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.mail:hover{color:var(--clay);border-color:var(--clay)}

/* ───────── rodapé ───────── */
.foot{position:relative;overflow:hidden;background:var(--ink);color:var(--paper);padding:0 var(--gut)}
.f-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 1.5rem;padding-top:2.5rem;border-top:1px solid color-mix(in oklab,var(--paper) 22%,transparent)}
.f-brand{grid-column:1/-1}
.f-name{font:1.6rem var(--serif)}
.f-brand p{margin-top:.8rem;max-width:22rem;font-size:.88rem;color:color-mix(in oklab,var(--paper) 60%,transparent)}
.foot ul{margin-top:.8rem;font-size:.9rem}.foot li+li{margin-top:.5rem}
.foot a{transition:color .3s}.foot a:hover{color:var(--clay)}
.f-bottom{display:flex;flex-direction:column;gap:.5rem;margin-top:3rem;font-size:.72rem;color:color-mix(in oklab,var(--paper) 50%,transparent)}
.wordmark{margin-top:2rem;white-space:nowrap;text-align:center;font:clamp(4rem,17vw,16rem)/.8 var(--serif);letter-spacing:-.04em;color:color-mix(in oklab,var(--paper) 9%,transparent);transform:translateY(18%);user-select:none}

/* ───────── ≥ 768px ───────── */
@media (min-width:48rem){
  .nav-links{display:flex}
  .nav-cta .lnk{display:inline-flex}
  .menu-btn,.menu{display:none}

  .hero-main{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:minmax(min-content,1fr);column-gap:1.5rem;align-items:center}
  .h-copy{grid-column:1/8;grid-row:1}
  .h-photo{grid-column:8/13;grid-row:1;align-self:stretch}
  .h1{font-size:clamp(3.2rem,min(9vw,11.5svh),8.75rem)}
  .lead{font-size:clamp(.95rem,2svh,1.1rem);line-height:1.6}
  .h1-l.it{padding-left:min(7vw,6.5rem)}
  .h-btns{gap:.6rem 1.6rem}
  .h-btns .lnk{gap:1rem;font-size:.72rem;letter-spacing:.2em}
  .h-btns .lnk::after{width:2.7rem;height:2.7rem}
  .svc-track li{padding-left:2.2rem;gap:2.2rem}

  .skills{grid-column:1/7;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem}
  .a-side{grid-column:8/13}

  .p-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card:nth-child(even){margin-top:clamp(3rem,7vw,6rem)}

  .panel{grid-template-columns:minmax(0,3fr) minmax(0,2fr);padding:1.5rem;align-items:start}
  .p-info{padding:1rem;min-height:100%}
  .modal{padding:2.5rem}
  .panel{max-height:calc(100svh - 5rem)}

  .ct-row{grid-template-columns:minmax(0,22rem) auto;justify-content:space-between;align-items:end}
  .ct-btns{justify-content:flex-end}
  .f-grid{grid-template-columns:2fr 1fr 1fr}
  .f-brand{grid-column:auto}
  .f-bottom{flex-direction:row;justify-content:space-between}
}
@media (min-width:56rem){
  .p-head{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end}
  .p-title{grid-column:1/8}
  .p-intro{grid-column:9/13}
  .sg{grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem 2rem}
}

/* telas baixas: compacta a primeira tela sem perder nada */
@media (max-height:44rem) and (min-width:48rem){
  .lead{max-width:30rem}
}
@media (max-height:42rem) and (max-width:47.99rem){
  .lead{display:none}
}

/* ───────── movimento reduzido ───────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .fu,.sun,.arch,.ph-box::before{animation:none;opacity:1;clip-path:none;transform:none}
  .js .h1 .ch{animation:none;transform:none}
  .js .reveal{opacity:1;translate:none;transition:none}
  .js .stat{opacity:1;transform:none;transition:none}
  .js .ln{transform:none;transition:none}
  .svc-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .svc-track ul[aria-hidden]{display:none}
  .svc-track ul{flex-wrap:wrap;justify-content:center}
  .services::before,.services::after{display:none}
  .vid video,.card-btn:hover .vid video{transition:none;transform:none}
  .m-link,.m-cta{transition:none}
}