/* =========================================================
   LEVEL FITNESS CLUBS — Design System
   Palette: navy / white / black / grey / wood+steel photography
   Accent: light blue (rare). No yellow / green / anything else.
========================================================= */

:root {
  /* ---------- Color ---------- */
  --ink-900:    #0A0E1A;
  --ink-700:    #141A2C;
  --ink-500:    #1E2640;
  --ink-400:    #2A3350;
  --paper:      #FBFAF7;
  --paper-cream: #F6F3EE;
  --paper-warm: #F6F3EE;
  --paper-2:    #EBE7DF;
  --grey-300:   #C8CCD3;
  --grey-500:   #5C6473; /* darkened from #7A8291 to meet WCAG AA on --paper (4.5:1) */
  --grey-600:   #515967;
  --grey-700:   #2B2F38;
  --steel:      #8C939E;
  --wood:       #8B6F4E;
  --wood-deep:  #4A3724;
  --light-blue: #9AB4D4;
  --light-blue-deep: #6F8FB5;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(48px, 10vw, 156px);
  --fs-h1:      clamp(42px, 7vw, 104px);
  --fs-h2:      clamp(34px, 5vw, 72px);
  --fs-h3:      clamp(22px, 2.4vw, 30px);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-eyebrow: 11px;

  --ls-display: -0.035em;
  --ls-h2:      -0.02em;
  --ls-eyebrow: 0.22em;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:  400ms;
  --dur-med:   600ms;
  --dur-slow:  900ms;

  --max: 1320px;
  --max-narrow: 920px;

  --nav-h: 86px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }

.serif {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-optical-sizing: auto;
}

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--grey-500);
}
.eyebrow--light { color: var(--light-blue); }
.eyebrow--rule {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.eyebrow--rule::before {
  content: "";
  width: 36px; height: 1px;
  background: currentColor;
  display: inline-block;
}

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.container-narrow { width: 100%; max-width: var(--max-narrow); margin: 0 auto; padding: 0 32px; }

.display {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: var(--ls-display);
  line-height: 0.98;
}
.display em, .serif em {
  font-style: italic;
  font-weight: 300;
  color: var(--grey-500);
}
.on-dark .display em, .on-dark .serif em { color: var(--light-blue); }

/* ---------- NAV ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  padding: 0 32px;
  /* 3-column grid keeps the menu visually centered relative to the
     viewport no matter how wide the logo or the right-hand utility get.
     Logo lives in the left 1fr, menu in the auto-width middle column,
     utility in the right 1fr. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 24px;
  align-items: center;
  background: linear-gradient(180deg, rgba(10,14,26,0.75) 0%, rgba(10,14,26,0.0) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--paper);
  transition: background 280ms ease, color 280ms ease, border-color 280ms ease;
  border-bottom: 1px solid rgba(255,255,255,0.0);
}
.nav > .nav__logo    { justify-self: start; }
.nav > .nav__menu    { justify-self: center; }
.nav > .nav__utility,
.nav > .nav__cta     { justify-self: end; }   /* account pages put a bare .nav__cta directly inside .nav */
.nav--solid {
  background: var(--ink-900);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav--light {
  background: var(--paper);
  color: var(--ink-900);
  border-bottom-color: var(--grey-300);
}
.nav__logo {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: 0.01em;
}
.nav__logo span { color: var(--light-blue); }
.nav__menu {
  display: flex; gap: 26px; list-style: none;
  font-size: 13px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
}
.nav__menu a { color: rgba(255,255,255,0.82); transition: color 200ms ease; }
.nav--light .nav__menu a { color: var(--grey-700); }
.nav__menu a:hover { color: var(--light-blue); }
.nav__menu a.is-active { color: var(--paper); border-bottom: 1px solid var(--light-blue); padding-bottom: 2px; }
.nav--light .nav__menu a.is-active { color: var(--ink-900); }
.nav__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  border: 1px solid rgba(255,255,255,0.4);
  padding: 14px 24px;
  color: inherit;
  white-space: nowrap;            /* never let the CTA label wrap to two lines */
  transition: all 250ms ease;
}
.nav--light .nav__cta { border-color: var(--ink-900); }
.nav__cta:hover {
  background: var(--paper); color: var(--ink-900); border-color: var(--paper);
}
.nav--light .nav__cta:hover { background: var(--ink-900); color: var(--paper); }
@media (max-width: 1080px) {
  /* Mobile: collapse the centered-grid layout back to flex so the
     hamburger toggle + drawer behave as designed. */
  .nav {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }
  .nav__menu { display: none; }
}

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 28px;
  font-size: 12px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid transparent;
  transition: all 250ms ease;
  background: transparent;
}
.btn--primary { background: var(--paper); color: var(--ink-900); }
.btn--primary:hover { background: var(--light-blue); color: var(--ink-900); }
.btn--ink { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.btn--ink:hover { background: transparent; color: var(--ink-900); }
.btn--ghost { border-color: rgba(255,255,255,0.65); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--ghost-dark { border-color: var(--ink-900); color: var(--ink-900); }
.btn--ghost-dark:hover { background: var(--ink-900); color: var(--paper); }
.btn__arrow { display: inline-block; transition: transform 250ms ease; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* ---------- SECTIONS ---------- */
.section { padding: 96px 0; }
.section--tight { padding: 64px 0; }
.section--loose { padding: 128px 0; }
.section--dark { background: var(--ink-900); color: var(--paper); }
.section--ink-700 { background: var(--ink-700); color: var(--paper); }
.section--warm { background: var(--paper-warm); color: var(--ink-900); }
.on-dark { color: var(--paper); }
.on-dark p { color: rgba(255,255,255,0.78); }

/* ---------- HERO (dark cinematic) ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  /* iOS Safari measures 100vh as the *largest* viewport including the URL
     bar — causes hero overflow when toolbar is showing. 100svh (small
     viewport height) tracks the visible area. Fall through to 100vh on
     older browsers that don't know svh. */
  min-height: 100svh;
  background: var(--ink-900);
  color: var(--paper);
  overflow: hidden;
  display: flex; align-items: flex-end;
  padding: 120px 0 96px;
}
.hero--short { min-height: 54vh; padding-bottom: 84px; align-items: flex-end; }
.hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.55) contrast(1.05);
}
.hero__bg::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.35) 0%, rgba(10,14,26,0.88) 100%);
}
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.07; mix-blend-mode: overlay;
}
.hero__content { position: relative; z-index: 2; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.hero__eyebrow { color: var(--light-blue); margin-bottom: 28px; display: inline-flex; align-items: center; gap: 14px; }
.hero__eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--light-blue); }
.hero__headline { font-size: clamp(44px, 8.5vw, 132px); max-width: 14ch; margin-bottom: 32px; }
.hero__headline em { color: var(--light-blue); }
.hero__sub {
  max-width: 56ch; color: rgba(255,255,255,0.78);
  font-size: 18px; line-height: 1.6; margin-bottom: 48px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero__ticker {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 18px 32px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between;
  flex-wrap: wrap; gap: 6px 20px;       /* wrap instead of clipping when spans exceed width (e.g. Yorktown's 4-span ticker) */
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  z-index: 3;
}
.hero__ticker a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding: 4px 2px;
  transition: color 200ms ease;
}
.hero__ticker a:hover,
.hero__ticker a:focus-visible { color: var(--paper); }
.hero__ticker a:focus-visible { outline: 1px solid var(--light-blue); outline-offset: 4px; }
.hero__ticker > * + *::before { content: "— "; color: var(--steel); margin-right: 8px; }
/* Homepage locations ticker reads as a list (Pelham · Yorktown · ...), so
   the leading item gets a separator too, unlike the address/phone tickers
   on club pages where the first item shouldn't be dash-prefixed. */
.hero__ticker--locations > *::before { content: "— "; color: var(--steel); margin-right: 8px; }
@media (max-width: 640px) {
  .hero__ticker { flex-wrap: wrap; gap: 10px; font-size: 10px; padding: 14px 20px; }
}

/* ---------- TOPIC BAR (4 entry-point cards; dramatic dark variant) ----------
 * Dark band that picks up where the hero ends, four distinct cards each with
 * its own accent color from the brand palette. Strong hover lift + arrow
 * micro-motion so it reads as buttons, not a passive section header.
 */
.topic-bar {
  /* Deliberately lighter than the dark locations row above it (matches the
     "In their words" reviews panel further down) so the two rows of cards
     read as distinct sections, not one continuous dark band. */
  background: var(--paper-warm);
  padding: 56px 32px;
  border-top: 1px solid rgba(10,14,26,0.06);
  position: relative;
  overflow: hidden;
}
.topic-bar::before {
  /* subtle ambient tint — same idea as the dark version, re-tinted for a light bg */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 12% 30%, rgba(111,143,181,0.07), transparent 55%),
    radial-gradient(ellipse at 88% 70%, rgba(139,111,78,0.06), transparent 55%);
  pointer-events: none;
}
.topic-bar__inner {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.topic-bar__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 32px 28px 26px;
  min-height: 188px;
  text-decoration: none;
  color: var(--paper-cream);
  background: var(--ink-900);
  border: 1px solid rgba(10,14,26,0.25);
  /* Noticeably rounder than the sharp 6px locations cards above — a
     different card "shape" is the visual cue that this is a different kind
     of row (site sections, not club locations). */
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}
/* accent stripe along top edge — set per-variant below */
.topic-bar__item::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
  transform-origin: left;
  transition: height 260ms ease;
}
/* subtle ambient glow on hover — accent color picks this up via the
   ::before height growing slightly */
.topic-bar__item:hover::before,
.topic-bar__item:focus-visible::before { height: 5px; }

.topic-bar__item:hover,
.topic-bar__item:focus-visible {
  background: var(--ink-700);
  border-color: rgba(10,14,26,0.4);
  transform: translateY(-4px);
  box-shadow:
    0 32px 64px -16px rgba(10,14,26,0.18),
    0 0 0 1px rgba(10,14,26,0.03) inset;
}
.topic-bar__item:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }

/* per-card accent stripe colors — color-coordinated, brand-palette only */
.topic-bar__item--mainfloor::before { background: var(--light-blue); }
.topic-bar__item--recovery::before  { background: var(--light-blue-deep); }
.topic-bar__item--training::before  { background: var(--wood); }
.topic-bar__item--classes::before   { background: var(--steel); }

.topic-bar__label {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper-cream);
  margin-bottom: auto;
}

.topic-bar__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(246,243,238,0.62);
  transition: color 240ms ease, gap 240ms ease;
}
.topic-bar__chev {
  display: inline-block;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.topic-bar__item:hover .topic-bar__arrow,
.topic-bar__item:focus-visible .topic-bar__arrow { gap: 14px; }
.topic-bar__item:hover .topic-bar__chev,
.topic-bar__item:focus-visible .topic-bar__chev { transform: translateX(4px); }

/* per-card hover arrow tint — picks up the accent stripe color */
.topic-bar__item--mainfloor:hover .topic-bar__arrow { color: var(--light-blue); }
.topic-bar__item--recovery:hover  .topic-bar__arrow { color: var(--light-blue); }
.topic-bar__item--training:hover  .topic-bar__arrow { color: var(--wood); }
.topic-bar__item--classes:hover   .topic-bar__arrow { color: var(--paper-cream); }

/* pending link state — still readable but clearly inactive */
.topic-bar__item[data-pending-link] {
  cursor: default;
  opacity: 0.55;
}
.topic-bar__item[data-pending-link]:hover {
  transform: none;
  background: var(--ink-900);
  border-color: rgba(10,14,26,0.25);
  box-shadow: none;
}
.topic-bar__item[data-pending-link]:hover::before { height: 3px; }
.topic-bar__item[data-pending-link]:hover .topic-bar__chev { transform: none; }
.topic-bar__item[data-pending-link]:hover .topic-bar__arrow { gap: 10px; color: rgba(246,243,238,0.62); }

@media (prefers-reduced-motion: reduce) {
  .topic-bar__item,
  .topic-bar__item::before,
  .topic-bar__arrow,
  .topic-bar__chev { transition: none; }
  .topic-bar__item:hover { transform: none; }
}

/* ---------- CLUB CARDS (homepage "Five clubs. One standard." row) ----------
 * Visually mirrors .topic-bar__item — dark card, color-coordinated accent
 * stripe at the top edge, lift on hover, arrow chev micro-motion. Each club
 * gets its own brand-palette accent so the row reads as a curated set, not
 * four interchangeable tiles.
 */
.club-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
}
.club-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 30px 28px 26px;
  min-height: 220px;
  text-decoration: none;
  color: var(--paper);
  background: var(--ink-700);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.7,.2,1),
    background 320ms ease,
    border-color 320ms ease,
    box-shadow 320ms ease;
}
.club-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
  transition: height 260ms ease;
}
.club-card:hover::before,
.club-card:focus-visible::before { height: 5px; }

.club-card:hover,
.club-card:focus-visible {
  background: var(--ink-500);
  border-color: rgba(255,255,255,0.14);
  transform: translateY(-4px);
  box-shadow:
    0 32px 64px -16px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,255,255,0.04) inset;
}
.club-card:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 2px; }

/* per-card accent colors — brand-palette only */
.club-card--pelham::before       { background: var(--light-blue); }
.club-card--yorktown::before     { background: var(--light-blue-deep); }
.club-card--somers::before       { background: var(--wood); }
.club-card--thornwood::before    { background: var(--steel); }
.club-card--portchester::before  { background: var(--wood-deep); }

.club-card__num {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  color: rgba(255,255,255,0.62);   /* WCAG AA: 0.40 was ~3.8:1 on --ink-700; 0.62 ≈ 5.5:1 */
  letter-spacing: 0.01em;
  margin-bottom: 16px;
}
.club-card__body {
  display: block;
  margin-bottom: auto;
}
.club-card__name {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--paper);
  margin: 0 0 10px;
}
.club-card__meta {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.52);
}
.club-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  transition: color 240ms ease, gap 240ms ease;
}
.club-card__chev {
  display: inline-block;
  transition: transform 260ms cubic-bezier(.2,.7,.2,1);
}
.club-card:hover .club-card__arrow,
.club-card:focus-visible .club-card__arrow { gap: 14px; }
.club-card:hover .club-card__chev,
.club-card:focus-visible .club-card__chev { transform: translateX(4px); }

/* arrow tint matches the per-card accent on hover */
.club-card--pelham:hover .club-card__arrow       { color: var(--light-blue); }
.club-card--yorktown:hover .club-card__arrow     { color: var(--light-blue); }
.club-card--somers:hover .club-card__arrow       { color: var(--wood); }
.club-card--thornwood:hover .club-card__arrow    { color: var(--paper); }
.club-card--portchester:hover .club-card__arrow  { color: var(--wood); }

/* 5-up variant for /clubs/ (locations) — five clubs in one row on wide
   viewports, then a balanced collapse on narrower screens. */
