/* ============================================================
   ag.FAMA — layout inspirado em andwalsh.com
   Identidade: preto & branco (Diretrizes Ag.Fama 1.1)
   Tipografia: Grift ExtraBold (headlines) / Grift Medium
   (subtítulos) / Abel Regular (textos) — fontes da marca
   ============================================================ */

@font-face {
  font-family: "Grift";
  src: url("../fonts/Grift-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/Grift-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/Grift-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Grift";
  src: url("../fonts/Grift-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Abel";
  src: url("../fonts/Abel-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg:      #F3F3F3;   /* cinza técnico claro (ref. da home) */
  --bg-alt:  #FFFFFF;   /* branco puro para blocos alternados */
  --ink:     #0A0A0A;   /* preto profundo                     */
  --ink-soft: #0A0A0A;  /* no claro, texto secundário também é preto */
  --line:    rgba(10, 10, 10, .18);
  --pad:     2.6vw;
  --header-h: 88px;     /* faixa branca do topo (mais alta)   */
  --city-h:   42px;     /* faixa preta com as cidades         */
  --gap:     1.6vw;     /* espaçamento padrão entre banners   */

  --font-display: "Grift", Georgia, serif;
  --font-body: "Abel", "Helvetica Neue", Arial, sans-serif;

  --fs-body:  clamp(16px, 1.7vw,  23px);
  --fs-big:   clamp(22px, 2.9vw,  40px);
  --fs-feed:  clamp(22px, 2.42vw, 34px);  /* escala única (~31px @1280, como a ref.) */
  --fs-huge:  clamp(38px, 6vw,    84px);
  --fs-small: clamp(12px, 1.05vw, 15px);
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  background: var(--bg);
  color: var(--ink);
  transition: background .5s ease, color .5s ease;
}

/* tema escuro (case studies dark / rodapé) */
body.theme-dark {
  --bg:      #0A0A0A;
  --bg-alt:  #161616;
  --ink:     #FFFFFF;
  --ink-soft: rgba(255, 255, 255, .62);
  --line:    rgba(255, 255, 255, .22);
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

h1, h2, h3, .display { font-family: var(--font-display); font-weight: 800; }

.sidePadded { padding-left: var(--pad); padding-right: var(--pad); }

/* ------------------------------------------------------------
   SCROLL REVEAL (aplicado via JS)
   ------------------------------------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  /* sem travar a repetição, uma animação infinita não para: ela passa a dar
     cem voltas por segundo, e é isso que pisca. As trilhas ficam de fora:
     elas andam devagar, em linha reta, e sem elas a home perde a leitura
     das marcas e dos mercados. */
  *:not(.brandTickerTrack):not(.headerMarketsTrack):not(.cityTickerTrack) {
    animation-duration: .01s !important;
    animation-iteration-count: 1 !important;
  }
}

/* ------------------------------------------------------------
   HEADER
   ------------------------------------------------------------ */
header.siteHeader {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 3vw, 60px);
  height: var(--header-h);
  padding: 0 var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

/* faixa preta com a assinatura passando — fecha a página sob o rodapé */
.cityTicker {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--city-h);
  background: #0A0A0A;
  border-top: 1px solid rgba(255, 255, 255, .12);
  overflow: hidden;
}
/* fade nas pontas em preto: o texto some no próprio fundo da faixa */
.cityTicker::before,
.cityTicker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 12%;
  pointer-events: none;
}
.cityTicker::before { left: 0;  background: linear-gradient(to right, #0A0A0A, rgba(10, 10, 10, 0)); }
.cityTicker::after  { right: 0; background: linear-gradient(to left,  #0A0A0A, rgba(10, 10, 10, 0)); }
.cityTickerTrack {
  display: inline-block;
  white-space: nowrap;
  animation: cityTicker 260s linear infinite;   /* bem devagar */
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 1.05vw, 15px);
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .42);              /* cinza discreto */
}
.cityTickerTrack span { padding-right: 16em; }   /* le a frase inteira antes de repetir */
@keyframes cityTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* lettering dos paises entre a logo e o menu — acompanha o tema:
   no claro, texto escuro sobre o fundo do header; no escuro, inverte */
.headerMarkets {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  overflow: hidden;
}
/* fade nas pontas usando o proprio fundo do header */
.headerMarkets::before,
.headerMarkets::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 14%;
  z-index: 2;
  pointer-events: none;
}
.headerMarkets::before { left: 0;  background: linear-gradient(to right, var(--bg), rgba(0, 0, 0, 0)); }
.headerMarkets::after  { right: 0; background: linear-gradient(to left,  var(--bg), rgba(0, 0, 0, 0)); }
.headerMarketsTrack {
  display: inline-block;
  white-space: nowrap;
  animation: headerMarkets 140s linear infinite;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(10px, .92vw, 13px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .5;
}
.headerMarketsTrack span { padding-right: 3.5em; }
@keyframes headerMarkets {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* seletor de idioma */
.langSwitch {
  display: flex;
  align-items: center;
  gap: .4em;
  margin-left: clamp(14px, 2vw, 32px);
  font-family: var(--font-body);
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .02em;
}
.langBtn { opacity: .4; padding: 2px 1px; }
.langBtn:hover { opacity: .8; }
.langBtn.on { opacity: 1; border-bottom: 1px solid var(--ink); }
.langSep { opacity: .3; }
.mobileLang { margin: 2vh 0 0; font-size: 20px; }

.logo { display: flex; align-items: center; }
.logo .logoImg {
  height: clamp(30px, 3.2vw, 42px);
  width: auto;
}
/* troca preto/branco conforme o tema (como a referência faz) */
.logo .inv { display: none; }
body.theme-dark .logo .noinv { display: none; }
body.theme-dark .logo .inv { display: block; }

nav.mainNav { display: flex; align-items: center; }
nav.mainNav ul { display: flex; gap: clamp(16px, 2.1vw, 34px); }

nav.mainNav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 24px);
  letter-spacing: .02em;
  position: relative;
  padding-bottom: 3px;
}
nav.mainNav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
nav.mainNav a:hover::after,
nav.mainNav a.active::after { transform: scaleX(1); }

.menuBtn {
  display: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .02em;
}

.mobileMenu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--bg);
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 3.5vh;
  padding: 0 var(--pad);
}
.mobileMenu.open { display: flex; }
.mobileMenu a {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12vw;
  line-height: 1;
}
.mobileMenu .closeBtn {
  position: absolute; top: 24px; right: var(--pad);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .02em;
}

main { padding-top: var(--header-h); }

/* ------------------------------------------------------------
   BANNERS — formato padronizado 16:9 (assets 1920×1080)
   ------------------------------------------------------------ */
.banner {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}
.banner > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
/* sem zoom: a referência mantém a imagem parada no hover do work */

