/* ============================================================
   16 FITNESS — Red Neon / Chrome
   Shared stylesheet — used by index.html, privacy.html, terms.html, 404.html
   Design tokens — palette taken straight off the logo: a red neon sprinting
   figure inside a brushed-chrome swoosh on near-black.
   ============================================================ */
:root{
  --bg:#0b0c0e;
  --surface:#15171b;
  --surface-2:#1d2026;
  --line:#2a2e35;
  --accent:#ff1a1a;
  --accent-deep:#c40010;
  --accent-wash:rgba(255,26,26,0.09);
  --glow:0 0 24px rgba(255,26,26,.55);
  --glow-soft:0 0 14px rgba(255,26,26,.32);
  --chrome:linear-gradient(180deg,#f2f3f5 0%,#c9ccd1 45%,#8a8f98 100%);
  --silver:#c9ccd1;
  --text:#f4f5f7;
  --muted:#9aa0a8;

  --font-display:"Kanit", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-body:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --container:76rem;
  --gutter:clamp(1.25rem, 4vw, 3rem);

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-s: 1rem;
  --space-m: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  --space-l: clamp(2.25rem, 1.6rem + 2.5vw, 4rem);
  --space-xl: clamp(3.5rem, 2.4rem + 4.5vw, 7rem);
  --space-2xl: clamp(4.5rem, 3rem + 6vw, 9rem);

  --fs-h1: clamp(2.6rem, 1.95rem + 2.9vw, 5.25rem);
  --fs-h2: clamp(2rem, 1.6rem + 1.8vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  --radius-s: 2px;
  --radius-m: 4px;

  --ease: cubic-bezier(.22,.68,0,1);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --dur-s: 180ms;
  --dur-m: 420ms;
  --dur-l: 820ms;
}

/* ============================================================
   Reset
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; }
img,svg{ display:block; max-width:100%; }
h1,h2,h3,p,figure,blockquote{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
input,textarea{ font:inherit; color:inherit; }
label{ display:block; }

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

/* ============================================================
   Base
   ============================================================ */
body{
  background-color:var(--section-tint, var(--bg));
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:1.6;
  font-weight:400;
  transition:background-color 700ms ease;
}

h1,h2,h3,.font-display{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:700;
  line-height:1.04;
  color:var(--text);
  letter-spacing:-0.005em;
}
h1,h2,.font-display{ text-transform:uppercase; font-weight:800; letter-spacing:0.002em; }
.legal-body h2{ text-transform:none; }

/* Brushed-chrome text — the wordmark treatment, reserved for the "16" and
   display accents so it stays special. Falls back to --silver where
   background-clip:text is unsupported. */
.chrome-text{
  color:var(--silver);
  background:var(--chrome);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .chrome-text{ -webkit-text-fill-color:currentColor; color:var(--silver); }
}

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

/* Red scrollbar to match the neon */
html{ scrollbar-color:var(--accent-deep) var(--bg); scrollbar-width:thin; }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--accent-deep); border-radius:99px; border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--accent); }

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

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

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:0.6em;
  font-family:var(--font-body);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--accent);
}
.eyebrow::before{
  content:"";
  width:1.5em;
  height:1.5px;
  background:var(--accent);
  display:inline-block;
}

.section-head{
  max-width:42rem;
  margin-bottom:var(--space-l);
}
.section-head p{
  margin-top:var(--space-xs);
  font-size:var(--fs-lead);
  color:var(--muted);
  max-width:38rem;
}
.section-head h2{ font-size:var(--fs-h2); margin-top:var(--space-2xs); }

section{ padding-block:var(--space-2xl); position:relative; }

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

.skip-link{
  position:absolute;
  top:-3rem;
  left:1rem;
  z-index:1000;
  background:var(--accent);
  color:#fff;
  font-weight:700;
  padding:0.75rem 1.25rem;
  border-radius:var(--radius-s);
  transition:top var(--dur-s) var(--ease);
}
.skip-link:focus{ top:1rem; }

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.5em;
  min-height:48px;
  padding:0.85rem 1.75rem;
  font-family:var(--font-body);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  border-radius:var(--radius-s);
  border:1.5px solid transparent;
  transition:background var(--dur-s) var(--ease), color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease), transform 200ms var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
/* Magnetic hover (desktop, pointer:fine only) nudges via inline transform
   set in site.js; this transition just smooths it and the release back. */

.btn-primary{
  position:relative;
  background:linear-gradient(180deg, var(--accent) 0%, var(--accent-deep) 100%);
  color:#fff;
  box-shadow:var(--glow-soft);
}
.btn-primary:hover{ background:linear-gradient(180deg,#ff3b3b 0%, var(--accent) 100%); box-shadow:var(--glow); }

/* Glow layer for the pulsing CTAs — see the motion layer for the animation. */
.btn-pulse::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  box-shadow:0 0 30px rgba(255,26,26,0.75), 0 0 64px rgba(255,26,26,0.22);
  opacity:0;
  pointer-events:none;
}

.btn-ghost{
  background:transparent;
  color:var(--text);
  border-color:rgba(201,204,209,0.4);
}
.btn-ghost:hover{
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:var(--glow-soft);
}

.btn-block{ width:100%; }

/* ============================================================
   Header / Nav
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(11,12,14,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease), backdrop-filter var(--dur-m) var(--ease);
}
/* Opt-in only: pages with a full-bleed cinematic hero (index.html sets this on
   <body>) start with a transparent header floating over the image, then gain
   the same blurred bar every other page always has once scrolled past it.
   Every other page (privacy/terms/404) never sets this class, so the header
   stays legible immediately — no JS dependency for the default case. */
.has-cinema-hero .site-header{ background:transparent; border-bottom-color:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; }
.has-cinema-hero .site-header.is-scrolled{
  background:rgba(11,12,14,0.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--line);
}
.nav-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:0.9rem;
  gap:var(--space-m);
}

