/* ============================================================
   NOTHING[ ] — CONCEITO v2 "Câmara escura / cinema editorial"
   Direção: dark cinético/expressivo, base Graphite, refinado-ousado.
   Refs aprovadas: Mucho (statement bottom-left), Porto Rocha
   (relógio/índice editorial + ticker), AKA (mídia cinematográfica).
   100% marca: Juturu + Geológica, paleta oficial, colchetes, copy intacta.
   Override carregado depois de style.css. Não-destrutivo.
   ============================================================ */

@font-face{font-family:'Juturu';src:url(fonts/Juturu.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geologica';src:url(fonts/Geologica.woff2) format('woff2');font-weight:100 900;font-display:swap}

:root{
  --graphite:#171717; --mist:#FBFBFC; --ash:#C7C7C7; --nothing:#D6F503; --carbon:#313236;
  --surface:#1b1c1a; --surface-2:#202120;
  --disp:'Juturu',-apple-system,Helvetica,Arial,sans-serif;
  --body:'Geologica',-apple-system,Helvetica,Arial,sans-serif;
}
html,body{background:var(--graphite)}
/* ajuste 3: remove o cursor lime customizado (a "bolinha verde" era o cursor) */
.cursor{display:none!important}
body{cursor:auto}

/* ---------------- HERO v2 ---------------- */
.vhero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--gut) clamp(28px,4vw,56px);overflow:hidden;isolation:isolate}

/* mídia cinematográfica: VÍDEO full-bleed, levemente escurecido p/ o tipo liderar */
.vhero-media{position:absolute;inset:0;z-index:-3;background:var(--graphite);overflow:hidden}
.vhero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.05) brightness(.66);transform:scale(1.03)}

/* gradação: vinheta + degradê esquerdo/inferior p/ leitura do statement sobre o vídeo */
.vhero-grade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:
  linear-gradient(90deg, rgba(23,23,23,.9) 0%, rgba(23,23,23,.5) 38%, rgba(23,23,23,.1) 68%, transparent 86%),
  radial-gradient(125% 95% at 50% 45%, transparent 50%, rgba(8,8,8,.6)),
  linear-gradient(0deg, rgba(23,23,23,.97) 3%, rgba(23,23,23,.62) 30%, rgba(23,23,23,.15) 58%, transparent 80%)}

/* cromo editorial topo */
.vhero-top{position:absolute;top:clamp(86px,12vh,120px);left:var(--gut);right:var(--gut);
  display:flex;justify-content:space-between;align-items:flex-start;
  font:400 11.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ash);z-index:2}
.vmeta{display:flex;align-items:center;gap:11px}
.vdot{width:6px;height:6px;border-radius:50%;background:var(--nothing);animation:pulse 2.4s ease-in-out infinite;flex-shrink:0}
.vclock{color:var(--mist);font-variant-numeric:tabular-nums;letter-spacing:.08em}
.vtz{color:var(--ash);opacity:.6}
.vindex{color:var(--ash);display:flex;align-items:center;gap:10px}
.vindex b{color:var(--nothing);font-weight:400}

/* corpo (ancorado embaixo-à-esquerda — Mucho) */
.vhero-body{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;z-index:1}
/* indicador de rolagem (acabamento) */
.vscroll{position:absolute;bottom:clamp(18px,2.4vw,30px);right:var(--gut);z-index:2;display:flex;align-items:center;gap:10px;
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ash);opacity:.7}
.vscroll-l{width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--ash));position:relative;overflow:hidden}
.vscroll-l::after{content:"";position:absolute;inset:0;width:45%;background:var(--nothing);animation:sweep 2.6s var(--ease-io) infinite}
@media(max-width:720px){.vscroll{display:none}}
.vkicker{display:inline-block;font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);margin-bottom:clamp(16px,2vw,24px)}

/* statement travado em bloco: encorpado, entrelinha curta, tracking óptico (escala reduzida) */
.vh1{font-family:var(--disp);font-weight:660;font-size:clamp(40px,7.6vw,108px);line-height:.88;
  letter-spacing:-.026em;color:var(--mist);margin:0;text-wrap:balance}
.vh1 .hl{color:var(--nothing)}

.vh-row{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,5vw,64px);
  margin-top:clamp(26px,3.4vw,42px);flex-wrap:wrap}
.vsub{font-family:var(--body);font-weight:360;font-size:clamp(15px,1.5vw,19px);line-height:1.6;
  color:var(--ash);max-width:46ch}
.vcta{display:flex;gap:12px;flex-wrap:wrap;flex-shrink:0}

/* ticker discreto (Porto Rocha / Instrument, em volume baixo) */
.vticker{position:relative;width:100%;max-width:var(--maxw);margin:clamp(26px,3.2vw,40px) auto 0;
  overflow:hidden;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft);
  padding:11px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.vtrack{display:inline-flex;white-space:nowrap;will-change:transform;animation:vmarq 26s linear infinite}
