/* ==========================================================================
   AKM — Nova Home V2  (style_novaHomeV2.css)

   Página vertical, quatro blocos:
     1) NAV fixa            — transparente no hero, ganha fundo ao rolar
     2) HERO                — vídeo em tela cheia + logo AKM e as chamadas
     3) INFINITAS FORMAS    — lista de serviços que abre no mouse over
     4) CASES               — pílulas que filtram o grid; "SINCE 1996" troca
                              o grid pelo texto institucional + vídeo
     5) FOOTER

   MEDIDAS
   Todas vêm do layout de referência (1920 x 5993), lido pixel a pixel. Onde
   há clamp(), o valor máximo é exatamente o do layout e o termo em vw é
   medida/1920*100 — então em 1920px de largura a página bate com o Figma e,
   abaixo disso, tudo encolhe junto.

   Comportamento em assets/js/novaHomeV2/script.js
   ========================================================================== */

:root {
  /* --- cores amostradas no layout --------------------------------------- */
  --v2-blue: #1122FF;          /* cases e painel SINCE 1996                 */
  --v2-blue-deep: #0018BD;     /* ponta esquerda do degradê do hero         */
  --v2-navy: #000000;          /* ponta direita do degradê do hero          */
  --v2-dark: #101010;          /* fundo de INFINITAS FORMAS                 */
  --v2-dark-top: #050505;      /* topo da seção escura, saindo do vídeo     */
  --v2-coral: #FF6143;         /* réguas, setas e títulos em itálico        */
  --v2-cream: #FFEEEE;         /* texto sobre escuro e fundo do modo claro  */
  --v2-cream-dim: rgba(255, 238, 238, .78);
  --v2-veil: rgba(16, 16, 16, .72);   /* véu da barra de topo               */
  --v2-spot: rgba(16, 16, 16, .80);   /* véu do spotlight do vídeo          */

  /* --- tipografia ------------------------------------------------------- */
  --v2-mono: "Space Mono", "Courier New", monospace;
  --v2-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --v2-serif: "Playfair Display", Georgia, "Times New Roman", serif;

  /* --- medidas ---------------------------------------------------------- */
  --v2-gutter: clamp(20px, 5.2vw, 180px);   /* 180px em 1920                */
  --v2-maxw: 1560px;                        /* 1920 - 2 x 180               */
  --v2-navh: clamp(62px, 4.69vw, 90px);     /* barra de topo: 90px          */
  --v2-radius: 12px;                        /* raio dos cards               */

  /* recuo da coluna de texto da lista: 329 - 180 = 149px */
  --v2-indent: clamp(30px, 7.76vw, 149px);
  /* recuo do "é a nossa essência." em relação a "TRANSFORMAR":
     71px em 1920, 21px em 360 */
  --v2-sobre-indent: clamp(21px, 3.7vw, 71px);
  /* corpo da descrição da lista — repetido aqui porque a altura reservada
     da linha aberta é calculada a partir dele */
  --v2-desc-fs: clamp(11px, .958vw, 18.4px);
  --v2-desc-lh: 1.4;
}

* { box-sizing: border-box; }

/* O JS esconde cards, o painel SINCE 1996 e o aviso de vazio com o atributo
   `hidden`. Como esses elementos têm display próprio (grid/block), sem esta
   regra o `hidden` não teria efeito nenhum. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #3a3a3a var(--v2-dark);
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--v2-dark); }
html::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 999px; }
html::-webkit-scrollbar-thumb:hover { background: #4d4d4d; }

.v2-body {
  margin: 0;
  background: var(--v2-dark);
  color: var(--v2-cream);
  font-family: var(--v2-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, video { max-width: 100%; }

/* Caixa de conteúdo: 1560px centrados, margens de 180px em 1920. */
.v2-wrap {
  width: min(var(--v2-maxw), 100% - 2 * var(--v2-gutter));
  margin-inline: auto;
}

/* Só para leitores de tela */
.v2-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1) BARRA DE TOPO
   Sobre o hero não há fundo nenhum — o layout mostra o vídeo passando por
   baixo dos links. Ao rolar entra o véu (#101010 a 72%), que é o mesmo véu
   que o board usa no estado escurecido. O desfoque é decisão nossa: a barra
   flutua sobre vídeo e sobre fotos claras de case, e sem ele os links de
   #FFEEEE somem em alguns quadros.
   ========================================================================== */
.v2-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--v2-navh);
  display: flex;
  align-items: center;
}

.v2-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  background: var(--v2-veil);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
          backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid rgba(255, 238, 238, .10);
  transition: opacity .45s ease, background-color .45s ease, border-color .45s ease;
}
.v2-nav.is-stuck::before { opacity: 1; }

/* Sobre a seção de cases em modo creme a barra inverte. */
.v2-nav.is-light::before {
  background: rgba(255, 238, 238, .90);
  border-bottom-color: rgba(17, 34, 255, .16);
}

.v2-nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* o vao entre o ultimo link e o botao e o mesmo dos links: 56px */
  gap: clamp(14px, 2.92vw, 56px);
}

/* a logo fica sozinha na esquerda e empurra menu + botao para a direita */
.v2-nav__logo { display: block; line-height: 0; flex: none; margin-right: auto; }
.v2-nav__logo img {
  display: block;
  height: clamp(28px, 2.19vw, 42px);       /* 42px em 1920 */
  width: auto;
}

