/* ============================================================
   case.css — página de case study
   Depende de styles.css: usa os mesmos tokens (--ink, --orange,
   --paper, --display, --ease, --radius, --wrap) e as classes
   .wrap .eyebrow .btn .line/.line__in .dot já existentes.
   Nenhuma cor nova é introduzida aqui.

   0  base do case      1  hero          2  overview
   3  desafio           4  conceito      5  processo
   6  sistema visual    7  galeria       8  responsivo
   9  resultado        10  próximo      11  slots vazios
   12 animação         13  responsivo
   ============================================================ */

/* ---------- 0. base ---------- */
.case-page{background:var(--paper)}

.cs-sec{
  position:relative;
  padding-block:clamp(88px, 13vh, 168px);
}
.cs-sec + .cs-sec{padding-top:clamp(88px, 13vh, 168px)}

/* fundo escuro reaproveitando o token da marca */
.section--ink{background:var(--ink-deep);color:var(--on-dark)}
.section--ink .eyebrow{color:rgba(255,255,255,.55)}

.cs-h2{
  font-size:clamp(30px, 4.6vw, 62px);
  margin-block:14px 0;
}
.cs-lede{
  font-size:clamp(19px, 2.1vw, 27px);
  line-height:1.4;
  color:var(--ink);
  font-weight:500;
}

.cs-link{
  color:var(--orange);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}

/* barra fina de progresso de leitura */
.cs-progress{
  position:fixed;
  z-index:99;
  inset:0 0 auto;
  height:2px;
  background:transparent;
  pointer-events:none;
}
.cs-progress span{
  display:block;
  height:100%;
  background:var(--orange);
  transform:scaleX(var(--cs-progress, 0));
  transform-origin:left;
}

/* largura total, para as peças que sangram */
/* mesma caixa do .wrap: largura máxima e respiro lateral */
.wrap--full{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

/* O header nasce transparente sobre o hero escuro do case. Quando a
   rolagem passa do hero, o script.js já aplica .is-stuck (fundo claro,
   texto ink). Nada a fazer aqui além de garantir que o estado inicial
   assuma fundo escuro — o que já é o padrão de styles.css. */

/* ---------- 1. hero ---------- */
.cs-hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  padding-block:clamp(120px, 16vh, 190px) clamp(46px, 7vh, 84px);
  background:var(--ink-deep);
  color:var(--on-dark);
  overflow:hidden;
}
.cs-hero__media{
  position:absolute;
  z-index:-2;
  inset:0;
}
.cs-hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  /* dessaturado para o título mandar na composição */
  filter:grayscale(.72) brightness(.72) contrast(1.05);
}
.cs-hero__veil{
  position:absolute;
  z-index:-1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,13,51,.62) 0%, rgba(0,13,51,.30) 38%, rgba(0,13,51,.94) 100%),
    linear-gradient(96deg, rgba(0,13,51,.72) 0%, rgba(0,13,51,.18) 62%, rgba(0,13,51,0) 100%);
}
.cs-hero__inner{width:100%}
.cs-hero__client{color:rgba(255,255,255,.66);margin-bottom:clamp(14px, 2vh, 22px)}

.cs-hero__title{
  font-size:clamp(58px, 13vw, 208px);
  line-height:.84;
  margin:0;
}
/* mesma técnica de máscara do hero da home: o padding evita que
   acentos em caixa alta sejam cortados pelo overflow:hidden */
