/* ==========================================================================
   SAM FITNESS — PAGE & SECTION STYLESHEET
   Loaded after main.css. Mobile-first throughout.
   --------------------------------------------------------------------------
   1.  Hero (scroll sequence)
   2.  Marquee ticker
   3.  Distance module
   4.  Discipline (pinned horizontal)
   5.  Transformation proof sliders
   6.  Service tiles
   7.  Commit band
   8.  Membership / price gate
   9.  FAQ accordion
   10. Stats band
   11. Coaches
   12. Service detail blocks
   13. Quiz
   14. Gallery + lightbox
   15. Contact + forms
   16. Page headers (inner pages)
   17. Notices
   ========================================================================== */

/* ----------------------------------------------------------- REVEAL HERO */
.reveal-hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 620px;
  overflow: hidden;
  background: var(--ink, #0A0A0A);
  color: var(--bone, #F4F4F2);
  user-select: none;
}

.reveal-hero__base,
.reveal-hero__fit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.reveal-hero__base {
  z-index: 1;
  transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-hero__fit {
  z-index: 2;
}

.reveal-hero__canvas {
  display: none;
}

.reveal-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at center, rgba(10, 10, 10, 0.15) 0%, rgba(10, 10, 10, 0.55) 100%),
              linear-gradient(to bottom, rgba(10, 10, 10, 0.6) 0%, transparent 25%, transparent 75%, rgba(10, 10, 10, 0.85) 100%);
}

.reveal-hero__heading {
  position: absolute;
  top: 65%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 1200px;
  text-align: center;
  z-index: 4;
  pointer-events: none;
}

.reveal-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 7rem);
  line-height: 0.92;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-shadow: 0 4px 28px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
}

.reveal-hero__line {
  display: block;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  animation: revealHeroBlurRise 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-hero__line:nth-child(1) {
  animation-delay: 0.25s;
}

.reveal-hero__line:nth-child(2) {
  animation-delay: 0.42s;
}

.reveal-hero__sub-left {
  position: absolute;
  bottom: var(--s-6);
  left: var(--s-6);
  max-width: 280px;
  z-index: 4;
  opacity: 0;
  transform: translateY(16px);
  animation: revealHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.7s forwards;
}

.reveal-hero__sub-left p {
  font-family: var(--font-body, 'Inter Tight', sans-serif);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(244, 244, 242, 0.75);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.reveal-hero__sub-right {
  position: absolute;
  bottom: var(--s-6);
  right: var(--s-6);
  max-width: 320px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: var(--s-4);
  opacity: 0;
  transform: translateY(16px);
  animation: revealHeroFadeUp 1s cubic-bezier(0.16, 1, 0.3, 1) 0.85s forwards;
}

.reveal-hero__sub-right p {
  font-family: var(--font-body, 'Inter Tight', sans-serif);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--bone);
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.reveal-hero__hint {
  position: absolute;
  bottom: var(--s-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  transition: opacity 0.5s ease-out;
}

@keyframes revealHeroBlurRise {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes revealHeroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .reveal-hero__base {
    background-image: url('../img/reveal-hero-base-mobile.webp') !important;
  }
  .reveal-hero__fit {
    background-image: url('../img/reveal-hero-fit-mobile.webp') !important;
  }
  .reveal-hero__sub-left {
    display: none;
  }
  .reveal-hero__sub-right {
    left: var(--s-4);
    right: var(--s-4);
    max-width: none;
    align-items: center;
    text-align: center;
    bottom: var(--s-5);
  }
  .reveal-hero__heading {
    top: 10%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-hero__line,
  .reveal-hero__sub-left,
  .reveal-hero__sub-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
  .reveal-hero__fit {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 1 !important;
  }
  .reveal-hero__base {
    display: none !important;
  }
  .reveal-hero__hint {
    display: none !important;
  }
}

/* ---------------------------------------------------------------- 1. HERO */
.hero {
  position: relative;
  height: 320vh;              /* the scroll distance the sequence spans */
  /* The header is position:fixed and so takes no space in flow. This padding
     is what stops the sequence starting underneath it — the frames begin on
     the header's bottom edge instead of running behind it. box-sizing is
     border-box globally, so the 320vh scroll distance is unchanged. */
  padding-top: var(--header-h);
  background: var(--black);
}
.hero.is-static { height: 100svh; }

.hero__sticky {
  position: sticky;
  top: var(--header-h);       /* pins just below the header, not under it */
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  place-items: center;
}
.hero.is-static .hero__sticky { position: relative; }

.hero__canvas,
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 1024px) {
  .hero__canvas,
  .hero__poster {
    object-position: center top;
  }
}
.hero__poster {
  z-index: 0;
  background: var(--char) center/cover no-repeat;
}
/* Fades in over the poster once enough frames are decoded to scrub, so the
   swap is never a visible pop. */
.hero__canvas { z-index: 1; opacity: 0; transition: opacity 600ms var(--ease-out); }
.hero.is-ready .hero__canvas { opacity: 1; }

/* Grade: a layered scrim so the type always has a backdrop, plus a whisper of
   red so the footage sits on-brand. Four layers, front to back:
     1. copy scrim  — the copy is centred now, so the darkest band follows it.
                      The old grade hugged the bottom edge and left the middle
                      of the frame its brightest area, which is exactly where
                      the type moved to.
     2. vignette    — pulls the edges down, keeps the eye on the subject.
     3. base anchor — grounds the bottom edge into the section below.
     4. flat floor  — guarantees a minimum darkening on every frame, so a
                      bright frame mid-sequence can never wash the type out.
   Measured together these hold the sub copy above 4.5:1 across the sequence. */
.hero__grade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(10, 10, 10, 0.65);
}

.hero__copy {
  position: relative;
  z-index: 3;
  width: var(--container);
  margin-inline: auto;
  height: 100%;
  display: grid;
  align-content: end;
  justify-items: center;
  text-align: center;
  pointer-events: none;
}

.hero__stage {
  grid-area: 1 / 1;
  padding-bottom: clamp(72px, 14vh, 160px);
}
.hero__stage:nth-child(2),
.hero__stage:nth-child(3) {
  padding-bottom: clamp(48px, 8vh, 96px);
}
/* The default state is VISIBLE, not hidden. The first beat — which carries the
   page's only <h1> — must render with no JS, no GSAP and no scroll at all. The
   previous default of opacity:0 on every stage meant a stalled or absent script
   shipped a hero with no readable copy in it. */
.hero__stage:not(:first-child) {
  opacity: 0;
  visibility: hidden;
}
.hero__stage > * { pointer-events: auto; }

/* Once the scrubber has taken over it drives all three beats itself.
   visibility (not just opacity) is what keeps the two inactive beats out of the
   tab order and out of the accessibility tree — they sit stacked in the same
   grid cell, so on opacity alone the invisible third beat's two CTAs stayed
   focusable and swallowed clicks aimed at the first. */
.hero.is-ready .hero__stage {
  opacity: 0;
  visibility: hidden;
  transform: translateY(28px);
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out),
              visibility 0s linear 500ms;
}
.hero.is-ready .hero__stage.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 500ms var(--ease-out),
              transform 500ms var(--ease-out),
              visibility 0s;
}

