/* ==========================================================================
   AETHER — style.css
   --------------------------------------------------------------------------
   0.  Fonts
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Layout primitives
   5.  Buttons
   6.  Overlays (grain, cursor, a11y helpers)
   7.  Loading screen
   8.  Navigation & menu
   9.  Hero
   10. Brand story
   11. Feature showcase
   12. Product experience
   13. Horizontal gallery
   14. Video showcase
   15. Statistics
   16. Testimonials
   17. Final CTA
   18. Footer
   19. Responsive
   20. Reduced motion / no-JS / print
   ========================================================================== */

/* ==========================================================================
   0. FONTS — self-hosted, latin subsets only
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/instrument-serif-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. TOKENS
   ========================================================================== */

:root {
  /* Palette — one accent, everything else is neutral */
  --ink:        #060607;
  --ink-2:      #0a0a0d;
  --surface:    #101014;
  --surface-2:  #16161b;
  --line:       rgba(255, 255, 255, 0.09);
  --line-soft:  rgba(255, 255, 255, 0.055);
  --text:       #f2f2f4;
  --text-dim:   #9a9aa4;
  --text-mute:  #85858f;
  --accent:     #ffb25c;
  --accent-ink: #0a0a0c;
  --accent-dim: rgba(255, 178, 92, 0.14);

  /* Type */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Instrument Serif', 'Iowan Old Style', Georgia, 'Times New Roman', serif;

  --fs-display:   clamp(3rem, 10.4vw, 10.5rem);
  --fs-display-2: clamp(2.1rem, 5.6vw, 5.4rem);
  --fs-h3:        clamp(1.5rem, 2.5vw, 2.35rem);
  --fs-lede:      clamp(1.02rem, 1.25vw, 1.3rem);
  --fs-body:      clamp(0.98rem, 1.05vw, 1.075rem);
  --fs-micro:     0.72rem;

  /* Space */
  --shell:      1440px;
  --gutter:     clamp(20px, 5vw, 72px);
  --section-y:  clamp(96px, 13vh, 190px);

  /* Motion */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

  --nav-h: 72px;
  --radius: 14px;
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis drives scrolling once JS is up; native smooth-scroll would fight it. */
html.lenis, html.lenis body { height: auto; }
html.js { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
}

/* The loader owns the viewport until the site is ready. */
body.is-locked { overflow: hidden; height: 100vh; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.display, .display-2 {
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.display   { font-size: var(--fs-display); }
.display-2 { font-size: var(--fs-display-2); line-height: 0.95; letter-spacing: -0.038em; }

/* The one editorial gesture: the emphasised word switches to a serif italic
   and carries the single accent colour. Used sparingly, once per headline. */
.display em, .display-2 em, .xp__line em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--accent);
}

/* Mask-reveal scaffolding. overflow:hidden clips descenders, so the padding
   and the matching negative margin give them room without shifting layout. */
.line {
  display: block;
  overflow: hidden;
  padding-block: 0.03em 0.16em;
  margin-block: -0.03em -0.16em;
}
.line__in { display: block; will-change: transform; }

/* SplitType output. Lines become the mask, words become the moving parts. */
.sp-line {
  display: block;
  overflow: hidden;
  padding-block: 0.03em 0.16em;
  margin-block: -0.03em -0.16em;
}
.sp-word { display: inline-block; will-change: transform; }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: var(--text-dim);
  max-width: 46ch;
  letter-spacing: -0.014em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.eyebrow .dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px 1px rgba(255, 178, 92, 0.7);
  flex: none;
}

.section-head { margin-bottom: clamp(48px, 7vw, 104px); }
.section-head .eyebrow { margin-bottom: clamp(20px, 2.4vw, 34px); }
.section-head--center { text-align: center; }
.section-head--center .lede { margin-inline: auto; }
.section-title { max-width: 18ch; }
.section-head--center .section-title { max-width: none; }

/* ==========================================================================
   4. LAYOUT PRIMITIVES
   ========================================================================== */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

main > section { position: relative; }

/* --------------------------------------------------------------------------
   Full-bleed video background — the reusable primitive behind every section
   that plays a loop. Drop it as the first child of any positioned container:

     <div class="section-bg" aria-hidden="true">
       <video class="section-bg__video" data-src="…" data-src-mobile="…"
              poster="…" muted loop playsinline preload="none"></video>
       <div class="section-bg__scrim"></div>
     </div>

   The scrim is a sibling rather than a filter on the video, so scroll
   parallax can move the footage without dragging the darkening with it.
   -------------------------------------------------------------------------- */

