/* =============================================================================
   ATLANTIS SPORTS CLUB — Stylesheet
   Palette: light-blue / aquatic.  Type: Barlow Condensed + Barlow.
   ============================================================================ */

:root {
  /* ---- Brand color scale (original light-blue / aquatic — matches the favicon) ---- */
  --sky-50:  #F0F9FF;
  --sky-100: #E0F2FE;
  --sky-200: #BAE6FD;
  --sky-300: #7DD3FC;
  --sky-400: #38BDF8;
  --sky-500: #0EA5E9;
  --sky-600: #0284C7;
  --sky-700: #0369A1;
  --sky-800: #075985;
  --sky-900: #0C4A6E;
  --ocean:   #082F49;
  --cyan-300:#67E8F9;
  --cyan-400:#22D3EE;

  /* ---- Atlantis navy + gold (membership boards, Founders highlights) ----
     Gold is deliberately rationed: the "Join Atlantis" button, the Founders
     ribbon, and the recommended membership board. Everywhere else stays navy
     and ocean blue on white. */
  --navy-900:#06203A;
  --navy-800:#0A2A47;
  --navy-700:#123C63;
  --gold-200:#F3E4B8;
  --gold-300:#E8CE86;
  --gold-400:#D9B95C;
  --gold-500:#B8912F;
  --gold-600:#8F6F1E;

  /* ---- Semantic tokens ---- */
  --color-primary:      var(--sky-600);
  --color-primary-strong: var(--sky-700);
  --color-accent:       var(--cyan-400);
  --color-bg:           #FFFFFF;
  --color-bg-alt:       var(--sky-50);
  --color-fg:           #0B2233;
  --color-fg-soft:      #3E5B6E;
  --color-border:       var(--sky-100);
  --color-card:         #FFFFFF;
  --color-on-primary:   #FFFFFF;

  /* ---- Effects (tighter radii, softer neutral shadows) ---- */
  --radius-sm: 6px;
  --radius:    10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --shadow-sm: 0 1px 2px rgba(16,31,44,.05), 0 1px 3px rgba(16,31,44,.05);
  --shadow:    0 18px 40px -22px rgba(16,31,44,.28);
  --shadow-lg: 0 44px 80px -34px rgba(16,31,44,.40);
  --shadow-glow: 0 1px 3px rgba(16,31,44,.10), 0 26px 60px -30px rgba(16,31,44,.42);

  --container: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-head: "Barlow", system-ui, -apple-system, sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, sans-serif;
}

/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
body {
  font-family: var(--font-body);
  color: var(--color-fg);
  background: var(--color-bg);
  line-height: 1.6;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video, iframe, svg { display: block; max-width: 100%; }
/* Any explicit display (flex, inline-flex, grid) outranks the UA rule for the
   hidden attribute, which silently leaves "hidden" elements on screen. */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 5vw, 40px); }

/* --------------------------------------------------------------- buttons --- */
.btn {
  --btn-bg: var(--color-primary);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .01em;
  padding: .72em 1.5em;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  background: var(--btn-bg);
  color: var(--color-on-primary);
  transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
  will-change: transform;
  line-height: 1.1;
  text-align: center;
}
.btn:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }
/* Keeps a multi-part label (text + a <span> price) as ONE flex item, so it wraps
   as a sentence instead of breaking into separately-centred chunks. */
.btn__label { display: inline; }
.btn--sm { font-size: .95rem; padding: .55em 1.1em; }
.btn--lg { font-size: 1.2rem; padding: .85em 1.8em; }
.btn--block { width: 100%; }

.btn--primary {
  background: linear-gradient(135deg, var(--sky-500), var(--sky-700));
  box-shadow: 0 10px 24px -10px rgba(2,132,199,.7);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(2,132,199,.8); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.22); transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  color: var(--color-primary-strong);
  border-color: var(--sky-300);
}
.btn--outline:hover { background: var(--sky-50); border-color: var(--sky-500); transform: translateY(-2px); }

/* Gold is the "join" colour and nothing else, so the one action that matters
   never has to compete with another button of the same weight. Navy text on
   gold rather than white: white on this gold is only ~2:1. */
.btn--gold {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-900);
  box-shadow: 0 10px 24px -12px rgba(143,111,30,.75);
}
.btn--gold:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(143,111,30,.85); }
.btn--gold:active { transform: translateY(0); }
.btn--gold:focus-visible { outline: 3px solid var(--navy-800); outline-offset: 2px; }

.btn--navy { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: #fff; }
.btn--navy:hover { transform: translateY(-2px); }

/* ------------------------------------------------------------ site header --- */
#siteHeader, .site-header { position: fixed; inset: 0 0 auto 0; z-index: 100; }

/* Anchor jumps (#offer, #signup, …) must clear the fixed header instead of
   parking the section's first line behind it. */
:target, [id] { scroll-margin-top: calc(var(--header-h, 104px) + 16px); }

/* announcement / urgency bar */
.announce {
  background: linear-gradient(90deg, var(--sky-700), var(--sky-900));
  color: #fff; text-align: center;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .01em;
  font-size: clamp(.8rem, 2.4vw, .95rem);
  padding: 9px 16px; line-height: 1.3;
}
.announce__short { display: none; }
.announce em { font-style: normal; color: var(--cyan-300); }
.announce a { color: #fff; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.announce a:hover { color: var(--cyan-300); }

/* ------------------------------------------------------------------ nav --- */
.nav {
  position: relative; z-index: 1;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.nav__inner {
  max-width: var(--container); margin-inline: auto;
  padding: 14px clamp(20px, 5vw, 40px);
  display: flex; align-items: center; gap: 24px;
}
.nav.is-scrolled,
.nav.is-menu-open {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--color-border);
  box-shadow: 0 6px 24px -18px rgba(8,47,73,.5);
}
.nav.is-menu-open { background: rgba(255,255,255,.96); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; transition: color .3s var(--ease); }
.nav.is-scrolled .brand,
.nav.is-menu-open .brand { color: var(--color-fg); }
.brand__mark { color: var(--sky-400); display: inline-flex; }
.nav.is-scrolled .brand__mark,
.nav.is-menu-open .brand__mark { color: var(--sky-600); }
.brand__text { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; line-height: .9; letter-spacing: .02em; display: flex; flex-direction: column; }
.brand__sub { font-size: .62rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; opacity: .75; }

/* Nine primary links plus a CTA is a lot of bar. The gap and size shrink with
   the viewport so the row stays on one line right down to the point where the
   hamburger takes over, instead of wrapping into the hero. */
.nav__links { display: flex; gap: clamp(12px, 1.55vw, 26px); margin-left: auto; align-items: center; }
.nav__links a {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(.86rem, 1.02vw, 1rem);
  color: #fff; opacity: .92; position: relative; padding: 4px 0;
  white-space: nowrap;
  transition: color .25s var(--ease), opacity .25s var(--ease);
}
.nav.is-scrolled .nav__links a { color: var(--color-fg-soft); }
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--sky-500); transition: width .25s var(--ease);
}
.nav__links a:hover { opacity: 1; }
.nav__links a:hover::after { width: 100%; }
.nav__links a.is-active { opacity: 1; }
.nav__links a.is-active::after { width: 100%; }
.nav__cta { margin-left: 4px; }
.nav__links + .nav__cta { margin-left: 0; }

