/* ==========================================================================
   Bugatti Divo · Mystery Blue
   Mobile-first. Bootstrap 5.3 supplies the grid, collapse and form base;
   everything visual lives here.
   ========================================================================== */

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --void: #000000;          /* true black: the vault                         */
  --basalt: #17191c;        /* rock wall, raised surfaces                    */
  --graphite: #2a2d31;      /* hairlines on black                            */
  --platinum: #b9c0c7;      /* secondary text                                */
  --slab: #eef2f6;          /* primary text, the light slab                  */
  --mystery: #0d2f73;       /* Mystery Blue, used as depth                   */
  --piping: #2f6bff;        /* blue piping, used for the thread and focus    */

  --display: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-slow: cubic-bezier(.16, 1, .3, 1);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --vh: 1svh;               /* small viewport unit keeps iOS stable          */
}
@supports not (height: 1svh) {
  :root { --vh: 1vh; }
}

/* ---------- Base -------------------------------------------------------- */
html {
  background: var(--void);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 4.5rem;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--void);
  color: var(--slab);
  font-family: var(--text);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  overscroll-behavior-y: none;            /* no rubber-band flash past the black edges */
  -webkit-tap-highlight-color: transparent;
}
a, button { touch-action: manipulation; } /* instant taps on iPhone */

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

a { color: inherit; text-decoration-color: var(--graphite); text-underline-offset: .25em; }
a:hover { color: var(--slab); text-decoration-color: var(--piping); }

:focus-visible {
  outline: 1px solid var(--piping);
  outline-offset: 4px;
}

::selection { background: var(--piping); color: var(--slab); }

.site-gutter { padding-left: var(--gutter); padding-right: var(--gutter); }

.skip-link {
  position: fixed; left: 1rem; top: -4rem; z-index: 2000;
  padding: .75rem 1rem; background: var(--slab); color: var(--void);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: calc(1rem + var(--safe-top)); }

/* ---------- Type -------------------------------------------------------- */
.hero-copy__title,
.chapter-title,
.statement__text,
.figures__engine,
.figure dd,
.era__name {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}

