/* ==========================================================================
   New Wave — site institucional
   Hero + globo do design "New Wave.dc.html"
   Conteúdo, linguagem e tipografia do site institucional
   ========================================================================== */

:root {
  /* superfícies claras */
  --paper: #f4f4f2;
  --surface: #ffffff;

  /* superfícies escuras */
  --ink: #0b0b0c;
  --ink-2: #16161a;
  --ink-3: #060607;

  /* texto sobre claro */
  --t1: #0b0b0c;
  --t2: #55555c;
  --t3: #8a8a92;

  /* texto sobre escuro */
  --d1: #f4f4f2;
  --d2: #a8a8b0;
  --d3: #6e6e78;

  /* linhas */
  --line: rgba(11, 11, 12, .12);
  --line-soft: rgba(11, 11, 12, .07);
  --line-dark: rgba(244, 244, 242, .14);
  --line-dark-soft: rgba(244, 244, 242, .08);

  /* único gesto cromático do projeto */
  --nw-chrome: linear-gradient(180deg, #ffffff 0%, #ffffff 32%, #a9a9b2 62%, #f2f2f4 100%);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Inter Tight', 'Inter', system-ui, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --wrap: 1220px;
  --gutter: 32px;

  --r-card: 16px;
  --r-btn: 6px;
}

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

html {
  background: var(--ink);
  scroll-behavior: smooth;
  /* As camadas de textura sangram para fora da viewport de propósito (a
     deriva não pode revelar borda). Sendo position:fixed, elas escapam do
     overflow-x do body e criavam scroll horizontal no celular. */
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;   /* iOS não infla o texto ao girar */
  text-size-adjust: 100%;
}

/* ---------------------------------------------- FUNDO DA HERO (reversível)

   O fundo da hero mora aqui, no body, e NÃO em .hero — de propósito.
   .hero tem z-index 2 e o globo é uma camada fixa em z-index 0 atrás dela.
   Pintar o fundo em .hero (ou em .hero::before, que fica preso ao mesmo
   contexto de empilhamento) cobriria o globo e ele sumiria da tela.
   O body é a única camada realmente atrás do canvas.

   PARA REVERTER: troque as duas linhas marcadas "ATUAL" pelas "ANTERIOR".

     ANTERIOR  background-color: var(--ink);
     ANTERIOR  background-image: radial-gradient(120% 90% at 50% 30%,
                 #1d1d22 0%, #131317 38%, #0b0b0d 68%, #060607 100%);

   Como o fundo é fixo na viewport, ele também serve de palco para a seção
   da marca (globo + "Nós fazemos seu site"), que é transparente pelo mesmo
   motivo. As demais seções pintam o próprio fundo por cima.
   ---------------------------------------------------------------------- */
body {
  margin: 0;
  background-color: #050505;                              /* ATUAL */
  background-image: radial-gradient(ellipse 65% 55% at 50% 42%,
    #1E1E1E 0%, #181818 23%, #111111 48%,
    #090909 73%, #050505 100%);                           /* ATUAL */
  background-attachment: fixed;
  background-repeat: no-repeat;
  color: var(--t1);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;   /* o realce cinza padrão do toque suja o visual */
}

h1, h2, h3, h4, p, blockquote, figure, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

a { color: inherit; text-decoration: none; }
img, svg, canvas { display: block; max-width: 100%; }

::selection { background: var(--t1); color: var(--surface); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 300;
  background: var(--ink);
  color: var(--d1);
  padding: 12px 18px;
  border-radius: var(--r-btn);
  font-size: 14px;
}
.skip:focus { left: 12px; }

/* ------------------------------------------------------------- tipografia */

.h2 {
  font-family: var(--display);
  font-size: clamp(32px, 4.6vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--t1);
}
.h2--dark { color: var(--d1); }

.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--t3);
}
.eyebrow--dark { color: var(--d3); }

.lead {
  font-size: 17px;
  line-height: 1.65;
  color: var(--t2);
  text-wrap: pretty;
}
.lead--dark { color: var(--d2); }

.chrome {
  background: var(--nw-chrome);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------------------------------------------------------- botões */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 17px 28px;
  border: 1px solid transparent;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), opacity .35s var(--ease),
              transform .35s var(--ease);
}
/* levanta 2px no hover — sem sombra, como o resto do sistema (a
   profundidade aqui vem só da opacidade/superfície mudando junto) */
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--sm { padding: 13px 20px; font-size: 14px; }

.btn--primary { background: var(--t1); color: var(--surface); }
.btn--primary:hover { opacity: .84; }

.btn--light { background: var(--surface); color: var(--t1); }
.btn--light:hover { opacity: .86; }

.btn--ghost {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn--ghost:hover { background: currentColor; }
.btn--ghost:hover .arrow,
.btn--ghost:hover { color: var(--surface); }

.arrow {
  display: inline-block;
  font-size: .9em;
  transition: transform .35s var(--ease);
}
/* a seta ↗ acompanha o gesto: sai andando na própria direção que aponta */
.btn:hover .arrow { transform: translate(2px, -2px); }

/* ---------------------------------------------------------------- header */

.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: transform .6s var(--ease), background .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
  will-change: transform;
}

.header__inner {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 22px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* sobre a hero escura */
.header { color: var(--d1); }

/* depois que sai da hero
   (fundo sólido de propósito: backdrop-filter derruba o frame rate no scroll) */
.header.is-stuck {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: var(--line-soft);
  color: var(--t1);
}
.header.is-stuck .btn--primary { background: var(--t1); color: var(--surface); }
.header.is-hidden { transform: translate3d(0, -110%, 0); }

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
/* Marca em vetor (proporção 715x294 ≈ 2,43:1). O fill herda currentColor,
   então ela acompanha a cor do cabeçalho sozinha — clara sobre a hero
   escura, escura quando o cabeçalho fica branco. Antes eram dois PNGs
   empilhados trocando de opacidade, 60KB somados; agora é um traçado de
   3KB que nunca perde nitidez, em nenhum tamanho ou densidade de tela. */
.logo__mark {
  display: block;
  width: 63px;
  height: 26px;
  flex: none;
  fill: currentColor;
  transition: color .4s var(--ease);
}
.logo__word {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -.02em;
}
.logo__word span { font-weight: 400; opacity: .62; }

.logo--footer .logo__mark { width: 73px; height: 30px; }

.nav {
  display: flex;
  gap: 32px;
  font-size: 15px;
  color: inherit;
}

/* Sublinhado que desliza da esquerda: o indicativo de "isto é clicável,
   você está passando por cima dele" que faltava — antes só existia a troca
   de opacidade, sutil demais para funcionar como affordance sozinha. */
.nav a {
  position: relative;
  padding-bottom: 3px;
  opacity: .72;
  transition: opacity .3s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: 12px; }

.header .btn--primary { background: var(--d1); color: var(--ink); }

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--r-btn);
  color: inherit;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.burger span {
  display: block;
  width: 16px; height: 1.5px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .35s var(--ease);
}
.burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* Antes usava [hidden] (display:none <-> flex): trocava de estado sem
   nenhuma transição, a única entrada/saída "seca" do site. Agora fica
   sempre no layout, escondida por opacity + transform + visibility — as
   três propriedades certas para animar (visibility não anima sozinha, mas
   pode ter um delay que a troca só no fim do fechar, então o menu nunca
   fica clicável nem legível por leitor de tela enquanto está fechado). */