.v2-nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.92vw, 56px);          /* 56px em 1920 */
}

/* A logo dentro da gaveta só existe na versão de celular. */
.v2-nav__menu-logo { display: none; }

/* Space Mono 700, 14px, sem tracking extra — a fonte já é larga. */
.v2-nav__link {
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(10px, .729vw, 14px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--v2-cream);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  transition: color .3s ease;
}
.v2-nav__link:hover,
.v2-nav__link:focus-visible,
.v2-nav__link.is-active { color: var(--v2-coral); }

.v2-nav.is-light .v2-nav__link { color: var(--v2-blue); }
.v2-nav.is-light .v2-nav__link:hover,
.v2-nav.is-light .v2-nav__link.is-active { color: var(--v2-coral); }

/* --- botão-pílula do topo (206 x 41 em 1920) ----------------------------- */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  height: clamp(34px, 2.135vw, 41px);
  padding: 0 clamp(16px, 1.667vw, 32px);
  border: 1.5px solid var(--v2-cream);
  border-radius: 999px;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(10px, .729vw, 14px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--v2-cream);
  text-decoration: none;
  white-space: nowrap;
  background: transparent;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.v2-btn:hover,
.v2-btn:focus-visible {
  background: var(--v2-cream);
  color: #06103a;
  border-color: var(--v2-cream);
}
.v2-nav.is-light .v2-btn { border-color: var(--v2-blue); color: var(--v2-blue); }
.v2-nav.is-light .v2-btn:hover { background: var(--v2-blue); color: var(--v2-cream); }

/* --- hambúrguer (abaixo de 1200px) --------------------------------------- */
.v2-burger {
  display: none;
  width: 40px; height: 40px;
  padding: 0; border: 0;
  background: none;
  cursor: pointer;
  position: relative;
  flex: none;
}
.v2-burger span,
.v2-burger::before,
.v2-burger::after {
  content: "";
  position: absolute;
  left: 9px; right: 9px;
  height: 1.5px;
  background: currentColor;
  color: var(--v2-cream);
  transition: transform .3s ease, opacity .25s ease;
}
.v2-burger::before { top: 13px; }
.v2-burger span   { top: 19.5px; }
.v2-burger::after { top: 26px; }
.v2-nav.is-light .v2-burger span,
.v2-nav.is-light .v2-burger::before,
.v2-nav.is-light .v2-burger::after { color: var(--v2-blue); }
.v2-nav.is-open .v2-burger::before { transform: translateY(6.5px) rotate(45deg); }
.v2-nav.is-open .v2-burger span    { opacity: 0; }
.v2-nav.is-open .v2-burger::after  { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   2) HERO — 1920 x 1080 no layout, ou seja, a viewport inteira
   O vídeo traz o degradê azul, o "30 ANOS", o homem na escada e o fade para
   preto no pé. O degradê do background só aparece enquanto o vídeo carrega.
   ========================================================================== */
.v2-hero {
  position: relative;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  background: linear-gradient(35.5deg,
    var(--v2-blue-deep) 29%, #0013A5 43%, #000A72 62%,
    #000334 82%, var(--v2-navy) 100%);
}

.v2-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;   /* mantém o "30" visível em telas estreitas */
  z-index: 0;
}

/* O vídeo já escurece de 85,5% a 91,5% da própria altura; este véu só
   garante a emenda quando o "cover" corta a base em telas mais altas. */
.v2-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 16%;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(4, 6, 6, 0) 0%, var(--v2-dark-top) 92%);
}

.v2-hero__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* no layout o bloco fica 25px acima do centro exato da tela */
  padding-bottom: min(51px, 4.72svh);
}

/* 596 x 317 em tamanho natural, alinhada na margem de 180px */
.v2-hero__logo {
  display: block;
  width: clamp(230px, 31.04vw, 596px);
  height: auto;
  margin: 0;
}

/* Space Mono 26px, tracking 0.265em, entrelinha exata de 48px */
.v2-hero__lines {
  margin: clamp(22px, 3.23vw, 62px) 0 0;   /* 62px do pé da logo à caixa alta */
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(11px, 1.354vw, 26px);
  line-height: 1.846;                       /* 48px em 26px */
  letter-spacing: .248em;
  text-transform: uppercase;
  color: var(--v2-cream);
}
.v2-hero__lines span { display: block; }

.v2-hero__beyond {
  margin: clamp(2px, .21vw, 4px) 0 0;
  font-family: var(--v2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 3.18vw, 61px);
  line-height: 1.15;
  color: var(--v2-coral);
}

/* ==========================================================================
   3) INFINITAS FORMAS
   ========================================================================== */
.v2-formas {
  position: relative;
  /* saindo do vídeo o preto é #050505 e sobe até #101010 em ~108px */
  background:
    linear-gradient(180deg, var(--v2-dark-top) 0, var(--v2-dark) 108px),
    var(--v2-dark);
  padding: clamp(56px, 6.98vw, 134px) 0 clamp(56px, 7.4vw, 142px);
}