/* Brand lockup — the owner's real logo files. Horizontal lockup in the
   header (1200x265), stacked lockup in the footer (800x688). Height is
   fixed and width auto so the intrinsic ratio never distorts. */
.wordmark{
  display:inline-flex;
  align-items:center;
  flex:none;
}
.brand-logo{
  height:44px;
  width:auto;
  display:block;
  transition:filter var(--dur-m) var(--ease);
}
.wordmark:hover .brand-logo{ filter:drop-shadow(0 0 12px rgba(255,26,26,0.55)); }
@media (min-width:37.5rem){ .brand-logo{ height:52px; } }
.brand-logo--stacked{ height:96px; }

.nav-primary{
  display:none;
}
.nav-primary ul{ display:flex; align-items:center; gap:var(--space-l); }
.nav-primary a{
  font-size:var(--fs-small);
  font-weight:600;
  letter-spacing:0.02em;
  color:var(--muted);
  padding-block:0.5rem;
  border-bottom:1.5px solid transparent;
  transition:color var(--dur-s) var(--ease), border-color var(--dur-s) var(--ease);
}
.nav-primary a:hover{ color:var(--text); border-color:var(--accent); }

.nav-cta{ display:none; }

.nav-toggle{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  width:48px;
  height:48px;
  gap:5px;
  border-radius:var(--radius-s);
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--text);
  transition:transform var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed;
  inset:0;
  top:72px;
  background:var(--bg);
  z-index:99;
  padding:var(--space-l) var(--gutter);
  display:flex;
  flex-direction:column;
  gap:var(--space-l);
  /* Parked to the LEFT, not the right. A fixed element translated off the
     right edge is real, reachable horizontal overflow on any page short
     enough not to scroll vertically — it made privacy/terms/404 side-scroll
     390px at mobile width. Overflow past the left edge is not scrollable in
     LTR, so parking on that side costs nothing and needs no overflow-x
     clipping on html/body (which would silently kill the sticky floors pin). */
  transform:translateX(-100%);
  transition:transform var(--dur-m) var(--ease);
  overflow-y:auto;
}
.mobile-nav.is-open{ transform:translateX(0); }
.mobile-nav ul{ display:flex; flex-direction:column; gap:var(--space-m); }
.mobile-nav a{
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.75rem;
  font-weight:700;
  text-transform:uppercase;
  color:var(--text);
  display:inline-block;
}
.mobile-nav a:hover{ color:var(--accent); }

@media (min-width:64rem){
  .nav-primary{ display:block; }
  .nav-cta{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none; }
}

/* ============================================================
   Placeholders (photo / map) — intentional, premium, honest.
   Real photos are AI concept renders / final photography, supplied later.
   See public/assets/img/README.md for the full slot list + how to activate one.
   ============================================================ */
.placeholder{
  position:relative;
  display:flex;
  align-items:flex-end;
  background:
    repeating-linear-gradient(135deg, rgba(255,26,26,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(155deg, var(--surface-2), var(--surface) 60%, #101216);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  overflow:hidden;
  min-height:220px;
}
.placeholder::before,
.placeholder::after,
.placeholder .corner-a,
.placeholder .corner-b{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  border:1.5px solid var(--accent);
  opacity:0.7;
}
.placeholder::before{ top:14px; left:14px; border-right:0; border-bottom:0; }
.placeholder::after{ bottom:14px; right:14px; border-left:0; border-top:0; }
.placeholder .corner-a{ top:14px; right:14px; border-left:0; border-bottom:0; }
.placeholder .corner-b{ bottom:14px; left:14px; border-right:0; border-top:0; }

.placeholder-tag{
  position:absolute;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:1;
  font-size:0.625rem;
  font-weight:800;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#fff;
  background:var(--accent-deep);
  padding:0.3rem 0.65rem;
  border-radius:99px;
  white-space:nowrap;
}

.placeholder-label{
  position:relative;
  z-index:1;
  padding:1.1rem 1.25rem;
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  background:linear-gradient(0deg, rgba(11,12,14,0.7), transparent);
  width:100%;
}
.placeholder-label strong{ color:var(--accent); font-weight:800; }

.placeholder--tall{ min-height:340px; }
.placeholder--square{ aspect-ratio:1/1; min-height:0; }
.placeholder--wide{ aspect-ratio:16/9; min-height:0; }

/* Photo slot wrapper — see assets/img/README.md for the slot list.
   Aspect-ratio lives on .photo itself (not a child) so there's no layout
   shift whether the slot holds the placeholder or a real <img>. */
.photo{ position:relative; margin:0; overflow:hidden; border-radius:var(--radius-m); }
.photo__img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.photo--square{ aspect-ratio:1/1; }
.photo--wide{ aspect-ratio:16/9; }

/* Slow scroll-tied Ken Burns on the feature bands (exterior, yoga, family).
   Desktop only, and deliberately so: the effect scales the <img> past the
   edges of its clipping .photo wrapper, which is invisible to the user but
   does push the image's bounding box a few px wider than a 390 px viewport.
   That is exactly the "mobile gets the lighter version" rule from the motion
   brief, and it keeps the layout audit's wide-element check clean at 390. */
@media (min-width:56.25rem){
  .photo--kenburns .photo__img{ will-change:transform; }
  @supports (animation-timeline: view()) {
    .photo--kenburns .photo__img{
      animation: kenBurns linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 60%;
    }
    @keyframes kenBurns{
      0%{ transform:scale(1.04) translateY(-1.5%); }
      100%{ transform:scale(1.14) translateY(1.5%); }
    }
  }
}

/* ============================================================
   Hero — full-bleed cinematic image, headline overlaid
   ============================================================ */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;
  align-items:flex-end;
  overflow:hidden; /* contains the scroll-driven image scale below */
  padding-top:clamp(5rem, 4rem + 3vw, 7rem); /* clears the transparent header */
  padding-bottom:var(--space-2xl);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media__img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform-origin:center;
  will-change:transform;
}
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  /* Three stacked scrims. The left one is deliberately heavy: the hero photo
     has the club's own illuminated logo wall dead centre, and without it the
     headline reads straight across the painted "FITNESS" lettering. */
  background:
    linear-gradient(180deg, rgba(8,9,12,0.66) 0%, rgba(8,9,12,0.1) 20%, transparent 34%),
    linear-gradient(0deg, rgba(8,9,12,0.97) 0%, rgba(8,9,12,0.88) 24%, rgba(8,9,12,0.55) 48%, rgba(8,9,12,0.15) 70%, transparent 86%),
    linear-gradient(90deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.9) 28%, rgba(8,9,12,0.72) 44%, rgba(8,9,12,0.34) 60%, rgba(8,9,12,0.08) 76%, transparent 88%);
}
.hero-mark{
  position:absolute;
  z-index:1;
  top:7%;
  right:4%;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(5rem, 4rem + 8vw, 12rem);
  line-height:0.8;
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  text-shadow:0 0 26px rgba(255,26,26,0.45);
  opacity:0.5;
  pointer-events:none;
  user-select:none;
  will-change:transform;
}