/* placeholder P&B quando não há imagem */
.ph {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(130% 130% at 18% 12%, rgba(255,255,255,.16), transparent 55%),
    linear-gradient(160deg, #1C1C1C, #050505 70%);
}
.ph .phGlyph {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 9vw, 150px);
  color: rgba(255, 255, 255, .9);
  user-select: none;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.ph .phGlyph.word {
  font-size: clamp(26px, 4.2vw, 72px);
  letter-spacing: .02em;
  text-align: center;
  line-height: 1.05;
  padding: 0 6%;
}
.ph .phTag {
  position: absolute;
  bottom: 12px; right: 16px;
  font-size: var(--fs-small);
  color: rgba(255, 255, 255, .55);
  letter-spacing: .02em;
}
.ph.light {
  background:
    radial-gradient(130% 130% at 18% 12%, rgba(0,0,0,.05), transparent 55%),
    linear-gradient(160deg, #EDEDED, #D8D8D8 70%);
}
.ph.light .phGlyph { color: rgba(10, 10, 10, .85); }
.ph.light .phTag { color: rgba(10, 10, 10, .5); }

/* ------------------------------------------------------------
   HOME — hero full-bleed + splashBar + feed
   ------------------------------------------------------------ */
/* filete preto fecha o hero e separa do conteúdo */
.homeHero { padding: 0; border-bottom: 10px solid var(--ink); }

/* o hero preenche a primeira dobra inteira, abaixo do header */
.homeHero .heroBanner {
  --hero-h: max(calc(100svh - var(--header-h)), 440px);
  aspect-ratio: auto;
  height: var(--hero-h);
}

/* frentes de atuação centralizadas em duas linhas */
.splashBar {
  display: flex;
  justify-content: center;
  padding: clamp(24px, 3vw, 44px) var(--pad);
  text-align: center;
}
/* a largura é o que quebra a lista em duas linhas, como na referência */
.splashBar .splashServices {
  max-width: 36em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(21px, 2.55vw, 36px);
  letter-spacing: .02em;
  line-height: 1.9;
  text-wrap: balance;          /* duas linhas de peso parecido */
}
/* o separador é do item seguinte e viaja colado nele: a quebra
   acontece no espaço anterior, então o "·" sempre abre a linha */
.splashServices .svc { white-space: nowrap; }
.splashServices .svc:not(:first-child)::before { content: "· "; }

.heroGlass {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: linear-gradient(160deg, #161616, #030303 70%);
}
.heroGlass::before {
  content: "";
  position: absolute;
  width: 60%; height: 140%;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 48%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 52%, transparent 70%);
  animation: glassSweep 7s ease-in-out infinite;
}
@keyframes glassSweep {
  0%   { transform: translateX(-160%) skewX(-12deg); }
  55%, 100% { transform: translateX(280%) skewX(-12deg); }
}
/* hero em camadas: glass CSS (fallback) < vídeo < wordmark */
.heroBanner { display: flex; align-items: center; justify-content: center; }
.heroGlass { z-index: 1; }
.heroVideo {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;          /* o vídeo é fundo: não intercepta clique */
}
.heroVideo video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0A0A0A;
}
/* se um dia entrar embed do YouTube: 16:9 fixo, cresce até cobrir a caixa e
   o scale extra joga o título e a barra do player para fora do quadro */
.heroVideo iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.4);
  border: 0;
  width:  max(100%, calc(var(--hero-h) * 16 / 9));
  height: max(var(--hero-h), calc(100vw * 9 / 16));
}
.heroBanner .heroLogo {
  position: relative;
  z-index: 3;
  width: clamp(240px, 36vw, 620px);
  height: auto;
  filter: drop-shadow(0 4px 40px rgba(0, 0, 0, .5));
}

/* botão de som, canto inferior direito do hero */
.heroSound {
  position: absolute;
  right: clamp(14px, 1.8vw, 28px);
  bottom: clamp(14px, 1.8vw, 28px);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(34px, 3vw, 44px);
  height: clamp(34px, 3vw, 44px);
  color: #fff;
  opacity: .75;
  transition: opacity .25s ease;
}
.heroSound:hover { opacity: 1; }
.heroSound svg { width: 60%; height: 60%; }
.heroSound .waves { display: none; }          /* mudo: mostra o X */
.heroSound.on .waves { display: block; }
.heroSound.on .cross { display: none; }

.homeFeed { padding: 0 var(--pad); }

.feedItem { margin: 0 0 clamp(20px, 2.4vw, 34px); }
.feedItem .thumb { display: block; }

/* na home os banners viram faixa panorâmica (~2.1:1) via corte */
.feedItem .thumb .banner { aspect-ratio: 21 / 10; }

/* linha do primeiro case: nome à esquerda, rótulo da seção à direita */
.feedTitleRow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2em;
}
.feedLabel {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-feed);
  line-height: 1.16;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink-soft);
}
.feedLabel svg { width: .62em; height: .62em; }

/* nome do cliente ANTES da imagem */
.feedItem .feedTitle {
  display: block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-feed);
  line-height: 1.16;
  letter-spacing: -0.01em;
  padding: .5em 0 .3em;
}
.feedItem .feedTitle:hover { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }

/* ------------------------------------------------------------
   MARCAS (home) — carrossel de uma linha, fundo claro, cores originais
   ------------------------------------------------------------ */
/* colado no hero: bloco preto emendando no vídeo, logos em branco */
.brandStrip {
  padding: clamp(10px, 1.2vw, 18px) 0 clamp(20px, 2.4vw, 36px);
  background: #0A0A0A;
  color: #fff;
}
.brandStrip .stripTitle {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(15px, 1.45vw, 20px);
  letter-spacing: -0.01em;
  text-align: center;
  color: rgba(255, 255, 255, .72);
  margin-bottom: clamp(10px, 1.2vw, 18px);
}
/* trilho: a lista roda duplicada, então -50% emenda sem salto */
.brandTicker {
  position: relative;
  overflow: hidden;
}
.brandTickerTrack {
  display: flex;
  align-items: center;
  width: max-content;
  animation: brandTicker 55s linear infinite;
}
.brandTicker:hover .brandTickerTrack { animation-play-state: paused; }
@keyframes brandTicker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* as logos somem exatamente na margem dos cases: opaco até var(--pad),
   fade curto para dentro. Assim o carrossel fica simétrico com o conteúdo. */
.brandTicker::before,
.brandTicker::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: calc(var(--pad) + clamp(40px, 5vw, 80px));
  pointer-events: none;
  z-index: 1;
}
.brandTicker::before {
  left: 0;
  background: linear-gradient(to right, #0A0A0A 0, #0A0A0A var(--pad), rgba(10, 10, 10, 0) 100%);
}
.brandTicker::after {
  right: 0;
  background: linear-gradient(to left, #0A0A0A 0, #0A0A0A var(--pad), rgba(10, 10, 10, 0) 100%);
}
/* célula do tamanho da logo + padding fixo: o vão entre uma marca e outra
   fica sempre igual (largura fixa deixava o vão refém da proporção de cada logo) */
.brandCell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 0 clamp(20px, 2.4vw, 42px);
}
.brandTickerTrack img {
  max-width: clamp(110px, 11.5vw, 165px);
  max-height: calc(clamp(26px, 2.9vw, 40px) * var(--brand-scale, 1));
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);      /* logos sempre em branco no bloco preto */
  opacity: .9;
  transition: opacity .3s ease;
}
.brandTickerTrack img:hover { opacity: 1; }
.brandTickerTrack .brandName {           /* fallback tipográfico */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(13px, 1.3vw, 19px);
  letter-spacing: .02em;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   PRACTICES B2C / B2B (home)
   ------------------------------------------------------------ */
.practices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: clamp(40px, 5vw, 80px) var(--pad);
}
.practice {
  background: #0A0A0A;
  color: #fff;
  padding: clamp(30px, 3.4vw, 54px);
  border-top: 5px solid #fff;
  display: flex;
  flex-direction: column;
}
.practice h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(24px, 3vw, 42px);
  letter-spacing: .01em;
}
.practice p {
  margin-top: .7em;
  font-size: clamp(15px, 1.5vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .8);
  flex: 1;
}
.practice a {
  display: inline-block;
  margin-top: 1.4em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.15vw, 15px);
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* ------------------------------------------------------------
   BLOCO DE MERCADOS
   ------------------------------------------------------------ */