/* Static fallback: reduced motion, save-data / 2g, no GSAP, slow start.
   The three beats collapse into one conventional hero. The FIRST stage has to
   survive — it holds the only <h1> on the page, and the old rule hid every
   stage but the last, so each of those paths shipped an h1-less page to exactly
   the visitors least equipped to cope. What drops instead is the middle beat,
   the opening beat's set-up line, and the closing beat's second display line:
   headline, then value proposition, then the CTAs. */
.hero.is-static .hero__copy { align-content: center; padding-bottom: 0; }
.hero.is-static .hero__stage {
  grid-area: auto;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hero.is-static .hero__stage:nth-child(2) { display: none; }
.hero.is-static .hero__stage:first-child .hero__sub { display: none; }
.hero.is-static .hero__stage:last-child .hero__title { display: none; }
.hero.is-static .hero__stage:last-child .hero__sub { margin-top: var(--s-5); }

.hero__title {
  font-family: var(--font-display);
  /* Deliberately not the shared --fs-hero token, whose 11rem (176px) ceiling
     is display type shouting rather than speaking. Anton is ultra-condensed so
     it still reads large at 96px. The token is left alone because .t-hero uses
     it on the inner page headers, which are out of scope here. */
  font-size: clamp(3.25rem, 10vw, 6rem);
  line-height: 0.86;
  text-transform: uppercase;
  letter-spacing: -0.025em;
  text-wrap: balance;
  /* The max-widths keep the measure readable; margin-inline centres the block
     itself, which text-align alone cannot do on a constrained block. */
  max-width: 15ch;
  margin-inline: auto;
}
.hero__sub {
  margin-top: var(--s-4);
  margin-inline: auto;
  color: var(--text);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  text-wrap: pretty;
  max-width: 44ch;
}
.hero__actions {
  margin-top: var(--s-4);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--s-3);
}
@media (min-width: 1024px) {
  .hero__title { max-width: none; }
  .hero__title br { display: none; }
  .hero__actions { flex-direction: row; }
}