.club-cards--five { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1100px) {
  .club-cards--five { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .club-cards--five { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .club-cards--five { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .club-card,
  .club-card::before,
  .club-card__arrow,
  .club-card__chev { transition: none; }
  .club-card:hover { transform: none; }
}

@media (max-width: 900px) {
  .club-cards { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .club-card { min-height: 180px; padding: 26px 22px 22px; }
  .club-card__name { font-size: 26px; }
}
@media (max-width: 520px) {
  .club-cards { grid-template-columns: 1fr; gap: 12px; }
  .club-card {
    min-height: 96px;
    padding: 22px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }
  .club-card__num { margin-bottom: 0; }
  .club-card__body { margin-bottom: 0; }
  .club-card__name { margin-bottom: 4px; font-size: 22px; }
  .club-card__arrow { margin-top: 0; flex-shrink: 0; }
}

@media (max-width: 900px) {
  .topic-bar { padding: 44px 24px; }
  .topic-bar__inner { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .topic-bar__item { min-height: 154px; padding: 26px 22px 22px; }
  .topic-bar__label { font-size: 22px; }
}
@media (max-width: 520px) {
  .topic-bar { padding: 32px 16px; }
  .topic-bar__inner { grid-template-columns: 1fr; gap: 12px; }
  .topic-bar__item {
    min-height: 96px;
    padding: 22px 22px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .topic-bar__label { margin-bottom: 0; font-size: 22px; }
  .topic-bar__arrow { margin-top: 0; }
}

/* ---------- MANIFESTO ---------- */
.manifesto { padding: 140px 0; text-align: center; background: var(--paper); }
.manifesto__inner { max-width: 920px; margin: 0 auto; padding: 0 32px; }
.manifesto__quote {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink-900); margin: 32px 0 40px;
}
.manifesto__quote em { font-style: italic; color: var(--grey-500); }
.manifesto__rule { width: 56px; height: 1px; background: var(--ink-900); margin: 0 auto; opacity: 0.4; }

/* ---------- FEATURE (editorial alternating) ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; min-height: 80vh; }
.feature--dark { background: var(--ink-900); color: var(--paper); }
.feature--light { background: var(--paper-warm); color: var(--ink-900); }
.feature__media {
  position: relative;
  background-size: cover; background-position: center;
  min-height: 560px;
  filter: saturate(0.55);
}
.feature__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,14,26,0.1) 0%, rgba(10,14,26,0.4) 100%);
}
.feature__body {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 56px; max-width: 620px;
}
.feature__eyebrow { margin-bottom: 24px; }
.feature--dark .feature__eyebrow { color: var(--light-blue); }
.feature__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: var(--fs-h2); font-weight: 400; line-height: 1.05;
  letter-spacing: var(--ls-h2);
  margin-bottom: 28px; max-width: 14ch;
}
.feature__body p { font-size: 17px; line-height: 1.65; margin-bottom: 32px; max-width: 50ch; }
.feature--dark .feature__body p { color: rgba(255,255,255,0.78); }
.feature--light .feature__body p { color: var(--grey-700); }
.feature__list { list-style: none; border-top: 1px solid var(--grey-300); }
.feature--dark .feature__list { border-top-color: rgba(255,255,255,0.2); }
.feature__list li {
  padding: 16px 0; border-bottom: 1px solid var(--grey-300);
  display: flex; justify-content: space-between; gap: 24px;
  align-items: baseline;
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
}
.feature--dark .feature__list li { border-bottom-color: rgba(255,255,255,0.12); }
.feature__list span:first-child { flex: 1 1 auto; min-width: 0; }
.feature__list span:last-child {
  color: var(--grey-500);
  flex: 0 0 auto;
  text-align: right;
  white-space: nowrap;
}
.feature--dark .feature__list span:last-child { color: var(--light-blue); }
.feature--reverse .feature__media { order: 2; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
  .feature__body { padding: 56px 24px; }
  .feature__media { min-height: 380px; }
  .feature--reverse .feature__media { order: -1; }
}

/* ---------- CLUB GRID ---------- */
.clubs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px; background: rgba(255,255,255,0.08);
}
.club {
  background: var(--ink-700);
  padding: 40px 32px 32px;
  min-height: 420px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
  color: var(--paper);
  transition: background 350ms ease;
}
.club:hover { background: var(--ink-500); }
.club__num { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 300; font-style: italic; font-size: 14px; color: var(--light-blue); }
.club__name { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; margin: 16px 0 10px; }
.club__note { font-size: 13px; color: rgba(255,255,255,0.65); line-height: 1.5; max-width: 26ch; }
.club__meta {
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 16px; margin-top: 24px;
}
.club__arrow {
  position: absolute; top: 40px; right: 32px;
  width: 24px; height: 24px; color: rgba(255,255,255,0.65);
  transition: color 250ms ease, transform 250ms ease;
}
.club:hover .club__arrow { color: var(--light-blue); transform: translate(3px, -3px); }
@media (max-width: 1100px) { .clubs-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .clubs-grid { grid-template-columns: 1fr; } }

.clubs__head {
  max-width: var(--max); margin: 0 auto 72px; padding: 0 32px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 32px;
}
.clubs__head h2 {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.05;
  max-width: 14ch; letter-spacing: var(--ls-h2);
}
.clubs__head p { max-width: 40ch; color: rgba(255,255,255,0.7); }
.clubs__head--centered { justify-content: center; text-align: center; }
.clubs__head--centered h2 { max-width: none; }
@media (max-width: 640px) { .clubs__head { flex-direction: column; align-items: flex-start; } .clubs__head--centered { align-items: center; } }

/* ---------- APPLY ---------- */
.apply { padding: 96px 0; text-align: center; background: var(--paper); }
.apply__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: clamp(40px, 6vw, 84px);
  line-height: 1; letter-spacing: -0.02em;
  margin: 24px auto 32px; max-width: 16ch;
}
.apply__sub { max-width: 56ch; margin: 0 auto 48px; font-size: 17px; line-height: 1.6; color: var(--grey-700); }

/* ---------- FOOTER ---------- */
footer { background: var(--ink-900); color: rgba(255,255,255,0.72); padding: 80px 0 40px; font-size: 13px; }
footer .container { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 56px; margin-bottom: 64px; }
footer h4 { color: var(--paper); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-bottom: 20px; }
footer ul { list-style: none; }
footer li { margin-bottom: 10px; }
footer a:hover { color: var(--light-blue); }
.footer__hours { margin-top: 24px; }
.footer__hours p { line-height: 1.95; color: rgba(255,255,255,0.72); }
.footer__social { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--paper); letter-spacing: 0.04em; }
.footer__social:hover { color: var(--light-blue); }
.footer__social svg { flex: 0 0 auto; }

/* ── Weekly class schedule (tabbed by club, CSS-only) ─────────────────── */
.sched { max-width: var(--max); margin: 40px auto 0; padding: 0 32px; }
.sched__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sched__tab {
  display: inline-block; cursor: pointer; padding: 12px 22px; margin: 0 2px;
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey-500); border-bottom: 2px solid transparent;
  transition: color 200ms ease, border-color 200ms ease;
}
.sched__tab:hover { color: var(--ink-700); }
.sched__radio:checked + .sched__tab { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.sched__radio:focus-visible + .sched__tab { outline: 2px solid var(--light-blue-deep); outline-offset: 3px; }
.sched__panel { display: none; margin-top: 36px; }
#sched-pelham:checked   ~ .sched__panel[data-club="pelham"],
#sched-yorktown:checked ~ .sched__panel[data-club="yorktown"],
#sched-thornwood:checked ~ .sched__panel[data-club="thornwood"],
#sched-somers:checked   ~ .sched__panel[data-club="somers"] { display: block; }
.sched__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--grey-300); border: 1px solid var(--grey-300); }
.sched__day { background: var(--paper); padding: 16px 14px; min-height: 150px; display: flex; flex-direction: column; gap: 10px; }
.sched__dow { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey-500); }
.sched__c { font-size: 13px; line-height: 1.4; color: var(--grey-700); }
.sched__c b { display: block; font-weight: 600; color: var(--ink-900); font-size: 11px; letter-spacing: 0.04em; }
.sched__rest { font-size: 12px; color: var(--grey-500); font-style: italic; }
.sched__lead { font-size: 18px; color: var(--ink-700); margin-bottom: 20px; }
.sched__formats { display: flex; flex-wrap: wrap; gap: 10px; }
.sched__formats span { padding: 8px 16px; border: 1px solid var(--grey-300); border-radius: 999px; font-size: 13px; color: var(--ink-700); }
.sched__note { margin-top: 24px; font-size: 13px; color: var(--grey-500); text-align: center; }
.sched__note a { color: var(--light-blue-deep); border-bottom: 1px solid currentColor; }
@media (max-width: 820px) { .sched__week { grid-template-columns: 1fr; } .sched__day { min-height: 0; } }

/* Locations page — larger club cards to fill the space */
.club-cards--five .club-card { min-height: 320px; padding: 44px 34px 38px; }
.club-cards--five .club-card__name { font-size: 38px; }
@media (max-width: 1000px) { .club-cards--five .club-card { min-height: 240px; } }
.footer__brand { font-family: 'Libre Caslon Display', Georgia, serif; font-size: 22px; color: var(--paper); margin-bottom: 16px; }
.footer__brand span { color: var(--light-blue); }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 24px;
  display: flex; justify-content: space-between;
  font-size: 11px; letter-spacing: 0.08em; color: rgba(255,255,255,0.65);
}
@media (max-width: 820px) {
  footer .container { grid-template-columns: 1fr 1fr; gap: 40px; }
  .footer__bottom { flex-direction: column; gap: 12px; }
}

/* ---------- EDITORIAL TYPE BLOCKS ---------- */
.ed-head { text-align: center; max-width: 760px; margin: 0 auto 48px; padding: 0 32px; }
.ed-head h2 {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
  font-size: var(--fs-h2); line-height: 1.05;
  letter-spacing: var(--ls-h2); margin: 20px 0 16px;
}
.ed-head p { color: var(--grey-600); max-width: 56ch; margin: 0 auto; }
.ed-head--light h2 { color: var(--paper); }
.ed-head--light p { color: rgba(255,255,255,0.7); }

/* ---------- 2-col content (about / pillar pages) ---------- */
.two-col {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 96px; max-width: var(--max); margin: 0 auto; padding: 0 32px;
  align-items: start;
}
.two-col h3 {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
  font-size: 36px; line-height: 1.1; letter-spacing: -0.01em;
  margin-bottom: 24px;
}
.two-col p { margin-bottom: 20px; line-height: 1.7; color: var(--grey-700); }
.on-dark.two-col p, .section--dark .two-col p { color: rgba(255,255,255,0.78); }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- LIST / AMENITY STRIP ---------- */
.amenities {
  list-style: none; border-top: 1px solid var(--grey-300);
  max-width: 980px; margin: 0 auto; padding: 0 32px;
}
.amenities li {
  display: grid; grid-template-columns: 1fr 1.15fr 180px;
  gap: 24px; padding: 24px 0;
  border-bottom: 1px solid var(--grey-300);
  align-items: start;
}
/* Leading marker (numbers 01/02… and the hours "—") removed from menu-style lists */
.amenities li span:first-child { display: none; }
.amenities li h4 {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -0.005em;
}
.amenities li p { color: var(--grey-600); font-size: 15px; }
.amenities li span:last-child {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500);
  justify-self: end;
  /* Even when the label wraps to two lines (e.g. "YORKTOWN + SOMERS"),
     keep every line flush-right so the column reads as one rail. */
  text-align: right;
  white-space: normal;
  line-height: 1.4;
}
/* ---------- WALK OUTRO COLLAGE (Yorktown "come see it for yourself") ----------
 * Four looping clips fused into one clickable panel that leads to the
 * 3-day pass. Sits inside .walk__outro above the headline + CTA.
 */
.walk__outro-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  max-width: 1080px;
  margin: 0 auto 56px;
  padding: 0 24px;
  text-decoration: none;
  cursor: pointer;
}
.walk__outro-grid video,
.walk__outro-grid img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  transition: opacity 260ms ease;
}
.walk__outro-grid:hover video,
.walk__outro-grid:hover img,
.walk__outro-grid:focus-visible video,
.walk__outro-grid:focus-visible img { opacity: 0.82; }
.walk__outro-grid--three { grid-template-columns: repeat(3, 1fr); }
.walk__outro-grid--one { grid-template-columns: 1fr; }
.walk__outro-grid:focus-visible { outline: 2px solid var(--light-blue); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 600px) {
  .walk__outro-grid,
  .walk__outro-grid--three { grid-template-columns: 1fr; gap: 8px; padding: 0 16px; margin-bottom: 40px; }
}

/* ---------- HOURS OVER VIDEO (locations page "We're Open.") ----------
 * section--dark supplies the light text + amenity overrides; this adds the
 * looping footage behind a heavy tint so the hours stay crisp.
 */
.hours-live { position: relative; overflow: hidden; }
.hours-live__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hours-live::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(10,14,26,0.76);
  pointer-events: none;
}
.hours-live .ed-head,
.hours-live .amenities { position: relative; z-index: 1; }
.hours-live .ed-head p { color: rgba(255,255,255,0.78); }

.section--dark .amenities { border-top-color: rgba(255,255,255,0.15); }
.section--dark .amenities li { border-bottom-color: rgba(255,255,255,0.1); }
.section--dark .amenities li p { color: rgba(255,255,255,0.7); }
.section--dark .amenities li span:first-child { color: var(--light-blue); }
.section--dark .amenities li span:last-child { color: var(--light-blue); }
@media (max-width: 820px) { .amenities li { grid-template-columns: 1fr; gap: 6px; } .amenities li span:last-child { justify-self: start; } }

/* ---------- TRAINER / TEAM GRID ---------- */
.team {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.trainer {
  background: var(--paper-warm);
}
.trainer__photo {
  aspect-ratio: 3/4;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.4) contrast(1.05);
}
.trainer__body { padding: 24px 28px 32px; }
.trainer__name { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 24px; margin-bottom: 4px; }
.trainer__role { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 16px; }
.trainer__bio { font-size: 15px; line-height: 1.6; color: var(--grey-700); }
@media (max-width: 900px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } }

/* ---------- CLASS / SCHEDULE TABLE ---------- */
.schedule {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  border-top: 1px solid var(--grey-300);
}
.schedule__row {
  display: grid;
  grid-template-columns: 120px 1fr 1fr 1fr 120px;
  gap: 24px; padding: 22px 0;
  border-bottom: 1px solid var(--grey-300);
  align-items: center;
}
.schedule__row--head { color: var(--grey-500); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.schedule__row h4 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 20px; }
.schedule__row span { font-size: 14px; color: var(--grey-600); }
.schedule__row .tag { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); }
.schedule__row .book { justify-self: end; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; border-bottom: 1px solid currentColor; }
@media (max-width: 820px) { .schedule__row { grid-template-columns: 1fr; gap: 6px; padding: 18px 0; } }

/* ---------- FORM ---------- */
.form {
  display: grid; gap: 20px;
  max-width: 560px; margin: 0 auto;
}
.form label {
  display: block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px;
}
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font-family: inherit; font-size: 16px; color: var(--ink-900);
  outline: none;
  transition: border-color 200ms ease;
}
.on-dark .form input, .on-dark .form select, .on-dark .form textarea {
  color: var(--paper);
  border-bottom-color: rgba(255,255,255,0.25);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-bottom-color: var(--ink-900);
}
.on-dark .form input:focus, .on-dark .form select:focus { border-bottom-color: var(--light-blue); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }
.form__consent { font-size: 12px; color: var(--grey-500); line-height: 1.5; }
.on-dark .form__consent { color: rgba(255,255,255,0.72); }

/* ---------- JOURNAL / PRESS TILES ---------- */
.journal-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.journal-card { display: block; }
.journal-card__img {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.5);
  margin-bottom: 20px;
}
.journal-card__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 10px; }
.journal-card__title { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-900); }
.journal-card:hover .journal-card__title { color: var(--light-blue-deep); }
@media (max-width: 900px) { .journal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .journal-grid { grid-template-columns: 1fr; } }

/* ---------- MEMBERSHIP / PRICE (concealed pricing posture) ---------- */
.tiers {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tiers { grid-template-columns: 1fr; } }
.tier__term {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-500); font-weight: 500;
  border-top: 1px solid var(--grey-300);
  padding-top: 12px; margin-top: 12px;
}
.tier--featured .tier__term { color: var(--light-blue); border-top-color: rgba(255,255,255,0.15); }
.tier__promo {
  display: inline-block;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
  color: var(--light-blue-deep);
  border: 1px solid var(--light-blue-deep);
  padding: 4px 10px;
  margin-bottom: 8px;
}
.tier--featured .tier__promo { color: var(--light-blue); border-color: var(--light-blue); }
.tier__strike { text-decoration: line-through; color: var(--grey-500); margin-right: 6px; font-size: 13px; }
.tier-card .tier__promo { margin-bottom: 12px; }
.tier { background: var(--paper); padding: 36px 28px; display: flex; flex-direction: column; gap: 16px; }
.tier--featured { background: var(--ink-900); color: var(--paper); }
.tier__name { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 32px; letter-spacing: -0.01em; }
.tier__lede { font-size: 15px; color: var(--grey-600); line-height: 1.55; min-height: 60px; }
.tier--featured .tier__lede { color: rgba(255,255,255,0.75); }
.tier ul { list-style: none; border-top: 1px solid var(--grey-300); margin-top: 8px; padding-top: 16px; display: grid; gap: 12px; }
.tier--featured ul { border-top-color: rgba(255,255,255,0.15); }
.tier li { font-size: 14px; letter-spacing: 0.02em; display: flex; gap: 12px; align-items: flex-start; }
.tier li::before { content: "—"; color: var(--grey-500); flex-shrink: 0; }
.tier--featured li::before { color: var(--light-blue); }
.tier__cta { margin-top: auto; }
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr; } }

