/* ==========================================================================
   TODAY'S FIT GYM LLC — INDUSTRIAL LUXURY DESIGN SYSTEM
   Location: Bur Dubai, Dubai, UAE | Domain: todaysfitgym.com
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT VARIABLES & DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* Color Palette */
  --color-bg: #0e0e0e;
  --color-bg-alt: #131313;
  --color-surface: #181818;
  --color-surface-elevated: #20201f;
  --color-surface-hover: #262624;
  --color-concrete: #2b2928;
  --color-concrete-light: #444240;
  
  /* Brand Accents */
  --color-brand-red: #e31e24;
  --color-brand-red-hover: #ff2930;
  --color-brand-red-dim: rgba(227, 30, 36, 0.12);
  --color-brand-red-glow: rgba(227, 30, 36, 0.3);

  /* Marquee band palette — the two colours the crossed ribbons are built from,
     reused by .section-band-red / .section-band-cream further down. */
  --color-band-cream: #f2f1ee;
  --color-band-ink: #131313;
  --color-band-ink-soft: #4e4b49;
  --color-band-ink-dim: rgba(19, 19, 19, 0.42);
  --color-band-red-ink: #c2161b;
  
  /* Architectural Interior Accents */
  --color-accent-rose: #a77d78;
  --color-accent-rose-dim: rgba(167, 125, 120, 0.15);
  --color-accent-wood: #8a6045;
  
  /* Typography Colors */
  --color-text: #f7f7f5;
  --color-text-muted: #a19f9b;
  --color-text-dim: #6c6a66;
  
  /* Borders & Dividers */
  --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
  --border-light: 1px solid rgba(255, 255, 255, 0.14);
  --border-red: 1px solid rgba(227, 30, 36, 0.4);
  --border-red-solid: 1px solid var(--color-brand-red);
  
  /* Typography Families */
  --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Spacing Scale */
  --container-max: 1320px;
  --container-narrow: 1040px;
  --section-padding-y: clamp(72px, 9vw, 130px);
  --section-padding-x: clamp(20px, 4vw, 48px);
  
  /* Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  
  /* Shadows & Glows */
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.8);
  --shadow-red-glow: 0 0 28px rgba(227, 30, 36, 0.28);
  
  /* Transitions */
  --transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  /* scroll-behavior: smooth; GSAP conflict */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--color-bg);
  color: var(--color-text);
  /* clip, not hidden: hidden makes this a scroll container and breaks
     position: sticky (the hero scroll sequence depends on it). hidden is kept
     first as a fallback for browsers without overflow: clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  background-color: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
  overflow-x: clip;
  position: relative;
  min-height: 100dvh;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

button, input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

button {
  cursor: pointer;
}

ul, ol {
  list-style: none;
}

::selection {
  background-color: var(--color-brand-red);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY SYSTEM
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--color-text);
  text-transform: uppercase;
}

h1 {
  font-size: clamp(2.75rem, 6.8vw, 5.5rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  letter-spacing: -0.03em;
}

h3 {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.2;
}

h4 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.3;
}

p {
  color: var(--color-text-muted);
  font-weight: 400;
}

.text-red {
  color: var(--color-brand-red) !important;
}

.text-white {
  color: #ffffff !important;
}

.text-rose {
  color: var(--color-accent-rose) !important;
}

.text-muted {
  color: var(--color-text-muted) !important;
}

/* Eyebrows / Kickers */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-brand-red);
  margin-bottom: 1rem;
}

.eyebrow::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--color-brand-red);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-brand-red);
}

.eyebrow-light {
  color: var(--color-text-muted);
}
.eyebrow-light::before {
  background-color: var(--color-text-muted);
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   4. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--section-padding-x);
  padding-right: var(--section-padding-x);
}

.container-narrow {
  max-width: var(--container-narrow);
}

.section {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  position: relative;
}

.section-bg-alt {
  background-color: var(--color-bg-alt);
}

.section-bg-concrete {
  background-color: var(--color-concrete);
  background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
}

.section-header {
  margin-bottom: clamp(40px, 6vw, 72px);
}

.section-header.text-center {
  text-align: center;
}

.section-header.text-center .eyebrow {
  justify-content: center;
}

.section-subtitle {
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  max-width: 620px;
  margin-top: 1rem;
}

.text-center .section-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Flex & Grid Helpers */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 4vw, 48px);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 28px);
}

/* --------------------------------------------------------------------------
   5. BUTTONS & INTERACTIVE ELEMENTS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px 30px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.btn-primary {
  background-color: var(--color-brand-red);
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(227, 30, 36, 0.35);
}

.btn-primary:hover {
  background-color: var(--color-brand-red-hover);
  color: #ffffff;
  box-shadow: 0 6px 26px rgba(227, 30, 36, 0.55);
  transform: translateY(-2px);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text);
  border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover {
  border-color: var(--color-brand-red);
  color: #ffffff;
  background-color: rgba(227, 30, 36, 0.08);
  transform: translateY(-2px);
}

.btn-outline-white {
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

.btn-outline-white:hover {
  background-color: #ffffff;
  color: #0e0e0e;
  border-color: #ffffff;
  transform: translateY(-2px);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 0.8125rem;
}

.btn-lg {
  padding: 18px 38px;
  font-size: 1.0625rem;
}

.btn svg {
  width: 18px;
  height: 18px;
  transition: transform var(--transition-fast);
}

.btn:hover svg {
  transform: translateX(4px);
}

.btn-whatsapp {
  background-color: #25D366;
  color: #ffffff;
  box-shadow: 0 4px 18px rgba(37, 211, 102, 0.3);
}

.btn-whatsapp:hover {
  background-color: #20BA59;
  color: #ffffff;
  box-shadow: 0 6px 26px rgba(37, 211, 102, 0.45);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   6. GLOBAL STICKY HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 24px 0;
  transition: all var(--transition-normal);
  background: transparent;
}

.site-header.scrolled {
  padding: 14px 0;
  background-color: rgba(14, 14, 14, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1010;
}

.brand-logo img {
  height: 44px;
  width: auto;
  transition: transform var(--transition-fast);
}

.site-header.scrolled .brand-logo img {
  height: 38px;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-link {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(247, 247, 245, 0.78);
  position: relative;
  padding: 6px 0;
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-brand-red);
  transition: width var(--transition-normal);
}

.nav-link:hover {
  color: #ffffff;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

.nav-link.active {
  color: #ffffff;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.header-phone-link:hover {
  color: var(--color-brand-red);
}

.header-phone-link svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-brand-red);
}

/* Mobile Menu Button */
.menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xs);
  padding: 10px;
  z-index: 1010;
}