.marketsBlock {
  background: #0A0A0A;
  color: #fff;
  padding: clamp(44px, 5.5vw, 90px) var(--pad);
}
.marketsBlock h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-big);
  letter-spacing: -0.01em;
}
.marketsBlock p {
  margin-top: .7em;
  max-width: 46em;
  font-size: clamp(15px, 1.5vw, 21px);
  color: rgba(255, 255, 255, .72);
}
.marketsList {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  margin-top: 1.8em;
}
.marketsList span {
  border: 1px solid rgba(255, 255, 255, .35);
  padding: .5em 1.1em;
  font-family: var(--font-body);
  font-size: clamp(12px, 1.2vw, 16px);
  letter-spacing: .02em;
}
.marketsList span.on { border-color: #fff; background: #fff; color: #0A0A0A; }

/* ------------------------------------------------------------
   NEWS
   ------------------------------------------------------------ */
.newsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: clamp(22px, 2.6vw, 44px);
  padding: 0 var(--pad) 4vw;
}
.newsItem { display: flex; flex-direction: column; }
.newsItem .shot {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.newsItem .shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.newsItem .shot .shotPh {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(15px, 1.8vw, 24px);
  color: var(--ink-soft); text-align: center; padding: 0 8%;
}
.newsItem .outlet {
  margin-top: 1em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.newsItem h3 {
  margin-top: .35em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(17px, 1.85vw, 25px);
  line-height: 1.2;
}
.newsItem .meta { margin-top: .5em; font-size: var(--fs-small); color: var(--ink-soft); }
.newsItem .lang {
  border: 1px solid var(--line);
  padding: 1px 6px;
  margin-left: .6em;
  font-size: .85em;
  letter-spacing: .02em;
}
.newsItem a.read {
  margin-top: .8em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(12px, 1.1vw, 15px);
  letter-spacing: .02em;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* filtros da Work: segmento a esquerda, mercado em dropdown a direita */
.workFilters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(14px, 2vw, 32px);
  flex-wrap: wrap;
  padding: 0 var(--pad) clamp(18px, 2.2vw, 32px);
}
.filterSide {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
}
.marketPick {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border-bottom: 1px solid var(--line);
  padding-bottom: 3px;
}
.marketLabel {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.marketPick select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  font-family: var(--font-body);
  font-size: clamp(13px, 1.3vw, 17px);
  color: var(--ink);
  cursor: pointer;
  padding-right: 1.2em;
  /* seta desenhada no proprio fundo */
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px, 5px 5px;
  background-position: right 8px center, right 3px center;
  background-repeat: no-repeat;
}
.marketPick select:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.marketPick select option { color: #0A0A0A; background: #fff; }
.marketPick select option:disabled { color: #b7b7b7; }
.resultCount {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .45;
  white-space: nowrap;
}

/* ------------------------------------------------------------
   WORK — destaques (imagem grande) + indice (linhas compactas)
   ------------------------------------------------------------ */
.workFeatured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 2.6vw, 46px) var(--gap);
  align-items: start;
  padding: 0 var(--pad) clamp(34px, 4vw, 66px);
}
.featItem { display: block; cursor: url("../img/cursor-dot.png") 14 14, pointer; }
.featInfo { padding: .9em 0 0; }
.featName {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 28px);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.featItem:hover .featName { text-decoration: underline; text-underline-offset: 5px; }
.featDesc {
  margin-top: .45em;
  max-width: 44em;
  font-size: clamp(13px, 1.35vw, 17px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.featTags {
  margin-top: .6em;
  font-family: var(--font-body);
  font-size: clamp(10px, .95vw, 12.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .42;
}

/* rotulo da segunda zona */
.indexLabel {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin: 0 var(--pad) clamp(10px, 1.4vw, 20px);
  font-family: var(--font-body);
  font-size: clamp(11px, 1.05vw, 14px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.indexLabel::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* indice: uma linha por case */
.workIndex { padding: 0 var(--pad) clamp(40px, 5vw, 80px); }
.indexRow {
  display: grid;
  grid-template-columns: clamp(120px, 13vw, 190px) minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 40px);
  padding: clamp(12px, 1.4vw, 20px) 0;
  border-top: 1px solid var(--line);
  cursor: url("../img/cursor-dot.png") 14 14, pointer;
}
.workIndex .indexRow:last-child { border-bottom: 1px solid var(--line); }
.indexThumb { display: block; overflow: hidden; }
.indexThumb .banner { transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.indexRow:hover .indexThumb .banner { transform: scale(1.04); }
.indexBody { display: block; }
.indexName {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(16px, 1.7vw, 23px);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.indexRow:hover .indexName { text-decoration: underline; text-underline-offset: 5px; }
.indexDesc {
  display: block;
  margin-top: .3em;
  max-width: 62em;
  font-size: clamp(12.5px, 1.25vw, 16px);
  line-height: 1.4;
  color: var(--ink-soft);
}
.indexMarkets {
  font-family: var(--font-body);
  font-size: clamp(10px, .95vw, 12.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .42;
  white-space: nowrap;
  text-align: right;
}

/* ------------------------------------------------------------
   WORK — filtros + grade uniforme
   ------------------------------------------------------------ */
.submenu {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(18px, 2.6vw, 42px);
  padding: 8px var(--pad) 20px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-feed);
  letter-spacing: -0.01em;
}
.submenu a { opacity: .5; padding-bottom: 2px; }
.submenu a:hover { opacity: 1; }
.submenu a.active { opacity: 1; border-bottom: 1px solid var(--ink); }

/* na página de work os filtros ficam fixos no rodapé (referência) */
.submenu.fixedBottom {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  padding: 16px var(--pad) 18px;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

.workGrid {
  padding: 0 var(--pad) clamp(40px, 5vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  align-items: start;
}
.workItem {
  position: relative;
  display: block;
  cursor: url("../img/cursor-dot.png") 14 14, pointer;
}
.workItem.full { grid-column: 1 / -1; }

/* card: nome do cliente e subtitulo visiveis antes do clique
   (os labels verticais em hover sairam — ficavam soltos) */
.workInfo { padding: .9em 0 .2em; }
.workName {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 24px);
  letter-spacing: -0.01em;
  line-height: 1.15;
}
.workItem:hover .workName { text-decoration: underline; text-underline-offset: 5px; }
.workDesc {
  margin-top: .4em;
  max-width: 46em;
  font-size: clamp(13px, 1.3vw, 17px);
  line-height: 1.45;
  color: var(--ink-soft);
}
.workTags {
  margin-top: .55em;
  font-family: var(--font-body);
  font-size: clamp(10px, .95vw, 12.5px);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .45;
}

/* ------------------------------------------------------------
   ABERTURA DE PÁGINA (work, news)
   ------------------------------------------------------------ */
.workIntro { padding: clamp(20px, 3vw, 46px) var(--pad) clamp(24px, 3vw, 44px); }
.workTitle {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-big);
  letter-spacing: -0.015em;
  line-height: 1.05;
  max-width: 20em;
}
.workSub {
  margin-top: .7em;
  max-width: 52em;
  font-size: clamp(15px, 1.55vw, 21px);
  color: var(--ink-soft);
}

/* filtro do work: só o tipo (All · B2C · B2B) */
.submenu.fixedBottom { flex-direction: column; align-items: flex-start; gap: 8px; }
.filterRow { display: flex; flex-wrap: wrap; gap: clamp(18px, 2.4vw, 40px); }
.filterRow button {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(22px, 2.42vw, 34px);
  letter-spacing: -0.01em;
  line-height: 1.1;
  opacity: .45;
  padding-bottom: 2px;
}
.filterRow button:hover { opacity: .85; }
.filterRow button.on { opacity: 1; border-bottom: 2px solid var(--ink); }
.noResults { padding: 3vw var(--pad); color: var(--ink-soft); }

/* ------------------------------------------------------------
   CASE STUDY
   ------------------------------------------------------------ */
.caseWrap { padding: 0 var(--pad); }

/* metadados sob o título do case */
.caseMeta {
  display: flex;
  flex-wrap: wrap;
  gap: .6em 1.6em;
  margin-top: .8em;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .02em;
  color: var(--ink-soft);
}
.caseMeta span:not(:last-child)::after { content: " ·"; opacity: .5; }

/* títulos das seções internas do case */
.textBlock h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-bottom: .7em;
}

/* números em destaque */
.bignum { display: flex; flex-wrap: wrap; gap: var(--gap); margin-top: .4em; }
.bignum div {
  flex: 1;
  min-width: 200px;
  padding: 1.1em 1.3em;
  background: var(--bg-alt);
  border-top: 3px solid var(--ink);
}
.bignum b {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3.2vw, 46px);
  letter-spacing: -0.02em;
  line-height: 1;
}
.bignum span { display: block; margin-top: .4em; font-size: var(--fs-small); color: var(--ink-soft); }

blockquote {
  border-left: 3px solid var(--ink);
  padding: .2em 0 .2em 1em;
  font-size: clamp(17px, 1.9vw, 26px);
  font-style: italic;
  max-width: 40em;
}

.projectInfo { padding: 2.4vw 0 2.8vw; }
.projectInfo h1 {
  font-size: var(--fs-huge);
  letter-spacing: -0.02em;
  line-height: .95;
  margin-bottom: .3em;
}
.projectInfo .cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: 3vw; }
.projectInfo .desc { font-size: var(--fs-body); max-width: 60ch; }
.projectInfo .credits { font-size: var(--fs-small); line-height: 1.55; align-self: start; }
.projectInfo .credits dt {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: .9em;
}
.projectInfo .credits dd { color: var(--ink-soft); }

.csRow { margin-bottom: var(--gap); }
.csRow.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.csRow.two .banner { aspect-ratio: 4 / 3; }
.csRow.stack3 .banner { margin-bottom: var(--gap); }
.csRow.stack3 .banner:last-child { margin-bottom: 0; }

/* player embed (YouTube) nos cases */
.videoEmbed {
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 2px;
  overflow: hidden;
}
.videoEmbed iframe { width: 100%; height: 100%; display: block; }

.textBlock {
  font-size: var(--fs-body);
  max-width: 82ch;
  padding: 1.6vw 0 2vw;
}

.nextPrev {
  display: flex;
  justify-content: space-between;
  padding: 2vw 0 2.6vw;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.9vw, 26px);
}
.nextPrev a:hover { text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------
   INFO — blocos alternados
   ------------------------------------------------------------ */
.block { padding: 3vw var(--pad) 3.4vw; }
.block.alt { background: var(--bg-alt); }

.blockLabel {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  margin-bottom: 1.2em;
}

.bigText {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 32px);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 30em;
}

/* ------------------------------------------------------------
   ABOUT — abertura (os dois parágrafos do briefing)
   ------------------------------------------------------------ */
.aboutIntro {
  text-align: center;
  padding: clamp(32px, 4.5vw, 90px) var(--pad) clamp(36px, 4.5vw, 80px);
}
.aboutOpen {
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(25px, 3.2vw, 48px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 18em;
  text-wrap: balance;
}
.aboutLead {
  margin: clamp(20px, 2.2vw, 34px) auto 0;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 40em;
  text-wrap: pretty;
}

/* foto única, de ponta a ponta: panorâmica no desktop, mais alta no mobile
   (uma foto horizontal esmagada em 21:9 fica ilegível em tela estreita) */
/* foto do time: retrato do grupo, centralizado, sem virar banner de tela cheia */
.aboutShot { margin: 0 auto; max-width: 1150px; padding: 0 var(--pad); }
/* foto do time: 3:2, a proporcao original da foto, para nao cortar ninguem */
.aboutShot .banner { aspect-ratio: 3 / 2; }

/* ------------------------------------------------------------
   LINHA DO TEMPO (about) — eixo central, anos alternando os lados
   ------------------------------------------------------------ */
.timelineBlock { padding-bottom: 5vw; }

.timeline {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0;
  counter-reset: none;
}
/* o eixo */
.timeline::before {
  content: "";
  position: absolute;
  top: .6em;
  bottom: .6em;
  left: 50%;
  width: 1px;
  background: var(--line);
  transform: translateX(-.5px);
}

.tlItem {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(28px, 3.6vw, 64px);
  margin-bottom: clamp(38px, 4.6vw, 76px);
}
.tlItem:last-child { margin-bottom: 0; }
.tlItem.left  { justify-content: flex-start; }
.tlItem.right { justify-content: flex-end; }

.tlCard { width: calc(50% - clamp(28px, 3.6vw, 64px)); }
.tlItem.left .tlCard { text-align: right; order: 1; }
.tlItem.right .tlCard { order: 2; }

/* a foto do ano fica sempre na metade oposta ao texto */
.tlFoto {
  width: calc(50% - clamp(28px, 3.6vw, 64px));
  margin: 0;
  overflow: hidden;
  background: var(--bg-alt);
}
.tlItem.left .tlFoto { order: 2; }
.tlItem.right .tlFoto { order: 1; }
.tlFoto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.tlFoto:hover img { transform: scale(1.03); }

/* o ponto no eixo, alinhado com a linha do ano */
.tlDot {
  position: absolute;
  left: 50%;
  top: .55em;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: var(--ink);
}

.tlYear {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.tlLead {
  margin-top: .7em;
  font-weight: 700;
  font-size: clamp(15px, 1.35vw, 19px);
  line-height: 1.45;
}
.tlText {
  margin-top: .6em;
  font-size: clamp(13px, 1.15vw, 16px);
  line-height: 1.55;
  color: var(--ink-soft);
}

.servicesList {
  columns: 4;
  gap: 3vw;
  font-size: clamp(15px, 1.45vw, 20px);
  line-height: 1.75;
}

.socialGrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: 2vw; }
.socialCard .banner { margin-bottom: 1em; }
.socialCard h3 { font-size: clamp(18px, 1.9vw, 26px); margin-bottom: .4em; }
.socialCard p { font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-soft); }
.socialCard .more { display: inline-block; margin-top: .7em; text-decoration: underline; text-underline-offset: 4px; font-size: clamp(13px, 1.2vw, 16px); letter-spacing: .02em; }

/* carrosséis */
.carousel { position: relative; }
.carouselTrack {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carouselTrack::-webkit-scrollbar { display: none; }
.carouselTrack > * { scroll-snap-align: start; flex: 0 0 auto; }

.shopCard { width: clamp(180px, 21vw, 290px); }
.shopCard .banner { aspect-ratio: 1; margin-bottom: .7em; }
.shopCard .name { font-family: var(--font-display); font-weight: 500; font-size: clamp(14px, 1.35vw, 19px); }
.shopCard .price { font-size: var(--fs-small); color: var(--ink-soft); }

.artCard { width: clamp(250px, 28vw, 400px); font-size: clamp(14px, 1.3vw, 17px); }
.artCard .banner { margin-bottom: .9em; }
.artCard h3 { font-size: clamp(16px, 1.7vw, 24px); margin-bottom: .4em; }
.artCard p { color: var(--ink-soft); }
.artCard .more { display: inline-block; margin-top: .6em; text-decoration: underline; text-underline-offset: 4px; letter-spacing: .02em; font-size: clamp(12px, 1.1vw, 15px); }

.carouselNav {
  display: flex;
  gap: 1.5em;
  margin-top: 1.2vw;
  font-size: clamp(13px, 1.2vw, 16px);
  letter-spacing: .02em;
}
.carouselNav button { opacity: .6; }
.carouselNav button:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }

/* pessoas (board e time) */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: 2vw;
}
.person .ph2 {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: linear-gradient(160deg, #1C1C1C, #050505 70%);
  display: flex; align-items: center; justify-content: center;
}
.person .ph2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.person .ph2 .initials {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 44px);
  color: rgba(255, 255, 255, .55);
}
.person .ph2.empty { background: var(--bg-alt); }
.person .ph2.empty .initials { color: var(--ink-soft); opacity: .35; }
.person b { display: block; margin-top: .8em; font-family: var(--font-display); font-weight: 800; font-size: clamp(16px, 1.7vw, 22px); }
.person .role {
  display: block; margin-top: .2em;
  font-size: var(--fs-small); letter-spacing: .02em; color: var(--ink-soft);
}
.person .bio { margin-top: .6em; font-size: clamp(13px, 1.3vw, 17px); color: var(--ink-soft); line-height: 1.5; }
.aboutSecond { margin-top: .8em; font-size: clamp(16px, 1.75vw, 24px); }
.teamGridPh { opacity: .9; }

.teamGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5vw; margin-top: 2vw; }
.teamCard h3 { font-size: clamp(18px, 1.9vw, 26px); margin-bottom: .15em; }
.teamCard .role {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-bottom: .7em;
}
.teamCard p { font-size: clamp(14px, 1.35vw, 18px); color: var(--ink-soft); }

.values p {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.8vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  max-width: 26em;
}
.values .amp {
  font-weight: 400;
  font-style: italic;
  text-transform: lowercase;
  padding: 0 .12em;
  color: var(--ink-soft);
}

/* "F" tipográfico flutuante que gira com o scroll */
.ampFloat {
  position: fixed;
  right: 3vw;
  top: 50%;
  translate: 0 -50%;
  z-index: 5;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(70px, 9vw, 140px);
  line-height: 1;
  pointer-events: none;
  opacity: .12;
  will-change: transform;
}

/* ------------------------------------------------------------
   CONTACT
   ------------------------------------------------------------ */
.contactTop { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); padding-bottom: 2.6vw; }
.contactTop .label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-small);
  letter-spacing: .02em;
  color: var(--ink-soft);
  margin-bottom: .5em;
}
.contactTop a { font-size: clamp(14px, 1.35vw, 19px); text-decoration: underline; text-underline-offset: 4px; }