.hero-copy-wrap{ position:relative; z-index:2; width:100%; }
.hero-copy{ max-width:36rem; }
.hero-copy .eyebrow{ margin-bottom:var(--space-s); }
.hero-title{ font-size:var(--fs-h1); font-weight:700; max-width:17ch; }
.hero-title{
  letter-spacing:-0.012em;
  text-shadow:0 2px 28px rgba(8,9,12,0.85), 0 1px 4px rgba(8,9,12,0.9);
}
.hero-title em{
  font-style:italic;
  color:var(--accent);
  font-weight:800;
  text-shadow:0 0 30px rgba(255,26,26,0.5);
}
.line-mask{ display:block; overflow:hidden; }
.line-inner{ display:block; }
.hero-copy .lead{
  margin-top:var(--space-m);
  font-size:var(--fs-lead);
  color:var(--muted);
  max-width:34ch;
}
.hero-actions{
  margin-top:var(--space-l);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-s);
}

.hero-scroll-cue{
  position:absolute;
  z-index:2;
  left:50%;
  bottom:var(--space-l);
  transform:translateX(-50%);
  width:22px;
  height:36px;
  border:1.5px solid rgba(201,204,209,0.55);
  border-radius:99px;
  pointer-events:none;
}
.hero-scroll-cue span{
  position:absolute;
  top:6px;
  left:50%;
  width:3px;
  height:8px;
  margin-left:-1.5px;
  background:var(--accent);
  border-radius:99px;
}

/* On-load reveal: headline lines mask-slide up, sub-line + CTAs stagger fade.
   Fully guarded — reduced-motion users get everything visible immediately
   via the global override below, no separate opt-out needed here. */
@media (prefers-reduced-motion: no-preference){
  .line-inner{
    transform:translateY(115%);
    animation:heroLineReveal 0.9s var(--ease) both;
  }
  .line-mask:nth-child(2) .line-inner{ animation-delay:0.16s; }
  .hero-fade{ opacity:0; animation:heroFadeUp 0.8s var(--ease) both; }
  @keyframes heroLineReveal{ to{ transform:translateY(0); } }
  @keyframes heroFadeUp{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

  @keyframes heroScrollCuePulse{
    0%,100%{ transform:translateY(0); opacity:1; }
    50%{ transform:translateY(8px); opacity:0.4; }
  }
  .hero-scroll-cue span{ animation:heroScrollCuePulse 1.8s var(--ease) infinite; }
}

/* Scroll-driven parallax/scale — CSS scroll-timeline where supported, with a
   rAF fallback in site.js for browsers without it (feature-detected via
   CSS.supports so the two never fight over the same transform). */
@supports (animation-timeline: scroll()) {
  .hero-media__img{
    animation: heroImgScale linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 90vh;
  }
  @keyframes heroImgScale{ from{ transform:scale(1); } to{ transform:scale(1.08); } }

  .hero-mark{
    animation: heroMarkParallax linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 100vh;
  }
  @keyframes heroMarkParallax{
    from{ transform:translateY(0) scale(1); }
    to{ transform:translateY(46px) scale(1.06); opacity:0.28; }
  }

  .hero-scroll-cue{
    animation: heroCueFade linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 12vh;
  }
  @keyframes heroCueFade{ from{ opacity:1; } to{ opacity:0; } }
}

/* ============================================================
   At-a-glance stat strip (counters)
   ============================================================ */
.stat-strip{ padding-block:var(--space-l); border-bottom:1px solid var(--line); }
.stat-strip__grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--space-m);
  text-align:center;
}
.stat{ display:flex; flex-direction:column; gap:0.2rem; }
.stat__num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
  color:var(--accent);
  line-height:1;
  text-shadow:0 0 22px rgba(255,26,26,0.45);
}
.stat__label{
  font-size:var(--fs-micro);
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:700;
}