.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
.section-bg__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Heavy and fairly even: this footage is ambient depth behind body copy, not
   a feature in its own right. A gradient that only darkens the edges leaves
   the brightest part of the frame directly under the text. */
.section-bg__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(6, 6, 7, 0.86) 0%, rgba(6, 6, 7, 0.64) 45%, rgba(6, 6, 7, 0.88) 100%),
    radial-gradient(115% 85% at 50% 50%, rgba(6, 6, 7, 0.16) 0%, rgba(6, 6, 7, 0.9) 100%);
}

.features, .film, .numbers, .voices { padding-block: var(--section-y); }

/* Hairline rules between the lower content sections. */
.film, .numbers, .voices { border-top: 1px solid var(--line-soft); }

/* ==========================================================================
   5. BUTTONS
   ========================================================================== */

.btn {
  --btn-py: 0.92em;
  --btn-px: 1.55em;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: var(--btn-py) var(--btn-px);
  border-radius: 100px;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s var(--ease-out), color 0.35s var(--ease-soft),
              border-color 0.35s var(--ease-soft), background-color 0.35s var(--ease-soft);
}
.btn svg { flex: none; transition: transform 0.5s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--sm { --btn-py: 0.66em; --btn-px: 1.2em; font-size: 0.82rem; }
.btn--lg { --btn-py: 1.08em; --btn-px: 2em; font-size: 0.98rem; }

.btn--solid {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 0 0 0 rgba(255, 178, 92, 0.35);
}
.btn--solid:hover {
  box-shadow: 0 14px 40px -12px rgba(255, 178, 92, 0.55);
}
.btn--solid:hover svg { transform: translateX(3px); }

.btn--ghost {
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
}

/* ==========================================================================
   6. OVERLAYS
   ========================================================================== */

.skip-link {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 10000;
  padding: 0.7em 1.2em;
  border-radius: 100px;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 0.85rem;
  font-weight: 500;
  transform: translateY(-160%);
  transition: transform 0.35s var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Film grain — a single tiling turbulence texture, composited once. */
.grain {
  position: fixed;
  inset: -50%;
  z-index: 9997;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
}

/* Custom cursor — pointer devices only, driven by transform in app.js. */
.cursor {
  position: fixed;
  top: 0; left: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s var(--ease-soft);
}
.cursor.is-live { opacity: 1; }
.cursor__dot, .cursor__ring {
  position: absolute;
  top: 0; left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor__dot {
  width: 5px; height: 5px;
  background: var(--accent);
}
.cursor__ring {
  width: 34px; height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out), background-color 0.35s var(--ease-out);
}
.cursor.is-hot .cursor__ring {
  width: 58px; height: 58px;
  border-color: var(--accent);
  background: rgba(255, 178, 92, 0.08);
}
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ==========================================================================
   7. LOADING SCREEN
   ========================================================================== */

/* The curtain, not the container, carries the background — collapsing it is
   what reveals the page, so the container must stay transparent. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}
.loader__inner {
  position: relative;
  z-index: 1;
  width: min(420px, calc(100vw - 48px));
  text-align: center;
}
.loader__mark { color: var(--accent); display: grid; place-items: center; margin-bottom: 26px; }
.loader__ring {
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
  animation: loaderRing 1.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes loaderRing { to { stroke-dashoffset: 0; } }

.loader__word {
  display: flex;
  justify-content: center;
  gap: 0.42em;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  line-height: 1;
  margin-bottom: 34px;
}
.loader__word span {
  display: inline-block;
  will-change: transform, opacity;
  animation: loaderLetterIn 0.9s var(--ease-out) backwards;
}
.loader__word span:nth-child(1) { animation-delay: 0.10s; }
.loader__word span:nth-child(2) { animation-delay: 0.15s; }
.loader__word span:nth-child(3) { animation-delay: 0.20s; }
.loader__word span:nth-child(4) { animation-delay: 0.25s; }
.loader__word span:nth-child(5) { animation-delay: 0.30s; }
.loader__word span:nth-child(6) { animation-delay: 0.35s; }
@keyframes loaderLetterIn {
  from { transform: translateY(110%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.loader__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 12px;
  /* No entrance animation and no delay: this row is the first contentful
     pixels on the page. Starting it at opacity 0 like the rest of the loader
     meant the browser had nothing to register as a contentful paint until the
     letters had faded up, which pushed FCP back by most of a second. */
}
.loader__count { font-variant-numeric: tabular-nums; color: var(--text); }
.loader__count::after { content: '%'; color: var(--text-mute); margin-left: 2px; }

.loader__track {
  height: 1px;
  background: var(--line);
  overflow: hidden;
}
.loader__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  box-shadow: 0 0 14px rgba(255, 178, 92, 0.8);
}

