/* =============================================================
   tgr. inteligência digital
   -------------------------------------------------------------
   1  tokens
   2  base
   3  utilitários (eyebrow, botão, cursor)
   4  header
   5  hero + painel de operação
   6  seções
   7  cases
   8  cards de serviço
   9  processo
   11 cta + rodapé
   12 estados de animação
   13 responsivo
   ============================================================= */

/* ---------- 0. Thunder (títulos) ---------- */
@font-face{
  font-family:'Thunder';
  src:url('assets/fonts/thunder-extrabold.woff2') format('woff2'),
      url('assets/fonts/thunder-extrabold.otf') format('opentype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}

/* ---------- 1. tokens ---------- */
:root{
  --ink:#001969;
  --ink-deep:#000D33;
  --ink-mid:#04175A;
  --orange:#FF6400;
  --paper:#F4F4F2;
  --white:#FFFFFF;
  --rule:#D5D7E0;
  --muted:#5B6180;

  --on-dark:#FFFFFF;
  --muted-dark:#8A93BE;
  --rule-dark:rgba(255,255,255,.14);

  --display:'Thunder', 'Archivo Narrow', 'Archivo', system-ui, sans-serif;
  --ui:'Archivo', system-ui, -apple-system, sans-serif;
  --body:'Poppins', system-ui, -apple-system, sans-serif;
  /* Era IBM Plex Mono. Mantive o token com o nome --mono porque ele marca um
   papel (rótulo técnico, caixa alta, tracking largo), não uma família. */
  --mono:'Archivo', system-ui, -apple-system, sans-serif;

  --wrap:1320px;
  --gutter:clamp(16px, 3vw, 22px);
  --sec-y:clamp(62px, 7.2vw, 106px);

  --radius:3px;

  --ease:cubic-bezier(.16, 1, .3, 1);
  --ease-io:cubic-bezier(.65, 0, .35, 1);
}

/* ---------- 2. base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}

html{-webkit-text-size-adjust:100%}
html:not(.js){scroll-behavior:smooth}

body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3{
  font-family:var(--display);
  font-weight:800;
  letter-spacing:.01em;
  line-height:.86;
  text-transform:uppercase;
}

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

:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:4px;
  border-radius:2px;
}

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

.skip-link{
  position:fixed;
  top:12px;
  left:12px;
  z-index:200;
  padding:10px 16px;
  border-radius:var(--radius);
  background:var(--orange);
  color:var(--white);
  font-family:var(--mono);
  font-size:12px;
  transform:translateY(-160%);
  transition:transform .2s var(--ease);
}
.skip-link:focus-visible{transform:none}

/* ---------- 3. utilitários ---------- */
.eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.eyebrow::before{
  content:"";
  width:9px;
  height:9px;
  background:var(--orange);
  flex:none;
}

.btn{
  --btn-bg:var(--ink);
  --btn-fg:var(--white);
  --btn-line:var(--ink);
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--ui);
  font-weight:700;
  font-size:15px;
  letter-spacing:-.01em;
  line-height:1;
  padding:15px 24px;
  color:var(--btn-fg);
  border:2px solid var(--btn-line);
  border-radius:var(--radius);
  background:transparent;
  overflow:hidden;
  isolation:isolate;
  transition:color .22s var(--ease), border-color .28s var(--ease);
  will-change:transform;
}
/* Preenchimento que sobe no hover.
   O raio NÃO é inherit: os pseudo-elementos ficam em inset:0, ou seja,
   dentro da borda de 2px. O raio interno de uma borda é o externo menos
   a espessura — herdando os 3px do .btn, o preenchimento arredondava
   mais que o buraco onde vive e deixava os quatro cantos vazados. */
.btn::before{
  content:"";
  position:absolute;
  /* meio pixel para fora: cobre a costura de antialiasing entre o
     preenchimento e a borda na curva do canto */
  inset:-.5px;
  border-radius:calc(var(--radius) - 1px);
  z-index:-1;
  background:var(--btn-bg);
  transform-origin:bottom;
  transition:transform .38s var(--ease), background-color .28s var(--ease);
}
.btn::after{
  content:"";
  position:absolute;
  inset:-.5px;
  border-radius:calc(var(--radius) - 1px);
  z-index:-1;
  background:var(--orange);
  transform:scaleY(0);
  transform-origin:bottom;
  transition:transform .38s var(--ease);
}
.btn:hover::after,
.btn:focus-visible::after{transform:scaleY(1)}
.btn:hover,.btn:focus-visible{border-color:var(--orange)}

.btn--sm{padding:11px 18px;font-size:14px}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink)}
.btn--ghost:hover,.btn--ghost:focus-visible{color:var(--white)}
.btn--neg{--btn-bg:var(--orange);--btn-line:var(--orange);--btn-fg:var(--white)}
.btn--neg::after{background:var(--ink)}
.btn--neg:hover,.btn--neg:focus-visible{border-color:var(--white);color:var(--white)}
.btn--line{--btn-bg:transparent;--btn-line:rgba(255,255,255,.4);--btn-fg:var(--on-dark)}
.btn--line::after{background:var(--white)}
.btn--line:hover,.btn--line:focus-visible{color:var(--ink);border-color:var(--white)}

