/* self-hosted webfonts */
/* bebas-neue-latin-400-normal */
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/bebas-neue-latin-400-normal.woff2) format('woff2'), url(fonts/bebas-neue-latin-400-normal.woff) format('woff');
}/* montserrat-latin-400-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(fonts/montserrat-latin-400-normal.woff2) format('woff2'), url(fonts/montserrat-latin-400-normal.woff) format('woff');
}/* montserrat-latin-500-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(fonts/montserrat-latin-500-normal.woff2) format('woff2'), url(fonts/montserrat-latin-500-normal.woff) format('woff');
}/* montserrat-latin-600-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(fonts/montserrat-latin-600-normal.woff2) format('woff2'), url(fonts/montserrat-latin-600-normal.woff) format('woff');
}/* montserrat-latin-700-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(fonts/montserrat-latin-700-normal.woff2) format('woff2'), url(fonts/montserrat-latin-700-normal.woff) format('woff');
}/* montserrat-latin-800-normal */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-display: swap;
  font-weight: 800;
  src: url(fonts/montserrat-latin-800-normal.woff2) format('woff2'), url(fonts/montserrat-latin-800-normal.woff) format('woff');
}
/* ============================================================
   URBAN FITNESS ATLANTIS — DESIGN SYSTEM
   ------------------------------------------------------------
   All brand values live in :root. To rebrand from the official
   logo, change --brand / --brand-ink only — every component
   inherits from these tokens.
   ============================================================ */

:root {
  /* --- Brand ---
     Green is the primary CTA and the hierarchy colour; gold is reserved
     for micro-interactions — hover glow, focus rings, carousel dots, the
     scroll hint and the reel play badge. The Urban Glow section wash stays
     golden, as the style guide specifies it by name. */
  --brand:       #99BA37;   /* Primary CTA + hierarchy */
  --brand-dim:   #86A32F;   /* hover state */
  --brand-ink:   #0B0B0B;   /* text that sits on --brand */
  --accent:      #D4AF37;   /* Gold — micro interactions only */
  --ember:       #ff5c2b;   /* error state */

  /* --- Neutrals --- */
  --bg:          #0B0B0B;   /* Obsidian Black */
  --bg-2:        #121212;   /* one step up from the page */
  --surface:     #1A1A1A;   /* Carbon Gray — cards */
  --surface-2:   #242424;   /* card hover */
  --line:        #2E2E2E;   /* Steel Gray — borders */
  --line-soft:   rgba(255, 255, 255, 0.08);

  /* --- Type --- */
  --text:        #EAEAEA;   /* Platinum — body copy */
  --text-strong: #FFFFFF;   /* Electric White — headlines */
  --text-soft:   #9A9A9A;
  --font-head:   "Bebas Neue", "Haettenschweiler", "Arial Narrow", sans-serif;
  --font-body:   "Montserrat", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;

  /* --- Spacing scale --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 7rem;

  /* --- Radius scale (guide: 12px cards) --- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill: 999px;

  /* --- Elevation --- */
  --shadow:    0 18px 50px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.7);
  --glow:      0 0 0 1px rgba(212, 175, 55, 0.30), 0 16px 40px rgba(212, 175, 55, 0.13);

  --max: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ============ BASE ============ */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Bebas Neue carries the oversized display headlines. It is caps-only and
   ships one weight, so h1/h2 sit at 400 — asking for bold would make the
   browser synthesise a smeared fake. h3 drops to Montserrat so card titles
   stay readable at small sizes and the display face keeps its impact. */
h1, h2 {
  margin: 0 0 0.5em;
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--text-strong);
}
h3 {
  margin: 0 0 0.5em;
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.005em;
  color: var(--text-strong);
}
h1 { font-size: clamp(3rem, 9vw, 6.5rem); }
h2 { font-size: clamp(2rem, 4.6vw, 3.5rem); }
h3 { font-size: 1.08rem; }

p { margin: 0 0 var(--sp-2); }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand); text-decoration: none; transition: color 0.2s var(--ease); }
a:hover { color: var(--text); }

blockquote { margin: 0; }
address { font-style: normal; }

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

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

.skip-link {
  position: absolute;
  left: -9999px; top: 0; z-index: 200;
  padding: var(--sp-2) var(--sp-3);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 800;
}
.skip-link:focus { left: 0; }

.accent { color: var(--brand); }
.muted  { color: var(--text-soft); }

/* ============ BUTTONS ============ */
.btn {
  --btn-bg: var(--brand);
  --btn-fg: var(--brand-ink);
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.95rem 2rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 2px solid var(--btn-bg);
  border-radius: var(--r-pill);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;              /* Manrope Bold */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease),
              border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.btn:hover {
  background: var(--brand-dim);
  border-color: var(--brand-dim);
  color: var(--brand-ink);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(212, 175, 55, 0.28);
}
.btn:active { transform: translateY(0); }

.btn-outline {
  --btn-bg: transparent;
  --btn-fg: var(--text);
  border-color: var(--line);
  backdrop-filter: blur(6px);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--text);
  color: var(--text);
  box-shadow: none;
}

.btn-lg    { padding: 1.15rem 2.5rem; font-size: 0.94rem; }
.btn-sm    { padding: 0.62rem 1.3rem; font-size: 0.74rem; letter-spacing: 0.08em; font-weight: 600; }
.btn-block { display: flex; width: 100%; }