/* Space Mono 28px com tracking largo (o "I" com travessões é a assinatura) */
.v2-formas__label {
  margin: 0;
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(13px, 1.458vw, 28px);
  line-height: 1.2;
  letter-spacing: .339em;
  text-transform: uppercase;
  color: var(--v2-cream);
}

.v2-formas__title {
  margin: clamp(2px, .47vw, 9px) 0 0;
  margin-left: var(--v2-indent);
  font-family: var(--v2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(28px, 3.07vw, 59px);
  line-height: 1.1;
  color: var(--v2-coral);
}

/* --- a lista ------------------------------------------------------------- */
/* Uma linha está sempre aberta, então o bloco tem altura fixa (523px em
   1920) e nada abaixo dele se mexe durante o hover. */
.v2-list {
  margin: clamp(36px, 4.22vw, 81px) 0 0;
  border-top: 1px solid var(--v2-coral);
}

.v2-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: clamp(16px, 1.56vw, 30px) 0;
  border: 0;
  border-bottom: 1px solid var(--v2-coral);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.v2-item__head { display: flex; align-items: center; }

/* A seta fica alinhada ao título, não ao centro da linha: quando a
   descrição abre, ela não desce. */
.v2-item__arrow {
  flex: none;
  width: var(--v2-indent);
  line-height: 0;
}
.v2-item__arrow img {
  display: block;
  width: clamp(16px, 1.354vw, 26px);        /* 26x28, tamanho natural */
  height: auto;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* Archivo 23px, tracking 0.204em */
.v2-item__name {
  font-family: var(--v2-sans);
  font-weight: 400;
  font-size: clamp(12px, 1.198vw, 23px);
  line-height: 1.52;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--v2-cream);
  transition: color .3s ease;
}

/* grid-template-rows 0fr -> 1fr dá altura animável sem saber o tamanho
   do texto de antemão. */
.v2-item__desc {
  display: grid;
  grid-template-rows: 0fr;
  margin-left: var(--v2-indent);
  opacity: 0;
  transition: grid-template-rows .36s cubic-bezier(.22, .61, .36, 1),
              opacity .3s ease .06s;
}
.v2-item__desc > span { overflow: hidden; display: block; }
/* No layout a descrição cabe em uma linha só; em telas menores ela quebra
   naturalmente e a linha cresce junto. */
.v2-item__desc p {
  margin: clamp(8px, .94vw, 18px) 0 0;
  font-family: var(--v2-sans);
  font-weight: 400;
  font-size: var(--v2-desc-fs);
  line-height: var(--v2-desc-lh);
  color: var(--v2-cream-dim);
}
/* INCENTIVADOS & BEYOND tem dois parágrafos; os outros, um só */
.v2-item__desc p + p { margin-top: clamp(5px, .42vw, 8px); }


.v2-item.is-open .v2-item__desc { grid-template-rows: 1fr; opacity: 1; }
.v2-item.is-open .v2-item__arrow img { transform: translate(3px, -3px); }

/* Sem mouse não existe hover: as cinco descrições ficam abertas e o toque na
   linha vale como ir aos cases daquela frente. */
@media (hover: none) {
  .v2-item__desc { grid-template-rows: 1fr; opacity: 1; }
}
.v2-item:hover .v2-item__name,
.v2-item:focus-visible .v2-item__name { color: #fff; }
.v2-item:focus-visible { outline: 2px solid var(--v2-coral); outline-offset: 4px; }

/* ==========================================================================
   4) CASES — pílulas de filtro + grid, e o painel SINCE 1996
   ========================================================================== */
.v2-cases {
  position: relative;
  background: var(--v2-blue);
  padding: clamp(56px, 6.82vw, 131px) 0 clamp(56px, 7.4vw, 142px);
  transition: background-color .5s ease;
}
.v2-cases.is-cream { background: var(--v2-cream); }

/* --- pílulas: 44px de altura, borda de 2px, raio total ------------------- */
/* flex:1 1 0 com nowrap reproduz o layout — cinco pílulas de 233px e a de
   PROJETOS INCENTIVADOS em 279px, porque não encolhe abaixo do texto. */
.v2-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.198vw, 23px);
}

.v2-pill {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: clamp(32px, 2.292vw, 44px);
  padding: 0 clamp(12px, 1.667vw, 32px);
  border: 2px solid var(--v2-cream);
  border-radius: 999px;
  background: transparent;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(10px, .885vw, 17px);
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--v2-cream);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.v2-pill:hover { background: rgba(255, 238, 238, .14); }
.v2-pill:focus-visible { outline: 2px solid var(--v2-cream); outline-offset: 3px; }

/* A pílula ativa é sempre o inverso do fundo da seção. */
.v2-pill.is-active {
  background: var(--v2-cream);
  border-color: var(--v2-cream);
  color: var(--v2-blue);
}

.v2-cases.is-cream .v2-pill { border-color: var(--v2-blue); color: var(--v2-blue); }
.v2-cases.is-cream .v2-pill:hover { background: rgba(17, 34, 255, .1); }
.v2-cases.is-cream .v2-pill.is-active {
  background: var(--v2-blue);
  border-color: var(--v2-blue);
  color: var(--v2-cream);
}
.v2-cases.is-cream .v2-pill:focus-visible { outline-color: var(--v2-blue); }

