/* =========================================================
   THE DRIVEN GYM — styles
   Palette: brand red, off-white, black, dark grays
   ========================================================= */

/* Self-hosted fonts (latin subset, SIL Open Font License) */
@font-face { font-family: "Anton"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/anton-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/barlow-600.woff2") format("woff2"); }

:root {
  /* brand */
  --red: #b41e2b;            /* logo red: buttons, large type, accents */
  --red-hover: #961622;
  --red-bright: #e5484d;     /* small red text on dark (passes 4.5:1) */
  --red-display: #d42531;    /* large red headlines on dark (passes 3:1) */
  --white: #f4f2ee;          /* warm off-white from the current site */
  --paper: #ffffff;
  --black: #0b0b0b;
  --ink: #141414;
  --gray-900: #1a1a1a;
  --gray-800: #232323;
  --gray-700: #2e2e2e;
  --gray-500: #6b6b6b;
  --gray-400: #a3a3a3;
  --gray-300: #c9c6c0;

  /* type */
  --font-display: "Anton", "Impact", "Arial Narrow Bold", sans-serif;
  --font-cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing (8pt) */
  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-5: 48px; --s-6: 64px; --s-7: 96px; --s-8: 128px;
  --gutter: 16px;
  --container: 1240px;
  --radius: 4px;
  --radius-lg: 14px;

  /* motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms;
  --t-med: 320ms;
  --t-slow: 700ms;

  /* layers */
  --z-header: 40;
  --z-menu: 50;
  --z-sticky: 30;
  --z-loader: 100;

  --header-h: 76px;
}

@media (min-width: 768px) { :root { --gutter: 32px; --header-h: 88px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; } }

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
[hidden] { display: none !important; }

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

:focus-visible { outline: 3px solid var(--red-bright); outline-offset: 3px; }
.section--light :focus-visible, .memberships :focus-visible { outline-color: var(--ink); }

.skip-link {
  position: absolute; left: var(--s-2); top: -100px; z-index: 200;
  background: var(--white); color: var(--black); padding: 12px 18px;
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  text-decoration: none; border-radius: var(--radius);
}
.skip-link:focus { top: var(--s-2); }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }

.text-red { color: var(--red-display); }
.section--light .text-red { color: var(--red); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--font-cond);
  font-weight: 700;
  font-size: .875rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--red-bright);
  display: inline-flex; align-items: center; gap: 12px;
  margin-bottom: var(--s-3);
}
.eyebrow::before { content: ""; width: 28px; height: 3px; background: currentColor; }
/* editorial index: each section's eyebrow is numbered 01, 02… with the dash after the number */
main { counter-reset: sec; }
main .section .eyebrow { counter-increment: sec; }
main .section .eyebrow::before {
  content: counter(sec, decimal-leading-zero); width: auto; height: auto; padding-right: 40px;
  background: linear-gradient(currentColor, currentColor) no-repeat right center / 28px 2px;
  font-variant-numeric: tabular-nums;
}
.eyebrow--light { color: var(--white); }
.eyebrow--light::before { background: var(--red); }
.eyebrow--red { color: var(--red); }

.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .005em;
  text-wrap: balance;
}

.section { padding-block: clamp(80px, 12vw, 160px); position: relative; }
.section--light { background: var(--white); color: var(--ink); }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 6vw, 72px); }
.section-head__lead { margin-top: var(--s-3); font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--gray-400); max-width: 60ch; }
.section--light .section-head__lead { color: #4a4a4a; }
.section-head--split { max-width: none; display: grid; gap: var(--s-3); align-items: end; }
.section-head--center { text-align: center; margin-inline: auto; }
.section-head--center .section-head__lead { margin-inline: auto; }
@media (min-width: 960px) { .section-head--split { grid-template-columns: 1.3fr 1fr; } .section-head--split .section-head__lead { margin-top: 0; } }

/* ---------- icons ---------- */
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon--fill { fill: currentColor; stroke: none; }
.icon--dot { fill: currentColor; }
/* map pin on the hero "Find the gym" button: brand red with a white center, hops on hover */
.icon--gmaps { width: 20px; height: 20px; stroke: none; filter: drop-shadow(0 0 6px rgba(180, 30, 43, .45)); }
.icon--gmaps__pin { fill: var(--red-bright); transition: fill var(--t-med) ease; }
.icon--gmaps__dot { fill: var(--white); transition: fill var(--t-med) ease; }
.btn:hover .icon--gmaps__pin { fill: var(--red); }
.btn.btn:hover .icon--gmaps, .btn.btn:focus-visible .icon--gmaps { transform: translateY(-3px); } /* doubled class beats the later .btn:hover .icon slide */
/* membership card on the hero "Choose your membership" button: lifts and tilts like it's being held up */
.icon--card { width: 21px; height: 21px; transform-origin: 50% 70%; }
.btn .icon--card { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); } /* springy */
.hero__ctas .btn.btn:hover .icon--card, .hero__ctas .btn.btn:focus-visible .icon--card, .btn.btn:hover .icon--card { transform: translateY(-2px) rotate(-12deg) scale(1.08); }

/* ---------- buttons ---------- */
.btn {
  --h: 54px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--h); padding: 0 28px;
  font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-fast) ease;
  position: relative;
  will-change: transform;
}
.btn .icon { transition: transform var(--t-med) var(--ease-out); }
.btn:hover .icon { transform: translate(2px, 2px); }
.btn:active { transform: scale(.97); }
.btn--sm { --h: 44px; padding: 0 20px; font-size: .95rem; }
.btn--lg { --h: 58px; padding: 0 40px; }
.btn--block { width: 100%; }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-hover); }
.btn--red:focus-visible { outline-color: var(--white); }
.memberships .btn--red:focus-visible { outline-color: var(--ink); }
.btn--ghost { border-color: rgba(244, 242, 238, .35); color: var(--white); background: rgba(11, 11, 11, .35); backdrop-filter: blur(6px); }
.btn--ghost:hover { border-color: var(--white); background: var(--white); color: var(--black); }
.btn--outline-light { border-color: rgba(255, 255, 255, .75); color: #fff; }
.btn--outline-light:hover { background: #fff; color: var(--red); border-color: #fff; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 1rem;
  color: var(--red-bright); text-decoration: none;
}
.link-arrow span { transition: transform var(--t-med) var(--ease-out); }
.link-arrow:hover span { transform: translateX(5px); }
.link-arrow--light { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---------- loader ---------- */
/* Sequence (~1s, first visit only): mountains draw → wordmark wipes up → "Wausau · Wisconsin"
   settles → bar fills → black panel lifts with a red layer trailing behind it. */
.loader { display: none; }
.show-loader .loader { position: fixed; inset: 0; z-index: var(--z-loader); display: block; }
html.show-loader { overflow: hidden; } /* the page waits behind the welcome screen */

/* the Enter gate: appears once the logo has built; the red bar steps aside for it */
.loader__gate { display: grid; justify-items: center; gap: 14px; margin-top: -8px; opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity .6s ease, transform .7s var(--ease-out); }
.loader.is-ready .loader__gate { opacity: 1; transform: none; pointer-events: auto; }
.loader.is-ready .loader__bar { opacity: 0; transition: opacity .4s ease; }
.loader__bar { margin-bottom: -2px; }
.loader__enter {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; gap: 16px; min-height: 54px; padding: 0 34px 0 40px;
  background: transparent; color: var(--white); cursor: pointer;
  border: 1px solid rgba(244, 242, 238, .38); border-radius: 999px;
  font-family: var(--font-cond); font-weight: 700; font-size: .95rem; letter-spacing: .42em; text-transform: uppercase;
  transition: border-color .4s ease, letter-spacing .6s var(--ease-out);
}
.loader__enter::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red);
  transform: scaleX(0); transform-origin: right; transition: transform .6s var(--ease-out);
}
.loader__enter .icon { transition: transform .5s var(--ease-out); }
.loader__enter:hover, .loader__enter:focus-visible { border-color: var(--red); letter-spacing: .5em; }
.loader__enter:hover::before, .loader__enter:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.loader__enter:hover .icon, .loader__enter:focus-visible .icon { transform: translateX(4px); }
.loader__enter:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; }
/* a slow breathing ring invites the click */
.loader__enter::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--red-display);
  opacity: 0; animation: enter-breathe 2.6s ease-in-out 1.2s infinite; pointer-events: none;
}
@keyframes enter-breathe { 0%, 100% { opacity: 0; transform: scale(1); } 50% { opacity: .9; transform: scale(1.06); } }
.loader__hint { font-size: .78rem; letter-spacing: .14em; color: var(--gray-400); text-transform: lowercase; }
.hint-tap { display: none; }
@media (hover: none) { .hint-key { display: none; } .hint-tap { display: inline; } }
.loader__trail, .loader__panel { position: absolute; inset: 0; }
.loader__trail { background: var(--red); }
.loader__panel {
  display: grid; place-content: center; justify-items: center; gap: 26px;
  background: radial-gradient(60% 50% at 50% 45%, #171717, var(--black) 70%);
}
.loader__logo { display: grid; justify-items: center; width: min(290px, 64vw); }
/* SVG <use> content can't be styled by selectors; these properties inherit into it */
.loader__mtn {
  width: 100%; overflow: visible; margin-bottom: -10%; position: relative;
  fill: var(--gray-700); stroke: var(--white); stroke-width: 7; stroke-linejoin: round;
  --mtn-snow: var(--red); --mtn-snow-o: 1;
}
@property --mtn-snow-o { syntax: "<number>"; inherits: true; initial-value: 1; }
.loader__word { width: 100%; position: relative; }

/* "PLATE LOAD" (~2.9s, chosen 2026-10-04): a steel bar draws across, red plates slam onto each end
   (left, right, left, right), the bar sags under the weight, then the logo drops in and locks above it.
   Timings were slowed ~25% from the preview at Logan's request. */
.loader__panel { overflow: hidden; }
.loader__panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 40%, rgba(255, 255, 255, .06), transparent 70%);
}
.loader__logo { position: relative; isolation: isolate; margin-bottom: 70px; }
.loader__wordwrap { position: relative; display: block; width: 100%; }
/* the logo drops in with a small bounce once the bar is loaded */
.loader__wordwrap { opacity: 0; animation: plates-logo .68s cubic-bezier(.3, 1.3, .5, 1) 2.06s forwards; }
@keyframes plates-logo { from { opacity: 0; transform: translateY(-26px); } to { opacity: 1; transform: none; } }
/* the loaded barbell under the logo (max-width: none overrides the global svg cap so it can be wider than the logo) */
.loader__load {
  display: block; position: absolute; left: -34%; width: 168%; max-width: none; height: auto; aspect-ratio: 600 / 84;
  top: calc(100% + 4px); overflow: visible;
  animation: plate-kick .2s ease-out 1.28s, plate-kick .2s ease-out 1.53s, plate-kick .2s ease-out 1.78s, plate-kick .2s ease-out 2s;
}
@keyframes plate-kick { 40% { translate: 0 3px; } }
.load__bar {
  fill: none; stroke: #d9d6d0; stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 600; stroke-dashoffset: 600;
  animation: load-bar .62s cubic-bezier(.6, 0, .2, 1) .38s forwards, load-sag .6s ease-out 2s forwards;
}
@keyframes load-bar { to { stroke-dashoffset: 0; } }
@keyframes load-sag { to { d: path("M6 48 Q300 38 594 48"); } }
.load__collar { fill: #9a9a9a; opacity: 0; animation: fade .25s ease .88s forwards; }
.load__plate { stroke: #0b0b0b; stroke-width: 2; }
.load__plate--big { fill: var(--red); }
.load__plate--small { fill: #2a2a2a; stroke: var(--red); }
/* each plate slides on fast, hits the collar, and kicks back a touch */
.load__l1, .load__l2 { transform: translateX(-460px); }
.load__r1, .load__r2 { transform: translateX(460px); }
.load__l1 { animation: slam-l .42s linear 1s forwards; }
.load__r1 { animation: slam-r .42s linear 1.25s forwards; }
.load__l2 { animation: slam-l .42s linear 1.5s forwards; }
.load__r2 { animation: slam-r .42s linear 1.72s forwards; }
@keyframes slam-l {
  0% { transform: translateX(-460px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  65% { transform: translateX(0); animation-timing-function: ease-out; }
  80% { transform: translateX(-7px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); }
}
@keyframes slam-r {
  0% { transform: translateX(460px); animation-timing-function: cubic-bezier(.5, 0, 1, .6); }
  65% { transform: translateX(0); animation-timing-function: ease-out; }
  80% { transform: translateX(7px); animation-timing-function: ease-in; }
  100% { transform: translateX(0); }
}
/* the bar ends dip as the weight settles */
.load__side { animation: load-dip .6s ease-out 2s forwards; }
@keyframes load-dip { to { transform: translateY(6px); } }
/* the logo lands with a small thud (panel is oversized so the shake never shows an edge) */
.loader__panel { inset: -16px; animation: plate-shake .36s linear 2.38s; }
@keyframes plate-shake { 0%, 100% { transform: none; } 20% { transform: translate(-4px, 4px); } 45% { transform: translate(4px, -2px); } 70% { transform: translate(-2px, 1px); } }
/* red glow warms up behind the logo once it lands */
.loader__logo::before {
  content: ""; position: absolute; z-index: -1; inset: -40% -30%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180, 30, 43, .42), rgba(180, 30, 43, .12) 55%, transparent);
  opacity: 0; transform: scale(.85); animation: glow-warm 1.4s var(--ease-out) 2.3s forwards;
}
@keyframes glow-warm { to { opacity: 1; transform: none; } }

.loader__place {
  font-family: var(--font-cond); font-weight: 600; font-size: .88rem; text-transform: uppercase; color: var(--gray-400);
  letter-spacing: .7em; margin-right: -.7em; opacity: 0;
  animation: place-in .9s var(--ease-out) 2.5s forwards;
}
@keyframes place-in { to { letter-spacing: .38em; margin-right: -.38em; opacity: 1; } }
/* the thin loading line isn't used with the barbell intro (it would compete with the bar) */
.loader__bar { display: none; }
/* exit: content eases back, black lifts, red trails a beat behind */
.loader.is-done .loader__logo, .loader.is-done .loader__place, .loader.is-done .loader__bar, .loader.is-done .loader__gate { transition: opacity .25s ease, transform .35s var(--ease-in-out); opacity: 0; transform: translateY(-14px); }
.loader.is-done .loader__panel { animation: loader-out .75s var(--ease-in-out) .12s forwards; }
.loader.is-done .loader__trail { animation: loader-out .75s var(--ease-in-out) .26s forwards; }
@keyframes loader-gone { to { visibility: hidden; opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fill-in { to { fill: var(--gray-700); } }
@keyframes fade { to { opacity: 1; } }
@keyframes grow { to { transform: scaleX(1); } }
@keyframes loader-out { to { transform: translateY(-100%); visibility: hidden; } }

/* ---------- announcement ---------- */
.announce { background: var(--red); color: #fff; text-align: center; padding: 9px var(--gutter); }
.announce p { font-family: var(--font-cond); font-weight: 700; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; }
.announce span[aria-hidden] { opacity: .55; margin-inline: 6px; }
@media (max-width: 559px) { .announce__extra { display: none; } }

/* ---------- header ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header);
  height: var(--header-h);
  transition: transform var(--t-med) var(--ease-out), background-color var(--t-med) ease, border-color var(--t-med) ease;
  border-bottom: 1px solid transparent;
}
.header.is-scrolled { background: rgba(11, 11, 11, .82); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom-color: rgba(255, 255, 255, .06); }
.header.is-hidden { transform: translateY(-100%); }
.header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
/* desktop: three equal-weight columns so the menu sits at the true center, lined up with the announcement bar above */
@media (min-width: 1024px) {
  .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .header__inner .header__actions { justify-self: end; }
}

/* the owner's official logo (assets/logo/logo.svg). Widths keep the same height the stand-in logo had, so the header doesn't move */
.brand { display: block; width: 102px; text-decoration: none; flex-shrink: 0; }
.brand__logo { display: block; width: 100%; height: auto; }
@media (min-width: 768px) { .brand { width: 119px; } }

.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: block; }
  .nav__list { display: flex; gap: clamp(20px, 2.6vw, 40px); }
  .nav__list a {
    display: inline-block; font-family: var(--font-cond); font-weight: 700; font-size: 1.2rem; letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; padding: 10px 0; position: relative; color: #ebe8e3; transition: color .35s ease;
  }
  /* hover: the word rolls up and a red copy rolls in from below (same feel as the buttons) */
  .nav__roll { display: inline-block; overflow: hidden; height: 1.2em; line-height: 1.2; vertical-align: top; }
  .nav__label { display: inline-block; text-shadow: 0 1.2em 0 var(--red-bright); transition: transform .5s var(--ease-out); }
  .nav__list a:hover .nav__label, .nav__list a:focus-visible .nav__label { transform: translateY(-1.2em); }
  .nav__list a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 3px; background: var(--red); transform: scaleX(0); transform-origin: right; transition: transform var(--t-med) var(--ease-out); }
  /* the red underline only appears on hover (or keyboard focus), so links never look pre-selected */
  .nav__list a:hover::after, .nav__list a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
  /* spotlight: while one link is hovered, the others step back */
  .nav__list:hover a:not(:hover) { color: var(--gray-500); }
}

.header__actions { display: flex; align-items: center; gap: 12px; }

/* social icons in the header: quiet outline buttons, divided from the Join button by a hairline */
.header__social { display: flex; align-items: center; gap: 8px; padding-right: 18px; margin-right: 4px; border-right: 1px solid rgba(255, 255, 255, .18); }
/* hidden only in the narrow desktop band where the full menu + icons would crowd the header */
@media (min-width: 1024px) and (max-width: 1099px) { .header__social { display: none; } }
.header__social a {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  color: var(--white); border: 1px solid rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .04);
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease, background-color var(--t-fast) ease, transform .3s var(--ease-out);
}
.header__social a:hover { color: #fff; border-color: var(--red-display); background: var(--red); transform: translateY(-1px); }
.header__social .icon { width: 20px; height: 20px; }
/* phones: slightly smaller so logo, icons and menu button sit comfortably on one line */
@media (max-width: 639px) {
  .header__social { gap: 6px; padding-right: 12px; margin-right: 0; }
  .header__social a { width: 42px; height: 42px; }
  .header__social .icon { width: 18px; height: 18px; }
}

.mobile-menu__social { display: flex; gap: 22px; margin-top: 8px; }
.mobile-menu__social a { font-family: var(--font-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--white); text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 6px; }
.header__actions .btn { display: none; }
@media (min-width: 640px) { .header__actions .btn { display: inline-flex; } }

.menu-btn {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--radius); cursor: pointer;
}
.menu-btn__lines { width: 20px; height: 12px; position: relative; display: block; }
.menu-btn__lines span { position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; transition: transform var(--t-med) var(--ease-out), top var(--t-med) var(--ease-out); }
.menu-btn__lines span:first-child { top: 0; }
.menu-btn__lines span:last-child { top: 10px; }
.menu-btn[aria-expanded="true"] .menu-btn__lines span:first-child { top: 5px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines span:last-child { top: 5px; transform: rotate(-45deg); }
@media (min-width: 1024px) { .menu-btn { display: none; } }

.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--black);
  padding: calc(var(--header-h) + 48px) var(--gutter) 32px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow-y: auto;
}
.mobile-menu ul { display: grid; gap: 4px; }
.mobile-menu nav a {
  display: block; padding: 6px 0;
  font-family: var(--font-display); font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1.05; text-transform: uppercase; text-decoration: none;
}
.mobile-menu nav a:hover { color: var(--red-bright); }
.mobile-menu__foot { display: grid; gap: 8px; color: var(--gray-400); margin-top: 32px; }
.mobile-menu__foot a { text-decoration: none; min-height: 44px; display: flex; align-items: center; }
body.menu-open { overflow: hidden; }
body.menu-open .header { transform: none; background: var(--black); z-index: calc(var(--z-menu) + 1); }

/* ---------- hero ---------- */
.hero {
  position: relative; isolation: isolate;
  min-height: calc(100svh - var(--header-h) - 36px);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: 120px; padding-bottom: 32px;
  overflow: hidden;
  background: var(--black);
  margin-top: calc(var(--header-h) * -1);
}
@media (min-height: 700px) { .hero { min-height: calc(100svh - 36px); } }

.hero__media { position: absolute; inset: 0; z-index: -3; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 20%; filter: saturate(.85) contrast(1.08); }
.hero__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, .45) 22%, rgba(11, 11, 11, .82) 45%, rgba(11, 11, 11, .9) 70%, var(--black) 100%);
}
@media (max-width: 959px) { .hero__media img { filter: saturate(.55) contrast(1.05) brightness(.8); } }

