@font-face {
  font-family: "Instrument Sans";
  src: url("./fonts/instrument-sans-variable.woff2?v=20260809a") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 75% 100%;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --v4-bg: #050807;
  --v4-bg-deep: #020403;
  --v4-ink: #f3f6f2;
  --v4-muted: rgba(226, 235, 229, .68);
  --v4-soft: rgba(220, 232, 225, .42);
  --v4-faint: rgba(216, 232, 224, .2);
  --v4-line: rgba(213, 237, 227, .15);
  --v4-line-strong: rgba(183, 226, 215, .32);
  --v4-accent: #86d8cd;
  --v4-accent-bright: #d1fff4;
  --v4-gutter: clamp(24px, 4.75vw, 92px);
  --v4-header-h: 78px;
  --v4-ease: cubic-bezier(.16, 1, .3, 1);
  --journey-progress: 0;
  --network-reveal: 0;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--v4-bg); scroll-behavior: auto; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--v4-bg);
  color: var(--v4-ink);
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-weight: 440;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.v4-loading,
body.v4-intro-active,
body.v4-entering { overflow: hidden; }
button,
a { color: inherit; font: inherit; }
a { text-decoration: none; }
button { border: 0; }
canvas { display: block; }
::selection { background: rgba(134, 216, 205, .28); color: #fff; }
:focus-visible { outline: 2px solid var(--v4-accent-bright); outline-offset: 5px; }

.v4-skip {
  position: fixed;
  z-index: 1200;
  top: 12px;
  left: 16px;
  padding: 10px 15px;
  border-radius: 999px;
  background: var(--v4-ink);
  color: var(--v4-bg-deep);
  font-size: 12px;
  font-weight: 620;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.v4-skip:focus { transform: translateY(0); }

.v4-kicker {
  margin: 0;
  color: var(--v4-accent);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .19em;
  line-height: 1.5;
  text-transform: uppercase;
}
.v4-kicker > span { margin-right: 9px; color: var(--v4-accent-bright); }
.v4-kicker > b {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 3px 7px;
  border: 1px solid rgba(134, 216, 205, .32);
  border-radius: 999px;
  color: var(--v4-accent-bright);
  font-size: 7px;
  font-weight: 680;
  letter-spacing: .12em;
  vertical-align: 2px;
}
.v4-kicker > b::before {
  width: 4px;
  height: 4px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--v4-accent);
  box-shadow: 0 0 9px var(--v4-accent);
  content: "";
}

/* The loader is already a route: its completed line aligns with the intro road. */
.v4-loader {
  position: fixed;
  z-index: 1100;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 58%, rgba(64, 118, 109, .14), transparent 34%),
    var(--v4-bg-deep);
  opacity: 1;
  visibility: visible;
  transition: opacity .7s ease, visibility .7s;
}
.v4-loader::before {
  position: absolute;
  right: 50%;
  bottom: -37vh;
  width: min(38vw, 550px);
  height: 83vh;
  border-right: 1px solid rgba(134, 216, 205, .06);
  border-left: 1px solid rgba(134, 216, 205, .06);
  transform: perspective(420px) rotateX(58deg) translateX(50%);
  transform-origin: bottom;
  content: "";
}
.v4-loader__route {
  --load: 0;
  position: relative;
  width: min(420px, 76vw);
  height: 54px;
}
.v4-loader__track,
.v4-loader__travel {
  position: absolute;
  top: 26px;
  left: 16px;
  height: 1px;
}
.v4-loader__track { right: 16px; background: rgba(230, 240, 234, .13); }
.v4-loader__travel {
  width: calc((100% - 32px) * var(--load));
  background: var(--v4-accent);
  box-shadow: 0 0 16px rgba(134, 216, 205, .48);
  transition: width .22s linear;
}
.v4-loader ol {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}
.v4-loader li {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--v4-line);
  border-radius: 50%;
  background: #050807;
  color: var(--v4-soft);
  font-size: 7px;
  font-weight: 680;
  letter-spacing: .09em;
  transition: border-color .35s ease, color .35s ease, box-shadow .35s ease;
}
.v4-loader li.is-reached {
  border-color: rgba(134, 216, 205, .55);
  color: var(--v4-accent-bright);
  box-shadow: 0 0 20px rgba(134, 216, 205, .09);
}
.v4-loader > p {
  position: absolute;
  top: calc(50% + 68px);
  display: flex;
  width: min(420px, 76vw);
  justify-content: space-between;
  margin: 0;
  color: var(--v4-soft);
  font-size: 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .2em;
}
.v4-loader > p strong { color: var(--v4-accent-bright); font-weight: 580; }
.v4-ready .v4-loader { opacity: 0; visibility: hidden; pointer-events: none; }

/* Header */
.v4-header {
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  height: var(--v4-header-h);
  align-items: center;
  padding: 0 var(--v4-gutter);
  border-bottom: 1px solid transparent;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity .7s var(--v4-ease),
    transform .7s var(--v4-ease),
    background .35s ease,
    border-color .35s ease;
  pointer-events: none;
}
.v4-entered .v4-header { opacity: 1; transform: none; pointer-events: auto; }
.v4-scrolled .v4-header {
  border-color: rgba(213, 237, 227, .08);
  background: rgba(4, 7, 6, .68);
  backdrop-filter: blur(18px) saturate(125%);
}
.v4-brand {
  display: inline-flex;
  width: max-content;
  min-height: 44px;
  align-items: center;
  color: var(--v4-ink);
  font-size: 12px;
  font-weight: 680;
  font-stretch: 91%;
  letter-spacing: -.025em;
}
.v4-brand span:last-child { color: var(--v4-accent); }
.v4-header__route {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--v4-soft);
  font-size: 8px;
  font-weight: 590;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.v4-header__route i { width: 24px; height: 1px; background: var(--v4-accent); }
