/* ============================================================
   Grayton Beach Fitness — design system v2
   "30A modern coastal luxury": near-white architectural canvas,
   the logo's azure blue + a Gulf sea-green, one deep-ocean
   "After Dark" moment per page. Single family: Schibsted Grotesk.
   See DESIGN.md.
   ============================================================ */

/* ---------- Font ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Canvas — sea-light near-white, a whisper cool. No cream, no pure white. */
  --bg: oklch(99% 0.004 220);
  --surface: oklch(96.5% 0.012 210);
  --sky-wash: oklch(93.5% 0.022 205);

  /* Ink — deep slate-navy, the cool ocean dark for text */
  --ink: oklch(27% 0.035 245);
  --ink-soft: oklch(38% 0.03 240);
  --muted: oklch(47% 0.028 235);

  /* Brand blue — the logo azure, the workhorse (white text on it passes AA) */
  --primary: oklch(50% 0.135 248);
  --primary-deep: oklch(40% 0.11 250);
  --primary-bright: oklch(60% 0.145 250);

  /* Gulf sea-green — the single coastal secondary / visitor path */
  --sea: oklch(52% 0.088 196);
  --sea-deep: oklch(42% 0.078 197);
  --sea-bright: oklch(66% 0.10 191);

  /* Deep-ocean "After Dark" + footer */
  --dusk: oklch(23.5% 0.05 245);
  --dusk-panel: oklch(29% 0.055 242);
  --on-dusk: oklch(95.5% 0.012 220);
  --on-dusk-muted: oklch(80% 0.03 215);
  --line-dusk: oklch(37% 0.05 240);

  --line: oklch(90.5% 0.014 220);
  --line-soft: oklch(93.5% 0.01 220);

  --font: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Crisp, architectural radii — slightly squared vs. the old build */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --section: clamp(84px, 10vw, 152px);
  --gutter: clamp(20px, 4vw, 52px);
  --wrap: 1200px;

  /* Cool-tinted shadows so elevation reads like Gulf light, not gray */
  --shadow-card: 0 1px 2px oklch(27% 0.035 245 / 0.05), 0 14px 36px oklch(27% 0.035 245 / 0.08);
  --shadow-lift: 0 2px 4px oklch(27% 0.035 245 / 0.06), 0 24px 56px oklch(27% 0.035 245 / 0.12);
  --shadow-photo: 0 18px 50px oklch(27% 0.05 245 / 0.16);

  /* z-scale */
  --z-header: 40;
  --z-sheet: 50;
  --z-modal: 70;
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-optical-sizing: auto;
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 420;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--primary); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--primary-deep); }
:focus-visible { outline: 3px solid var(--primary-bright); outline-offset: 2px; border-radius: 3px; }
::selection { background: oklch(52% 0.088 196 / 0.22); }

h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.06; text-wrap: balance; font-weight: 720; letter-spacing: -0.02em; color: var(--ink); }
p { margin: 0 0 1em; max-width: 68ch; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
strong { font-weight: 680; }

.display {
  font-size: clamp(2.7rem, 6vw, 5rem);
  font-weight: 760;
  line-height: 0.98;
  letter-spacing: -0.032em;
}
.h-section { font-size: clamp(2rem, 3.6vw, 3.15rem); font-weight: 720; letter-spacing: -0.022em; line-height: 1.04; }
.h-title { font-size: 1.3rem; line-height: 1.25; font-weight: 640; letter-spacing: -0.01em; }
.lead { font-size: clamp(1.18rem, 1.9vw, 1.4rem); line-height: 1.5; font-weight: 420; color: var(--ink-soft); }
.small { font-size: 0.9rem; line-height: 1.5; }
.muted { color: var(--muted); }
.mark-blue { color: var(--primary); }
.mark-sea { color: var(--sea-deep); }

/* Refined kicker — a small-caps label with a short sea rule. Used sparingly
   (hero + After Dark only); never as per-section scaffolding. */
.hero-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--sea-deep); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 18px;
}
.hero-kicker::before {
  content: ""; width: 30px; height: 1.5px; background: var(--sea); flex: none; border-radius: 2px;
}

/* ---------- Layout ---------- */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.62); }
.section--surface { background: var(--surface); }
.section--dusk {
  background:
    radial-gradient(120% 90% at 82% -10%, var(--dusk-panel), transparent 60%),
    linear-gradient(180deg, var(--dusk), oklch(20% 0.045 248));
  color: var(--on-dusk);
}
.section--dusk h2, .section--dusk h3 { color: var(--on-dusk); }
.section--dusk p { color: var(--on-dusk-muted); }
.section--dusk a:not(.btn) { color: oklch(84% 0.07 200); }