.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text);
  transition: all var(--transition-normal);
}

.menu-toggle.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Drawer */
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-color: rgba(14, 14, 14, 0.98);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 1005;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 110px 28px 40px;
  transform: translateY(-100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.mobile-drawer.open {
  transform: translateY(0);
}

.mobile-nav-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-nav-link {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 16px;
}

.mobile-nav-link.active {
  color: var(--color-brand-red);
}

.mobile-nav-link span.num {
  font-size: 0.875rem;
  color: var(--color-text-dim);
}

.mobile-drawer-footer {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   8. HERO SECTIONS
   -------------------------------------------------------------------------- */
/* Scroll track: the hero pins while this scrolls past, driving the frame scrub.
   Height above 100vh is the scrub budget — 260vh ≈ 1.6 viewports of scrolling. */
.hero-scroll {
  position: relative;
  height: 380vh;
}

/* Shorter scrub budget on phones — 260vh of thumb-scrolling is too long. */
@media (max-width: 1023px) {
  .hero-scroll {
    height: 300svh;
  }
}

.hero {
  /* svh, not dvh: a pinned element must not resize when the mobile URL bar
     collapses mid-scroll, or the scrub jumps. */
  height: 100dvh;
  height: 100svh;
  min-height: 100svh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 40px;
  overflow: hidden;
}

/* No scrub: collapse the track so the hero behaves exactly as it did before. */
.hero-scroll.is-static {
  height: auto;
}

.hero-scroll.is-static .hero {
  position: relative;
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.72) contrast(1.08);
}

/* Canvas carries the frame sequence. Same grade as the still so the handoff
   from fallback image to canvas is invisible. */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 240ms linear;
  filter: brightness(0.72) contrast(1.08);
}

.hero-canvas.is-ready {
  opacity: 1;
}

/* Once the canvas is painting, the fallback still is redundant. */
.hero-canvas.is-ready + .hero-fallback {
  opacity: 0;
}

.hero-fallback {
  transition: opacity 240ms linear;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(14, 14, 14, 0.75) 0%,
    rgba(14, 14, 14, 0.45) 45%,
    rgba(14, 14, 14, 0.88) 85%,
    var(--color-bg) 100%
  );
}

.hero-radial-glow {
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(227, 30, 36, 0.12) 0%, transparent 70%);
  z-index: 2;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
}

.hero-headline {
  margin-bottom: 1.5rem;
  line-height: 1.02;
}

.hero-subtitle {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.5;
  max-width: 680px;
  margin-inline: auto;
  color: rgba(247, 247, 245, 0.88);
  margin-bottom: 1.25rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 1.5rem;
}

/* Scroll cue. Stacked and centred under the hero CTAs, because the hero copy is
   centred and a horizontal rule read as a divider rather than an instruction.
   The label, the travelling red pulse and the bobbing chevron all point the
   same way, so the affordance lands before anyone reads the words. */
.hero-scroll-indicator {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text);
}

.scroll-cue-label {
  opacity: 0.85;
}

.scroll-line {
  width: 2px;
  height: 44px;
  background-color: rgba(255, 255, 255, 0.22);
  position: relative;
  overflow: hidden;
}

.scroll-line::after {
  content: '';
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background-color: var(--color-brand-red);
  animation: scrollPulse 2s infinite;
}

.scroll-cue-chevron {
  width: 22px;
  height: 22px;
  color: var(--color-brand-red);
  animation: scrollCueBob 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0% { top: -100%; }
  50% { top: 100%; }
  100% { top: 100%; }
}

@keyframes scrollCueBob {
  0%, 100% { transform: translateY(0); opacity: 0.75; }
  50% { transform: translateY(6px); opacity: 1; }
}

/* The cue is an invitation, not an animation showcase. */
@media (prefers-reduced-motion: reduce) {
  .scroll-line::after,
  .scroll-cue-chevron {
    animation: none;
  }
  .scroll-line::after {
    top: 0;
  }
}

/* Desktop-only break, so the second headline line reads as two short lines
   instead of one long one. Narrow viewports already wrap it themselves. */
.hero-line-break {
  display: none;
}

@media (min-width: 1024px) {
  .hero-line-break {
    display: block;
  }
}

/* Marquee Ribbon */
.marquee-ribbon {
  background: var(--color-surface);
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
  z-index: 5;
}

/* --------------------------------------------------------------------------
   CROSSED MARQUEE BANDS
   Two ribbons tilted in opposite directions so they form an X, scrolling
   against each other. The wrapper clips them, so the tilted ends never push
   the page sideways; the bands are over-wide so their corners stay covered.
   -------------------------------------------------------------------------- */
.marquee-cross {
  position: relative;
  height: 260px;
  overflow: hidden;
  background: var(--color-bg);
  z-index: 5;
}

.marquee-cross .marquee-band {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 130%;
  border: none;
}

/* Light band, not --color-surface: at #181818 against a #0e0e0e page the
   band was invisible. It needs to read as a distinct ribbon. */