.v4-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.8vw, 27px);
}
.v4-header__nav a {
  color: rgba(232, 239, 234, .64);
  font-size: 9px;
  letter-spacing: .04em;
  white-space: nowrap;
  transition: color .2s ease;
}
.v4-header__nav a:hover,
.v4-header__nav a:focus-visible { color: var(--v4-accent-bright); }

.v4-mobile-menu { display: none; position: relative; color: var(--v4-paper); }
.v4-mobile-menu summary { list-style: none; padding: 10px 13px; border: 1px solid rgba(230,242,236,.18); border-radius: 999px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.v4-mobile-menu summary::-webkit-details-marker { display: none; }
.v4-mobile-menu nav { position: absolute; top: calc(100% + 10px); right: 0; display: grid; width: min(260px,calc(100vw - 32px)); padding: 10px; border: 1px solid rgba(230,242,236,.16); border-radius: 14px; background: rgba(4,9,7,.97); box-shadow: 0 20px 70px rgba(0,0,0,.45); backdrop-filter: blur(16px); }
.v4-mobile-menu nav a { padding: 11px 12px; border-radius: 9px; color: #b7c8c0; text-decoration: none; font-size: 13px; }
.v4-mobile-menu nav a:hover,
.v4-mobile-menu nav a:focus-visible { background: rgba(134,216,205,.08); color: var(--v4-accent-bright); }
.v4-header__cta {
  justify-self: end;
  display: inline-flex;
  min-height: 41px;
  align-items: center;
  gap: 15px;
  padding: 0 17px;
  border: 1px solid var(--v4-line);
  border-radius: 999px;
  background: rgba(3, 7, 6, .25);
  color: rgba(243, 246, 242, .88);
  font-size: 10px;
  font-weight: 570;
  transition: border-color .25s ease, background .25s ease, transform .25s var(--v4-ease);
}
.v4-header__cta span { color: var(--v4-accent-bright); }
.v4-header__cta:hover { border-color: rgba(134, 216, 205, .48); background: rgba(134, 216, 205, .07); transform: translateY(-1px); }
@media (max-width: 1080px) { .v4-header__nav { display: none; } .v4-mobile-menu { display: block; margin-left: auto; } .v4-header__cta { margin-left: 0; } }

/* Intro */
.v4-intro {
  position: fixed;
  z-index: 80;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 77%, rgba(69, 127, 115, .13), transparent 30%),
    linear-gradient(180deg, rgba(2, 4, 3, .98), rgba(3, 6, 5, .94));
  opacity: 0;
  visibility: hidden;
  transition: opacity .72s ease, visibility .72s;
}
.v4-intro::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(1, 3, 2, .52) 100%);
  pointer-events: none;
  content: "";
}
.v4-intro-active .v4-intro { opacity: 1; visibility: visible; }
.v4-entering .v4-intro { opacity: 0; }
.v4-intro__world { position: absolute; inset: 0; overflow: hidden; }
.v4-intro__horizon {
  position: absolute;
  top: 66%;
  left: 50%;
  width: min(50vw, 720px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(209, 255, 244, .14), transparent);
  transform: translateX(-50%);
}
.v4-intro__road {
  position: absolute;
  bottom: -26vh;
  left: 50%;
  width: 1px;
  height: 64vh;
  background: linear-gradient(0deg, rgba(134, 216, 205, .28), transparent 88%);
  transform-origin: bottom;
}
.v4-intro__road--left { transform: translateX(-220px) rotate(31deg); }
.v4-intro__road--right { transform: translateX(220px) rotate(-31deg); }
.v4-intro__route-light {
  position: absolute;
  top: 65%;
  left: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--v4-accent-bright);
  box-shadow: 0 0 9px var(--v4-accent-bright), 0 0 34px rgba(134, 216, 205, .7);
  transform: translate(-50%, -50%);
}
.v4-intro__copy {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  width: min(1100px, calc(100% - 40px));
  text-align: center;
  transform: translateY(-4vh);
  transition: opacity .65s ease, transform .95s var(--v4-ease);
}
.v4-intro h1 {
  margin: 19px 0 36px;
  font-size: clamp(64px, 8.1vw, 140px);
  font-weight: 570;
  font-stretch: 86%;
  letter-spacing: -.056em;
  line-height: .83;
}
.v4-intro h1 span,
.v4-intro h1 em { display: block; }
.v4-intro h1 em {
  color: var(--v4-accent-bright);
  font-style: normal;
  font-weight: 470;
  font-stretch: 100%;
  letter-spacing: -.035em;
}
.v4-continue {
  --magnet-x: 0px;
  --magnet-y: 0px;
  display: inline-flex;
  min-width: 178px;
  height: 61px;
  align-items: center;
  justify-content: space-between;
  padding: 7px 8px 7px 23px;
  border: 1px solid rgba(230, 240, 234, .24);
  border-radius: 999px;
  background: rgba(5, 10, 8, .48);
  cursor: pointer;
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
  transition: transform .28s var(--v4-ease), border-color .25s ease, background .25s ease;
}
.v4-continue > span { font-size: 11px; font-weight: 590; letter-spacing: .025em; }
.v4-continue > i {
  display: grid;
  width: 45px;
  height: 45px;
  place-items: center;
  border-radius: 50%;
  background: var(--v4-ink);
  color: var(--v4-bg-deep);
  font-size: 14px;
  font-style: normal;
  transition: transform .5s var(--v4-ease), background .25s ease;
}
.v4-continue:hover { border-color: rgba(134, 216, 205, .52); background: rgba(134, 216, 205, .06); }
.v4-continue:hover > i { background: var(--v4-accent-bright); transform: rotate(-45deg); }
.v4-continue:active { transform: translate3d(var(--magnet-x), var(--magnet-y), 0) scale(.985); transition-duration: .08s; }
.v4-intro__note {
  position: absolute;
  z-index: 2;
  right: var(--v4-gutter);
  bottom: 30px;
  left: var(--v4-gutter);
  margin: 0;
  color: var(--v4-soft);
  font-size: 8px;
  letter-spacing: .06em;
}
.v4-entering .v4-intro__copy { opacity: 0; transform: translateY(-9vh) scale(.986); }
.v4-entering .v4-intro__route-light { animation: v4-enter-light .95s var(--v4-ease) both; }