.flow > * + * { margin-top: 1em; }
.center { text-align: center; }
.center p { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 52px; padding: 15px 32px;
  border-radius: var(--r-pill); border: none;
  font: inherit; font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.005em;
  text-decoration: none; cursor: pointer;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease,
              box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1), transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:active { transform: translateY(1px); transition-duration: 60ms; }
.btn--primary { background: var(--primary); color: #fff; }
.btn--primary:hover { background: var(--primary-deep); color: #fff; }
.btn--accent { background: var(--sea); color: #fff; }
.btn--accent:hover { background: var(--sea-deep); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid oklch(27% 0.035 245 / 0.28); }
.btn--ghost:hover { background: oklch(50% 0.135 248 / 0.07); color: var(--primary-deep); border-color: var(--primary); }
.btn--on-dusk { background: var(--on-dusk); color: var(--dusk); }
.btn--on-dusk:hover { background: #fff; color: var(--dusk); }
.btn .btn-kicker { display: block; font-size: 0.78rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.01em; transition: opacity 200ms ease; }
.btn--tall { flex-direction: column; gap: 3px; padding: 14px 30px; line-height: 1.18; text-align: left; align-items: flex-start; min-height: 64px; }

/* CTA delight — gentle lift + colour-tinted shadow, so the button rises toward
   you. Colour swaps above stay for reduced-motion; only the lift is gated. */
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover, .btn--primary:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px oklch(50% 0.135 248 / 0.34);
  }
  .btn--accent:hover, .btn--accent:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px oklch(52% 0.088 196 / 0.36);
  }
  .btn--on-dusk:hover, .btn--on-dusk:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px oklch(95% 0.012 220 / 0.26);
  }
  .btn--primary:active, .btn--accent:active, .btn--on-dusk:active {
    transform: translateY(0); box-shadow: none; transition-duration: 60ms;
  }
}

/* The hero two-door router — the site's signature CTA. A direction arrow that
   slides as if the door is opening toward the visitor. */
.btn--door { padding-right: 56px; }
.btn--door .door-arrow {
  position: absolute; right: 24px; top: 50%;
  transform: translateY(-50%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0.9;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--door:hover, .btn--door:focus-visible { transform: translateY(-3px); }
  .btn--door:hover .door-arrow, .btn--door:focus-visible .door-arrow { transform: translate(6px, -50%); }
  .btn--door:hover .btn-kicker, .btn--door:focus-visible .btn-kicker { opacity: 1; }
  .btn--door:active { transform: translateY(0); }
}

/* CTA delight — a soft band of sunlight crosses the colour CTAs on hover/focus:
   the sun-washed brand, made tactile. Plus a springier press. Colour buttons
   only (a white sheen needs a coloured ground); fully motion-gated. */
.btn--primary, .btn--accent { overflow: hidden; }
.btn--primary::before, .btn--accent::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 34%, oklch(100% 0 0 / 0.32) 50%, transparent 66%);
  transform: translateX(-130%); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .btn--primary:hover::before, .btn--primary:focus-visible::before,
  .btn--accent:hover::before, .btn--accent:focus-visible::before {
    animation: cta-sheen 720ms cubic-bezier(0.22, 1, 0.36, 1);
  }
  @keyframes cta-sheen {
    0%   { transform: translateX(-130%); opacity: 0; }
    16%  { opacity: 1; }
    100% { transform: translateX(130%); opacity: 0; }
  }
  /* Tactile press — a quick, springy settle on the colour CTAs. */
  .btn--primary:active, .btn--accent:active {
    transform: translateY(0) scale(0.978); box-shadow: none; transition-duration: 90ms;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: oklch(99% 0.004 220 / 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow 220ms ease, background 220ms ease;
}
.site-header.is-scrolled {
  box-shadow: 0 1px 0 var(--line), 0 10px 28px oklch(27% 0.035 245 / 0.07);
  background: oklch(99% 0.004 220 / 0.92);
}
.site-header.sheet-on { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }
.header-bar {
  display: flex; align-items: center; gap: 22px;
  min-height: 76px; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
}
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); margin-right: auto; }
.brand img { width: 44px; height: 44px; }
.brand-word { font-weight: 740; font-size: 1.14rem; line-height: 1.02; letter-spacing: -0.022em; }
.brand-word .fit { display: block; font-weight: 600; letter-spacing: 0.28em; font-size: 0.6rem; color: var(--sea-deep); text-transform: uppercase; margin-top: 3px; }
.site-nav { display: flex; gap: 2px; align-items: center; }
.site-nav a {
  text-decoration: none; color: var(--ink-soft); font-weight: 500; font-size: 0.97rem; letter-spacing: -0.005em;
  padding: 10px 13px; border-radius: var(--r-sm); transition: color 150ms ease, background 150ms ease;
}
.site-nav a:hover { background: oklch(50% 0.135 248 / 0.07); color: var(--primary-deep); }
.site-nav a[aria-current="page"] { color: var(--primary); font-weight: 640; }
.header-phone { white-space: nowrap; font-weight: 600; text-decoration: none; color: var(--ink); padding: 10px 8px; }
.header-phone:hover { color: var(--primary); }
.header-cta { min-height: 46px; padding: 11px 24px; font-size: 1rem; }
/* Mobile-only "Call" button — swaps in for the Join CTA on phones, where a
   tap-to-call is the higher-value action for this audience. */