.mobilemenu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  color: var(--d1);
  padding: 96px var(--gutter) 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;

  opacity: 0;
  visibility: hidden;
  transform: translateY(-14px);
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              visibility 0s linear .32s;
}
.mobilemenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .32s var(--ease), transform .32s var(--ease),
              visibility 0s linear 0s;
}
/* os links entram com um leve atraso escalonado, só na abertura */
.mobilemenu nav a {
  transition: transform .38s var(--ease), opacity .38s var(--ease);
}
.mobilemenu:not(.is-open) nav a {
  transform: translateY(8px);
  opacity: 0;
}
.mobilemenu.is-open nav a:nth-child(1) { transition-delay: .04s; }
.mobilemenu.is-open nav a:nth-child(2) { transition-delay: .08s; }
.mobilemenu.is-open nav a:nth-child(3) { transition-delay: .12s; }
.mobilemenu.is-open nav a:nth-child(4) { transition-delay: .16s; }
.mobilemenu.is-open nav a:nth-child(5) { transition-delay: .2s; }
.mobilemenu nav { display: flex; flex-direction: column; gap: 4px; }
.mobilemenu nav a {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -.03em;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-dark-soft);
}
.mobilemenu .btn { width: 100%; padding: 17px; }

/* ------------------------------------------------ TEXTURA (teste)

   Grão + scan lines sobre o fundo do body, atrás da hero. Aplicado em
   caráter de teste, a pedido do usuário — ele ainda vai decidir se fica.

   PARA REMOVER: apagar as duas regras abaixo (.grain-layer e .scan-layer,
   com seus @keyframes) e as duas divs correspondentes no index.html,
   logo antes do comentário "GLOBO (fundo da hero)".

   Ambas em z-index:1 — entre o body (sem z-index) e a hero (z-index:2) —
   pelo mesmo motivo do globo: uma seção com fundo opaco (z-index:2 em
   .section e .footer) cobre a camada sozinha, sem precisar escondê-la à
   mão. Só aparece onde a hero e o palco da marca são transparentes.

   Só transform e opacity animam — nada de background-position, que gera
   repaint a cada quadro. É por isso que fica em 60fps sem custar nada do
   orçamento do globo.
   ---------------------------------------------------------------------- */

.grain-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scan-layer {
  position: fixed;
  inset: -20px;                 /* sangra além da viewport: a translação
                                    de 20px não deve nunca revelar borda */
  z-index: 1;
  pointer-events: none;
  opacity: .5;
  background-image: repeating-linear-gradient(180deg,
    rgba(255, 255, 255, .06) 0, rgba(255, 255, 255, .06) 1px,
    transparent 1px, transparent 4px);
  animation: nw-scan 9s linear infinite;
  will-change: transform;
}
@keyframes nw-scan {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, -20px, 0); }   /* múltiplo do tile de 4px: laço sem emenda */
}

@media (prefers-reduced-motion: reduce) {
  .scan-layer { animation: none; }
}

/* ----------------------------------------------------------------- globo */

.globe-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

/* ------------------------------------------------------------------ hero */

.hero {
  position: relative;
  z-index: 2;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 120px var(--gutter) 110px;
  color: var(--d1);
  background: transparent;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1040px;
}

.hero .eyebrow { margin-bottom: 34px; font-size: 13px; letter-spacing: .2em; color: var(--d3); }

.hero__title {
  font-family: var(--display);
  font-size: clamp(54px, 8.6vw, 128px);
  font-weight: 500;
  line-height: .97;
  letter-spacing: -.04em;
  text-wrap: balance;
  color: #ffffff;
}

.hero__sub {
  margin-top: 34px;
  max-width: 700px;
  font-size: 21px;
  line-height: 1.58;
  color: var(--d2);
  text-wrap: pretty;
}

.hero__cta {
  margin-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
/* um degrau acima do padrão do site: aqui é o único CTA que precisa competir
   em peso visual com um título de 128px */
.hero__cta .btn { padding: 19px 32px; font-size: 16px; }
.hero__cta .btn--primary { background: var(--d1); color: var(--ink); }
.hero__cta .btn--ghost { color: var(--d1); border-color: rgba(244, 244, 242, .38); }
.hero__cta .btn--ghost:hover { background: var(--d1); color: var(--ink); }

.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--d3);
}
.scroll-cue__track {
  position: relative;
  display: block;
  width: 1px; height: 42px;
  overflow: hidden;
  background: var(--line-dark);
}
.scroll-cue__beam {
  position: absolute;
  inset: 0;
  background: var(--d1);
  animation: nw-cue 2.4s cubic-bezier(.6, 0, .2, 1) infinite;
}
@keyframes nw-cue {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

/* ------------------------------------------------- marca + manifesto */

.statement {
  position: relative;
  z-index: 2;
  height: 200svh;   /* svh, igual ao pin: no celular vh e svh divergem */
  background: transparent;
}

.statement__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow-x: clip;
  padding: 0 var(--gutter);
}

.statement__mark {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  pointer-events: none;
  will-change: transform, opacity;
}
.statement__mark span {
  font-family: var(--display);
  /* frase de 20 caracteres: a escala em vw é bem menor que a de
     "New Wave" (8 caracteres) para caber na mesma largura de tela */
  font-size: clamp(30px, 11.2vw, 190px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.statement__copy {
  position: absolute;
  bottom: 9vh;
  left: 0; right: 0;
  display: grid;
  justify-items: center;
  gap: clamp(10px, 1.6vh, 18px);
  padding: 0 var(--gutter);
}
/* dois parágrafos: o corpo encolhe um pouco em relação à versão de uma frase
   para o bloco não encostar na marca gigante logo acima */
.statement__text {
  max-width: 780px;
  text-align: center;
  font-family: var(--display);
  font-size: clamp(15px, 1.15vw + .4vh, 22px);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -.015em;
  color: var(--d2);
  text-wrap: pretty;
}
/* o destaque não pesa: clareia e sobe meio grau de peso, como o resto do site */
.statement__text strong {
  font-weight: 500;
  color: var(--d1);
}

/* ------------------------------------------------------- faixa cinética
   Texto gigante atravessando a viewport. A posição horizontal vem do
   progresso do scroll dentro da seção — não há loop nem timer.
   ---------------------------------------------------------------------- */

.kinetic {
  position: relative;
  z-index: 2;
  height: 100svh;
  min-height: 520px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #0A0A0A;
}

.kinetic__track {
  position: absolute;
  left: 0;
  width: max-content;
  will-change: transform;
  transform: translate3d(100vw, 0, 0);
}

.kinetic__text {
  display: block;
  font-family: var(--display);
  font-size: clamp(112px, 23vw, 295px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.046em;
  white-space: nowrap;
  text-transform: uppercase;
  color: #FFFFFF;
  user-select: none;
  -webkit-user-select: none;
}

/* --------------------------------------------------------------- seções */

.section {
  position: relative;
  z-index: 2;
  background: var(--surface);
  padding: clamp(80px, 11vw, 150px) 0;
}

.section--paper { background: var(--paper); }

.band-dark {
  background: var(--ink);
  color: var(--d1);
}
.band-dark .eyebrow { color: var(--d3); }

.sechead { margin-bottom: clamp(44px, 6vw, 76px); }
.sechead .eyebrow { margin-bottom: 16px; }

.sechead--split {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  flex-wrap: wrap;
}
.sechead__aside {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--t2);
  text-wrap: pretty;
}
.band-dark .sechead__aside { color: var(--d2); }

/* -------------------------------------------------------------- serviços */

.services { border-top: 1px solid var(--line); }

.srv {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 26px;
  padding: 34px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .55s var(--ease), opacity 1s var(--ease),
              transform 1s var(--ease);
}
.srv:hover { padding-left: 14px; }

.srv__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--t3);
}

