/* ============================================================
   WHY NOT DRIVE: the reel layer, round two (22 October 2026)
   The look of reels 46 to 51 as a design system: Anton slams with
   a hard navy drop, cream pill chips, rotated stamps, sunbursts,
   the red spiral and roundel, and one fat amber button.
   Loaded after styles.css on the homepage and the rental pages.
   ============================================================ */

@font-face {
  font-family: "Anton";
  src: url("../assets/fonts/anton-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --r-orange: #ff8a1e;
  --r-orange-deep: #b85a07;
  --r-amber: #ffb547;
  --r-red: #df3f28;
  --r-red-deep: #a8261a;
  --r-navy: #0b1c33;
  --r-navy-2: #10264a;
  --r-navy-3: #061021;
  --r-cream: #f5e9d2;
  --r-cream-2: #ecd9b4;
  --r-ink: #0b1c33;
  --r-slam: "Anton", "Bricolage Grotesque", Impact, "Arial Narrow", sans-serif;
  --r-ease-pop: cubic-bezier(.16, 1.45, .3, 1);
  --r-ease-out: cubic-bezier(.2, .8, .2, 1);
  --r-gutter: clamp(16px, 4vw, 48px);
  --r-sh: var(--r-navy);
}

/* ---------- type ---------- */
.slam, .wall {
  font-family: var(--r-slam);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .9;
  letter-spacing: .004em;
  color: var(--r-cream);
  text-shadow:
    .012em .012em 0 var(--r-sh), .024em .024em 0 var(--r-sh), .036em .036em 0 var(--r-sh),
    .048em .05em 0 var(--r-sh), .06em .066em 0 var(--r-sh), 0 .2em .5em rgb(0 0 0 / .35);
  margin: 0;
  text-wrap: balance;
}
.slam .or, .wall .or { color: var(--r-orange); }
.wall--navy { color: var(--r-navy); --r-sh: #e2c48c; text-shadow: .012em .012em 0 var(--r-sh), .024em .024em 0 var(--r-sh), .036em .036em 0 var(--r-sh), .048em .05em 0 var(--r-sh); }
.wall--on-orange { color: var(--r-navy); --r-sh: var(--r-orange-deep); }
.wall .ln { display: block; }

.rchip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  background: var(--r-cream);
  color: var(--r-navy);
  font: 700 clamp(.82rem, .3vw + .76rem, .98rem)/1.2 var(--font-body);
  padding: .55em 1.05em;
  border-radius: 999px;
  box-shadow: 0 3px 0 rgb(0 0 0 / .32), 0 8px 18px rgb(0 0 0 / .18);
  margin: 0;
  max-width: 100%;
}
.rchip--navy { background: var(--r-navy); color: var(--r-cream); }
.rchip--lg { font-size: clamp(.95rem, .5vw + .85rem, 1.15rem); }
.chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 0; padding: 0; list-style: none; }

.stamp {
  --rot: -4deg;
  display: inline-block;
  font: 400 clamp(1.5rem, 3.2vw + .6rem, 2.6rem)/1 var(--r-slam);
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--r-navy);
  border: .1em solid currentColor;
  border-radius: .14em;
  padding: .12em .35em .1em;
  transform: rotate(var(--rot));
  background: rgb(245 233 210 / .92);
  box-shadow: 0 4px 0 rgb(0 0 0 / .18);
}
.stamp small { display: block; font: 700 .32em/1.3 var(--font-body); letter-spacing: .06em; text-align: center; }
.stamp--red { color: var(--r-red); }
.stamp--orange { color: var(--r-orange-deep); }
.stamp--ghost { background: transparent; color: var(--r-cream); box-shadow: none; }
.stamps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem 1.25rem; align-items: center; }
.stamps li:nth-child(2n) .stamp, .stamps li:nth-child(2n).stamp { --rot: 3deg; }
.stamps li:nth-child(3n) .stamp, .stamps li:nth-child(3n).stamp { --rot: -2deg; }