/* graded hero photo: any gym photo becomes moody black & white with the brand's red light on it */
.hero .hero__media--graded img { filter: grayscale(1) contrast(1.45) brightness(.56); object-position: 58% 16%; }
.hero__media--graded::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 64% 24%, rgba(229, 72, 77, .8), transparent 72%),
    radial-gradient(60% 60% at 100% 60%, rgba(180, 30, 43, .45), transparent 70%),
    linear-gradient(rgba(180, 30, 43, .14), rgba(180, 30, 43, .14));
  mix-blend-mode: overlay;
}
.hero__media--graded::after { z-index: 2; }
.hero__glow {
  position: absolute; z-index: -2; pointer-events: none;
  width: 900px; height: 900px; right: -300px; top: 10%;
  background: radial-gradient(closest-side, rgba(180, 30, 43, .55), rgba(180, 30, 43, 0));
  filter: blur(10px);
  animation: glow 7s ease-in-out infinite alternate;
}
/* uses the individual `scale` property so GSAP can own `transform` for pointer drift */
@keyframes glow { from { opacity: .65; scale: .92; } to { opacity: 1; scale: 1.05; } }
.hero__grain {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 960px) {
  .hero { justify-content: center; padding-top: calc(var(--header-h) + 64px); }
  .hero__media { left: calc(42% - var(--hero-shift)); } /* photo edge moves with the nudge below */
  .hero__media img { object-position: 50% 25%; }
  .hero__media::after {
    background:
      linear-gradient(90deg, var(--black) 0%, rgba(11, 11, 11, .6) 22%, rgba(11, 11, 11, 0) 55%),
      linear-gradient(0deg, var(--black) 0%, rgba(11, 11, 11, 0) 35%),
      linear-gradient(180deg, rgba(11, 11, 11, .6) 0%, rgba(11, 11, 11, 0) 20%);
  }
  .hero__glow { right: -120px; top: -10%; width: 1100px; height: 1100px; }
}

.hero__content { position: relative; }
.hero__title {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(3.1rem, min(12.5vw, 11vh), 7.4rem); line-height: .92; letter-spacing: .005em;
  margin-bottom: var(--s-3);
}
.hero__title .line { display: block; overflow: hidden; padding-bottom: .04em; }
.hero__title .line > span { display: inline-block; }
.hero__sub { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.35rem, 3vw, 2rem); line-height: 1.1; margin-bottom: var(--s-2); }
.hero__lead { max-width: 52ch; color: var(--gray-300); font-size: clamp(1rem, 1.4vw, 1.15rem); margin-bottom: var(--s-4); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: var(--s-4); }
@media (max-width: 479px) { .hero__ctas .btn { flex: 1 1 100%; } }

/* spec line: editorial list with diamond separators instead of generic pills */
.chips { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; max-width: 820px; }
.chip {
  font-family: var(--font-cond); font-weight: 600; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gray-300); display: inline-flex; align-items: center;
}
.chip:not(:last-child)::after { content: ""; width: 6px; height: 6px; background: var(--red-display); transform: rotate(45deg); margin: 0 14px; }
/* phones: a tidy two-column list, diamond before each item, so no diamond dangles at a line end */
@media (max-width: 639px) {
  .chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
  .chip:not(:last-child)::after { content: none; }
  .chip::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--red-display); transform: rotate(45deg); margin-right: 10px; }
  .chip:last-child:nth-child(odd) { grid-column: 1 / -1; } /* an odd last item gets the full row, so "No long-term contracts" doesn't break */
}

.hero__stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
  margin-top: var(--s-6); padding-top: var(--s-3); border-top: 1px solid rgba(255, 255, 255, .12);
  position: relative;
}
.hero__stats div { display: flex; flex-direction: column-reverse; gap: 2px; }
.hero__stats dt { font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; color: var(--gray-400); }
.hero__stats dd { font-family: var(--font-display); font-size: clamp(1.8rem, 4.5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }

.hero__scroll { display: none; }
@media (min-width: 960px) {
  .hero__scroll { display: block; position: absolute; right: var(--gutter); bottom: 40px; width: 28px; height: 46px; border: 2px solid rgba(255, 255, 255, .4); border-radius: 14px; }
  .hero__scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red-bright); animation: scrolldot 1.8s var(--ease-in-out) infinite; }
}
@keyframes scrolldot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(16px); opacity: 0; } 100% { opacity: 0; } }

/* hero entrance (CSS-driven so it never waits on GSAP) */
.anim-ready .hero__title .line > span { transform: translateY(105%); }
.anim-ready [data-hero-fade], .anim-ready [data-hero-chip] { opacity: 0; transform: translateY(18px); }
.anim-ready .hero__media img { transform: scale(1.12); }
.is-loaded .hero__title .line > span { transform: none; transition: transform 1s var(--ease-out); }
.is-loaded .hero__title .line:nth-child(2) > span { transition-delay: .08s; }
.is-loaded .hero__title .line:nth-child(3) > span { transition-delay: .16s; }
.is-loaded [data-hero-fade], .is-loaded [data-hero-chip] { opacity: 1; transform: none; transition: opacity .8s ease .35s, transform .8s var(--ease-out) .35s; }
.is-loaded .hero__sub { transition-delay: .3s; }
.is-loaded .hero__ctas { transition-delay: .5s; }
.is-loaded .hero__stats { transition-delay: .7s; }
.is-loaded [data-hero-chip]:nth-child(1) { transition-delay: .6s; }
.is-loaded [data-hero-chip]:nth-child(2) { transition-delay: .65s; }
.is-loaded [data-hero-chip]:nth-child(3) { transition-delay: .7s; }
.is-loaded [data-hero-chip]:nth-child(4) { transition-delay: .75s; }
.is-loaded [data-hero-chip]:nth-child(5) { transition-delay: .8s; }
.is-loaded .hero__media img { transform: none; transition: transform 1.8s var(--ease-out); }

/* ---------- marquee ---------- */
.marquee { background: var(--red); color: #fff; overflow: hidden; padding: 18px 0; border-block: 1px solid rgba(0, 0, 0, .25); }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 38s linear infinite; }
.marquee span { font-family: var(--font-display); font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform: uppercase; line-height: 1; white-space: nowrap; }
.marquee i { width: 14px; height: 14px; background: var(--black); transform: rotate(45deg); flex-shrink: 0; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- meet the owners ---------- */
.team { background: var(--black); overflow: hidden; }
.team__grid { display: grid; gap: clamp(56px, 8vw, 72px); }
/* desktop: two portraits side by side */
@media (min-width: 768px) {
  .team__grid { grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: start; }
  /* both owner cards sit level (the earlier stagger was removed at Logan's request) */
}
.owner { position: relative; }
.owner__media {
  --mx: 50%; --my: 40%;
  position: relative; isolation: isolate; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--gray-900);
}
.owner__photo { position: absolute; inset: 0; margin: 0; }
.owner__photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%;
  filter: grayscale(1) contrast(1.12) brightness(.92);
  transform: scale(1.02); transition: transform 1.4s var(--ease-out), filter 1.1s var(--ease-out);
}
/* soft dark fade at the bottom, plus a red haze that follows the cursor */
.owner__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mx) var(--my), rgba(255, 255, 255, var(--spot, 0)), transparent 60%),
    linear-gradient(180deg, rgba(11, 11, 11, 0) 55%, rgba(11, 11, 11, .75) 100%);
  transition: --spot .5s ease;
}
/* film grain to match the rest of the photography */
.owner__media::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (hover: hover) {
  .owner:hover { --spot: .16; } /* soft white light (not red) on the owner photos */
  .owner:hover .owner__photo img { transform: scale(1.07); filter: grayscale(0) contrast(1.04) brightness(1.02); } /* black & white to full color on hover */
}
/* large outline number in the bottom corner of the photo */
/* hover: a red frame draws around the portrait. Two strands start at opposite corners and race around until they meet
   (pathLength 100 with a "0 50" dash pattern = two dashes), with a soft red glow. Moving off pulls the lines back. */
.owner__frame { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.owner__frame rect {
  x: 1.25px; y: 1.25px; width: calc(100% - 2.5px); height: calc(100% - 2.5px); rx: calc(var(--radius-lg) - 1px);
  fill: none; stroke: var(--white); stroke-width: 2.5; /* white (Logan picked white over red) */ stroke-dasharray: 0 50; stroke-linecap: round; opacity: 0;
  transition: stroke-dasharray .45s cubic-bezier(.55, 0, .45, 1), opacity .2s ease .25s;
}
.owner__media { transition: box-shadow .6s ease; }
@media (hover: hover) {
  .owner:hover .owner__frame rect { stroke-dasharray: 50 0; opacity: 1; transition: stroke-dasharray .9s cubic-bezier(.65, 0, .35, 1), opacity .15s ease; }
  .owner:hover .owner__media { box-shadow: 0 0 0 1px rgba(244, 242, 238, .2), 0 24px 60px -18px rgba(244, 242, 238, .28); } /* soft white glow */
}
@media (prefers-reduced-motion: reduce) { .owner__frame rect { transition: opacity .2s ease; } }
.owner__flag {
  position: absolute; z-index: 3; top: 16px; left: 16px; padding: 3px 8px; border: 1px dashed rgba(244, 242, 238, .45); border-radius: 2px;
  font-family: var(--font-cond); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gray-300);
  background: rgba(11, 11, 11, .4);
}