/* faixa da Estaiada: mais baixa que um banner comum */
.mapBlock { position: relative; aspect-ratio: 3 / 1; overflow: hidden; margin-bottom: 2vw; background: #111; }
.mapBlock > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.locationLine {
  font-size: var(--fs-huge);
  letter-spacing: -0.02em;
  line-height: .98;
  margin-bottom: 2.4vw;
}

.hiringText { max-width: 58ch; font-size: var(--fs-body); padding-bottom: 2vw; }
.hiringText a { text-decoration: underline; text-underline-offset: 4px; }

.faq h2 { font-size: var(--fs-big); margin-bottom: .8em; }
.faqItem { border-top: 1px solid var(--line); }
.faqItem:last-child { border-bottom: 1px solid var(--line); }
.faqItem button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .75em 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.7vw, 23px);
  text-align: left;
}
.faqItem .sign { font-weight: 400; font-size: 1.2em; transition: transform .3s ease; }
.faqItem.open .sign { transform: rotate(45deg); }
.faqItem .answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease;
  font-size: clamp(14px, 1.35vw, 19px);
  color: var(--ink-soft);
  max-width: 60ch;
}
.faqItem.open .answer { max-height: 300px; padding-bottom: 1.3em; }

.moreQ { padding-top: 2vw; font-size: var(--fs-body); }
.moreQ a { text-decoration: underline; text-underline-offset: 4px; }

