/* ============================================================
   Trend — /services/ no esquema da feedagency.co/services
   ------------------------------------------------------------
   Medida ao vivo a 1440 e no espelho (12/09/2026). Tudo deles cresce
   com a largura da tela em dois trechos (343→1376px e 1376→3672px),
   como a FAQ: os tokens `--sv-*` abaixo são as fórmulas deles, em rem,
   gerados por script. Cores, fonte e copy são as nossas.

   1. tokens e cabeçalho
   2. hero — Bebas + barra Strategy → Results
   2b. hero — o "quem somos": números e parceiros (26/09/2026)
   3. os cinco painéis em pilha sticky (fora da Our Services desde
      26/09/2026; a /pricing/, a /dealership-program/ e as galerias usam)
   3b. o time por função — índice preso + inventário (26/09/2026)
   4. processo em colunas + fita, cena presa no desktop (30/09/2026)
   5. declaração pinada + colagem (idem ao 3)
   6. "o que oferecemos" (idem ao 3)
   7. dois vídeos
   8. faixa de logos
   9. depoimentos em baralho
   10. responsivo e movimento reduzido
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS E CABEÇALHO
   ------------------------------------------------------------ */

.svc {
  /* A margem lateral das seções é a do container da Home (`.wrap`): até
     1440 o `--container-pad`, acima o que sobra dos dois lados — fundo de
     ponta a ponta, conteúdo dentro do container (19/10/2026, TRED-148; antes
     era o `--sv-margin` e o conteúdo esticava até ~84px da borda em tela
     larga). Em %, então só vale onde o bloco de contenção tem a largura da
     tela: o padding das seções e o que é absoluto dentro delas. O
     `--sv-margin` segue como VÃO (colunas, alturas), não como margem. */
  --sv-gutter: max(var(--container-pad), calc((100% - var(--container-max)) / 2 + var(--container-pad)));
  /* A escala fluida desta página (as fórmulas da feedagency, em `vw`) para
     de crescer na largura do container, como o conteúdo: acima de 1440 os
     `--sv-*` ficam com o valor de 1440. Sem isto, a 1920 o texto dos passos
     do processo ia a 19px e a 2560 a 26px em colunas de ~300px, e o
     "IMPLEMENTATION" vazava para o passo seguinte (19/10/2026, TRED-148). */
  --sv-vw: min(1vw, calc(var(--container-max) / 100));
  --sv-margin: clamp(1rem, max(calc(0.6680rem + 1.5489 * var(--sv-vw)), calc(0.0523rem + 2.2648 * var(--sv-vw))), 5.25rem);
  --sv-s1: clamp(0.5rem, max(calc(0.5000rem + 0.0000 * var(--sv-vw)), calc(0.0131rem + 0.5662 * var(--sv-vw))), 1.3125rem);
  --sv-s2: clamp(0.5rem, max(calc(0.4170rem + 0.3872 * var(--sv-vw)), calc(0.0009rem + 0.8711 * var(--sv-vw))), 2rem);
  --sv-s3: clamp(0.75rem, max(calc(0.6670rem + 0.3872 * var(--sv-vw)), calc(0.0261rem + 1.1324 * var(--sv-vw))), 2.625rem);
  --sv-s4: clamp(1rem, max(calc(0.8340rem + 0.7744 * var(--sv-vw)), calc(0.0017rem + 1.7422 * var(--sv-vw))), 4rem);
  --sv-s5: clamp(1.5rem, max(calc(1.3340rem + 0.7744 * var(--sv-vw)), calc(0.0523rem + 2.2648 * var(--sv-vw))), 5.25rem);
  --sv-s6: clamp(1.75rem, max(calc(1.5010rem + 1.1617 * var(--sv-vw)), calc(0.0653rem + 2.8310 * var(--sv-vw))), 6.5625rem);
  --sv-s7: clamp(2.25rem, max(calc(2.0010rem + 1.1617 * var(--sv-vw)), calc(0.0035rem + 3.4843 * var(--sv-vw))), 8rem);
  --sv-s8: clamp(3rem, max(calc(2.6680rem + 1.5489 * var(--sv-vw)), calc(0.1045rem + 4.5296 * var(--sv-vw))), 10.5rem);
  --sv-s10: clamp(4.5rem, max(calc(4.0019rem + 2.3233 * var(--sv-vw)), calc(0.0070rem + 6.9686 * var(--sv-vw))), 16rem);
  --sv-sec-s: clamp(3rem, max(calc(2.3359rem + 3.0978 * var(--sv-vw)), calc(0.1307rem + 5.6620 * var(--sv-vw))), 13.125rem);
  /* era a medida do modelo (117px a 1440); desde 26/09/2026 é o ritmo do
     site, o mesmo das outras páginas */
  --sv-sec-m: var(--section-y);
  --sv-border: clamp(0.1875rem, max(calc(0.1667rem + 0.0968 * var(--sv-vw)), calc(-0.0122rem + 0.3049 * var(--sv-vw))), 0.6875rem);
  --sv-text-s: clamp(0.6875rem, max(calc(0.6252rem + 0.2904 * var(--sv-vw)), calc(0.0135rem + 1.0017 * var(--sv-vw))), 2.3125rem);
  --sv-text-m: clamp(0.9375rem, max(calc(0.8752rem + 0.2904 * var(--sv-vw)), calc(0.0013rem + 1.3066 * var(--sv-vw))), 3rem);
  --sv-text-l: clamp(1.25rem, max(calc(1.0632rem + 0.8712 * var(--sv-vw)), calc(0.0146rem + 2.0906 * var(--sv-vw))), 4.8125rem);
  --sv-h3: clamp(1.625rem, max(calc(1.1892rem + 2.0329 * var(--sv-vw)), calc(0.0159rem + 3.3972 * var(--sv-vw))), 7.8125rem);
  --sv-h2: clamp(1.9rem, max(calc(1.1197rem + 3.6399 * var(--sv-vw)), calc(-0.0200rem + 4.9652 * var(--sv-vw))), 11.375rem);
  --sv-h1: clamp(2.75rem, max(calc(1.1105rem + 7.6476 * var(--sv-vw)), calc(0.0089rem + 8.9286 * var(--sv-vw))), 20.5rem);
  --sv-ease-line: cubic-bezier(0.18, 0.66, 0.25, 0.75);
}