/* cursor customizado */
.cursor{display:none}
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block;
    position:fixed;
    top:0;left:0;
    z-index:150;
    pointer-events:none;
    mix-blend-mode:difference;
  }
  .cursor__dot,
  .cursor__ring{
    position:absolute;
    border-radius:50%;
    transform:translate(-50%,-50%);
  }
  .cursor__dot{width:5px;height:5px;background:#fff}
  .cursor__ring{
    width:34px;height:34px;
    border:1px solid rgba(255,255,255,.55);
    transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
  }
  .cursor.is-active .cursor__ring{width:56px;height:56px}
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button{cursor:none}
}

/* ---------- 4. header ---------- */
.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:100;
  background:rgba(0,13,51,0);
  border-bottom:1px solid transparent;
  transition:background-color .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:2px;
  background:var(--orange);
  transform:scaleX(var(--scroll-progress, 0));
  transform-origin:left;
  opacity:0;
  transition:opacity .4s var(--ease);
}
.topo-claro .site-header::after,
.site-header.is-stuck::after{opacity:1}

.bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-block:clamp(20px, 2.4vw, 30px);
  transition:padding .4s var(--ease);
}
/* O viewBox mora no <symbol>; o <svg> não repete, senão vira viewport
   aninhado e o desenho desloca. Como sem viewBox o width:auto não tem de
   onde calcular, a proporção vem do aspect-ratio (923.8/592.8). */
/* proporção do lockup do rodapé (#tgr-logo) */
.logo{
  height:52px;
  aspect-ratio:923.8 / 592.8;
  width:auto;
  color:var(--on-dark);
  overflow:visible;
  transition:color .4s var(--ease), height .4s var(--ease);
}
/* a marca do header (#tgr-marca) é mais quadrada que o lockup */
.logo--sm{height:48px;aspect-ratio:764 / 515}
.logo--neg{height:74px}
.brand{display:block;line-height:0}