.owner__body { padding-top: 28px; max-width: 520px; }
.owner__role { font-family: var(--font-cond); font-weight: 700; font-size: .85rem; letter-spacing: .2em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 8px; }
.owner__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; margin-bottom: 16px; }
.owner__bio { color: var(--gray-300); margin-bottom: 22px; }
.owner__quote { margin: 0 0 22px; padding: 4px 0 4px 18px; border-left: 2px solid var(--red-display); }
.owner__quote p { font-family: var(--font-cond); font-weight: 600; font-size: 1.2rem; line-height: 1.35; letter-spacing: .02em; color: var(--white); }
.owner__quote p::before { content: "\201C"; } .owner__quote p::after { content: "\201D"; }
.owner__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.owner__tags li {
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-cond); font-weight: 700; font-size: .84rem; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: linear-gradient(160deg, rgba(212, 37, 49, .32), rgba(180, 30, 43, .14));
  border: 1px solid rgba(229, 72, 77, .7); box-shadow: 0 6px 18px -8px rgba(212, 37, 49, .6);
  transition: background-color .3s ease, transform .3s var(--ease-out), box-shadow .3s ease;
}
/* red pills that brighten when hovered */
@media (hover: hover) { .owner__tags li:hover { background: var(--red); transform: translateY(-2px); box-shadow: 0 10px 22px -8px rgba(212, 37, 49, .8); } }

/* personal training link under owner 01: an editorial line, styled like the rest of the owner card */
.pt-link { display: grid; gap: 8px; margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); text-decoration: none; color: var(--white); max-width: 100%; }
.pt-link__kicker { font-family: var(--font-cond); font-weight: 700; font-size: 1rem; letter-spacing: .18em; text-transform: uppercase; color: var(--red-bright); }
.pt-link__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pt-link__title {
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 2.9vw, 2.75rem); line-height: 1.12; /* bigger so it stands out (was 1.6rem/2.8vw/2.2rem) */
  background: linear-gradient(var(--red), var(--red)) left bottom / 0% 3px no-repeat; padding-bottom: 4px;
  transition: background-size .6s var(--ease-out);
}
/* letters are split by main.js: they ripple up into view on scroll, and on hover the line rolls up to a red copy */
.pt-roll { display: inline-block; overflow: hidden; height: 1.12em; vertical-align: bottom; }

.pt-roll__in { display: inline-block; transition: transform .6s var(--ease-out); }
.pt-ch { display: inline-block; text-shadow: 0 1.12em 0 var(--red-bright); white-space: pre; }
.anim-ready .pt-ch { transform: translateY(115%); }
/* arrow: stays put; fills red on hover, with a slow breathing ring that invites the click */
.pt-link__arrow {
  --ax: 0px; --ay: 0px; --as: 1;
  position: relative; flex-shrink: 0; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid rgba(244, 242, 238, .4);
  transform: translate(var(--ax), var(--ay)) scale(var(--as));
  transition: background-color .35s ease, border-color .35s ease, transform .5s var(--ease-out);
}
.pt-link__arrow::after {
  content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--red-display); pointer-events: none;
  opacity: 0; animation: coach-ring 2.8s ease-out 1s infinite;
}
@keyframes coach-ring { 0% { opacity: 0; transform: scale(1); } 25% { opacity: .9; } 100% { opacity: 0; transform: scale(1.55); } }
.pt-link__arrow svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease-out); }
@media (hover: hover) {
  .pt-link:hover .pt-link__title { background-size: 100% 3px; }
  .pt-link:hover .pt-roll__in { transform: translateY(-1.12em); }
  .pt-link:hover .pt-link__arrow { background: var(--red); border-color: var(--red); }
  .pt-link:hover .pt-link__arrow::after { animation: none; }
  .pt-link:hover .pt-link__arrow svg { transform: rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) { .pt-link__arrow::after { animation: none; } }
.pt-link:focus-visible { outline: 3px solid var(--white); outline-offset: 6px; }
/* the owners' promise: a quiet closing line under the portraits */
.team__promise {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(56px, 8vw, 96px); padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .12);
}

/* ---------- training / programs ---------- */
.training { background: var(--ink); }
.programs { display: grid; gap: var(--s-3); }
@media (min-width: 640px) { .programs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 959px) { .program:nth-child(3) { grid-column: span 2; min-height: 380px; } }
@media (min-width: 960px) { .programs { grid-template-columns: repeat(3, 1fr); } }

.program {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--gray-900); isolation: isolate;
  min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end;
}
.program__media { position: absolute; inset: 0; z-index: -1; }
.program__media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.8); transition: transform 1.2s var(--ease-out), filter var(--t-slow) ease; }
.program__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 11, 11, 0) 25%, rgba(11, 11, 11, .92) 78%); }
.program__media::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--red); mix-blend-mode: multiply; opacity: 0;
  transition: opacity var(--t-slow) ease;
}
.program__body { padding: var(--s-4) var(--s-3); }
.program__num { font-family: var(--font-cond); font-weight: 700; color: var(--red-bright); letter-spacing: .12em; display: block; margin-bottom: 8px; }
.program__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 2.6vw, 2.3rem); line-height: 1; margin-bottom: 12px; }
.program__body p { color: var(--gray-300); }
.program__body .link-arrow { margin-top: 8px; }
.program::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform var(--t-slow) var(--ease-out); }
@media (hover: hover) {
  .program:hover .program__media img { transform: scale(1.06); filter: grayscale(1) contrast(1.2) brightness(.95); }
  .program:hover .program__media::before { opacity: .35; }
  .program:hover::after { transform: scaleX(1); }
}

/* ---------- floor / bento ---------- */
.floor { background: var(--gray-900); }
.bento { display: grid; grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 12px; }
.tile { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--gray-800); }
.tile img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.12) brightness(.85); transition: transform 1.2s var(--ease-out), filter var(--t-slow) ease; }
.tile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, .85));
  font-family: var(--font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem;
}
.tile figcaption span { color: var(--red-bright); margin-right: 8px; }
.tile--a { grid-column: span 2; grid-row: span 2; }
.tile--d { grid-column: span 2; } /* phones: full width so it doesn't sit beside an empty slot */
.tile--stat { grid-column: span 2; background: var(--red); display: flex; flex-direction: column; justify-content: space-between; padding: 22px; color: #fff; }
.tile__big { font-family: var(--font-display); font-size: clamp(3.4rem, 10vw, 6rem); line-height: .9; font-variant-numeric: tabular-nums; }
.tile__big .text-red { color: var(--black); }
.tile--stat p:last-child { max-width: 36ch; }
@media (hover: hover) { .tile:hover img { transform: scale(1.06); filter: grayscale(.2) contrast(1.1) brightness(.95); } }

@media (min-width: 960px) {
  .bento { grid-template-columns: repeat(12, 1fr); grid-auto-rows: 230px; gap: 16px; }
  .tile--a { grid-column: 1 / 8; grid-row: 1 / 3; }
  .tile--b { grid-column: 8 / 13; grid-row: 1 / 2; }
  .tile--stat { grid-column: 8 / 13; grid-row: 2 / 3; padding: 28px; }
  .tile--c { grid-column: 1 / 6; grid-row: 3 / 4; }
  .tile--d { grid-column: 6 / 13; grid-row: 3 / 4; }
}

/* ---------- memberships ---------- */
.tabs { position: relative; display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid #d9d5ce; margin-bottom: var(--s-4); }
.tab {
  background: none; border: 0; cursor: pointer;
  padding: 14px 18px; min-height: 48px;
  font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase;
  color: #5a5a5a; transition: color var(--t-fast) ease;
}
.tab:hover, .tab[aria-selected="true"] { color: var(--ink); }
/* phones: three equal tabs on one row; "Day & week passes" shortens to "Passes" */
@media (max-width: 479px) {
  .tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
  .tab { padding: 14px 6px; text-align: center; }
  .tab__extra { display: none; }
}
.tabs__indicator {
  position: absolute; left: 0; bottom: -1px; height: 3px; width: 100px; background: var(--red);
  transform-origin: left; transition: transform var(--t-med) var(--ease-out), width var(--t-med) var(--ease-out);
}
.panel__note { font-size: .95rem; color: #5a5a5a; margin-bottom: var(--s-3); }
.panel__legal { font-size: .85rem; color: #5a5a5a; margin-top: var(--s-3); max-width: 90ch; }
.panel.is-entering .plan { animation: plan-in .55s var(--ease-out) both; }
.panel.is-entering .plan:nth-child(2) { animation-delay: .05s; }
.panel.is-entering .plan:nth-child(3) { animation-delay: .1s; }
.panel.is-entering .plan:nth-child(4) { animation-delay: .15s; }
@keyframes plan-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.plans { display: grid; gap: var(--s-2); }
@media (min-width: 640px) { .plans--4, .plans--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans--4 { grid-template-columns: repeat(4, 1fr); } }

.plan {
  position: relative; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 1px solid #e3dfd8; border-top: 4px solid var(--red); border-radius: var(--radius);
  padding: 28px 24px 24px;
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) ease;
}
@media (hover: hover) { .plan:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .35); } }
.plan--featured { background: var(--ink); color: var(--white); border-color: var(--ink); border-top-color: var(--red); }
.plan__badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--red); color: #fff; padding: 4px 10px; border-radius: 2px;
  font-family: var(--font-cond); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
}
.plan__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.9rem; line-height: 1; margin-bottom: 14px; }
.plan__price { display: flex; flex-direction: column; margin-bottom: 16px; }
.plan__price span { font-family: var(--font-display); font-size: clamp(2.6rem, 4vw, 3.2rem); line-height: 1; font-variant-numeric: tabular-nums; }
.plan__price small { color: #5a5a5a; font-size: .95rem; margin-top: 4px; }
.plan--featured .plan__price small, .plan--featured .plan__fine { color: var(--gray-400); }
.plan__desc { margin-bottom: 12px; }
.plan__fine { font-size: .9rem; color: #5a5a5a; margin-bottom: 24px; }
.plan .btn { margin-top: auto; }

/* ---------- membership refresh: pill tabs, price-led cards, black buttons ---------- */
.tabs {
  display: inline-flex; gap: 0; padding: 5px; margin-bottom: var(--s-4);
  background: var(--paper); border: 1px solid #ddd8d0; border-radius: 999px;
}
.tab { position: relative; z-index: 1; border-radius: 999px; padding: 12px 24px; min-height: 46px; transition: color .35s ease; }
.tab[aria-selected="true"], .tab[aria-selected="true"]:hover { color: #fff; }
.tabs__indicator { top: 0; bottom: auto; z-index: 0; transition: transform .45s var(--ease-out), width .45s var(--ease-out); border-radius: 999px; background: var(--ink); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
@media (max-width: 479px) { .tabs { display: grid; width: 100%; } .tab { padding: 12px 6px; } }

.plan {
  border: 1px solid #e4e0d9; border-radius: 16px; padding: 30px 28px 28px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.plan__name {
  font-family: var(--font-cond); font-weight: 700; font-size: .92rem; letter-spacing: .2em;
  color: var(--red); margin-bottom: 14px; line-height: 1.2;
}
.plan__price { margin-bottom: 20px; }
.plan__price span { font-size: clamp(3rem, 4.6vw, 3.8rem); }
.plan__price small { font-family: var(--font-cond); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; }
.plan__desc { padding-top: 18px; border-top: 1px solid #ece8e1; font-weight: 500; }
.plan .btn--red { background: var(--ink); border-radius: 10px; }
.plan .btn--red::before { background: var(--red); }
.plan .btn--red:hover { background: var(--ink); }
@media (hover: hover) { .plan:hover { border-color: #cfc9c0; } }

.plan--featured {
  border-color: var(--ink);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(180, 30, 43, .32), transparent 55%),
    var(--ink);
}
.plan--featured .plan__name { color: var(--red-bright); }
.plan--featured .plan__desc { border-top-color: rgba(255, 255, 255, .12); }
.plan--featured .btn--red { background: var(--red); }
.plan--featured .btn--red::before { background: #7d121c; }
.plan--featured .btn--red:hover { background: var(--red); }
.plan__badge { top: 26px; right: 24px; padding: 5px 12px; border-radius: 999px; font-size: .72rem; }

/* ---------- how joining works (slim strip under pricing) ---------- */
.howto {
  margin-top: var(--s-5); padding-top: var(--s-3); border-top: 1px solid #d9d5ce;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
}
.howto__steps { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; font-weight: 600; }
.howto__steps li { display: inline-flex; align-items: center; gap: 10px; }
.howto__steps li:not(:last-child)::after { content: ""; width: 26px; height: 1px; background: var(--red); margin-left: 18px; }
.howto__n {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 2px;
  background: var(--ink); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: .95rem;
}
.howto__help { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 5px; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-width: 639px) {
  .howto__steps { flex-direction: column; align-items: flex-start; gap: 10px; }
  .howto__steps li:not(:last-child)::after { display: none; }
}

/* ---------- shop (gear) ---------- */
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--red); }
.btn--dark:focus-visible { outline-color: var(--ink); }
/* sits right under the light memberships section: no double gap, just a hairline between them */
.memberships + .shop { padding-top: 0; }
.memberships + .shop > .container { border-top: 1px solid rgba(20, 20, 20, .12); padding-top: clamp(56px, 7vw, 96px); }
/* shop and location are both light now that the reviews wall is off the page: a mountain divider keeps them apart */
.shop + .location { padding-top: 0; }
/* dark full-width band: white hairlines meeting at the red mountain */
.mtn-divider {
  display: none; margin-bottom: clamp(56px, 7vw, 96px); padding: clamp(26px, 3.4vw, 40px) 0; background: var(--black);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(255, 255, 255, .06);
}
.shop + .location > .mtn-divider { display: block; }
.mtn-divider--solo { display: block; margin: 0; } /* standalone banner between two sections */
.mtn-divider__in { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 28px); }
.mtn-divider__line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28)); transform-origin: right center; }
.mtn-divider__line:last-child { background: linear-gradient(90deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0)); transform-origin: left center; }
.mtn-divider__mark { width: clamp(64px, 7vw, 88px); height: auto; aspect-ratio: 883 / 180; max-width: none; flex-shrink: 0; fill: var(--red); --mtn-snow: #f4f2ee; filter: drop-shadow(0 0 14px rgba(180, 30, 43, .45)); }
/* on scroll the lines draw outward from the mark (main.js) */
.anim-ready .mtn-divider__line { transform: scaleX(0); }
.anim-ready .mtn-divider__mark { opacity: 0; transform: translateY(8px); }
/* header right column: rotating seal, intro line, quick facts */
.shop__aside { position: relative; display: grid; gap: 22px; }
@media (min-width: 960px) { .shop__aside { padding-right: 148px; } }
@media (min-width: 960px) and (max-width: 1100px) { .shop__aside { padding-right: 132px; } .seal { width: 100px; height: 100px; } }
.seal { width: 112px; height: 112px; overflow: visible; }
@media (min-width: 960px) { .seal { position: absolute; top: -6px; right: 0; width: 128px; height: 128px; } }
/* phones/tablets: tuck the seal into the empty space to the right of the heading */
@media (max-width: 959px) { .seal { justify-self: end; width: 84px; height: 84px; margin: -118px 0 -60px; } }
.seal__disc { fill: var(--ink); }
.seal__ring { transform-origin: 60px 60px; animation: seal-spin 22s linear infinite; }
.seal__ring text { font-family: var(--font-cond); font-weight: 700; font-size: 9.4px; letter-spacing: 1.9px; fill: var(--white); }
.seal__mtn { fill: var(--red); stroke: var(--white); stroke-width: 10; stroke-linejoin: round; --mtn-snow: var(--white); }
@keyframes seal-spin { to { transform: rotate(360deg); } }
@media (hover: hover) { .seal:hover .seal__ring { animation-duration: 6s; } }
@media (prefers-reduced-motion: reduce) { .seal__ring { animation: none; } }
.shop__facts { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 4px 0 0; padding-top: 18px; border-top: 1px solid rgba(20, 20, 20, .12); }
.shop__facts div { display: flex; flex-direction: column-reverse; gap: 6px; padding-right: clamp(12px, 1.8vw, 26px); margin-right: clamp(12px, 1.8vw, 26px); border-right: 1px solid rgba(20, 20, 20, .12); white-space: nowrap; }
.shop__facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.shop__facts dt { font-family: var(--font-cond); font-weight: 600; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: #6b6b6b; }
.shop__facts dd { font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); line-height: 1; color: var(--ink); }
.shop__facts div:first-child dd { color: var(--red); }
.shop__grid { display: grid; gap: clamp(16px, 2.4vw, 28px); }
@media (min-width: 768px) { .shop__grid { grid-template-columns: repeat(3, 1fr); } }
/* phones: a swipeable row, the next card peeking in so it's obvious there's more */
@media (max-width: 767px) {
  .shop__grid {
    grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 4px var(--gutter) 18px; scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .shop__grid::-webkit-scrollbar { display: none; }
  .product { scroll-snap-align: start; }
}
.product {
  --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; --lift: 0px;
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
  background: #fff; border: 1px solid rgba(20, 20, 20, .08); border-radius: var(--radius-lg); overflow: hidden; isolation: isolate;
  box-shadow: 0 1px 0 rgba(20, 20, 20, .04);
  /* 3D tilt toward the cursor (main.js sets --rx/--ry); --lift raises the card on hover */
  transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--lift));
  transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out), border-color .3s ease;
}
/* every product sits on the same concrete-gray "stage" (Logan's pick); the photo's white background melts into it (multiply) */
.product--sand  { --bg1: #f1f1ee; --bg2: #cfd0cc; --haze: rgba(180, 30, 43, .10); }
.product--ember { --bg1: #f1f1ee; --bg2: #cfd0cc; --haze: rgba(180, 30, 43, .10); }
.product--stone { --bg1: #f1f1ee; --bg2: #cfd0cc; --haze: rgba(180, 30, 43, .10); }
.product__media {
  --px: 0px; --py: 0px; --float: 0px; --s: 1;
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; isolation: isolate;
  background: radial-gradient(85% 75% at 50% 38%, var(--bg1, #fff) 0%, var(--bg2, #eee) 100%);
}
/* soft floor shadow under the shirt; it tightens as the shirt lifts */
.product__media::before {
  content: ""; position: absolute; z-index: 0; left: 22%; right: 22%; bottom: 7%; height: 9%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .32), transparent); filter: blur(3px);
  transition: transform .8s var(--ease-out), opacity .8s ease;
}
.product__img {
  position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply;
  transform: translate3d(var(--px), calc(var(--py) + var(--float)), 0) scale(var(--s));
  transition: opacity .55s ease, transform .9s var(--ease-out);
}
.product__img--alt { opacity: 0; }
/* light haze that follows the cursor over the stage */
.product__media::after {
  content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(320px circle at var(--mx) var(--my), var(--haze, rgba(180, 30, 43, .08)), transparent 65%);
}
/* a soft shine sweeps across the card as the cursor arrives */
.product::after {
  content: ""; position: absolute; z-index: 3; top: -10%; bottom: -10%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, .28) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-14deg); transition: none;
}
.product__tag {
  position: absolute; z-index: 4; top: 14px; left: 14px; padding: 4px 10px; border-radius: 999px;
  background: var(--red); color: #fff; font-family: var(--font-cond); font-weight: 700; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
}
.product__info { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline; padding: 20px 22px 6px; border-top: 1px solid rgba(20, 20, 20, .06); }
.product__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.45rem; line-height: 1.05; }
.product__meta { grid-column: 1; font-size: .9rem; color: #5a5a5a; }
.product__price { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.product__price small { display: block; font-family: var(--font-cond); font-weight: 600; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #6b6b6b; text-align: right; }
.product__cta {
  position: relative; display: inline-flex; align-items: center; gap: 8px; margin: 10px 22px 22px; align-self: flex-start;
  font-family: var(--font-cond); font-weight: 700; font-size: .95rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red);
  padding-bottom: 4px; transition: gap .4s var(--ease-out);
}
/* the underline fills in from the left on hover */
.product__cta::before, .product__cta::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; }
.product__cta::before { right: 0; background: rgba(180, 30, 43, .25); }
.product__cta::after { width: 100%; background: currentColor; transform: scaleX(.35); transform-origin: left; transition: transform .6s var(--ease-out); }
@media (hover: hover) {
  .product:hover { --lift: -8px; box-shadow: 0 34px 60px -30px rgba(20, 20, 20, .5); border-color: rgba(20, 20, 20, .14); }
  .product:hover .product__media { --float: -10px; --s: 1.04; }
  .product:hover .product__media::before { transform: scaleX(.78); opacity: .55; }
  .product:hover .product__img:not(.product__img--alt) { opacity: 0; }
  .product:hover .product__img--alt { opacity: 1; }
  .product:hover .product__media::after { opacity: 1; }
  .product:hover::after { transform: translateX(330%) skewX(-14deg); transition: transform 1s var(--ease-out); }
  .product:hover .product__cta { gap: 12px; }
  .product:hover .product__cta::after { transform: scaleX(1); }
}
/* touch screens: the shirts float gently on their stages instead */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  .product__media { animation: shirt-float 5s ease-in-out infinite alternate; }
  .product:nth-child(2) .product__media { animation-delay: -1.6s; }
  .product:nth-child(3) .product__media { animation-delay: -3.2s; }
}
@property --float { syntax: "<length>"; inherits: true; initial-value: 0px; }
@keyframes shirt-float { to { --float: -8px; } }
.product:focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }

