/* ============================================
   BSPOKE — STYLESHEET
   Swiss Design / Dark Theme / High Performance
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg:       #0C0C0C;
  --bg-2:     #111111;
  --bg-3:     #181818;
  --bg-4:     #212121;
  --white:    #F2F2F2;
  --white-dim: rgba(242,242,242,0.55);
  --white-ghost: rgba(242,242,242,0.06);
  --red:      #D42020;
  --red-hi:   #FF2828;
  --red-dim:  rgba(212,32,32,0.12);
  --gray:     #4A4A4A;
  --gray-mid: #7A7A7A;
  --gray-lt:  #AAAAAA;
  --border:   #1E1E1E;
  --border-lt:#2A2A2A;

  --font-disp: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', 'Helvetica Neue', sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;

  --nav-h: 72px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io:  cubic-bezier(0.65, 0, 0.35, 1);

  /* --card-title-lg/-md/-sm (escala de título de card legada) foram
     removidos: -lg/-md já tinham sido consolidados em --text-h1/--text-h2/
     --text-h3 na migração do Sobre; --card-title-sm sobrevivia só por
     causa do antigo .team-member__name de Equipe (removido nesta
     reconstrução — busca global confirmou zero uso restante do token em
     todo o projeto antes da remoção). Use --text-h1/--text-h2/--text-h3. */

  /* ============================================
     BSPOKE DIGITAL DESIGN SYSTEM — tokens
     (golden master: definidos na Home, para uso
     progressivo no restante do site)
     ============================================ */

  /* grid / container — única fonte de verdade: nav, Hero e .container
     sempre consomem estes tokens, nunca um valor px próprio.
     --gutter é redefinido nos breakpoints (ver RESPONSIVE) — isso
     propaga automaticamente para todo componente que o usa. */
  --container-max: 1440px;
  --gutter: 48px;
  --rail-w: 72px;      /* coluna do rail decorativo do Hero */
  --label-col: 180px;  /* coluna de label/eyebrow recorrente — Position, Manifesto, PageHero */

  /* spacing scale — progressão ~1.5x. use sempre um token, nunca um px solto */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  12px;
  --space-s:   20px;
  --space-m:   32px;
  --space-l:   48px;
  --space-xl:  64px;
  --space-2xl: 96px;
  --space-3xl: 128px;

  /* padding vertical de <section> — cada valor corresponde a um papel narrativo,
     não a uma escolha arbitrária por seção (ver comentário "RITMO" antes de cada seção da Home) */
  --section-tight: 96px;   /* seções de método/estrutura — mais densas, mais próximas */
  --section-base:  128px;  /* a maioria das seções editoriais */
  --section-loose: 176px;  /* seções-protagonista: Selected Work, CTA final */

  /* typography scale — funções, não tamanhos soltos */
  --text-display: clamp(72px, 12vw, 176px);  /* Hero */
  --text-h1:      clamp(34px, 4.2vw, 58px);  /* declaração editorial de seção (Positioning, CTA) */
  --text-h2:      clamp(28px, 3.2vw, 44px);  /* título de seção (sec-title) */
  --text-h3:      clamp(19px, 2vw, 24px);    /* título dentro de card/etapa */
  --text-h4:      16px;                       /* sub-headline curta dentro de card */
  --text-body-lg: 18px;
  --text-body:    15px;
  --text-small:   13px;
  --text-label:   11px;  /* mono, uppercase, letter-spacing .2–.25em — eyebrows/labels */
  --text-meta:    10px;  /* mono, uppercase — metadado secundário dentro de componente */

  /* border taxonomy — três papéis, não "borda porque é uma caixa":
     STRUCTURAL → 1px solid var(--border); só entre zonas de tom/densidade parecidos, quando
                  contraste de fundo/escala não é suficiente para separar.
     COMPONENT  → técnica gap:1px + background:var(--border) dentro de grids (hairline entre itens).
     ACCENT     → var(--red), expressiva e rara (barra de hover, sublinhado, marcador de destaque). */
}

html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* ─── NAV ─────────────────────────────────── */
#nav {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--nav-h);
  z-index: 1000;
  transition: background .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(12,12,12,.96);
  border-bottom-color: var(--border);
  backdrop-filter: blur(12px);
}
.nav__container {
  max-width: var(--container-max); margin: 0 auto;
  padding: 0 var(--gutter); height: 100%;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__logo {
  display: flex;
  align-items: center;
}
.nav__logo img {
  display: block;
  height: 20px;
  width: auto;
}
.nav__links { display: flex; align-items: center; gap: 32px; }
.nav__link {
  font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--gray-lt);
  position: relative;
  transition: color .2s;
}
.nav__link::after {
  content: ''; position: absolute;
  bottom: -3px; left: 0; width: 0; height: 1px;
  background: var(--red);
  transition: width .3s var(--ease-out);
}
.nav__link:hover, .nav__link.active { color: var(--white); }
.nav__link:hover::after, .nav__link.active::after { width: 100%; }
.nav__cta {
  font-size: 12px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--white); background: var(--red);
  padding: 10px 22px;
  transition: background .2s, transform .2s;
}
.nav__cta:hover { background: var(--red-hi); transform: translateY(-1px); }
.nav__burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav__burger span {
  display: block; width: 26px; height: 1.5px;
  background: var(--white);
  transition: transform .3s, opacity .3s, width .3s;
}
.nav__burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__burger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav__burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ─── MOBILE MENU ─────────────────────────── */
.mob-menu {
  position: fixed; inset: 0;
  background: var(--bg); z-index: 999;
  display: flex; align-items: center; justify-content: center;
  transform: translateX(100%);
  transition: transform .5s var(--ease-out);
}
.mob-menu.open { transform: translateX(0); }
.mob-menu__inner { display: flex; flex-direction: column; gap: 4px; }
.mob-menu__link {
  font-family: var(--font-disp);
  font-size: clamp(36px,8vw,64px);
  font-weight: 700; letter-spacing: .02em;
  color: var(--white); opacity: .35;
  padding: 6px 0;
  transition: opacity .2s, color .2s;
}
.mob-menu__link:hover { opacity: 1; color: var(--red); }

/* ─── LAYOUT UTILS ────────────────────────── */
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }

/* border-bottom mantida incondicional (reavaliado no PROMPT 04): tem papel
   diferente das bordas de rodapé de seção — separa título de corpo dentro
   da MESMA zona de fundo, onde não há contraste de cor para fazer esse
   trabalho. Como todo .sec-header cumpre essa função igual, uma variante
   sem borda não teria justificativa de conteúdo. */
.sec-header {
  display: flex; align-items: baseline; gap: var(--space-s);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-s);
  border-bottom: 1px solid var(--border);
}
.sec-num { font-family: var(--font-mono); font-size: var(--text-label); color: var(--red); letter-spacing: .12em; }
.sec-title {
  font-family: var(--font-disp);
  font-weight: 700; font-size: var(--text-h2);
  letter-spacing: .02em; text-transform: uppercase;
  flex: 1;
}
.sec-link {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: .12em; color: var(--gray-mid);
  transition: color .2s;
}
.sec-link:hover { color: var(--red); }
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label); letter-spacing: .25em;
  color: var(--gray-mid); text-transform: uppercase;
}
.text-accent { color: var(--red); }

/* ─── FOCUS VISIBLE ────────────────────────────
   Fonte única para foco de teclado em todo o site: nenhum componente
   remove outline sem repor este indicador. Só aparece em navegação via
   teclado (:focus-visible), nunca em clique de mouse. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}

/* ─── BUTTON SYSTEM ───────────────────────────
   Família única: Primary (ação principal), Outline (ação secundária),
   Text Link (.sec-link, navegação leve dentro de componente) e --lg
   (variante grande, só para CTAs de fechamento de seção — nunca uma
   ação de formulário). Foco visível via :focus-visible acima — não
   removido em nenhum estado.
   border/background/appearance abaixo existem só pra neutralizar o
   estilo nativo de <button> (borda outset, background buttonface,
   chrome de sistema) — todo .btn do site até aqui era <a>, que já
   computa border:none/background:transparent/appearance:none por
   padrão; declarar isso explicitamente não muda nenhum <a class="btn">
   existente (mesmo valor final), só corrige o único <button class="btn">
   do site (o submit de Contato). */
.btn {
  display: inline-flex; align-items: center; gap: var(--space-2xs);
  font-family: var(--font-body);
  font-weight: 600; font-size: var(--text-small);
  letter-spacing: .1em; text-transform: uppercase;
  padding: var(--space-s) var(--space-m);
  border: none; background: none; appearance: none; -webkit-appearance: none;
  transition: all .25s var(--ease-out);
  cursor: pointer;
}
.btn--primary { background: var(--red); color: var(--white); }
.btn--primary:hover { background: var(--red-hi); transform: translateY(-2px); }
.btn--outline { border: 1px solid var(--border-lt); color: var(--white); }
.btn--outline:hover { border-color: var(--red); color: var(--red); }
.btn--lg { font-size: var(--text-body); padding: var(--space-m) var(--space-l); }
.btn:disabled { opacity: .7; cursor: default; transform: none !important; }

/* ─── HERO ────────────────────────────────── */
.hero {
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding-top: var(--nav-h);
  position: relative; overflow: hidden;
}
.hero__grid {
  flex: 1;
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  max-width: var(--container-max); margin: 0 auto; width: 100%;
  padding: 0 var(--gutter);
}
/* rail estrutural: marca a coluna assimétrica do master grid do Hero
   (mesma lógica de "coluna de label" usada em Position/Manifesto/PageHero,
   só que sem conteúdo textual aqui — função é puramente de alinhamento). */
.hero__rail {
  padding-top: 80px;
  border-right: 1px solid var(--border);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-2xs); }
.hero__content {
  padding: var(--space-xl) 0 var(--space-xl) var(--space-xl);
  display: flex; flex-direction: column; justify-content: center; gap: var(--space-2xl);
}
.hero__hl { display: flex; flex-direction: column; }
.hero__lw { overflow: hidden; }
.hero__l {
  display: block;
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: var(--text-display);
  line-height: .9;
  letter-spacing: -.01em;
  text-transform: uppercase;
}
/* Estado oculto do reveal só existe com JS confirmado (classe .js no
   <html>, ver partials/head.html) — sem JS, o H1 já nasce visível em vez
   de ficar preso fora da tela esperando uma animação que nunca roda. */
html.js .hero__l { transform: translateY(110%); }
.hero__l--red { color: var(--red); }
.hero__sub {
  display: flex; align-items: flex-end; gap: var(--space-xl);
}
.hero__sub p {
  font-size: clamp(15px,1.4vw,18px);
  color: var(--gray-lt); font-weight: 300; line-height: 1.65;
  max-width: 360px;
}
/* PREMIUMIZATION & CREATIVE RESTRAINT: hero__ticker e hero__scroll (+
   hero__scroll-line/@keyframes scpulse) removidos nesta rodada —
   classificados NOISE. Ticker repetia, em outro registro tipográfico, a
   mesma informação já dita no subtítulo uma linha acima (estratégia/
   criatividade/tecnologia/execução); indicador de scroll com pulso CSS
   contínuo era motion ornamental sem função de orientação real (device
   genérico de landing page, não uma assinatura BSPOKE) e o hairline que
   o acompanhava. Headline agora é o único elemento no rodapé do Hero. */

/* ─── MANIFESTO ───────────────────────────── */
.manifesto { padding: 120px 0; border-bottom: 1px solid var(--border); }
.manifesto__inner {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start;
}
.manifesto__hl {
  font-family: var(--font-disp);
  font-weight: 700;
  font-size: clamp(38px,4.5vw,68px);
  line-height: 1.1; letter-spacing: -.01em;
  margin-bottom: 32px;
}
.manifesto__hl em { font-style: italic; color: var(--red); }
.manifesto__body {
  font-size: 18px; line-height: 1.85;
  color: var(--gray-lt); font-weight: 300;
  max-width: 600px;
}
.manifesto__body + .manifesto__body { margin-top: 24px; }
/* Modificador exclusivo do Sobre: dá ao parágrafo de fechamento da
   História mais peso e contraste que os anteriores — sem virar quote
   card, sem aspas, sem novo componente. Não altera .manifesto__body
   base, usado por Clientes e Equipe. */
.manifesto__body--close {
  color: var(--white);
  font-weight: 600;
  max-width: 520px;
}
.manifesto__body.manifesto__body--close { margin-top: var(--space-m); }