/* Sits behind the loader content and lifts away to hand the viewport to the
   hero: scaleY(0) against a top origin drags the bottom edge up and off. */
.loader__curtain {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--ink);
  transform-origin: 50% 0%;
}

/* --- Exit. Total ~1.15s; the hero is released at 0.7s, mid-wipe. ---------- */

.loader.is-leaving .loader__word span {
  animation: loaderLetterOut 0.4s cubic-bezier(0.5, 0, 0.75, 0) forwards;
}
.loader.is-leaving .loader__word span:nth-child(1) { animation-delay: 0.000s; }
.loader.is-leaving .loader__word span:nth-child(2) { animation-delay: 0.025s; }
.loader.is-leaving .loader__word span:nth-child(3) { animation-delay: 0.050s; }
.loader.is-leaving .loader__word span:nth-child(4) { animation-delay: 0.075s; }
.loader.is-leaving .loader__word span:nth-child(5) { animation-delay: 0.100s; }
.loader.is-leaving .loader__word span:nth-child(6) { animation-delay: 0.125s; }
@keyframes loaderLetterOut {
  to { transform: translateY(-110%); opacity: 0; }
}

.loader.is-leaving .loader__mark,
.loader.is-leaving .loader__meta,
.loader.is-leaving .loader__track {
  animation: loaderFadeOut 0.35s var(--ease-soft) 0.05s forwards;
}
@keyframes loaderFadeOut { to { opacity: 0; } }

.loader.is-leaving .loader__curtain {
  animation: loaderCurtain 0.8s cubic-bezier(0.86, 0, 0.07, 1) 0.35s forwards;
}
@keyframes loaderCurtain { to { transform: scaleY(0); } }

/* ==========================================================================
   8. NAVIGATION
   ========================================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 900;
  transition: background-color 0.5s var(--ease-soft), backdrop-filter 0.5s var(--ease-soft),
              border-color 0.5s var(--ease-soft);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(6, 6, 7, 0.62);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom-color: var(--line-soft);
}
/* Hide the bar while scrolling down, bring it back on the way up. */
.nav.is-hidden { transform: translateY(-100%); }
.nav { transition-property: background-color, backdrop-filter, border-color, transform; }
.nav { transition-duration: 0.5s, 0.5s, 0.5s, 0.55s; }

.nav__progress {
  position: absolute;
  bottom: -1px; left: 0;
  height: 1px;
  width: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0.9;
}

.nav__inner {
  max-width: var(--shell);
  margin-inline: auto;
  padding: 0 var(--gutter);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.62em;
  font-weight: 600;
  letter-spacing: 0.22em;
  font-size: 0.82rem;
  color: var(--text);
}
.nav__mark { color: var(--accent); flex: none; transition: transform 0.7s var(--ease-out); }
.nav__brand:hover .nav__mark { transform: rotate(90deg); }
.nav__word { transform: translateY(1px); }

.nav__links { display: flex; gap: clamp(18px, 2.2vw, 38px); }
.nav__links a {
  position: relative;
  font-size: 0.845rem;
  color: var(--text-dim);
  padding-block: 6px;
  transition: color 0.3s var(--ease-soft);
}
.nav__links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.45s var(--ease-out);
}
.nav__links a:hover, .nav__links a.is-current { color: var(--text); }
.nav__links a:hover::after, .nav__links a.is-current::after {
  transform: scaleX(1);
  transform-origin: 0 50%;
}

.nav__actions { display: flex; align-items: center; gap: 14px; }

.nav__call { font-variant-numeric: tabular-nums; }
.nav__call svg { transform: translateY(-0.5px); }