.round-btn {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.round-btn:hover { border-color: var(--accent); background: var(--surface-2); }

/* ============ PHOTO PLACEHOLDERS ============
   Every .ph is a slot for real photography. Swap the element for an
   <img>/<video> — the parent already handles sizing and radius. */
.ph {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.02) 0 10px, transparent 10px 20px),
    linear-gradient(150deg, var(--surface-2), var(--bg-2) 70%);
  overflow: hidden;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 30% 20%, rgba(212, 175, 55, 0.06), transparent 70%);
}
.ph > span {
  position: relative;
  z-index: 1;
  max-width: calc(100% - 1.5rem);      /* never overflow the card */
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-pill);
  background: rgba(11, 11, 11, 0.85);
  color: var(--text);                  /* was --text-soft: too faint to read */
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  overflow-wrap: anywhere;
}

/* ============ HEADER ============ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 11, 0.82);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line-soft);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.site-header.scrolled {
  background: rgba(11, 11, 11, 0.96);
  border-bottom-color: var(--line);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}

.logo { display: flex; align-items: center; gap: 0.7rem; color: var(--text); }
.logo:hover { color: var(--text); }
.logo-mark {
  display: block;
  width: 42px; height: 42px;
  border-radius: 50%;          /* the badge artwork is circular */
  object-fit: cover;
  flex-shrink: 0;
}
.logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.logo-text strong {
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.logo-text em {
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--brand);
}

.site-nav { display: flex; align-items: center; gap: var(--sp-4); }
.nav-links { display: flex; align-items: center; gap: var(--sp-3); }
.nav-links a {
  position: relative;
  color: var(--text-soft);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 100%; height: 2px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--text); }

.nav-cta { display: flex; align-items: center; gap: 0.6rem; }

.nav-toggle {
  display: none;
  width: 46px; height: 42px;
  background: none;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.bars, .bars::before, .bars::after {
  display: block;
  width: 20px; height: 2px;
  margin: 0 auto;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ============ HERO ============ */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: calc(100svh - 68px);
  overflow: hidden;
}
.hero-media {
  position: absolute;
  inset: -12% 0 -12% 0;   /* extra height for parallax travel */
  will-change: transform;
}
.ph-hero { height: 100%; }
.hero-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The banner is a portrait shot of the floor; 35% landed on ceiling once the
     frame went tall. 50% keeps the equipment and members in the visible band. */
  object-position: center 50%;
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background:
    /* Left-to-right is the dominant layer: near-solid black behind the headline,
       clearing to the right so the gym floor and the members stay readable. */
    linear-gradient(90deg,
      rgba(11, 11, 11, 0.94) 0%,
      rgba(11, 11, 11, 0.91) 28%,
      rgba(11, 11, 11, 0.78) 62%,
      rgba(11, 11, 11, 0.12) 100%),
    /* Top and bottom carry only what the header and the section seam need —
       the old 0.95 bottom flattened the left-to-right fall-off. */
    linear-gradient(180deg,
      rgba(11, 11, 11, 0.35) 0%,
      rgba(11, 11, 11, 0) 30%,
      rgba(11, 11, 11, 0) 68%,
      rgba(11, 11, 11, 0.6) 100%);
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-7) clamp(1rem, 4vw, 2.5rem) var(--sp-6);
}
.hero h1 { margin-bottom: var(--sp-3); }
.hero-lede {
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--text-soft);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-4);
}
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.trust-strip li { display: flex; align-items: center; gap: 0.9rem; }
.trust-strip li:not(:last-child)::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brand);
}

.scroll-hint {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  margin-left: -21px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-soft);
  animation: bob 2.4s ease-in-out infinite;
}
.scroll-hint:hover { color: var(--accent); border-color: var(--accent); }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(7px); }
}

/* ============ SECTION SHELL ============ */
.section {
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-7) clamp(1rem, 4vw, 2.5rem);
}
.section-head { max-width: 60ch; margin-bottom: var(--sp-5); }
.section-head .sub { margin: 0; color: var(--text-soft); font-size: 1.05rem; }
.center-head { margin-inline: auto; text-align: center; }
.section-cta { margin: var(--sp-4) 0 0; text-align: center; }

/* Fade-up reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }

/* ============ VALUE GRID ============ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
}
.value {
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.value:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); background: var(--surface-2); box-shadow: var(--glow); }
.value-icon,
.audience-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg-2);
  color: var(--brand);
}
.value-icon svg,
.audience-icon svg { width: 26px; height: 26px; }
.audience-icon { width: 46px; height: 46px; margin-bottom: var(--sp-2); }
.audience-icon svg { width: 22px; height: 22px; }
.value p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* ============ ABOUT ============ */
.about {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.about-media {
  aspect-ratio: 4 / 5;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
}
.ph-portrait { height: 100%; }
.about-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;        /* 4:3 source into a 4:5 frame */
  object-position: center 45%;
}
.about-copy .lead-p { font-size: 1.2rem; color: var(--text); }
.about-copy p { color: var(--text-soft); }