.hero__cue {
  position: absolute;
  left: 50%;
  bottom: var(--s-5);
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;            /* 10px sat below comfortable reading at this tracking */
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: grid;
  justify-items: center;
  gap: var(--s-2);
  pointer-events: none;
}
.hero__cue span {
  display: block;
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--red), transparent);
  animation: cueDrop 2s var(--ease-io) infinite;
}
@keyframes cueDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  46%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
.hero.is-static .hero__cue { display: none; }

/* ------------------------------------------------------------ 2. MARQUEE */
.marquee {
  overflow: hidden;
  background: var(--red);
  color: var(--black);
  padding-block: var(--s-3);
  display: flex;
  white-space: nowrap;
  user-select: none;
}
.marquee__inner {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  padding-right: var(--s-7);
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  animation: marquee 32s linear infinite;
  flex: none;
  min-width: 100%;
  justify-content: space-around;
}
.marquee:hover .marquee__inner { animation-play-state: paused; }
.marquee.is-static .marquee__inner { animation: none; }
.marquee__inner li {
  display: flex;
  align-items: center;
  gap: var(--s-7);
  font-weight: 700;
}
.marquee__inner li::after {
  content: '';
  width: 30px;
  height: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='48' fill='%23E5352B'/%3E%3Ccircle cx='50' cy='50' r='38' fill='%23F4F4F2'/%3E%3Ccircle cx='50' cy='50' r='28' fill='%23E5352B'/%3E%3Ccircle cx='50' cy='50' r='18' fill='%230A5BC4'/%3E%3Cpolygon points='50,33.5 53.6,44.5 65.2,44.5 55.8,51.3 59.4,62.3 50,55.5 40.6,62.3 44.2,51.3 34.8,44.5 46.4,44.5' fill='%23F4F4F2'/%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: none;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }

/* ----------------------------------------------------------- 3. DISTANCE */
.distance__grid { display: grid; gap: var(--s-6); }
@media (min-width: 1024px) {
  .distance__grid { grid-template-columns: 1.05fr 1fr; gap: var(--s-8); align-items: center; }
}

.distance__map {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: inset 0 0 0 1px var(--hairline);
}
.distance__map iframe { width: 100%; height: 100%; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) contrast(0.95); }
.distance__map--empty {
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--s-6);
  color: var(--text-mute);
}
.distance__map--empty svg { width: 40px; height: 40px; color: var(--red); margin-bottom: var(--s-4); }

.drives { display: grid; gap: var(--s-3); }
.drive {
  display: flex;
  align-items: baseline;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
}
.drive__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.75rem);
  line-height: 1;
  color: var(--red);
  flex: none;
  min-width: 2.4ch;
}
.drive__unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-mute);
  display: block;
}
.drive__from { font-weight: 600; }

.perks { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.perk { display: flex; gap: var(--s-4); align-items: flex-start; }
.perk__tick {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(229, 53, 43, 0.12);
  color: var(--red);
  margin-top: 2px;
}
.perk__tick svg { width: 14px; height: 14px; }
.perk strong { display: block; }
.perk span { color: var(--text-mute); font-size: var(--fs-sm); }

/* --------------------------------------------------------- 4. DISCIPLINE */
/* content-visibility must stay off here: this section is pinned by GSAP, and
   an off-screen intrinsic-size estimate collapses its real (pin-spacer) height,
   which desyncs the pinned scroll and leaves a black gap between the cards.
   Overrides the .u-deferred utility on the same element. */
/* Black (var(--black)) to match the hero section directly above it, so the
   two full-viewport sections read as one continuous black run with no colour
   step at the boundary. */
.discipline { background: var(--black); content-visibility: visible; }

/* Default = native swipe carousel, at EVERY width. This is the no-JS /
   reduced-motion fallback. When GSAP is available, initDiscipline() adds
   .is-pinned to switch on the pinned horizontal scroll — where vertical
   scrolling drives the cards sideways — on mobile and tablet too, not
   just desktop. */
.discipline__track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--s-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.discipline__track::-webkit-scrollbar { display: none; }
.disc-card { width: 82%; flex-shrink: 0; scroll-snap-align: center; }
@media (min-width: 1024px) { .disc-card { width: 46vw; } }

/* Pinned mode — activated by JS at all screen sizes. The section keeps the
   standard .section top padding (var(--section-y)) and the following section
   keeps its standard top padding, so the gap to the sections before and after
   matches the page rhythm. Bottom padding is dropped because the pinned stage
   is 100svh while the cards are shorter and centred — that leftover space below
   the last card already supplies the bottom half of the gap, so adding a full
   section-y on top of it would double the space and leave a huge void. */
.discipline.is-pinned { padding-bottom: 0; }
.discipline.is-pinned .discipline__pin {
  height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
.discipline.is-pinned .discipline__track {
  overflow: visible;
  scroll-snap-type: none;
  width: max-content;
  flex-shrink: 0;
  gap: var(--s-5);
  padding-inline: 4vw;
}
.discipline.is-pinned .disc-card {
  scroll-snap-align: none;
  width: 80vw;
  min-height: 66svh;
}
@media (min-width: 1024px) {
  /* Taller cards fill more of the 100svh pin, so the centered dead-space above
     them (the gap under the section heading on entry) is much smaller. */
  .discipline.is-pinned .disc-card { width: 46vw; min-height: 84vh; }
}

.disc-card {
  position: relative;
  min-height: 420px;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--s-6);
  background: var(--surface-2);
  isolation: isolate;
}
@media (min-width: 1024px) { .disc-card { min-height: 62vh; padding: var(--s-7); width: 46vw; flex-shrink: 0; } }

.disc-card img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
}
.disc-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(10,10,10,0.94) 12%, rgba(10,10,10,0.5) 55%, rgba(10,10,10,0.25) 100%);
}
.disc-card__num {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 6rem);
  line-height: 0.8;
  color: var(--red);
  margin-bottom: var(--s-4);
}
.disc-card h3 { font-size: clamp(1.35rem, 3vw, 2rem); margin-bottom: var(--s-3); }
.disc-card p { color: var(--text-mute); max-width: 40ch; }