.chapter-title {
  font-size: clamp(2.25rem, 7.5vw, 4.75rem);
  line-height: 1.02;
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.chapter-title--large { font-size: clamp(3rem, 11vw, 8rem); line-height: .95; }

.caption {
  max-width: 34ch;
  margin: 0;
  color: var(--platinum);
  font-size: clamp(1rem, 1.2vw + .7rem, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.caption--quiet { font-size: .9375rem; color: #8d949b; }

/* ---------- Header ------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1030;
  padding-top: var(--safe-top);
  transition: background-color .5s var(--ease), backdrop-filter .5s var(--ease);
}
.site-header.is-solid {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
.site-header .navbar { padding-top: .9rem; padding-bottom: .9rem; flex-wrap: nowrap; }
.site-header .navbar > .container-fluid { flex-wrap: nowrap; }

.brand {
  display: flex; align-items: baseline; gap: .6rem;
  color: var(--slab); text-decoration: none; margin: 0;
}
.brand:hover { color: var(--slab); }
.site-header .brand { flex: none; }
/* Narrow phones, or large text settings: drop the chapter name rather than wrap */
@media (max-width: 380px) { .now-chapter { display: none; } }
/* Supercar Factory wordmark: Bodoni set tight, with a hairline of piping underneath */
.brand__word {
  position: relative;
  font-family: var(--display); font-weight: 500; font-size: clamp(1rem, 4.6vw, 1.125rem); letter-spacing: .01em;
  padding-bottom: .2rem; white-space: nowrap;
}
.brand__word::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 1.6rem; height: 1px; background: var(--piping);
  transition: width .6s var(--ease-slow);
}
.brand:hover .brand__word::after { width: 100%; }

.now-chapter {
  /* shrinks and truncates first, so the header always stays on one line */
  flex: 1 1 0; min-width: 0;
  margin: 0 .75rem;
  font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--platinum);
  opacity: 0; transform: translateY(4px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw;
}
.now-chapter.is-on { opacity: 1; transform: none; }

.menu-btn {
  flex: none; margin-left: auto;
  border: 0; border-radius: 0; padding: .5rem 0 .5rem .75rem; background: none;
  color: var(--slab); font-size: .9375rem; letter-spacing: .02em;
  min-height: 44px;
}
.desktop-nav { display: none; }

.navbar-nav .nav-link {
  color: var(--platinum); font-size: .9375rem;
  padding: .75rem 0; min-height: 44px; display: flex; align-items: center;
  background: none; border: 0;
  transition: color .3s var(--ease);
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link[aria-pressed="true"] { color: var(--slab); }

/* ---------- Full-screen menu (phones) ----------------------------------- */
.menu {
  position: fixed; inset: 0; z-index: 2500;
  display: flex; flex-direction: column;
  padding: calc(1rem + var(--safe-top)) var(--gutter) calc(1.5rem + var(--safe-bottom));
  background: rgba(0, 0, 0, .82);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
  opacity: 0; visibility: hidden;
  transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.menu[hidden] { display: flex; }          /* kept in layout so it can animate */
.menu.is-open { opacity: 1; visibility: visible; transition: opacity .45s var(--ease), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: 3.2rem; }
.menu__close { min-height: 44px; padding: .5rem 0; background: none; border: 0; color: var(--slab); font-size: .9375rem; }
.menu__nav { flex: 1; display: flex; align-items: center; }
.menu__list { list-style: none; margin: 0; padding: 0; width: 100%; }
.menu__list li { overflow: hidden; border-bottom: 1px solid var(--graphite); }
.menu__list a {
  display: block; padding: .55rem 0;
  font-family: var(--display); font-size: clamp(1.9rem, 8.5vw, 2.6rem); line-height: 1.15;
  color: var(--slab); text-decoration: none;
  transform: translateY(105%);
  transition: transform .7s var(--ease-slow), color .3s var(--ease);
}
.menu.is-open .menu__list a { transform: none; }
.menu__list li:nth-child(1) a { transition-delay: .05s; }
.menu__list li:nth-child(2) a { transition-delay: .09s; }
.menu__list li:nth-child(3) a { transition-delay: .13s; }
.menu__list li:nth-child(4) a { transition-delay: .17s; }
.menu__list li:nth-child(5) a { transition-delay: .21s; }
.menu__list li:nth-child(6) a { transition-delay: .25s; }
.menu__list li:nth-child(7) a { transition-delay: .29s; }
.menu__list li:nth-child(8) a { transition-delay: .33s; }
.menu__list a:active { color: var(--piping); }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; opacity: 0; transform: translateY(12px); transition: opacity .6s .35s var(--ease), transform .6s .35s var(--ease-slow); }
.menu.is-open .menu__foot { opacity: 1; transform: none; }
.menu__share { min-height: 44px; padding: .5rem 0; background: none; border: 0; border-bottom: 1px solid var(--graphite); color: var(--platinum); font-size: .9375rem; }
html.menu-open, html.menu-open body { overflow: hidden; }

/* ---------- Viewing bar (phones) ---------------------------------------- */
.dock {
  position: fixed; z-index: 1025;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(.9rem + var(--safe-bottom));
  display: flex; align-items: center; justify-content: center;
  min-height: 52px;
  background: rgba(10, 12, 16, .72);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border: 1px solid rgba(238, 242, 246, .22);
  color: var(--slab); text-decoration: none; font-weight: 500; font-size: .9375rem; letter-spacing: .04em;
  opacity: 0; transform: translateY(140%);
  transition: opacity .5s var(--ease), transform .6s var(--ease-slow);
  pointer-events: none;
}
.dock::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--piping); }
.dock.is-on { opacity: 1; transform: none; pointer-events: auto; }
.dock:hover { color: var(--slab); }


/* ---------- Call to action --------------------------------------------- */
.btn-cta {
  --fill: var(--slab);
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: .9rem 1.6rem;
  border: 1px solid var(--slab); border-radius: 0;
  background: transparent; color: var(--slab);
  font-family: var(--text); font-weight: 500; font-size: .9375rem; letter-spacing: .04em;
  text-decoration: none; overflow: hidden; isolation: isolate;
  transition: color .45s var(--ease);
}
.btn-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--fill);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-slow);
}
.btn-cta::after {
  /* the piping: a hairline of blue along the lower edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--piping);
}
.btn-cta:hover, .btn-cta:focus-visible { color: var(--void); }
.btn-cta:hover::before, .btn-cta:focus-visible::before { transform: scaleX(1); }
.btn-cta--small { min-height: 44px; padding: .6rem 1.1rem; font-size: .875rem; margin-top: .5rem; }

/* ---------- Piping progress thread ------------------------------------- */
.piping[hidden] { display: none; }
.piping {
  position: fixed; z-index: 1020; pointer-events: none;
  left: max(10px, calc(var(--gutter) * .35));
  top: calc(5rem + var(--safe-top)); bottom: calc(2rem + var(--safe-bottom));
  width: 1px;
  opacity: 0; transition: opacity .8s var(--ease);
}
.piping.is-on { opacity: 1; }
.piping__thread, .piping__fill { position: absolute; left: 0; top: 0; width: 1px; height: 100%; }
.piping__thread {
  background: repeating-linear-gradient(to bottom, var(--graphite) 0 6px, transparent 6px 10px);
}
.piping__fill {
  background: var(--piping);
  transform-origin: top; transform: scaleY(var(--progress, 0));
  box-shadow: 0 0 10px rgba(47, 107, 255, .55);
}
.piping__stops { display: none; }

/* ---------- Scroll stage (video chapters) ------------------------------ */
.chapter { position: relative; height: calc(var(--length, 300vh) * 1); }
.chapter .stage {
  position: sticky; top: 0;
  height: calc(100 * var(--vh));
  overflow: hidden;
  background: var(--void);
}
.stage__media, .stage__media picture, .stage__video, .stage__poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
}
.stage__poster { object-fit: cover; }
/* The film sits above the poster and fades in once it is actually playing */
.stage__video { z-index: 1; object-fit: cover; opacity: 0; transition: opacity 1s var(--ease); }
.stage__video.is-playing { opacity: 1; }
.stage__media picture { z-index: 0; }
/* Media is its own layer, so the shading and copy always sit above the film */
.stage__media { z-index: 0; }
.stage__poster {
  transform: scale(calc(1.08 - var(--p, 0) * .08)) translate3d(calc(var(--p, 0) * -1.5%), 0, 0);
  will-change: transform;
}

/* Per-chapter framing for posters and films */
.chapter--arrival .stage__poster { object-position: 46% 50%; }
.chapter--arrival .stage__video { object-position: 46% 50%; }
.chapter--vault .stage__poster { object-position: 62% 50%; }
.chapter--key .stage__poster { object-position: 30% 50%; }
.chapter--key .stage__video { object-position: 30% 50%; }