.nav__toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px; flex-direction: column; justify-content: center; gap: 5px; padding: 10px; }
.nav__toggle span { height: 2px; width: 100%; background: #fff; border-radius: 2px; transition: transform .3s var(--ease), opacity .3s var(--ease), background .3s var(--ease); }
.nav.is-scrolled .nav__toggle span,
.nav.is-menu-open .nav__toggle span { background: var(--color-fg); }
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile {
  display: none; flex-direction: column; gap: 6px;
  padding: 12px clamp(20px, 5vw, 40px) 22px;
  background: rgba(255,255,255,.96); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-border);
}
.nav__mobile.is-open { display: flex; }
.nav__mobile a { font-family: var(--font-head); font-weight: 600; font-size: 1.2rem; color: var(--color-fg); padding: 12px 4px; border-bottom: 1px solid var(--color-border); }
.nav__mobile a.btn { color: #fff; border: 0; margin-top: 10px; justify-content: center; }

/* ----------------------------------------------------------------- hero --- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; overflow: hidden; color: #fff; }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__video { width: 100%; height: 100%; object-fit: cover; }
/* Fallback gradient shows behind the video (and if the video fails to load) */
.hero__media { background: radial-gradient(120% 120% at 30% 0%, var(--sky-700) 0%, var(--ocean) 55%, #041B2B 100%); }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(4,27,43,.55) 0%, rgba(4,27,43,.15) 30%, rgba(4,27,43,.35) 65%, rgba(4,27,43,.85) 100%),
    linear-gradient(90deg, rgba(4,27,43,.7) 0%, rgba(4,27,43,.1) 55%, rgba(4,27,43,0) 100%);
}
.hero__glow {
  position: absolute; width: 60vmax; height: 60vmax; left: 0; top: 0;
  background: radial-gradient(circle, rgba(103,232,249,.28) 0%, rgba(103,232,249,0) 60%);
  transform: translate(-50%, -50%); pointer-events: none;
  transition: opacity .4s var(--ease); mix-blend-mode: screen;
}

/* Top padding tracks the measured fixed-header height (--header-h, set in
   script.js) so the eyebrow can never slide under the announcement bar. */
.hero__content {
  position: relative; z-index: 2; max-width: var(--container); width: 100%; margin-inline: auto;
  padding: calc(var(--header-h, 104px) + 20px) clamp(20px, 5vw, 40px) 92px;
}
.hero__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  font-size: .95rem;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28);
  padding: 8px 16px; border-radius: 999px; backdrop-filter: blur(6px);
}
.hero__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(3rem, 8.4vw, 6.2rem); line-height: .98; letter-spacing: -.01em;
  margin: 16px 0 0; text-shadow: 0 6px 40px rgba(4,27,43,.4);
}
.hero__title .line { display: block; }
.hero__title-accent {
  background: linear-gradient(100deg, var(--cyan-300), var(--sky-300) 60%, #fff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* Extra box room so background-clip:text doesn't crop descenders (g, y). */
  padding-bottom: .12em; margin-bottom: -.12em;
}
.hero__lede { max-width: 40ch; font-size: clamp(1.05rem, 2.2vw, 1.3rem); color: rgba(255,255,255,.9); margin-top: 16px; }

/* ---- centred hero: the logo carries the headline ---- */
.hero--center { text-align: center; }
.hero--center .hero__content { display: flex; flex-direction: column; align-items: center; }
.hero__logo { margin: 0; }
.hero__logo-mark {
  display: block;
  width: clamp(200px, 34vw, 420px);
  aspect-ratio: 1828 / 858;              /* matches assets/logo.svg */
  background-color: #fff;
  -webkit-mask: url('assets/logo.svg') no-repeat center / contain;
          mask: url('assets/logo.svg') no-repeat center / contain;
  filter: drop-shadow(0 8px 34px rgba(4,27,43,.55));
}
.hero__tagline {
  margin-top: 26px; max-width: 30ch;
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.35;
  color: rgba(255,255,255,.94);
  text-shadow: 0 2px 20px rgba(4,27,43,.5);
}
.hero--center .hero__cta { justify-content: center; margin-top: 32px; }
.hero--center .countdown { margin-top: 30px; }
.hero__trust {
  margin-top: 22px;
  font-family: var(--font-head); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  font-size: .78rem; color: rgba(255,255,255,.72);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.hero__sound {
  position: absolute; right: clamp(20px, 5vw, 40px); bottom: 32px; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3);
  color: #fff; cursor: pointer; display: grid; place-items: center; backdrop-filter: blur(8px);
  transition: background .25s var(--ease), transform .2s var(--ease);
}
.hero__sound:hover { background: rgba(255,255,255,.24); transform: scale(1.06); }
.hero__sound .icon-sound { display: none; }
.hero__sound[aria-pressed="true"] .icon-sound { display: block; }
.hero__sound[aria-pressed="true"] .icon-muted { display: none; }

.hero__scroll { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 3; }
.hero__scroll-mouse { display: block; width: 26px; height: 42px; border: 2px solid rgba(255,255,255,.6); border-radius: 14px; position: relative; }
.hero__scroll-mouse span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; background: #fff; border-radius: 2px; transform: translateX(-50%); animation: scrollWheel 1.8s var(--ease) infinite; }
@keyframes scrollWheel { 0% { opacity: 0; transform: translate(-50%, 0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translate(-50%, 12px); } 100% { opacity: 0; transform: translate(-50%, 14px); } }

/* countdown */
.countdown { display: inline-flex; align-items: flex-start; gap: 6px; margin-top: 24px; padding: 14px 22px; background: rgba(4,27,43,.35); border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius); backdrop-filter: blur(10px); }
.countdown__unit { display: flex; flex-direction: column; align-items: center; min-width: 58px; }
.countdown__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1; font-variant-numeric: tabular-nums; }
.countdown__lab { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; opacity: .75; margin-top: 6px; }
.countdown__sep { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1; opacity: .4; padding-top: 2px; }

/* pulse dot */
.pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan-300); position: relative; flex: none; }
.pulse-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--cyan-300); animation: pulse 2s ease-out infinite; }
.pulse-dot--dark, .pulse-dot--dark::after { background: var(--sky-500); }
@keyframes pulse { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }

/* -------------------------------------------------------- section shared --- */
.section__head { max-width: 640px; margin: 0 auto 56px; text-align: center; }
.section__eyebrow { font-family: var(--font-head); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .9rem; color: var(--color-primary); margin-bottom: 12px; }
.section__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5.5vw, 3.6rem); line-height: 1; letter-spacing: -.01em; color: var(--color-fg); }
.section__sub { color: var(--color-fg-soft); font-size: 1.15rem; margin-top: 16px; }

/* --------------------------------------------------------------- presale --- */
.presale { padding: clamp(72px, 10vw, 130px) 0; background: linear-gradient(180deg, #fff 0%, var(--sky-50) 100%); }
.presale__card {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px);
  align-items: center;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(34,211,238,.12) 0%, rgba(34,211,238,0) 45%),
    linear-gradient(160deg, var(--ocean), var(--sky-900) 70%);
  color: #fff; border-radius: var(--radius-xl); padding: clamp(30px, 5vw, 64px);
  box-shadow: var(--shadow-lg); position: relative; overflow: hidden;
}
.presale__card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 15% 110%, rgba(56,189,248,.25), transparent 60%); pointer-events: none; }
.presale__left { position: relative; z-index: 1; }
.presale__left .section__eyebrow { color: var(--cyan-300); }
.presale__headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.02; margin-bottom: 18px; }
.presale__text { color: rgba(255,255,255,.86); max-width: 46ch; }
.presale__text strong { color: #fff; }
.presale__perks { margin: 26px 0; display: grid; gap: 12px; }
.presale__perks li { display: flex; align-items: flex-start; gap: 12px; color: rgba(255,255,255,.92); }
.presale__perks li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%;
  background: var(--cyan-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082F49' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.presale__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 30px; }
.presale__spots { display: inline-flex; align-items: center; gap: 8px; font-size: .95rem; color: rgba(255,255,255,.8); }

.price-card { position: relative; z-index: 1; background: #fff; color: var(--color-fg); border-radius: var(--radius-lg); padding: 34px 30px 30px; box-shadow: var(--shadow-glow); text-align: center; }
.price-card__ribbon { position: absolute; top: 18px; right: 18px; font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--color-primary-strong); background: var(--sky-100); padding: 5px 12px; border-radius: 999px; }
.price-card__label { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--color-fg-soft); font-size: .95rem; }
.price-card__row { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 14px 0 6px; }
.price-card__block { display: flex; flex-direction: column; }
.price-card__amt { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 7vw, 3.8rem); line-height: 1; color: var(--color-primary-strong); font-variant-numeric: tabular-nums; }
.price-card__unit { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .82rem; color: var(--color-fg-soft); }
.price-card__plus { font-family: var(--font-head); font-weight: 700; font-size: 1.8rem; color: var(--sky-300); }
.price-card__note { font-size: .85rem; color: var(--color-fg-soft); margin: 8px 0 20px; }

/* ------------------------------------------------------------- amenities --- */
.amenities { padding: clamp(72px, 10vw, 130px) 0; }
.amenity-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.amenity {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 300px;
  display: flex; align-items: flex-end; color: #fff; box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  isolation: isolate;
}
.amenity--wide { grid-column: span 2; min-height: 340px; }
.amenity__media {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  background-color: var(--sky-200);
  background-image: linear-gradient(140deg, var(--sky-400), var(--sky-700));
  transition: transform .6s var(--ease);
}
.amenity::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(4,27,43,0) 30%, rgba(4,27,43,.82) 100%); }
.amenity:hover .amenity__media { transform: scale(1.06); }
.amenity__body { padding: 28px; position: relative; z-index: 1; }
.amenity__tag { display: inline-block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); padding: 4px 12px; border-radius: 999px; backdrop-filter: blur(6px); margin-bottom: 12px; }
.amenity__body h3 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 3.5vw, 2.4rem); line-height: 1; }
.amenity__body p { color: rgba(255,255,255,.9); margin-top: 10px; max-width: 52ch; }

/* --------------------------------------------------------------- booking --- */
.booking { padding: clamp(72px, 10vw, 130px) 0; background: var(--sky-50); }
.booking-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.book-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); display: flex; flex-direction: column; }
.book-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.book-card__media { position: relative; aspect-ratio: 16/10; background-size: cover; background-position: center; background-color: var(--sky-200); background-image: linear-gradient(140deg, var(--sky-300), var(--sky-600)); }
.book-card__badge { position: absolute; left: 14px; top: 14px; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--color-primary-strong); background: rgba(255,255,255,.92); padding: 5px 12px; border-radius: 999px; }
.book-card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.book-card__body h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.book-card__body p { color: var(--color-fg-soft); font-size: 1rem; flex: 1; }
.book-card__body .btn { margin-top: 6px; }