.marquee-cross .marquee-band-dark {
  background: #f2f1ee;
  transform: translate(-50%, -50%) rotate(-7deg);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

.marquee-cross .marquee-band-dark .marquee-item {
  color: #131313;
}

.marquee-cross .marquee-band-dark .marquee-item span.bullet {
  color: var(--color-brand-red);
}

.marquee-cross .marquee-band-red {
  background: var(--color-brand-red);
  transform: translate(-50%, -50%) rotate(7deg);
  box-shadow: 0 10px 40px rgba(227, 30, 36, 0.35);
}

/* Narrow screens sweep far less vertical distance for a given angle, so the
   bands barely cross. Steepen the tilt and close the gap. */
@media (max-width: 767px) {
  .marquee-cross {
    height: 180px;
  }

  .marquee-cross .marquee-band {
    width: 150%;
  }

  .marquee-cross .marquee-band-dark {
    transform: translate(-50%, -50%) rotate(-12deg);
  }

  .marquee-cross .marquee-band-red {
    transform: translate(-50%, -50%) rotate(12deg);
  }

  .marquee-cross .marquee-item {
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
  }
}

.marquee-cross .marquee-band-red .marquee-item {
  color: #ffffff;
}

.marquee-cross .marquee-band-red .marquee-item span.bullet {
  color: rgba(255, 255, 255, 0.65);
}

/* Runs the same keyframes the other way, so the bands travel against each
   other where they cross. */
.marquee-track-reverse {
  animation-direction: reverse;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  gap: 40px;
  animation: marquee 26s linear infinite;
}

.marquee-item {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 40px;
}

.marquee-item span.bullet {
  color: var(--color-brand-red);
  font-size: 1.2rem;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --------------------------------------------------------------------------
   MARQUEE-PALETTE SECTION BANDS
   The crossed ribbons under the hero are built from exactly two colours: the
   cream ribbon (#f2f1ee, near-black text, red bullets) and the brand-red
   ribbon (white text). These classes carry that same pairing into full page
   sections, so the red/cream rhythm repeats down the home page instead of
   appearing once and never again. Home page only.
   -------------------------------------------------------------------------- */

/* ---- RED BAND ---- */
.section-band-red {
  background-color: var(--color-brand-red);
  color: #ffffff;
  position: relative;
}

.section-band-red h2,
.section-band-red h3,
.section-band-red h4,
.section-band-red strong {
  color: #ffffff;
}

/* White is the only text colour that clears 4.5:1 on #e31e24 (4.69:1), so the
   red band states it outright rather than fading it back. */
.section-band-red p,
.section-band-red .section-subtitle {
  color: #ffffff;
}

/* The dot-and-label eyebrow is red by default, which would vanish here. */
.section-band-red .eyebrow {
  color: #ffffff;
}

.section-band-red .eyebrow::before {
  background-color: #ffffff;
  box-shadow: none;
}

/* Same reason: red highlight text needs to invert to the ribbon's ink. */
.section-band-red .text-red {
  color: var(--color-band-ink);
}

.section-band-red .stats-grid {
  border-top-color: rgba(255, 255, 255, 0.24);
  border-bottom-color: rgba(255, 255, 255, 0.24);
}

.section-band-red .stat-item {
  border-right-color: rgba(255, 255, 255, 0.24);
}

.section-band-red .stat-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.section-band-red .stat-number {
  color: #ffffff;
}

.section-band-red .stat-label {
  color: #ffffff;
}

/* ---- CREAM BAND ---- */
.section-band-cream {
  background-color: var(--color-band-cream);
  color: var(--color-band-ink);
  border-top: 1px solid rgba(19, 19, 19, 0.08);
  border-bottom: 1px solid rgba(19, 19, 19, 0.08);
}

.section-band-cream h2,
.section-band-cream h3,
.section-band-cream h4,
.section-band-cream strong {
  color: var(--color-band-ink);
}

.section-band-cream p,
.section-band-cream .section-subtitle,
.section-band-cream .feature-desc {
  color: var(--color-band-ink-soft);
}

/* Headings keep the full brand red (large text, 3:1 applies); the small
   eyebrow label uses the deepened red so it clears 4.5:1 on cream. */
.section-band-cream .eyebrow {
  color: var(--color-band-red-ink);
}

.section-band-cream .text-red {
  color: var(--color-brand-red);
}

/* Cards sit a shade lighter than the band, the way the ribbon sits on the page. */
.section-band-cream .feature-box {
  background-color: #ffffff;
  border-color: rgba(19, 19, 19, 0.1);
}

.section-band-cream .feature-box:hover {
  border-color: rgba(227, 30, 36, 0.45);
  box-shadow: 0 18px 44px rgba(19, 19, 19, 0.14);
}

.section-band-cream .feature-num {
  color: var(--color-band-ink-dim);
}

.section-band-cream .feature-box:hover .feature-num {
  color: var(--color-brand-red);
}

.section-band-cream .feature-title {
  color: var(--color-band-ink);
}

/* Outline buttons are drawn for dark ground; restate them in ink on cream. */
.section-band-cream .btn-secondary {
  color: var(--color-band-ink);
  border-color: rgba(19, 19, 19, 0.24);
}

.section-band-cream .btn-secondary:hover {
  color: var(--color-brand-red);
  border-color: var(--color-brand-red);
  background-color: rgba(227, 30, 36, 0.07);
}

/* ---- CREAM CARD ----
   The band palette applied to a single card instead of a full-bleed section,
   so a cream block can land inside a dark section. */
.band-card-cream {
  background: var(--color-band-cream);
  border: 1px solid rgba(19, 19, 19, 0.12);
  border-radius: var(--radius-sm);
  padding: clamp(40px, 6vw, 72px);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  color: var(--color-band-ink);
}

.band-card-cream h2,
.band-card-cream h3,
.band-card-cream strong {
  color: var(--color-band-ink);
}

.band-card-cream p {
  color: var(--color-band-ink-soft);
}

.band-card-cream .text-red {
  color: var(--color-brand-red);
}

.band-card-cream .eyebrow {
  color: var(--color-band-red-ink);
}

.band-card-cream .btn-secondary {
  color: var(--color-band-ink);
  border-color: rgba(19, 19, 19, 0.24);
}

.band-card-cream .btn-secondary:hover {
  color: var(--color-brand-red);
  border-color: var(--color-brand-red);
  background-color: rgba(227, 30, 36, 0.07);
}

/* Centred column: the card is a standalone offer block, so its copy and its
   buttons sit on the card's own centre line rather than ragging off the left
   edge of a very wide card. */
.band-card-body {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.band-card-body .eyebrow {
  justify-content: center;
}

.band-card-body > div:last-child {
  justify-content: center;
}

/* Corner wash, matching the red glow the dark version of this card carried. */
.band-card-cream::after {
  content: '';
  position: absolute;
  right: -80px;
  bottom: -80px;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(227, 30, 36, 0.16) 0%, transparent 70%);
  pointer-events: none;
}

.band-card-pill {
  display: inline-block;
  background: rgba(227, 30, 36, 0.1);
  border: 1px solid rgba(227, 30, 36, 0.38);
  border-radius: var(--radius-xs);
  padding: 8px 18px;
  margin-bottom: 1.5rem;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-band-red-ink);
}

/* Sub-page Heroes */
.page-hero {
  padding-top: 170px;
  padding-bottom: 90px;
  background-color: var(--color-bg);
  position: relative;
  border-bottom: var(--border-subtle);
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 55%;
  height: 100%;
  z-index: 1;
  opacity: 0.35;
  mask-image: linear-gradient(to right, transparent, black 40%);
  -webkit-mask-image: linear-gradient(to right, transparent, black 40%);
}

.page-hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero .container {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   9. QUICK STATS SECTION
   -------------------------------------------------------------------------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--border-subtle);
  border-bottom: var(--border-subtle);
}

.stat-item {
  padding: 48px 36px;
  border-right: var(--border-subtle);
  position: relative;
  transition: background-color var(--transition-fast);
}

.stat-item:last-child {
  border-right: none;
}

.stat-item:hover {
  background-color: rgba(255, 255, 255, 0.02);
}

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  line-height: 1;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}