.stage__shade { position: absolute; inset: 0; pointer-events: none; }
.stage__shade--bottom { background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 38%, transparent 62%); }
.stage__shade--left   { background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 55%); }
.stage__shade--top    { background: linear-gradient(to bottom, rgba(0,0,0,.75) 0%, transparent 45%), linear-gradient(to top, rgba(0,0,0,.8) 0%, transparent 45%); }
.stage__shade--full   { background: rgba(0, 0, 0, .62); }

@media (max-width: 991.98px) {
  .stage__shade--bottom { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 40%, transparent 70%); }
  .stage__shade--left   { background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 45%, transparent 70%); }
  .stage__shade--top    { background: linear-gradient(to bottom, rgba(0,0,0,.8) 0%, transparent 40%), linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.5) 40%, transparent 65%); }
}
.stage__copy .caption { text-shadow: 0 1px 16px rgba(0, 0, 0, .6); }

/* Copy that fades in and out with the scroll position */
.stage__copy {
  position: absolute; z-index: 2;
  left: var(--gutter); right: var(--gutter);
  bottom: calc(2.75rem + var(--safe-bottom));
  opacity: 0; transform: translate3d(0, 18px, 0);
  filter: blur(6px);
  transition: opacity 1s var(--ease-slow), transform 1.2s var(--ease-slow), filter 1s var(--ease-slow);
  pointer-events: none;
}
.stage__copy.is-in { opacity: 1; transform: none; filter: none; pointer-events: auto; }
/* --header-h is the header's real height, measured by the script (covers larger text settings) */
.stage__copy--top { top: calc(var(--header-h, 4.6rem) + 1.75rem); bottom: auto; }

/* Hero */
.hero-copy__kicker {
  margin: 0 0 clamp(1rem, 2.4vw, 2rem);
  font-family: var(--display); font-style: italic; font-size: clamp(1.125rem, 1.4vw, 1.5rem); color: var(--slab);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .75);
}
.hero-copy__title {
  margin: 0;
  font-size: clamp(5.5rem, 31vw, 17rem);
  line-height: .82;
  letter-spacing: -.035em;
  margin-left: -.04em;
}
.hero-copy__line { max-width: 30ch; margin: 1.25rem 0 0; color: var(--platinum); }

.scroll-cue {
  position: absolute; z-index: 2; right: var(--gutter); bottom: calc(2.75rem + var(--safe-bottom));
  margin: 0; font-size: .8125rem; letter-spacing: .08em; color: var(--platinum);
  writing-mode: vertical-rl;
  padding-bottom: 3.25rem;
  opacity: 0; transition: opacity 1s var(--ease);
}
.scroll-cue.is-in { opacity: 1; }
.scroll-cue::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 1px; height: 2.75rem;
  background: linear-gradient(var(--slab), transparent);
  transform-origin: top;
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0% { transform: scaleY(0); opacity: 1; }
  60% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* ---------- Statement --------------------------------------------------- */
.statement { padding: clamp(6rem, 22vw, 14rem) 0; }
.statement__text {
  margin: 0;
  font-size: clamp(1.75rem, 5.4vw, 3.4rem);
  line-height: 1.18;
  text-wrap: pretty;
}

/* Reveal on enter (non-stage content) */
.reveal { opacity: 0; transform: translate3d(0, 24px, 0); transition: opacity 1.1s var(--ease-slow), transform 1.3s var(--ease-slow); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Figures ----------------------------------------------------- */
.figures { position: relative; padding: clamp(5rem, 16vw, 11rem) 0; overflow: hidden; }
.figures__engine-image { position: absolute; inset: 0; }
.figures__engine-image img {
  width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%;
  opacity: .32; filter: grayscale(.4) contrast(1.1);
  transform: scale(calc(1.15 - var(--p, 0) * .15));
}
.figures__engine-image::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--void) 0%, rgba(0,0,0,.4) 30%, rgba(0,0,0,.4) 70%, var(--void) 100%);
}

.figures__lead { display: grid; gap: 1rem; margin-bottom: 3rem; }
.figures__engine { font-size: clamp(6rem, 30vw, 15rem); line-height: .85; letter-spacing: -.04em; }
.figures__engine-note { max-width: 30ch; margin: 0; color: var(--platinum); }

.units { display: inline-flex; border-bottom: 1px solid var(--graphite); margin-bottom: 1.5rem; }
.units__btn {
  min-height: 44px; padding: .5rem 1rem .5rem 0; margin-right: 1rem;
  background: none; border: 0; color: #7d848b; font-size: .9375rem;
  position: relative;
}
.units__btn[aria-pressed="true"] { color: var(--slab); }
.units__btn[aria-pressed="true"]::after {
  content: ""; position: absolute; left: 0; right: 1rem; bottom: -1px; height: 1px; background: var(--piping);
}

.figures__list {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 0;
  border-top: 1px solid var(--graphite);
}
.figure { padding: 1.5rem 0; border-bottom: 1px solid var(--graphite); }
.figure:nth-child(odd) { padding-right: 1rem; }
.figure:last-child { grid-column: 1 / -1; }
.figure dt { font-weight: 400; font-size: .875rem; color: var(--platinum); margin-bottom: .35rem; }
.figure dd { margin: 0; font-size: clamp(2.5rem, 10vw, 4.5rem); line-height: 1; font-variant-numeric: lining-nums tabular-nums; }
.figure small { font-family: var(--text); font-size: .875rem; color: var(--platinum); margin-left: .35rem; letter-spacing: .02em; }
.figure [data-metric] { transition: opacity .35s var(--ease); }
.figures.is-swapping .figure [data-metric] { opacity: 0; }