/* ---------- IMAGE HERO BACKGROUNDS (swap with your shoot) ---------- */
.hero-bg-flagship { background-image: url('https://images.unsplash.com/photo-1534438327276-14e5300c3a48?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-strength { background-image: url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-recovery { background-image: url('/assets/video/posters/yorktown-recovery.jpg'); }
.hero-bg-pilates  { background-image: url('https://images.unsplash.com/photo-1518611012118-696072aa579a?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-interior { background-image: url('https://images.unsplash.com/photo-1517836357463-d25dfeac3438?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-portrait { background-image: url('https://images.unsplash.com/photo-1594381898411-846e7d193883?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-coach    { background-image: url('https://images.unsplash.com/photo-1518310383802-640c2de311b2?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-sauna    { background-image: url('https://images.unsplash.com/photo-1540497077202-7c8a3999166f?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-club     { background-image: url('https://images.unsplash.com/photo-1571902943202-507ec2618e8f?auto=format&fit=crop&w=2400&q=80'); }
.hero-bg-darkgym  { background-image: url('https://images.unsplash.com/photo-1599058945522-28d584b6f0ff?auto=format&fit=crop&w=2400&q=80'); }

/* ---------- TIER EXTRAS ---------- */
.tier__eyebrow { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500); }
.tier--featured .tier__eyebrow { color: var(--light-blue); }
.tier__tag { font-size: 15px; color: var(--grey-600); line-height: 1.55; min-height: 60px; }
.tier--featured .tier__tag { color: rgba(255,255,255,0.78); }
.tier__list { list-style: none; border-top: 1px solid var(--grey-300); margin-top: 8px; padding-top: 16px; display: grid; gap: 12px; }
.tier--featured .tier__list { border-top-color: rgba(255,255,255,0.15); }
.tier__list li { font-size: 14px; letter-spacing: 0.02em; display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.tier__list li::before { content: "—"; color: var(--grey-500); flex-shrink: 0; }
.tier--featured .tier__list li::before { color: var(--light-blue); }
.tier .btn { margin-top: auto; align-self: flex-start; }

/* ---------- STEPS ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
.step { background: var(--paper); padding: 40px 36px; display: flex; flex-direction: column; gap: 12px; min-height: 260px; }
.step__num { font-family: 'Libre Caslon Display', Georgia, serif; font-style: italic; font-weight: 300; font-size: 28px; color: var(--grey-500); }
.step h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -0.005em; line-height: 1.15; }
.step p { font-size: 15px; color: var(--grey-600); line-height: 1.6; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr; } }

/* ---------- THREE-COL PRINCIPLES ---------- */
.three-col {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
}
.principle { display: flex; flex-direction: column; gap: 14px; }
.principle__num { font-family: 'Libre Caslon Display', Georgia, serif; font-style: italic; font-weight: 300; font-size: 24px; color: var(--grey-500); }
.principle h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 26px; letter-spacing: -0.005em; line-height: 1.15; }
.principle p { font-size: 15px; color: var(--grey-700); line-height: 1.65; }
@media (max-width: 820px) { .three-col { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- CONTACT GRID ---------- */
/* ---------- PHONE CARDS (contact page "Direct Lines") ----------
 * Five dark club cards — same visual language as the locations row and the
 * homepage topic cards. Flex-centered so the 3+2 wrap stays balanced.
 * Tap targets: the phone number is the hero; club page + directions below.
 */
.phone-cards {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
}
.phone-card {
  position: relative;
  flex: 0 1 350px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 30px 28px 22px;
  background: var(--ink-900);
  color: var(--paper);
  border: 1px solid rgba(10,14,26,0.25);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease, background 320ms ease;
}
.phone-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
}
.phone-card:hover {
  transform: translateY(-4px);
  background: var(--ink-700);
  box-shadow: 0 32px 64px -16px rgba(10,14,26,0.28);
}
.phone-card--pelham::before     { background: var(--light-blue); }
.phone-card--yorktown::before   { background: var(--light-blue-deep); }
.phone-card--somers::before     { background: var(--wood); }
.phone-card--thornwood::before  { background: var(--steel); }
.phone-card--portchester::before{ background: var(--wood-deep); }
.phone-card .eyebrow { color: var(--light-blue); }
.phone-card h4 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 23px;
  letter-spacing: -0.005em;
  color: var(--paper);
}
.phone-card__addr { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.68); }
.phone-card__note { font-size: 14px; line-height: 1.6; color: rgba(255,255,255,0.68); font-style: italic; }
.phone-card__tel {
  display: inline-block;
  margin-top: 10px;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--paper);
  transition: color 200ms ease;
}
.phone-card__tel:hover { color: var(--light-blue); }
.phone-card__links {
  display: flex;
  gap: 20px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.phone-card__links a {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  transition: color 200ms ease;
}
.phone-card__links a:hover { color: var(--paper); }
.phone-card__tel + .phone-card__links,
.phone-card__note + .phone-card__links { margin-top: 18px; }
@media (max-width: 640px) {
  .phone-cards { padding: 0 18px; gap: 12px; }
  .phone-card { flex-basis: 100%; min-width: 0; padding: 26px 22px 20px; }
}

.contact-grid {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--grey-300);
  max-width: var(--max); margin: 0 auto;
}
.contact-grid > li { background: var(--paper); padding: 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.contact-grid h4 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 24px; letter-spacing: -0.005em; margin: 4px 0; }
.contact-grid p { font-size: 15px; color: var(--grey-700); line-height: 1.6; }
.contact-grid a { border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.contact-grid a:hover { border-bottom-color: currentColor; }
.micro-link { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-900); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.micro-link:hover { color: var(--light-blue-deep); }
@media (max-width: 1000px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CAREERS ROLES LIST ---------- */
.roles { list-style: none; display: grid; gap: 2px; background: rgba(255,255,255,0.1); margin-top: 24px; }
.roles li {
  background: var(--ink-700); padding: 28px 32px;
  display: flex; justify-content: space-between; align-items: center; gap: 32px;
  transition: background 250ms ease;
}
.roles li:hover { background: var(--ink-500); }
.roles h4 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 22px; letter-spacing: -0.005em; color: var(--paper); margin-bottom: 4px; }
.roles p { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0; }
.roles .micro-link { color: var(--light-blue); border-bottom-color: var(--light-blue); white-space: nowrap; }
@media (max-width: 640px) { .roles li { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* ---------- POLICIES ---------- */
.policies {
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: grid; gap: 0; border-top: 1px solid var(--grey-300);
}
.policy { padding: 32px 0; border-bottom: 1px solid var(--grey-300); display: grid; grid-template-columns: 120px 1fr; gap: 48px; align-items: start; }
.policy .eyebrow { color: var(--grey-500); padding-top: 8px; }
.policy h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 26px; letter-spacing: -0.005em; margin-bottom: 12px; }
.policy p { font-size: 15px; color: var(--grey-700); line-height: 1.7; max-width: 72ch; }
@media (max-width: 820px) { .policy { grid-template-columns: 1fr; gap: 12px; } }

.legal-links {
  list-style: none;
  max-width: var(--max); margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 48px;
}
.legal-links li { border-bottom: 1px solid var(--grey-300); padding: 16px 0; }
.legal-links a { font-size: 15px; color: var(--ink-900); transition: color 200ms ease; display: flex; justify-content: space-between; }
.legal-links a::after { content: "→"; color: var(--grey-500); transition: transform 200ms ease; }
.legal-links a:hover { color: var(--light-blue-deep); }
.legal-links a:hover::after { transform: translateX(4px); }
@media (max-width: 640px) { .legal-links { grid-template-columns: 1fr; } }

/* ---------- SCHEDULE TABLE (classes.html) ---------- */
table.schedule {
  width: 100%; border-collapse: collapse;
  font-size: 14px; letter-spacing: 0.01em;
}
table.schedule th, table.schedule td {
  padding: 18px 0; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
table.schedule th {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500;
  color: var(--light-blue); padding-bottom: 14px;
}
table.schedule td { color: rgba(255,255,255,0.88); }
table.schedule td:first-child { color: var(--paper); font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 16px; letter-spacing: -0.005em; }
@media (max-width: 640px) {
  table.schedule, table.schedule thead, table.schedule tbody, table.schedule tr, table.schedule th, table.schedule td { display: block; }
  table.schedule thead { display: none; }
  table.schedule tr { border-bottom: 1px solid rgba(255,255,255,0.12); padding: 14px 0; }
  table.schedule td { padding: 2px 0; border: 0; }
  table.schedule td:first-child { font-size: 18px; margin-bottom: 6px; }
}

/* ---------- TEAM (trainer cards - direct content, no body wrap) ---------- */
.team { list-style: none; }
.team .trainer { padding: 0; background: var(--paper-warm); display: flex; flex-direction: column; }
.team .trainer .trainer__photo { aspect-ratio: 3/4; }
.team .trainer h4 {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 24px;
  letter-spacing: -0.005em; padding: 24px 28px 4px; margin: 0;
}
.team .trainer .trainer__role { padding: 0 28px; margin-bottom: 14px; }
.team .trainer p:not(.trainer__role):not(.trainer__tags) {
  padding: 0 28px; margin: 0 0 16px; font-size: 15px; line-height: 1.6; color: var(--grey-700);
}
.trainer__tags {
  padding: 16px 28px 24px; margin-top: auto;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-500); border-top: 1px solid var(--grey-300);
}

/* ---------- JOURNAL GRID (journal.html detail cards) ---------- */
.journal-grid { list-style: none; }
.journal-grid .journal {
  display: flex; flex-direction: column;
  background: var(--paper-warm); overflow: hidden;
  transition: transform 350ms ease;
}
.journal-grid .journal:hover { transform: translateY(-3px); }
.journal__cover {
  aspect-ratio: 4/3;
  background-size: cover; background-position: center;
  background-color: var(--ink-700);
  filter: saturate(0.45) contrast(1.02);
}
.journal__body { padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.journal__body h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.005em; color: var(--ink-900); }
.journal__body p { font-size: 15px; line-height: 1.6; color: var(--grey-700); }
.journal__meta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-top: auto; padding-top: 12px; border-top: 1px solid var(--grey-300); }

/* =========================================================
   PRODUCTION LAYER — Accessibility, Motion, Mobile Nav, SEO polish
   (Added last so it overrides where needed)
========================================================= */

/* ---------- SKIP LINK (a11y) ---------- */
.skip-link {
  position: absolute;
  left: -9999px; top: 0;
  background: var(--ink-900); color: var(--paper);
  padding: 14px 22px; z-index: 999;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.skip-link:focus { left: 16px; top: 16px; outline: 2px solid var(--light-blue); }

/* Visually-hidden but available to screen readers (e.g. form labels paired
   with placeholder-driven inputs in the waitlist popup). */
.sr-only {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------- FOCUS STATES ---------- */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 5px; }
a:focus-visible, button:focus-visible { outline-offset: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible {
  /* WCAG 1.4.11 (Non-text Contrast): light-blue on paper = 2.2:1 (fails 3:1).
     Pair the underline color shift with a 2px outline at the same hue so the
     focus state is visible regardless of which background is behind the field. */
  outline: 2px solid var(--light-blue-deep);
  outline-offset: 2px;
  border-bottom-color: var(--light-blue-deep);
}

/* ---------- MOTION — slower, more deliberate (luxury posture) ---------- */
.btn { transition: all var(--dur-fast) var(--ease) !important; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.nav, .nav__menu a, .nav__cta { transition: all var(--dur-fast) var(--ease) !important; }
.club, .trainer, .journal-grid .journal, .roles li { transition: all var(--dur-med) var(--ease) !important; }
.feature__media, .hero__bg { transition: transform 1.2s var(--ease); }

/* ---------- HERO TIGHTENING (display type) ---------- */
.hero__headline { line-height: 0.94; letter-spacing: -0.038em; max-width: 13ch; }
.hero__sub { font-size: 19px; max-width: 52ch; }
.apply__headline { letter-spacing: -0.035em; line-height: 0.94; }
.display { letter-spacing: -0.035em; }
.feature__headline { letter-spacing: -0.025em; line-height: 1.02; }

/* ---------- SCROLL REVEAL (activated by site.js) ---------- */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal--delay-1 { transition-delay: 120ms; }
.reveal--delay-2 { transition-delay: 240ms; }
.reveal--delay-3 { transition-delay: 360ms; }

/* ---------- MOBILE NAV (hamburger + slide panel) ---------- */
.nav__toggle {
  display: none;
  position: relative;
  width: 40px; height: 40px;
  background: transparent; border: 0;
  padding: 0; cursor: pointer;
  z-index: 100;
}
.nav__toggle span {
  position: absolute; left: 8px; right: 8px;
  height: 1.5px; background: currentColor;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav__toggle span:nth-child(1) { top: 14px; }
.nav__toggle span:nth-child(2) { top: 20px; }
.nav__toggle span:nth-child(3) { top: 26px; }
.nav-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  display: none;
  position: fixed; inset: 0;
  background: var(--ink-900); color: var(--paper);
  z-index: 90;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 36px;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-med) var(--ease);
}
.nav-open .nav__drawer { opacity: 1; pointer-events: auto; }
.nav__drawer a {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: clamp(28px, 6vw, 48px);
  letter-spacing: -0.02em; color: var(--paper);
  transition: color var(--dur-fast) var(--ease);
}
.nav__drawer a:hover { color: var(--light-blue); }
.nav__drawer .drawer__cta {
  margin-top: 24px;
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.4); padding: 14px 28px;
}

@media (max-width: 1080px) {
  .nav__toggle { display: block; }
  .nav__drawer { display: flex; }
  .nav__cta { display: none; }
  body.nav-open { overflow: hidden; }
}

/* ---------- IMAGE TREATMENT (editorial filter sitewide) ---------- */
.hero__bg, .feature__media, .trainer__photo, .journal__cover, .journal-card__img {
  filter: saturate(0.45) contrast(1.08) brightness(0.92);
}

/* ---------- PAGE NUMBER MARGINALIA (magazine sidebar) ---------- */
.page-meta {
  position: fixed; left: 24px; bottom: 24px;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-500); writing-mode: vertical-rl; transform: rotate(180deg);
  z-index: 40; pointer-events: none;
  display: flex; gap: 16px; align-items: center;
}
.page-meta::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; }
@media (max-width: 1100px) { .page-meta { display: none; } }

/* ---------- TOUCH TARGETS ---------- */
a, button, input[type="submit"], .btn { min-height: 44px; }
.nav__menu a { padding: 10px 0; }

/* ---------- PURCHASE / DIRECT ENROLLMENT ---------- */
.demo-banner {
  background: var(--wood);
  color: var(--paper);
  text-align: center;
  padding: 12px 24px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.demo-banner strong { font-weight: 600; margin-right: 8px; }

.purchase {
  max-width: 1040px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  gap: 80px;
}

.progress {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--grey-300);
  border-top: 1px solid var(--grey-300);
  border-bottom: 1px solid var(--grey-300);
}
.progress__step {
  background: var(--paper);
  padding: 18px 20px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-500);
  display: flex; align-items: baseline; gap: 10px;
}
.progress__step span {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic; font-weight: 300; font-size: 14px;
  color: var(--grey-500);
}
.progress__step.is-active { color: var(--ink-900); }
.progress__step.is-active span { color: var(--light-blue-deep); }
/* Mobile: tighten so all 4 steps fit on a 375px screen without clipping */
@media (max-width: 600px) {
  .progress__step {
    padding: 14px 8px;
    gap: 6px;
    font-size: 9.5px;
    letter-spacing: 0.14em;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .progress__step span { font-size: 12px; }
}

.purchase__step { display: grid; gap: 24px; }

.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.pick {
  position: relative;
  border: 1px solid var(--grey-300);
  padding: 24px 28px;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display: block;
}
.pick:hover { border-color: var(--ink-900); background: var(--paper-warm); }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick:has(input:checked) { border-color: var(--ink-900); background: var(--ink-900); color: var(--paper); }
.pick:has(input:checked) .pick__eyebrow { color: var(--light-blue); }
.pick:has(input:checked) p { color: rgba(255,255,255,0.72); }
.pick--disabled { opacity: 0.55; pointer-events: none; }
.pick--disabled:has(input:disabled) { background: var(--paper-warm); cursor: not-allowed; }
.pick__eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-500); margin-bottom: 10px;
}
.pick h3 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: 26px;
  letter-spacing: -0.005em; margin-bottom: 6px;
}
.pick p { font-size: 14px; color: var(--grey-600); line-height: 1.5; }
@media (max-width: 720px) { .pick-grid { grid-template-columns: 1fr; } }