/* slow outlined ticker under the cards */
/* full-width dark band: white words, "The Black Series" in red (the section clips it so 100vw never causes sideways scroll) */
.shop { overflow-x: clip; padding-top: clamp(48px, 6vw, 84px); scroll-margin-top: calc(var(--header-h) * -1); } /* cancels the page-wide header offset: the header hides when jumping down, so land flush */ /* less empty space above the heading when you jump here from the menu */
.shop__ticker { overflow: hidden; margin-top: clamp(36px, 5vw, 56px); margin-inline: calc(50% - 50vw); padding: 18px 0; background: var(--gray-900); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 -1px 0 rgba(0, 0, 0, .4); }
.shop__ticker-track { display: inline-flex; align-items: center; white-space: nowrap; animation: shop-ticker 45s linear infinite; }
.shop__ticker span {
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1;
  color: var(--white); padding: 0 24px;
}
.shop__ticker span:nth-of-type(5n + 2) { color: var(--red-display); }
.shop__ticker i { width: 8px; height: 8px; background: var(--red); transform: rotate(45deg); flex-shrink: 0; }
@keyframes shop-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .shop__ticker-track { animation: none; } }
.shop__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; margin-top: clamp(32px, 5vw, 56px); }
.shop__note { color: #4a4a4a; max-width: 52ch; }

/* ---------- reviews wall ---------- */
.reviews { background: var(--black); overflow: hidden; }
.reviews .section-head--split { align-items: end; }
.reviews__summary { display: grid; gap: 14px; justify-items: start; }
@media (min-width: 960px) { .reviews__summary { justify-items: end; text-align: right; } }
.reviews__stars { display: flex; gap: clamp(4px, .8vw, 8px); }
.reviews__stars svg { width: clamp(34px, 4.6vw, 52px); height: clamp(34px, 4.6vw, 52px); fill: var(--red-display); filter: drop-shadow(0 6px 18px rgba(212, 37, 49, .35)); }
.reviews__summary-text { max-width: 22ch; color: var(--gray-300); font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.35; }
.reviews__summary-text strong { display: block; font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1; color: var(--white); margin-bottom: 6px; }
.reviews__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }

.reviews__wall {
  display: grid; gap: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.reviews__row { overflow: hidden; }
.reviews__track { display: flex; gap: 20px; width: max-content; padding-block: 8px; animation: reviews-scroll var(--dur, 70s) linear infinite; }
.reviews__row--reverse .reviews__track { animation-direction: reverse; }
.reviews__wall:hover .reviews__track, .reviews__wall:focus-within .reviews__track, .reviews.is-paused .reviews__track { animation-play-state: paused; }
@keyframes reviews-scroll { to { transform: translateX(-50%); } }

.review {
  position: relative; flex: 0 0 auto; width: clamp(280px, 30vw, 400px);
  display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px;
  background: var(--gray-900); border: 1px solid rgba(255, 255, 255, .07); border-radius: 14px;
  transition: transform .5s var(--ease-out), border-color .4s ease, background-color .4s ease;
}
.review::before { content: ""; position: absolute; left: 26px; right: 26px; top: -1px; height: 2px; background: var(--red-display); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
@media (hover: hover) {
  .review:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .16); background: var(--gray-800); }
  .review:hover::before { transform: scaleX(1); }
}
.review__stars { display: flex; gap: 3px; }
.review__stars svg { width: 16px; height: 16px; fill: var(--red-display); }
.review__stars svg.is-off { fill: var(--gray-700); }
.review__text { font-size: 1.05rem; line-height: 1.55; color: var(--white); flex: 1; }
.review__text::before { content: "\201C"; font-family: var(--font-display); color: var(--red-display); font-size: 2.6rem; line-height: 0; vertical-align: -.42em; margin-right: 4px; }
.review__by { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.review__avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--red); color: #fff; font-family: var(--font-display); font-size: 1.05rem; flex-shrink: 0; }
.review__name { font-weight: 600; line-height: 1.2; }
.review__src { font-size: .85rem; color: var(--gray-400); }
.review__flag {
  position: absolute; top: 16px; right: 16px; padding: 3px 8px; border: 1px dashed var(--gray-500); border-radius: 2px;
  font-family: var(--font-cond); font-weight: 700; font-size: .72rem; letter-spacing: .14em; color: var(--gray-400);
}
.review--placeholder .review__text { color: var(--gray-400); font-style: italic; }

.reviews__foot { display: flex; justify-content: center; margin-top: var(--s-4); }
.reviews__pause {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  background: transparent; color: var(--gray-300); border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; cursor: pointer;
  font-family: var(--font-cond); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem;
  transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.reviews__pause:hover { color: var(--white); border-color: var(--white); }
.reviews__pause .i-play { display: none; }
.reviews.is-paused .reviews__pause .i-play { display: inline; }
.reviews.is-paused .reviews__pause .i-pause { display: none; }

/* reduced motion: no drifting; rows become swipeable instead */
@media (prefers-reduced-motion: reduce) {
  .reviews__row { overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); }
  .reviews__track { animation: none; }
  .review { scroll-snap-align: start; }
  .reviews__foot { display: none; }
}

/* ---------- location ---------- */
.location__grid { display: grid; gap: var(--s-5); align-items: center; }
@media (min-width: 960px) { .location__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-6); } }
.location__addr { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.15; margin: var(--s-3) 0 var(--s-1); }
.location__note { font-weight: 600; margin-bottom: var(--s-2); }
.location [data-reveal] > p:not(.eyebrow):not(.location__note) { color: #3f3f3f; max-width: 52ch; margin-bottom: var(--s-4); }
.map { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4 / 3; background: #e3dfd8; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .45); }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map__facade { position: absolute; inset: 0; color: var(--white); }
.map__art { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__pulse { transform-origin: center; transform-box: fill-box; animation: pin-pulse 2.4s var(--ease-out) infinite; }
@keyframes pin-pulse { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.map__card {
  position: absolute; left: 20px; top: 20px; padding: 14px 18px; border-radius: var(--radius);
  background: rgba(11, 11, 11, .78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-left: 3px solid var(--red-display);
}
.location .map__name { font-family: var(--font-display); text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; color: var(--white); margin: 0; }
.location .map__addr { color: var(--gray-300); font-size: .95rem; margin: 0; max-width: none; }
.map__actions { position: absolute; left: 20px; right: 20px; bottom: 20px; display: flex; flex-wrap: wrap; gap: 10px; }
.map.is-live .map__facade { display: none; }
@media (max-width: 639px) { .map { aspect-ratio: 1 / 1; } } /* phones: room for the pin above the stacked buttons */
.map::after { content: ""; position: absolute; inset: 0; border: 4px solid var(--red); border-radius: inherit; pointer-events: none; clip-path: inset(0 0 calc(100% - 4px) 0); }

/* ---------- faq ---------- */
.faq { background: var(--ink); }
.accordion { border-top: 1px solid rgba(255, 255, 255, .14); }
.qa { border-bottom: 1px solid rgba(255, 255, 255, .14); }
.qa summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 24px 56px 24px 0; min-height: 48px;
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: .02em; text-transform: uppercase;
  transition: color var(--t-fast) ease;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--red-bright); }
.qa summary::before, .qa summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 18px; height: 2px; background: var(--red-bright);
  transition: transform var(--t-med) var(--ease-out);
}
.qa summary::after { transform: rotate(90deg); }
.qa[open] summary::after { transform: rotate(0); }
.qa__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t-med) var(--ease-out); }
.qa__body > div { overflow: hidden; }
.qa__body p { padding-bottom: 24px; color: var(--gray-300); max-width: 68ch; }
.qa__body a { color: var(--white); text-decoration-color: var(--red); text-underline-offset: 4px; }
.qa.is-collapsed .qa__body { grid-template-rows: 0fr; }

