/* Studio Noar — estilos do site
   Ordem: tokens · base · componentes · seções (na ordem da página) · celular · movimento reduzido */

:root{
  /* cor (arquivos do logo) */
  --red:#E61E19;--blue:#0078D0;--yellow:#FFCF1F;--cream:#FFFFFA;--ink:#000;
  --stone:color-mix(in srgb,var(--cream) 91%,var(--ink));
  --grey:color-mix(in srgb,var(--ink) 22%,var(--cream));
  /* tipo */
  --f:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t-display:clamp(44px,6.2vw,100px);
  --t-title:clamp(28px,3.3vw,50px);
  --t-lead:clamp(19px,1.75vw,26px);
  --t-small:13px;
  /* espaço */
  --gutter:clamp(16px,3vw,40px);
  --pad:max(var(--gutter),calc((100vw - 1520px) / 2));
  --s-section:clamp(96px,11vw,168px);
  --s-head:clamp(32px,4vw,56px);
  --s-gap:16px;
  --r:0px;   /* cantos retos */
  /* movimento */
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{background:var(--cream);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:var(--gutter);top:-60px;z-index:10;background:var(--ink);color:var(--cream);padding:10px 14px;font-size:var(--t-small);text-decoration:none}
.skip:focus{top:12px}
.wrap{padding-inline:var(--pad)}
.small,.label{font-size:var(--t-small);line-height:1.35}
.label{font-weight:500;display:block}
.lead{font-size:var(--t-lead);font-weight:500;line-height:1.2;letter-spacing:-.03em}
.section{padding-top:var(--s-section)}
/* sem viúvas: títulos equilibrados, parágrafos sem palavra sozinha na última linha */
h1,h2,h3,.rise > span,.lead,.say,.reveal,.c-left .intro{text-wrap:balance}
p,li,dd,.svc-detail p,.svc-more p{text-wrap:pretty}

/* títulos de seção (usados pelo MENU e por Projetos) */
.sec-head{padding-bottom:20px}
.sec-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-small);font-weight:500;padding-bottom:12px;border-bottom:1px solid currentColor}
.sec-top h2{font-size:inherit;font-weight:inherit;letter-spacing:0;line-height:inherit}
.sec-head .say{margin-top:clamp(28px,4vw,56px);font-size:var(--t-title);font-weight:500;line-height:1.08;letter-spacing:-.04em;max-width:21em;text-wrap:balance}
.sec-body{padding-top:var(--s-head)}