.vtrack span{font:400 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ash);padding-right:2.5em}
@keyframes vmarq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.vtrack{animation:none}}

@media(max-width:720px){
  .vhero{justify-content:flex-end;padding-top:120px}
  .vhero-top{position:static;margin-bottom:auto;padding-top:96px;flex-direction:column;gap:10px;align-items:flex-start}
  .vh1{font-size:clamp(36px,11vw,68px)}
  .vh-row{flex-direction:column;align-items:flex-start;gap:22px}
}

/* ============================================================
   SEÇÕES PÓS-HERO v2 — clientes + "O que resolvemos"
   Mesma régua do hero: rótulo mono com [ ], lead Juturu grande,
   lime como evento, hairlines, hover refinado. Override sobre style.css.
   ============================================================ */

/* --- faixa de clientes: legível (corrige o P1) + rótulo editorial --- */
.clients{padding:clamp(42px,5vw,66px) 0}
.clients .label{text-align:left;padding:0 var(--gut);letter-spacing:.2em;color:var(--ash);
  margin-bottom:clamp(26px,3.4vw,40px);display:flex;align-items:center;gap:10px}
.clients .label::before{content:"[ ]";color:var(--nothing);letter-spacing:0}
/* logos normalizados em branco (silhueta uniforme), com mais presença */
.logo-item{padding:0 clamp(38px,5.5vw,68px)}
.logo-item img{height:33px;opacity:.6;filter:brightness(0) invert(1);
  transition:opacity .4s ease,transform .4s var(--ease-out)}
.logo-item:hover img{opacity:1;filter:brightness(0) invert(1);transform:translateY(-3px)}
.mq{animation-duration:56s}
.blur-edge::before{background:linear-gradient(90deg,var(--graphite) 14%,transparent)}

/* --- seção editorial: rótulo em cima, lead Juturu monumental --- */
.sec-head{flex-direction:column;align-items:flex-start;gap:clamp(16px,2vw,24px)}
.sec-head .lbl{padding-top:0;letter-spacing:.18em;font-size:11.5px}
/* lead: mais respiro no line-height (impacto com sofisticação) */
.lead{font-weight:600;font-size:clamp(27px,3.9vw,52px);line-height:1.0;letter-spacing:-.028em;max-width:17ch}
.lead em{color:var(--nothing)}

/* --- lista "O que resolvemos": editorial, verde só como acento, assinatura [ ] --- */
.solve{position:relative}
/* assinatura NOTHING[ ]: colchete gigante em baixíssima opacidade dá intenção ao vazio da direita */
.solve::after{content:"]";position:absolute;right:0;top:50%;transform:translateY(-50%);
  font-family:var(--disp);font-weight:300;font-size:clamp(200px,26vw,400px);line-height:0;
  color:var(--nothing);opacity:.038;pointer-events:none;z-index:0}
.solve li{grid-template-columns:clamp(56px,6.2vw,88px) 1fr;padding:clamp(28px,3.4vw,44px) 0;position:relative;z-index:1;
  transition:padding-left .45s var(--ease-out)}
.solve .sv-n{font-size:clamp(13px,1.5vw,16px);color:var(--nothing);letter-spacing:.06em;padding-top:.55em;
  font-variant-numeric:tabular-nums;transition:color .35s ease}
/* títulos brancos sempre — menos compactos, mais premium (peso/line-height/tracking) */
.solve .sv-t{color:var(--mist);font-weight:480;font-size:clamp(20px,2.6vw,31px);letter-spacing:-.008em;line-height:1.26}
.solve .sv-d{margin-top:17px;font-weight:380;max-width:54ch}
/* hover: marcador lime + leve indent + número acende (headline permanece branca) */
.solve li::before{content:"";position:absolute;left:0;top:calc(clamp(28px,3.4vw,44px) + .72em);
  width:0;height:1.5px;background:var(--nothing);transition:width .45s var(--ease-out)}
@media(hover:hover){
  .solve li:hover{padding-left:clamp(16px,1.8vw,28px)}
  .solve li:hover .sv-n{color:var(--nothing)}
  .solve li:hover::before{width:clamp(14px,1.6vw,24px)}
}

/* ============================================================
   SEÇÕES v2 — "O que fazemos", "Como trabalhamos", case full-bleed
   ============================================================ */

/* ===== O QUE FAZEMOS — sistema de CAPACIDADES (grid modular/técnico) =====
   Composição distinta de "O que resolvemos": grade de módulos com código F0x,
   descrição sempre visível, hairlines técnicas, célula-assinatura NOTHING[ ]. */
/* editorial premium: sem grade boxed; respiro de coluna + hairline suave por linha */
.caps{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(40px,5.5vw,96px);row-gap:0;border:0;background:none}
.cap{background:none;padding:clamp(26px,2.7vw,40px) 0;display:flex;flex-direction:column;
  border-bottom:1px solid var(--hair-soft)}
