:root {
    --bg:        #f4f1ed;
    --bg-alt:    #ece8e1;
    --bg-card:   #fffdfa;
    --bg-dark:   #1a1d21;
    --dark:      #1a1d21;
    --dark-mid:  #2a2e34;
    --dark-deep: #131619;
    --ink:       #1b1e23;
    --ink-mid:   #3d4148;
    --muted:     #797e86;
    --border:    rgba(27,30,35,0.09);
    --border-lt: rgba(27,30,35,0.06);
    --accent:    #8a6a1c;
    --accent-lt: #c49a35;
    --accent-deep: #75591a;
    --white:     #fffdfa;
    --red:       #b0362a;

    /* Motion */
    --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Elevation — soft, layered, warm-neutral */
    --shadow-sm: 0 1px 2px rgba(27,30,35,0.04), 0 2px 8px rgba(27,30,35,0.05);
    --shadow-md: 0 6px 18px rgba(27,30,35,0.06), 0 16px 40px rgba(27,30,35,0.07);
    --shadow-lg: 0 12px 32px rgba(27,30,35,0.09), 0 32px 64px rgba(27,30,35,0.11);
    --shadow-gold: 0 12px 30px rgba(138,106,28,0.24);

    --nav-h: 78px;

    --font-display: 'Barlow Condensed', 'Bebas Neue', sans-serif;
    --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  }

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

  body {
    font-family: var(--font-body);
    background: var(--bg);
    color: var(--ink);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: rgba(138,106,28,0.22); color: var(--ink); }

  a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px;
  }

  /* ── NAV ── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 clamp(20px, 4vw, 48px); height: var(--nav-h);
    /* Dark bar on every page. It reads as one solid band over the hero photo
       instead of a translucent panel the photo shows through, which is what
       was dimming the links before you scrolled. */
    background: rgba(20,22,26,0.95);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-bottom: 1px solid transparent;
    transition: box-shadow 0.5s var(--ease-soft),
                border-color 0.5s var(--ease-soft), height 0.5s var(--ease-soft);
  }
  /* The scrolled state adds only a border and shadow. It used to darken the
     bar as well, which read as the links brightening on scroll — the bar now
     holds one value top to bottom. */
  nav.scrolled {
    border-bottom-color: rgba(255,255,255,0.09);
    box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  }
  .nav-logo {
    display: flex; align-items: center;
    color: var(--white); text-decoration: none; line-height: 1;
  }
  .nav-logo-mark {
    width: 58px; height: 58px; display: block;
    color: inherit; transition: color 0.35s var(--ease-soft);
  }
  .nav-logo:hover .nav-logo-mark { color: var(--accent-lt); }
  .nav-links { display: flex; align-items: center; gap: 30px; list-style: none; }
  .nav-links a {
    position: relative;
    /* Full white, not a translucent white — at 0.88 the links read dim over
       the hero photo and appeared to brighten once the bar darkened. */
    text-decoration: none; color: var(--white);
    font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
    transition: color 0.3s var(--ease-soft); white-space: nowrap;
  }
  .nav-links a:not(.nav-cta)::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -7px; height: 1.5px;
    background: var(--accent-lt); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.45s var(--ease-expo);
  }
  .nav-links a:not(.nav-cta):hover::after,
  .nav-links a:not(.nav-cta).active::after { transform: scaleX(1); }
  /* accent-lt, not accent — the bar is dark now, so the lighter tone is the
     one that stays legible on hover. */
  .nav-links a:hover { color: var(--accent-lt); }
  .nav-cta {
    background: var(--accent-lt); color: var(--dark) !important;
    padding: 11px 24px; font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    transition: background 0.35s var(--ease-soft), box-shadow 0.35s var(--ease-soft), transform 0.35s var(--ease-expo) !important;
    white-space: nowrap;
  }
  .nav-cta:hover { background: #d9b04a; box-shadow: 0 8px 22px rgba(0,0,0,0.35); transform: translateY(-1px); }

  /* ── LIGHT NAV (interior pages) ──
     The dark bar earns its place over the hero photo; on a cream page it just
     sits there as a black slab. Interior pages get the same bar in reverse:
     cream ground, ink links, deep bronze CTA — the pairing that passes on
     light. Home keeps the dark nav. */
  nav.nav--light {
    background: rgba(244,241,237,0.92);
    border-bottom-color: var(--border-lt);
  }
  nav.nav--light.scrolled {
    border-bottom-color: var(--border);
    box-shadow: 0 10px 30px rgba(27,30,35,0.07);
  }
  nav.nav--light .nav-logo { color: var(--dark); }
  nav.nav--light .nav-logo:hover .nav-logo-mark { color: var(--accent-deep); }
  nav.nav--light .nav-links a { color: var(--ink); }
  nav.nav--light .nav-links a:hover,
  nav.nav--light .nav-links a.active { color: var(--accent-deep); }
  nav.nav--light .nav-links a:not(.nav-cta)::after { background: var(--accent-deep); }
  nav.nav--light .nav-cta {
    background: var(--accent); color: var(--white) !important;
  }
  nav.nav--light .nav-cta:hover { background: var(--accent-deep); box-shadow: 0 8px 22px rgba(27,30,35,0.22); }
  nav.nav--light .hamburger span { background: var(--ink); }

  .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 6px; margin: -6px; }
  .hamburger span { display: block; width: 24px; height: 2px; background: var(--white); transition: 0.4s var(--ease-expo); }

  /* ── HERO ── */
  #hero {
    height: 100vh; min-height: 640px;
    display: flex; align-items: center; justify-content: center;
    position: relative; overflow: hidden;
    background: var(--dark);
    padding: calc(var(--nav-h) + 40px) 0 60px;
  }
  .hero-inner {
    position: relative; z-index: 2;
    width: 100%; max-width: 1240px; margin: 0 auto;
    padding: 0 clamp(24px, 5vw, 56px);
  }
  .hero-photo {
    position: absolute; inset: -4%;
    background-image: url('images/gym-interior.jpg');
    background-size: cover; background-position: center;
    filter: brightness(0.64) saturate(1.02) contrast(1.02);
    transform: scale(1.06);
    animation: heroDrift 22s ease-in-out infinite alternate;
    will-change: transform;
  }
  .hero-bg {
    position: absolute; inset: 0;
    background:
      /* Lighter than before, and part of the darkening traded for warmth. The
         vertical pass still anchors the nav at the top and the section join at
         the bottom; the middle stays open so the room reads as a bright gym
         rather than a night shot. The bronze wash is doing the "inviting" —
         a neutral grey scrim at this opacity just looked flat. */
      linear-gradient(180deg, rgba(16,18,21,0.58) 0%, rgba(16,18,21,0.20) 46%, rgba(16,18,21,0.66) 100%),
      radial-gradient(ellipse 74% 62% at 50% 50%, rgba(16,18,21,0.30) 0%, transparent 78%),
      radial-gradient(ellipse 86% 74% at 50% 56%, rgba(138,106,28,0.16) 0%, transparent 72%);
  }

  .hero-content {
    position: relative; text-align: center; max-width: 900px;
    margin: 0 auto; padding: 0;
  }
  /* ── HERO LOCKUP ──
     The horizontal wordmark leads the hero. Sized off viewport height as well
     as width so it can't push the buttons off a short laptop screen. */
  .hero-logo {
    display: flex; justify-content: center; margin-bottom: 40px;
    opacity: 0; animation: fadeUp 1.1s 0.12s var(--ease-expo) forwards;
  }
  .hero-lockup-mark {
    /* The vh term is a width cap, not a height — it keeps the lockup from
       growing so wide on a short laptop screen that the buttons fall below
       the fold. */
    width: clamp(320px, min(54vw, 70vh), 780px);
    height: auto; color: var(--bg);
    filter: drop-shadow(0 12px 38px rgba(0,0,0,0.5));
  }
  /* Sizes tuned by measuring the rendered glyph widths against the artwork's
     proportions: BAYSHORE fills 0.91 of the lockup width, ATHLETIC CLUB 0.54,
     SINCE 1994 0.30. */
  .lock-since {
    font-family: var(--font-body); font-weight: 500;
    font-size: 21px; letter-spacing: 7px;
  }
  .lock-word {
    font-family: var(--font-body); font-weight: 700;
    font-size: 111px; letter-spacing: -1px;
  }
  .lock-sub {
    font-family: var(--font-body); font-weight: 500;
    font-size: 25px; letter-spacing: 11px;
  }
  /* DM Sans, not the condensed display face — it matches the wordmark's
     proportions in the original badge artwork. */
  .badge-arc {
    font-family: var(--font-body); font-weight: 500;
    font-size: 28px; letter-spacing: 9px;
  }
  .badge-since {
    font-family: var(--font-body); font-weight: 500;
    font-size: 21px; letter-spacing: 6px;
  }
  .badge-word {
    font-family: var(--font-body); font-weight: 700;
    font-size: 55px; letter-spacing: -0.5px;
  }

  /* Carries the h1 — the lockup states the name, so this is the line that
     actually describes the club. */
  .hero-sub {
    font-family: var(--font-body); font-weight: 300;
    font-size: clamp(17px, 1.62vw, 22px);
    color: rgba(244,241,237,0.8);
    line-height: 1.6; letter-spacing: 0.002em;
    max-width: 680px; margin: 0 auto 42px;
    opacity: 0; animation: fadeUp 1s 0.36s var(--ease-expo) forwards;
  }
  .hero-actions {
    display: flex; gap: 18px; justify-content: center; flex-wrap: wrap;
    opacity: 0; animation: fadeUp 1s 0.54s var(--ease-expo) forwards;
  }
  /* Scaled up with the rest of the stack — the shared button sizes are tuned
     for in-page sections, which sit at a smaller scale than the hero. */
  #hero .btn-primary, #hero .btn-outline {
    padding: 20px 46px; font-size: 13px; letter-spacing: 0.17em;
  }
  .hero-trust {
    margin-top: 30px; font-size: 13px; font-weight: 500;
    letter-spacing: 0.2em; text-transform: uppercase;
    color: rgba(244,241,237,0.52);
    opacity: 0; animation: fadeUp 1s 0.72s var(--ease-expo) forwards;
  }

  /* ── BRONZE ON DARK ──
     Every filled bronze button that sits on a dark section, in one place, so
     the two tones can't drift apart again. Dark sections take the light bronze
     with dark ink (deep bronze on near-black is only 3.35:1); light sections
     keep the deep bronze with white, which is the pairing that passes there.
     Dark sections are #hero, #daypass-banner, #stats, #training, .cta-band. */
  #hero .btn-primary,
  .cta-band .btn-primary,
  #training .btn-primary,
  #daypass-banner .btn-accent {
    background: var(--accent-lt); color: var(--dark);
  }
  #hero .btn-primary:hover,
  .cta-band .btn-primary:hover,
  #training .btn-primary:hover,
  #daypass-banner .btn-accent:hover {
    background: #d9b04a; box-shadow: 0 12px 30px rgba(0,0,0,0.4);
  }

  @media (max-width: 620px) {
    /* The lockup's fine tracking closes up at small widths — give it more of
       the line and ease the gap under it. */
    .hero-lockup-mark { width: min(100%, 380px); }
    .hero-logo { margin-bottom: 28px; }
  }

  /* ── BUTTONS ── */
  .btn-primary {
    background: var(--accent); color: var(--white);
    padding: 17px 38px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; display: inline-block; font-family: var(--font-body);
    transition: background 0.4s var(--ease-soft), box-shadow 0.45s var(--ease-expo), transform 0.45s var(--ease-expo);
  }
  .btn-primary:hover { background: var(--accent-deep); box-shadow: var(--shadow-gold); transform: translateY(-2px); }
  .btn-outline {
    border: 1.5px solid rgba(244,241,237,0.55); color: var(--bg);
    padding: 16px 36px; font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft),
                background 0.4s var(--ease-soft), transform 0.45s var(--ease-expo);
  }
  .btn-outline:hover { border-color: var(--accent-lt); color: var(--accent-lt); background: rgba(138,106,28,0.06); transform: translateY(-2px); }

  /* Light btn-outline for light sections */
  .btn-outline-dark {
    border: 1.5px solid rgba(27,30,35,0.22); color: var(--ink);
    padding: 15px 32px; font-size: 12px; font-weight: 500;
    letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; display: inline-block;
    transition: border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft),
                background 0.4s var(--ease-soft), transform 0.45s var(--ease-expo);
  }
  .btn-outline-dark:hover { border-color: var(--accent); color: var(--accent); background: rgba(138,106,28,0.05); transform: translateY(-2px); }

  /* ── DAY PASS BANNER ── */
  #daypass-banner {
    background: var(--dark);
    padding: 22px 48px;
    display: flex; align-items: center; justify-content: center; gap: 32px;
    flex-wrap: wrap; text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
  }
  .banner-text {
    font-family: var(--font-display); font-weight: 600;
    font-size: 26px; color: var(--bg); letter-spacing: 0.06em;
  }
  .banner-text span {
    font-family: var(--font-body); font-size: 14px; font-weight: 400;
    display: block; letter-spacing: 0; margin-top: 2px; color: rgba(244,241,237,0.62);
  }
  .btn-accent {
    background: var(--accent); color: var(--white);
    padding: 13px 28px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; white-space: nowrap;
    transition: background 0.35s var(--ease-soft), box-shadow 0.4s var(--ease-expo), transform 0.4s var(--ease-expo);
  }
  .btn-accent:hover { background: var(--accent-deep); box-shadow: var(--shadow-gold); transform: translateY(-1px); }

  /* ── SECTION COMMON ── */
  section { padding: clamp(84px, 11vw, 148px) 0; }
  .container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px); }
  .section-label {
    font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
    color: var(--accent); font-weight: 600; margin-bottom: 18px;
  }
  .section-title {
    font-family: var(--font-display); font-weight: 700;
    font-size: clamp(46px, 6vw, 82px);
    line-height: 0.98; letter-spacing: -0.01em; margin-bottom: 24px;
    color: var(--ink);
  }
  .section-body { font-size: 17px; color: var(--muted); line-height: 1.75; max-width: 60ch; }

  /* ── STATS ── */
  #stats { background: var(--dark); padding: clamp(56px, 7vw, 84px) 0; }
  .stats-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 1px; background: rgba(255,255,255,0.07);
  }
  .stat-item { background: var(--dark); padding: 44px 32px; text-align: center; }
  .stat-num {
    font-family: var(--font-display); font-weight: 600;
    font-size: 66px; color: var(--accent-lt); line-height: 1; letter-spacing: 0.01em;
  }
  .stat-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(244,241,237,0.42); margin-top: 12px; }

  /* ── MEMBERSHIP ── */
  #membership { background: var(--bg); }
  .membership-header { margin-bottom: 68px; }
  .plans-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 22px; margin-bottom: 52px;
  }
  /* Four-up plan row. Its own class rather than a .plans-grid modifier — the
     two-up grid has responsive rules further down that would otherwise win on
     equal specificity and collapse this to one column at 900px. */
  .plan-grid-4 {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 18px; margin-bottom: 52px; align-items: stretch;
  }
  .plan-grid-4 .plan-card { display: flex; flex-direction: column; padding: 44px 28px; }
  .plan-grid-4 .plan-name { font-size: 29px; line-height: 1.04; margin-bottom: 10px; }
  .plan-grid-4 .plan-price { font-size: 44px; }
  .plan-grid-4 .plan-price sup { font-size: 20px; }
  .plan-grid-4 .plan-price sub { display: block; font-size: 13px; margin-top: 6px; }
  .plan-grid-4 .plan-desc { margin-bottom: 24px; }
  .plan-grid-4 .plan-features { margin-bottom: 28px; flex: 1; }
  .plan-grid-4 .plan-features li { font-size: 13.5px; padding: 9px 0; }
  @media (max-width: 1080px) { .plan-grid-4 { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 560px)  { .plan-grid-4 { grid-template-columns: 1fr; } }

  .plan-card {
    background: var(--bg-card); padding: 50px 42px;
    position: relative; border: 1px solid var(--border);
    transition: box-shadow 0.5s var(--ease-expo), transform 0.5s var(--ease-expo), border-color 0.5s var(--ease-soft);
  }
  .plan-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--border-lt); }
  .plan-card.featured { border-color: rgba(138,106,28,0.55); box-shadow: 0 0 0 1px rgba(138,106,28,0.18); }
  .plan-badge {
    position: absolute; top: 0; right: 32px;
    background: var(--accent); color: var(--white);
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 7px 15px;
  }
  .plan-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 38px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 4px;
  }
  .plan-price { font-size: 50px; font-weight: 300; color: var(--accent-deep); line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em; }
  .plan-price sup { font-size: 24px; vertical-align: super; }
  .plan-price sub { font-size: 16px; color: var(--muted); font-weight: 400; }
  .plan-desc { font-size: 13px; color: var(--muted); margin-bottom: 32px; line-height: 1.6; }
  .plan-features { list-style: none; margin-bottom: 40px; }
  .plan-features li {
    font-size: 14px; color: var(--ink-mid); padding: 11px 0;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 12px;
  }
  .plan-features li::before { content: '→'; color: var(--accent); flex-shrink: 0; }
  .btn-plan {
    display: block; text-align: center;
    background: transparent; border: 1.5px solid var(--border);
    color: var(--ink); padding: 15px;
    font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none;
    transition: background 0.4s var(--ease-soft), border-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
  }
  .btn-plan:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
  .plan-card.featured .btn-plan { background: var(--accent); border-color: var(--accent); color: var(--white); }
  .plan-card.featured .btn-plan:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

  .paid-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .paid-item {
    background: var(--bg-card); padding: 30px 26px;
    border: 1px solid var(--border); border-left: 3px solid var(--accent);
    transition: box-shadow 0.45s var(--ease-expo), transform 0.45s var(--ease-expo);
  }
  .paid-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .paid-label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
  .paid-price { font-family: var(--font-display); font-weight: 700; font-size: 42px; color: var(--ink); letter-spacing: 0.01em; }
  .paid-note { font-size: 12px; color: var(--muted); margin-top: 4px; }

  .insurance-note {
    background: rgba(138,106,28,0.06); border-left: 3px solid var(--accent);
    padding: 22px 26px; margin-top: 34px;
    font-size: 14px; color: var(--ink-mid); line-height: 1.65;
  }
  .insurance-note a { color: var(--accent-deep); }

  /* ── CLASSES ── */
  #classes { background: var(--bg-alt); }
  .classes-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 68px; }
  .classes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .class-card {
    background: var(--bg-card); padding: 34px 30px;
    border: 1px solid var(--border); cursor: default;
    transition: box-shadow 0.45s var(--ease-expo), transform 0.45s var(--ease-expo), border-color 0.45s var(--ease-soft);
  }
  .class-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); border-color: var(--border-lt); }
  .class-card:hover .class-name { color: var(--accent-deep); }
  .class-icon { font-size: 28px; margin-bottom: 18px; }
  .class-name {
    font-family: var(--font-display); font-weight: 700;
    font-size: 24px; letter-spacing: 0.01em; margin-bottom: 8px; transition: color 0.35s var(--ease-soft); color: var(--ink);
  }
  .class-desc { font-size: 13px; color: var(--muted); line-height: 1.65; }

  /* ── PERSONAL TRAINING ── */
  #training { background: var(--dark); }
  #training .section-title { color: var(--bg); }
  #training .section-body { color: rgba(244,241,237,0.58); }
  .training-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .training-benefits { display: flex; flex-direction: column; gap: 26px; }
  .benefit-item { display: flex; gap: 22px; align-items: flex-start; }
  .benefit-num {
    font-family: var(--font-display); font-weight: 600;
    font-size: 50px; color: var(--accent-lt); opacity: 0.42; line-height: 1; flex-shrink: 0; width: 48px;
  }
  .benefit-title { font-size: 15px; font-weight: 600; margin-bottom: 7px; color: var(--bg); letter-spacing: 0.01em; }
  .benefit-body { font-size: 13px; color: rgba(244,241,237,0.52); line-height: 1.65; }

  /* ── AMENITIES ── */
  #amenities { background: var(--bg); }
  .amenities-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 60px; }
  .amenities-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .amenity-item {
    background: var(--bg-card); padding: 30px 26px;
    display: flex; align-items: center; gap: 18px;
    border: 1px solid var(--border);
    transition: box-shadow 0.45s var(--ease-expo), transform 0.45s var(--ease-expo);
  }
  .amenity-item:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .amenity-icon { font-size: 22px; width: 40px; flex-shrink: 0; }
  .amenity-name { font-size: 14px; font-weight: 600; color: var(--ink); }
  .amenity-detail { font-size: 12px; color: var(--muted); margin-top: 2px; }

  /* ── EXPLORE GRID (home) ── */
  #explore { background: var(--bg); }
  .explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; }
  .explore-card {
    display: flex; flex-direction: column;
    background: var(--bg-card); border: 1px solid var(--border);
    text-decoration: none; color: inherit; overflow: hidden;
    transition: box-shadow 0.5s var(--ease-expo), transform 0.5s var(--ease-expo), border-color 0.45s var(--ease-soft);
  }
  .explore-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); border-color: var(--border-lt); }
  .explore-media {
    width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
    filter: saturate(0.94);
    transition: transform 0.7s var(--ease-expo), filter 0.5s var(--ease-soft);
  }
  .explore-card:hover .explore-media { transform: scale(1.05); filter: saturate(1.06); }

  /* Four-up trainer tile. Each pane clips its own image so the hover zoom
     can't bleed into a neighbouring pane. */
  .explore-mosaic {
    width: 100%; aspect-ratio: 4/3;
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    gap: 2px; background: var(--border);
    /* The card is a column flexbox, so this tile's automatic minimum height
       would resolve to the intrinsic height of the four photos and override
       aspect-ratio entirely. Both declarations are load-bearing. */
    flex: none; min-height: 0;
  }
  .mosaic-pane { display: block; overflow: hidden; min-width: 0; min-height: 0; }
  .mosaic-pane img {
    width: 100%; height: 100%; display: block;
    /* The tiles are already cut to 4:3, so cover is a no-op here rather than a
       second crop on top of the deliberate one. */
    object-fit: cover; object-position: center;
    filter: saturate(0.94);
    transition: transform 0.7s var(--ease-expo), filter 0.5s var(--ease-soft);
  }
  .explore-card:hover .mosaic-pane img { transform: scale(1.05); filter: saturate(1.06); }
  .explore-body { padding: 26px 24px 28px; display: flex; flex-direction: column; flex: 1; }
  /* The card's inner elements are spans (only phrasing content is valid inside
     an <a>), so they need explicit block display for the spacing to apply. */
  .explore-name {
    display: block;
    font-family: var(--font-display); font-weight: 700;
    font-size: 25px; letter-spacing: 0.02em; color: var(--ink);
    margin-bottom: 8px; transition: color 0.35s var(--ease-soft);
  }
  .explore-card:hover .explore-name { color: var(--accent-deep); }
  .explore-desc { display: block; font-size: 13.5px; color: var(--muted); line-height: 1.65; flex: 1; }
  .explore-link {
    display: block;
    margin-top: 18px; font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-deep);
  }
  .explore-link::after { content: " →"; }
  @media (max-width: 980px) { .explore-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 520px) { .explore-grid { grid-template-columns: 1fr; } }

  /* ── REVIEWS ── */
  #reviews { background: var(--bg-alt); }
  .reviews-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 64px; }
  .review-card {
    background: var(--bg-card); padding: 42px 38px;
    border: 1px solid var(--border); position: relative;
    transition: box-shadow 0.5s var(--ease-expo), transform 0.5s var(--ease-expo);
  }
  .review-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
  .review-stars { color: var(--accent); font-size: 15px; letter-spacing: 3px; margin-bottom: 18px; }
  .review-text { font-size: 16px; line-height: 1.75; color: var(--ink-mid); margin-bottom: 24px; }
  .review-author { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
  .review-author::before { content: '—  '; color: var(--accent); }

  /* ── DAY PASS SECTION ── */
  #daypass { background: var(--dark); padding: clamp(96px, 11vw, 148px) 0; text-align: center; }
  #daypass .section-label { color: var(--accent-lt); }
  #daypass .section-title { color: var(--bg); }
  #daypass .section-body { color: rgba(244,241,237,0.58); margin: 0 auto 48px; }
  .daypass-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
    max-width: 820px; margin: 0 auto 56px; text-align: left;
  }
  .step { padding: 30px; background: rgba(244,241,237,0.045); border: 1px solid rgba(244,241,237,0.09); transition: background 0.4s var(--ease-soft); }
  .step:hover { background: rgba(244,241,237,0.07); }
  .step-num { font-family: var(--font-display); font-weight: 700; font-size: 46px; color: rgba(214,167,82,0.32); line-height: 1; }
  .step-title { font-weight: 700; font-size: 15px; color: var(--bg); margin: 6px 0; letter-spacing: 0.01em; }
  .step-text { font-size: 13px; color: rgba(244,241,237,0.48); line-height: 1.6; }
  .daypass-form-wrap {
    max-width: 520px; margin: 0 auto;
    background: var(--bg); padding: 44px; box-shadow: var(--shadow-lg);
  }
  .daypass-form-title {
    font-family: var(--font-display); font-weight: 700; font-size: 30px;
    color: var(--ink); margin-bottom: 24px; letter-spacing: 0.02em;
  }
  .form-fields { display: flex; flex-direction: column; gap: 12px; }
  .form-fields input {
    padding: 15px 16px; font-size: 15px; font-family: var(--font-body);
    background: var(--white); border: 1px solid var(--border);
    outline: none; width: 100%; color: var(--ink);
    transition: border-color 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
  }
  .form-fields input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(138,106,28,0.12); }
  .btn-submit {
    background: var(--dark); color: var(--white);
    padding: 17px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    border: none; cursor: pointer; font-family: var(--font-body);
    width: 100%; transition: background 0.4s var(--ease-soft); margin-top: 4px;
  }
  .btn-submit:hover { background: var(--accent-deep); }
  .form-note { font-size: 11px; color: var(--muted); margin-top: 16px; text-align: center; }
  .form-note a { color: var(--ink-mid); }

  /* ── CONTACT ── */
  #contact { background: var(--bg-alt); }
  .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
  .contact-block { display: flex; flex-direction: column; gap: 30px; }
  .contact-item { display: flex; gap: 18px; align-items: flex-start; }
  .contact-icon { font-size: 18px; width: 36px; flex-shrink: 0; padding-top: 2px; }
  .contact-info-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; }
  .contact-info-value { font-size: 15px; color: var(--ink); }
  .contact-info-value a { color: var(--ink); text-decoration: none; transition: color 0.3s var(--ease-soft); }
  .contact-info-value a:hover { color: var(--accent); }
  .hours-table { width: 100%; border-collapse: collapse; }
  .hours-table td { padding: 12px 0; font-size: 14px; }
  .hours-table td:first-child { color: var(--muted); width: 160px; }
  .hours-table td:last-child { color: var(--ink); font-weight: 600; }
  .hours-table tr { border-bottom: 1px solid var(--border); }
  .contact-ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
  .btn-dark {
    background: var(--dark); color: var(--white);
    padding: 15px 28px; font-size: 12px; font-weight: 700;
    letter-spacing: 0.16em; text-transform: uppercase;
    text-decoration: none; transition: background 0.4s var(--ease-soft); flex: 1; text-align: center;
  }
  .btn-dark:hover { background: var(--accent-deep); }

  /* ── FOOTER ── */
  footer {
    background: var(--dark-deep); border-top: 1px solid rgba(255,255,255,0.06);
    padding: 52px clamp(24px, 5vw, 56px) 40px;
  }
  .footer-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 20px;
  }
  .footer-logo { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: 0.1em; color: var(--bg); }
  .footer-links { display: flex; gap: 26px; flex-wrap: wrap; }
  .footer-links a { font-size: 12px; color: rgba(244,241,237,0.44); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.3s var(--ease-soft); }
  .footer-links a:hover { color: var(--accent-lt); }
  .footer-social { display: flex; gap: 14px; align-items: center; }
  .footer-social a { color: rgba(244,241,237,0.5); display: inline-flex; transition: color 0.3s var(--ease-soft), transform 0.35s var(--ease-expo); }
  .footer-social a:hover { color: var(--accent-lt); transform: translateY(-2px); }
  .footer-bottom {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .footer-copy { font-size: 12px; color: rgba(244,241,237,0.32); }
  .footer-credit { font-size: 12px; color: rgba(244,241,237,0.34); }
  .footer-credit a { color: rgba(244,241,237,0.62); text-decoration: none; border-bottom: 1px solid rgba(244,241,237,0.2); padding-bottom: 1px; transition: color 0.3s var(--ease-soft), border-color 0.3s var(--ease-soft); }
  .footer-credit a:hover { color: var(--accent-lt); border-color: var(--accent-lt); }
  .footer-copy a { color: inherit; text-decoration: none; }

  /* ── MOBILE MENU ── */
  .mobile-menu {
    display: none; position: fixed; inset: 0; z-index: 99;
    /* Matches the dark nav — a light overlay under a dark bar looked like a
       different site. */
    background: var(--dark); flex-direction: column;
    align-items: center; justify-content: center; gap: 30px;
    padding-top: var(--nav-h);
  }
  .mobile-menu.open { display: flex; }
  .mobile-menu a {
    font-family: var(--font-display); font-weight: 700; font-size: 42px; letter-spacing: 0.04em;
    color: var(--bg); text-decoration: none; transition: color 0.3s var(--ease-soft);
  }
  .mobile-menu a:hover { color: var(--accent-lt); }

  /* ── SVG ICONS ── */
  svg.ico {
    stroke: var(--accent); stroke-width: 1.6; fill: none;
    stroke-linecap: round; stroke-linejoin: round; display: block;
  }
  .class-icon svg.ico   { width: 30px; height: 30px; }
  .amenity-icon svg.ico { width: 24px; height: 24px; }
  .contact-icon svg.ico { width: 20px; height: 20px; }
  .insurance-note svg.ico { width: 20px; height: 20px; display: inline-block; vertical-align: -4px; margin-right: 4px; }

  /* ── REVIEWS AGGREGATE ── */
  .reviews-aggregate {
    display: flex; align-items: center; gap: 26px;
    margin-top: 56px; padding: 30px 34px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
  }
  .agg-score { font-family: var(--font-display); font-weight: 700; font-size: 76px; line-height: 0.9; color: var(--accent-deep); }
  .agg-stars { color: var(--accent); font-size: 20px; letter-spacing: 3px; }
  .agg-meta { font-size: 14px; color: var(--ink-mid); margin-top: 6px; }
  .agg-meta a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
  .agg-meta a:hover { text-decoration: underline; }
  .reviews-more {
    display: inline-block; color: var(--accent-deep); text-decoration: none;
    font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    border-bottom: 1px solid transparent; padding-bottom: 3px; transition: border-color 0.35s var(--ease-soft);
  }
  .reviews-more:hover { border-color: var(--accent-deep); }

  /* ── MEDIA / GALLERY (assets pending) ── */
  #media { background: var(--bg); }
  .media-intro { max-width: 580px; margin-bottom: 48px; }
  .video-frame {
    position: relative; width: 100%; aspect-ratio: 16/9;
    background: var(--dark); overflow: hidden; border: 1px solid var(--border);
  }
  .video-frame video, .video-frame iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
  .gallery-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px;
  }
  .gallery-grid img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border: 1px solid var(--border); }
  @media (max-width: 600px) { .gallery-grid { grid-template-columns: repeat(2, 1fr); } }

  /* ── SCROLL REVEAL (JS-driven) ── */
  [data-reveal] { opacity: 0; transform: translateY(30px); }
  [data-reveal].is-visible { opacity: 1; transform: none;
    transition: opacity 0.85s var(--ease-expo), transform 0.9s var(--ease-expo); }

  /* ── ANIMATIONS ── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes heroDrift {
    from { transform: scale(1.06) translate3d(0, 0, 0); }
    to   { transform: scale(1.12) translate3d(0, -1.5%, 0); }
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 1200px) {
    nav { padding: 0 24px; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
  }
  @media (max-width: 900px) {
    section { padding: 76px 0; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .plans-grid, .classes-intro, .training-layout, .amenities-intro, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
    .classes-grid { grid-template-columns: repeat(2, 1fr); }
    .paid-grid { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: 1fr; }
    .daypass-steps { grid-template-columns: 1fr; }
    .footer-row, .footer-bottom { flex-direction: column; text-align: center; justify-content: center; }
    #daypass-banner { padding: 22px 24px; }
    .contact-ctas { flex-direction: column; }
  }
  @media (max-width: 600px) {
    .classes-grid { grid-template-columns: 1fr; }
    .paid-grid { grid-template-columns: 1fr; }
    .amenities-list { grid-template-columns: 1fr; }
    .plan-card, .review-card { padding: 38px 28px; }
    .daypass-form-wrap { padding: 32px 24px; }
  }

  /* ── MULTI-PAGE HELPERS ── */
  /* accent-lt on the dark bar: the deep bronze only reaches 3.35:1 there. */
  .nav-links a.active { color: var(--accent-lt); }
  .section-first { padding-top: clamp(128px, 15vw, 168px); }
  .cta-band { background: var(--dark); text-align: center; padding: clamp(84px, 10vw, 120px) 0; }
  .cta-band .section-label { color: var(--accent-lt); }
  .cta-band .section-title { color: var(--bg); }
  .cta-band .section-body { color: rgba(244,241,237,0.58); margin: 0 auto 34px; }
  .cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

  /* ── AMENITIES FEATURE ROWS ── */
  .amenities-features { display: flex; flex-direction: column; }
  .feature {
    display: grid; grid-template-columns: 1fr 1fr; gap: 68px; align-items: center;
    padding: clamp(48px, 6vw, 76px) 0; border-top: 1px solid var(--border);
  }
  .feature:first-child { border-top: none; }
  .feature.reverse .feature-media { order: 2; }
  .feature-media img {
    width: 100%; object-fit: cover; display: block; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
  }
  .fm-single  { aspect-ratio: 4/3; }
  .fm-portrait { aspect-ratio: 3/4; max-height: 540px; width: auto; max-width: 100%; margin: 0 auto; }
  .fm-lead    { aspect-ratio: 16/10; }
  .fm-row2    { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  .fm-row2 img { aspect-ratio: 16/10; }
  .fm-trio    { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .fm-trio img { aspect-ratio: 3/4; }
  .fm-duo     { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .fm-duo img { aspect-ratio: 1/1; }
  .feature-index {
    font-family: var(--font-display); font-weight: 600; font-size: 17px;
    color: var(--accent); letter-spacing: 0.18em;
  }
  .feature-name {
    font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 54px);
    line-height: 1; letter-spacing: -0.005em; color: var(--ink); margin: 10px 0 18px;
  }
  .feature-desc { font-size: 16px; line-height: 1.75; color: var(--ink-mid); max-width: 480px; }
  .feature-detail {
    margin-top: 18px; font-size: 12px; color: var(--accent-deep); font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase;
  }
  @media (max-width: 820px) {
    .feature { grid-template-columns: 1fr; gap: 28px; padding: 44px 0; }
    .feature.reverse .feature-media { order: 0; }
    .fm-portrait { max-height: 420px; }
  }

  /* ── AMENITIES LIGHTBOX ── */
  .lb-zoomable { cursor: zoom-in; }
  /* display:flex would silently override the hidden attribute's UA display:none. */
  .lb-overlay[hidden] { display: none; }
  .lb-overlay {
    /* Above the chat widget (2147483001) — otherwise the launcher and its
       greeting bubble float on top of the enlarged photo. */
    position: fixed; inset: 0; z-index: 2147483100;
    background: rgba(12,13,15,0.9);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(16px, 4vw, 48px);
    opacity: 0; transition: opacity 0.25s var(--ease-soft);
  }
  .lb-overlay.open { opacity: 1; }
  .lb-figure {
    margin: 0; max-width: min(1100px, 92vw);
    display: flex; flex-direction: column; align-items: center; gap: 12px;
  }
  .lb-img { max-width: 100%; max-height: 80vh; object-fit: contain; box-shadow: 0 30px 90px rgba(0,0,0,0.55); }
  .lb-caption { font-size: 13px; letter-spacing: 0.05em; color: rgba(244,241,237,0.72); text-align: center; }
  .lb-close, .lb-prev, .lb-next {
    position: absolute; border: 0; border-radius: 50%;
    background: rgba(255,255,255,0.1); color: #fff; cursor: pointer;
    display: grid; place-items: center;
    transition: background 0.2s var(--ease-soft);
  }
  .lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255,255,255,0.22); }
  .lb-close { top: 18px; right: 22px; width: 44px; height: 44px; font-size: 26px; line-height: 1; }
  .lb-prev, .lb-next { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: 30px; line-height: 1; }
  .lb-prev { left: 18px; }
  .lb-next { right: 18px; }
  body.lb-lock { overflow: hidden; }
  @media (max-width: 600px) { .lb-prev, .lb-next { width: 40px; height: 40px; } }

  /* ── PERSONAL TRAINERS ── */
  #trainers { background: var(--bg-card); border-top: 1px solid var(--border); }
  .trainers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-top: 48px; }
  .trainer-card { display: flex; flex-direction: column; }
  .trainer-photo {
    width: 100%; aspect-ratio: 3/4; object-fit: cover; object-position: top center;
    display: block; border: 1px solid var(--border);
    transition: box-shadow 0.5s var(--ease-expo), transform 0.5s var(--ease-expo), filter 0.5s var(--ease-soft);
    filter: saturate(0.96);
  }
  .trainer-card:hover .trainer-photo { box-shadow: var(--shadow-md); transform: translateY(-4px); filter: saturate(1.05); }
  .trainer-name {
    font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: 0.01em;
    color: var(--ink); margin: 20px 0 4px;
  }
  .trainer-focus {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--accent-deep); font-weight: 600; margin-bottom: 12px;
  }
  .trainer-bio { font-size: 14px; line-height: 1.7; color: var(--ink-mid); }
  .trainer-cred {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--muted); margin-top: 10px;
  }
  @media (max-width: 900px) { .trainers-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; } }
  @media (max-width: 520px) { .trainers-grid { grid-template-columns: 1fr; } }

  /* ── SCROLL REVEAL ──
     The hidden state is gated on .js-reveal, which script.js adds to <html>
     only once it has successfully tagged the elements. If the script is slow,
     blocked, or fails outright, this rule never applies and the page renders
     in full rather than blank below the hero. */
  html.js-reveal .will-reveal {
    opacity: 0; transform: translateY(30px); will-change: opacity, transform;
  }
  html.js-reveal .will-reveal.is-revealed { opacity: 1; transform: none; }

  /* ── REDUCED MOTION ── */
  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
    .hero-photo { animation: none; }
    html.js-reveal .will-reveal { opacity: 1 !important; transform: none !important; }
  }