/* ---------- the button ---------- */
.btn-book {
  --lift: 6px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font: 800 clamp(1.15rem, 1.2vw + .9rem, 1.6rem)/1 var(--font-display);
  letter-spacing: -.01em;
  color: var(--r-navy);
  background: linear-gradient(180deg, #ffa043, var(--r-orange) 55%, #f47c0e);
  border: 0;
  border-radius: 999px;
  padding: 1em 1.6em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 var(--lift) 0 var(--r-orange-deep), 0 calc(var(--lift) + 10px) 28px rgb(0 0 0 / .35), inset 0 2px 0 rgb(255 255 255 / .35);
  transition: transform .14s var(--r-ease-out), box-shadow .14s var(--r-ease-out);
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
}
.btn-book:hover { transform: translateY(-2px) rotate(-1deg); }
.btn-book:active { transform: translateY(calc(var(--lift) - 1px)); box-shadow: 0 1px 0 var(--r-orange-deep), 0 4px 10px rgb(0 0 0 / .3), inset 0 2px 0 rgb(255 255 255 / .3); }
.btn-book:focus-visible { outline: 4px solid var(--r-cream); outline-offset: 4px; }
.btn-book .arrow { transition: transform .2s var(--r-ease-pop); }
.btn-book:hover .arrow { transform: translateX(5px); }
.btn-book--sm { font-size: 1.02rem; padding: .8em 1.3em; --lift: 4px; }
.btn-book--xl { font-size: clamp(1.4rem, 2.4vw + .8rem, 2.4rem); padding: .95em 1.8em; --lift: 8px; }
.btn-line {
  display: inline-flex; align-items: center; gap: .4em;
  font: 700 1rem/1 var(--font-body); color: var(--r-cream);
  text-decoration: none; padding: .9em 1.2em; border-radius: 999px;
  border: 2px solid rgb(245 233 210 / .6);
}
.btn-line:hover { background: rgb(245 233 210 / .12); }
.btn-line:focus-visible { outline: 3px solid var(--r-orange); outline-offset: 3px; }
.btn-line--navy { color: var(--r-navy); border-color: rgb(11 28 51 / .5); }
.btn-line--navy:hover { background: rgb(11 28 51 / .07); }

/* ---------- grounds ---------- */
.burst { position: relative; isolation: isolate; overflow: hidden; }
.burst::before {
  content: ""; position: absolute; inset: -40%; z-index: -2;
  background: repeating-conic-gradient(from 0deg at 50% 50%, var(--b1) 0 7.5deg, var(--b2) 7.5deg 15deg);
  animation: r-spin 90s linear infinite;
}
.burst::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 45%, transparent 0 25%, var(--bv) 95%);
}
.burst--orange { --b1: #ff9a2e; --b2: #f07a12; --bv: rgb(140 52 0 / .55); background: #f58516; }
.burst--red { --b1: #e4462e; --b2: #c8301d; --bv: rgb(80 10 5 / .65); background: #d33a24; }
.burst--navy { --b1: #10264a; --b2: #0b1c33; --bv: rgb(3 8 18 / .8); background: var(--r-navy); }
.spiral { position: relative; isolation: isolate; overflow: hidden; background: #c9311f; }
.spiral::before {
  content: ""; position: absolute; inset: -30%; z-index: -2;
  background: repeating-radial-gradient(circle at 50% 50%, #e2442c 0 34px, #b8291a 34px 68px);
  animation: r-breathe 6s ease-in-out infinite;
}
.spiral::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 50%, transparent 30%, rgb(60 6 2 / .55) 100%); }
.dots {
  background-color: var(--r-cream);
  background-image: radial-gradient(rgb(184 120 40 / .22) 1.6px, transparent 2px);
  background-size: 14px 14px;
}
@keyframes r-spin { to { transform: rotate(360deg); } }
@keyframes r-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* ---------- reels ---------- */
.reel {
  position: relative;
  margin: 0;
  aspect-ratio: 9 / 16;
  border-radius: clamp(14px, 1.6vw, 22px);
  overflow: hidden;
  background: var(--r-navy-3);
  box-shadow: 0 0 0 4px rgb(245 233 210 / .9), 0 0 0 10px var(--r-navy), 0 30px 70px rgb(0 0 0 / .45);
  transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) rotate(var(--rz, 0deg));
  transition: transform .5s var(--r-ease-out);
  will-change: transform;
}
.reel.is-tilting { transition: transform .08s linear; }
.reel video, .reel > img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* shown whole: the reels' words are burned in and sound is off by default */
  object-fit: contain; display: block; background: var(--r-navy-3);
}
.reel-tap {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: flex-end;
  padding: 14px; border: 0; background: transparent; cursor: pointer;
  color: var(--r-cream); -webkit-tap-highlight-color: transparent;
}
.reel-tap:focus-visible { outline: 4px solid var(--r-orange); outline-offset: -6px; border-radius: inherit; }
.reel-tap .reel-tap-pill {
  display: inline-flex; align-items: center; gap: .45em;
  background: rgb(6 16 33 / .72); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1.5px solid rgb(245 233 210 / .45);
  font: 700 .82rem/1 var(--font-body); padding: .6em .85em; border-radius: 999px;
}
.reel-tap svg { width: 18px; height: 18px; }
.reel[data-audible="true"] .reel-tap-pill { background: var(--r-orange); color: var(--r-navy); border-color: transparent; }
.reel-pp {
  position: absolute; z-index: 4; left: 12px; bottom: 12px; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgb(245 233 210 / .45); background: rgb(6 16 33 / .66); color: var(--r-cream);
  display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.reel-pp svg { width: 16px; height: 16px; }
.reel-pp .i-play { display: none; }
.reel-pp[aria-pressed="true"] .i-play { display: block; }
.reel-pp[aria-pressed="true"] .i-pause { display: none; }
.reel-pp:focus-visible { outline: 3px solid var(--r-orange); outline-offset: 2px; }
.reel .reel-play {
  position: absolute; z-index: 3; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px;
  border-radius: 50%; border: 0; background: var(--r-orange); color: var(--r-navy);
  box-shadow: 0 6px 0 var(--r-orange-deep), 0 16px 30px rgb(0 0 0 / .4);
  display: none; align-items: center; justify-content: center; cursor: pointer;
}
.reel .reel-play svg { width: 30px; height: 30px; margin-left: 4px; }
.reel.is-paused-manual .reel-play { display: flex; }
.reel-play:focus-visible { outline: 4px solid var(--r-cream); outline-offset: 4px; }

/* the sung line now shows in one caption bar while a reel sings */
.karaoke { display: none !important; }
.sung-caption {
  position: fixed; left: 50%; bottom: calc(var(--dock, 0px) + 14px); z-index: 80;
  width: max-content; max-width: min(92vw, 680px); margin: 0;
  transform: translate(-50%, 10px); opacity: 0; pointer-events: none;
  font: 400 clamp(1rem, 1vw + .8rem, 1.4rem)/1.15 var(--r-slam); text-transform: uppercase; text-align: center; letter-spacing: .01em;
  color: var(--r-cream); background: rgb(6 16 33 / .9); padding: .55em .95em; border-radius: 14px;
  box-shadow: 0 0 0 2px rgb(245 233 210 / .25), 0 12px 30px rgb(0 0 0 / .35);
  transition: opacity .3s var(--r-ease-out), transform .4s var(--r-ease-out);
}
.sung-caption.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- the sound control ---------- */
.sound-btn {
  --s: 1;
  display: inline-flex; align-items: center; gap: .6em;
  border: 0; cursor: pointer;
  font: 800 1rem/1 var(--font-display);
  color: var(--r-navy); background: var(--r-cream);
  padding: .55em 1.1em .55em .55em; border-radius: 999px;
  box-shadow: 0 4px 0 rgb(0 0 0 / .3), 0 10px 24px rgb(0 0 0 / .25);
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s var(--r-ease-out);
}
.sound-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgb(0 0 0 / .3); }
.sound-btn:focus-visible { outline: 4px solid var(--r-orange); outline-offset: 3px; }
.sound-btn .spk {
  width: 2.4em; height: 2.4em; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--r-navy); color: var(--r-orange);
  animation: spk-wobble 2.4s var(--r-ease-pop) 1.5s 3;
}
.sound-btn .spk svg { width: 58%; height: 58%; overflow: visible; }
.sound-btn .spk .wave { opacity: 0; transform-origin: 30% 50%; }
.sound-btn[aria-pressed="true"] { background: var(--r-orange); }
.sound-btn[aria-pressed="true"] .spk { animation: none; }
.sound-btn[aria-pressed="true"] .spk .wave { opacity: 1; animation: spk-wave 1s ease-in-out infinite; }
.sound-btn[aria-pressed="true"] .spk .wave--2 { animation-delay: .18s; }
.sound-btn[aria-pressed="true"] .spk .slash { opacity: 0; }
.sound-btn .eq { display: none; gap: 2px; align-items: flex-end; height: 14px; }
.sound-btn .eq i { width: 3px; background: currentColor; border-radius: 1px; animation: eq .8s ease-in-out infinite alternate; }
.sound-btn .eq i:nth-child(2) { animation-delay: .2s; } .sound-btn .eq i:nth-child(3) { animation-delay: .4s; } .sound-btn .eq i:nth-child(4) { animation-delay: .1s; }
.sound-btn[aria-pressed="true"] .eq { display: inline-flex; }
.sound-btn.is-armed { background: var(--r-amber); }
@keyframes spk-wobble { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-14deg) scale(1.12); } 84% { transform: rotate(10deg) scale(1.06); } 92% { transform: rotate(-5deg); } }
@keyframes spk-wave { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes eq { from { height: 3px; } to { height: 14px; } }
.sound-fab { position: fixed; left: 18px; bottom: 18px; z-index: 60; }
@media (max-width: 899px) { .sound-fab { display: none; } }
.sticky-cta .dock-sound { flex: 0 0 auto; padding-inline: .8rem; display: inline-flex; align-items: center; justify-content: center; }
.sticky-cta .dock-sound svg { width: 24px; height: 24px; }
.sticky-cta .dock-sound .wave { opacity: 0; }
.sticky-cta .dock-sound[aria-pressed="true"] { background: var(--r-orange); color: var(--r-navy); }
.sticky-cta .dock-sound[aria-pressed="true"] .wave { opacity: 1; }
.sticky-cta .dock-sound[aria-pressed="true"] .slash { opacity: 0; }



/* the ABN era reassurance line does not belong on the rental pages */
.sticky-cta::before { content: none; display: none; }
.has-hero-sound .sound-fab { opacity: 0; pointer-events: none; transform: translateY(20px); }
.sound-fab { transition: opacity .25s, transform .3s var(--r-ease-pop); }

/* ---------- motion helpers: settle in, never slam ---------- */
.js-motion [data-slam] > * { opacity: 0; transform: translateY(.22em); }
.js-motion [data-slam].is-in > * { animation: r-rise .7s var(--r-ease-out) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-stamp] { opacity: 0; }
.js-motion [data-stamp].is-in { animation: r-stamp .6s var(--r-ease-out) forwards; animation-delay: var(--d, 0ms); }
@keyframes r-rise { from { opacity: 0; transform: translateY(.22em); } to { opacity: 1; transform: none; } }
@keyframes r-stamp { from { opacity: 0; transform: rotate(calc(var(--rot) - 4deg)) scale(1.08); } to { opacity: 1; transform: rotate(var(--rot)) scale(1); } }
.js-motion .rise { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--r-ease-out), transform .7s var(--r-ease-out); transition-delay: var(--d, 0ms); }
.js-motion .rise.is-in { opacity: 1; transform: none; }