.cap-i{font:400 12px/1 var(--mono);letter-spacing:.18em;color:var(--nothing);margin-bottom:clamp(14px,1.5vw,18px)}
/* título e descrição colados por proximidade (sem linha técnica) */
.cap-t{font-family:var(--disp);font-weight:500;font-size:clamp(19px,2vw,26px);letter-spacing:-.014em;
  color:var(--mist);line-height:1.2;margin-bottom:9px}
.cap-d{font-family:var(--body);font-weight:380;font-size:clamp(13px,1.3vw,15px);line-height:1.55;
  color:var(--ash);max-width:42ch}
.cap-meta{justify-content:center;gap:8px;border-bottom:1px solid var(--hair-soft)}
.cap-meta .cap-mk{font:700 17px/1 var(--mono);letter-spacing:.04em;color:var(--mist)}
.cap-meta .cap-mk b{color:var(--nothing)}
.cap-meta .cap-mi{font:400 11px/1 var(--mono);letter-spacing:.2em;color:var(--ash)}
@media(hover:hover){.cap-i{transition:color .3s ease} .cap:hover .cap-i{color:var(--mist)}}
@media(max-width:640px){.caps{grid-template-columns:1fr;column-gap:0}}

/* texto-ponte: sem itálico forçado na Juturu */
.concrete-tr{font-weight:560;font-size:clamp(19px,2.1vw,26px)}
.concrete-tr em{font-style:normal;color:var(--nothing)}

/* ===== COMO TRABALHAMOS — MODELOS de relação (3 blocos premium clicáveis) =====
   Composição distinta: cartões espaçosos, número lime grande, acento no topo,
   seta de "iniciar conversa". Função comercial clara e comparável. */
.models{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.4vw,20px)}
.model{display:flex;flex-direction:column;gap:clamp(13px,1.2vw,17px);
  padding:clamp(28px,2.6vw,42px);background:var(--surface);border:1px solid var(--hair-soft);
  border-top:2px solid var(--carbon);min-height:clamp(300px,27vw,380px);position:relative;color:inherit;
  transition:background .4s ease,border-color .4s ease,transform .4s var(--ease-out)}
/* número grande em mist (lime deixa de ser decoração; acento lime vai p/ topo+seta no hover) */
.model-n{font-family:var(--disp);font-weight:600;font-size:clamp(32px,3.2vw,46px);line-height:1;
  letter-spacing:-.02em;color:var(--mist);opacity:.92}
/* assinatura: colchete sutil no canto superior-direito */
.model::after{content:"[ ]";position:absolute;top:clamp(26px,2.4vw,40px);right:clamp(24px,2.2vw,36px);
  font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--ash);opacity:.45;transition:color .3s ease,opacity .3s ease}
/* fio interno separa o cabeçalho (nº+título) da descrição */
.model-t{font-family:var(--disp);font-weight:540;font-size:clamp(21px,2.2vw,28px);letter-spacing:-.02em;color:var(--mist);
  padding-bottom:clamp(14px,1.3vw,18px);border-bottom:1px solid var(--hair-soft)}
.model-d{font-family:var(--body);font-weight:380;font-size:clamp(13.5px,1.35vw,15px);line-height:1.6;color:var(--ash);flex:1}
.model-go{font:400 19px/1 var(--mono);color:var(--ash);transition:color .3s ease,transform .3s var(--ease-out)}
@media(hover:hover){
  .model:hover{background:var(--surface-2);border-top-color:var(--nothing);transform:translateY(-4px)}
  .model:hover::after{color:var(--nothing);opacity:1}
  .model:hover .model-go{color:var(--nothing);transform:translateX(5px)}
}
@media(max-width:880px){.models{grid-template-columns:1fr;gap:12px}.model{min-height:0}}

/* --- CASE FULL-BLEED: prova o evento (mais luz/escala), véu esquerdo p/ o título --- */
.fullcase .fc-media img{filter:grayscale(.18) brightness(.66) contrast(1.12) saturate(.92);object-position:center 40%;transform:scale(1.04)}
@media(hover:hover){.fullcase:hover .fc-media img{transform:scale(1.06);filter:grayscale(.08) brightness(.74) contrast(1.1) saturate(1)}}
/* máscara LOCALIZADA no canto inferior-esquerdo (onde fica o texto) — resto da imagem respira claro */
.fullcase .fc-veil{background:
  radial-gradient(125% 130% at 0% 100%, rgba(23,23,23,.94) 0%, rgba(23,23,23,.66) 26%, rgba(23,23,23,.2) 50%, transparent 68%),
  linear-gradient(0deg, rgba(23,23,23,.62) 0%, transparent 26%)}
