/* Trajetórias · Itaú Empresas · The Future Studios */

@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Big Shoulders"; src: url("../fonts/big-shoulders-display-latin-900-normal.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../fonts/geist-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("../fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --navy: #000D3C;
  --orange: #EC7000;
  --paper: #F4EFE6;
  --display: "Big Shoulders", "Arial Narrow", sans-serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --gut: clamp(16px, 4vw, 64px);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --accent-clip: polygon(0 31.3%, 100% 0, 100% 100%, 0 100%);
}
html[data-tone="navy"]   { --fg: #F4EFE6; --muted: rgba(244, 239, 230, .7);  --line: rgba(244, 239, 230, .18); --accent: #EC7000; --btn-bg: #F4EFE6; --btn-fg: #000D3C; }
html[data-tone="orange"] { --fg: #000D3C; --muted: rgba(0, 13, 60, .78);     --line: rgba(0, 13, 60, .22);     --accent: #FFFFFF; --btn-bg: #000D3C; --btn-fg: #F4EFE6; }
html[data-tone="light"]  { --fg: #000D3C; --muted: rgba(0, 13, 60, .68);     --line: rgba(0, 13, 60, .14);     --accent: #EC7000; --btn-bg: #000D3C; --btn-fg: #F4EFE6; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--navy); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { margin: 0; color: var(--fg); font-family: var(--sans); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; transition: color .8s var(--ease); background: transparent; }
img, video, canvas, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, ol, figure { margin: 0; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; }
.label { color: var(--accent); transition: color .8s var(--ease); }
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
main { position: relative; z-index: 1; }

/* fundo fixo */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg-l { position: absolute; inset: 0; opacity: 0; transition: opacity 1s var(--ease); }
.bg-navy { background: radial-gradient(110% 80% at 88% 0%, rgba(22, 46, 140, .55), rgba(22, 46, 140, 0) 58%), radial-gradient(90% 70% at 0% 100%, rgba(0, 24, 96, .7), rgba(0, 24, 96, 0) 62%), #000D3C; }
.bg-orange { background: radial-gradient(110% 90% at 12% 0%, #FF9B33, rgba(255, 155, 51, 0) 58%), radial-gradient(100% 80% at 100% 100%, #CF5A00, rgba(207, 90, 0, 0) 62%), #EC7000; }
.bg-light { background: radial-gradient(100% 80% at 82% 6%, #FFFFFF, rgba(255, 255, 255, 0) 60%), radial-gradient(80% 70% at 0% 100%, #EADFCC, rgba(234, 223, 204, 0) 60%), #F4EFE6; }
html[data-tone="navy"] .bg-navy, html[data-tone="orange"] .bg-orange, html[data-tone="light"] .bg-light { opacity: 1; }
body::after { content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* loader */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--navy); color: #F4EFE6; display: flex; align-items: flex-end; justify-content: space-between; padding: var(--gut); transition: transform 1.1s var(--ease); }
.loader.out { transform: translateY(-100%); }
.loader-name { font-family: var(--mono); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.loader-count { font-family: var(--display); font-weight: 900; font-size: clamp(90px, 18vw, 260px); line-height: .8; font-variant-numeric: tabular-nums; color: var(--orange); }

/* barra fixa */
.hud { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 16px var(--gut); }
.hud-logos, .foot-logos { display: flex; align-items: center; gap: 22px; }
.lg-itau { width: 34px; height: 34px; }
.lg { display: block; position: relative; }
.lg img { height: 100%; width: auto; }
.lg .lg-n { display: none; }
html[data-tone="light"] .lg .lg-w, html[data-tone="orange"] .lg .lg-w { display: none; }
html[data-tone="light"] .lg .lg-n, html[data-tone="orange"] .lg .lg-n { display: block; }
.hud .lg-itau { width: 38px; height: 38px; }
.hud .lg-galeria { height: 19px; }
.hud .lg-tfs { height: 31px; }
.hud-nav { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11.5px; letter-spacing: .12em; }
.hud-nav a { padding: 6px 7px; color: var(--muted); transition: color .3s; }
.hud-nav a:hover, .hud-nav a.on { color: var(--fg); }
.hud-nav a.on { position: relative; }
.hud-nav a.on::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: 1px; height: 2px; background: var(--accent); }
.hud-name { margin-left: 14px; text-transform: uppercase; white-space: nowrap; color: var(--fg); }

/* capa */
.cover { height: 340vh; position: relative; }
.cover-media { position: absolute; inset: 0; background: var(--navy); will-change: clip-path; }
.cover-media canvas { width: 100%; height: 100%; }
.cover-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 13, 60, .82), rgba(0, 13, 60, .1) 50%), linear-gradient(to bottom, rgba(0, 13, 60, .55), rgba(0, 13, 60, 0) 26%); }
.cover-copy { position: absolute; left: var(--gut); right: var(--gut); bottom: 5vh; color: #F4EFE6; will-change: transform, opacity; }
.cover-kicker { margin-bottom: 1vh; }
.cover-title { font-family: var(--display); font-weight: 900; text-transform: uppercase; line-height: .84; letter-spacing: -.005em; padding-top: .08em; }
.cover-sub { margin-top: 2vh; font-size: clamp(16px, 1.5vw, 21px); font-weight: 500; }
.cover-phrase { position: absolute; left: var(--gut); top: 50%; transform: translateY(-50%); max-width: 820px; color: #F4EFE6; font-size: clamp(26px, 3.4vw, 54px); line-height: 1.08; letter-spacing: -.03em; font-weight: 600; opacity: 0; }

/* gigantes ajustados à largura */
.fit { display: block; white-space: nowrap; }
.fit .ln { display: block; overflow: hidden; padding: .1em 0 .02em; margin-top: -.1em; }
.fit .ln > span { display: inline-block; }
.giant { font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .86; letter-spacing: -.004em; }
.giant .ch { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i) * 22ms); }
.giant.in .ch { transform: none; }

/* intro */
.intro { padding: 28vh var(--gut) 18vh; }
.wrap { max-width: 1320px; }
.intro .label { margin-bottom: 5vh; }
.intro-text { font-size: clamp(26px, 3.4vw, 54px); line-height: 1.12; letter-spacing: -.03em; font-weight: 600; max-width: 24ch; }
.intro-text + .intro-text { margin-top: 8vh; }
.words .w { opacity: .16; transition: opacity .3s linear; }

/* roteiro */
.script { padding: 10vh var(--gut) 18vh; }
.script-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); max-width: 1440px; }
.script-sticky { position: sticky; top: 13vh; display: grid; gap: 22px; }
.script-title { font-size: clamp(36px, 4.2vw, 68px); line-height: 1; letter-spacing: -.04em; font-weight: 650; }
.script-desc { color: var(--muted); font-size: 18px; max-width: 440px; }
.mini-player { margin-top: 10px; }
.mini-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; background: #0b1230; }
.mini-frame video { width: 100%; height: 100%; object-fit: cover; }
.mini-player figcaption { margin-top: 10px; color: var(--muted); }
.script-vo { padding-top: 12vh; }
.stanza { margin-bottom: 9vh; }
.vo { font-size: clamp(26px, 3vw, 48px); line-height: 1.12; letter-spacing: -.03em; font-weight: 650; opacity: .12; transform: translateY(12px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.vo.on { opacity: 1; transform: none; }
.stanza.sign .vo { color: var(--orange); }

/* índice */
.index { padding: 18vh var(--gut) 14vh; }
.index-list { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.index-list li { border-bottom: 1px solid var(--line); }
.index-list a { position: relative; display: grid; grid-template-columns: 70px 1fr; align-items: baseline; padding: 2.2vh 0 1.6vh; overflow: hidden; isolation: isolate; }
.index-list a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--orange); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
.index-list a:hover::before { transform: scaleY(1); }
.index-list a:hover { color: var(--navy); }
.index-list .mono { color: var(--accent); padding-left: 4px; transition: color .3s; }
.index-list a:hover .mono { color: var(--navy); }
.ix-t { font-family: var(--display); font-weight: 800; text-transform: uppercase; font-size: clamp(36px, 5.6vw, 92px); line-height: .9; padding-top: .06em; transition: transform .6s var(--ease); }
.index-list a:hover .ix-t { transform: translateX(14px); }

/* faixa */
.marquee { position: relative; z-index: 1; background: var(--orange); color: var(--navy); overflow: hidden; padding: 2.2vh 0 1.6vh; }
.marquee-track { display: flex; width: max-content; will-change: transform; }
.marquee-track span { font-family: var(--display); font-weight: 900; text-transform: uppercase; font-size: clamp(44px, 7vw, 120px); line-height: .9; white-space: nowrap; padding-right: .35em; display: inline-flex; align-items: center; gap: .35em; }
.marquee-track span::after { content: ""; display: inline-block; width: .9em; height: .46em; background: var(--navy); clip-path: var(--accent-clip); }

/* capítulos */
.chapter { position: relative; padding: 22vh 0 6vh; }
.ch-head { padding: 0 var(--gut); }
.ch-n { display: block; color: var(--accent); margin-bottom: 2vh; transition: color .8s var(--ease); }
.ch-body { padding: 10vh var(--gut) 12vh; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); row-gap: 5vh; }
.ch-body > p { grid-column: 5 / span 7; font-size: clamp(19px, 1.65vw, 25px); line-height: 1.42; letter-spacing: -.012em; color: var(--fg); }
.ch-body.cols > p { grid-column: span 5; }
.ch-body.cols > p:nth-child(odd) { grid-column: 2 / span 5; }
.ch-body.cols > p:nth-child(even) { grid-column: 8 / span 5; margin-top: 10vh; }
.ch-body > p.lead { grid-column: 2 / span 9; font-size: clamp(24px, 2.6vw, 40px); line-height: 1.18; letter-spacing: -.025em; font-weight: 600; }
.rv { opacity: 0; transform: translateY(30px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* vídeos que nascem do acento */
.grow { position: relative; height: 240vh; }
.grow .gm { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background: #0b1230; will-change: clip-path; }
.grow .gm video { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.grow .gm::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 13, 60, .45), rgba(0, 13, 60, 0) 40%); pointer-events: none; }
.gtag { position: absolute; left: 22px; bottom: 20px; z-index: 2; color: #F4EFE6; opacity: 0; transition: opacity .4s; }
.grow .play-center { opacity: 0; pointer-events: none; transition: opacity .4s, transform .5s var(--ease); }
.grow .gm.ready .play-center { opacity: 1; pointer-events: auto; }
.grow .gm.ready .gtag { opacity: 1; }

.play-ico { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7.5px solid transparent; border-bottom: 7.5px solid transparent; margin-left: 2px; }
.play-center { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 19px; border-radius: 999px; background: #F4EFE6; color: var(--navy); font-weight: 600; font-size: 14.5px; white-space: nowrap; box-shadow: 0 14px 40px -12px rgba(0, 8, 40, .55); }
.play-center .play-ico { color: var(--orange); }
.play-center:hover { transform: translate(-50%, -50%) scale(1.05); }
.play-center:active { transform: translate(-50%, -50%) scale(.98); }
.play-line { display: inline-flex; align-items: center; gap: 11px; padding: 11px 20px 11px 16px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; font-size: 14px; transition: background .8s var(--ease), color .8s var(--ease), transform .3s var(--ease); }
.play-line .play-ico { color: var(--orange); border-left-width: 10px; border-top-width: 6px; border-bottom-width: 6px; }
.play-line:active { transform: scale(.98); }

/* universos */
.universes { position: relative; }
.universes .sticky { display: flex; align-items: center; }
.uni-track { display: flex; align-items: flex-end; height: 80vh; padding: 0 var(--gut); will-change: transform; }
.uni { flex: none; height: calc(var(--s) * 80vh); width: calc(var(--s) * 80vh * 1.3); display: flex; flex-direction: column; }
.uni-img { flex: 1; overflow: hidden; border-radius: 3px; position: relative; }
.uni-img img { position: absolute; top: 0; left: -8%; width: 116%; height: 100%; object-fit: cover; transform: translateX(var(--px, 0)); }
.uni figcaption { flex: none; padding-top: 14px; font-size: 15.5px; line-height: 1.4; max-width: 34ch; color: var(--fg); }
.uni-pass { flex: none; width: clamp(44px, 5vw, 90px); align-self: center; position: relative; height: 20px; margin-bottom: 8vh; }
.uni-pass::before { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 15px; margin: -7px 0 0 -15px; background: var(--orange); clip-path: var(--accent-clip); }

/* comparador */
.hybrid { position: relative; height: 280vh; }
.hybrid .sticky { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 76px var(--gut) 20px; }
.cmp { position: relative; width: min(100%, calc((100svh - 200px) * 1.777)); aspect-ratio: 716 / 403; overflow: hidden; border-radius: 4px; background: #0b1230; cursor: ew-resize; touch-action: pan-y; }
.cmp canvas { width: 100%; height: 100%; }
.cmp video { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #F4EFE6; z-index: 2; }
.cmp-handle span { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: #F4EFE6; box-shadow: 0 8px 26px -8px rgba(0, 8, 40, .6); }
.cmp-handle span::before, .cmp-handle span::after { content: ""; position: absolute; top: 50%; margin-top: -5px; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.cmp-handle span::before { left: 12px; border-right: 7px solid var(--navy); }
.cmp-handle span::after { right: 12px; border-left: 7px solid var(--navy); }
.cmp-tag { position: absolute; top: 16px; z-index: 2; padding: 7px 11px; border-radius: 2px; background: rgba(0, 13, 60, .78); color: #F4EFE6; }
.cmp-tag.l { left: 16px; }
.cmp-tag.r { right: 16px; background: var(--orange); color: var(--navy); }
.cmp-foot { width: min(100%, calc((100svh - 200px) * 1.777)); display: flex; justify-content: space-between; align-items: center; color: var(--muted); }

/* final */
.finale { position: relative; height: 420vh; margin-top: 4vh; }
.fin-bg, .fin-navy, .fin-white { position: absolute; inset: 0; }
.fin-bg img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.fin-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 13, 60, .7), rgba(0, 13, 60, 0) 45%); }
.fin-navy { background: var(--navy); opacity: 0; }
.fin-white { background: #FFFFFF; opacity: 0; z-index: 1; }
.fin-line { position: absolute; left: var(--gut); bottom: 9vh; z-index: 4; max-width: 720px; color: #F4EFE6; font-size: clamp(20px, 2vw, 30px); line-height: 1.28; letter-spacing: -.015em; font-weight: 500; opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fin-line.on { opacity: 1; transform: none; }
.fin-logo { position: absolute; left: 50%; top: 42%; z-index: 2; width: clamp(120px, 13vw, 190px); aspect-ratio: 1; transform: translate(-50%, -50%); opacity: 0; }
.fin-logo img { width: 100%; height: 100%; }
.fin-target { position: absolute; left: calc(194.5 / 270 * 100%); top: calc(118 / 270 * 100%); width: calc(32.75 / 270 * 100%); height: calc(16.75 / 270 * 100%); }
.fin-shape { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.fin-shape polygon { fill: #FFFFFF; }
.fin-sign { position: absolute; left: 0; right: 0; top: calc(42% + clamp(60px, 6.5vw, 95px) + 30px); z-index: 4; text-align: center; }
.fin-sign p { font-size: clamp(28px, 3.4vw, 54px); line-height: 1.08; letter-spacing: -.035em; font-weight: 650; color: var(--navy); opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fin-sign p + p { color: var(--orange); }
.fin-sign p.on { opacity: 1; transform: none; }

/* fechamento */
.closing { padding: 22vh var(--gut) 20vh; }
.closing-text { max-width: 1100px; font-size: clamp(24px, 2.7vw, 42px); line-height: 1.2; letter-spacing: -.025em; font-weight: 600; }
.foot { margin-top: 22vh; padding: 28px 0 32px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--muted); }
.foot-logos .lg-itau { width: 46px; height: 46px; }
.foot-galeria { height: 24px; width: auto; }
.foot-tfs { height: 38px; width: auto; }

/* capa: logos lado a lado */
.cover-logos { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); margin-bottom: 3.2vh; }
.cl-itau { width: clamp(40px, 4vw, 58px); height: auto; }
.cl-galeria { height: clamp(17px, 1.8vw, 26px); width: auto; }
.cl-tfs { height: clamp(28px, 2.9vw, 42px); width: auto; }

/* obrigado */
.thanks { padding: 22vh var(--gut) 0; }
.thanks-title { color: var(--fg); }
.thanks-tfs { width: clamp(200px, 26vw, 420px); height: auto; margin-top: 8vh; }

/* player com som */
.lightbox { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100vh; height: 100dvh; margin: 0; color: #F4EFE6; }
.lightbox::backdrop { background: rgba(0, 8, 36, .95); }
.lb-inner { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 70px var(--gut) 34px; position: relative; }
.lb-inner video { max-width: 100%; max-height: 100%; background: #0b1230; border-radius: 4px; }
.lb-title { position: absolute; top: 26px; left: var(--gut); color: rgba(244, 239, 230, .7); }
.lb-close { position: absolute; top: 18px; right: var(--gut); padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(244, 239, 230, .25); }

/* celular */
@media (max-width: 900px) {
  .hud-nav { display: none; }
  .hud-logos { gap: 14px; }
  .hud .lg-itau { width: 30px; height: 30px; }
  .hud .lg-galeria { height: 14px; }
  .hud .lg-tfs { height: 23px; }
  .script-grid { grid-template-columns: 1fr; }
  .script-sticky { position: relative; top: 0; }
  .script-vo { padding-top: 6vh; }
  .ch-body { display: block; padding: 7vh var(--gut) 8vh; }
  .ch-body > p, .ch-body.cols > p { margin: 0 0 4vh !important; }
  .index-list a { grid-template-columns: 44px 1fr; }
  .grow { height: auto !important; padding: 0 var(--gut) 4vh; }
  .grow .sticky { position: relative; height: auto; overflow: visible; display: grid; gap: 14px; }
  .grow .gm { position: relative; width: auto !important; height: auto !important; aspect-ratio: 16 / 9; clip-path: none !important; border-radius: 4px; }
  .grow .gm video { transform: none !important; }
  .grow .play-center, .grow .gtag { opacity: 1; pointer-events: auto; }
  .play-center { padding: 11px 18px 11px 15px; font-size: 13px; }
  .cmp-tag { font-size: 9.5px; top: 10px; padding: 5px 8px; }
  .cmp-tag.l { left: 10px; } .cmp-tag.r { right: 10px; }
  .fin-line { right: var(--gut); font-size: 19px; }
}
@media (max-width: 760px) {
  .universes { height: auto !important; }
  .universes .sticky { position: relative; height: auto; overflow: visible; display: block; }
  .uni-pass { display: none; }
  .uni-track { flex-direction: column; align-items: stretch; height: auto; gap: 40px; transform: none !important; }
  .uni { height: auto; width: calc(55% + var(--s) * 45%); }
  .uni-img { aspect-ratio: 4 / 3; flex: none; }
}
@media (prefers-reduced-motion: reduce) {
  .rv, .vo, .giant .ch { transition-duration: .01s; }
}