/* ==========================================================================
   EVOLVE UP FITNESS — DESIGN TOKENS
   ========================================================================== */
:root {
  --bg-primary: #0A0A0A;        /* luxury black */
  --bg-charcoal: #17181A;       /* secondary surface */
  --bg-charcoal-2: #1E2023;     /* raised surface */
  --glass-fill: rgba(255, 255, 255, 0.045);
  --glass-border: rgba(255, 255, 255, 0.09);

  /* Foundation refactor: 5-tier glass system per GLOBAL_DESIGN_SYSTEM_AUDIT.md
     and DESIGN_TOKEN_AUDIT.md, which found 17 distinct, mostly-untokenized
     opacity values in real use sitewide. Values below are drawn from the
     real clusters that audit identified (0.03/0.05, 0.06/0.09, 0.06/0.12),
     not invented arbitrarily. --glass-fill/--glass-border above are kept
     as the "Standard" tier under their original names, unchanged in
     value, since the majority of the site already correctly depends on
     them — changing their values would risk changing how most of the
     site actually looks, which contradicts "should look the same in
     spirit." Hero and Overlay tiers are established here as real,
     available tokens even though no current code was found using
     exactly those values yet — infrastructure for consistent future use
     rather than a forced migration of code that doesn't actually match. */
  --glass-ultra-subtle-fill: rgba(255, 255, 255, 0.03);
  --glass-ultra-subtle-border: rgba(255, 255, 255, 0.05);
  --glass-standard-fill: var(--glass-fill);
  --glass-standard-border: var(--glass-border);
  --glass-elevated-fill: rgba(255, 255, 255, 0.06);
  --glass-elevated-border: rgba(255, 255, 255, 0.12);
  --glass-hero-fill: rgba(255, 255, 255, 0.08);
  --glass-hero-border: rgba(255, 255, 255, 0.14);
  --glass-overlay-fill: rgba(255, 255, 255, 0.12);
  --glass-overlay-border: rgba(255, 255, 255, 0.18);

  /* PLATINUM + DEEP TEAL
     ------------------------------------------------------------------
     Primary  : platinum #E8E8E6 — headings and key copy (16.14:1)
     Accent   : teal, in TWO shades because one cannot serve both roles —
                #2AA79B reads as TEXT on black (6.69:1) but is too light
                under white text; #0E6B63 is the fill, where white sits at
                6.36:1. Using a single teal would fail one role or the other.

     Teal sits 115 degrees from the amber logo, so the logo reads as a
     deliberate warm accent against a cool palette rather than as a colour
     that nearly-but-not-quite matches.

     Every value below was contrast-audited against near-black AND charcoal
     before being written. */
  --accent: #2AA79B;            /* teal mid — text, icons, borders */
  --accent-solid: #0E6B63;      /* teal deep — solid fills, white text */
  --accent-ink: #FFFFFF;        /* text ON --accent-solid (6.36:1) */
  --accent-soft: rgba(42, 167, 155, 0.13);
  --accent-glow: rgba(42, 167, 155, 0.30);
  --accent-dim: rgba(42, 167, 155, 0.22);

  /* Platinum — the primary. Replaces pure white for headings so the page
     reads warmer and less harsh, and gives the palette its second colour. */
  --platinum: #E8E8E6;

  /* Consistent color grade applied to every real photograph site-wide —
     ties together photos of varying source quality/lighting into one
     cohesive brand look. Slight contrast lift + desaturation + a touch
     darker, matching the site's dark, restrained palette. One place to
     define it; every photo selector references this instead of its own
     filter value. */
  --photo-grade: contrast(1.08) saturate(0.9) brightness(0.96);

  /* Standardized hover-shadow scale — replaces 8 slightly-drifted ad-hoc
     values that had accumulated across different build phases. */
  --shadow-sm: 0 12px 28px -10px rgba(42, 167, 155, 0.35);
  --shadow-md: 0 20px 44px -20px rgba(42, 167, 155, 0.35);
  --shadow-lg: 0 28px 60px -24px rgba(42, 167, 155, 0.4);
  --shadow-xl: 0 30px 70px -30px rgba(42, 167, 155, 0.5);
  --shadow-icon-btn: 0 8px 20px -6px rgba(42, 167, 155, 0.6);

  /* Foundation refactor: a second, previously untokenized shadow
     pattern was found while implementing this refactor, beyond what
     DESIGN_TOKEN_AUDIT.md's original pass identified — a centered,
     non-directional "halo glow" (0 0 Xpx var(--accent-glow), no
     vertical offset), structurally distinct from --shadow-sm through
     --shadow-xl above, which are directional drop-shadows implying a
     light source and a sense of lift. Forcing the halo pattern onto
     the directional tokens would visibly change the effect, so this is
     a genuinely separate system, not a naming inconsistency. Roughly
     20 occurrences were found sitewide spanning ~10 distinct blur
     radii (6–60px) with no shared token at all. Given the scope already
     covered in this refactor pass and the risk of insufficiently-
     verified changes across main.css's many contexts, only the 3
     confirmed instances in hero-premium.css (fully controlled, context
     verified) are migrated to these new tokens in this pass — the
     remaining ~17 instances in main.css are identified here, not yet
     touched, and recommended as a dedicated follow-up rather than
     rushed into this pass. */
  --glow-sm: 0 0 12px 2px var(--accent-glow);
  --glow-md: 0 0 24px -6px var(--accent-glow);
  --glow-lg: 0 0 40px -4px var(--accent-glow);

  --text-primary: #FFFFFF;
  --text-secondary: #9CA3AF;
  --text-tertiary: #838B96; /* audit: brightened from #6B7280 for WCAG AA contrast on #0A0A0A */

  --font-display: 'Space Grotesk', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  --container: 1240px;
  --radius: 18px;
  --radius-sm: 10px;

  /* premium, slower easing for a high-end feel */
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --dur: 0.5s;
  --dur-fast: 0.3s;

  --nav-h: 88px;

  /* Foundation refactor: glass blur tiers, added per DESIGN_TOKEN_AUDIT.md.
     16px and 18px were already the two dominant values in real use
     site-wide (32 of 54 total backdrop-filter uses combined) before this
     token existed — these tokens formalize a pattern that was already
     mostly there rather than inventing a new one. Mobile-specific
     reduced values (6px/8px etc., added deliberately during earlier
     Android performance audits) are intentionally NOT folded into this
     token system — each was a considered reduction from its own
     section's specific desktop value, not an interchangeable tier, and
     collapsing them into one shared "mobile blur" token would risk
     losing that context. */
  --blur-standard: 16px;
  --blur-strong: 18px;

  /* Phase 11: mobile blur tiers, completing the Critical fix flagged
     in PRODUCTION_READINESS_AUDIT.md — main.css's foundational glass
     styling (used sitewide, including the navigation bar on every
     page) had no mobile backdrop-filter reduction at all, despite the
     same fix already being proven correct in Membership and
     Testimonials individually. Values below are not new choices —
     they're the exact reductions already proven in those two sections
     (18px→8px, 16px→6px), extended into named tokens so the same
     philosophy applies consistently instead of being re-derived per
     selector. */
  --blur-mobile-sm: 5px;
  --blur-mobile-md: 6px;
  --blur-mobile-lg: 8px;
  --blur-mobile-xl: 10px;

  /* Named tokens for the three real, site-wide stacking layers found in
     DESIGN_TOKEN_AUDIT.md — nav, the lightbox overlay, and the
     accessibility skip-link, in that correct order. Values are
     unchanged from what was already in use; this only gives them
     names. Smaller, component-local z-index values (e.g., -1/0/1/2 used
     within Membership's or Hero's own internal layering) are
     deliberately NOT tokenized — those are relative only within their
     own component's stacking context and have no relationship to these
     site-wide layers or to each other. */
  --z-nav: 100;
  --z-overlay: 200;
  --z-skip-link: 999;

  /* Phase C: elevation scale, formalizing a pattern that was already
     mostly in use across cards (checked directly: program-card,
     why__card, trainer-card, and post-card all already used -6px on
     hover; gallery__tile and contact-info__card already used -3px) —
     this names and consolidates that real, defensible size-based
     distinction (bigger primary cards lift more, smaller/denser cards
     lift less) rather than replacing it with something new. */
  --card-lift-standard: -6px;
  --card-lift-compact: -3px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* The hidden attribute's default display:none is easily overridden by any
   element that also sets its own display:flex/grid/etc (a well-known CSS
   gotcha — this exact bug has been caught and individually patched three
   separate times on this site already). This universal rule guarantees
   [hidden] always wins, sitewide, for every current and future element,
   rather than requiring a new one-off override each time it recurs. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-h);
  overflow-x: clip;
  max-width: 100%;
}
body { overflow-x: clip; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-body);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  /* Containment restored, deliberately, after removing it broke the live
     site (content squeezed to a third of the screen, browser zoomed out
     to fit an over-wide document).
     This is NOT the original workaround. The underlying causes are now
     fixed at source — min-width:0 on the flex/grid scroll containers,
     minmax(0,1fr) instead of bare 1fr, and decorative layers sized by
     transform rather than oversized boxes. This is defence-in-depth for
     device/browser combinations that headless Chromium cannot reproduce.
     `clip` rather than `hidden`: clip does not create a scroll container,
     so it cannot be scrolled programmatically or by touch, and it is
     applied to BOTH html and body because body alone is unreliable on
     mobile — which is exactly how the original bug reached production. */
  width: 100%;
  max-width: 100%;
}

/* Replaced-content elements carry an INTRINSIC width from their width
   attribute or media dimensions. Without a cap they render at that
   intrinsic size and force the document wider than the viewport — which
   is exactly what happened: <video width="1280"> pushed the page to
   1280px on mobile, so the browser zoomed out and every other section
   appeared squeezed into a narrow column. img already had this guard;
   video, iframe, svg and canvas did not. */
img, video, iframe, svg, canvas { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: #06070A;
  padding: 14px 22px;
  z-index: var(--z-skip-link);
  font-weight: 700;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ==========================================================================
   BUTTONS — premium glass / solid / outline
   ========================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  /* max-width guard: at 320px an article CTA with long label text plus
     30px horizontal padding measured 339px and pushed the document
     19px wide. Isolated by walking the DOM and hiding nodes until
     scrollWidth dropped. Buttons never need to exceed their container. */
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 15px 30px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease);
  white-space: nowrap;
  isolation: isolate;
}
.btn:active { transform: scale(0.96); }

.btn--accent {
  background: var(--accent-solid);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.28) inset, 0 8px 24px -8px rgba(42, 167, 155, 0.45);
}
.btn--accent:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.35) inset, 0 0 0 8px var(--accent-soft), 0 14px 38px -8px rgba(42, 167, 155, 0.6);
  transform: translateY(-3px);
  background: #3FBDB0;
}