/* One continuous world */
.v4-journey { position: relative; height: 860vh; min-height: 5200px; background: var(--v4-bg); }
.v4-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 620px;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--v4-bg-deep);
}
.v4-sticky::after {
  position: absolute;
  z-index: 8;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(1, 3, 2, .38), transparent 27%, transparent 73%, rgba(1, 3, 2, .34)),
    linear-gradient(180deg, rgba(1, 3, 2, .18), transparent 18%, transparent 72%, rgba(1, 3, 2, .56));
  pointer-events: none;
  content: "";
}
#v4-canvas,
.v4-fallback-world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#v4-canvas {
  z-index: 1;
  opacity: .08;
  filter: brightness(.5) saturate(.7);
  transform: scale(1.025);
  transform-origin: center;
  transition: opacity 1s ease, filter 1.2s ease, transform 1.35s var(--v4-ease);
}
.v4-entering #v4-canvas { opacity: .62; filter: brightness(.78) saturate(.9); transform: scale(1.008); }
.v4-entered #v4-canvas { opacity: 1; filter: none; transform: none; }
.v4-fallback-world {
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 53% 56%, rgba(50, 91, 84, .21), transparent 27%),
    linear-gradient(180deg, #08100e, #030605 72%);
  opacity: .7;
  transition: opacity .8s ease;
}
.v4-fallback__sky { position: absolute; inset: 0; background: radial-gradient(ellipse at 52% 41%, rgba(116, 169, 156, .09), transparent 34%); }
.v4-fallback__horizon {
  position: absolute;
  top: 52%;
  right: 4%;
  left: 4%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(208, 241, 232, .1), transparent);
}
.v4-fallback__road {
  position: absolute;
  top: 50%;
  bottom: -22%;
  left: 50%;
  width: min(70vw, 1120px);
  background:
    linear-gradient(90deg, rgba(213, 237, 227, .08), transparent 2%, transparent 48.9%, rgba(213, 237, 227, .15) 49.4%, rgba(213, 237, 227, .15) 50.6%, transparent 51.1%, transparent 98%, rgba(213, 237, 227, .08)),
    linear-gradient(180deg, #111716, #080d0b);
  clip-path: polygon(45.8% 0, 54.2% 0, 100% 100%, 0 100%);
  transform: translateX(-50%);
  box-shadow: 0 -12px 60px rgba(129, 197, 183, .04);
}
.v4-fallback__road::after {
  position: absolute;
  top: 9%;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: repeating-linear-gradient(180deg, rgba(220, 238, 230, .25) 0 13px, transparent 13px 29px);
  opacity: .28;
  content: "";
}
.v4-fallback__road > i {
  position: absolute;
  bottom: 12%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--v4-accent);
  box-shadow: 0 0 12px rgba(134, 216, 205, .45);
}
.v4-fallback__road > i:nth-child(1) { left: 18%; }
.v4-fallback__road > i:nth-child(2) { left: 50%; bottom: 48%; }
.v4-fallback__road > i:nth-child(3) { right: 18%; }
.v4-fallback__gate {
  position: absolute;
  z-index: 1;
  top: 39%;
  left: 50%;
  width: min(30vw, 470px);
  height: min(21vw, 320px);
  border-top: 1px solid rgba(180, 226, 214, .2);
  opacity: .62;
  transform: translateX(-50%);
}
.v4-fallback__gate > i { position: absolute; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(180, 226, 214, .28), transparent); }
.v4-fallback__gate > i:first-child { left: 0; }
.v4-fallback__gate > i:nth-child(2) { right: 0; }
.v4-fallback__gate > span {
  position: absolute;
  top: -34px;
  right: 0;
  color: rgba(209, 255, 244, .33);
  font-size: clamp(18px, 2.2vw, 36px);
  font-weight: 520;
  letter-spacing: -.04em;
}
.v4-fallback__car {
  position: absolute;
  z-index: 2;
  right: 26%;
  bottom: 16%;
  width: clamp(80px, 11vw, 180px);
  aspect-ratio: 2.1 / 1;
  border-radius: 48% 52% 23% 22% / 62% 61% 30% 30%;
  background: linear-gradient(155deg, #1d2623, #080b0a 62%);
  box-shadow: 0 22px 32px rgba(0, 0, 0, .45), inset 0 1px rgba(224, 241, 233, .13);
  transform: perspective(420px) rotateX(-4deg) rotateY(-8deg);
}
.v4-fallback__car::before {
  position: absolute;
  top: 20%;
  right: 23%;
  left: 23%;
  height: 31%;
  border-radius: 50% 50% 17% 17%;
  background: #0a100e;
  content: "";
}
.v4-fallback__car > i {
  position: absolute;
  bottom: 17%;
  width: 13%;
  height: 9%;
  border-radius: 999px;
  background: rgba(209, 255, 244, .72);
  box-shadow: 0 0 14px rgba(134, 216, 205, .38);
}
.v4-fallback__car > i:first-child { left: 9%; }
.v4-fallback__car > i:last-child { right: 9%; }
.v4-fallback__network { position: absolute; z-index: 1; inset: 12% 14%; opacity: var(--network-reveal); }
.v4-fallback__network > i { position: absolute; top: 50%; left: 50%; width: 38%; height: 1px; background: linear-gradient(90deg, transparent, rgba(134, 216, 205, .25), transparent); transform-origin: left; }
.v4-fallback__network > i:nth-child(1) { transform: rotate(24deg); }
.v4-fallback__network > i:nth-child(2) { transform: rotate(153deg); }
.v4-fallback__network > i:nth-child(3) { transform: rotate(205deg); }
.v4-fallback__network > i:nth-child(4) { transform: rotate(326deg); }
.v4-no-webgl #v4-canvas { display: none; }
.v4-no-webgl .v4-fallback-world { opacity: 1; }

.v4-atmosphere {
  position: absolute;
  z-index: 3;
  inset: 0;
  background:
    radial-gradient(ellipse at var(--glow-x, 60%) var(--glow-y, 45%), rgba(97, 165, 150, .12), transparent 29%),
    radial-gradient(ellipse at 50% 100%, rgba(28, 67, 58, .12), transparent 42%);
  pointer-events: none;
}
.v4-light-guide {
  position: absolute;
  z-index: 4;
  right: -12%;
  bottom: -31%;
  left: 22%;
  height: 68%;
  background: radial-gradient(ellipse at 50% 100%, rgba(178, 238, 225, .11), transparent 62%);
  opacity: var(--route-light, 0);
  mix-blend-mode: screen;
  pointer-events: none;
}
.v4-grain {
  position: absolute;
  z-index: 5;
  inset: -40%;
  width: 180%;
  height: 180%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitchTiles'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.58'/%3E%3C/svg%3E");
  opacity: .022;
  animation: v4-grain .32s steps(2) infinite;
  pointer-events: none;
}

/* Screen-space narrative — typography, never cards. */
.v4-stories {
  position: absolute;
  z-index: 12;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .72s ease;
  pointer-events: none;
}
.v4-entered .v4-stories { opacity: 1; visibility: visible; }
.v4-story {
  --micro: 0;
  --headline: 0;
  --support: 0;
  --event: 0;
  position: absolute;
  top: 50%;
  width: min(640px, 45vw);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(-50% + var(--story-y, 0px)), 0);
  will-change: opacity, transform;
}
.v4-story::before {
  position: absolute;
  z-index: -1;
  top: -48%;
  bottom: -48%;
  left: -15%;
  width: 125%;
  background: radial-gradient(ellipse at 20% 50%, rgba(2, 5, 4, .69), rgba(2, 5, 4, .32) 48%, transparent 74%);
  pointer-events: none;
  content: "";
}
.v4-story[data-side="left"] { left: var(--v4-gutter); }
.v4-story[data-side="right"] { right: calc(var(--v4-gutter) + 64px); text-align: right; }
.v4-story[data-side="right"]::before { right: -15%; left: auto; background-position: 80% 50%; transform: scaleX(-1); }
.v4-story[data-side="right"] .v4-story__support { margin-left: auto; }
.v4-story[data-side="center"] {
  top: 47%;
  right: 50%;
  width: min(980px, 76vw);
  text-align: center;
  transform: translate3d(50%, calc(-50% + var(--story-y, 0px)), 0);
}
.v4-story[data-side="center"]::before {
  top: -85%;
  right: -8%;
  bottom: -85%;
  left: -8%;
  width: auto;
  background: radial-gradient(ellipse at center, rgba(2, 5, 4, .62), rgba(2, 5, 4, .25) 48%, transparent 73%);
}
.v4-story[data-side="center"] .v4-story__support { margin-inline: auto; }
.v4-story > .v4-kicker {
  opacity: var(--micro);
  transform: translate3d(0, calc((1 - var(--micro)) * 11px), 0);
}
.v4-story h2 {
  max-width: 780px;
  margin: 14px 0 19px;
  font-size: clamp(48px, 5.15vw, 86px);
  font-weight: 565;
  font-stretch: 88%;
  letter-spacing: -.054em;
  line-height: .92;
  text-wrap: balance;
  opacity: var(--headline);
  transform: translate3d(0, calc((1 - var(--headline)) * 22px), 0);
}
.v4-story h2:focus-visible { outline: none; }
.v4-story h2 span,
.v4-story h2 em { display: block; }
.v4-story h2 em { color: var(--v4-accent-bright); font-style: normal; font-weight: 475; font-stretch: 100%; letter-spacing: -.038em; }
.v4-story[data-side="right"] h2 { margin-left: auto; }
.v4-story[data-side="center"] h2 { max-width: 980px; margin-inline: auto; }
.v4-story__support {
  max-width: 510px;
  margin: 0;
  color: var(--v4-muted);
  font-size: clamp(14px, 1.12vw, 17px);
  font-weight: 430;
  letter-spacing: -.006em;
  line-height: 1.58;
  text-wrap: balance;
  opacity: var(--support);
  transform: translate3d(0, calc((1 - var(--support)) * 15px), 0);
}
.v4-story--hero { width: min(710px, 52vw); }
.v4-story--hero h2 { max-width: 850px; font-size: clamp(55px, 6.25vw, 104px); }
.v4-story--network { top: 46%; }
.v4-story--network h2 { font-size: clamp(52px, 5.7vw, 92px); }
.v4-story--final h2 { font-size: clamp(54px, 6vw, 98px); }
.v4-text-action {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 24px;
  padding: 0 0 7px;
  border-bottom: 1px solid rgba(209, 255, 244, .35);
  background: transparent;
  color: var(--v4-accent-bright);
  font-size: 10px;
  font-weight: 590;
  letter-spacing: .035em;
  cursor: pointer;
  opacity: var(--event);
  transform: translate3d(0, calc((1 - var(--event)) * 12px), 0);
}
.v4-text-action span { transition: transform .25s ease; }
.v4-text-action:hover span { transform: translateY(3px); }