/* revelações: títulos sobem, blocos aparecem */
.js .rise{overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.js .rise > span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease)}
.js .rise.in > span{transform:none}
.js .fade{opacity:0;transform:translateY(24px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .fade.in{opacity:1;transform:none}

/* botões: sempre arredondados, borda de 1,5 px */
.pill{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px 7px;background:var(--cream);color:var(--ink);
  font-size:var(--t-small);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;cursor:pointer;
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease)}
.pill:hover{background:var(--blue);border-color:var(--blue);color:var(--cream)}
.pill:active{transform:scale(.97)}
.pill.dark{background:var(--ink);color:var(--cream)}
.pill.dark:hover{background:var(--blue);border-color:var(--blue)}
.pill svg{width:10px;height:10px;transition:transform .5s var(--ease)}
.pill:hover svg{transform:translate(2px,-2px)}

/* imagem provisória em retícula, usada enquanto não há foto */
.ht{position:relative;overflow:hidden;background:var(--bg,var(--stone));isolation:isolate;display:block}
.ht::before{content:"";position:absolute;inset:-5%;z-index:-1;
  background:radial-gradient(circle,var(--c,var(--ink)) 40%,transparent 43%) 0 0/var(--s,9px) var(--s,9px);
  -webkit-mask:radial-gradient(ellipse var(--w,64%) var(--h,60%) at var(--x,50%) var(--y,55%),#000 25%,transparent 74%);
          mask:radial-gradient(ellipse var(--w,64%) var(--h,60%) at var(--x,50%) var(--y,55%),#000 25%,transparent 74%)}
.ht figcaption{position:absolute;left:12px;bottom:10px;font-size:12px;color:var(--lc,var(--ink))}

/* ========== 1. Abertura: dois painéis lado a lado ========== */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;height:100dvh;min-height:600px}
.panel{position:relative;border-radius:var(--r);overflow:hidden}
.panel-txt{background:var(--yellow);display:flex;flex-direction:column;justify-content:space-between;padding:clamp(16px,1.8vw,26px)}
.panel-top{display:flex;justify-content:space-between;align-items:flex-start;gap:5px;flex-wrap:wrap}
.pill.cta{background:var(--red);border-color:var(--red);color:var(--cream)}
.pill.cta:hover{background:var(--blue);border-color:var(--blue)}
.hero-logo{display:block;width:100%;color:var(--red)}
.hero-logo svg{display:block;width:100%;height:auto}
.hero .nav{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:5px}
.js .hero-logo svg{transform:translateY(105%);animation:logo-up 1.1s var(--ease) .25s forwards}
@keyframes logo-up{to{transform:none}}
.sticker{position:absolute;z-index:2;width:clamp(72px,6vw,96px);aspect-ratio:1;border-radius:50%;background:var(--red);color:var(--cream);display:grid;place-items:center;
  right:clamp(20px,3vw,48px);bottom:calc(clamp(16px,1.8vw,26px) + 6vw);pointer-events:none;
  transition:scale .5s var(--ease),background .35s var(--ease),color .35s var(--ease)}
.sticker .spin{display:grid;place-items:center;width:100%;height:100%;animation:spin 18s linear infinite}
.sticker svg{width:72%;height:auto;display:block}
.panel-txt:hover .sticker,.panel-txt.touching .sticker{scale:1.12;background:var(--ink);color:var(--yellow)}
.panel-txt:hover .sticker .spin,.panel-txt.touching .sticker .spin{animation-duration:4s}
@keyframes spin{to{transform:rotate(360deg)}}
/* abertura: fotos dos projetos se alternam */
.reel{position:absolute;inset:0;background:var(--stone)}
.reel figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.2s var(--ease)}
.reel figure.on{opacity:1;z-index:1}
.reel img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.06);transition:transform 6s linear,scale 1.2s var(--ease)}
.reel figure.on img{transform:scale(1)}
.reel figcaption{position:absolute;left:clamp(16px,1.8vw,26px);bottom:clamp(14px,1.6vw,22px);display:flex;gap:8px;align-items:center;
  background:var(--cream);color:var(--ink);border-radius:999px;padding:6px 14px 7px;font-size:var(--t-small);font-weight:500;line-height:1.2;text-decoration:none}
@media (min-width:901px){.reel figcaption{padding:4px 10px 5px;font-size:11px;letter-spacing:.01em}}
.js .panel{animation:panel-in 1s var(--ease) both}
.js .panel-img{animation-delay:.12s}
@keyframes panel-in{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* ========== 2. Frase central + O estúdio (texto que se revela ao rolar) ========== */
.float-sec{position:relative;height:clamp(460px,62vh,640px);margin-block:var(--s-section) var(--s-head)}
.float-title{position:absolute;inset:0;display:grid;place-content:center;text-align:center;z-index:2;pointer-events:none}
.float-title h2{font-size:clamp(40px,5vw,84px);font-weight:600;line-height:.92;letter-spacing:-.06em}
.float-title p{margin-top:.35em;font-size:clamp(24px,2.9vw,48px);font-weight:500;line-height:1;letter-spacing:-.045em}
.floater{position:absolute;overflow:hidden}
.js .floater{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease)}
.js .floater::before{transform:scale(1.25);transition:transform 1.6s var(--ease)}
.js .floater.in{clip-path:inset(0)}
.js .floater.in::before{transform:none}
.floater.b{transition-delay:.15s}
.floater.b::before{transition-delay:.15s}
.floater.c{transition-delay:.3s}
.floater.c::before{transition-delay:.3s}
.floater.a{left:var(--pad);top:8%;width:clamp(130px,15vw,230px);aspect-ratio:4/5}
.floater.b{right:calc(var(--pad) + 13vw);top:0;width:clamp(110px,11.5vw,180px);aspect-ratio:4/3}
.floater.c{right:var(--pad);bottom:0;width:clamp(120px,12.5vw,200px);aspect-ratio:1}
.reveal-sec{position:relative;z-index:1;padding-bottom:var(--s-section)}
.reveal{font-size:var(--t-title);font-weight:500;line-height:1.08;letter-spacing:-.04em;max-width:21em}
.reveal .w{color:var(--grey);transition:color .25s linear}
.reveal .w.on{color:var(--ink)}
.reveal .w.q.on{color:var(--red)}
.reveal-sec .pill{margin-top:28px}