.stat-label {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   10. WHAT WE OFFER (SERVICES / PROGRAMS)
   -------------------------------------------------------------------------- */
.offer-list {
  display: flex;
  flex-direction: column;
  border-top: var(--border-subtle);
}

.offer-card {
  display: grid;
  grid-template-columns: 80px 1.4fr 2fr auto;
  align-items: center;
  gap: 32px;
  padding: 36px 24px;
  border-bottom: var(--border-subtle);
  transition: all var(--transition-normal);
  position: relative;
  cursor: pointer;
}

.offer-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--color-brand-red);
  transform: scaleY(0);
  transition: transform var(--transition-normal);
}

.offer-card:hover {
  background-color: rgba(255, 255, 255, 0.02);
  padding-left: 36px;
}

.offer-card:hover::before {
  transform: scaleY(1);
}

.offer-num {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-dim);
  transition: color var(--transition-fast);
}

.offer-card:hover .offer-num {
  color: var(--color-brand-red);
}

.offer-title {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2vw, 1.85rem);
  font-weight: 700;
  text-transform: uppercase;
  transition: color var(--transition-fast);
}

.offer-card:hover .offer-title {
  color: #ffffff;
}

.offer-desc {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.55;
}

.offer-arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
}

.offer-card:hover .offer-arrow {
  background-color: var(--color-brand-red);
  border-color: var(--color-brand-red);
  color: #ffffff;
  transform: translateX(6px);
}

/* --------------------------------------------------------------------------
   11. WHY TODAY'S FIT GYM (FEATURE BLOCKS)
   -------------------------------------------------------------------------- */
.feature-box {
  background-color: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(32px, 4vw, 48px);
  position: relative;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.feature-box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand-red), transparent);
  opacity: 0;
  transition: opacity var(--transition-normal);
}

.feature-box:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: var(--shadow-md);
}

.feature-box:hover::after {
  opacity: 1;
}

.feature-num {
  font-family: var(--font-display);
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--color-text-dim);
  margin-bottom: 24px;
}

.feature-box:hover .feature-num {
  color: var(--color-brand-red);
}

.feature-title {
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.feature-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   12. THE FACILITY GALLERY & LIGHTBOX
   -------------------------------------------------------------------------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 280px;
  gap: 20px;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xs);
  cursor: pointer;
  background-color: var(--color-surface);
  border: var(--border-subtle);
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow), filter var(--transition-normal);
  filter: brightness(0.85);
}

.gallery-item:hover img {
  transform: scale(1.05);
  filter: brightness(1);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 60%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  opacity: 0.9;
  transition: opacity var(--transition-fast);
}

.gallery-tag {
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brand-red);
  margin-bottom: 4px;
}

.gallery-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
}

/* Flexora-style asymmetrical spans */
.gallery-col-6 { grid-column: span 6; }
.gallery-col-4 { grid-column: span 4; }
.gallery-col-8 { grid-column: span 8; }
.gallery-row-2 { grid-row: span 2; }

/* Lightbox Modal */
.lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 10, 10, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.lightbox.active {
  display: flex;
}

.lightbox-content {
  position: relative;
  max-width: 1100px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox-img-wrap {
  width: 100%;
  max-height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.lightbox-img-wrap img {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.lightbox-caption {
  margin-top: 16px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff;
}

.lightbox-close {
  position: absolute;
  top: -40px;
  right: 0;
  color: #ffffff;
  font-size: 2rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.lightbox-close:hover {
  color: var(--color-brand-red);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.lightbox-nav:hover {
  background: var(--color-brand-red);
  border-color: var(--color-brand-red);
}

.lightbox-prev { left: -70px; }
.lightbox-next { right: -70px; }

/* --------------------------------------------------------------------------
   13. MORE THAN A GYM (SPLIT FEATURE)
   -------------------------------------------------------------------------- */
.amenity-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 24px;
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  transition: border-color var(--transition-fast);
}

.amenity-card:hover {
  border-color: var(--color-brand-red);
}

.amenity-icon {
  width: 48px;
  height: 48px;
  background-color: var(--color-brand-red-dim);
  border: 1px solid rgba(227, 30, 36, 0.3);
  border-radius: var(--radius-xs);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-brand-red);
}

.amenity-icon svg {
  width: 24px;
  height: 24px;
}

.amenity-title {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.amenity-desc {
  font-size: 0.875rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   14. MEMBERSHIPS & PRICING CARDS
   -------------------------------------------------------------------------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: stretch;
}

.pricing-card {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: all var(--transition-normal);
}

.pricing-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: var(--shadow-md);
}

/* Highlighted 12-Month Plan */
.pricing-card.featured {
  background: linear-gradient(180deg, #221a1b 0%, var(--color-surface) 100%);
  border: 2px solid var(--color-brand-red);
  box-shadow: var(--shadow-red-glow);
  transform: translateY(-8px);
}

.pricing-card.featured:hover {
  transform: translateY(-14px);
  box-shadow: 0 0 40px rgba(227, 30, 36, 0.45);
}

.pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand-red);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  box-shadow: 0 4px 12px rgba(227, 30, 36, 0.5);
  white-space: nowrap;
}

.pricing-plan-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.pricing-effective {
  font-size: 0.875rem;
  color: var(--color-brand-red);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.pricing-amount-wrap {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: var(--border-subtle);
}

.pricing-currency {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.pricing-price {
  font-family: var(--font-display);
  font-size: 2.75rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
}

.pricing-features {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 32px;
}

.pricing-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.pricing-feature-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-brand-red);
  flex-shrink: 0;
}

.pricing-feature-item.highlight-feature {
  color: #ffffff;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   15. COMPARISON TABLE & FAQ ACCORDION
   -------------------------------------------------------------------------- */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
}

.comparison-table th,
.comparison-table td {
  padding: 18px 24px;
  text-align: center;
  border-bottom: var(--border-subtle);
  font-size: 0.9375rem;
}

.comparison-table th:first-child,
.comparison-table td:first-child {
  text-align: left;
  font-weight: 600;
  color: #ffffff;
}

.comparison-table th {
  font-family: var(--font-display);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.03);
}

.comparison-table th.highlight-col,
.comparison-table td.highlight-col {
  background: rgba(227, 30, 36, 0.06);
}

.comparison-table svg.check {
  color: var(--color-brand-red);
  width: 20px;
  height: 20px;
  margin: 0 auto;
}

/* Accordion */
.accordion-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.accordion-item {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-xs);
  overflow: hidden;
  transition: border-color var(--transition-fast);
}