/* ------------------------------------------------------------
   ARTICLES — masonry
   ------------------------------------------------------------ */
.mason { display: flex; gap: var(--gap); padding: 0 var(--pad); }
.masonCol { flex: 1; display: flex; flex-direction: column; gap: 2vw; }
.masonItem { font-size: clamp(14px, 1.3vw, 17px); }
.masonItem .banner { margin-bottom: .9em; }
.masonItem h3 { font-size: clamp(17px, 1.8vw, 25px); margin-bottom: .4em; }
.masonItem p { color: var(--ink-soft); }
.masonItem .more { display: inline-block; margin-top: .55em; text-decoration: underline; text-underline-offset: 4px; letter-spacing: .02em; font-size: clamp(12px, 1.1vw, 15px); }

/* ------------------------------------------------------------
   FOOTER — bloco preto
   ------------------------------------------------------------ */
footer.siteFooter {
  margin-top: 0;                 /* emenda direto no bloco escuro acima */
  background: #0A0A0A;
  color: #FFF;
}

/* rodapé centralizado e discreto */
.footerInner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(13px, 1.5vw, 20px);
  padding: clamp(38px, 4.4vw, 74px) var(--pad) clamp(20px, 2.4vw, 34px);
}
.footerLogo {
  width: clamp(104px, 10vw, 158px);
  height: auto;
  opacity: .9;
}

/* logo aplicado em linha, no lugar do nome escrito */
.inlineLogo {
  height: .92em;
  width: auto;
  display: inline-block;
  vertical-align: -0.08em;
}
.footerAbout {
  max-width: 46em;
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .58);
}
.footerLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(18px, 2vw, 32px);
  margin-top: .2em;
  font-size: clamp(10px, .95vw, 12px);
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .72);
}
.footerLinks a { text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid rgba(255, 255, 255, .28); }
.footerLinks a:hover { color: #fff; border-bottom-color: #fff; }


/* marquee (não usado no rodapé atual) */
.marquee {
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding: 12px 0;
  white-space: nowrap;
}
.marquee .marqueeTrack {
  display: inline-block;
  animation: marquee 80s linear infinite;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.6vw, 22px);
  letter-spacing: .06em;
}
.marquee .marqueeTrack span { padding-right: 2.2em; }
.marquee .marqueeTrack .ag { font-weight: 400; font-style: italic; text-transform: lowercase; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   RESPONSIVO
   ------------------------------------------------------------ */
@media (max-width: 760px) {
  :root { --pad: 5vw; --header-h: 62px; --city-h: 38px; --gap: 3.5vw; }

  header.siteHeader { grid-template-columns: auto minmax(0, 1fr) auto; }
  /* filtros: segmento rolavel em cima, mercado e contagem embaixo */
  .workFilters { flex-direction: column; align-items: stretch; gap: 12px; }
  .workFeatured { grid-template-columns: 1fr; }
  .indexRow { grid-template-columns: clamp(88px, 26vw, 120px) minmax(0, 1fr); }
  .indexMarkets { grid-column: 2; text-align: left; white-space: normal; margin-top: .3em; }
  .filterRow {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .filterRow::-webkit-scrollbar { display: none; }
  .filterRow button { white-space: nowrap; flex: 0 0 auto; }
  .filterSide { justify-content: space-between; }

  .headerMarkets { display: flex; }
  .headerMarketsTrack { font-size: 9px; letter-spacing: .12em; }
  .headerMarketsTrack span { padding-right: 2.4em; }
  .headerMarkets::before,
  .headerMarkets::after { width: 18%; }
  .cityTickerTrack { font-size: 11px; letter-spacing: .08em; }
  .cityTickerTrack span { padding-right: 9em; }

  /* carrossel de marcas: no mobile as logos ficavam minusculas (22px) */
  .brandTickerTrack img {
    max-width: clamp(120px, 36vw, 160px);
    max-height: calc(clamp(34px, 9vw, 46px) * var(--brand-scale, 1));
  }
  .brandCell { padding: 0 clamp(18px, 5vw, 30px); }
  .brandTicker::before,
  .brandTicker::after { width: calc(var(--pad) + 20px); }
  .practices { grid-template-columns: 1fr; }
  .newsGrid { grid-template-columns: 1fr; }

  /* hero mais baixo no mobile; splashBar quebra linha sem cortar texto */
  /* quase a tela toda: sobra só a faixa de marcas espiando embaixo */
  .homeHero .heroBanner { --hero-h: max(calc(100svh - var(--header-h) - 96px), 380px); }
  .heroBanner .heroLogo { width: min(72vw, 340px); }
  /* no mobile a linha corrida fica pobre: vira lista, uma frente por linha */
  .splashBar { padding: 30px var(--pad); }
  .splashBar .splashServices {
    font-size: 19px;
    line-height: 1.75;
    max-width: none;
  }
  .splashServices .svc { display: block; }
  .splashServices .svc:not(:first-child)::before { content: none; }
  .feedItem .feedTitle, .feedLabel { font-size: 20px; }
  nav.mainNav a { font-size: 18px; }
  .submenu { font-size: 18px; gap: 16px; }

  nav.mainNav { display: none; }
  .menuBtn { display: block; }

  .aboutShot .banner { aspect-ratio: 3 / 2; }

  /* timeline vira coluna única com o eixo à esquerda */
  .timeline::before { left: 5px; }
  .tlItem, .tlItem.right { justify-content: flex-start; }
  .tlItem { flex-wrap: wrap; gap: 18px; }
  .tlCard, .tlItem.left .tlCard { width: 100%; padding-left: 28px; text-align: left; order: 1; }
  .tlItem.right .tlCard { order: 1; }
  .tlFoto, .tlItem.left .tlFoto, .tlItem.right .tlFoto { width: calc(100% - 28px); margin-left: 28px; order: 2; }
  .tlDot { left: 0; margin-left: 0; }

  .workGrid { grid-template-columns: 1fr; }
  .projectInfo .cols { grid-template-columns: 1fr; }
  .servicesList { columns: 2; }
  .socialGrid { grid-template-columns: 1fr; }
  .contactTop { grid-template-columns: 1fr 1fr; gap: 5vw 4vw; }
  .teamGrid { grid-template-columns: 1fr; gap: 6vw; }
  .mason { flex-direction: column; }
  .masonCol { gap: 5vw; }
  .footerLinks { flex-wrap: wrap; justify-content: center; }
  .ampFloat { display: none; }
}

/* ============================================================
   FECHAMENTO DA PÁGINA DE CASE
   resultado em destaque · etiquetas · duas ações grandes
   ============================================================ */

/* o resultado é a última palavra do case: entra em corpo maior */
.textBlock.resultBlock {
  max-width: none;
  border-top: 1px solid var(--line);
  padding-top: 1.8vw;
}
.textBlock.resultBlock p {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-big);
  line-height: 1.15;
  letter-spacing: -0.01em;
  max-width: 26em;   /* medida em em: ch na Abel condensada dava uma coluna de 220px */
}

/* etiquetas do case */
.caseTags {
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  padding: 2.6vw 0 0;
  margin-top: 1vw;
  border-top: 1px solid var(--line);
}
.caseTags span {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.02vw, 14px);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: .72em 1.05em .62em;
  border: 1px solid var(--line);
  border-radius: 100px;
  white-space: nowrap;
  transition: border-color .25s, color .25s;
}
.caseTags:hover span { border-color: var(--line); }