.tier-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--grey-300);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease);
  display: block;
}
.tier-card:hover { border-color: var(--ink-900); }
.tier-card input { position: absolute; opacity: 0; pointer-events: none; }
.tier-card:has(input:checked) { border-color: var(--ink-900); outline: 2px solid var(--ink-900); outline-offset: -3px; }
.tier-card--featured { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.tier-card--featured:has(input:checked) { outline-color: var(--light-blue); }
.tier-card__body { padding: 28px 24px; display: flex; flex-direction: column; gap: 14px; min-height: 100%; }
.tier-card__body .tier__eyebrow {
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500);
}
.tier-card--featured .tier__eyebrow { color: var(--light-blue); }
.tier-card__body .tier__name {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em;
}
.tier__price { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 12px; }
.tier__amt {
  font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400;
  font-size: 44px; letter-spacing: -0.02em; line-height: 1;
}
.tier__per { font-size: 13px; color: var(--grey-500); }
.tier-card--featured .tier__per { color: rgba(255,255,255,0.7); }
.tier-card .tier__list {
  list-style: none; border-top: 1px solid var(--grey-300);
  margin-top: 8px; padding-top: 16px; display: grid; gap: 10px;
}
.tier-card--featured .tier__list { border-top-color: rgba(255,255,255,0.15); }
.tier-card .tier__list li {
  font-size: 13px; display: flex; gap: 10px; align-items: flex-start;
}
.tier-card .tier__list li::before { content: "—"; color: var(--grey-500); }
.tier-card--featured .tier__list li::before { color: var(--light-blue); }

.payment {
  display: grid; gap: 24px;
  border: 1px solid var(--grey-300);
  padding: 32px 32px 28px;
  background: var(--paper);
}
.payment__row { display: grid; gap: 8px; }
.payment__row label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500);
}
.payment__field {
  border: 1px solid var(--grey-300);
  padding: 14px 16px;
  background: var(--paper-warm);
  font-size: 16px; letter-spacing: 0.04em;
  color: var(--grey-500);
  min-height: 48px;
  display: flex; justify-content: space-between; align-items: center;
}
.payment__placeholder { font-family: 'SF Mono', Menlo, monospace; }
.payment__brand {
  font-size: 10px; letter-spacing: 0.22em; color: var(--grey-500); font-weight: 600;
}
.payment__grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.payment__note {
  font-size: 12px; color: var(--grey-500); line-height: 1.55;
  border-top: 1px solid var(--grey-300); padding-top: 16px; margin-top: 4px;
}
.payment__secure {
  display: flex; justify-content: center;
  border: 1px solid var(--grey-300); padding: 14px;
  background: var(--paper-warm);
}
.payment__lock { display: flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-600); }
@media (max-width: 640px) { .payment__grid { grid-template-columns: 1fr 1fr; } }

.review__summary {
  border: 1px solid var(--ink-900);
  padding: 40px 40px 32px;
  background: var(--paper);
  display: grid; gap: 20px;
}
.review__summary .eyebrow { color: var(--ink-900); }
.review__list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--grey-300); }
.review__list div {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--grey-300);
  padding: 14px 0;
  font-size: 14px;
}
.review__list dt { color: var(--grey-500); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; }
.review__list dd { font-weight: 500; color: var(--ink-900); }
.review__total { border-top: 2px solid var(--ink-900); margin-top: 4px; padding-top: 16px !important; }
.review__total dt { color: var(--ink-900) !important; font-size: 12px !important; font-weight: 500; }
.review__total dd { font-family: 'Libre Caslon Display', Georgia, serif !important; font-size: 24px !important; font-weight: 400; }
.review__legal { font-size: 12px; color: var(--grey-500); line-height: 1.6; }
.review__consent {
  display: flex; gap: 14px; align-items: flex-start;
  font-size: 13px; line-height: 1.55; color: var(--grey-700);
  border-top: 1px solid var(--grey-300); padding-top: 20px;
}
.review__consent input { margin-top: 3px; flex-shrink: 0; }
.review__consent a { border-bottom: 1px solid currentColor; }
.review__cta { justify-self: start; margin-top: 8px; }
.review__alt { font-size: 13px; color: var(--grey-500); }
.review__alt a { border-bottom: 1px solid currentColor; }

/* =========================================================
   APP SECTION + DOWNLOAD BUTTONS (home page + global footer)
========================================================= */
.app-section {
  background: var(--ink-900);
  color: var(--paper);
  padding: 140px 32px;
  position: relative;
  overflow: hidden;
}
.app-section::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(154,180,212,0.12), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139,111,78,0.06), transparent 50%);
  pointer-events: none;
}
.app-section__layout {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 96px;
  align-items: center;
  z-index: 2;
}
.app-section .eyebrow { color: var(--light-blue); margin-bottom: 24px; display: inline-block; }
.app-section__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 72px);
  line-height: 0.98; letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.app-section__headline em { font-style: italic; color: var(--light-blue); }
.app-section__sub { font-size: 18px; line-height: 1.55; color: rgba(255,255,255,0.75); max-width: 48ch; margin-bottom: 40px; }

.app-feature-list {
  list-style: none;
  display: grid; gap: 20px;
  margin-bottom: 44px;
}
.app-feature-list li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}
.app-feature-list svg {
  width: 24px; height: 24px;
  color: var(--light-blue);
  margin-top: 3px;
}
.app-feature-list strong {
  display: block;
  font-weight: 500; font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 4px;
  color: var(--paper);
}
.app-feature-list p {
  font-size: 14px; line-height: 1.55;
  color: rgba(255,255,255,0.72);
}

.app-section .download-badges { justify-content: flex-start; margin-bottom: 20px; }
.app-section__alt { font-size: 13px; letter-spacing: 0.08em; color: rgba(255,255,255,0.72); }
.app-section__alt a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Phone mockup ---------- */
.phone-showcase {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  min-height: 680px;
}
.phone-showcase__glow {
  position: absolute;
  width: 440px; height: 440px;
  background: radial-gradient(circle, rgba(154,180,212,0.25), transparent 60%);
  filter: blur(60px);
  z-index: 0;
  pointer-events: none;
}
.phone {
  position: relative;
  width: 320px; height: 648px;
  background: #1a1d24;
  border-radius: 44px;
  padding: 10px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.08),
    0 40px 80px -20px rgba(0,0,0,0.6),
    0 12px 24px -8px rgba(0,0,0,0.4);
  transform: rotate(-3deg);
  transition: transform var(--dur-slow) var(--ease);
  z-index: 1;
}
.phone:hover { transform: rotate(0deg); }
@media (prefers-reduced-motion: no-preference) {
  .phone { animation: phoneFloat 6s ease-in-out infinite; }
  @keyframes phoneFloat {
    0%, 100% { transform: rotate(-3deg) translateY(0); }
    50%      { transform: rotate(-2deg) translateY(-10px); }
  }
}
.phone__screen {
  background: var(--ink-900);
  border-radius: 36px;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
}
.phone__island {
  position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px;
  background: #000;
  border-radius: 14px;
  z-index: 10;
}