/* ========== 3. Serviços: lista com descrição ao lado ========== */
.svc{position:relative;z-index:1;margin:0 10px;background:var(--blue);color:var(--cream);border-radius:var(--r);padding:clamp(16px,1.8vw,26px)}
.svc-top{display:flex;justify-content:space-between;align-items:baseline;font-size:var(--t-small);font-weight:500;padding-bottom:12px;border-bottom:1px solid color-mix(in srgb,var(--cream) 30%,transparent)}
.svc-body{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-gap);padding-top:var(--s-head)}
.svc-list{list-style:none;grid-column:1/9;align-self:end}
.svc-row{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:clamp(10px,1vw,16px);padding-block:4px;
  font-size:clamp(30px,4.3vw,70px);font-weight:600;line-height:.98;letter-spacing:-.045em;text-transform:uppercase;opacity:.4;transition:opacity .4s var(--ease)}
.svc-row .thumb{flex:none;width:1.05em;height:.82em;transition:transform .5s var(--ease)}
.svc-row[aria-current="true"]{opacity:1}
.svc-row[aria-current="true"] .thumb{transform:scale(1.08)}
.svc-row:focus-visible{outline:2px solid var(--yellow);outline-offset:4px}
.svc-detail{grid-column:9/13;position:relative;display:grid;align-self:stretch;overflow:hidden}
.svc-detail .d{grid-area:1/1;display:flex;flex-direction:column;gap:14px;opacity:0;transform:translateY(12px);transition:opacity .45s var(--ease),transform .6s var(--ease);pointer-events:none}
.svc-detail .d.on{opacity:1;transform:none;pointer-events:auto}
.svc-detail .ht{aspect-ratio:4/3;width:100%;margin-bottom:auto}
.svc-detail h3,.svc-more h3{font-size:var(--t-lead);font-weight:500;letter-spacing:-.03em;line-height:1.15}
.svc-detail p,.svc-more p{color:color-mix(in srgb,var(--cream) 82%,var(--blue));max-width:40ch}
.svc-more{display:none}

/* ========== 4. Método MENU: cards empilhados em pasta ========== */
.menu{--peek:84px;--H:calc(var(--peek) + min(42vh,380px));--in:clamp(16px,1.8vw,26px);--off:clamp(10px,1.6vw,24px)}
.mstack{list-style:none;display:grid;gap:0;margin-inline:calc(10px - var(--pad))}
.mcard{position:sticky;top:calc(10px + var(--i) * var(--peek));margin-left:calc(var(--i) * var(--off));border-radius:var(--r);overflow:hidden;
  height:calc(var(--H) + (3 - var(--i)) * var(--peek));display:flex;flex-direction:column;
  background:var(--bg);color:var(--fg,var(--ink))}
.mhead{height:var(--peek);display:flex;align-items:center;gap:clamp(12px,1.4vw,20px);
  padding-inline:var(--in)}
.mhead .k,.mhead h3{font-size:var(--t-title);letter-spacing:-.045em;line-height:1}
.mhead .k{font-weight:600;width:1.1em;flex:none}
.mhead h3{font-weight:500;white-space:nowrap}
.mhead .tag{margin-left:auto;font-size:var(--t-small);font-weight:500;white-space:nowrap;border:1.5px solid currentColor;border-radius:999px;padding:5px 12px 6px;line-height:1.2}
.mbody{flex:1;display:grid;grid-template-columns:1fr 1.15fr}
.mbody .big{padding:0 var(--in) var(--in);align-self:end;font-weight:600;font-size:clamp(110px,15vw,230px);line-height:.8;letter-spacing:-.08em}
.mbody .txt{padding:var(--in);display:flex;align-items:flex-end}
.mbody .txt p{max-width:24ch;font-size:clamp(22px,2.2vw,34px);line-height:1.1;letter-spacing:-.035em}