/* --- grid: 3 colunas, gap 32, card 499x277, raio 12 ---------------------- */
.v2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.667vw, 32px);
  margin-top: clamp(30px, 3.96vw, 76px);
}

.v2-card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: var(--v2-radius);
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  aspect-ratio: 499 / 277;
  opacity: 1;
  transform: none;
  transition: opacity .38s ease, transform .38s ease;
}
.v2-card.is-out { opacity: 0; transform: translateY(14px); }

.v2-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
.v2-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, .7) 100%);
  opacity: 0;
  transition: opacity .4s ease;
}
/* sem vídeo não há o que abrir: nada de zoom, véu ou cursor de clique */
.v2-card--parado { cursor: default; }
.v2-card:not(.v2-card--parado):hover img,
.v2-card:focus-visible img { transform: scale(1.045); }
.v2-card:not(.v2-card--parado):hover::after,
.v2-card:focus-visible::after { opacity: 1; }
.v2-card:focus-visible { outline: 2px solid var(--v2-cream); outline-offset: 3px; }
.v2-cases.is-cream .v2-card:focus-visible { outline-color: var(--v2-blue); }

/* triângulo de play, no centro, só onde existe hover */
.v2-card__play {
  position: absolute;
  left: 50%; top: 50%;
  z-index: 2;
  width: 0; height: 0;
  border-style: solid;
  border-width: clamp(12px, 1.15vw, 22px) 0 clamp(12px, 1.15vw, 22px) clamp(20px, 1.93vw, 37px);
  border-color: transparent transparent transparent var(--v2-cream);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  transition: opacity .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .45));
}
.v2-card:hover .v2-card__play,
.v2-card:focus-visible .v2-card__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.v2-card__name {
  display: block;
  position: absolute;
  left: clamp(10px, 1.15vw, 22px);
  right: clamp(10px, 1.15vw, 22px);
  bottom: clamp(9px, .94vw, 18px);
  z-index: 2;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(9px, .625vw, 12px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v2-cream);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .35s ease, transform .35s ease;
}
.v2-card:hover .v2-card__name,
.v2-card:focus-visible .v2-card__name { opacity: 1; transform: none; }

/* --- categoria ainda sem case -------------------------------------------- */
.v2-empty {
  margin-top: clamp(30px, 3.96vw, 76px);
  padding: clamp(28px, 3vw, 56px) 0;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(11px, .729vw, 14px);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--v2-cream);
}
.v2-cases.is-cream .v2-empty { color: var(--v2-blue); }

/* ==========================================================================
   4b) PAINEL SINCE 1996
   ========================================================================== */
.v2-sobre {
  display: grid;
  grid-template-columns: minmax(0, 565fr) minmax(0, 935fr);
  gap: clamp(28px, 3.07vw, 59px);
  align-items: start;
  margin-top: clamp(30px, 3.02vw, 58px);
}

.v2-sobre__text .v2-sobre__label {
  margin: 0;
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(12px, 1.15vw, 22px);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--v2-cream);
}
.v2-sobre__text .v2-sobre__title {
  margin: clamp(2px, .42vw, 8px) 0 clamp(16px, 1.51vw, 29px) var(--v2-sobre-indent);
  font-family: var(--v2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(26px, 2.92vw, 56px);
  line-height: 1.1;
  color: var(--v2-coral);
}
/* O Figma traz este corpo em ~16px/23px, o que fica apertado num bloco
   longo. Subimos para 18px — o mesmo tamanho da descrição da lista de
   serviços — para os dois corpos de texto da página lerem igual. */
.v2-sobre__text p {
  margin: 0 0 clamp(10px, .94vw, 18px);
  font-family: var(--v2-sans);
  font-weight: 400;
  font-size: clamp(13px, .9375vw, 18px);
  line-height: 1.55;
  color: var(--v2-cream);
}
.v2-sobre__text p:last-child { margin-bottom: 0; }
.v2-sobre__text b { font-weight: 700; }
.v2-sobre__text i { font-style: italic; font-weight: 700; }

/* --- bloco do vídeo (935 x 524 em 1920) ---------------------------------- */
.v2-video {
  position: relative;
  width: 100%;
  aspect-ratio: 935 / 524;
  border: 1px solid rgba(255, 238, 238, .55);
  border-radius: 8px;
  overflow: hidden;
  background: var(--v2-blue);
}

/* Capa desenhada em CSS: o arquivo tem ~2 GB e nada dele é baixado antes
   do clique — nem um poster. */
.v2-video__cover {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, .3vw, 6px);
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--v2-blue);
  color: var(--v2-cream);
  cursor: pointer;
  overflow: hidden;
  transition: opacity .4s ease;
}
.v2-video__mark {
  position: absolute;
  left: 50%; top: 50%;
  width: 120%;
  max-width: none;
  transform: translate(-50%, -50%);
  opacity: .13;
  pointer-events: none;
}

/* Com a foto da equipe no lugar da capa azul: a marca d'água sai e entra um
   véu que segura a legibilidade do "30 anos" e do play. */