/* ---------- App UI inside the phone — matches real Level app ---------- */
/* NOTE: Phone frame stays dark matte; SCREEN is white to match the real app. */
.phone__screen { background: #ffffff; }

.app-ui {
  flex: 1;
  display: flex; flex-direction: column;
  background: #ffffff;
  color: #0F172A;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  position: relative;
  overflow: hidden;
}
.app-ui__status {
  position: absolute;
  top: 18px; left: 0; right: 0;
  z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 22px;
  font-size: 12px; font-weight: 600;
  letter-spacing: -0.01em;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.app-ui__time { padding-left: 4px; }
.app-ui__icons { display: inline-flex; align-items: center; gap: 5px; }
.app-ui__status svg { display: block; color: #0F172A; }
.app-ui__signal  { width: 15px; height: 10px; }
.app-ui__wifi    { width: 14px; height: 10px; }
.app-ui__battery { width: 22px; height: 10px; }

/* --- Brand block (top of app) --- */
.app-ui__brand {
  padding: 48px 20px 16px;
  text-align: center;
  border-bottom: 1px solid #F1F5F9;
  background: #ffffff;
}
/* 3-bar E — matches PNG logo letterform:
   top+bottom bars full width, middle bar 75% width (right edge retracts).
   Bar:gap ratio is 2:1 (bars 4px, gaps 2px) — matches real logo 40:20. */
.app-ui__brand-logo {
  display: flex; flex-direction: column;
  align-items: flex-start;        /* so explicit widths are respected */
  gap: 2px;
  width: 12px;
  margin: 0 auto;
}
.app-ui__brand-logo span {
  display: block;
  width: 12px;                     /* top + bottom bars (full width) */
  height: 4px;
  background: #0F172A;
  border-radius: 0.5px;
}
.app-ui__brand-logo span:nth-child(2) {
  width: 9px;                      /* middle bar, 75% of top/bottom */
}
.app-ui__brand-fitness {
  font-size: 6px; font-weight: 700;
  letter-spacing: 0.26em;
  color: #0F172A;
  margin-top: 5px;
}
.app-ui__brand-greeting {
  font-size: 10px; color: #64748B;
  margin: 10px 0 1px;
  font-style: italic;
}
.app-ui__brand-name {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 500; font-size: 22px;
  letter-spacing: -0.01em;
  color: #0F172A;
  line-height: 1.1;
}

/* --- Scroll content region (grey bg like iOS list) --- */
.app-ui__content {
  flex: 1;
  padding: 14px 0 10px;
  background: #F8FAFC;
  overflow: hidden;
  position: relative;
}

/* --- Date header + carousel --- */
.app-ui__date-head {
  padding: 0 18px;
  font-size: 11px; font-weight: 600;
  color: #0F172A;
  margin-bottom: 8px;
}
.app-ui__dates {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 4px;
  padding: 0 14px;
  margin-bottom: 12px;
}
.app-ui__date {
  text-align: center;
  padding: 5px 0 4px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 8px;
}
.app-ui__date-num {
  display: block; font-size: 12px; font-weight: 700;
  color: #0F172A; line-height: 1;
}
.app-ui__date-day {
  display: block; font-size: 7px;
  color: #64748B; letter-spacing: 0.04em;
  margin-top: 2px;
}
.app-ui__date--active {
  background: #FEF3C7;
  border-color: #F59E0B;
}
.app-ui__date--active .app-ui__date-num { color: #78350F; }
.app-ui__date--active .app-ui__date-day { color: #92400E; }
.app-ui__date--active::after {
  content: ""; display: block;
  width: 3px; height: 3px; border-radius: 50%;
  background: #92400E;
  margin: 2px auto 0;
}

/* --- Row card (class / appointment) --- */
.app-ui__card-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px;
  margin: 0 14px 6px;
  position: relative;
}
.app-ui__card-icon {
  width: 28px; height: 28px; border-radius: 50%;
  background: #F1F5F9;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.app-ui__card-icon svg { width: 14px; height: 14px; color: #0F172A; }
.app-ui__card-icon--red { background: #FEE2E2; }
.app-ui__card-icon--red svg { color: #DC2626; }
.app-ui__card-body { flex: 1; min-width: 0; padding-right: 14px; }
.app-ui__card-title {
  font-size: 12px; font-weight: 500;
  color: #0F172A; letter-spacing: -0.005em;
  line-height: 1.2;
}
.app-ui__card-sub {
  font-size: 9px; color: #94A3B8;
  margin: 2px 0 4px;
}
.app-ui__tag {
  display: inline-block;
  padding: 2px 7px;
  font-size: 8px; font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 4px;
}
.app-ui__tag--class       { background: #FEF3C7; color: #92400E; }
.app-ui__tag--nutrition   { background: #FCE7F3; color: #BE185D; }
.app-ui__tag--appointment { background: #FEF3C7; color: #92400E; }
.app-ui__chevron {
  position: absolute; right: 10px; top: 14px;
  width: 12px; height: 12px; color: #CBD5E1;
}

/* --- Nutrition card (with rings) --- */
.app-ui__card-nutrition {
  background: #ffffff;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 10px 12px 11px;
  margin: 0 14px 6px;
  position: relative;
}
.app-ui__nutrition-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px;
  padding-right: 16px;
}
.app-ui__nutrition-head-title {
  font-size: 11px; font-weight: 500;
  color: #0F172A;
  flex: 1;
  letter-spacing: -0.005em;
}
.app-ui__rings {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 2px; margin-bottom: 6px;
}
.app-ui__ring { text-align: center; }
.app-ui__ring-circle {
  width: 44px; height: 44px;
  margin: 0 auto 1px;
  position: relative;
}
.app-ui__ring-circle svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}
.app-ui__ring-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  line-height: 1;
}
.app-ui__ring-value {
  font-size: 8px; font-weight: 700;
  color: #0F172A;
}
.app-ui__ring-unit {
  font-size: 6px; color: #64748B;
  margin-top: 1px;
  letter-spacing: 0.02em;
}
.app-ui__ring-pct {
  display: block;
  font-size: 7px; color: #94A3B8;
  margin-top: 1px;
}

/* --- Show more --- */
.app-ui__show-more {
  text-align: center;
  font-size: 10px;
  color: #64748B;
  padding: 10px 0 14px;
}
.app-ui__show-more svg {
  display: block;
  width: 10px; height: 10px;
  margin: 3px auto 0;
  color: #94A3B8;
}

/* --- Floating action buttons --- */
.app-ui__fabs {
  position: absolute;
  right: 10px;
  top: 58%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 7px;
  z-index: 4;
}
.app-ui__fab {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(15,23,42,0.12);
  color: white;
}
.app-ui__fab svg { width: 14px; height: 14px; }
.app-ui__fab--add  { background: #64748B; }
.app-ui__fab--user { background: #CBD5E1; color: #475569; }
.app-ui__fab--qr   { background: #334155; }

/* ---------- App-page: centered phone showcase + annotations ---------- */
.app-showcase {
  background: var(--ink-900);
  color: var(--paper);
  padding: 120px 32px 140px;
  position: relative;
  overflow: hidden;
}
.app-showcase::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(154,180,212,0.12), transparent 55%),
    radial-gradient(ellipse at 80% 80%, rgba(139,111,78,0.06), transparent 55%);
  pointer-events: none;
}
.app-showcase__head {
  position: relative; z-index: 2;
  max-width: 760px;
  margin: 0 auto 72px;
  text-align: center;
}
.app-showcase__head .eyebrow {
  color: var(--light-blue);
  display: inline-block;
  margin-bottom: 20px;
}
.app-showcase__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.0; letter-spacing: -0.025em;
  margin-bottom: 20px;
  color: var(--paper);
}
.app-showcase__headline em { font-style: italic; color: var(--light-blue); }
.app-showcase__sub {
  font-size: 17px; line-height: 1.55;
  color: rgba(255,255,255,0.7);
  max-width: 52ch;
  margin: 0 auto;
}

/* Stage: phone centered, annotations flanking on desktop */
.app-showcase__stage {
  position: relative; z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 48px;
  align-items: center;
}
.app-showcase__annotations {
  display: flex; flex-direction: column;
  gap: 64px;
}
.app-showcase__annotations--left { justify-self: end; text-align: right; }
.app-showcase__annotations--right { justify-self: start; text-align: left; }
.phone-showcase--centered { min-height: 680px; }

.annotation {
  display: grid;
  gap: 6px;
  max-width: 220px;
  position: relative;
}
.annotation--right { padding-right: 40px; }
.annotation--left  { padding-left: 40px; }
.annotation--right::after,
.annotation--left::after {
  content: "";
  position: absolute;
  top: 14px;
  width: 28px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(154,180,212,0.5));
}
.annotation--right::after { right: 0; }
.annotation--left::after {
  left: 0;
  background: linear-gradient(to left, transparent, rgba(154,180,212,0.5));
}
.annotation__num {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--light-blue);
  font-variant-numeric: tabular-nums;
}
.annotation strong {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 20px;
  letter-spacing: -0.005em;
  color: var(--paper);
  line-height: 1.2;
  margin-top: 4px;
}
.annotation p {
  font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,0.72);
  margin-top: 2px;
}
.app-showcase__caption {
  position: relative; z-index: 2;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 56px;
}

@media (max-width: 1080px) {
  .app-showcase__stage { grid-template-columns: 1fr; gap: 40px; }
  .app-showcase__annotations { flex-direction: row; gap: 24px; justify-self: center !important; text-align: left !important; max-width: 680px; }
  .app-showcase__annotations--left  { order: 2; }
  .phone-showcase--centered         { order: 1; }
  .app-showcase__annotations--right { order: 3; }
  .annotation { padding: 0 !important; }
  .annotation--right::after, .annotation--left::after { display: none; }
}
@media (max-width: 640px) {
  .app-showcase { padding: 80px 24px 100px; }
  .app-showcase__annotations { flex-direction: column; }
}

@media (max-width: 900px) {
  .app-section__layout { grid-template-columns: 1fr; gap: 60px; }
  .phone-showcase { min-height: auto; order: 2; }
  .app-section__content { order: 1; text-align: center; }
  .app-section .download-badges { justify-content: center; }
  .app-feature-list { text-align: left; max-width: 420px; margin-left: auto; margin-right: auto; }
  .app-section { padding: 100px 24px; }
  .phone { width: 280px; height: 568px; }
}

/* ---------- "Up next" bridge — keeps eyes moving into the next chapter ---------- */
.up-next {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 96px auto 0;
  padding: 24px 0 0;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
  text-decoration: none;
  color: var(--paper);
  transition: border-color var(--dur-med) var(--ease);
}
.up-next:hover { border-color: rgba(154,180,212,0.45); }
.up-next__label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
}
.up-next__chapter {
  display: flex; align-items: baseline; gap: 18px;
  min-width: 0;
}
.up-next__num {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--light-blue);
  font-variant-numeric: tabular-nums;
}
.up-next__name {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: clamp(20px, 2.4vw, 28px);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--paper);
  line-height: 1.25;
  transition: color var(--dur-med) var(--ease);
}
.up-next__name em {
  font-style: italic;
  color: rgba(255,255,255,0.72);
  transition: color var(--dur-med) var(--ease);
}
.up-next:hover .up-next__name em { color: var(--light-blue); }
.up-next__arrow {
  width: 36px; height: 36px;
  color: var(--light-blue);
  flex-shrink: 0;
  transition: transform var(--dur-med) var(--ease);
}
@media (prefers-reduced-motion: no-preference) {
  .up-next__arrow { animation: upNextBounce 2.4s ease-in-out infinite; }
  @keyframes upNextBounce {
    0%, 100% { transform: translateY(0); opacity: 0.85; }
    50%      { transform: translateY(8px); opacity: 1; }
  }
}
.up-next:hover .up-next__arrow {
  animation: none;
  transform: translateY(4px) scale(1.08);
}
@media (max-width: 720px) {
  .up-next {
    grid-template-columns: 1fr auto;
    gap: 16px 24px;
    margin-top: 72px;
  }
  .up-next__label { grid-column: 1 / -1; order: -1; }
  .up-next__chapter { flex-wrap: wrap; gap: 8px 14px; }
  .up-next__arrow { width: 30px; height: 30px; }
}

.download-badges {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  margin-bottom: 40px;
}
.download-btn {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 28px;
  background: var(--paper);
  color: var(--ink-900);
  border-radius: 2px;
  min-height: 60px;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.download-btn:hover { transform: translateY(-2px); background: var(--light-blue); }
.download-btn svg { flex-shrink: 0; }
.download-btn__labels { display: flex; flex-direction: column; text-align: left; line-height: 1.1; }
.download-btn__label { font-size: 11px; letter-spacing: 0.08em; font-weight: 400; color: var(--grey-500); text-transform: uppercase; }
.download-btn__name { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink-900); }
/* Inverted version (for dark backgrounds using ink buttons) */
.download-btn--ink {
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(255,255,255,0.35);
}
.download-btn--ink .download-btn__name { color: var(--paper); }
.download-btn--ink .download-btn__label { color: rgba(255,255,255,0.72); }
.download-btn--ink:hover { background: var(--paper); color: var(--ink-900); border-color: var(--paper); }
.download-btn--ink:hover .download-btn__name { color: var(--ink-900); }
.download-btn--ink:hover .download-btn__label { color: var(--grey-500); }

.app-section__alt { font-size: 13px; letter-spacing: 0.1em; color: rgba(255,255,255,0.72); }
.app-section__alt a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

/* ---------- Global footer app banner ---------- */
/* Cancel/freeze strip under the app banner — same footprint, quieter voice */
.app-banner--break { border-top: 1px solid rgba(255,255,255,0.12); }
.app-banner__actions { display: flex; gap: 14px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .app-banner__actions { width: 100%; }
  .app-banner__actions .btn { flex: 1 1 auto; text-align: center; justify-content: center; }
}

.app-banner {
  background: var(--ink-900);
  color: var(--paper);
  padding: 28px 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.app-banner__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.app-banner__copy .eyebrow { color: var(--light-blue); margin-bottom: 8px; }
.app-banner__copy h3 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em; margin-bottom: 4px;
  color: var(--paper);
}
.app-banner__copy p { font-size: 14px; color: rgba(255,255,255,0.65); }
.app-banner .download-badges { margin-bottom: 0; justify-content: flex-end; text-align: right; }
@media (max-width: 820px) {
  .app-banner__inner { grid-template-columns: 1fr; text-align: center; }
  .app-banner .download-badges { justify-content: center; }
}

/* =========================================================
   ACCOUNT / AUTH PAGES
========================================================= */
.auth {
  min-height: calc(100vh - var(--nav-h));
  background: var(--paper-warm);
  display: grid; place-items: center;
  padding: calc(var(--nav-h) + 48px) 24px 72px;
}
.auth__card {
  background: var(--paper);
  border: 1px solid var(--grey-300);
  padding: 56px 48px;
  width: 100%; max-width: 480px;
}
.auth__eyebrow { margin-bottom: 16px; }
.auth__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: 48px; line-height: 1.05;
  letter-spacing: -0.025em; margin-bottom: 16px;
}
.auth__headline em { color: var(--grey-500); font-style: italic; font-weight: 300; }
.auth__sub { font-size: 15px; color: var(--grey-600); line-height: 1.55; margin-bottom: 32px; }
.auth__form { display: grid; gap: 20px; }
.auth__form label {
  display: block; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--grey-500); margin-bottom: 8px;
}
.auth__form input[type="text"],
.auth__form input[type="email"],
.auth__form input[type="tel"],
.auth__form input[type="password"] {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font-family: inherit; font-size: 16px; color: var(--ink-900);
  outline: none;
  transition: border-color 200ms ease;
}
.auth__form input:focus { border-bottom-color: var(--ink-900); }
.auth__hint { font-size: 12px; color: var(--grey-500); margin-top: 6px; line-height: 1.5; }
.auth__remember, .auth__consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--grey-700); line-height: 1.55; }
.auth__remember input, .auth__consent input { margin-top: 3px; }
.auth__consent a { border-bottom: 1px solid currentColor; }
.auth__error {
  font-size: 13px; color: #C0392B;
  background: rgba(192, 57, 43, 0.08);
  padding: 10px 14px;
  border-left: 2px solid #C0392B;
}
.auth__success {
  font-size: 13px; color: var(--ink-900);
  background: rgba(154, 180, 212, 0.15);
  padding: 10px 14px;
  border-left: 2px solid var(--light-blue-deep);
}
.auth__submit { justify-self: start; margin-top: 4px; }
.auth__footer {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--grey-300);
  font-size: 14px; color: var(--grey-700); line-height: 1.8;
}
.auth__footer a { border-bottom: 1px solid currentColor; }
.auth__fine { font-size: 12px; color: var(--grey-500); margin-top: 6px; }

/* ---------- Account dashboard ---------- */
.account__hero { padding: calc(var(--nav-h) + 60px) 0 40px; }
.account__welcome { font-size: clamp(40px, 6vw, 84px); line-height: 1; margin: 12px 0 16px; }
.account__meta { font-size: 14px; color: var(--grey-600); letter-spacing: 0.02em; }
.account__amount {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400; font-size: 28px;
  letter-spacing: -0.01em; margin-top: 8px;
}

.tabs {
  display: flex; gap: 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--grey-300);
  margin-bottom: 48px;
}
.tabs .tab {
  padding: 18px 24px;
  background: transparent; border: 0;
  font-family: inherit; font-size: 12px;
  letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--grey-500);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.tabs .tab:hover { color: var(--ink-900); }
.tabs .tab.is-active { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }
.tab-panel[hidden] { display: none !important; }

/* ---------- VIDEO HERO BACKGROUND ---------- */
.hero__bg--video {
  background-image: none !important;
  filter: none !important;
  background-color: var(--ink-900);
}
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.hero__bg--video::before,
.hero__bg--video::after { z-index: 1; }

/* Hero still as motion-graphic — a photograph that reads almost like video.
   Inherits the dark gradient + film-grain + desaturated grade from .hero__bg
   so it matches the site palette automatically. The slow, alternating
   Ken-Burns push keeps it alive without ever distracting. */
.hero__bg--photo {
  background-image: none !important;
  filter: none !important;
  background-color: var(--ink-900);
}
.hero__bg-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 46%;
  z-index: 0; pointer-events: none;
  filter: saturate(0.55) contrast(1.05);     /* match the site's hero grade */
  transform-origin: 60% 44%;
  animation: heroKenBurns 30s ease-in-out infinite alternate both;
  will-change: transform;
  backface-visibility: hidden;
}
.hero__bg--photo::before,
.hero__bg--photo::after { z-index: 1; }
@keyframes heroKenBurns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.16) translate3d(-1.4%, -1.2%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-photo { animation: none; transform: scale(1.05); }
}

.feature__media--video {
  background-image: none !important;
  filter: none !important;
  background-color: var(--ink-900);
}
.feature__media-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
.feature__media--video::after { z-index: 1; }

/* ============================================================
   "A walk through" — cinematic chapter experience (clubs/somers.html)
   Each clip is its own viewport-tall chapter with editorial copy.
   Alternates left/right. Dark theme throughout.
   ============================================================ */
.walk {
  background: var(--ink-900);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}
.walk::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(154,180,212,0.06), transparent 50%);
  pointer-events: none; z-index: 0;
}
.walk__intro {
  padding: 80px 32px 64px;
  text-align: center;
  position: relative; z-index: 1;
}
.walk__intro .eyebrow { display: inline-block; margin-bottom: 24px; }
.walk__intro h2 { margin-bottom: 18px; }
.walk__intro p {
  font-size: 18px; line-height: 1.6;
  color: rgba(255,255,255,0.72);
  max-width: 56ch; margin: 0 auto;
}

/* Each chapter — alternating left/right layout */
.walk-chapter {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  /* Skip rendering + video decode for off-screen chapters until they scroll
     near the viewport. contain-intrinsic-size reserves the row height so
     there's no scrollbar jump (zero CLS). */
  content-visibility: auto;
  contain-intrinsic-size: auto 460px;
}
.walk-chapter--reverse .walk-chapter__media { order: 2; }
.walk-chapter--reverse .walk-chapter__copy  { order: 1; }

.walk-chapter__media {
  position: relative;
  background: var(--ink-700);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.walk-chapter__media video,
.walk-chapter__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.walk-chapter__media img,
.walk-chapter__media video { filter: saturate(0.62) contrast(1.05); }
.walk-chapter__media::after {
  /* subtle vignette for depth */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, rgba(10,14,26,0.35) 100%);
  pointer-events: none;
  z-index: 1;
}

.walk-chapter__copy {
  display: flex;
  align-items: center;
  padding: 80px clamp(40px, 6vw, 96px);
  position: relative;
}
.walk-chapter__copy > div { max-width: 480px; }

.walk-chapter__num {
  display: block;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 6vw, 88px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--light-blue);
  margin-bottom: 28px;
}
.walk-chapter__title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  color: var(--paper);
}
.walk-chapter__lede {
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.78);
}

/* Outro — closes the experience */
.walk__outro {
  padding: 120px 32px 140px;
  text-align: center;
  position: relative; z-index: 1;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.walk__outro .eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  color: rgba(255,255,255,0.55);
}
.walk__outro-headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 36px;
  color: var(--paper);
}
.walk__outro-headline em { font-style: italic; color: var(--light-blue); }

/* Mobile — stack vertically, video on top */
@media (max-width: 900px) {
  .walk__intro { padding: 60px 24px 44px; }
  .walk-chapter {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .walk-chapter--reverse .walk-chapter__media { order: 0; }
  .walk-chapter--reverse .walk-chapter__copy  { order: 1; }
  .walk-chapter__media { aspect-ratio: 16 / 9; min-height: auto; }
  .walk-chapter__copy { padding: 56px 24px 80px; }
  .walk__outro { padding: 80px 24px 100px; }
}

/* ---------- LOGO IMAGES (sharp SVG, sized per context) ---------- */
.nav__logo img, .footer__brand img, .nav__drawer img {
  display: block;
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
  color: var(--paper);
}
.nav__logo { line-height: 0; }
/* Heights scaled up 1.56× to keep LEVEL wordmark same visible size now that
   logo.svg includes FITNESS subtitle (viewBox 720×250 vs old 720×160). */
.nav__logo img { height: 54px; color: var(--paper); }
.nav--light .nav__logo img { color: var(--ink-900); }
.footer__brand { line-height: 0; margin-bottom: 20px; }
.footer__brand img { height: 64px; color: var(--paper); }
@media (max-width: 640px) {
  .nav__logo img { height: 44px; }
}

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

/* ============================================================
   COOKIE CONSENT BANNER — see assets/js/consent.js
   ============================================================ */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(10,14,26,0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.08);
  color: var(--paper);
  animation: consentSlide 400ms var(--ease);
}
@keyframes consentSlide { from { transform: translateY(100%); } to { transform: translateY(0); } }
.consent__inner {
  max-width: 1280px; margin: 0 auto;
  padding: 18px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px; align-items: center;
}
.consent__title {
  font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 4px;
  font-weight: 500;
}
.consent__copy p {
  font-size: 13px; line-height: 1.55;
  color: rgba(255,255,255,0.75);
  margin: 0; max-width: 72ch;
}
.consent__copy a { color: var(--light-blue); border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.consent__actions { display: flex; gap: 10px; flex-shrink: 0; }
.consent__btn {
  padding: 10px 22px;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 500;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  color: var(--paper);
  transition: all var(--dur-med) var(--ease);
}
.consent__btn--ghost { border-color: rgba(255,255,255,0.2); }
.consent__btn--ghost:hover { border-color: rgba(255,255,255,0.72); }
.consent__btn--primary { background: var(--paper); color: var(--ink-900); }
.consent__btn--primary:hover { background: var(--light-blue); }
@media (max-width: 720px) {
  .consent__inner { grid-template-columns: 1fr; gap: 14px; padding: 16px 20px; }
  .consent__actions { justify-content: stretch; }
  .consent__btn { flex: 1; padding: 12px 16px; }
}

/* ============================================================
   MEMBERSHIP MODALS — change tier / freeze / cancel
   Native <dialog> with luxury editorial styling
   ============================================================ */
.modal {
  border: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink-900);
  max-width: 560px;
  width: calc(100vw - 48px);
  border-radius: 6px;
  box-shadow: 0 30px 80px rgba(10,14,26,0.45), 0 6px 16px rgba(10,14,26,0.18);
  animation: modal-rise 280ms var(--ease);
}
.modal::backdrop {
  background: rgba(10,14,26,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__inner {
  position: relative;
  padding: 56px 48px 40px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.modal__inner .eyebrow {
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--grey-500);
  margin-bottom: 12px;
}
.modal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: var(--grey-500);
  cursor: pointer;
  border-radius: 50%;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.modal__close:hover { background: var(--paper-cream); color: var(--ink-900); }

.modal__title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink-900);
  margin: 0 0 14px;
}
.modal__lede {
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0 0 28px;
}
.modal__lede strong { color: var(--ink-900); font-weight: 500; }