.accordion-item.active {
  border-color: rgba(227, 30, 36, 0.4);
}

.accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #ffffff;
  text-align: left;
  cursor: pointer;
}

.accordion-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--transition-normal);
  color: var(--color-brand-red);
}

.accordion-item.active .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-normal);
}

.accordion-content-inner {
  padding: 0 28px 24px;
  color: var(--color-text-muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

/* --------------------------------------------------------------------------
   16. CONTACT & ENQUIRY FORM
   -------------------------------------------------------------------------- */
/* minmax(0, ...) rather than a bare fr: an `fr` track will not shrink below its
   content's min-content width, so the embedded map was forcing a 417px column
   inside a 350px grid and pushing the card off the right edge on a 390px
   phone. min-width on the children lets what is inside the track shrink too. */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.contact-layout > * {
  min-width: 0;
}

.contact-info-card {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(32px, 4vw, 48px);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 32px;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xs);
  background: var(--color-brand-red-dim);
  border: 1px solid rgba(227, 30, 36, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-brand-red);
  flex-shrink: 0;
}

.contact-item-icon svg {
  width: 20px;
  height: 20px;
}

.contact-item-label {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-dim);
  margin-bottom: 4px;
}

.contact-item-val {
  font-size: 1.0625rem;
  color: #ffffff;
  line-height: 1.5;
}

.contact-form-card {
  background: var(--color-surface);
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: clamp(32px, 4vw, 48px);
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.form-control {
  width: 100%;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-xs);
  color: #ffffff;
  font-size: 0.9375rem;
  transition: all var(--transition-fast);
}

.form-control:focus {
  border-color: var(--color-brand-red);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15);
}

.form-control::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23a19f9b' viewBox='0 0 16 16'%3E%3Cpath d='M8 11.5l-5-5h10l-5 5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
}