/* ─── CAPABILITIES (home, Ato 03) ─── RITMO: spoiler compacto, não catálogo ──
   HOME CAPABILITIES COMPACT V1: mesma função e mesmo conteúdo da rodada
   anterior — só densidade/duração vertical mudaram. Era 5 faixas
   full-width empilhadas (padding generoso por item + CTA solto abaixo);
   agora é uma MATRIZ EDITORIAL de 2 colunas (.home-capabilities__matrix,
   3 linhas × 2 colunas em desktop) — diagrama de relação, não 5 cards:
   toda célula usa var(--bg), a mesma cor de fundo da página — sem
   background próprio, radius, shadow ou hover de card; a separação vem
   só da técnica de hairline gap+background já usada em .home-capabilities
   __list (removida) e em .work-list antes dela, agora aplicada em 2D
   (gap:1px no grid cria a treliça horizontal+vertical automaticamente).
   CTA "Explore nossas especialidades →" é a 6ª célula (linha 3, coluna 2)
   — deliberado, não decorativo: 5 territórios + 1 porta pra Especialidades.
   Distingue-se das 5 células de conteúdo só por composição (botão
   centrado vs. bloco de 3 linhas), sem componente novo. Em 900px a
   matriz colapsa para 1 coluna — a 6ª célula passa a aparecer
   naturalmente após a 5ª, sem forçar a metáfora de matriz no mobile
   (não precisa de caso especial: em 1 coluna ela já é só "o próximo
   item da lista"). Os 5 territórios seguem com peso editorial idêntico
   — mesma tipografia (inalterada desta rodada), mesmo espaçamento entre
   si. Vermelho: nenhum, mantido da rodada anterior. */
/* FINAL DENSITY V1: fechamento discretamente mais contido que a abertura
   (--section-tight no lugar de --section-base só no padding-bottom) —
   o topo mantém separação total em relação a Positioning; só a
   transição Capabilities→Model fica mais justa, servindo dois
   objetivos ao mesmo tempo (densidade + passagem). Ambos tokens já
   existiam no sistema, nenhum novo criado. */
.home-capabilities { padding: var(--section-base) 0 var(--section-tight); border-bottom: 1px solid var(--border); }
/* Mesmo eixo label-col+1fr de .position__inner/.home-response__inner —
   não .sec-header: com um label ("What We Do") como irmão do título,
   .sec-header (flex row sem quebra) apertaria demais o título em telas
   estreitas; este grid já colapsa para 1 coluna em 900px como os outros. */
.home-capabilities__intro { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }

/* Matriz: gap:1px + background:var(--border) é a mesma técnica de
   hairline do resto do sistema, só que em grid 2D em vez de flex-column
   — cada .home-capabilities__cell cobre seu próprio fundo (var(--bg)),
   o 1px de gap entre elas fica exposto como linha, formando a treliça
   horizontal+vertical sem desenhar nenhuma borda manualmente. */
.home-capabilities__matrix {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--border);
  /* FINAL DENSITY V1: de --space-l pra --space-m — headline e matriz
     precisam ler como o mesmo momento, não como dois capítulos. */
  margin-top: var(--space-m);
}
.home-capabilities__cell {
  background: var(--bg);
  display: flex; flex-direction: column; gap: var(--space-3xs);
  /* FINAL DENSITY V1: padding vertical de --space-m pra --space-s —
     horizontal preservado (--space-l), a redução é só ao redor do
     conteúdo da célula, não entre índice/território/capabilities
     (esse espaçamento interno é --space-3xs, intocado). */
  padding: var(--space-s) var(--space-l);
}
.home-capabilities__idx {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: .12em; color: var(--gray-mid);
}
/* Tamanho único para os 5 territórios — nenhuma variação de escala entre
   eles, deliberadamente (a hierarquia é vertical, não entre linhas).
   Tipografia preservada da rodada anterior, sem redução. */
.home-capabilities__territory {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(26px,2.6vw,36px); line-height: 1.1;
  letter-spacing: -.005em; text-transform: uppercase;
  margin-top: var(--space-3xs);
}
.home-capabilities__caps {
  font-size: var(--text-body); line-height: 1.7; color: var(--gray-lt);
  font-weight: 300;
}
/* 6ª célula: só o CTA, centrado verticalmente — a diferença de
   composição (texto de 3 linhas nas outras 5 vs. um único botão aqui)
   já basta pra ler como ação, não como sexta capability. */
.home-capabilities__cell--cta { justify-content: center; }

/* ─── CTA BAND ─── RITMO: impacto final ──
   Fecha a circularidade narrativa aberta no Hero — por isso pode ocupar
   mais espaço que qualquer outra seção e ecoa a assinatura em maiúsculas. */
/* Sem border-bottom: a mudança de fundo para bg-2 já separa esta seção do
   rodapé (var(--bg)) nas 6 páginas onde .cta-band é a última seção antes
   do footer — mesmo princípio já aplicado em .selected-clients. */
.cta-band {
  padding: var(--section-loose) 0 var(--space-3xl);
  background: var(--bg-2);
}
/* O ghost-text decorativo 'GO' foi avaliado e removido (PROMPT 04): era um
   watermark tipográfico sem vínculo com o copy ou com a marca — decoração
   pela decoração, não uma escolha editorial. Sem substituto. */
.cta-band__inner { display: flex; flex-direction: column; gap: var(--space-s); max-width: 900px; }
.cta-band__lbl { font-family: var(--font-mono); font-size: 12px; letter-spacing: .25em; color: var(--red); text-transform: uppercase; }
.cta-band__hl {
  font-family: var(--font-disp);
  font-weight: 900;
  font-size: clamp(48px,7vw,108px);
  line-height: 1.02; letter-spacing: -.02em;
}
.cta-band__sig {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em;
  color: var(--gray-mid); text-transform: uppercase; margin-top: var(--space-l);
}

/* ─── POSITIONING (home) ─── RITMO: declaração ──
   Não é um card: é uma frase de página inteira. Borda inferior mantida
   (STRUCTURAL) porque a seção seguinte compartilha o mesmo fundo — sem
   contraste de cor para separar as duas. */
.position { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.position__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.position__result {
  font-family: var(--font-disp); font-weight: 700;
  font-size: var(--text-h1); line-height: 1.15; max-width: 16ch;
}
.position__body {
  font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300;
  max-width: 640px; margin: var(--space-m) 0;
}
.position__highlight {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(20px,2.2vw,28px); color: var(--white);
  margin: var(--space-2xs) 0 var(--space-s);
}

/* ─── MODEL (home, Ato 04) ─── RITMO: conclusão, não novo clímax ──
   HOME STRATEGIC CLARITY V1: conclui o raciocínio de Capabilities e
   prepara Conversion — eixo label-col+1fr que rima com Positioning/
   pg-hero/Manifesto (.home-response__inner, classe Home-scoped;
   .specialties/.specialties__intro confirmadas exclusivas de index.html).
   .specialties__cta removida nesta rodada (órfã: o CTA para Especialidades
   já existe em Capabilities, Model não precisa de CTA próprio — ver
   relatório). spec-lead/specialties__grid/spec-card (catálogo das 5
   especialidades) permanecem como dead CSS já sinalizado em rodadas
   anteriores — fora de escopo desta limpeza (associados a uma versão
   anterior da própria Home, não ao componente removido nesta rodada;
   não tocar). */
.home-response__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.specialties { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.specialties__intro {
  font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300;
  max-width: 620px; margin: var(--space-m) 0 var(--space-xl);
}
.spec-lead {
  border-left: 2px solid var(--red);
  padding: var(--space-2xs) 0 var(--space-2xs) var(--space-l);
  margin-bottom: var(--space-2xl);
  max-width: 760px;
}
.spec-lead__group {
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .15em; text-transform: uppercase;
  color: var(--red); display: block; margin-bottom: var(--space-s);
}
.spec-lead__name { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h1); letter-spacing: .01em; margin-bottom: var(--space-s); }
.spec-lead__headline { font-family: var(--font-disp); font-weight: 600; font-size: var(--text-h3); line-height: 1.4; color: var(--white-dim); margin-bottom: var(--space-s); max-width: 44ch; }
.spec-lead__desc { font-size: var(--text-body); line-height: 1.75; color: var(--gray-lt); max-width: 60ch; }

.specialties__grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); }
.spec-card { background: var(--bg); padding: var(--space-m) var(--space-s); transition: background .3s; }
.spec-card__group {
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .15em; text-transform: uppercase;
  color: var(--red); display: block; margin-bottom: var(--space-s); line-height: 1.5;
}
.spec-card__name { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h3); letter-spacing: .02em; margin-bottom: var(--space-2xs); }
.spec-card__headline { font-family: var(--font-disp); font-weight: 600; font-size: var(--text-h4); line-height: 1.4; color: var(--white-dim); margin-bottom: var(--space-2xs); }
.spec-card__desc { font-size: var(--text-small); line-height: 1.65; color: var(--gray-lt); }

/* ─── HOW WE WORK (home) ─── RITMO: método/estrutura ──
   Sequência conectada por uma única linha (não 5 cards): os marcadores
   "furam" a linha com background:var(--bg), reforçando continuidade. */
.process { display: flex; position: relative; list-style: none; margin-top: var(--space-l); }
.process::before { content: ''; position: absolute; top: 11px; left: 0; right: 0; height: 1px; background: var(--border-lt); }
.process__step { flex: 1; padding-right: var(--space-m); position: relative; }
.process__step:last-child { padding-right: 0; }
.process__num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); border: 1px solid var(--red); color: var(--red);
  font-family: var(--font-mono); font-size: 10px;
  position: relative; z-index: 1; margin-bottom: var(--space-m);
}
.process__title { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h3); margin-bottom: var(--space-2xs); }
.process__text { font-size: var(--text-small); line-height: 1.65; color: var(--gray-lt); }
.process__close {
  font-family: var(--font-disp); font-weight: 700; font-size: clamp(20px,2.2vw,26px);
  line-height: 1.4; color: var(--white); margin-top: var(--space-2xl); max-width: 640px;
}

/* ─── SELECTED CLIENTS (home) ─── RITMO: respiro ──
   Função única: credibilidade + pausa. Sem headline, sem parágrafo. A
   separação das seções vizinhas vem da mudança de fundo (bg-2), não de
   borda — é a pausa em si que sinaliza a transição. */
.selected-clients { padding: var(--section-loose) 0; background: var(--bg-2); }
.selected-clients .clients-grid { margin: var(--space-xl) 0 var(--space-l); background: var(--border-lt); }
.selected-clients .client-item { background: var(--bg-2); }
.selected-clients .client-item:hover { background: var(--bg-3); }

/* ─── LEADERSHIP (home) ─── RITMO: humanidade ──
   Tratamento editorial (retrato grande, sem moldura circular corporativa)
   em vez de card de organograma — mesmas duas fotos já aprovadas. Sem
   border-bottom: a seção está entre duas zonas bg-2 (Selected Clients
   acima, CTA final abaixo) — o contraste de fundo já marca as bordas. */
.leadership { padding: var(--section-base) 0; }
.leadership__cta { margin-top: var(--space-2xs); }
.leadership__intro {
  font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300;
  max-width: 640px; margin: calc(var(--space-m) * -1) 0 var(--space-xl);
}
.leadership__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-xl); max-width: 760px; margin-bottom: var(--space-l); }
.leadership__person { display: flex; flex-direction: column; gap: var(--space-s); }
.leadership__photo { aspect-ratio: 4/5; background: var(--bg-3); overflow: hidden; }
.leadership__photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.35); transition: filter .4s var(--ease-out); }
.leadership__person:hover .leadership__photo img { filter: grayscale(0); }
.leadership__name { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h3); letter-spacing: .02em; display: block; }
.leadership__role { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .15em; color: var(--red); text-transform: uppercase; display: block; margin-top: var(--space-3xs); }

/* ─── FOOTER ──────────────────────────────── */
.footer { padding: 80px 0 40px; }
.footer__grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
  padding-bottom: 60px; border-bottom: 1px solid var(--border);
}
.footer__logo { margin-bottom: 14px; }
.footer__logo img { display: block; height: 32px; width: auto; }
.footer__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--gray-mid); }
.footer__col-title { font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--red); text-transform: uppercase; margin-bottom: 22px; display: block; }
.footer__col a, .footer__col p { display: block; font-size: 14px; color: var(--gray-mid); margin-bottom: 10px; transition: color .2s; }
.footer__col a:hover { color: var(--white); }
.footer__btm {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 28px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gray);
}

/* ─── PAGE HERO (interior) ────────────────── */
.pg-hero { padding: calc(var(--nav-h) + 80px) 0 80px; border-bottom: 1px solid var(--border); }
.pg-hero__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: end; }
.pg-hero__title {
  font-family: var(--font-disp); font-weight: 900;
  font-size: clamp(60px,8vw,120px);
  line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
}
.pg-hero__sub { font-size: clamp(16px,1.4vw,20px); color: var(--gray-lt); font-weight: 300; line-height: 1.7; margin-top: 28px; max-width: 580px; }