.counters {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin: var(--sp-4) 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.counters dt {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.counters dt i { font-style: normal; font-size: 0.9rem; letter-spacing: 0; }
.counters dd {
  margin: 0;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ============ FACILITIES ============ */
/* Style guide: alternating image / text rows. */
.facility-rows { display: grid; gap: var(--sp-6); }
.facility-row {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.facility-row.reversed .facility-row-media { order: 2; }
.facility-row-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.facility-row-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.facility-row:hover .facility-row-media img { transform: scale(1.04); }
.facility-index {
  margin: 0 0 var(--sp-1);
  font-family: var(--font-head);
  font-size: 2.2rem;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.facility-row-copy h3 { font-size: 1.5rem; }
.facility-row-copy p { margin: 0; color: var(--text-soft); }

/* ============ RECOVERY ============ */
.recovery-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.recovery-media {
  aspect-ratio: 4 / 3;        /* matches the supplied photo — 4:5 cropped it badly */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.recovery-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.recovery-list { display: grid; gap: var(--sp-3); }
.recovery-list li {
  padding-left: var(--sp-3);
  border-left: 2px solid var(--brand);
}
.recovery-list h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.recovery-list p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

/* ============ COMMUNITY (vertical reel wall) ============ */
.reel-wall {
  display: grid;
  grid-template-columns: repeat(5, 1fr);   /* ten stills = two clean rows */
  gap: var(--sp-2);
}
.reel {
  position: relative;
  aspect-ratio: 3 / 4;           /* matches the supplied reel stills */
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.reel:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); box-shadow: var(--glow); }
.reel > a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
}
.reel video,
.reel img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.reel-play {
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(11, 11, 11, 0.72);
  color: var(--accent);
  font-size: 0.6rem;
}

/* ============ TRAINERS ============ */

/* ============ TRAINING ============ */
.training-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: var(--sp-3);
}
.train-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.train-card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); box-shadow: var(--glow); }
.train-card p { flex: 1; color: var(--text-soft); font-size: 0.95rem; margin-bottom: var(--sp-3); }
.train-card.featured {
  background:
    radial-gradient(ellipse 80% 100% at 100% 0%, rgba(212, 175, 55, 0.09), transparent 60%),
    var(--surface-2);
  border-color: var(--brand);
}
.train-tag {
  align-self: flex-start;
  margin-bottom: var(--sp-2);
  padding: 0.25rem 0.75rem;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ============ TRANSFORMATIONS ============ */
.scroller {
  margin-inline: calc(clamp(1rem, 4vw, 2.5rem) * -1);
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.scroller::-webkit-scrollbar { display: none; }
.transform-row { display: flex; gap: var(--sp-3); padding-bottom: var(--sp-2); }
.transform {
  flex: 0 0 clamp(270px, 32%, 360px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.transform:hover { border-color: var(--accent); box-shadow: var(--glow); }
.transform-visual { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--line); }
.ph-ba { aspect-ratio: 3 / 4; }
.ph-ba > span { font-size: 0.62rem; }
.ph-after { background: linear-gradient(150deg, #23290f, #14170c 70%); }
.ph-after > span { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.transform-body { padding: var(--sp-3); }
.transform-goal {
  margin-bottom: 0.35rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand);
}
.transform-stat {
  margin: 0.1rem 0 0.9rem;
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 400;
  letter-spacing: 0.01em;
}
.transform-stat span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.transform blockquote {
  color: var(--text-soft);
  font-size: 0.94rem;
  border-left: 2px solid var(--brand);
  padding-left: var(--sp-2);
}

.scroller-nav {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: var(--sp-4);
}
.scroller-nav .btn { margin-left: auto; }

/* ============ TESTIMONIALS ============ */
.carousel { position: relative; }
.carousel-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: var(--sp-2);
}
.carousel-track::-webkit-scrollbar { display: none; }
.testimonial {
  flex: 0 0 clamp(300px, 62%, 640px);
  scroll-snap-align: center;
  display: grid;
  /* Small round thumb + copy, the way a review platform shows a reviewer.
     These are 64px profile avatars — a large portrait frame only upscales them. */
  grid-template-columns: 56px 1fr;
  gap: var(--sp-3);
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.testimonial-portrait {
  align-self: start;
  width: 56px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg);
}
/* Stand-in when a reviewer has no usable profile photo. Fills the same frame
   so the carousel keeps its rhythm instead of collapsing a card. */
.testimonial-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--bg-2), var(--bg) 75%);
  border: 1px solid var(--line);
  border-radius: inherit;
  color: var(--brand);
  font-family: var(--font-head);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  line-height: 1;
  user-select: none;
}
.testimonial-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;   /* square thumb — avatars are already centred */
}
.testimonial-copy { display: flex; flex-direction: column; }
.testimonial blockquote {
  flex: 1;
  position: relative;
  padding-top: var(--sp-3);
  font-size: 1.05rem;
  line-height: 1.6;
}
.testimonial blockquote::before {
  content: "\201C";
  position: absolute;
  top: -0.6rem; left: -0.4rem;
  font-family: Georgia, serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--brand);
  opacity: 0.22;
}
.rating { margin: 0; color: var(--brand); letter-spacing: 0.24em; font-size: 0.86rem; }
.testimonial footer {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}
.testimonial footer b { display: block; font-size: 0.92rem; }
.testimonial footer small { color: var(--text-soft); font-size: 0.78rem; }

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}
.dots { display: flex; gap: 0.45rem; }
.dots button {
  width: 8px; height: 8px;
  padding: 0;
  background: var(--line);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease), width 0.2s var(--ease);
}
.dots button[aria-selected="true"] { background: var(--accent); width: 22px; border-radius: var(--r-pill); }

/* ============ MEMBERSHIP ============ */
.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}
.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease);
}
.member-card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); box-shadow: var(--glow); }
.member-card > p { color: var(--text-soft); font-size: 0.94rem; }
.member-card.featured {
  background: var(--surface-2);
  border-color: var(--brand);
  box-shadow: var(--shadow);
}
.badge {
  position: absolute;
  top: -0.7rem; left: var(--sp-3);
  padding: 0.25rem 0.8rem;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: var(--r-pill);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.mini-list {
  flex: 1;
  margin: var(--sp-2) 0 var(--sp-3);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--line);
}
.mini-list li {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  color: var(--text-soft);
}
.mini-list li::before { content: "→"; position: absolute; left: 0; color: var(--brand); }
.reassurance {
  margin: var(--sp-4) 0 0;
  text-align: center;
  color: var(--text-soft);
  font-size: 0.95rem;
}