/* ---------- Commission -------------------------------------------------- */
.commission { position: relative; }
.commission__grid { display: block; }
.chapter--inline { height: auto; }
.commission .stage--inline { position: relative; height: calc(78 * var(--vh)); overflow: hidden; }
.commission .stage--inline .stage__poster { transform: scale(calc(1.06 - var(--p, 0) * .06)); }

.commission__spec { padding: 3.5rem var(--gutter) 5rem; }

.swatches { list-style: none; padding: 0; margin: 2.5rem 0; }
.swatch { display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.1rem; align-items: center; padding: 1.1rem 0; border-top: 1px solid var(--graphite); }
.swatch:last-child { border-bottom: 1px solid var(--graphite); }
.swatch__chip { width: 3.25rem; height: 3.25rem; border-radius: 50%; position: relative; }
.swatch__chip--mystery {
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.55) 0, rgba(255,255,255,0) 22%),
    radial-gradient(circle at 70% 80%, #04102a 0, transparent 60%),
    linear-gradient(140deg, #3d6fd4 0%, var(--mystery) 48%, #061634 100%);
  box-shadow: inset 0 -6px 12px rgba(0,0,0,.45);
}
.swatch__chip--leather {
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,.12) 0, transparent 30%),
    repeating-radial-gradient(circle at 50% 50%, #121212 0 1px, #0a0a0a 1px 2px);
  box-shadow: inset 0 0 0 1px #1d1d1d;
}
.swatch__chip--piping { background: #0a0a0a; box-shadow: inset 0 0 0 1px #1d1d1d; }
.swatch__chip--piping::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 2px dashed var(--piping);
}
.swatch__text { color: var(--platinum); font-size: .9375rem; line-height: 1.5; }
.swatch__text strong { display: block; color: var(--slab); font-weight: 500; font-size: 1.0625rem; margin-bottom: .1rem; }

.details { display: grid; gap: 1.1rem; margin: 0; }
.details div { display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; }
.details dt { font-weight: 400; color: #7d848b; font-size: .875rem; }
.details dd { margin: 0; font-size: .9375rem; }

/* ---------- Opening ----------------------------------------------------- */
.intro { display: none; }
.js .intro {
  display: block; position: fixed; inset: 0; z-index: 3000; pointer-events: none;
}
.js.is-opening, .js.is-opening body { overflow: hidden; }
.intro__door {
  position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--void);
  transition: transform 1.3s cubic-bezier(.7, 0, .2, 1);
}
.intro__door--left { left: 0; }
.intro__door--right { right: 0; }
/* the seam between the doors: a hairline of light, like the vault entrance */
.intro__door--left::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(transparent, rgba(238, 242, 246, .35), transparent);
  opacity: 0; transition: opacity .6s var(--ease);
}
.intro__mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  text-align: center; width: min(80vw, 26rem);
  transition: opacity .5s var(--ease), transform .9s var(--ease-slow);
}
.intro__word {
  margin: 0; font-family: var(--display); font-weight: 500;
  font-size: clamp(1.75rem, 7vw, 2.75rem); letter-spacing: .01em; color: var(--slab);
  animation: intro-in 1.1s var(--ease-slow) both;
}
.intro__line {
  display: block; position: relative; height: 1px; margin: 1.25rem auto 1rem; width: 100%;
  background: var(--graphite); overflow: hidden;
}
.intro__fill {
  position: absolute; inset: 0; background: var(--piping);
  transform-origin: left; transform: scaleX(.04);
  transition: transform .6s var(--ease);
  box-shadow: 0 0 12px rgba(47, 107, 255, .7);
}
.intro__sub {
  margin: 0; font-family: var(--display); font-style: italic; font-size: 1rem; color: var(--platinum);
  animation: intro-in 1.1s .25s var(--ease-slow) both;
}
@keyframes intro-in { from { opacity: 0; transform: translateY(10px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

.intro.is-open .intro__mark { opacity: 0; transform: translate(-50%, -54%); }
.intro.is-open .intro__door--left { transform: translateX(-101%); transition-delay: .25s; }
.intro.is-open .intro__door--right { transform: translateX(101%); transition-delay: .25s; }
.intro.is-open .intro__door--left::after { opacity: 1; }

/* ---------- Explore the Divo -------------------------------------------- */
.explore { padding: clamp(5rem, 14vw, 9rem) 0 clamp(4rem, 10vw, 7rem); }
.explore__head { margin-bottom: 2rem; }
.explore__stage { position: relative; }
.explore__img { width: 100%; height: auto; }
.hotspot {
  position: absolute; left: var(--x); top: var(--y);
  width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
}
.hotspot::before, .hotspot::after {
  content: ""; position: absolute; left: 50%; top: 50%; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.hotspot::before {                       /* the stitch: a small ring of piping blue */
  width: 14px; height: 14px; border: 1.5px solid var(--slab);
  background: rgba(0, 0, 0, .35);
  transition: background-color .35s var(--ease), border-color .35s var(--ease), width .35s var(--ease), height .35s var(--ease);
}
.hotspot::after {                        /* a slow breath so the points are found */
  width: 14px; height: 14px; border: 1px solid var(--piping);
  animation: breathe 2.8s var(--ease) infinite;
}
.hotspot:hover::before, .hotspot.is-active::before { background: var(--piping); border-color: var(--piping); width: 18px; height: 18px; }
.hotspot.is-active::after { animation: none; opacity: 0; }
@keyframes breathe { 0% { width: 14px; height: 14px; opacity: .9; } 100% { width: 40px; height: 40px; opacity: 0; } }
.hotspot__label {
  position: absolute; left: 34px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-size: .8125rem; color: var(--slab);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8);
  clip: rect(0 0 0 0); clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden;
}
.explore__notes { margin-top: 1.75rem; min-height: 9rem; }
.note__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 5vw, 2.25rem); margin: 0 0 .6rem; }
.note:not([hidden]) { animation: note-in .6s var(--ease-slow); }
@keyframes note-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (min-width: 992px) {
  .explore__head, .explore .site-gutter { padding-left: calc(var(--gutter) + 3rem); }
  .hotspot__label { clip: auto; clip-path: none; width: auto; height: auto; overflow: visible; }
  .explore__stage { margin: 0 var(--gutter) 0 calc(var(--gutter) + 3rem); }
  .explore__notes { max-width: 40rem; }
}

/* ---------- Circuit loop ------------------------------------------------ */
.circuit {
  position: relative; overflow: hidden;
  height: calc(100 * var(--vh)); min-height: 34rem;
  background: var(--void);
}
.circuit__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.circuit__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.2) 45%, transparent 70%),
    linear-gradient(to bottom, var(--void) 0%, transparent 18%);
}
.circuit__copy {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(2.75rem + var(--safe-bottom));
}
@media (min-width: 992px) {
  .circuit__copy { left: calc(var(--gutter) + 3rem); right: auto; max-width: 40rem; bottom: 4.5rem; }
}