/* hero claro: a pílula do header já sólida desde o topo, como na About */
/* o header sólido desde o topo (hero claro) vem do theme.css — lista
   "HERO CLARO" junto das regras do `.is-scrolled`; não copie aqui. */

/* as cinco cores, na ordem dos painéis — usadas pela barra do hero, pelos
   painéis e pela fita */
.svc .is-purple { --sv-bg: var(--purple-500); --sv-fg: var(--white); --focus-ring: var(--white); }
.svc .is-blue   { --sv-bg: var(--blue-500);   --sv-fg: var(--white); --focus-ring: var(--white); }
.svc .is-teal   { --sv-bg: var(--teal-500);   --sv-fg: var(--brand-ink); }
.svc .is-light  { --sv-bg: var(--purple-100); --sv-fg: var(--brand-ink); }
.svc .is-dark   { --sv-bg: var(--site-dark);  --sv-fg: var(--white); }
.svc .is-ink    { --sv-bg: var(--brand-ink);  --sv-fg: var(--white); }

/* ------------------------------------------------------------
   2. HERO
   ------------------------------------------------------------ */

/* 75% da tela, não 100% (26/09/2026): com o h1 no tamanho novo, a tela
   cheia era dois terços de creme vazio — no iPhone, meia tela antes do
   título. Na Our Services o hero cresce além disso com os números; nas
   galerias (só título e barra) o piso é o que segura a abertura. */
.svc-hero {
  min-height: 75svh;
  display: grid;
  place-items: center;
  padding: calc(var(--sv-sec-s) + 72px) var(--sv-gutter) var(--sv-sec-s);
  text-align: center;
}
.svc-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sv-s4);
  width: 100%;
}
.svc-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--title-call);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--brand-ink);
  text-wrap: balance;
}
.svc-hero__bar {
  display: flex;
  align-items: flex-end;
  gap: var(--sv-s1);
  width: 100%;
  max-width: 71.5ch;
  font-size: var(--title-lead-l);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: var(--brand-ink);
}
.svc-hero__track {
  flex: 1;
  height: 0.9em;
  margin-bottom: 0.15em;
  overflow: hidden;
}
/* dez segmentos = duas voltas das cinco cores; anda meia largura por
   ciclo, então fecha sem costura */
.svc-hero__run {
  display: flex;
  width: 200%;
  height: 100%;
  animation: svc-run 4s linear infinite;
  will-change: transform;
}
.svc-hero__run i { flex: none; width: 10%; height: 100%; background: var(--sv-bg); }
@keyframes svc-run { from { transform: translateX(-50%); } to { transform: none; } }
.svc-hero__lead {
  margin: 0;
  max-width: 44ch;   /* em 27ch eram quatro linhas de quatro palavras */
  font-size: var(--sv-text-m);
  line-height: 1.3;
  color: var(--brand-ink);
  text-wrap: balance;   /* sem o "house." sozinho na última linha, no celular */
}

/* ------------------------------------------------------------
   2b. HERO — o "quem somos" (slide 3 do deck): os quatro números e os
       dois selos de parceiro. Números em Bebas (o único uso da face na
       página fora do h1), fio de tinta entre eles, como uma régua.
   ------------------------------------------------------------ */