.v4-story__event,
.v4-live-route {
  opacity: var(--event);
  transform: translate3d(0, calc((1 - var(--event)) * 12px), 0);
}
.v4-story__event {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 24px 0 0;
  color: var(--v4-soft);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.v4-story__event > span {
  display: grid;
  min-width: 25px;
  height: 25px;
  place-items: center;
  border: 1px solid var(--v4-line-strong);
  border-radius: 50%;
  color: var(--v4-accent-bright);
}
.v4-story__event > i { width: 86px; height: 1px; background: linear-gradient(90deg, var(--v4-accent), rgba(134, 216, 205, .13)); }
.v4-story__event--nodes { position: relative; min-width: 128px; height: 27px; justify-content: flex-end; }
.v4-story__event--nodes > i { width: 5px; height: 5px; border-radius: 50%; background: rgba(213, 237, 227, .36); }
.v4-story__event--nodes > i:nth-child(2) { background: var(--v4-accent-bright); box-shadow: 0 0 11px rgba(134, 216, 205, .55); }
.v4-story__event--nodes > b { position: absolute; right: 4px; bottom: 0; width: 82px; height: 1px; background: linear-gradient(90deg, transparent, var(--v4-accent)); transform: rotate(-8deg); transform-origin: right; }
.v4-story__event--checks > span { min-width: auto; height: auto; padding: 5px 8px; border-radius: 2px; }
.v4-story__event--complete { color: var(--v4-accent-bright); }
.v4-story__event--complete > i { width: 5px; height: 5px; border-radius: 50%; background: var(--v4-accent); box-shadow: 0 0 12px var(--v4-accent); }
.v4-live-route {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto;
  gap: 11px;
  align-items: center;
  width: min(610px, 70vw);
  margin: 30px auto 0;
  color: var(--v4-soft);
  font-size: 7px;
  font-weight: 650;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.v4-live-route > i { position: relative; height: 1px; background: rgba(213, 237, 227, .17); }
.v4-live-route > i:first-of-type { background: var(--v4-accent); box-shadow: 0 0 8px rgba(134, 216, 205, .25); }
.v4-live-route > i > b { position: absolute; top: -2px; right: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--v4-accent-bright); box-shadow: 0 0 12px var(--v4-accent); }
.v4-final__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 29px;
  opacity: var(--event);
  transform: translate3d(0, calc((1 - var(--event)) * 14px), 0);
}
.v4-action {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 17px;
  padding: 0 20px;
  border: 1px solid var(--v4-line);
  border-radius: 999px;
  background: rgba(3, 7, 6, .3);
  color: rgba(243, 246, 242, .88);
  font-size: 10px;
  font-weight: 590;
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .3s var(--v4-ease);
}
.v4-action span { color: var(--v4-accent-bright); }
.v4-action:hover { border-color: rgba(134, 216, 205, .5); background: rgba(134, 216, 205, .08); transform: translateY(-2px); }
.v4-action--primary { border-color: var(--v4-ink); background: var(--v4-ink); color: var(--v4-bg-deep); }
.v4-action--primary span { color: var(--v4-bg-deep); }
.v4-action--primary:hover { border-color: var(--v4-accent-bright); background: var(--v4-accent-bright); color: var(--v4-bg-deep); }