.fullcase .fc-k{letter-spacing:.18em}
.fullcase .fc-k .b{color:var(--nothing)}
.fullcase .fc-h{font-weight:640;font-size:clamp(34px,5.4vw,78px);line-height:.92;letter-spacing:-.03em;max-width:16ch}
.fullcase .fc-h em{color:var(--mist)}  /* nome do case em branco (controle de lime) */
.fullcase .fc-p{font-weight:360}

/* ============================================================
   FECHAMENTO DA HOME v2 — Milan Sessions, closer, seal, rodapé
   ============================================================ */

/* --- VIEWFINDER (cantos) — compartilhado com a seção Audiovisual --- */
.vf{position:absolute;width:22px;height:22px;border:1.5px solid var(--mist);opacity:.7;pointer-events:none;z-index:3}
.vf.tl{top:16px;left:16px;border-right:0;border-bottom:0}
.vf.tr{top:16px;right:16px;border-left:0;border-bottom:0}
.vf.bl{bottom:16px;left:16px;border-right:0;border-top:0}
.vf.br{bottom:16px;right:16px;border-left:0;border-top:0}

/* --- MILAN SESSIONS (home) — cabeçalho + vídeo cinematográfico 16:9 com texto em overlay --- */
.ms-spread{display:flex;flex-direction:column;gap:clamp(22px,2.6vw,34px)}
.ms-head{display:flex;flex-direction:column;align-items:flex-start}
.ms-lbl{font:400 11.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:20px}
.ms-lbl .b,.ms-dot{color:var(--nothing)}
.ms-title{margin:0;font-family:var(--disp);font-weight:600;font-size:clamp(40px,6.4vw,94px);line-height:.92;letter-spacing:-.01em;color:var(--mist);text-wrap:balance}
.ms-card{position:relative;width:100%}
.ms-fig{position:relative;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;padding:24px clamp(22px,2.4vw,34px);overflow:hidden;border:1px solid var(--hair);background:#0b0c0b}
.ms-fig::after{content:"";position:absolute;inset:11px;border:1px solid var(--hair-soft);pointer-events:none;z-index:2}
.ms-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:brightness(.8) contrast(1.02) saturate(.97)}
.ms-fig-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(11,12,11,.68) 0%,rgba(11,12,11,.46) 22%,rgba(11,12,11,0) 50%),linear-gradient(180deg,rgba(11,12,11,.5) 0%,rgba(11,12,11,0) 16%)}
.ms-vf{position:absolute;width:16px;height:16px;border:1.5px solid var(--mist);opacity:.42;pointer-events:none;z-index:3}
.ms-vf.tl{top:11px;left:11px;border-right:0;border-bottom:0}
.ms-vf.tr{top:11px;right:11px;border-left:0;border-bottom:0}
.ms-vf.bl{bottom:11px;left:11px;border-right:0;border-top:0}
.ms-vf.br{bottom:11px;right:11px;border-left:0;border-top:0}
.ms-fig-top{position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;gap:14px;font:400 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.ms-fig-top span{text-shadow:0 1px 2px rgba(0,0,0,.72),0 0 11px rgba(0,0,0,.55)}
.ms-fig-loc{color:var(--mist)}
/* texto + CTA em OVERLAY sobre o vídeo (desktop) */
.ms-say{position:absolute;z-index:4;left:clamp(22px,2.4vw,34px);bottom:clamp(40px,4.6vw,64px);max-width:min(40ch,52%)}
.ms-text{margin:0;font:400 clamp(16px,1.3vw,19px)/1.4 var(--body);color:var(--mist);text-shadow:0 1px 12px rgba(0,0,0,.62),0 1px 2px rgba(0,0,0,.5)}
.ms-cta{margin-top:clamp(20px,1.9vw,28px)}
@media(max-width:820px){
  .ms-fig{aspect-ratio:4/3;padding:18px}
  .ms-fig-top{font-size:9px;letter-spacing:.1em;flex-direction:column;align-items:flex-start;gap:4px}
  /* mobile: texto empilha abaixo do vídeo (legibilidade em tela pequena) */
  .ms-fig-shade{background:linear-gradient(180deg,rgba(11,12,11,.55) 0%,rgba(11,12,11,0) 22%)}
  .ms-say{position:static;max-width:60ch;margin-top:18px}
  .ms-text{color:var(--ash);text-shadow:none;font-size:16px;line-height:1.62}
  .ms-cta{margin-top:16px}
}

/* --- CLOSER: fechamento editorial (menos campanha, mais sofisticação) --- */
.closer{text-align:left}
.closer .big{font-weight:560;font-size:clamp(27px,4vw,58px);line-height:1.04;letter-spacing:-.026em;max-width:18ch;margin-bottom:22px}
.closer .big em{color:var(--nothing)}
.closer .sub{letter-spacing:.14em;text-align:left}
.closer .gfx{opacity:.12;left:auto;right:-4%;top:46%;transform:translateY(-50%);width:min(40vw,440px)}
.closer:hover .gfx{opacity:.18}
/* CTA do closer: outline lime (menos comercial que o sólido), preenche no hover */
.closer .btn{background:transparent;color:var(--nothing);border:1px solid var(--nothing)}
.closer .btn:hover{background:var(--nothing);color:var(--graphite)}

/* --- SEAL (marquee de assinatura) --- */
.seal{background:transparent}
.seal-track span{letter-spacing:.2em}
.seal-track b{color:var(--nothing)}

/* --- RODAPÉ: assinatura Juturu + colunas limpas --- */
.foot-brand .bk{font-size:19px;letter-spacing:.03em}
.foot-brand .bk b{color:var(--nothing)}
.foot-col h5{letter-spacing:.18em}
.foot-col h5::before{content:"[ ] ";color:var(--nothing)}

/* ============================================================
   SOBRE v2 — manifesto / autoria / visão (polo do SILÊNCIO)
   MATÉRIA VISUAL: frames de imagem reservada + retrato/autoria + ritmo
   alternado texto↔imagem. Não é variação da home, não é só tipografia.
   ============================================================ */
.crumb b{color:var(--nothing)}
.lede{font-family:var(--body);font-weight:380}

/* --- FRAME de imagem reservada (área futura desenhada, linguagem NOTHING[ ]) --- */
.frame{position:relative;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(20px,2vw,30px);overflow:hidden;isolation:isolate;
  background:linear-gradient(150deg, var(--surface-2) 0%, #131412 72%);border:1px solid var(--hair)}
.frame::before,.frame::after{content:"";position:absolute;width:24px;height:24px;border:1.5px solid var(--ash);opacity:.5;pointer-events:none;z-index:2}
.frame::before{top:14px;left:14px;border-right:0;border-bottom:0}
.frame::after{bottom:14px;right:14px;border-left:0;border-top:0}
.frame .f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;position:relative;z-index:2;
  font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.frame .f-label{color:var(--mist)}
.frame .f-label b{color:var(--nothing);font-weight:400}
.frame .f-ix{color:var(--ash);opacity:.7;flex-shrink:0}
.frame .f-mark{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:1;
  font-family:var(--disp);font-weight:300;color:var(--mist);opacity:.05;pointer-events:none;
  font-size:clamp(120px,18vw,260px);letter-spacing:-.04em}
.frame .f-sig{position:relative;z-index:2;font-family:var(--disp);font-weight:600;font-size:clamp(20px,2vw,26px);
  letter-spacing:-.02em;color:var(--mist);margin-top:auto}
.frame .f-note{position:relative;z-index:2;font:400 10.5px/1.6 var(--mono);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ash);opacity:.6;max-width:30ch;margin-top:12px}
.frame-tall{aspect-ratio:4/5}
.frame-portrait{aspect-ratio:3/4}

/* --- HERO editorial: texto + frame (assimétrico, presença na 1ª dobra) --- */
.about-hero{padding:clamp(130px,17vh,210px) 0 clamp(40px,6vh,80px)}
.about-hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(36px,6vw,90px);align-items:center}
.ah-h{margin-bottom:clamp(26px,3vw,38px)}
.ah-h em{color:var(--nothing)}
.ah-text .lede{margin-bottom:clamp(22px,2.6vw,32px)}
.ah-meta{font:400 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.ah-meta .b{color:var(--nothing)}
.ah-frame{min-height:clamp(360px,46vw,560px)}
@media(max-width:860px){.about-hero-grid{grid-template-columns:1fr;gap:30px}.ah-frame{aspect-ratio:16/10;min-height:0}}

/* pull-quote (Visão) */
.pq{font-family:var(--disp);font-weight:520;font-size:clamp(28px,4.2vw,56px);line-height:1.0;
  letter-spacing:-.028em;color:var(--mist);max-width:18ch;text-wrap:balance;margin-top:clamp(38px,4.6vw,66px)}
.pq em{color:var(--nothing);font-style:normal}

/* manifesto-visual: tratamento mais editorial (menos dramático, mais presença) */
.manifesto-visual{min-height:clamp(480px,68vh,760px)}
.mv-bg{filter:grayscale(.35) contrast(1.05) brightness(1)}
.mv-overlay{background:linear-gradient(105deg, rgba(23,23,23,.93) 0%, rgba(23,23,23,.72) 42%, rgba(23,23,23,.28) 100%)}
.mv-text{font-weight:640}
.mv-text em{color:var(--nothing)}

/* --- O NOME: conceitual refinado (colchete + frame de textura) --- */
.nome-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(36px,5vw,80px);align-items:start}
.nome-mark{font-family:var(--disp);font-weight:300;font-size:clamp(120px,16vw,240px);line-height:.8;
  color:var(--mist);letter-spacing:-.02em;white-space:nowrap;margin:clamp(10px,1.4vw,20px) 0 clamp(22px,2.6vw,34px)}
.nome-mark b{color:var(--nothing);font-weight:300}
.nome-prose{max-width:54ch}
.nome-frame{align-self:stretch;min-height:clamp(340px,30vw,460px)}
@media(max-width:860px){.nome-grid{grid-template-columns:1fr;gap:26px}.nome-frame{aspect-ratio:4/3;min-height:0}}

/* --- DIREÇÃO: retrato editorial reservado + corpo escaneável --- */
.direcao-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(34px,5vw,72px);align-items:start}
.dir-frame{min-height:clamp(420px,42vw,560px)}
.dir-body p{font-family:var(--body);font-weight:380;font-size:clamp(15px,1.5vw,18px);line-height:1.72;color:var(--ash);max-width:56ch}
.dir-body p+p{margin-top:1.2em}
.dir-body strong{color:var(--mist);font-weight:540}
.dir-body em{font-style:normal;color:var(--nothing)}
.author-pq{font-family:var(--disp);font-weight:500;font-size:clamp(24px,3.2vw,40px);line-height:1.05;
  letter-spacing:-.024em;color:var(--mist);max-width:18ch;margin:clamp(24px,2.8vw,38px) 0}
