:root {
  --yellow: #fde802;
  --blue: #0543d9;
  --green: #40dd2e;
  --cyan: #16c5fc;
  --red: #ea1618;
  --black: #151514;
  --deep-black: #070708;
  --white: #ffffff;
  --cream: #fff8d6;
  --film-progress: 0;
  --takeover: 0;
  --windowed: 1;
  --outro: 0;
  --film-chrome: 0;
  --header-opacity: 1;
  --menu-accent: #3dbad7;
  --menu-ink: #151514;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; background: var(--deep-black); }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--deep-black);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}
body.is-loading { overflow: hidden; }
a { color: inherit; }
img, video { display: block; max-width: 100%; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
::selection { color: var(--black); background: var(--yellow); }

.skip-link {
  position: fixed;
  z-index: 500;
  left: 1rem;
  top: 1rem;
  padding: .7rem 1rem;
  color: var(--black);
  background: var(--yellow);
  transform: translateY(-180%);
  transition: transform 160ms ease;
}
.skip-link:focus { transform: translateY(0); }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.splash {
  position: fixed;
  z-index: 400;
  inset: 0;
  overflow: hidden;
  background: var(--black);
  transition: opacity 620ms cubic-bezier(.19, 1, .22, 1), visibility 620ms;
}
.splash-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.splash-animation-mobile { display: none; }
.splash-animation svg { width: 100% !important; height: 100% !important; }
body.is-ready .splash { opacity: 0; visibility: hidden; pointer-events: none; }

.site-header {
  position: fixed;
  z-index: 90;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 5.4rem;
  padding: 0 clamp(1.15rem, 3.2vw, 3.4rem);
  border-bottom: 1px solid rgba(255,255,255,.13);
  background: rgba(7,7,8,.22);
  backdrop-filter: blur(14px);
  opacity: var(--header-opacity);
  transition: opacity 80ms linear, background 280ms ease;
}
body.is-after-journey .site-header { --header-opacity: 1; background: rgba(7,7,8,.88); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}
.brand-mark {
  width: 2.35rem;
  height: 2.35rem;
  display: grid;
  place-items: center;
  border-radius: .62rem;
  background: var(--yellow);
  transform: rotate(-2deg);
}
.brand-mark img { width: 56%; height: 62%; object-fit: contain; filter: brightness(0); }
.brand-name {
  font-family: Arial, Helvetica, sans-serif;
  font-size: .92rem;
  letter-spacing: -.045em;
}
.site-header nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2.2rem); }
.site-header nav a {
  text-decoration: none;
  font: 700 .58rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-header nav a:not(.nav-contact) { color: rgba(255,255,255,.67); }
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--yellow); }
.nav-contact {
  padding: .72rem .92rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
}

.site-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--black);
  background:
    radial-gradient(circle at 76% 48%, rgba(253,232,2,.16), transparent 24rem),
    linear-gradient(112deg, var(--cream) 0 57%, #0b0b0c 57.1% 100%);
}
.site-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .1;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5vw - 1px), currentColor calc(12.5vw - 1px) 12.5vw);
}