.modal__field {
  display: grid;
  gap: 6px;
  margin-bottom: 18px;
}
.modal__field label {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-600);
  font-weight: 500;
}
.modal__field input,
.modal__field select,
.modal__field textarea {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--grey-300);
  padding: 10px 0;
  font: inherit;
  font-size: 16px;
  color: var(--ink-900);
  border-radius: 0;
  transition: border-color var(--dur-med) var(--ease);
}
.modal__field input:focus,
.modal__field select:focus,
.modal__field textarea:focus {
  border-bottom-color: var(--light-blue-deep);
  outline: none;
}
.modal__field textarea {
  resize: vertical;
  min-height: 70px;
  padding: 8px 0;
}
.modal__hint,
.modal__hint--inline {
  font-size: 12px;
  color: var(--grey-500);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.modal__hint--inline { margin-left: 6px; }

/* Tier picker (radio cards) */
.modal__tiers {
  border: 0; padding: 0; margin: 0 0 18px;
  display: grid; gap: 10px;
}
.modal__tier {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.modal__tier:hover { border-color: var(--ink-900); }
.modal__tier:has(input:checked) {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.modal__tier > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.modal__tier-name {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.modal__tier-price {
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--grey-600);
}
.modal__tier input[type="radio"] {
  width: 18px; height: 18px;
  accent-color: var(--ink-900);
}

.modal__effective {
  background: var(--paper-cream);
  padding: 14px 18px;
  border-left: 2px solid var(--light-blue-deep);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--ink-900);
  margin: 0 0 24px;
  border-radius: 0 4px 4px 0;
}
.modal__effective strong {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
}

.modal__error {
  background: rgba(220,38,38,0.08);
  border-left: 2px solid #dc2626;
  color: #b91c1c;
  padding: 10px 14px;
  font-size: 13px;
  margin: 0 0 18px;
  border-radius: 0 4px 4px 0;
}

.modal__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.modal__actions .btn { padding: 12px 22px; font-size: 11px; }

/* Success state — replaces form contents */
.modal__success {
  text-align: center;
  padding: 16px 0 4px;
}
.modal__success-icon {
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border: 2px solid var(--light-blue-deep);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--light-blue-deep);
}
.modal__success-icon svg { width: 26px; height: 26px; }

@media (max-width: 560px) {
  .modal__inner { padding: 48px 28px 32px; }
  .modal__actions { flex-direction: column-reverse; align-items: stretch; }
  .modal__actions .btn { justify-content: center; }
}

/* ============================================================
   NEWSLETTER CAPTURE
   ============================================================ */
.newsletter {
  background: var(--ink-900);
  color: var(--paper);
  padding: 96px 32px;
  position: relative; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.newsletter::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(154,180,212,0.08), transparent 50%);
  pointer-events: none;
}
.newsletter__inner {
  position: relative; z-index: 1;
  max-width: 720px; margin: 0 auto;
  text-align: center;
}
.newsletter__eyebrow {
  font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--light-blue);
  margin-bottom: 18px;
  display: inline-block;
}
.newsletter__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(32px, 4.5vw, 52px);
  line-height: 1.0; letter-spacing: -0.02em;
  margin-bottom: 18px;
}
.newsletter__headline em { font-style: italic; color: var(--light-blue); }
.newsletter__sub {
  font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.65);
  max-width: 52ch;
  margin: 0 auto 36px;
}
.newsletter__form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color var(--dur-med) var(--ease);
}
.newsletter__form:focus-within { border-color: rgba(154,180,212,0.5); }
.newsletter__form input {
  background: transparent;
  border: 0;
  padding: 16px 20px;
  color: var(--paper);
  font: inherit;
  font-size: 16px;
  outline: none;
}
.newsletter__form input::placeholder { color: rgba(255,255,255,0.65); }
.newsletter__form button {
  background: var(--paper);
  color: var(--ink-900);
  border: 0;
  padding: 0 28px;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-med) var(--ease);
}
.newsletter__form button:hover { background: var(--light-blue); }
.newsletter__form button[disabled] { opacity: 0.5; cursor: wait; }
.newsletter__fine {
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-top: 18px;
}
.newsletter__success {
  padding: 16px 20px;
  background: rgba(154,180,212,0.1);
  border: 1px solid rgba(154,180,212,0.3);
  border-radius: 8px;
  color: var(--paper);
  font-size: 14px;
  max-width: 500px; margin: 0 auto;
}
.newsletter__error {
  padding: 12px 16px;
  background: rgba(220,38,38,0.1);
  border-left: 2px solid #ef4444;
  color: #fca5a5;
  font-size: 13px;
  margin-top: 16px;
  text-align: left;
  max-width: 500px; margin-left: auto; margin-right: auto;
  display: none;
}
@media (max-width: 640px) {
  .newsletter { padding: 72px 24px; }
  .newsletter__form { grid-template-columns: 1fr; }
  .newsletter__form button { padding: 14px 20px; }
}

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

/* Payment fieldset needs to visually look like the old div — remove default
   fieldset chrome (border, padding) */
.payment__stripe[class] {
  border: 0; padding: 0; margin: 0;
  min-width: 0;
}
/* Payment "labels" above Stripe Element placeholders — styled like real <label>s */
.payment__label {
  display: block;
  font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
  font-weight: 500;
}


/* Account dashboard — quick-action buttons (replaces interactive-li anti-pattern) */
.contact-grid__item {
  display: block; width: 100%; text-align: left;
  background: transparent;
  border: 1px solid var(--grey-300);
  padding: 28px 24px;
  cursor: pointer;
  font-family: inherit; font-size: inherit; color: inherit;
  transition: border-color var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
.contact-grid__item:hover,
.contact-grid__item:focus-visible {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.contact-grid__item:focus-visible { outline: 2px solid var(--light-blue-deep); outline-offset: 2px; }
.contact-grid__item .eyebrow { display: block; margin-bottom: 8px; }
.contact-grid__item h4 { margin-bottom: 8px; font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 22px; }
.contact-grid__item p { margin-bottom: 4px; color: var(--grey-600); }
.contact-grid__item .micro-link { display: inline-block; margin-top: 12px; color: var(--light-blue-deep); }


/* === 404 page (added 2026-04) === */
.notfound {
  min-height: calc(100vh - 80px);
  display: grid;
  place-items: center;
  padding: 96px 24px;
  background: var(--ink-900);
  color: var(--paper);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.notfound::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 18%, rgba(154,180,212,0.10), transparent 62%);
  pointer-events: none;
}
.notfound__inner { position: relative; z-index: 1; max-width: 580px; }
.notfound__eyebrow {
  color: var(--light-blue);
  display: inline-block;
  margin-bottom: 32px;
}
.notfound__headline {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 300;
  font-size: clamp(56px, 10vw, 112px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin-bottom: 24px;
}
.notfound__headline em { font-style: italic; color: var(--light-blue); font-weight: 300; }
.notfound__sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,0.68);
  max-width: 44ch;
  margin: 0 auto 40px;
}
.notfound__actions {
  display: flex; gap: 16px;
  justify-content: center; flex-wrap: wrap;
}
.notfound__links {
  margin-top: 64px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; gap: 36px;
  justify-content: center; flex-wrap: wrap;
  font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase;
}
.notfound__links a {
  color: rgba(255,255,255,0.70);
  text-decoration: none;
  transition: color var(--dur-med) var(--ease);
}
.notfound__links a:hover { color: var(--light-blue); }
.notfound__quote {
  margin-top: 48px;
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic;
  font-weight: 300;
  font-size: 15px;
  color: rgba(255,255,255,0.6); /* WCAG AA: 7.0:1 against ink-900 (was 0.45 = 4.49:1, fail) */
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .notfound { padding: 72px 20px; }
  .notfound__links { gap: 24px; margin-top: 48px; }
  .notfound__quote { margin-top: 36px; }
}

/* === Club map embed (added 2026-04) === */
.club-map {
  background: var(--paper);
  color: var(--ink-900);
  padding: 120px 0;
}
.club-map__inner {
  width: 100%;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 32px;
}
.club-map__inner .eyebrow {
  margin-bottom: 24px;
}
.club-map__title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: var(--ls-h2);
  color: var(--ink-900);
  margin-bottom: 32px;
  max-width: 22ch;
}
.club-map__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--grey-500);
}
.club-map__directions {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 56px;
}
.club-map__directions a {
  color: var(--ink-900);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color var(--dur-fast) var(--ease);
}
.club-map__directions a:hover { color: var(--light-blue-deep); }
.club-map__directions a + a { margin-left: 28px; }
.club-map__embed {
  width: 100%;
  position: relative;
  border: 1px solid rgba(10,14,26,0.35);
  border-radius: 8px;
  background: var(--ink-900);
  overflow: hidden;
  line-height: 0;
}
/* Ink-tint the raw map tiles so the embed reads as another dark Level card
   instead of a bright default map. Filter keeps the iframe fully interactive. */
.club-map__embed iframe {
  filter: invert(0.9) hue-rotate(190deg) grayscale(0.35) brightness(0.95) contrast(0.92) saturate(0.65);
}
/* accent stripe + soft vignette, matching the site's card language */
.club-map__embed::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--light-blue);
  z-index: 1;
}
.club-map__embed::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 72px rgba(10,14,26,0.45);
}
/* Branded pin over the (centered) marker coordinate */
.club-map__pin {
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--light-blue);
  border: 2px solid rgba(251,250,247,0.9);
  box-shadow: 0 0 0 6px rgba(154,180,212,0.25), 0 0 24px rgba(154,180,212,0.55);
  z-index: 1;
  pointer-events: none;
  animation: mapPinPulse 2.6s ease-in-out infinite;
}
@keyframes mapPinPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(154,180,212,0.25), 0 0 24px rgba(154,180,212,0.55); }
  50%      { box-shadow: 0 0 0 11px rgba(154,180,212,0.12), 0 0 30px rgba(154,180,212,0.4); }
}
@media (prefers-reduced-motion: reduce) { .club-map__pin { animation: none; } }
.club-map__embed iframe {
  display: block;
  width: 100%;
  height: 400px;
  border: 0;
}
@media (max-width: 640px) {
  .club-map { padding: 80px 0; }
  .club-map__title { margin-bottom: 24px; }
  .club-map__directions { margin-bottom: 40px; }
  .club-map__embed iframe { height: 320px; }
}

/* Port Chester launch list (added 2026-04) */
.port-chester-launch {
  background: var(--ink-900);
  color: var(--paper);
  padding: 120px 0;
}
.port-chester-launch__inner {
  width: 100%;
  max-width: var(--max-narrow);
  margin: 0 auto;
  padding: 0 32px;
}
.port-chester-launch .eyebrow {
  color: var(--light-blue);
  margin-bottom: 24px;
}
.port-chester-launch h2 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.02;
  letter-spacing: var(--ls-h2);
  color: var(--paper);
  margin-bottom: 24px;
  max-width: 16ch;
}
.port-chester-launch h2 em {
  font-style: italic;
  font-weight: 300;
  color: var(--light-blue);
}
.port-chester-launch__lede {
  color: rgba(251, 250, 247, 0.72);
  max-width: 52ch;
  margin-bottom: 48px;
  font-size: 17px;
  line-height: 1.6;
}
.port-chester-launch__form {
  display: flex;
  gap: 12px;
  max-width: 540px;
  flex-wrap: wrap;
}
.port-chester-launch__form input[type="email"] {
  flex: 1 1 260px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(251, 250, 247, 0.4);
  color: var(--paper);
  font-family: inherit;
  font-size: 17px;
  padding: 14px 0;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.port-chester-launch__form input[type="email"]::placeholder {
  color: rgba(251, 250, 247, 0.45);
}
.port-chester-launch__form input[type="email"]:focus {
  border-bottom-color: var(--light-blue);
}
.port-chester-launch__form button {
  background: var(--paper);
  color: var(--ink-900);
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 16px 28px;
  border: 0;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.port-chester-launch__form button:hover {
  background: var(--light-blue);
}
.port-chester-launch__form button:disabled {
  opacity: 0.6; cursor: wait;
}
.port-chester-launch__error {
  display: none;
  color: #FF8A8A;
  font-size: 13px;
  margin-top: 16px;
}
.port-chester-launch .newsletter__success {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-style: italic;
  font-size: 22px;
  color: var(--light-blue);
  max-width: 540px;
}
@media (max-width: 640px) {
  .port-chester-launch { padding: 80px 0; }
  .port-chester-launch__lede { margin-bottom: 32px; }
  .port-chester-launch__form button { width: 100%; }
}

/* === PWA install banner (added 2026-04) === */
/* Quiet, dismissible "Add to home screen" card.
   Sits below the consent banner (z-index 9999) so it never covers privacy choices.
   See assets/js/pwa-install.js for the show/dismiss logic. */
.pwa-banner {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: min(380px, calc(100vw - 48px));
  z-index: 9000;
  background: var(--paper);
  color: var(--ink-900);
  border: 1px solid var(--grey-300);
  border-radius: 6px;
  padding: 22px 22px 20px;
  box-shadow: 0 30px 80px rgba(10, 14, 26, 0.18), 0 6px 16px rgba(10, 14, 26, 0.08);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events: none;
}
.pwa-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pwa-banner.is-leaving {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 150ms var(--ease), transform 150ms var(--ease);
  pointer-events: none;
}
.pwa-banner__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.pwa-banner__lockup {
  display: inline-block;
  height: 16px;
  color: var(--ink-900);
}
.pwa-banner__lockup svg {
  height: 100%;
  width: auto;
  display: block;
}
.pwa-banner__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--grey-500);
  cursor: pointer;
  border: 0;
  transition: background var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
}
.pwa-banner__close:hover {
  background: var(--paper-cream);
  color: var(--ink-900);
}
.pwa-banner__close svg { width: 16px; height: 16px; }
.pwa-banner__copy { margin-bottom: 18px; }
.pwa-banner__title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 6px;
  color: var(--ink-900);
}
.pwa-banner__sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--grey-600);
  margin: 0;
}
.pwa-banner__ios {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--grey-600);
  background: var(--paper-cream);
  border-radius: 4px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.pwa-banner__ios strong {
  font-weight: 500;
  color: var(--ink-900);
}
.pwa-banner__ios-icon {
  display: inline-flex;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--ink-900);
}
.pwa-banner__ios-icon svg { width: 16px; height: 16px; }
.pwa-banner__actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.pwa-banner__btn {
  padding: 12px 20px;
  font-size: 11px;
  letter-spacing: 0.16em;
  flex: 1;
  justify-content: center;
}
@media (max-width: 768px) {
  .pwa-banner {
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 18px 20px 20px;
    box-shadow: 0 -8px 24px rgba(10, 14, 26, 0.12);
    transform: translateY(100%);
  }
  .pwa-banner.is-visible { transform: translateY(0); }
  .pwa-banner.is-leaving { transform: translateY(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-banner,
  .pwa-banner.is-leaving {
    transition: opacity 0.01ms !important;
    transform: none !important;
  }
  .pwa-banner.is-visible { transform: none !important; }
}
.pwa-banner[data-reduced-motion] {
  transition: opacity 0.01ms !important;
  transform: none !important;
}
.pwa-banner[data-reduced-motion].is-visible { transform: none !important; }

/* === Account banners + empty states + receipts + preferences (added 2026-04) === */
/* Pending-cancellation / active-freeze banners shown above the dashboard tabs */
.account-banners { background: var(--paper-cream); border-bottom: 1px solid var(--paper-2); }
.account-banner { padding: 28px 0; border-top: 1px solid var(--paper-2); }
.account-banner:first-child { border-top: 0; }
.account-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
}
.account-banner h3 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}
.account-banner h3 strong { font-weight: 500; font-style: italic; }
.account-banner p {
  color: var(--grey-600);
  font-size: 15px;
  max-width: 62ch;
}
.account-banner__actions { white-space: nowrap; }
.account-banner--cancel { background: linear-gradient(180deg, rgba(154,180,212,0.10), rgba(154,180,212,0.03)); }
.account-banner--freeze { background: linear-gradient(180deg, rgba(140,147,158,0.10), rgba(140,147,158,0.03)); }
@media (max-width: 720px) {
  .account-banner__inner { grid-template-columns: 1fr; }
  .account-banner__actions .btn { width: 100%; justify-content: center; }
}