select.form-control option {
  background-color: var(--color-surface);
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   17. MODAL DIALOGS (JOIN NOW & BOOK VISIT)
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 2500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal-overlay.active {
  display: flex;
}

.modal-container {
  background: var(--color-surface);
  border: var(--border-light);
  border-radius: var(--radius-sm);
  max-width: 580px;
  width: 100%;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  color: var(--color-text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.modal-close:hover {
  color: var(--color-brand-red);
}

/* Toast Notifications */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 3000;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.toast {
  background: var(--color-surface-elevated);
  border-left: 4px solid var(--color-brand-red);
  border-top: var(--border-subtle);
  border-right: var(--border-subtle);
  border-bottom: var(--border-subtle);
  padding: 16px 22px;
  border-radius: var(--radius-xs);
  color: #ffffff;
  font-size: 0.875rem;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
  animation: slideInRight 0.3s ease;
}

@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* --------------------------------------------------------------------------
   18. CTA BANNER (FINAL CONVERSION SECTION)
   -------------------------------------------------------------------------- */
.cta-section {
  position: relative;
  background-color: var(--color-bg);
  border-top: var(--border-subtle);
  overflow: hidden;
}

.cta-glow-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 800px;
  height: 400px;
  background: radial-gradient(circle, rgba(227, 30, 36, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.cta-box {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 840px;
  margin: 0 auto;
}

.cta-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   19. GLOBAL FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  background: #080808;
  border-top: var(--border-subtle);
  padding-top: clamp(64px, 8vw, 100px);
  padding-bottom: 40px;
  position: relative;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1.2fr 1.2fr;
  gap: clamp(32px, 5vw, 64px);
  margin-bottom: clamp(48px, 6vw, 80px);
}

.footer-brand-col img {
  height: 44px;
  margin-bottom: 20px;
}

.footer-tagline {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 320px;
  margin-bottom: 24px;
}

.footer-heading {
  font-family: var(--font-display);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 22px;
}

.footer-nav-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-nav-link {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  transition: color var(--transition-fast);
}

.footer-nav-link:hover {
  color: var(--color-brand-red);
}

.footer-contact-item {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.footer-contact-item a:hover {
  color: var(--color-brand-red);
}

.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-dim);
}

/* Build credit. Purple on hover is the builder's own colour, deliberately not
   the gym's red, so it reads as a separate party's mark. */
.footer-credit {
  color: var(--color-text-dim);
}

.footer-credit-link {
  color: var(--color-text-muted);
  font-weight: 600;
  transition: color var(--transition-fast);
}

.footer-credit-link:hover,
.footer-credit-link:focus-visible {
  color: #a855f7;
}

/* --------------------------------------------------------------------------
   20. SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* --------------------------------------------------------------------------
   20b. HOME SCROLL CHOREOGRAPHY (index.html only)
   Two layers, both gated behind body[data-page="home"] so the other pages keep
   the plain one-shot reveal.

   1. REVEAL VARIANTS — directional / scaled / wiped entrances, so a long page
      doesn't repeat the same 24px lift eighty times.
   2. CLOSING MOTION — on home the reveal is bidirectional: content settles on
      the way in and "closes" again (drifts up, dims, eases back) once it has
      travelled off the top, and resets below the fold so it replays on the way
      back down.
   -------------------------------------------------------------------------- */

/* ---- 1. REVEAL VARIANTS ---- */
.reveal-left  { transform: translate3d(-40px, 0, 0); }
.reveal-right { transform: translate3d(40px, 0, 0); }
.reveal-scale { transform: scale(0.94); }
.reveal-rise  { transform: translate3d(0, 56px, 0); }

.reveal-blur {
  filter: blur(10px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Wipes the element open from the bottom edge rather than moving it. */
.reveal-mask {
  clip-path: inset(0 0 100% 0);
  transform: none;
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-left.active,
.reveal-right.active,
.reveal-scale.active,
.reveal-rise.active {
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-blur.active { filter: blur(0); }
.reveal-mask.active { clip-path: inset(0 0 0 0); }

.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }

/* ---- 2. CLOSING MOTION ---- */
/* Scrolled past the top: the element eases shut instead of just vanishing
   with the viewport. Delays are dropped so a closing row leaves together. */
body[data-page="home"] .reveal.is-closing {
  opacity: 0;
  transform: translate3d(0, -32px, 0) scale(0.97);
  transition-delay: 0s;
}

body[data-page="home"] .reveal-mask.is-closing {
  clip-path: inset(0 0 0 0);
  transform: none;
}

/* Below the fold again: back to the element's own starting pose so the
   entrance replays cleanly on the way back down. */
body[data-page="home"] .reveal.is-waiting {
  opacity: 0;
  transition-delay: 0s;
}

/* Whole-section close. --close-p runs 0 -> 1 as the section exits the top of
   the viewport; JS only writes that number, the look lives here.
   The transform lands on the inner container, never the <section>, so the
   full-bleed backgrounds (and the cream/red bands especially) stay edge to
   edge while their contents ease shut. */
body[data-page="home"] [data-scroll-close] > .container,
body[data-page="home"] [data-scroll-close] > .container-narrow {
  transform: scale(calc(1 - (0.04 * var(--close-p, 0))))
             translate3d(0, calc(-30px * var(--close-p, 0)), 0);
  opacity: calc(1 - (0.6 * var(--close-p, 0)));
  transform-origin: center top;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] [data-scroll-close] > .container,
  body[data-page="home"] [data-scroll-close] > .container-narrow {
    transform: none;
    opacity: 1;
  }
  body[data-page="home"] .reveal.is-closing,
  body[data-page="home"] .reveal.is-waiting {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   21. RESPONSIVE BREAKPOINTS
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-card.featured {
    transform: none;
  }
  .pricing-card.featured:hover {
    transform: translateY(-8px);
  }
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .pricing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
  }
  .offer-card {
    grid-template-columns: 60px 1.5fr 1fr auto;
    gap: 20px;
  }
  .gallery-grid {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: 240px;
  }
  .gallery-col-6 { grid-column: span 6; }
  .gallery-col-4 { grid-column: span 3; }
  .gallery-col-8 { grid-column: span 6; }
}

@media (max-width: 900px) {
  .nav-menu,
  .header-phone-link {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .grid-2 {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .stat-item:nth-child(2) {
    border-right: none;
  }
  .stat-item {
    padding: 32px 20px;
  }
  .offer-card {
    grid-template-columns: 40px 1fr auto;
    gap: 16px;
    padding: 24px 16px;
  }
  .offer-desc {
    grid-column: 2 / -1;
  }
}

@media (max-width: 640px) {
  .grid-3 {
    grid-template-columns: 1fr;
  }
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .pricing-grid {
    grid-template-columns: 1fr;
  }
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .stat-item {
    border-right: none;
    border-bottom: var(--border-subtle);
  }
  .gallery-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }
  .gallery-col-6,
  .gallery-col-4,
  .gallery-col-8 {
    grid-column: span 1;
  }
  .gallery-row-2 {
    grid-row: span 1;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-actions .btn {
    width: 100%;
  }
  .lightbox-nav {
    display: none;
  }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}


/* =========================================================================
   V2 HOMEPAGE EDITORIAL STYLES
   ========================================================================= */

/* Oversized Editorial Typography */
.editorial-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--color-text);
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}
.editorial-sub {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--color-text-muted);
  line-height: 1.4;
  font-weight: 400;
}

/* WebGL Canvas */
#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  pointer-events: none;
  z-index: 15; /* Above content, below header/modals */
  transition: opacity 0.5s ease;
}
.site-header, .lightbox, .mobile-drawer, .modal {
  z-index: 50; /* Ensure header and modals stay above canvas */
}

/* Base Editorial Section Styles */
.editorial-section {
  padding: clamp(60px, 10vw, 120px) 0;
  position: relative;
  z-index: 2; /* Below canvas */
}

/* Hero Modifications */
.editorial-hero {
  margin-top: 10vh;
}
.hero-content {
  position: relative;
  z-index: 5;
}

/* Brand Statement */
.brand-editorial-wrap {
  max-width: 800px;
}

/* Programs List */
.programs-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.prog-row {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--color-text);
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}
.prog-row:hover {
  color: var(--color-brand-red);
  padding-left: 1rem;
}
.prog-num {
  font-family: var(--font-display);
  font-size: 1rem;
  opacity: 0.5;
  font-weight: 600;
}
.prog-name {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 3vw, 2.5rem);
  font-weight: 700;
  text-transform: uppercase;
}

/* Facility Editorial Grid */
.facility-editorial-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 992px) {
  .facility-editorial-grid {
    grid-template-columns: 1.5fr 1fr;
    gap: 4rem;
  }
}
.fac-large img, .fac-secondary img, .fac-detail img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  display: block;
}
.fac-label {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.875rem;
  text-transform: uppercase;
  color: var(--color-text-muted);
  letter-spacing: 0.05em;
}

/* Amenities List */
.amenities-editorial-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}
.am-item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
}
.am-item:nth-child(even) {
  color: var(--color-text-muted);
}

/* Membership Grid */
.membership-pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
}
.plan-card {
  padding: 2.5rem 2rem;
  border: var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  text-align: center;
}
.highlight-plan {
  background: linear-gradient(135deg, #1f1b1c 0%, #151515 100%);
  border-color: rgba(227, 30, 36, 0.5);
  position: relative;
}
.highlight-plan::before {
  content: "BEST VALUE";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-brand-red);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.05em;
}
.plan-dur {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}
.plan-price {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--color-brand-red);
}
.plan-sub {
  font-size: 0.875rem;
  color: var(--color-text-dim);
  margin-top: 0.5rem;
}