.nav{display:flex;align-items:center;gap:clamp(18px, 2.6vw, 32px)}
.nav a{
  font-size:14px;
  font-weight:500;
  color:var(--white);
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.nav a{opacity:.86}
.nav a:hover{opacity:1;color:var(--white)}

/* estado depois de rolar: fundo sólido claro */
/* Páginas cujo topo já é claro (trabalhos.html) marcam a classe topo-claro no body.
   Sem isso o header nasce transparente com logo e links brancos — que
   é o certo sobre o hero escuro da home, e invisível sobre o papel. */
.topo-claro .site-header,
.site-header.is-stuck{
  background:rgba(244,244,242,.92);
  backdrop-filter:blur(12px);
  border-bottom-color:var(--rule);
}
/* Ao rolar o header encolhe, mas pelo logo — não pelo respiro.
   Cortar o padding para 14px colava o logo na borda de novo. */
.topo-claro .site-header .bar,
.site-header.is-stuck .bar{padding-block:clamp(14px, 1.5vw, 18px)}
.topo-claro .site-header .logo,
.site-header.is-stuck .logo{color:var(--ink);height:40px}
.topo-claro .site-header .nav a,
.site-header.is-stuck .nav a{color:var(--ink)}
.topo-claro .site-header .nav a:hover,
.site-header.is-stuck .nav a:hover{color:var(--ink)}
/* o botão laranja é sempre branco, nos dois estados do header */
.nav .btn--neg,
.site-header.is-stuck .nav .btn--neg{
  color:var(--white);
  opacity:1;
}

.nav .btn--neg:hover,
.nav .btn--neg:focus-visible,
.site-header.is-stuck .nav .btn--neg:hover,
.site-header.is-stuck .nav .btn--neg:focus-visible{
  color:var(--white);
}

/* Cursor customizado só faz sentido com mouse. Em toque ele ficava
   desenhado no meio da tela sem nunca acompanhar nada. */
@media (hover:none), (pointer:coarse){
  .cursor{display:none !important}
}

/* rótulo só para leitor de tela */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- 4a. seletor de idioma ---------- */
.lang{
  display:flex;
  align-items:center;
  gap:5px;
  margin-left:clamp(10px, 1.6vw, 22px);
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
.lang button{
  padding:6px 3px;
  border:0;
  background:none;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  color:rgba(255,255,255,.55);
  cursor:pointer;
  transition:color .25s var(--ease);
}
.lang button:hover{color:var(--white)}
/* o idioma ativo é o único em branco cheio */
.lang button[aria-pressed="true"]{color:var(--white)}
.site-header.is-stuck .lang,
.topo-claro .site-header .lang{color:rgba(0,25,105,.35)}
.site-header.is-stuck .lang button,
.topo-claro .site-header .lang button{color:rgba(0,25,105,.5)}
.site-header.is-stuck .lang button[aria-pressed="true"],
.topo-claro .site-header .lang button[aria-pressed="true"],
.site-header.is-stuck .lang button:hover,
.topo-claro .site-header .lang button:hover{color:var(--ink)}

/* dentro do menu de celular */
.menu__lang{display:flex;gap:18px;margin-bottom:clamp(18px, 3vh, 28px)}
.menu__lang button{
  padding:8px 0;
  border:0;
  background:none;
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.45);
  cursor:pointer;
}
.menu__lang button[aria-pressed="true"]{color:var(--orange)}

/* ---------- 4b. menu de celular ----------
   O botão só existe abaixo de 820px (§ 13), mesmo ponto em que os
   links da nav somem. Antes disso a navegação simplesmente não
   existia no celular: só sobrava o botão de contato. */
.burger{
  display:none;
  position:relative;
  z-index:2;
  width:46px;
  height:46px;
  padding:0;
  border:0;
  background:transparent;
  color:currentColor;
  cursor:pointer;
}
.burger__box{
  position:absolute;
  inset:0;
  display:grid;
  align-content:center;
  justify-items:end;
  gap:6px;
  padding-right:2px;
}
.burger__box i{
  display:block;
  width:24px;
  height:2px;
  background:var(--white);
  border-radius:var(--radius);
  transition:transform .38s var(--ease), width .38s var(--ease), opacity .2s linear;
}
.burger__box i:last-child{width:16px}
.topo-claro .site-header .burger__box i,
.site-header.is-stuck .burger__box i{background:var(--ink)}

/* aberto: as duas barras viram um X */
.burger[aria-expanded="true"] .burger__box i{background:var(--white);width:24px}
.burger[aria-expanded="true"] .burger__box i:first-child{transform:translateY(4px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:last-child{transform:translateY(-4px) rotate(-45deg)}

.menu{
  position:fixed;
  z-index:98;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(28px, 6vh, 54px);
  padding:clamp(96px, 16vh, 130px) var(--gutter) clamp(34px, 6vh, 54px);
  background:var(--ink-deep);
  color:var(--on-dark);
}
.menu[hidden]{display:none}

.menu__nav{display:flex;flex-direction:column}
.menu__nav a{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-block:clamp(12px, 2.4vh, 20px);
  border-bottom:1px solid rgba(255,255,255,.12);
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(30px, 9vw, 46px);
  line-height:1;
  letter-spacing:.01em;
  text-transform:uppercase;
  color:var(--white);
}
/* só o número usa a mono; o rótulo (segundo span) herda a display
   do <a> — ele existe separado para poder ser traduzido */
.menu__nav a span:first-child{
  font-family:var(--mono);
  font-size:11px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--orange);
}
.menu__nav a:last-child{color:var(--orange)}

/* O gap cai de 9 para 2px porque o padding dos links passa a fazer
   esse trabalho: são contatos — telefone, e-mail, Instagram — e
   vinham com 23px de altura tocável, metade do mínimo confortável.
   O padding leva cada um a ~44px sem mudar o corpo da letra nem o
   ritmo do painel, que continua o mesmo à vista. */
.menu__foot{display:flex;flex-direction:column;gap:2px}
.menu__foot a{
  font-size:14px;
  color:rgba(255,255,255,.62);
  padding-block:11px;
}

/* entrada: o painel aparece e os itens sobem em cascata */
.js .menu{opacity:0;transition:opacity .3s var(--ease)}
.js .menu.is-open{opacity:1}
.js .menu__nav a,
.js .menu__foot{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.js .menu.is-open .menu__nav a,
.js .menu.is-open .menu__foot{opacity:1;transform:none}
.js .menu.is-open .menu__nav a:nth-child(1){transition-delay:.06s}
.js .menu.is-open .menu__nav a:nth-child(2){transition-delay:.12s}
.js .menu.is-open .menu__nav a:nth-child(3){transition-delay:.18s}
.js .menu.is-open .menu__nav a:nth-child(4){transition-delay:.24s}
.js .menu.is-open .menu__foot{transition-delay:.30s}

/* trava a rolagem do fundo enquanto o menu está aberto */
body.menu-aberto{overflow:hidden}

/* ---------- 5. hero ---------- */
.hero{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:clamp(34px, 6vh, 78px);
  /* O piso de 96px no topo existe por causa do header fixo. Em telas
     baixas (notebook de 700px) ele somado à chamada empurrava a faixa
     de contadores para fora — por isso o piso cede em § 13. */
  padding-block:clamp(96px, 12vh, 150px) clamp(20px, 2.6vh, 36px);
  background:var(--ink-deep);
  color:var(--on-dark);
  overflow:hidden;
}
/* Fundo em vídeo. Fica atrás de tudo (z-index -3) sob um véu azul.
   O vídeo entra dessaturado e escurecido; a cor vem toda do véu, que é
   o --ink da marca em degradê. Sem blend mode: comportamento previsível
   em qualquer navegador, e o navy do .hero serve de fallback se o vídeo
   não carregar. */
.hero__video{
  position:absolute;
  z-index:-3;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  filter:grayscale(1) brightness(.78) contrast(1.18);
  transition:opacity 1.2s var(--ease);
}
.hero.video-pronto .hero__video{opacity:1}

.hero__veil{
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      rgba(0,13,51,.72) 0%,
      rgba(0,25,105,.60) 40%,
      rgba(0,13,51,.90) 100%),
    /* reforço à esquerda: é onde mora o título */
    linear-gradient(100deg,
      rgba(0,13,51,.46) 0%,
      rgba(0,13,51,.10) 58%,
      rgba(0,13,51,0) 100%);
}

/* brilho ambiente atrás do painel */
.hero__glow{
  position:absolute;
  z-index:-1;
  top:-10%;
  right:-15%;
  width:min(1000px, 90vw);
  aspect-ratio:1;
  background:radial-gradient(circle at 50% 50%, var(--ink-mid) 0%, rgba(4,23,90,.45) 38%, transparent 68%);
  pointer-events:none;
}

.hero > .wrap{width:100%}
.hero__head .eyebrow{color:var(--muted-dark)}

.hero__title{
  /* A máscara .line puxa .22em para cima (padding compensado por margem
     negativa), então a margem aqui precisa ser maior que o respiro
     desejado — senão o título invade o marcador acima. */
  margin-top:clamp(52px, 9vh, 116px);
  /* Quem manda é a altura (11.5vh): impede o título de empurrar o
     resto do hero para fora da tela. Abaixo de 700px esse teto
     sufocaria a manchete, então § 13 troca por uma escala em vw. */
  font-size:clamp(28px, min(7.2vw, 11.5vh), 96px);
  line-height:.87;
}
.line{
  display:block;
  overflow:hidden;
  padding-top:.22em;
  margin-top:-.22em;
  padding-bottom:.08em;
  margin-bottom:-.08em;
}
.line__in{display:block;will-change:transform}
.line--soft{color:var(--muted-dark)}
.dot{
  display:inline-block;
  width:.12em;
  height:.12em;
  margin-left:.05em;
  background:var(--orange);
  vertical-align:baseline;
}

.hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px, 400px);
  gap:clamp(26px, 4vw, 68px);
  align-items:end;
}
.hero__lead{
  max-width:52ch;
  font-size:clamp(16px, 1.5vw, 18.5px);
  color:var(--muted-dark);
}
.hero__lead b{color:var(--on-dark);font-weight:600}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(18px, 2.6vh, 30px)}