.svc-stats {
  list-style: none;
  margin: var(--sv-s2) 0 0;
  padding: 0;
  width: 100%;
  max-width: 64rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-block: 1px solid var(--border-subtle);
}
.svc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--space-5) var(--space-4);
}
.svc-stat + .svc-stat { border-left: 1px solid var(--border-subtle); }
.svc-stat__figure {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--title-statement);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary);
}
.svc-stat__label {
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  color: var(--brand-ink);
}
.svc-stat__note {
  max-width: 24ch;
  text-wrap: balance;
  font-size: var(--text-sm);
  line-height: 1.35;
  color: var(--text-muted);
}
.svc-hero__partners {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--brand-ink);
}

/* ------------------------------------------------------------
   3. OS CINCO PAINÉIS
   ------------------------------------------------------------ */

.svc-stack { position: relative; }
.svc-panel {
  position: sticky;
  top: 0;
  min-height: 100vh;
  display: flex;
  padding: var(--sv-margin) var(--sv-gutter);
  background: var(--sv-bg);
  color: var(--sv-fg);
}
.svc-panel__inner {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sv-margin);
}
.svc-panel__content {
  grid-column: 1 / span 5;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sv-s7);
  min-height: calc(100vh - 2 * var(--sv-margin));
}
/* corpo grande do padrão (era `--sv-text-l`, 30px a 1440 e cinco linhas) */
.svc-panel__lead {
  margin: 0;
  max-width: 46ch;
  font-size: var(--title-lead-l);
  font-weight: var(--weight-medium);
  line-height: 1.35;
  letter-spacing: var(--tracking-tight);
}
.svc-panel__tags {
  list-style: none;
  margin: 0 0 var(--sv-s7);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sv-s2);
  font-size: var(--sv-text-s);
}
/* os chips alinham pela base: o que tem etiqueta preta em cima só
   deixa a fila mais alta */
.svc-panel__tags { align-items: flex-end; }
.svc-tag {
  padding: var(--sv-s1);
  background: var(--surface-page);
  color: var(--brand-ink);
  font-weight: var(--weight-medium);
  line-height: 1.3;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.is-light .svc-tag { background: var(--white); }
.svc-tag--linked { display: flex; flex-direction: column; align-items: flex-start; padding: 0; background: transparent; }
.svc-tag--linked > span { padding: var(--sv-s1); background: var(--surface-page); }
.is-light .svc-tag--linked > span { background: var(--white); }
.svc-tag__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: var(--sv-s1);
  background: var(--brand-ink);
  color: var(--white);
  font-weight: var(--weight-bold);
  text-decoration: none;
  white-space: nowrap;
}
.svc-tag__link svg { width: 0.8em; height: 0.8em; }
.svc-tag__link:hover, .svc-tag__link:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.svc-tag__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.is-dark .svc-tag__link { background: var(--white); color: var(--brand-ink); }
.svc-panel__title {
  margin: 0;
  color: inherit;
  font-size: var(--title-statement);
  font-weight: var(--weight-bold);
  line-height: 0.98;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
/* a linha nasce vazia e cresce quando o bloco entra (`.reveal` → `.is-revealed`) */
.svc-panel__line {
  height: var(--sv-border);
  width: 0;
  margin-top: var(--sv-s2);
  background: currentColor;
  transition: width 0.8s var(--sv-ease-line) 0.15s;
}
.svc-panel__bottom.is-revealed .svc-panel__line { width: 100%; }
.svc-panel__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sv-s4);
  padding-top: var(--sv-s4);
  color: inherit;
  text-decoration: none;
  font-size: var(--sv-text-m);
  line-height: 1.3;
}
.svc-panel__cta svg { width: 1.2em; height: 1.2em; flex: none; transition: transform var(--dur-base) var(--ease-out); }
.svc-panel__cta:hover svg, .svc-panel__cta:focus-visible svg { transform: translate(3px, -3px); }
.svc-panel__cta:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 4px; }
.is-purple .svc-panel__cta:focus-visible, .is-blue .svc-panel__cta:focus-visible, .is-dark .svc-panel__cta:focus-visible { outline-color: var(--white); }

/* ------------------------------------------------------------
   3b. O TIME POR FUNÇÃO — índice preso + inventário (26/09/2026)
   ------------------------------------------------------------
   O slide 4 do deck virou o corpo da página: à esquerda o índice das
   dez funções, uma espinha ROXA que fica presa enquanto o inventário
   corre à direita, e acende a função em leitura (`aria-current`, que o
   services.js põe). Fundo de tinta, o mesmo do acordeão de serviços da
   Home — a seção de que o cliente mais gostou. Turquesa só sobre a
   tinta (marcadores, link); sobre o roxo, branco.
   ------------------------------------------------------------ */

.svc-team {
  background: var(--site-dark);
  color: var(--text-on-dark);
  padding: var(--sv-sec-m) var(--sv-gutter);
}
.svc-team__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sv-margin);
  row-gap: var(--sv-s7);
}
.svc-team__head { grid-column: 1 / -1; }
.svc-team__head .sec-eyebrow { margin-bottom: var(--sv-s3); }
.svc-team__title {
  margin: 0;
  font-size: var(--title-section);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
  text-wrap: balance;
}