.v2-video__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2-video__cover.tem-foto { background: #06103a; }
.v2-video__cover.tem-foto .v2-video__mark { display: none; }
/* O "30 anos" e o play ficam no centro, que é justo onde a foto é mais
   clara — daí o véu ser radial no miolo, além do degradê do pé. */
.v2-video__cover.tem-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(38% 34% at 50% 50%, rgba(4, 8, 40, .62) 0%, rgba(4, 8, 40, 0) 100%),
    linear-gradient(180deg, rgba(4, 8, 40, .30) 0%, rgba(4, 8, 40, .24) 42%, rgba(4, 8, 40, .78) 100%);
  pointer-events: none;
}
/* Sobre a foto o "30 anos" desce para o canto: no fundo azul chapado ele
   podia dividir o centro com o play, aqui os dois brigavam. */
.v2-video__cover.tem-foto {
  align-items: flex-start;
  justify-content: flex-end;
  padding: 0 clamp(16px, 1.98vw, 38px) clamp(14px, 1.67vw, 32px);
  text-align: left;
}
.v2-video__cover.tem-foto .v2-video__30,
.v2-video__cover.tem-foto .v2-video__sub {
  text-shadow: 0 2px 18px rgba(2, 4, 24, .9);
}
.v2-video__cover.tem-foto .v2-video__30 { font-size: clamp(26px, 3.13vw, 60px); }
.v2-video__cover.tem-foto .v2-video__sub { font-size: clamp(9px, .73vw, 14px); }
.v2-video__cover.tem-foto .v2-video__play {
  border-left-color: rgba(255, 238, 238, .88);
  filter: drop-shadow(0 3px 16px rgba(2, 4, 24, .8));
}
.v2-video__cover.tem-foto:hover .v2-video__play { border-left-color: #fff; }
.v2-video__30 {
  position: relative;
  font-family: var(--v2-serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 4.9vw, 94px);
  line-height: 1;
  color: var(--v2-cream);
}
.v2-video__sub {
  position: relative;
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(10px, .94vw, 18px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--v2-cream);
}
.v2-video__play {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: clamp(26px, 2.5vw, 48px) 0 clamp(26px, 2.5vw, 48px) clamp(44px, 4.2vw, 80px);
  border-color: transparent transparent transparent rgba(255, 238, 238, .62);
  transition: border-left-color .3s ease, transform .3s ease;
  pointer-events: none;
}
.v2-video__cover:hover .v2-video__play {
  border-left-color: rgba(255, 238, 238, .92);
  transform: translate(-50%, -50%) scale(1.06);
}
.v2-video__cover:focus-visible { outline: 2px solid var(--v2-cream); outline-offset: -4px; }

.v2-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.v2-video.is-playing .v2-video__cover { opacity: 0; pointer-events: none; }

.v2-video__note {
  margin: clamp(8px, .63vw, 12px) 0 0;
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(9px, .57vw, 11px);
  letter-spacing: .06em;
  color: rgba(255, 238, 238, .55);
}

/* --- spotlight: ao dar play a seção escurece e só o player fica aceso ---- */
/* É o que o board desenha: um scrim cobrindo tudo, recortado no retângulo
   do vídeo. Aqui o scrim cobre a seção e o bloco do vídeo sobe por cima. */
.v2-spot {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--v2-spot);
  opacity: 0;
  transition: opacity .4s ease;
  cursor: pointer;
}
.v2-cases.is-spot .v2-spot { opacity: 1; }
.v2-cases.is-spot .v2-video { z-index: 6; }
.v2-cases.is-spot .v2-sobre { position: relative; }

/* ==========================================================================
   4c) POPUP DO CASE
   Abre no clique do card e recebe o embed (YouTube ou Drive) só nesse
   momento. Fechar limpa o src do iframe, o que também para o vídeo.
   ========================================================================== */
.v2-modal {
  /* medidas que a caixa precisa conhecer para caber na tela */
  --v2-modal-pad: clamp(12px, 2.2vw, 40px);
  --v2-modal-x: clamp(30px, 2.08vw, 40px);                      /* botão X   */
  --v2-modal-head: calc(var(--v2-modal-x) + clamp(8px, .73vw, 14px));

  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  /* centraliza por margin:auto, não por align-items: com align-items o que
     não cabe é cortado dos DOIS lados e o cabeçalho sumia por cima. Assim,
     em tela muito baixa, sobra rolagem em vez de conteúdo inalcançável. */
  overflow-y: auto;
  padding: var(--v2-modal-pad);
  opacity: 0;
  transition: opacity .28s ease;
}
.v2-modal.is-open { opacity: 1; }

/* fixed, não absolute: o pai agora rola, e o véu tem que cobrir a tela toda */
.v2-modal__scrim {
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 14, .88);
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
  cursor: pointer;
}

.v2-modal__box {
  position: relative;
  margin: auto;
  /* A largura é limitada TAMBÉM pela altura disponível: o player é 16:9 e
     ainda precisa caber o cabeçalho. Sem isso, em tela baixa (notebook com
     janela curta, celular deitado) a caixa passava da viewport e o X ficava
     fora de alcance. */
  width: min(920px, 100%,
             (100vh - 2 * var(--v2-modal-pad) - var(--v2-modal-head)) * 16 / 9);
  width: min(920px, 100%,
             (100dvh - 2 * var(--v2-modal-pad) - var(--v2-modal-head)) * 16 / 9);
  transform: translateY(14px) scale(.985);
  transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}