/* ---------------------------------------------------------------- signup --- */
.signup { padding: clamp(60px, 8vw, 100px) 0; }
.signup__inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 56px); align-items: center;
  background: linear-gradient(135deg, var(--sky-500), var(--sky-700));
  border-radius: var(--radius-xl); padding: clamp(32px, 5vw, 60px); color: #fff; box-shadow: var(--shadow-lg);
}
.signup__inner .section__title { color: #fff; }
.signup__inner .section__sub { color: rgba(255,255,255,.9); }
.field { display: flex; gap: 12px; flex-wrap: wrap; }
.field input {
  flex: 1; min-width: 200px; font-family: var(--font-body); font-size: 1.05rem;
  padding: .85em 1.1em; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.5);
  background: rgba(255,255,255,.95); color: var(--color-fg);
}
.field input::placeholder { color: #7891a1; }
.field input:focus-visible { outline: 3px solid var(--cyan-300); outline-offset: 2px; }
.field .btn { background: var(--ocean); box-shadow: none; }
.field .btn:hover { background: #0a3a56; }
.signup__msg { margin-top: 14px; font-weight: 600; min-height: 1.2em; }
.signup__msg.is-error { color: #ffd7d7; }

/* -------------------------------------------------------------- location --- */
.location { padding: clamp(72px, 10vw, 130px) 0; background: var(--sky-50); }
.location__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 56px); align-items: stretch; }
.location__info { align-self: center; }
.location__addr { font-size: 1.25rem; color: var(--color-fg); margin: 16px 0 24px; line-height: 1.7; }
.location__venue { color: var(--color-fg-soft); font-size: 1.05rem; }
.location__map { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--color-border); min-height: 380px; background: var(--sky-100); }
.location__map iframe { width: 100%; height: 100%; min-height: 380px; border: 0; }

/* ---------------------------------------------------------------- footer --- */
.footer { background: var(--ocean); color: rgba(255,255,255,.8); padding-top: 60px; }
.footer__inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 44px; }
.footer .brand__text { color: #fff; margin-bottom: 12px; }
.footer__brand p { max-width: 30ch; }
.footer__links { display: flex; flex-direction: column; gap: 12px; }
.footer__links a, .footer__contact a { color: rgba(255,255,255,.8); font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; transition: color .2s var(--ease); }
.footer__links a:hover, .footer__contact a:hover { color: var(--cyan-300); }
.footer__contact { display: flex; flex-direction: column; gap: 10px; }
.footer__social { display: flex; gap: 12px; margin-top: 6px; }
.footer__social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: #fff; transition: background .2s var(--ease); }
.footer__social a:hover { background: rgba(255,255,255,.18); }
.footer__legal { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; font-size: .9rem; }
.footer__legal-inner { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: center; justify-content: space-between; }
.footer__credit { color: rgba(255,255,255,.62); }
.footer__credit a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 2px; transition: color .2s var(--ease); }
.footer__credit a:hover { color: var(--cyan-300); }

/* --------------------------------------------------------------- reveal --- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .06s; }
.reveal:nth-child(3) { transition-delay: .12s; }
.reveal:nth-child(4) { transition-delay: .18s; }
.reveal:nth-child(5) { transition-delay: .24s; }
.reveal:nth-child(6) { transition-delay: .30s; }

/* ---------------------------------------------------------- responsive --- */
/* The eight-item bar needs room. Measured: it still clears the CTA with ~24px
   to spare at 1000px, so that's where it hands over to the hamburger — which
   lists every destination anyway. Re-measure if a nav item is ever added back. */
@media (max-width: 999px) {
  .nav__links, .nav__cta { display: none; }
  /* The links row carries the margin-left:auto that pushes everything after it
     to the right. Hiding it leaves the toggle sitting against the logo, so the
     toggle takes over the job of holding the right edge. */
  .nav__toggle { display: flex; margin-left: auto; }
}

@media (max-width: 940px) {
  .presale__card { grid-template-columns: 1fr; }
  .booking-grid { grid-template-columns: 1fr 1fr; }
  .location__grid { grid-template-columns: 1fr; }
  .signup__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; margin-left: auto; }
  .amenity-grid { grid-template-columns: 1fr; }
  .amenity--wide { grid-column: span 1; }
  .booking-grid { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr; }
  .hero__content { padding-top: calc(var(--header-h, 150px) + 22px); padding-bottom: 64px; }
  .countdown { padding: 12px 14px; gap: 2px; }
  .countdown__unit { min-width: 46px; }

  /* Phone hero: everything a notch tighter so the offer and both buttons fit on
     one screen without the content running under the header or the chat bubble. */
  .hero__eyebrow { font-size: .74rem; letter-spacing: .08em; gap: 8px; padding: 7px 13px; }
  .hero__title { font-size: clamp(2.6rem, 12vw, 3.6rem); margin-top: 14px; }
  .hero__lede { font-size: 1.02rem; margin-top: 12px; }
  .countdown { margin-top: 18px; }
  .hero__cta { margin-top: 20px; gap: 10px; }
  .hero__cta .btn { width: 100%; }
  .btn--lg { font-size: 1.05rem; padding: .8em 1.2em; }
  /* Touch users scroll by habit; the cue only crowded the buttons. */
  .hero__scroll { display: none; }

  /* Once the signup input wraps to its own row, a half-width button beneath it
     just looks unfinished — match the field. */
  .field .btn { width: 100%; }

  /* Thumb-sized tap targets: these links were ~27px and ~16px tall. */
  .footer__links a, .footer__contact a { display: inline-block; padding-block: 7px; }
  .announce a { display: inline-block; padding-block: 4px; }
}
@media (max-width: 600px) {
  .announce__long { display: none; }
  .announce__short { display: inline; }
}
@media (max-width: 420px) {
  .countdown__unit { min-width: 40px; }
  .countdown__num { font-size: 1.75rem; }
  /* Small phones (SE-class): shave just enough to keep both hero buttons above
     the fold once the announcement bar wraps to two lines. */
  .hero__eyebrow { font-size: .68rem; padding: 6px 11px; }
  .hero__title { font-size: clamp(2.3rem, 11.5vw, 3rem); }
  .hero__lede { font-size: .98rem; margin-top: 10px; }
  .countdown { margin-top: 14px; padding: 10px 12px; }
  .hero__cta { margin-top: 16px; }
  .hero__content { padding-bottom: 52px; }
}

/* =============================================================================
   MULTI-PAGE ADDITIONS
   ============================================================================ */

/* ---------------------------------------------------------- page hero (sub) --- */
.page-hero {
  position: relative; overflow: hidden; color: #fff;
  /* Never less than the fixed header plus breathing room, whatever the bar wraps to. */
  padding: max(clamp(120px, 16vw, 168px), calc(var(--header-h, 104px) + 44px)) 0 clamp(48px, 7vw, 80px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgba(34,211,238,.18) 0%, rgba(34,211,238,0) 45%),
    radial-gradient(70% 90% at 0% 100%, rgba(56,189,248,.22), transparent 55%),
    linear-gradient(160deg, var(--ocean) 0%, var(--sky-900) 60%, var(--sky-800) 100%);
}
.page-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.04) 0 2px, transparent 2px 22px);
}
.page-hero .container { position: relative; z-index: 1; }
.page-hero__eyebrow {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  font-size: .9rem; color: var(--cyan-300); margin-bottom: 14px;
}
.page-hero__title {
  font-family: var(--font-head); font-weight: 800; line-height: .98;
  font-size: clamp(2.6rem, 7vw, 5rem); letter-spacing: -.01em; max-width: 18ch;
}
.page-hero__sub { color: rgba(255,255,255,.9); font-size: clamp(1.05rem, 2.4vw, 1.3rem); margin-top: 18px; max-width: 54ch; }
.page-hero__cta { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 14px; }

/* generic page section wrapper */
.section { padding: clamp(64px, 9vw, 118px) 0; }
.section--alt { background: var(--sky-50); }
.section--tight { padding-bottom: 0; }

/* ------------------------------------------------------- building shot --- */
.building-shot { margin: 0; }
.building-shot img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
}
.building-shot figcaption {
  margin-top: 14px; text-align: center;
  font-family: var(--font-head); font-weight: 600; letter-spacing: .02em;
  color: var(--color-fg-soft); font-size: .98rem;
}
.lede { font-size: 1.2rem; color: var(--color-fg-soft); max-width: 60ch; }

/* ------------------------------------------------------------- urgency band --- */
.urgency {
  padding: clamp(60px, 9vw, 120px) 0;
  background: linear-gradient(180deg, #fff 0%, var(--sky-50) 100%);
}
.urgency__card {
  position: relative; overflow: hidden;
  background:
    radial-gradient(100% 140% at 100% 0%, rgba(34,211,238,.14) 0%, rgba(34,211,238,0) 45%),
    linear-gradient(160deg, var(--ocean), var(--sky-900) 72%);
  color: #fff; border-radius: var(--radius-xl); padding: clamp(30px, 5vw, 60px);
  box-shadow: var(--shadow-lg); text-align: center;
}
.urgency__badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem;
  background: rgba(34,211,238,.16); border: 1px solid rgba(103,232,249,.5); color: var(--cyan-300);
  padding: 7px 16px; border-radius: 999px; margin-bottom: 20px;
}
.urgency__headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.02; max-width: 22ch; margin: 0 auto; }
.urgency__headline .hl { color: var(--cyan-300); }
.urgency__sub { color: rgba(255,255,255,.86); font-size: 1.12rem; margin: 16px auto 0; max-width: 52ch; }