/* ─── ABOUT PAGE ───────────────────────────── */
/* Migrado pro Golden Master (ver Home): spacing/typography scale, botões,
   focus-visible e border taxonomy vêm do sistema consolidado — só o
   .about-stmt__p mantém um clamp próprio, porque é uma composição
   editorial específica desta página (declaração central, não label-col
   como Position/Manifesto), não uma cópia da Home. (Comentário corrigido
   na rodada SOBRE COMPRESSION V1: a afirmação anterior de que .method
   seria "compartilhado com a Home" estava desatualizada — Home removeu
   "How We Work" numa rodada anterior; a classe já foi renomeada para
   .sb-method*, exclusiva de Sobre — ver comentário acima de .sb-method.) */
.about-stmt { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.about-stmt__p {
  font-family: var(--font-disp); font-weight: 600;
  font-size: clamp(22px,2.5vw,36px); line-height: 1.45;
  max-width: 1060px; margin: 0 auto; text-align: center;
  color: var(--white-dim);
}
.about-stmt__p strong { color: var(--white); }
.about-stmt__p .r { color: var(--red); }

/* Filosofia: os 3 princípios são equivalentes — mesma escala, mesmo peso,
   mesmo padding. Swiss primeiro: alinhamento rigoroso via CSS Grid com
   subgrid nas linhas (label/headline/body), então cada linha herda a
   altura da maior célula entre as 3 colunas — se uma headline quebrar em
   2 linhas, o body copy dos 3 continua começando exatamente na mesma
   altura, sem <br> artificial nem min-height chutado. Rebellion aqui é
   percebida no copy ("a ruptura não é estética"), não demonstrada em
   destaque visual do 3º princípio. */
.pillars { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: auto auto auto;
  row-gap: var(--space-s);
}
.pillar {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  padding: var(--space-l) var(--space-m);
  border-right: 1px solid var(--border);
}
.pillar:last-child { border-right: none; }
.pillar__num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); align-self: start; }
.pillar__title { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h3); letter-spacing: .01em; line-height: 1.3; align-self: start; }
.pillar__text { font-size: var(--text-body); line-height: 1.75; color: var(--gray-lt); align-self: start; }

/* CRITICAL CSS SCOPING (SOBRE COMPRESSION V1, addendum): renomeado de
   .method/.method__grid/.method-step* para .sb-method/.sb-method__grid/
   .sb-method-step* — prefixo exclusivo de Sobre, seguindo a mesma
   convenção já usada por toda página do site (.esp-*, .cs-*, .eq-*,
   .ct-*). Usage search repetido antes desta renomeação: nenhum outro
   arquivo em src/*.html incluído no build (via pages.json) referencia
   estas classes; o único outro arquivo que as usa, clientes.html, está
   excluído do build desde uma rodada anterior. A renomeação elimina
   qualquer ambiguidade futura sobre a classe estar ou não "congelada"
   junto de outra página — SHARED SYSTEM STAYS FROZEN (nenhum seletor
   global foi tocado), ABOUT GETS LOCAL OVERRIDES (prefixo próprio).
   Sem background por etapa, divisórias finas (1px, STRUCTURAL) em vez
   da técnica de hairline-grid, contínua na horizontal (desktop) e
   vertical (mobile). Não copia o .process da Home (sem círculo numerado
   nem linha conectora), mas comunica a mesma ideia de progressão.
   FINAL VERTICAL RHYTHM CORRECTION: diagnóstico real da "área vazia"
   reportada no PDF — não era o margin-top do grid (rodada anterior
   reduziu de --space-xl pra --space-l, mas .sec-header já tem
   margin-bottom: var(--space-xl) [64px], regra compartilhada,
   intocável; como .sec-header e .sb-method__grid são irmãos de bloco
   dentro de .container [display:block puro, sem overflow/flow-root],
   os dois margins colapsam pela spec CSS pro MAIOR valor — logo os 48px
   do grid nunca tiveram efeito visível, sempre foi só o margin-bottom
   do header vencendo o colapso, mascarando que aquela "redução" da
   rodada anterior não reduziu nada de verdade). O culpado real era
   padding de SEÇÃO: --section-tight ainda é 96px por lado — o maior
   token de espaçamento vertical usado nesta página inteira (maior que
   qualquer gap interno de Filosofia ou História) para um capítulo que
   hoje é só 1 linha de header + 1 linha de passos. Reduzido pra
   --space-xl [64px] por lado, -64px de padding total — o token mais
   próximo abaixo de --section-tight na escala do sistema, ainda
   existente (nenhum valor novo criado), local a .sb-method. margin-top
   do grid zerado — não é redução real (o gap visível de 64px continua
   vindo só de .sec-header, intocado), é correção de um valor que já
   era redundante desde antes desta rodada. */
.sb-method { padding: var(--space-xl) 0; border-bottom: 1px solid var(--border); }
.sb-method__grid { display: flex; list-style: none; margin: 0; padding: 0; }
.sb-method-step { flex: 1; padding: 0 var(--space-m); border-left: 1px solid var(--border); }
.sb-method-step:first-child { border-left: none; padding-left: 0; }
.sb-method-step:last-child { padding-right: 0; }
.sb-method-step__num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); display: block; margin-bottom: var(--space-s); }
.sb-method-step__title { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h3); letter-spacing: .02em; margin-bottom: var(--space-xs); line-height: 1.15; }
.sb-method-step__text { font-size: var(--text-small); line-height: 1.7; color: var(--gray-lt); }

/* Valores como síntese, não card: mantida a divisória mínima (COMPONENT,
   1px) porque organiza 4 declarações sem numeração nem ícone — mas com
   padding bem mais generoso e a tipografia da headline ganhando o mesmo
   peso de um título de seção (--text-h2), não de rótulo de card. */
.values { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.values__grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: var(--border); }
.value { padding: var(--space-xl) var(--space-l); background: var(--bg); }
.value__lbl { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .22em; color: var(--red); text-transform: uppercase; display: block; margin-bottom: var(--space-s); }
.value__title { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h2); line-height: 1.15; margin-bottom: var(--space-s); }
.value__text { font-size: var(--text-body); line-height: 1.8; color: var(--gray-lt); max-width: 46ch; }

/* ─── ESPECIALIDADES (divisoes.html) ──────────
   PROMPT 10 — Continuous Editorial Capabilities System. Abandona a ideia
   de cinco composições independentes (PROMPT 09): as 5 especialidades
   agora são capítulos (.cap-chapter) de um único sistema (.cap-system),
   compartilhando grid, tipografia, ritmo e tratamento de capabilities.
   Repetição é intencional — repetição de sistema editorial, não de card.
   A única ruptura visual forte da página fica reservada para The BSPOKE
   Model, depois dos cinco capítulos. */

/* THE BSPOKE MODEL — intro: momento de silêncio, técnica de label-column
   própria (não reutiliza Position/Manifesto, evita qualquer risco cruzado).
   EDITORIAL COMPRESSION V1: padding de --section-loose pra --section-base
   — o conteúdo desta seção ficou mais curto (4 parágrafos → 3, exemplos
   removidos), o whitespace de seção-protagonista (176px) deixou de ter
   função proporcional ao texto; --section-base ainda preserva separação
   real do pg-hero (Ato 01 desta página) logo acima. */
.esp-intro { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.esp-intro__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.esp-intro__hl { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h1); line-height: 1.15; max-width: 18ch; margin-bottom: var(--space-m); }
.esp-intro__body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.esp-intro__body + .esp-intro__body { margin-top: var(--space-m); }
.esp-intro__highlight {
  font-family: var(--font-disp); font-weight: 700;
  font-size: var(--text-h3); line-height: 1.3; color: var(--red);
  margin: var(--space-m) 0; max-width: 22ch;
}

/* CAPABILITIES SYSTEM — wrapper único. Sem padding próprio de topo/base
   além do necessário pra transição com intro/model; o ritmo vertical vive
   dentro de cada .cap-chapter, não no wrapper. */
.cap-system { border-bottom: 1px solid var(--border); }

/* Índice/território — zona A: mono, pequeno, discreto. Reaproveita o
   mesmo tratamento de eyebrow já usado em toda a página. */
.esp-eyebrow { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); text-transform: uppercase; display: block; }

/* Cada capítulo é uma repetição disciplinada da mesma estrutura de 3
   zonas — índice muito discreto | core idea dominante | capabilities
   como informação de apoio. Nunca 33/33/33: a coluna central domina.
   EDITORIAL COMPRESSION V1: padding de --space-2xl pra --space-xl —
   cada capítulo agora carrega 1-2 parágrafos e 5-6 capabilities (era
   3-4 parágrafos e 10-12); o padding fixo de seção não precisa mais
   compensar o volume antigo. Alturas continuam naturalmente diferentes
   entre capítulos (Brand Hub/SlickWorks com 6 territórios, Bluenote/
   RevMetrics com 1 parágrafo só) — nenhuma altura foi forçada a ficar
   igual. */
.cap-chapter { padding: var(--space-xl) 0; border-bottom: 1px solid var(--border); }
.cap-chapter:last-child { border-bottom: none; }
.cap-chapter--lead { padding-top: var(--space-l); padding-bottom: var(--space-xl); }
.cap-chapter__grid { display: grid; grid-template-columns: var(--label-col) 1fr 260px; gap: var(--space-xl); align-items: start; }

/* Zona B — core idea: nome, headline, descrição, fechamento. Maior peso
   visual do capítulo — é o que o olho deve encontrar primeiro. Todos os
   nomes pertencem à mesma família/escala; CMO recebe só uma pequena
   generosidade de escala e respiro, nunca um layout próprio. */
.cap-chapter__name { font-family: var(--font-disp); font-weight: 900; font-size: clamp(32px,3.6vw,52px); line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; margin-bottom: var(--space-s); }
.cap-chapter--lead .cap-chapter__name { font-size: clamp(38px,4.4vw,64px); }
.cap-chapter__headline { font-family: var(--font-disp); font-weight: 600; font-size: var(--text-h3); line-height: 1.35; color: var(--white); margin-bottom: var(--space-s); max-width: 34ch; }
.cap-chapter--lead .cap-chapter__headline { margin-bottom: var(--space-m); }
.cap-chapter__desc { font-size: var(--text-body); line-height: 1.8; color: var(--gray-lt); font-weight: 300; max-width: 56ch; }
.cap-chapter__desc + .cap-chapter__desc { margin-top: var(--space-s); }
.cap-chapter__close { font-family: var(--font-disp); font-weight: 700; font-size: clamp(19px,1.9vw,24px); line-height: 1.4; color: var(--white); margin-top: var(--space-m); max-width: 52ch; }
.cap-chapter__close--type { font-size: clamp(22px,2.4vw,32px); }

/* Zona C — capabilities: informação de apoio, quase silenciosa. Sem
   bullet, sem número, sem hover, sem hairline por item — só tipografia
   pequena, cor secundária e alinhamento preciso. Uma única lista, uma
   única linguagem para as 5 especialidades.
   PROMPT 11 — microajuste de legibilidade: o item da lista subia de
   --text-meta (10px) para --text-label (11px, token já existente, sem
   criar valor novo) depois de auditoria em 1440/1200/1024px — 10px estava
   confortável em retina mas apertado em monitores desktop comuns. Cor e
   ausência de bullet/hover preservadas: a camada continua secundária. */
.cap-caps-label { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .18em; color: var(--gray-mid); text-transform: uppercase; display: block; margin-bottom: var(--space-s); }
.cap-caps-list { list-style: none; margin: 0; padding: 0; }
.cap-caps-list li { font-size: var(--text-label); color: var(--gray-mid); line-height: 1.7; }

/* THE BSPOKE MODEL — síntese: a principal ruptura editorial da página.
   Depois de cinco capítulos disciplinados, aqui a escala cresce, e um
   deslocamento vertical deliberado entre label e headline cria a única
   tensão de grid da página — sem diagrama, sem conexões, só tipografia
   e espaço. EDITORIAL COMPRESSION V1: padding de --section-loose pra
   --section-base — o corpo caiu de 2 parágrafos (incluindo o exemplo
   sequencial das 5 especialidades) para 1 frase; a ruptura de escala
   do .esp-model__hl/.esp-model__close continua sendo a protagonista
   visual, ela não depende do padding externo da seção pra funcionar. */