@media (prefers-reduced-motion: reduce) {
  #webgl-canvas {
    opacity: 0.3 !important;
  }
}




/* =========================================================================
   ABOUT PAGE V2 STYLES (REFINED)
   ========================================================================= */

:root {
  --space-xs: clamp(0.5rem, 1vw, 0.75rem);
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --space-md: clamp(2rem, 4vw, 3rem);
  --space-lg: clamp(4rem, 8vw, 6rem);
  --space-xl: clamp(6rem, 12vw, 9rem);
  --space-2xl: clamp(8rem, 16vw, 12rem);
}

/* Base & Scene Wrappers */
.about-page {
  background: var(--color-bg);
  overflow-x: hidden;
}
.about-scene {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  overflow: hidden;
}

/* Scene Overlay transitions (Page Closing Effect) */
.approach-overlay,
.pillars-overlay {
  position: absolute;
  inset: 0;
  background: var(--color-bg);
  transform: translateY(100%);
  z-index: 50; /* ensure it covers current scene */
  pointer-events: none;
}

/* Reusable Mask Reveal */
.motion-image-wrap {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0); /* initially hidden right */
}
.motion-image-wrap img {
  transform: scale(1.08);
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero Scene */
.about-hero {
  display: flex;
  align-items: center;
  padding-top: 104px;
  padding-bottom: 48px;
}
.hero-image-wrap {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.hero-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(14,14,14,0.95) 0%, rgba(14,14,14,0.4) 50%, rgba(14,14,14,0.1) 100%);
  z-index: 2;
}
.hero-content {
  position: relative;
  z-index: 10;
}
.hero-eyebrow {
  font-family: var(--font-display);
  color: var(--color-brand-red);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  margin-bottom: var(--space-sm);
  opacity: 0; 
}
.hero-heading-wrap {
  overflow: hidden;
  padding-bottom: 10px;
}
.hero-heading {
  font-family: var(--font-display);
  font-weight: 800;
  /* Blend both axes: vw alone overflowed short windows, vmin alone shrank the
     heading to 42px on a wide one. Whichever axis is tighter wins. */
  font-size: clamp(2.25rem, min(6.5vw, 11vh), 5rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
  margin: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(40px);
}
.hero-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-text-muted);
  max-width: 500px;
  /* The hero column is centred, so a 500px-capped paragraph needs auto margins
     or it sits 160px left of the heading it belongs to. */
  margin-inline: auto;
  margin-top: var(--space-sm);
  opacity: 0;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: var(--space-md);
  opacity: 0;
}

/* Approach Scene */
.about-approach {
  background: var(--color-concrete);
  display: flex;
  align-items: center;
  padding: var(--space-lg) 0;
}
.approach-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  align-items: center;
  position: relative;
  z-index: 10;
}
@media (min-width: 992px) {
  .approach-stage {
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-xl);
  }
}
.approach-text {
  opacity: 0;
}
.approach-eyebrow {
  font-family: var(--font-display);
  color: var(--color-brand-red);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  margin-bottom: var(--space-sm);
}
.approach-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 6vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -0.02em;
}
.approach-sub {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  line-height: 1.5;
}

/* Pillars Scene */
.about-pillars {
  display: flex;
  align-items: center;
}
.pillars-stage {
  width: 100%;
  position: relative;
  z-index: 10;
}
.pillars-header {
  text-align: center;
  margin-bottom: var(--space-lg);
}
.pillars-header .eyebrow {
  font-family: var(--font-display);
  color: var(--color-brand-red);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  margin-bottom: var(--space-xs);
}
.pillars-header h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
}
.pillars-indicator-track {
  width: 200px;
  height: 2px;
  background: rgba(255,255,255,0.1);
  margin: var(--space-md) auto 0;
  position: relative;
}
.pillars-indicator-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 25%;
  background: var(--color-brand-red);
  transform-origin: left center;
}
.pillars-content {
  position: relative;
  height: 400px;
}
@media (min-width: 992px) {
  .pillars-content {
    height: 300px;
  }
}
.pillar-item {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0; /* GSAP sets to 1 for first */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  align-items: center;
  pointer-events: none;
}
@media (min-width: 992px) {
  .pillar-item {
    grid-template-columns: 1fr 2fr 1fr;
    gap: var(--space-lg);
  }
}
.pillar-number {
  font-family: var(--font-display);
  font-size: clamp(3rem, 10vw, 10rem);
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255,255,255,0.1);
  line-height: 0.95;
  margin: 0;
}
.pillar-text-group {
  max-width: 650px;
}
.pillar-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 4vw, 3.5rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}
.pillar-desc {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-top: var(--space-sm);
}
.pillar-01 { opacity: 1; pointer-events: auto; }
.pillar-01 .pillar-number { -webkit-text-stroke-color: var(--color-brand-red); }

/* Space Scene */
.space-stage {
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
}
.space-heading {
  position: absolute;
  top: clamp(80px, 12vh, 150px);
  left: clamp(20px, 5vw, 72px);
  z-index: 15;
}
.space-heading .eyebrow {
  font-family: var(--font-display);
  color: var(--color-brand-red);
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: clamp(0.75rem, 1.2vw, 0.875rem);
  margin-bottom: var(--space-xs);
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}
.space-heading h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 8vw, 8rem);
  line-height: 0.85;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-shadow: 0 4px 12px rgba(0,0,0,0.8);
}

.space-media {
  position: absolute;
  inset: 0;
}
.space-slide {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
}
.space-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  will-change: transform;
}
.space-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(10,10,10,0.76) 0%, rgba(10,10,10,0.34) 38%, rgba(10,10,10,0.05) 75%);
}

.space-caption {
  position: absolute;
  right: clamp(20px, 5vw, 72px);
  top: clamp(80px, 12vh, 150px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(10, 10, 10, 0.62);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-display);
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0; /* GSAP handles this */
  transform: translateX(20px);
}
.space-caption.active {
  opacity: 1;
  transform: translateX(0);
}
.space-caption span {
  color: var(--color-brand-red);
  font-weight: 700;
}
.space-caption strong {
  color: #fff;
  font-weight: 700;
}