/* ============================================================
   HOMEPAGE: full screen chapters, one story
   Arrive (navy) > the car comes to you (cream) > bond released the
   same day (red) > pick how long (orange) > pick your way (deep navy)
   > take one for a spin (night) > why not drive? (spiral) > quick
   answers (cream). Each chapter is one screen and snaps into place;
   its content crossfades in as it arrives.
   ============================================================ */
.reel-home { --hdr: var(--header-h, 72px); --dock: 0px; }
@media (max-width: 860px) { .reel-home { --hdr: var(--header-h, 64px); --dock: calc(84px + env(safe-area-inset-bottom)); } }
html.reel-home { background: var(--r-navy-3); }
html.reel-home.js-motion { scroll-snap-type: y mandatory; }
.reel-home body { background: var(--r-navy-3); }
.reel-home .site-header:not(.is-scrolled) { background: transparent; box-shadow: none; }
.reel-home .site-header:not(.is-scrolled) .nav-links > li > a:not(.btn) { color: var(--r-cream); }
.reel-home .site-header:not(.is-scrolled) .nav-toggle-bars span { background: var(--r-cream); }
.reel-home .site-footer { scroll-snap-align: end; }

.ch { position: relative; scroll-snap-align: start; scroll-snap-stop: always; scroll-margin-top: 0; }
.ch:not(.ch-drive):not(.ch-hero) {
  min-height: 100vh; min-height: 100svh; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--hdr) + 16px) 0 calc(var(--dock) + 28px);
}
.ch-inner { width: min(100% - 2 * var(--r-gutter), 1240px); margin-inline: auto; }