/* Empty states (bookings + payments) */
.empty-state {
  text-align: center;
  padding: 64px 24px;
  border: 1px dashed var(--grey-300);
  border-radius: 4px;
  background: var(--paper);
  color: var(--grey-600);
}
.empty-state__icon {
  display: inline-block;
  margin-bottom: 18px;
  color: var(--grey-500);
  opacity: 0.7;
}
.empty-state__title {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  color: var(--ink-900);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.empty-state__sub { font-size: 14px; max-width: 44ch; margin: 0 auto; }

/* Payment row receipt button */
.policy--payment .policy__actions { margin: 12px 0 0; }
.policy__receipt {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink-900);
  border-bottom: 1px solid var(--grey-300);
  cursor: pointer;
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.policy__receipt:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

/* Year-1 commitment block in cancel modal */
.modal__commitment {
  background: var(--paper-cream);
  border: 1px solid var(--paper-2);
  border-left: 3px solid var(--light-blue);
  padding: 14px 18px;
  margin: 16px 0 4px;
  border-radius: 2px;
}
.modal__commitment .eyebrow { color: var(--light-blue-deep); margin-bottom: 6px; }
.modal__commitment p { font-size: 14px; color: var(--grey-700); line-height: 1.6; }
.modal__commitment p strong { color: var(--ink-900); }

/* === Preferences page === */
.prefs { display: grid; gap: 56px; }
.prefs__group { display: grid; gap: 16px; }
.prefs__group .ed-head { margin-bottom: 0; }
.prefs__group > p { color: var(--grey-600); font-size: 15px; }
.prefs__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.prefs__row {
  border-top: 1px solid var(--paper-2);
}
.prefs__row:last-child { border-bottom: 1px solid var(--paper-2); }

.prefs__toggle {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 4px;
  cursor: pointer;
}
.prefs__toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.prefs__switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 26px;
  background: var(--grey-300);
  border-radius: 999px;
  transition: background 200ms var(--ease);
  flex-shrink: 0;
  margin-top: 2px;
}
.prefs__switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--paper);
  border-radius: 50%;
  transition: transform 200ms var(--ease);
  box-shadow: 0 1px 3px rgba(10,14,26,0.18);
}
.prefs__toggle input[type="checkbox"]:checked + .prefs__switch { background: var(--ink-900); }
.prefs__toggle input[type="checkbox"]:checked + .prefs__switch::after { transform: translateX(18px); }
.prefs__toggle input[type="checkbox"]:focus-visible + .prefs__switch {
  outline: 2px solid var(--light-blue);
  outline-offset: 3px;
}
.prefs__copy { display: grid; gap: 4px; }
.prefs__name { font-weight: 500; font-size: 16px; color: var(--ink-900); }
.prefs__sub { color: var(--grey-600); font-size: 14px; line-height: 1.5; }

.prefs__radios { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; }
.prefs__radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  align-items: center;
  padding: 16px 18px;
  border: 1px solid var(--grey-300);
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 150ms var(--ease), background 150ms var(--ease);
}
.prefs__radio:hover { border-color: var(--ink-900); }
.prefs__radio input[type="radio"] { grid-row: span 2; accent-color: var(--ink-900); }
.prefs__radio:has(input[type="radio"]:checked) {
  border-color: var(--ink-900);
  background: var(--paper-cream);
}
.prefs__radio-name { font-weight: 500; font-size: 15px; }
.prefs__radio-sub { font-size: 13px; color: var(--grey-600); grid-column: 2; }

.prefs__error {
  background: rgba(176, 60, 60, 0.06);
  border: 1px solid rgba(176, 60, 60, 0.3);
  color: #B03C3C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
}
.prefs__success {
  background: rgba(46, 125, 92, 0.06);
  border: 1px solid rgba(46, 125, 92, 0.3);
  color: #2E7D5C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
}
.prefs__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 16px;
}
.prefs__legal {
  font-size: 13px;
  color: var(--grey-500);
  text-align: center;
  margin-top: 8px;
}
.prefs__legal a { border-bottom: 1px solid var(--grey-300); }
.prefs__legal a:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

@media (max-width: 600px) {
  .prefs { gap: 40px; }
  .prefs__toggle { grid-template-columns: 48px 1fr; gap: 14px; padding: 18px 2px; }
  .prefs__actions { justify-content: stretch; }
  .prefs__actions .btn { flex: 1; justify-content: center; text-align: center; }
}

/* === Visit / Tour + Train Day page (added 2026-04) === */
/* Page-level utilities used on visit.html (and reusable) */
.section--ink {
  background: var(--ink-900);
  color: var(--paper);
}
.section--ink .eyebrow { color: var(--light-blue); }
.section--ink h2, .section--ink h3 { color: var(--paper); }
.section--ink p { color: var(--grey-300); }
.section--ink a:not(.btn) { color: var(--light-blue); border-bottom: 1px solid currentColor; }

.container--narrow {
  max-width: var(--max-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.ed-head--center { text-align: center; }
.ed-head--center .eyebrow { display: inline-block; }

/* Three-step "How it works" list — horizontal cards on dark sections.
   Note: this overrides ol.steps used on visit.html ONLY. The base .steps
   class (used by membership/join-pelham.html as a div) stays untouched. */
ol.steps {
  list-style: none;
  padding: 0;
  margin: 64px 0 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  counter-reset: stepc;
  /* Reset the cell-separator grey background that .steps inherits from
     the base rule (line ~960). On visit.html the ol.steps sits on a dark
     ink section and the grey background otherwise shows through the 56px
     gap as a giant cream strip. */
  background: transparent;
}
.steps__item {
  position: relative;
  padding-top: 36px;
  border-top: 1px solid rgba(154, 180, 212, 0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.steps__num {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--light-blue);
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.steps__item h3 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--paper);
  margin: 4px 0 4px;
}
.steps__item h3 em { font-style: italic; }
.steps__item p {
  color: var(--grey-300);
  line-height: 1.7;
  font-size: 15.5px;
  margin: 0;
}
@media (max-width: 900px) {
  ol.steps { grid-template-columns: 1fr; gap: 36px; margin-top: 48px; }
  .steps__item { padding-top: 28px; }
  .steps__item h3 { font-size: 26px; }
}

/* "What to bring" + "What we provide" checklists */
.checklist { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 8px; }
.checklist li {
  position: relative;
  padding-left: 28px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--grey-700);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 14px;
  height: 8px;
  border-left: 1.5px solid var(--ink-900);
  border-bottom: 1.5px solid var(--ink-900);
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  opacity: 0.85;
}
.checklist--given li::before { border-color: var(--light-blue-deep); }

/* Visit form — uniform card, consistent field heights, readable labels.
   Extends .form but overrides nearly all visual rules so every field
   (input / select / textarea / date) renders at the same height + style. */
.form--visit {
  display: grid;
  gap: 26px;
  max-width: 640px;
  margin: 56px auto 0;
  background: var(--paper);
  padding: 40px 36px 36px;
  border: 1px solid var(--paper-2);
  border-radius: 6px;
  box-shadow: 0 18px 40px rgba(10,14,26,0.05);
}
.form--visit .form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 640px) {
  .form--visit .form__row { grid-template-columns: 1fr; gap: 22px; }
  .form--visit { padding: 28px 22px 24px; gap: 22px; }
}

/* Each labeled field is its own column-stack so labels + inputs align
   regardless of whether a hint follows. */
.form--visit .form__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

/* Readable sentence-case labels (overrides the small uppercase .form label) */
.form--visit label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-900);
  margin: 0;
  line-height: 1.4;
}
.form--visit .form__optional {
  font-size: 12px;
  font-weight: 400;
  color: var(--grey-500);
  letter-spacing: 0;
  font-style: italic;
  margin-left: 6px;
}

/* All inputs/selects/textareas share the same box, padding, height */
.form--visit input[type="text"],
.form--visit input[type="email"],
.form--visit input[type="tel"],
.form--visit input[type="date"],
.form--visit select,
.form--visit textarea {
  width: 100%;
  background: var(--paper-cream);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 12px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-900);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  transition: background 150ms var(--ease), border-color 150ms var(--ease), box-shadow 150ms var(--ease);
  /* Establishes a consistent 44px height across browsers */
  min-height: 44px;
  box-sizing: border-box;
}
.form--visit textarea { min-height: 96px; resize: vertical; padding: 12px 14px; }
.form--visit input[type="date"] { font-family: inherit; line-height: 1.2; }

/* Custom select chevron (replaces native dropdown arrow for visual consistency) */
.form--visit select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%237A8291' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.form--visit input::placeholder,
.form--visit textarea::placeholder { color: var(--grey-500); opacity: 1; }

.form--visit input:hover,
.form--visit select:hover,
.form--visit textarea:hover { background: #F1EDE5; }

.form--visit input:focus,
.form--visit select:focus,
.form--visit textarea:focus {
  background: var(--paper);
  border-color: var(--ink-900);
  box-shadow: 0 0 0 3px rgba(154, 180, 212, 0.18);
}

.form--visit input:invalid:not(:placeholder-shown),
.form--visit select:invalid:not(:focus) { /* leave alone — don't shout at users mid-typing */ }

/* Hint sits under a field, half-size of label, italic, grey */
.form--visit .form__hint {
  display: block;
  font-size: 12.5px;
  font-style: italic;
  color: var(--grey-500);
  line-height: 1.45;
  margin-top: 2px;
}

/* "I'd like to bring one guest" checkbox row — aligned baseline with label */
.form--visit .form__check {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: var(--grey-700);
  cursor: pointer;
  padding: 6px 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
.form--visit .form__check input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--ink-900);
  background: transparent;
  border: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
}
.form--visit .form__check input[type="checkbox"]:hover { background: transparent; }

/* Submit button alignment — left-aligned like a form CTA, full-width on mobile */
.form--visit .form__submit {
  justify-self: start;
  margin-top: 8px;
}
@media (max-width: 640px) {
  .form--visit .form__submit { width: 100%; justify-content: center; }
}

/* Error banner */
.form__error {
  background: rgba(176, 60, 60, 0.06);
  border: 1px solid rgba(176, 60, 60, 0.3);
  color: #B03C3C;
  padding: 12px 16px;
  border-radius: 3px;
  font-size: 14px;
  margin: 0;
}

/* Legal footnote under form */
.form__legal {
  font-size: 13px;
  color: var(--grey-500);
  line-height: 1.6;
  margin: 12px 0 0;
}
.form__legal a { border-bottom: 1px solid var(--grey-300); }
.form__legal a:hover { color: var(--light-blue-deep); border-bottom-color: var(--light-blue-deep); }

/* === Visit cross-link styles (added 2026-04) === */
/* Tertiary link below hero CTA buttons — quiet "or visit first" prompt */
.hero__tertiary {
  margin-top: 18px;
  font-size: 14px;
  color: var(--paper);
  opacity: 0.85;
}
.hero__tertiary a {
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: border-color 150ms var(--ease), color 150ms var(--ease);
}
.hero__tertiary a:hover { border-bottom-color: var(--light-blue); color: var(--light-blue); }

/* Apply section dual CTA */
.apply__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
@media (max-width: 600px) {
  .apply__actions { flex-direction: column; align-items: stretch; }
  .apply__actions .btn { width: 100%; justify-content: center; text-align: center; }
}

/* Membership-page bridge card — "before you commit, visit" */
.visit-bridge {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
  padding: 36px 40px;
  background: var(--paper);
  border: 1px solid var(--paper-2);
  border-left: 3px solid var(--light-blue);
  border-radius: 4px;
  box-shadow: 0 12px 32px rgba(10,14,26,0.04);
}
.visit-bridge__copy h3 {
  font-family: 'Libre Caslon Display', Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 6px 0 10px;
}
.visit-bridge__copy p {
  color: var(--grey-700);
  font-size: 16px;
  line-height: 1.6;
  max-width: 56ch;
}
.visit-bridge__action { white-space: nowrap; text-align: right; }
@media (max-width: 720px) {
  .visit-bridge { grid-template-columns: 1fr; padding: 28px 24px; }
  .visit-bridge__action { text-align: left; white-space: normal; }
  .visit-bridge__action .btn { width: 100%; justify-content: center; }
  .visit-bridge__action .auth__hint { text-align: left !important; }
}

/* === Mobile word simplification (added 2026-04-27) ===
   Pattern: keep desktop copy untouched. Hide verbose phrases on mobile,
   reveal terser alternates. Use .desktop-only and .mobile-only inline,
   or wrap whole paragraphs with .mobile-shorter / .desktop-fuller pairs. */
@media (max-width: 768px) {
  .desktop-only { display: none !important; }
}
@media (min-width: 769px) {
  .mobile-only { display: none !important; }
}

/* === Nav utility zone (Sign in + Apply CTA, top-right) — added 2026-04-28 === */
.nav__utility {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: 24px;
}
.nav__login {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
  padding: 8px 0;
  transition: color 200ms ease;
}
.nav__login:hover { color: var(--paper); }
.nav--light .nav__login { color: var(--grey-700); }
.nav--light .nav__login:hover { color: var(--ink-900); }
@media (max-width: 1080px) {
  .nav__login { display: none; } /* mobile drawer handles auth links instead */
  .nav__utility { gap: 0; }
}

/* =========================================================
   MOBILE SPACING — iPhone-focused overrides
   Added last so it wins against the desktop rules above.
   Targets: 320 / 375 (SE) / 390 (12-15) / 393 (Pro) / 430 (Pro Max).

   ⚠️  EXTEND THIS BLOCK — don't append a second mobile-spacing pass.
       A future maintainer adding new mobile rules at the bottom of the
       file will create a specificity duel with this one. Add your rule
       inside the matching @media block below (or add a new breakpoint
       inline) so all phone-only spacing lives in one place.
========================================================= */