.esp-model { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.esp-model__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.esp-model__inner > div:last-child { margin-top: var(--space-l); }
.esp-model__hl { font-family: var(--font-disp); font-weight: 700; font-size: clamp(40px,5.6vw,88px); line-height: 1.08; letter-spacing: -.01em; max-width: 14ch; margin-bottom: var(--space-l); }
.esp-model__body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.esp-model__body + .esp-model__body { margin-top: var(--space-m); }
.esp-model__close {
  font-family: var(--font-disp); font-weight: 900;
  font-size: clamp(36px,4.6vw,64px); line-height: 1.12; letter-spacing: -.01em;
  margin-top: var(--space-xl); max-width: 18ch;
}

/* CTA desta página: headline de 4 linhas — scoped, não altera .cta-band
   compartilhado. Escala levemente menor que o padrão (pensado pra 1–2
   linhas) e mais line-height, para a leitura em dois momentos pedida. */
.esp-cta .cta-band__hl { font-size: clamp(36px,6vw,84px); line-height: 1.12; }

/* ─── CLIENTS PAGE ────────────────────────── */
.clients-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; background: var(--border); margin: 64px 0; }
.client-item {
  aspect-ratio: 2/1; display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  padding: 28px; transition: background .3s;
}
.client-item:hover { background: var(--bg-3); }
.client-item span {
  font-family: var(--font-disp); font-weight: 700; font-size: 18px;
  letter-spacing: .1em; color: var(--gray); text-transform: uppercase;
  transition: color .3s;
}
.client-item:hover span { color: var(--white); }

.industries { padding: 80px 0; border-bottom: 1px solid var(--border); }
.ind-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.ind-tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em;
  color: var(--gray-mid); text-transform: uppercase;
  padding: 10px 20px; border: 1px solid var(--border);
  transition: border-color .2s, color .2s;
}
.ind-tag:hover { border-color: var(--red); color: var(--red); }

.testimonials { padding: 120px 0; border-bottom: 1px solid var(--border); }
.testi-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 0; }
.testi {
  padding: 48px; border-right: 1px solid var(--border);
  position: relative;
}
.testi:nth-child(even) { border-right: none; }
.testi:nth-child(1), .testi:nth-child(2) { border-bottom: 1px solid var(--border); }
.testi__quote {
  font-family: var(--font-disp); font-size: 24px; font-style: italic;
  line-height: 1.4; color: var(--white-dim); margin-bottom: 24px;
}
.testi__quote::before { content: '"'; color: var(--red); }
.testi__quote::after  { content: '"'; color: var(--red); }
.testi__author { font-family: var(--font-mono); font-size: 11px; letter-spacing: .15em; color: var(--red); text-transform: uppercase; }
.testi__company { font-size: 14px; color: var(--gray-mid); margin-top: 4px; }

/* ─── CASES PAGE (cases.html) ──────────────────
   PROMPT 12 — arquitetura editorial (Hero/Intro/Selected Cases/The
   Constant/CTA) e conteúdo (working copy) congelados.
   PROMPT 13 — direção de arte dos 4 cases: grid de 12 colunas com quatro
   momentos editoriais (ver bloco "SELECTED CASES" abaixo), substituindo o
   grid fixo label-col|core|360px e a alternância --rev do PROMPT 12. */

/* START WITH THE PROBLEM — intro: mesma técnica de label-column usada em
   Especialidades (esp-intro/esp-model), com namespace próprio da página
   pra não colidir e pra deixar claro que cada página é dona do seu CSS. */
.cs-intro { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.cs-intro__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.cs-intro__hl { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h1); line-height: 1.15; max-width: 18ch; margin-bottom: var(--space-m); }
.cs-intro__body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.cs-intro__body + .cs-intro__body { margin-top: var(--space-m); }
.cs-intro__highlight {
  font-family: var(--font-disp); font-weight: 700;
  font-size: var(--text-h3); line-height: 1.3; color: var(--red);
  margin-top: var(--space-m); max-width: 26ch;
}

/* SELECTED CASES — PROMPT 13: Case Editorial System. Um grid mestre de 12
   colunas compartilhado pelos 4 capítulos; tipografia, metadata, challenge,
   capabilities, CTA e motion são idênticos entre eles (ver regras abaixo,
   sem seletor de case) — a única coisa que muda por capítulo é QUAL ÁREA
   do grid cada bloco (meta/headline/proof/visual) ocupa, via
   grid-template-areas em .case-item--01..04. "One editorial system,
   different editorial moments" — não são quatro componentes, é um grid
   resolvido de quatro formas. */
.case-system { padding: var(--section-tight) 0; }

/* Transição intro → primeiro case: o label alinha com a coluna onde "01"
   vai aparecer logo abaixo (mesma faixa de 2 colunas da metadata), criando
   uma relação de grid entre o rótulo da seção e o primeiro capítulo —
   sem copy adicional, só alinhamento + uma hairline estrutural. */
.case-system__intro { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--space-m); padding-bottom: var(--space-l); border-bottom: 1px solid var(--border); margin-bottom: var(--space-xl); }
.case-system__label { grid-column: 1 / 3; margin: 0; }

/* Cada .case-item define seu próprio --vis-ratio e seu próprio ritmo
   vertical (padding), evitando a cadência de "quatro linhas de tabela".
   Sem border-bottom por hábito entre capítulos — a mudança de escala e
   de proporção visual já separa um do outro; só o último recebe uma
   hairline, marcando a transição para o registro mais silencioso de
   The Constant. */
.case-item { padding: var(--space-l) 0; }
.case-item--02 { padding-top: var(--space-xl); }
.case-item--03 { padding-top: var(--space-xl); padding-bottom: var(--space-l); }
.case-item--04 { padding-bottom: var(--space-xl); border-bottom: 1px solid var(--border); }

.case-item__grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--space-m);
  row-gap: var(--space-l);
}
.case-item__meta  { grid-area: meta; display: flex; flex-direction: column; }
.case-item__headline { grid-area: hl; }
.case-item__proof { grid-area: proof; }
.case-item__visual { grid-area: vis; }

/* 01 — MILITEC E-COMMERCE — "standard": texto à esquerda (6 col), visual
   como coluna alta à direita (4 col), metadata como rail estreito (2 col). */
.case-item--01 .case-item__grid {
  grid-template-areas:
    "meta meta hl   hl   hl   hl   hl   hl   vis vis vis vis"
    "meta meta proof proof proof proof proof proof vis vis vis vis";
  --vis-ratio: 3 / 4;
}
/* 02 — MILITEC ACADEMY — "wide": headline ocupa uma faixa larga no topo;
   abaixo, o texto de apoio fica ancorado à esquerda e o visual se abre
   numa faixa larga e baixa — o par mais próximo de "different editorial
   moment" só pela ocupação do grid, sem nenhum componente novo. */
.case-item--02 .case-item__grid {
  grid-template-areas:
    "meta meta hl hl hl hl hl hl hl hl hl hl"
    "proof proof proof proof vis vis vis vis vis vis vis vis";
  --vis-ratio: 21 / 9;
}
/* 03 — TENOR HOUSE — headline mais longa da página recebe a faixa mais
   larga possível no topo (10 col) para nunca precisar de coluna estreita;
   abaixo, visual e texto trocam de lado em relação ao case 01 — a única
   alternância esquerda/direita da página, e mesmo assim é consequência
   da composição, não o único recurso de variedade. */
.case-item--03 .case-item__grid {
  grid-template-areas:
    "meta meta hl hl hl hl hl hl hl hl hl hl"
    "vis vis vis vis vis proof proof proof proof proof proof proof";
  --vis-ratio: 1 / 1;
}
/* 04 — AIRO — encerramento: metadata/headline/proof compactos numa coluna
   estreita à esquerda, e o visual assume quase a largura inteira do
   container abaixo — o maior momento visual da sequência, funcionando
   como crescendo antes de The Constant. */
.case-item--04 .case-item__grid {
  grid-template-areas:
    "meta meta hl hl hl hl hl .   .   .   .   ."
    "meta meta proof proof proof proof proof .   .   .   .   ."
    "vis vis vis vis vis vis vis vis vis vis vis vis";
  --vis-ratio: 2.4 / 1;
}

.case-item__index { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); }
.case-item__client { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .14em; color: var(--white); text-transform: uppercase; margin-top: var(--space-m); }
.case-item__project { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .1em; color: var(--gray-mid); text-transform: uppercase; margin-top: var(--space-3xs); }

/* Headline — protagonista, disputa espaço com o visual. Escala base para
   capítulos com coluna de texto mais estreita (01/04); --wide para quem
   recebe a faixa larga de topo (02/03), incluindo o teste de estresse da
   Tenor House — sem max-width em ch: a largura real vem do grid-area, não
   de um limite arbitrário de caracteres. */
.case-item__headline { font-family: var(--font-disp); font-weight: 700; font-size: clamp(30px,3.4vw,52px); line-height: 1.15; color: var(--white); align-self: start; }
.case-item--02 .case-item__headline, .case-item--03 .case-item__headline { font-size: clamp(34px,4.6vw,68px); }

.case-item__challenge-label { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .18em; color: var(--gray-mid); text-transform: uppercase; display: block; margin-bottom: var(--space-xs); }
.case-item__challenge { font-size: var(--text-body); line-height: 1.8; color: var(--gray-lt); font-weight: 300; max-width: 52ch; margin-bottom: var(--space-m); }
.case-item__specialties { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .06em; color: var(--gray-mid); display: block; margin-bottom: var(--space-m); }
/* PROMPT 14: agora é um <a> real para a página individual do case — ganhou
   hover/focus-visible/cursor de link (não existiam antes porque o elemento
   ainda não era clicável). A seta se desloca sutilmente no hover; sem
   virar botão. */
.case-item__cta { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .1em; color: var(--red); text-transform: uppercase; display: inline-block; transition: letter-spacing .2s var(--ease-out), color .2s; }
.case-item__cta:hover { color: var(--red-hi); letter-spacing: .14em; }

/* Área visual — slot editorial, não card/thumbnail/mockup. Proporção vem
   de --vis-ratio (definida por capítulo acima); sem limitação universal
   de 4:3. Numeral fantasma (via data-case-num + ::before) mostra escala e
   ritmo sem fingir ser trabalho real — decorativo, some com uma linha de
   CSS quando o asset de verdade entrar. aria-hidden enquanto vazio. */
.case-item__visual {
  position: relative; overflow: hidden;
  align-self: start;
  aspect-ratio: var(--vis-ratio, 4/3);
  background: var(--bg-3);
  border: 1px solid var(--border);
}
.case-item__visual::before {
  content: attr(data-case-num);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-disp); font-weight: 900;
  font-size: clamp(72px, 13vw, 200px);
  color: rgba(255,255,255,.05);
  line-height: 1; letter-spacing: -.02em;
}

/* THE CONSTANT — síntese, mesma lógica de label-column, sem diagrama */
.cs-constant { padding: var(--section-tight) 0; border-bottom: 1px solid var(--border); }
.cs-constant__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.cs-constant__hl { font-family: var(--font-disp); font-weight: 700; font-size: clamp(32px,4.4vw,64px); line-height: 1.15; letter-spacing: -.01em; max-width: 16ch; margin-bottom: var(--space-m); }
.cs-constant__body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.cs-constant__close { font-family: var(--font-disp); font-weight: 700; font-size: clamp(20px,2.2vw,28px); line-height: 1.4; color: var(--white); margin-top: var(--space-m); max-width: 46ch; }

/* CTA desta página: headline de 3 linhas — scoped, não altera .cta-band
   compartilhado (mesmo princípio já usado em Especialidades: .esp-cta). */
.cs-cta .cta-band__hl { font-size: clamp(38px,6.2vw,92px); line-height: 1.1; }

/* ─── EQUIPE ───────────────────────────────────────────────────────────
   Namespace .eq-*, sobre o mesmo Design System do resto do site (tokens/
   primitives compartilhados) — nenhuma classe ou token global é alterado
   por esta página. Arquitetura atual (desde ARQUITETURA GLOBAL V2): Hero
   → The Core → Leadership → Final CTA. Built Around The Problem e Work
   With Us foram removidas por completo nessa rodada (ver comentário em
   src/equipe.html) — .eq-built*/.eq-work* abaixo ficaram órfãs dessa
   remoção e não foram tocadas nesta rodada (fora do escopo de EDITORIAL
   COMPRESSION + LEADERSHIP IMAGERY V1, que é sobre The Core/Leadership).
   Comentário "GOLDEN MASTER" anterior estava incorreto — esta página NÃO
   está congelada; segue em revisão editorial ativa. Princípio editorial:
   variedade vem de escala e ritmo, nunca de desalinhamento — toda
   assimetria só sobrevive se melhorar a leitura. */

/* THE CORE / BUILT AROUND THE PROBLEM — grid label-col; .eq-hl/.eq-body
   compartilhados. Built não tem border-bottom própria: a troca de fundo
   de Work (logo depois) já sinaliza a separação entre as duas seções —
   um sinal por transição, mesmo princípio usado no resto do Design
   System. Core mantém a border-bottom, que separa Core de Leadership. */