.srv__body { display: grid; gap: 8px; }
.srv__body h3 {
  font-family: var(--display);
  font-size: clamp(21px, 2.5vw, 30px);
  font-weight: 500;
  letter-spacing: -.025em;
}
.srv__body p {
  max-width: 62ch;
  font-size: 15px;
  color: var(--t2);
  text-wrap: pretty;
}

.iconbtn {
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 14px;
  color: var(--t2);
  transition: background .4s var(--ease), color .4s var(--ease),
              border-color .4s var(--ease);
}
.srv:hover .iconbtn {
  background: var(--t1);
  border-color: var(--t1);
  color: var(--surface);
}

.cards2 {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 16px;
}
.card {
  background: var(--paper);
  border-radius: var(--r-card);
  padding: 32px;
}
.section--paper .card { background: var(--surface); }
.card__title {
  font-family: var(--display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  margin-bottom: 10px;
}
.card p { font-size: 15px; color: var(--t2); text-wrap: pretty; }

/* --------------------------------------------------------------- números */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line-dark-soft);
  border-top: 1px solid var(--line-dark-soft);
  border-bottom: 1px solid var(--line-dark-soft);
}
.stat {
  background: var(--ink);
  padding: 36px 26px 42px;
  display: grid;
  gap: 12px;
  align-content: start;
}
.stat__num {
  font-family: var(--display);
  font-size: clamp(42px, 5.4vw, 68px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.045em;
}
.stat__label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--d2);
  text-wrap: pretty;
}

/* -------------------------------------------------------------- processo */

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-top: 1px solid var(--line-soft);
}
.step {
  background: var(--surface);
  padding: 34px 26px 44px;
  display: grid;
  gap: 10px;
  align-content: start;
  transition: background .5s var(--ease), opacity 1s var(--ease),
              transform 1s var(--ease);
}
.step:hover { background: var(--paper); }
.step__num {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--t3);
  margin-bottom: 26px;
}
.step h3 {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -.025em;
}
.step p { font-size: 15px; color: var(--t2); text-wrap: pretty; }

/* ------------------------------------------------------------- portfólio */

.works {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 26px;
}

.work { display: grid; gap: 14px; }

.work__shot {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  transition: transform .6s var(--ease), border-color .6s var(--ease);
}
.work__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.work:hover .work__shot {
  transform: translateY(-5px);
  border-color: var(--line);
}

/* Projetos reais, sem mockup fictício. A grade acompanha a quantidade:
   com 3, as colunas voltam a fazer sentido na largura inteira. */
.works--trio {
  max-width: none;
  margin-inline: auto;
}

/* Estado "aguardando": tracejado, sem fingir ser uma tela de navegador —
   isso é o que muda quando o link do projeto chegar (ver comentário
   "EDITAR" no index.html, logo acima da seção). */
.work--pending { cursor: default; }
.work__shot--pending {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  background: transparent;
}
.work__shot--pending span {
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--t3);
}
.work--pending:hover .work__shot { transform: none; border-color: var(--line-soft); }

.work__meta { display: grid; gap: 3px; }
.work__meta h3 {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.02em;
}
.work__tag { font-size: 13px; color: var(--t3); }

.works__cta { margin-top: 44px; display: flex; justify-content: center; }
.section--paper .btn--ghost { color: var(--t1); border-color: var(--line); }
.section--paper .btn--ghost:hover { background: var(--t1); color: var(--surface); }

/* --------------------------------------------------------------- estúdio */

.studio__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.studio__copy .eyebrow { margin-bottom: 16px; }
.studio__copy .h2 { margin-bottom: 24px; }
.studio__copy .lead { margin-bottom: 28px; max-width: 52ch; }

.ticks { display: grid; gap: 12px; margin-bottom: 34px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  color: var(--d2);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 12px; height: 1px;
  background: var(--d3);
}

.studio__viz { color: var(--d1); opacity: .9; }
.studio__viz svg {
  width: 100%;
  height: auto;
  animation: nw-spin 60s linear infinite;
}
@keyframes nw-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .studio__viz svg { animation: none; }
}

/* ----------------------------------------------------------- depoimentos */

.quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.quote {
  background: var(--surface);
  border-radius: var(--r-card);
  padding: 32px;
  display: grid;
  gap: 22px;
  align-content: space-between;
}
.quote blockquote {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.015em;
  text-wrap: pretty;
}
.quote figcaption { display: grid; gap: 2px; }
.quote__name { font-size: 14px; font-weight: 500; }
/* Sem nome de cliente ainda: a etiqueta marca o tema do depoimento. Em caixa
   alta e tracking largo para ler como categoria, e não como se fosse o nome
   de uma pessoa (que seria atribuição inventada). */
.quote__tema .quote__name {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--t3);
}
.quote__role { font-size: 13px; color: var(--t3); }

/* --------------------------------------------------------------- contato */

.contact { background: var(--surface); }

.well {
  background: var(--ink);
  color: var(--d1);
  border-radius: clamp(18px, 2.4vw, 28px);
  padding: clamp(40px, 6vw, 76px);
}
.well .eyebrow { margin-bottom: 16px; }
.well__title {
  font-family: var(--display);
  font-size: clamp(30px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -.035em;
  margin-bottom: 14px;
}
.well__sub { font-size: 16px; color: var(--d2); margin-bottom: 40px; }

/* align-items:start é o que conserta o desalinhamento entre as colunas:
   sem isso, a linha inteira estica na altura do campo mais alto (o de
   contato, que carrega o alternador e a dica) e empurra o seletor da
   direita para baixo, quebrando o ritmo horizontal. */
.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  column-gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(20px, 2.4vw, 30px);
}
.field {
  display: grid;
  align-content: start;
  gap: 6px;
}
.field--full { grid-column: 1 / -1; }