/* Flex, not grid: `place-items` centres each bar inside its own track but
   leaves the tracks themselves packed at the top of the button. */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  gap: 5px;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.nav__toggle span {
  display: block;
  width: 16px; height: 1px;
  background: var(--text);
  transition: transform 0.45s var(--ease-out), opacity 0.3s var(--ease-soft);
}
.nav__toggle[aria-expanded='true'] span:first-child { transform: translateY(3px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

/* --- Full-screen menu ---------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 890;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(var(--nav-h) + 32px) var(--gutter) 40px;
  background: rgba(6, 6, 7, 0.92);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.75s var(--ease-out), visibility 0s linear 0.75s;
}
.menu.is-open {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.75s var(--ease-out), visibility 0s;
}

.menu__nav { display: flex; flex-direction: column; gap: clamp(4px, 1.4vh, 14px); }
.menu__nav a {
  display: flex;
  align-items: baseline;
  gap: 0.7em;
  font-size: clamp(1.9rem, 8vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.14;
  color: var(--text);
  opacity: 0;
  transform: translateY(28px);
  transition: color 0.3s var(--ease-soft);
}
.menu.is-open .menu__nav a { opacity: 1; transform: none; }
.menu__nav a em {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--text-mute);
}
.menu__nav a:hover { color: var(--accent); }

.menu__foot {
  margin-top: auto;
  padding-top: 40px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   9. HERO
   ========================================================================== */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: calc(var(--nav-h) + 40px);
  padding-bottom: clamp(84px, 12vh, 132px);
  overflow: hidden;
  isolation: isolate;
}

.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Slightly overscaled so the parallax drift never exposes an edge. */
  transform: scale(1.08);
  will-change: transform;
  background: var(--ink) center/cover no-repeat;
}

/* Two-stop scrim: darkens the base for text contrast, then vignettes. */
.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6, 6, 7, 0.96) 0%, rgba(6, 6, 7, 0.6) 32%,
                    rgba(6, 6, 7, 0.25) 62%, rgba(6, 6, 7, 0.55) 100%),
    radial-gradient(120% 80% at 50% 55%, transparent 30%, rgba(6, 6, 7, 0.8) 100%);
}

/* Above the scrim so the field stays crisp, below the copy so it never
   competes with the headline. Never intercepts pointer events — the canvas
   tracks the cursor from a window-level listener instead. */
.hero__particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__content { position: relative; }
.hero__content > * + * { margin-top: clamp(20px, 2.6vw, 34px); }

.hero__title { max-width: 15ch; }
.hero__lede { max-width: 44ch; color: var(--text-dim); }

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__spec {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(28px, 4vw, 64px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line-soft);
  max-width: 560px;
}
.hero__spec dt {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.hero__spec dd {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hero__spec dd span { font-size: 0.5em; color: var(--text-mute); margin-left: 2px; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 3.5vh, 40px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-mute);
  transition: color 0.3s var(--ease-soft);
}
.scroll-cue:hover { color: var(--text); }
.scroll-cue__line {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, var(--accent), transparent);
  transform-origin: 50% 0;
  animation: cue 2.6s var(--ease-soft) infinite;
}
@keyframes cue {
  0%        { transform: scaleY(0); opacity: 0; }
  35%       { transform: scaleY(1); opacity: 1; }
  75%, 100% { transform: scaleY(1); opacity: 0; transform-origin: 50% 100%; }
}

/* ==========================================================================
   10. BRAND STORY — pinned via sticky, chapters swapped by ScrollTrigger
   ========================================================================== */

.story { height: 360vh; background: var(--ink); }

.story__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.story__grid {
  display: grid;
  grid-template-columns: 64px minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: center;
}

/* --- Chapter rail -------------------------------------------------------- */

.story__rail { position: relative; height: min(56vh, 420px); display: flex; }
.story__rail-line {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--line);
}
.story__rail-line i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: 50% 0;
  box-shadow: 0 0 10px rgba(255, 178, 92, 0.7);
}
.story__ticks {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 18px;
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  color: var(--text-mute);
  width: 100%;
}
.story__ticks li { transition: color 0.5s var(--ease-soft), opacity 0.5s var(--ease-soft); opacity: 0.45; }
.story__ticks li.is-active { color: var(--accent); opacity: 1; }

/* --- Image stage --------------------------------------------------------- */

.story__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  max-height: 74svh;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.story__plate {
  position: absolute;
  inset: 0;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
}
.story__plate.is-active { opacity: 1; clip-path: inset(0 0 0 0); }
.story__plate img { width: 100%; height: 100%; object-fit: cover; }