/* Quiet wayfinding */
.v4-stage-meta {
  position: absolute;
  z-index: 15;
  right: var(--v4-gutter);
  bottom: 26px;
  left: var(--v4-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--v4-soft);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  letter-spacing: .18em;
  pointer-events: none;
  text-transform: uppercase;
  opacity: 0;
  visibility: hidden;
  transition: opacity .65s ease;
}
.v4-stage-meta p { display: flex; align-items: center; gap: 8px; margin: 0; }
.v4-stage-meta p > i { width: 5px; height: 5px; border-radius: 50%; background: var(--v4-accent); box-shadow: 0 0 10px rgba(134, 216, 205, .6); }
.v4-checkpoint-nav {
  position: absolute;
  z-index: 17;
  top: 50%;
  right: calc(var(--v4-gutter) - 14px);
  display: grid;
  justify-items: center;
  gap: 12px;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .65s ease;
}
.v4-checkpoint-nav > p {
  display: grid;
  justify-items: center;
  gap: 9px;
  margin: 0 0 3px;
  color: var(--v4-soft);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
  font-weight: 680;
  letter-spacing: .12em;
}
.v4-checkpoint-nav > p > span:first-child { color: var(--v4-accent-bright); }
.v4-checkpoint-nav > p > i { width: 1px; height: 36px; background: linear-gradient(180deg, var(--v4-accent), rgba(213, 237, 227, .1)); }
.v4-checkpoint-nav ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.v4-checkpoint-nav button {
  position: relative;
  display: grid;
  width: 34px;
  height: 28px;
  place-items: center;
  background: transparent;
  color: var(--v4-soft);
  cursor: pointer;
}
.v4-checkpoint-nav button::before {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(216, 232, 224, .3);
  transition: width .3s var(--v4-ease), background .25s ease, box-shadow .25s ease;
  content: "";
}
.v4-checkpoint-nav button > span {
  position: absolute;
  right: 28px;
  color: var(--v4-accent-bright);
  font-size: 7px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .1em;
  opacity: 0;
  transform: translateX(5px);
  transition: opacity .25s ease, transform .3s var(--v4-ease);
}
.v4-checkpoint-nav button:hover::before,
.v4-checkpoint-nav button:focus-visible::before,
.v4-checkpoint-nav button[aria-current="step"]::before {
  width: 12px;
  border-radius: 999px;
  background: var(--v4-accent);
  box-shadow: 0 0 10px rgba(134, 216, 205, .45);
}
.v4-checkpoint-nav button:hover > span,
.v4-checkpoint-nav button:focus-visible > span,
.v4-checkpoint-nav button[aria-current="step"] > span { opacity: 1; transform: none; }
.v4-scroll-cue {
  position: absolute;
  z-index: 15;
  bottom: 25px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--v4-soft);
  font-size: 7px;
  letter-spacing: .17em;
  text-transform: uppercase;
  transform: translateX(-50%);
  opacity: calc(1 - min(1, var(--journey-progress) * 20));
  pointer-events: none;
}
.v4-entered .v4-stage-meta,
.v4-entered .v4-checkpoint-nav { opacity: 1; visibility: visible; }
.v4-entered .v4-checkpoint-nav { pointer-events: auto; }
.v4-scroll-cue > i { position: relative; width: 33px; height: 1px; overflow: hidden; background: rgba(216, 232, 224, .16); }
.v4-scroll-cue > i::after { position: absolute; inset: 0; background: var(--v4-accent); transform: translateX(-100%); animation: v4-cue 1.8s ease infinite; content: ""; }
body:not(.v4-entered) .v4-scroll-cue { opacity: 0; }
.v4-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The journey ends directly in a compact footer; the commercial CTA remains in-world. */
.v4-footer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 50px 80px;
  align-items: start;
  padding: clamp(56px, 7vw, 92px) var(--v4-gutter) 28px;
  border-top: 1px solid rgba(213, 237, 227, .09);
  background: #020403;
}
.v4-footer > div > p { max-width: 430px; margin: 14px 0 0; color: var(--v4-muted); font-size: 12px; line-height: 1.6; }
.v4-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 14px 34px; }
.v4-footer nav a { display: inline-flex; min-height: 32px; align-items: center; color: rgba(232, 239, 234, .7); font-size: 10px; transition: color .2s ease; }
.v4-footer nav a:hover { color: var(--v4-accent-bright); }
.v4-footer > p {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding-top: 23px;
  border-top: 1px solid var(--v4-line);
  color: var(--v4-soft);
  font-size: 8px;
  letter-spacing: .08em;
}
.v4-noscript { display: none; }