.cs-hero__title .line{
  display:block;
  overflow:hidden;
  padding-top:.22em;
  margin-top:-.22em;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.cs-hero__title .line__in{display:block}
.cs-hero__title .dot{
  display:inline-block;
  width:.11em;
  height:.11em;
  margin-left:.05em;
  background:var(--orange);
  border-radius:var(--radius);
  vertical-align:baseline;
}

.cs-hero__say{
  max-width:44ch;
  margin-top:clamp(20px, 3vh, 34px);
  font-size:clamp(15px, 1.5vw, 19px);
  line-height:1.55;
  color:rgba(255,255,255,.80);
}

.cs-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:clamp(26px, 5vw, 70px);
  margin-top:clamp(30px, 5vh, 54px);
  padding-top:clamp(20px, 3vh, 30px);
  border-top:1px solid rgba(255,255,255,.16);
}
.cs-hero__meta dt{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.46);
  margin-bottom:7px;
}
.cs-hero__meta dd{
  margin:0;
  font-size:14px;
  color:var(--on-dark);
}

.cs-hero__cue{
  position:absolute;
  left:50%;
  bottom:clamp(16px, 2.4vh, 26px);
  transform:translateX(-50%);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.42);
}

/* ---------- 2. overview ---------- */
.cs-overview__grid{
  display:grid;
  grid-template-columns:minmax(210px, 300px) minmax(0, 1fr);
  gap:clamp(34px, 6vw, 96px);
  align-items:start;
}
.cs-facts{margin:0}
.cs-facts__row{
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  padding-block:15px;
  border-top:1px solid var(--rule);
}
.cs-facts__row:last-child{border-bottom:1px solid var(--rule)}
.cs-facts dt{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.cs-facts dd{
  margin:0;
  font-size:14.5px;
  line-height:1.55;
  color:var(--ink);
}
.cs-overview__text > p + p{margin-top:1.05em}
.cs-overview__text > p:not(.cs-lede){
  font-size:clamp(15px, 1.35vw, 17px);
  line-height:1.68;
  color:var(--muted);
  max-width:62ch;
}
.cs-overview__text .cs-lede{margin-bottom:.7em}
.cs-overview__text b{color:var(--ink);font-weight:600}

/* ---------- 3. desafio ---------- */
.cs-statement{
  font-size:clamp(38px, 8.4vw, 128px);
  line-height:.9;
  margin:18px 0 0;
  max-width:15ch;
}
.cs-statement .line{
  display:block;
  overflow:hidden;
  padding-top:.2em;
  margin-top:-.2em;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.cs-statement .line__in{display:block}
.cs-statement em{font-style:normal;color:var(--orange)}
.cs-statement .dot{
  display:inline-block;
  width:.1em;height:.1em;
  margin-left:.05em;
  background:var(--orange);
  border-radius:var(--radius);
}
.cs-statement--neg{color:var(--on-dark)}

.cs-challenge__note{
  margin-left:auto;
  margin-top:clamp(38px, 6vh, 66px);
  max-width:50ch;
  /* deslocado para a direita: quebra a coluna e cria a assimetria */
  padding-left:clamp(0px, 22vw, 300px);
}

/* Quando a seção traz imagem, o vazio à esquerda do parágrafo vira
   coluna: a foto ocupa o espaço que antes sobrava e o texto mantém
   o recuo. Sem imagem, o bloco segue como estava. */
.cs-challenge__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.05fr) minmax(0, .95fr);
  gap:clamp(26px, 5vw, 70px);
  align-items:end;
  margin-top:clamp(38px, 6vh, 66px);
}
.cs-challenge__grid .cs-challenge__note{
  margin-top:0;
  padding-left:0;
  max-width:46ch;
}
.cs-challenge__note p{
  font-size:clamp(15px, 1.35vw, 17px);
  line-height:1.68;
  color:var(--muted);
}
.cs-challenge__note p + p{margin-top:1.05em}
.cs-challenge__note b{color:var(--ink);font-weight:600}

/* ---------- 4. conceito ---------- */
.cs-concept__title{
  font-size:clamp(40px, 7.6vw, 116px);
  margin:12px 0 0;
}
.cs-concept__grid{
  display:grid;
  grid-template-columns:minmax(0, .78fr) minmax(0, 1.22fr);
  gap:clamp(30px, 5vw, 80px);
  align-items:end;
  margin-top:clamp(44px, 7vh, 84px);
}
.cs-concept__text p{
  font-size:clamp(15px, 1.35vw, 17px);
  line-height:1.68;
  color:var(--muted);
}
.cs-concept__text p + p{margin-top:1.05em}