/* price comparison chips (inline) */
.price-flip { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 22px; margin: 28px 0 6px; }
.price-flip__now { display: flex; align-items: baseline; gap: 8px; }
.price-flip__now .amt { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; color: #fff; }
.price-flip__now .unit { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: rgba(255,255,255,.75); }
.price-flip__was { font-family: var(--font-head); font-weight: 600; color: rgba(255,255,255,.6); font-size: 1.15rem; }
.price-flip__was s { text-decoration-color: var(--secondary, #ff8a8a); text-decoration-thickness: 2px; }
.price-flip__x { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); }
.save-pill { display: inline-block; font-family: var(--font-head); font-weight: 700; letter-spacing: .04em; background: var(--cyan-400); color: var(--ocean); padding: 8px 16px; border-radius: 999px; font-size: 1rem; margin-top: 6px; }
.urgency__actions { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* ------------------------------------------------------------- scarcity bar --- */
.scarcity { max-width: 520px; margin: 24px auto 0; }
.scarcity__track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.16); overflow: hidden; }
.scarcity__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cyan-400), var(--sky-300)); transition: width 1s var(--ease); }
.scarcity__label { display: block; margin-top: 10px; font-family: var(--font-head); font-weight: 600; letter-spacing: .04em; font-size: .95rem; color: var(--cyan-300); }

/* ------------------------------------------- offer timer above the plans --- */
/* The dot is a flex item, so a bare text node beside it becomes one anonymous
   item that wraps out of alignment on narrow screens. align-items:baseline plus
   a text span keeps the label centred however many lines it takes. */
.section__eyebrow--dot { display: flex; align-items: baseline; gap: 9px; justify-content: center; flex-wrap: nowrap; }
.section__eyebrow--dot .pulse-dot { flex: 0 0 auto; align-self: center; }
.section__eyebrow--dot > span:not(.pulse-dot) { text-align: center; }
.section__title .hl { color: var(--color-primary); }

.offer-timer { display: flex; flex-direction: column; align-items: center; margin: -20px 0 40px; }
.offer-timer__lab {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  font-size: .76rem; color: var(--color-fg-soft); margin-bottom: 12px;
}
/* Countdown on a light section, rather than over the dark hero/offer card. */
.countdown--ink {
  background: var(--sky-50);
  border-color: var(--color-border);
  color: var(--color-fg);
  backdrop-filter: none;
  margin-top: 0;
}
.countdown--ink .countdown__num { color: var(--color-primary-strong); }
.countdown--ink .countdown__lab { color: var(--color-fg-soft); opacity: 1; }
.countdown--ink .countdown__sep { color: var(--sky-300); opacity: 1; }
.offer-timer .scarcity { margin-top: 20px; width: 100%; }
.offer-timer .scarcity__label { color: var(--color-primary-strong); text-align: center; }

.plan__fine { margin-top: 12px; font-size: .84rem; line-height: 1.45; color: var(--color-fg-soft); text-align: center; }
/* What happens after the intro year. Given its own panel rather than left as
   fine print — it's the thing people most need to understand before paying. */
.plan__rollover {
  margin-top: 12px; padding: 12px 14px;
  background: var(--sky-50); border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: .92rem; line-height: 1.5;
  color: var(--color-fg-soft);
}
.plan__rollover strong { color: var(--color-fg); }

/* ----------------------------------------------------- plan comparison cards --- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 860px; margin: 0 auto; align-items: stretch; }
.plan { position: relative; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 34px 30px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.plan--regular { opacity: .96; }
.plan--founding { border: 2px solid var(--sky-400); box-shadow: var(--shadow-glow); }
.plan__ribbon { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); font-family: var(--font-head); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; color: #fff; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); padding: 7px 18px; border-radius: 999px; box-shadow: 0 8px 18px -8px rgba(2,132,199,.8); white-space: nowrap; }
.plan__name { font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: 1rem; color: var(--color-fg-soft); }
.plan--founding .plan__name { color: var(--color-primary-strong); }
.plan__price { margin: 16px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan__amt { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--color-fg); font-variant-numeric: tabular-nums; }
.plan--founding .plan__amt { color: var(--color-primary-strong); }
.plan__unit { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; color: var(--color-fg-soft); }
.plan__monthly { font-family: var(--font-body); font-size: 1.05rem; color: var(--color-fg-soft); margin-bottom: 2px; }
.plan__monthly strong { font-family: var(--font-head); font-weight: 800; font-size: 1.5rem; color: var(--color-fg); }
.plan--founding .plan__monthly strong { color: var(--color-primary-strong); }
.plan__note { font-size: .9rem; color: var(--color-fg-soft); margin-top: 4px; }
.plan__list { margin: 20px 0 24px; display: grid; gap: 11px; }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 1rem; color: var(--color-fg); }
.plan__list li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan--founding .plan__list li::before { background: var(--cyan-400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082F49' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.plan__cta { margin-top: auto; }
.plan__was { color: var(--color-fg-soft); font-size: 1.05rem; }
.plan__was s { text-decoration-thickness: 2px; }

/* --------------------------------- parties: packages beside the request --- */
.party-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 60px); align-items: start;
}
.party-split__copy h2 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.02; color: var(--color-fg);
}
.party-split__copy > p { color: var(--color-fg-soft); font-size: 1.1rem; margin-top: 14px; }
.party-split__media {
  margin-top: 28px; aspect-ratio: 16 / 11;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow); border: 1px solid var(--color-border);
  /* The frame holds the photo directly now rather than a grid of .split-panes,
     so it has to do the cover crop itself — without this the image sits at its
     natural size, pinned to the top-left corner. */
  background-size: cover; background-position: center;
}
.party-split__title {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 2.4rem); line-height: 1.04; color: var(--color-fg);
}
.party-split__sub { color: var(--color-fg-soft); font-size: 1.05rem; margin: 12px 0 22px; }
/* The form is already a card; inside a column it should fill it. */
.party-split__form .qform { max-width: none; margin: 0; }

@media (max-width: 940px) {
  .party-split { grid-template-columns: 1fr; }
  /* Stacked, the picture has already made the case — keep it tighter. */
  .party-split__media { margin-top: 22px; aspect-ratio: 16 / 10; }
}

/* ---------------------------------------------- party price + includes --- */
.price-badge {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  margin-top: 26px; padding: 18px 22px;
  background: linear-gradient(135deg, var(--sky-600), var(--sky-800));
  color: #fff; border-radius: var(--radius-lg);
  box-shadow: 0 14px 30px -16px rgba(2,132,199,.8);
}
.price-badge__lab {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .72rem; color: rgba(255,255,255,.8);
}
.price-badge__amt {
  font-family: var(--font-head); font-weight: 800; line-height: 1;
  font-size: clamp(2.4rem, 6vw, 3.2rem);
}
.price-badge__note { font-size: .95rem; color: rgba(255,255,255,.9); margin-top: 4px; }

.includes { margin-top: 22px; display: grid; gap: 8px; }
.includes__group {
  border: 1px solid var(--color-border); border-radius: var(--radius);
  background: var(--color-card); overflow: hidden;
}
.includes__group > summary {
  cursor: pointer; list-style: none; padding: 14px 18px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.02rem;
  color: var(--color-fg); display: flex; align-items: center; justify-content: space-between;
  transition: background .2s var(--ease);
}
.includes__group > summary::-webkit-details-marker { display: none; }
.includes__group > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-left: 12px;
  border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg) translateY(-2px); transition: transform .25s var(--ease);
}
.includes__group[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.includes__group > summary:hover { background: var(--color-bg-alt); }
.includes__group > summary:focus-visible { outline: 3px solid var(--sky-300); outline-offset: -3px; }
.includes__group ul { margin: 0; padding: 0 18px 16px; display: grid; gap: 8px; }
/* Not flex: a value span inside the text would become its own flex item and
   get the gap applied around it, breaking the sentence into spaced fragments. */
.includes__group li {
  position: relative; padding-left: 27px;
  font-size: .98rem; line-height: 1.5; color: var(--color-fg-soft);
}
.includes__group li::before {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--sky-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230369A1' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/10px no-repeat;
}
/* Marks a line that only applies to one party type. */
.includes__only { color: var(--color-primary); font-weight: 600; font-size: .88em; white-space: nowrap; }

/* ------------------------------------------- one-question-at-a-time form --- */
.qform {
  max-width: 620px; margin: 0 auto;
  background: var(--color-card); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: clamp(24px, 4vw, 40px);
}
.qform__bar { height: 6px; border-radius: 999px; background: var(--sky-100); overflow: hidden; }
.qform__bar-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--sky-400), var(--sky-600));
  transition: width .35s var(--ease);
}
.qform__count {
  margin-top: 10px; font-family: var(--font-head); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; color: var(--color-fg-soft);
}

.qstep { border: 0; padding: 0; margin: 26px 0 0; min-width: 0; }
.qstep[hidden] { display: none; }
.qstep__q {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.12; color: var(--color-fg);
  padding: 0;
}
.qstep__hint { color: var(--color-fg-soft); margin-top: 8px; font-size: 1rem; }
/* Each question fades up as it takes over the frame. */
.qstep.is-entering { animation: qstepIn .32s var(--ease) both; }
@keyframes qstepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.qfield { margin-top: 20px; }
.qfield input, .qfield textarea, .qfield select {
  width: 100%; font-family: var(--font-body); font-size: 1.1rem;
  padding: 15px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--color-border); background: #fff; color: var(--color-fg);
}
.qfield textarea { min-height: 118px; resize: vertical; }
.qfield input:focus-visible, .qfield textarea:focus-visible {
  outline: 3px solid var(--sky-300); outline-offset: 1px; border-color: var(--sky-400);
}