.journey { position: relative; height: 1150vh; background: var(--deep-black); }
.journey-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 38rem;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  background: var(--deep-black);
}
.journey-landing {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  overflow: clip;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 48%, rgba(22,197,252,.07), transparent 38rem),
    var(--deep-black);
  opacity: var(--windowed);
  transform: translateY(calc(var(--takeover) * -2rem));
}
.journey-landing::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .08;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(12.5vw - 1px), currentColor calc(12.5vw - 1px) 12.5vw);
}
.hero-noise {
  position: absolute;
  inset: 0;
  opacity: .045;
  background-image:
    repeating-linear-gradient(19deg, transparent 0 2px, rgba(0,0,0,.7) 2px 3px),
    repeating-linear-gradient(101deg, transparent 0 3px, rgba(0,0,0,.4) 3px 4px);
  pointer-events: none;
}
.hero-copy {
  position: absolute;
  left: clamp(1.35rem, 5.4vw, 6rem);
  top: 50%;
  width: min(47vw, 47rem);
  transform: translateY(-48%);
}
.eyebrow {
  margin: 0 0 1.25rem;
  font: 700 .62rem/1.25 Arial, Helvetica, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hero-copy .eyebrow { color: #526600; }
.hero-copy h1,
.statement-section h2,
.project-copy h2,
.section-heading h2,
.why-copy h2,
.contact-section h2,
.journey-return h2 {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 400;
  letter-spacing: -.075em;
}
.hero-copy h1 { font-size: clamp(4rem, 7.9vw, 9rem); line-height: .82; }
.hero-copy h1 em { color: #638000; font-style: normal; }
.hero-lede {
  max-width: 36rem;
  margin: 2rem 0 0;
  font-size: clamp(.96rem, 1.25vw, 1.25rem);
  line-height: 1.55;
  letter-spacing: -.018em;
}
.hero-lede a { text-decoration-color: #638000; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  padding: .8rem 1.15rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  text-decoration: none;
  font: 700 .62rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  transition: transform 180ms ease, color 180ms ease, background 180ms ease;
}
.button:hover, .button:focus-visible { transform: translateY(-2px); }
.button-primary { color: var(--cream); border-color: var(--black); background: var(--black); }
.button-primary:hover { color: var(--black); background: var(--yellow); }
.button-quiet { color: var(--black); }
.hero-rail {
  position: absolute;
  left: clamp(1.35rem, 5.4vw, 6rem);
  right: clamp(1.35rem, 3.2vw, 3.4rem);
  bottom: 2rem;
  display: flex;
  align-items: center;
  width: 44vw;
  gap: .8rem;
  font: 700 .5rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-rail i { height: 1px; flex: 1; background: rgba(21,21,20,.24); }
.journey-opening {
  position: absolute;
  z-index: 22;
  left: clamp(1.25rem, 3.2vw, 3.4rem);
  right: clamp(1.25rem, 3.2vw, 3.4rem);
  top: 7.2rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  color: rgba(255,255,255,.56);
  opacity: var(--windowed);
  font: 700 .52rem/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  pointer-events: none;
}
.journey-opening p { display: grid; gap: .3rem; margin: 0; }
.journey-opening strong { color: var(--yellow); font-size: clamp(.7rem, .9vw, .9rem); }
.film-stage {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100vh;
  overflow: hidden;
  background: #020203;
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(calc(.68 + var(--takeover) * .32));
  box-shadow: 0 2rem 8rem rgba(0,0,0,calc(var(--windowed) * .68));
  will-change: transform, opacity;
  opacity: calc(1 - var(--outro));
}
.film-video { width: 100%; height: 100%; object-fit: cover; background: #020203; }
.film-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: var(--takeover);
  background:
    radial-gradient(circle at 50% 45%, transparent 48%, rgba(0,0,0,.24) 118%),
    linear-gradient(to bottom, rgba(0,0,0,.14), transparent 18%, transparent 76%, rgba(0,0,0,.28));
}
.film-copy {
  position: absolute;
  z-index: 24;
  left: clamp(1.4rem, 4vw, 4.2rem);
  top: 50%;
  width: min(31rem, 38vw);
  color: var(--white);
  transform: translateY(-50%);
  opacity: var(--film-chrome);
  filter: drop-shadow(0 .5rem 1.8rem rgba(0,0,0,.85));
}
.film-chapter { display: none; padding-left: 1rem; border-left: 2px solid var(--yellow); }
.film-chapter.is-active { display: block; animation: chapter-in 450ms cubic-bezier(.19,1,.22,1); }
.film-chapter span { color: var(--yellow); font: 700 .54rem/1 Arial, Helvetica, sans-serif; letter-spacing: .13em; }
.film-chapter h2 { margin: .85rem 0 0; font: 900 clamp(2rem, 3.7vw, 4.7rem)/.92 Arial, Helvetica, sans-serif; letter-spacing: -.065em; }
@keyframes chapter-in { from { opacity: 0; transform: translateY(1.2rem); } }

.film-instruction {
  position: absolute;
  z-index: 26;
  left: 50%;
  bottom: 4.3rem;
  display: grid;
  place-items: center;
  gap: .2rem;
  color: var(--white);
  transform: translateX(-50%);
  opacity: calc(var(--windowed) * .85);
  font: 700 .5rem/1.2 Arial, Helvetica, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  filter: drop-shadow(0 2px 8px #000);
}
.film-instruction i { color: var(--yellow); font-size: 1rem; font-style: normal; animation: arrow-drop 1.4s ease-in-out infinite; }
.film-instruction small { opacity: .56; font: inherit; }
@keyframes arrow-drop { 50% { transform: translateY(.35rem); } }

.film-controls {
  position: absolute;
  z-index: 28;
  left: clamp(1.25rem, 2.5vw, 2.6rem);
  right: clamp(1.25rem, 2.5vw, 2.6rem);
  bottom: 1.6rem;
  display: grid;
  grid-template-columns: auto 1fr 3rem auto;
  align-items: center;
  gap: 1rem;
  color: var(--white);
  opacity: var(--film-chrome);
  filter: drop-shadow(0 2px 8px #000);
  pointer-events: none;
}
.film-controls button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  font: 700 .5rem/1 Arial, Helvetica, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.film-controls button:hover, .film-controls button:focus-visible { color: var(--yellow); }
.status-dot { width: .58rem; height: .58rem; border: 1px solid var(--yellow); border-radius: 50%; }
.film-controls button[aria-pressed="true"] .status-dot { background: var(--yellow); box-shadow: 0 0 1rem rgba(253,232,2,.66); animation: status-pulse 1.8s ease-in-out infinite; }
@keyframes status-pulse { 50% { opacity: .4; transform: scale(.65); } }
.film-progress { position: relative; height: 1px; background: rgba(255,255,255,.32); }
.film-progress i { position: absolute; inset: 0; background: var(--yellow); transform: scaleX(var(--film-progress)); transform-origin: left; }
.film-controls time { text-align: right; font: 700 .5rem/1 Arial, Helvetica, sans-serif; }
.sound-bars { display: flex; align-items: end; gap: 2px; height: .7rem; }
.sound-bars i { width: 2px; background: currentColor; animation: sound-bars 820ms ease-in-out infinite alternate; animation-play-state: paused; }
.sound-bars i:first-child { height: 35%; }
.sound-bars i:nth-child(2) { height: 100%; animation-delay: -300ms; }
.sound-bars i:last-child { height: 64%; animation-delay: -520ms; }
.sound-control[aria-pressed="true"] .sound-bars i { animation-play-state: running; }
@keyframes sound-bars { to { height: 28%; } }

.journey-return {
  position: absolute;
  z-index: 42;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7rem 8vw 4rem;
  color: var(--black);
  background: var(--yellow);
  transform: translateY(calc((1 - var(--outro)) * 105vh));
  will-change: transform;
}
.journey-return h2 { font-size: clamp(4.2rem, 10vw, 11rem); line-height: .8; }
.journey-return h2 em { color: transparent; font-style: normal; -webkit-text-stroke: 2px var(--black); }
.journey-return > p:not(.eyebrow) { max-width: 34rem; margin: 2rem 0 0; font-size: clamp(1rem, 1.45vw, 1.35rem); }
.journey-return > span { position: absolute; right: 3rem; bottom: 2rem; font: 700 .55rem/1 Arial, Helvetica, sans-serif; letter-spacing: .1em; text-transform: uppercase; }

.content-site { position: relative; z-index: 5; overflow: hidden; background: var(--deep-black); }
.statement-section,
.myvehicle-section,
.capabilities-section,
.why-section,
.contact-section {
  position: relative;
  padding: clamp(5.5rem, 10vw, 10rem) clamp(1.25rem, 6vw, 7rem);
}
.statement-section { min-height: 95vh; display: flex; flex-direction: column; justify-content: center; background: var(--deep-black); }
.statement-section .eyebrow { color: var(--yellow); }
.statement-section h2 { max-width: 78rem; font-size: clamp(4rem, 10.5vw, 11.5rem); line-height: .8; }
.statement-section h2 em { color: var(--yellow); font-style: normal; }
.statement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 8vw, 10rem);
  max-width: 68rem;
  margin: clamp(3rem, 6vw, 6rem) 0 0 auto;
}
.statement-grid p { margin: 0; font-size: clamp(1rem, 1.45vw, 1.35rem); color: rgba(255,255,255,.68); }

.myvehicle-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: .35fr 1fr 1.45fr;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 5rem);
  color: var(--black);
  background: var(--cream);
}
.project-number { align-self: start; font: 900 clamp(5rem, 11vw, 12rem)/1 Arial, Helvetica, sans-serif; letter-spacing: -.12em; opacity: .1; }
.project-copy .eyebrow { color: #526600; }
.project-copy h2 { font-size: clamp(4rem, 8.5vw, 9rem); line-height: .84; }
.project-copy > p:not(.eyebrow) { max-width: 39rem; margin: 2rem 0 0; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.project-copy strong { display: block; margin-top: 1.5rem; color: #526600; font: 700 .67rem/1 Arial, Helvetica, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.myvehicle-animation {
  width: min(100%, 54rem);
  aspect-ratio: 4 / 3;
  justify-self: end;
  overflow: hidden;
}
.myvehicle-animation svg { width: 100% !important; height: 100% !important; }

.capabilities-section { background: var(--blue); }
.section-heading { display: grid; grid-template-columns: 1fr; gap: 3vw; align-items: start; }
.section-heading .eyebrow { color: var(--cyan); }
.section-heading h2 { max-width: 78rem; font-size: clamp(4rem, 9vw, 10rem); line-height: .82; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 6rem; border-top: 1px solid rgba(255,255,255,.32); }
.capability-grid article { min-height: 22rem; padding: 1.4rem 2rem 2rem 0; border-right: 1px solid rgba(255,255,255,.32); }
.capability-grid article + article { padding-left: 2rem; }
.capability-grid article:last-child { border-right: 0; }
.capability-grid span { color: var(--cyan); font: 700 .55rem/1 Arial, Helvetica, sans-serif; }
.capability-grid h3 { margin: 7rem 0 1rem; font: 900 clamp(1.7rem, 2.5vw, 3rem)/1 Arial, Helvetica, sans-serif; letter-spacing: -.055em; }
.capability-grid p { max-width: 23rem; margin: 0; color: rgba(255,255,255,.72); }

.why-section {
  min-height: 100vh;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 8vw;
  background: var(--green);
  color: var(--black);
}
.why-mark { aspect-ratio: 1; display: grid; place-items: center; border-radius: 18%; background: var(--black); transform: rotate(-3deg); box-shadow: 2rem 2rem 0 rgba(0,0,0,.12); }
.why-mark img { width: 52%; height: 60%; object-fit: contain; }
.why-copy h2 { font-size: clamp(3.4rem, 6.8vw, 7.5rem); line-height: .84; }
.why-copy > p:not(.eyebrow) { max-width: 42rem; margin: 2rem 0; font-size: clamp(1rem, 1.4vw, 1.3rem); }
.button-dark { color: var(--white); border-color: var(--black); background: var(--black); }
.button-dark:hover { color: var(--black); background: transparent; }

.contact-section { min-height: 85vh; display: flex; flex-direction: column; justify-content: center; background: var(--red); color: var(--white); }
.contact-section .eyebrow { color: var(--yellow); }
.contact-section h2 { font-size: clamp(4rem, 10vw, 11rem); line-height: .8; }
.contact-section > p:not(.eyebrow) { margin: 1.7rem 0 0; font-size: clamp(1rem, 1.45vw, 1.35rem); }
.contact-section > a { width: fit-content; margin-top: 3rem; font: 700 clamp(1.1rem, 2.4vw, 2.3rem)/1 Arial, Helvetica, sans-serif; text-decoration-thickness: 2px; text-underline-offset: .35em; }

.site-footer {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: end;
  gap: 3rem;
  padding: 3rem clamp(1.25rem, 4vw, 4rem);
  border-top: 1px solid rgba(255,255,255,.15);
  background: var(--deep-black);
}
.site-footer p { margin: 0; color: rgba(255,255,255,.58); font: 400 .58rem/1.7 Arial, Helvetica, sans-serif; letter-spacing: .04em; }
.site-footer p:last-child { text-align: right; }

body.is-static-journey .journey { height: auto; }
body.is-static-journey .journey-sticky { position: relative; height: auto; min-height: 0; overflow: visible; }
body.is-static-journey .journey-landing { position: relative; min-height: 44vh; opacity: 1; transform: none; }
body.is-static-journey .journey-opening { top: 6.5rem; bottom: auto; opacity: 1; }
body.is-static-journey .film-copy,
body.is-static-journey .film-instruction { display: none; }
body.is-static-journey .film-stage { position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16/9; transform: none; opacity: 1; }
body.is-static-journey .film-video { height: auto; aspect-ratio: 16/9; object-fit: contain; }
body.is-static-journey .journey-return { position: relative; min-height: 90vh; transform: none; }

@media (max-width: 980px) {
  .site-header nav a:not(.nav-contact) { display: none; }
  .hero-copy { width: 52vw; }
  .hero-copy h1 { font-size: clamp(3.8rem, 8.8vw, 7rem); }
  .myvehicle-section { grid-template-columns: .2fr 1fr 1.2fr; }
}

@media (max-width: 760px) {
  .splash-animation-desktop { display: none; }
  .splash-animation-mobile { display: block; }
  .site-header { min-height: 4.5rem; }
  .brand-name { display: none; }
  .site-hero { min-height: 100svh; background: linear-gradient(160deg, var(--cream) 0 72%, var(--black) 72%); }
  .journey { height: auto; }
  .journey-sticky { position: relative; height: auto; min-height: 0; overflow: visible; }
  .journey-landing { position: relative; min-height: 42svh; opacity: 1; transform: none; background: var(--deep-black); }
  .journey-opening { top: 6rem; bottom: auto; flex-direction: column; gap: 1rem; opacity: 1; }
  .hero-copy { left: 1.25rem; right: 1.25rem; top: 48%; width: auto; transform: translateY(-50%); }
  .hero-copy h1 { font-size: clamp(3.8rem, 17.5vw, 6.7rem); }
  .hero-lede { max-width: 92%; }
  .hero-rail { left: 1.25rem; right: 1.25rem; bottom: 1.3rem; width: auto; color: var(--white); }
  .film-copy, .film-instruction { display: none; }
  .film-stage { position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 0; aspect-ratio: 16/9; transform: none; opacity: 1; }
  .film-video { height: auto; aspect-ratio: 16/9; object-fit: contain; }
  .film-controls { position: relative; left: auto; right: auto; bottom: auto; grid-template-columns: auto 1fr 3rem; padding: 1rem 1.2rem 1.2rem; opacity: 1; background: var(--deep-black); }
  .film-controls .sound-control { display: none; }
  .journey-return { position: relative; min-height: 90svh; padding: 7rem 1.25rem 4rem; transform: none; }
  .journey-return h2 { font-size: clamp(4rem, 17vw, 7rem); }
  .journey-return > span { right: 1.25rem; }
  .statement-section, .myvehicle-section, .capabilities-section, .why-section, .contact-section { padding-left: 1.25rem; padding-right: 1.25rem; }
  .statement-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .myvehicle-section { min-height: 100svh; grid-template-columns: 1fr; }
  .project-number { display: none; }
  .myvehicle-animation { width: min(100%, 38rem); justify-self: center; order: -1; }
  .section-heading { grid-template-columns: 1fr; }
  .capability-grid { grid-template-columns: 1fr; margin-top: 3rem; }
  .capability-grid article, .capability-grid article + article { min-height: 0; padding: 1.5rem 0 3rem; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.32); }
  .capability-grid h3 { margin-top: 3.5rem; }
  .why-section { grid-template-columns: 1fr; }
  .why-mark { width: min(72vw, 25rem); justify-self: center; }
  .site-footer { grid-template-columns: 1fr; gap: 2rem; }
  .site-footer p:last-child { text-align: left; }
}

@media (max-width: 440px) {
  .hero-actions .button { width: 100%; }
  .film-controls { grid-template-columns: auto 1fr; }
  .film-controls time { display: none; }
  .nav-contact span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Bold FarkinSweet visual system — standard fonts, loud colour, clear structure. */
:root {
  --yellow: #fde802;
  --blue: #1746ff;
  --cyan: #00c8ff;
  --green: #20d66b;
  --pink: #ff3d9a;
  --red: #ff4b19;
  --black: #111111;
  --deep-black: #050505;
  --white: #ffffff;
  --cream: #ffffff;
  --menu-height: min(82vh, 52rem);
}

*, *::before, *::after { font-family: Arial, Helvetica, sans-serif !important; }
html, body { background: var(--white); }
body { color: var(--black); }
body.menu-open { overflow: hidden; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

.site-header {
  z-index: 130;
  min-height: 5rem;
  padding: 0 clamp(1rem, 2.7vw, 3rem);
  border: 0;
  background: transparent;
  backdrop-filter: none;
  opacity: 1 !important;
  pointer-events: none;
}
.site-header > * { pointer-events: auto; }
body.is-after-journey .site-header { background: transparent; }
.brand-mark {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--yellow);
  border: 2px solid var(--black);
  box-shadow: .28rem .28rem 0 var(--black);
  transform: none;
}
.brand-mark img { width: 52%; height: 58%; }
.header-contact {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 2.9rem;
  padding: .75rem 1rem;
  border: 2px solid var(--black);
  border-radius: 999px;
  color: var(--white);
  background: var(--black);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.header-contact:hover { color: var(--black); background: var(--yellow); }

.menu-toggle {
  position: fixed;
  z-index: 145;
  top: 0;
  left: 50%;
  width: 7.5rem;
  height: 4.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: 0 .8rem .45rem;
  border: 2px solid var(--black);
  border-top: 0;
  border-radius: 0 0 4rem 4rem;
  color: var(--black);
  background: var(--yellow);
  box-shadow: .25rem .25rem 0 var(--black);
  transform: translateX(-50%);
  cursor: pointer;
  transition: top 720ms cubic-bezier(.76,0,.24,1), background 180ms ease;
}
.menu-toggle:hover { background: var(--cyan); }
.menu-toggle-label { font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.menu-icon { width: 1.3rem; display: grid; gap: .23rem; }
.menu-icon i {
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 360ms ease, opacity 240ms ease;
}
body.menu-open .menu-toggle { top: calc(var(--menu-height) - 4rem); background: var(--cyan); }
body.menu-open .menu-icon i:first-child { transform: translateY(.46rem) rotate(45deg); }
body.menu-open .menu-icon i:nth-child(2) { opacity: 0; }
body.menu-open .menu-icon i:last-child { transform: translateY(-.46rem) rotate(-45deg); }

.menu-panel {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  right: 0;
  height: var(--menu-height);
  overflow: hidden;
  color: var(--black);
  background: var(--yellow);
  border-bottom: 2px solid var(--black);
  transform: translateY(calc(-100% - 1rem));
  visibility: hidden;
  pointer-events: none;
  transition: transform 720ms cubic-bezier(.76,0,.24,1), visibility 720ms;
}
body.menu-open .menu-panel { transform: translateY(0); visibility: visible; pointer-events: auto; }
.menu-panel-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 8rem);
  padding: 6.5rem clamp(1.25rem, 7vw, 8rem) 5rem;
}
.menu-kicker { margin: 0 0 1.2rem; font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.menu-primary nav { display: grid; }
.menu-primary nav a {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  align-items: baseline;
  gap: .7rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(17,17,17,.24);
  color: var(--black);
  text-decoration: none;
  font-size: clamp(2rem, 4.2vw, 4.9rem);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.065em;
  transition: padding-left 180ms ease, color 180ms ease;
}
.menu-primary nav a span { font-size: .62rem; letter-spacing: 0; }
.menu-primary nav a:hover, .menu-primary nav a:focus-visible { padding-left: .8rem; color: var(--blue); }
.menu-card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 3rem);
  border: 2px solid var(--black);
  color: var(--white);
  background: var(--blue);
  box-shadow: .8rem .8rem 0 var(--black);
  transform: rotate(1.5deg);
}
.menu-card p { margin: 0; font-size: clamp(2rem, 3.4vw, 4.2rem); font-weight: 900; line-height: .9; letter-spacing: -.06em; }
.menu-card > span { display: block; margin-top: 2rem; font-size: .9rem; line-height: 1.45; }
.menu-card a { display: inline-flex; margin-top: 1.5rem; padding: .75rem 1rem; border: 2px solid var(--white); color: var(--white); text-decoration: none; font-weight: 800; }
.menu-card a:hover { color: var(--black); background: var(--yellow); border-color: var(--black); }
.site-hero {
  color: var(--black);
  background: var(--white);
}
.site-hero::before { z-index: 1; color: var(--black); opacity: .07; }
.site-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  width: 44%;
  height: 100%;
  background: var(--yellow);
  clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%);
}
.hero-noise { z-index: 1; }
.hero-copy, .hero-rail { z-index: 2; }
.hero-copy { width: min(58vw, 58rem); }
.hero-copy h1,
.statement-section h2,
.project-copy h2,
.section-heading h2,
.why-copy h2,
.contact-section h2,
.journey-return h2,
.closing-pun h2,
.legal-hero h1 { font-weight: 900; letter-spacing: -.07em; }
.hero-copy h1 { font-size: clamp(4rem, 8vw, 9.4rem); line-height: .82; }
.hero-copy h1 em { display: inline-block; padding: 0 .08em .05em; color: var(--black); background: var(--yellow); font-style: normal; }
.hero-copy .eyebrow, .project-copy .eyebrow { color: var(--blue); }
.hero-lede a { text-decoration-color: var(--blue); }
.button { border-width: 2px; font-size: .69rem; font-weight: 900; }
.button-primary { color: var(--black); border-color: var(--black); background: var(--yellow); box-shadow: .3rem .3rem 0 var(--black); }
.button-primary:hover { color: var(--white); background: var(--blue); }

.kinetic-strip {
  position: relative;
  z-index: 7;
  width: 100%;
  overflow: hidden;
  border-block: 2px solid var(--black);
  color: var(--black);
  background: var(--yellow);
}
.kinetic-strip > div {
  width: max-content;
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1rem 0;
  animation: kinetic-strip 18s linear infinite;
}
.kinetic-strip span { font-size: clamp(1.4rem, 2.8vw, 3rem); font-weight: 900; letter-spacing: -.055em; white-space: nowrap; }
.kinetic-strip i { width: 1rem; height: 1rem; border: 2px solid var(--black); border-radius: 50%; background: var(--blue); }
@keyframes kinetic-strip { to { transform: translateX(-50%); } }

.journey { border-bottom: 2px solid var(--black); }
.journey-opening strong, .film-chapter span { color: var(--yellow); }
.myvehicle-section { color: var(--black); background: var(--yellow); border-bottom: 2px solid var(--black); }
.project-copy strong { color: var(--blue); }
.myvehicle-animation { filter: drop-shadow(1.1rem 1.1rem 0 rgba(17,17,17,.12)); }
.statement-section { color: var(--black); background: var(--white); border-bottom: 2px solid var(--black); }
.statement-section .eyebrow { color: var(--blue); }
.statement-section h2 em { color: var(--black); background: var(--yellow); font-style: normal; }
.statement-grid p { color: rgba(17,17,17,.72); }
.capabilities-section { color: var(--white); background: var(--blue); border-bottom: 2px solid var(--black); }
.section-heading .eyebrow, .capability-grid span { color: var(--yellow); }
.capability-grid { border-color: rgba(255,255,255,.6); }
.why-section { color: var(--black); background: var(--cyan); border-bottom: 2px solid var(--black); }
.why-mark { border: 2px solid var(--black); border-radius: 50%; box-shadow: 1.5rem 1.5rem 0 var(--yellow); transform: none; }
.contact-section { color: var(--yellow); background: var(--black); }
.contact-section .eyebrow { color: var(--white); }
.contact-section > a { color: var(--yellow); font-weight: 900; }

.contact-section {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(24rem, .92fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 10rem);
}
.contact-copy h2 {
  max-width: 54rem;
  font-size: clamp(3.7rem, 7.2vw, 8.5rem);
  line-height: .82;
}
.contact-copy p {
  max-width: 40rem;
  margin: 2rem 0 0;
  color: rgba(255,255,255,.76);
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
}
.contact-panel { width: min(100%, 40rem); justify-self: end; }
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.contact-form > label {
  display: grid;
  gap: .5rem;
  color: var(--white);
  font-size: .76rem;
  font-weight: 800;
}
.contact-form > label > span { color: rgba(255,255,255,.55); font-weight: 400; }
.contact-wide { grid-column: 1 / -1; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  min-height: 3.35rem;
  padding: .8rem .9rem;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
  font: inherit;
  transition: border-color 160ms ease, background 160ms ease;
}
.contact-form textarea { min-height: 9.5rem; resize: vertical; line-height: 1.5; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--yellow); background: rgba(255,255,255,.06); }
.contact-privacy { margin: 0; color: rgba(255,255,255,.58); font-size: .7rem; line-height: 1.5; }
.contact-privacy a { color: var(--yellow); font-weight: 800; text-underline-offset: .2em; }
.contact-submit {
  min-height: 3.6rem;
  padding: .85rem 1rem;
  border: 2px solid var(--yellow);
  border-radius: 0;
  color: var(--black);
  background: var(--yellow);
  cursor: pointer;
  font-size: .9rem;
  font-weight: 900;
  text-align: left;
}
.contact-submit:hover,
.contact-submit:focus-visible { color: var(--yellow); background: transparent; }
.contact-submit:disabled { opacity: .55; cursor: wait; }
.contact-status { min-height: 1.25rem; margin: 0; color: var(--white); font-size: .78rem; }
.contact-success {
  min-height: 28rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 4rem) 0;
  border-top: 3px solid var(--yellow);
  border-bottom: 3px solid var(--yellow);
  outline: 0;
}
.contact-success[hidden] { display: none; }
.contact-success > p { margin: 0; color: rgba(255,255,255,.72); font-size: 1rem; }
.contact-success h3 { margin: 1rem 0 1.5rem; color: var(--yellow); font-size: clamp(3rem, 5.5vw, 6rem); line-height: .84; letter-spacing: -.06em; }