/* painel de operação — elemento-assinatura */
.board{
  border:1px solid var(--rule-dark);
  border-radius:var(--radius);
  overflow:hidden;
  background:linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
  backdrop-filter:blur(3px);
}
.board__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:clamp(8px, 1.2vh, 12px) 18px;
  border-bottom:1px solid var(--rule-dark);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-dark);
}
.board__live{display:flex;align-items:center;gap:8px;color:var(--on-dark)}
.live{
  width:7px;height:7px;
  border-radius:50%;
  background:var(--orange);
  box-shadow:0 0 0 0 rgba(255,100,0,.6);
  animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,100,0,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,100,0,0)}
  100%{box-shadow:0 0 0 0 rgba(255,100,0,0)}
}

.board__row + .board__row{border-top:1px solid rgba(255,255,255,.07)}
.board__row a{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:baseline;
  gap:14px;
  padding:clamp(8px, 1.15vh, 13px) 18px;
  font-family:var(--mono);
  font-size:13px;
  transition:background-color .3s var(--ease);
}
/* marcador que acompanha a varredura e o hover */
.board__row a::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--orange);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .35s var(--ease);
}
.board__idx{color:rgba(255,255,255,.32);font-size:11px}
.board__name{color:var(--muted-dark);transition:color .3s var(--ease)}
.board__meta{
  color:rgba(255,255,255,.3);
  font-size:11px;
  letter-spacing:.04em;
  white-space:nowrap;
  transition:color .3s var(--ease);
}
.board__row.is-scan a::before,
.board__row a:hover::before,
.board__row a:focus-visible::before{transform:scaleY(1)}
.board__row.is-scan .board__name,
.board__row a:hover .board__name{color:var(--on-dark)}
.board__row.is-scan .board__meta,
.board__row a:hover .board__meta{color:var(--orange)}
.board__row a:hover{background:rgba(255,255,255,.04)}

/* faixa de números + indicador de scroll */
.hero__strip{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  padding-top:clamp(16px, 2.4vh, 30px);
  border-top:1px solid var(--rule-dark);
}
.stats{display:flex;flex-wrap:wrap;gap:clamp(28px, 5vw, 64px)}
.stat dd{
  display:flex;
  align-items:baseline;
  /* Thunder ExtraBold, como os títulos. É bem mais estreita que a
     Archivo, por isso o corpo sobe: o mesmo tamanho aparente exige
     mais px. O tracking negativo também sai — a Thunder já é
     condensada e apertar mais fecharia as contraformas. */
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(34px, min(4.4vw, 6vh), 58px);
  letter-spacing:.01em;
  line-height:1;
  color:var(--orange);
  font-variant-numeric:tabular-nums;
}
/* o "+" já herda o laranja; mantido para o caso de o dd mudar de cor */
.stat dd i{font-style:normal;color:inherit}
.stat dt{
  margin-top:8px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted-dark);
}

.cue{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted-dark);
  transition:color .25s var(--ease);
}
.cue:hover{color:var(--on-dark)}
.cue i{
  position:relative;
  display:block;
  width:1px;
  height:clamp(28px, 4.4vh, 42px);
  background:var(--rule-dark);
  overflow:hidden;
}
.cue i::after{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:14px;
  background:var(--orange);
  animation:cue 2s var(--ease-io) infinite;
}
@keyframes cue{
  0%{transform:translateY(-100%)}
  60%,100%{transform:translateY(300%)}
}

/* ---------- 6. seções ---------- */
.section{padding-block:var(--sec-y)}
.section--paper{background:var(--paper)}
.section--white{background:var(--white)}

.sec-head{max-width:760px;margin-bottom:clamp(44px, 6vw, 68px)}
.sec-head h2{
  margin-top:18px;
  font-size:clamp(38px, 6.4vw, 84px);
}
.sec-head > p:last-child{
  margin-top:20px;
  font-size:17px;
  color:var(--muted);
}

/* ---------- 7. cases ----------
   Foto 16:9 limpa, sem nada por cima. Abaixo dela ficam apenas
   o marcador com o nome do cliente e o título do case. */
.case{
  position:relative;
  display:flex;
  flex-direction:column;
  /* largura e posição vêm do grid espalhado (7b), não daqui */
  background:var(--paper);
  will-change:transform;
}

.shot{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#E7E8EF;
  border:1px solid var(--rule);
  border-radius:var(--radius);
}
.shot img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.02);
  transition:transform .8s var(--ease);
}
.case:hover .shot img{transform:scale(1.06)}

.case__body{padding-top:clamp(18px, 2vw, 26px)}
.case__body h3{
  margin-top:12px;
  font-size:clamp(24px, 2.6vw, 38px);
}