/* ============ TRIAL BANNER ============ */
.trial-banner {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 62vh;
  overflow: hidden;
  text-align: center;
}
.banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banner-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(11,11,11,0.55), rgba(11,11,11,0.92)),
    linear-gradient(180deg, var(--bg), transparent 25%, transparent 75%, var(--bg));
}
.banner-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: var(--sp-6) clamp(1rem, 4vw, 2.5rem);
}
.banner-content h2 { margin-bottom: var(--sp-2); }
.banner-content p { color: var(--text-soft); font-size: 1.1rem; }
.banner-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

/* ============ LOCATION ============ */
.location-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}
.map-embed {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  margin-bottom: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.location-details { display: grid; gap: var(--sp-3); }
.detail h3 {
  margin-bottom: 0.4rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.detail address, .detail p { color: var(--text-soft); margin: 0; }
.hours { margin: 0; }
.hours > div {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--line);
}
.hours > div:last-child { border-bottom: 0; }
.hours dt { color: var(--text-soft); font-size: 0.88rem; }
.hours dd { margin: 0; font-weight: 700; font-size: 0.9rem; }
.contact-list li { margin-bottom: 0.35rem; }

/* ============ CONTACT ============ */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(1.75rem, 4vw, 3.5rem);
  background:
    radial-gradient(ellipse 60% 90% at 0% 0%, rgba(212, 175, 55, 0.07), transparent 60%),
    var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.contact-copy > p { color: var(--text-soft); }
.ticks { margin: var(--sp-3) 0; }
.ticks li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 1.9rem;
  color: var(--text-soft);
}
.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 0.2rem;
  display: grid;
  place-items: center;
  width: 1.3rem; height: 1.3rem;
  background: var(--brand);
  color: var(--brand-ink);
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: 800;
}
.or-call { font-size: 0.95rem; color: var(--text-soft); }

.lead-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2) var(--sp-3);
  align-content: start;
}
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field-wide { grid-column: 1 / -1; }
.lead-form label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.lead-form input,
.lead-form select {
  width: 100%;
  padding: 0.85rem 0.95rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.lead-form input:focus, .lead-form select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);
}
.lead-form input[aria-invalid="true"] {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px rgba(255, 92, 43, 0.14);
}
.lead-form .btn { grid-column: 1 / -1; margin-top: 0.3rem; }
.form-status {
  grid-column: 1 / -1;
  margin: 0;
  min-height: 1.2rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--brand);
}
.form-status.error { color: var(--ember); }
.form-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-soft);
  text-align: center;
}

/* ============ FOOTER ============ */
.site-footer { background: #000000; border-top: 1px solid var(--line); }
.footer-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-5) clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line);
}
.footer-cta p {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-5) clamp(1rem, 4vw, 2.5rem);
}
.footer-brand .logo { margin-bottom: var(--sp-2); }
.footer-brand p { max-width: 30ch; font-size: 0.92rem; }
.footer-col h3 {
  margin-bottom: var(--sp-2);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--brand);
}
.footer-col li { margin-bottom: 0.45rem; font-size: 0.9rem; }
.footer-col a { color: var(--text-soft); }
.footer-col a:hover { color: var(--brand); }
.socials { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.socials a {
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}
.socials a:hover { border-color: var(--accent); color: var(--brand); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-3) clamp(1rem, 4vw, 2.5rem) var(--sp-4);
  border-top: 1px solid var(--line);
}
.footer-base p { margin: 0; font-size: 0.84rem; }
.legal { display: flex; gap: var(--sp-3); }
.legal a { color: var(--text-soft); font-size: 0.84rem; }

/* ============ FAQ ============ */
.faq { display: grid; gap: 0.75rem; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color 0.2s var(--ease);
}
.faq details[open] { border-color: var(--brand); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 1.15rem 1.4rem;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 700;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
  color: var(--brand);
}
.faq details[open] summary::after { content: "–"; }
.faq details p {
  margin: 0;
  padding: 0 1.4rem 1.35rem;
  max-width: 70ch;
  color: var(--text-soft);
}

/* ============ FORM FIELD ERRORS ============ */
.field-error {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ember);
}

/* ============ LEGAL PAGES ============ */
.legal-page { max-width: 760px; }
.legal-title { font-size: clamp(2.4rem, 6vw, 3.8rem); margin-bottom: var(--sp-3); }
.legal-page h2 {
  margin-top: var(--sp-4);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.legal-page p { color: var(--text-soft); }
.legal-note {
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-3);
  background: rgba(255, 92, 43, 0.08);
  border: 1px solid var(--ember);
  border-radius: var(--r-sm);
  color: var(--text);
  font-size: 0.92rem;
}
.legal-page + .site-footer .footer-base { border-top: 0; }

/* ============ STICKY MOBILE CTA ============ */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 90;
  display: none;
  gap: 0.5rem;
  padding: 0.65rem 0.8rem calc(0.65rem + env(safe-area-inset-bottom));
  background: rgba(11, 11, 11, 0.95);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  transition: transform 0.35s var(--ease);
}
.sticky-cta.hidden { transform: translateY(120%); }
.sticky-cta .btn { flex: 1; padding: 0.85rem 0.6rem; font-size: 0.72rem; letter-spacing: 0.06em; }
.sticky-cta .btn-outline { background: var(--surface); }