/* ── 768px and under: tablet → phone shared reductions ── */
@media (max-width: 768px) {
  /* Container side padding — was 32px, makes content cramped at iPhone widths */
  .container,
  .container-narrow { padding: 0 22px; }
  .hero__content { padding: 0 22px; }

  /* Vertical section padding — was 120/80/160 (massive on phone) */
  .section { padding: 72px 0; }
  .section--tight { padding: 48px 0; }
  .section--loose { padding: 96px 0; }

  /* Editorial heading block — was 72px bottom margin */
  .ed-head { margin: 0 auto 48px; padding: 0 22px; }
  .ed-head h2 { margin: 16px 0 12px; }

  /* Hero — heavy desktop padding shrinks; sub-headline tightens */
  .hero { padding: calc(var(--nav-h) + 44px) 0 88px; }
  .hero__headline { margin-bottom: 24px; }
  .hero__sub { margin-bottom: 32px; font-size: 17px; }
  .hero__eyebrow { margin-bottom: 20px; }
  .hero--short { padding-bottom: 40px; min-height: 50vh; }

  /* App section — was 140px each side */
  .app-section { padding: 88px 22px; }

  /* App banner — was 40px 32px; tighten + ensure download badges have room */
  .app-banner { padding: 28px 22px; }

  /* Apply CTA section — was 140px vertical, massive on a phone */
  .apply { padding: 88px 0; }
  .apply__sub { margin: 0 auto 32px; }

  /* Tier cards (membership + purchase pages) — was 48px 40px / 40px 32px */
  .tier { padding: 36px 28px; }
  .tier-card__body { padding: 26px 24px; }

  /* Contact + auth cards — were 40px+ all around */
  .contact-grid > li { padding: 26px 26px; min-height: 0; }
  .auth { padding: calc(var(--nav-h) + 32px) 18px 56px; }
  .auth__card { padding: 40px 28px; }
  .auth__headline { font-size: 36px; }

  /* Feature blocks (alternating editorial sections) — already stack at 900px;
     tighten the body padding so stacked images + text don't waste space */
  .feature__body { padding: 44px 22px; }
  .feature__media { min-height: 280px; }

  /* Footer — was 80/40 + 56gap + 64 margin-bottom */
  footer { padding: 56px 0 32px; }
  footer .container { gap: 36px; margin-bottom: 40px; }
}

/* ── 600px and under: true mobile sizing ── */
@media (max-width: 600px) {
  .container,
  .container-narrow { padding: 0 18px; }
  .hero__content { padding: 0 18px; }

  .section { padding: 56px 0; }
  .section--tight { padding: 40px 0; }
  .section--loose { padding: 72px 0; }

  .ed-head { margin: 0 auto 36px; padding: 0 18px; }

  /* ── Hero rebuild for phone ──
     Desktop pins content to the bottom of a 100svh hero — feels cinematic.
     On a phone that pin creates a giant dark sky above the content and
     squeezes the headline / eyebrow / buttons / ticker into a thin strip.
     Switch to vertical-centered content with tight, predictable padding,
     so each element gets clean rhythm and the hero still looks intentional. */
  .hero {
    min-height: 88svh;
    align-items: center;
    padding: 64px 0 88px;     /* extra bottom for the absolute ticker */
  }
  /* Inner-page short hero gets the same vertical-center treatment so
     the headline doesn't pin to the very bottom edge on phones */
  .hero--short {
    min-height: 48vh;
    align-items: center;
    padding: 40px 0 36px;
  }
  .hero__eyebrow {
    margin-bottom: 14px;
    font-size: 10px;
    letter-spacing: 0.2em;
    gap: 10px;
  }
  .hero__eyebrow::before { width: 22px; }

  /* Headline — scale way down from the 48px minimum so it stops wrapping
     into 4 narrow lines on iPhone widths */
  .hero__headline {
    font-size: clamp(32px, 9vw, 44px);
    line-height: 1.06;
    max-width: 22ch;
    margin-bottom: 16px;
  }

  .hero__sub {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 38ch;
  }

  /* Component-level mobile tightening across all pages ────────── */
  .apply { padding: 64px 0; }
  .apply__sub { margin: 0 auto 24px; font-size: 16px; }
  .apply__headline { margin-bottom: 8px; }

  .tier { padding: 28px 22px; gap: 14px; }
  .tier-card__body { padding: 26px 20px; }
  .tier__name { font-size: 26px; }
  .tier__lede { min-height: 0; }

  .contact-grid > li { padding: 26px 22px; }

  .auth { padding: calc(var(--nav-h) + 24px) 16px 48px; }
  .auth__card { padding: 32px 22px; }
  .auth__headline { font-size: 30px; margin-bottom: 12px; }
  .auth__sub { margin-bottom: 24px; }

  .app-banner { padding: 32px 18px; }
  .app-banner__copy h3 { font-size: 22px; }

  .feature__body { padding: 36px 18px; }
  .feature__media { min-height: 240px; }

  /* Demo-banner (debug strip at top of demo deploys) — tighter on mobile */
  .demo-banner { padding: 10px 18px; font-size: 11px; }

  /* Buttons: compact on mobile so CTAs feel refined and editorial,
     not oversized full-bleed bars. */
  .btn {
    padding: 11px 20px;
    font-size: 11px;
    letter-spacing: 0.15em;
    gap: 8px;
  }
  /* Hero CTAs hug their label and sit left-aligned — not edge-to-edge blocks */
  .hero__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .hero__actions .btn { width: auto; justify-content: center; }

  /* Club-page short heroes: restack so the address ticker can NEVER collide
     with the CTA buttons — ticker becomes a normal block under the content. */
  .hero--short { flex-direction: column; align-items: stretch; justify-content: flex-end; padding-bottom: 0; }
  .hero--short .hero__content { padding-bottom: 10px; }
  .hero--short .hero__ticker {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    margin-top: 28px;
    padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
  }
  .hero--short .hero__ticker > * + *::before { content: ""; margin-right: 0; }

  /* Hero ticker — clear the iPhone home-bar + give it a touch more breathing room */
  .hero__ticker {
    padding: 12px 18px max(12px, env(safe-area-inset-bottom)) 18px;
    font-size: 9px;
    letter-spacing: 0.16em;
    gap: 8px;
  }

  .app-section { padding: 64px 18px; }

  /* Footer goes single column on real iPhones; clean column flow */
  footer { padding: 48px 0 28px; }
  footer .container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 18px;
    margin-bottom: 32px;
  }
  footer .container > div { padding: 0; }
  .footer__bottom { padding: 24px 18px 0; }
  .footer__bottom { font-size: 11px; gap: 6px; }
}

/* ── 380px and under: small phones (iPhone SE / Mini) ── */
@media (max-width: 380px) {
  .container,
  .container-narrow { padding: 0 16px; }
  .hero__content { padding: 0 16px; }
  .section { padding: 48px 0; }
  .section--tight { padding: 32px 0; }
  .hero {
    min-height: 86svh;
    padding: 48px 0 80px;
  }
  .hero--short { padding: calc(var(--nav-h) + 40px) 0 0; min-height: 46vh; }
  .hero__headline { font-size: clamp(28px, 9vw, 38px); margin-bottom: 14px; }
  .hero__sub { font-size: 15px; line-height: 1.5; margin-bottom: 22px; }
  .hero__eyebrow { margin-bottom: 12px; font-size: 9.5px; }
  .app-section { padding: 56px 16px; }
  .apply { padding: 48px 0; }
  .tier { padding: 24px 18px; }
  .tier-card__body { padding: 22px 16px; }
  .auth__card { padding: 28px 18px; }
  .auth__headline { font-size: 28px; }
  .app-banner { padding: 28px 16px; }
  .app-banner__copy h3 { font-size: 20px; }
  .feature__body { padding: 32px 16px; }
}

/* ── Consent banner — respect iPhone home-bar (was anchored bottom: 0) ── */
@media (max-width: 600px) {
  .consent {
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
}


/* ── Serif italics ──────────────────────────────────────────────────────────
   'Libre Caslon Display' (the display cut used for headings) has no true
   italic, so every italic serif accent — the <em> treatment inside headings
   plus the small serif numerals — is routed to the 'Libre Caslon Text' cut,
   which ships a real italic. Keeps the dramatic upright Display look while the
   accents stay genuinely italic (not faux-slanted). ───────────────────────── */
:is(h1, h2, h3, .display, .serif,
    [class*="headline"], [class*="__title"], [class*="__name"], [class*="__quote"]) em,
.club__num, .club-card__num, .walk-chapter__num, .step__num, .principle__num,
.amenities li span:first-child,
.progress__step span,
.notfound__quote,
.account-banner h3 strong,
.port-chester-launch .newsletter__success {
  font-family: 'Libre Caslon Text', Georgia, serif;
}

/* ════════ MOBILE OPTIMIZATION PASS (audit fixes) ════════ */
/* Center the schedule tab group; keep panel content left-aligned */
.sched { text-align: center; }
.sched__panel { text-align: left; }

@media (max-width: 820px) {
  .sched { padding: 0 20px; }
  /* Stacked amenity rows breathe + separate the location label */
  .amenities li { gap: 4px; padding: 20px 0; }
  .amenities li > div { margin-top: 2px; }
  .amenities li span:last-child { margin-top: 8px; }
}

@media (max-width: 600px) {
  .sched { padding: 0 18px; }
  .sched__tab { display: inline-flex; align-items: center; min-height: 44px; padding: 14px 18px; }
  .amenities li p { font-size: 16px; }
  /* Five-up Locations cards: compact like the rest on phones */
  .club-cards--five .club-card { min-height: 96px; padding: 24px 22px; }
  .club-cards--five .club-card__name { font-size: 24px; }
  /* Reviews: tighter stacked rhythm */
  .team { gap: 28px; }
  /* Hero ticker links -> real tap targets */
  .hero__ticker a { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 4px; }
  /* Footer links -> tappable */
  footer li { margin-bottom: 4px; }
  footer li a { display: inline-block; padding: 8px 0; }
  /* General contact-form controls -> 44px touch area */
  .form input[type="text"], .form input[type="email"], .form input[type="tel"], .form select, .form textarea { min-height: 44px; padding-top: 12px; padding-bottom: 12px; }
  /* Long emails / URLs wrap */
  .policy p, .policy li { overflow-wrap: anywhere; }
  /* Checkout spacing */
  .purchase { padding: 48px 18px; gap: 48px; }
  /* Account dashboard: scrollable tab bar + tighter hero */
  .tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab { flex: 0 0 auto; white-space: nowrap; padding: 14px 16px; }
  .account__hero { padding: calc(var(--nav-h) + 28px) 0 28px; }
}

@media (max-width: 380px) {
  .sched { padding: 0 16px; }
  .purchase { padding: 40px 16px; gap: 40px; }
  /* Shrink the app phone mockup so it never overflows the narrowest phones */
  .phone { width: 248px; height: 502px; }
}

/* ════════ PELHAM — amenity CTAs, pickleball, schedule icon ════════ */
/* CTA links in the amenities right-rail (Recovery / Pickleball / Classes) */
.amenities li > a {
  justify-self: end; align-self: center;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-900); white-space: nowrap;
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color 200ms ease;
}
.amenities li > a:hover { border-bottom-color: var(--light-blue); }
/* Button CTA inside a dark walk-chapter (e.g. Yorktown "Breathe") */
.walk-chapter__cta { margin-top: 22px; }

/* Schedule CTA calendar icon */
.apply__icon { display: block; margin: 0 auto 18px; color: var(--ink-900); }

/* Pickleball section */
.pickle {
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px;
  max-width: var(--max); margin: 0 auto; padding: 0 32px; align-items: stretch;
}
.pickle__media { margin: 0; border-radius: 6px; overflow: hidden; background: var(--grey-200); }
.pickle__media img { display: block; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.pickle__info { display: flex; flex-direction: column; gap: 28px; }
.pickle__rate {
  background: var(--ink-900); color: var(--paper); border-radius: 6px;
  padding: 26px 30px; display: flex; flex-direction: column; gap: 6px;
}
.pickle__rate-label { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--light-blue); }
.pickle__rate-amt { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1; }
.pickle__rate-amt span { font-family: 'Inter', system-ui, sans-serif; font-size: 16px; color: rgba(255,255,255,0.65); letter-spacing: 0.02em; }
.pickle__rate-note { font-size: 14px; color: rgba(255,255,255,0.82); }
.pickle__hours h3 { font-family: 'Libre Caslon Display', Georgia, serif; font-weight: 400; font-size: 20px; margin-bottom: 12px; }
.pickle__hours ul { list-style: none; }
.pickle__hours li {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; border-bottom: 1px solid var(--grey-300); font-size: 15px;
}
.pickle__hours li span:first-child { color: var(--grey-600); text-transform: uppercase; letter-spacing: 0.08em; font-size: 12px; }
.pickle__hours li span:last-child { color: var(--ink-900); text-align: right; }
.pickle__dropin { margin-top: 12px; font-size: 13px; color: var(--grey-500); letter-spacing: 0.02em; }
.pickle__book-label { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey-500); margin-bottom: 14px; }
/* Solid dark badges on the cream section (the shared --ink badge is built for dark bgs) */
.pickle__book .download-btn { background: var(--ink-900); border: 1px solid var(--ink-900); color: var(--paper); }
.pickle__book .download-btn .download-btn__name { color: var(--paper); }
.pickle__book .download-btn .download-btn__label { color: rgba(255,255,255,0.72); }
.pickle__book .download-btn:hover { background: var(--light-blue); border-color: var(--light-blue); color: var(--ink-900); }
.pickle__book .download-btn:hover .download-btn__name,
.pickle__book .download-btn:hover .download-btn__label { color: var(--ink-900); }
/* Video variant — hero-style: tinted looping footage, light text on left + right */
.pickle--video {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  min-height: 560px;
  padding: 64px 56px;
  color: var(--paper);
}
.pickle__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.pickle--video::after {
  /* hero-grade tint so light text reads on both sides */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,14,26,0.74), rgba(10,14,26,0.42) 50%, rgba(10,14,26,0.74));
  pointer-events: none;
}
.pickle__overlay {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  width: 100%;
  align-items: center;
}
.pickle__col { display: flex; flex-direction: column; gap: 32px; }
/* rate reads as open text on the tint, not a boxed card */
.pickle--video .pickle__rate { background: none; padding: 0; }
.pickle--video .pickle__hours h3 { color: var(--paper); }
.pickle--video .pickle__hours li { border-bottom-color: rgba(255,255,255,0.22); }
.pickle--video .pickle__hours li span:first-child { color: rgba(255,255,255,0.62); }
.pickle--video .pickle__hours li span:last-child { color: var(--paper); }
.pickle--video .pickle__dropin { color: rgba(255,255,255,0.75); }
.pickle--video .pickle__book-label { color: rgba(255,255,255,0.62); }
.pickle--video .download-btn { border-color: rgba(255,255,255,0.3); }

@media (max-width: 820px) {
  .pickle { grid-template-columns: 1fr; gap: 28px; padding: 0 18px; }
  .pickle--video { padding: 44px 22px; min-height: 0; }
  .pickle__overlay { grid-template-columns: 1fr; gap: 40px; }
  .pickle__media img { min-height: 240px; }
  .amenities li > a { justify-self: start; align-self: start; margin-top: 8px; display: inline-block; padding: 6px 0 3px; }
}
@media (max-width: 600px) {
  .pickle { padding: 0 16px; }
  .pickle__rate-amt { font-size: 40px; }
}

/* ════════ Somers / Thornwood — link blocks + dead Port Chester ════════ */
/* Deactivated control kept for the visual (Port Chester) */
.is-disabled { pointer-events: none; cursor: default; }

/* Somers — quick-link block inside the dark walk intro */
.walk__links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 30px; }

/* Thornwood — "Also at Level" quick links */
.tw-links { padding: 80px 24px; text-align: center; background: var(--paper-cream); }
.tw-links__eyebrow { display: block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--grey-500); }
.tw-links__btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 26px; }
@media (max-width: 600px) {
  .tw-links { padding: 56px 18px; }
  .walk__links .btn, .tw-links__btns .btn { width: 100%; max-width: 320px; justify-content: center; }
}