.svc-team__index {
  grid-column: 1 / span 3;
  align-self: start;
  position: sticky;
  top: 120px;   /* o header fixo tem ~100px */
  padding: var(--space-4);
  background: var(--brand-primary);
}
.svc-team__index ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.svc-team__index a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px var(--space-4);
  color: rgba(255, 255, 255, 0.74);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
/* a função em leitura: o atalho inverte (branco, texto roxo). Não é um
   fio lateral — faixa colorida na borda de item de lista é o vício que o
   detector de design barra; a inversão diz a mesma coisa de longe. */
.svc-team__index a:hover { color: var(--white); background: rgba(255, 255, 255, 0.1); }
.svc-team__index a[aria-current="true"] {
  color: var(--brand-primary);
  background: var(--white);
}
/* anel BRANCO: turquesa direto sobre o roxo é o que o Manual proíbe */
.svc-team__index a:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }

.svc-team__list { grid-column: 4 / -1; }
.svc-role {
  padding: var(--sv-s6) 0;
  border-top: 1px solid var(--on-dark-rule);
  /* o atalho do índice não para embaixo do header: quem cuida é o
     `scroll-padding-top` do html (theme.css, TRED-141) — os 110px que
     moravam aqui somariam com ele */
}
.svc-role:first-child { padding-top: 0; border-top: 0; }
.svc-role__name {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-on-dark);
}
.svc-role__does {
  list-style: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}
/* marcador = a seta curta da marca, apontando para a entrega */
.svc-role__does li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--on-dark-body);
  text-wrap: pretty;
}
.svc-role__does li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--brand-accent-bright);
}
.svc-role__does li::after {
  content: "";
  position: absolute;
  left: 8px;
  top: calc(0.7em - 3px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--brand-accent-bright);
  border-right: 2px solid var(--brand-accent-bright);
  transform: rotate(45deg);
}
.svc-role__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 44px;
  margin-top: var(--space-4);
  color: var(--brand-accent-bright);
  font-weight: var(--weight-bold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.svc-role__link:hover { text-decoration-thickness: 2px; }
.svc-role__link:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }

/* ------------------------------------------------------------
   4. PROCESSO EM COLUNAS + FITA (30/09/2026, TRED-128)
   ------------------------------------------------------------
   Era uma escada com a fita descendo. Agora os quatro passos ficam lado
   a lado e a fita corre embaixo deles, de borda a borda da tela, até o
   "Let's chat". O que está aqui é o estado FINAL, parado — é o que se vê
   sem JS, com movimento reduzido e no celular. No desktop a seção vira
   uma cena presa (bloco "a cena", abaixo) e o services.js desenha a fita
   com a rolagem. */

.svc-process {
  --pr-stripe: 16px;   /* cada uma das quatro faixas da fita */
  position: relative;
  padding: var(--sv-sec-m) var(--sv-gutter) var(--sv-sec-s);
  background: var(--surface-page);
  /* a fita sai do container até as bordas da tela (`50vw`, que conta a
     barra de rolagem): o excesso é cortado aqui. `clip` e não `hidden`:
     não cria contêiner de rolagem, e o palco preso da cena continua preso */
  overflow-x: clip;
}
/* cabeça no padrão: rótulo e frase "Seção" (o apoio saiu em 26/09/2026 —
   repetia os passos 02 e 03) */
.svc-process__head { margin: 0 0 var(--sv-s7); }
.svc-process__head .sec-eyebrow { margin-bottom: var(--sv-s3); }
.svc-process__title {
  margin: 0;
  max-width: 16ch;
  font-size: var(--title-section);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: balance;
}
.svc-process__steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--sv-margin);
}
.svc-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sv-s2);
}
/* No tamanho de rótulo do site (13px, o do eyebrow), não na escala fluida:
   é etiqueta em caixa-alta espaçada numa coluna de ~300px, e a 14–15px o
   "IMPLEMENTATION" encostava na borda da coluna (19/10/2026, TRED-148). */
.svc-step__title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--sv-s2);
  background: var(--brand-ink);
  color: var(--white);
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  line-height: 1.3;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.svc-step__n { font-variant-numeric: tabular-nums; }
.svc-step p {
  margin: 0;
  font-size: var(--sv-text-s);
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--brand-ink);
  text-wrap: pretty;
}
.svc-step__when { font-size: var(--sv-text-s); letter-spacing: 0.03em; color: var(--text-muted); }

/* a fita: quatro faixas empilhadas logo abaixo dos passos, de borda a
   borda da tela (sai do container dos dois lados — é fundo, não conteúdo;
   o conteúdo dela, o "Let's chat", fica na margem do container). Na cena cada faixa cresce
   da esquerda (`scaleX`, services.js) — por isso são caixas, não traços
   de SVG: reta não precisa de caminho, e a proporção intrínseca do
   `<svg>` já fez a fita antiga crescer sozinha para fora da tela. */