.closing-pun {
  position: relative;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5rem, 10vw, 10rem) clamp(1.25rem, 6vw, 7rem);
  overflow: hidden;
  color: var(--black);
  background: var(--yellow);
  border-top: 2px solid var(--black);
}
.closing-pun::after {
  content: "FS";
  position: absolute;
  right: -2vw;
  bottom: -8vw;
  color: var(--pink);
  font-size: clamp(12rem, 34vw, 38rem);
  font-weight: 900;
  line-height: .7;
  letter-spacing: -.12em;
  opacity: .72;
  pointer-events: none;
}
.closing-pun > * { position: relative; z-index: 1; }
.closing-pun h2 { max-width: 72rem; margin: 0; font-size: clamp(4rem, 10vw, 11rem); line-height: .82; }
.closing-pun button {
  width: fit-content;
  margin-top: 3rem;
  padding: .9rem 1.1rem;
  border: 2px solid var(--black);
  color: var(--white);
  background: var(--black);
  box-shadow: none;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.closing-pun button:hover { color: var(--black); background: var(--cyan); }

.site-footer {
  grid-template-columns: 1fr auto auto auto;
  align-items: start;
  border-top: 0;
  color: var(--black);
  background: var(--white);
}
.footer-links { display: grid; gap: .35rem; }
.footer-links a { color: var(--black); font-size: .65rem; font-weight: 800; text-underline-offset: .2em; }
.site-footer p { color: rgba(17,17,17,.64); font-size: .65rem; }
.site-footer p:last-child { color: var(--black); }

.legal-page { color: var(--black); background: var(--white); }
.legal-main { padding-top: 0; }
.legal-hero {
  min-height: 44vh;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 8rem clamp(1.25rem, 7vw, 8rem) clamp(3rem, 5vw, 5rem);
  border-bottom: 2px solid var(--black);
  background: var(--yellow);
}
.legal-hero .eyebrow { color: var(--blue); }
.legal-hero h1 { max-width: 75rem; margin: 0; font-size: clamp(4rem, 11vw, 12rem); line-height: .78; }
.legal-hero p:last-child { max-width: 52rem; margin: 2rem 0 0; font-size: 1rem; }
.legal-content { width: min(100% - 2.5rem, 76rem); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) 0; }
.legal-content h2 { margin: 3.8rem 0 1rem; padding-top: 1.25rem; border-top: 2px solid var(--black); font-size: clamp(1.8rem, 3.2vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.legal-content h3 { margin-top: 2.2rem; font-size: 1.15rem; }
.legal-content p, .legal-content li { max-width: 64rem; color: rgba(17,17,17,.76); line-height: 1.75; }
.legal-content a { color: var(--blue); font-weight: 700; text-underline-offset: .2em; }

@media (max-width: 900px) {
  :root { --menu-height: 100svh; }
  body.menu-open .menu-toggle { top: calc(100svh - 4.3rem); }
  .menu-panel-inner { grid-template-columns: 1fr; align-content: center; padding: 5.5rem 1.25rem 6rem; }
  .menu-card { display: none; }
  .menu-primary nav a { font-size: clamp(2.3rem, 9.5vw, 5rem); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .site-header { min-height: 4.5rem; }
  .brand-mark { width: 2.65rem; height: 2.65rem; }
  .header-contact { min-height: 2.55rem; padding: .65rem .8rem; font-size: .61rem; }
  .menu-toggle { width: 6.6rem; height: 3.9rem; }
  body.menu-open .menu-toggle { top: calc(100svh - 4rem); }
  .site-hero { background: var(--white); }
  .site-hero::after { width: 100%; height: 31%; top: auto; bottom: 0; clip-path: polygon(0 38%, 100% 0, 100% 100%, 0 100%); }
  .hero-copy { width: auto; }
  .hero-copy h1 { font-size: clamp(3.6rem, 16vw, 6.6rem); }
  .hero-rail { color: var(--black); }
  .closing-pun { min-height: 80svh; }
  .closing-pun h2 { font-size: clamp(3.7rem, 16vw, 7rem); }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer p:last-child { text-align: left; }
  .legal-hero { min-height: 22rem; padding: 7rem 1.25rem 2.5rem; }
  .legal-hero h1 { font-size: clamp(3.7rem, 17vw, 7rem); }
}

@media (prefers-reduced-motion: reduce) {
  .kinetic-strip > div { animation: none; }
}

/* Direct, unlabelled visual system — coral hero, cyan journey, square controls. */
.site-hero {
  color: var(--white);
  background: linear-gradient(105deg, #bd4d32 0%, #d25539 50%, #f06e49 100%);
}
.site-hero::before,
.site-hero::after,
.journey-landing::before,
.hero-noise,
.hero-rail,
.journey-opening { display: none !important; }

.hero-copy { width: min(50vw, 50rem); }
.hero-copy h1 em,
.statement-section h2 em,
.journey-return h2 em {
  padding: 0;
  color: inherit;
  background: transparent;
  font-style: normal;
  -webkit-text-stroke: 0;
}
.hero-lede { color: rgba(255,255,255,.88); }
.hero-lede a { color: inherit; text-decoration-color: currentColor; }

.brand-mark {
  width: 2.55rem;
  height: 2.85rem;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: none !important;
}
.why-mark {
  aspect-ratio: auto;
  display: block;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.why-mark img { width: min(100%, 24rem); margin: 0 auto; filter: none !important; }

button,
.button,
.header-contact,
.menu-toggle,
.menu-card a,
.closing-pun button {
  border-radius: 0 !important;
}
.button,
.header-contact,
.menu-toggle,
.closing-pun button {
  letter-spacing: 0;
  text-transform: none;
}
.button-primary {
  color: var(--white);
  border-color: var(--black);
  background: var(--black);
  box-shadow: .3rem .3rem 0 rgba(255,255,255,.35);
}
.button-primary:hover { color: var(--black); border-color: var(--black); background: var(--yellow); }
.button-quiet { color: var(--white); border-color: var(--white); background: transparent; }
.button-quiet:hover { color: var(--black); border-color: var(--black); background: var(--white); }
.header-contact { color: var(--white); border-color: var(--white); background: var(--black); }
.menu-toggle {
  width: 7rem;
  height: 3.9rem;
  padding-bottom: 0;
  box-shadow: .25rem .25rem 0 var(--black);
}
body.menu-open .menu-toggle { top: calc(var(--menu-height) - 3.9rem); }

.menu-primary nav a {
  display: block;
  grid-template-columns: none;
}

.kinetic-strip {
  left: -2%;
  width: 104%;
  overflow: hidden;
  margin: -1.2rem 0;
  border: 0;
  background: #f5c800;
  transform: rotate(-2deg);
  transform-origin: center;
}
.kinetic-strip > div {
  gap: 0;
  padding: .35rem 0 .55rem;
  animation-duration: 16s;
}
.kinetic-strip span {
  margin-right: .22em;
  font-size: clamp(3.4rem, 7vw, 7.2rem);
  font-weight: 900;
  line-height: .9;
  letter-spacing: -.065em;
}
.kinetic-strip .marquee-cool { color: #194f91; }
.kinetic-strip .marquee-proud { color: #df1626; }
.kinetic-strip .marquee-sweet { color: #f06e49; }

.journey,
.journey-sticky,
.journey-landing,
.journey-return { background: #16c5fc; }
.journey-landing { color: var(--black); }
.film-chapter { padding-left: 0; border-left: 0; }
.film-chapter h2 { margin-top: 0; }
.film-instruction,
.film-controls button { text-transform: none; letter-spacing: 0; }

.myvehicle-section { grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); }
.project-status {
  margin: 1.25rem 0 0 !important;
  color: var(--blue);
  font-size: 1rem !important;
  font-weight: 800;
}
.capability-grid h3 { margin: 0 0 1.2rem; }

.site-footer {
  color: var(--white);
  background: var(--black);
}
.footer-links a,
.site-footer a { color: var(--white); }
.site-footer p,
.site-footer p:last-child { color: rgba(255,255,255,.68); }
.footer-brand .brand-mark { width: 2.8rem; height: 3.1rem; }

@media (max-width: 900px) {
  body.menu-open .menu-toggle { top: calc(100svh - 3.9rem); }
}

@media (max-width: 760px) {
  .hero-copy { width: auto; }
  .site-hero { background: linear-gradient(150deg, #bd4d32 0%, #d75a3d 55%, #f06e49 100%); }
  .menu-toggle { width: 6.6rem; height: 3.7rem; }
  body.menu-open .menu-toggle { top: calc(100svh - 3.7rem); }
  .kinetic-strip { margin: -.7rem 0; }
  .myvehicle-section { grid-template-columns: 1fr; }
}

/* Rascal hero, overlapping marquee, timed film copy and beta registration. */
.site-hero {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(34rem, 1.12fr);
  align-items: center;
  gap: clamp(1rem, 3vw, 4rem);
  padding: 7rem clamp(1.35rem, 5.4vw, 6rem) 5rem;
}
.hero-copy {
  position: relative;
  z-index: 3;
  left: auto;
  top: auto;
  width: auto;
  transform: none;
}
.hero-art {
  position: relative;
  z-index: 2;
  width: min(62vw, 67rem);
  margin: 2rem -8vw 0 -6vw;
  align-self: center;
  pointer-events: none;
}
.hero-art img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 2rem 2.4rem rgba(37, 5, 0, .25));
}

.marquee-break {
  position: relative;
  z-index: 20;
  height: 0;
  overflow: visible;
}
.marquee-break .kinetic-strip {
  position: absolute;
  top: 0;
  left: -2%;
  width: 104%;
  margin: 0;
  transform: translateY(-50%) rotate(-2deg);
  transform-origin: center;
  box-shadow: 0 .3rem 0 rgba(17,17,17,.18);
}

.site-header {
  opacity: var(--header-opacity) !important;
  transition: opacity 360ms linear, background 280ms ease;
}
body.film-has-control .site-header > * { pointer-events: none; }

.film-copy {
  inset: 0;
  width: auto;
  transform: none;
  pointer-events: none;
}
.film-chapter,
.film-chapter.is-active {
  position: absolute;
  top: 50%;
  left: clamp(1.4rem, 5vw, 6rem);
  display: block;
  width: min(44vw, 44rem);
  opacity: var(--chapter-opacity, 0);
  transform: translateY(-50%) translateY(calc((1 - var(--chapter-opacity, 0)) * 1rem));
  animation: none;
  will-change: opacity, transform;
}
.film-chapter h2 {
  font-size: clamp(1.9rem, 3.15vw, 4.2rem);
  line-height: .94;
}
.film-chapter[data-side="right"] {
  right: clamp(1.4rem, 5vw, 6rem);
  left: auto;
  text-align: right;
}

.beta-open { margin-top: 2rem; }
.beta-dialog {
  width: min(calc(100% - 2rem), 42rem);
  max-height: min(90vh, 52rem);
  padding: 0;
  overflow: auto;
  border: 2px solid var(--black);
  border-radius: 0;
  color: var(--black);
  background: var(--white);
  box-shadow: 1rem 1rem 0 var(--yellow);
}
.beta-dialog::backdrop { background: rgba(0,0,0,.76); backdrop-filter: blur(6px); }
.beta-dialog-inner { position: relative; padding: clamp(1.5rem, 5vw, 3.5rem); }
.beta-dialog h2 {
  max-width: 32rem;
  margin: 0;
  font-size: clamp(2.7rem, 6vw, 5rem);
  line-height: .9;
  letter-spacing: -.06em;
}
.beta-dialog-inner > p { max-width: 30rem; margin: 1.2rem 0 2rem; line-height: 1.55; }
.beta-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: .6rem .75rem;
  border: 2px solid var(--black);
  color: var(--white);
  background: var(--black);
  font-weight: 800;
  cursor: pointer;
}
.beta-dialog form { display: grid; gap: 1.15rem; }
.beta-dialog form > label:not(.form-consent) {
  display: grid;
  gap: .45rem;
  font-size: .78rem;
  font-weight: 800;
}
.beta-dialog input,
.beta-dialog select {
  min-height: 3.25rem;
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--black);
  border-radius: 0;
  color: var(--black);
  background: var(--white);
  font: inherit;
}
.form-consent {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  align-items: start;
  gap: .7rem;
  font-size: .75rem;
  line-height: 1.45;
}
.form-consent input { min-height: 1.25rem; margin: .08rem 0 0; }
.form-consent a { color: inherit; font-weight: 800; }
.form-trap {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}
.beta-submit {
  justify-content: center;
  color: var(--black);
  border-color: var(--black);
  background: var(--yellow);
  cursor: pointer;
}
.beta-submit:disabled { opacity: .55; cursor: wait; }
.form-status { min-height: 1.35rem; margin: 0; font-size: .78rem; font-weight: 800; }

.site-footer { align-items: center; }
.footer-brand { align-self: center; }

/* Emergency rollback polish: keep the footer inline and gate portrait phones. */
.portrait-rotate-prompt { display: none; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .55rem 1rem;
}

.footer-brand {
  display: flex;
  align-items: center;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .1rem .55rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
}

.footer-links a + a::before {
  content: "|";
  margin-right: .55rem;
  color: rgba(255, 255, 255, .42);
}

.site-footer .footer-credit {
  margin: 0 0 0 auto;
  white-space: nowrap;
  text-align: right;
}

@media (orientation: landscape) and (max-height: 560px), (hover: none) and (pointer: coarse) and (max-width: 1180px) and (orientation: landscape) {
  .site-footer {
    flex-wrap: nowrap;
    gap: .55rem .8rem;
    padding: .75rem 1rem;
  }

  .footer-brand .brand-mark {
    width: 2.2rem;
    height: 2.2rem;
  }

  .footer-links {
    flex: 1 1 auto;
    min-width: 0;
  }

  .footer-links a,
  .site-footer .footer-credit {
    font-size: .62rem;
    line-height: 1.2;
  }
}

/* Lusion-style Rascal journey: fixed viewport canvas driven by virtual scroll. */
.journey {
  height: 100vh;
  height: 100svh;
  min-height: 38rem;
  overflow: visible;
  background: var(--cyan);
}

.journey-sticky,
.journey-landing,
.journey-return {
  background: var(--cyan);
}

.film-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #020203;
}

.film-video {
  display: none !important;
}

body.journey-sequence-active {
  overscroll-behavior: none;
}

body.journey-sequence-active .journey-sticky {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  contain: paint;
}

body.journey-sequence-active .film-stage {
  will-change: transform, opacity;
}

body.journey-sequence-active .film-copy {
  right: 0;
  left: 0;
  width: auto;
  max-width: none;
}

body.journey-sequence-active .film-chapter,
body.journey-sequence-active .film-chapter.is-active {
  width: min(40vw, 42rem);
  max-width: calc(100vw - 2.5rem);
}

body.journey-sequence-active .film-chapter h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

body:not(.journey-sequence-active) .film-copy,
body:not(.journey-sequence-active) .film-controls {
  pointer-events: none;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .journey {
    height: 100dvh;
    min-height: 0;
  }

  .journey-sticky {
    height: 100dvh;
    min-height: 0;
  }

  .journey-intro {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(1rem, 5vw, 3rem);
    padding: max(3.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }

  .journey-process {
    width: min(100%, 24rem);
  }

  .journey-process h2 {
    font-size: clamp(2.6rem, 10vh, 4.4rem);
    line-height: .82;
  }

  .journey-process p {
    max-width: 22rem;
    margin-top: .8rem;
    font-size: clamp(.78rem, 2.4vh, .98rem);
    line-height: 1.34;
  }

  .film-stage {
    width: 100vw;
    height: 56.25vw;
    min-height: 100dvh;
    transform: translate(-50%, -50%) scale(calc(.46 + var(--takeover) * .54));
  }

  .film-copy {
    inset: 0;
    display: block;
  }

  .film-chapter,
  .film-chapter.is-active {
    top: 52%;
    left: max(1rem, env(safe-area-inset-left));
    width: min(40vw, 22rem);
    max-width: calc(100vw - 2rem);
  }

  .film-chapter[data-side="right"] {
    right: max(1rem, env(safe-area-inset-right));
    left: auto;
  }

  .film-chapter h2 {
    font-size: clamp(1.35rem, 6.2vh, 2.4rem);
    line-height: .95;
    letter-spacing: 0;
  }

  .film-instruction {
    bottom: max(3.6rem, calc(env(safe-area-inset-bottom) + 3.1rem));
  }

  .film-controls {
    right: max(.8rem, env(safe-area-inset-right));
    bottom: max(.65rem, env(safe-area-inset-bottom));
    left: max(.8rem, env(safe-area-inset-left));
    grid-template-columns: auto minmax(3rem, 1fr) 2.7rem auto;
    gap: .55rem;
  }

  .film-controls button,
  .film-controls time {
    font-size: .46rem;
  }

  .journey-return {
    padding: max(4rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }

  .journey-return h2 {
    font-size: clamp(3.8rem, 18vh, 7rem);
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .portrait-rotate-prompt strong {
    max-width: min(92vw, 30rem);
    font-size: clamp(3.1rem, 18vw, 7.25rem);
    line-height: .83;
    overflow-wrap: anywhere;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  html,
  body {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: none;
  }

  .site-header,
  .skip-link,
  .menu-panel,
  main > :not(.journey),
  .site-footer,
  dialog {
    display: none !important;
  }

  main {
    position: fixed !important;
    inset: 0 !important;
    z-index: 390;
    width: 100vw;
    height: 100dvh;
    overflow: hidden !important;
    background: var(--cyan);
  }

  .journey,
  .journey-sticky {
    position: static !important;
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .journey-sticky > :not(.portrait-rotate-prompt) {
    display: none !important;
  }

  .portrait-rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: grid !important;
    min-height: 100dvh;
    width: 100vw;
    place-items: center;
    align-content: center;
    gap: 1rem;
    padding: max(2rem, env(safe-area-inset-top)) 1.15rem max(2rem, env(safe-area-inset-bottom));
    background: var(--cyan);
    color: var(--black);
    text-align: center;
  }

  .portrait-rotate-prompt span {
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .portrait-rotate-prompt strong {
    max-width: 18rem;
    font-size: clamp(2.7rem, 14vw, 4.6rem);
    font-weight: 900;
    line-height: .86;
    letter-spacing: 0;
  }
}

@media (max-width: 980px) {
  .site-hero { grid-template-columns: minmax(0, 1fr) minmax(27rem, .95fr); }
  .hero-art { width: min(64vw, 55rem); margin-right: -15vw; }
}

@media (max-width: 760px) {
  .site-hero {
    min-height: 100svh;
    display: block;
    padding: 7rem 1.25rem 3rem;
  }
  .hero-copy { position: relative; z-index: 3; }
  .hero-copy h1 { font-size: clamp(3.3rem, 15.5vw, 6.2rem); }
  .hero-lede { max-width: 34rem; }
  .hero-art {
    position: absolute;
    right: -17vw;
    bottom: 1rem;
    width: min(112vw, 48rem);
    margin: 0;
    opacity: .72;
  }
  .hero-actions { position: relative; z-index: 4; }
  .marquee-break .kinetic-strip { width: 112%; left: -6%; }
  .film-copy { display: none; }
  .beta-dialog { width: calc(100% - 1rem); box-shadow: .45rem .45rem 0 var(--yellow); }
  .beta-dialog-inner { padding: 4.5rem 1.25rem 1.5rem; }
}

body.is-static-journey .film-copy { display: none; }

/* Reference refinements: Farm Africa-style menu tab and MyPatrol hero treatment. */
.hero-art {
  transform: scale(1.5);
  transform-origin: center right;
}

.menu-toggle {
  width: 11.6rem;
  height: 5rem;
  padding: 0 0 1.45rem;
  border: 0 !important;
  color: var(--white);
  background: #0b0b0c;
  box-shadow: none;
  clip-path: polygon(0 0, 100% 0, 86% 42%, 72% 64%, 62% 84%, 56% 100%, 44% 100%, 38% 84%, 28% 64%, 14% 42%);
  transition: top 720ms cubic-bezier(.76,0,.24,1), filter 180ms ease;
}
.menu-toggle:hover { background: #0b0b0c; filter: brightness(1.28); }
.menu-toggle-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.menu-icon { width: 2.5rem; gap: .42rem; }
.menu-icon i { height: 2px; background: var(--white); }
body.menu-open .menu-toggle {
  top: calc(var(--menu-height) - 5rem);
  color: var(--white);
  background: #0b0b0c;
}

.myvehicle-section {
  min-height: 100svh;
  grid-template-columns: 1fr;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(5,5,5,.96) 0%, rgba(5,5,5,.88) 34%, rgba(5,5,5,.28) 70%, rgba(5,5,5,.58) 100%),
    url("assets/hero/hero-desktop.webp") center center / cover no-repeat;
  border-bottom: 1px solid rgba(214,168,79,.42);
}
.myvehicle-section::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(to top, rgba(5,5,5,.42), transparent 45%);
  pointer-events: none;
}
.myvehicle-section .project-copy {
  position: relative;
  z-index: 1;
  max-width: 40rem;
}
.myvehicle-section .project-copy h2 { color: var(--white); }
.myvehicle-section .project-copy > p:not(.project-status) { color: rgba(255,255,255,.8); }
.myvehicle-section .project-status { color: #d6a84f; }

.beta-open,
.beta-submit {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #0b0b0c;
  border: 1px solid #d6a84f;
  border-radius: 7px !important;
  background: linear-gradient(135deg, #f1c86d, #d6a84f 54%, #9d7429);
  box-shadow: 0 0 0 1px rgba(214,168,79,.35), 0 16px 34px rgba(214,168,79,.2);
}
.beta-open::after,
.beta-submit::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -50%;
  left: -70%;
  width: 42%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  transform: skewX(-18deg);
  animation: beta-shine 3.8s ease-in-out infinite;
  pointer-events: none;
}
.beta-open:hover,
.beta-submit:hover { color: #0b0b0c; filter: brightness(1.08); }
@keyframes beta-shine {
  0%, 62% { left: -70%; }
  84%, 100% { left: 145%; }
}

.beta-dialog {
  width: min(calc(100% - 1.5rem), 62rem);
  max-height: calc(100svh - 1.5rem);
  overflow: hidden;
  border: 1px solid #d6a84f;
  color: var(--white);
  background: #0b0b0c;
  box-shadow: none;
}
.beta-dialog::backdrop { background: rgba(0,0,0,.86); backdrop-filter: blur(8px); }
.beta-dialog-inner { padding: clamp(1.25rem, 3vw, 2.5rem); }
.beta-dialog h2 {
  max-width: 42rem;
  color: var(--white);
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}
.beta-dialog-inner > p {
  margin: .7rem 0 1.2rem;
  color: rgba(255,255,255,.68);
}
.beta-close {
  border: 1px solid rgba(214,168,79,.7);
  color: #f1c86d;
  background: transparent;
}
.beta-dialog form {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem 1rem;
}
.beta-dialog form > label:not(.form-consent) { gap: .3rem; color: #f1c86d; }
.beta-dialog input,
.beta-dialog select {
  min-height: 2.75rem;
  padding: .55rem .7rem;
  border: 1px solid rgba(214,168,79,.58);
  color: var(--white);
  background: #171717;
}
.beta-dialog select option { color: var(--white); background: #171717; }
.form-consent,
.beta-submit,
.form-status { grid-column: 1 / -1; }
.form-consent { color: rgba(255,255,255,.74); }
.form-consent a { color: #f1c86d; }
.beta-submit {
  width: fit-content;
  min-height: 2.8rem;
  padding: .7rem 1rem;
}
.form-status { color: #f1c86d; }

.closing-pun::after { display: none; }
.footer-brand {
  display: inline-flex;
  align-items: center;
  align-self: center;
}

@media (max-width: 900px) {
  body.menu-open .menu-toggle { top: calc(100svh - 5rem); }
}

@media (max-width: 760px) {
  .menu-toggle { width: 9rem; height: 4.35rem; padding-bottom: 1.2rem; }
  body.menu-open .menu-toggle { top: calc(100svh - 4.35rem); }
  .hero-art { transform: scale(1.5); }
  .myvehicle-section {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    background:
      linear-gradient(to bottom, rgba(5,5,5,.9), rgba(5,5,5,.34) 48%, rgba(5,5,5,.88)),
      url("assets/hero/hero-mobile.webp") center center / cover no-repeat;
  }
  .beta-dialog {
    width: calc(100% - .75rem);
    max-height: calc(100svh - .75rem);
  }
  .beta-dialog-inner { padding: 3.2rem .9rem .9rem; }
  .beta-dialog h2 { font-size: clamp(1.9rem, 9vw, 2.8rem); }
  .beta-dialog-inner > p { margin: .45rem 0 .75rem; font-size: .8rem; }
  .beta-dialog form { gap: .5rem .65rem; }
  .beta-dialog form > label:not(.form-consent) { font-size: .68rem; }
  .beta-dialog input,
  .beta-dialog select { min-height: 2.4rem; padding: .4rem .55rem; font-size: .75rem; }
  .form-consent { font-size: .65rem; }
  .beta-submit { min-height: 2.45rem; padding: .55rem .75rem; }
}

@media (max-height: 680px) {
  .beta-dialog-inner { padding-top: 3rem; padding-bottom: .75rem; }
  .beta-dialog h2 { font-size: 2rem; }
  .beta-dialog-inner > p { display: none; }
  .beta-dialog form { gap: .42rem .65rem; }
  .beta-dialog input,
  .beta-dialog select { min-height: 2.25rem; padding-block: .35rem; }
  .form-status { min-height: 1rem; }
}

/* Approved journey, navigation and MyVehicle refinements. */
.hero-art {
  align-self: center;
  margin-top: 0;
  margin-right: -12vw;
  margin-bottom: 0;
  margin-left: 0;
  transform: translate(8vw, -3vh) scale(1.5);
  transform-origin: center right;
}

.menu-toggle,
body.menu-open .menu-toggle {
  color: var(--menu-ink);
  background: var(--menu-accent);
  transition: top 540ms cubic-bezier(.19,1,.22,1), color 320ms ease, background-color 320ms ease, filter 180ms ease;
}
.menu-toggle:hover,
.menu-toggle:focus-visible {
  background: var(--menu-accent);
  filter: brightness(1.06);
}
.menu-toggle-label,
.menu-icon {
  position: absolute;
  left: 50%;
  top: 1.55rem;
  transition: opacity 180ms ease, transform 240ms cubic-bezier(.19,1,.22,1);
}
.menu-toggle-label {
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  opacity: 0;
  color: currentColor;
  white-space: nowrap;
  transform: translate(-50%, -50%) translateY(.35rem);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: lowercase;
}
.menu-icon {
  transform: translate(-50%, -50%);
}
.menu-toggle:hover .menu-icon,
.menu-toggle:focus-visible .menu-icon,
body.menu-open .menu-icon {
  opacity: 0;
  transform: translate(-50%, -70%);
}
.menu-toggle:hover .menu-toggle-label,
.menu-toggle:focus-visible .menu-toggle-label,
body.menu-open .menu-toggle-label {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.menu-icon i { background: currentColor; }

.journey-intro {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(3rem, 8vw, 10rem);
  padding: 7rem clamp(1.5rem, 6vw, 7rem) 4rem;
  pointer-events: none;
}
.journey-process {
  position: relative;
  z-index: 18;
  grid-column: 2;
  width: min(100%, 36rem);
  justify-self: center;
  color: var(--black);
  opacity: var(--windowed);
  transform: translateX(calc(var(--takeover) * 2rem));
  will-change: opacity, transform;
}
.journey-process h2 {
  margin: 0;
  font-size: clamp(3.8rem, 6.6vw, 7.5rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
}
.journey-process p {
  max-width: 32rem;
  margin: 2rem 0 0;
  font-size: clamp(1rem, 1.3vw, 1.22rem);
  line-height: 1.55;
  letter-spacing: -.018em;
}
.film-stage {
  left: calc(50% - var(--windowed) * 25vw);
  transform: translate(-50%, -50%) scale(calc(.43 + var(--takeover) * .57));
}

.myvehicle-section {
  min-height: 100svh;
  grid-template-columns: minmax(25rem, .92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 5vw, 6rem);
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(5,5,5,.9) 0%, rgba(5,5,5,.72) 36%, rgba(5,5,5,.34) 70%, rgba(5,5,5,.08) 100%),
    url("assets/hero/myvehicle-hero-back-cover.webp") center center / cover no-repeat;
}
.myvehicle-section::after {
  z-index: 0;
  background: linear-gradient(to top, rgba(5,5,5,.48), transparent 42%);
}
.myvehicle-section .project-copy {
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  max-width: 41rem;
}
.myvehicle-section .project-copy h2 {
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(3.8rem, 6.6vw, 7.5rem);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
}
.myvehicle-section .project-copy h2 span { color: #d6a84f; }
.myvehicle-section .project-copy > p {
  color: rgba(255,255,255,.82);
  font-family: Arial, Helvetica, sans-serif;
}
.myvehicle-section .project-copy .project-lede {
  max-width: 34rem;
  margin-top: 1.8rem;
  color: #f1c86d;
  font-size: clamp(1.08rem, 1.5vw, 1.36rem);
  font-weight: 800;
}
.myvehicle-animation {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  width: min(62.4vw, 64.8rem);
  justify-self: center;
  align-self: center;
  overflow: visible;
  filter: drop-shadow(0 2rem 3rem rgba(0,0,0,.46));
}
.beta-open {
  padding: 1rem 1.35rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  font-weight: 900;
}

@media (max-width: 980px) {
  .hero-art { transform: translate(10vw, -3vh) scale(1.5); }
  .myvehicle-section { grid-template-columns: minmax(0, .9fr) minmax(22rem, 1.1fr); }
  .myvehicle-animation { width: min(62.4vw, 50.4rem); }
}

@media (max-width: 760px) {
  .hero-art {
    right: -23vw;
    margin: 0;
    transform: scale(1.5);
  }
  .journey-intro {
    position: relative;
    min-height: 52svh;
    grid-template-columns: 1fr;
    padding: 6.5rem 1.25rem 3rem;
  }
  .journey-process {
    grid-column: 1;
    justify-self: start;
    opacity: 1;
    transform: none;
  }
  .journey-process h2 { font-size: clamp(3.5rem, 17vw, 6.2rem); }
  .journey-process p { max-width: 30rem; }
  .myvehicle-section {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 1.5rem;
    padding-top: 6rem;
    padding-bottom: 4rem;
    background:
      linear-gradient(to bottom, rgba(5,5,5,.22), rgba(5,5,5,.8) 48%, rgba(5,5,5,.96)),
      url("assets/hero/myvehicle-hero-back-cover.webp") 34% center / cover no-repeat;
  }
  .myvehicle-section .project-copy {
    grid-column: 1;
    grid-row: 1;
  }
  .myvehicle-section .project-copy h2 { font-size: clamp(3.4rem, 15vw, 6rem); }
  .myvehicle-animation {
    grid-column: 1;
    grid-row: 2;
    width: min(120%, 50.4rem);
    justify-self: center;
    align-self: center;
  }
  .contact-section {
    grid-template-columns: 1fr;
    gap: 3rem;
    padding-top: 7rem;
    padding-bottom: 5rem;
  }
  .contact-panel { justify-self: stretch; }
  .contact-form { grid-template-columns: 1fr; }
  .contact-wide { grid-column: 1; }
}

/* Mobile keeps the full scroll-steered Rascal journey. The landscape film is
   contained inside the portrait takeover so no action is cropped off-screen. */
@media (max-width: 760px) {
  .journey {
    position: relative;
    height: 1150svh;
    overflow: visible;
  }

  .journey-sticky {
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    overflow: clip;
  }

  .journey-landing {
    position: absolute;
    inset: 0;
    min-height: 0;
    opacity: var(--windowed);
    transform: translateY(calc(var(--takeover) * -1.25rem));
  }

  .journey-intro {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    padding: clamp(5.75rem, 12svh, 7.5rem) 1.25rem 3rem;
  }

  .journey-process {
    position: relative;
    z-index: 18;
    width: min(100%, 31rem);
    color: var(--black);
    opacity: var(--windowed);
    transform: translateY(calc(var(--takeover) * -1rem));
  }

  .journey-process h2 {
    font-size: clamp(3.15rem, 15vw, 5.5rem);
  }

  .journey-process p {
    max-width: 28rem;
    margin-top: 1.25rem;
    font-size: clamp(.92rem, 3.9vw, 1.08rem);
    line-height: 1.45;
  }

  .film-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    aspect-ratio: auto;
    transform: translate(-50%, -50%) scale(calc(.84 + var(--takeover) * .16));
    opacity: calc(1 - var(--outro));
    background: rgba(2, 2, 3, var(--takeover));
    box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, calc(var(--windowed) * .34));
  }

  .film-video {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center center;
    background: rgba(2, 2, 3, var(--takeover));
  }

  .film-copy {
    position: absolute;
    inset: 0;
    display: block;
    width: auto;
    transform: none;
    opacity: var(--film-chrome);
  }

  .film-chapter,
  .film-chapter.is-active {
    top: max(5.4rem, calc(env(safe-area-inset-top) + 4.6rem));
    right: 1.25rem;
    left: 1.25rem;
    width: auto;
    max-width: 27rem;
    transform: translateY(calc((1 - var(--chapter-opacity, 0)) * .75rem));
  }

  .film-chapter h2 {
    max-width: 25rem;
    font-size: clamp(1.45rem, 7vw, 2.35rem);
    line-height: .98;
  }

  .film-chapter[data-side="right"] {
    right: 1.25rem;
    left: auto;
    text-align: right;
  }

  .film-instruction {
    position: absolute;
    left: 50%;
    bottom: max(4.7rem, calc(env(safe-area-inset-bottom) + 4rem));
    display: grid;
    transform: translateX(-50%);
    opacity: calc(var(--windowed) * .88);
  }

  .film-instruction small { display: none; }

  .film-controls {
    position: absolute;
    right: 1rem;
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: 1rem;
    display: grid;
    grid-template-columns: auto minmax(2.5rem, 1fr) 2.8rem auto;
    gap: .65rem;
    padding: 0;
    opacity: var(--film-chrome);
    background: transparent;
  }

  .film-controls .sound-control { display: inline-flex; }

  .journey-return {
    position: absolute;
    inset: 0;
    min-height: 0;
    padding: max(6rem, calc(env(safe-area-inset-top) + 4.5rem)) 1.25rem max(4rem, calc(env(safe-area-inset-bottom) + 3rem));
    transform: translateY(calc((1 - var(--outro)) * 105dvh));
  }

  .journey-return h2 {
    font-size: clamp(3.7rem, 17vw, 6.7rem);
  }

  .journey-return > span {
    right: 1.25rem;
    bottom: max(1.25rem, env(safe-area-inset-bottom));
  }
}

/* Final sequence override: keep this after all legacy mobile journey rules. */
.journey {
  height: 100vh;
  height: 100svh;
  min-height: 38rem;
  overflow: visible;
  background: var(--cyan);
}

.journey-sticky,
.journey-landing,
.journey-return {
  background: var(--cyan);
}

.film-canvas {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: #020203;
}

.film-video {
  display: none !important;
}

body.journey-sequence-active {
  overscroll-behavior: none;
}

body.journey-sequence-active .journey-sticky {
  position: fixed;
  z-index: 80;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  overflow: clip;
  contain: paint;
}

body.journey-sequence-active .film-copy {
  right: 0;
  left: 0;
  width: auto;
  max-width: none;
}

body.journey-sequence-active .film-chapter,
body.journey-sequence-active .film-chapter.is-active {
  width: min(40vw, 42rem);
  max-width: calc(100vw - 2.5rem);
}

body.journey-sequence-active .film-chapter h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
  .journey {
    height: 100dvh;
    min-height: 0;
  }

  .journey-sticky {
    height: 100dvh;
    min-height: 0;
  }

  .journey-intro {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(1rem, 5vw, 3rem);
    padding: max(3.75rem, env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
  }

  .journey-process {
    width: min(100%, 24rem);
  }

  .journey-process h2 {
    font-size: clamp(2.6rem, 10vh, 4.4rem);
    line-height: .82;
  }

  .journey-process p {
    max-width: 22rem;
    margin-top: .8rem;
    font-size: clamp(.78rem, 2.4vh, .98rem);
    line-height: 1.34;
  }

  .film-stage {
    width: 100vw;
    height: 56.25vw;
    min-height: 100dvh;
    transform: translate(-50%, -50%) scale(calc(.46 + var(--takeover) * .54));
  }

  .film-chapter,
  .film-chapter.is-active {
    top: 52%;
    left: max(1rem, env(safe-area-inset-left));
    width: min(40vw, 22rem);
    max-width: calc(100vw - 2rem);
  }

  .film-chapter[data-side="right"] {
    right: max(1rem, env(safe-area-inset-right));
    left: auto;
  }

  .film-chapter h2 {
    font-size: clamp(1.35rem, 6.2vh, 2.4rem);
    line-height: .95;
    letter-spacing: 0;
  }

  .film-controls {
    right: max(.8rem, env(safe-area-inset-right));
    bottom: max(.65rem, env(safe-area-inset-bottom));
    left: max(.8rem, env(safe-area-inset-left));
    grid-template-columns: auto minmax(3rem, 1fr) 2.7rem auto;
    gap: .55rem;
  }
}

@media (hover: none) and (pointer: coarse) and (max-width: 900px) and (orientation: portrait) {
  .journey,
  .journey-sticky {
    height: 0 !important;
    min-height: 0 !important;
  }

  .portrait-rotate-prompt strong {
    max-width: min(92vw, 30rem);
    font-size: clamp(3.1rem, 18vw, 7.25rem);
    line-height: .83;
    overflow-wrap: anywhere;
  }
}