.v2-modal.is-open .v2-modal__box { transform: none; }

.v2-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: clamp(8px, .73vw, 14px);
}

/* o título não pode empurrar o X para fora quando o nome do case é longo */
.v2-modal__titulo {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--v2-mono);
  font-weight: 700;
  font-size: clamp(11px, .729vw, 14px);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--v2-cream);
}

/* X de fechar, desenhado em CSS para não depender de fonte de ícone */
.v2-modal__fechar {
  position: relative;
  flex: none;
  width: var(--v2-modal-x);
  height: var(--v2-modal-x);
  padding: 0;
  border: 1.5px solid rgba(255, 238, 238, .45);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.v2-modal__fechar::before,
.v2-modal__fechar::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 42%;
  height: 1.5px;
  background: var(--v2-cream);
  transition: background-color .3s ease;
}
.v2-modal__fechar::before { transform: translate(-50%, -50%) rotate(45deg); }
.v2-modal__fechar::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.v2-modal__fechar:hover,
.v2-modal__fechar:focus-visible {
  background: var(--v2-cream);
  border-color: var(--v2-cream);
  transform: rotate(90deg);
}
.v2-modal__fechar:hover::before,
.v2-modal__fechar:hover::after,
.v2-modal__fechar:focus-visible::before,
.v2-modal__fechar:focus-visible::after { background: #06103a; }

.v2-modal__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--v2-radius);
  overflow: hidden;
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.v2-modal__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

@media (max-width: 767.98px) {
  /* mexe no token, não no padding solto: é dele que sai a conta da altura */
  .v2-modal { --v2-modal-pad: var(--v2-gutter); }
  .v2-modal__titulo { font-size: clamp(10px, 3.3vw, 13px); }
}

/* ==========================================================================
   5) RODAPÉ — 478px de altura, fundo bgFooter.png
   ========================================================================== */
.v2-footer {
  position: relative;
  min-height: clamp(300px, 24.9vw, 478px);
  display: flex;
  align-items: center;
  padding: clamp(48px, 4vw, 70px) 0;
  background: var(--v2-blue) center / cover no-repeat;
  color: var(--v2-cream);
}

.v2-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 3vw, 56px);
}

.v2-footer__col--left { justify-self: start; }
.v2-footer__col--mid { justify-self: center; line-height: 0; }
.v2-footer__col--right {
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(14px, 1.56vw, 30px);
}

.v2-footer p,
.v2-footer a {
  font-family: var(--v2-mono);
  font-weight: 400;
  font-size: clamp(10px, .885vw, 17px);
  line-height: 1.08;
  letter-spacing: 0;
  color: var(--v2-cream);
}
.v2-footer a { text-decoration: none; }

.v2-footer__city {
  margin: 0 0 clamp(10px, .99vw, 19px);
  font-weight: 700;
  font-size: clamp(11px, .99vw, 19px);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.v2-footer__addr {
  margin: 0 0 clamp(12px, 1.41vw, 27px);
  text-transform: uppercase;
}
.v2-footer a.v2-footer__link {
  display: block;
  margin-bottom: clamp(10px, 1.15vw, 22px);
  width: -moz-fit-content;
  width: fit-content;
  text-decoration: underline;
  text-underline-offset: 5px;
  transition: color .3s ease;
}
.v2-footer__link:last-of-type { margin-bottom: 0; }
.v2-footer__link:hover { color: var(--v2-coral); }

.v2-footer__logo {
  display: block;
  width: clamp(210px, 19.27vw, 370px);     /* 370px em 1920 */
  height: auto;
}

.v2-footer__social {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.30vw, 25px);
  font-size: clamp(19px, 1.875vw, 36px);   /* altura dos ícones */
  line-height: 1;
}
/* o seletor carrega .v2-footer para ganhar de `.v2-footer a`, que define o
   tamanho do texto do rodapé — sem isso os ícones herdariam o corpo */
.v2-footer .v2-footer__social a {
  display: block;
  color: var(--v2-cream);
  font-size: inherit;
  line-height: 0;
  transition: color .3s ease, transform .3s ease;
}
.v2-footer__social svg {
  display: block;
  height: 1em;
  width: auto;
  fill: currentColor;
}
.v2-footer .v2-footer__social a:hover { color: var(--v2-coral); transform: translateY(-2px); }

/* o botão do rodapé é maior que o do topo: 254 x 52 */
.v2-footer .v2-btn {
  height: clamp(40px, 2.71vw, 52px);
  padding: 0 clamp(20px, 2.24vw, 43px);
  font-size: clamp(10px, .833vw, 16px);
}

/* este é o único texto do rodapé que não é mono, nos dois layouts */
.v2-footer a.v2-footer__priv {
  font-family: var(--v2-sans) !important;
  font-size: clamp(11px, .729vw, 14px) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .88;
}
.v2-footer__priv:hover { color: var(--v2-coral); }

/* ==========================================================================
   6) ENTRADA SUAVE DOS BLOCOS
   ========================================================================== */
[data-v2-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
}
[data-v2-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   7) RESPONSIVO
   ========================================================================== */