.svc-process__line {
  position: relative;
  height: calc(4 * var(--pr-stripe));
  margin: var(--sv-s6) 0 0;
}
/* só as faixas sangram (`50% - 50vw`); a caixa da fita segue na largura do
   conteúdo, e é nela que o convite se ancora — na margem exata do container */
.svc-process__ribbon { display: grid; height: 100%; margin-inline: calc(50% - 50vw); }
.svc-process__ribbon i { background: var(--sv-bg); transform-origin: 0 50%; }

/* o convite na ponta da fita: caixa de tinta da altura dela, na margem da
   direita; a fita segue por trás até a borda da tela. Creme direto sobre
   a faixa turquesa ficava abaixo de 3:1 (revisão de 26/09/2026) — na
   caixa ele é legível sobre qualquer faixa. */
.svc-process__chat {
  position: absolute;
  top: 0;
  right: 0;   /* a caixa da fita tem a largura do conteúdo: é a margem do container */
  height: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--sv-s2);
  padding: 0.04em 0.3em 0;
  font-size: var(--title-statement);
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
  color: var(--surface-page);
  text-decoration: none;
  background: var(--brand-ink);
}
.svc-process__chat-arrow {
  width: 0.72em;
  height: 0.72em;
  flex: none;
  transform-origin: 0 100%;
  transition: transform 0.2s ease;
}
.svc-process__chat:hover .svc-process__chat-arrow,
.svc-process__chat:focus-visible .svc-process__chat-arrow { transform: scale(1.2); }
/* anel POR DENTRO da caixa: por fora ele cairia sobre as faixas (turquesa
   sobre roxo o Manual proíbe, e sobre a faixa turquesa some). Com foco a
   caixa aparece inteira, mesmo que a fita ainda não tenha chegado nela. */
.svc-process__chat:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: -3px;
  clip-path: none !important;
}

/* — a cena (desktop) —
   A MESMA media query do services.js: mudou uma, mude a outra. 190vh =
   100vh de palco preso + 90vh de percurso. O palco centra o bloco abaixo
   do header fixo (104px); as margens automáticas centram sem deixar o
   bloco subir para baixo do header quando a tela é baixa. Armada no CSS,
   e não por classe do JS, para a altura da página não saltar depois do
   carregamento. */
@media (min-width: 1061px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  .js .svc-process { height: 190vh; padding: 0; }
  .js .svc-process__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 104px var(--sv-gutter) var(--sv-s4);
  }
  .js .svc-process__head { margin-top: auto; }
  .js .svc-process__line { margin-bottom: auto; }
  /* quem move passos e fita aqui é a cena, não o reveal do site.js */
  .js .svc-process .reveal { opacity: 1; transform: none; transition: none; }
  .js .svc-process__ribbon i,
  .js .svc-step > * { will-change: transform, opacity; }
}

/* ------------------------------------------------------------
   5. DECLARAÇÃO PINADA + COLAGEM
   ------------------------------------------------------------ */

.svc-state { position: relative; background: var(--surface-page); }
.svc-state__pin { position: relative; height: 300vh; }
.svc-state__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.svc-state__text {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 2 * var(--sv-gutter));
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;   /* rótulo em cima da frase, não ao lado */
  align-items: center;
  text-align: center;
}
.svc-state__text .sec-eyebrow { margin-bottom: var(--sv-s3); }
.svc-state__p {
  margin: 0;
  font-size: var(--title-section);
  font-weight: var(--weight-bold);
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
}
/* A tarja tem de sobreviver à quebra de linha. `inline-flex` com
   `height: 1.05em` não sobrevive: a caixa é atômica, então no celular
   "One marketing department" quebrava em duas linhas DENTRO de uma tarja
   de uma linha — texto branco metade na tarja, metade no creme.
   `inline` + `box-decoration-break: clone` dá uma tarja por fragmento; a
   altura passa a ser a caixa de conteúdo da fonte, e o `background-size`
   em `em` devolve o controle que o `height` dava (em elemento inline o
   `height` não se aplica). */
.svc-hl {
  display: inline;
  padding: 0 0.12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-color: transparent;
  background-image: linear-gradient(var(--sv-bg, var(--brand-ink)) 0 0);
  background-size: 100% 1.05em;
  background-position: 0 50%;
  background-repeat: no-repeat;
  color: var(--sv-fg, var(--white));
}
/* o quadrado onde as fotos se empilham, no centro. Era 29,5% (a medida do
   modelo) com a frase a 56px; com a frase a 40px (26/09/2026) a mesma
   pilha tapava a frase quase inteira. 21% devolve a proporção de antes
   entre a pilha e a linha mais longa (~0,5). */