/* ---------- After dark: portrait loop ----------------------------------- */
/* Phones: the 9:16 film fills the screen. Desktop: a tall panel beside the copy. */
.afterdark { position: relative; background: var(--void); }
.afterdark__frame { position: relative; height: calc(100 * var(--vh)); overflow: hidden; }
.afterdark__video { width: 100%; height: 100%; object-fit: cover; }
.afterdark__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 45%), linear-gradient(to bottom, var(--void) 0%, transparent 15%);
}
.afterdark__copy { position: absolute; left: var(--gutter); right: var(--gutter); bottom: calc(2.75rem + var(--safe-bottom)); }
@media (min-width: 992px) {
  .afterdark { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; padding: 6rem 0; }
  .afterdark__frame { height: auto; aspect-ratio: 9 / 16; max-height: 88vh; margin-left: calc(var(--gutter) + 3rem); }
  .afterdark__frame::after { background: none; }
  .afterdark__copy { position: static; padding: 0 var(--gutter) 0 5rem; max-width: 44rem; }
}

/* ---------- Lineage ----------------------------------------------------- */
.lineage { padding: clamp(5rem, 16vw, 10rem) 0 clamp(3rem, 8vw, 6rem); }
.lineage__head { margin-bottom: 2.5rem; }
.lineage__track {
  list-style: none; margin: 0; padding: 0 var(--gutter) 1.5rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 82vw; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.lineage__track::-webkit-scrollbar { display: none; }
.era { scroll-snap-align: start; }
.era__frame { aspect-ratio: 4 / 5; overflow: hidden; background: var(--basalt); }
.era__frame img {
  width: 100%; height: 100%; object-fit: cover;
  animation: drift 18s var(--ease) infinite alternate;
  filter: saturate(.85) brightness(.82);
  transition: filter .8s var(--ease);
}
.era.is-active .era__frame img, .era:hover .era__frame img { filter: none; }
.era:nth-child(2n) .era__frame img { animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes drift {
  from { transform: scale(1.12) translate3d(-2%, 0, 0); }
  to   { transform: scale(1.02) translate3d(2%, -1%, 0); }
}
.era__year { margin: 1rem 0 .1rem; font-size: .875rem; color: #7d848b; font-variant-numeric: tabular-nums; }
.era__name { margin: 0; font-size: 1.75rem; line-height: 1.1; }
.era__here {
  display: inline-block; vertical-align: middle; margin-left: .6rem;
  font-family: var(--text); font-size: .75rem; letter-spacing: .04em; color: var(--slab);
  padding: .2rem .55rem; border: 1px solid var(--piping);
}
.era--current .era__frame { outline: 1px solid var(--piping); outline-offset: 6px; }

/* Each card opens its car sheet. The button stretches over the whole card. */
.era { position: relative; }
.era__open {
  padding: 0; border: 0; background: none; color: inherit;
  font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer;
}
.era__open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.era__open:focus-visible { outline: none; }
.era:has(.era__open:focus-visible) .era__frame { outline: 2px solid var(--piping); outline-offset: 6px; }
.era__here { position: relative; z-index: 2; }
.era__price {
  margin: .45rem 0 0; color: var(--platinum); font-size: 1rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
  transition: color .5s var(--ease);
}
.era:hover .era__price, .era.is-active .era__price { color: var(--slab); }

/* ---------- Car sheet --------------------------------------------------- */
html.sheet-open, html.sheet-open body { overflow: hidden; }
.car-sheet {
  position: fixed; inset: 0; width: 100%; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; overflow: hidden;
  background: var(--void); color: var(--slab);
  opacity: 0; transition: opacity .38s var(--ease);
}
.car-sheet::backdrop { background: #000; }
.car-sheet[open] { display: grid; grid-template-rows: minmax(0, 46svh) minmax(0, 1fr); }
.car-sheet.is-open { opacity: 1; }

.car-sheet__media { position: relative; overflow: hidden; background: var(--basalt); touch-action: pan-y; }
.car-sheet__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.45) 0%, transparent 28%, transparent 62%, var(--void) 100%);
}
.car-sheet__img {
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08);
  transition: opacity .7s var(--ease), transform 1.6s var(--ease-slow);
}
.car-sheet.is-open .car-sheet__img.is-loaded { opacity: 1; transform: none; }