/* ------------------------------------------------------------- 5. PROOF */
.proof__grid { display: grid; gap: var(--gutter); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .proof__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .proof__grid { grid-template-columns: repeat(4, 1fr); } }

.ba {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}

.ba__stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--surface-2);
  touch-action: pan-y;         /* let the page still scroll vertically over the slider */
  cursor: ew-resize;
  user-select: none;
}
.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; user-select: none; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 2px;
  background: var(--red);
  transform: translateX(-1px);
  pointer-events: none;
}
.ba__handle::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.ba__handle::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 10px;
  transform: translate(-50%, -50%);
  z-index: 1;
  background:
    linear-gradient(var(--white), var(--white)) left center / 5px 10px no-repeat,
    linear-gradient(var(--white), var(--white)) right center / 5px 10px no-repeat;
  clip-path: polygon(0 50%, 5px 0, 5px 100%, 100% 50%, 13px 0, 13px 100%);
}

.ba__tag {
  position: absolute;
  top: var(--s-3);
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  background: rgba(10,10,10,0.7);
  backdrop-filter: blur(6px);
  color: var(--bone);
}
.ba__tag--before { left: var(--s-3); }
.ba__tag--after  { right: var(--s-3); color: var(--red); }

/* Keyboard control: the range input sits invisibly over the stage */
.ba__range {
  position: absolute;
  inset: auto 0 0 0;
  width: 100%;
  opacity: 0;
  height: 44px;
  margin: 0;
  z-index: 3;
  cursor: ew-resize;
}
.ba__range:focus-visible { opacity: 1; }

.ba__meta { padding: var(--s-5); }
.ba__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  line-height: 1.05;
  margin-bottom: var(--s-3);
}
.ba__line { color: var(--text-mute); font-size: var(--fs-sm); line-height: 1.5; }

/* ------------------------------------------------------ 6. SERVICE TILES */
.tiles { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px)  { .tiles { grid-template-columns: repeat(3, 1fr); gap: var(--gutter); } }

.tile {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: var(--s-4);
  isolation: isolate;
  background: var(--surface-2);
}
@media (min-width: 768px) { .tile { aspect-ratio: 4 / 5; padding: var(--s-5); } }

.tile img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 700ms var(--ease-out);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 10, 0.65);
  transition: opacity 500ms var(--ease-out);
}
.tile__body { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); width: 100%; text-align: center; }
.tile h3 { font-size: clamp(1.2rem, 3vw, 1.8rem); line-height: 1.1; }
.tile__arrow {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  transition: transform 500ms var(--ease-out);
}
.tile__arrow svg { width: 16px; height: 16px; }

@media (hover: hover) {
  .tile:hover img { transform: scale(1.06); }
  .tile:hover::before { opacity: 0.4; }
  .tile:hover .tile__arrow { transform: translateY(4px); }
  .tile__arrow { transform: translateY(-6px) scale(0.9); opacity: 0.9; }
  .tile:hover .tile__arrow { transform: translateY(0) scale(1); opacity: 1; }
}