.svc-state__stack {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 21%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.svc-state__frame { position: absolute; inset: 0; will-change: transform; }
.svc-state__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* antes do JS armar a cena, as fotos ficam fora da tela à esquerda */
.js .svc-state__stage.is-armed .svc-state__img { transform: translateX(-100vw); visibility: hidden; }

/* ------------------------------------------------------------
   6. "O QUE OFERECEMOS"
   ------------------------------------------------------------ */

.svc-offer { padding: var(--sv-sec-m) var(--sv-gutter); background: var(--surface-page); }
.svc-offer__inner {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--sv-margin);
  row-gap: var(--sv-s6);
  align-items: start;
}
.svc-offer__text { grid-column: 1 / span 5; }
.svc-offer__text .sec-eyebrow { margin-bottom: var(--sv-s3); }
.svc-offer__text h2 {
  margin: 0 0 var(--sv-s4);
  font-size: var(--title-section);
  font-weight: var(--weight-bold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-ink);
  text-wrap: balance;
}
.svc-offer__text p { margin: 0; max-width: 46ch; font-size: var(--title-lead); font-weight: var(--weight-medium); line-height: 1.4; color: var(--text-muted); }
.svc-offer__card {
  grid-column: 7 / span 6;
  display: flex;
  flex-direction: column;
  gap: var(--sv-s5);
  padding: var(--sv-s6);
  background: var(--site-dark);
  color: var(--white);
}
.svc-offer__qa h3 { margin: 0 0 var(--sv-s2); color: inherit; font-size: var(--sv-text-m); font-weight: var(--weight-bold); line-height: 1.3; }
.svc-offer__qa p { margin: 0; font-size: var(--sv-text-m); line-height: 1.3; color: rgba(255, 255, 255, 0.9); }
.svc-offer__btns { display: flex; flex-wrap: wrap; gap: var(--sv-s3); margin-top: var(--sv-s3); }
.svc-offer .ghost-btn { color: var(--white); border-color: rgba(255, 255, 255, 0.55); }
.svc-offer .ghost-btn:hover { color: var(--white); border-color: var(--white); }

/* ------------------------------------------------------------
   8. FAIXA DE LOGOS
   ------------------------------------------------------------ */

/* roxo desde 30/09/2026: sem os vídeos e o filme, a faixa encosta no time
   (tinta) — dois escuros vizinhos se separam por roxo contra tinta */
/* O roxo vai de ponta a ponta; a esteira corre dentro do container
   (19/10/2026, TRED-148) e some nas pontas por máscara — sem cor, então
   serve sobre qualquer fundo. */
.svc-logos { padding: var(--sv-s8) var(--sv-gutter); background: var(--brand-primary); overflow: hidden; }
.svc-logos__viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.svc-logos__track { display: flex; width: max-content; animation: svc-logos 40s linear infinite; will-change: transform; }
.svc-logos__set { display: flex; align-items: center; gap: var(--sv-s10); padding-right: var(--sv-s10); }
.svc-logos__set img {
  height: calc(var(--sv-text-l) * 1.7);
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
@keyframes svc-logos { to { transform: translateX(calc(-100% / 3)); } }
body.motion-paused .svc-logos__track,
body.motion-paused .svc-hero__run,
.svc-logos__track:not(.is-onscreen) { animation-play-state: paused; }

/* O "Pause motion" da página (TRED-141): no canto de baixo do hero, como na
   Home; abaixo de 760, centrado no fim do hero, como tudo ali. */
.svc-hero { position: relative; }
.svc-hero__motion { position: absolute; right: var(--sv-gutter); bottom: var(--sv-s4); }

/* ------------------------------------------------------------
   10. RESPONSIVO E MOVIMENTO REDUZIDO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .svc-hero__run, .svc-logos__track { animation: none; }
  .svc-panel__line { transition: none; width: 100%; }

  /* Sem a colagem (o services.js não arma a cena com movimento reduzido),
     o desktop deixava as oito fotos empilhadas NO CENTRO, por cima da
     frase — três telas de rolagem com o texto tapado. Mesmo arranjo
     estático do celular: frase, e as fotos em grade embaixo. */
  .svc-state__pin { height: auto; padding: var(--sv-sec-s) var(--sv-gutter); }
  .svc-state__stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; gap: var(--sv-s7); align-items: center; }
  .svc-state__text { position: static; width: 100%; transform: none; }
  .svc-state__stack { position: static; width: 100%; aspect-ratio: auto; transform: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-s2); }
  .svc-state__frame { position: static; aspect-ratio: 1; }

  .svc-team__index a { transition: none; }
}