/* placeholder dos cases sem foto */
.shot--empty{
  display:grid;
  place-content:center;
  background:
    repeating-linear-gradient(135deg, rgba(0,25,105,.05) 0 1px, transparent 1px 10px),
    var(--paper);
}
.shot--empty::before{
  content:"";
  position:absolute;
  inset:14px;
  border:1px solid var(--rule);
  border-radius:var(--radius);
}
.shot__note{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
}
.shot__note::before{
  content:"";
  display:block;
  width:22px;
  height:2px;
  margin:0 auto 12px;
  background:var(--orange);
}

/* ---------- 7b. cases espalhados ----------
   Os seis cards ocupam uma malha de 12 colunas, cada um com largura,
   coluna inicial e recuo vertical próprios. O resultado é uma composição
   assimétrica em vez de uma pilha — o olho desce em ziguezague.

   A malha é o que garante que o "espalhado" seja deliberado: nada se
   sobrepõe por acidente e a coluna de leitura continua previsível. */
.cases{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  column-gap:clamp(16px, 2.4vw, 34px);
  align-items:start;
}

/* Posições: cada card na sua própria linha, com coluna e largura
   próprias. Os cards alternam entre os lados e mudam de tamanho —
   é daí que vem o espalhamento.

   Cada um ocupa uma linha explícita e os recuos são sempre positivos.
   Com margem negativa, cards que dividem as mesmas colunas acabavam
   invadindo o título do anterior; o recuo por linha evita isso por
   construção, sem depender de acertar altura de imagem. */
/* Larguras próximas (6 ou 7 de 12 colunas) para os cards ficarem
   parecidos em escala. Nos pares que se cruzam na vertical — 1&2,
   3&4, 5&6 — as colunas são disjuntas por construção: um ocupa a
   metade esquerda, o outro a direita. O que varia é a coluna de
   início e o quanto cada um sobe, não o tamanho. */
.case:nth-child(1){grid-row:1; grid-column:1 / span 6}
.case:nth-child(2){grid-row:2; grid-column:7 / span 6; margin-top:clamp(-190px, -15vw, -90px)}
.case:nth-child(3){grid-row:3; grid-column:1 / span 6}
.case:nth-child(4){grid-row:4; grid-column:7 / span 6; margin-top:clamp(-210px, -16vw, -100px)}
.case:nth-child(5){grid-row:5; grid-column:1 / span 6}
.case:nth-child(6){grid-row:6; grid-column:7 / span 6; margin-top:clamp(-170px, -13vw, -80px)}

/* A variação vem daqui: cada card recua um pouco diferente dentro
   da própria faixa, quebrando o alinhamento em duas colunas rígidas. */
.case:nth-child(3){margin-left:clamp(0px, 2.2vw, 34px)}
.case:nth-child(5){margin-right:clamp(0px, 2.6vw, 40px)}
.case:nth-child(6){margin-left:clamp(0px, 1.6vw, 24px)}

/* Respiro entre linhas. Apertado o bastante para dois cards
   dividirem a tela — é o cruzamento deles que faz o espalhamento
   ser percebido. Gap largo demais devolve a sensação de lista. */
.cases{row-gap:clamp(24px, 3vw, 52px)}

/* espaço embaixo do conjunto, para o último card não colar na seção */
.cases > :last-child{margin-bottom:clamp(40px, 6vw, 90px)}



/* O link cobre o card inteiro por um ::after esticado — a foto e o
   texto ficam clicáveis, sem embrulhar tudo numa âncora (o que
   deixaria a imagem dentro do nome do link para leitores de tela).
   .case já é position:relative, então o inset:0 casa com o card. */
/* A camada clicável fica no .case, não no ::after do próprio link:
   o <h3> recebe transform na animação de entrada, o que cria contexto
   de empilhamento e prenderia o ::after dentro do texto — a foto
   continuaria por cima e só o título responderia ao clique.
   Ancorada no article, a camada cobre foto e texto. */
.case{position:relative}
.case.is-clicavel{cursor:pointer}
.case:has(.case__link)::after,
.case.is-clicavel::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  cursor:pointer;
}

/* link do card para a página de case: herda a cor do título e
   ganha um sublinhado laranja que cresce no hover */
.case__link{
  color:inherit;
  background-image:linear-gradient(var(--orange), var(--orange));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size .45s var(--ease);
}
.case:hover .case__link,
.case__link:focus-visible{background-size:100% 2px}

/* botão "ver todos" ao pé da seção de trabalhos na home */
.cases__more{
  margin-top:clamp(40px, 6vw, 76px);
  text-align:center;
}

/* ---------- 7c. grade da página de trabalhos ----------
   Página trabalhos.html: todos os cases numa grade regular, sem o
   espalhamento da home. Aqui a leitura é de catálogo — o visitante
   veio comparar, não ser conduzido. */
.grid-cases{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:clamp(28px, 4vw, 56px) clamp(20px, 2.6vw, 36px);
}
.gcase{position:relative;display:flex;flex-direction:column}
.gcase .shot{margin:0}
.gcase__body{padding-top:clamp(14px, 1.6vw, 20px)}
.gcase__body h3{
  margin-top:10px;
  font-size:clamp(21px, 2.2vw, 30px);
}
/* o link cobre o card inteiro: alvo grande, marcação simples */
.gcase__link::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:var(--radius);
}
.gcase__link{
  color:inherit;
  background-image:linear-gradient(var(--orange), var(--orange));
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 2px;
  transition:background-size .45s var(--ease);
}
.gcase:hover .gcase__link,
.gcase__link:focus-visible{background-size:100% 2px}
.gcase:hover .shot img{transform:scale(1.06)}