/* --------------------------------------------------------- 7. COMMIT BAND */
.commit {
  background: var(--red);
  color: var(--black);
  text-align: center;
  padding-block: clamp(80px, 14vw, 180px);
  position: relative;
  overflow: hidden;
}
.commit h2 {
  color: var(--black);
  font-size: clamp(2.75rem, 12vw, 9rem);
  line-height: 0.84;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-6);
}
.commit p {
  color: rgba(10,10,10,0.72);
  font-weight: 500;
  max-width: 46ch;
  margin: 0 auto var(--s-6);
}
.commit .btn { --btn-bg: var(--black); --btn-fg: var(--white); }
.commit .btn::after { background: var(--ink); }

/* --------------------------------------------- 8. MEMBERSHIP / PRICE GATE */
.plans { display: grid; gap: var(--s-4); grid-template-columns: 1fr; }
@media (min-width: 640px)  { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .plans { grid-template-columns: repeat(5, 1fr); gap: var(--s-3); } }

.plan {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5);
  position: relative;
}
.plan.is-popular {
  border-color: var(--red);
  background: linear-gradient(180deg, rgba(229,53,43,0.09), transparent 60%), var(--surface);
}
.plan__badge {
  position: absolute;
  top: 0; left: var(--s-5);
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--red);
  color: var(--white);
  padding: 5px var(--s-3);
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.plan__badge--free { background: var(--bone); color: var(--black); }

.plan__name { font-family: var(--font-display); font-size: 1.5rem; text-transform: uppercase; }
.plan__dur {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: 2px;
}

.plan__price {
  margin-block: var(--s-5) var(--s-4);
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-height: 56px;
  position: relative;
}
.plan__cur {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-mute);
}
.plan__amt {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5vw, 3rem);
  line-height: 1;
  color: var(--bone);
}
.plan__per { font-size: 12px; color: var(--text-mute); }

/* The gate itself. Blur is applied to the numerals, never to the benefits. */
.plans.is-locked .plan__price {
  filter: blur(9px);
  user-select: none;
  pointer-events: none;
}
.plan__price { transition: filter 700ms var(--ease-out); }

.plan__list { display: grid; gap: var(--s-3); margin-block: var(--s-4) var(--s-5); flex: 1; }
.plan__list li {
  display: flex;
  gap: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--text-mute);
  line-height: 1.45;
}
.plan__list svg { width: 15px; height: 15px; flex: none; color: var(--red); margin-top: 4px; }

.gate {
  margin-top: var(--s-6);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
  text-align: center;
}
.gate.is-unlocked { display: none; }
.gate__lock {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  margin: 0 auto var(--s-4);
  border-radius: 50%;
  background: rgba(229,53,43,0.12);
  color: var(--red);
}
.gate__lock svg { width: 20px; height: 20px; }
.gate h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.gate p { color: var(--text-mute); max-width: 46ch; margin: 0 auto var(--s-5); font-size: var(--fs-sm); }

.gate__form { display: grid; gap: var(--s-3); max-width: 520px; margin: 0 auto; }
@media (min-width: 640px) { .gate__form { grid-template-columns: 1fr 1fr; } }
.gate__form .btn { grid-column: 1 / -1; }

.value-note {
  margin-top: var(--s-6);
  padding: var(--s-5);
  border-left: 2px solid var(--red);
  background: var(--surface);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.value-note p { color: var(--text); font-weight: 500; }
.value-note small { display: block; margin-top: var(--s-3); color: var(--text-mute); }

/* --------------------------------------------------------------- 9. FAQ */
.faq { display: grid; gap: 0; max-width: 880px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__item:first-child { border-top: 1px solid var(--hairline); }

.faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) 0;
  text-align: left;
  font-family: var(--font-serif);
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color var(--t-micro) var(--ease-out);
}
.faq__q:hover { color: var(--red); }
.faq__icon {
  flex: none;
  width: 28px; height: 28px;
  position: relative;
}
.faq__icon::before, .faq__icon::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  background: var(--red);
  transform: translate(-50%, -50%);
  transition: transform var(--t-std) var(--ease-out);
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after  { width: 2px; height: 14px; }
.faq__q[aria-expanded="true"] .faq__icon::after { transform: translate(-50%, -50%) scaleY(0); }

.faq__a {
  overflow: hidden;
  height: 0;
  transition: height var(--t-std) var(--ease-io);
}
.faq__a > div { padding-bottom: var(--s-5); color: var(--text-mute); max-width: 68ch; }

/* -------------------------------------------------------------- 10. STATS */
.stats { display: grid; gap: var(--s-6); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; }
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  line-height: 0.9;
  color: var(--bone);
  display: block;
}
.stat__num.is-counting { color: var(--red); }
.stat__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: var(--s-2);
  display: block;
}

/* ------------------------------------------------------------ 11. COACHES */
.coaches { display: grid; gap: var(--gutter); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .coaches { grid-template-columns: repeat(4, 1fr); } }