/* ========== 5. Projetos: lista + projeto completo em tela cheia ========== */
.plist{list-style:none}
.plist li{border-bottom:1px solid var(--ink)}
.prow{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-gap);align-items:start;padding-block:24px}
.plist li:first-child .prow{padding-top:8px}
.prow:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.prow .pname{grid-column:1/7;font-weight:600;font-size:var(--t-title);line-height:1;letter-spacing:-.05em;transition:transform .6s var(--ease)}
.prow .thumb{grid-column:7/10;aspect-ratio:4/3;display:block;width:100%;height:auto;object-fit:cover}
.thumb-frame{overflow:hidden}
.thumb-frame img{display:block;width:100%;height:100%;object-fit:cover}
.prow .pmeta{grid-column:10/13;display:flex;flex-direction:column;gap:4px;font-size:var(--t-small);line-height:1.35;height:100%}
.prow .more{margin-top:auto;padding-top:12px;display:inline-flex;align-items:center;gap:6px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.prow .more svg{width:11px;height:11px;transition:transform .5s var(--ease)}
.prow:hover .pname{transform:translateX(10px)}
.prow:hover .more svg{transform:translate(2px,-2px)}
.pdialog{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100dvh;max-height:100dvh;background:var(--bg);color:var(--fg,var(--ink));overflow-y:auto}
.pdialog[open]{animation:pin .6s var(--ease)}
.pdialog::backdrop{background:rgba(0,0,0,.5)}
@keyframes pin{from{transform:translateY(32px);opacity:0}to{transform:none;opacity:1}}
.pbar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad);background:var(--bg)}
.pclose{all:unset;cursor:pointer;border:1.5px solid currentColor;border-radius:999px;padding:6px 14px 7px;font-size:var(--t-small);font-weight:500;line-height:1.2;transition:transform .4s var(--ease)}
.pclose:active{transform:scale(.97)}
.pclose:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.project{padding-block:clamp(8px,2vw,24px) var(--s-head);display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-gap);min-height:calc(100dvh - 64px)}
.project header{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:inherit;align-items:start}
.project h3{grid-column:1/5;font-weight:700;font-size:var(--t-display);letter-spacing:-.06em;line-height:.9}
.project .meta{grid-column:5/8}
.project .desc{grid-column:8/13;max-width:44ch}
.project .thumbs{grid-column:1/6;align-self:end;display:grid;grid-template-columns:1fr 1fr;gap:inherit}
.project .thumbs .ht{aspect-ratio:4/5}
.project .hero-img{grid-column:7/13;align-self:end;aspect-ratio:4/3.3}
.project dl{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:inherit;border-top:1px solid currentColor;padding-top:12px}
.project dt{font-size:12px;opacity:.75}
.project dd{font-weight:500;letter-spacing:-.015em}
body.lock{overflow:hidden}

/* zoom leve nas fotos ao passar o mouse (só em telas com mouse) */
.thumb-frame img,.gallery img,.svc-detail .ht,.prow .ht.thumb{transition:transform 1s var(--ease)}
.floater{transition:scale .9s var(--ease)}
@media (hover:hover){
  .panel-img:hover .reel img{scale:1.04}
  .prow:hover .thumb-frame img,.prow:hover .ht.thumb{transform:scale(1.06)}
  .gallery figure:hover img{transform:scale(1.04)}
  .svc-detail:hover .ht{transform:scale(1.03)}
  .floater:hover{scale:1.05}
}