/* --------------------------------------------------------------------------
   Até 1199px: o menu vira uma tela cheia azul
   O layout de menuMobile.png mostra: fundo #1122FF ocupando tudo, um X no
   canto superior direito, a logo AKM30 centralizada, os seis itens em pilha
   e o botão TRABALHE CONOSCO na largura toda.
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  .v2-burger { display: block; position: relative; z-index: 2; }

  .v2-nav__menu {
    position: fixed;
    inset: 0;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    padding: calc(var(--v2-navh) + 1.5vw) var(--v2-gutter) 8vw;
    background: var(--v2-blue);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transition: opacity .32s ease, visibility .32s;
  }
  .v2-nav.is-open .v2-nav__menu { opacity: 1; visibility: visible; }

  /* logo AKM30 no topo da tela do menu: 238px de largura em 360 */
  .v2-nav__menu-logo {
    display: block;
    width: clamp(190px, 66vw, 300px);
    height: auto;
    margin: 0 0 clamp(20px, 8vw, 40px);
  }

  .v2-nav__link {
    padding: clamp(12px, 5vw, 22px) 0;         /* 65px de passo em 360 */
    font-size: clamp(18px, 6.67vw, 26px);      /* 24px em 360 */
    line-height: 1.2;
    text-align: center;
    color: var(--v2-cream);
    border: 0;
    white-space: normal;
  }
  .v2-nav.is-light .v2-nav__link { color: var(--v2-cream); }

  /* na gaveta o Contato vira um botão de largura cheia no pé da lista */
  .v2-nav__contato {
    width: 100%;
    height: clamp(48px, 16.4vw, 62px);
    margin-top: clamp(14px, 5.6vw, 26px);
    font-size: clamp(15px, 6.1vw, 24px);      /* 22px em 360 */
  }

  /* com o menu aberto sobra só o X */
  .v2-nav.is-open .v2-nav__logo { opacity: 0; visibility: hidden; }
  .v2-nav__logo { transition: opacity .25s ease, visibility .25s; }

  .v2-nav.is-open.is-light .v2-burger span,
  .v2-nav.is-open.is-light .v2-burger::before,
  .v2-nav.is-open.is-light .v2-burger::after { color: var(--v2-cream); }
}

/* --------------------------------------------------------------------------
   Tablet: grid de cases em 2 colunas
   -------------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  .v2-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* no painel SINCE 1996 o vídeo passa para cima do texto */
  .v2-sobre { grid-template-columns: minmax(0, 1fr); }
  .v2-sobre__media { order: 1; }
  .v2-sobre__text { order: 2; }

  .v2-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
  .v2-footer__col--mid { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
  .v2-footer__col--right { justify-self: end; align-items: flex-end; }
}

/* ==========================================================================
   CELULAR (siteMobileExemplo.png · 360 x 7739)

   O layout mobile não é o desktop encolhido: a tipografia é bem maior em
   relação à tela, o hero empilha o texto sobre a arte, as pílulas viram uma
   lista e o rodapé alinha tudo à esquerda. Por isso este bloco redefine os
   tamanhos em vez de deixar as clamp() do desktop chegarem ao piso.

   Onde há clamp(min, Xvw, max), o Xvw é medida/360*100 — em 360px a página
   bate com o Figma, e o max segura o crescimento até 767px.
   ========================================================================== */