/* EDITORIAL COMPRESSION + LEADERSHIP IMAGERY V1: padding de --section-base
   [128px] pra --section-tight [96px] — copy caiu de 4 pra 2 parágrafos
   (briefing seção 10/12: "shorter copy must produce some real vertical
   reduction", não só a altura natural do texto menor). Token já existente
   no sistema (mesmo usado em .eq-work, Especialidades cap-chapter etc.),
   nenhum valor novo. .eq-leadership (128px) não foi tocada — a seção
   precisa de espaço pra 3 fotos reais respirarem, não só texto. */
.eq-core { padding: var(--section-tight) 0; border-bottom: 1px solid var(--border); }
.eq-built { padding: var(--section-base) 0; }
.eq-core__inner, .eq-built__inner {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start;
}
.eq-hl { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h1); line-height: 1.15; max-width: 20ch; margin-bottom: var(--space-m); }
.eq-body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.eq-body + .eq-body { margin-top: var(--space-m); }

/* THE CORE — fechamento ("Não terceirizamos o pensamento.") ocupa
   largura própria, em escala grande, alinhado ao início EXATO da coluna
   de corpo (mesmo x dos parágrafos .eq-body acima) — por isso lê como
   consequência do texto, não como elemento fora do lugar, mesmo
   ultrapassando o max-width de 640px do corpo. Margem reduzida (space-xl,
   não 2xl) pra ficar visualmente colado ao parágrafo anterior. */
.eq-core__close {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(34px,4.6vw,68px); line-height: 1.1; letter-spacing: -.01em; color: var(--white);
  margin-top: var(--space-xl);
  margin-left: calc(var(--label-col) + var(--space-xl));
  max-width: 18ch;
}

/* BUILT AROUND THE PROBLEM — competências como matéria tipográfica, não
   como tag cloud: escala claramente acima de mono-label mas abaixo de
   headline — lê como repertório editorial (lista corrida com peso
   tipográfico), não como nuvem/menu de palavras. Largura igual à do
   corpo (640px) pra continuar pertencendo à coluna de texto, não a um
   bloco à parte. */
.eq-built__words {
  list-style: none; margin: var(--space-l) 0; padding: 0; max-width: 640px;
  display: flex; flex-wrap: wrap; column-gap: var(--space-l); row-gap: var(--space-2xs);
}
.eq-built__words li {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(19px,1.8vw,27px); line-height: 1.5; letter-spacing: 0;
  text-transform: uppercase; color: var(--white-dim);
}
.eq-built__close {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(24px,2.8vw,36px); line-height: 1.35; color: var(--white);
  margin-top: var(--space-l); max-width: 42ch;
}

/* LEADERSHIP — grid de 12 colunas (mesma técnica de Cases); foto e
   conteúdo são os 2 únicos filhos de grid por líder. align-items:start
   no container é a ÚNICA regra de alinhamento vertical que existe — vale
   igualmente pros 3 líderes, sem exceção: topo da foto e topo do
   conteúdo (nome/role/território) sempre na mesma linha. Nenhum
   align-self/margin-top/translateY/top por líder — proibidos. A ÚNICA
   variação entre líderes é o LADO da fotografia: Chris e Redson (--01/
   --03) mantêm foto à esquerda; Andressa (--02) espelha, conteúdo à
   esquerda e foto à direita (ver regras --01/--02/--03 abaixo) — decisão
   editorial aprovada, não erro. Repetir a mesma arquitetura em Chris e
   Redson é intencional, não falta de ideia — grid de 12 colunas, foto
   grande, muito espaço e hairlines já bastam pra não parecer "3 cards"
   (ver .eq-leaders/.eq-leader abaixo). */
.eq-leadership { padding: var(--section-base) 0; border-bottom: 1px solid var(--border); }
.eq-leadership__intro {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start;
  margin-bottom: var(--space-xl);
}

/* Espaço ENTRE líderes (padding + hairline) é maior que o espaço ENTRE
   foto e conteúdo de um mesmo líder (column-gap) — a unidade legível é
   "cada pessoa", não "todas as fotos" ou "todos os textos". */
.eq-leaders { display: flex; flex-direction: column; }
.eq-leader {
  display: grid; grid-template-columns: repeat(12,1fr); column-gap: var(--space-xl);
  padding: var(--space-2xl) 0; border-top: 1px solid var(--border);
  align-items: start;
}

/* Fotografia editorial — nunca avatar/thumbnail/quadrado 140×140. Mesma
   proporção retrato (4:5) e mesmo tratamento pras 3 (Chris, Andressa e
   Redson ocupam a mesma área/proporção/alinhamento horizontal) — nenhuma
   foto "mais importante" que a outra. object-fit:cover preenche a caixa
   por completo, sem moldura/glow/borda vermelha ao redor da pessoa.
   LEADERSHIP IMAGERY V1: as 3 fotos reais (766×1134 Chris, 756×1134
   Andressa/Redson — todas ~2:3, mesma sessão/fundo/luz) foram verificadas
   por crop de teste centrado em 4:5 antes da implementação — a área
   removida por lado é pequena (~8% de cada topo/base) e nenhum dos 3
   rostos fica perto da margem de corte, então object-position: 50% 50%
   segue funcionando igual pras 3 sem exceção, mesmo princípio de antes
   (só o placeholder do Redson foi substituído por <img> real — ver
   src/equipe.html). */
.eq-leader__photo { position: relative; overflow: hidden; background: var(--bg-3); aspect-ratio: 4 / 5; }
.eq-leader__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }

/* Metadata — ritmo mais editorial, menos "gaps automáticos": nome e role
   ficam próximos (mesmo espaçamento pequeno entre os dois), formando um
   bloco compacto de identificação; só depois do território o respiro
   aumenta antes da bio (mas menos que antes), marcando a transição
   metadata→leitura sem soar como 3 elementos soltos empilhados. */
.eq-leader__content { display: flex; flex-direction: column; }
.eq-leader__meta { display: flex; flex-direction: column; margin-bottom: var(--space-m); }
.eq-leader__name { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h2); letter-spacing: .01em; margin-bottom: var(--space-2xs); }
.eq-leader__role { font-family: var(--font-mono); font-size: var(--text-body); letter-spacing: .15em; color: var(--red); text-transform: uppercase; margin-bottom: var(--space-2xs); }
.eq-leader__territories { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .1em; color: var(--gray-mid); text-transform: uppercase; }

.eq-leader__bio p { font-size: var(--text-body-lg); line-height: 1.8; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.eq-leader__bio p + p { margin-top: var(--space-s); }

/* Única variação entre líderes: o lado da fotografia (ver comentário
   LEADERSHIP acima). Chris e Redson repetem a mesma posição (foto
   esquerda); grid-column é a única diferença estrutural entre os 3 — o
   alinhamento vertical de base continua vindo de align-items:start em
   .eq-leader, igual pros 3. */
.eq-leader--01 .eq-leader__photo, .eq-leader--03 .eq-leader__photo { grid-column: 1 / 6; }
.eq-leader--01 .eq-leader__content, .eq-leader--03 .eq-leader__content { grid-column: 7 / 13; }
/* Andressa (--02) espelha: conteúdo à esquerda, foto à direita — e por
   isso precisa de grid-row:1 explícito, que Chris/Redson não precisam.
   Motivo: a foto vem antes do conteúdo no DOM (mesma ordem nos 3
   líderes); em Chris/Redson isso não importa porque a foto ocupa as
   colunas iniciais (1/6) e o conteúdo as seguintes (7/13) — a ordem DOM
   já acompanha a progressão horizontal da row. Na Andressa a foto ocupa
   colunas da DIREITA (8/13) e o conteúdo, que vem depois no DOM, precisa
   voltar pras colunas da ESQUERDA (1/7): o auto-placement do CSS Grid
   não retrocede na mesma row nesse caso, então empurraria o conteúdo pra
   uma segunda row, abaixo da foto. Fixar os dois em grid-row:1 resolve
   isso na origem — nenhum dos dois reflui pra outra linha, os dois ficam
   sempre lado a lado na mesma row, com o mesmo topo (mesma
   align-items:start do container). Não substituir por margin-top,
   transform, top, position:relative ou align-self — a causa é de row do
   grid, não de espaçamento; essas propriedades não resolveriam a causa e
   não devem ser reintroduzidas aqui. */
.eq-leader--02 .eq-leader__photo { grid-column: 8 / 13; grid-row: 1; }
.eq-leader--02 .eq-leader__content { grid-column: 1 / 7; grid-row: 1; }

/* WORK WITH US — Small By Design foi removida da página; Work herda o
   fundo bg-2 que antes era de Small, agora funcionando como o sinal de
   queda de intensidade logo após Built (que perdeu sua border-bottom —
   ver acima). Continua deliberadamente secundária: padding mais denso
   (--section-tight) e CTA em texto (.sec-link), não botão — nunca deve
   competir com Leadership ou o CTA final. */
.eq-work { padding: var(--section-tight) 0; background: var(--bg-2); border-bottom: 1px solid var(--border); }
.eq-work__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.eq-work .eq-hl { font-size: var(--text-h2); max-width: 22ch; }
.eq-work__cta { display: inline-block; margin-top: var(--space-s); }

/* ─── CONTATO ─────────────────────────────────────────────────────────
   COMPOSIÇÃO/ESCALA (rodada 4): o grid está correto desde a rodada 3
   (mesmo eixo var(--label-col) 1fr de .pg-hero__inner/.position__inner/
   .esp-intro__inner/.cs-intro__inner/.eq-core__inner/.ct-next__inner —
   NENHUM grid novo nesta rodada) — o problema era falta de massa visual.
   A coluna de conteúdo (1fr) já se estende até a borda direita do
   container, igual a qualquer outra página; o formulário não tinha
   nenhum max-width prendendo ele a uma faixa estreita. O que fazia a
   página parecer "presa ao centro" era a combinação de campos rasos
   (pouca altura/escala) com bastante espaço morto entre blocos — por
   isso esta rodada aumenta a massa dos campos (metadata mais alta,
   textarea 240px) e reduz o whitespace que não tinha função (contato
   direto virou uma faixa horizontal compacta, select+CTA culminam numa
   única linha, .ct-main passa de --section-base pra --section-tight).
   Arquitetura inalterada: Hero → Main Contact → What Happens Next. */
.ct-hl { font-family: var(--font-disp); font-weight: 700; font-size: var(--text-h1); line-height: 1.15; max-width: 20ch; margin-bottom: var(--space-m); }
.ct-body { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.ct-body + .ct-body { margin-top: var(--space-m); }

/* MAIN CONTACT — label na coluna esquerda (mesma var(--label-col) do
   resto do site), conteúdo + formulário na coluna direita, começando
   exatamente no mesmo eixo x de .eq-body/.esp-intro/.position — nunca
   um grid de 12 colunas paralelo. --section-tight (não --section-base):
   com contexto + formulário + contato direto todos na mesma seção, o
   papel narrativo é mais parecido com um bloco denso/direto do que uma
   seção editorial solta — mesmo token já usado em Core/Built (Equipe).
   border-bottom marca a transição pra What Happens Next. */
.ct-main { padding: var(--section-tight) 0; border-bottom: 1px solid var(--border); }
.ct-main__inner {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start;
}

/* Contato direto — faixa horizontal compacta (label | e-mail | local),
   não mais um bloco vertical em escala h3: sem coluna estrutural
   própria, só uma hairline + respiro fechando a coluna de corpo do
   formulário. flex-wrap garante o empilhamento natural no mobile sem
   precisar de breakpoint dedicado. */
.ct-direct {
  margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2xs) var(--space-m);
}
.ct-direct__email { font-family: var(--font-body); font-weight: 600; font-size: var(--text-body-lg); }
.ct-direct__email a { transition: color .2s; }
.ct-direct__email a:hover { color: var(--red); }
.ct-direct__loc { font-size: var(--text-body); color: var(--gray-lt); font-weight: 300; }

/* WHAT HAPPENS NEXT — fechamento editorial curto, mesmo padrão label-col;
   closing em escala maior que a rodada anterior — é o segundo (e único
   outro) momento de ruptura tipográfica da página, junto da expansão do
   formulário, pra Hero/Main/Next não lerem como 3 repetições do mesmo
   "label pequena + headline". Vermelho isolado só na última palavra
   (span.text-accent no HTML), sem tocar no resto da frase. */
/* background var(--bg-2): mesmo token usado em .cta-band (fechamento
   global de Home/Sobre/Especialidades/Equipe) — Contato não tem CTA
   final (o formulário já cumpre esse papel), mas What Happens Next
   ganha a mesma mudança sutil de fundo pra criar a mesma transição
   visual em relação ao footer que existe no resto do site. */
.ct-next { padding: var(--section-tight) 0; background: var(--bg-2); }
.ct-next__inner {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start;
}
.ct-next__close {
  font-family: var(--font-disp); font-weight: 700;
  font-size: clamp(32px,4.2vw,56px); line-height: 1.2; color: var(--white);
  margin-top: var(--space-xl);
  margin-left: calc(var(--label-col) + var(--space-xl));
  max-width: 22ch;
}

.c-form { display: flex; flex-direction: column; margin-top: var(--space-l); }
.fg { position: relative; border-bottom: 1px solid var(--border); }
.fg:first-child { border-top: 1px solid var(--border); }
.fg label { font-family: var(--font-mono); font-size: 10px; letter-spacing: .25em; color: var(--gray-mid); text-transform: uppercase; position: absolute; top: 18px; left: 0; pointer-events: none; transition: color .2s; }
.fg input, .fg textarea, .fg select {
  width: 100%; background: none; border: none; outline: none;
  color: var(--white); font-family: var(--font-body); font-size: 17px;
  padding: 38px 0 14px; cursor: text; resize: none;
}
.fg select { cursor: pointer; }
.fg select option { background: var(--bg-2); }
.fg textarea { min-height: 110px; }
.fg input::placeholder, .fg textarea::placeholder { color: var(--gray); }
.fg:focus-within label { color: var(--red); }
.fg:focus-within { border-bottom-color: var(--red); }
/* outline:none acima é só o outline padrão de mouse-click; navegação via
   teclado repõe o indicador (regra global de :focus-visible tem
   especificidade menor que .fg input, por isso a sobrescrita explícita). */
.fg input:focus-visible, .fg textarea:focus-visible, .fg select:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}
/* Constraint Validation nativa ativa (sem novalidate no form, ver
   contato.html): alguns browsers aplicam um box-shadow próprio em
   :invalid por padrão. Neutraliza isso — estado normal continua só
   hairline, vermelho segue exclusivo do focus, como no resto do
   sistema. */