.header-call { display: none; min-height: 46px; padding: 11px 18px; font-size: 1rem; gap: 0.42em; }
.header-call svg { width: 18px; height: 18px; }
.nav-toggle {
  display: none; background: none; border: 1.5px solid oklch(27% 0.035 245 / 0.28); border-radius: var(--r-sm);
  width: 50px; height: 50px; cursor: pointer; color: var(--ink); align-items: center; justify-content: center;
}

@media (max-width: 1160px) { .header-phone { display: none; } }

/* Narrow phones: claw back room so the Call button never crowds the wordmark. */
@media (max-width: 420px) {
  .header-bar { gap: 12px; padding-inline: 16px; }
  .brand { gap: 9px; }
  .brand img { width: 40px; height: 40px; }
  .brand-word { font-size: 1.04rem; }
  .header-call { padding: 11px 15px; }
}

/* Mobile sheet */
@media (max-width: 980px) {
  .site-nav, .header-phone { display: none; }
  .header-cta { display: none; }
  .header-call { display: inline-flex; }
  .nav-toggle { display: inline-flex; }
  .sheet-open { overflow: hidden; }
  .site-nav.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: fixed; inset: 76px 0 0 0; z-index: var(--z-sheet);
    background: var(--bg); padding: 14px var(--gutter) 32px; overflow: auto;
  }
  .site-nav.is-open a { font-size: 1.28rem; font-weight: 560; padding: 16px 10px; min-height: 48px; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--ink); }
  .site-nav.is-open a:hover { background: transparent; color: var(--primary); }
  .site-nav.is-open .sheet-phone { display: flex; align-items: center; gap: 8px; font-weight: 660; color: var(--primary); border-bottom: none; margin-top: 12px; }
}
@media (min-width: 981px) { .sheet-phone { display: none; } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-block: clamp(52px, 7vw, 116px) var(--section);
  background:
    radial-gradient(110% 80% at 88% -8%, oklch(66% 0.10 191 / 0.12), transparent 55%),
    radial-gradient(90% 70% at 6% 4%, oklch(60% 0.145 250 / 0.10), transparent 55%);
}
.hero .wrap { position: relative; z-index: 1; }
/* Daylight Gulf-water motion behind the hero — sunlit currents, masked away from
   the headline column so text stays crisp. Reduced-motion: never created (the
   static hero gradient above remains). */