/* ============================================================
   The Space — floor strip
   ============================================================ */
.floor-strip{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-m);
  margin-bottom:var(--space-l);
  padding-bottom:var(--space-m);
  border-bottom:1px solid var(--line);
}
.floor-strip li{
  display:flex;
  align-items:center;
  gap:0.6em;
  font-size:var(--fs-small);
  font-weight:600;
  color:var(--muted);
}
.floor-num{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:0.9rem;
  color:var(--accent);
  box-shadow:var(--glow-soft), inset 0 0 10px rgba(255,26,26,0.2);
}

/* ============================================================
   Pinned "Three Floors" sequence — the signature scroll moment.
   Desktop (>=900px): pins for ~320vh, crossfades narrative + render per
   floor, driven by site.js (getBoundingClientRect progress, 3 phases).
   Mobile AND prefers-reduced-motion: unpinned, stacked, fully visible —
   see the shared media query near the bottom of this block.
   ============================================================ */
.floors-pin{ position:relative; background:var(--surface-2); }
.floors-pin__sticky{ width:100%; }
.floors-pin__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
  width:100%;
  padding-block:var(--space-2xl);
}

.floors-dots{ display:flex; gap:var(--space-xs); margin-bottom:var(--space-l); }
.floors-dot{
  flex:1;
  text-align:left;
  padding:0.65rem 0.85rem;
  background:rgba(244,245,247,0.03);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  transition:background var(--dur-m) var(--ease), border-color var(--dur-m) var(--ease);
}
.floors-dot.is-active{ background:rgba(255,26,26,0.08); border-color:var(--accent); }
.floors-dot__badge{
  display:block;
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:0.15rem;
  transition:color var(--dur-m) var(--ease);
}
.floors-dot.is-active .floors-dot__badge{ color:var(--accent); }
.floors-dot__name{ display:block; font-size:var(--fs-small); font-weight:600; color:var(--text); }

.elevation{ max-width:14rem; margin-bottom:var(--space-l); }
.elevation__svg{ width:100%; height:auto; display:block; }
.elevation__plate{
  fill:var(--surface);
  stroke:var(--line);
  stroke-width:1.2;
  transition:stroke var(--dur-m) var(--ease), stroke-width var(--dur-m) var(--ease);
}
.elevation__glow{ fill:var(--accent); opacity:0; transition:opacity var(--dur-m) var(--ease); }
.elevation__label{
  font-family:var(--font-display);
  font-style:italic;
  font-size:20px;
  font-weight:800;
  fill:var(--muted);
  transition:fill var(--dur-m) var(--ease);
}
.elevation__ground{ stroke:var(--line); stroke-width:2; }
.elevation__window{ stroke:var(--line); stroke-width:1.4; opacity:0.7; transition:stroke var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease), filter var(--dur-m) var(--ease); }
.elevation__sign{ fill:var(--muted); font-family:var(--font-display); font-style:italic; font-weight:800; font-size:9px; letter-spacing:0.5px; }
.elevation__floor.is-active .elevation__plate{
  stroke:var(--accent);
  stroke-width:2;
  filter:drop-shadow(0 0 8px rgba(255,26,26,0.75));
}
.elevation__floor.is-active .elevation__glow{ opacity:0.2; }
.elevation__floor.is-active .elevation__window{ stroke:var(--accent); opacity:0.9; filter:drop-shadow(0 0 5px rgba(255,26,26,0.8)); }
.elevation__floor.is-active .elevation__label{ fill:var(--accent); }

.floors-story-wrap{ position:relative; }
.floors-story__title{ font-size:var(--fs-h3); margin-bottom:var(--space-xs); }
.floors-story__desc{ color:var(--muted); font-size:var(--fs-small); max-width:42ch; margin-bottom:var(--space-s); }
.floors-story__pills{
  font-size:var(--fs-micro);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}

.floors-render{ display:block; }

/* Desktop: pin + crossfade */
@media (min-width:56.25rem){ /* 900px */
  .floors-pin{ height:320vh; }
  .floors-pin__sticky{
    position:sticky;
    top:0;
    height:100vh;
    height:100dvh;
    display:flex;
    align-items:center;
    overflow:hidden;
  }
  .floors-pin__grid{
    grid-template-columns:1fr 1fr;
    align-items:center;
    padding-block:0;
  }
  .floors-story-wrap{ min-height:12rem; }
  .floors-story{
    position:absolute;
    inset:0 auto auto 0;
    width:100%;
    opacity:0;
    visibility:hidden;
    transform:translateY(16px);
    transition:opacity 0.5s var(--ease), transform 0.5s var(--ease), visibility 0.5s;
  }
  .floors-story.is-active{ position:relative; opacity:1; visibility:visible; transform:none; }

  .floors-pin__visual{ position:relative; aspect-ratio:1/1; border-radius:var(--radius-m); overflow:hidden; box-shadow:0 32px 70px -20px rgba(0,0,0,0.6); }
  .floors-render{
    position:absolute;
    inset:0;
    opacity:0;
    visibility:hidden;
    transform:scale(1.04);
    transition:opacity 0.7s var(--ease), transform 0.8s var(--ease), visibility 0.7s;
  }
  .floors-render.is-active{ opacity:1; visibility:visible; transform:scale(1); }
}

/* Mobile AND prefers-reduced-motion: unpinned, stacked, fully visible.
   Dissolve the narrative/visual column grouping (display:contents) so each
   story can sit directly above its own render image via explicit order. */