/* the crossfade: content eases in as its chapter arrives and out as it leaves */
.js-motion .ch .ch-body { transition: opacity .6s var(--r-ease-out), transform .7s var(--r-ease-out); }
.js-motion .ch:not(.is-active) .ch-body { opacity: 0; transform: translateY(20px); }

/* one short line per chapter */
.ch-line { margin: 0; max-width: 34ch; font: 600 clamp(1.05rem, .5vw + .95rem, 1.35rem)/1.35 var(--font-body); color: rgb(245 233 210 / .92); text-wrap: pretty; }
.ch-line--navy { color: var(--r-navy); }

/* a reel shown whole inside whatever space its stage has (9:16, contain) */
.reel-stage { align-self: stretch; justify-self: stretch; width: 100%; }
.reel-stage { container-type: size; display: grid; place-items: center; min-width: 0; min-height: 0; }
.reel-stage > .reel { width: min(calc(100cqw - 24px), calc((100cqh - 24px) * .5625)); height: auto; aspect-ratio: 9 / 16; }

/* 1. arrive */
.ch-hero { color: var(--r-cream); background: var(--r-navy-3); }
.ch-hero .hero-amb { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.ch-hero .hero-amb video { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); filter: saturate(1.15) brightness(.55); }
.ch-hero .hero-amb::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 45%, transparent, rgb(6 16 33 / .8) 75%), linear-gradient(180deg, rgb(6 16 33 / .35), transparent 30%, rgb(6 16 33 / .5)); }
.hero-grid {
  position: relative; z-index: 1; width: min(100% - 2 * var(--r-gutter), 1280px); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  min-height: 100vh; min-height: 100svh; box-sizing: border-box; padding-block: calc(var(--hdr) + 8px) 24px;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(12px, 1.6vw, 20px); min-width: 0; }