@keyframes v4-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(1.4%, -.8%); }
  50% { transform: translate(-.7%, 1.3%); }
  75% { transform: translate(.8%, .7%); }
}
@keyframes v4-cue { 55%, 100% { transform: translateX(100%); } }
@keyframes v4-enter-light {
  0% { transform: translate(-50%, -50%) scale(1); }
  55% { opacity: 1; transform: translate(-50%, -50%) scale(1.8); }
  100% { opacity: 0; transform: translate(-50%, 48vh) scale(14); }
}

@media (max-width: 1180px) {
  :root { --v4-gutter: clamp(24px, 4vw, 54px); --v4-header-h: 72px; }
  .v4-story { width: min(620px, 53vw); }
  .v4-story--hero { width: min(680px, 61vw); }
  .v4-story h2 { font-size: clamp(45px, 5.8vw, 72px); }
  .v4-story--hero h2 { font-size: clamp(54px, 7.1vw, 88px); }
  .v4-story[data-side="center"] { width: min(900px, 78vw); }
}

@media (max-width: 760px) {
  :root {
    --v4-gutter: 18px;
    --v4-header-h: 64px;
  }
  .v4-header { grid-template-columns: 1fr auto auto; gap: 8px; height: var(--v4-header-h); }
  .v4-header__route, .v4-header__nav { display: none; }
  .v4-header__cta { min-height: 36px; padding: 0 13px; font-size: 9px; }
  .v4-header__cta span { display: none; }
  .v4-intro__copy { transform: translateY(-5vh); }
  .v4-intro h1 { margin: 17px 0 31px; font-size: clamp(55px, 16.6vw, 78px); font-stretch: 90%; letter-spacing: -.05em; }
  .v4-intro__road--left { transform: translateX(-112px) rotate(24deg); }
  .v4-intro__road--right { transform: translateX(112px) rotate(-24deg); }
  .v4-intro__horizon { width: 86vw; }
  .v4-intro__note { bottom: max(22px, env(safe-area-inset-bottom)); text-align: center; }
  .v4-journey { height: 720svh; min-height: 5000px; }
  .v4-sticky { min-height: 560px; }
  .v4-sticky::after {
    background:
      linear-gradient(180deg, rgba(1, 3, 2, .28), transparent 20%, transparent 57%, rgba(1, 3, 2, .6) 83%, rgba(1, 3, 2, .82)),
      linear-gradient(90deg, rgba(1, 3, 2, .2), transparent 20%, transparent 80%, rgba(1, 3, 2, .18));
  }
  .v4-atmosphere { background: radial-gradient(ellipse at var(--glow-x, 58%) var(--glow-y, 46%), rgba(97, 165, 150, .13), transparent 31%); }
  .v4-light-guide { right: -30%; bottom: -20%; left: -25%; }
  .v4-fallback__road { width: 115vw; }
  .v4-fallback__gate { top: 43%; width: 58vw; height: 36vw; }
  .v4-fallback__car { right: 16%; bottom: 14%; width: 28vw; }
  .v4-stories { inset: 0; }
  .v4-story,
  .v4-story--hero,
  .v4-story[data-side="left"],
  .v4-story[data-side="right"],
  .v4-story[data-side="center"] {
    top: calc(var(--v4-header-h) + clamp(64px, 12svh, 108px));
    right: 18px;
    left: 18px;
    width: auto;
    max-width: none;
    text-align: left;
    transform: translate3d(0, var(--story-y, 0px), 0);
  }
  .v4-story::before,
  .v4-story[data-side="right"]::before,
  .v4-story[data-side="center"]::before {
    top: -45%;
    right: -18px;
    bottom: -55%;
    left: -18px;
    width: auto;
    background: linear-gradient(180deg, rgba(2, 5, 4, .76), rgba(2, 5, 4, .38) 56%, transparent);
    transform: none;
  }
  .v4-story[data-side="right"] .v4-story__support,
  .v4-story[data-side="center"] .v4-story__support { margin-left: 0; }
  .v4-story h2,
  .v4-story--hero h2,
  .v4-story--network h2,
  .v4-story--final h2,
  .v4-story[data-side="right"] h2,
  .v4-story[data-side="center"] h2 {
    max-width: 580px;
    margin: 9px 0 12px;
    font-size: clamp(39px, 11.2vw, 51px);
    font-stretch: 91%;
    letter-spacing: -.049em;
    line-height: .92;
  }
  .v4-story--hero h2 { font-size: clamp(43px, 12.6vw, 57px); }
  .v4-story__support { max-width: 510px; font-size: 12px; line-height: 1.52; }
  .v4-story__event { margin-top: 17px; }
  .v4-story__event--checks > span { padding: 4px 6px; }
  .v4-live-route { width: 100%; gap: 6px; margin-top: 22px; font-size: 6px; }
  .v4-text-action { margin-top: 17px; }
  .v4-final__actions { justify-content: flex-start; gap: 7px; margin-top: 20px; }
  .v4-action { min-height: 43px; padding: 0 14px; font-size: 9px; }
  .v4-stage-meta { top: calc(var(--v4-header-h) + 18px); right: 18px; bottom: auto; left: 18px; }
  .v4-stage-meta > span { display: none; }
  .v4-checkpoint-nav {
    top: auto;
    right: 14px;
    bottom: max(17px, env(safe-area-inset-bottom));
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: none;
  }
  .v4-checkpoint-nav > p { display: flex; align-items: center; gap: 8px; margin: 0; }
  .v4-checkpoint-nav > p > i { width: 26px; height: 1px; }
  .v4-checkpoint-nav ol { display: flex; gap: 0; }
  .v4-checkpoint-nav button { width: 28px; height: 30px; }
  .v4-checkpoint-nav button > span { top: -15px; right: auto; }
  .v4-scroll-cue { display: none; }
  .v4-footer { grid-template-columns: 1fr; gap: 36px; }
  .v4-footer nav { justify-content: flex-start; }
}