.btn--outline {
  background: var(--glass-fill);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: var(--glass-border);
  color: var(--text-primary);
}
.btn--outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================================
   NAVIGATION — glass, blue underline, refined burger
   ========================================================================== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transition: height var(--dur) var(--ease);
}

/* Bug fix: body scroll lock while the mobile menu is open. Toggled via
   js/main.js's openMenu()/closeMenu(). Class only ever gets added when
   the burger button (CSS-hidden on desktop, see below) is clicked, so
   this has no effect on desktop. */
body.nav-menu-open {
  overflow: hidden;
}

.nav.is-scrolled { height: 78px; }

.nav__inner {
  width: calc(100% - 40px);
  max-width: var(--container);
  margin: 18px auto 0;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 12px 36px -14px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-16px);
  animation: nav-drop 0.7s var(--ease) 0.04s forwards;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease), margin-top var(--dur) var(--ease);
}
@keyframes nav-drop {
  to { opacity: 1; transform: translateY(0); }
}

.nav.is-scrolled .nav__inner {
  margin-top: 12px;
  background: rgba(8, 9, 12, 0.8);
  border-color: rgba(42, 167, 155, 0.2);
  box-shadow: 0 18px 48px -16px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(42, 167, 155, 0.06);
}

/* Bug 2 fix history, corrected: an earlier attempt neutralized only
   .nav__inner's `transform` via :has(), reasoning that a transformed
   ancestor breaks position:fixed containment for descendants. That
   was real but incomplete — re-investigating from scratch after the
   bug was confirmed still present found .nav__inner ALSO has
   `backdrop-filter: blur(18px)` applied unconditionally, which
   independently establishes its own containing block for fixed
   descendants, identical in effect to transform. Neutralizing
   transform alone was never going to be sufficient while
   backdrop-filter remained. Rather than chase every current and
   future CSS property on this ancestor that could cause the same
   problem, #navLinks is now moved to be a direct child of <body>
   while the menu is open (see js/main.js openMenu()/closeMenu()) —
   removing it from every ancestor's influence entirely, rather than
   trying to neutralize each one individually. This rule is no longer
   needed and has been removed. */

.nav__logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: 0.03em;
  display: flex;
  align-items: center;
  gap: 11px;
  transition: opacity var(--dur-fast) var(--ease);
}
.nav__logo:hover { opacity: 0.8; }
/* Real logo image, replacing the previous CSS text-based wordmark.
   Height-constrained with width:auto to preserve the source asset's
   aspect ratio. Background-removed and color-adjusted from the
   client-provided scan — the original had black wordmark text, which
   would have been invisible against this site's dark nav bar, so the
   dark elements were selectively inverted to a light, readable color
   while leaving the logo's actual orange accent color untouched. */
.nav__logo-img {
  /* Enlarged again and the glow rebalanced.
     The previous halo used three wide, soft shadows which bled into the
     letterforms and made small text look hazy rather than crisp. This
     version uses one TIGHT opaque ring (1px) for edge definition plus one
     mid spread for separation — the mark reads sharper, not foggier.
     Nav bar is 88px with 13px padding, so a 52px cap still leaves room. */
  width: clamp(200px, 56vw, 300px);
  height: auto;
  max-height: 52px;
  object-fit: contain;
  filter: drop-shadow(0 0 1px rgba(255,255,255,1))
          drop-shadow(0 0 2px rgba(255,255,255,1))
          drop-shadow(0 0 5px rgba(255,255,255,0.7));
}
@media (max-width: 400px) {
  /* Narrow phones: keep clear of the phone and hamburger buttons. */
  .nav__logo-img { width: clamp(150px, 48vw, 190px); max-height: 40px; }
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
}
.nav__link {
  position: relative;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  padding: 9px 13px;
  border-radius: 999px;
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.nav__link:hover, .nav__link.is-active {
  color: var(--text-primary);
  background: rgba(42, 167, 155, 0.13);
}

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

.nav__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease);
}
.nav__icon-btn:hover {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-icon-btn);
}

.nav__cta { padding: 12px 24px; font-size: 0.88rem; }

.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  border-radius: 50%;
  transition: background var(--dur-fast) var(--ease);
}
.nav__burger:hover { background: var(--glass-fill); }
.nav__burger span {
  display: block;
  width: 22px; height: 2px;
  background: var(--text-primary);
  margin: 0 auto;
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   HERO — deep whitespace, ambient blue glow, parallax layers
   ========================================================================== */
.hero {
  position: relative;
  /* 100vh first as a fallback: browsers without small-viewport-unit
     support (Chrome <108, Safari <15.4, Firefox <101) ignore the svh
     line and would otherwise get NO min-height, collapsing the hero to
     content height. Older Android browsers are a real share of this
     site's audience, so this is not theoretical. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 64px) 24px 120px;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg, #0A0A0A 0%, #0D0E10 55%, #0A0A0A 100%);
}

.hero__glow {
  position: absolute;
  /* inset:0 + scale rather than inset:-20%: an oversized box contributes to
     layout width and measured 504px inside a 360px viewport, relying purely
     on ancestor clipping. transform gives the same bleed with zero layout
     contribution. */
  inset: 0;
  transform: scale(1.4);
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 25%, var(--accent-soft), transparent 42%),
    radial-gradient(circle at 82% 70%, rgba(42, 167, 155, 0.08), transparent 40%),
    radial-gradient(circle at 55% 15%, rgba(42, 167, 155, 0.05), transparent 35%);
  background-size: 140% 140%;
  /* Drift via transform rather than background-position. The original
     repainted three radial gradients across this element's full area
     (inset:-20%, so larger than the viewport) on every frame — real
     paint work on the main thread that GPU compositing can't offload.
     All three gradients now drift together instead of independently,
     which is imperceptible given the original movement was only 6-8%
     over 24 seconds. The -20% inset leaves ample room to translate
     without exposing an edge. */
  animation: mesh-drift 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mesh-drift {
  /* scale() repeated here because an animated transform replaces the base
     rule's transform entirely — omitting it would silently remove the
     layer's intended bleed. */
  0%   { transform: scale(1.4) translate(0, 0); }
  100% { transform: scale(1.4) translate(1.5%, 1%); }
}

.hero__streaks {
  /* Angled at 76.5deg to precisely echo the evolve-line signature's own
     ascent (calculated from its actual path coordinates, not eyeballed) —
     this is why this texture exists: it's a faint, ambient repetition of
     the one motif the whole site is built around, not arbitrary decoration. */
  position: absolute;
  inset: 0;
  transform: scale(1.2);
  background-image: repeating-linear-gradient(
    76.5deg,
    transparent 0px,
    transparent 140px,
    rgba(42, 167, 155, 0.03) 141px,
    rgba(42, 167, 155, 0.03) 142px
  );
  animation: streak-drift 34s linear infinite;
  will-change: transform;
}
@keyframes streak-drift {
  /* scale repeated — an animated transform replaces the base rule's. */
  from { transform: scale(1.2) translateX(0); }
  to { transform: scale(1.2) translateX(-200px); }
}

.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 920px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 28px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.04s forwards;
}
.hero__eyebrow-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent-glow);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 5.6vw, 4.75rem);
  line-height: 1.0;
  letter-spacing: 0.008em;
  color: var(--text-primary);
    /* LCP element: deliberately NO opacity fade. An element at opacity:0
     cannot register as Largest Contentful Paint, which was deferring
     LCP to 1580ms and leaving the hero visually blank for over a
     second. It now paints immediately and only slides, which is how
     Stripe/Linear/Apple handle their hero headlines. */
  animation: hero-title-rise 0.6s var(--ease) both;
  text-shadow: 0 0 60px rgba(42, 167, 155, 0.18);
}

.hero__title-line {
  position: relative;
  display: inline-block;
}
.hero__title-accent {
  color: var(--accent);
  text-shadow: 0 0 40px var(--accent-glow);
}

.hero__evolve-line {
  position: absolute;
  left: 0; right: 0;
  bottom: -0.28em;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 6px rgba(42, 167, 155, 0.6));
}
.hero__evolve-line path {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: draw-line 1.6s var(--ease) 1.3s forwards;
}
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

.hero__subtitle {
  margin-top: 32px;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-secondary);
  max-width: 580px;
  line-height: 1.7;
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.24s forwards;
}

.hero__actions {
  margin-top: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.32s forwards;
}

/* Primary CTA — deliberately the single most dominant action in the hero */
.btn--hero-primary {
  padding: 20px 44px;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  gap: 12px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 16px 44px -12px rgba(42, 167, 155,0.55);
}
.btn--hero-primary svg {
  transition: transform var(--dur-fast) var(--ease);
}
.btn--hero-primary:hover svg { transform: translateX(3px); }
.btn--hero-primary:hover {
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 20px 52px -10px rgba(42, 167, 155,0.7);
}

/* Secondary cluster — quick-contact options, visually subordinate to the primary */
.hero__actions-secondary {
  display: flex;
  gap: 12px;
}
.hero__contact-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  min-height: 44px;
}
.hero__contact-pill:hover {
  color: var(--text-primary);
  border-color: rgba(42, 167, 155, 0.4);
  background: rgba(42, 167, 155, 0.1);
  transform: translateY(-2px);
}

/* Animated trust-stat chips — a quick glance, distinct from the fuller
   staircase stats section further down the page */
.hero__stat-row {
  margin-top: 44px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 16px 30px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.40s forwards;
}
.hero__stat-chip {
  display: flex;
  align-items: baseline;
  gap: 2px;
  white-space: nowrap;
}
.hero__stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.hero__stat-plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
}
.hero__stat-label {
  margin-left: 6px;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  align-self: center;
}
.hero__stat-sep {
  width: 1px;
  height: 22px;
  background: var(--glass-border);
  flex-shrink: 0;
}

.hero__trust {
  margin-top: 24px;
  font-size: 0.84rem;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.48s forwards;
}
.hero__trust svg { flex-shrink: 0; color: var(--accent); opacity: 0.8; }