/* ============ RESPONSIVE ============ */
/* ============ HOME-ONLY SECTIONS ============
   Audiences, Steps and Explore appear on the home page only. */

/* Full-bleed photo behind the whole section. The scrim is deliberately
   heavy — the card photos are the ones meant to read, this is texture. */
.photo-band { position: relative; overflow: hidden; }
.photo-band-bg { position: absolute; inset: 0; }
.photo-band-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.photo-band-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,11,11,0.88) 22%, rgba(11,11,11,0.88) 78%, var(--bg) 100%);
}
.photo-band-inner { position: relative; z-index: 1; }
/* For artwork that is already low-key — the standard scrim would erase it. */
.photo-band.subtle .photo-band-scrim {
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(11,11,11,0.58) 20%, rgba(11,11,11,0.58) 80%, var(--bg) 100%);
}

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.audience {
  padding: var(--sp-4) var(--sp-3);
  background: rgba(26, 26, 26, 0.88);   /* lets the section photo show through */
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.audience:hover { transform: translateY(-6px) scale(1.01); background: rgba(36, 36, 36, 0.94); border-color: var(--accent); box-shadow: var(--glow); }
.audience h3 { margin: 0 0 var(--sp-1); font-size: 1.02rem; }
.audience p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
/* Panel behind each step — the band under this section uses the subtle scrim,
   so the copy needs its own ground to stay readable. Matches .audience. */
.step {
  position: relative;
  padding: var(--sp-4) var(--sp-3);
  background: rgba(26, 26, 26, 0.5);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-top: 2px solid var(--brand);
  border-radius: var(--r-md);
}
.step-num {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--font-head);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--brand);
}
.step h3 { margin: 0 0 var(--sp-1); font-size: 1.1rem; }
.step p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.explore-card {
  position: relative;
  display: block;
  height: 100%;
  padding: var(--sp-4) var(--sp-3) var(--sp-5);
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.explore-card:hover {
  transform: translateY(-6px) scale(1.01);
  border-color: var(--accent);
  background: rgba(36, 36, 36, 0.94);
  color: var(--text);
  box-shadow: var(--glow);
}
.explore-card h3 { margin: 0 0 var(--sp-1); font-size: 1.02rem; }
.explore-card p { margin: 0; color: var(--text-soft); font-size: 0.95rem; }
.explore-go {
  position: absolute;
  left: var(--sp-3);
  bottom: var(--sp-3);
  color: var(--accent);
  font-size: 1.1rem;
  transition: transform 0.2s var(--ease);
}
.explore-card:hover .explore-go { transform: translateX(6px); }


/* ============ INTERNAL PAGE BANNER ============
   Same treatment as the hero, about a third the height. */

.page-banner {
  position: relative;
  display: grid;
  align-items: center;
  min-height: clamp(390px, calc(30vh + 200px), 500px);
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.page-banner-media { position: absolute; inset: 0; }
.page-banner-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
/* Per-page framing override — the default 38% suits the wide banners; the
   about photo is composed centre and loses its subject at that crop. */
.page-banner[data-page="about"] .page-banner-img { object-position: center center; }
.page-banner-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11,11,11,0.72) 0%, rgba(11,11,11,0.6) 55%, rgba(11,11,11,0.92) 100%),
    linear-gradient(90deg, rgba(11,11,11,0.92) 0%, rgba(11,11,11,0.45) 65%, rgba(11,11,11,0.2) 100%);
}
.page-banner-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--sp-5) clamp(1rem, 4vw, 2.5rem);
}
.page-banner h1 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(2.4rem, 6vw, 3.9rem);
  font-weight: 400;
  line-height: 1.03;
  letter-spacing: 0.01em;
}
.page-banner-tagline {
  max-width: 54ch;
  margin: var(--sp-2) 0 0;
  color: var(--text-soft);
  font-size: 1.12rem;
}


/* ============ SIGNATURE: URBAN GLOW ============
   Style guide: "Every section begins with a subtle golden light bleeding
   into a matte black background." Painted full-bleed by a pseudo-element
   because .section is max-width constrained and centred. */
.section { position: relative; }
.section::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 280px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse 55% 100% at 50% 0%, rgba(212, 175, 55, 0.095), transparent 72%);
}
/* the photo bands carry their own scrim — a second wash muddies them */
.photo-band-inner::before { display: none; }

/* ============ HOME VARIANTS ============
   These re-present sections that also exist on an internal page. Each one
   is deliberately a different shape from its full version, so the home page
   never reads as the same block shown twice. */

/* --- Membership: three price-forward cards --- */
.plan-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-3);
  align-items: stretch;
}
.plan-preview {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5) var(--sp-3) var(--sp-4);
  text-align: center;
  background: rgba(26, 26, 26, 0.88);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.plan-preview:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); box-shadow: var(--glow); }
.plan-preview.featured { background: rgba(36, 36, 36, 0.94); border-color: var(--brand); box-shadow: var(--shadow); }
.plan-preview .badge { left: 50%; transform: translateX(-50%); }
.plan-preview h3 {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.9rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.plan-preview > p { flex: 1; margin: 0 0 var(--sp-2); color: var(--text-soft); font-size: 0.94rem; }
.plan-price {
  margin: 0 0 var(--sp-3) !important;
  flex: none !important;
  color: var(--brand) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* --- Facilities: four-column mosaic, per the reference image ---
   Four equal columns; the first and last zones take a double-width tile.
   Square corners and hairline gutters here rather than the 12px card
   radius — the reference is explicit and the tiles read as one wall. */
.fac-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.fac-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--bg);   /* matches what the tile art is flattened onto */
}
.fac-tile.wide {
  grid-column: span 2;
  aspect-ratio: 2 / 1;      /* two columns wide, same row height */
}
.fac-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s var(--ease);
}
.fac-tile:hover img { transform: scale(1.04); }
.fac-tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 3.5rem 1.25rem 1.05rem;
  background: linear-gradient(180deg, transparent, rgba(11, 11, 11, 0.82) 70%);
  color: var(--text-strong);
  font-family: var(--font-head);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  pointer-events: none;
}