/* ---------- 8. cards de serviço ---------- */
/* São 6 serviços: 3x2 é a única divisão que fecha certo. Antes isto
   era repeat(auto-fit, minmax(280px, 1fr)), que escolhe o número de
   colunas pela largura disponível — ao alargar o --wrap para 1320px
   passaram a caber 4 colunas e a grade virou 4+2. Fixar em 3 tira a
   decisão da largura da tela. */
.cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}
.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:32px 28px;
  background:var(--white);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card::before{
  content:"";
  position:absolute;
  top:-1px;left:-1px;
  width:0;height:5px;
  background:var(--orange);
  transition:width .4s var(--ease);
}
.card:hover{
  border-color:var(--ink);
  transform:translateY(-6px);
  box-shadow:0 22px 44px -28px rgba(0,25,105,.55);
}
.card:hover::before{width:72px}
.card h3{font-size:32px;margin-bottom:12px;letter-spacing:.03em}
.card__desc{font-size:14.5px;color:var(--muted)}
.card ul{margin-top:18px;font-size:14px}
.card ul li{display:flex;gap:10px;padding:5px 0;color:var(--muted)}
.card ul li::before{
  content:"";
  width:6px;height:6px;
  flex:none;
  margin-top:9px;
  background:var(--orange);
}

/* ---------- 9. processo ---------- */
/* São 4 etapas em sequência, com uma régua horizontal ligando-as:
   o número de colunas é parte do desenho, não algo a deduzir da
   largura. Fixado em 4 pelo mesmo motivo dos cards de serviço. */
.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
}
/* régua que se desenha conforme o scroll (--progress vem do JS) */
.steps::before{
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:2px;
  background:var(--rule);
}
.steps::after{
  content:"";
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  height:2px;
  background:var(--ink);
  transform:scaleX(var(--progress, 1));
  transform-origin:left;
}
.step{padding:30px 26px 32px;border-right:1px solid var(--rule)}
.step:first-child{padding-left:0}
.step:last-child{border-right:0}
.step__n{
  font-family:var(--mono);
  font-size:12px;
  font-weight:500;
  letter-spacing:.16em;
  color:var(--orange);
}
.step h3{font-size:27px;margin:14px 0 10px;letter-spacing:.03em}
.step p{font-size:14.5px;color:var(--muted)}

/* ---------- 11. cta + rodapé ---------- */
.cta{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding-block:var(--sec-y);
  background:var(--ink);
  color:var(--on-dark);
  border-top:1px solid rgba(255,255,255,.14);
}
/* brilho laranja no canto — espelha o brilho azul do hero e fecha o ciclo */
.cta__glow{
  position:absolute;
  z-index:-1;
  right:-12%;
  bottom:-45%;
  width:min(880px, 78vw);
  aspect-ratio:1;
  pointer-events:none;
  background:radial-gradient(circle at 50% 50%,
    rgba(255,100,0,.20) 0%, rgba(255,100,0,.07) 38%, transparent 70%);
}

.cta__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(250px, 330px);
  gap:clamp(34px, 5vw, 76px);
  align-items:end;
}
.cta .eyebrow{color:var(--muted-dark)}
.cta__title{
  margin-top:20px;
  font-size:clamp(34px, 5vw, 68px);
}
.cta__lead{
  max-width:520px;
  margin-top:22px;
  font-size:17px;
  color:var(--muted-dark);
}
.cta__buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(24px, 3vw, 34px)}

/* coluna de contato: preenche o vazio da direita com informação útil */
.cta__direct{border-top:1px solid rgba(255,255,255,.18);padding-top:18px}
.cta__label{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted-dark);
}
.cta__list{margin-top:10px}
.cta__list li + li{border-top:1px solid rgba(255,255,255,.09)}
.cta__list a{
  display:block;
  padding:13px 0;
  transition:padding-left .3s var(--ease);
}
.cta__list a:hover,
.cta__list a:focus-visible{padding-left:8px}
.cta__what{
  display:block;
  font-family:var(--mono);
  font-size:9.5px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.34);
}
.cta__val{
  display:block;
  margin-top:5px;
  font-size:15px;
  color:var(--on-dark);
  transition:color .25s var(--ease);
}
.cta__list a:hover .cta__val,
.cta__list a:focus-visible .cta__val{color:var(--orange)}
.cta__where{
  margin-top:18px;
  font-family:var(--mono);
  font-size:10.5px;
  line-height:1.8;
  letter-spacing:.04em;
  color:rgba(255,255,255,.38);
}

.site-footer{
  padding:clamp(48px, 6vw, 64px) 0 34px;
  background:var(--ink-deep);
  color:var(--muted-dark);
  font-size:14px;
}
.fgrid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:36px;
  padding-bottom:34px;
  border-bottom:1px solid var(--rule-dark);
}
.fgrid__about{margin-top:18px;max-width:340px}
.site-footer h2{
  margin-bottom:14px;
  font-family:var(--mono);
  font-weight:500;
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--on-dark);
}
.site-footer li{padding:3px 0}
.site-footer a{transition:color .25s var(--ease)}
.site-footer a:hover{color:var(--orange)}
.fbase{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding-top:22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.03em;
  color:rgba(255,255,255,.35);
}

/* ---------- 12. estados de animação ----------
   Só escondem quando o JS está ativo e o usuário não pediu
   movimento reduzido — sem JS o site aparece inteiro. */