/* Reduced Motion Fallback */
@media (prefers-reduced-motion: reduce) {
  .about-scene {
    min-height: auto;
    padding: var(--space-xl) 0;
  }
  .approach-overlay,
  .pillars-overlay {
    display: none;
  }
  .motion-image-wrap {
    clip-path: inset(0 0 0 0);
  }
  .motion-image-wrap img,
  .hero-image-wrap img {
    transform: scale(1);
  }
  .hero-eyebrow,
  .hero-sub,
  .hero-actions,
  .approach-text {
    opacity: 1;
  }
  .hero-heading {
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
  .pillars-content {
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
  }
  .pillar-item {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }
  .pillar-01 .pillar-number,
  .pillar-02 .pillar-number,
  .pillar-03 .pillar-number,
  .pillar-04 .pillar-number {
    -webkit-text-stroke-color: var(--color-brand-red);
  }
  .space-stage {
    min-height: auto;
  }
  .space-heading {
    position: relative;
    top: auto;
    left: auto;
    padding: 0 20px;
    margin-bottom: var(--space-md);
  }
  .space-media {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  .space-slide {
    position: relative;
    height: 400px;
  }
  .space-caption {
    opacity: 1;
    transform: translateX(0);
  }
}


@media (max-height: 800px) and (min-width: 992px) {
  .hero {
    padding-top: 130px;
    padding-bottom: 20px;
    align-items: flex-start;
  }
  .hero-headline {
    font-size: clamp(2rem, 5vw, 4rem) !important;
    margin-bottom: 0.5rem;
  }
  .hero-subtitle {
    margin-bottom: 1.5rem;
  }
  .hero-actions {
    margin-bottom: 1.5rem;
  }
}


/* --------------------------------------------------------------------------
   HERO SCROLL SEQUENCE — STAGED CONTENT
   Each piece is revealed against scrub progress by JS, which writes opacity
   and transform directly. Never use display/visibility to stage these: they
   must keep their layout box so revealing one never shifts the others.
   -------------------------------------------------------------------------- */
[data-hero-el] {
  will-change: opacity, transform;
}

/* Hidden from first paint so the staged reveal never flashes. JS then writes
   inline opacity, which wins over this. */
.js.has-hero-scrub [data-hero-el] {
  opacity: 0;
}

/* Both headline lines share one grid cell, so swapping line 1 for line 2
   cannot move anything. The cell is as tall as the taller line. */
.hero-headline {
  display: grid;
  align-items: start;
}

.hero-line {
  grid-area: 1 / 1;
}

/* On short viewports the hero stack is taller than the fold and its lower
   items get clipped — the second CTA was being cut in half on a 345x608
   phone. Drop the scroll indicator (least important, only shown at the very
   start) and tighten the type scale and padding until the stack fits.
   The header is hidden during the scrub, so the 100px top padding that
   normally clears it is dead space here — except in the static fallback,
   where the header is visible from the start. */
@media (max-height: 700px) {
  /* The cue is NOT dropped here any more. The hero now stages its copy against
     scroll, so on a short viewport the first screen is just the photograph --
     the cue is the only thing telling anyone the page continues. Shrink it
     instead: half the track, tighter gaps, same message. */
  .hero-scroll-indicator {
    gap: 6px;
    font-size: 0.6875rem;
    letter-spacing: 0.14em;
  }

  .scroll-line {
    height: 24px;
  }

  .scroll-cue-chevron {
    width: 18px;
    height: 18px;
  }

  .hero {
    padding-top: 28px;
    padding-bottom: 24px;
  }

  .hero-scroll.is-static .hero {
    padding-top: 96px;
  }

  .hero-headline {
    font-size: clamp(1.85rem, 7.6vw, 2.5rem);
    margin-bottom: 0.9rem;
  }

  .eyebrow {
    margin-bottom: 0.6rem;
  }

  .hero-subtitle {
    font-size: 0.9375rem;
    margin-bottom: 1rem;
  }

  .hero-actions {
    gap: 10px;
    margin-bottom: 0;
  }

  .hero-actions .btn-lg {
    padding: 13px 24px;
    font-size: 0.9375rem;
  }
}

/* Fades the hero to black at the end of the scrub. */
.hero-fade {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--color-bg);
  opacity: 0;
  pointer-events: none;
}

/* Header stays out of the way until the hero scrub finishes. Hidden from the
   first paint (not by JS after the fact, which would flash), but only under
   .js and only on the page that has the scrub. */
.js.has-hero-scrub .site-header {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.js.has-hero-scrub .site-header.is-hero-shown {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.site-header {
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Static hero (reduced motion, or no scrub): show everything at rest, with
   the headline lines stacked normally rather than overlaid. */
.hero-scroll.is-static .hero-headline {
  display: block;
}

.hero-scroll.is-static [data-hero-el] {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto;
}

.hero-scroll.is-static .hero-fade {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   ABOUT PAGE: NO-MOTION FALLBACK
   Every scene above starts hidden (opacity 0, or clipped) and is revealed by
   GSAP. That is fine while GSAP loads, but it is loaded from a CDN: if that
   request is blocked, slow or fails, nothing ever reveals the content and the
   whole page reads as blank. So the hidden state now only applies once the
   script has confirmed GSAP is present and tagged the document .motion-ready.
   Without that tag the page renders as a plain, static, readable layout.
   -------------------------------------------------------------------------- */
html:not(.motion-ready) .hero-eyebrow,
html:not(.motion-ready) .hero-sub,
html:not(.motion-ready) .hero-actions,
html:not(.motion-ready) .approach-text {
  opacity: 1;
}

html:not(.motion-ready) .hero-heading {
  clip-path: none;
  transform: none;
}

html:not(.motion-ready) .motion-image-wrap {
  clip-path: none;
}

html:not(.motion-ready) .motion-image-wrap img {
  transform: none;
}

html:not(.motion-ready) .hero-image-wrap img {
  transform: none;
}

/* The four pillars are stacked absolutely on one another and cross-faded, so
   simply un-hiding them would overlap all four. Let them flow instead. */
html:not(.motion-ready) .pillars-content {
  height: auto;
}

html:not(.motion-ready) .pillar-item {
  position: relative;
  top: auto;
  transform: none;
  opacity: 1;
  margin-bottom: var(--space-md);
}

html:not(.motion-ready) .approach-overlay,
html:not(.motion-ready) .pillars-overlay {
  display: none;
}