.fg input:invalid, .fg textarea:invalid, .ct-select__control select:invalid { box-shadow: none; }
.form-sub { margin-top: 0; }
.form-msg {
  margin-top: 16px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
  opacity: 0; transition: opacity .3s;
}
.form-msg.show { opacity: 1; }
.form-msg.is-error { color: var(--red-hi); }
.form-msg.is-ok { color: #3ddc63; }
.fg--honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* HIERARQUIA DO FORMULÁRIO — vem de escala/spacing/largura/tipografia/
   hairline, não de eyebrows extras (nenhum "About You"/"The Challenge"
   por cima dos campos — só a pergunta real e as labels do próprio .fg).
   Estado normal de QUALQUER campo aqui é só hairline var(--border); o
   vermelho aparece exclusivamente em :focus-within/:focus-visible (ver
   .fg acima e .ct-select__control abaixo) — nenhum retângulo vermelho
   fixo em torno de metadata, textarea ou select.
   A. METADATA (nome/empresa/e-mail/telefone): grid 2 colunas, gap
   var(--space-m) — compatível com o resto do sistema, não var(--space-xl)
   entre 2 colunas. Mais altura/respiro que a versão anterior (era rasa
   demais — parecia interface administrativa), mas ainda mais compacta
   que o padrão .fg pra não competir com o campo do problema abaixo.
   B. O QUE PRECISA ACONTECER (.ct-field-core): o próprio label vira a
   pergunta, em escala var(--text-h3) — o mesmo token já usado pra título
   dentro de card/etapa em outras páginas. Textarea mais alta (240px, não
   170px) pra ser claramente o protagonista.
   C. COMO CONHECEU + CTA (.ct-form__close): select culmina no mesmo
   botão de envio, numa única linha — deixa de ser o último campo
   "solto" antes do CTA e reduz o protagonismo que estava chamando
   atenção demais. */
.ct-form__meta { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-m); }
.ct-form__meta .fg label { top: 14px; }
.ct-form__meta .fg input { padding: 32px 0 12px; font-size: 16px; }

.ct-field-core { margin-top: var(--space-l); }
.ct-field-core label {
  position: static; display: block; pointer-events: auto;
  font-family: var(--font-disp); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: var(--text-h3); color: var(--white);
  margin-bottom: var(--space-s);
}
.ct-field-core textarea {
  min-height: 240px; font-size: var(--text-body-lg); line-height: 1.6;
  padding: 0 0 var(--space-m);
}
.ct-field-core:focus-within { border-bottom-width: 2px; }

/* LINHA DE FECHAMENTO — select (secondary context) à esquerda, CTA à
   direita, alinhados na base: o formulário culmina no botão em vez de
   deixá-lo como peça solta abaixo do select. auto no CTA evita
   full-width; no mobile empilha (ver breakpoint 600px). */
.ct-form__close {
  display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-l); align-items: end;
  margin-top: var(--space-l);
}
.ct-select__label {
  display: block; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .25em; color: var(--gray-mid); text-transform: uppercase;
  margin-bottom: var(--space-xs);
}
/* COMO CONHECEU — mesmo princípio do resto do formulário (label estática
   acima, nunca sobre o controle), mas <select> não aceita o padrão
   .fg/textarea (o valor nativo do <option> não respeita padding-top como
   texto solto — daí a sobreposição do padrão original). Estrutura
   própria: label em fluxo normal + controle com hairline própria, mesma
   escala/cor de label do resto do .fg — sem destaque especial, mesmo
   peso discreto da metadata. Estado normal é só hairline var(--border);
   nada de vermelho fora do focus. appearance:none remove só a seta
   nativa, substituída por um caractere decorativo puramente visual —
   select continua 100% nativo, sem JS customizado. */
.ct-select__control { position: relative; border-bottom: 1px solid var(--border); transition: border-color .2s; }
.ct-select__control select {
  width: 100%; background: none; border: none; outline: none;
  color: var(--white); font-family: var(--font-body); font-size: var(--text-body);
  padding: var(--space-xs) var(--space-l) var(--space-xs) 0;
  cursor: pointer; appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
.ct-select__control select option { background: var(--bg-2); }
.ct-select__control::after {
  content: '↓'; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--font-mono); font-size: 11px; color: var(--gray-mid); pointer-events: none;
}
.ct-select__control:focus-within { border-bottom-color: var(--red); }
.ct-select__control select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ─── SCROLL REVEALS ──────────────────────── */
/* Igual ao H1 do Hero: o estado oculto (pré-reveal) só existe com JS
   confirmado (html.js — ver script no <head>). Sem JS, .rv/.rv-l/.rv-r
   já nascem visíveis em vez de ficarem presas em opacity:0 esperando um
   IntersectionObserver que nunca vai rodar. Usado em Sobre, Clientes e
   Contato — nenhuma mudança de HTML, só o CSS deixa de depender de JS
   pra mostrar o conteúdo. */
.rv { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv-l { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
.rv-r { transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); }
html.js .rv { opacity: 0; transform: translateY(36px); }
html.js .rv-l { opacity: 0; transform: translateX(-36px); }
html.js .rv-r { opacity: 0; transform: translateX(36px); }
html.js .rv.in, html.js .rv-l.in, html.js .rv-r.in { opacity: 1; transform: none; }

/* ─── RESPONSIVE ─────────────────────────────
   --gutter é redefinido aqui uma única vez; .container, nav e Hero
   consomem o token (ver definições acima) — nenhum componente redeclara
   o próprio padding lateral. */
/* ═══════════════════════════════════════════
   CASE DETAIL — CASE DETAIL PREMIUM SYSTEM (ROUND 3 arquitetura +
   ROUND 4 direção de arte editorial + ROUND 5 master grid restoration)
   ROUND 3, "PREMIUM COMES FROM DISCIPLINE": os 4 cases se leem como 4
   matérias da MESMA publicação — mesmo grid, mesma tipografia, mesma
   arquitetura narrativa, IDÊNTICOS nos 4, sem exceção. O que muda por
   case é conteúdo, imagens e a PRESENÇA de cada momento de evidência —
   nunca posição ou arquitetura.
   ROUND 4, "SAME GRAMMAR, DIFFERENT COMPOSITIONS": disciplina demais
   virou achatamento visual — os 5 capítulos passaram a ter o MESMO peso
   em vez de papéis narrativos diferentes. Insight e Impact (papéis
   "STOP"/"CONCLUDE") ganharam mais autoridade editorial que Context/
   Response/Built ("READ"/"UNDERSTAND"/"PROVE"). "Visual Moment" também
   virou "Evidence Moment": sem asset real, o momento não renderiza
   (nunca mais um placeholder ocupando espaço).
   ROUND 5, "ONE MASTER GRID, DIFFERENT EDITORIAL WEIGHTS": a forma como
   o ROUND 4 deu mais peso a Insight/Impact foi longe demais — eles
   passaram a abandonar o eixo horizontal (grid-template-columns:1fr),
   criando 2 eixos concorrentes na mesma página (Insight/Impact
   começando no gutter do container, o resto começando no eixo
   label-col+gap). ROUND 5 restaura os 5 capítulos — e os Evidence
   Moments — pro MESMO grid (var(--label-col) 1fr, gap var(--space-xl)).
   A hierarquia de papéis continua inteira, só que expressa 100% por
   tipografia/hairline/escala, nunca por sair do eixo estrutural.
   Namespace .case-detail-*/.cd-* isolado do resto do site; nenhuma
   regra genérica foi alterada. ═══════════════════════════════ */

.case-detail-back {
  font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .1em;
  color: var(--gray-mid); text-transform: uppercase; text-decoration: none;
  display: inline-block; margin-bottom: var(--space-xl); transition: color .2s;
}
.case-detail-back:hover { color: var(--red); }

.case-detail-hero { padding: var(--space-2xl) 0 0; }
/* CASE DETAIL SYSTEM ROUND 1 — Hero Visual passou a ser opcional: quando
   ausente, build.py não injeta o container/div (.case-detail-hero__visual
   nem chega a existir no DOM), então esta regra só cobre o pequeno ajuste
   de respiro que falta no fim do Hero nesse caso — sem simular a altura
   do visual ausente, só uma pausa editorial coerente com o resto do
   sistema (mesmo território de --space-l usado alhures como transição
   mais curta). */
.case-detail-hero--no-visual { padding-bottom: var(--space-l); }
.case-detail-hero__top { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.case-detail-hero__meta { display: flex; flex-direction: column; }
.case-detail-hero__num { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); }
.case-detail-hero__client { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .14em; color: var(--white); text-transform: uppercase; margin-top: var(--space-m); }
.case-detail-hero__project { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .1em; color: var(--gray-mid); text-transform: uppercase; margin-top: var(--space-3xs); }

/* H1 protagonista — precisa sobreviver ao "teste de estresse" da Tenor
   House (headline mais longa das quatro). Sem max-width em ch: a largura
   real vem do grid (mesma solução já validada em .case-item__headline no
   PROMPT 13), não de um limite arbitrário de caracteres. */
.case-detail-hero__headline { font-family: var(--font-disp); font-weight: 700; font-size: clamp(36px,5.2vw,76px); line-height: 1.1; letter-spacing: -.01em; color: var(--white); margin-bottom: var(--space-l); }
.case-detail-hero__proof { max-width: 680px; }
.case-detail-hero__challenge-label { font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .18em; color: var(--gray-mid); text-transform: uppercase; display: block; margin-bottom: var(--space-xs); }
/* ROUND 4, item 14 — auditoria do Hero: a estrutura (metadata → headline →
   challenge → capabilities no grid label-col) já estava correta e não foi
   redesenhada. Único ajuste: line-height do challenge de 1.8 → 1.7 — mais
   próximo do tratamento editorial do resto do sistema (Context/Response
   usam 1.85 em corpo maior; este texto é mais curto e mais denso, 1.8
   deixava a leitura um pouco solta pro papel de "abertura de matéria"). */
.case-detail-hero__challenge { font-size: var(--text-body-lg); line-height: 1.7; color: var(--gray-lt); font-weight: 300; margin-bottom: var(--space-m); }
.case-detail-hero__capabilities { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .06em; color: var(--gray-mid); display: block; }

/* ── EVIDENCE MOMENTS (ROUND 4) ──
   "Visual Moment" (slot sempre visível, ROUND 1-3) virou "Evidence
   Moment": só existe no DOM quando há asset real por trás (build.py nem
   inclui a section quando não há — sem placeholder, sem numeral
   fantasma, sem caixa vazia, item 31/32 do briefing). Como nenhum case
   tem asset real hoje, nenhuma destas regras está em uso nas 4 páginas
   geradas agora — elas existem prontas para quando os assets chegarem.
   Vocabulário editorial controlado: 3 tratamentos, não layouts infinitos
   por case (item 8 do briefing).
   Hero Media segue a mesma regra ("no placeholder should ever appear in
   the Hero", item 15) — quando presente, é sempre uma <img> real, nunca
   um div decorativo. */
.case-detail-hero__visual {
  display: block; width: 100%; height: auto;
  margin-top: var(--space-xl);
  aspect-ratio: 21/9; object-fit: cover;
  border: 1px solid var(--border);
}

.cd-evidence { padding: var(--space-m) 0; }
/* ROUND 5 — MASTER GRID RESTORATION (item 10 do briefing): o ROUND 4
   fazia Detail reconstruir o eixo de conteúdo com um container próprio
   (max-width calc) + margin-left: var(--label-col) — um mini-sistema de
   grid paralelo ao invés de participar do master grid oficial. Removido.
   .cd-evidence__inner usa o MESMO grid de .cd-block__inner/.cd-outcome__
   inner (var(--label-col) 1fr, gap var(--space-xl)); a coluna esquerda
   fica vazia (Evidence não tem índice/label) só pra estabelecer o mesmo
   eixo horizontal, e todo conteúdo (Feature/Composition/Detail) cai
   automaticamente na coluna de conteúdo via grid-column:2 — nenhuma
   classe individual precisa declarar isso. */
.cd-evidence__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.cd-evidence__inner > * { grid-column: 2; }
.cd-evidence__asset { display: block; width: 100%; height: auto; object-fit: cover; border: 1px solid var(--border); }

/* FEATURE — 1 asset forte, ocupa a coluna de conteúdo inteira. Só 3
   proporções aprovadas (item 9 do briefing) — nunca uma razão
   arbitrária por case; qual delas usar é decidido pelo asset real via
   evidence_N.ratio em cases_data.py, não por CSS por slug. */
.cd-evidence__asset--landscape { aspect-ratio: 3/2; }
.cd-evidence__asset--wide      { aspect-ratio: 21/9; }
.cd-evidence__asset--portrait  { aspect-ratio: 4/5; max-width: 640px; margin: 0 auto; }

/* COMPOSITION — 2-3 assets relacionados em 1 relação assimétrica
   (grande + apoio), nunca grid/galeria/carrossel de tamanhos iguais
   (item 10 do briefing). O primeiro asset é sempre o protagonista;
   .cd-evidence__composition__aside empilha o(s) apoio(s) ao lado. Este
   grid é INTERNO à composição (organiza 2-3 imagens entre si) — a
   composição inteira já está ancorada ao master grid externo via
   .cd-evidence__inner, então isso não cria um 2º eixo de página (item 12
   do briefing: grid externo vs. grid interno). */
.cd-evidence__composition {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-m); align-items: start;
}
.cd-evidence__composition__primary { aspect-ratio: 4/3; }
.cd-evidence__composition__aside { display: flex; flex-direction: column; gap: var(--space-m); }
.cd-evidence__composition__aside .cd-evidence__asset { aspect-ratio: 3/4; }