@media (max-width: 1060px) {
  .svc-hero { padding-top: calc(var(--sv-sec-s) + 88px); }

  /* painéis: coluna inteira; a pilha continua */
  .svc-panel__content { grid-column: 1 / -1; }

  /* processo: passos empilhados, com a fita em miniatura (uma barra
     listrada) entre eles; a fita inteira fecha a lista com o convite na
     ponta, como no desktop */
  .svc-process__steps { grid-template-columns: minmax(0, 1fr); row-gap: var(--sv-s7); }
  .svc-process__line { margin-top: var(--sv-s7); }
  .svc-step + .svc-step::before {
    content: "";
    display: block;
    width: 100%;
    height: 16px;
    margin-bottom: var(--sv-s3);
    background: linear-gradient(to bottom,
      var(--purple-500) 0 25%, var(--blue-500) 25% 50%, var(--teal-500) 50% 75%, var(--brand-ink) 75% 100%);
  }

  /* declaração: sem pin; frase e grade de fotos estáticas */
  .svc-state__pin { height: auto; padding: var(--sv-sec-s) var(--sv-gutter); }
  .svc-state__stage { position: static; height: auto; overflow: visible; display: flex; flex-direction: column; gap: var(--sv-s7); align-items: center; }
  .svc-state__text { position: static; width: 100%; transform: none; }
  .svc-state__stack { position: static; width: 100%; aspect-ratio: auto; transform: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sv-s2); }
  .svc-state__frame { position: static; aspect-ratio: 1; }
  .js .svc-state__stage.is-armed .svc-state__img { transform: none; visibility: visible; }

  .svc-offer__text, .svc-offer__card { grid-column: 1 / -1; }

  /* o time: o índice sobe para o topo como grade de atalhos, SEM ficar
     preso — no celular o header some e volta com a rolagem, e um índice
     preso brigaria com ele pelo mesmo topo */
  .svc-team__inner { row-gap: var(--sv-s6); }
  .svc-team__index { grid-column: 1 / -1; position: static; }
  .svc-team__index ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-team__list { grid-column: 1 / -1; }

  /* baralho: texto em cima, fotos embaixo, altura livre */
}

/* Sem a cena, a fita do processo se desenha para o lado quando entra na
   tela: é o `.reveal` do site.js com outro ponto de partida (recorte em
   vez de deslocamento), como a faixa do filme. */
@media (max-width: 1060px) and (prefers-reduced-motion: no-preference) {
  /* o recorte vai nas faixas e no convite, não na caixa: na caixa ele
     cortaria o pedaço das faixas que sangra até a borda da tela */
  .js .svc-process__line.reveal { opacity: 1; transform: none; }
  .js .svc-process__line.reveal :is(.svc-process__ribbon, .svc-process__chat) {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-out);
  }
  .js .svc-process__line.reveal .svc-process__chat { transition-delay: 0.5s; }
  .js .svc-process__line.reveal.is-revealed :is(.svc-process__ribbon, .svc-process__chat) { clip-path: inset(0); }
}