@media (max-width:56.1875rem), (prefers-reduced-motion: reduce){
  .floors-pin{ height:auto; }
  .floors-pin__sticky{ position:static; height:auto; }
  .floors-pin__grid{ display:flex; flex-direction:column; }
  .floors-pin__narrative, .floors-pin__visual{ display:contents; }
  .floors-dots, .elevation{ display:none; }
  .floors-story-wrap{ display:contents; }
  .floors-story{ position:static; opacity:1; visibility:visible; transform:none; margin-bottom:var(--space-m); }
  .floors-render{ position:static; opacity:1; visibility:visible; transform:none; aspect-ratio:1/1; border-radius:var(--radius-m); overflow:hidden; margin-bottom:var(--space-xl); }
  #floorStory0{ order:1; } #floorRender0{ order:2; }
  #floorStory1{ order:3; } #floorRender1{ order:4; }
  #floorStory2{ order:5; } #floorRender2{ order:6; }
}

/* ============================================================
   Anatomical line-art figure (Training section) — self-draws on scroll,
   stroke-dashoffset driven by site.js against scroll progress.
   ============================================================ */
.line-figure{
  display:none;
  width:240px;
  height:300px;
}

/* Horizontal feature band — image left, copy right (stacks on mobile).
   Replaces a single narrow card that read as an orphan in a full-width row. */
.feature-band{
  display:grid;
  gap:var(--space-m);
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-m);
  transition:border-color var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease);
}
.feature-band:hover{ border-color:var(--accent); box-shadow:0 20px 50px -28px rgba(255,26,26,0.6); }
.feature-band__copy{ display:flex; flex-direction:column; gap:var(--space-2xs); }
.feature-band__copy .eyebrow{ margin-bottom:var(--space-2xs); }
.feature-band h3{ font-size:var(--fs-h3); }
.feature-band p{ color:var(--muted); font-size:var(--fs-small); max-width:44ch; }
.feature-band .hint{
  margin-top:var(--space-2xs);
  padding-top:var(--space-xs);
  border-top:1px solid var(--line);
  font-size:var(--fs-micro);
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--accent);
  font-weight:700;
}
@media (min-width:48rem){
  .feature-band{ grid-template-columns:1.15fr 1fr; gap:var(--space-l); }
}
@media (min-width:64rem){
  .section-head{ position:relative; }
  #training .section-head{ padding-right:15rem; }
  #training .line-figure{
    display:block;
    position:absolute;
    top:-0.5rem;
    right:0;
    opacity:0.9;
  }
}

/* ============================================================
   Training
   ============================================================ */
.training-grid{
  display:grid;
  gap:0;
  border-top:1px solid var(--line);
}
.training-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--space-m);
  padding-block:var(--space-m);
  border-bottom:1px solid var(--line);
  align-items:baseline;
}
.training-row .num{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:var(--fs-h3);
  color:var(--accent);
  min-width:2.5ch;
  text-shadow:0 0 18px rgba(255,26,26,0.4);
}
.training-row h3{ font-size:1.15rem; margin-bottom:0.35rem; }
.training-row p{ color:var(--muted); font-size:var(--fs-small); max-width:48ch; }

.training-note{
  margin-top:var(--space-m);
  font-size:var(--fs-small);
  color:var(--muted);
  font-style:italic;
}
.training-note strong{ color:var(--accent); font-style:normal; }

@media (min-width:48rem){
  .training-row{ grid-template-columns:6rem 1fr; }
}

/* ============================================================
   Membership
   ============================================================ */
.tier-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,17.5rem), 1fr));
  align-items:stretch;
}
.tier-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-m);
  display:flex;
  flex-direction:column;
  gap:var(--space-s);
}
.tier-card.is-featured{
  position:relative;
  border-color:var(--accent);
  background:linear-gradient(165deg, var(--surface-2), var(--surface));
  box-shadow:0 0 0 1px var(--accent) inset, 0 20px 48px -20px rgba(255,26,26,0.45);
}
/* Slow red-neon shimmer sweep around the border — CSS-only gradient-border trick
   (mask-composite:exclude carves out everything but a 1.5px ring). */
.tier-card.is-featured::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  padding:1.5px;
  background:linear-gradient(115deg, transparent 15%, var(--accent) 50%, transparent 85%);
  background-size:250% 250%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
}
@media (prefers-reduced-motion: no-preference){
  .tier-card.is-featured::before{ animation:shimmerBorder 5s linear infinite; }
  @keyframes shimmerBorder{ 0%{ background-position:0% 50%; } 100%{ background-position:200% 50%; } }
}
.tier-badge{
  align-self:flex-start;
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:#fff;
  background:linear-gradient(180deg, var(--accent), var(--accent-deep));
  padding:0.3rem 0.6rem;
  border-radius:99px;
  box-shadow:var(--glow-soft);
}
.tier-card h3{ font-size:1.5rem; }
.tier-price{
  font-family:var(--font-body);
  font-size:var(--fs-small);
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--accent);
}
.tier-card ul{ display:flex; flex-direction:column; gap:0.6rem; margin-top:var(--space-2xs); }
.tier-card li{
  display:flex;
  gap:0.6em;
  font-size:var(--fs-small);
  color:var(--muted);
  line-height:1.5;
}
.tier-card li::before{
  content:"";
  flex:none;
  width:6px; height:6px;
  margin-top:0.55em;
  background:var(--accent);
  border-radius:1px;
}
.tier-card .btn{ margin-top:auto; }

/* ============================================================
   Part of 16
   ============================================================ */