/* DETAIL — 1 asset pequeno, span reduzido, não interrompe a página como
   Feature/Composition (item 11/27 do briefing: "narrower or offset
   span"). O offset vem só de estar na coluna 2 do master grid (herdada
   de .cd-evidence__inner); "menor" vem só de max-width — nenhum
   container ou margin próprio. */
.cd-evidence__asset--detail { aspect-ratio: 4/3; max-width: 560px; }

/* ── BLOCOS NARRATIVOS ──
   Mesmo grid label-column 1fr do resto do site (pg-hero/esp-intro/cs-intro/
   cs-constant) — reforça "é o mesmo sistema", não um layout novo por
   página. O que muda de bloco pra bloco é só a escala/peso tipográfico do
   corpo, não a estrutura.

   RITMO VERTICAL ÚNICO (ROUND 3, item 17/26) — o ROUND 2 tinha 2 valores
   de padding-top diferentes (--space-l dentro de um "ato", --space-xl na
   abertura de um novo "ato"), o que já era uma variação de tratamento
   entre capítulos — pequena, mas ainda assim uma exceção que o teste
   "os 4 cases parecem a mesma estrutura?" reprovaria. ROUND 3 remove essa
   diferenciação: todo .cd-block usa o MESMO padding simétrico
   (--space-xl, dentro da faixa de 64-96px pedida no briefing para o topo
   de capítulo), sem exceção por capítulo — "a mesma relação deve se
   repetir" em todos os 5 capítulos. */
.cd-block { padding: var(--space-xl) 0; }
.cd-block__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }

/* Micro-numeração editorial 01-05 (ROUND 3, item 5) — índice interno da
   matéria, não a numeração hierárquica global das páginas (.sec-num).
   Mesmo tratamento do .label ao lado (mono, discreto, cinza), só um
   degrau menor e sem letter-spacing tão aberto — para ler como prefixo
   técnico do label, não como um segundo label. */
.cd-index {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-meta);
  letter-spacing: .1em; color: var(--gray-mid);
  margin-bottom: var(--space-3xs);
}

.cd-block__p { font-size: var(--text-body-lg); line-height: 1.85; color: var(--gray-lt); font-weight: 300; max-width: 640px; }
.cd-block__p + .cd-block__p { margin-top: var(--space-m); }

/* CONTEXT & CHALLENGE (ROUND 1) — Context e Problem viraram um capítulo
   só; papel "READ" (ROUND 4, item 17) — calmo, preciso, altamente
   legível, sem espetáculo. O texto do Challenge (ex-"The Problem")
   preserva a mesma tensão de escala/cor que tinha como seção própria,
   agora um modificador de parágrafo — sem card/ícone/quote-box.
   ROUND 4: Challenge passa a usar Barlow Condensed em vez de Inter —
   entra no mesmo "papel de statement" do Insight/Impact/Next Case
   headline (item 26 do briefing: Barlow Condensed = impacto editorial,
   Inter = leitura corrida), o que dá mais autoridade à frase sem virar
   citação gigante (peso 500, não 700 — mais contido que um headline). */
.cd-block__p--challenge { font-family: var(--font-disp); font-size: clamp(21px,2.2vw,28px); line-height: 1.4; color: var(--white); font-weight: 500; max-width: 680px; }

/* THE INSIGHT — papel "STOP" (ROUND 4, item 18). ROUND 5 — MASTER GRID
   RESTORATION: o ROUND 4 quebrava .cd-block__inner pra 1fr aqui, fazendo
   o statement começar no gutter do container em vez do eixo de conteúdo
   compartilhado por Context/Response/Built/Hero/Next Case — 2 eixos
   horizontais concorrentes na mesma página. Removido: .cd-block--insight
   volta a herdar o grid padrão de .cd-block__inner (var(--label-col) 1fr,
   gap var(--space-xl)) sem override nenhum. A hierarquia "STOP" continua
   inteira — vem só de tipografia (Barlow Condensed, peso 600, escala
   maior, branco, hairline superior), nunca de abandonar o grid. */
.cd-block--insight { border-top: 1px solid var(--border); }
.cd-block--insight .cd-block__p--insight { font-family: var(--font-disp); font-weight: 600; font-size: clamp(28px,3.2vw,42px); line-height: 1.3; color: var(--white); max-width: 860px; }
.cd-block--insight .cd-block__p--insight + .cd-block__p--insight { margin-top: var(--space-m); }

/* THE RESPONSE — papel "UNDERSTAND" (ROUND 4, item 20): mesmo grid dos
   capítulos de leitura (Context/Built), mas a primeira frase ganha um
   pouco mais de peso — reconecta o leitor à narrativa depois do Evidence
   Moment 01 sem reescrever nenhum texto (usa a estrutura que o conteúdo
   já tem: 1º parágrafo = abertura, 2º = elaboração). */
.cd-block--response .cd-block__p:first-child { color: var(--white); font-weight: 400; }

/* WHAT WE BUILT — papel "PROVE SCOPE" (ROUND 4, item 21): lista
   tipográfica rigorosa, sempre em 1 coluna, sem cards/ícones/tiles/
   pills. ROUND 4 aperta a execução pra ler mais como índice técnico/
   credits do que lista de serviços: line-height mais compacto, tracking
   do índice mono mais aberto (separa visualmente número de item sem
   precisar do em dash sozinho carregar essa função), padding vertical
   levemente reduzido — na direção contrária de "aumentar espaço"
   (item 5 do briefing). Numeração via attr(data-index), não CSS
   counter. */
.cd-built-list { list-style: none; margin: 0; padding: 0; max-width: 680px; }
.cd-built-list li {
  font-family: var(--font-disp); font-weight: 500; font-size: var(--text-h4);
  color: var(--white); line-height: 1.4;
  padding: var(--space-xs) 0; border-top: 1px solid var(--border);
  display: flex; align-items: baseline; gap: var(--space-m);
}
.cd-built-list li:last-child { border-bottom: 1px solid var(--border); }
.cd-built-list li::before {
  content: attr(data-index) " —";
  font-family: var(--font-mono); font-size: var(--text-meta); letter-spacing: .16em;
  color: var(--gray-mid); flex-shrink: 0;
}

/* IMPACT — papel "CONCLUDE" (ROUND 4, item 23): o ponto de maior
   autoridade tipográfica da página — maior que Insight, porque Impact é
   a conclusão, não a virada. ROUND 5 — MASTER GRID RESTORATION: mesma
   correção do Insight — .cd-outcome__inner voltou a var(--label-col) 1fr
   / gap var(--space-xl), o mesmo eixo de Context/Response/Built/Hero/
   Next Case, em vez do 1fr que fazia o statement começar no gutter do
   container. Autoridade tipográfica continua vindo só de escala/peso/
   cor/hairline, nunca de sair do grid. Fecha com a mesma pausa maior que
   os outros capítulos (--space-2xl na base) antes do Next Case. */
.cd-outcome { padding: var(--space-xl) 0 var(--space-2xl); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.cd-outcome__inner { display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: start; }
.cd-outcome__text { font-family: var(--font-disp); font-weight: 600; font-size: clamp(30px,3.6vw,50px); line-height: 1.25; color: var(--white); max-width: 800px; }

/* ── NEXT CASE ──
   O bloco inteiro é 1 único <a> (nenhum link aninhado dentro) — mesmo grid
   label-column pra manter a familiaridade com o resto do sistema. */
.cd-next { padding: var(--space-l) 0 0; }
.cd-next__link {
  display: grid; grid-template-columns: var(--label-col) 1fr; gap: var(--space-xl); align-items: end;
  padding: var(--space-2xl) 0; border-top: 1px solid var(--border);
  text-decoration: none;
}
.cd-next__label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .2em; color: var(--red); text-transform: uppercase; display: block; }
.cd-next__client { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .14em; color: var(--white); text-transform: uppercase; display: block; margin-top: var(--space-s); }
.cd-next__headline { font-family: var(--font-disp); font-weight: 700; font-size: clamp(26px,3.2vw,44px); line-height: 1.2; color: var(--white); display: block; transition: color .2s; }
.cd-next__cta { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .1em; color: var(--gray-mid); text-transform: uppercase; display: block; margin-top: var(--space-s); transition: color .2s, letter-spacing .2s var(--ease-out); }
.cd-next__link:hover .cd-next__headline { color: var(--red); }
.cd-next__link:hover .cd-next__cta { color: var(--red); letter-spacing: .14em; }

/* ── PROPORÇÕES POR CASE ──
   ROUND 3, item 20: removidas. .case-detail--{slug} (custom properties
   --cdv-hero/-a/-b por case, técnica herdada de --vis-ratio do PROMPT 13)
   existia só para criar variação de composição entre os 4 cases —
   nenhuma delas respondia a uma necessidade real de asset. As classes
   .case-detail--{slug} continuam no HTML (article class, ver
   case-detail-template.html) como hook técnico, mas não têm mais
   nenhuma regra de CSS associada; ficam reservadas para o dia em que um
   asset real exigir um ajuste pontual de crop/object-position — nunca
   para diferenciar spacing, grid, ordem, tipografia ou proporção. */

@media (max-width: 1200px) {
  :root { --gutter: 32px; }
  .specialties__grid { grid-template-columns: repeat(2,1fr); }
  /* Alivia o aperto da coluna central (core idea) em notebooks/1024px,
     sem colapsar a estrutura de 3 zonas ainda. */
  .cap-chapter__grid { grid-template-columns: var(--label-col) 1fr 220px; gap: var(--space-l); }
  /* O grid de 12 colunas dos Cases já é proporcional (fr), então não
     precisa de um breakpoint dedicado pra "desapertar" — só reduz um
     pouco o column-gap pra dar mais respiro às colunas mais estreitas
     (proof/visual dos momentos 02/03) em notebooks/1024px. */
  .case-item__grid { column-gap: var(--space-s); }
}
/* LEADERSHIP (EQUIPE) — banda intermediária dedicada (1024px→601px): o
   grid de 12 colunas do desktop apertaria fotografia e bio nessa faixa
   (tablet não pode virar "mobile grande"). Troca pra um layout de 2
   colunas mais simples: fotografia com largura contida num intervalo
   (nunca os ~850px que a versão full-width teria em tablet), conteúdo
   ocupa o resto — ainda lado a lado, ainda com o mesmo topo alinhado
   (align-items:flex-start é o equivalente em flex do align-items:start
   do grid de desktop). Sobrevive até o breakpoint de 600px, onde empilha
   de vez (ver bloco @600px). */