.qchoices { display: grid; gap: 10px; margin-top: 20px; }
.qchoice { position: relative; display: block; cursor: pointer; }
.qchoice input { position: absolute; opacity: 0; width: 0; height: 0; }
.qchoice span {
  display: block; padding: 16px 18px; border-radius: var(--radius);
  border: 1.5px solid var(--color-border); background: var(--color-bg-alt);
  font-family: var(--font-head); font-weight: 600; font-size: 1.06rem;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.qchoice:hover span { border-color: var(--sky-400); transform: translateY(-1px); }
.qchoice input:checked + span { border-color: var(--sky-500); background: var(--sky-100); color: var(--color-primary-strong); }
.qchoice input:focus-visible + span { outline: 3px solid var(--sky-300); outline-offset: 2px; }

.qform__nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.qform__back {
  border: 0; background: none; cursor: pointer; padding: 10px 4px;
  font-family: var(--font-head); font-weight: 600; color: var(--color-fg-soft);
}
.qform__back:hover { color: var(--color-primary-strong); }
.qform__back[hidden] { display: none; }
.qform__nav .btn { margin-left: auto; }
.qform__err {
  margin-top: 12px; color: #B42318; font-family: var(--font-head); font-weight: 600; font-size: .95rem;
}
.qform__err:empty { display: none; }

.qform__done { text-align: center; padding: 12px 0 6px; }
.qform__done h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.9rem; color: var(--color-fg); }
.qform__done p { color: var(--color-fg-soft); margin-top: 12px; }
.qform__done[hidden] { display: none; }

/* ---------------------------------------------------------- explore cards --- */
.explore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.explore-card { position: relative; display: flex; flex-direction: column; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .3s var(--ease), box-shadow .3s var(--ease); color: inherit; }
.explore-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.explore-card__media { aspect-ratio: 16/10; background: linear-gradient(140deg, var(--sky-300), var(--sky-700)); background-size: cover; background-position: center; }
/* Three spaces in one frame: a mosaic rather than three equal columns — inside a
   ~260px card, thirds read as unidentifiable slivers. */
.media-mosaic {
  display: grid; gap: 2px; background: var(--color-border);
  grid-template-columns: 1.15fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.media-mosaic > .split-pane:first-child { grid-row: span 2; }
/* Two spaces instead of three: side by side, no tall pane to fill. */
.media-mosaic--two { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.media-mosaic--two > .split-pane:first-child { grid-row: auto; }

/* Stacked pair — one above the other, each full width. */
.media-mosaic--stack { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.media-mosaic--stack > .split-pane:first-child { grid-row: auto; }

/* A pane that reveals a clip on hover. The still stays underneath as the
   poster, so there's no gap while the video loads and nothing to load at all
   until someone actually hovers. */
.split-pane--video { position: relative; overflow: hidden; }
.split-pane__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .4s var(--ease);
}
.split-pane--video.is-playing .split-pane__video { opacity: 1; }
/* Touch devices have no hover, and reduced-motion users have asked not to be
   moved — both keep the still image. */
@media (hover: none), (prefers-reduced-motion: reduce) {
  .split-pane__video { display: none; }
}
.split-pane {
  display: block; min-width: 0;
  background: linear-gradient(140deg, var(--sky-300), var(--sky-700));
  background-size: cover; background-position: center;
}
.explore-card__body { padding: 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.explore-card__body h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.7rem; line-height: 1; }
.explore-card__body p { color: var(--color-fg-soft); flex: 1; }
.explore-card__link { font-family: var(--font-head); font-weight: 700; color: var(--color-primary-strong); letter-spacing: .02em; }
.explore-card__link::after { content: " \2192"; }

/* ------------------------------------------------------------- feature rows --- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.feature-row + .feature-row { margin-top: clamp(48px, 7vw, 88px); }
.feature-row:nth-child(even) .feature-row__media { order: 2; }
.feature-row__media { border-radius: var(--radius-lg); overflow: hidden; min-height: 320px; box-shadow: var(--shadow); background-size: cover; background-position: center; background-image: linear-gradient(140deg, var(--sky-400), var(--sky-700)); border: 1px solid var(--color-border); }
.feature-row__tag { display: inline-block; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--color-primary); margin-bottom: 12px; }
.feature-row__body h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.02; }
.feature-row__body p { color: var(--color-fg-soft); font-size: 1.1rem; margin-top: 14px; max-width: 52ch; }

/* how-it-works steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; }
.step { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); }
.step__num { font-family: var(--font-head); font-weight: 800; font-size: 1.1rem; color: #fff; background: linear-gradient(135deg, var(--sky-500), var(--sky-700)); width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 16px; }
.step h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.4rem; }
.step p { color: var(--color-fg-soft); margin-top: 8px; }

/* faq */
.faq { max-width: 780px; margin: 0 auto; }
.faq__item { border-bottom: 1px solid var(--color-border); padding: 22px 0; }
.faq__item h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.3rem; }
.faq__item p { color: var(--color-fg-soft); margin-top: 8px; }

/* center helper */
.center { text-align: center; }
.mt-cta { margin-top: 40px; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ------------------------------------------------------------- responsive --- */
@media (max-width: 940px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; }
  .explore-grid { grid-template-columns: 1fr; }
  .feature-row { grid-template-columns: 1fr; }
  .feature-row:nth-child(even) .feature-row__media { order: 0; }
  .steps { grid-template-columns: 1fr; }
}

/* =============================================================================
   PREMIUM REFINEMENTS  (elegant serif display, refined blue, softer surfaces)
   ============================================================================ */

/* Elegant serif for the marquee headlines; clean sans for everything else */
.hero__title,
.page-hero__title,
.section__title,
.urgency__headline,
.feature-row__body h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.015em;
}
.hero__title { line-height: 1.0; text-shadow: 0 2px 30px rgba(6,20,32,.35); }

/* Accent word: refined italic serif in a soft ice-blue (no more neon) */
.hero__title-accent {
  font-style: italic;
  font-weight: 500;
  background: linear-gradient(100deg, var(--cyan-300), #DCE8F1 55%, #ffffff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .16em; margin-bottom: -.16em;
}

/* Refined buttons: tighter radius, solid confident blue, soft neutral shadow */
.btn { border-radius: var(--radius); font-weight: 600; letter-spacing: .005em; }
.btn--primary { background: var(--color-primary); box-shadow: 0 12px 26px -16px rgba(16,31,44,.55); }
.btn--primary:hover { background: var(--color-primary-strong); box-shadow: 0 16px 32px -16px rgba(16,31,44,.6); }
.btn--ghost { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.4); }
.btn--ghost:hover { background: rgba(255,255,255,.16); }

/* Announcement bar: quieter, more editorial */
.announce { font-weight: 500; letter-spacing: .02em; }

/* Soften the hero cursor glow */
.hero__glow {
  background: radial-gradient(circle, rgba(180,206,225,.16) 0%, rgba(180,206,225,0) 60%);
}

/* Deep, even navy surfaces (drop the bright cyan radials) */
.page-hero {
  background: linear-gradient(158deg, var(--ocean) 0%, var(--sky-900) 62%, var(--sky-800) 100%);
}
.urgency__card {
  background: linear-gradient(155deg, var(--ocean), var(--sky-900) 78%);
}
.urgency__badge {
  background: rgba(180,206,225,.12);
  border-color: rgba(180,206,225,.4);
  color: var(--cyan-300);
  text-transform: none; letter-spacing: .06em;
}

/* Refined "save" pill — light, restrained, navy text */
.save-pill {
  background: #E7EEF5; color: var(--color-primary-strong);
  border: 1px solid rgba(255,255,255,.5); font-weight: 700;
}

/* Subtle strike-through instead of a loud red */
.price-flip__was s, .plan__was s { text-decoration-color: rgba(255,255,255,.45); }
.plan--regular .plan__was s, .plan__monthly .plan__was s { text-decoration-color: rgba(16,31,44,.35); }

/* Founding plan: quieter ribbon + border */
.plan--founding { border-color: var(--sky-300); }
.plan__ribbon { background: var(--color-primary-strong); box-shadow: 0 8px 18px -10px rgba(16,31,44,.6); }

/* Eyebrows: refined spacing */
.section__eyebrow, .feature-row__tag { letter-spacing: .18em; }

/* =============================================================================
   GYM GALLERY + AMENITIES RESTRUCTURE
   ============================================================================ */
.gallery-feature { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--color-border); }
.gallery-feature img { width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; display: block; transition: transform .7s var(--ease); }
.gallery-feature:hover img { transform: scale(1.03); }

.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 16px; }
.gallery-grid figure { margin: 0; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); }
.gallery-grid img { width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; display: block; transition: transform .5s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.05); }
@media (max-width: 760px) { .gallery-grid { grid-template-columns: 1fr 1fr; } .gallery-feature img { aspect-ratio: 16 / 10; } }
@media (max-width: 460px) { .gallery-grid { grid-template-columns: 1fr; } }

/* brand strip under the gym intro */
.brand-strip { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-top: 20px; }
.brand-strip span { font-family: var(--font-head); font-weight: 600; font-size: .92rem; letter-spacing: .04em; color: var(--color-primary-strong); background: var(--sky-50); border: 1px solid var(--color-border); padding: 7px 14px; border-radius: 999px; }