/* --- Chapter copy -------------------------------------------------------- */

.story__copy { position: relative; }
.story__chapter {
  position: absolute;
  inset: auto 0 auto 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  pointer-events: none;
}
.story__chapter.is-active { opacity: 1; pointer-events: auto; }

.story__num {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(16px, 2vw, 26px);
}
.story__head {
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.035em;
  margin-bottom: clamp(16px, 2vw, 24px);
  text-wrap: balance;
}
.story__body { color: var(--text-dim); max-width: 44ch; line-height: 1.7; }
/* Instrument Serif carries a smaller x-height than Inter, so inline serif
   emphasis needs a size bump to sit level with the surrounding text. */
.story__body em {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.14em;
  letter-spacing: 0.004em;
  color: var(--text);
}

/* ==========================================================================
   11. FEATURE SHOWCASE
   ========================================================================== */

.features__list { display: flex; flex-direction: column; gap: clamp(80px, 11vw, 180px); }

.feature {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
}
.feature--flip .feature__media { order: 2; }

.feature__frame {
  position: relative;
  aspect-ratio: 14 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
}
.feature__frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  will-change: transform;
}
/* A soft inner edge keeps the plate from floating off the page. */
.feature__frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05),
              inset 0 -60px 90px -60px rgba(6, 6, 7, 0.9);
  pointer-events: none;
}

.feature__copy { position: relative; }
.feature__index {
  position: absolute;
  top: -0.5em; right: 0;
  font-size: clamp(3.5rem, 7vw, 6rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.045);
  pointer-events: none;
}
.feature__icon {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--accent-dim);
  color: var(--accent);
  margin-bottom: clamp(20px, 2.4vw, 30px);
}
.feature__icon svg { width: 24px; height: 24px; }

.feature__title {
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.12;
  margin-bottom: clamp(14px, 1.6vw, 20px);
}
.feature__body { color: var(--text-dim); max-width: 46ch; line-height: 1.72; }

.feature__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(22px, 2.6vw, 32px);
}
.feature__specs li {
  padding: 0.5em 1em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.8rem;
  color: var(--text-dim);
}
.feature__specs b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   12. PRODUCT EXPERIENCE — stacked sticky panels
   ========================================================================== */

.xp { position: relative; background: var(--ink); }

.xp__panel {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: grid;
  place-items: center;
  isolation: isolate;
  border-top: 1px solid var(--line-soft);
}
.xp__media { position: absolute; inset: 0; z-index: -2; will-change: transform; }
.xp__video { width: 100%; height: 100%; object-fit: cover; background: var(--ink); }
/* Scrim lives on the panel, not the image, so parallax never drags it. */
.xp__panel::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(6, 6, 7, 0.9), rgba(6, 6, 7, 0.35) 45%, rgba(6, 6, 7, 0.75)),
    radial-gradient(100% 70% at 50% 60%, transparent 20%, rgba(6, 6, 7, 0.75) 100%);
}

.xp__copy { text-align: center; }
.xp__kicker {
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: clamp(18px, 2.2vw, 30px);
}
.xp__line { font-weight: 500; text-wrap: balance; }

/* ==========================================================================
   13. HORIZONTAL GALLERY
   ========================================================================== */

.gallery { position: relative; background: var(--ink); border-top: 1px solid var(--line-soft); }

.gallery__pin {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.gallery__track {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 44px);
  padding-inline: var(--gutter);
  will-change: transform;
}

.gallery__intro {
  flex: none;
  width: min(38vw, 460px);
  padding-right: clamp(16px, 3vw, 48px);
}
.gallery__intro .eyebrow { margin-bottom: 22px; }
.gallery__intro h2 { margin-bottom: 24px; }
.gallery__note { color: var(--text-dim); max-width: 34ch; font-size: 0.95rem; }

.card {
  flex: none;
  width: clamp(240px, 27vw, 380px);
}
.card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  margin-bottom: 20px;
}
.card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.card:hover .card__media img { transform: scale(1.05); }

.card figcaption {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
}
.card__idx {
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  color: var(--accent);
}
.card figcaption b { font-weight: 500; letter-spacing: -0.02em; }
.card figcaption span:last-child { color: var(--text-mute); line-height: 1.55; font-size: 0.85rem; }