.coach__photo {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  margin-bottom: var(--s-4);
}
.coach__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}
.coach__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: filter 600ms var(--ease-out), transform 700ms var(--ease-out);
}
@media (hover: hover) {
  .coach:hover .coach__photo::after { opacity: 0; }
  .coach:hover .coach__photo img { transform: scale(1.04); }
}
.coach h3 { font-size: 1.25rem; }
.coach__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-top: 4px;
}
.coach__cert { font-size: 0.8125rem; color: var(--text-mute); margin-top: var(--s-2); }
.coach__quote { font-size: var(--fs-sm); color: var(--text-mute); font-style: italic; margin-top: var(--s-3); }

/* ------------------------------------------------- 12. SERVICE DETAIL BLOCKS */
.svc { padding-block: clamp(56px, 8vw, 110px); border-bottom: 1px solid var(--hairline); }
.svc:last-of-type { border-bottom: 0; }
.svc__grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 1024px) {
  .svc__grid { grid-template-columns: 1fr 1fr; gap: var(--s-9); }
  .svc:nth-child(even) .svc__media { order: 2; }
}

.svc__media {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  clip-path: polygon(40px 0, 100% 0, 100% calc(100% - 40px), calc(100% - 40px) 100%, 0 100%, 0 40px);
}
.svc__media img { width: 100%; height: 100%; object-fit: cover; }

.svc h2 { margin-bottom: var(--s-4); }
.svc__outcome {
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border-left: 2px solid var(--red);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-weight: 500;
}
.checklist { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.checklist li { display: flex; gap: var(--s-3); color: var(--text-mute); }
.checklist svg { width: 16px; height: 16px; flex: none; color: var(--red); margin-top: 5px; }

/* --------------------------------------------------------------- 13. QUIZ */
.quiz {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: clamp(24px, 5vw, 56px);
  max-width: 720px;
  margin-inline: auto;
}
.quiz__step { display: none; }
.quiz__step.is-active { display: block; }
.quiz__progress {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: var(--s-4);
}
.quiz h3 { font-size: var(--fs-h3); margin-bottom: var(--s-5); }
.quiz__opts { display: grid; gap: var(--s-3); }
.quiz__opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  font-weight: 500;
  transition: border-color var(--t-micro) var(--ease-out),
              background-color var(--t-micro) var(--ease-out);
}
.quiz__opt:hover { border-color: var(--red); background: rgba(229,53,43,0.06); }
.quiz__opt svg { width: 16px; height: 16px; color: var(--red); flex: none; }
.quiz__result { text-align: center; }
.quiz__result .kicker { justify-content: center; }

/* ----------------------------------------------------- 14. GALLERY + LIGHTBOX */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-bottom: var(--s-6); }
.filter {
  padding: 10px var(--s-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--text-mute);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: all var(--t-micro) var(--ease-out);
}
.filter:hover { color: var(--text); border-color: var(--text-mute); }
.filter.is-active { background: var(--red); border-color: var(--red); color: var(--white); }

/* The gallery breaks out of the standard column so the photos fill the screen. */
.container--gallery { width: min(96vw, 1720px); }

.masonry { columns: 2; column-gap: var(--s-3); }
@media (min-width: 768px)  { .masonry { columns: 3; column-gap: var(--gutter); } }
@media (min-width: 1280px) { .masonry { columns: 4; } }
@media (min-width: 1720px) { .masonry { columns: 5; } }

.shot {
  break-inside: avoid;
  margin-bottom: var(--s-3);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
}
@media (min-width: 768px) { .shot { margin-bottom: var(--gutter); } }
.shot img { width: 100%; height: auto; transition: transform 700ms var(--ease-out); }
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.5);
  opacity: 1;
  transition: opacity var(--t-std) var(--ease-out);
  pointer-events: none;
}
@media (hover: hover) {
  .shot:hover img { transform: scale(1.05); }
  .shot:hover::after { opacity: 0; }
}
.shot.is-hidden { display: none; }
.shot__cap {
  display: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(10,10,10,0.97);
  display: grid;
  grid-template-rows: auto 1fr auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-std) var(--ease-out), visibility 0s linear var(--t-std);
}
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-std) var(--ease-out), visibility 0s; }
.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--gutter);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text-mute);
}
.lightbox__close, .lightbox__nav {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  color: var(--bone);
  transition: all var(--t-micro) var(--ease-out);
}
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__close svg, .lightbox__nav svg { width: 18px; height: 18px; }
.lightbox__stage {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0 var(--s-3);
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--r-xs);
}
.lightbox__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-5);
  padding: var(--s-4) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom, 0));
}
.lightbox__cap { font-size: var(--fs-sm); color: var(--text-mute); text-align: center; flex: 1; }