/* explore grid: flow 3–4 cards responsively */
.explore-grid { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* Book page with two cards: center them */
.booking-grid--two { grid-template-columns: repeat(2, 1fr); max-width: 760px; margin-inline: auto; }
@media (max-width: 640px) { .booking-grid--two { grid-template-columns: 1fr; } }

/* Amenities hero: the club's own front elevation behind the headline. Same
   heavy scrim as the location hero and for the same reason — bright sky and
   pale shingles give white type almost nothing to sit against. Anchored to the
   bottom so the entrance stays in frame as the hero gets shorter on phones. */
body[data-page="amenities"] .page-hero {
  background-image:
    linear-gradient(100deg, rgba(6,20,32,.92) 0%, rgba(8,40,64,.82) 45%, rgba(8,47,73,.62) 100%),
    url('assets/images/club-front.jpg');
  background-size: cover;
  background-position: center 65%;
}
body[data-page="amenities"] .page-hero::after { opacity: .22; }

/* Location hero: the aerial over the club. Heavier scrim than the amenities
   hero — this shot is bright sky and pale rooftops, so white type needs it. */
body[data-page="location"] .page-hero {
  background-image:
    linear-gradient(100deg, rgba(6,20,32,.92) 0%, rgba(8,40,64,.82) 45%, rgba(8,47,73,.62) 100%),
    url('assets/images/aerial.jpg');
  background-size: cover;
  background-position: center;
}
body[data-page="location"] .page-hero::after { opacity: .22; }

/* -------------------------------------------------------- contact cards --- */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px;
  padding: 32px 24px; border-radius: var(--radius-lg);
  background: var(--color-card); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm); color: inherit;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--sky-300); }
.contact-card__icon {
  display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 8px;
  border-radius: 50%; background: var(--sky-50); color: var(--color-primary-strong);
}
.contact-card__icon svg { width: 24px; height: 24px; }
.contact-card__label {
  font-family: var(--font-head); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; font-size: .74rem; color: var(--color-fg-soft);
}
.contact-card__value {
  font-family: var(--font-head); font-weight: 700; font-size: 1.15rem;
  color: var(--color-primary-strong); word-break: break-word;
}
@media (max-width: 760px) { .contact-cards { grid-template-columns: 1fr; } }

/* Brand logo (Atlantis Sports Clubs) — single vector, recolored per context via CSS mask */
.brand__logo {
  display: block;
  width: 92px; height: 43px;              /* logo aspect ~2.13:1 */
  background-color: #fff;                  /* white on the dark hero nav + dark footer */
  -webkit-mask: url('assets/logo.svg') no-repeat center / contain;
          mask: url('assets/logo.svg') no-repeat center / contain;
}
.nav.is-scrolled .brand__logo,
.nav.is-menu-open .brand__logo { background-color: var(--color-primary-strong); } /* blue on the white bar */
.brand__logo--footer { width: 112px; height: 52px; }
@media (max-width: 760px) { .brand__logo { width: 82px; height: 38px; } }

/* Offer band — slashed-price columns + fine print */
.price-flip__col { display: flex; flex-direction: column; align-items: center; }
.price-flip__col .price-flip__was {
  display: block; color: rgba(255,255,255,.5); font-family: var(--font-head);
  font-weight: 600; font-size: 1.3rem; line-height: 1; margin-bottom: 5px;
  text-decoration-thickness: 2px; text-decoration-color: rgba(255,255,255,.55);
}
.price-flip__col .amt { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.8rem, 7vw, 4rem); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.price-flip__col .unit { font-family: var(--font-head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: rgba(255,255,255,.72); margin-top: 7px; }
.price-flip__plus { align-self: center; font-family: var(--font-head); font-weight: 700; font-size: 2rem; color: rgba(255,255,255,.45); padding-top: 18px; }
.urgency__headline .hl { color: var(--cyan-300); }
.urgency__fine { font-size: .88rem; color: rgba(255,255,255,.68); max-width: 56ch; margin: 20px auto 0; line-height: 1.55; }

/* ------------------------------------------------- cine (flythrough) --- */
.cine {
  background: linear-gradient(180deg, var(--ocean) 0%, #0A3D63 100%);
  color: #F2F8FC;
  padding: clamp(72px, 9vw, 128px) 0;
  overflow: hidden;
}
.cine__head { max-width: 720px; margin-bottom: clamp(30px, 4vw, 48px); }
.cine__eyebrow {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: .8rem; color: var(--sky-300); margin-bottom: 14px;
}
.cine__title {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.04; letter-spacing: -0.02em;
}
.cine__sub { color: rgba(224,242,254,.82); font-size: 1.1rem; line-height: 1.6; margin-top: 16px; max-width: 62ch; }
.cine__frame {
  position: relative; margin: 0; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(125,211,252,.22);
  box-shadow: 0 60px 120px -40px rgba(2,12,20,.85), 0 0 0 1px rgba(2,12,20,.4);
}
.cine__frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cine__badge {
  position: absolute; left: 18px; bottom: 16px;
  font-family: var(--font-head); font-weight: 600; font-size: .78rem; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(240,249,255,.92);
  background: rgba(4,27,43,.55); border: 1px solid rgba(125,211,252,.25);
  padding: 6px 14px; border-radius: 999px; backdrop-filter: blur(8px);
}
.cine__stats {
  list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; margin-top: clamp(28px, 4vw, 44px);
}
.cine__stats li { border-top: 1px solid rgba(125,211,252,.28); padding-top: 14px; }
.cine__stats strong {
  display: block; font-family: var(--font-head); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: 1rem; color: #fff;
}
.cine__stats span { display: block; color: rgba(224,242,254,.72); font-size: .92rem; margin-top: 6px; line-height: 1.45; }
.cine--split { background: linear-gradient(180deg, #0A3D63 0%, var(--ocean) 100%); }
.cine__split { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.cine__body .cine__title { font-size: clamp(2rem, 4vw, 3rem); }
.cine__list { list-style: none; padding: 0; margin-top: 22px; }
.cine__list li {
  position: relative; padding: 10px 0 10px 26px; color: rgba(224,242,254,.85);
  border-bottom: 1px solid rgba(125,211,252,.16); font-size: 1.02rem;
}
.cine__list li:first-child { border-top: 1px solid rgba(125,211,252,.16); }
.cine__list li::before {
  content: ""; position: absolute; left: 2px; top: 50%; width: 8px; height: 8px;
  border-radius: 50%; transform: translateY(-50%); background: var(--cyan-400);
}
.feature-row__media--img img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .cine__split { grid-template-columns: 1fr; }
  .cine__stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .cine__stats { grid-template-columns: 1fr; gap: 14px; }
  .cine__badge { left: 12px; bottom: 10px; font-size: .68rem; }
}

/* ------------------------------------------------- newsletter signup --- */
.signup {
  margin-top: clamp(40px, 6vw, 72px);
  display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(24px, 4vw, 56px);
  align-items: center;
  background: linear-gradient(135deg, var(--ocean) 0%, var(--sky-800) 100%);
  border-radius: var(--radius-xl); padding: clamp(28px, 4vw, 52px);
  box-shadow: var(--shadow);
}
.signup__eyebrow {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: .76rem; color: var(--sky-300); margin-bottom: 10px;
}
.signup__title {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em;
}
.signup__sub { color: rgba(224,242,254,.82); margin-top: 12px; line-height: 1.6; max-width: 46ch; }
.signup__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.signup__fields input {
  font: inherit; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid rgba(125,211,252,.3); background: rgba(255,255,255,.08);
  color: #fff; transition: border-color .35s var(--ease), background .35s var(--ease);
}
.signup__fields input::placeholder { color: rgba(224,242,254,.6); }
.signup__fields input:focus {
  outline: none; border-color: var(--cyan-400); background: rgba(255,255,255,.14);
}
.signup__fields input[name="name"] { grid-column: span 2; }
.signup__fields .btn { grid-column: span 2; width: 100%; }
/* Off-screen rather than display:none — a bot that skips hidden fields still fills this. */
.signup__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signup__msg { margin-top: 12px; font-size: .94rem; color: var(--cyan-300); min-height: 1.3em; }
.signup__msg.is-error { color: #FCA5A5; }
@media (max-width: 860px) {
  .signup { grid-template-columns: 1fr; }
  .signup__fields { grid-template-columns: 1fr; }
  .signup__fields input[name="name"], .signup__fields .btn { grid-column: span 1; }
}

/* ------------------------------------------------------- aquatics page --- */
/* The stat row again, on a light section: same rhythm, inverted ink. */
.cine__stats--light li { border-top-color: var(--color-border); }
.cine__stats--light strong { color: var(--color-fg); }
.cine__stats--light span { color: var(--color-fg-soft); }
.cine__sub a { color: var(--sky-300); text-decoration: none; border-bottom: 1px solid rgba(125,211,252,.45); transition: color .35s var(--ease), border-color .35s var(--ease); }
.cine__sub a:hover { color: var(--cyan-300); border-bottom-color: var(--cyan-300); }
.cine__note { margin-top: 22px; }
.cine__link {
  font-family: var(--font-head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: .82rem; color: var(--cyan-400);
  text-decoration: none; transition: color .35s var(--ease);
}
.cine__link:hover { color: #fff; }
/* Inside a cine split the signup is one column, and the surrounding section
   already supplies the dark ground — so it drops its own gradient. */
.signup--panel {
  grid-template-columns: 1fr; margin-top: 0; gap: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(125,211,252,.22);
  box-shadow: none;
}
.signup--panel .signup__fields input { background: rgba(4,27,43,.35); }

/* The pool gets the whole width on the aquatics page — it's the reason the
   page exists, and a half-column crop sold it short. */
.pool-showcase {
  border-radius: var(--radius-xl); overflow: hidden;
  aspect-ratio: 21 / 9; min-height: 340px;
  background-size: cover; background-position: center;
  background-image: linear-gradient(140deg, var(--sky-400), var(--sky-700));
  border: 1px solid var(--color-border); box-shadow: var(--shadow-lg);
}
@media (max-width: 760px) { .pool-showcase { aspect-ratio: 4 / 3; } }
/* Same stat row, three across instead of four. */
.cine__stats--three { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .cine__stats--three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cine__stats--three { grid-template-columns: 1fr; } }

/* ------------------------------------------------------- training page --- */
/* Matches the signup inputs so the picker doesn't read as a different control. */
.signup__select {
  font: inherit; padding: 13px 16px; border-radius: var(--radius);
  border: 1px solid rgba(125,211,252,.3); background: rgba(4,27,43,.35);
  color: #fff; grid-column: span 2; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237DD3FC' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 14px;
  padding-right: 40px; cursor: pointer;
  transition: border-color .35s var(--ease);
}
.signup__select:focus { outline: none; border-color: var(--cyan-400); }
.signup__select option { background: var(--ocean); color: #fff; }
/* Says "not yet, but it's coming" without dressing it up as a live offering. */
.cine__soon, .feature-row__soon {
  display: inline-block; font-family: var(--font-head); font-weight: 600;
  text-transform: uppercase; letter-spacing: .12em; font-size: .74rem;
  padding: 7px 14px; border-radius: 999px;
}
.cine__soon { color: var(--sky-200); background: rgba(125,211,252,.12); border: 1px solid rgba(125,211,252,.28); }
.feature-row__soon { color: var(--color-primary); background: var(--sky-50); border: 1px solid var(--sky-100); margin-top: 18px; }
@media (max-width: 860px) { .signup__select { grid-column: span 1; } }

/* =============================================================================
   MEMBERSHIP BOARDS  (memberships.html)
   Three levels side by side on desktop, stacked on mobile. Deliberately plain:
   the job of this page is that a visitor can tell the three tiers apart in a
   couple of seconds, so the only decoration is the gold on the recommended
   board and the ribbon above it.
   ============================================================================= */
.boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}
.board {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 34px 28px 28px;
  box-shadow: var(--shadow-sm);
}
/* The middle board sits level with the others; only the recommended one lifts,
   so the eye lands on it without the row looking lopsided on mobile where the
   lift means nothing. */
.board--featured {
  border-color: var(--gold-400);
  box-shadow: var(--shadow-glow);
}
.board__ribbon {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-900);
  font-family: var(--font-head); font-weight: 800;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 16px; border-radius: 999px; white-space: nowrap;
}
.board__name {
  font-family: var(--font-head); font-weight: 800;
  font-size: 1.5rem; line-height: 1.15; color: var(--navy-800);
}
.board__price { display: flex; align-items: baseline; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.board__amt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.8rem, 5vw, 3.6rem); line-height: 1;
  color: var(--navy-900);
  /* Tabular figures so $49 / $69 / $99 line up across the three boards. */
  font-variant-numeric: tabular-nums;
}
.board__cadence {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-primary-strong);
}
.board__enroll { color: var(--color-fg-soft); font-size: .98rem; margin-top: 8px; }
.board__lead {
  font-weight: 600; color: var(--navy-800);
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--color-border);
}
.board__list { display: grid; gap: 9px; margin-top: 14px; }
.board__list li { position: relative; padding-left: 26px; color: var(--color-fg-soft); font-size: 1rem; }
.board__list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}
/* What the level does NOT include, stated plainly. Paul's clearest instruction
   was that nobody should think classes come with the $49 or $69 tier. */
.board__excludes {
  margin-top: 18px; padding: 12px 14px;
  background: var(--sky-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-fg-soft); font-size: .93rem;
}
.board__cta { margin-top: auto; padding-top: 24px; }

/* Student and couples rates sit UNDER the individual CTA, deliberately quieter.
   Three equally-loud prices on one board makes the visitor do arithmetic before
   they can choose; this way the individual rate stays the obvious default and
   the other two are there for whoever they apply to. */
.board__alts { margin-top: 14px; display: grid; gap: 8px; }
/* Secondary buttons, not decoration. They were dashed outlines before, which
   read as a label rather than something you press — a solid border, a real
   surface, an arrow and a press state make them obviously tappable while
   staying visually below the primary CTA above them.
   The couples row ("Couples rate" + "$44 each · $88 per pair") is only just
   narrower than a board at the 1000px breakpoint, so it wraps rather than
   overflowing or squashing the label. */
.board__alt {
  display: flex; align-items: center;
  gap: 4px 10px; flex-wrap: wrap;
  padding: 11px 14px;
  border: 1.5px solid var(--sky-200); border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
  min-height: 48px;
  cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease),
              transform .2s var(--ease), box-shadow .2s var(--ease);
}
.board__alt:hover {
  border-color: var(--sky-500); background: var(--sky-50);
  transform: translateY(-2px); box-shadow: var(--shadow);
}
.board__alt:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.board__alt:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }
.board__alt-label {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--navy-800); white-space: nowrap;
}
.board__alt-price {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem;
  color: var(--color-primary-strong); text-align: right;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.board__alt-arrow {
  flex: 0 0 auto; width: 16px; height: 16px;
  color: var(--color-primary); opacity: .6;
  transition: transform .2s var(--ease), opacity .2s var(--ease);
}
.board__alt:hover .board__alt-arrow { opacity: 1; transform: translateX(3px); }
.board__alt-note { font-size: .8rem; color: var(--color-fg-soft); margin-top: 2px; }

/* =============================================================================
   FAMILY MEMBERSHIP
   ============================================================================= */
.family-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.family-panel__copy h3 {
  font-family: var(--font-head); font-weight: 800;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--navy-800);
}
.family-panel__copy p { color: var(--color-fg-soft); margin-top: 12px; }
.family-panel__list { display: grid; gap: 10px; margin-top: 18px; }
.family-panel__list li { position: relative; padding-left: 26px; color: var(--color-fg-soft); }
.family-panel__list li::before {
  content: ""; position: absolute; left: 0; top: .45em;
  width: 15px; height: 9px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}