/* --- Recovery: one horizontal band of chips --- */
.recovery-strip {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 3rem);
  background:
    radial-gradient(ellipse 70% 120% at 0% 0%, rgba(212, 175, 55, 0.10), transparent 62%),
    var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.recovery-strip-copy .section-head { margin-bottom: var(--sp-3); }
.recovery-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.recovery-chips li {
  padding: 0.6rem 1.1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 600;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.recovery-chips li:hover { border-color: var(--accent); color: var(--brand); }

/* --- Tabs --- */
.tabs { margin-bottom: var(--sp-4); }
.tab-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto var(--sp-4);
  padding: 0.3rem;
  background: rgba(11, 11, 11, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.62rem 1.25rem;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.tab:hover { color: var(--text-strong); }
.tab[aria-selected="true"] { background: var(--accent); color: var(--bg); }
.tab-count {
  padding: 0.1rem 0.42rem;
  background: rgba(255, 255, 255, 0.09);
  border-radius: var(--r-pill);
  font-size: 0.68rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.tab[aria-selected="true"] .tab-count { background: rgba(11, 11, 11, 0.18); }
/* The panel is focusable so keyboard users land in the content after the
   tablist; it should not draw a ring when reached by mouse. */
.tab-panel:focus { outline: none; }
.tab-panel:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.tab-panel[hidden] { display: none; }

/* --- Member videos: poster cards that open the clip in a dialog ---
   The clips are portrait phone footage and large, so the section ships two
   posters and fetches nothing until someone presses play. */
.video-wall {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
  max-width: 560px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.video-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  padding: 0;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.video-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.video-card:hover,
.video-card:focus-visible { border-color: var(--accent); box-shadow: var(--glow); }
.video-card:hover img,
.video-card:focus-visible img { transform: scale(1.05); }

/* Play badge: a CSS triangle in a disc, so there is no icon file to ship. */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  background: rgba(11, 11, 11, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.video-play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;                     /* optical centre — a triangle sits left-heavy */
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-left: 15px solid var(--text-strong);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}
.video-card:hover .video-play,
.video-card:focus-visible .video-play {
  background: var(--accent);
  border-color: var(--accent);
}
.video-card:hover .video-play::after,
.video-card:focus-visible .video-play::after { border-left-color: var(--bg); }

.video-meta {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) 0.8rem 0.7rem;
  background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, 0.88) 65%);
  text-align: left;
}
.video-meta b {
  color: var(--text-strong);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.video-meta small { color: var(--text-soft); font-size: 0.72rem; font-variant-numeric: tabular-nums; }

/* --- Video dialog --- */
.video-modal {
  width: auto;
  max-width: none;
  padding: 0;
  overflow: visible;
  background: #000;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.video-modal::backdrop { background: rgba(4, 4, 4, 0.9); }
/* Inside the frame rather than overhanging the corner: the video fills nearly
   the whole viewport on a phone, where an overhang would be clipped away. */
.video-modal .modal-close { top: 10px; right: 10px; }
.video-modal video {
  display: block;
  /* Portrait clip: bound it by height so it never runs off the screen, and let
     the width follow from the 9:16 the file already is. */
  width: auto;
  height: min(84vh, 780px);
  max-width: calc(100vw - 2rem);
  border-radius: inherit;
}
.modal-close {
  position: absolute;
  top: -14px;
  right: -14px;
  z-index: 1;
  width: 40px;
  height: 40px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--text-strong);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.modal-close:hover { background: var(--surface-2); border-color: var(--accent); }

/* --- Testimonials: static quote wall, no carousel --- */
/* Three reviews on screen, the rest an arrow away. Same start-snap scroller as
   the coach carousel: cards step one at a time and the dots only count the
   positions the track can actually reach. */
.quote-carousel { --quote-gap: var(--sp-3); }
.quote-track {
  gap: var(--quote-gap);
  /* Room for the card's hover lift — overflow-x on the track makes overflow-y
     scrollable too, so a -6px translate would otherwise be clipped. */
  padding-top: 10px;
  margin: 0;
  list-style: none;
}
.quote-card {
  flex: 0 0 calc((100% - 2 * var(--quote-gap)) / 3);
  scroll-snap-align: start;
}
.quote-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.quote-card:hover { transform: translateY(-6px) scale(1.01); border-color: var(--accent); box-shadow: var(--glow); }
.quote-card blockquote { flex: 1; margin: var(--sp-2) 0 var(--sp-3); font-size: 0.98rem; line-height: 1.6; }
.quote-card footer { padding-top: var(--sp-2); border-top: 1px solid var(--line); }
.quote-card footer b { display: block; font-size: 0.9rem; }
.quote-card footer small { color: var(--text-soft); font-size: 0.78rem; }

/* --- Trainers: display headline + a carousel of tall portrait cards ---
   There are more coaches than fit across the row, so the reference's four-up
   strip becomes a scroller that still shows four at a time. Cards start-snap
   rather than centre-snap: with several visible at once, centring one of them
   would leave the row sitting off its own edges.
   Card structure follows the supplied reference — a rounded portrait, then a
   centred two-line "Train with <name>" caption. Everything else about the
   coach is in the profile dialog, so the strip stays a clean row of faces. */
.coach-carousel { --coach-gap: var(--sp-2); }
.coach-track { gap: var(--coach-gap); }
/* /training has room for the whole team at once, so the same cards go in a
   grid there instead of a scroller. */
.coach-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4) var(--coach-gap, var(--sp-2));
  margin: 0;
  padding: 0;
  list-style: none;
}
.coach-card {
  /* Cards are sized off the gap rather than a bare number so the row stays
     exactly four (then three, then two) across as the gutter changes. */
  flex: 0 0 calc((100% - 3 * var(--coach-gap)) / 4);
  scroll-snap-align: start;
  /* Lets the caption scale with the card instead of the viewport — the number
     of visible cards changes at every breakpoint, so vw units drift. */
  container-type: inline-size;
  background: var(--bg);
}
/* The whole card is the control that opens the profile. */
.coach-open {
  display: block;
  width: 100%;
  padding: 0 0 var(--sp-2);
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.coach-photo {
  position: relative;
  display: block;
  aspect-ratio: 2 / 3;
  overflow: hidden;
  margin-bottom: var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--bg-2);
}
.coach-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Every portrait is trimmed so the gym's logo ring starts on row 0. Anchor
     the crop to the top and the ring meets the top of the thumbnail on every
     card; a centred crop shaved a few pixels off it instead. */
  object-position: center top;
  transition: transform 0.5s var(--ease), filter 0.35s var(--ease);
}
/* Hover: the portrait pushes in slightly and a veil brings up the prompt.
   Everything animates inside the photo frame, so the caption never shifts. */