.hero-water {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; display: block;
  -webkit-mask-image: radial-gradient(125% 138% at 70% 40%, #000 20%, rgba(0,0,0,0.52) 62%, transparent 100%);
  mask-image: radial-gradient(125% 138% at 70% 40%, #000 20%, rgba(0,0,0,0.52) 62%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) { .hero-water { display: none !important; } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .display { margin-bottom: 0.34em; }
.hero-doors { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero-fine { margin-top: 20px; }
.hero-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hero-collage img {
  border-radius: var(--r-lg); width: 100%; height: 100%; object-fit: cover;
  box-shadow: var(--shadow-photo);
}
.hero-collage .tall { grid-row: span 2; }
@media (max-width: 900px) { .hero-collage { max-width: 560px; } }

/* Inner-page hero */
.page-hero {
  position: relative;
  padding-block: clamp(48px, 6vw, 96px) clamp(30px, 4vw, 60px);
  background: radial-gradient(90% 90% at 92% -20%, oklch(66% 0.10 191 / 0.10), transparent 55%);
}
.page-hero .lead { margin-top: 12px; }

/* ---------- Fact strip ---------- */
.fact-strip { border-block: 1px solid var(--line); background: var(--surface); }
.fact-strip .wrap {
  display: flex; flex-wrap: wrap; gap: 14px 0; padding-block: 28px;
}
.fact-strip .fact {
  flex: 1 1 220px; padding-inline: 26px; border-left: 1px solid var(--line);
  font-size: 0.97rem; line-height: 1.45; margin: 0; color: var(--muted);
}
.fact-strip .fact:first-child { border-left: none; padding-left: 0; }
.fact-strip .fact strong { display: block; font-size: 1.32rem; font-weight: 740; color: var(--primary); letter-spacing: -0.02em; margin-bottom: 3px; }
/* Single-column: drop the vertical rules (they read as an awkward indented stripe when stacked). */
@media (max-width: 560px) {
  .fact-strip .wrap { gap: 18px 0; }
  .fact-strip .fact { border-left: none; padding-inline: 0; }
}

/* ---------- Chips (scannable tags) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 26px; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 17px; border-radius: var(--r-pill);
  background: oklch(99% 0.004 220 / 0.7); border: 1px solid var(--line);
  font-size: 0.95rem; font-weight: 500; color: var(--ink);
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--primary); flex: none; }
.chip--accent::before { background: var(--sea); }
.section--surface .chip { background: oklch(100% 0 0 / 0.6); }

/* ---------- Media & split sections ---------- */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split--wide-text { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
/* Media-left variant: photo sits on the left on desktop (via order, so DOM stays
   text-first for reading order); used to alternate split direction for rhythm. */
.split--media-left { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
@media (min-width: 901px) {
  .split--media-left > :first-child { order: 2; }
  .split--media-left > :last-child { order: 1; }
}
@media (max-width: 900px) { .split, .split--wide-text, .split--media-left { grid-template-columns: 1fr; } }
.photo { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
/* Crisp hairline ring on every framed photo — gallery cohesion across mixed sources. */
.photo::after, .feature-photo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px oklch(27% 0.035 245 / 0.08);
}
.photo--capped { max-width: 560px; }
.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.photo-pair .photo:last-child { margin-top: 40px; }

/* ---------- Feature band (asymmetric editorial composition) ---------- */
.feature-band { position: relative; }
.feature-photo { position: relative; margin: 0; border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-photo); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 11; }
.feature-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-xl);
  box-shadow: var(--shadow-lift); padding: clamp(26px, 3.2vw, 42px);
}
.feature-panel .chips { margin-bottom: 22px; }
.feature-panel > :last-child { margin-bottom: 0; }
@media (min-width: 901px) {
  .feature-band { margin-bottom: clamp(22px, 3vw, 40px); }
  .feature-photo img { aspect-ratio: 21 / 9; }
  .feature-panel {
    position: absolute; left: clamp(28px, 4vw, 56px); bottom: clamp(-40px, -3vw, -22px);
    max-width: 470px; margin: 0;
  }
}
@media (max-width: 900px) {
  .feature-panel { position: relative; margin: -36px clamp(8px, 4vw, 28px) 0; }
}

figure { margin: 0; }
figcaption { font-size: 0.9rem; color: var(--muted); padding-top: 10px; }
.section--dusk figcaption { color: var(--on-dusk-muted); }

/* ---------- Price cards ---------- */
.price-row { display: flex; flex-wrap: wrap; gap: 22px; align-items: stretch; }
.price-card {
  flex: 1 1 280px; max-width: 440px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 34px 30px 30px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: var(--shadow-card);
}
.section--surface .price-card { background: #fff; }
.price-card--featured { border: 1.5px solid var(--primary); box-shadow: var(--shadow-lift); position: relative; }
.price-card .plan { font-weight: 620; font-size: 1.06rem; }
.price-card .amount { font-size: clamp(2.7rem, 4.5vw, 3.5rem); font-weight: 770; line-height: 1; color: var(--primary); letter-spacing: -0.03em; }
.price-card .amount .per { font-size: 1.05rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.price-card--accent .amount { color: var(--sea-deep); }
.price-card--accent.price-card--featured { border-color: var(--sea); }
.price-card .terms { color: var(--muted); font-size: 0.95rem; line-height: 1.5; margin: 4px 0 16px; }
.price-card .btn { margin-top: auto; }
.badge {
  position: absolute; top: -13px; left: 28px;
  background: var(--primary); color: #fff; border-radius: var(--r-pill);
  font-size: 0.78rem; font-weight: 640; padding: 4px 13px; letter-spacing: 0.02em;
}
.price-card--accent .badge { background: var(--sea); }
.price-note { margin-top: 20px; }

/* ---------- Class list ---------- */
.class-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 56px; padding: 0; margin: 0; list-style: none; }
@media (max-width: 740px) { .class-list { grid-template-columns: 1fr; } }
.class-list li { border-bottom: 1px solid var(--line); padding: 18px 0 16px; }
.class-list .h-title { margin-bottom: 3px; }
.class-list p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* ---------- Team ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px; }
.team-card .photo { aspect-ratio: 1; max-width: 320px; }
.team-card h3 { margin: 16px 0 2px; font-size: 1.16rem; }
.team-card .creds { color: var(--sea-deep); font-weight: 620; font-size: 0.9rem; letter-spacing: -0.005em; }
.team-card p { font-size: 0.98rem; color: var(--muted); margin-top: 6px; }
.team-card--text .photo-fallback {
  aspect-ratio: 1; max-width: 320px; border-radius: var(--r-lg);
  background:
    radial-gradient(120% 120% at 30% 20%, var(--sky-wash), transparent 70%),
    var(--surface);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  font-size: 3rem; font-weight: 740; color: var(--primary); letter-spacing: -0.02em;
  box-shadow: inset 0 0 0 1px var(--line);
}
.team-card--text .photo-fallback .fb-soon { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.03em; color: var(--muted); }

/* ---------- After Dark ---------- */
.after-dark { position: relative; overflow: hidden; }
.after-dark .wrap { position: relative; z-index: 1; }
/* Signature motif: luminous 30A topographic contour lines behind the peak
   moment — the contours of the coast, not a wave cliché. */
.ad-topo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; transition: opacity 600ms ease;
  -webkit-mask-image: radial-gradient(125% 105% at 72% 42%, #000 26%, transparent 80%);
  mask-image: radial-gradient(125% 105% at 72% 42%, #000 26%, transparent 80%);
}
/* Overdrive: animated "living Gulf water" canvas supersedes the static SVG. */
.ad-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0; display: block;
  -webkit-mask-image: radial-gradient(125% 105% at 72% 42%, #000 22%, transparent 80%);
  mask-image: radial-gradient(125% 105% at 72% 42%, #000 22%, transparent 80%);
}
.after-dark.is-live .ad-topo { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js-anims .after-dark:not(.is-live) .ad-topo { animation: topo-drift 28s ease-in-out infinite alternate; }
}
@keyframes topo-drift { from { transform: translateX(-1.4%); } to { transform: translateX(1.4%); } }
@media (prefers-reduced-motion: reduce) {
  .ad-canvas { display: none !important; }
  .after-dark .ad-topo { opacity: 1 !important; }
}
.after-dark .split { align-items: center; }
.after-dark .photo { box-shadow: 0 24px 64px oklch(12% 0.04 250 / 0.6); border-radius: var(--r-xl); }
.after-dark .photo img { filter: brightness(0.66) saturate(0.9) contrast(1.02); }
.after-dark .ad-kicker {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--sea-bright); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 16px;
}
.after-dark .ad-kicker::before { content: ""; width: 30px; height: 1.5px; background: var(--sea-bright); border-radius: 2px; }
.after-dark .hours-inline { color: var(--on-dusk); font-weight: 560; }

/* ---------- Hours table ---------- */
.hours-table { border-collapse: collapse; width: 100%; max-width: 460px; }
.hours-table caption { text-align: left; font-weight: 660; font-size: 1.05rem; padding-bottom: 10px; }
.hours-table td, .hours-table th { text-align: left; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 420; }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.section--dusk .hours-table td, .section--dusk .hours-table th { border-color: var(--line-dusk); color: var(--on-dusk); }

/* ---------- FAQ accordions ---------- */
.faq-group { max-width: 760px; margin-bottom: 44px; }
.faq-group > h2 { font-size: 1.5rem; margin-bottom: 12px; }
details.faq { border-bottom: 1px solid var(--line); }
details.faq summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 20px 2px; font-weight: 600; font-size: 1.1rem; min-height: 48px; letter-spacing: -0.01em;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; flex-shrink: 0; width: 13px; height: 13px; position: relative;
  background:
    linear-gradient(var(--primary), var(--primary)) center/13px 1.8px no-repeat,
    linear-gradient(var(--primary), var(--primary)) center/1.8px 13px no-repeat;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}
details.faq[open] summary::after { transform: rotate(135deg); }
details.faq .faq-a { padding: 0 2px 22px; }
details.faq .faq-a p { margin-bottom: 0.6em; }

/* ---------- Footer ---------- */
.site-footer {
  background:
    radial-gradient(120% 100% at 88% 0%, var(--dusk-panel), transparent 55%),
    linear-gradient(180deg, var(--dusk), oklch(20% 0.045 248));
  color: var(--on-dusk-muted);
}
.site-footer a { color: var(--on-dusk); text-decoration: none; }
.site-footer a:hover { color: #fff; }
/* The footer address is a maps link — a subtle underline so it reads as clickable
   (a street address isn't self-evidently a link the way a phone or email is). */
.footer-addr { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: oklch(82% 0.03 220 / 0.45); }
.footer-addr:hover { text-decoration-color: currentColor; }
.footer-grid {
  display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: clamp(28px, 4vw, 60px);
  padding-block: clamp(56px, 6vw, 88px) 40px;
}
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-brand { display: flex; align-items: center; gap: 11px; color: var(--on-dusk); text-decoration: none; }
.footer-brand img { width: 40px; height: 40px; }
.site-footer h2 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--on-dusk); font-weight: 640; margin-bottom: 16px; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer address { font-style: normal; line-height: 1.75; }
.footer-fine {
  border-top: 1px solid var(--line-dusk); padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between;
  font-size: 0.86rem; color: var(--on-dusk-muted);
}

/* ---------- Breadcrumb ---------- */
.crumbs { font-size: 0.92rem; color: var(--muted); padding-top: 22px; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- Steps (how it works) ---------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 44px); counter-reset: step; padding: 0; margin: 0; list-style: none; }
@media (max-width: 740px) { .steps { grid-template-columns: 1fr; } }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: oklch(50% 0.135 248 / 0.10); color: var(--primary); font-weight: 740; font-size: 1.2rem;
  letter-spacing: -0.02em; margin-bottom: 14px;
}
.steps h3 { font-size: 1.14rem; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--muted); font-size: 0.98rem; }