@media (max-width: 767.98px) {
  :root {
    --v2-gutter: clamp(20px, 8.33vw, 34px);   /* 30px em 360 */
    --v2-navh: clamp(74px, 25.3vw, 96px);     /* 91px em 360 */
    --v2-indent: clamp(38px, 12.8vw, 52px);   /* 46px: coluna da seta */
  }

  /* --- barra de topo ----------------------------------------------------- */
  .v2-nav__logo img { height: clamp(26px, 8.6vw, 34px); }   /* 31px em 360 */

  .v2-burger { width: 34px; height: 34px; }
  .v2-burger span,
  .v2-burger::before,
  .v2-burger::after { left: 1px; right: 1px; height: 3px; }
  .v2-burger::before { top: 5px; }
  .v2-burger span    { top: 16px; }
  .v2-burger::after  { top: 27px; }
  .v2-nav.is-open .v2-burger::before { transform: translateY(11px) rotate(45deg); }
  .v2-nav.is-open .v2-burger::after  { transform: translateY(-11px) rotate(-45deg); }

  /* --- hero -------------------------------------------------------------- */
  /* No celular entra o heroMobile.mp4 (1920 x 4266), a versão em retrato da
     mesma arte: degradê, o "30" com o pintor e a faixa preta que emenda com a
     seção escura. A seção assume a proporção do arquivo e o texto passa por
     cima, na metade lisa de cima. Qual dos dois vídeos carrega é o JS que
     decide, pelo mesmo corte de 768px. */
  .v2-hero {
    display: block;
    height: auto;
    min-height: 0;
    aspect-ratio: 1920 / 4266;
    background: linear-gradient(196deg, #000223 0%, #00062F 46%, #000C6B 100%);
  }
  .v2-hero::after { display: none; }
  /* o vídeo de retrato já vem enquadrado: nada de deslocar como no desktop */
  .v2-hero__media { display: block; object-position: center; }

  .v2-hero__inner {
    position: relative;
    z-index: 2;
    height: auto;
    display: block;
    padding: calc(var(--v2-navh) + 2.5vw) 0 0;
  }

  .v2-hero__logo { width: 100%; }
  .v2-hero__lines {
    margin-top: clamp(18px, 7.4vw, 32px);
    font-size: clamp(11px, 3.89vw, 16px);     /* 14px em 360 */
    line-height: 1.93;                        /* 27px em 14px */
    letter-spacing: .27em;
  }
  .v2-hero__beyond {
    margin-top: clamp(8px, 3.3vw, 14px);
    font-size: clamp(28px, 10.2vw, 43px);     /* 37px em 360 */
  }

  /* --- infinitas formas -------------------------------------------------- */
  .v2-formas { padding: clamp(30px, 11.7vw, 50px) 0 clamp(30px, 11.4vw, 48px); }

  .v2-formas__label { font-size: clamp(14px, 5vw, 21px); }        /* 18px */
  .v2-formas__title {
    margin-left: 0;
    text-align: right;                        /* no mobile encosta na margem */
    font-size: clamp(24px, 8.33vw, 36px);     /* 30px em 360 */
  }

  .v2-list { margin-top: clamp(20px, 8.6vw, 36px); }
  .v2-item { padding: clamp(16px, 6.4vw, 27px) 0; }
  .v2-item__arrow { padding-left: 0; }
  .v2-item__arrow img { width: 26px; }        /* tamanho natural, como no layout */
  .v2-item__name {
    font-size: clamp(16px, 5.56vw, 24px);     /* 20px em 360 */
    line-height: 1.3;
  }
  /* a descrição volta para a margem, sem o recuo da seta */
  .v2-item__desc { margin-left: 0; }
  .v2-item__desc p {
    margin-top: clamp(10px, 3.9vw, 16px);
    font-size: clamp(12px, 3.89vw, 16px);     /* 14px em 360 */
    line-height: 1.43;
  }

  /* --- cases ------------------------------------------------------------- */
  .v2-cases { padding: clamp(28px, 10.8vw, 46px) 0 clamp(30px, 11.7vw, 50px); }

  /* as pílulas viram uma lista de largura cheia */
  .v2-filtros { flex-direction: column; gap: clamp(8px, 3.06vw, 13px); }
  .v2-pill {
    flex: none;
    width: 100%;
    height: clamp(38px, 12.2vw, 50px);        /* 44px em 360 */
    font-size: clamp(13px, 4.44vw, 18px);     /* 16px em 360 */
  }

  .v2-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(12px, 4.44vw, 19px);           /* 16px em 360 */
    margin-top: clamp(16px, 6.7vw, 28px);
  }
  /* o layout mobile não mostra o nome sobre o card */
  .v2-card__name { display: none; }
  .v2-card::after { display: none; }

  /* --- painel since 1996 ------------------------------------------------- */
  .v2-sobre { gap: clamp(20px, 9.4vw, 40px); margin-top: clamp(16px, 6.9vw, 29px); }
  .v2-sobre__text .v2-sobre__label { font-size: clamp(16px, 5.8vw, 24px); }
  .v2-sobre__text .v2-sobre__title { font-size: clamp(22px, 7.8vw, 34px); }
  .v2-sobre__text p { font-size: clamp(12px, 3.89vw, 17px); line-height: 1.43; }  /* 14px em 360 */
  .v2-video { aspect-ratio: 16 / 9; }

  /* --- rodapé: tudo alinhado à esquerda, botão na largura cheia ---------- */
  /* Os tamanhos do rodapé não encolhem no mobile — o layout usa os mesmos
     17px do desktop. */
  .v2-footer { min-height: 0; padding: clamp(34px, 10.8vw, 46px) 0 clamp(34px, 12.2vw, 52px); }
  .v2-footer__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 10vw, 42px); }
  .v2-footer__col--mid { grid-column: auto; grid-row: auto; justify-self: start; width: 100%; }
  .v2-footer__col--right {
    justify-self: start;
    align-items: stretch;
    width: 100%;
    gap: clamp(16px, 6.9vw, 29px);
  }

  /* 16px: a 17 do desktop faz "R. GUARARAPES, 700 - BROOKLIN" quebrar */
  .v2-footer p,
  .v2-footer a { font-size: clamp(13px, 4.44vw, 16px); }
  .v2-footer__city { font-size: clamp(15px, 5.28vw, 19px); margin-bottom: clamp(14px, 5.8vw, 24px); }
  .v2-footer__addr { margin-bottom: clamp(18px, 7.5vw, 32px); }
  .v2-footer a.v2-footer__link { margin-bottom: clamp(12px, 5vw, 21px); }
  .v2-footer__logo { width: 100%; }
  .v2-footer__social { gap: clamp(16px, 7.2vw, 30px); font-size: clamp(28px, 11.1vw, 44px); }
  .v2-footer .v2-btn {
    width: 100%;
    height: clamp(44px, 14.2vw, 58px);        /* 51px em 360 */
    font-size: clamp(13px, 4.4vw, 17px);
  }
  .v2-footer a.v2-footer__priv { font-size: clamp(12px, 3.89vw, 16px) !important; }
}

/* ==========================================================================
   8) MENOS MOVIMENTO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-v2-reveal] { opacity: 1; transform: none; }
}