.gallery__hint {
  position: absolute;
  bottom: clamp(20px, 4vh, 40px);
  right: var(--gutter);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   14. VIDEO SHOWCASE
   ========================================================================== */

.film__frame {
  position: relative;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  aspect-ratio: 16 / 9;
  /* Reveal target for the ScrollTrigger clip-path animation. */
  clip-path: inset(0 0 0 0 round clamp(14px, 1.6vw, 22px));
}
.film__video {
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--surface) center/cover no-repeat;
}

.film__toggle {
  position: absolute;
  right: clamp(14px, 1.6vw, 24px);
  bottom: clamp(14px, 1.6vw, 24px);
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--text);
  border: 1px solid var(--line);
  background: rgba(6, 6, 7, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background-color 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft);
}
.film__toggle:hover { background: rgba(6, 6, 7, 0.8); border-color: rgba(255, 255, 255, 0.24); }
.film__ico { grid-area: 1 / 1; }
.film__toggle[aria-pressed='true']  .film__ico--play  { display: none; }
.film__toggle[aria-pressed='false'] .film__ico--pause { display: none; }

.film__caption {
  position: absolute;
  left: clamp(14px, 1.6vw, 26px);
  bottom: clamp(16px, 1.6vw, 28px);
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-shadow: 0 1px 12px rgba(6, 6, 7, 0.9);
}
.film__caption span:first-child { color: var(--text); }

/* ==========================================================================
   15. STATISTICS
   ========================================================================== */

.numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-block: 1px solid var(--line-soft);
}
.stat {
  background: var(--ink);
  padding: clamp(28px, 3.4vw, 46px) clamp(20px, 2.4vw, 34px);
}
.stat__value {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: 18px;
}
.stat__value i { font-style: normal; font-size: 0.32em; color: var(--accent); margin-left: 0.18em; }
.stat__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 8px;
}
.stat__note { color: var(--text-mute); font-size: 0.84rem; line-height: 1.6; }

.numbers__charts {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.75fr);
  /* Row gap alone spaces the meters — each one is its own grid row. */
  gap: clamp(26px, 3vw, 42px) clamp(32px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(48px, 6vw, 88px);
}
.meter { grid-column: 1; }
.meter__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--text-dim);
}
.meter__head b {
  font-weight: 500;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.meter__track { height: 2px; background: var(--line); overflow: hidden; }
.meter__track i {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, rgba(255, 178, 92, 0.35), var(--accent));
  transform: scaleX(0);
  transform-origin: 0 50%;
}

.dial {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(240px, 60vw);
}
.dial svg { width: 100%; height: auto; transform: rotate(-90deg); }
.dial__bg { stroke: var(--line); }
.dial__fg { stroke: var(--accent); filter: drop-shadow(0 0 6px rgba(255, 178, 92, 0.28)); }
.dial__mid {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
}
.dial__mid b {
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 500;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
/* Direct child only — `b` wraps its own <span> for the counter, and a
   descendant selector here would shrink the number to caption size. */
.dial__mid > span {
  font-size: var(--fs-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   16. TESTIMONIALS
   ========================================================================== */

.voices__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.quote {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 38px);
  padding: clamp(28px, 3.4vw, 48px);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface) 0%, var(--ink-2) 100%);
  transition: border-color 0.5s var(--ease-soft), transform 0.7s var(--ease-out);
}
.quote:hover { border-color: var(--line); transform: translateY(-4px); }
.quote blockquote p {
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.62;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}
.quote figcaption { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote__avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--accent-dim);
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.quote__who { display: grid; gap: 2px; font-size: 0.88rem; }
.quote__who b { font-weight: 500; letter-spacing: -0.015em; }
.quote__who span { color: var(--text-mute); font-size: 0.8rem; }

/* ==========================================================================
   17. FINAL CTA
   ========================================================================== */

.reserve {
  position: relative;
  padding-block: clamp(120px, 20vh, 260px);
  text-align: center;
  overflow: hidden;
  border-top: 1px solid var(--line-soft);
  isolation: isolate;
}
/* A single slow-breathing light source. No gradients stacked on gradients. */
.reserve__aura {
  position: absolute;
  left: 50%; top: 50%;
  z-index: -1;
  width: min(1100px, 130vw);
  aspect-ratio: 1;
  translate: -50% -50%;
  background: radial-gradient(circle,
    rgba(255, 178, 92, 0.20) 0%,
    rgba(255, 178, 92, 0.07) 32%,
    transparent 68%);
  will-change: transform;
}