@media (max-width: 1024px) {
  .eq-leader {
    display: flex; flex-direction: row; align-items: flex-start;
    column-gap: var(--space-l); padding: var(--space-2xl) 0;
  }
  .eq-leader__photo { flex: 0 0 clamp(200px,28vw,300px); aspect-ratio: 4 / 5; }
  .eq-leader__content { flex: 1 1 auto; min-width: 0; }
  .eq-leader--02 { flex-direction: row-reverse; }
}
@media (max-width: 900px) {
  :root { --gutter: 24px; }
  .nav__links { display: none; }
  .nav__burger { display: flex; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__rail { display: none; }
  .hero__content { padding: 60px 0; }
  .hero__sub { flex-direction: column; align-items: flex-start; gap: 28px; }
  .manifesto__inner { grid-template-columns: 1fr; gap: 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 44px; }
  .pg-hero__inner { grid-template-columns: 1fr; gap: 20px; }
  .esp-intro__inner, .esp-model__inner { grid-template-columns: 1fr; gap: 20px; }
  .esp-model__inner > div:last-child { margin-top: 0; }
  /* Um único colapso para todos os 5 capítulos — mesma ordem em todos:
     território → nome → headline → texto → fechamento → capabilities.
     Nenhum capítulo vira card; a diferença de escala entre core idea e
     capabilities se mantém em qualquer largura. */
  .cap-chapter__grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .cap-chapter__caps { padding-top: var(--space-m); border-top: 1px solid var(--border); }
  .clients-grid { grid-template-columns: repeat(2,1fr); }
  /* Cases colapsa pra um único stack disciplinado, igual pros 4 momentos:
     metadata compacta → headline → visual em largura cheia → proof
     (challenge/especialidades/CTA). As 4 composições de desktop deixam de
     existir no mobile por decisão (PROMPT 13, seção 32) — não precisam ser
     reproduzidas artificialmente. Repetido por case pra vencer a
     especificidade das regras .case-item--0N .case-item__grid do desktop. */
  .case-system__intro { grid-template-columns: 1fr; }
  .case-system__label { grid-column: auto; }
  .case-item--01 .case-item__grid,
  .case-item--02 .case-item__grid,
  .case-item--03 .case-item__grid,
  .case-item--04 .case-item__grid {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "hl" "vis" "proof";
    row-gap: var(--space-m);
  }
  .case-item--01, .case-item--02, .case-item--03, .case-item--04 { --vis-ratio: 4 / 3; }
  .case-item__headline, .case-item--02 .case-item__headline, .case-item--03 .case-item__headline { font-size: clamp(28px,7vw,40px); }
  /* CASES EDITORIAL DENSITY V1: no mobile os 4 momentos editoriais já
     colapsam pro mesmo template de 1 coluna (regra acima) — herdar o
     padding assimétrico desenhado pros momentos de desktop (mais alto no
     topo de 02/03, mais baixo no fim de 03, mais alto no fim de 04) não
     faz sentido numa composição que já é idêntica entre os 4. Normaliza
     pro mesmo --space-xl usado como território principal de separação
     entre capítulos no desktop. */
  .case-item, .case-item--02, .case-item--03, .case-item--04 { padding: var(--space-xl) 0; }

  /* Case Detail (PROMPT 14): mesmo colapso disciplinado de 1 coluna já
     usado em pg-hero/esp-intro/cs-intro/cs-constant — sem selector especial
     por case, porque nenhuma regra de desktop aqui é mais específica que
     estas (ao contrário do .case-item--0N do index, não há trap de
     especificidade a vencer). */
  .case-detail-hero__top,
  .cd-block__inner,
  .cd-outcome__inner,
  .cd-evidence__inner { grid-template-columns: 1fr; gap: var(--space-m); }
  /* Master grid (ROUND 5) colapsa naturalmente pra 1fr no mobile, igual
     ao resto do site — não faz sentido preservar a label-col aqui (item
     14 do briefing). .cd-evidence__inner > * tinha grid-column:2 fixado
     pro desktop (2 colunas); sem resetar, o browser criaria uma 2ª
     coluna implícita pra satisfazer essa referência mesmo com só 1fr
     declarado — teria sobrado uma coluna fantasma/overflow. */
  .cd-evidence__inner > * { grid-column: auto; }
  .cd-next__link { grid-template-columns: 1fr; gap: var(--space-s); align-items: start; }
  .cd-next__client { margin-top: var(--space-2xs); }
  .case-detail-hero__headline { font-size: clamp(30px,8vw,44px); }
  /* Ritmo vertical mobile — em 1 coluna a página já fica mais longa;
     .cd-block herda o mesmo padding único do desktop (ROUND 3 já não tem
     nenhuma variação de padding por capítulo pra repetir aqui). */
  .cd-block { padding: var(--space-xl) 0; }
  .cd-outcome { padding: var(--space-xl) 0 var(--space-2xl); }
  .case-detail-hero__visual { margin-top: var(--space-xl); }

  /* EVIDENCE MOMENTS (ROUND 4, offset corrigido no ROUND 5) — mobile
     precisa ficar mais simples que desktop (item 39 do briefing):
     Composition (grande + apoio lado a lado) empilha em 1 coluna só,
     protagonista primeiro. Detail já perde a largura reduzida
     naturalmente aqui — sem precisar de regra própria: o max-width:560px
     de .cd-evidence__asset--detail só limitava a largura MÁXIMA (nunca
     forçou um valor fixo), então numa coluna mobile mais estreita que
     560px a imagem já ocupa a largura disponível normalmente. Nenhuma
     destas regras está em uso hoje (0 assets reais), mas precisam estar
     corretas pra quando entrarem. */
  .cd-evidence__composition { grid-template-columns: 1fr; }
  .cd-evidence__composition__aside { flex-direction: column; }

  /* EQUIPE — mesmo colapso de 1 coluna já usado no resto do site pros
     grids label-col (Core/Built/Leadership intro/Work). Fechamento de The
     Core perde o alinhamento à coluna de corpo (não existe mais label-col
     nesta largura) e reduz de escala. Leadership NÃO é tocado aqui — já
     está coberto pelo breakpoint dedicado de 1024px acima, que sobrevive
     até 600px. */
  .eq-core__inner, .eq-built__inner, .eq-leadership__intro, .eq-work__inner {
    grid-template-columns: 1fr; gap: var(--space-m);
  }
  .eq-core__close { margin-left: 0; font-size: clamp(30px,8vw,44px); max-width: none; }

  /* Built Around The Problem: palavras reduzem de escala junto com o
     container — flex-wrap já cuida da quebra de linha em qualquer
     largura, só o teto de tamanho precisa recuar. */
  .eq-built__words li { font-size: clamp(18px,4.4vw,24px); }

  .testi-grid { grid-template-columns: 1fr; }
  .position__inner { grid-template-columns: 1fr; gap: 24px; }
  /* HOME ART DIRECTION V1 — mesmo colapso do irmão .position__inner,
     no mesmo breakpoint (900px — este bloco), mesma razão: dentro da
     Home, Positioning e Response quebram juntos. */
  .home-response__inner { grid-template-columns: 1fr; gap: 24px; }
  .home-capabilities__intro { grid-template-columns: 1fr; gap: 12px; }
  /* CAPABILITIES COMPACT: a matriz de 2 colunas colapsa para 1 — a 6ª
     célula (CTA) passa a aparecer naturalmente depois da 5ª, sem precisar
     de tratamento especial ("não force a metáfora de matriz no mobile").
     Padding vertical mobile já usava --space-s (mais compacto que o
     desktop de então); FINAL DENSITY V1 igualou o desktop a esse mesmo
     valor — mobile não precisou de nenhum ajuste novo nesta rodada,
     continua exatamente como estava. */
  .home-capabilities__matrix { grid-template-columns: 1fr; }
  .home-capabilities__cell { padding: var(--space-s) 0; }
  .specialties__grid { grid-template-columns: repeat(2,1fr); }
  .leadership__grid { grid-template-columns: 1fr; max-width: none; }
  .process { flex-direction: column; gap: var(--space-l); }
  .process::before { top: 0; bottom: 0; left: 11px; right: auto; width: 1px; height: auto; }
  .process__step { padding-right: 0; padding-left: var(--space-xl); }
  .process__num { position: absolute; left: 0; top: 0; margin-bottom: 0; }
  .testi { border-right: none !important; border-bottom: 1px solid var(--border) !important; }
  /* CONTATO — mesmo colapso de 1 coluna do grid label-col usado no resto
     do site (ver EQUIPE acima): a coluna de label sai de cena e o
     conteúdo (contexto → formulário → contato direto, já nessa ordem no
     DOM) flui em coluna única, sem nenhum comportamento exclusivo. */
  .ct-main__inner, .ct-next__inner { grid-template-columns: 1fr; gap: var(--space-m); }
  .ct-next__close { margin-left: 0; font-size: clamp(24px,6vw,34px); max-width: none; }
  /* Empilhado, o alinhamento cross-column deixa de fazer sentido: cada
     .pillar volta a fluir em bloco simples, altura definida pelo próprio
     conteúdo (nunca min-height de desktop). */
  .pillars__grid { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
  .pillar {
    display: block;
    grid-template-rows: none; grid-row: auto;
    border-right: none; border-bottom: 1px solid var(--border);
  }
  .pillar:last-child { border-bottom: none; }
  .pillar__num, .pillar__title { margin-bottom: var(--space-s); }
  /* Sequência de Como Trabalhamos: horizontal no desktop, vertical no
     mobile — mesma lógica de progressão, direção diferente.
     Renomeado para .sb-method-* junto com o bloco desktop (CRITICAL CSS
     SCOPING, ver comentário principal acima de .sb-method). */
  .sb-method__grid { flex-direction: column; }
  .sb-method-step { padding: var(--space-l) 0; border-left: none; border-top: 1px solid var(--border); }
  .sb-method-step:first-child { border-top: none; padding-top: 0; }
  .sb-method-step:last-child { padding-bottom: 0; }
  .values__grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  :root { --gutter: 18px; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__btm { flex-direction: column; gap: 10px; text-align: center; }
  .cta-band__hl { font-size: clamp(38px,10vw,64px); }
  .specialties__grid { grid-template-columns: 1fr; }
  .hero__ctas { flex-direction: column; align-items: flex-start; }
  .leadership__grid { gap: var(--space-l); }

  /* CONTATO — abaixo de 600px a metadata (nome/empresa/e-mail/telefone)
     também empilha: em 2 colunas aqui os inputs ficariam estreitos
     demais pra continuar confortáveis de preencher. Select e CTA também
     empilham (select full-width, botão logo abaixo). */
  .ct-form__meta { grid-template-columns: 1fr; }
  .ct-form__close { grid-template-columns: 1fr; row-gap: var(--space-m); }

  /* LEADERSHIP (EQUIPE) — aqui, e só aqui, fotografia e conteúdo
     empilham. Vence o layout lado-a-lado do breakpoint de 1024px (mesma
     especificidade, esta regra vem depois no arquivo). Fotografia em
     largura cheia do container (protagonista, nunca avatar), com um teto
     razoável pra não dominar demais em telas um pouco maiores dentro
     desta faixa; mesmo retrato 4:5 do resto do sistema. */
  .eq-leader { flex-direction: column; column-gap: 0; row-gap: var(--space-m); padding: var(--space-xl) 0; }
  .eq-leader--02 { flex-direction: column; }
  .eq-leader__photo { flex-basis: auto; width: 100%; max-width: 480px; }
}
/* Regressão encontrada na checagem de breakpoints do PROMPT 04: o piso de
   --text-display (72px) estourava a largura útil em telas ≤430px (ex.
   "ENGINEERED" cortado pelo overflow:hidden de .hero__lw, necessário pra
   animação de reveal). Correção via token, mesma técnica já usada pelo
   --gutter responsivo — não é um valor solto novo, é o mesmo sistema. */
@media (max-width: 430px) {
  :root { --text-display: clamp(52px, 15vw, 72px); }
  /* Mesmo raciocínio aplicado ao nome do capítulo CMO (--lead): o piso do
     clamp() precisa recuar em telas muito estreitas para não estourar com
     "CMO-as-a-Service", palavra composta sem quebra natural. Os demais
     nomes usam a escala base do sistema e não precisam desse ajuste. */
  .cap-chapter--lead .cap-chapter__name { font-size: clamp(34px,9vw,48px); }
}

/* ─── ACESSIBILIDADE — MOVIMENTO REDUZIDO ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .rv-l, .rv-r { opacity: 1 !important; transform: none !important; transition: none !important; }
}