.car-sheet__body {
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  padding: .5rem var(--gutter) 0;
}
.car-sheet__body > * {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity .6s var(--ease), transform .9s var(--ease-slow);
}
.car-sheet.is-open .car-sheet__body > * { opacity: 1; transform: none; }
.car-sheet.is-open .car-sheet__body > :nth-child(2) { transition-delay: .06s; }
.car-sheet.is-open .car-sheet__body > :nth-child(3) { transition-delay: .12s; }
.car-sheet.is-open .car-sheet__body > :nth-child(4) { transition-delay: .18s; }
.car-sheet.is-open .car-sheet__body > :nth-child(n+5) { transition-delay: .24s; }
.car-sheet.is-swapping .car-sheet__body > *,
.car-sheet.is-open.is-swapping .car-sheet__img.is-loaded { opacity: 0; transition-duration: .25s; transition-delay: 0s; }

.car-sheet__year { margin: 0 0 .35rem; color: var(--platinum); font-size: .9375rem; font-variant-numeric: tabular-nums; }
.car-sheet__name {
  margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(2.6rem, 11vw, 4.75rem); line-height: .98;
}
.car-sheet__price {
  margin: 1rem 0 0; padding-bottom: 1.1rem; border-bottom: 1px solid var(--piping);
  font-family: var(--display); font-size: clamp(1.9rem, 7.5vw, 2.75rem); line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.car-sheet__note { margin: 1.25rem 0 1.5rem; max-width: 40ch; color: var(--platinum); line-height: 1.6; }

.car-sheet__spec { margin: 0 0 1rem; }
.car-sheet__spec div {
  display: grid; grid-template-columns: minmax(7.5rem, 2fr) 3fr; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid rgba(238, 242, 246, .12);
}
.car-sheet__spec dt { font-weight: 400; color: var(--platinum); font-size: .9375rem; }
.car-sheet__spec dd { margin: 0; font-size: .9375rem; line-height: 1.45; }

.car-sheet__actions {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 calc(var(--gutter) * -1); padding: 1.75rem var(--gutter) calc(1rem + var(--safe-bottom));
  background: linear-gradient(180deg, transparent, var(--void) 30%);
  display: grid; gap: .5rem;
}
.car-sheet__actions .btn-cta { width: 100%; justify-content: center; }
.car-sheet__step { display: flex; justify-content: space-between; }
.car-sheet__step button,
.car-sheet__close {
  min-height: 44px; padding: .5rem 0; border: 0; background: none;
  color: var(--platinum); font-size: .9375rem;
  transition: color .3s var(--ease);
}
.car-sheet__step button:hover, .car-sheet__step button:focus-visible { color: var(--slab); }
.car-sheet__close {
  position: absolute; top: calc(.75rem + var(--safe-top)); right: var(--gutter); z-index: 3;
  padding: .45rem .95rem; color: var(--slab);
  background: rgba(0, 0, 0, .55); border: 1px solid rgba(238, 242, 246, .25);
}
.car-sheet__close:hover, .car-sheet__close:focus-visible { border-color: var(--slab); }

@media (min-width: 992px) {
  .car-sheet[open] { grid-template-rows: none; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .car-sheet__media::after { background: linear-gradient(90deg, transparent 70%, var(--void) 100%); }
  .car-sheet__body { display: flex; flex-direction: column; padding: 4.5rem clamp(2.5rem, 4vw, 4.5rem) 2.5rem; }
  .car-sheet__name { font-size: clamp(2.6rem, 3.6vw, 4rem); }
  .car-sheet__note { margin: 1rem 0 1.1rem; }
  .car-sheet__spec div { padding: .62rem 0; }
  .car-sheet__body > .car-sheet__year { margin-top: auto; }
  .car-sheet__actions { position: static; margin: 1.5rem 0 auto; padding: 0; background: none; }
  .car-sheet__actions .btn-cta { width: auto; justify-self: start; }
  .car-sheet__step { justify-content: flex-start; gap: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .car-sheet, .car-sheet__img, .car-sheet__body > * { transition: none; transform: none; }
}

/* ---------- Gallery ----------------------------------------------------- */
.gallery { padding: clamp(3rem, 10vw, 7rem) 0 clamp(5rem, 14vw, 9rem); }
.gallery__head { margin-bottom: 2rem; }
.gallery__track {
  display: flex; gap: .75rem; padding: 0 var(--gutter) 1rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.gallery__track::-webkit-scrollbar { display: none; }
.shot { flex: 0 0 78vw; margin: 0; scroll-snap-align: start; height: 56vw; max-height: 70svh; }
.shot--wide { flex-basis: 88vw; }
.shot--tall { flex-basis: 60vw; height: 80vw; }
.shot button { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: var(--basalt); overflow: hidden; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-slow), filter .8s var(--ease); filter: brightness(.9); }
.shot button:hover img, .shot button:focus-visible img { transform: scale(1.04); filter: none; }

/* Viewer */
.viewer {
  width: 100vw; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: #000; color: var(--slab);
}
.viewer::backdrop { background: rgba(0, 0, 0, .9); }
.viewer[open] { display: grid; place-items: center; animation: viewer-in .5s var(--ease-slow); }
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
.viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .3s var(--ease), opacity .3s var(--ease); touch-action: none; }
.viewer__close {
  position: fixed; top: calc(1rem + var(--safe-top)); right: var(--gutter);
  min-height: 44px; padding: .5rem 0; background: none; border: 0; color: var(--slab); font-size: .9375rem;
}

/* ---------- The close: private viewing over the Divo film --------------- */
.close { position: relative; overflow: hidden; background: var(--void); isolation: isolate; }
.close__film, .close__video { position: absolute; inset: 0; width: 100%; height: 100%; }
.close__film { z-index: -2; }
.close__video { object-fit: cover; opacity: 0; transition: opacity 1.2s var(--ease); }
.close__video.is-playing { opacity: 1; }
.close__shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, var(--void) 0%, rgba(0,0,0,.55) 22%, rgba(0,0,0,.6) 60%, var(--void) 100%),
    radial-gradient(120% 80% at 20% 30%, rgba(13, 47, 115, .35), transparent 60%);
}
.close__inner { display: grid; gap: 3rem; padding-top: clamp(6rem, 18vw, 10rem); padding-bottom: clamp(5rem, 14vw, 8rem); }
.close__title { font-family: var(--display); font-weight: 400; font-size: clamp(3.4rem, 15vw, 8.5rem); line-height: .9; letter-spacing: -.03em; margin: 0 0 1.5rem; }
.close__lede { max-width: 36ch; color: var(--slab); font-size: clamp(1.05rem, 1.3vw + .7rem, 1.3rem); line-height: 1.55; margin: 0 0 2.5rem; text-shadow: 0 1px 14px rgba(0,0,0,.5); }