@media (prefers-reduced-motion: no-preference){
  /* O estado inicial escondido depende de .gsap-pronto, não só de .js.
     Quem revela estes elementos é a timeline do GSAP, que vem de CDN:
     se ela demorar ou não carregar, o título ficaria invisível para
     sempre. Com a classe, o padrão é o texto visível e a animação é um
     acréscimo — nunca um pré-requisito para ler a página. */
  /* O título entra por transição CSS, não pelo GSAP. O motivo é
     robustez: a timeline depende do ticker do GSAP, que por sua vez
     depende de rAF e de lagSmoothing — se qualquer um falha, o título
     fica invisível. Uma transição CSS é executada pelo compositor e
     não tem essa cadeia de dependências.

     .intro-on é adicionada pelo JS no quadro seguinte ao carregamento;
     sem JS, nada esconde e o texto já está visível. */
  .js.gsap-pronto [data-intro="2"] .line__in{
    transform:translateY(135%);
    transition:transform 1.05s var(--ease);
  }
  .js.gsap-pronto.intro-on [data-intro="2"] .line__in{transform:none}
  .js.gsap-pronto.intro-on [data-intro="2"]:nth-of-type(2) .line__in{transition-delay:.07s}

  .js.gsap-pronto [data-intro]:not(.line),
  .js.gsap-pronto [data-reveal],
  .js.gsap-pronto [data-stagger] > *{opacity:0}
  /* data-case-line é revelado por IntersectionObserver, que não
     depende do GSAP — por isso continua só com .js */
  .js [data-case-line]{opacity:0}
  /* Entrada dos cases: fade. A foto sai de um leve afastamento e o texto
     de 6px, o suficiente para o olho perceber que chegou — sem deslizar. */
  .js [data-case-media]{
    opacity:0;
    transition:opacity 1s var(--ease);
  }
  .js [data-case-media] .shot__inner{
    transform:scale(1.025);
    transition:transform 1.2s var(--ease);
  }
  .js .case.is-in [data-case-media]{opacity:1}
  .js .case.is-in [data-case-media] .shot__inner{transform:none}

  .js [data-case-line]{
    transform:translateY(6px);
    transition:opacity .8s var(--ease), transform .8s var(--ease);
  }
  .js .case.is-in [data-case-line]{opacity:1;transform:none}
  .js .case [data-case-line]:nth-child(2){transition-delay:.09s}
  .js .steps{--progress:0}
  .js .step{opacity:0}

  /* CTA: revelado quando a seção entra (script.js › CTA) */
  .js [data-cta]:not(.line){
    opacity:0;
    transform:translateY(22px);
    transition:opacity .8s var(--ease), transform .9s var(--ease);
  }
  .js [data-cta] .line__in{
    transform:translateY(135%);
    transition:transform 1s var(--ease);
  }
  .js .cta.is-in [data-cta]:not(.line){opacity:1;transform:none}
  .js .cta.is-in [data-cta] .line__in{transform:none}

  .js .cta .line:nth-child(1) .line__in{transition-delay:.10s}
  .js .cta .line:nth-child(2) .line__in{transition-delay:.20s}
  .js .cta .cta__lead{transition-delay:.34s}
  .js .cta .cta__buttons{transition-delay:.44s}
  .js .cta .cta__direct{transition-delay:.54s}
}

/* Tablet: a malha cai para 6 colunas. O espalhamento continua,
   com menos amplitude — em tela estreita o ziguezague cansa. */
@media (max-width:900px){
  .cases{grid-template-columns:repeat(6, 1fr)}
  /* larguras iguais (5 de 6) e recuo lateral alternado, na mesma
     lógica do desktop: o que varia é a posição, não o tamanho */
  .case:nth-child(n){grid-column:1 / span 5;  margin-top:5vw;
                     margin-left:0; margin-right:0}
  .case:nth-child(1){margin-top:0}
  .case:nth-child(even){grid-column:2 / span 5}
}

/* Telas baixas (notebooks 13", janela reduzida): o hero precisa
   caber sem cortar a faixa de contadores. Reduz o respiro, não o
   tamanho da tipografia — encolher a manchete seria pior. */
@media (max-height:820px) and (min-width:701px){
  .hero{
    padding-block:clamp(72px, 9.5vh, 112px) clamp(10px, 1.4vh, 20px);
    gap:clamp(10px, 1.6vh, 24px);
  }
  /* Também aqui a margem precisa vencer o -.22em da máscara .line,
     senão o título encosta no marcador. Menor que no padrão, porque
     em tela baixa o respiro é caro — mas nunca colado. */
  .hero__title{margin-top:clamp(44px, 6.6vh, 76px)}
}

/* ---------- 13. responsivo ---------- */
@media (max-width:1080px){
  .hero__grid{grid-template-columns:minmax(0,1fr) minmax(300px, 340px)}
}

@media (max-width:900px){
  .cta__grid{grid-template-columns:1fr;gap:38px;align-items:start}
}

@media (max-width:960px){
  .hero{gap:clamp(28px, 5vw, 44px)}
  .hero__grid{grid-template-columns:1fr;gap:34px;align-items:stretch}
  .hero__lead{max-width:none}
  .board{max-width:520px}
  .fgrid{grid-template-columns:1fr 1fr}
  .fgrid > :first-child{grid-column:1 / -1}
}

