/* ============================================================
   HOME v4 — a montagem  (página de TESTE)
   ------------------------------------------------------------
   Folha própria, enfileirada só em `template-home-v4.php`, depois do
   bundle. O bundle já traz o hero oficial, Selected Work, Services,
   `.faq-*`, `.btn`, `.motion-toggle` e os reveals — isto aqui é só o
   que a v4 acrescenta: o acervo atrás do hero, o ticker de prova, o
   os logos do fim do Selected Work (até 30/09/2026 era o mosaico de
   clientes), a FAQ em livro-razão e o fechamento roxo.

   Regra do Manual em vigor: turquesa nunca direto sobre o roxo da
   marca; sobre a tinta quase-preta do layout o Manual aceita
   ("intermediar com preto") — é o que o ticker faz, como o cta-band.
   ============================================================ */

:root {
  /* A única superfície declarada aqui: os canais RGB do `--site-dark`
     do theme.css (#140A21), para o véu do hero poder variar só a alfa.
     Um só lugar; mudou lá, muda aqui. */
  --v4-ink-rgb: 20, 10, 33;
}

/* ------------------------------------------------------------
   1. HERO — o acervo da v3 atrás do hero oficial
   ------------------------------------------------------------
   Três faixas em perspectiva real (translateZ), a 60%, sob um véu que
   escurece mais à esquerda — onde está a chamada. O DOM do hero em si
   é o oficial: `.hero-slot` continua sendo o alvo do GSAP Flip.
   ------------------------------------------------------------ */

/* — Fundo do hero (17/09/2026) —
   O <canvas> é criado pelo `hero-fibers.js`, nunca pelo PHP: quem não vai
   ver (celular, movimento reduzido, sem WebGL2) não recebe elemento
   nenhum. Ocupa o lugar que era das faixas de imagem, atrás do véu e dos
   brilhos. O shader é OPACO (ao contrário da aurora que esteve aqui
   antes) e recebe o `--site-dark` como backdrop, então emenda com a cor
   da seção em vez de trocá-la. */
.hero-fibers {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  /* Sem opacidade própria: quem gradua é o véu, que já vai de 97% de
     tinta à esquerda (onde está a chamada) a 66% à direita. Somar uma
     segunda atenuação aqui apagava as dobras e sobrava um gradiente. */
}

.v4-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(var(--v4-ink-rgb), 0.97) 30%,
    rgba(var(--v4-ink-rgb), 0.82) 58%,
    rgba(var(--v4-ink-rgb), 0.66));
}

/* ------------------------------------------------------------
   2. TICKER DE PROVA — a barra da v3, na base do hero
   ------------------------------------------------------------
   O hero é flex-column com a grade em `flex: 1`; o ticker entra como
   último filho e a primeira tela termina nele. A folha de Selected
   Work sobe 44px por cima do hero (.section-sheet, margin-top -44px):
   o padding abaixo reserva exatamente essa costura, senão a folha
   cobriria a barra em repouso.
   ------------------------------------------------------------ */

.hero-section--v4 { padding-bottom: 44px; }
/* O respiro de baixo da grade foi encolhido quando o ticker (57px) ainda
   fechava a primeira tela — sem ele sobra folga, e os valores ficam como
   estão porque o hero é 100vh: mexer aqui só sobe a chamada. */
.hero-section--v4 .hero-grid { padding-bottom: clamp(20px, 3vh, 32px); }

/* — O que sobrou do ticker: só o controle de pausa (17/09/2026) —
   A BARRA é que saiu. Sem `border-top` e sem fundo, de propósito: um fio
   aqui reconstrói exatamente o que foi removido. O botão fica porque é o
   único da página e as lanes do hero e os acervos de logos seguem
   animando sozinhos (WCAG 2.2.2). O do bundle é para fundo claro; aqui
   ele está no escuro. */
.hero-motion {
  position: relative;
  z-index: 3;   /* acima da pilha de cards: em tela baixa ela cobria o centro do botão (TRED-141) */
  display: flex;
  justify-content: flex-end;
  padding: 0 var(--container-pad) 4px;
}
.hero-motion .motion-toggle { flex: none; }   /* cores: `.motion-toggle--on-dark`, theme.css */