.author-pq em{color:var(--nothing)}
@media(max-width:860px){.direcao-grid{grid-template-columns:1fr;gap:26px}.dir-frame{aspect-ratio:3/4;max-width:420px}}

/* --- PARA QUEM: grid editorial de segmentos (não lista pobre) --- */
.fw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--hair-soft);border:1px solid var(--hair-soft)}
.fw-seg{background:var(--graphite);padding:clamp(26px,2.6vw,40px) clamp(24px,2.4vw,34px);
  display:flex;flex-direction:column;gap:clamp(20px,3vw,44px);min-height:clamp(150px,15vw,200px);transition:background .4s ease}
.fw-seg .fw-i{font:400 12px/1 var(--mono);letter-spacing:.06em;color:var(--nothing)}
.fw-seg .fw-t{font-family:var(--disp);font-weight:520;font-size:clamp(20px,2.2vw,30px);letter-spacing:-.018em;color:var(--mist);margin-top:auto;line-height:1.12}
.fw-end{justify-content:space-between;gap:14px;background:var(--surface)}
.fw-end .b{font:400 14px/1 var(--mono);color:var(--nothing)}
.fw-end span:last-child{font-family:var(--disp);font-weight:480;font-size:clamp(17px,1.8vw,22px);letter-spacing:-.014em;color:var(--ash);margin-top:auto;line-height:1.2}
@media(hover:hover){.fw-seg:hover{background:var(--surface)}}
@media(max-width:860px){.fw-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fw-grid{grid-template-columns:1fr}}