/* ---------- red band ---------- */
.band { background: var(--red); color: #fff; padding-block: clamp(72px, 10vw, 128px); overflow: hidden; position: relative; }
.band::before {
  content: "DRIVEN"; position: absolute; right: -2%; bottom: -18%; font-family: var(--font-display); font-size: clamp(8rem, 26vw, 22rem); line-height: 1;
  color: rgba(0, 0, 0, .1); pointer-events: none; white-space: nowrap;
  transform: translateX(var(--band-x, 0%));
}
.band__grid { display: grid; gap: var(--s-4); align-items: center; position: relative; }
@media (min-width: 960px) { .band__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-6); } }
.band__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(2.8rem, 7vw, 5.6rem); line-height: .95; }
.band p { font-size: 1.1rem; max-width: 52ch; margin-bottom: var(--s-3); }
.socials { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- contact ---------- */
.contact { background: var(--black); }
.contact__quick { display: flex; justify-content: center; gap: 24px; margin-top: var(--s-3); flex-wrap: wrap; }
.contact__quick a {
  font-family: var(--font-cond); font-weight: 700; font-size: 1.15rem; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 6px; min-height: 44px; display: inline-flex; align-items: center;
}
.form { display: grid; gap: 20px; }
.form__row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field label { display: block; margin-bottom: 8px; font-weight: 600; }
.field .req, .field .optional { font-weight: 400; color: var(--gray-400); font-size: .9rem; }
.field input, .field textarea {
  width: 100%; min-height: 52px; padding: 14px 16px;
  background: var(--gray-900); color: var(--white);
  border: 1px solid #3a3a3a; border-radius: var(--radius);
  font: inherit; font-size: 1rem;
  transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field textarea:hover { border-color: #555; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 0; border-color: var(--red-bright); background: var(--gray-800); }
.field.has-error input, .field.has-error textarea { border-color: var(--red-bright); }
.field__error { color: #ff8a8d; font-size: .92rem; margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.field__error::before { content: "!"; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--red-bright); color: var(--black); font-weight: 700; font-size: .75rem; flex-shrink: 0; }
.form__error-summary { border: 2px solid var(--red-bright); border-radius: var(--radius); padding: 16px 20px; background: rgba(229, 72, 77, .08); }
.form__error-summary p { font-weight: 700; margin-bottom: 6px; }
.form__error-summary ul { list-style: disc; padding-left: 20px; }
.form__error-summary a { color: #ff8a8d; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form .btn { justify-self: center; min-width: 220px; }
.btn .spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.btn.is-loading { pointer-events: none; opacity: .85; }
.btn.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form__status { text-align: center; min-height: 1.6em; font-weight: 600; }
.form__status.is-success { color: #7ee2a8; }
.form__status.is-error { color: #ff8a8d; }

/* ---------- footer ---------- */
.footer { background: var(--black); border-top: 1px solid rgba(255, 255, 255, .08); padding-top: var(--s-6); color: var(--gray-300); }
.footer__grid { display: grid; gap: var(--s-5); padding-bottom: var(--s-5); }
@media (min-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1.3fr .8fr; } }
.brand--footer { width: 132px; margin-bottom: var(--s-3); }
.footer__247 { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; color: var(--white); margin-top: var(--s-2); }
.footer__h { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 1.35rem; color: var(--white); margin-bottom: var(--s-2); letter-spacing: .02em; }
.footer p { margin-bottom: 8px; }
.footer a { text-decoration: none; transition: color var(--t-fast) ease; }
.footer a:hover { color: var(--white); }
/* comfortable thumb-sized tap areas for call / text / email / back to top */
.footer p a, .footer__base a { display: inline-flex; align-items: center; min-height: 44px; }
.footer p:has(> a) { margin-bottom: 0; }
.footer__small { font-size: .92rem; color: var(--gray-400); }
.footer__social { display: flex; gap: 12px; margin-top: 18px; }
.footer__social a {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius); color: var(--white); background: rgba(255, 255, 255, .05);
  transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.footer__social a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.footer__social .icon { width: 24px; height: 24px; }
.footer__links { display: grid; gap: 2px; }
.footer__links a { display: inline-flex; min-height: 44px; align-items: center; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-block: 24px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: .9rem; color: var(--gray-400); }

/* ---------- sticky mobile CTA ---------- */
.sticky-cta {
  position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: var(--z-sticky);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 18px; border-radius: 10px;
  background: rgba(20, 20, 20, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .7);
  font-family: var(--font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  transform: translateY(160%); transition: transform var(--t-med) var(--ease-out);
}
.sticky-cta strong { color: var(--red-bright); font-size: 1.15rem; }
.sticky-cta.is-visible { transform: none; }
@media (min-width: 768px) { .sticky-cta { display: none; } }
@media (max-width: 767px) { .footer { padding-bottom: 88px; } }

/* =========================================================
   CRAFTED MOTION — initial states (only while .anim-ready,
   which is removed automatically if GSAP never boots)
   ========================================================= */

/* headline lines rise out of a mask, with a slight tilt that settles */
.lm { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.lm__in { display: block; transform-origin: 0 100%; }
.anim-ready [data-reveal] .lm__in { transform: translateY(112%) rotate(3deg); }
/* eyebrows wipe in from the left, starting with their red dash */
.anim-ready [data-reveal] .eyebrow { clip-path: inset(0 100% 0 0); }
/* supporting copy: a short, quiet rise */
.anim-ready [data-reveal] > :not(.eyebrow):not(h2):not(.h2):not(iframe):not(.map__facade),
.anim-ready a[data-reveal],
.anim-ready .program__body > * { opacity: 0; transform: translateY(16px); }
.program__body { position: relative; z-index: 3; }
/* images are revealed by a red curtain (added by JS) */
.anim-ready .program__media img, .anim-ready .tile img, .anim-ready .map__facade, .anim-ready .owner__photo img { clip-path: inset(0 100% 0 0); }
.anim-ready .owner__body > * { opacity: 0; transform: translateY(16px); }
.anim-ready .tile--stat { clip-path: inset(100% 0 0 0); }
.curtain { position: absolute; inset: 0; z-index: 4; background: var(--red); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- header scroll progress ---------- */
.progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red-display); transform: scaleX(0); transform-origin: left; }

/* ---------- buttons: label roll + fill sweep ---------- */
.btn { overflow: hidden; isolation: isolate; }
.btn > * { position: relative; z-index: 1; }
.btn--red::before {
  content: ""; position: absolute; inset: 0; z-index: 0; background: #7d121c;
  transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-out);
}
.btn--red:hover { background: var(--red); }
.btn--red:hover::before { transform: scaleX(1); transform-origin: left; }
.btn__roll { display: inline-block; overflow: hidden; height: 1.25em; line-height: 1.25; vertical-align: middle; }
.btn__roll > span { display: block; position: relative; transition: transform .55s var(--ease-out); }
.btn__roll > span::after {
  content: attr(data-label); content: attr(data-label) / "";
  position: absolute; left: 0; top: 100%; width: 100%; white-space: nowrap;
}
@media (hover: hover) { .btn:hover .btn__roll > span { transform: translateY(-100%); } }
.btn:hover .icon { transform: translate(3px, 0); }
.btn[href="#memberships"]:hover .icon, .hero__ctas .btn--red:hover .icon { transform: translateY(3px); }

/* ---------- cursor spotlight on cards ---------- */
.plan { overflow: hidden; }
.plan::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(180, 30, 43, .09), transparent 65%);
}
.plan--featured::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 37, 49, .22), transparent 65%); }
.plan > * { position: relative; }
.plan__badge { position: absolute; }
@media (hover: hover) { .plan:hover::before { opacity: 1; } }
.program__media::after {
  background:
    radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(212, 37, 49, var(--spot, 0)), transparent 60%),
    linear-gradient(180deg, rgba(11, 11, 11, 0) 25%, rgba(11, 11, 11, .92) 78%);
  transition: --spot .5s ease;
}
@property --spot { syntax: "<number>"; inherits: true; initial-value: 0; }
@media (hover: hover) { .program:hover { --spot: .28; } }

/* film grain on photography for a consistent, graded look */
.tile::after, .program::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.tile figcaption { z-index: 3; }
/* captions slide a red rule in on hover */
.tile figcaption::before { content: ""; display: block; width: 0; height: 2px; background: var(--red-display); margin-bottom: 10px; transition: width .6s var(--ease-out); }
@media (hover: hover) { .tile:hover figcaption::before { width: 40px; } }

/* ---------- odometer prices ---------- */
/* align-items: flex-start keeps each digit column its full 10 digits tall (it was being stretched to 1em, which broke the % offsets) */
/* JS sizes each slot to its digit's real width (this font's "1" is narrow), and the column centers inside it */
.odo { display: inline-flex; align-items: flex-start; justify-content: center; overflow: hidden; height: 1em; line-height: 1; vertical-align: top; transition: width .6s var(--ease-out); }
.odo__col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; height: auto; transition: transform 1.1s var(--ease-out); }
.odo__col > span { height: 1em; display: block; }
.odo__static { display: inline-block; }
.plan__price span.odo-wrap { display: inline-flex; line-height: 1; }

/* ---------- marquee (JS-driven velocity version) ---------- */
.marquee--js .marquee__track { animation: none; }
.marquee__track { will-change: transform; }

/* ---------- MEMBERSHIP FINDER: concierge questions + membership card ---------- */
.finder { background: var(--black); position: relative; overflow: hidden; }
.finder::before {
  content: ""; position: absolute; width: 900px; height: 900px; right: -320px; top: 10%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(180, 30, 43, .16), transparent);
}
.finder__grid { position: relative; display: grid; gap: var(--s-6); align-items: start; }
@media (min-width: 1024px) { .finder__grid { grid-template-columns: 1.2fr .8fr; gap: clamp(48px, 6vw, 96px); } }

/* questions */
.step-q { border: 0; margin: 0; padding: 4px 4px 44px; min-width: 0; }
.step-q legend {
  display: flex; align-items: baseline; gap: 14px; padding: 0; margin-bottom: 20px;
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: .1em; text-transform: uppercase;
}
.step-q__n { color: var(--red-bright); font-variant-numeric: tabular-nums; font-size: .85em; }
.step-q__wrap { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .7s var(--ease-out), opacity .45s ease; }
/* padding lives inside the collapsing area so closed questions take up no space */
.step-q__wrap > .step-q { overflow: hidden; min-height: 0; padding: 0 12px; margin: 0 -8px; }
.step-q__wrap > .step-q .opts { padding: 8px 0 44px; }
.step-q__wrap.is-open { grid-template-rows: 1fr; opacity: 1; }

.opts { display: grid; gap: 12px; }
@media (min-width: 640px) { .opts--2 { grid-template-columns: repeat(2, 1fr); } .opts--3 { grid-template-columns: repeat(3, 1fr); } }
.opt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 88px; padding: 18px 20px; cursor: pointer;
  background: rgba(255, 255, 255, .02); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  /* no transform transition here: GSAP animates the entrance, and a CSS transition would make it lag */
  transition: border-color .3s ease, background-color .3s ease;
}
.opt input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* soft haze that follows the cursor, same as the membership card */
.opt { isolation: isolate; overflow: hidden; }
.opt::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .10), transparent 60%);
  opacity: 0; transition: opacity .4s ease;
}
.opt:has(input:checked)::before { background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(229, 72, 77, .30), transparent 60%); }
@media (hover: hover) { .opt:hover::before { opacity: 1; } }
.opt__body { display: grid; gap: 4px; }
.opt__title { font-family: var(--font-cond); font-weight: 700; font-size: 1.25rem; letter-spacing: .03em; text-transform: uppercase; line-height: 1.1; }
.opt__title em {
  font-style: normal; display: inline-block; vertical-align: 2px; margin-left: 8px; padding: 2px 7px;
  font-size: .68rem; letter-spacing: .14em; color: var(--red-bright); border: 1px solid rgba(229, 72, 77, .5); border-radius: 2px;
}
.opt__sub { font-size: .92rem; color: var(--gray-400); line-height: 1.35; }
.opt__check {
  position: relative; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .28); transition: background-color .3s ease, border-color .3s ease;
}
.opt__check::after {
  content: ""; position: absolute; left: 6.5px; top: 3.5px; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease-out);
}
@media (hover: hover) { .opt:hover { border-color: rgba(255, 255, 255, .32); background: rgba(255, 255, 255, .045); } }
.opt:active { transform: scale(.985); }
.opt:has(input:checked) {
  border-color: var(--red-display);
  background: linear-gradient(160deg, rgba(180, 30, 43, .18), rgba(180, 30, 43, .04));
  box-shadow: inset 0 0 0 1px var(--red-display);
}
.opt:has(input:checked) .opt__check { background: var(--red); border-color: var(--red); }
.opt:has(input:checked) .opt__check::after { transform: rotate(45deg) scale(1); }
.opt:has(input:focus-visible) { outline: 3px solid var(--white); outline-offset: 3px; }

.finder__hint { display: flex; align-items: baseline; gap: 10px; margin-top: 14px; color: var(--gray-400); font-size: .95rem; }
.finder__hint::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--red-display); transform: rotate(45deg) translateY(-2px); }
.finder__hint strong { color: var(--white); font-weight: 600; }
.finder__reset {
  background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; color: var(--gray-400);
  font-family: var(--font-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .85rem;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .25);
}
.finder__reset:hover { color: var(--white); }

/* the membership card */
@media (min-width: 1024px) { .finder__result { position: sticky; top: calc(var(--header-h) + 32px); } }
.pass {
  --rx: 0deg; --ry: 0deg;
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-rows: auto 1fr auto;
  width: 100%; max-width: 480px; aspect-ratio: 1.586; padding: clamp(20px, 3vw, 30px);
  border-radius: 20px; color: var(--white);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 3px),
    radial-gradient(120% 140% at 100% 0%, rgba(180, 30, 43, .38), transparent 55%),
    linear-gradient(145deg, #262626 0%, #0f0f0f 55%, #171717 100%);
  border: 1px solid rgba(255, 255, 255, .13);
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95), 0 18px 40px -20px rgba(180, 30, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .14);
  transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .7s var(--ease-out);
}
.pass__shine {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 25%) var(--my, 0%), rgba(255, 255, 255, .11), transparent 45%);
}
.pass__shine::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .22) 50%, transparent 65%);
  transform: translateX(-110%);
}
.pass.is-swap .pass__shine::after { animation: pass-sheen 1.1s var(--ease-out); }
@keyframes pass-sheen { to { transform: translateX(110%); } }
.pass__top { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.pass__brand { font-family: var(--font-cond); font-weight: 700; font-size: .8rem; letter-spacing: .26em; text-transform: uppercase; color: var(--gray-300); }
.pass__nfc { width: 24px; height: 24px; fill: none; stroke: var(--gray-300); stroke-width: 1.6; stroke-linecap: round; transform: rotate(90deg); }
.pass__mtn {
  position: absolute; z-index: 1; width: 78%; right: -10%; top: 24%;
  fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .09); stroke-width: 4; stroke-linejoin: round; --mtn-snow: rgba(255, 255, 255, .07);
}
.pass__main { position: relative; z-index: 2; align-self: end; padding-bottom: 14px; }
.pass__label { font-family: var(--font-cond); font-weight: 700; font-size: .74rem; letter-spacing: .24em; text-transform: uppercase; color: var(--red-bright); margin-bottom: 6px; }
.pass__name { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.8rem, 3.2vw, 2.6rem); line-height: 1; margin-bottom: 8px; }
.pass__price { display: flex; align-items: baseline; gap: 10px; }
.pass__price > span { font-family: var(--font-display); font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; display: inline-flex; }
.pass__price small { font-size: .95rem; color: var(--gray-400); }
.pass__bottom {
  position: relative; z-index: 2; display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1);
  font-family: var(--font-cond); font-weight: 600; font-size: .76rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gray-400);
}
.pass.is-empty .pass__name { color: var(--gray-500); font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.pass.is-empty .pass__price > span { color: var(--gray-700); }

/* details under the card */
.finder__info { margin-top: 28px; max-width: 480px; }
.finder__lines { display: grid; gap: 8px; }
.finder__lines li { display: flex; gap: 12px; align-items: baseline; color: var(--gray-300); }
.finder__lines li::before { content: ""; width: 6px; height: 6px; flex-shrink: 0; background: var(--red-display); transform: rotate(45deg) translateY(-2px); }
.finder__tip { margin-top: 18px; padding: 12px 16px; border-left: 2px solid var(--red-display); background: rgba(255, 255, 255, .03); color: var(--white); font-size: .95rem; }
.finder__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 26px; }
.finder__empty { margin-top: 22px; color: var(--gray-500); font-size: .95rem; }
.finder__info.is-in > * { animation: moment-in .6s var(--ease-out) both; }
.finder__info.is-in > *:nth-child(2) { animation-delay: .06s; }
.finder__info.is-in > *:nth-child(3) { animation-delay: .12s; }
@keyframes moment-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* ---------- FAQ: two columns with a sticky heading ---------- */
.faq__grid { display: grid; gap: var(--s-4); }
@media (min-width: 1024px) {
  .faq__grid { grid-template-columns: .85fr 1.15fr; gap: var(--s-7); align-items: start; }
  .faq__head { position: sticky; top: calc(var(--header-h) + 32px); margin-bottom: 0; }
}
.faq__head .section-head__lead a { color: var(--white); text-decoration-color: var(--red); text-underline-offset: 4px; }
.qa summary span.qa__n { color: var(--gray-500); margin-right: 14px; font-variant-numeric: tabular-nums; }
.qa { position: relative; }
.qa::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--red-display); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease-out); }
@media (hover: hover) { .qa:hover::after { transform: scaleX(1); } }
.qa[open]::after { transform: scaleX(1); }