/* the hero headline is the logo itself: the stretchy stacked mark */
.hero-logo { margin: 0; line-height: 1; max-width: 100%; }
.wn-mark--herologo { font-size: clamp(4.4rem, 10.4vw, 9.6rem); transform: rotate(-1.4deg); filter: drop-shadow(.018em .035em 0 rgb(0 0 0 / .35)); }
.hero-stage { height: calc(100svh - var(--hdr) - 40px); }
.hero-reel { --rz: 2deg; }
.hero-sound { align-self: flex-start; }
.hero-scroll { position: absolute; z-index: 2; left: 50%; bottom: 10px; transform: translateX(-50%); color: rgb(245 233 210 / .75); font: 700 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hero-scroll::after { content: ""; width: 2px; height: 22px; background: linear-gradient(var(--r-orange), transparent); animation: r-drip 2.2s ease-in-out infinite; }
@keyframes r-drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* the slim picker: three chips, two dates, one button */
.ch-hero .book-widget { display: grid; gap: 12px; width: 100%; max-width: 540px; margin: 0; }
.ch-hero .book-widget fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ch-hero .book-widget legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bs-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bs-chip { position: relative; display: block; cursor: pointer; }
.bs-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bs-chip span {
  display: flex; align-items: center; justify-content: center; height: 48px;
  font: 400 1.35rem/1 var(--r-slam); text-transform: uppercase; letter-spacing: .03em;
  color: var(--r-cream); border-radius: 14px; border: 2px solid rgb(245 233 210 / .4);
  background: rgb(6 16 33 / .45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .25s var(--r-ease-out), background .2s, color .2s;
}
.bs-chip input:checked + span { background: var(--r-cream); color: var(--r-navy); border-color: var(--r-cream); transform: rotate(-1.5deg); box-shadow: 0 4px 0 rgb(0 0 0 / .35); }
.bs-chip input:focus-visible + span { outline: 3px solid var(--r-orange); outline-offset: 3px; }
.bs-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-dates label { display: flex; flex-direction: column; gap: 4px; font: 700 .72rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: rgb(245 233 210 / .85); }
.bs-dates input {
  height: 46px; width: 100%; min-width: 0; font: 600 1rem/1 var(--font-body); color: var(--r-cream); color-scheme: dark;
  background: rgb(6 16 33 / .45); border: 2px solid rgb(245 233 210 / .4); border-radius: 12px; padding: 0 10px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.bs-dates input:focus-visible { outline: 3px solid var(--r-orange); outline-offset: 2px; }
.ch-hero .book-widget .btn-book { width: 100%; }
.bs-note { margin: 0; font: 600 .86rem/1.4 var(--font-body); color: rgb(245 233 210 / .8); }
.ch-hero .book-widget .bw-error { margin: 0; font: 700 .9rem/1.3 var(--font-body); color: var(--r-navy); background: var(--r-amber); padding: .5em .8em; border-radius: 10px; }

/* 3. the car comes to you */
.ch-southport { color: var(--r-navy); text-align: center; }
.ch-southport .ch-body { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.4vw, 30px); }
.sp-title { font-size: clamp(2.9rem, 7.4vw, 7.2rem); }
.ch-southport .ch-line { max-width: 40ch; }
.ch-southport .stamps { justify-content: center; }
.ch-southport .stamp { font-size: clamp(1.2rem, 2vw + .5rem, 2rem); }
.sp-where { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 0; }
.sp-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; margin: 0; }

/* 3. bond released the same day */
.ch-bond { color: var(--r-cream); text-align: center; }
.bond-body { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.bond-title { font-size: clamp(3rem, 7vw, 7rem); }
.bond-title .or { color: var(--r-amber); }
.ch-bond .ch-line { max-width: 44ch; }
.bond-stamp { font-size: clamp(2rem, 3.6vw, 3.4rem); margin: 0; color: var(--r-cream); }
.bond-fine { margin: 0; max-width: 52ch; font: 500 .82rem/1.45 var(--font-body); color: rgb(245 233 210 / .8); }

/* 4. pick how long */
.ch-long { color: var(--r-navy); }
.long-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.long-copy { display: flex; flex-direction: column; gap: 20px; }
.long-title { font-size: clamp(3.2rem, 7vw, 7.4rem); }
.long-stage { height: min(calc(100svh - var(--hdr) - 72px), 760px); }
.long-reel { --rz: 2deg; }

/* 5. pick your way */
.ch-ways { background: radial-gradient(ellipse at 50% 0%, var(--r-navy-2), var(--r-navy-3) 70%); color: var(--r-cream); }
.ways-title { font-size: clamp(2.8rem, 5.4vw, 5.4rem); text-align: center; margin-bottom: clamp(18px, 2.6vw, 36px); }
.ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 40px); }
.way { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; min-width: 0; }
.way-reel { height: min(44svh, 430px); width: auto; aspect-ratio: 9 / 16; max-width: 100%; }
.way-copy { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.way-word { font: 400 clamp(1.9rem, 2.6vw, 2.8rem)/1 var(--r-slam); text-transform: uppercase; margin: 0; color: var(--r-cream); text-shadow: .03em .04em 0 var(--r-navy), .06em .08em 0 var(--r-navy); }
.way-line { margin: 0; max-width: 28ch; font: 600 1rem/1.4 var(--font-body); color: rgb(245 233 210 / .88); }
.btn-book--cream { background: var(--r-cream); box-shadow: 0 var(--lift) 0 #b9a27a, 0 calc(var(--lift) + 10px) 28px rgb(0 0 0 / .35), inset 0 2px 0 rgb(255 255 255 / .5); }
.btn-book--cream:active { box-shadow: 0 1px 0 #b9a27a, 0 4px 10px rgb(0 0 0 / .3); }

/* 6. take one for a spin: the M1 game keeps its own night look */
.ch-drive { background: var(--r-navy-3); min-height: 100vh; min-height: 100svh; }
.ch-drive .drive-head { position: absolute; z-index: 5; left: 0; right: 0; top: calc(var(--hdr) + 8px); display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; pointer-events: none; padding-inline: var(--r-gutter); }
.ch-drive .drive-title { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.ch-drive .drive-head .rchip { font-size: .9rem; }

/* 7. why not drive? */
.ch-final { text-align: center; color: var(--r-cream); align-items: center; }
.final-stack { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 3vh, 34px); width: min(100% - 2 * var(--r-gutter), 1100px); }
.roundel {
  position: relative; width: clamp(180px, 30vh, 340px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #1a3a66, var(--r-navy) 70%);
  box-shadow: 0 0 0 8px #e7c27d, 0 0 0 14px var(--r-navy), 0 0 0 18px #e7c27d, 0 30px 70px rgb(0 0 0 / .5);
  animation: roundel-bob 6s ease-in-out infinite;
}
.roundel .wn-mark { font-size: clamp(2.6rem, 6vh, 5rem); }
.final-title { font-size: clamp(3.4rem, 9vw, 8.4rem); }
@keyframes roundel-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-6px) rotate(1deg); } }

/* 8. quick answers */
.ch-faq { background: var(--r-cream); color: var(--r-navy); }
.ch-faq .faq-title { font-size: clamp(2.6rem, 5.4vw, 4.6rem); margin-bottom: 24px; }
.ch-faq .faq-list { max-width: 820px; margin-inline: 0; }
.ch-faq .faq-list details { border-radius: 16px; box-shadow: 0 0 0 2px var(--r-navy), 0 5px 0 var(--r-navy); background: #fff; }
.ch-faq .faq-list summary { font-weight: 800; }

/* ---------- phones and small tablets ---------- */
@media (max-width: 899px) {
  /* arrive: the reel gets the whole first screen, fitted, never cropped,
     on a soft blurred copy of itself; the picker is the next screen */
  .ch-hero .hero-amb, .hero-scroll { display: none; }
  .hero-grid { display: flex; flex-direction: column; width: 100%; min-height: 0; padding: 0; gap: 0; }
  .hero-stage {
    order: -1; position: relative; isolation: isolate; overflow: hidden;
    height: 100vh; height: 100svh; box-sizing: border-box;
    padding: calc(var(--hdr) + 2px) 6px calc(var(--dock) + 4px);
    scroll-snap-align: start; scroll-snap-stop: always;
  }
  .hero-stage::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--r-navy) url("/assets/video/reel-rent.jpg") center / cover no-repeat; filter: blur(26px) brightness(.45) saturate(1.2); }
  .hero-stage > .reel { width: min(calc(100cqw - 8px), calc((100cqh - 8px) * .5625)); }
  .hero-reel { --rz: 0deg; box-shadow: 0 0 0 3px rgb(245 233 210 / .85), 0 20px 50px rgb(0 0 0 / .5); }
  .hero-copy {
    min-height: 100vh; min-height: 100svh; box-sizing: border-box; justify-content: center;
    padding: calc(var(--hdr) + 12px) var(--r-gutter) calc(var(--dock) + 20px);
    scroll-snap-align: start; scroll-snap-stop: always;
    background: radial-gradient(ellipse at 50% 0%, var(--r-navy-2), var(--r-navy-3) 70%);
  }
  .wn-mark--herologo { font-size: min(24vw, 6.4rem); }
  .hero-sound.sound-btn { font-size: .9rem; }
  .bs-note { font-size: .82rem; }

  /* bond */
  .bond-title { font-size: clamp(2.5rem, 12vw, 3.8rem); }
  .ch-bond .ch-line { font-size: 1.02rem; }

  /* the car comes to you */
  .sp-title { font-size: clamp(2.5rem, 12vw, 4rem); }
  .ch-southport .ch-line { font-size: 1.02rem; }
  .ch-southport .stamps { gap: .7rem .9rem; }

  /* pick how long: the line on top, the reel fills the rest */
  .long-grid { display: flex; flex-direction: column; gap: 14px; height: calc(100svh - var(--hdr) - var(--dock) - 44px); }
  .long-copy { gap: 10px; }
  .long-title { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .long-title .ln { display: inline; }
  .long-title .ln + .ln::before { content: " "; }
  .long-stage { flex: 1 1 0; height: auto; min-height: 0; }

  /* pick your way: three rows, a small reel beside each path */
  .ways-title { font-size: clamp(2.4rem, 11vw, 3.4rem); margin-bottom: 16px; }
  .ways { grid-template-columns: 1fr; gap: 14px; }
  .way { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; }
  .way-reel { width: 92px; height: auto; box-shadow: 0 0 0 3px rgb(245 233 210 / .85), 0 10px 24px rgb(0 0 0 / .4); border-radius: 12px; }
  .way-reel .reel-tap { padding: 6px; align-items: flex-end; justify-content: center; }
  .way-reel .reel-tap-pill { padding: .45em .55em; font-size: .72rem; }
  .way-reel .reel-pp { display: none; }
  .way-copy { align-items: flex-start; gap: 6px; }
  .way-word { font-size: 1.8rem; }
  .way-line { font-size: .92rem; }
  .way .btn-book--sm { font-size: .92rem; padding: .7em 1.1em; }

  .ch-drive .drive-head { top: calc(var(--hdr) + 4px); }
  .ch-drive .drive-head .rchip { font-size: .8rem; }
  .final-title { font-size: clamp(3rem, 15vw, 4.8rem); }
}
@media (max-width: 899px) and (max-height: 700px) {
  .way-reel { width: 74px; }
  .wn-mark--herologo { font-size: min(21vw, 5.4rem); }
}

/* ============================================================
   THE GAME PAGE (/games): Bin the Stress, full screen
   ============================================================ */
.play-stage {
  /* the header sits in normal flow on this page, so the stage is one screen less the header */
  min-height: calc(100vh - var(--header-h, 72px)); min-height: calc(100svh - var(--header-h, 72px)); box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(8px, 1.4vh, 16px);
  padding: 12px var(--r-gutter) 16px; color: var(--r-navy);
}
.play-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.play-title { font-size: clamp(2.4rem, 5vw, 4.6rem); }
.play-title .cr { color: var(--r-cream); }
.play-line { margin: 0; max-width: 46ch; font: 600 clamp(.95rem, .4vw + .85rem, 1.15rem)/1.35 var(--font-body); color: var(--r-navy); text-wrap: balance; }
/* the panel is sized from the space left: HUD on top, then the canvas at its own
   aspect (16:11, or 5:6 on narrow screens), so the whole game fits one screen */
.play-game { --hud: 124px; --ar: 1.4545; container-type: size; width: 100%; height: calc(100svh - var(--header-h, 72px) - 150px); min-height: 340px; display: grid; place-items: center; }
.play-game .game-panel { width: min(100cqw, calc((100cqh - var(--hud)) * var(--ar))); max-width: 980px; margin: 0; background: var(--r-cream); border-radius: 22px; box-shadow: 0 0 0 4px var(--r-cream), 0 0 0 10px var(--r-navy), 0 26px 60px rgb(0 0 0 / .35); overflow: hidden; }
@media (max-width: 560px) { .play-game { --hud: 104px; --ar: .8333; } }
.play-more-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.play-more-copy h2 { color: var(--r-cream); }
@media (max-width: 860px) {
  .play-game { height: calc(100svh - var(--header-h, 64px) - 140px); }
  .play-more-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SUBPAGES: the reel hero and the restyle
   ============================================================ */
.reel-page .page-hero.reel-hero {
  background: var(--r-navy); color: var(--r-cream);
  padding-block: calc(var(--header-h, 72px) + 28px) clamp(48px, 6vw, 88px);
}
.reel-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.reel-hero-copy { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; min-width: 0; }
.reel-page .reel-hero h1 { font-family: var(--r-slam); font-weight: 400; text-transform: uppercase; line-height: .92; font-size: clamp(2.9rem, 6.6vw, 6.4rem); color: var(--r-cream); letter-spacing: .004em;
  text-shadow: .012em .012em 0 var(--r-navy-3), .024em .024em 0 var(--r-navy-3), .036em .036em 0 var(--r-navy-3), .048em .05em 0 var(--r-navy-3), .06em .066em 0 var(--r-navy-3); margin: 0; text-wrap: balance; }
.reel-page .reel-hero h1 .hl { color: var(--r-orange); background: none; display: block; }
.reel-page .reel-hero .lede { color: rgb(245 233 210 / .9); font-size: clamp(1.05rem, .6vw + .9rem, 1.3rem); max-width: 38ch; margin: 0; }
.reel-page .reel-hero .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 0; }
.reel-hero .reel { width: min(100%, 330px); justify-self: center; --rz: 3deg; }
.reel-hero .karaoke { font-size: clamp(1rem, 1vw + .7rem, 1.35rem); max-width: 28ch; min-height: 2.4em; }
.reel-hero--plain .reel-hero-grid { grid-template-columns: 1fr; }

.reel-page main .section-head h2, .reel-page main .section > .wrap > h2, .reel-page main h2#enquire-title {
  font-family: var(--r-slam); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; line-height: .95;
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
}
.reel-page main .section--dark h2, .reel-page main .section--dark .section-head h2 { color: var(--r-cream); text-shadow: .03em .04em 0 var(--r-navy-3), .05em .07em 0 var(--r-navy-3); }
.reel-page main .eyebrow { display: inline-block; background: var(--r-navy); color: var(--r-cream); padding: .45em .9em; border-radius: 999px; letter-spacing: .08em; }
.reel-page main .section--dark .eyebrow { background: var(--r-cream); color: var(--r-navy); }
.reel-page main .section--cream { background-color: var(--r-cream); background-image: radial-gradient(rgb(184 120 40 / .16) 1.4px, transparent 1.8px); background-size: 14px 14px; }
.reel-page main .section--dark { background: var(--r-navy); }
/* steps become stamps */
.reel-page .steps-grid { counter-reset: none; }
.reel-page .steps-grid-num { font-family: var(--r-slam); background: var(--r-orange); color: var(--r-navy); border-radius: 12px; transform: rotate(-4deg); box-shadow: 0 4px 0 var(--r-orange-deep); }
.reel-page .steps-grid-item:nth-child(even) .steps-grid-num { transform: rotate(3deg); background: var(--r-cream); box-shadow: 0 4px 0 rgb(0 0 0 / .2); }
/* the old cards lose their boxes */
.reel-page main .product-card, .reel-page main .class-card, .reel-page main .info-card, .reel-page main .bento-card {
  border-radius: 22px; box-shadow: 0 0 0 3px var(--r-navy), 0 8px 0 var(--r-navy);
}
.reel-page .btn--primary { border-radius: 999px; font-weight: 800; box-shadow: 0 5px 0 var(--r-orange-deep); }
.reel-page .btn--primary:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--r-orange-deep); }