.cs-figures{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(22px, 4vw, 56px);
  margin-top:clamp(54px, 8vh, 100px);
  padding-top:clamp(26px, 4vh, 42px);
  border-top:1px solid var(--rule);
}
.cs-fig__n{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(42px, 6.4vw, 92px);
  line-height:.9;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--ink);
}
.cs-fig__plus{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px, 4vw, 56px);
  color:var(--orange);
}
.cs-fig__n--word{
  display:block;
  font-size:clamp(17px, 2vw, 28px);
  line-height:1.12;
}
.cs-fig p{
  margin-top:10px;
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- 5. processo ---------- */
.cs-steps{list-style:none;margin:clamp(44px, 7vh, 88px) 0 0;padding:0}
.cs-step{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) minmax(0, .82fr);
  gap:clamp(18px, 3.4vw, 54px);
  align-items:start;
  padding-block:clamp(28px, 4.4vh, 52px);
  border-top:1px solid var(--rule);
}
.cs-step:last-child{border-bottom:1px solid var(--rule)}
/* assimetria: as etapas pares recuam */
.cs-step:nth-child(even){padding-left:clamp(0px, 9vw, 130px)}
.cs-step__n{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--orange);
  padding-top:.5em;
}
.cs-step__body h3{
  font-size:clamp(24px, 3.2vw, 40px);
  margin:0 0 10px;
}
.cs-step__body p{
  font-size:clamp(14.5px, 1.3vw, 16px);
  line-height:1.65;
  color:var(--muted);
  max-width:52ch;
}

/* ---------- 6. sistema visual ---------- */
.cs-palette{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:clamp(10px, 1.6vw, 20px);
  margin-top:clamp(40px, 6vh, 76px);
}
.cs-sw{
  margin:0;
  aspect-ratio:1 / 1.15;
  border-radius:var(--radius);
  background:var(--sw, transparent);
}

/* ---------- 6b. abertura em vídeo ----------
   O vídeo abre o case, logo depois do hero. Fica dentro do .wrap
   como todo o resto — nada encosta na borda da tela. */
.cs-reel{padding-block:clamp(30px, 5vh, 60px)}
/* dois vídeos lado a lado; empilham abaixo de 900px */
.cs-reel__par{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2vw, 28px);
}
@media (max-width: 900px){
  .cs-reel__par{grid-template-columns:1fr}
}
.cs-figure--reel{
  margin:0;
  aspect-ratio:16 / 9;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--ink-deep);
}
.cs-figure--reel video,
.cs-figure--reel iframe{
  display:block;
  width:100%;
  height:100%;
  border:0;
  object-fit:cover;
}

/* ---------- 6c. imagens da galeria ----------
   .cs-shot mostra a imagem INTEIRA: object-fit:contain sobre o papel,
   com a altura vinda da própria proporção. Nenhuma captura é recortada
   — num print, o que se corta é conteúdo. */
/* Sem moldura: a imagem é a peça. Nada de fundo branco, borda ou
   padding em volta — só o arquivo, na largura da margem do site. */
.cs-shot{margin:0}
.cs-shot img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
}
.cs-shot--alto{display:flex;justify-content:center}
.cs-shot--alto img{width:auto;max-height:min(72vh, 680px)}

/* ---------- 6d. pilha travada da galeria ----------
   Cada imagem gruda no topo e a seguinte sobe por cima. Sticky puro:
   o scroll segue normal, só a imagem fica parada enquanto a próxima
   chega. A margem entre elas é o tempo que cada uma fica em cena. */