.coach-hover {
  position: absolute;
  inset: auto 0 0;
  padding: var(--sp-4) 0.75rem 0.9rem;
  color: var(--accent);
  background: linear-gradient(180deg, rgba(11, 11, 11, 0), rgba(11, 11, 11, 0.9) 70%);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.coach-hover::after { content: " \203A"; }
.coach-open:hover .coach-photo img,
.coach-open:focus-visible .coach-photo img { transform: scale(1.06); filter: saturate(1.05); }
.coach-open:hover .coach-hover,
.coach-open:focus-visible .coach-hover { opacity: 1; transform: translateY(0); }
.coach-open:hover .coach-photo,
.coach-open:focus-visible .coach-photo { box-shadow: var(--glow); }
.coach-open:hover .coach-name,
.coach-open:focus-visible .coach-name { color: var(--accent); }
/* Stand-in for a coach whose portrait hasn't been supplied yet. Sized off the
   frame rather than a fixed rem so it reads the same in the tall card and the
   wider dialog. */
.coach-monogram {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--bg-2), var(--bg) 75%);
  color: var(--brand);
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: 0.06em;
  line-height: 1;
  user-select: none;
}
/* The caption from the reference: two lines, same size and weight, centred.
   Not the condensed display face — the reference sets it in the body sans. */
.coach-name {
  display: block;
  margin: 0;
  padding-inline: 0.5rem;
  color: var(--text-strong);
  font-size: 1.05rem;                       /* fallback where cqw is unsupported */
  font-size: clamp(0.92rem, 8cqw, 1.3rem);
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 1.28;
  text-transform: uppercase;
  transition: color 0.2s var(--ease);
}
/* Smaller than the name it introduces — em keeps the ratio as the container
   query resizes the caption. */
.coach-name-lead {
  display: block;
  margin-bottom: 0.1em;
  font-size: 0.68em;
  letter-spacing: 0.09em;
}
/* --- Coach profile dialog ---
   A portrait column beside the copy, rather than the print card's single
   centred stack. The photo is the reason the dialog is worth opening, so it
   gets a full-height column of its own; the copy reads left-aligned in
   sentence case, which a twelve-item skills list needs and all-caps refuses to
   give. Gold stays on the labels only, as everywhere else on the site. */
.coach-modal {
  width: min(940px, calc(100vw - 2rem));
  max-width: none;
  max-height: 86vh;
  max-height: 86svh;
  padding: 0;
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}
.coach-modal::backdrop { background: rgba(4, 4, 4, 0.82); }
.coach-modal-inner {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  max-height: inherit;
}
.coach-modal-media {
  position: relative;
  /* Keeps the portrait from collapsing when a coach has little copy; taller
     copy stretches it instead. */
  min-height: 440px;
  overflow: hidden;
  background: var(--bg);
}
.coach-modal-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.coach-modal-body {
  position: relative;
  min-height: 0;                /* lets the grid row cap it, so this scrolls */
  padding: var(--sp-4);
  overflow-y: auto;
}