.reel-band { padding-block: clamp(56px, 7vw, 96px); color: var(--r-cream); text-align: center; }
.reel-band .wall { font-size: clamp(2.8rem, 8vw, 7rem); }
.reel-band .band-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: center; margin-top: 28px; }

/* subpages on phones */
@media (max-width: 899px) {
  .reel-hero-grid { grid-template-columns: 1fr; }
  .reel-hero .reel { width: min(66vw, 280px); justify-self: center; --rz: -2deg; }
  .reel-page .page-hero.reel-hero { padding-top: calc(var(--header-h, 64px) + 18px); }
}

/* ---------- reduced motion: everything still, posters, no tilt ---------- */
@media (prefers-reduced-motion: reduce) {
  .burst::before, .spiral::before, .roundel, .sound-btn .spk, .hero-scroll::after { animation: none !important; }
  .js-motion [data-slam] > *, .js-motion [data-stamp], .js-motion .rise { opacity: 1 !important; transform: none !important; animation: none !important; }
  .js-motion [data-stamp] { transform: rotate(var(--rot)) !important; }
  .reel { transform: rotate(var(--rz, 0deg)); transition: none; }
  .ch .ch-body { opacity: 1 !important; transform: none !important; transition: none !important; }
  .sung-caption { transition: none; }
}