/* ------------------------------------------------------------
   3. SELECTED WORK — os logos que fecham a seção (30/09/2026)
   ------------------------------------------------------------
   A seção "Our clients" saiu, a pedido; os logos vieram para cá, depois
   dos 4 cards. Desde 10/10/2026 (TRED-139) são TODOS os de
   `trend_home_clients()`, inclusive os três que têm card logo acima —
   até então a faixa os filtrava e ficava em quatro.

   A entrada continua o voo: os cards pousam na grade e, desse ponto em
   diante, um fio se desenha da esquerda para a direita e os logos descem
   de trás dele, um por vez, saindo do desfoque. No desktop quem conduz é
   o `home-motion.js`, preso à rolagem e começando exatamente no fim do
   voo (o mesmo gatilho) — nenhum logo aparece antes de os quatro cards
   pousarem. No celular e no tablet, sem voo, cada peça tem o próprio
   `.reveal` e entra quando a SUA fileira chega à tela; ali o logo não sai
   de trás do fio (só a 1ª fileira fica sob ele), só assenta 16px.

   Os logos NÃO são links nem têm hover: não levam a lugar nenhum, e um
   hover prometeria que levam.

   Tamanho por ÁREA ÓPTICA (largura ∝ √proporção), herdado das faixas da
   Our clients: sem isso o Nakamura (6,8:1) esmaga e o Orlando Auto
   Repair (1,6:1) some. A classe de cada logo sai do nome do ARQUIVO —
   trocar um arquivo sem atualizar a tabela abaixo faz o logo cair na
   largura padrão.
   ------------------------------------------------------------ */

.work-logos { margin-top: clamp(3rem, 5vw, 4.5rem); }

.work-logos__rule {
  flex: 1 1 0;
  display: block;
  height: 1px;
  background: var(--border-subtle);
  transform-origin: left center;
}

/* A cabeça (10/10/2026): rótulo e fio na MESMA linha — o fio corre do fim
   do rótulo até a borda, o eyebrow das seções ao contrário. Com sete logos
   a fileira precisa da largura inteira (o arranjo anterior, rótulo à
   esquerda e logos agrupados à direita, pedia ~1.700px a 1440). `flex-end`
   e não `center`: assim o fio é a borda de BAIXO da cabeça, exatamente
   onde começa a moldura de cada logo — os logos seguem descendo de trás
   dele. */
.work-logos__head {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
}
/* Discreto de propósito — o rótulo da seção, lá em cima, é o "Trusted by".
   `line-height: 1` para o texto assentar no fio. */
.work-logos__label {
  flex: none;
  margin: 0;
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
/* `space-between` com vão MÍNIMO: a 1440 sobram ~60px entre os logos;
   abaixo de ~1300px o vão fecha no mínimo e os logos encolhem (ver
   `.work-logo`). */
.work-logos__list {
  --k: 0.82;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--space-8);
  min-width: 0;
}

/* Os segmentos (Homepage Copy Brief, 19/10/2026): cada um é um grupo de
   logos com o nome em LEGENDA embaixo, sobre um fio da largura do grupo —
   o fio fecha o grupo como um colchete, e o vão entre grupos (48px no
   mínimo) é maior que o vão entre logos (32px), para o agrupamento se ler
   sem caixa. A legenda vem antes no DOM (o leitor de tela ouve o segmento
   primeiro) e desce pelo `order`. Os logos seguem encostando no fio de
   cima, de onde descem. */
.work-logos__group {
  display: flex;
  flex-direction: column;
  flex: 0 1 auto;
  min-width: 0;
}
.work-logos__marks {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  gap: var(--space-6);
  min-width: 0;
}
.work-logos__vertical {
  order: 1;
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
}

/* A moldura de onde o logo desce: o que passa da borda de cima não
   aparece. No desktop a moldura COMEÇA NO FIO (o respiro abaixo dele é
   padding dela, não da lista) — é daí que o logo emerge; o home-motion.js
   mede a distância de cada um até essa borda. Todas têm a altura da
   fileira e centram o logo, para o alinhamento óptico seguir pelo meio.
   Os 6px dos lados e de baixo (anulados pela margem) são o espaço para o
   desfoque não ser cortado reto. */
/* `flex: 0 1 auto` + `min-width: 0`, não `flex: none`: a 0.82 os sete
   logos somam ~1.000px e, abaixo de ~1300px, o container não tem isso mais
   os vãos — com `flex: none` o último logo saía para fora dele. Assim os
   logos encolhem na mesma proporção (o `max-width` do img segue a
   moldura). */
.work-logo {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(2rem, 3.5vw, 3rem) 6px 6px;
  margin: 0 -6px -6px;
}
.work-logo img {
  display: block;
  width: calc(var(--w0, 160px) * var(--k));
  max-width: 100%;
  height: auto;
}