@media (max-width: 410px) {
  .v4-loader__route,
  .v4-loader > p { width: 82vw; }
  .v4-loader li { width: 29px; height: 29px; }
  .v4-story,
  .v4-story--hero,
  .v4-story[data-side="left"],
  .v4-story[data-side="right"],
  .v4-story[data-side="center"] { top: calc(var(--v4-header-h) + clamp(52px, 10svh, 84px)); }
  .v4-story h2,
  .v4-story--hero h2,
  .v4-story--network h2,
  .v4-story--final h2 { font-size: 39px; }
  .v4-story--hero h2 { font-size: 44px; }
  .v4-story.v4-story--network h2 { font-size: 35px; letter-spacing: -.045em; }
  .v4-story__support { font-size: 11.5px; }
  .v4-story__event > i { width: 56px; }
  .v4-live-route > span:nth-of-type(2) { display: none; }
  .v4-live-route { grid-template-columns: auto 1fr 1fr auto; }
  .v4-final__actions { display: grid; width: 100%; }
  .v4-action { width: 100%; }
  .v4-footer > p { flex-direction: column; gap: 9px; }
}

/* A separate reduced-motion presentation: static editorial checkpoints, with the road retained. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .v4-grain { display: none; }
}
.v4-reduced-motion .v4-grain { display: none; }
.v4-entered.v4-reduced-motion .v4-journey { height: auto; min-height: 0; }
.v4-entered.v4-reduced-motion .v4-sticky {
    position: relative;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-top: min(68svh, 720px);
    background: #040706;
  }
  .v4-entered.v4-reduced-motion #v4-canvas,
  .v4-entered.v4-reduced-motion .v4-fallback-world,
  .v4-entered.v4-reduced-motion .v4-atmosphere,
  .v4-entered.v4-reduced-motion .v4-light-guide {
    top: 0;
    bottom: auto;
    height: min(68svh, 720px);
  }
  .v4-entered.v4-reduced-motion .v4-light-guide { right: 0; left: 0; }
  .v4-entered.v4-reduced-motion .v4-sticky::after { bottom: auto; height: min(68svh, 720px); }
  .v4-entered.v4-reduced-motion .v4-stories {
    position: relative;
    display: grid;
    padding: 0 var(--v4-gutter) clamp(60px, 8vw, 110px);
    background: linear-gradient(180deg, #040706, #060a08);
  }
  .v4-entered.v4-reduced-motion .v4-story,
  .v4-entered.v4-reduced-motion .v4-story[data-side="left"],
  .v4-entered.v4-reduced-motion .v4-story[data-side="right"],
  .v4-entered.v4-reduced-motion .v4-story[data-side="center"] {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: min(760px, 100%);
    min-height: 0;
    margin: 0;
    padding: clamp(58px, 8vw, 100px) 0;
    border-top: 1px solid var(--v4-line);
    opacity: 1 !important;
    visibility: visible !important;
    text-align: left;
    transform: none !important;
    pointer-events: auto !important;
  }
  .v4-entered.v4-reduced-motion .v4-story[data-side="right"] { margin-left: auto; }
  .v4-entered.v4-reduced-motion .v4-story[data-side="center"] { margin-inline: auto; }
  .v4-entered.v4-reduced-motion .v4-story::before { display: none; }
  .v4-entered.v4-reduced-motion .v4-story > .v4-kicker,
  .v4-entered.v4-reduced-motion .v4-story h2,
  .v4-entered.v4-reduced-motion .v4-story__support,
  .v4-entered.v4-reduced-motion .v4-story__event,
  .v4-entered.v4-reduced-motion .v4-live-route,
  .v4-entered.v4-reduced-motion .v4-text-action,
  .v4-entered.v4-reduced-motion .v4-final__actions {
    opacity: 1;
    transform: none;
  }
  .v4-entered.v4-reduced-motion .v4-story[data-side="right"] h2,
  .v4-entered.v4-reduced-motion .v4-story[data-side="right"] .v4-story__support,
  .v4-entered.v4-reduced-motion .v4-story[data-side="center"] h2,
  .v4-entered.v4-reduced-motion .v4-story[data-side="center"] .v4-story__support { margin-left: 0; margin-right: 0; }
  .v4-entered.v4-reduced-motion .v4-final__actions { justify-content: flex-start; }
.v4-entered.v4-reduced-motion .v4-stage-meta,
.v4-entered.v4-reduced-motion .v4-checkpoint-nav,
.v4-entered.v4-reduced-motion .v4-scroll-cue { display: none; }

.v4-noscript {
  min-height: 100vh;
  align-content: center;
  gap: 28px;
  padding: clamp(36px, 8vw, 120px);
  background: #050807;
}
.v4-noscript > p { margin: 0; color: var(--v4-accent); font-size: 10px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; }
.v4-noscript > h1 { max-width: 1050px; margin: 0; font-size: clamp(48px, 8vw, 108px); font-weight: 540; letter-spacing: -.055em; line-height: .92; }
.v4-noscript ol { display: grid; max-width: 1050px; margin: 20px 0; padding: 0; border-top: 1px solid var(--v4-line); list-style: none; }
.v4-noscript li { display: grid; grid-template-columns: 55px 1fr; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--v4-line); }
.v4-noscript li > span { color: var(--v4-accent); font-size: 10px; }
.v4-noscript h2 { margin: 0; font-size: clamp(24px, 4vw, 42px); font-weight: 520; letter-spacing: -.04em; }
.v4-noscript li p { margin: 7px 0 0; color: var(--v4-muted); }
.v4-noscript > a { width: max-content; padding-bottom: 7px; border-bottom: 1px solid var(--v4-accent); color: var(--v4-accent-bright); }