.coach-eyebrow {
  margin: 0;
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.coach-modal-name {
  margin: 0.35rem 0 0;
  font-size: clamp(2.1rem, 5vw, 3rem);
  line-height: 0.92;
}
.coach-modal-tag {
  margin: 0.5rem 0 0;
  color: var(--text-soft);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}

/* The two facts worth pulling out of the prose. The years get the display
   face; the certification does not — one of them runs to two clauses and the
   display face at that size would wrap into a mess. */
.coach-stats {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3) var(--sp-4);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.coach-stats dt {
  color: var(--text-soft);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coach-stats dd {
  margin: 0.3rem 0 0;
  color: var(--text);
  font-size: 0.88rem;
  line-height: 1.45;
}
.coach-stat-lead dd {
  color: var(--text-strong);
  font-family: var(--font-head);
  font-size: 1.6rem;
  line-height: 1;
  white-space: nowrap;
}
/* A coach with no intro and no achievements starts straight into the chips,
   so the first block needs the same air the prose would have given it. */
.coach-modal-body > .coach-note { margin: var(--sp-3) 0 0; }

.coach-block { margin-top: var(--sp-3); }
.coach-block h4 {
  margin: 0 0 0.6rem;
  color: var(--accent);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.coach-note { margin: 0; font-size: 0.95rem; line-height: 1.65; }

/* The comma lists read as a wall of text in prose; as chips they are scannable
   and the long one stops dominating the dialog. */
.coach-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The source is one sentence, so every item after the first arrives lowercase.
   ::first-letter fixes only the opening character — text-transform: capitalize
   would title-case the lot and turn "HIIT" and "TRX" into "Hiit" and "Trx". */
.coach-chips li::first-letter { text-transform: uppercase; }
.coach-chips li {
  padding: 0.32rem 0.72rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  color: var(--text);
  font-size: 0.76rem;
  line-height: 1.35;
}

.coach-modal-cta { margin: var(--sp-4) 0 0; }
/* Sits inside the scrolling copy column rather than overhanging the corner,
   which is where .modal-close puts it by default. */
.coach-modal-close {
  top: var(--sp-2);
  right: var(--sp-2);
  width: 38px;
  height: 38px;
  background: var(--bg-2);
  font-size: 1.3rem;
}

/* Below this the portrait column squeezes the copy, so the profile stacks and
   the photo becomes a banner. The dialog keeps its height and the copy scrolls
   inside it, which leaves the close button where it was. */
@media (max-width: 820px) {
  .coach-modal { width: calc(100vw - 1.5rem); }
  .coach-modal-inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
  }
  .coach-modal-media { min-height: 0; aspect-ratio: 3 / 2; }
  .coach-modal-media img { object-position: center 20%; }
  .coach-modal-body { padding: var(--sp-3); }
  .coach-stats { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
}

@media (max-width: 1080px) {
  .coach-card { flex-basis: calc((100% - 2 * var(--coach-gap)) / 3); }
  .nav-links { gap: var(--sp-2); }
  .nav-links a { font-size: 0.74rem; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  /* The heavy left-to-right wash is desktop-only. Once the hero narrows the copy
     spans the full width, so keep the lighter scrim from here down. */
  .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(11, 11, 11, 0.92) 0%,
        rgba(11, 11, 11, 0.78) 45%,
        rgba(11, 11, 11, 0.5) 100%),
      linear-gradient(180deg,
        rgba(11, 11, 11, 0.4) 0%,
        rgba(11, 11, 11, 0.15) 30%,
        rgba(11, 11, 11, 0.7) 100%);
  }
  .nav-toggle { display: block; }
  .site-nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-2) clamp(1rem, 4vw, 2.5rem) var(--sp-3);
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav.open { display: flex; }
  .nav-links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-links a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
  .nav-links a::after { display: none; }
  .nav-cta { flex-direction: column; align-items: stretch; gap: 0.5rem; margin-top: var(--sp-2); }

  .about, .location-grid, .contact-wrap, .recovery-grid, .recovery-strip { grid-template-columns: 1fr; }
  .facility-row { grid-template-columns: 1fr; }
  .fac-mosaic { grid-template-columns: repeat(2, 1fr); }
  .reel-wall { grid-template-columns: repeat(3, 1fr); }
  .coach-card { flex-basis: calc((100% - var(--coach-gap)) / 2); }
  .coach-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-card { flex-basis: calc((100% - var(--quote-gap)) / 2); }
  .facility-row.reversed .facility-row-media { order: 0; }
  .recovery-media { max-width: 520px; }
  .about-media { max-width: 460px; }
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
  .facility-wide { grid-column: span 2; }
  .testimonial { flex: 0 0 min(90%, 560px); }
}

@media (max-width: 640px) {
  /* One card with the next one peeking, so the row reads as scrollable. */
  .coach-card { flex-basis: 74%; }
  .quote-card { flex-basis: 86%; }
  .tab { padding: 0.55rem 0.9rem; font-size: 0.66rem; letter-spacing: 0.08em; }
  .page-banner { min-height: 370px; }
  .page-banner-tagline { font-size: 1rem; }
  .steps { gap: var(--sp-3); }
  .step-num { font-size: 1.6rem; }
  html { scroll-padding-top: 72px; }
  h1 { font-size: clamp(2.6rem, 13vw, 4rem); }
  .hero { min-height: auto; padding-bottom: var(--sp-4); }
  .hero-content { padding-top: var(--sp-6); }
  .hero-actions .btn { width: 100%; }
  .trust-strip { font-size: 0.68rem; gap: 0.6rem; }
  .trust-strip li { gap: 0.6rem; }
  .scroll-hint { display: none; }

  .section { padding-block: var(--sp-6); }
  .facility-grid { grid-template-columns: 1fr; }
  .facility-wide { grid-column: span 1; }
  .counters { grid-template-columns: 1fr 1fr; }
  .lead-form { grid-template-columns: 1fr; }
  .transform { flex: 0 0 82%; }
  .testimonial { grid-template-columns: 48px 1fr; gap: var(--sp-2); }
  .testimonial-portrait { width: 48px; }
  .facility-rows { gap: var(--sp-5); }
  .reel-wall { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .fac-tile-label { font-size: 0.92rem; padding: 2.5rem 0.9rem 0.8rem; }
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-3); }
  .footer-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .footer-cta .btn { width: 100%; }

  .sticky-cta { display: flex; }
  body { padding-bottom: 4.6rem; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .scroll-hint { animation: none; }
  .hero-media { transform: none !important; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}