.work-logo--kingdom-sushi       { --w0: 208px; }
.work-logo--hyper               { --w0: 152px; }
.work-logo--piefection          { --w0: 200px; }
.work-logo--florida-preowned    { --w0: 224px; }
.work-logo--orlando-preowned    { --w0: 172px; }
.work-logo--orlando-auto-repair { --w0: 124px; }
.work-logo--starling            { --w0: 138px; }

/* A segunda cópia dos segmentos é da esteira (≤1060); no desktop não existe. */
.work-logos__group--dup { display: none; }

/* A entrada em CSS — celular e tablet (sem a camada de movimento) e, no
   desktop, só o instante antes de o home-motion.js assumir (ele tira estes
   `.reveal`). O fio se desenha; o rótulo e a esteira entram com o `.reveal`
   padrão do site.js, em bloco — desde 10/10/2026 a faixa é uma linha só
   fora do desktop, e a cascata por logo saiu com as fileiras. O seletor do
   estado revelado tem uma classe a mais de propósito: o
   `.js .reveal.is-revealed` do theme.css tem a mesma força do estado
   escondido daqui e perderia a disputa. */
.js .work-logos__rule.reveal {
  opacity: 1;
  transform: scaleX(0);
  transition: transform 0.9s var(--ease-out);
}
.js .work-logos__rule.reveal.is-revealed { transform: none; }

/* ------------------------------------------------------------
   2a. WHO WE ARE — o modelo, os números e o selo (30/09/2026)
   ------------------------------------------------------------
   Págs. 3 e 4 do deck v10. No BRANCO desde 01/10/2026, a pedido ("roxo
   vivo não ficou legal"): foi roxo só por um dia, para não colar com o
   Services (tinta, 3.005px pinados) num bloco escuro de 3.644px. Clara,
   ela fica entre o creme do Selected Work e a tinta do Services, e a
   Home volta à cadência escura · clara · clara · escura · clara · clara ·
   escura. Branco e não creme pela regra das vizinhas claras (DESIGN.md):
   a outra neutra, com o fio em cima — como a FAQ depois do Our process.
   O roxo da marca fica nos números em Bebas e no rótulo.

   COMPACTA desde 01/10/2026, a pedido ("muito texto"): saíram a lista das
   nove funções (virou o link) e as notas sob os números.

   O TIME voltou em 19/10/2026 (TRED-150), a pedido do cliente: à direita,
   o 1 sobre o Marketing Director e o 9 sobre as nove funções, como
   créditos — só os nomes, sem caixa e sem ícone (a primeira versão, uma
   grade de células com ícone, foi recusada por "cara de IA"). À esquerda
   ficam $10M+ e 15+, o link e o selo numa fileira só, espaçada por VÃO e
   não por coluna. Os rótulos chegam quebrados em duas linhas do PHP
   (`pre-line`) para os blocos terem a mesma altura.
   ------------------------------------------------------------ */

.v4-who {
  /* altura do selo; METADE dela é o respiro que o Google exige em volta */
  --v4-badge-h: 88px;
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--border-subtle);
}
/* Em bloco: `inline-flex` cria uma linha em volta, e o strut dela
   empurrava o rótulo 4px abaixo do topo da imagem. */
.v4-who .sec-eyebrow { display: flex; }

/* Sem imagem desde 19/10/2026 (Homepage Copy Brief: "sem foto de stock").
   À esquerda título, apoio e a fileira; à direita o time, na largura dos
   próprios nomes (`max-content`). A esquerda é `fit-content`: até 41rem,
   onde a fileira inteira cabe, e menos quando falta espaço. Em `1fr` ela
   esticava além do conteúdo e o vão entre as colunas ia a ~175px — o que
   o usuário recusou no canvas. A sobra fica na borda direita. */
.v4-who__grid {
  display: grid;
  grid-template-columns: fit-content(41rem) max-content;
  column-gap: clamp(3rem, 6.7vw, 6rem);
  align-items: center;
}
.v4-who__main { display: flex; flex-direction: column; align-items: flex-start; }
.v4-who__head h2 {
  margin: var(--space-4) 0 0;
  font-size: var(--title-statement);
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.v4-who__lead {
  margin: var(--space-5) 0 0;
  max-width: 36rem;
  font-size: var(--title-lead);
  font-weight: var(--weight-medium);
  line-height: var(--leading-normal);
  color: var(--text-body);
  text-wrap: pretty;
}

/* A fileira: os números e o selo na mesma base. Os 48px entre o 15+ e o
   selo, e entre as linhas quando ela quebra, são o respiro que o Google
   exige em volta do selo (½ de 88 = 44). O "Meet the team" morava aqui,
   entre os dois; desde 20/10/2026 fecha a lista do time. */
.v4-who__row {
  margin-top: clamp(2.5rem, 4vw, 3.5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-8);
}
.v4-who__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  column-gap: var(--space-9);
}
.v4-who__fact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}
/* Com teto em 80px, o tamanho a 1440: o `--title-call` segue crescendo até
   2560 e a coluna não — a 1920 os rótulos iam a quatro linhas e o $10M+
   encostava no 15+. */