/* ---------- App buttons ---------- */
.app-buttons { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Map ---------- */
.map-frame { border: 0; width: 100%; height: 440px; border-radius: var(--r-xl); box-shadow: var(--shadow-card); }

/* ---------- Checkout modal (embedded ClubReady) ---------- */
dialog.checkout {
  width: min(620px, 100vw - 24px);
  border: none; border-radius: var(--r-xl); padding: 0;
  box-shadow: 0 28px 90px oklch(12% 0.04 245 / 0.5);
  overflow: hidden;
}
dialog.checkout::backdrop { background: oklch(23.5% 0.05 245 / 0.62); backdrop-filter: blur(2px); }
.checkout-head {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.checkout-head img { width: 32px; height: 32px; flex-shrink: 0; }
.checkout-title { min-width: 0; margin-right: auto; }
.checkout-title strong {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; font-size: 1.02rem; line-height: 1.25;
}
.checkout-title span { display: block; font-size: 0.82rem; color: var(--muted); }
.checkout-newtab {
  font-size: 0.88rem; font-weight: 600; white-space: nowrap;
  color: var(--primary); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm);
}
.checkout-newtab:hover { background: var(--surface); }
.checkout-close {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-sm);
  border: none; background: none; cursor: pointer; color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center;
}
.checkout-close:hover { background: var(--surface); }
.checkout-body { position: relative; background: #fff; }
.checkout-frame { display: block; width: 100%; height: min(74vh, 760px); border: 0; }
.checkout-loading {
  position: absolute; inset: 0; display: flex; flex-direction: column; gap: 14px;
  align-items: center; justify-content: center; background: #fff;
  color: var(--muted); font-size: 0.95rem;
}
.checkout-loading[hidden] { display: none; }
.checkout-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--surface); border-top-color: var(--primary);
}
@media (prefers-reduced-motion: no-preference) {
  .checkout-spinner { animation: checkout-spin 800ms linear infinite; }
}
@keyframes checkout-spin { to { transform: rotate(360deg); } }
@media (max-width: 640px) {
  dialog.checkout {
    width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0;
  }
  .checkout-frame { height: calc(100dvh - 70px); }
}