/* O rótulo é a âncora do campo, então ganha altura fixa: assim todos os
   campos começam na mesma linha, mesmo o de contato, que tem o alternador
   ao lado. */
.field label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 30px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--d2);
}
.field__opcional {
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--d3);
  opacity: .75;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-dark);
  padding: 12px 0;
  color: var(--d1);
  font-family: var(--sans);
  font-size: 16px;
  border-radius: 0;
  transition: border-color .35s var(--ease);
}
.field textarea { resize: vertical; min-height: 96px; }

.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23a8a8b0' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 2px center;
  cursor: pointer;
}
.field select option { background: var(--ink); color: var(--d1); }
/* O placeholder precisa ser mais apagado que o rótulo: antes os dois
   usavam o mesmo cinza e o campo vazio virava uma parede uniforme, sem
   nada indicando o que era estrutura e o que era sugestão. */
.field input::placeholder,
.field textarea::placeholder { color: rgba(244, 244, 242, .26); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-bottom-color: var(--d1);
}
.field input:user-invalid { border-bottom-color: #e0705f; }

.form__foot {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.form__note { font-size: 14px; color: var(--d2); }
.form__note a { border-bottom: 1px solid var(--line-dark); }
.form__note a:hover { color: var(--d1); }

/* ---------------------------------------------------------------- rodapé */

.footer {
  position: relative;
  z-index: 2;
  background: var(--ink-3);
  color: var(--d1);
  padding: clamp(56px, 7vw, 90px) 0 34px;
}

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-dark-soft);
}
.footer__tagline { font-size: 15px; color: var(--d2); }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 34px;
  padding: 40px 0;
}
.fcol { display: grid; gap: 11px; align-content: start; }
.fcol h4 {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--d3);
  margin-bottom: 3px;
}
.fcol a {
  font-size: 15px;
  color: var(--d2);
  transition: color .3s var(--ease);
}
.fcol a:hover { color: var(--d1); }

.soon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--d2);
}
.soon .ico { width: 17px; height: 17px; flex: none; }
.soon em {
  font-style: normal;
  font-size: 12px;
  color: var(--d3);
  border: 1px solid var(--line-dark);
  border-radius: 20px;
  padding: 2px 8px;
}

.footer__base {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-top: 26px;
  border-top: 1px solid var(--line-dark-soft);
  font-size: 13px;
  color: var(--d3);
}

/* ------------------------------------------------------------ revelações */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
}
.js [data-reveal-delay="1"] { transition-delay: .09s; }
.js [data-reveal-delay="2"] { transition-delay: .18s; }
.js [data-reveal-delay="3"] { transition-delay: .27s; }
.js [data-reveal-delay="4"] { transition-delay: .36s; }

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------ seções de uma tela
   Cada seção ocupa a altura da janela e centraliza o conteúdo. É min-height,
   não height: se o conteúdo for maior que a tela (janela baixa, fonte grande,
   texto traduzido) a seção cresce em vez de cortar a informação.
   As medidas internas escalam com a altura da janela para caber sem corte.
   ---------------------------------------------------------------------- */

.section--screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(56px, 7vh, 110px);
}

.section--screen > .wrap { width: 100%; }

/* cabeçalhos mais compactos dentro das seções de tela cheia */
.section--screen .sechead { margin-bottom: clamp(22px, 3.4vh, 52px); }
.section--screen .h2 { font-size: clamp(28px, 3.6vw + .4vh, 52px); }

/* --- serviços: 2x2 em vez de 4 linhas empilhadas --- */
.section--screen .services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
}
/* Cada célula é um bloco editorial: número em cima, título, texto, e a
   seta no canto. O realce no hover é troca de superfície — nunca deslocamento
   de padding, que empurrava o texto e causava reflow a cada passada do mouse. */
.section--screen .srv {
  position: relative;
  display: block;
  padding: clamp(15px, 2.1vh, 28px) clamp(20px, 2.4vw, 34px);
  border-bottom: 1px solid var(--line);
  transition: background .45s var(--ease),
              opacity 1s var(--ease), transform 1s var(--ease);
}
.section--screen .srv:nth-child(odd) { border-right: 1px solid var(--line); }
.section--screen .srv:hover {
  padding-left: clamp(20px, 2.4vw, 34px);
  background: var(--paper);
}

.section--screen .srv__num {
  display: block;
  margin-bottom: clamp(9px, 1.5vh, 20px);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--t3);
}

.section--screen .srv__body { display: grid; gap: 7px; }
.section--screen .srv__body h3 { font-size: clamp(18px, 1.5vw + .3vh, 25px); }
.section--screen .srv__body p {
  font-size: clamp(13px, .55vw + .35vh, 15px);
  line-height: 1.55;
  max-width: 44ch;
}

/* a seta só aparece no hover, e entra por opacity/transform: sem reflow */
.section--screen .srv .iconbtn {
  display: grid;
  position: absolute;
  top: clamp(13px, 1.9vh, 24px);
  right: clamp(18px, 2.2vw, 30px);
  width: 34px; height: 34px;
  font-size: 12px;
  opacity: 0;
  transform: translate(-5px, 5px);
  transition: opacity .45s var(--ease), transform .45s var(--ease),
              background .45s var(--ease), color .45s var(--ease),
              border-color .45s var(--ease);
}
.section--screen .srv:hover .iconbtn { opacity: 1; transform: none; }

/* os dois cartões passam a falar a mesma língua da grade: contorno fino em
   vez de caixa cinza, e o preenchimento só no hover */
.section--screen .cards2 {
  margin-top: clamp(9px, 1.4vh, 20px);
  gap: clamp(10px, 1.6vh, 16px);
}
.section--screen .card {
  padding: clamp(15px, 2.1vh, 26px);
  background: transparent;
  border: 1px solid var(--line-soft);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.section--screen .card:hover {
  background: var(--paper);
  border-color: var(--line);
}
.section--screen .card__title { font-size: clamp(17px, 1.2vw + .2vh, 20px); }
.section--screen .card p { font-size: clamp(13px, .55vw + .35vh, 15px); }

/* --- números --- */
/* Em 4 colunas de 288px os números não podiam crescer: "30 dias" já
   encostava nas bordas. Em 2x2 a coluna dobra, o número vira o protagonista
   da seção e as duas linhas preenchem a altura. */
.section--screen .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.section--screen .stat {
  padding: clamp(22px, 4.2vh, 50px) clamp(24px, 2.4vw, 40px);
  gap: clamp(8px, 1.5vh, 18px);
}
.section--screen .stat__num { font-size: clamp(42px, 4.2vw + 1.2vh, 94px); }
.section--screen .stat__label {
  font-size: clamp(14px, .55vw + .4vh, 17px);
  max-width: 32ch;
}

/* --- processo --- */
/* Quatro colunas curtas deixavam metade da tela vazia. Aqui viram quatro
   linhas de largura total — número grande, título e texto lado a lado — que
   usam a largura e preenchem a altura, no mesmo idioma de fios finos das
   outras seções. */
.section--screen .steps {
  grid-template-columns: 1fr;
  gap: 0;
  background: transparent;
  border-top: 1px solid var(--line);
}

.section--screen .step {
  display: grid;
  grid-template-columns: clamp(48px, 5vw, 84px) minmax(0, .85fr) minmax(0, 1.5fr);
  align-items: baseline;
  gap: clamp(14px, 2.6vw, 44px);
  padding: clamp(15px, 2.8vh, 32px) clamp(10px, 1.4vw, 20px);
  background: transparent;
  border-bottom: 1px solid var(--line);
}
.section--screen .step:hover { background: var(--paper); }

.section--screen .step__num {
  margin-bottom: 0;
  font-family: var(--display);
  font-size: clamp(22px, 1.7vw + .5vh, 36px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--t3);
}

.section--screen .step h3 { font-size: clamp(19px, 1.5vw + .3vh, 27px); }
.section--screen .step p {
  font-size: clamp(13px, .55vw + .35vh, 15px);
  line-height: 1.55;
  max-width: 56ch;
}

/* --- portfólio: 3 colunas x 2 linhas ---
   O botão subiu para o cabeçalho: como bloco solto no rodapé da seção ele
   comia 73px de altura que agora pertencem aos próprios projetos. */
.sechead__side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 2vh, 22px);
}
.sechead__side .btn { white-space: nowrap; }