.v4-who__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: min(var(--title-call), 5rem);
  line-height: 0.85;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}
.v4-who__label {
  margin-top: var(--space-3);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--brand-ink);
  /* duas linhas em todos os três, quebradas no PHP (`trend_v4_who()`):
     a caixa fica da largura da tinta e os vãos saem iguais */
  white-space: pre-line;
}

/* Fecha os créditos do time, sob os nove nomes e alinhado a eles: leva ao
   time na /our-services/, o lugar das nove funções. */
.v4-who__link {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-4);
  min-height: 24px;   /* alvo mínimo da WCAG 2.5.8 no desktop (tinha 22px); no celular, 44 */
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-color: var(--purple-200);
  text-underline-offset: 0.3em;
  transition: color var(--dur-base) var(--ease-out),
              text-decoration-color var(--dur-base) var(--ease-out);
}
.v4-who__link svg {
  flex: none;
  width: 14px;
  height: 14px;
  transition: translate var(--dur-base) var(--ease-out);
}
.v4-who__link:hover { color: var(--purple-700); text-decoration-color: currentColor; }
.v4-who__link:hover svg { translate: 2px -2px; }
.v4-who__link:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}

/* O selo. Regra do Google, não gosto: respiro de no mínimo METADE da
   altura do selo entre ele e qualquer texto ou gráfico, nos quatro lados,
   e ele nunca pode ser o elemento mais forte da peça (aqui, os números em
   Bebas ao lado são). Tamanho e cor não se mexem: só a altura escala, com
   a proporção travada. O respiro vem dos vãos da `.v4-who__row`. */
.v4-who__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--v4-badge-h) / 2);
}
/* Retorno de hover no próprio link, sem tocar no selo: sobe 2px. */
.v4-who__badges a {
  display: block;
  border-radius: 8px;
  transition: translate var(--dur-base) var(--ease-out);
}
.v4-who__badges a:hover { translate: 0 -2px; }
.v4-who__badges img {
  display: block;
  height: var(--v4-badge-h);
  width: auto;
}
.v4-who__badges a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
}
/* a segunda cópia do selo, no fim do time: só no celular (bloco de 760) */
.v4-who__badges--end { display: none; }

/* O time (19/10/2026, TRED-150): o slide 4 do deck v10 como créditos.
   Cada grupo é o número (o mesmo Bebas da fileira) e, ao lado, o rótulo e
   os nomes; um fio só, entre os dois grupos. Os nove nomes em duas colunas
   da largura da tinta, cinco e quatro. Sem turquesa sobre roxo, sem caixa,
   sem ícone. Cada nome leva à função dele na /our-services/. */
.v4-who__team { display: flex; flex-direction: column; }
.v4-who__group {
  display: grid;
  grid-template-columns: 3.5rem max-content;
  column-gap: var(--space-5);
  align-items: start;
}
.v4-who__group + .v4-who__group {
  margin-top: var(--space-7);
  padding-top: var(--space-7);
  border-top: 1px solid var(--border-subtle);
}
.v4-who__group-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding-top: 2px;
}
.v4-who__group .v4-who__label { margin-top: 0; }
.v4-who__director {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 1.75rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-primary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out);
}
.v4-who__director svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: translate var(--dur-base) var(--ease-out);
}
.v4-who__director:hover { color: var(--purple-700); }
.v4-who__director:hover svg { translate: 2px -2px; }
.v4-who__roles {
  list-style: none;
  margin: var(--space-1) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, max-content);
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: var(--space-9);
}
.v4-who__roles a {
  display: block;
  padding-block: var(--space-1);
  font-size: 1.25rem;
  font-weight: var(--weight-medium);
  line-height: 1.4;
  color: var(--brand-ink);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 0.3em;
  transition: color var(--dur-base) var(--ease-out),
              text-decoration-color var(--dur-base) var(--ease-out);
}
.v4-who__roles a:hover { color: var(--brand-primary); text-decoration-color: var(--purple-200); }
.v4-who__director:focus-visible,
.v4-who__roles a:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 4px;
  border-radius: 2px;
}
/* de 1061 a 1279 os nomes vão a 18px e as colunas a 48: com 20px a lista
   pedia ~510px e o título ia a três linhas na coluna que sobrava */