@keyframes hero-title-rise {
  from { transform: translateY(14px); }
  to   { transform: translateY(0); }
}
@keyframes fade-up {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero__scroll {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.56s forwards;
  transition: opacity var(--dur-fast) var(--ease);
}
.hero__scroll:hover { opacity: 0.7 !important; }
/* Signature section divider — used exactly once, at the single
   highest-visibility boundary on the page (Hero into the rest of the
   site). Deliberately not repeated at every section transition; doing
   that would read as busy template decoration rather than one
   considered moment. Absolutely positioned at Hero's own bottom edge,
   so it adds zero height and doesn't affect any existing spacing. */
.hero__divider {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 60px;
  z-index: 1;
}
.hero__divider path {
  fill: var(--bg-charcoal);
}
.hero__scroll-track {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  overflow: hidden;
}
.hero__scroll-dot {
  position: absolute;
  top: 0;
  left: -1.5px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px 2px var(--accent-glow);
  animation: scroll-dot 2s ease-in-out infinite;
}
/* Animated via transform rather than `top`, which triggered layout on
   every frame. Exact pixel values because the track is a fixed 48px:
   the original -10% → 100% of that containing block equals -4.8px →
   48px. translateY percentages would be wrong here — they resolve
   against the 4px dot, not the 48px track. */
@keyframes scroll-dot {
  0% { transform: translateY(-4.8px); opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { transform: translateY(48px); opacity: 0; }
}
.hero__scroll-label {
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  color: var(--text-tertiary);
}

/* ==========================================================================
   STATS — glass staircase cards
   ========================================================================== */
.stats {
  position: relative;
  background: var(--bg-charcoal);
  /* Was 130px top — every other section on the page uses 160px.
     Brought into line for genuine rhythm consistency rather than an
     unexplained one-off gap right after Hero. */
  padding: 160px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
}
.stats::before {
  content: '';
  position: absolute;
  top: -30%; left: 50%;
  width: 900px; height: 900px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(42, 167, 155, 0.06), transparent 62%);
  pointer-events: none;
}

.stats__inner {
  position: relative;
  max-width: var(--container);
  margin: 0 auto;
}

.stats__stairs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: end;
  gap: 24px;
}

.stats__step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px 28px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.stats__step:hover {
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.stats__step.is-visible { opacity: 1; transform: translateY(0); }

.stats__step--1 { transform: translateY(36px); }
.stats__step--2 { margin-bottom: 26px; }
.stats__step--3 { margin-bottom: 52px; }
.stats__step--4 { margin-bottom: 78px; }

.stats__num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 4.4vw, 3.7rem);
  color: var(--accent);
  line-height: 1;
  text-shadow: 0 0 30px var(--accent-glow);
}
.stats__plus {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--accent);
  margin-left: 2px;
}
.stats__label {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .stats__stairs {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }
  .stats__step--1, .stats__step--2, .stats__step--3, .stats__step--4 {
    margin-bottom: 0;
  }
}

@media (max-width: 1024px) {
  .nav__links {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    bottom: 0;
    /* Explicit z-index: now that #navLinks is moved to be a direct
       child of <body> while open (see js/main.js), it no longer sits
       inside .nav's stacking context (z-index: var(--z-nav)) and needs
       its own to guarantee it paints above ordinary page content.
       Using --z-overlay, the same tier already established for the
       lightbox — both are full-screen modal-style overlays. */
    z-index: var(--z-overlay);
    background: rgba(8, 9, 12, 0.97);
    /* Phase 11: was blur(24px) at this breakpoint too — the single
       largest, most expensive blur value in the file, applied to a
       full-screen mobile menu overlay, visible on every page via the
       nav. Reduced per PRODUCTION_READINESS_AUDIT.md's Critical
       finding, same philosophy as the rest of the Phase 11 mobile
       blur reduction (see the dedicated block near the end of this
       file), placed here directly since this is the rule's actual
       semantic source rather than a competing override elsewhere. */
    backdrop-filter: blur(var(--blur-mobile-xl)) saturate(140%);
    flex-direction: column;
    justify-content: flex-start;
    padding: 52px 32px;
    gap: 6px;
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
  }
  .nav__links.is-open { transform: translateX(0); }
  .nav__link {
    width: 100%;
    padding: 17px 4px;
    border-radius: 0;
    font-size: 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .nav__link:hover, .nav__link.is-active { background: transparent; }

  /* Staggered cascade reveal — each item animates in with an increasing
     delay once the menu opens, rather than the whole panel appearing flatly. */
  .nav__links .nav__link,
  .nav__links .nav__mobile-join {
    opacity: 0;
    transform: translateX(28px);
    transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
  }
  .nav__links.is-open .nav__link,
  .nav__links.is-open .nav__mobile-join {
    opacity: 1;
    transform: translateX(0);
  }
  .nav__links.is-open .nav__link:nth-of-type(1) { transition-delay: 0.04s; }
  .nav__links.is-open .nav__link:nth-of-type(2) { transition-delay: 0.06s; }
  .nav__links.is-open .nav__link:nth-of-type(3) { transition-delay: 0.08s; }
  .nav__links.is-open .nav__link:nth-of-type(4) { transition-delay: 0.10s; }
  .nav__links.is-open .nav__link:nth-of-type(5) { transition-delay: 0.12s; }
  .nav__links.is-open .nav__link:nth-of-type(6) { transition-delay: 0.14s; }
  .nav__links.is-open .nav__link:nth-of-type(7) { transition-delay: 0.16s; }
  .nav__links.is-open .nav__link:nth-of-type(8) { transition-delay: 0.18s; }
  .nav__links.is-open .nav__mobile-join { transition-delay: 0.2s; }

  .nav__burger { display: flex; }
  .nav__cta { display: none; }
}

@media (max-width: 560px) {
  .nav__inner { padding: 0 20px; }
  .hero { padding: calc(var(--nav-h) + 40px) 20px 100px; }
  .hero__actions { width: 100%; max-width: 340px; }
  .btn--hero-primary { width: 100%; padding: 18px 32px; }
  .hero__actions-secondary { width: 100%; gap: 10px; }
  .hero__contact-pill { flex: 1; justify-content: center; padding: 12px 14px; }
  .hero__stat-row { gap: 14px; padding: 14px 18px; max-width: 100%; }
  .hero__stat-num { font-size: 1.25rem; }
  .hero__stat-label { display: none; }
  .hero__scroll { display: none; }
  .stats { padding: 100px 20px; }
  .stats__step { padding: 28px 20px; }
}

/* ==========================================================================
   SCROLL-REVEAL UTILITY (staggered)
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease) var(--d, 0s), transform 0.8s var(--ease) var(--d, 0s);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   SECTION HEAD (shared)
   ========================================================================== */
.section-head {
  max-width: 640px;
  margin: 0 auto 72px;
  text-align: center;
}
.section-head__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}
.section-head__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
}
.section-head__sub {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.7;
}

/* icon glow chip, reused across Why + Programs */
.why__icon-glow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 16px;
  position: relative;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.015)),
    linear-gradient(145deg, rgba(42, 167, 155, 0.18), rgba(42, 167, 155, 0.05));
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14) inset, 0 10px 24px -10px rgba(42, 167, 155, 0.55);
  margin-bottom: 22px;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.why__icon-glow::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 20px;
  background: radial-gradient(circle, rgba(42, 167, 155, 0.28), transparent 72%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  z-index: -1;
}
.why__card:hover .why__icon-glow,
.why__flagship:hover .why__icon-glow {
  transform: scale(1.08) rotate(-4deg);
}
.why__card:hover .why__icon-glow::after,
.why__flagship:hover .why__icon-glow::after {
  opacity: 1;
}

/* ==========================================================================
   WHY CHOOSE EVOLVE UP
   ========================================================================== */
.why {
  background: var(--bg-primary);
  padding: 160px 24px;
}
.why__inner { max-width: var(--container); margin: 0 auto; }

.why__flagship {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 64px;
  margin-bottom: 110px;
}
.why__flagship--reverse { direction: rtl; }
.why__flagship--reverse > * { direction: ltr; }

.why__flagship-media {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-charcoal-2), var(--bg-primary));
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.why__flagship-media::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 60% 30%, var(--accent-soft), transparent 55%),
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 30px 30px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) 0 0 / 30px 30px;
  mask-image: radial-gradient(circle at 60% 40%, black 45%, transparent 78%);
}
.why__flagship-media::after {
  content: '';
  position: absolute;
  top: 18px; left: 18px;
  width: 26px; height: 26px;
  border-top: 1.5px solid rgba(42, 167, 155, 0.55);
  border-left: 1.5px solid rgba(42, 167, 155, 0.55);
  border-radius: 3px 0 0 0;
}
.why__flagship-icon {
  position: relative;
  width: 42%;
  color: var(--accent);
  opacity: 0.85;
  filter: drop-shadow(0 0 24px rgba(42, 167, 155, 0.4));
}
.why__flagship-icon path {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  transition: stroke-dashoffset 1.5s var(--ease) 0.25s;
}
.why__flagship.is-visible .why__flagship-icon path {
  stroke-dashoffset: 0;
}

.why__flagship-content h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  letter-spacing: 0.01em;
  margin-bottom: 16px;
  line-height: 1.15;
  position: relative;
  padding-top: 18px;
}
.why__flagship-content h3::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 3px;
  background: var(--accent);
  border-radius: 2px;
  box-shadow: 0 0 10px var(--accent-glow);
  transition: width var(--dur) var(--ease);
}
.why__flagship--reverse .why__flagship-content h3::before { left: auto; right: 0; }
.why__flagship:hover .why__flagship-content h3::before { width: 46px; }
.why__flagship-content p {
  color: var(--text-secondary);
  font-size: 1.05rem;
  line-height: 1.75;
  max-width: 46ch;
}