/* ---------- Motion (gated) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.js-anims .hero-stagger > * {
    animation: rise-in 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
  html.js-anims .hero-collage img {
    animation: photo-in 860ms cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: calc(200ms + var(--i, 0) * 100ms);
  }
  /* Scroll reveals move, never hide: content stays readable in any renderer.
     Transform-only (no opacity gating) so a missed observer never blanks a section. */
  html.js-anims .reveal { transform: none; transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1); }
  html.js-anims .reveal.pre { transform: translateY(28px); }
  html.js-anims .after-dark .reveal.pre { transform: translateY(42px); }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes photo-in { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .nav-toggle { display: none; }
}

/* ============================================================
   "30A field journal" — editorial direction (sitewide, scoped to body.journal).
   Frank Ruhl Libre display serif over Schibsted body, masthead datelines,
   an Est. 2000 emblem seal, drop-cap story, captioned photo modules,
   a big-serif pull quote. Palette + water kept.
   ============================================================ */
@font-face {
  font-family: "Frank Ruhl Libre";
  src: url("../fonts/frank-ruhl-var.woff2") format("woff2");
  font-weight: 400 900; font-style: normal; font-display: swap;
}

.journal { --serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif; }
.journal h1, .journal h2, .journal .serif { font-family: var(--serif); font-weight: 700; letter-spacing: -0.014em; }
.journal .h-section { font-family: var(--serif); font-weight: 700; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.04; letter-spacing: -0.018em; }

/* Masthead dateline */
.j-dateline { display: flex; align-items: center; gap: 18px; font-family: var(--font); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--sea-deep); }
.j-dateline .r { flex: 1; height: 1px; background: var(--line); }
.j-dateline .end { color: var(--muted); white-space: nowrap; }
.j-dateline--dark { color: var(--sea-bright); }
.j-dateline--dark .r { background: var(--line-dusk); }
.j-dateline--dark .end { color: var(--on-dusk-muted); }
@media (max-width: 480px) { .j-dateline { gap: 12px; font-size: 0.64rem; } }