@media (min-width: 1061px) and (max-width: 1279px) {
  .v4-who__roles { column-gap: var(--space-8); }
  .v4-who__roles a { font-size: var(--text-lg); }
}

/* ------------------------------------------------------------
   2b. OUR PROCESS — título fixo + baralho de cards ao lado dele
   ------------------------------------------------------------
   Esquema do "Working with us" do hugeinc.com/solutions, medido em
   11/09/2026, reproduzido na estrutura: título e baralho são IRMÃOS na
   seção (o sticky do título só viaja a altura toda se o bloco que o
   contém for a seção inteira); o título trava no meio da tela e os
   cards ancoram no centro vertical, um sobre o outro, em leque.

   DUAS COLUNAS desde 27/09/2026, a pedido: o MESMO efeito, mas o título
   à esquerda (5/12) e o baralho à direita (7/12), ao lado dele — não
   mais por cima. Com os títulos menores de 26/09 o que sobrava do
   título atrás dos cards era "How we / grow", e a seção passava sem
   cabeça legível. (Até 26/09 este comentário registrava que uma versão
   em duas colunas tinha sido feita e recusada; o pedido de 27/09 a
   substitui.) Abaixo de 1060, coluna única com o título preso no TOPO e
   os cards presos logo abaixo dele (01/10/2026; antes passavam por cima
   do título preso no meio da tela) — ver o bloco de 1060.

   Só o leque é JS (`home-v4.js`), e só acima de 1060px. O painel de
   cada card é o NÚMERO da etapa em Bebas — uso sancionado da fonte,
   zero geração; chão alternando roxo / tinta / turquesa / roxo
   profundo como o `data-theme` do original, e sobre turquesa o número
   vai em tinta, nunca branco.
   ------------------------------------------------------------ */

.v4-proc {
  position: relative;
  background: var(--surface-page);
  padding-block: clamp(4.5rem, 8vw, 10rem);
}