.family-band{
  background:var(--surface);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.family-grid{
  display:grid;
  gap:var(--space-m);
  grid-template-columns:repeat(auto-fit, minmax(min(100%,15rem), 1fr));
}
.family-item{
  padding-top:var(--space-s);
  border-top:2px solid var(--accent-deep);
  box-shadow:0 -1px 12px -4px rgba(255,26,26,0.6);
}
.family-item h3{ font-size:1.1rem; }
.family-item p{ color:var(--muted); font-size:var(--fs-small); margin-top:0.4rem; }
.family-item .fam-link{
  display:inline-flex;
  align-items:center;
  gap:0.4em;
  margin-top:var(--space-xs);
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--accent);
  border-bottom:1px solid transparent;
}
.family-item .fam-link:hover{ border-color:var(--accent); }
.family-item .fam-soon{
  display:inline-block;
  margin-top:var(--space-xs);
  font-size:var(--fs-micro);
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ============================================================
   Location
   ============================================================ */
.location-grid{
  display:grid;
  gap:var(--space-l);
  align-items:center;
}
.location-list{ display:flex; flex-direction:column; gap:var(--space-m); margin-top:var(--space-m); }
.location-list dt{
  font-size:var(--fs-micro);
  font-weight:800;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--accent);
}
.location-list dd{
  margin:0.3rem 0 0;
  font-size:var(--fs-lead);
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  color:var(--text);
}

@media (min-width:56rem){
  .location-grid{ grid-template-columns:0.9fr 1.1fr; }
}

/* ============================================================
   Contact
   ============================================================ */
.contact-grid{
  display:grid;
  gap:var(--space-l);
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-m);
}
.field label{
  font-size:var(--fs-small);
  font-weight:700;
  margin-bottom:0.5rem;
  color:var(--text);
}
.field input{
  width:100%;
  min-height:48px;
  background:var(--bg);
  border:1.5px solid var(--line);
  border-radius:var(--radius-s);
  padding:0.75rem 1rem;
  color:var(--text);
  font-size:var(--fs-body);
  transition:border-color var(--dur-s) var(--ease);
}
.field input::placeholder{ color:var(--muted); opacity:0.7; }
.field input:focus-visible{ border-color:var(--accent); }

.form-note{
  font-size:var(--fs-micro);
  color:var(--muted);
  line-height:1.6;
}

.form-status{
  font-size:var(--fs-small);
  font-weight:700;
  color:var(--accent);
  display:none;
}
.form-status.is-visible{ display:block; }

.contact-aside{ display:flex; flex-direction:column; gap:var(--space-m); }
.contact-card{
  border:1px solid var(--line);
  border-radius:var(--radius-m);
  padding:var(--space-m);
  background:var(--surface-2);
}
.contact-card h3{ font-size:1.1rem; margin-bottom:0.5rem; }
.contact-card p{ color:var(--muted); font-size:var(--fs-small); }
.contact-card .note{
  margin-top:0.6rem;
  font-size:var(--fs-micro);
  color:var(--muted);
}

/* ============================================================
   Footer
   ============================================================ */
.site-footer{
  border-top:1px solid var(--line);
  padding-block:var(--space-l);
}
.footer-row{
  display:flex;
  flex-direction:column;
  gap:var(--space-m);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:0.5em;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-m);
  font-size:var(--fs-small);
  color:var(--muted);
}
.footer-links a:hover{ color:var(--accent); }
.footer-fine{
  font-size:var(--fs-micro);
  color:var(--muted);
}
.footer-fine strong{ color:var(--accent); }

@media (min-width:48rem){
  .footer-row{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
  }
}

/* ============================================================
   Legal pages (privacy / terms) + 404
   ============================================================ */
.legal{ padding-top:var(--space-xl); }
.legal .eyebrow{ margin-bottom:var(--space-s); }
.legal h1{ font-size:var(--fs-h2); max-width:26ch; }
.legal-updated{
  margin-top:var(--space-2xs);
  font-size:var(--fs-small);
  color:var(--muted);
}
.legal-body{
  margin-top:var(--space-l);
  max-width:42rem;
}
.legal-body h2{
  font-size:1.35rem;
  margin-top:var(--space-l);
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body p{
  margin-top:var(--space-s);
  color:var(--muted);
}
.legal-body a{ color:var(--accent); border-bottom:1px solid transparent; }
.legal-body a:hover{ border-color:var(--accent); }

.not-found{
  min-height:60vh;
  display:flex;
  align-items:center;
  padding-block:var(--space-2xl);
}
.not-found-mark{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:800;
  font-size:clamp(4rem, 3rem + 8vw, 9rem);
  color:transparent;
  -webkit-text-stroke:1.5px var(--accent);
  line-height:0.9;
}
.not-found h1{ font-size:var(--fs-h2); margin-top:var(--space-s); }
.not-found p{
  margin-top:var(--space-s);
  color:var(--muted);
  font-size:var(--fs-lead);
  max-width:34ch;
}
.not-found .btn{ margin-top:var(--space-l); }

/* ============================================================
   Brand components — red neon / chrome
   Base (static) styles live here; the motion that drives them is in the
   "Motion layer" block at the end of this file.
   ============================================================ */

/* Scroll-progress bar — red neon rail pinned to the top of the viewport. */
.scroll-progress{
  position:fixed;
  top:0; left:0; right:0;
  height:3px;
  z-index:200;
  background:rgba(201,204,209,0.06);
  pointer-events:none;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent-deep) 0%, var(--accent) 55%, #ff6b6b 100%);
  box-shadow:var(--glow);
}

/* Speed streaks — the three tapering lines behind the logo's sprinter,
   reused as a section-head flourish. */