.reserve__inner > * + * { margin-top: clamp(24px, 3vw, 40px); }
.reserve__title { max-width: 14ch; margin-inline: auto; }
.reserve__lede { margin-inline: auto; text-align: center; }
.reserve__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }
.reserve__fine {
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

/* ==========================================================================
   18. FOOTER
   ========================================================================== */

.foot {
  border-top: 1px solid var(--line-soft);
  padding-block: clamp(56px, 7vw, 96px) clamp(32px, 4vw, 48px);
  background: var(--ink);
}
.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(40px, 5vw, 80px) clamp(32px, 5vw, 72px);
  align-items: start;
}
.foot__brand p {
  color: var(--text-mute);
  font-size: 0.9rem;
  max-width: 26ch;
  margin-top: 18px;
}
.foot__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__cols h3 {
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 18px;
}
.foot__cols li + li { margin-top: 10px; }
.foot__cols a, .foot__cols span {
  font-size: 0.9rem;
  color: var(--text-dim);
  transition: color 0.3s var(--ease-soft);
}
.foot__cols a:hover { color: var(--accent); }

.foot__social { display: flex; gap: 10px; }
.foot__social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  color: var(--text-dim);
  transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft),
              transform 0.45s var(--ease-out);
}
.foot__social a:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-3px); }

.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--text-mute);
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  .story__grid { grid-template-columns: 48px minmax(0, 1fr); }
  .story__stage { display: none; }
  .story__copy { min-height: 46svh; }

  .numbers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers__charts { grid-template-columns: minmax(0, 1fr); }
  .dial { grid-column: 1; grid-row: auto; margin-top: 12px; }

  .foot__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 860px) {
  :root { --nav-h: 62px; }

  /* Give the scroll cue its own band so it never lands on the spec row. */
  .hero { padding-bottom: clamp(116px, 17vh, 160px); }
  .scroll-cue__label { display: none; }
  .scroll-cue__line { height: 40px; }

  .feature { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature--flip .feature__media { order: 0; }
  .feature__index { top: auto; bottom: 100%; }

  .gallery__intro { width: min(72vw, 380px); }
  .card { width: clamp(220px, 62vw, 300px); }

  .voices__grid { grid-template-columns: minmax(0, 1fr); }
  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  /* The phone CTA keeps its icon; the digits are in the aria-label and the
     href, so nothing is lost when the pill has to shrink. */
  .nav__tel { display: none; }
  .nav__call { --btn-px: 0.85em; }

  .numbers__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__spec { gap: 22px 32px; }
  .hero__spec > div { min-width: 84px; }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .foot__legal { flex-direction: column; }
  .film__caption span:last-child { display: none; }
}

/* Coarse pointers get the same design with less compositing work: the fixed
   grain layer and heavy backdrop filters are the expensive parts on mobile. */
@media (hover: none) {
  .grain { display: none; }
  .btn--ghost { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   20. REDUCED MOTION / NO-JS / PRINT
   ========================================================================== */

/* Escape hatches: if scripting fails or the visitor asks for less motion,
   every element that JS would have revealed must already be visible. */
.no-js .loader { display: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .scroll-cue__line { animation: none; opacity: 1; }
  .hero__video { transform: none; }
  .story { height: auto; }
  /* `relative`, not `static`: the video background is absolutely positioned
     and would otherwise escape to the section and land behind its backdrop. */
  .story__pin { position: relative; height: auto; padding-block: var(--section-y); }
  /* Chapters become a plain article; the stage has no cross-fade to show. */
  .story__grid { grid-template-columns: 48px minmax(0, 1fr); }
  .story__stage { display: none; }
  .story__copy { position: static; display: grid; gap: 56px; }
  .story__chapter { position: static; transform: none; opacity: 1; pointer-events: auto; }
  /* `relative`, not `static`: the media is absolutely positioned and would
     otherwise escape to the section and stack behind its siblings. */
  .xp__panel { position: relative; height: auto; padding-block: clamp(96px, 18vh, 200px); }
  .gallery__pin { height: auto; overflow-x: auto; }
  .gallery__track { transform: none !important; }
}

@media print {
  .loader, .nav, .menu, .grain, .cursor, .scroll-cue, .hero__media, .gallery__hint { display: none !important; }
  body { background: #fff; color: #000; }
}