@media (max-width:860px){
  /* 3 colunas fixas não cabem aqui; auto-fit fazia isso sozinho,
     agora a queda é explícita: 3 -> 2 -> 1 */
  .cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .grid-cases{gap:clamp(24px, 4vw, 40px) 18px}
  .steps{grid-template-columns:1fr}
  .step{padding:26px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .step:last-child{border-bottom:0}
}

@media (max-width:820px){
  /* Toda a navegação passa para o menu de celular — inclusive o botão
     de contato, que já é o item 04 da lista em tamanho de toque bem
     maior. Com ele fora, a barra fica com dois elementos e o
     space-between encosta um em cada ponta, como deve ser: antes o
     botão era o item do meio e ficava centralizado. */
  .nav{display:none}
  /* o seletor de idioma passa para dentro do menu */
  .bar .lang{display:none}
  .burger{display:block}
  .bar{gap:12px}
}

@media (max-width:720px){
  .hero__strip{flex-direction:column;align-items:flex-start;gap:26px}
  .cue{flex-direction:row;align-items:center}
  .cue i{width:34px;height:1px}
  .cue i::after{inset:0 auto 0 0;width:12px;height:100%;animation-name:cue-x}
  .fgrid{grid-template-columns:1fr}
  .fgrid > :first-child{grid-column:auto}
  .stats{gap:26px 32px}
  .board{max-width:none}
}
@keyframes cue-x{
  0%{transform:translateX(-100%)}
  60%,100%{transform:translateX(300%)}
}

/* Celular: uma coluna só. O espalhamento vira alternância de
   largura e recuo — mantém ritmo sem espremer as fotos. */
@media (max-width:620px){
  .cards{grid-template-columns:1fr}
  .grid-cases{grid-template-columns:1fr}
  .cases{grid-template-columns:1fr;row-gap:clamp(28px, 7vw, 44px)}
  .case:nth-child(n){grid-column:1;margin-top:0}
  .case:nth-child(even){margin-left:clamp(18px, 7vw, 46px)}
  .case:nth-child(odd){margin-right:clamp(18px, 7vw, 46px)}
  .case:nth-child(2) .case__body h3,
  .case:nth-child(5) .case__body h3{font-size:clamp(19px, 5vw, 26px)}
}

/* ============================================================
   CELULAR — revisão dedicada
   As regras acima resolvem o empilhamento; estas cuidam da
   leitura: escala da manchete, respiro, alvo de toque e ritmo.
   ============================================================ */
@media (max-width:700px){
  /* A manchete volta a ser manchete. Sem o teto de vh, que só
     faz sentido quando o hero disputa altura com o painel. */
  .hero__title{font-size:clamp(38px, 12.5vw, 76px);line-height:.9}

  /* o hero deixa de tentar caber numa tela só: no celular a
     rolagem é esperada, e espremer tudo é o que quebrava a leitura */
  .hero{min-height:auto;padding-block:clamp(104px, 20vh, 140px) clamp(40px, 7vh, 64px)}

  .hero__lead{font-size:16px;line-height:1.6}
  .hero__grid{gap:30px}

  /* botões lado a lado ficam apertados demais abaixo de 700px */
  .hero__cta{display:grid;grid-template-columns:1fr;gap:10px;width:100%}
  .hero__cta .btn{width:100%;justify-content:center}

  /* a seta de rolagem colidia com o painel de operação */
  .hero__strip .cue{display:none}

  /* contadores: 2 colunas fixas em vez de quebra irregular */
  /* Um número por linha. Em duas colunas os rótulos longos
     ("países alcançados", "frentes de trabalho") quebravam em duas
     linhas e desalinhavam os pares. */
  .stats{display:grid;grid-template-columns:1fr;gap:22px}

  /* ALVOS DE TOQUE
     Links de contato e títulos de case ficavam em 20–23px de altura.
     O padding vertical leva a área tocável para ~44px sem mudar o
     tamanho da letra nem abrir buraco no layout. */
  .cta__list a,
  .site-footer ul a{
    display:inline-block;
    padding-block:11px;
  }
  .case__link{display:inline-block;padding-block:8px}

  /* RÓTULOS
     Os rótulos técnicos moram entre 9,5 e 10,5px — tamanho pensado
     para desktop. No celular sobem para 11–11,5px e perdem um pouco
     de tracking, que é o que os tornava difíceis de ler em corpo
     pequeno. O papel visual continua o mesmo. */
  .eyebrow,
  .board__label,
  .board__live,
  .cue,
  .cta__label,
  .cta__where,
  .stat dt{font-size:11.5px;letter-spacing:.16em}
  .cta__what{font-size:11px;letter-spacing:.14em}
  .board__idx,
  .board__meta{font-size:11.5px}
}

@media (max-width:560px){
  .logo--sm{height:40px}
  .logo--neg{height:60px}
  .hero__cta{width:100%}
  .hero__cta .btn{flex:1 1 auto}
  .board__row a{grid-template-columns:auto minmax(0,1fr);row-gap:2px;font-size:12.5px}
  .board__meta{grid-column:2;white-space:normal}
  .card{padding:28px 22px}
}

/* movimento reduzido: tudo visível, nada anima */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .cursor{display:none}
  .hero__video{display:none}
  .cue i::after{display:none}
}

/* wrapper de parallax das fotos (o zoom do hover fica no <img>) */
/* Cobre exatamente o card. O -5% lateral existia para dar folga ao
   parallax horizontal; sem ele, alargava a caixa e o object-fit:cover
   passava a cortar 9% da altura de imagens que já eram 16:9. */
.shot__inner{
  position:absolute;
  inset:0;
}
.shot__inner img{height:100%}