/* ---------- mobile-designed: training becomes a swipe deck ---------- */
.carousel-meta { display: none; }
@media (max-width: 639px) {
  .programs {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .programs::-webkit-scrollbar { display: none; }
  .program { flex: 0 0 84%; scroll-snap-align: start; min-height: 440px; }
  .carousel-meta { display: flex; align-items: center; gap: 14px; margin-top: 18px; font-family: var(--font-cond); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .9rem; color: var(--gray-400); }
  .carousel-meta b { color: var(--white); font-weight: 700; }
  .carousel-meta__bar { flex: 1; height: 2px; background: var(--gray-700); position: relative; overflow: hidden; }
  .carousel-meta__bar span { position: absolute; inset: 0; background: var(--red-display); transform-origin: left; transform: scaleX(.333); transition: transform .3s var(--ease-out); }
}
@media (max-width: 639px) and (pointer: coarse) { .program:active .program__media img { transform: scale(1.03); } }

/* ---------- footer mega wordmark ---------- */
.footer__mega {
  position: relative; overflow: hidden; line-height: .8; padding-top: 2vw;
  font-family: var(--font-display); text-transform: uppercase; font-size: clamp(5rem, 27vw, 26rem); letter-spacing: -.01em;
  text-align: center; user-select: none;
}
.footer__mega-outline { display: block; color: transparent; -webkit-text-stroke: 1px rgba(244, 242, 238, .16); }
.footer__mega-fill { position: absolute; inset: 2vw 0 0 0; color: var(--red); clip-path: inset(0 calc(100% - var(--p, 0%)) 0 0); }
html:not(.anim-ready) .footer__mega-fill { --p: 100%; }

/* ---------- form: drawn focus underline + success pulse ---------- */
.field { position: relative; }
.field::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--red-display); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); pointer-events: none; }
.field:has(input)::after { top: calc(100% - 2px); }
.field:has(.field__error:not([hidden]))::after { display: none; }
.field:focus-within::after { transform: scaleX(1); }
.form__status.is-success::before { content: ""; display: inline-block; width: 10px; height: 18px; margin-right: 10px; border: solid currentColor; border-width: 0 3px 3px 0; transform: rotate(45deg) translateY(-3px); animation: tick .5s var(--ease-out); }
@keyframes tick { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

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

/* ---------- dumbbell cursor (mouse only; touch screens have no cursor) ---------- */
/* white dumbbell everywhere, red over anything clickable; hotspot is the top-left plate */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'32'%20height%3D'32'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20transform%3D'rotate(45%2016%2016)%20translate(16%2016)%20scale(.92)%20translate(-16%20-16)'%20fill%3D'%23f4f2ee'%20stroke%3D'%230b0b0b'%20stroke-width%3D'1.7'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'10.5'%20y%3D'14'%20width%3D'11'%20height%3D'4'%20rx%3D'.8'%2F%3E%3Crect%20x%3D'7'%20y%3D'10.5'%20width%3D'4.2'%20height%3D'11'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'20.8'%20y%3D'10.5'%20width%3D'4.2'%20height%3D'11'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'1.8'%20y%3D'8.3'%20width%3D'5.6'%20height%3D'15.4'%20rx%3D'1.6'%2F%3E%3Crect%20x%3D'24.6'%20y%3D'8.3'%20width%3D'5.6'%20height%3D'15.4'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 6, auto; }
  a[href], button, label, summary, select, [role="tab"], [role="button"], .opt, .loader,
  input[type="radio"], input[type="checkbox"], input[type="submit"] {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'32'%20height%3D'32'%20viewBox%3D'0%200%2032%2032'%3E%3Cg%20transform%3D'rotate(45%2016%2016)%20translate(16%2016)%20scale(.92)%20translate(-16%20-16)'%20fill%3D'%23e5484d'%20stroke%3D'%230b0b0b'%20stroke-width%3D'1.7'%20stroke-linejoin%3D'round'%3E%3Crect%20x%3D'10.5'%20y%3D'14'%20width%3D'11'%20height%3D'4'%20rx%3D'.8'%2F%3E%3Crect%20x%3D'7'%20y%3D'10.5'%20width%3D'4.2'%20height%3D'11'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'20.8'%20y%3D'10.5'%20width%3D'4.2'%20height%3D'11'%20rx%3D'1.2'%2F%3E%3Crect%20x%3D'1.8'%20y%3D'8.3'%20width%3D'5.6'%20height%3D'15.4'%20rx%3D'1.6'%2F%3E%3Crect%20x%3D'24.6'%20y%3D'8.3'%20width%3D'5.6'%20height%3D'15.4'%20rx%3D'1.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 6 6, pointer !important;
  }
  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), textarea { cursor: text !important; }
}

/* Senica's portrait is pre-graded (black & white with his red tie kept in color), so skip the owner-photo grayscale */
.owner__photo img.owner__img--keep-color { filter: contrast(1.04) brightness(.97); }
@media (hover: hover) { .owner:hover .owner__photo img.owner__img--keep-color { filter: contrast(1.08) brightness(1.02); } }