@media (max-width: 760px) {
  /* o h1 segue o `--title-call` (44px a 390); o piso de 13vw que morava
     aqui ficou MAIOR que o token depois da redução de 26/09/2026 */
  .svc-hero__bar { font-size: var(--sv-text-m); }
  .svc-hero__motion { position: static; margin-top: var(--sv-s5); }
  /* Painéis na altura do conteúdo no celular (26/09/2026). Em 100vh cada
     um era ~60% de cor vazia — cinco telas para cinco parágrafos. A
     pilha continua: o seguinte sobe por cima do anterior, só que agora
     como cartão, não como tela. */
  .svc-panel { min-height: 0; padding-block: var(--sv-s7); }
  .svc-panel__content { min-height: 0; }
  .svc-tag { white-space: normal; }
  /* Oito quadrados em duas colunas são QUATRO fileiras de foto: mais
     rolagem do que argumento. Quatro contam a mesma coisa — loja, prato,
     estratégia, sistemas — e o bloco cabe numa tela. As escondidas são
     `loading=lazy` e nunca cruzam a viewport, então não são baixadas. */
  .svc-state__stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-state__frame:nth-child(n + 5) { display: none; }

  .svc-process { --pr-stripe: 12px; }
  .svc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .svc-stat + .svc-stat { border-left: 0; }
  .svc-stat:nth-child(even) { border-left: 1px solid var(--border-subtle); }
  .svc-stat:nth-child(n + 3) { border-top: 1px solid var(--border-subtle); }
  .svc-role__does { grid-template-columns: 1fr; gap: var(--space-3); }

  /* Tudo centrado no celular (01/10/2026, ver o fim do theme.css). */
  .svc-team__index a { justify-content: center; }
  .svc-panel__lead { margin-inline: auto; }
  .svc-panel__tags { justify-content: center; }
  .svc-tag--linked { align-items: center; }
  .svc-panel__cta { justify-content: center; gap: var(--sv-s2); }
  .svc-process__title { margin-inline: auto; }
  .svc-step { align-items: center; }
  /* A seta da entrega deixa de ser marcador na margem — com o texto
     centrado ela ficaria sozinha na borda, longe da frase — e vira glifo
     na linha, antes da primeira palavra. Mesma seta, mesma cor (máscara
     sobre o fundo do token, sem cor no SVG). */
  .svc-role__does li { padding-left: 0; }
  .svc-role__does li::after { content: none; }
  .svc-role__does li::before {
    position: static;
    display: inline-block;
    width: 16px;
    height: 10px;
    margin-right: var(--space-2);
    vertical-align: 0.02em;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M0 5h14M10 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  /* TRED-140 (10/10/2026): o time e o processo em FILAS LATERAIS — o
     utilitário `.swipe-row` do theme.css; aqui só o que é desta página.
     Empilhadas, as nove funções eram 3,6 telas e os quatro passos 1,1. A
     fila sangra pela margem da seção, que aqui é o `--container-pad` (o
     `--sv-gutter` se reduz a ele abaixo de 1440). */
  .svc-team__list,
  .svc-process__steps {
    margin-inline: calc(-1 * var(--container-pad));
    padding-inline: var(--container-pad);
    scroll-padding-inline: var(--container-pad);
  }
  /* cartões a 86% (os de 78% quebravam as entregas em três linhas e o mais
     alto chegava a 500px); todos com a altura do mais alto e o conteúdo
     centrado na vertical — com altura própria, os curtos deixavam ~300px de
     tinta vazia entre eles e a régua. A régua está DENTRO da grade de 12
     colunas do .svc-team__inner: sem a linha inteira, cai na 1ª coluna. */
  .svc-team__list { --swipe-card: 86%; }
  .svc-team__inner > .swipe-rule { grid-column: 1 / -1; }
  /* a régua nasceu para o chão claro: o rótulo em `--text-muted` dava
     3,5:1 sobre a tinta (TRED-141) — aqui ela usa as cores do escuro */
  .svc-team .swipe-rule { color: var(--on-dark-body); }
  .svc-team .swipe-rule__bar { background: var(--on-dark-rule); }
  .svc-team .swipe-rule__bar i { background: var(--brand-accent-bright); }
  .svc-team .swipe-rule svg { color: var(--brand-accent-bright); }
  .svc-role { display: flex; flex-direction: column; justify-content: center; }
  /* o índice vira uma linha de chips rolável na faixa roxa, de borda a
     borda; o chip da função à vista (aria-current, site.js) é puxado ao
     centro da linha */
  .svc-team__index {
    margin-inline: calc(-1 * var(--container-pad));
    padding: var(--space-2) 0;
  }
  .svc-team__index ul {
    display: flex;
    gap: var(--space-1);
    overflow-x: auto;
    padding-inline: var(--container-pad);
    /* a linha corta o que passa da caixa: sem o respiro, o anel do chip
       saía com 1 ou 2 dos 4 lados (TRED-141) */
    padding-block: 6px;
    margin-block: -6px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  .svc-team__index ul::-webkit-scrollbar { display: none; }
  .svc-team__index li { flex: none; scroll-snap-align: center; }
  .svc-team__index a { padding-inline: var(--space-4); border-radius: var(--radius-pill); white-space: nowrap; }
  /* cada função é um cartão da fila: moldura de fio sobre a tinta, no
     lugar do fio de cima da lista (o primeiro deixa de ser exceção) */
  .svc-role,
  .svc-role:first-child {
    padding: var(--space-5);
    border: 1px solid var(--on-dark-rule);
    border-radius: var(--radius-lg);
  }
  .svc-role__does { margin-top: var(--space-4); }
  /* os passos: cartões na fila, sem a barra listrada entre eles; a fita
     inteira continua embaixo, com o convite na ponta */
  .svc-process__steps { display: flex; }
  .svc-step + .svc-step::before { content: none; }
  .svc-step {
    padding: var(--space-5);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--surface-card);
  }
}

/* ------------------------------------------------------------
   11. TOQUE E LEITURA NO CELULAR (skill mobile-first, 15/09/2026)
   ------------------------------------------------------------
   Medido a 375: a etiqueta-link tinha 30px, o convite do painel 36, o
   "Let's chat" da fita 31, a etiqueta do vídeo 40 — 44 é o piso do toque.
   Nos textos, o passo do processo caía a 11px e o apoio do hero a 15px:
   `max()` põe um piso sem mexer na escala fluida acima dele. As
   etiquetas ficam em 14 (rótulo, não corpo) e o "quando" do passo em 13.
   ------------------------------------------------------------ */
.svc-hero__lead { font-size: max(var(--sv-text-m), 1rem); }
.svc-step p { font-size: max(var(--sv-text-s), 1rem); }
.svc-step__when { font-size: max(var(--sv-text-s), 0.8125rem); }
.svc-panel__tags { font-size: max(var(--sv-text-s), 0.875rem); }
.svc-offer__text p, .svc-offer__qa p { font-size: max(var(--sv-text-m), 1rem); }
@media (max-width: 1060px) {
  .svc-tag__link { min-height: 44px; align-items: center; }
  .svc-panel__cta { min-height: 44px; align-items: center; }
  .svc-process__chat { min-height: 44px; }
}