.cs-stack{display:block;padding-bottom:clamp(40px, 8vh, 100px)}
.cs-stack__item{
  position:sticky;
  top:clamp(84px, 11vh, 116px);
  margin:0;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--paper);
}
.cs-stack__item + .cs-stack__item{margin-top:clamp(60px, 11vh, 130px)}
.cs-stack__item img{
  display:block;
  width:100%;
  height:auto;
  border-radius:var(--radius);
}

/* ---------- 7. galeria ---------- */
.cs-figure{
  position:relative;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius);
  background:#E7E8EF;
}
.cs-figure img,
.cs-figure video{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* Nenhuma imagem encosta na borda da tela: todas respeitam a mesma
   margem do resto do conteúdo. Antes estas duas classes sangravam de
   ponta a ponta, o que quebrava o alinhamento com o texto ao lado. */
.cs-figure--bleed{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  /* fica fora do .wrap, então o respiro lateral vem daqui — sem o
     padding, em telas menores que o --wrap a imagem encostava nas
     bordas, porque o max-width sozinho não a segurava */
  box-sizing:border-box;
  padding-inline:var(--gutter);
  aspect-ratio:16 / 9;
  border-radius:var(--radius);
  margin-block:clamp(30px, 5vh, 60px);
}
.cs-figure--full{
  width:100%;
  aspect-ratio:16 / 9;
  border-radius:var(--radius);
}
.cs-figure--tall{aspect-ratio:3 / 4}

.cs-duo{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(14px, 2.4vw, 34px);
  margin-block:clamp(30px, 5vh, 60px);
}
.cs-duo .cs-figure{aspect-ratio:3 / 2}
/* Capturas de tela vêm em 1.97 (janela cheia de navegador). Forçá-las
   em 3:2 cortaria 25% da altura, e num print o que se corta é conteúdo.
   A figure assume a proporção da imagem e o cover volta a valer — sem
   contain, que deixaria faixas brancas dentro da caixa. */
/* A proporção vem por style inline em cada figure, calculada a partir
   do arquivo já recortado — as capturas não têm todas a mesma altura.
   Estas regras só garantem que a proporção da imagem vença a do slot. */
.cs-duo .cs-figure--tela,
.cs-offset .cs-figure--tela,
.cs-figure--tela{aspect-ratio:auto}
.cs-figure--tela img{object-fit:cover}

/* composições deslocadas: quebram o eixo central */
.cs-offset{
  display:grid;
  margin-block:clamp(34px, 6vh, 76px);
}
.cs-offset--right{grid-template-columns:minmax(0, 1fr) minmax(0, .62fr)}
.cs-offset--right > *{grid-column:2}
.cs-offset--left{grid-template-columns:minmax(0, .72fr) minmax(0, 1fr)}
.cs-offset--left > *{grid-column:1}
.cs-offset .cs-figure:not(.cs-figure--tall){aspect-ratio:3 / 2}


/* ---------- 8. responsivo ---------- */
.cs-responsive__note{
  max-width:52ch;
  margin-top:clamp(18px, 3vh, 28px);
  font-size:clamp(15px, 1.35vw, 17px);
  line-height:1.68;
  color:var(--muted);
}
.cs-screens{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:clamp(14px, 2.6vw, 40px);
  margin-top:clamp(44px, 7vh, 88px);
}
.cs-screen{
  margin:0;
  aspect-ratio:9 / 19.5;
  overflow:hidden;
  border-radius:calc(var(--radius) * 4);
  background:#E7E8EF;
}
.cs-screen img{display:block;width:100%;height:100%;object-fit:cover}
/* as laterais descem, a do meio sobe: composição, não fileira */
.cs-screens > :nth-child(2){transform:translateY(-6%)}
.cs-screens > :nth-child(1),
.cs-screens > :nth-child(3){transform:translateY(4%)}

/* ---------- 9. resultado ---------- */
.cs-result__grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(22px, 4vw, 66px);
  margin-top:clamp(38px, 6vh, 70px);
  max-width:1000px;
  margin-left:auto;
}
.cs-result__grid p{
  font-size:clamp(15px, 1.35vw, 17px);
  line-height:1.68;
  color:rgba(255,255,255,.72);
}
.cs-result__cta{margin-top:clamp(34px, 5vh, 56px)}