/* --- CLOSER da Sobre: sem torus repetido, com microlabel --- */
.closer-about{padding-top:clamp(110px,15vh,190px)}
.closer-about .gfx{display:none}
.closer-k{display:block;font:400 12px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:clamp(22px,2.6vw,32px)}
.closer-k .b{color:var(--nothing)}

/* ============================================================
   ESTRUTURA v2 — sistema / método / processo (polo do SISTEMA)
   Lógica própria: ESPINHA DE PROCESSO (método em movimento).
   ============================================================ */
.est-h{font-weight:620}            /* título branco (page name, não tese) */
/* hero: índice das 5 fases — o "sistema operacional" da agência */
.phase-index{list-style:none;display:flex;flex-wrap:wrap;margin-top:clamp(40px,5vw,68px);border-top:1px solid var(--hair)}
.phase-index li{flex:1 1 0;min-width:148px;display:flex;align-items:baseline;gap:10px;
  padding:clamp(16px,1.8vw,22px) clamp(16px,1.6vw,24px) clamp(16px,1.8vw,22px) 0;border-bottom:1px solid var(--hair-soft);
  font-family:var(--disp);font-weight:500;font-size:clamp(15px,1.6vw,20px);letter-spacing:-.012em;color:var(--mist)}
.phase-index li span{font:400 11px/1 var(--mono);letter-spacing:.06em;color:var(--nothing);flex-shrink:0}
@media(max-width:680px){.phase-index li{flex:1 1 45%}}

/* âncora */
.anchor .anchor-p{font-weight:500}
.anchor .anchor-p em{font-style:normal;color:var(--nothing)}

/* frentes (editorial refinado) */
.frente{grid-template-columns:clamp(64px,7vw,104px) 1fr 1.1fr;border-color:var(--hair-soft)}
.frente .fi{color:var(--nothing)}
.frente .fl{font-weight:500;letter-spacing:-.02em}
.frente .fl em{color:var(--nothing)}
.frente .fb{font-weight:380}

/* entregas (legenda limpa) */
.deliv{border-color:var(--hair-soft)}
.deliv .dg{border-color:var(--hair-soft)}
.deliv .dg-k b{color:var(--nothing)}
.deliv .dg-l{font-weight:380}