/* shop: the secure-checkout line stands out a little more (red lock badge + bold lead-in) */
.shop__note { display: flex; align-items: center; gap: 14px; color: #3a3a3a; font-size: 1.02rem; line-height: 1.45; }
.shop__note strong { display: block; font-family: var(--font-cond); font-weight: 700; font-size: 1.05rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.shop__lock { flex-shrink: 0; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 5px rgba(180, 30, 43, .12), 0 10px 20px -10px rgba(180, 30, 43, .7); }
.shop__lock svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* shop trust strip: three badges + the button, filling the row under the ticker */
.shop__trust { display: grid; gap: 18px 28px; flex: 1 1 auto; }
@media (min-width: 720px) { .shop__trust { grid-template-columns: repeat(3, auto); justify-content: start; } }
.shop__trust li { display: flex; align-items: center; gap: 14px; }
.shop__trust span:last-child { display: grid; gap: 2px; font-size: .95rem; line-height: 1.35; color: #4a4a4a; }
.shop__trust strong { font-family: var(--font-cond); font-weight: 700; font-size: 1.02rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.shop__trust a { color: var(--red); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(180, 30, 43, .35); }
.shop__trust a:hover { border-bottom-color: var(--red); }
.shop { padding-bottom: clamp(56px, 7vw, 96px); }
/* trust strip layout: three items spread across the full width; the button sits on the right */
.shop__foot { display: grid; grid-template-columns: 1fr; align-items: center; gap: 24px 40px; }
@media (min-width: 720px) { .shop__trust { grid-template-columns: repeat(3, 1fr); justify-content: stretch; } }
.shop__foot > .btn { justify-self: end; }
@media (min-width: 1200px) { .shop__foot { grid-template-columns: 1fr auto; } }
@media (max-width: 719px) { .shop__foot > .btn { justify-self: stretch; } }

/* PREVIEW (?marquee=reviews): reviews ticker styling for the red strip under the hero */
.marquee--reviews { position: relative; padding: 16px 0; }
.marquee--reviews .marquee__track { gap: 34px; }
.marquee--reviews .rv { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; font-weight: 400; }
.marquee--reviews .rv__stars { display: inline-flex; gap: 2px; }
.marquee--reviews .rv__stars svg { width: 20px; height: 20px; fill: var(--black); }
/* a glint ripples through the five stars every few seconds: each pops and flashes white in turn */
.marquee--reviews .rv__stars svg { animation: rv-star 3.2s cubic-bezier(.34, 1.56, .64, 1) infinite; transform-origin: 50% 55%; }
.marquee--reviews .rv__stars svg:nth-child(2) { animation-delay: .09s; }
.marquee--reviews .rv__stars svg:nth-child(3) { animation-delay: .18s; }
.marquee--reviews .rv__stars svg:nth-child(4) { animation-delay: .27s; }
.marquee--reviews .rv__stars svg:nth-child(5) { animation-delay: .36s; }
@keyframes rv-star {
  0%, 62%, 100% { transform: scale(1) rotate(0); fill: var(--black); }
  70% { transform: scale(1.32) rotate(-12deg); fill: #fff; }
  80% { transform: scale(1) rotate(0); fill: var(--black); }
}
@media (prefers-reduced-motion: reduce) { .marquee--reviews .rv__stars svg { animation: none; } }
.marquee--reviews .rv__q { font-family: var(--font-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); text-transform: uppercase; line-height: 1; }
.marquee--reviews .rv__n { font-family: var(--font-cond); font-weight: 700; font-size: .85rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.marquee--reviews .rv__n::before { content: "— "; }
.marquee .marquee__badge {
  position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 28px 0 var(--gutter);
  background: linear-gradient(90deg, var(--black) 75%, transparent); color: #fff;
  font-family: var(--font-cond); font-weight: 700; font-size: .85rem; letter-spacing: .18em; text-transform: uppercase;
}
.marquee .marquee__badge svg { width: 16px; height: 16px; fill: var(--red-bright); }
@media (max-width: 639px) { .marquee .marquee__badge { font-size: .72rem; padding-right: 18px; } }

/* ---------- The Floor: 3D Driven plate (top right of the section head) ---------- */
.floor-aside { display: grid; gap: clamp(20px, 3vw, 36px); }
#floor { overflow-x: clip; } /* the plate rolls in from off the right edge */
.plate3d {
  --size: clamp(150px, 40vw, 190px); --rx: 10deg; --ry: -18deg; --spin: 0deg; --gx: 36%; --gy: 30%; --sx: 0px;
  position: relative; width: var(--size); aspect-ratio: 1; perspective: 900px; justify-self: end; -webkit-tap-highlight-color: transparent;
}
.plate3d::before { /* red glow behind the plate */
  content: ""; position: absolute; inset: 6%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(180, 30, 43, .42), rgba(180, 30, 43, 0)); filter: blur(28px); transform: scale(1.25);
}
.plate3d__shadow {
  position: absolute; left: 12%; right: 12%; bottom: -16%; height: 14%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); filter: blur(5px); transform: translateX(var(--sx));
}
.plate3d__body { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); will-change: transform; }
.plate3d__spin { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotate(var(--spin)); will-change: transform; }
.plate3d__edge { position: absolute; inset: 0; border-radius: 50%; transform: translateZ(var(--z)); }
.plate3d__face { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: 50%; transform: translateZ(0); }
/* light that moves as the plate tilts, plus a brushed-metal sheen. PERFORMANCE: both are pre-drawn layers that only
   slide/rotate (GPU-composited, no repaint), with no blend mode, so the plate costs almost nothing per frame. */
.plate3d__glare { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; transform: translateZ(.5px); pointer-events: none; }
.plate3d__glare::before {
  content: ""; position: absolute; inset: -50%;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .2), rgba(255, 255, 255, .045) 16%, rgba(255, 255, 255, 0) 29%);
  transform: translate3d(var(--lx, -14%), var(--ly, -20%), 0); will-change: transform;
}
.plate3d__glare::after {
  content: ""; position: absolute; inset: 0;
  background: conic-gradient(rgba(255, 255, 255, 0) 0 12%, rgba(255, 255, 255, .06) 18%, rgba(255, 255, 255, 0) 24% 62%, rgba(255, 255, 255, .045) 68%, rgba(255, 255, 255, 0) 74%);
  transform: rotate(var(--sheen, -54deg)); will-change: transform;
}
.plate3d__ring-text text { font-family: var(--font-cond); font-weight: 700; font-size: 10.5px; fill: #000; opacity: .8; }
.plate3d__ring-text text.is-top { fill: #858585; opacity: 1; }
.plate3d__num { font-family: var(--font-display); font-size: 14px; letter-spacing: 3px; fill: #000; opacity: .8; }
.plate3d__num.is-top { fill: #d9d7d2; opacity: 1; }
.plate3d__lb { font-family: var(--font-display); font-size: 21px; letter-spacing: 2px; fill: #000; opacity: .8; }
.plate3d__lb.is-top { fill: #f4f2ee; opacity: 1; }
.plate3d__mtn { fill: var(--red-display); --mtn-snow: #f4f2ee; }
@media (min-width: 960px) {
  .floor-aside { align-self: stretch; grid-template-rows: 1fr auto; }
  .plate3d { --size: clamp(230px, 20vw, 290px); justify-self: center; align-self: center; }
}
/* Floor head on desktop: the title sits level with the plate (centered beside it), the lead tucks under the plate */
@media (min-width: 960px) {
  #floor .section-head--split { grid-template-rows: auto auto; align-items: center; row-gap: clamp(18px, 2vw, 28px); }
  #floor .floor-aside { display: contents; }
  #floor .section-head--split > div:first-child { grid-column: 1; grid-row: 1; }
  #floor .plate3d { grid-column: 2; grid-row: 1; }
  #floor .floor-aside .section-head__lead { grid-column: 2; grid-row: 2; align-self: start; }
}
/* phones: small text links (phone numbers, "Text us", "Send us a message") get a bigger invisible tap area; nothing moves */
@media (pointer: coarse), (max-width: 767px) {
  .section-head__lead a, .qa__body a, .shop__trust a, .footer p a { position: relative; }
  .section-head__lead a::before, .qa__body a::before, .shop__trust a::before, .footer p a::before { content: ""; position: absolute; inset: -11px -6px; }
}
/* ---------- footer, PHONES ONLY: compact layout (desktop untouched) ----------
   logo + tagline in one row; "Find us" and "Explore" side by side; "Get in touch" full width with the social buttons beside the details */
@media (max-width: 639px) {
  .footer { padding-top: 44px; }
  .footer__grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "find explore" "touch touch"; gap: 26px 20px; padding-bottom: 26px; }
  .footer__grid > :nth-child(1) { grid-area: brand; display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 18px; }
  .footer__grid > :nth-child(1) .brand { grid-row: span 2; }
  .footer__grid > :nth-child(1) p { margin: 0; font-size: .92rem; }
  .footer__grid > :nth-child(2) { grid-area: find; }
  .footer__grid > :nth-child(3) { grid-area: touch; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: start; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .08); }
  .footer__grid > :nth-child(3) > :not(.footer__social) { grid-column: 1; }
  .footer__grid > :nth-child(3) .footer__social { grid-column: 2; grid-row: 1 / span 4; flex-direction: column; margin-top: 0; }
  .footer__grid > :nth-child(4) { grid-area: explore; }
  .footer__247 { font-size: 1.15rem; margin-top: 4px; }
  .footer__h { font-size: 1.15rem; margin-bottom: 8px; }
  .footer__links { gap: 0; }
  .footer__links a, .footer p a { min-height: 40px; }
  .footer__base { padding-block: 14px; flex-wrap: nowrap; align-items: center; gap: 10px; font-size: .8rem; }
  .footer__base p { margin: 0; }
}
/* ---------- finder step tracker (rail + nodes built by main.js) ---------- */
.finder__form.has-rail { position: relative; padding-left: 46px; }
.frail { position: absolute; left: 0; top: 0; bottom: 0; width: 24px; pointer-events: none; }
.frail__track, .frail__fill { position: absolute; left: 11px; width: 2px; border-radius: 2px; }
.frail__track { background: rgba(255, 255, 255, .1); }
.frail__fill {
  height: 0; background: linear-gradient(var(--red-display), var(--red)); box-shadow: 0 0 12px rgba(212, 37, 49, .55);
  transition: height .75s var(--ease-out);
}
.fnode {
  position: absolute; left: 3px; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%;
  display: grid; place-items: center; background: #121212; border: 1.5px solid rgba(255, 255, 255, .26);
  opacity: 0; transform: scale(.5);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1), background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.fnode.is-on { opacity: 1; transform: scale(1); }
.fnode svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .45s ease .12s; }
.fnode.is-done { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(180, 30, 43, .18), 0 0 16px rgba(212, 37, 49, .45); }
.fnode.is-done svg { stroke-dashoffset: 0; }
/* the current step breathes so the eye knows where to go next */
.fnode.is-current { border-color: var(--red-bright); }
.fnode.is-current::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid var(--red-display); opacity: 0; animation: fnode-pulse 2.2s ease-out infinite; }
@keyframes fnode-pulse { 0% { opacity: .9; transform: scale(.7); } 100% { opacity: 0; transform: scale(1.5); } }
.fnode--plan { left: 1px; width: 22px; height: 22px; margin-top: -11px; }
.fnode--plan svg { width: 14px; height: 14px; }

/* faded preview of the steps still ahead */
.finder__ahead { list-style: none; margin: -14px 0 18px; padding: 0; }
.finder__ahead li {
  overflow: hidden; max-height: 70px; padding: 6px 0 26px;
  font-family: var(--font-cond); font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.2rem); letter-spacing: .1em; text-transform: uppercase;
  color: rgba(244, 242, 238, .2); transition: max-height .6s var(--ease-out), padding .6s var(--ease-out), opacity .4s ease, color .4s ease;
}
.finder__ahead-n { margin-right: 12px; font-size: .85em; color: rgba(229, 72, 77, .35); }
.finder__ahead li.is-gone { max-height: 0; padding-block: 0; opacity: 0; }
.finder__ahead li.finder__ahead-plan { color: rgba(244, 242, 238, .3); }
.finder__ahead li.finder__ahead-plan.is-done { color: var(--white); }
.finder__ahead-plan strong { color: var(--red-bright); font-weight: 700; }
@media (max-width: 639px) { .finder__form.has-rail { padding-left: 36px; } }
@media (prefers-reduced-motion: reduce) { .fnode.is-current::after { animation: none; } .frail__fill { transition: none; } }
/* ---------- membership card: per-day price, holographic foil on hover, and a heavy drop when a plan is matched ---------- */
.pass__daily { margin-top: 6px; font-family: var(--font-cond); font-weight: 600; font-size: .9rem; letter-spacing: .06em; color: var(--gray-400); }
.pass__daily span { color: var(--red-bright); font-weight: 700; font-variant-numeric: tabular-nums; }
/* foil: an iridescent band (brand red, white, a cool silver) that slides with the tilt (--mx/--my from main.js) */
.pass__holo {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; mix-blend-mode: color-dodge; opacity: 0; /* hidden at rest: the card only goes holographic while the cursor is on it */
  background: linear-gradient(115deg, transparent 22%, rgba(229, 72, 77, .38) 36%, rgba(255, 255, 255, .5) 46%, rgba(150, 170, 255, .28) 56%, transparent 72%);
  background-size: 260% 260%; background-position: var(--mx, 30%) var(--my, 30%);
  transition: opacity .5s ease;
}
@media (hover: hover) { .pass-wrap:hover .pass__holo { opacity: .7; } }
/* heavy drop: each time a plan is matched the card lifts, slams down with a short shake (like setting down a heavy plate),
   and a dust shadow puffs out underneath on impact */
.pass-wrap { position: relative; max-width: 480px; isolation: isolate; } /* keeps the dust behind the card but in front of the section */
.pass.is-swap { animation: pass-drop .9s both; }
@keyframes pass-drop {
  0% { transform: perspective(1100px) translateY(0); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
  24% { transform: perspective(1100px) translateY(-22px) rotateX(9deg) scale(1.03); animation-timing-function: cubic-bezier(.6, 0, 1, .6); }
  46% { transform: perspective(1100px) translateY(4px) rotateX(-2deg) scale(.985); }
  56% { transform: perspective(1100px) translate(-4px, 0); }
  64% { transform: perspective(1100px) translate(3px, 0); }
  72% { transform: perspective(1100px) translate(-2px, 0); }
  80% { transform: perspective(1100px) translate(1px, 0); }
  100% { transform: perspective(1100px) translate(0, 0); }
}
/* chalk-dust puff (pale with a hint of red, so it reads on the dark section), plus two wisps that kick out to the sides */
.pass-dust {
  position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -16px; height: 36px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(244, 242, 238, .4), rgba(212, 37, 49, .3) 55%, transparent);
  filter: blur(7px); opacity: 0; transform: scaleX(.6);
}
.pass-dust::before, .pass-dust::after {
  content: ""; position: absolute; bottom: 6px; width: 34%; height: 22px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(244, 242, 238, .45), transparent); opacity: 0;
}
.pass-dust::before { left: -4%; }
.pass-dust::after { right: -4%; }
.pass.is-swap + .pass-dust { animation: pass-dust .85s ease-out .38s both; }
.pass.is-swap + .pass-dust::before { animation: pass-wisp-l .8s ease-out .4s both; }
.pass.is-swap + .pass-dust::after { animation: pass-wisp-r .8s ease-out .4s both; }
@keyframes pass-dust { 0% { opacity: 0; transform: scaleX(.6) scaleY(.6); } 18% { opacity: 1; transform: scaleX(1) scaleY(1); } 100% { opacity: 0; transform: scaleX(1.3) scaleY(1.5); } }
@keyframes pass-wisp-l { 0% { opacity: 0; transform: translateX(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(-46px) translateY(-6px) scale(1.2); } }
@keyframes pass-wisp-r { 0% { opacity: 0; transform: translateX(0) scale(.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateX(46px) translateY(-6px) scale(1.2); } }
/* phones only: the per-day line needs a little more card height so nothing crowds */
@media (max-width: 479px) { .pass { aspect-ratio: 1.3; } }

/* ---------- finder head: neon "24/7" (white tube outline, red glow) ----------
   flickers on like an OPEN sign when it scrolls into view (main.js adds .is-on), then glows with a slow breath.
   desktop: centered in the right column, replacing the description; main.js lines its top up with the title's top.
   phones: beside the two title lines, vertically centered on them (main.js), with the description below. */
.finder-aside { position: relative; }
.finder-ghost {
  display: block; margin-top: var(--fg-offset, 0px); pointer-events: none; user-select: none; white-space: nowrap;
  font-family: var(--font-display); line-height: .8; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.6px rgba(244, 242, 238, .25);
}
.finder-ghost em { font-style: normal; }
.finder-ghost.is-on { -webkit-text-stroke-color: #fff; text-shadow: 0 0 6px rgba(229, 72, 77, .55), 0 0 22px rgba(229, 72, 77, .35), 0 0 60px rgba(180, 30, 43, .3); will-change: opacity; animation: fg-flicker 1.4s steps(1, end) both, fg-breathe 3.2s ease-in-out 1.4s infinite; } /* PERFORMANCE: the glow is fixed; the breath is an opacity fade (GPU, no repaint) */
@media (min-width: 960px) {
  #finder .finder-aside { align-self: stretch; display: flex; justify-content: center; align-items: flex-start; }
  #finder .finder-aside .section-head__lead { display: none; } /* desktop: the 24/7 replaces the description */
  .finder-ghost { font-size: clamp(7rem, 12vw, 11rem); }
}
@media (max-width: 959px) {
  #finder .section-head--split { grid-template-columns: 1fr auto; column-gap: 14px; }
  #finder .section-head--split > div:first-child { grid-column: 1 / -1; grid-row: 1; } /* full width, so the eyebrow never wraps; the 24/7 sits in the space beside the title lines */
  #finder .finder-aside { display: contents; }
  #finder .finder-ghost { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; position: relative; z-index: 1; font-size: min(3.1rem, 12.5vw); -webkit-text-stroke-width: 1.1px; /* a touch smaller so it sits comfortably beside the title */ }
  #finder .finder-aside .section-head__lead { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 359px) { #finder .finder-ghost { display: none; } } /* the very smallest phones have no room beside the title */
@keyframes fg-flicker {
  0% { opacity: .15; } 8% { opacity: 1; } 12% { opacity: .2; } 20% { opacity: 1; } 24% { opacity: .35; } 30% { opacity: 1; } 62% { opacity: .55; } 66%, 100% { opacity: 1; }
}
@keyframes fg-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
@media (prefers-reduced-motion: reduce) { .finder-ghost.is-on { animation: none; text-shadow: 0 0 6px rgba(229, 72, 77, .55), 0 0 22px rgba(229, 72, 77, .35); } }

/* ---------- finder: tapered "C" swoosh beside "Join with this plan" (desktop, built by main.js) ----------
   starts under the button, curls out to the right and comes back into the button. The body is a filled,
   brush-tapered shape revealed by a stroked mask, then the arrowhead springs in. */
.finder__cta { position: relative; }
.fswoosh {
  position: absolute; left: 0; top: 0; width: 150px; height: 160px; z-index: 2; /* left/top set by main.js from the button */ pointer-events: none; overflow: visible;
  opacity: 0; transition: opacity .25s ease; filter: drop-shadow(0 0 5px rgba(229, 72, 77, .5));
}
.fswoosh.is-on { opacity: 1; }
.fswoosh__reveal { stroke-dasharray: var(--len, 260); stroke-dashoffset: var(--len, 260); }
.fswoosh.is-drawn .fswoosh__reveal { stroke-dashoffset: 0; transition: stroke-dashoffset .95s cubic-bezier(.55, 0, .25, 1); }
.fswoosh__head { fill: #ff5a5f; opacity: 0; transform-box: fill-box; transform-origin: 70% 50%; transform: scale(.3); }
.fswoosh.is-drawn .fswoosh__head { opacity: 1; transform: scale(1); transition: opacity .2s ease .8s, transform .5s cubic-bezier(.3, 1.6, .5, 1) .8s; }
@media (max-width: 1023px) { .fswoosh { display: none; } }
@media (min-width: 1280px) { .fswoosh { transform: scale(1.2); transform-origin: 60px 30px; } } /* wider gap on big screens: a bit more presence (scaled around the button point) *//* the button answers with a glowing pulse when the arrow arrives */
.btn.is-nudge { animation: join-nudge 1.3s ease-out; }
@keyframes join-nudge {
  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .7); transform: scale(1); }
  18% { transform: scale(1.04); }
  36% { transform: scale(1); }
  100% { box-shadow: 0 0 0 18px rgba(229, 72, 77, 0); }
}
@media (prefers-reduced-motion: reduce) { .fswoosh.is-drawn .fswoosh__reveal, .fswoosh.is-drawn .fswoosh__head { transition: none; } .btn.is-nudge { animation: none; } }
/* ---------- Meet the owners, top-right (desktop only): the owners "sign off" on the gym ----------
   each name writes itself left to right (a clip-path wipe) with a glowing pen tip leading the stroke; Dan first, then
   Senica. PLACEHOLDER: script-font names (Mrs Saint Delafield, from Google Fonts) until the owners send real signatures. */
.team-aside { position: relative; }
.sigs { display: none; }
@media (min-width: 960px) {
  #team .team-aside { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; }
  #team .team-aside .section-head__lead { display: none; } /* desktop: the signatures replace the description */
  #team .section-head--split { align-items: start; } /* title pinned to the top, so lining the signatures up can't push it around */
  .sigs { display: grid; justify-items: start; } /* stacked directly under each other; main.js lines each one up with a line of the title */
  .sig { margin: 0; display: flex; align-items: baseline; gap: 16px; }
  .sig__line { position: relative; display: inline-block; transform: rotate(-2deg); transform-origin: left bottom; } /* nearly parallel with the title */
  .sig__ink {
    display: inline-block; padding: .12em .32em .2em .04em; white-space: nowrap;
    font-family: "Mrs Saint Delafield", "Brush Script MT", cursive; font-size: clamp(3rem, 4vw, 4.4rem); line-height: 1; color: var(--white);
    text-shadow: 0 0 18px rgba(255, 255, 255, .12);
    clip-path: inset(-30% 100% -30% 0);
  }
  /* the pen tip: a small glowing point that rides the edge of the ink as it's written */
  .sig__line::after {
    content: ""; position: absolute; left: 0; top: 58%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, .7), 0 0 18px 6px rgba(229, 72, 77, .55); opacity: 0;
  }
  .sig figcaption {
    font-family: var(--font-cond); font-weight: 700; font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red-bright);
    opacity: 0; transform: translateY(4px); transition: opacity .5s ease, transform .5s var(--ease-out);
  }
  .sigs.is-signed .sig__ink { animation: sig-write 1.5s cubic-bezier(.45, .05, .35, 1) forwards; }
  .sigs.is-signed .sig__line::after { animation: sig-pen 1.5s cubic-bezier(.45, .05, .35, 1) forwards; }
  .sigs.is-signed .sig:nth-child(2) .sig__ink, .sigs.is-signed .sig:nth-child(2) .sig__line::after { animation-delay: 1.15s; }
  .sigs.is-signed .sig figcaption { opacity: 1; transform: none; transition-delay: 1.2s; }
  .sigs.is-signed .sig:nth-child(2) figcaption { transition-delay: 2.35s; }
}
@keyframes sig-write { to { clip-path: inset(-30% 0 -30% 0); } }
@keyframes sig-pen { 0% { left: 0; opacity: 0; } 6% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sigs .sig__ink { clip-path: none; animation: none !important; } .sigs .sig__line::after { display: none; } .sigs .sig figcaption { opacity: 1; transform: none; } }

/* footer "DRIVEN" stamp: the red shockwave ring behind the word on impact (main.js) */
.mega-shock {
  position: absolute; left: 50%; top: 55%; width: 60%; aspect-ratio: 3 / 1; margin: -10% 0 0 -30%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(229, 72, 77, .55), rgba(229, 72, 77, .15) 60%, transparent); filter: blur(6px);
}
/* big screens: the hero (logo/menu bar, text and photo) is nudged a little to the left, together, so nothing loses
   alignment. Grows gently with screen width: 0 at 1400px, about 31px at 1920px, max 40px. Laptops and phones unchanged. */
:root { --hero-shift: clamp(0px, (100vw - 1400px) * .06, 40px); }
.header .container, .hero .container { position: relative; left: calc(var(--hero-shift) * -1); }
/* page scrollbar: red thumb on a black track (Chrome, Edge, Firefox use scrollbar-color; Safari uses the -webkit rules) */
html { scrollbar-color: var(--red) var(--black); }
html::-webkit-scrollbar { width: 12px; }
html::-webkit-scrollbar-track { background: var(--black); }
html::-webkit-scrollbar-thumb { background: var(--red); border-radius: 8px; border: 3px solid var(--black); }
html::-webkit-scrollbar-thumb:hover { background: var(--red-display); }
/* ---------- PHONES ONLY: owner photos light up as they scroll through the middle of the screen ----------
   same look as the desktop hover (color, slight zoom, white haze, white frame drawing in, soft glow); main.js adds
   .is-lit while the photo is in the middle band of the screen. Desktop is untouched. */
@media (max-width: 767px) {
  .owner.is-lit { --spot: .16; }
  .owner.is-lit .owner__photo img { transform: scale(1.07); filter: grayscale(0) contrast(1.04) brightness(1.02); }
  .owner.is-lit .owner__frame rect { stroke-dasharray: 50 0; opacity: 1; transition: stroke-dasharray .9s cubic-bezier(.65, 0, .35, 1), opacity .15s ease; }
  .owner.is-lit .owner__media { box-shadow: 0 0 0 1px rgba(244, 242, 238, .2), 0 24px 60px -18px rgba(244, 242, 238, .28); }
}

/* ---------- PHONES ONLY: The Floor head ----------
   no plate on phones. The description animates in word by word, then "Chosen by coaches, not catalogs." lights up red
   with a soft glow, word by word, like a neon tube warming up (main.js splits the words and adds .is-on). Desktop untouched. */
@media (max-width: 767px) {
  #floor .plate3d { display: none; }
  #floor .fl-w {
    display: inline-block; opacity: .12; transform: translateY(8px);
    transition: opacity .55s ease var(--d1, 0ms), transform .65s var(--ease-out) var(--d1, 0ms), color .5s ease var(--d2, 0ms), text-shadow .7s ease var(--d2, 0ms);
  }
  #floor .section-head__lead.is-on .fl-w { opacity: 1; transform: none; }
  /* the red phrase: flickers on like neon (word by word), then keeps a slow breathing glow */
  #floor .section-head__lead.is-on .fl-w--hot {
    color: #ff5a60;
    text-shadow: 0 0 6px rgba(255, 90, 96, .9), 0 0 16px rgba(229, 72, 77, .7), 0 0 34px rgba(229, 72, 77, .45);
    animation: fl-neon-on .9s steps(1, end) var(--d2, 0ms) both, fl-neon-breathe 2.6s ease-in-out calc(var(--d2, 0ms) + .9s) infinite;
  }
  @keyframes fl-neon-on { 0% { opacity: .25; } 10% { opacity: 1; } 18% { opacity: .35; } 30% { opacity: 1; } 42% { opacity: .55; } 50%, 100% { opacity: 1; } }
  @keyframes fl-neon-breathe {
    0%, 100% { text-shadow: 0 0 6px rgba(255, 90, 96, .9), 0 0 16px rgba(229, 72, 77, .7), 0 0 34px rgba(229, 72, 77, .45); }
    50% { text-shadow: 0 0 4px rgba(255, 90, 96, .7), 0 0 10px rgba(229, 72, 77, .45), 0 0 20px rgba(229, 72, 77, .25); }
  }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { #floor .fl-w { transition: none; opacity: 1; transform: none; } #floor .section-head__lead.is-on .fl-w--hot { animation: none; } }
/* ---------- PHONES ONLY: hero decluttered ----------
   1) the photo shows through at the top (lighter overlay, brighter grade), staying dark behind the text and buttons
   2) the long paragraph is hidden (the tagline already says it)
   3) the five tags are hidden
   Desktop is untouched. */
@media (max-width: 767px) {
  .hero .hero__media--graded img { filter: grayscale(1) contrast(1.35) brightness(.78); object-position: 58% 12%; }
  .hero__media::after {
    background: linear-gradient(180deg, rgba(11, 11, 11, .2) 0%, rgba(11, 11, 11, .28) 22%, rgba(11, 11, 11, .74) 46%, rgba(11, 11, 11, .9) 68%, var(--black) 100%);
  }
  .hero__lead { display: none; }
  .hero__content .eyebrow { display: none; } /* "The Driven Gym · Wausau, Wisconsin" line hidden on phones */
  .hero { justify-content: flex-start; min-height: 0; padding-top: 104px; } /* content sits right under the logo bar; everything moves up */
  .hero .chips { display: none; } /* the tags row is removed on phones */
}
/* ---------- PHONES ONLY: header social buttons glow red ----------
   red outline + soft red glow, and a red ring that pulses outward from each (they take turns). Transform/opacity only. */
@media (max-width: 767px) {
  .header__social a {
    position: relative; border-color: var(--red-display); background: rgba(180, 30, 43, .12);
    box-shadow: 0 0 12px rgba(229, 72, 77, .45), inset 0 0 8px rgba(229, 72, 77, .18);
  }
  .header__social a::after {
    content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid var(--red-bright); pointer-events: none;
    opacity: 0; animation: social-ring 2.6s ease-out infinite;
  }
  .header__social a:nth-child(2)::after { animation-delay: .87s; }
  /* the menu button (☰) gets the same red glow + a square pulsing ring; the three pulse in turn: FB → IG → menu */
  .menu-btn {
    position: relative; border-color: var(--red-display); background: rgba(180, 30, 43, .12);
    box-shadow: 0 0 12px rgba(229, 72, 77, .45), inset 0 0 8px rgba(229, 72, 77, .18);
  }
  .menu-btn::after {
    content: ""; position: absolute; inset: -1px; border-radius: var(--radius); border: 1.5px solid var(--red-bright); pointer-events: none;
    opacity: 0; animation: menu-ring 2.6s ease-out 1.73s infinite;
  }
}
@keyframes social-ring { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
@keyframes menu-ring { 0% { opacity: .85; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.32); } }
@media (max-width: 767px) and (prefers-reduced-motion: reduce) { .header__social a::after, .menu-btn::after { animation: none; } }
/* ---------- PHONES ONLY: much less red on the hero photo (on a small screen it was overwhelming) ----------
   the red light wash over the photo and the big red glow are dialed down to about a third; a hint of brand red stays. */
@media (max-width: 767px) {
  .hero__media--graded::before { opacity: .3; }
  .hero__glow { animation: none; opacity: .22; }
}

/* ---------- PHONES ONLY: "slit" hero intro (html.hx, set in the <head> script; main.js adds hx-s1/2/3) ----------
   beat 1 (hx-s1): a thin red line draws across, the photo opens up and down from it and holds ~2s
   beat 2 (hx-s2): the headline rises line by line · beat 3 (hx-s3): tagline, buttons, numbers, top bars, reviews bar */
.hx-slitline { display: none; }
@media (max-width: 767px) {
  /* held back until beat 3 */
  html.hx .header, html.hx .announce, html.hx .marquee--reviews { opacity: 0; transition: opacity .7s ease; }
  html.hx.hx-s3 .header, html.hx.hx-s3 .announce, html.hx.hx-s3 .marquee--reviews { opacity: 1; }
  html.hx.hx-s3 .marquee--reviews { transition-delay: .45s; }
  html.hx .hero [data-hero-fade] { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .8s var(--ease-out); }
  html.hx.hx-s3 .hero [data-hero-fade] { opacity: 1; transform: none; }
  html.hx.hx-s3 .hero .hero__sub { transition-delay: 0s; }
  html.hx.hx-s3 .hero .hero__ctas { transition-delay: .15s; }
  html.hx.hx-s3 .hero .hero__stats { transition-delay: .3s; }

  /* beat 1: the red line, then the photo opens from it */
  html.hx .hx-slitline { display: block; position: absolute; left: 0; right: 0; top: 40%; height: 2px; z-index: 6; pointer-events: none; background: var(--red, #e5484d); box-shadow: 0 0 12px rgba(229, 72, 77, .9), 0 0 32px rgba(229, 72, 77, .45); transform: scaleX(0); transition: transform .6s cubic-bezier(.77, 0, .18, 1), opacity .5s ease .95s; }
  html.hx.hx-s1 .hx-slitline { transform: scaleX(1); opacity: 0; }
  html.hx .hero .hero__media { clip-path: inset(40% 0 60% 0); transition: clip-path 1.1s cubic-bezier(.77, 0, .18, 1) .5s; }
  html.hx.hx-s1 .hero .hero__media { clip-path: inset(0 0 0 0); }

  /* beat 2: the headline rises slowly */
  html.hx .hero .hero__title .line > span { transform: translateY(105%); transition: transform 1.4s cubic-bezier(.16, 1, .3, 1); }
  html.hx.hx-s2 .hero .hero__title .line > span { transform: none; }
  html.hx.hx-s2 .hero .hero__title .line:nth-child(2) > span { transition-delay: .16s; }
  html.hx.hx-s2 .hero .hero__title .line:nth-child(3) > span { transition-delay: .32s; }
}

/* ---------- 24/7 KEY (Kisi): link at the bottom of the membership finder + the step-by-step guide it opens ---------- */
.keylink { display: flex; justify-content: center; margin-top: clamp(48px, 7vw, 80px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(244, 242, 238, .08); }
/* the button: a faint 1px frame with a red light that travels around it, a glass shine that sweeps across now and then */
.keylink__btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 20px; width: 100%; max-width: 680px; padding: 24px 30px;
  border: 0; border-radius: 8px; background: rgba(244, 242, 238, .14);
  color: var(--white); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45), 0 0 40px rgba(180, 30, 43, .14);
  transition: transform .5s var(--ease-out), box-shadow .5s ease;
}
.keylink__btn::before { /* the travelling light (a rotating comet, cropped to a 1px ring by ::after) */
  content: ""; position: absolute; z-index: -2; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(180, 30, 43, .0) 70%, rgba(229, 72, 77, .9) 88%, #fff 90%, transparent 91%);
  animation: keylink-orbit 5.5s linear infinite;
}
.keylink__btn::after { /* the dark face of the button */
  content: ""; position: absolute; z-index: -1; inset: 1px; border-radius: 7px;
  background: radial-gradient(120% 140% at 0% 0%, rgba(180, 30, 43, .16), transparent 55%), linear-gradient(180deg, #171717, #0e0e0e);
}
@keyframes keylink-orbit { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(1turn); } }
.keylink__shine { /* soft glass sweep */
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 0; width: 40%; pointer-events: none;
  background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .07) 55%, transparent 80%);
  transform: translateX(-120%) skewX(-12deg); animation: keylink-shine 6s cubic-bezier(.45, 0, .2, 1) 1.2s infinite;
}
@keyframes keylink-shine { 0% { transform: translateX(-120%) skewX(-12deg); } 30%, 100% { transform: translateX(300%) skewX(-12deg); } }
.keylink__btn > :not(.keylink__shine) { position: relative; z-index: 1; }
.keylink__btn:hover { transform: translateY(-3px); box-shadow: 0 26px 60px rgba(0, 0, 0, .55), 0 0 60px rgba(229, 72, 77, .28); }
.keylink__btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 4px; }
.keylink__icon { flex: none; position: relative; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; border: 1px solid rgba(229, 72, 77, .6); background: rgba(180, 30, 43, .12); box-shadow: 0 0 22px rgba(229, 72, 77, .3), inset 0 0 12px rgba(229, 72, 77, .15); }
.keylink__icon::after { /* slow pulse ring */
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid rgba(229, 72, 77, .7);
  animation: keylink-ping 2.8s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes keylink-ping { 0% { transform: scale(1); opacity: .8; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
.keylink__icon svg { width: 28px; height: 28px; fill: none; stroke: var(--red-bright); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(229, 72, 77, .6)); transition: transform .6s var(--ease-out); }
.keylink__btn:hover .keylink__icon svg { transform: rotate(-22deg); }
.keylink__txt { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.keylink__eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--red-bright); }
.keylink__txt strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.keylink__txt small { color: var(--gray-400); font-size: 1rem; line-height: 1.4; }
.keylink__arrow { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(244, 242, 238, .18); color: var(--white); font-size: 1.2rem; transition: transform .5s var(--ease-out), background .4s ease, border-color .4s ease; }
.keylink__btn:hover .keylink__arrow { transform: translateX(4px); background: var(--red); border-color: var(--red); }
/* entrance: rises in when scrolled to (main.js adds .is-in) */
.anim-ready .keylink__btn { opacity: 0; transform: translateY(26px) scale(.97); }
.anim-ready .keylink.is-in .keylink__btn { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s var(--ease-out), box-shadow .5s ease; }
.anim-ready .keylink.is-in .keylink__btn:hover { transform: translateY(-3px); transition: transform .5s var(--ease-out), box-shadow .5s ease; }
@media (max-width: 767px) {
  .keylink__btn { gap: 14px; padding: 20px 18px; }
  .keylink__icon { width: 50px; height: 50px; }
  .keylink__icon svg { width: 24px; height: 24px; }
  .keylink__txt strong { font-size: 1.35rem; }
  .keylink__txt small { font-size: .92rem; }
  .keylink__arrow { width: 38px; height: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .keylink__btn::before { animation: none; transform: translate(-50%, -50%) rotate(.62turn); }
  .keylink__shine, .keylink__icon::after { animation: none; display: none; }
  .anim-ready .keylink__btn { opacity: 1; transform: none; }
}
.keyguide {
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0;
  border: 1px solid rgba(244, 242, 238, .14); border-top: 2px solid var(--red); border-radius: 6px;
  background: var(--gray-900); color: var(--white); overflow: auto; overscroll-behavior: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}
.keyguide::backdrop { background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.keyguide[open] { animation: keyguide-in .45s var(--ease-out); }
.keyguide[open]::backdrop { animation: keyguide-fade .35s ease; }
@keyframes keyguide-in { from { opacity: 0; transform: translateY(18px) scale(.98); } }
@keyframes keyguide-fade { from { opacity: 0; } }
.keyguide__in { position: relative; padding: clamp(24px, 5vw, 40px); }
.keyguide__close { position: sticky; top: 0; z-index: 2; float: right; margin: clamp(-30px, -3.5vw, -14px) clamp(-30px, -3.5vw, -14px) 0 0; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--gray-900); color: var(--gray-400); cursor: pointer; transition: color .2s ease, background .2s ease; }
.keyguide__close:hover, .keyguide__close:focus-visible { color: var(--white); background: rgba(255, 255, 255, .06); }
.keyguide__close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.keyguide__title { margin: 10px 0 12px; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1; text-transform: uppercase; }
.keyguide__lead { color: var(--gray-300); font-size: 1rem; line-height: 1.55; margin: 0 0 24px; }
.keyguide__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.keyguide__steps li { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(244, 242, 238, .08); }
.keyguide__n { flex: none; width: 34px; font-family: var(--font-display); font-size: 1.2rem; color: var(--red-bright); line-height: 1.3; }
.keyguide__steps h3 { margin: 0 0 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.1rem; letter-spacing: .03em; text-transform: uppercase; }
.keyguide__steps p { margin: 0; color: var(--gray-300); font-size: .95rem; line-height: 1.5; }
.keyguide__help { margin: 18px 0 0; padding: 12px 16px; border-left: 2px solid var(--red-display); background: rgba(255, 255, 255, .03); font-size: .95rem; color: var(--white); }
.keyguide__help a { color: var(--red-bright); font-weight: 600; white-space: nowrap; }
@media (max-width: 767px) {
  .keylink__btn { padding: 14px 16px; gap: 14px; }
  .keylink__txt strong { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .keyguide[open], .keyguide[open]::backdrop { animation: none; } }