@media (max-width: 860px) { .family-panel { grid-template-columns: 1fr; } }

@media (max-width: 980px) { .boards { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* The required legal line under every pricing table. */
.disclaimer {
  max-width: 74ch; margin: 28px auto 0;
  color: var(--color-fg-soft); font-size: .88rem; line-height: 1.65; text-align: center;
}

/* ---------------------------------------------- premium programs / extras --- */
.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.chip {
  font-family: var(--font-head); font-weight: 600; font-size: .98rem;
  color: var(--navy-800); background: #fff;
  border: 1px solid var(--color-border); border-radius: 999px;
  padding: 9px 18px;
}

/* =============================================================================
   LONG LEAD FORMS  (founders, careers, community)
   ============================================================================= */
.leadform {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  background: #fff; border: 1px solid var(--color-border);
  border-radius: var(--radius-xl); padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field--wide { grid-column: 1 / -1; }
.field > label {
  font-family: var(--font-head); font-weight: 700; font-size: .95rem; color: var(--navy-800);
}
.field .hint { font-size: .84rem; color: var(--color-fg-soft); font-weight: 400; }
.field input, .field select, .field textarea {
  font-family: var(--font-body); font-size: 1rem; color: var(--color-fg);
  background: #fff;
  border: 1px solid var(--sky-200); border-radius: var(--radius);
  padding: 12px 14px;
  /* 16px minimum and a 46px box: anything smaller and iOS zooms the page on
     focus, which throws the layout off for the rest of the form. */
  min-height: 46px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--sky-500);
  box-shadow: 0 0 0 3px rgba(14,165,233,.18);
}
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--sky-500); outline-offset: 1px;
}
.leadform__req { color: var(--color-fg-soft); font-size: .85rem; grid-column: 1 / -1; }
.leadform__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.leadform__msg { font-weight: 600; min-height: 1.2em; color: var(--color-primary-strong); }
.leadform__msg.is-error { color: #B42318; }
/* Honeypot — off-screen for people, irresistible to bots. */
.leadform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) { .leadform { grid-template-columns: 1fr; } }

/* =============================================================================
   JOIN THE TEAM / COMMUNITY shared blocks
   ============================================================================= */
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.role {
  background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius);
  padding: 14px 18px; font-family: var(--font-head); font-weight: 600; color: var(--navy-800);
}
.perk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.perk { display: flex; gap: 14px; align-items: flex-start; }
.perk__icon {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--sky-50); color: var(--color-primary-strong);
}
.perk__icon svg { width: 21px; height: 21px; }
.perk h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--navy-800); }
.perk p { color: var(--color-fg-soft); font-size: .96rem; }

/* =============================================================================
   QR LANDING PAGE  (join.html)
   Thumb-first: every target is a full-width bar, comfortably over 44px, with
   nothing else on screen competing for the tap.
   ============================================================================= */