/* duas ações finais */
.caseActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  padding: 2.8vw 0 5vw;
}
.caseBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4em;
  min-height: clamp(66px, 7vw, 104px);
  padding: 0 clamp(18px, 2.1vw, 36px);
  border: 1px solid var(--ink);
  border-radius: 2px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(14px, 1.5vw, 21px);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background .28s ease, color .28s ease;
}
.caseBtn .seta {
  font-family: var(--font-body);
  font-size: 1.15em;
  line-height: 1;
  transition: transform .28s ease;
}
.caseBtn:hover { background: var(--ink); color: var(--bg); }
.caseBtn:hover .seta { transform: translateX(-6px); }
.caseBtn.primary { background: var(--ink); color: var(--bg); }
.caseBtn.primary:hover { background: transparent; color: var(--ink); }
.caseBtn.primary:hover .seta { transform: translateX(6px); }

@media (max-width: 780px) {
  .textBlock.resultBlock { max-width: none; }
  .textBlock.resultBlock p { max-width: none; }
  .caseActions { grid-template-columns: 1fr; padding-bottom: 9vw; }
  .caseBtn { min-height: 62px; font-size: 15px; }
  .caseTags { padding-top: 7vw; }
}

/* ============================================================
   ABOUT — pessoas, liderança e core team
   ============================================================ */

.leadShot { margin-bottom: 1.2vw; }
.leadShot .banner { aspect-ratio: 4 / 5; }
.leadName {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 38px);
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.leadRole {
  font-size: var(--fs-small);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: .5em 0 .9em;
}
.leadBio { font-size: clamp(15px, 1.32vw, 19px); line-height: 1.5; max-width: 58ch; }

/* ============================================================
   NEWS — lista com colunas
   ============================================================ */
.newsList { padding: 0 var(--pad) 5vw; }

/* cada ano abre com uma régua e o número grande */
.newsAno {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 1.4vw, 24px);
  border-top: 1px solid var(--line);
  padding-top: clamp(12px, 1.2vw, 20px);
  margin: clamp(34px, 3.6vw, 66px) 0 clamp(18px, 1.9vw, 32px);
}
.newsAno:first-child { margin-top: 0; }
.newsAno b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3vw, 46px);
  line-height: 1;
}
.newsAno span {
  font-size: var(--fs-small);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.newsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 2.8vw, 52px) var(--gap);
}
.newsCard {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* o lugar da foto da matéria é do logo do veículo */
.newsSelo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  overflow: hidden;
}
.newsSelo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.newsCard:hover .newsSelo img { transform: scale(1.045); }


.newsInfo {
  display: flex;
  gap: 1em;
  margin-top: clamp(12px, 1.2vw, 20px);
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.newsChamada {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(18px, 1.5vw, 25px);
  line-height: 1.18;
  margin: .45em 0 0;
}
.newsIr {
  margin-top: auto;
  padding-top: clamp(12px, 1.2vw, 20px);
  font-size: clamp(10px, .82vw, 12px);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.newsCard:hover .newsIr { text-decoration: underline; text-underline-offset: 5px; }


/* a mais recente ocupa duas colunas e já nasce em preto */
.newsCard.destaque { grid-column: span 2; }
.newsCard.destaque .newsSelo { aspect-ratio: 16 / 9; }
.newsCard.destaque .newsChamada { font-size: clamp(23px, 2.2vw, 36px); max-width: 24ch; }

@media (max-width: 1040px) {
  .newsGrid { grid-template-columns: repeat(2, 1fr); }
  .newsCard.destaque { grid-column: span 2; }
}
@media (max-width: 620px) {
  .newsGrid { grid-template-columns: 1fr; gap: 11vw 0; }
  .newsCard.destaque { grid-column: span 1; }
  .newsCard.destaque .newsSelo { aspect-ratio: 4 / 3; }
}


.newsSoon { padding: 0 var(--pad) 6vw; color: var(--ink-soft); }

/* ============================================================
   CONTACT — abertura e ação
   ============================================================ */
.contactTitle {
  font-size: var(--fs-huge);
  letter-spacing: -0.02em;
  line-height: .98;
  margin-bottom: .35em;
}
.contactIntro {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.55;
  max-width: 38em;
  margin-bottom: 3vw;
}
.contactTop span { font-size: clamp(14px, 1.35vw, 19px); line-height: 1.5; display: block; }
.contactBtn {
  display: inline-flex;
  width: max-content;
  min-width: min(420px, 100%);
  margin-bottom: 3.4vw;
  justify-content: center;
}

@media (max-width: 780px) {

  .contactBtn { width: 100%; min-width: 0; }
  .contactTop { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   ABOUT — fotos das pessoas (slot reservado enquanto não chegam)
   ============================================================ */
.photoSlot {
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--bg-alt);
}
.photoSlot.vazio {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: transparent;
}
.photoSlot.vazio span {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink);
  opacity: .16;
}

/* liderança */
.leadShot.vazio span { font-size: clamp(34px, 3.4vw, 52px); }
.leadShot .banner { aspect-ratio: 4 / 5; }

/* core team */
.coreGrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.2vw var(--gap);
}
.coreCard { min-width: 0; }
.coreShot { aspect-ratio: 4 / 5; margin-bottom: .9em; }
.coreShot.vazio span { font-size: clamp(22px, 2.2vw, 34px); }
.coreShot .banner { aspect-ratio: 4 / 5; }
.coreName {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.45vw, 21px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.coreRole {
  margin-top: .35em;
  font-size: clamp(11px, 1vw, 13px);
  line-height: 1.35;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

@media (max-width: 980px) {
  .coreGrid { grid-template-columns: repeat(3, 1fr); gap: 5vw 3vw; }
}
@media (max-width: 780px) {
  .coreGrid { grid-template-columns: repeat(2, 1fr); gap: 7vw 4vw; }
}


/* ============================================================
   ABOUT — capítulos: label à esquerda, frase à direita
   ============================================================ */
.aboutSection {
  padding: clamp(48px, 6vw, 104px) var(--pad);
  border-top: 1px solid var(--line);
}
.aboutSection:last-of-type { padding-bottom: clamp(64px, 7vw, 120px); }
/* a foto full-bleed já separa a abertura do primeiro capítulo */
.aboutShot + .aboutSection { border-top: 0; }

.chapter {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(0, 3.2fr);
  gap: var(--gap);
  align-items: start;
  margin-bottom: clamp(34px, 3.6vw, 64px);
}
.aboutSection > .chapter:last-child { margin-bottom: 0; }

.chapterLabel {
  padding-top: .45em;
  font-family: var(--font-body);
  font-size: clamp(11px, 1.02vw, 13px);
  line-height: 1.3;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.chapterStatement {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(21px, 2.5vw, 38px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  max-width: 21em;
  text-wrap: pretty;
}
.chapterNote {
  margin-top: 1.1em;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-soft);
  max-width: 38em;
}

/* liderança: os dois sócios lado a lado, cada um centralizado na sua metade */
.leadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 520px));
  justify-content: center;
  gap: var(--gap);
}
.leadCard {
  text-align: center;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 1.6vw, 30px);
}
.leadShot {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: none;
  margin: 0 0 clamp(16px, 1.4vw, 26px);
}
.leadRole { letter-spacing: .1em; }
.leadBio { margin: .7em auto 0; max-width: 44ch; text-wrap: pretty; }