/* fact boxes become fine print stamps that open on tap */
.reel-page .fact-grid { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: flex-start; }
.reel-page details.fact { background: none; border: 0; padding: 0; border-radius: 0; flex: 0 1 auto; max-width: 100%; }
.reel-page details.fact > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5em;
  font: 400 clamp(1.15rem, .8vw + .95rem, 1.45rem)/1 var(--r-slam); text-transform: uppercase; letter-spacing: .03em;
  color: var(--r-navy); background: var(--r-cream); border: 3px solid var(--r-navy); border-radius: 10px;
  padding: .5em .7em .45em; box-shadow: 0 4px 0 var(--r-navy); transform: rotate(-1.5deg);
  transition: transform .2s var(--r-ease-pop), background .15s, color .15s;
}
.reel-page details.fact:nth-child(even) > summary { transform: rotate(1.5deg); }
.reel-page details.fact > summary::-webkit-details-marker { display: none; }
.reel-page details.fact > summary::after { content: "+"; font-family: var(--font-body); font-weight: 800; color: var(--r-orange-deep); }
.reel-page details.fact > summary:hover { transform: rotate(0) scale(1.04); }
.reel-page details.fact > summary:focus-visible { outline: 3px solid var(--r-orange); outline-offset: 3px; }
.reel-page details.fact[open] { flex-basis: 100%; }
.reel-page details.fact[open] > summary { background: var(--r-navy); color: var(--r-cream); transform: none; }
.reel-page details.fact[open] > summary::after { content: "\2212"; color: var(--r-orange); }
.reel-page details.fact > p, .reel-page details.fact > ul { margin: .7rem 0 .3rem; background: #fff; border-radius: 14px; padding: 1rem 1.15rem; box-shadow: 0 0 0 2px var(--r-navy); max-width: 70ch; color: var(--r-ink); }
.reel-page .section--dark details.fact > summary { box-shadow: 0 4px 0 #000; }
.reel-page .class-card { border: 0; }
.reel-page .page-hero .hero-ctas .btn-line { color: var(--r-cream); }
.reel-page .reel-hero--plain { text-align: left; }
.reel-page .reel-hero--plain h1 { font-size: clamp(3rem, 8vw, 7.4rem); }
/* an old homepage story rule hides every .hero-ctas outside an active beat;
   page heroes are not beats */
html.js .page-hero .hero-ctas, .page-hero .hero-ctas { opacity: 1; transform: none; }

/* ============================================================
   ROUND THREE SOUND CONTROLS: one clear, labelled control everywhere
   ============================================================ */
/* desktop: the floating control is always there */
.sound-fab { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
.sound-btn .sound-label { min-width: 5.2em; text-align: left; }
.sound-btn[aria-pressed="false"] { background: var(--r-cream); color: var(--r-navy); }
.sound-btn[aria-pressed="false"] .spk { background: var(--r-navy); color: rgb(245 233 210 / .7); }
/* phones: the bottom bar's sound button carries its state in words */
.sticky-cta .dock-sound { gap: .4rem; padding-inline: .75rem .9rem; font: 800 .86rem/1 var(--font-body); white-space: nowrap; }
.sticky-cta .dock-sound svg { width: 20px; height: 20px; flex: 0 0 auto; }
.sticky-cta .dock-sound .sound-label { display: inline; }
@media (max-width: 360px) { .sticky-cta .dock-sound .sound-label { font-size: .76rem; } }
/* each reel's own song button: a cream pill you can't miss */
.reel-tap .reel-tap-pill {
  background: var(--r-cream); color: var(--r-navy); border: 0;
  font: 800 .9rem/1 var(--font-body); padding: .62em 1em .62em .8em;
  box-shadow: 0 3px 0 rgb(0 0 0 / .35), 0 8px 18px rgb(0 0 0 / .25);
}
.reel-tap .reel-tap-pill svg { color: var(--r-orange-deep); }
.reel[data-audible="true"] .reel-tap-pill { background: var(--r-orange); color: var(--r-navy); }
.reel[data-audible="true"] .reel-tap-pill svg { color: var(--r-navy); }
.reel-tap:hover .reel-tap-pill { transform: translateY(-1px); }
@media (max-width: 899px) {
  .way-reel .reel-tap-pill { padding: .5em; }
  .way-reel .reel-tap-pill span { display: none; }
  .way-reel .reel-tap-pill svg { width: 18px; height: 18px; }
}
/* the game page is all game: keep the header and the bottom bar (and its sound control) in place */
body.play-page.game-in-view .site-header { transform: none; }
body.play-page.game-in-view .sticky-cta { opacity: 1 !important; pointer-events: auto !important; transform: none !important; }
@media (max-width: 860px) {
  body.play-page .play-stage { justify-content: flex-start; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  body.play-page .play-game { height: calc(100svh - var(--header-h, 64px) - 120px - 96px - env(safe-area-inset-bottom)); }
}
@media (max-width: 860px) and (max-height: 720px) {
  body.play-page .play-line { display: none; }
  body.play-page .play-game { height: calc(100svh - var(--header-h, 64px) - 70px - 96px - env(safe-area-inset-bottom)); }
}

/* ============================================================
   ROUND THREE PHONES: reel chapters edge to edge again
   The reel fills the screen behind the header and the bottom bar.
   A plain centred cover would trim about 9% from each side at 9:19.5
   and clip the reels' chips, so each reel is scaled to trim at most 5%
   a side (checked at 360, 390 and 430 px); any sliver left top and
   bottom sits under the header and bar on a blurred copy of the reel.
   Desktop keeps the proportioned frame.
   ============================================================ */
@media (max-width: 899px) {
  .hero-stage, .long-stage {
    position: relative; isolation: isolate; overflow: hidden; container-type: normal;
    height: 100vh; height: 100svh; width: 100%; padding: 0; display: block;
  }
  .hero-stage > .reel, .long-stage > .reel {
    position: absolute; left: 50%; top: 50%; z-index: 0;
    width: max(100vw, min(111.1vw, 56.25svh)); height: auto; aspect-ratio: 9 / 16;
    transform: translate(-50%, -50%); border-radius: 0; box-shadow: none; --rz: 0deg;
  }
  .hero-stage > .reel.is-tilting, .long-stage > .reel.is-tilting { transform: translate(-50%, -50%); }
  .long-stage::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: var(--r-navy) url("/assets/video/reel-three.jpg") center / cover no-repeat; filter: blur(26px) brightness(.45) saturate(1.2); }
  /* the reel controls sit clear of the bottom bar */
  /* the reel is a little wider than the screen: keep its controls inside the visible part */
  .hero-stage .reel-tap, .long-stage .reel-tap { padding: 0 calc((100% - 100vw) / 2 + 14px) calc(var(--dock) + 10px); }
  .hero-stage .reel-pp, .long-stage .reel-pp { bottom: calc(var(--dock) + 10px); left: calc((100% - 100vw) / 2 + 14px); }
  .hero-stage .reel-play, .long-stage .reel-play { margin-top: -60px; }
  /* how long: on phones the reel carries this beat on its own */
  .ch-long { padding: 0 !important; }
  .ch-long .long-grid { display: block; height: auto; width: 100%; }
  .ch-long .long-copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* a soft gradient keeps the header readable over the video */
  .reel-home .site-header:not(.is-scrolled) { background: linear-gradient(180deg, rgb(6 16 33 / .6), rgb(6 16 33 / 0)); }
}