.section--screen .works {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.2vh, 28px);
}

/* a altura vem da janela: com o rodapé livre, o mockup cresce e a moldura
   de navegador falsa passa a ter espaço para ser lida */
.section--screen .work__shot {
  aspect-ratio: auto;
  height: clamp(110px, 21vh, 250px);
}

.section--screen .work { gap: clamp(10px, 1.4vh, 16px); }

.section--screen .work__meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 14px;
}
.section--screen .work__meta h3 {
  font-size: clamp(16px, 1.1vw + .25vh, 21px);
}
/* a legenda passa a usar o mesmo sistema de rótulo das outras seções */
.section--screen .work__tag {
  grid-column: 1 / -1;
  font-size: clamp(10px, .35vw + .18vh, 12px);
  letter-spacing: .14em;
  text-transform: uppercase;
}
/* seta alinhada ao título, entrando sem deslocar nada */
.section--screen .work__meta::after {
  content: "↗";
  grid-row: 1;
  grid-column: 2;
  font-size: 13px;
  color: var(--t3);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.section--screen .work:hover .work__meta::after { opacity: 1; transform: none; }

/* ------------------------------------------- PORTFÓLIO: os três cards

   A grade acompanha a quantidade de projetos reais. A proporção do card
   (1,85:1) é casada com a das imagens de origem, para o recorte ficar em
   ~2% — a arte da Cookie Nation é composição fechada e qualquer corte
   lateral começa a comer o texto.

   Nota de sistema: o design original proibia sombra ("a profundidade vem
   da troca de superfície"). Esta é a única exceção do site, pedida de
   propósito — e feita em duas camadas (contato curto + difusa longa) para
   parecer luz de verdade, não uma borda borrada.

   A partir do 4º ou 5º projeto vale virar carrossel: manter a altura do
   .work__shot e o comportamento de hover, trocando só a grade por trilho.
   ---------------------------------------------------------------------- */

.section--screen .works--trio {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none;
  gap: clamp(16px, 1.8vw, 32px);
}

.section--screen .works--trio .work__shot {
  /* A proporção do card acompanha a das imagens (1672x941 = 1,78 e
     1200x630 = 1,90). Em 1,85 o recorte fica em ~2% nas duas, contra os
     ~15% que a altura fixa causava — a arte da Cookie Nation é uma
     composição fechada, qualquer corte lateral começa a comer o texto. */
  aspect-ratio: 1.85 / 1;
  height: auto;
  border-radius: 18px;
  border-color: transparent;
  box-shadow:
    0 1px 2px rgba(11, 11, 12, .04),
    0 10px 28px -14px rgba(11, 11, 12, .20);
  transition: transform .55s var(--ease), box-shadow .55s var(--ease);
}

/* a imagem cresce por dentro da moldura, que tem overflow:hidden —
   o movimento fica contido, sem empurrar layout nenhum */
.section--screen .works--trio .work__shot img {
  object-position: center;
  transition: transform .9s var(--ease);
}
.section--screen .works--trio .work:hover .work__shot img {
  transform: scale(1.05);
}

.section--screen .works--trio .work:hover .work__shot {
  transform: translateY(-8px);
  box-shadow:
    0 2px 6px rgba(11, 11, 12, .06),
    0 32px 64px -26px rgba(11, 11, 12, .38);
}

/* rótulo que sobe do rodapé da imagem: diz o que o clique faz, já que
   agora o card abre o site do cliente em outra aba */
.section--screen .works--trio .work__shot::after {
  content: "Ver site ↗";
  position: absolute;
  inset: auto 0 0 0;
  padding: 52px 22px 18px;
  background: linear-gradient(180deg, transparent, rgba(6, 6, 8, .78));
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.section--screen .works--trio .work:hover .work__shot::after {
  opacity: 1;
  transform: none;
}

/* a legenda acompanha o novo porte do card */
.section--screen .works--trio .work__meta h3 {
  font-size: clamp(19px, 1.5vw + .3vh, 27px);
}
.section--screen .works--trio .work__tag {
  font-size: clamp(11px, .4vw + .2vh, 13px);
}
.section--screen .works--trio .work__meta::after { font-size: 15px; }


/* --- estúdio --- */
.section--screen .studio__copy .lead { font-size: clamp(14px, .7vw + .4vh, 17px); }
.section--screen .ticks { gap: clamp(7px, 1.1vh, 12px); margin-bottom: clamp(20px, 3vh, 34px); }
.section--screen .ticks li { font-size: clamp(13px, .55vw + .35vh, 15px); }
/* width (não só max-width): com largura automática, um <svg> sem atributos
   de tamanho volta ao padrão de 300px em vez de esticar até o limite. */
.section--screen .studio__viz { width: min(100%, 74vh); margin-inline: auto; }

/* --- depoimentos --- */
/* A citação é o conteúdo: ganha corpo de texto editorial e o cartão ganha
   altura mínima, com a assinatura ancorada no rodapé por um fio. Contorno em
   vez de caixa cheia, como os cartões da seção de serviços. */
.section--screen .quotes { gap: clamp(12px, 1.8vh, 20px); }
.section--screen .quote {
  padding: clamp(22px, 3.6vh, 44px);
  gap: clamp(18px, 3.2vh, 40px);
  min-height: clamp(210px, 44vh, 430px);
  background: transparent;
  border: 1px solid var(--line-soft);
  transition: background .45s var(--ease), border-color .45s var(--ease);
}
.section--screen .quote:hover {
  background: var(--surface);
  border-color: var(--line);
}
.section--screen .quote blockquote {
  font-size: clamp(16px, 1vw + .45vh, 23px);
  line-height: 1.4;
}
.section--screen .quote figcaption {
  padding-top: clamp(12px, 1.8vh, 20px);
  border-top: 1px solid var(--line-soft);
}

/* --- contato --- */
.section--screen .well { padding: clamp(24px, 3.8vh, 60px); }
.section--screen .well__title { font-size: clamp(26px, 3vw + .5vh, 48px); }
.section--screen .well__sub { margin-bottom: clamp(20px, 3.4vh, 40px); }
.section--screen .form { gap: clamp(12px, 1.8vh, 18px); }
.section--screen .field input,
.section--screen .field select,
.section--screen .field textarea { padding: clamp(8px, 1.2vh, 12px) 0; }

/* Janela baixa ou tela estreita: solta a restrição de uma tela e deixa
   o conteúdo respirar na altura natural. */
@media (max-height: 620px), (max-width: 860px) {
  .section--screen {
    min-height: 0;
    display: block;
    padding-block: clamp(64px, 10vw, 110px);
  }
  .section--screen .services { grid-template-columns: 1fr; }
  .section--screen .stats { grid-template-columns: 1fr; }
  .section--screen .quote { min-height: 0; }
  .section--screen .srv:nth-child(odd) { border-right: 0; }
  .section--screen .step {
    grid-template-columns: clamp(40px, 9vw, 56px) minmax(0, 1fr);
    gap: 6px 16px;
    align-items: start;
  }
  .section--screen .step p { grid-column: 2; }
  .section--screen .works { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .section--screen .works--trio { grid-template-columns: 1fr; }
}

/* ------------------------------------------- camadas fora do palco

   Depois da hero e da seção da marca, as camadas de textura ficam
   cobertas pelas seções opacas. visibility:hidden tira as superfícies da
   composição, e o animation-play-state para os laços que continuavam
   girando invisíveis. A classe vem do setStageRunning() em main.js.
   ---------------------------------------------------------------------- */

.fora-do-palco .grain-layer,
.fora-do-palco .scan-layer,
.fora-do-palco .stars-layer,
.fora-do-palco .breathe-layer {
  visibility: hidden;
  animation-play-state: paused;
}

/* ----------------------------------------------------------- responsivo */

@media (max-width: 1000px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__viz { width: min(80%, 380px); margin: 0 auto; }
}

@media (max-width: 860px) {
  .nav { display: none; }
  .burger { display: flex; }
  .header__actions .btn--primary { display: none; }

  /* ---- alvos de toque: mínimo de 44px em tudo que se clica ----
     A partir daqui a navegação vira hambúrguer, ou seja, é uma tela de
     dedo — inclusive tablet. Abaixo de 44px o toque erra o alvo. Estes
     estavam entre 18px e 42px. */
  .burger { width: 44px; height: 44px; }

  .logo { padding: 9px 0; }

  .section--screen .field input,
  .section--screen .field select,
  .section--screen .field textarea { padding: 13px 0; }

  .fcol { gap: 0; }
  .fcol a { padding: 11px 0; }

  .form__note { display: inline-flex; align-items: center; min-height: 44px; }
  .form__note a { display: inline-block; padding: 11px 0; }

  .soon { min-height: 44px; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .form { grid-template-columns: 1fr; }
  .footer__base { flex-direction: column; gap: 8px; }

  /* ---- cabeçalho mais enxuto: 86px roubava tela numa altura de 812 ---- */
  .header__inner { padding: 15px var(--gutter); }
  .logo__mark { width: 56px; height: 23px; }
  .logo__word { font-size: 17px; }

  .hero { padding: 96px var(--gutter) 92px; }

  /* o botão do formulário ocupa a linha toda: alvo maior e mais claro */
  .form__foot { flex-direction: column; align-items: stretch; gap: 14px; }
  .form__foot .btn { width: 100%; }
  .form__note { justify-content: center; }
}

/* Sem hover de verdade (dedo): as setas que só apareciam ao passar o mouse
   ficam visíveis de leve, senão a affordance some por completo no celular. */
/* ------------------------------------------------ VINHETA RESPIRANDO (teste)

   O mesmo gradiente radial do body, só que variando de tamanho e opacidade
   bem devagar — como uma luz distante pulsando. É uma extensão do gradiente
   que já existe, não uma camada nova: fica direto no body via um segundo
   background-image, para herdar o mesmo centro e a mesma paleta.

   Só transform (scale) e opacity animam — nenhuma propriedade de layout,
   nenhum redesenho por quadro.

   PARA REMOVER: apagar a regra ".breathe-layer" (+ "@keyframes nw-breathe")
   no bloco "VINHETA RESPIRANDO (teste)" do styles.css, e a <div> com essa
   classe no index.html, logo depois das camadas de estrelas.
   ---------------------------------------------------------------------- */

.breathe-layer {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: radial-gradient(ellipse 60% 50% at 50% 42%,
    rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .02) 35%, transparent 68%);
  transform-origin: 50% 42%;
  animation: nw-breathe 13s ease-in-out infinite;
}
@keyframes nw-breathe {
  0%   { transform: scale(1);     opacity: .55; }
  50%  { transform: scale(1.18);  opacity: 1; }
  100% { transform: scale(1);     opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .breathe-layer { animation: none; }
}

/* ------------------------------------------------ CAMPO DE ESTRELAS (teste)

   Três camadas de profundidade, cada uma um SVG estático (pontos com posição
   e opacidade geradas uma vez, fora do navegador — sem Math.random() em
   runtime, sem canvas, sem redesenho por quadro). O único custo por quadro é
   compositor puro: só transform e opacity animam, igual ao grão e às scan
   lines. Pode conviver com as duas, ou substituir uma delas — teste e decida.

   PARA REMOVER: apagar as três regras .stars-layer--a/b/c (+ seus
   @keyframes) e as três <div> no index.html, logo depois do .scan-layer.

   z-index:1, mesmo motivo do grão/scan lines/globo: cada seção abaixo tem
   fundo opaco em z-index:2 e cobre a camada sozinha.
   ---------------------------------------------------------------------- */

.stars-layer {
  position: fixed;
  inset: -60px;         /* sangra além da viewport: a deriva nunca revela borda */
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
}

.stars-layer--a {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Ccircle cx='39.5' cy='74.9' r='0.54' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='183.9' cy='273.3' r='0.74' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='189.6' cy='98.0' r='0.56' fill='%23fff' fill-opacity='0.28'/%3E%3Ccircle cx='177.2' cy='140.8' r='0.84' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='157.4' cy='128.0' r='0.81' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='147.9' cy='162.2' r='0.61' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='143.5' cy='18.7' r='0.69' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='140.8' cy='164.9' r='0.70' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='230.6' cy='120.0' r='0.80' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='141.3' cy='114.9' r='0.53' fill='%23fff' fill-opacity='0.33'/%3E%3Ccircle cx='86.1' cy='186.9' r='0.50' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='102.6' cy='169.1' r='0.88' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='268.5' cy='45.8' r='0.71' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='139.4' cy='109.2' r='0.87' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='248.4' cy='95.4' r='0.55' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='110.0' cy='123.7' r='0.50' fill='%23fff' fill-opacity='0.40'/%3E%3Ccircle cx='39.8' cy='75.0' r='0.55' fill='%23fff' fill-opacity='0.34'/%3E%3Ccircle cx='104.7' cy='239.0' r='0.67' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='29.6' cy='75.1' r='0.63' fill='%23fff' fill-opacity='0.31'/%3E%3Ccircle cx='243.9' cy='220.1' r='0.86' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='178.1' cy='260.0' r='0.78' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='233.4' cy='211.7' r='0.89' fill='%23fff' fill-opacity='0.41'/%3E%3Ccircle cx='267.5' cy='14.2' r='0.75' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='36.6' cy='246.2' r='0.80' fill='%23fff' fill-opacity='0.30'/%3E%3Ccircle cx='180.1' cy='279.4' r='0.71' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='61.0' cy='39.4' r='0.57' fill='%23fff' fill-opacity='0.27'/%3E%3Ccircle cx='70.9' cy='113.2' r='0.82' fill='%23fff' fill-opacity='0.28'/%3E%3Ccircle cx='51.6' cy='86.4' r='0.65' fill='%23fff' fill-opacity='0.34'/%3E%3Ccircle cx='61.2' cy='200.8' r='0.54' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='157.4' cy='27.2' r='0.51' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='214.2' cy='114.7' r='0.74' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='276.2' cy='28.2' r='0.79' fill='%23fff' fill-opacity='0.31'/%3E%3Ccircle cx='123.2' cy='48.1' r='0.71' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='106.5' cy='42.0' r='0.65' fill='%23fff' fill-opacity='0.33'/%3E%3Ccircle cx='108.8' cy='197.1' r='0.76' fill='%23fff' fill-opacity='0.31'/%3E%3Ccircle cx='23.8' cy='221.4' r='0.53' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='249.9' cy='150.0' r='0.72' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='234.3' cy='216.0' r='0.62' fill='%23fff' fill-opacity='0.29'/%3E%3Ccircle cx='183.0' cy='38.8' r='0.71' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='113.9' cy='150.8' r='0.81' fill='%23fff' fill-opacity='0.55'/%3E%3Ccircle cx='115.1' cy='28.0' r='0.66' fill='%23fff' fill-opacity='0.32'/%3E%3Ccircle cx='130.1' cy='223.4' r='0.56' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='202.0' cy='145.0' r='0.68' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='91.0' cy='158.1' r='0.72' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='119.6' cy='148.4' r='0.50' fill='%23fff' fill-opacity='0.46'/%3E%3Ccircle cx='56.0' cy='73.0' r='0.63' fill='%23fff' fill-opacity='0.35'/%3E%3Ccircle cx='251.8' cy='236.6' r='0.82' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='146.9' cy='177.1' r='0.61' fill='%23fff' fill-opacity='0.44'/%3E%3Ccircle cx='17.6' cy='127.1' r='0.58' fill='%23fff' fill-opacity='0.30'/%3E%3Ccircle cx='37.6' cy='182.2' r='0.85' fill='%23fff' fill-opacity='0.34'/%3E%3Ccircle cx='251.4' cy='77.3' r='0.62' fill='%23fff' fill-opacity='0.37'/%3E%3Ccircle cx='174.4' cy='272.4' r='0.86' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='163.9' cy='247.6' r='0.52' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='269.4' cy='99.2' r='0.80' fill='%23fff' fill-opacity='0.29'/%3E%3Ccircle cx='251.1' cy='173.6' r='0.63' fill='%23fff' fill-opacity='0.41'/%3E%3C/svg%3E");
  background-size: 280px 280px;
  opacity: .5;
  animation: nw-star-drift-a 150s linear infinite;
}
.stars-layer--b {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Ccircle cx='101.2' cy='345.1' r='1.31' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='326.1' cy='310.4' r='0.83' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='251.8' cy='47.9' r='1.38' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='183.8' cy='348.9' r='0.88' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='261.3' cy='54.6' r='1.26' fill='%23fff' fill-opacity='0.59'/%3E%3Ccircle cx='308.6' cy='72.3' r='0.98' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='160.8' cy='41.3' r='0.83' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='275.1' cy='91.7' r='0.86' fill='%23fff' fill-opacity='0.60'/%3E%3Ccircle cx='104.6' cy='112.1' r='1.19' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='300.7' cy='133.8' r='1.05' fill='%23fff' fill-opacity='0.50'/%3E%3Ccircle cx='112.8' cy='252.2' r='1.05' fill='%23fff' fill-opacity='0.68'/%3E%3Ccircle cx='24.6' cy='65.0' r='0.92' fill='%23fff' fill-opacity='0.45'/%3E%3Ccircle cx='8.2' cy='3.2' r='0.92' fill='%23fff' fill-opacity='0.62'/%3E%3Ccircle cx='202.2' cy='353.1' r='1.05' fill='%23fff' fill-opacity='0.49'/%3E%3Ccircle cx='334.4' cy='121.2' r='1.38' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='190.7' cy='60.6' r='1.35' fill='%23fff' fill-opacity='0.70'/%3E%3Ccircle cx='295.2' cy='275.0' r='0.93' fill='%23fff' fill-opacity='0.47'/%3E%3Ccircle cx='239.4' cy='338.2' r='0.95' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='103.5' cy='49.1' r='0.96' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='71.2' cy='113.7' r='0.94' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='34.8' cy='261.2' r='1.22' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='238.3' cy='32.3' r='0.81' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='132.2' cy='204.0' r='1.27' fill='%23fff' fill-opacity='0.69'/%3E%3Ccircle cx='288.5' cy='156.5' r='1.02' fill='%23fff' fill-opacity='0.42'/%3E%3Ccircle cx='33.6' cy='41.5' r='0.85' fill='%23fff' fill-opacity='0.48'/%3E%3Ccircle cx='178.3' cy='62.4' r='1.04' fill='%23fff' fill-opacity='0.43'/%3E%3Ccircle cx='24.5' cy='146.2' r='1.08' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='124.4' cy='65.5' r='0.80' fill='%23fff' fill-opacity='0.66'/%3E%3Ccircle cx='319.0' cy='316.0' r='0.93' fill='%23fff' fill-opacity='0.65'/%3E%3Ccircle cx='156.0' cy='354.0' r='1.14' fill='%23fff' fill-opacity='0.38'/%3E%3Ccircle cx='47.7' cy='93.8' r='1.21' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='34.8' cy='76.0' r='0.96' fill='%23fff' fill-opacity='0.67'/%3E%3Ccircle cx='251.5' cy='151.5' r='1.39' fill='%23fff' fill-opacity='0.61'/%3E%3Ccircle cx='323.8' cy='169.0' r='0.82' fill='%23fff' fill-opacity='0.57'/%3E%3C/svg%3E");
  background-size: 360px 360px;
  opacity: .6;
  animation: nw-star-drift-b 110s linear infinite;
}
.stars-layer--c {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Ccircle cx='203.4' cy='77.3' r='2.07' fill='%23fff' fill-opacity='0.74'/%3E%3Ccircle cx='54.8' cy='317.9' r='1.88' fill='%23fff' fill-opacity='0.51'/%3E%3Ccircle cx='426.1' cy='168.9' r='2.10' fill='%23fff' fill-opacity='0.75'/%3E%3Ccircle cx='33.0' cy='367.1' r='1.72' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='108.7' cy='15.2' r='1.83' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='225.9' cy='343.5' r='1.74' fill='%23fff' fill-opacity='0.88'/%3E%3Ccircle cx='397.0' cy='47.6' r='1.58' fill='%23fff' fill-opacity='0.53'/%3E%3Ccircle cx='337.6' cy='194.1' r='1.42' fill='%23fff' fill-opacity='0.52'/%3E%3Ccircle cx='11.7' cy='422.5' r='1.75' fill='%23fff' fill-opacity='0.82'/%3E%3Ccircle cx='104.0' cy='179.5' r='1.75' fill='%23fff' fill-opacity='0.58'/%3E%3Ccircle cx='429.0' cy='389.9' r='1.71' fill='%23fff' fill-opacity='0.57'/%3E%3Ccircle cx='369.8' cy='27.2' r='1.61' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='150.2' cy='304.4' r='1.38' fill='%23fff' fill-opacity='0.54'/%3E%3Ccircle cx='118.2' cy='339.0' r='1.37' fill='%23fff' fill-opacity='0.78'/%3E%3Ccircle cx='226.1' cy='156.4' r='2.07' fill='%23fff' fill-opacity='0.85'/%3E%3Ccircle cx='17.7' cy='90.3' r='1.61' fill='%23fff' fill-opacity='0.88'/%3E%3C/svg%3E");
  background-size: 460px 460px;
  opacity: .7;
  animation: nw-star-drift-c 85s linear infinite, nw-star-twinkle 5.5s ease-in-out infinite alternate;
}

/* deriva: cada camada anda por um múltiplo exato do próprio tile, então o
   laço nunca tem emenda — profundidade vem da velocidade, não da direção */
@keyframes nw-star-drift-a {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-280px, -560px, 0); }
}
@keyframes nw-star-drift-b {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(360px, -720px, 0); }
}
@keyframes nw-star-drift-c {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-460px, -920px, 0); }
}
/* cintilar: só a camada mais próxima, e é a opacity do LAYER inteiro que
   varia — cintilar estrela por estrela custaria um elemento por estrela */