/* Hero (dark masthead) */
.jhero { position: relative; overflow: hidden; padding-block: clamp(34px, 4vw, 60px) clamp(64px, 8vw, 120px); }
.jhero .wrap { position: relative; z-index: 1; }

/* "Dawn over the Gulf" — the masthead lands in night, then first light breaks:
   a warm horizon glow rises behind the headline and settles, screen-blended so it
   lifts the dusk water like real dawn. The dusk bg + contour water stay underneath;
   this only adds warmth. Reduced-motion shows the settled state, no animation. */
.jhero-dawn {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    /* first light rising on the right, behind the portrait — dawn over the Gulf */
    radial-gradient(66% 72% at 80% 104%, oklch(85% 0.115 74 / 0.40) 0%, oklch(69% 0.13 48 / 0.20) 34%, transparent 64%),
    /* a low horizon band of warm light across the water */
    radial-gradient(150% 52% at 52% 118%, oklch(80% 0.10 62 / 0.24) 0%, transparent 58%),
    /* faint cool sky lift, so the warmth reads as morning not sunset */
    radial-gradient(120% 92% at 38% 126%, oklch(62% 0.09 250 / 0.15) 0%, transparent 54%);
  mix-blend-mode: screen;
}
@media (prefers-reduced-motion: no-preference) {
  .jhero-dawn {
    opacity: 0; transform: translateY(46px) scale(1.04);
    animation: dawn-break 2900ms cubic-bezier(0.16, 1, 0.3, 1) 140ms forwards,
               dawn-breathe 9s ease-in-out 3300ms infinite;
  }
  @keyframes dawn-break {
    from { opacity: 0; transform: translateY(46px) scale(1.04); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes dawn-breathe {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.92; }
  }
}
.jhero .j-dateline { margin-bottom: clamp(30px, 4.5vw, 60px); }
.jhero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(34px, 5vw, 72px); align-items: center; }

/* Night-photo hero — full-bleed photo of the gym lit up at night, with a
   left-weighted scrim so the headline reads and the glowing logo shows right. */
.jhero--photo { position: relative; isolation: isolate; min-height: clamp(460px, 72vh, 640px); display: flex; align-items: center; padding-block: clamp(40px, 6vw, 72px); }
.jhero--photo .jhero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(95deg, oklch(8% 0.03 255 / 0.95) 0%, oklch(8% 0.03 255 / 0.89) 34%, oklch(8% 0.03 255 / 0.60) 57%, oklch(8% 0.03 255 / 0.22) 80%, oklch(8% 0.03 255 / 0.06) 100%),
    linear-gradient(to top, oklch(8% 0.03 255 / 0.58) 0%, transparent 50%),
    url("../img/gym-night.jpg");
  background-size: cover; background-position: 74% 24%; background-repeat: no-repeat;
}
.jhero--photo .wrap { position: relative; z-index: 1; width: 100%; }
.jhero--photo .jhero-photo-content { max-width: 660px; }
@media (max-width: 700px) {
  .jhero--photo { min-height: clamp(440px, 80vh, 580px); }
  .jhero--photo .jhero-bg {
    background-image:
      linear-gradient(180deg, oklch(9% 0.03 255 / 0.66) 0%, oklch(9% 0.03 255 / 0.78) 100%),
      url("../img/gym-night.jpg");
    background-position: 70% 22%;
  }
}
@media (max-width: 900px) { .jhero-grid { grid-template-columns: 1fr; gap: 40px; } }
.j-headline { font-family: var(--serif); font-weight: 700; font-size: clamp(2.7rem, 5.4vw, 4.6rem); line-height: 1.02; letter-spacing: -0.012em; color: var(--on-dusk); text-wrap: balance; margin: 0 0 0.5em; }
.j-headline em { font-style: normal; font-weight: 600; color: var(--sea-bright); }
.j-lead { font-size: clamp(1.12rem, 1.7vw, 1.32rem); line-height: 1.55; color: var(--on-dusk-muted); max-width: 46ch; margin: 0 0 30px; }
.jhero .hero-doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; max-width: 540px; }
.jhero .hero-doors .btn { width: 100%; }
@media (max-width: 560px) { .jhero .hero-doors { grid-template-columns: 1fr; } }