/* ---------- 10. próximo projeto ---------- */
.cs-next{position:relative;background:var(--ink-deep)}
.cs-next__link{
  position:relative;
  display:block;
  isolation:isolate;
  min-height:76vh;
  display:flex;
  align-items:flex-end;
  padding-block:clamp(70px, 12vh, 140px);
  overflow:hidden;
  color:var(--on-dark);
}
.cs-next__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.cs-next__media img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.8) brightness(.5);
  transform:scale(1.06);
  transition:transform 1.4s var(--ease), filter 1.4s var(--ease);
}
.cs-next__link::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(180deg, rgba(0,13,51,.72) 0%, rgba(0,13,51,.42) 45%, rgba(0,13,51,.92) 100%);
}
.cs-next__link:hover .cs-next__media img,
.cs-next__link:focus-visible .cs-next__media img{
  transform:scale(1);
  filter:grayscale(.45) brightness(.6);
}
.cs-next__inner{width:100%}
.cs-next__title{
  font-size:clamp(46px, 10vw, 150px);
  line-height:.86;
  margin:10px 0 0;
}
.cs-next__title .line{
  display:block;
  overflow:hidden;
  padding-top:.22em;margin-top:-.22em;
  padding-bottom:.08em;margin-bottom:-.08em;
}
.cs-next__title .line__in{display:block}
.cs-next__say{
  margin-top:14px;
  font-size:clamp(15px, 1.5vw, 19px);
  color:rgba(255,255,255,.72);
}
.cs-next__go{
  display:inline-block;
  margin-top:clamp(22px, 3.4vh, 36px);
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--orange);
}
.cs-next__go::after{
  content:" →";
  display:inline-block;
  transition:transform .3s var(--ease);
}
.cs-next__link:hover .cs-next__go::after{transform:translateX(5px)}

/* ---------- 11. slots vazios ----------
   Um slot sem conteúdo colapsa: nada de buraco cinza na página.
   Ao receber <img>/<video>, o :has devolve a proporção original.
   Navegador sem :has mostra o slot vazio como bloco baixo — por
   isso o display:none vem do próprio [data-slot] vazio. */
[data-slot]:empty,
[data-slot-color]:empty{display:none}