.why__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.why__card {
  position: relative;
  padding: 36px 28px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--glass-border);
  overflow: hidden;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.why__card::before {
  content: '';
  position: absolute;
  top: -35%; right: -25%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(42, 167, 155, 0.14), transparent 70%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.why__card:hover {
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(var(--card-lift-standard));
}
.why__card:hover::before { opacity: 1; }
.why__card .why__icon-glow { width: 48px; height: 48px; margin-bottom: 20px; }
.why__card h4 {
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  margin-bottom: 12px;
  position: relative;
}
.why__card h4::after {
  content: '';
  display: block;
  width: 26px; height: 2px;
  background: var(--accent);
  margin-top: 10px;
  border-radius: 2px;
  opacity: 0.45;
  transition: width var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.why__card:hover h4::after { width: 42px; opacity: 1; }
.why__card p {
  color: var(--text-secondary);
  font-size: 0.93rem;
  line-height: 1.7;
  margin-top: 14px;
}

.why__cta {
  margin-top: 60px;
  text-align: center;
}
.why__cta-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.why__cta-link svg { transition: transform var(--dur-fast) var(--ease); }
.why__cta-link:hover {
  border-color: rgba(42, 167, 155, 0.4);
  background: rgba(42, 167, 155, 0.1);
  transform: translateY(-2px);
}
.why__cta-link:hover svg { transform: translateX(3px); }

/* ==========================================================================
   FEATURED PROGRAMS
   ========================================================================== */
.programs {
  background: var(--bg-charcoal);
  padding: 160px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.programs__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; min-width: 0; }

.programs__scroller {
  display: grid;
  /* minmax(0,1fr) not 1fr: a bare 1fr track has an implicit min-content
     floor, so cards with wide intrinsic content pushed this grid to a
     660px min-content width inside a 360px viewport. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  min-width: 0;
}
.programs__scroller:focus-visible { outline-offset: 6px; }

.program-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--glass-border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.program-card:hover {
  transform: translateY(var(--card-lift-standard));
  border-color: rgba(42, 167, 155, 0.45);
  box-shadow: var(--shadow-lg);
}

.program-card__media {
  position: relative;
  aspect-ratio: 16 / 8;
  overflow: hidden;
}
.program-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  transition: transform 0.7s var(--ease);
}
.program-card:hover .program-card__media img { transform: scale(1.08); }
.program-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,10,10,0.85));
}

.badge {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.badge--beginner {
  background: rgba(42, 167, 155, 0.12);
  border: 1px solid rgba(42, 167, 155, 0.5);
  color: var(--accent);
}
.badge--intermediate {
  background: rgba(42, 167, 155, 0.28);
  border: 1px solid rgba(42, 167, 155, 0.6);
  color: #EAF1FF;
}
.badge--advanced {
  background: var(--accent-solid);
  border: 1px solid var(--accent-solid);
  color: #fff;
}
.badge--all-levels {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.program-card__body {
  padding: 30px 30px 32px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.program-card__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  margin-bottom: 8px;
}
.program-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.83rem;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.program-card__meta .dot {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--text-tertiary);
  flex-shrink: 0;
}
.program-card__meta strong { color: var(--text-secondary); font-weight: 600; }

/* The problem statement is the hook — the first thing a scanning visitor
   should read after the title, so it gets its own visual weight rather
   than blending into a generic description paragraph. */
.program-card__problem {
  color: var(--text-primary);
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 22px;
  font-weight: 500;
}

/* Results + Feeling as scannable labeled rows, not paragraphs to read in
   full — serves the busy-professional read (quick to parse) without
   losing the specificity an experienced lifter needs to trust it. */
.program-card__specs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.program-card__spec {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.program-card__spec svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 3px;
}
.program-card__spec-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 3px;
}
.program-card__spec-value {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* "Our Edge" — the differentiation/trust moment gets its own visually
   distinct callout rather than blending into the rest of the copy. */
.program-card__edge {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(42, 167, 155, 0.08);
  border-left: 2px solid var(--accent);
  margin-bottom: 24px;
}
.program-card__edge svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.program-card__edge p { font-size: 0.87rem; line-height: 1.55; color: var(--text-secondary); }
.program-card__edge strong { color: var(--text-primary); font-weight: 700; }

.program-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.program-card__cta svg { transition: transform var(--dur-fast) var(--ease); }
.program-card:hover .program-card__cta {
  background: var(--accent);
  border-color: var(--accent);
}
.program-card__cta:hover { transform: translateY(-2px); }
.program-card:hover .program-card__cta:hover svg { transform: translateX(3px); }

.programs__dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
}
.programs__dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.programs__dots button.is-active {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ==========================================================================
   PHASE 2 RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .why__grid { grid-template-columns: repeat(2, 1fr); }
  .programs__scroller { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
}

@media (max-width: 900px) {
  .why__flagship {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-bottom: 64px;
  }
  .why__flagship--reverse { direction: ltr; }
  .why__flagship-media { aspect-ratio: 16 / 10; }
  /* Once flagships stack into a single column, the alternating left/right
     accent tick from the two-column layout no longer has a visual reason
     to differ — both read left-aligned for a consistent stacked layout. */
  .why__flagship--reverse .why__flagship-content h3::before { left: 0; right: auto; }
}

@media (max-width: 760px) {
  .why { padding: 100px 20px; }
  .why__grid { grid-template-columns: 1fr; gap: 16px; }
  .section-head { margin-bottom: 48px; }

  .programs { padding: 100px 0; }
  .programs__inner { padding: 0 0 0 20px; }
  .programs__scroller {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 8px;
    padding-right: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .programs__scroller::-webkit-scrollbar { display: none; }
  .program-card {
    flex: 0 0 82%;
    scroll-snap-align: start;
  }
  .programs__dots { display: flex; }
  .programs__inner .section-head { padding: 0 20px 0 0; }
}

/* ==========================================================================
   AUDIT FIXES — mobile conversion CTA + very-small-screen refinement
   ========================================================================== */
.nav__mobile-join { display: none; }

@media (max-width: 1024px) {
  .nav__mobile-join {
    display: inline-flex;
    width: 100%;
    justify-content: center;
    margin-top: 20px;
  }
}

@media (max-width: 480px) {
  .stats__stairs { grid-template-columns: 1fr; gap: 14px; }
  .stats__step { padding: 28px 24px; }
  .why__flagship-content h3 { font-size: 1.5rem; }
  .section-head__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* ==========================================================================
   TRANSFORMATIONS
   ========================================================================== */
.transformations {
  background: var(--bg-primary);
  padding: 160px 24px;
}
.transformations__inner { max-width: var(--container); margin: 0 auto; }

.metrics-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  max-width: 900px;
  margin: 0 auto 90px;
}
.metric-counter {
  text-align: center;
  padding: 30px 20px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.metric-counter .stats__label { display: block; margin-top: 8px; }

.transform-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  margin-bottom: 100px;
}
.transform-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.transform-card:hover {
  transform: translateY(-6px);
  border-color: rgba(42, 167, 155, 0.45);
  box-shadow: var(--shadow-lg);
}
.transform-card__media {
  overflow: hidden;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.transform-card__media img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  filter: var(--photo-grade);
  transition: transform 0.4s var(--ease);
}
.transform-card:hover .transform-card__media img { transform: scale(1.03); }
.transform-card__body { padding: 20px 20px 24px; }
.transform-card__stats {
  color: var(--accent);
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
}

.transform-card__badges {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.transform-card__badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.transform-card__badge--goal {
  background: var(--accent-soft);
  border-color: rgba(42, 167, 155, 0.4);
  color: var(--accent);
}
.transform-card__delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.transform-card__delta span {
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--accent);
  margin-left: 4px;
}
.transform-card__range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}
.transform-card__range svg { color: var(--text-tertiary); flex-shrink: 0; }

.transform-card__win {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.85rem;
  font-style: italic;
  color: var(--text-secondary);
  line-height: 1.5;
}
.transform-card__win svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
/* ==========================================================================
   TRAINERS — luxury coach profiles, not employee cards
   ========================================================================== */
.trainers {
  background: var(--bg-charcoal);
  padding: 160px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.trainers__inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.trainers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 32px;
}

.trainer-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--glass-fill);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  border: 1px solid var(--glass-border);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
}
.trainer-card:hover {
  transform: translateY(var(--card-lift-standard));
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-lg);
}

/* Large portrait — first thing seen, per the specified hierarchy */
.trainer-card__portrait {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #000;
}
.trainer-card__portrait img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--photo-grade);
  transition: transform 0.7s var(--ease);
}
.trainer-card:hover .trainer-card__portrait img { transform: scale(1.06); }
.trainer-card__portrait::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10, 10, 10, 0.9));
}

.trainer-card__body { padding: 28px 26px 30px; display: flex; flex-direction: column; flex: 1; }

.trainer-card__body h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
}
.trainer-card__role {
  color: var(--accent);
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 18px;
}

/* Trust badges — years of experience + certifications */
.trainer-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.trainer-card__badge {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}
.trainer-card__badge--exp {
  background: var(--accent-soft);
  border-color: rgba(42, 167, 155, 0.4);
  color: var(--accent);
}
.trainer-card__badge--placeholder {
  background: transparent;
  border-style: dashed;
  color: var(--text-tertiary);
  font-style: italic;
}

.trainer-card__spec {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}
.trainer-card__spec strong { color: var(--text-primary); font-weight: 700; }
/* Bio and awards: newly rendered fields that already existed in the CMS
   schema but were never output. Styled to match .trainer-card__spec
   exactly so the card's internal rhythm is unchanged — bio sits as
   readable body copy, awards as a labelled line like the spec above. */
.trainer-card__bio {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 20px;
}
.trainer-card__awards {
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 20px;
}
.trainer-card__awards strong { color: var(--text-primary); font-weight: 700; }

/* Coaching philosophy — the most-read line, styled as a real pull-quote */
.trainer-card__philosophy {
  position: relative;
  padding-left: 18px;
  margin-bottom: 20px;
  border-left: 2px solid var(--accent);
}
.trainer-card__philosophy p {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--text-primary);
}

/* Signature principle — a concrete, specific practice, not another quote */
.trainer-card__principle {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius-sm, 10px);
  background: rgba(42, 167, 155, 0.08);
  margin-bottom: 20px;
}
.trainer-card__principle svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.trainer-card__principle p { font-size: 0.85rem; line-height: 1.55; color: var(--text-secondary); }
.trainer-card__principle strong { color: var(--text-primary); font-weight: 700; }

.trainer-card__ideal {
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 10px;
}
.trainer-card__ideal strong { color: var(--text-primary); font-weight: 700; }

.trainer-card__languages {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-tertiary);
  margin-bottom: 22px;
}
.trainer-card__languages svg { flex-shrink: 0; color: var(--text-tertiary); }

.trainer-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: auto;
  padding: 14px 26px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.trainer-card__cta svg { transition: transform var(--dur-fast) var(--ease); }
.trainer-card:hover .trainer-card__cta {
  background: var(--accent);
  border-color: var(--accent);
}
.trainer-card__cta:hover { transform: translateY(-2px); }
.trainer-card:hover .trainer-card__cta:hover svg { transform: translateX(3px); }

@media (max-width: 760px) {
  .trainers { padding: 100px 20px; }
  .trainers__inner { padding: 0; }
  .trainers__grid { grid-template-columns: 1fr; gap: 24px; }
  .trainer-card__portrait { aspect-ratio: 4 / 4.6; }
}