.speed-lines{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin-bottom:var(--space-s);
}
.speed-lines i{
  display:block;
  height:2px;
  border-radius:2px;
  transform-origin:left center;
  background:linear-gradient(90deg, var(--accent) 0%, rgba(255,26,26,0) 100%);
  box-shadow:0 0 8px rgba(255,26,26,0.5);
}
.speed-lines i:nth-child(1){ width:84px; }
.speed-lines i:nth-child(2){ width:124px; }
.speed-lines i:nth-child(3){ width:56px; }
.speed-lines i:nth-child(4){ width:98px; }

/* Chrome "16" inside headings — the wordmark's brushed-metal numeral. */
.n16{
  color:var(--silver);
  /* Kept in the bright half of the chrome ramp: the full --chrome gradient
     bottoms out at #8a8f98, which on this near-black background reads as
     "dimmer than the white next to it" rather than as brushed metal. */
  background:linear-gradient(115deg,#aeb3ba 0%,#f4f5f7 16%,#ffffff 30%,#d6d9de 46%,#b4b9c0 66%,#f2f3f5 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .n16{ -webkit-text-fill-color:currentColor; color:var(--silver); }
}

/* Self-drawing neon line-art (sprinter + the big "16" divider) */
.drawn-stroke{
  fill:none;
  stroke:var(--accent);
  stroke-width:2.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 6px rgba(255,26,26,0.7));
}
.drawn-speed{ stroke-width:4; opacity:0.9; }
/* Heavy round-capped strokes turn what would read as a crude stick figure
   into an athletic silhouette — same construction as the logo's sprinter. */
.drawn-limb{ stroke-width:11; }
.drawn-torso{ stroke-width:15; }
.drawn-head{ stroke-width:19; }
/* The brushed-chrome swoosh ring the logo's runner sits inside. */
.drawn-ring{ stroke:var(--silver); stroke-width:3; opacity:0.5; filter:none; }

.neon-divider{
  display:flex;
  justify-content:center;
  padding-block:var(--space-l);
  background:linear-gradient(180deg, transparent, rgba(255,26,26,0.05), transparent);
}
.neon-16 .drawn-stroke{ stroke-width:3.2; }
.neon-16{
  width:min(20rem, 62vw);
  height:auto;
  opacity:0.9;
}
.neon-16__group{ transform:skewX(-9deg); transform-origin:50% 50%; }


/* ============================================================
   MOTION LAYER v1.5 — Apple-style scroll storytelling
   ------------------------------------------------------------
   TWO ENGINES, NEVER BOTH AT ONCE (feature-detected in CSS with
   @supports and in site.js with CSS.supports):

     A. Scroll-driven engine (Chrome/Edge 115+, Safari 26+):
        `animation-timeline: view()/scroll()`. No JS, no observers.
     B. Fallback engine (Firefox, older Safari): IntersectionObserver
        + `.is-visible` classes and a rAF loop in site.js.

   Why the split matters: an earlier pass tried a clip-path wipe on
   IntersectionObserver-revealed elements and it deadlocked — Chrome
   measures intersection against *painted* (clipped) geometry, so an
   element clipped to (near) zero area reports 0% intersection forever
   and the observer that was supposed to reveal it can never fire.
   Keeping clip-path exclusively inside the scroll-driven engine (which
   uses no observers at all) removes the failure mode entirely; site.js
   skips the observer whenever the scroll-driven engine is live.

   prefers-reduced-motion: reduce → neither engine runs; every element
   is in its final, fully visible state and nothing is pinned.
   Only transform / opacity / clip-path / filter / stroke-dashoffset
   animate — no layout-triggering properties.
   ============================================================ */

/* ------------------------------------------------------------------
   ONE-SHOT: section transitions, image bands, speed streaks
   ------------------------------------------------------------------
   These run in EVERY browser off an IntersectionObserver, not off a
   scroll timeline, and they never play backwards. That is a deliberate
   UX call, not a limitation: a scrubbed reveal fades body copy back out
   when the reader scrolls up, which reads as a bug rather than as
   craft. Scrubbing is reserved for the things where it is the point —
   hero parallax, the progress rail, Ken Burns, the line-art draw and
   the pinned floors sequence.

   The clip-path here only ever hides a slice (15% from the top, 22%
   from the bottom), never the whole box, so the observer always has
   ample intersecting area to fire on. The deadlock this file warns
   about needs an element clipped to *zero* visible area.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;
    transform:translateY(22px) scale(0.985);
    clip-path:inset(15% 0 0 0);
    transition:opacity 0.75s var(--ease-expo), transform 0.85s var(--ease-expo), clip-path 0.85s var(--ease-expo);
  }
  .reveal.is-visible{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }
  .stagger > .reveal:nth-child(2){ transition-delay:0.09s; }
  /* see .is-settled below */
  .stagger > .reveal:nth-child(3){ transition-delay:0.18s; }
  .stagger > .reveal:nth-child(4){ transition-delay:0.27s; }

  /* Full-bleed image bands wipe open from the bottom edge, with a slight
     scale settle. Opacity stays high so a band is never a dark hole. */
  .wipe{
    opacity:0.55;
    transform:scale(1.03);
    clip-path:inset(0 0 22% 0);
    transition:opacity 0.9s var(--ease-expo), transform 1s var(--ease-expo), clip-path 1s var(--ease-expo);
  }
  .wipe.is-visible{ opacity:1; transform:none; clip-path:inset(0 0 0 0); }

  /* Once the wipe has played out, drop the clip entirely. `inset(0 0 0 0)` is
     visually identical to no clip at all, but it still forces the element onto
     its own clipped compositing layer for the rest of the page's life — with
     ~30 revealed elements that is a real cost, and it was enough to push a
     full-page headless raster over the renderer's limit. site.js adds
     .is-settled on the clip-path transitionend. */
  .reveal.is-settled, .wipe.is-settled{ clip-path:none; transition:none; }

  .speed-lines i{
    transform:scaleX(0);
    opacity:0;
    transition:transform 0.85s var(--ease-expo), opacity 0.45s linear;
  }
  .is-visible .speed-lines i{ transform:scaleX(1); opacity:1; }
  .speed-lines i:nth-child(2){ transition-delay:0.07s; }
  .speed-lines i:nth-child(3){ transition-delay:0.14s; }
  .speed-lines i:nth-child(4){ transition-delay:0.21s; }
}