/* banda de bastidor (matéria visual) */
.est-band{padding-top:clamp(40px,5vh,72px)}
.est-frame{min-height:clamp(280px,32vw,440px)}
.frame-wide{aspect-ratio:16/9}

/* MÉTODO — ESPINHA DE PROCESSO (centro memorável; números como design) */
.process{list-style:none;position:relative;border-left:1px solid var(--hair);margin-left:clamp(10px,1.6vw,22px);
  padding-left:clamp(30px,4.5vw,64px)}
.pstep{position:relative;display:grid;grid-template-columns:clamp(60px,6vw,96px) 1fr;gap:clamp(24px,3.6vw,56px);
  padding:clamp(28px,3.6vw,52px) 0}
.pstep:not(:last-child){border-bottom:1px solid var(--hair-soft)}
.pstep::before{content:"";position:absolute;left:calc(-1 * clamp(30px,4.5vw,64px) - 5px);top:calc(clamp(28px,3.6vw,52px) + .42em);
  width:10px;height:10px;border-radius:50%;background:var(--graphite);border:1.5px solid var(--nothing);z-index:1;transition:transform .3s ease,background .3s ease}
.pstep-n{font-family:var(--disp);font-weight:600;font-size:clamp(36px,4.6vw,68px);line-height:.84;letter-spacing:-.03em;color:var(--mist);opacity:.9}
.pstep-t{font-family:var(--disp);font-weight:540;font-size:clamp(22px,2.6vw,32px);letter-spacing:-.022em;color:var(--mist);margin-bottom:10px}
.pstep-d{font-family:var(--body);font-weight:380;font-size:clamp(14px,1.45vw,16.5px);line-height:1.6;color:var(--ash);max-width:56ch}
.pstep-d em{font-style:normal;color:var(--nothing)}
@media(hover:hover){.pstep:hover::before{background:var(--nothing);transform:scale(1.25)}}
@media(max-width:680px){.process{padding-left:clamp(24px,6vw,40px)}.pstep{grid-template-columns:1fr;gap:6px}
  .pstep-n{font-size:clamp(42px,13vw,58px)}.pstep::before{left:calc(-1 * clamp(24px,6vw,40px) - 5px)}}

/* ============================================================
   CASES v2 — prova / escala / imagem / números (polo da PROVA)
   Spreads editoriais grandes + números como design + imagem que prova.
   ============================================================ */
.cases-h{font-weight:620}                 /* título branco */
/* hero: prova de escala imediata (números existentes como design) */
.cases-stats{display:flex;flex-wrap:wrap;gap:clamp(28px,4vw,64px);margin-top:clamp(40px,5vw,68px);
  border-top:1px solid var(--hair);padding-top:clamp(26px,3vw,38px)}
.cs-mt{display:flex;flex-direction:column;gap:8px}
.cs-mt b{font-family:var(--disp);font-weight:600;font-size:clamp(40px,5.4vw,84px);line-height:.82;letter-spacing:-.035em;color:var(--mist)}
.cs-mt:first-child b,.cs-mt:nth-child(2) b{color:var(--nothing)}  /* os 2 números-prova em lime */
.cs-mt span{font:400 11px/1.3 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ash);max-width:22ch}
.eco{max-width:64ch}.eco strong{color:var(--mist);font-weight:540}

/* --- CASES-ÂNCORA: spreads editoriais alternados --- */
.casefeats{display:flex;flex-direction:column;gap:clamp(70px,10vw,140px)}
.casefeat{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(32px,5vw,76px);align-items:center}
.casefeat.rev{direction:rtl}.casefeat.rev>*{direction:ltr}
.cf-media{position:relative;display:block;overflow:hidden;border:1px solid var(--hair);aspect-ratio:4/5;background:#121311}
.cf-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.8) contrast(1.06);transform:scale(1.03);transition:transform 1s var(--ease-out),filter .7s ease}
@media(hover:hover){.cf-media:hover img{filter:grayscale(0) brightness(.94) contrast(1.04);transform:scale(1.06)}}
.cf-tag{position:absolute;left:16px;top:16px;z-index:2;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mist);display:flex;gap:8px;align-items:center}
.cf-tag .b{color:var(--nothing)}
.cf-t{font-family:var(--disp);font-weight:600;font-size:clamp(30px,4vw,56px);line-height:.98;letter-spacing:-.03em;color:var(--mist);margin-bottom:14px}
.cf-t em{font-style:normal;color:var(--mist)}
.cf-m{font:400 12px/1 var(--mono);letter-spacing:.08em;color:var(--ash);margin-bottom:18px}
.cf-d{font-family:var(--body);font-weight:380;font-size:clamp(14px,1.45vw,16.5px);line-height:1.62;color:var(--ash);max-width:48ch;margin-bottom:clamp(22px,2.6vw,32px)}
/* MÉTRICAS COMO DESIGN — números gigantes (prova) */
.cf-metrics{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,46px);border-top:1px solid var(--hair-soft);
  padding-top:clamp(20px,2.4vw,30px);margin-bottom:clamp(22px,2.6vw,32px)}