.testimonials {
  background: var(--bg-charcoal);
  padding: 160px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.testimonials__inner { max-width: var(--container); margin: 0 auto; }
.testimonials__rating {
  color: var(--accent);
  letter-spacing: 2px;
  margin-right: 8px;
}

.testimonials__row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.testimonials__arrow {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.testimonials__arrow:hover { background: var(--accent-solid); color: #fff; transform: translateY(-2px); }

.testimonials__scroller {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  flex: 1;
  padding: 4px;
}
.testimonials__scroller::-webkit-scrollbar { display: none; }

.review-card {
  flex: 0 0 320px;
  scroll-snap-align: start;
  padding: 26px 24px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.review-card:hover {
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.review-card__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.review-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)),
    linear-gradient(145deg, rgba(42, 167, 155, 0.18), rgba(42, 167, 155, 0.05));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
.review-card__name { font-weight: 700; font-size: 0.92rem; }
.review-card__stars { color: var(--accent); font-size: 0.8rem; letter-spacing: 1px; }
.review-card__quote { margin-left: auto; flex-shrink: 0; color: rgba(42, 167, 155, 0.35); }

.review-card__verified {
  margin-left: auto;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.review-card__verified:hover { border-color: rgba(42, 167, 155, 0.4); color: var(--text-primary); }

.review-card__watch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: rgba(42, 167, 155, 0.08);
  border: 1px solid rgba(42, 167, 155, 0.25);
  margin-bottom: 10px;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.review-card__watch:hover {
  background: rgba(42, 167, 155, 0.14);
  border-color: rgba(42, 167, 155, 0.45);
  transform: translateY(-2px);
}
.review-card__watch-play {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.review-card__watch-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-primary);
}
.review-card__text--caption { color: var(--text-tertiary); font-size: 0.85rem; font-style: italic; }
.review-card__text {
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
}

.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 32px;
}
.testimonials__dots button {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.testimonials__dots button.is-active {
  background: var(--accent);
  transform: scale(1.3);
  box-shadow: 0 0 8px var(--accent-glow);
}

/* ==========================================================================
   MEMBERSHIP PLANS
   ========================================================================== */
.membership {
  background: var(--bg-primary);
  padding: 160px 24px 180px;
}
.membership__inner { max-width: var(--container); margin: 0 auto; }

.pricing-grid {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 1180px;
  margin: 0 auto;
}
.pricing-group__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.pricing-group__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  align-items: start;
}
.price-card {
  position: relative;
  padding: 40px 32px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.price-card:hover { transform: translateY(-4px); }
.price-card--popular {
  background: linear-gradient(180deg, rgba(42, 167, 155,0.1), var(--glass-fill));
  border-color: rgba(42, 167, 155, 0.5);
  box-shadow: var(--shadow-xl);
}
.price-card__badge {
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%);
  background: var(--accent-solid);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-icon-btn);
  white-space: nowrap;
}
.price-card__duration-tag {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 4px 11px;
  border-radius: 999px;
}
.price-card__audience {
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.55;
  margin-top: 14px;
}
.price-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.price-card__tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
}

.price-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 22px;
}
.price-card__original {
  font-size: 1.1rem;
  color: var(--text-faint, var(--text-tertiary));
  text-decoration: line-through;
}
.price-card__price {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2.6rem;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}
.price-card__savings {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--success, #9CA3AF);
  background: rgba(34, 197, 94, 0.12);
  padding: 4px 10px;
  border-radius: 999px;
}
.price-card__joining-fee {
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--text-tertiary);
}

.price-card__why {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.55;
  font-weight: 500;
}
.price-card__results {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

.price-card__features {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.price-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.87rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.price-card__features svg { flex-shrink: 0; color: var(--accent); margin-top: 3px; }

.price-card__edge {
  display: flex;
  gap: 9px;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: var(--radius-sm);
  background: rgba(42, 167, 155, 0.08);
}
.price-card__edge svg { flex-shrink: 0; color: var(--accent); margin-top: 2px; }
.price-card__edge p { font-size: 0.83rem; line-height: 1.5; color: var(--text-secondary); }

.price-card__cta { width: 100%; margin-top: 24px; }

.reassurance-line {
  text-align: center;
  margin-top: 32px;
  font-size: 0.9rem;
  color: var(--text-tertiary);
}
.reassurance-line a {
  color: var(--accent);
  font-weight: 700;
  margin-left: 6px;
  transition: color var(--dur-fast) var(--ease);
}
.reassurance-line a:hover { color: var(--text-primary); text-decoration: underline; }

.pricing-addons {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 28px 32px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
}
.pricing-addons h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  margin-bottom: 14px;
  color: var(--text-secondary);
}
.pricing-addons ul { display: flex; flex-wrap: wrap; gap: 12px 32px; }
.pricing-addons li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.9rem;
}
.pricing-addons li span:first-child { color: var(--text-secondary); }
.pricing-addons li span:last-child { color: var(--accent); font-weight: 700; }

/* ==========================================================================
   PHASE 3 RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .transform-grid { grid-template-columns: repeat(2, 1fr); }
  .pricing-group__cards { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .price-card--popular { order: -1; }
}

@media (max-width: 760px) {
  .transformations, .testimonials, .membership { padding: 100px 20px; }
  .metrics-row { grid-template-columns: 1fr; gap: 14px; margin-bottom: 60px; }
  .transform-grid { grid-template-columns: 1fr; gap: 20px; margin-bottom: 60px; }
  .testimonials__arrow { display: none; }
  .review-card { flex: 0 0 82%; }
  .pricing-group__cards { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 480px) {
  .pricing-addons ul { flex-direction: column; gap: 10px; }
}

/* ==========================================================================
   Shared icon-chip style, originally built for trainer cards, now reused
   by the footer social links across every page.
   ========================================================================== */
.trainer-card__icon {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: var(--text-secondary);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.trainer-card__icon:hover { background: var(--accent-solid); color: #fff; transform: translateY(-2px); }
.trainer-card__icon[hidden] { display: none; }

/* ==========================================================================
   FAQ ACCORDION
   ========================================================================== */
.faq {
  background: var(--bg-primary);
  padding: 160px 24px;
}
.faq__inner { max-width: 820px; margin: 0 auto; }
.faq__contact-link { color: var(--accent); font-weight: 600; }
.faq__contact-link:hover { text-decoration: underline; }

.faq__list { display: flex; flex-direction: column; gap: 14px; }

.faq-item {
  border-radius: var(--radius-sm);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-standard));
  -webkit-backdrop-filter: blur(var(--blur-standard));
  overflow: hidden;
  transition: border-color var(--dur) var(--ease);
}
.faq-item.is-open {
  border-color: rgba(42, 167, 155, 0.4);
}
.faq-item h3 { font-size: 1em; }

.faq-item__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}
.faq-item__chevron {
  flex-shrink: 0;
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.faq-item__trigger[aria-expanded="true"] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur) var(--ease);
}
/* Fresh investigation, second pass: the previous fix used :has(), which
   is a comparatively modern CSS selector. Rather than risk a second
   silent no-op on a device/browser that doesn't support it, switched
   to the plain .is-open class the JS in main.js was ALREADY toggling
   on .faq-item all along (verified directly in js/main.js — the
   exclusive-accordion open/close logic already adds/removes this
   class correctly) — a completely unambiguous, universally-supported
   descendant selector with zero dependency on any relational
   pseudo-class. */
.faq-item.is-open .faq-item__panel {
  grid-template-rows: 1fr;
}
.faq-item__panel-inner {
  overflow: hidden;
  padding: 0 24px;
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.7;
}
.faq-item.is-open .faq-item__panel-inner {
  padding: 0 24px 22px;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact {
  background: var(--bg-charcoal);
  padding: 160px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.contact__inner { max-width: var(--container); margin: 0 auto; }

.contact__quick-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.contact__join-now { padding: 17px 38px; font-size: 1rem; gap: 10px; }
.contact__join-now svg { transition: transform var(--dur-fast) var(--ease); }
.contact__join-now:hover svg { transform: translateX(3px); }
.contact__quick-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.contact__quick-btn:hover {
  border-color: rgba(42, 167, 155, 0.4);
  background: rgba(42, 167, 155, 0.1);
  transform: translateY(-2px);
}

.contact__response-time {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-tertiary);
  margin-top: -24px;
  margin-bottom: 40px;
}
.contact__response-time svg { color: var(--accent); flex-shrink: 0; }

.contact__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 32px;
  margin-bottom: 32px;
}

.contact-form {
  padding: 36px;
  border-radius: var(--radius);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-standard));
  -webkit-backdrop-filter: blur(var(--blur-standard));
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.contact-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Floating label pattern */
.field { position: relative; }
.field input, .field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 20px 16px 8px;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  resize: vertical;
}
.field textarea { padding-top: 24px; }
.field input:focus, .field textarea:focus {
  border-color: var(--accent);
  background: rgba(42, 167, 155, 0.05);
  outline: none;
}
.field label {
  position: absolute;
  left: 16px; top: 16px;
  color: var(--text-tertiary);
  font-size: 0.95rem;
  pointer-events: none;
  transition: top var(--dur-fast) var(--ease), font-size var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:focus + label,
.field textarea:not(:placeholder-shown) + label {
  top: 7px;
  font-size: 0.7rem;
  color: var(--accent);
}

.contact-form__submit { margin-top: 4px; }
.contact-form__status {
  font-size: 0.88rem;
  min-height: 1.2em;
}
.contact-form__status[data-state="success"] { color: var(--accent); }
.contact-form__status[data-state="error"] { color: #F87171; }

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-info__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: var(--radius-sm);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--blur-standard));
  -webkit-backdrop-filter: blur(var(--blur-standard));
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.contact-info__card:hover {
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-md);
  transform: translateY(var(--card-lift-compact));
}
.contact-info__card .why__icon-glow { margin-bottom: 0; width: 44px; height: 44px; flex-shrink: 0; }
.contact-info__label { font-size: 0.78rem; color: var(--text-tertiary); }
.contact-info__value { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); margin-top: 2px; }

.contact-map {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  aspect-ratio: 21 / 8;
}
.contact-map iframe {
  width: 100%; height: 100%; border: 0;
  filter: grayscale(0.3) contrast(1.05);
}
.contact-map__directions {
  position: absolute;
  bottom: 20px; right: 20px;
  padding: 12px 22px;
  font-size: 0.85rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: #08090A;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 90px 24px 32px;
}
.site-footer__inner { max-width: var(--container); margin: 0 auto; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding-bottom: 56px;
}

.site-footer__tagline {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.7;
  max-width: 36ch;
}
.site-footer__social { display: flex; gap: 10px; margin-top: 22px; }