@keyframes nw-star-twinkle {
  from { opacity: .55; }
  to   { opacity: .78; }
}

@media (prefers-reduced-motion: reduce) {
  .stars-layer--a,
  .stars-layer--b,
  .stars-layer--c { animation: none; }
}

@media (hover: none) {
  .section--screen .srv .iconbtn,
  .section--screen .work__meta::after { opacity: .45; transform: none; }

  /* no toque o rótulo não pode depender de hover: fica sempre visível */
  .section--screen .works--trio .work__shot::after { opacity: 1; transform: none; }

  /* Sem mouse não existe hover, só o instante do toque — :active é o
     equivalente real, não uma imitação do hover. Curto de propósito (o
     dedo já vai soltar em seguida), sem transition-delay como no hover. */
  .srv:active,
  .section--screen .srv:active {
    background: var(--paper);
    transition-duration: .12s;
  }
  .step:active,
  .section--screen .step:active {
    background: var(--paper);
    transition-duration: .12s;
  }
  .section--screen .card:active {
    background: var(--paper);
    border-color: var(--line);
    transition-duration: .12s;
  }
  .section--screen .quote:active {
    background: var(--surface);
    border-color: var(--line);
    transition-duration: .12s;
  }
  .work:active .work__shot {
    transform: translateY(-3px);
    border-color: var(--line);
    transition-duration: .12s;
  }
  .btn--ghost:active { background: currentColor; color: var(--surface); }
  .hero__cta .btn--ghost:active { background: var(--d1); color: var(--ink); }
  .section--paper .btn--ghost:active { background: var(--t1); color: var(--surface); }
  .btn--primary:active { opacity: .84; }
  .btn--light:active { opacity: .86; }
}