/* estudo de caso (projetos com fotos reais) */
.case{padding-block:clamp(8px,2vw,24px) var(--s-section)}
.case-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-gap);row-gap:clamp(28px,3vw,48px);padding-bottom:var(--s-head)}
.case-head h3{grid-column:1/7;font-weight:700;font-size:var(--t-display);letter-spacing:-.06em;line-height:.9}
.case-meta{grid-column:7/13;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-gap);align-self:end;border-top:1px solid currentColor;padding-top:12px}
.case-meta dt{font-size:12px;opacity:.7}
.case-meta dd{font-weight:500}
.case-text{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s-gap)}
.case-text > div:first-child{grid-column:1/6}
.case-text > div:last-child{grid-column:7/12}
.case-text h4{font-size:var(--t-small);font-weight:500;margin-bottom:10px}
.case-text p{font-size:var(--t-lead);font-weight:500;line-height:1.22;letter-spacing:-.025em}
.gallery{display:grid;gap:var(--s-gap)}
.gallery figure{margin:0;overflow:hidden;background:var(--stone)}
.gallery img{display:block;width:100%;height:auto}
.vento-gallery video{display:block;width:100%;height:auto;background:#000}
.vento-credit{margin-top:var(--s-head);max-width:65ch}
.gallery .pair{display:flex;gap:var(--s-gap);align-items:flex-start}
.gallery .pair > :first-child{flex:var(--a) 1 0;min-width:0}
.gallery .pair > :last-child{flex:var(--b) 1 0;min-width:0}

/* ========== 6. Contato: dois painéis, como a abertura ========== */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:10px;margin-top:var(--s-section)}
.contact .panel{padding:clamp(16px,1.8vw,26px)}
.c-left{background:var(--red);color:var(--cream);display:flex;flex-direction:column;justify-content:space-between;min-height:min(86vh,760px)}
.c-left h2{font-size:clamp(52px,7.4vw,124px);font-weight:700;line-height:.88;letter-spacing:-.065em}
.c-left h2.rise{padding:0 .12em .06em;margin:0 -.12em}
.c-left h2.rise > span{padding-bottom:.3em;margin-bottom:-.24em}
.c-left .intro{max-width:26ch;font-size:var(--t-lead);font-weight:500;line-height:1.2;letter-spacing:-.03em}
.c-right{background:var(--stone)}
form{display:grid;gap:24px;align-content:start;max-width:560px}
.field{display:grid;gap:6px}
.field label,.legend{font-size:var(--t-small);font-weight:500}
.field input{all:unset;border-bottom:1.5px solid var(--ink);padding:6px 0 10px;font-size:clamp(18px,1.5vw,22px);letter-spacing:-.02em;font-family:var(--f)}
.field input::placeholder{color:color-mix(in srgb,var(--ink) 38%,var(--stone))}
.field input:focus{border-color:var(--red)}
fieldset{border:0;display:grid;gap:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chips span{display:inline-block;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px 7px;font-size:var(--t-small);font-weight:500;line-height:1.2;transition:background .35s var(--ease),color .35s var(--ease)}
.chips input:checked + span{background:var(--ink);color:var(--cream)}
.chips input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.submit{justify-self:start;background:var(--red);border-color:var(--red);color:var(--cream);font-size:15px;padding:8px 18px 9px}
.submit:hover{background:var(--blue);border-color:var(--blue)}
.status{font-size:15px;min-height:1.4em}

footer{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-gap);padding-block:20px 26px;font-size:var(--t-small);color:color-mix(in srgb,var(--ink) 70%,var(--cream))}
footer > :last-child{justify-self:end}
footer a{text-decoration:none}
footer a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* barra e menu do celular: escondidos no computador */
.mbar,.mnav{display:none}