.site-footer__col h3 {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 20px;
}
.site-footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.site-footer__col a {
  color: var(--text-secondary);
  font-size: 0.92rem;
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__col a:hover { color: var(--accent); }

.site-footer__col a,
.site-footer__hours {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.site-footer__col a svg,
.site-footer__hours svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.site-footer__hours {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.site-footer__newsletter p { color: var(--text-secondary); font-size: 0.88rem; margin-bottom: 18px; line-height: 1.6; }
.newsletter-form {
  display: flex;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  padding: 13px 16px;
  color: var(--text-primary);
  font-size: 0.88rem;
  min-width: 0;
}
.newsletter-form input:focus { outline: none; }
.newsletter-form button {
  width: 44px;
  flex-shrink: 0;
  background: var(--accent-solid);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.newsletter-form button:hover { background: #3FBDB0; }
.newsletter-form__status { margin-top: 10px; font-size: 0.82rem; color: var(--accent); min-height: 1.2em; }

.site-footer__bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.82rem;
  color: var(--text-tertiary);
}
.site-footer__legal { display: flex; gap: 20px; }
.site-footer__legal a { color: var(--text-tertiary); transition: color var(--dur-fast) var(--ease); }
.site-footer__legal a:hover { color: var(--accent); }

/* ==========================================================================
   PHASE 4 RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .contact__grid { grid-template-columns: 1fr; }
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 24px; }
}

@media (max-width: 760px) {
  .faq, .contact { padding: 100px 20px; }
  .contact-form { padding: 26px; }
  .site-footer { padding: 70px 20px 24px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .faq-item__trigger { padding: 18px 18px; font-size: 0.94rem; }
  .contact-map { aspect-ratio: 4 / 3; }
  .contact-map__directions { bottom: 14px; right: 14px; padding: 10px 16px; font-size: 0.78rem; }
}

/* ==========================================================================
   OFFER BANNER — CMS-driven, shown only when an active offer exists
   ========================================================================== */
.offer-banner {
  margin-top: var(--nav-h);
  background: linear-gradient(90deg, var(--accent-solid), #3FBDB0);
  color: #fff;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  font-size: 0.88rem;
}
.offer-banner[hidden] { display: none; }
.offer-banner p { margin: 0; }
.offer-banner__code {
  display: inline-block;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 9px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  margin-left: 2px;
}
.offer-banner strong { font-weight: 800; }
.offer-banner button {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}
.offer-banner button:hover { background: rgba(255,255,255,0.3); }

@media (max-width: 560px) {
  .offer-banner { flex-direction: column; gap: 6px; padding: 12px 16px; font-size: 0.82rem; }
}

/* ==========================================================================
   PHOTO GALLERY — CSS masonry + filters
   ========================================================================== */
.gallery {
  /* Was bg-primary — identical to both Membership (before it) and FAQ
     (after it), meaning three consecutive sections shared one
     background with zero visual separation between any of them. Every
     other section on the page correctly alternates primary/charcoal;
     this was the one break in that rhythm. Flipped to charcoal to
     restore it, with the same border-top every other charcoal section
     already carries, so this doesn't introduce a new inconsistency
     while fixing the bigger one. */
  background: var(--bg-charcoal);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 160px 24px;
}
.gallery__inner { max-width: var(--container); margin: 0 auto; }

.gallery__filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 44px;
}
.gallery__filters button {
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.gallery__filters button[aria-pressed="true"] {
  background: var(--accent-solid);
  border-color: var(--accent-solid);
  color: #fff;
}

.gallery__loading {
  text-align: center;
  color: var(--text-tertiary);
  padding: 40px;
}

.gallery__masonry {
  columns: 4 220px;
  column-gap: 18px;
}
.gallery__tile {
  break-inside: avoid;
  margin-bottom: 18px;
  position: relative;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--glass-fill);
  cursor: pointer;
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gallery__tile.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.gallery__tile.is-hidden-filter { display: none; }
.gallery__tile:hover {
  border-color: rgba(42, 167, 155, 0.45);
  box-shadow: var(--shadow-md), 0 0 32px -8px rgba(42, 167, 155, 0.35);
  transform: translateY(var(--card-lift-compact));
}
.gallery__tile img {
  width: 100%;
  height: auto;
  display: block;
  filter: var(--photo-grade);
  transition: transform 0.7s var(--ease);
}
.gallery__tile:hover img { transform: scale(1.06); }
.gallery__tile-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(10,10,10,0.88));
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
  display: flex;
  align-items: flex-end;
  padding: 16px;
}
.gallery__tile:hover .gallery__tile-overlay,
.gallery__tile:focus-visible .gallery__tile-overlay { opacity: 1; }
.gallery__tile-caption {
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.4;
}
.gallery__tile-zoom {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(10,10,10,0.55);
  backdrop-filter: blur(6px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.gallery__tile:hover .gallery__tile-zoom,
.gallery__tile:focus-visible .gallery__tile-zoom { opacity: 1; }

.gallery__proof-tile {
  break-inside: avoid;
  margin-bottom: 18px;
  padding: 24px 22px;
  border-radius: var(--radius-sm);
  background: rgba(42, 167, 155, 0.07);
  border: 1px solid rgba(42, 167, 155, 0.22);
}
.gallery__proof-quote { color: rgba(42, 167, 155, 0.5); margin-bottom: 10px; }
.gallery__proof-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.gallery__proof-name { font-size: 0.82rem; color: var(--text-tertiary); font-weight: 600; }

/* ==========================================================================
   LIGHTBOX
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgba(6, 7, 10, 0.96);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 24px;
  opacity: 0;
  animation: lightbox-in 0.3s var(--ease) forwards;
}
.lightbox[hidden] { display: none; }
@keyframes lightbox-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.lightbox__figure {
  max-width: min(900px, 90vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: 70vh;
  width: auto;
  filter: var(--photo-grade);
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7);
  animation: lightbox-zoom 0.35s var(--ease);
}
@keyframes lightbox-zoom {
  from { opacity: 0; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1); }
}
.lightbox__figure figcaption {
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-align: center;
}

.lightbox__close {
  position: absolute;
  top: 20px; right: 20px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease);
}
.lightbox__close:hover { background: var(--accent-solid); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--glass-fill);
  border: 1px solid var(--glass-border);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.lightbox__nav:hover { background: var(--accent-solid); }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

.lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--text-tertiary);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

body.lightbox-open { overflow: hidden; }

/* ==========================================================================
   GALLERY RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .gallery__masonry { columns: 3 200px; }
}
@media (max-width: 760px) {
  .gallery { padding: 100px 20px; }
  .gallery__masonry { columns: 2 160px; column-gap: 12px; }
  .gallery__tile { margin-bottom: 12px; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 8px; }
  .lightbox__nav--next { right: 8px; }
  .lightbox { padding: 80px 12px 40px; }
  .site-footer { padding: 70px 20px 24px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 40px; padding-bottom: 40px; }
  .site-footer__bottom { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 480px) {
  .gallery__masonry { columns: 1; }
}

/* ==========================================================================
   MOBILE BACKDROP-FILTER REDUCTION — Phase 11 Critical Fix
   ==========================================================================
   Resolves the Critical finding from PRODUCTION_READINESS_AUDIT.md:
   this file's foundational glass styling — used sitewide, including the
   navigation bar present on every page — had zero mobile backdrop-filter
   reduction, despite the identical fix already being proven correct in
   Membership and Testimonials individually. Same breakpoint (640px) and
   the same reduction philosophy those two sections already established,
   applied consistently here instead of re-derived per selector.

   Desktop values are completely untouched — every rule below is
   mobile-only and only overrides the blur radius, nothing else about
   each component's appearance. Grouped by original desktop value so the
   reduction tier applied to each is easy to verify against the source
   value it's reducing. */
@media (max-width: 640px) {
  /* .nav__links (24px) is handled separately below, at its own
     existing @media (max-width: 1024px) mobile-menu breakpoint —
     see that rule directly rather than overriding it here, since
     creating two separate rules for the same property would be
     technically correct via cascade order but needlessly hard to
     follow for future maintenance. */

  /* Was 18px — matches the exact reduction already proven correct in
     Membership (18px -> 8px). */
  .nav__inner,
  .stats__step,
  .why__card,
  .program-card,
  .trainer-card,
  .price-card {
    backdrop-filter: blur(var(--blur-mobile-lg));
    -webkit-backdrop-filter: blur(var(--blur-mobile-lg));
  }

  /* Was 16px — matches the exact reduction already proven correct in
     Testimonials (16px -> 6px). contact-info__card and faq-item were
     originally 14px and grouped separately; Phase C converged their
     desktop value to the same --blur-standard token, so they now
     belong in this same group rather than a separate one that reduced
     to the identical mobile target anyway. */
  .btn--outline,
  .metric-counter,
  .transform-card,
  .review-card,
  .contact-form,
  .hero__stat-row,
  .faq-item,
  .contact-info__card {
    backdrop-filter: blur(var(--blur-mobile-md));
    -webkit-backdrop-filter: blur(var(--blur-mobile-md));
  }

  /* Was 12px or 10px — already modest values; reduced further but
     kept above zero so the glass effect remains recognizable rather
     than disappearing outright. */
  .hero__eyebrow,
  .hero__contact-pill,
  .why__cta-link,
  .lightbox,
  .badge {
    backdrop-filter: blur(var(--blur-mobile-sm));
    -webkit-backdrop-filter: blur(var(--blur-mobile-sm));
  }

  /* .gallery__tile-zoom (6px) intentionally left unreduced — already
     low enough that further reduction has diminishing performance
     benefit and risks the effect becoming visually imperceptible. */
}

/* ==========================================================================
   VIDEOS
   ==========================================================================
   Click-to-play rather than autoplay. preload="none" means nothing but the
   poster downloads until a visitor actually chooses to watch — autoplaying
   two 720p clips would cost several MB on a mobile connection for content
   most visitors scroll past. Audio was stripped during encoding, so there
   is no unexpected sound.
   The frame uses a fixed 16/9 aspect-ratio so the box is reserved before
   the poster loads — zero layout shift regardless of network speed. */
.videos {
  background: rgba(10, 10, 10, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 160px 24px;
}
.videos__inner { max-width: var(--container); margin: 0 auto; }
.videos__grid {
  display: grid;
  /* min() is load-bearing: a bare minmax(320px, 1fr) enforces a hard
     320px track minimum, which overflowed at a 320px viewport once side
     padding was subtracted. min(320px, 100%) lets the track shrink to
     the container on narrow screens while still preferring 320px when
     there is room. */
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 28px;
}
.video-card {
  margin: 0;
  /* REQUIRED. The <video> carries width="1280", giving this grid item an
     intrinsic min-content width of 1280px. Grid items default to
     min-width:auto, which refuses to shrink below that — so the track
     expanded to 1280px and forced the whole document wide, while text
     content stayed at its normal ~350px. That is exactly the reported
     symptom: videos full-bleed, text squeezed left, browser zoomed out. */
  min-width: 0;
}
.video-card__frame {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg-charcoal);
  border: 1px solid var(--glass-border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.video-card:hover .video-card__frame {
  border-color: rgba(42, 167, 155, 0.4);
  box-shadow: var(--shadow-md);
}
.video-card__el {
  width: 100%;
  height: 100%;
  /* max-width belt-and-braces: even if a track somehow sizes larger, the
     element itself can never exceed its container. */
  max-width: 100%;
  object-fit: cover;
  display: block;
}
.video-card__caption {
  margin-top: 14px;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
@media (max-width: 760px) {
  .videos { padding: 100px 20px; }
  .videos__grid { gap: 22px; }
}

/* ==========================================================================
   SAFE-AREA INSETS (notched / gesture-bar devices)
   ==========================================================================
   Without these, fixed UI can sit under a notch, rounded corner or the
   Android gesture bar. env() returns 0 on devices that have no inset, so
   these are no-ops elsewhere — they only take effect where actually needed.
   Requires viewport-fit=cover in the viewport meta, which was also missing. */
.nav {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.site-footer {
  padding-bottom: calc(48px + env(safe-area-inset-bottom, 0px));
}
@supports (padding: max(0px)) {
  .hero,
  .videos,
  .contact {
    padding-left: max(24px, env(safe-area-inset-left, 0px));
    padding-right: max(24px, env(safe-area-inset-right, 0px));
  }
}

/* ==========================================================================
   FLOATING WHATSAPP CTA
   ==========================================================================
   Uses the site's existing accent and glass language — no new colours or
   shapes introduced. Sits above content but below the mobile nav overlay
   (--z-overlay) so it can never cover the open menu. Bottom offset respects
   the Android gesture bar via safe-area inset. */
.wa-float {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: calc(var(--z-overlay) - 1);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 18px;
  border-radius: 999px;
  background: #1FA855;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.16);
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.wa-float:hover,
.wa-float:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 38px -10px rgba(0, 0, 0, 0.65);
}
.wa-float:active { transform: translateY(0) scale(0.97); }
.wa-float svg { flex-shrink: 0; }

/* On phones the label is dropped to a circular icon so it never covers
   content or competes with the primary in-page CTAs. 56px keeps it well
   above the 44px minimum touch target. */
@media (max-width: 620px) {
  .wa-float {
    width: 56px;
    height: 56px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .wa-float__label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float { transition: none; }
}

/* ==========================================================================
   UNBREAKABLE TEXT GUARD
   ==========================================================================
   Root cause of a reproducible 19px overflow on
   ranjit-transformation-story.html at 320px: no single element exceeded the
   viewport, but a long unbreakable token (a URL or compound word) forced its
   text container wide. Binary-searched to <main>, then narrowed to a text
   run rather than any box.
   overflow-wrap:break-word only breaks words that genuinely cannot fit, so
   normal copy is completely unaffected — it is not a hyphenation or layout
   change. Applied at the text-container level rather than globally so it
   cannot interfere with layout primitives. */
p, li, h1, h2, h3, h4, blockquote, figcaption, td, th, dd, dt, .article-body, .faq-item__panel {
  overflow-wrap: break-word;
}

/* ==========================================================================
   NAV FLEX HARDENING — hamburger must never be squeezed out
   ==========================================================================
   .nav__inner is a flex row with no shrink control on its children. Flex
   items default to flex-shrink:1, so the phone and hamburger buttons could
   be compressed or pushed past the pill's edge if the logo (an <img> with
   width:auto and min-width:auto) rendered wider than expected — which is
   exactly the reported symptom: logo visible, action buttons gone.
   These rules make the outcome deterministic instead of dependent on how
   the logo happens to measure on a given device. */
.nav__actions,
.nav__icon-btn,
.nav__burger {
  flex-shrink: 0;          /* never compress the controls */
}
.nav__actions { margin-left: auto; }   /* always pinned to the right edge */
.nav__logo {
  flex-shrink: 1;
  min-width: 0;            /* allow the LOGO to give way, never the controls */
  overflow: hidden;
}
/* Wordmark is 6.7:1, far wider than the old circular emblem, so it is sized
   by width with a height cap rather than by height alone — otherwise it would
   overflow the pill on narrow screens. */

/* ==========================================================================
   HERO LOGO
   ==========================================================================
   Placed above the eyebrow badge, at the position marked on the reference
   screenshot. Sized well above the 54px nav mark so it reads as the primary
   brand statement while the nav logo becomes the secondary, persistent one.
   width/height attributes match the file's real 483x266 so the box is
   reserved before load — no layout shift. Uses the same fade-up entrance
   already defined for other hero elements; no new animation introduced. */
.hero__logo {
  display: block;
  /* Enlarged and the halo tightened to match the nav treatment — crisper
     edge definition instead of a wide soft bloom. */
  width: clamp(250px, 62vw, 430px);
  height: auto;
  max-width: 88%;
  margin: 0 auto 28px;
  filter: drop-shadow(0 0 2px rgba(255,255,255,1))
          drop-shadow(0 0 5px rgba(255,255,255,0.9))
          drop-shadow(0 0 12px rgba(255,255,255,0.45));
  opacity: 0;
  animation: fade-up 0.55s var(--ease) 0.02s forwards;
}
@media (max-width: 620px) {
  .hero__logo { width: clamp(230px, 60vw, 330px); margin-bottom: 22px; }
}
/* Short viewports already compress the hero stack; keep the logo in
   proportion so the CTA stays above the fold. */
@media (min-width: 861px) and (max-height: 940px) {
  .hero__logo { width: clamp(280px, 34vw, 400px); margin-bottom: 18px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .hero__logo { width: 200px; margin-bottom: 14px; }
}

/* ==========================================================================
   NEON — RARE ACCENTS ONLY
   ==========================================================================
   Deliberately a SHORT list. The rest of the interface is royal blue.
   Neon appears only where a single glance should land:
     1. the active/selected state (one element at a time)
     2. difficulty badges (small, categorical, high-signal)
     3. the eyebrow dot (one 8px dot)
   Everything else stays blue. This is what makes the neon read as premium
   rather than as the whole palette. */

/* 1. Active states — only ever one visible at a time */
/* Selected filter — buttons carry no class, state lives on aria-pressed,
   so that is what must be targeted. Verified against the live DOM rather
   than assumed from the markup. */
.gallery__filters button[aria-pressed="true"],
.gallery__filter.is-active,
.gallery__filters button.is-active {
  background: var(--neon);
  color: var(--neon-ink);
  border-color: var(--neon);
}
.mship-dots button.is-active { background: var(--neon); }

/* 2. Difficulty badges — small, categorical, genuinely useful to spot fast */
.badge--beginner,
.badge--intermediate,
.badge--advanced {
  background: var(--neon-soft);
  color: var(--neon);
  border: 1px solid rgba(42, 167, 155, 0.35);
}

/* 3. One small live-status dot */
.hero__eyebrow-dot { background: var(--neon); box-shadow: 0 0 10px 2px var(--neon-glow); }

/* Key stat FIGURES only — the labels beside them stay muted, so the number
   is the thing that catches the eye rather than the whole block. */
.stats__num { color: var(--neon); }

/* ==========================================================================
   NEON — SECOND TIER (expanded, still controlled)
   ==========================================================================
   Green presence increased beyond the four original accents, but kept to
   elements that are SMALL or TRANSIENT: icons, list markers, hover states,
   section eyebrows. The bulk surfaces (buttons, links, cards, borders)
   stay royal blue, which is what prevents a return to the "too much neon"
   problem. Green marks moments; blue carries the interface. */

/* Section eyebrows — small, one per section, high-signal */
.section-head__eyebrow { color: var(--neon); }

/* List/benefit markers — tiny glyphs, read as ticks of approval */
/* verified selectors only — .why__card-icon, .program-card__list and
   .mship-card__detail do not exist in the rendered DOM */

/* Hover states on secondary surfaces — transient, so never persistent noise */
.faq-item__trigger:hover { color: var(--neon); }
.post-card:hover .post-card__title { color: var(--neon); }
.gallery__tile:hover { border-color: rgba(42, 167, 155, 0.5); }

/* Focus rings — accessibility affordance, deliberately loud */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--neon);
  outline-offset: 3px;
}

/* Scroll indicator dot and the underline beneath section titles */
.hero__scroll-dot { background: var(--neon); box-shadow: 0 0 8px 2px var(--neon-glow); }

/* Selection highlight — a small delight, brand-consistent */
::selection { background: var(--neon); color: var(--neon-ink); }

/* Persistent green — every selector below was verified against the live
   rendered DOM before being written. An earlier pass targeted six class
   names that do not exist (.why__card-icon, .contact-info__icon,
   .program-card__list, .mship-card__feature-icon, .site-footer__col-title,
   .faq-item__q) and therefore did nothing at all. */

/* Small accent rule before each section eyebrow — 10 on the page */
.section-head__eyebrow::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--neon);
}

/* Why cards — icon glow and a top edge highlight */
.why__icon-glow { background: radial-gradient(circle, var(--neon-glow) 0%, transparent 70%); }
.why__card { border-top: 2px solid rgba(42, 167, 155, 0.30); }

/* Program card spec labels + the existing edge element */
.program-card__spec-label { color: var(--neon); }
.program-card__edge { border-left: 2px solid var(--neon); }

/* Stats — left rule on each step */
.stats__step { border-left: 2px solid rgba(42, 167, 155, 0.35); }

/* Contact quick actions and footer tagline accent */
.contact__quick-btn:hover { border-color: var(--neon); color: var(--neon); }
/* footer-premium.css defines this later in the cascade, so the override
   must be equally specific to win rather than relying on source order */
.site-footer .site-footer__crush-goal { color: var(--neon); }

/* ==========================================================================
   SOCIAL ICONS — real brand marks
   ==========================================================================
   Replaces 16px outline glyphs tinted with the site accent. These are the
   actual brand marks at their real colours: Facebook blue, and Instagram's
   corner-origin gradient. Larger target (48px) also clears the 44px
   minimum comfortably. */
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.10);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease),
              background 0.28s var(--ease), border-color 0.28s var(--ease);
}
.social-icon--fb { color: #1877F2; }          /* official Facebook blue */
.social-icon:hover,
.social-icon:focus-visible {
  transform: translateY(-3px) scale(1.06);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
}
.social-icon--fb:hover { box-shadow: 0 10px 26px -8px rgba(24, 119, 242, 0.65); }
.social-icon--ig:hover { box-shadow: 0 10px 26px -8px rgba(214, 41, 118, 0.6); }
.social-icon:active { transform: translateY(-1px) scale(0.98); }
.site-footer__social { display: flex; gap: 14px; align-items: center; }

/* ==========================================================================
   PREMIUM INTERACTION LAYER — every button and link
   ==========================================================================
   The point is that a press should feel ACKNOWLEDGED. Three consistent
   signals across every interactive element: a lift on hover, a definite
   press-down on :active, and a visible focus ring for keyboard users.
   All transform/opacity based, so nothing here costs layout or paint. */

/* Universal press feedback — this is what makes taps feel responsive.
   Applied via :active so it fires on touch as well as mouse. */
.btn:active,
.nav__icon-btn:active,
.nav__burger:active,
.faq-item__trigger:active,
.gallery__filters button:active,
.mship-dots button:active,
.contact__quick-btn:active,
.wa-float:active {
  transform: scale(0.965);
  transition-duration: 0.06s;      /* press must feel instant */
}

/* Secondary/outline buttons get the same lift language as accent buttons */
.btn--ghost:hover,
.btn--outline:hover,
.contact__quick-btn:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 10px 26px -10px var(--accent-glow);
}

/* Nav icon buttons */
.nav__icon-btn,
.nav__burger { transition: transform 0.22s var(--ease), background 0.22s var(--ease); }
.nav__icon-btn:hover,
.nav__burger:hover { transform: scale(1.08); background: rgba(255,255,255,0.08); }

/* Text links — underline grows from the left rather than appearing abruptly */
.nav__link,
.site-footer a:not(.social-icon):not(.nav__logo) { position: relative; }
.nav__link::after,
.site-footer a:not(.social-icon):not(.nav__logo)::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
}
.nav__link:hover::after,
.site-footer a:not(.social-icon):not(.nav__logo):hover::after { transform: scaleX(1); }

/* FAQ rows lift very slightly — enough to feel alive, not enough to jump */
.faq-item { transition: transform 0.25s var(--ease), border-color 0.25s var(--ease); }
.faq-item:hover { transform: translateX(3px); border-color: rgba(42, 167, 155,0.28); }

@media (prefers-reduced-motion: reduce) {
  .social-icon, .faq-item, .nav__icon-btn, .nav__burger,
  .nav__link::after, .site-footer a::after { transition: none !important; }
  .btn:active, .social-icon:active { transform: none !important; }
}

/* Amber restored on the two elements that lost their colour when the
   neon tokens were collapsed. These are the accent's proper home: the
   figures people scan for, and the categorical badges. */
.stats__num { color: var(--accent); }
.badge,
.badge--beginner,
.badge--intermediate,
.badge--advanced {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(42, 167, 155, 0.35);
}

/* ==========================================================================
   PLATINUM + TEAL — role assignment
   ==========================================================================
   Platinum is the PRIMARY: headings and key figures. Pure white was slightly
   harsh on near-black; platinum is warmer and gives the palette its second
   colour without adding a hue.
   Teal is the ACCENT: applied only where something is interactive or worth
   scanning for. */

/* Headings in platinum */
h1, h2, h3,
.hero__title,
.section-head__title,
.program-card__title,
.mship-card__duration,
.faq-item__trigger { color: var(--platinum); }

/* The one word the headline emphasises stays teal — a single point of
   colour in the largest text on the page. */
.hero__title-accent { color: var(--accent); }

/* Solid buttons: DEEP teal fill with white text (6.36:1). The mid teal
   would fail here under white, which is why two shades exist. */
.btn--accent {
  background: var(--accent-solid);
  color: var(--accent-ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.16) inset,
              0 8px 24px -8px rgba(14, 107, 99, 0.55);
}
.btn--accent:hover {
  background: #12857A;
  box-shadow: 0 1px 0 rgba(255,255,255,0.22) inset,
              0 0 0 8px var(--accent-soft),
              0 14px 34px -8px rgba(14, 107, 99, 0.7);
}

/* Stat figures — platinum, so the row reads as data rather than decoration,
   with the '+' suffix in teal to mark it. */
.stats__num { color: var(--platinum); }
.stats__suffix { color: var(--accent); }

/* Badges: teal on a teal wash */
.badge,
.badge--beginner, .badge--intermediate, .badge--advanced {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(42, 167, 155, 0.35);
}

/* Active states — one at a time, deep teal so it reads as selected */
.gallery__filters button[aria-pressed="true"] {
  background: var(--accent-solid);
  color: #FFFFFF;
  border-color: var(--accent-solid);
}
.mship-dots button.is-active { background: var(--accent); }

/* ==========================================================================
   FULL LOCKUP LOGO — sizing
   ==========================================================================
   The new mark is the complete lockup (emblem above wordmark) at aspect
   2.15, replacing both the 1.82 nav wordmark and the squarer hero emblem.
   A taller mark at the same height would render wider, so the nav version
   is sized by WIDTH with a height cap — otherwise it crowds the phone and
   hamburger buttons. */

/* Hero: the lockup carries both emblem and wordmark, so it needs more
   presence than the old emblem-only mark, but its wider aspect means
   height alone would overflow narrow screens. Capped by width too. */

/* ==========================================================================
   PROGRAMS CAROUSEL DOTS — tap target fix
   ==========================================================================
   Measured 7x7px with no extended hit area — genuinely difficult to tap on
   a phone. The same fix was applied to the Membership dots earlier but was
   never carried across to these.
   Width is own-width-plus-gap, NOT a fixed 44px: a fixed overlay on dots
   this closely spaced overlaps its neighbours, so taps land on the wrong
   dot — the exact regression that fix caused the first time. Gap widened to
   16px so adjacent hit areas meet without overlapping. */
.programs__dots { gap: 16px; }
.programs__dots button { position: relative; }
.programs__dots button::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: calc(100% + 16px);
  height: 44px;
  transform: translate(-50%, -50%);
}


/* ==========================================================================
   TRAINERS GRID — single-trainer case
   ==========================================================================
   repeat(auto-fit, minmax(300px, 1fr)) stretches a lone card across the
   entire grid width: with one published trainer the portrait rendered
   1190x1488 on desktop, which looks like a mistake rather than a feature.
   Capping the track and centring keeps a single card at a natural size,
   and the rule stops applying the moment a second trainer is published. */
.trainers__grid:has(.trainer-card:only-child) {
  grid-template-columns: minmax(300px, 420px);
  justify-content: center;
}
/* Fallback for browsers without :has() — the grid simply keeps its previous
   behaviour there, so nothing breaks. */
@supports not (selector(:has(*))) {
  .trainers__grid { max-width: 900px; margin-inline: auto; }
}

/* ==========================================================================
   OPEN / CLOSED STATUS CHIP
   ========================================================================== */
.open-status {
  display: none;                 /* hidden until JS sets a real state */
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
}
.open-status.is-open,
.open-status.is-closed { display: inline-flex; }
.open-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.open-status.is-open { color: var(--accent); }
.open-status.is-open::before {
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  animation: open-pulse 2.4s ease-in-out infinite;
}
.open-status.is-closed { color: var(--text-secondary); }
.open-status.is-closed::before { background: var(--text-secondary); opacity: 0.6; }

@keyframes open-pulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--accent-soft); }
  50%      { box-shadow: 0 0 0 6px rgba(42, 167, 155, 0.06); }
}
@media (prefers-reduced-motion: reduce) {
  .open-status.is-open::before { animation: none; }
}