/* ------------------------------------------------------- movimento reduzido */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .scroll-cue__beam { animation: none; }

  .mobilemenu,
  .mobilemenu nav a { transition: none; }

  /* a faixa vira uma composição estática, sem travessia */
  .kinetic {
    height: auto;
    min-height: 0;
    padding-block: clamp(60px, 10vw, 120px);
    justify-content: center;
  }
  .kinetic__track {
    position: static;
    transform: none;
    max-width: 100%;
    overflow: hidden;
  }
  .kinetic__text { font-size: clamp(40px, 11vw, 120px); }

  .statement { height: auto; }
  .statement__pin { position: static; height: auto; padding: 90px var(--gutter); }
  .statement__copy { position: static; margin-top: 40px; }

  .js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ------------------------------------------------ status do formulário

   Retorno visível do envio: sem isso a pessoa aperta enviar e não sabe se
   funcionou — e reenvia, ou desiste. Vazio por padrão (sem reservar
   espaço), aparece só quando há o que dizer.
   ---------------------------------------------------------------------- */

.form__status {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--d2);
}
.form__status:empty { display: none; }
.form__status--ok { color: var(--d1); }
.form__status--erro { color: #e8907f; }

/* ------------------------------------------- alternador do tipo de contato

   Escolher WhatsApp ou E-mail antes de digitar permite validar de verdade:
   com um campo de texto livre, um número errado passa sem ninguém notar e
   o contato se perde. O rádio nativo fica escondido (mas acessível pelo
   teclado) e o próprio label vira o botão.
   ---------------------------------------------------------------------- */

.field__topo {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 30px;
}
.field__topo label { min-height: 0; }

.alternador {
  display: inline-flex;
  padding: 2px;
  border: 1px solid var(--line-dark);
  border-radius: 999px;
}
.alternador input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.alternador label {
  /* line-height:1 e padding fechado deixam o alternador com exatamente a
     mesma altura de um rótulo comum (30px), para os campos das duas
     colunas comecarem na mesma linha */
  padding: 6px 13px;
  line-height: 1;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--d3);
  cursor: pointer;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.alternador label:hover { color: var(--d1); }
.alternador input:checked + label {
  background: var(--d1);
  color: var(--ink);
}
/* foco visível para quem navega por teclado, já que o rádio está escondido */
.alternador input:focus-visible + label {
  outline: 2px solid var(--d1);
  outline-offset: 2px;
}

.field__dica {
  margin-top: 2px;
  font-size: 11px;
  line-height: 1.4;
  color: var(--d3);
  opacity: .8;
}
.field__dica--erro { color: #e8907f; }

.field input[aria-invalid="true"] { border-bottom-color: #e8907f; }

/* botão de envio com mais presença: é a ação final da página inteira */
.btn--enviar {
  padding: 21px 44px;
  font-size: 16px;
}
@media (max-width: 720px) {
  .btn--enviar { padding: 19px 32px; }
}