/* Editorial portrait + caption */
.j-portrait { position: relative; }
.j-portrait .frame { border-radius: 5px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 28px 70px oklch(10% 0.04 250 / 0.55); }
.j-portrait .frame img { width: 100%; height: 100%; object-fit: cover; }
.jhero .j-portrait .frame img { filter: brightness(0.9) saturate(0.97); }
.j-cap { margin: 14px 2px 0; font-family: var(--font); font-size: 0.84rem; line-height: 1.4; display: flex; gap: 8px; align-items: baseline; color: var(--muted); }
.jhero .j-cap { color: var(--on-dusk-muted); }
.j-cap .n { font-weight: 600; white-space: nowrap; color: var(--ink-soft); }
.jhero .j-cap .n { color: var(--on-dusk); }
/* Caption name/role separator — a short sea rule instead of a dash (the brand's
   sea-rule motif, used as the label mark). Decorative; the words carry meaning. */
.j-cap .dash { align-self: center; width: 20px; height: 2px; border-radius: 1px; background: var(--sea-bright); font-size: 0; }
.cap-rule { display: inline-block; width: 20px; height: 2px; border-radius: 1px; background: var(--sea); vertical-align: middle; position: relative; top: -2px; }
.section--dusk .cap-rule, .after-dark .cap-rule { background: var(--sea-bright); }
/* Split captions flow as normal text (the base figcaption is flex, built for a
   leading tick + one run) so the inline sea rule sits centered between words. */
.j-figure figcaption.cap-split { display: block; }
.j-figure figcaption.cap-split::before { display: none; }
.cap-rule { margin: 0 0.2em; top: -2px; }

/* Est. 2000 emblem seal */
.seal { position: relative; width: 132px; height: 132px; }
.seal svg { width: 100%; height: 100%; display: block; }
.seal .ring-txt { font-family: var(--font); font-size: 8.5px; font-weight: 600; letter-spacing: 1.4px; fill: var(--primary); }
.seal .seal-logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: auto; }
.jhero .seal { position: absolute; left: clamp(-22px, -2vw, -38px); bottom: 64px; filter: drop-shadow(0 8px 22px oklch(8% 0.04 250 / 0.55)); }
@media (max-width: 900px) { .jhero .seal { left: auto; right: 16px; bottom: 16px; width: 112px; height: 112px; } }

/* Editorial fact band */
.j-facts { border-block: 1px solid var(--line); background: var(--bg); }
.j-facts .wrap { display: grid; grid-template-columns: repeat(4, 1fr); padding-block: 0; }
@media (max-width: 720px) { .j-facts .wrap { grid-template-columns: repeat(2, 1fr); } }
.j-fact { padding: 32px 30px; border-left: 1px solid var(--line); }
.j-fact:first-child { border-left: none; padding-left: 0; }
@media (max-width: 720px) { .j-fact:nth-child(odd) { border-left: none; padding-left: 0; } .j-fact { padding: 24px 22px; } }
.j-fact .n { font-family: var(--serif); font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1; color: var(--primary); letter-spacing: -0.02em; }
.j-fact .l { font-family: var(--font); font-size: 0.95rem; color: var(--muted); margin-top: 10px; line-height: 1.45; }
.j-fact .l strong { color: var(--ink-soft); font-weight: 600; }

/* Story with opening drop-cap */
.j-story .lede { font-size: clamp(1.18rem, 1.8vw, 1.42rem); line-height: 1.62; color: var(--ink-soft); max-width: 60ch; }
.j-story .lede--open::first-letter { float: left; font-family: var(--serif); font-weight: 700; font-size: 4.4em; line-height: 0.66; padding: 8px 14px 0 2px; color: var(--primary); }

/* Captioned photo module */
.j-figure { margin: 0; }
.j-figure .frame { border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-photo); }
.j-figure .frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.j-figure figcaption { font-family: var(--font); font-size: 0.86rem; color: var(--muted); margin-top: 13px; display: flex; gap: 10px; align-items: baseline; }
.j-figure figcaption::before { content: ""; width: 22px; height: 1.5px; background: var(--sea); flex: none; transform: translateY(7px); }

/* Big-serif pull quote / ethos band */
.j-quote { font-family: var(--serif); font-weight: 600; font-style: normal; font-size: clamp(1.95rem, 4.2vw, 3.2rem); line-height: 1.16; letter-spacing: -0.012em; color: var(--ink); max-width: 20ch; text-wrap: balance; margin: 0; }
.j-quote .mk { font-style: normal; color: var(--primary); }
.section--dusk .j-quote { color: var(--on-dusk); }
.section--dusk .j-quote .mk { color: var(--sea-bright); }
.j-quote-by { font-family: var(--font); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sea-deep); margin-top: 26px; }
.section--dusk .j-quote-by { color: var(--sea-bright); }

/* Section eyebrow (kicker) — small, sea, used sparingly */
.j-eyebrow { font-family: var(--font); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sea-deep); margin: 0 0 16px; display: inline-flex; align-items: center; gap: 11px; }
.j-eyebrow::before { content: ""; width: 26px; height: 1.5px; background: var(--sea); border-radius: 2px; }