.close__steps { list-style: none; counter-reset: step; margin: 0 0 2.25rem; padding: 0; display: grid; }
.close__steps li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.5rem 1fr; column-gap: .75rem; padding: 1rem 0;
  border-top: 1px solid rgba(238, 242, 246, .14);
}
.close__steps li::before {
  content: counter(step); grid-row: span 2;
  font-family: var(--display); font-size: 1.6rem; line-height: 1; color: var(--piping);
}
.close__steps strong { font-weight: 500; font-size: 1.0625rem; }
.close__steps span { color: var(--platinum); font-size: .9375rem; line-height: 1.5; }

.close__assure { list-style: none; margin: 0 0 2.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.close__assure li { padding: .45rem .8rem; border: 1px solid rgba(238, 242, 246, .2); font-size: .8125rem; color: var(--slab); background: rgba(0,0,0,.25); }

.close__concierge-label { margin: 0 0 .3rem; color: var(--platinum); font-size: .9375rem; }
.close__line { display: inline-block; font-family: var(--display); font-size: clamp(1.9rem, 7vw, 2.6rem); color: var(--slab); text-decoration: none; line-height: 1.1; }
.close__line:hover { color: #fff; }
.close__links { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin-top: .75rem; }
.close__links a { min-height: 44px; display: inline-flex; align-items: center; color: var(--slab); text-decoration: underline; text-decoration-color: var(--piping); text-underline-offset: .35em; font-size: .9375rem; }

.close__panel {
  position: relative; align-self: start;
  padding: clamp(1.5rem, 5vw, 2.5rem);
  background: rgba(8, 10, 14, .62);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(238, 242, 246, .14);
}
.close__panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--piping); }
.close__panel-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 6vw, 2.1rem); margin: 0 0 1.5rem; }
.close .form-note { margin-top: 1rem; }