/* ========== Celular e tablet (até 900 px) ========== */
@media (max-width:900px){
  :root{--t-small:14px;--bar:60px}
  .pill{padding:11px 16px;font-size:14px}
  /* barra fixa */
  .mbar{display:flex;align-items:center;gap:6px;position:fixed;inset:0 0 auto 0;z-index:8;height:var(--bar);padding:0 10px 0 16px;background:var(--cream)}
  .mbar-logo{display:block;width:104px;color:var(--red);margin-right:auto}
  .mbar-logo svg{display:block;width:100%;height:auto}
  .mbar .pill{padding:12px 14px}
  .mnav{position:fixed;inset:var(--bar) 0 0 0;z-index:7;background:var(--cream);padding:24px 16px;display:flex;flex-direction:column;gap:4px}
  .mnav[hidden]{display:none}
  .mnav a{font-size:44px;font-weight:600;letter-spacing:-.05em;line-height:1.05;text-decoration:none;padding-block:4px}
  .mnav a:active{color:var(--blue)}
  body.menu-open{overflow:hidden}
  /* abertura em uma tela */
  .hero,.contact{grid-template-columns:1fr;height:auto}
  .hero{min-height:0;padding-top:calc(var(--bar) + 4px)}
  .panel-top{display:none}
  .panel-txt{min-height:0;padding:16px;gap:0;justify-content:flex-end;height:calc(46svh - var(--bar))}
  .panel-img{height:calc(54svh - 24px)}
  .sticker{width:60px;right:16px;top:16px;bottom:auto}
  /* frase sem imagens soltas */
  .float-sec{height:auto;min-height:0;margin:0;padding:var(--s-section) var(--pad)}
  .float-title{position:static}
  .floater{display:none}
  .reveal-sec{padding-top:0}
  /* serviços: só os nomes; tocar abre a descrição */
  .svc{padding-bottom:40px}
  .svc-list{grid-column:1/-1;align-self:start}
  .svc-row{font-size:28px;line-height:1;letter-spacing:-.04em;gap:14px;opacity:1;padding-block:8px}
  .svc-row .thumb{display:none}
  .svc-more .mimg{display:block;aspect-ratio:16/10;width:100%;margin-bottom:16px}
  .svc-more h3{font-size:20px;margin-bottom:6px}
  .svc-detail{display:none}
  .svc-row::after{content:"+";margin-left:auto;font-weight:400;font-size:.7em;transition:rotate .4s var(--ease)}
  .svc-row[aria-expanded="true"]::after{rotate:45deg}
  .svc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
  .svc-more > .in{overflow:hidden}
  .svc-row[aria-expanded="true"] + .svc-more{grid-template-rows:1fr}
  .svc-more .in > div{padding:4px 0 18px}
  .svc-body{padding-top:56px}
  /* projetos */
  .prow .pname{grid-column:1/-1}
  .prow .thumb{grid-column:1/8;margin-top:6px}
  .prow .pmeta{grid-column:8/13;margin-top:6px}
  /* MENU: cards mais baixos, sem a letra gigante */
  .menu{--peek:56px;--H:190px;--off:8px}
  .mcard{top:calc(var(--bar) + 6px + var(--i) * var(--peek))}
  .mhead .tag{display:none}
  .mbody{display:flex;align-items:flex-end}
  .mbody .big{display:none}
  .mbody .txt{padding:0 var(--in) var(--in)}
  .mbody .txt p{font-size:22px}
  /* projeto completo */
  .case-head h3,.case-meta,.case-text > div:first-child,.case-text > div:last-child{grid-column:1/-1}
  .case-text{row-gap:24px}
  .gallery{gap:12px}
  .gallery .pair{gap:8px}
  .project{min-height:auto}
  .project h3,.project .meta,.project .desc,.project .thumbs,.project .hero-img{grid-column:1/-1}
  .project header{row-gap:10px}
  .project dl{grid-template-columns:1fr 1fr;row-gap:14px}
  .pbar{padding-top:calc(var(--bar) + 12px)}
  /* contato sem vazio */
  .c-left{min-height:0;gap:40px;padding-block:28px}
  footer{grid-template-columns:1fr 1fr;row-gap:8px}
  footer > :nth-child(2n){justify-self:end}
  .sec-head .say{margin-top:24px}
  section[id]{scroll-margin-top:calc(var(--bar) + 8px)}
}

/* ========== Movimento reduzido ========== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rise > span,.js .fade,.js .hero-logo svg{transform:none;opacity:1}
  .reveal .w{color:var(--ink)}
  .reveal .w.q{color:var(--red)}
}

/* Duda Sodré: a própria página, com movimentos de câmera suaves. */
.duda-showroom{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer;touch-action:pan-y}
.duda-showroom>img{display:block;width:100%;height:auto;transform-origin:0 0;max-width:none}
.duda-showroom:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.duda-details{display:grid;grid-template-columns:1fr 1.25fr;gap:var(--s-gap);margin-block:var(--s-gap) 32px;align-items:center}
.duda-details figure{margin:0;min-width:0}
.duda-details img{width:100%;height:auto;display:block}
.duda-details figcaption{font-size:14px;line-height:1.4;margin-top:12px}
.duda-visit{margin-block:16px 32px}
@media(max-width:700px){.duda-details{gap:8px;align-items:start}.duda-details figcaption{font-size:12px;margin-top:8px}}

/* Camisas Fominha: cada aplicação entra sobre a anterior. */
.fominha-shirts{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;touch-action:pan-y}
.fominha-shirts img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:none;transform:none}
.fominha-shirts img:nth-child(n+2){animation:fominha-cover 8.4s cubic-bezier(.32,.72,0,1) infinite both;animation-play-state:paused}
.fominha-shirts img:nth-child(3){animation-name:fominha-cover-third}
.fominha-shirts img:nth-child(4){animation-name:fominha-cover-return}
.fominha-shirts.is-playing img{animation-play-state:running}
.fominha-shirts:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@keyframes fominha-cover{0%,24%{clip-path:inset(100% 0 0)}33%,100%{clip-path:inset(0)}}
@keyframes fominha-cover-third{0%,56%{clip-path:inset(100% 0 0)}65%,100%{clip-path:inset(0)}}
@keyframes fominha-cover-return{0%,89%{clip-path:inset(100% 0 0)}100%{clip-path:inset(0)}}
@media(prefers-reduced-motion:reduce){.fominha-shirts img:nth-child(n+2){display:none}}