/* -------------------------------------------------- 15. CONTACT + FORMS */
.contact__grid { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .contact__grid { grid-template-columns: 1.15fr 1fr; gap: var(--s-9); } }

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

.field { position: relative; }
.field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--s-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: var(--s-3) var(--s-4);
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  color: var(--text);
  transition: border-color var(--t-micro) var(--ease-out),
              box-shadow var(--t-micro) var(--ease-out);
}
.field textarea { min-height: 132px; resize: vertical; padding-top: var(--s-4); }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F98' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-4) center;
  background-size: 18px;
  padding-right: var(--s-8);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(229, 53, 43, 0.18);
}
.field input::placeholder, .field textarea::placeholder { color: #5A5F68; }

.field.has-error input,
.field.has-error select,
.field.has-error textarea { border-color: var(--red-hot); }
.field__err {
  display: none;
  margin-top: 6px;
  font-size: 0.8125rem;
  color: var(--red-hot);
}
.field.has-error .field__err { display: block; }

/* Spam honeypot — hidden from humans, visible to naive bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form__note { font-size: 0.8125rem; color: var(--text-mute); }

.form__success {
  display: none;
  text-align: center;
  padding: var(--s-8) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--red);
  border-radius: var(--r-md);
}
.form__success.is-shown { display: block; }
.form__success svg { width: 48px; height: 48px; color: var(--red); margin: 0 auto var(--s-4); }
.form__success h3 { font-size: var(--fs-h3); margin-bottom: var(--s-3); }
.form__success p { color: var(--text-mute); max-width: 42ch; margin: 0 auto var(--s-5); }
.is-submitted .form { display: none; }

.info-card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-6);
}
.info-card + .info-card { margin-top: var(--s-4); }
.info-card h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-kick);
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-mute);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.info-card address { font-style: normal; line-height: 1.6; }
.info-row {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-3);
}
.info-row + .info-row { border-top: 1px solid var(--hairline); }
.info-row__icon {
  flex: none;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(229,53,43,0.1);
  color: var(--red);
}
.info-row__icon svg { width: 17px; height: 17px; }
.info-row small {
  display: block;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.copy-btn {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px var(--s-3);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  min-height: 36px;
  transition: all var(--t-micro) var(--ease-out);
}
.copy-btn:hover { color: var(--red); border-color: var(--red); }
.copy-btn.is-done { color: var(--red); border-color: var(--red); }

.map-full {
  height: clamp(300px, 46vh, 520px);
  background: var(--surface-2);
  position: relative;
  /* Matches .distance__map. Without it nothing clips a child that outgrows the
     box, and the empty-state pin did exactly that. */
  overflow: hidden;
}
.map-full iframe { width: 100%; height: 100%; filter: invert(0.92) hue-rotate(180deg) saturate(0.6) contrast(0.95); }
.map-full--empty { display: grid; place-items: center; color: var(--text-mute); text-align: center; padding: var(--s-6); }
/* The pin SVG carries a viewBox but no width/height, so with no rule here it
   resolves to 100% of the container — 824px square — and bled over the page.
   Mirrors .distance__map--empty svg above. */
.map-full--empty svg { width: 40px; height: 40px; color: var(--red); margin-bottom: var(--s-4); }

/* ------------------------------------------------------- 16. PAGE HEADERS */
.pagehead {
  position: relative;
  padding-top: calc(var(--header-h) + clamp(56px, 10vw, 120px));
  padding-bottom: clamp(48px, 8vw, 100px);
  overflow: hidden;
  isolation: isolate;
}
.pagehead__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.pagehead__bg img { width: 100%; height: 100%; object-fit: cover; }
.pagehead::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, var(--black) 4%, rgba(10,10,10,0.72) 48%, rgba(10,10,10,0.5) 100%);
}
.pagehead h1 { max-width: 18ch; }
.pagehead .lede { margin-top: var(--s-5); }

.crumbs {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: var(--s-5);
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.crumbs a:hover { color: var(--red); }
.crumbs span { color: var(--smoke); }

/* ------------------------------------------------------------ 17. NOTICES */
/* Shown when config.js still holds [PLACEHOLDER] values. Never ships live. */
.notice {
  background: rgba(229, 53, 43, 0.1);
  border: 1px dashed var(--red);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: var(--fs-sm);
  color: var(--text);
  display: flex;
  gap: var(--s-3);
  align-items: flex-start;
}
.notice svg { width: 18px; height: 18px; color: var(--red); flex: none; margin-top: 3px; }
.notice code {
  font-family: var(--font-mono);
  font-size: 0.8125em;
  background: rgba(0,0,0,0.35);
  padding: 2px 6px;
  border-radius: var(--r-xs);
}

/* ------------------------------------------------ 18. FACILITY SHOWCASE (PHOTO-FREE) */
.facility-showcase {
  position: relative;
  overflow: hidden;
}

.facility-metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-6);
  margin-bottom: var(--s-8);
}
@media (min-width: 768px) {
  .facility-metrics {
    grid-template-columns: repeat(4, 1fr);
  }
}