.btn-cta--solid { --fill: #fff; background: var(--slab); color: var(--void); border-color: var(--slab); }
.btn-cta--solid:hover, .btn-cta--solid:focus-visible { color: var(--void); }

/* ---------- Finale / form ----------------------------------------------- */
.viewing .caption { margin-bottom: 2rem; }

.enquire { padding: clamp(4rem, 12vw, 8rem) 0 clamp(5rem, 14vw, 9rem); background: var(--void); }
.enquire__intro { margin-bottom: 2.5rem; }

.viewing-form .form-label { font-size: .875rem; color: var(--platinum); margin-bottom: .35rem; }
.viewing-form .optional { color: #7d848b; }
.viewing-form .form-control,
.viewing-form .form-select {
  min-height: 52px;
  background-color: rgba(0, 0, 0, .35);
  border: 0; border-bottom: 1px solid #50565c; border-radius: 0;
  color: var(--slab);
  font-size: 1rem;                         /* 16px stops iOS zooming on focus */
  padding: .8rem 0;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.viewing-form .form-select {
  background-image: none; padding-right: 0;
}
.viewing-form .form-select option { color: #000; }
.viewing-form .form-control:focus,
.viewing-form .form-select:focus {
  background-color: rgba(0, 0, 0, .5);
  border-bottom-color: var(--piping);
  box-shadow: none; color: var(--slab);
}
.was-validated .form-control:invalid { border-bottom-color: #e2826d; background-image: none; }
.was-validated .form-control:valid { border-bottom-color: #50565c; background-image: none; }
.invalid-feedback { color: #f0a493; font-size: .8125rem; }
.form-note { margin: 0; font-size: .8125rem; color: #8d949b; max-width: 30ch; }
.form-status { margin: 1rem 0 0; min-height: 1.5em; color: var(--slab); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* ---------- Footer ------------------------------------------------------ */
.site-footer {
  padding: 2.5rem 0 calc(2.5rem + var(--safe-bottom));
  border-top: 1px solid var(--graphite);
  font-size: .8125rem; color: #7d848b;
}
.site-footer p { margin: 0 0 .5rem; }
.site-footer a { color: var(--platinum); }
.site-footer__grid { display: grid; gap: 2rem; padding-bottom: 2rem; }
.site-footer__brand { color: var(--slab); margin-bottom: .75rem; }
.site-footer__head { color: var(--slab); font-size: .8125rem; margin-bottom: .5rem; }
.site-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--graphite); }

/* ==========================================================================
   Tablet and up
   ========================================================================== */
@media (min-width: 768px) {
  .figures__list { grid-template-columns: repeat(5, 1fr); border-top: 0; }
  .figure { padding: 1.5rem 1.25rem 0 0; border-bottom: 0; border-left: 1px solid var(--graphite); padding-left: 1.25rem; }
  .figure:last-child { grid-column: auto; }
  .figures__lead { grid-template-columns: auto 1fr; align-items: end; gap: 2.5rem; }

  .lineage__track { grid-auto-columns: 46vw; gap: 1.5rem; }
  .shot { flex-basis: 52vw; height: 36vw; }
  .shot--wide { flex-basis: 64vw; }
  .shot--tall { flex-basis: 30vw; height: 36vw; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */
@media (min-width: 992px) {
  .menu-btn, .menu, .dock { display: none; }
  .menu[hidden] { display: none; }
  .desktop-nav { display: flex; flex: 1; }
  .navbar-nav { flex-direction: row; gap: 2rem; }
  .navbar-nav .nav-link { padding: .25rem 0; }
  .btn-cta--small { margin-top: 0; }
  .now-chapter { display: none; }

  .piping { left: calc(var(--gutter) * .45); }
  .piping__stops {
    display: block; list-style: none; margin: 0; padding: 0;
    position: absolute; inset: 0;
  }
  .piping__stops li {
    position: absolute; left: 14px; transform: translateY(-50%);
    font-size: .75rem; color: #6c737a; white-space: nowrap;
    opacity: 0; transition: opacity .6s var(--ease), color .6s var(--ease);
  }
  .piping__stops li::before {
    content: ""; position: absolute; left: -17px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px;
    border-radius: 50%; background: var(--void); border: 1px solid #50565c;
    transition: background-color .5s var(--ease), border-color .5s var(--ease);
  }
  .piping__stops li.is-passed::before { background: var(--piping); border-color: var(--piping); }
  .piping__stops li.is-current { opacity: 1; color: var(--slab); }
  .piping:hover .piping__stops li { opacity: 1; }

  .stage__copy { left: calc(var(--gutter) + 3rem); right: auto; max-width: 40rem; bottom: 4.5rem; }
  .stage__copy--right { left: auto; right: var(--gutter); max-width: 26rem; }
  .stage__copy--low { bottom: 4.5rem; }
  .stage__copy--top { top: calc(var(--header-h, 4.6rem) + 2.5rem); }

  .hero-copy__title { font-size: clamp(9rem, 19vw, 22rem); }

  .commission__grid { display: grid; grid-template-columns: 7fr 5fr; }
  .commission__media .chapter--inline { height: var(--length); }
  .commission .stage--inline { position: sticky; top: 0; height: 100vh; }
  .commission__spec { padding: 9rem var(--gutter) 6rem 4rem; align-self: start; position: sticky; top: 0; }

  .lineage__track { grid-auto-columns: 30vw; padding-left: calc(var(--gutter) + 3rem); scroll-padding-inline: calc(var(--gutter) + 3rem); }
  .lineage__head, .gallery__head { padding-left: calc(var(--gutter) + 3rem); }
  .gallery__track { padding-left: calc(var(--gutter) + 3rem); scroll-padding-inline: calc(var(--gutter) + 3rem); }

  .close__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: center; padding-left: calc(var(--gutter) + 3rem); min-height: 100vh; }
  .site-footer .site-gutter { padding-left: calc(var(--gutter) + 3rem); }
  .site-footer__grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* Phones and touch screens: fade and rise only. Live blur while scrolling is
   expensive on iPhone Safari and can stutter. */
@media (max-width: 991.98px), (hover: none) {
  .stage__copy { filter: none; transition: opacity .9s var(--ease-slow), transform 1s var(--ease-slow); }
}

/* Sections well below the fold skip rendering until they are near */
.lineage, .gallery, .enquire { content-visibility: auto; contain-intrinsic-size: auto 900px; }

/* Very short landscape phones */
@media (max-height: 520px) and (orientation: landscape) {
  .hero-copy__title { font-size: 26vh; }
}

/* ==========================================================================
   Reduced motion: no scrubbing, no drifting, no blur
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .chapter { height: auto; }
  .chapter .stage { height: calc(100 * var(--vh)); }
  .chapter .stage { position: relative; }
  .stage__copy, .reveal { opacity: 1; transform: none; filter: none; transition: none; }
  .stage__poster, .figures__engine-image img { transform: none; }
  .era__frame img { animation: none; }
  .menu, .menu__list a, .menu__foot, .dock { transition: none; }
  .stage__video, .close__video { display: none; }
  .hotspot::after { animation: none; }
  .scroll-cue::after { animation: none; }
}

html.menu-open .dock { opacity: 0; pointer-events: none; }