.v4-proc__head {
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
  max-width: var(--container-max);
  margin: 0 auto clamp(3.5rem, 6vw, 6rem);
  padding-inline: var(--container-pad);
}
.v4-proc__head h2 {
  margin: var(--space-4) 0 0;
  font-size: var(--title-statement);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
/* O parágrafo de apoio saiu em 26/09/2026: repetia o "Week 1–2 … Ongoing"
   dos próprios cards e a resposta de prazo da FAQ logo abaixo. */

.v4-proc__stack {
  list-style: none;
  margin: 0;
  padding: 0 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5rem;
}
.v4-proc__item {
  position: sticky;
  width: 100%;
}

/* ≥1061: as duas colunas. O mesmo mecanismo de antes — só muda onde o
   título e o baralho moram. */
@media (min-width: 1061px) {
  .v4-proc {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: var(--space-9);
    align-items: start;
    /* a régua do container (1440 + margem) sem perder o fundo de ponta
       a ponta: a seção não usa `.wrap`, porque o título tem de ser filho
       direto dela para o sticky viajar a altura toda */
    padding-inline: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
    /* largura e altura do card = as da coluna da direita; é da altura que
       sai o ponto em que o baralho ancora no centro da tela, sem JS */
    --v4-card-w: calc((min(100vw, var(--container-max)) - 2 * var(--container-pad) - var(--space-9)) * 7 / 12);
    --v4-card-h: calc(var(--v4-card-w) * 6 / 11);
  }
  .v4-proc__head {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
  .v4-proc__stack {
    grid-column: 2;
    grid-row: 1;
    padding: 0;
  }
  /* o baralho se autocentraliza na viewport, com piso abaixo do header */
  .v4-proc__item { top: max(6rem, calc((100svh - var(--v4-card-h)) / 2)); }
}
.v4-proc__card {
  font-size: 2rem;   /* ÂNCORA do leque: o JS desloca em `em` daqui (2.125em ≈ 68px) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px;
  padding: 4px;
  aspect-ratio: 11 / 6;
  border-radius: 20px;
  background: var(--white);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}
.v4-proc__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-5);
  padding: clamp(1.5rem, 3vw, 3rem) clamp(2rem, 4vw, 4.5rem) clamp(1.5rem, 3vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
}
.v4-proc__when {
  font-weight: var(--weight-semibold);
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--teal-700);
}
.v4-proc__text h3 {
  margin: 0;
  font-size: clamp(1.25rem, 1.9vw, 2rem);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: balance;
}
.v4-proc__text p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-body);
}
.v4-proc__media {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 16px;   /* 20 − 4 do padding: os cantos internos fecham com os externos */
  overflow: hidden;
  background: var(--brand-primary);
  color: var(--text-on-brand);
}
.v4-proc__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* O chão colorido segue sob a imagem: é o que aparece enquanto o lazy
   não trouxe o arquivo, e o que sobra num card sem imagem (o número). */
.v4-proc__card--1 .v4-proc__media { background: var(--site-dark); }
.v4-proc__card--2 .v4-proc__media { background: var(--teal-500); color: var(--brand-ink); }
.v4-proc__card--3 .v4-proc__media { background: var(--purple-700); }
.v4-proc__n {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(6rem, 14vw, 14rem);
  line-height: 0.85;
  letter-spacing: var(--tracking-display);
  /* a régua da marca sobre o número — o traço do eyebrow, em escala */
  padding-top: 0.06em;
  border-top: 2px solid currentColor;
}

/* ------------------------------------------------------------
   4. FAQ — bloco `.faq2` compartilhado (theme.css); aqui só o chão
   ------------------------------------------------------------
   O hero da v4 fica pinado atrás da página inteira: toda seção precisa
   de fundo opaco, senão o acervo de imagens aparece por baixo do texto.
   ------------------------------------------------------------ */

/* BRANCO com fio em cima, não o `--surface-page` do Our process: desde que
   o Services subiu (30/09/2026) as duas vêm coladas, e no mesmo off-white
   a FAQ virava continuação do baralho. É a outra neutra dos tokens. */
.v4-faq {
  position: relative;
  background: var(--white);
  border-top: 1px solid var(--border-subtle);
}

/* ------------------------------------------------------------
   RESPONSIVO — outro layout, não o mesmo espremido
   ------------------------------------------------------------ */

@media (max-width: 1060px) {
  /* Who we are numa coluna: título, apoio, a fileira (o link e o selo
     descem juntos quando não cabem) e o time embaixo. */
  .v4-who__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-9); }
  .v4-who__director,
  .v4-who__roles a { display: flex; align-items: center; min-height: 44px; }   /* piso de toque */

  /* o hero deixa de ser 100vh e o theme.css põe 40px de respiro embaixo;
     aqui a costura da folha continua sendo 44px, e o controle precisa de
     ar entre o CTA e ele */
  .hero-section--v4 { padding-bottom: 44px; }
  /* A folha do Selected Work projeta para cima uma sombra de ~70px
     (`.site-curtain` e `.section-sheet`). Aqui o hero não é 100vh e o CTA
     fica a poucos px da costura: a sombra escurecia a metade de baixo do
     botão turquesa e o texto caía a 3,9:1 a 900 e 4,3:1 a 320 (TRED-141;
     medido com e sem a sombra). Abaixo de 1060 o hero não é preso — a folha
     não desliza por cima dele, só encosta —, e sobre o fundo escuro a sombra
     quase não se via; sai. Subir a grade não resolve: o hero inteiro é um
     contexto de empilhamento abaixo da folha. */
  .v4 .site-curtain,
  .v4 .section-sheet { box-shadow: none; }
  /* O "Pause motion" sai até 1060px (01/10/2026). Desde 02/10/2026 o fundo
     do hero roda em loop aqui também (hero-fibers.js), e o botão segue
     fora por decisão do usuário — desvio consciente da WCAG 2.2.2
     (movimento automático > 5s sem pausa). No desktop ele fica. */
  .hero-section--v4 .hero-motion { display: none; }

  /* logos do Selected Work: ESTEIRA (10/10/2026, a pedido) — uma linha só,
     correndo em loop, em vez de fileiras que esticavam a página. O mesmo
     mecanismo da esteira da /our-services/ e da antiga Our clients: faixa
     de `max-content` com duas cópias dos logos e `translateX(-50%)` em
     loop (cada logo leva o vão como padding, para a emenda cair exata),
     sangrando até a borda da tela como a fila dos cards. Duas cópias
     bastam porque uma já passa da largura útil (~1.150px a 0,72; ~930px a
     0,58). O home.js pausa fora da tela (`is-onscreen`, via `data-strip`)
     e o botão de pausa da Home também vale (`body.motion-paused`). */
  @keyframes work-marquee { to { transform: translateX(-50%); } }
  .work-logos__strip {
    position: relative;
    overflow: hidden;
    margin-inline: calc(-1 * var(--container-pad));
    padding-top: var(--space-6);
  }
  .work-logos__strip::before,
  .work-logos__strip::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(32px, 8vw, 72px);
    z-index: 1;
    pointer-events: none;
  }
  .work-logos__strip::before { left: 0; background: linear-gradient(to right, var(--surface-cream), transparent); }
  .work-logos__strip::after  { right: 0; background: linear-gradient(to left, var(--surface-cream), transparent); }
  .work-logos__list {
    --k: 0.72;
    width: max-content;
    justify-content: flex-start;
    gap: 0;
    animation: work-marquee 28s linear infinite;
  }
  .work-logos__strip.is-onscreen .work-logos__list { will-change: transform; }
  .work-logos__strip:not(.is-onscreen) .work-logos__list,
  body.motion-paused .work-logos__list { animation-play-state: paused; }
  /* o vão vai no grupo (padding, para a emenda da cópia cair exata) e entre
     os logos de um mesmo grupo; a legenda fica do tamanho dos logos */
  .work-logos__group { flex: none; padding-right: var(--space-9); }
  .work-logos__marks { gap: var(--space-7); }
  .work-logo { flex: none; padding: 0; margin: 0; overflow: visible; }
  .work-logos__group--dup { display: flex; }

  .v4-who__link { min-height: 44px; }   /* piso de toque */

  /* processo abaixo de 1060: cards estreitos (25em) numa coluna, mídia em
     cima; o leque (JS) não roda.
     O TÍTULO TRAVA NO TOPO e os cards travam logo abaixo dele, um sobre o
     outro (01/10/2026, a pedido). Antes ele travava no meio da tela e os
     cards, presos a 88px, passavam por cima — a seção corria sem cabeça.
     O título leva o chão da seção e fica acima dos cards: card que sobe
     além do ponto some atrás dele, não por cima. `--v4-proc-cards` é onde
     os cards param = altura da cabeça (título + 16 + 16) + ~40 de folga; a
     altura muda com as linhas do título, por isso o valor muda com a
     largura. Medido em 19/10/2026, com o título do Homepage Copy Brief
     ("…And what it asks of you."): duas linhas de 600 a 1060 (144–160px),
     três de 360 a 599 (170–176), até cinco a 320 (237).
     Rolando para cima o header volta e cobriria o título: enquanto ele
     está na tela, título e cards descem a altura da barra dele (76px),
     no mesmo tempo da volta. */
  .v4-proc { --v4-proc-cards: 12.5rem; }
  .v4-proc__head {
    top: 0;
    transform: none;
    z-index: 2;
    padding-block: var(--space-4);
    background: var(--surface-page);
  }
  .v4-proc__stack { gap: 3.5rem; padding: 0 var(--space-5); }
  .v4-proc__item { max-width: 25em; top: var(--v4-proc-cards); }
  body:has(.site-header:not(.is-hidden)) :is(.v4-proc__head, .v4-proc__item) { translate: 0 76px; }
  .v4-proc__card { font-size: 1.6rem; grid-template-columns: 1fr; aspect-ratio: auto; }
  .v4-proc__media { order: -1; aspect-ratio: 16 / 9; }
  .v4-proc__text { padding: 1.5rem 1.75rem 1.75rem; gap: var(--space-4); }
  .v4-proc__n { font-size: clamp(5rem, 22vw, 8rem); }

}