.cf-mt{display:flex;flex-direction:column;gap:6px}
.cf-mt b{font-family:var(--disp);font-weight:600;font-size:clamp(40px,5vw,76px);line-height:.8;letter-spacing:-.035em;color:var(--mist)}
.cf-mt:first-child b{color:var(--nothing)}
.cf-mt span{font:400 10px/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.cf-go{font:400 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mist);display:inline-flex;gap:10px;align-items:center;margin-top:clamp(18px,2vw,26px);transition:color .3s ease}
@media(hover:hover){.casefeat:hover .cf-go,.cf-go:hover{color:var(--nothing)}}
@media(max-width:860px){.casefeat,.casefeat.rev{grid-template-columns:1fr;direction:ltr;gap:24px}.cf-media{aspect-ratio:16/11}}

/* --- STUDIO MAIO: feature WIP premium --- */
.casefeat.wip .cf-media{aspect-ratio:16/11}
.wip-media .cf-grade{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(10,10,10,.1),rgba(10,10,10,.66));pointer-events:none}
.wip-mark{position:absolute;left:18px;bottom:18px;z-index:2;display:flex;align-items:center;gap:9px;
  font:400 11px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--mist)}
.wip-dot{width:7px;height:7px;border-radius:50%;background:var(--nothing);animation:pulse 2s ease-in-out infinite}
.cf-inline-k{display:block;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ash);margin-bottom:16px}
.cf-inline-k .b{color:var(--nothing)}

/* --- IDENTIDADE: índice refinado --- */
.idgrid{gap:1px;background:var(--hair-soft);border-color:var(--hair-soft)}
.idgrid .idcard{padding:clamp(30px,3.2vw,46px);gap:12px}
.idgrid .id-k{color:var(--nothing)}
.idgrid .id-t{font-weight:560}
.idgrid .id-s{color:var(--nothing);opacity:.85}
.idgrid .id-d{font-weight:380}
@media(hover:hover){.idgrid .idcard:hover{background:var(--surface)}}

/* ============================================================
   AUDIOVISUAL (home v2) — braço audiovisual com presença editorial
   Composição 2-col (texto + frame de vídeo). CSS isolado em .av*.
   ============================================================ */
.av-grid{display:grid;grid-template-columns:.84fr 1.16fr;column-gap:clamp(34px,5vw,76px);row-gap:clamp(20px,2.4vw,30px);
  grid-template-areas:"head frame" "body frame";align-items:start}
.av-head{grid-area:head}
.av-frame{grid-area:frame;align-self:center}
.av-body{grid-area:body}
.av-h{font-family:var(--disp);font-weight:560;font-size:clamp(26px,3.2vw,46px);line-height:1.02;letter-spacing:-.028em;
  color:var(--mist);margin:clamp(16px,1.9vw,24px) 0 0;text-wrap:balance}
.av-d{font-family:var(--body);font-weight:380;font-size:clamp(15px,1.5vw,18px);line-height:1.62;color:var(--ash);
  max-width:40ch;margin-bottom:clamp(22px,2.6vw,30px)}
.av-cta{margin-top:2px}
/* frame audiovisual editorial — viewfinder + chrome técnico */
.av-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--hair);
  background:radial-gradient(58% 82% at 50% 38%, rgba(214,245,3,.05), transparent 62%), #121311}
.av-vid{position:absolute;inset:0;z-index:1}
.av-vid iframe{width:100%;height:100%;border:0;display:block}
/* play (sinaliza vídeo enquanto o iframe não está presente) */
.av-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(251,251,252,.42);display:flex;align-items:center;justify-content:center;transition:border-color .3s,transform .3s}
.av-play::after{content:"";width:0;height:0;border-left:14px solid var(--mist);border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.av-frame:has(iframe) .av-play{display:none}
@media(hover:hover){.av-frame:hover .av-play{border-color:var(--nothing);transform:translate(-50%,-50%) scale(1.06)}}
/* rótulos técnicos no frame (offset p/ limpar os cantos viewfinder) */
.av-rec{position:absolute;top:16px;left:46px;z-index:3;display:flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.av-rec .recdot{width:7px;height:7px;border-radius:50%;background:var(--nothing);animation:pulse 1.8s ease-in-out infinite}
.av-tech{position:absolute;top:16px;right:46px;z-index:3;font:400 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.av-cap{position:absolute;left:46px;bottom:16px;z-index:3;display:flex;align-items:center;gap:8px;font:400 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mist)}
.av-cap .b{color:var(--nothing)}
@media(max-width:860px){
  .av-grid{grid-template-columns:1fr;grid-template-areas:"head" "frame" "body";row-gap:22px}
  .av-frame{align-self:stretch}
  .av-rec{left:42px}.av-tech{right:42px}.av-cap{left:42px}
}