/* ==========================================================================
   INSTAGRAM STRIP
   ==========================================================================
   Square tiles matching Instagram's own crop. minmax uses min() so the
   track can shrink below its preferred size on narrow screens — a bare
   minmax(140px, 1fr) overflows at 320px once padding is subtracted. */
.instagram {
  background: rgba(10, 10, 10, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 140px 24px;
}
.instagram__inner { max-width: var(--container); margin: 0 auto; }
.instagram__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
  gap: 14px;
}
.instagram__tile {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.instagram__tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s var(--ease);
}
.instagram__tile-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.45), transparent 55%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}
.instagram__tile:hover,
.instagram__tile:focus-visible {
  transform: translateY(-3px);
  border-color: var(--accent);
  box-shadow: 0 14px 34px -12px var(--accent-glow);
}
.instagram__tile:hover img { transform: scale(1.06); }
.instagram__tile:hover .instagram__tile-overlay { opacity: 1; }
.instagram__cta { margin-top: 30px; text-align: center; }

@media (max-width: 760px) {
  .instagram { padding: 90px 20px; }
  .instagram__grid { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .instagram__tile, .instagram__tile img, .instagram__tile-overlay { transition: none; }
}

/* ==========================================================================
   FOUNDER'S NOTE
   ==========================================================================
   Two columns on desktop (photo + words), stacked on mobile. The photo uses
   the same 4:5 ratio as the trainer portraits so the two sections read as
   one system. */
.founder {
  background: rgba(10, 10, 10, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 150px 24px;
}
.founder__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 56px;
  align-items: center;
}
.founder__media {
  margin: 0;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.7);
  max-width: 420px;
}
.founder__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
}
.founder__quote {
  margin: 20px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--accent);
}
.founder__quote p {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  line-height: 1.85;
  color: var(--text-secondary);
  margin: 0;
}
.founder__attrib {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 22px;
  padding-left: 24px;
}
.founder__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--platinum);
}
.founder__name:empty { display: none; }
.founder__role {
  font-size: 0.86rem;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.founder__role:empty { display: none; }

/* No photo supplied — single column, quote carries the section. */
.founder--no-image .founder__inner { grid-template-columns: minmax(0, 1fr); max-width: 760px; }

@media (max-width: 900px) {
  .founder { padding: 96px 20px; }
  .founder__inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .founder__media { max-width: 300px; margin-inline: auto; }
}

/* ==========================================================================
   YOUR FIRST VISIT
   ==========================================================================
   A numbered walkthrough. Deliberately plain: this section exists to reduce
   anxiety, and heavy styling would work against that. */
.firstvisit {
  background: rgba(10, 10, 10, 0.65);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 140px 24px;
}
.firstvisit__inner { max-width: 860px; margin: 0 auto; }
.firstvisit__steps {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.firstvisit__step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  padding: 22px 24px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.firstvisit__step:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(42, 167, 155, 0.25);
}
.firstvisit__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent-soft);
  border: 1px solid rgba(42, 167, 155, 0.35);
  color: var(--accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
}
.firstvisit__step-title {
  margin: 6px 0 6px;
  font-size: 1.06rem;
  color: var(--platinum);
}
.firstvisit__step-text {
  margin: 0;
  color: var(--text-secondary);
  line-height: 1.75;
  font-size: 0.97rem;
}
.firstvisit__closing {
  margin: 30px 0 0;
  padding: 16px 20px;
  border-left: 2px solid var(--accent);
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.7;
}
.firstvisit__closing:empty { display: none; }
.firstvisit__cta { margin-top: 32px; }

@media (max-width: 620px) {
  .firstvisit { padding: 92px 20px; }
  .firstvisit__step { padding: 18px 16px; gap: 14px; }
  .firstvisit__num { width: 32px; height: 32px; font-size: 0.86rem; }
}
@media (prefers-reduced-motion: reduce) {
  .firstvisit__step { transition: none; }
}