@media (max-width: 620px) {
  .chapter { grid-template-columns: 1fr; gap: 12px; margin-bottom: 34px; }
  .chapterLabel { padding-top: 0; }

  /* liderança: foto ao lado do nome, bio embaixo */
  .leadGrid { grid-template-columns: 1fr; gap: 8vw; justify-content: stretch; }
  .leadCard {
    text-align: left;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 4px 16px;
    align-items: center;
  }
  .leadShot { grid-row: 1 / span 2; align-self: start; max-width: none; margin-bottom: 0; }
  .leadBio { grid-column: 1 / -1; margin-top: 14px; max-width: none; }

  /* core team: vira lista, cada pessoa em uma linha */
  .coreGrid { grid-template-columns: 1fr; gap: 0; }
  .coreCard {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    align-items: center;
    gap: 0 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--line);
  }
  .coreCard:first-child { border-top: 1px solid var(--line); }
  .coreShot { margin-bottom: 0; grid-row: 1 / span 2; align-self: center; }
  .coreName { font-size: 19px; }
  .coreRole { font-size: 11px; letter-spacing: .07em; }
}

@media (max-width: 620px) {
  .mapBlock { aspect-ratio: 5 / 2; }
}

/* ============================================================
/* ============================================================
   CAIXA ALTA — só o menu. As frentes de atuação e os nomes dos
   clientes voltaram para caixa mista a pedido do Alex.
   ============================================================ */
nav.mainNav a,
.menuBtn,
.mobileMenu a,
.mobileMenu .closeBtn { text-transform: uppercase; letter-spacing: .06em; }

/* ============================================================
   TRABALHOS REALIZADOS (case) — cada frente com título,
   explicação e a mídia correspondente
   ============================================================ */
.caseWorks {
  padding: 3vw 0 1vw;
  border-top: 1px solid var(--line);
}
.worksLabel {
  font-family: var(--font-body);
  font-size: clamp(11px, 1.02vw, 13px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: clamp(24px, 2.6vw, 44px);
}
.workItem { padding: clamp(26px, 3vw, 52px) 0; }
.workItem:not(.lado) .midia { margin-top: clamp(22px, 2.4vw, 40px); }

/* no celular a imagem entra logo depois do título, antes do texto */
@media (max-width: 780px) {
  .workItem:not(.lado) {
    grid-template-columns: minmax(0, 1fr);
    display: grid;
    grid-template-areas:
      "titulo"
      "midia"
      "texto";
  }
  .workItem:not(.lado) .workTitulo { grid-area: titulo; }
  .workItem:not(.lado) .workTexto  { grid-area: texto; }
  .workItem:not(.lado) .midia {
    grid-area: midia;
    margin: 4px 0 clamp(14px, 3vw, 22px);
  }
}
.workItem + .workItem { border-top: 1px solid var(--line); }
.workTitulo, .workTexto { max-width: 66ch; }
.workTitulo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.15;
  letter-spacing: -0.012em;
  margin-bottom: .45em;
}
.workTexto {
  font-size: clamp(15px, 1.42vw, 20px);
  line-height: 1.5;
  color: var(--ink-soft);
}

/* galeria vertical: as fotos de campo entram todas em 9:16 */
.workGallery { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: var(--gap); }
.workGallery img {
  width: 100%;
  aspect-ratio: var(--ar, 9 / 16);
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-alt);
}

/* grade horizontal: peças de campanha em 16:9 */
.workGrid { display: grid; grid-template-columns: repeat(var(--cols, 2), 1fr); gap: var(--gap); }
.workGrid img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-alt);
}

/* carrossel dos posts do Instagram */
.igRow {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(288px, 1fr);
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.igRow > * { scroll-snap-align: start; min-width: 0; }
.igRow .instagram-media { margin: 0 !important; min-width: 0 !important; }

@media (max-width: 780px) {
  .workGallery { grid-template-columns: repeat(2, 1fr); }
  .workGrid { grid-template-columns: 1fr; }
  .igRow { grid-auto-columns: 86%; }
}

/* ---------- carrossel de fotos e faixas de áudio nos trabalhos ---------- */
.carrossel {
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: thin;
}
.carrossel img {
  flex: 0 0 58%;
  aspect-ratio: var(--ar, 16 / 9);
  object-fit: cover;
  border-radius: 2px;
  background: var(--bg-alt);
  scroll-snap-align: start;
}

.faixas { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.faixa {
  margin: 0;
  padding: clamp(18px, 1.8vw, 28px);
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--bg-alt);
}
.faixa figcaption {
  font-size: clamp(11px, 1.02vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .9em;
}
.faixa audio { width: 100%; }

@media (max-width: 780px) {
  .carrossel img { flex-basis: 86%; }
  .faixas { grid-template-columns: 1fr; }
}

/* ---------- frente com texto de um lado e slides do outro ---------- */
.workItem.lado {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "titulo midia"
    "texto  midia";
  grid-template-rows: auto auto;
  align-content: center;
  gap: 10px clamp(26px, 3.2vw, 60px);
}
.workItem.lado .workTitulo { grid-area: titulo; align-self: end; }
.workItem.lado .workTexto  { grid-area: texto; align-self: start; }
.workItem.lado .midia      { grid-area: midia; align-self: center; }

/* a foto troca de lado a cada frente */
.workItem.lado:nth-of-type(even) {
  grid-template-areas:
    "midia titulo"
    "midia texto";
}
.workItem.lado .workTitulo,
.workItem.lado .workTexto { max-width: 46ch; }

.slides { position: relative; }
.slides .palco {
  position: relative;
  aspect-ratio: var(--ar, 16 / 9);
  border-radius: 2px;
  overflow: hidden;
  background: var(--bg-alt);
}
.slides .palco img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;   /* só a foto visível recebe o clique */
  transition: opacity .45s ease;
}
.slides .palco img.on { opacity: 1; pointer-events: auto; }

.passos {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 14px;
}
.passo {
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1;
  color: var(--ink);
  transition: background .25s, color .25s;
}
.passo:hover { background: var(--ink); color: var(--bg); }
.conta {
  font-size: clamp(11px, 1.02vw, 13px);
  letter-spacing: .12em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 780px) {
  /* título, foto e o texto embaixo */
  .workItem.lado,
  .workItem.lado:nth-of-type(even) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "midia"
      "texto";
    gap: 16px;
  }
  .workItem.lado .workTitulo,
  .workItem.lado .workTexto { max-width: none; }
}

/* ---------- monitor largo: o conteúdo do case para de esticar ---------- */
:root { --caseMax: 1520px; }
.caseWrap > *:not(.csRow) {
  width: 100%;
  max-width: var(--caseMax);
  margin-inline: auto;
}