@media (max-width: 760px) {
  /* O brilho turquesa do hero oficial tem 860px — numa tela de 390 ele
     é maior que a viewport e vira o CHÃO da metade de baixo: hero
     turquesa, CTA turquesa sobre turquesa. Aqui (só na v4, o theme.css
     é da Home oficial) ele volta a ser brilho. */
  .hero-section--v4 .hero-glow-2 { opacity: 0.28; }

  .hero-motion { padding: 0 16px 14px; justify-content: center; }

  .v4-proc { --v4-proc-cards: 12rem; }   /* título em duas linhas (ver o bloco de 1060) */

  /* logos do Selected Work: o fio sobe para cima do rótulo, que fica
     centrado como o resto do celular; a esteira continua, menor, e o
     período mais curto mantém a velocidade (~42px/s) */
  .work-logos__head { flex-direction: column-reverse; align-items: stretch; gap: var(--space-5); }
  .work-logos__strip { padding-top: var(--space-5); }
  .work-logos__list { --k: 0.58; animation-duration: 22s; }
  .work-logos__group { padding-right: var(--space-8); }
  .work-logos__marks { gap: var(--space-6); }

  /* Who we are no celular, refeita em 20/10/2026 ("linhas com um item só",
     1.463px a 390): nenhuma linha leva uma coisa sozinha.
     - Os dois números lado a lado, sem o selo, que desce para o fim.
     - Cada grupo do time é um PAR centrado — número e rótulo lado a lado —
       e embaixo o diretor ou os nomes. O `group-body` some da caixa
       (`contents`) para os filhos caírem na grade do grupo; as colunas
       `1fr auto auto 1fr` centram o par, e o que ocupa a linha inteira não
       entra na conta das duas do meio (atravessa as flexíveis).
     - Os nove nomes em duas colunas, com o bloco centrado e o texto à
       esquerda dentro dele; `minmax(0, max-content)` deixa a coluna
       encolher abaixo do nome mais longo a 320, e o nome quebra dentro dela
       (o alvo segue com 44).
     - Na última linha, o "Meet the team" e o selo, um par centrado (o link
       à esquerda e o selo à direita, como pedido em 01/10/2026). Os 48px
       acima e entre os dois são o respiro do selo (≥ 44). */
  .v4-who .sec-eyebrow { justify-content: center; }
  .v4-who__main { align-items: center; }
  .v4-who__lead { margin-inline: auto; }
  .v4-who__row { justify-content: center; }
  .v4-who__fact { align-items: center; }
  .v4-who__label { font-size: var(--text-sm); }
  .v4-who__grid { row-gap: var(--space-8); }
  .v4-who__badges--row { display: none; }
  .v4-who__group {
    grid-template-columns: 1fr auto auto 1fr;
    column-gap: var(--space-3);
    row-gap: var(--space-3);
    align-items: center;
  }
  .v4-who__group + .v4-who__group { margin-top: var(--space-6); padding-top: var(--space-6); }
  .v4-who__group-body { display: contents; }
  .v4-who__group .v4-who__figure { grid-column: 2; grid-row: 1; }
  .v4-who__group .v4-who__label { grid-column: 3; grid-row: 1; text-align: left; }
  .v4-who__director,
  .v4-who__roles,
  .v4-who__end { grid-column: 1 / -1; justify-self: center; }
  .v4-who__roles {
    margin: 0;
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: var(--space-5);
  }
  .v4-who__roles a { font-size: var(--text-base); text-align: left; }
  .v4-who__end {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    margin-top: var(--space-8);
  }
  .v4-who__end .v4-who__link { margin-top: 0; }
  .v4-who__badges--end { display: flex; }

}