.facility-metric {
  background: rgba(26, 27, 30, 0.6);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-micro) var(--ease-out), transform var(--t-micro) var(--ease-out);
}
.facility-metric::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0;
  transition: opacity var(--t-micro) var(--ease-out);
}
.facility-metric:hover {
  border-color: rgba(229, 53, 43, 0.4);
  transform: translateY(-2px);
}
.facility-metric:hover::before {
  opacity: 1;
}

.facility-metric__num {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--bone);
  display: block;
}
.facility-metric__num span {
  color: var(--red);
}
.facility-metric__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-top: var(--s-2);
  display: block;
}

/* Category Tabs */
.facility-tabs-nav {
  display: flex;
  gap: var(--s-2);
  overflow-x: auto;
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-6);
  scrollbar-width: none;
  border-bottom: 1px solid var(--hairline);
}
.facility-tabs-nav::-webkit-scrollbar { display: none; }

.facility-tab-btn {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: var(--s-3) var(--s-5);
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0;
  white-space: nowrap;
  cursor: pointer;
  transition: all var(--t-micro) var(--ease-out);
}
.facility-tab-btn:hover {
  color: var(--bone);
  border-color: rgba(229, 53, 43, 0.3);
  background: rgba(42, 44, 49, 0.8);
}
.facility-tab-btn.is-active {
  color: var(--bone);
  background: var(--ink);
  border-color: var(--red);
  border-bottom: 1px solid var(--ink);
  position: relative;
  margin-bottom: -1px;
}
.facility-tab-btn.is-active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--red);
}

/* Category Panels */
.facility-panel {
  display: none;
  background: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: clamp(24px, 5vw, 48px);
}
.facility-panel.is-active {
  display: block;
  animation: fadeInPanel 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPanel {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.facility-panel__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
.facility-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--s-9);
  margin-top: var(--s-8);
}
.facility-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}
.facility-block__image {
  border-radius: var(--r-md);
  overflow: hidden;
}
.facility-block__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}
@media (min-width: 860px) {
  .facility-block {
    flex-direction: row;
    align-items: center;
    gap: var(--s-8);
  }
  .facility-block:nth-child(even) {
    flex-direction: row-reverse;
  }
  .facility-block > * {
    flex: 1;
    min-width: 0;
  }
}

.facility-panel__meta h3 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--bone);
  margin-bottom: var(--s-3);
}
.facility-panel__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  background: rgba(229, 53, 43, 0.1);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(229, 53, 43, 0.25);
  margin-bottom: var(--s-4);
}
.facility-panel__desc {
  color: var(--text-mute);
  line-height: 1.6;
  font-size: var(--fs-body);
}

.facility-specs-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
}
.facility-spec-item {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  background: rgba(26, 27, 30, 0.7);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  padding: var(--s-4);
  transition: border-color var(--t-micro) var(--ease-out);
}
.facility-spec-item:hover {
  border-color: rgba(229, 53, 43, 0.35);
}
.facility-spec-item__icon {
  width: 28px;
  height: 28px;
  background: rgba(229, 53, 43, 0.12);
  border-radius: var(--r-xs);
  display: grid;
  place-items: center;
  color: var(--red);
  flex-shrink: 0;
}
.facility-spec-item__icon svg {
  width: 16px;
  height: 16px;
}
.facility-spec-item__title {
  font-weight: 600;
  color: var(--bone);
  font-size: var(--fs-sm);
}
.facility-spec-item__sub {
  font-size: 13px;
  color: var(--text-mute);
  margin-top: 2px;
}

/* Floor Philosophy Callout Banner */
.facility-banner {
  background: linear-gradient(135deg, rgba(229, 53, 43, 0.08) 0%, rgba(17, 18, 20, 0.95) 100%);
  border: 1px solid rgba(229, 53, 43, 0.3);
  border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px);
  margin-top: var(--s-8);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
@media (min-width: 768px) {
  .facility-banner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}
.facility-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--bone);
}
.facility-banner__text {
  color: var(--text-mute);
  font-size: var(--fs-sm);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .marquee__inner { animation: none !important; }
  .hero__cue span { animation: none !important; }
  .hero { height: 100svh !important; }
  .hero__sticky { position: relative !important; }
}