/* o mesmo limite nas outras páginas: em telas largas o conteúdo para de esticar */
.aboutSection > *,
.aboutIntro > *,
.workIntro > *,
.workFilters,
.workFeatured,
.indexLabel,
.workIndex,
.newsList,
.newsSoon,
.block > .contactTop,
.block > .faq,
.faq > * {
  max-width: var(--caseMax);
  margin-inline: auto;
}
.workFilters { width: 100%; }

/* ---------- lightbox ---------- */
.caseWorks img, .csRow img, .aboutShot img, .mapBlock img { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vw, 28px);
  padding: clamp(16px, 4vw, 56px);
  background: rgba(10, 10, 10, .92);
  backdrop-filter: blur(2px);
}
.lightbox.on { display: flex; }

.lbPalco { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lbPalco img {
  max-width: min(1400px, 88vw);
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 2px;
  cursor: zoom-out;
}
.lbConta {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .7);
  font-variant-numeric: tabular-nums;
}

.lbNav, .lbFechar {
  width: 48px;
  height: 48px;
  flex: none;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-body);
  font-size: 20px;
  line-height: 1;
  background: transparent;
  transition: background .25s, border-color .25s;
}
.lbNav:hover, .lbFechar:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.lbFechar { position: absolute; top: clamp(14px, 2.4vw, 30px); right: clamp(14px, 2.4vw, 30px); }
.lightbox.solo .lbNav { display: none; }

@media (max-width: 780px) {
  .lightbox { padding: 12px; gap: 6px; }
  .lbNav, .lbFechar { width: 40px; height: 40px; font-size: 17px; }
  .lbPalco img { max-width: 96vw; max-height: 74vh; }
}

/* --- painel de numeros de midia dentro dos trabalhos --------------- */
.workNums {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 2.6vw, 46px);
}
.workNums .num { margin: 0; }
.workNums strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 82px);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.workNums span {
  display: block;
  margin-top: .7em;
  font-size: clamp(11px, 1.02vw, 13px);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* --- contexto com a foto ao lado, igual às frentes dos trabalhos --- */
.textBlock.lado {
  max-width: var(--caseMax);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 45%) minmax(0, 1fr);
  grid-template-areas:
    "titulo midia"
    "texto  midia"
    ".      midia";
  grid-template-rows: auto auto 1fr;
  align-content: start;
  gap: 8px clamp(26px, 3.2vw, 60px);
}
.textBlock.lado > h3 { grid-area: titulo; align-self: start; }
.textBlock.lado > p  { grid-area: texto; align-self: start; }
.textBlock.lado .tbMidia { grid-area: midia; align-self: center; }
.tbMidia .banner { aspect-ratio: var(--ar, 16 / 9); }

@media (max-width: 780px) {
  .textBlock.lado {
    grid-template-columns: 1fr;
    grid-template-areas:
      "titulo"
      "midia"
      "texto";
    grid-template-rows: auto auto auto;
    gap: 14px;
  }
}

/* filme hospedado no próprio site */
.videoEmbed video { width: 100%; height: 100%; display: block; object-fit: cover; }

/* --- slider de vídeos: capa do YouTube que vira player no clique --- */
.vidSlider { position: relative; }
.vidSlider, .vidTrilho { min-width: 0; }
.vidCard.estatico { cursor: zoom-in; }
.vidCard.estatico .vidCapa { aspect-ratio: var(--ar, 16 / 9); background: var(--bg-alt); }
.vidCard.estatico img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.vidCard.estatico:hover img { transform: scale(1.04); }
.vidTrilho {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.vidCard {
  flex: 0 0 clamp(230px, 30%, 380px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.vidCapa {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.vidCapa img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1), opacity .4s ease;
}
.vidPlay {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  transition: transform .35s ease;
}
.vidPlay::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-left: 15px solid var(--ink);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  transform: translateX(2px);
}
.vidCard:hover .vidCapa img { transform: scale(1.05); opacity: .82; }
.vidCard:hover .vidPlay { transform: scale(1.09); }
.vidNome {
  font-size: clamp(12px, 1.05vw, 15px);
  line-height: 1.35;
  color: var(--ink-soft);
}
.vidCard.tocando { cursor: default; }
.vidNav { display: flex; gap: 10px; margin-top: 16px; }
.vidSeta {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.vidSeta:hover { background: var(--ink); color: var(--bg); }

@media (max-width: 780px) {
  .vidCard { flex-basis: 78%; }
}

/* --- rolagem lateral: fade na borda mostrando que tem mais imagem --- */
.workGallery, .workGrid, .vidTrilho, .carrossel { scrollbar-width: none; }
.workGallery::-webkit-scrollbar,
.workGrid::-webkit-scrollbar,
.vidTrilho::-webkit-scrollbar,
.carrossel::-webkit-scrollbar { height: 0; display: none; }

.fadeIni {
  -webkit-mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0 86%, transparent 100%);
}
.fadeMeio {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 86%, transparent 100%);
}
.fadeFim {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 10%);
  mask-image: linear-gradient(to right, transparent 0, #000 10%);
}

@media (max-width: 780px) {
  /* empilhar seis peças no celular é rolagem demais: vira carrossel */
  .workGallery, .workGrid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .workGallery img, .workGrid img {
    flex: 0 0 74%;
    scroll-snap-align: start;
  }
}

/* as trilhas ganham camada própria: sem isso o Chrome repinta o texto
   a cada quadro em algumas máquinas, e é isso que pisca */
.brandTickerTrack,
.headerMarketsTrack,
.cityTickerTrack {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

@media (prefers-reduced-motion: reduce) {
  .brandTicker:hover .brandTickerTrack { animation-play-state: paused; }
}

/* painel de números em largura cheia: quatro colunas e algarismo maior */
.workNums.grande {
  grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
  gap: clamp(26px, 3vw, 54px) clamp(20px, 2.4vw, 40px);
  border-top: 1px solid var(--line);
  padding-top: clamp(26px, 3vw, 48px);
}
.workNums.grande strong { font-size: clamp(34px, 4.2vw, 68px); }

@media (max-width: 980px) {
  .workNums.grande { grid-template-columns: repeat(2, 1fr); }
}

/* um vídeo só: ocupa a coluna inteira, sem trilho nem setas */
.vidSlider.solo .vidTrilho { overflow: visible; }
.vidSlider.solo .vidCard { flex: 0 0 100%; }
.vidSlider.duo .vidTrilho { overflow: visible; }
.vidSlider.duo .vidCard { flex: 1 1 0; max-width: none; }
@media (max-width: 720px) {
  .vidSlider.duo .vidTrilho { overflow-x: auto; }
  .vidSlider.duo .vidCard { flex: 0 0 78%; }
}


/* ---- gráfico de barras dentro de um trabalho ---- */
.workChart { width: 100%; }
.chartBars {
  display: flex; align-items: flex-end; gap: clamp(8px, 2vw, 28px);
  height: clamp(190px, 26vw, 330px);
  padding-top: clamp(30px, 3.4vw, 52px);
  border-bottom: 1px solid var(--linhaSuave, rgba(10, 10, 10, .16));
}
.chartCol { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%; }
.chartTrilho { flex: 1; display: flex; align-items: flex-end; justify-content: center; }
.chartBar {
  position: relative; display: block;
  width: 100%; max-width: 88px; height: var(--h);
  background: var(--tinta, #0A0A0A);
}
.chartVal {
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  margin-bottom: 9px;
  font-size: clamp(15px, 2.1vw, 27px); line-height: 1; white-space: nowrap;
}
.chartTag {
  margin-top: 12px; text-align: center;
  font-size: clamp(10px, 1.1vw, 13px); letter-spacing: .14em; text-transform: uppercase;
  opacity: .55; white-space: nowrap;
}
.chartLeg {
  margin-top: 18px;
  font-size: clamp(11px, 1.1vw, 13px); letter-spacing: .12em; text-transform: uppercase;
  opacity: .5;
}