/* a descida do título e dos cards acompanha a volta do header — só com
   movimento liberado; sem ele, o salto é instantâneo */
@media (max-width: 1060px) and (prefers-reduced-motion: no-preference) {
  .v4-proc__head,
  .v4-proc__item { transition: translate 0.45s var(--ease-out); }
}
/* abaixo de 600 o título do processo quebra em três linhas (~176px) e,
   abaixo de 360, em até cinco (237px a 320) */
@media (max-width: 599px) {
  .v4-proc { --v4-proc-cards: 13.75rem; }
}
@media (max-width: 359px) {
  .v4-proc { --v4-proc-cards: 17.5rem; }
}

/* ------------------------------------------------------------
   MOVIMENTO REDUZIDO — os logos do Selected Work aparecem sem descer
   (o site.js já marca `is-revealed` na hora; aqui some a transição).
   NO FIM DO ARQUIVO, e de propósito (TRED-141): o bloco de 1060 declara
   a esteira com a mesma especificidade, e enquanto este vinha antes ele
   vencia — com movimento reduzido a esteira seguia andando no celular.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .js .work-logos__rule.reveal { transition: none; }
  /* a esteira dos logos (≤1060) para e vira uma fila rolável com o dedo:
     os sete seguem alcançáveis, só não andam sozinhos */
  .work-logos__list { animation: none; }
  .work-logos__strip { overflow-x: auto; scrollbar-width: none; }
  .work-logos__strip::-webkit-scrollbar { display: none; }
  .work-logos__group--dup { display: none; }
  /* os deslocamentos de hover do Who we are ficam; só o movimento sai */
  .v4-who__link:hover svg,
  .v4-who__director:hover svg,
  .v4-who__badges a:hover { translate: none; }
}