/* ---------- 12. animação ---------- */
.js [data-cs-in]{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.js [data-cs-in].is-in{opacity:1;transform:none}

/* imagens entram com um leve afastamento, sem deslizar */
.js [data-cs-media]{opacity:0;transition:opacity 1.1s var(--ease)}
.js [data-cs-media] img{
  transform:scale(1.04);
  transition:transform 1.5s var(--ease);
}
.js [data-cs-media].is-in{opacity:1}
.js [data-cs-media].is-in img{transform:none}

/* títulos mascarados: sobem por trás da máscara */
.js .cs-hero__title .line__in,
.js .cs-statement .line__in,
.js .cs-next__title .line__in{
  transform:translateY(105%);
}
.js .cs-hero__title.is-in .line__in,
.js .cs-statement.is-in .line__in,
.js .cs-next__title.is-in .line__in{
  transform:none;
  transition:transform 1.05s var(--ease);
}
/* cascata entre as linhas */
.js .cs-statement.is-in .line:nth-child(2) .line__in{transition-delay:.07s}
.js .cs-statement.is-in .line:nth-child(3) .line__in{transition-delay:.14s}
.js .cs-statement.is-in .line:nth-child(4) .line__in{transition-delay:.21s}
.js .cs-statement.is-in .line:nth-child(5) .line__in{transition-delay:.28s}
.js .cs-hero__title.is-in .line:nth-child(2) .line__in{transition-delay:.09s}

/* atraso em cadeia dentro de um mesmo bloco */
.js [data-cs-in].is-in:nth-child(2){transition-delay:.06s}
.js [data-cs-in].is-in:nth-child(3){transition-delay:.12s}
.js [data-cs-in].is-in:nth-child(4){transition-delay:.18s}

@media (prefers-reduced-motion: reduce){
  .js [data-cs-in],
  .js [data-cs-media],
  .js [data-cs-media] img,
  .js .cs-hero__title .line__in,
  .js .cs-statement .line__in,
  .js .cs-next__title .line__in{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
  .cs-next__media img{transform:none}
}

/* ---------- 13. responsivo ---------- */
@media (max-width: 1000px){
  .cs-overview__grid{grid-template-columns:1fr;gap:clamp(28px, 5vh, 44px)}
  .cs-concept__grid{grid-template-columns:1fr;align-items:start}
  .cs-challenge__note{padding-left:0;margin-left:0}
  .cs-challenge__grid{grid-template-columns:1fr;gap:24px;align-items:start}
  .cs-step{grid-template-columns:auto minmax(0, 1fr);gap:16px 22px}
  .cs-step__art{grid-column:1 / -1;margin-top:16px}
  .cs-step:nth-child(even){padding-left:0}
  /* deslocamentos viram largura cheia: empilhar sem perder escala */
  .cs-offset--right,
  .cs-offset--left{grid-template-columns:1fr}
  .cs-offset--right > *,
  .cs-offset--left > *{grid-column:1}
  .cs-result__grid{grid-template-columns:1fr;gap:16px}
}

@media (max-width: 700px){
  /* sticky em tela pequena prende demais: empilha normal */
  .cs-stack__item{position:static}
  .cs-stack__item + .cs-stack__item{margin-top:clamp(20px, 5vw, 34px)}
  .cs-hero{justify-content:flex-end}
  .cs-hero__meta{gap:20px 30px}
  .cs-hero__meta > div{min-width:40%}
  .cs-figures{grid-template-columns:1fr;gap:26px;text-align:left}
  .cs-fig__n--word{font-size:19px}
  .cs-duo{grid-template-columns:1fr}
  .cs-palette{grid-template-columns:repeat(2, 1fr)}
  /* telas mobile: rola na horizontal em vez de encolher a 3 colunas */
  .cs-screens{
    grid-template-columns:repeat(3, 62vw);
    gap:14px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding-bottom:8px;
  }
  .cs-screens > *{scroll-snap-align:center;transform:none !important}
  .cs-statement{max-width:none}
}

/* ============================================================
   CELULAR — revisão dedicada
   O bloco de 700px acima resolve o empilhamento; este cuida da
   leitura, na mesma lógica já aplicada na home: os rótulos técnicos
   foram dimensionados para desktop (10–10,5px) e no celular ficam
   abaixo do limite confortável. Sobem para 11,5px e perdem tracking
   — é o excesso de espaçamento que os torna difíceis em corpo
   pequeno. O papel visual continua o mesmo.
   ============================================================ */
@media (max-width: 700px){
  .cs-hero__meta dt,
  .cs-facts dt,
  .cs-fig p,
  .cs-next__go{font-size:11.5px;letter-spacing:.14em}

  /* o indicador de rolagem é o menor texto da página e fica sobre
     imagem — precisa de mais corpo, não menos */
  .cs-hero__cue{font-size:11px;letter-spacing:.18em}

  /* ALVO DE TOQUE
     "view case" é o link que leva ao próximo case e vinha com ~20px
     de altura tocável. O padding leva a área para ~44px sem abrir
     buraco no layout nem mudar o tamanho da letra. */
  .cs-next__go{padding-block:13px}

  /* a legenda das figuras quebrava com tracking largo em telas
     estreitas; sem o uppercase espremido a linha respira */
  .cs-fig p{letter-spacing:.12em;line-height:1.5}
}