/* ------------------------------------------------------------------
   B. ENGINE: SCROLL-DRIVEN (animation-timeline)
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){

    /* Self-drawing neon line-art. --len is written per path by site.js
       (getTotalLength); if the named timeline ever fails to resolve the
       animation is simply idle and the art renders fully drawn, which is
       the safe state. */
    .line-figure{ view-timeline-name:--figuredraw; view-timeline-axis:block; }
    .line-figure .drawn-stroke{
      animation:strokeDraw linear both;
      animation-timeline:--figuredraw;
      animation-range:entry 12% cover 55%;
    }
    .neon-16{ view-timeline-name:--n16draw; view-timeline-axis:block; }
    .neon-16 .drawn-stroke{
      animation:strokeDraw linear both;
      animation-timeline:--n16draw;
      animation-range:entry 10% cover 60%;
    }
    @keyframes strokeDraw{
      from{ stroke-dashoffset:var(--len, 400px); }
      to{ stroke-dashoffset:0; }
    }
  }
}

/* ------------------------------------------------------------------
   Hero + chrome: scroll() timelines (root scroller)
   ------------------------------------------------------------------ */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .scroll-progress span{
      animation:progressGrow linear both;
      animation-timeline:scroll(root block);
    }
    @keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

    /* Hero copy drifts up and dissolves as the image takes over. */
    .hero-copy-wrap{
      animation:heroCopyDrift linear both;
      animation-timeline:scroll(root block);
      animation-range:0 78vh;
    }
    @keyframes heroCopyDrift{
      from{ transform:translateY(0); opacity:1; }
      to{ transform:translateY(-46px); opacity:0.15; }
    }
  }
}

/* ------------------------------------------------------------------
   Always-on micro-motion (looping, not scroll-linked)
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference){
  /* Red neon glow pulse on primary CTAs. The glow lives on a pseudo-element
     and only its OPACITY animates — animating box-shadow directly would
     repaint the button every frame, and the whole layer is restricted to
     transform/opacity/clip-path/filter on purpose. Pauses on hover so the
     hover shadow reads cleanly. */
  .btn-pulse::after{ animation:neonPulse 3s ease-in-out infinite; }
  .btn-pulse:hover::after, .btn-pulse:focus-visible::after{ animation-play-state:paused; }
  @keyframes neonPulse{
    0%,100%{ opacity:0; }
    50%{ opacity:1; }
  }

  /* Brushed-chrome shimmer travelling across the "16" in headings. */
  .n16{ animation:chromeShimmer 6.5s linear infinite; }
  @keyframes chromeShimmer{
    from{ background-position:0% 50%; }
    to{ background-position:200% 50%; }
  }
}

/* ------------------------------------------------------------------
   prefers-reduced-motion: reduce — final, complete, static state.
   The global override at the top of this file already forces every
   animation/transition to 0.01ms; this block resets the properties that
   a zero duration alone cannot (SVG stroke state, decorative chrome).
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
  .drawn-stroke{ stroke-dasharray:none !important; stroke-dashoffset:0 !important; }
  .hero-mark{ opacity:0.5 !important; transform:none !important; }
  .hero-media__img{ transform:none !important; }
  .hero-copy-wrap{ transform:none !important; opacity:1 !important; }
  .hero-scroll-cue{ display:none !important; }
  .scroll-progress{ display:none !important; }
  .reveal, .wipe{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .speed-lines i{ transform:none !important; opacity:1 !important; }
  .photo--kenburns .photo__img{ transform:none !important; }
}


/* ---- Map embed (real Google Map, dark-tinted) ---- */
.map-embed{ position:relative; border:1px solid #2a2e35; border-radius:var(--radius-m); overflow:hidden; background:var(--surface, #15171b); aspect-ratio:4/3; }
.map-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter:grayscale(1) invert(.92) hue-rotate(180deg) contrast(.92) brightness(.9); }
.map-embed__label{ position:absolute; left:.85rem; bottom:.85rem; max-width:calc(100% - 1.7rem); display:grid; gap:.15rem; padding:.7rem .9rem; background:rgba(11,12,14,.86); border:1px solid rgba(255,26,26,.45); border-radius:10px; backdrop-filter:blur(6px); font-size:.85rem; line-height:1.35; }
.map-embed__label strong{ font-family:var(--font-display, inherit); font-style:italic; text-transform:uppercase; letter-spacing:.04em; color:var(--accent, #ff1a1a); font-size:1rem; }
.map-embed__label span{ color:var(--text, #f4f5f7); }
.map-embed__label a{ color:var(--silver, #c9ccd1); text-decoration:underline; text-underline-offset:3px; }
.map-embed__label a:hover{ color:var(--accent, #ff1a1a); }
@media (prefers-reduced-motion: no-preference){ .map-embed.reveal{ transition-delay:.05s; } }

/* picture wrappers behave like their img */
.photo picture,.hero-media picture{display:contents;}