.qr-hero {
  background: linear-gradient(160deg, var(--navy-900), var(--sky-800));
  color: #fff; text-align: center;
  padding: calc(var(--header-h, 104px) + 40px) 0 44px;
}
.qr-hero__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.1rem, 7vw, 3.2rem); line-height: 1.05;
}
.qr-hero__sub { color: rgba(255,255,255,.88); margin-top: 14px; font-size: 1.08rem; }
.qr-actions { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; }
.qr-action {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 16px 22px;
  background: #fff; border: 1.5px solid var(--sky-200); border-radius: var(--radius-lg);
  font-family: var(--font-head); font-weight: 700; font-size: 1.12rem; color: var(--navy-800);
  box-shadow: var(--shadow-sm);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.qr-action:hover { border-color: var(--sky-500); transform: translateY(-2px); box-shadow: var(--shadow); }
.qr-action:active { transform: translateY(0); }
.qr-action--gold {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-color: var(--gold-500); color: var(--navy-900);
}
.qr-action__arrow { flex: 0 0 auto; opacity: .55; }
.qr-secondary { display: grid; gap: 10px; max-width: 520px; margin: 0 auto; }
.qr-secondary a {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 52px; padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-head); font-weight: 600; color: var(--color-fg-soft);
}
.qr-secondary a:hover { color: var(--color-primary-strong); }

/* =============================================================================
   YARMOUTH "OPEN NOW" POPUP
   The one interruption on the site, so it earns its place: it waits before
   appearing, it's dismissible three ways, and it respects reduced-motion.
   ============================================================================= */
.ypop {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center;
  padding: 20px;
  /* Strong enough to isolate the card — a weak scrim leaves the page competing
     with the thing you're asking someone to read. */
  background: rgba(6, 32, 58, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.ypop.is-open { opacity: 1; }

.ypop__card {
  position: relative;
  width: 100%; max-width: 460px;
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  transform: translateY(12px) scale(.98);
  transition: transform .32s var(--ease);
}
.ypop.is-open .ypop__card { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .ypop, .ypop__card { transition: none; }
  .ypop__card { transform: none; }
}

.ypop__close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.9); color: var(--navy-900);
  font-size: 26px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--shadow-sm);
  transition: background .2s var(--ease);
}
.ypop__close:hover { background: #fff; }
.ypop__close:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }

.ypop__media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.ypop__media img { width: 100%; height: 100%; object-fit: cover; }

.ypop__body { padding: 24px 26px 26px; }

.ypop__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-head); font-weight: 800;
  font-size: .8rem; letter-spacing: .16em; text-transform: uppercase;
  color: #0F7A3D;
}
.ypop__dot {
  width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5);
  animation: ypopPulse 2s infinite;
}
@keyframes ypopPulse {
  70% { box-shadow: 0 0 0 8px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}
@media (prefers-reduced-motion: reduce) { .ypop__dot { animation: none; } }

.ypop__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 1.85rem); line-height: 1.12;
  color: var(--navy-900); margin-top: 8px;
}
.ypop__tagline {
  font-family: var(--font-head); font-weight: 700;
  font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-primary-strong); margin-top: 8px;
}
.ypop__intro { color: var(--color-fg-soft); font-size: .98rem; margin-top: 12px; }

.ypop__list { display: grid; gap: 7px; margin-top: 16px; }
.ypop__list li {
  position: relative; padding-left: 24px;
  color: var(--color-fg); font-size: .96rem;
}
.ypop__list li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 13px; height: 8px;
  border-left: 2.5px solid var(--color-primary);
  border-bottom: 2.5px solid var(--color-primary);
  transform: rotate(-45deg);
}

.ypop__cta { margin-top: 20px; }
.ypop__note {
  color: var(--color-fg-soft); font-size: .86rem; line-height: 1.5;
  text-align: center; margin-top: 10px;
}
.ypop__dismiss {
  display: block; width: 100%; margin-top: 14px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-head); font-weight: 600; font-size: .92rem;
  color: var(--color-fg-soft); padding: 10px; min-height: 44px;
  text-decoration: underline; text-underline-offset: 3px;
}
.ypop__dismiss:hover { color: var(--navy-800); }
.ypop__dismiss:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; border-radius: var(--radius-sm); }

@media (max-width: 420px) {
  .ypop { padding: 12px; }
  .ypop__body { padding: 20px 20px 22px; }
  .ypop__media { aspect-ratio: 16 / 9; }
}

/* =============================================================================
   LANGUAGE TOGGLE
   Sits beside the join button rather than inside the menu — someone who reads
   Portuguese shouldn't have to navigate English to find their own language.
   ============================================================================= */
.nav__lang { display: inline-flex; }
.langtog {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 7px 12px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.4); border-radius: 999px;
  color: #fff; cursor: pointer;
  font-family: var(--font-head); font-weight: 700; font-size: .84rem;
  letter-spacing: .04em;
  transition: background .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.langtog svg { width: 15px; height: 15px; }
.langtog:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }
.langtog:focus-visible { outline: 3px solid var(--sky-400); outline-offset: 2px; }

/* Once the header goes solid on scroll the white-on-transparent pill would
   vanish into the background, so it flips to navy-on-white. */
.nav.is-scrolled .langtog,
.nav.is-menu-open .langtog {
  background: var(--sky-50); border-color: var(--sky-200); color: var(--navy-800);
}
.nav.is-scrolled .langtog:hover,
.nav.is-menu-open .langtog:hover { background: var(--sky-100); }

/* In the mobile sheet it's on a white panel, so it needs the solid treatment
   and enough width to be an obvious control rather than a chip. */
.nav__lang--mobile { display: flex; margin-top: 14px; }
.nav__lang--mobile .langtog {
  width: 100%; justify-content: center;
  min-height: 48px; font-size: .95rem;
  background: var(--sky-50); border-color: var(--sky-200); color: var(--navy-800);
}
@media (max-width: 999px) { .nav__lang:not(.nav__lang--mobile) { display: none; } }

/* =============================================================================
   FAMILY BOARD
   Paul asked for the value to be visible, so the saving leads and the old price
   sits struck through beside the new one — the comparison is the pitch.
   ============================================================================= */
.famboard {
  display: grid; grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 0;
  border: 1.5px solid var(--gold-400); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-glow);
  background: #fff;
}
.famboard__price {
  background: linear-gradient(165deg, var(--navy-800), var(--navy-900));
  color: #fff; padding: clamp(28px, 4vw, 40px);
  display: flex; flex-direction: column; justify-content: center;
}
.famboard__save {
  display: inline-block; align-self: flex-start;
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: var(--navy-900);
  font-family: var(--font-head); font-weight: 800;
  font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
}
.famboard__amounts { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.famboard__was {
  font-family: var(--font-display); font-size: 1.6rem;
  color: rgba(255,255,255,.5); text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums;
}
.famboard__amt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(3rem, 6vw, 4rem); line-height: 1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.famboard__cadence {
  font-family: var(--font-head); font-weight: 700;
  font-size: 1rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--gold-300);
}
.famboard__covers { color: rgba(255,255,255,.82); font-size: .96rem; margin-top: 14px; }
.famboard__year {
  color: rgba(255,255,255,.92); font-size: .95rem; line-height: 1.6;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.famboard__body { padding: clamp(26px, 4vw, 38px); display: flex; flex-direction: column; }
.famboard__body .board__list { margin-top: 0; }
.famboard__body .board__cta { padding-top: 22px; }

@media (max-width: 860px) { .famboard { grid-template-columns: 1fr; } }

/* =============================================================================
   FAMILY JUMP LINK
   The family rate sits below three full boards. Without a signpost this high
   up, a parent scrolls past it and buys an individual membership at a worse
   price — which costs them money and costs the club a bigger sale.
   ============================================================================= */
.famjump {
  display: block;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-300));
  border-bottom: 1px solid var(--gold-400);
  transition: filter .2s var(--ease);
}
.famjump:hover { filter: brightness(1.04); }
.famjump:focus-visible { outline: 3px solid var(--navy-800); outline-offset: -3px; }
.famjump__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 16px;
  max-width: var(--container); margin-inline: auto;
  padding: 14px clamp(20px, 5vw, 40px);
  color: var(--navy-900);
}
.famjump__tag {
  font-family: var(--font-head); font-weight: 800;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--navy-900); color: var(--gold-300);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.famjump__text { font-size: 1rem; text-align: center; }
.famjump__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-weight: 800; font-size: .98rem;
  white-space: nowrap; text-decoration: underline; text-underline-offset: 3px;
}
.famjump__cta svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.famjump:hover .famjump__cta svg { transform: translateX(3px); }
@media (max-width: 700px) { .famjump__text { font-size: .94rem; } }

/* =============================================================================
   "COMING SOON" STRIP
   The famjump bar's shape without its behaviour — announces something that has
   no page yet, so it is a div rather than a link and gets no hover or cursor
   change. Nothing here should suggest it is clickable.
   ============================================================================= */
.soonbar {
  background: linear-gradient(135deg, var(--sky-50), var(--sky-100));
  border-block: 1px solid var(--sky-200);
}
.soonbar__inner {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 8px 16px;
  max-width: var(--container); margin-inline: auto;
  padding: 14px clamp(20px, 5vw, 40px);
  color: var(--navy-900);
}
.soonbar__tag {
  font-family: var(--font-head); font-weight: 800;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  background: var(--navy-900); color: var(--cyan-300);
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.soonbar__text { font-size: 1rem; text-align: center; }
@media (max-width: 700px) { .soonbar__text { font-size: .94rem; } }

/* Household-size buttons sit side by side on a wide board — two short rows of
   one look like an afterthought next to a full-width primary. */
@media (min-width: 620px) {
  .famboard .board__alts { grid-template-columns: 1fr 1fr; }
}