/* ==========================================================================
   Stay Fit Training Center — styles.css
   Built by Blobfish Systems
   Palette: turquoise + black + coral accent
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------- */
:root {
  --c-turquoise: #25A4B1;
  --c-turquoise-dark: #1E8994;
  --c-turquoise-light: #E6F5F7;
  --c-coral: #F28B82;
  --c-coral-dark: #E66E64;
  --c-gold: #F5C518;
  --c-black: #111;
  --c-ink: #1C2024;
  --c-charcoal: #2A2E33;
  --c-slate: #4A4F55;
  --c-mist: #9CA3AA;
  --c-fog: #D8DCE0;
  --c-cream: #F7F5F2;
  --c-white: #FFFFFF;

  --ff-display: "Archivo Black", "Barlow Condensed", "Inter", system-ui, sans-serif;
  --ff-body: "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --fz-xs: 0.75rem;
  --fz-sm: 0.875rem;
  --fz-base: 1rem;
  --fz-lg: 1.125rem;
  --fz-xl: 1.375rem;
  --fz-2xl: 1.75rem;
  --fz-3xl: 2.25rem;
  --fz-4xl: 3rem;
  --fz-5xl: 4rem;
  --fz-6xl: 5.5rem;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(17,17,17,0.06), 0 1px 3px rgba(17,17,17,0.08);
  --shadow-md: 0 4px 12px rgba(17,17,17,0.08), 0 2px 4px rgba(17,17,17,0.06);
  --shadow-lg: 0 20px 40px -12px rgba(17,17,17,0.18), 0 8px 16px -8px rgba(17,17,17,0.12);

  --container: 1180px;
  --header-h: 96px;
  --sticky-bar-h: 64px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Reset --------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: var(--fz-base);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Hard-clip any horizontal overflow. Without this, the marquee's 9000+px
     track can push the page wider than the viewport on mobile, which in
     turn pushes the fixed mobile bar's right half off-screen. */
  overflow-x: clip;
}
html { overflow-x: clip; }

img, picture, video, svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--c-turquoise-dark);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
a:hover { color: var(--c-coral-dark); }

h1, h2, h3, h4 {
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--c-black);
  margin: 0 0 var(--sp-4);
}

h1 { font-size: clamp(2.75rem, 10vw, 7rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(2.5rem, 7vw, 5.5rem); letter-spacing: -0.02em; }
h3 { font-size: var(--fz-xl); font-style: normal; letter-spacing: -0.005em; }
h4 { font-size: var(--fz-lg); font-style: normal; }

p { margin: 0 0 var(--sp-4); }

@media (min-width: 768px) {
  h3 { font-size: var(--fz-2xl); }
}

/* --- Utilities ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.section {
  padding: var(--sp-8) 0;
}
@media (min-width: 768px) {
  .section { padding: var(--sp-9) 0; }
}

.section--tight { padding: var(--sp-7) 0; }
.section--compact { padding: var(--sp-7) 0; }
@media (min-width: 768px) {
  .section--compact { padding: var(--sp-8) 0; }
}

/* Editorial intro block — sits beneath the hero */
.intro-block {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-block__lead {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  color: var(--c-black);
}
.intro-block__lead em {
  color: var(--c-gold);
  font-style: italic;
}
.intro-block__stars {
  color: var(--c-gold);
  font-size: 0.62em;
  letter-spacing: 0.04em;
  vertical-align: 0.2em;
  display: inline-block;
  font-style: normal;
  line-height: 1;
}
/* Small "(See what our members say.)" line beneath the 5-star headline */
.intro-block__see-reviews {
  font-family: var(--ff-body);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--c-mist);
  margin: var(--sp-3) 0 0;
  letter-spacing: 0.01em;
}
.section--dark .intro-block .intro-block__see-reviews a,
.intro-block .intro-block__see-reviews a {
  color: var(--c-gold);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(245, 197, 24, 0.4);
  padding-bottom: 1px;
  transition: border-color 0.2s var(--ease);
}
.section--dark .intro-block .intro-block__see-reviews a:hover,
.intro-block .intro-block__see-reviews a:hover {
  color: var(--c-gold);
  border-bottom-color: var(--c-gold);
}
/* Dark-section treatment */
.section--dark .intro-block__tagline { color: var(--c-fog); }
.section--dark .intro-block__menu {
  border-top-color: rgba(255,255,255,0.12);
  border-bottom-color: rgba(255,255,255,0.12);
}
.section--dark .intro-block__menu li { color: var(--c-white); }
.section--dark .intro-block__menu li:not(:first-child)::before { color: var(--c-mist); }
.section--dark .intro-block__note { color: var(--c-mist); }
.section--dark .intro-block__note strong {
  color: var(--c-white);
  border-bottom-color: var(--c-turquoise);
}
.intro-block__tagline {
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--c-fog);
  margin: 0;
  max-width: 36ch;
}
.intro-block__menu {
  --menu-gap: clamp(14px, 2vw, 30px);
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--menu-gap);
  margin: var(--sp-6) 0 0;
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--c-fog);
  border-bottom: 1px solid var(--c-fog);
  width: 100%;
}
/* Divider variant — sits at the top edge of its section */
.intro-block__menu--divider { margin: 0 0 var(--sp-7); }
.intro-section {
  padding-top: 0;
  padding-bottom: var(--sp-6);
}
@media (min-width: 768px) {
  .intro-section { padding-bottom: var(--sp-7); }
}
.intro-block__menu li {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1rem, 1.4vw, 1.375rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-black);
  position: relative;
  padding-left: 0;
  line-height: 1;
}
.intro-block__menu li:not(:first-child)::before {
  content: "·";
  position: absolute;
  left: calc(-1 * (var(--menu-gap) / 2) - 4px);
  top: 50%;
  transform: translateY(-55%);
  color: var(--c-turquoise);
  font-size: 1.25rem;
  line-height: 1;
}
/* Extra dot before this item — creates visual separation between the
   activities and the hours (24/7). */
.intro-block__menu li.intro-block__menu-plus {
  margin-left: var(--menu-gap);
}
.intro-block__menu li.intro-block__menu-plus::before {
  content: "· ·";
  letter-spacing: 0.45em;
  left: calc(-1 * var(--menu-gap) - 12px);
}
/* Mobile: shrink font + gap so the bar fits in two clean rows.
   Also shrink the dot size and its absolute-left offset so the dots
   don't get pushed into the neighboring word. */
@media (max-width: 767px) {
  .intro-block__menu {
    gap: 14px;
    padding: var(--sp-5) var(--sp-4);
  }
  .intro-block__menu li {
    font-size: 15px;
    letter-spacing: 0.1em;
  }
  .intro-block__menu li:not(:first-child)::before {
    font-size: 1rem;
    left: -11px;
  }
  .intro-block__menu li.intro-block__menu-plus {
    margin-left: 14px;
  }
  .intro-block__menu li.intro-block__menu-plus::before {
    left: -22px;
  }
}
.intro-block__note {
  margin: 0;
  font-size: var(--fz-base);
  color: var(--c-slate);
  letter-spacing: 0.02em;
}
.intro-block__note strong {
  display: inline-block;
  color: var(--c-black);
  font-weight: 700;
  border-bottom: 2px solid var(--c-turquoise);
  padding-bottom: 3px;
}

.section--dark {
  background: var(--c-black);
  color: var(--c-white);
}
/* Tighten the seam between consecutive dark sections so the
   shared-black stretch doesn't read as dead space. */
.section--dark + .section--dark { padding-top: var(--sp-6); }
@media (min-width: 768px) {
  .section--dark + .section--dark { padding-top: var(--sp-7); }
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--c-white); }
.section--dark a:not(.btn) { color: var(--c-turquoise); }
.section--dark a:not(.btn):hover { color: var(--c-coral); }

.section--cream { background: var(--c-cream); }
.section--turquoise {
  background: var(--c-turquoise);
  color: var(--c-white);
}
.section--turquoise h1,
.section--turquoise h2,
.section--turquoise h3 { color: var(--c-white); }

.kicker {
  display: inline-block;
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 900;
  font-size: var(--fz-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-turquoise-dark);
  margin-bottom: var(--sp-3);
}

.section--dark .kicker,
.section--turquoise .kicker { color: var(--c-coral); }

.lead {
  font-size: var(--fz-lg);
  color: var(--c-slate);
  max-width: 640px;
}
.section--dark .lead { color: var(--c-fog); }

.eyebrow {
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 900;
  font-size: var(--fz-xs);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-mist);
}

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Skip link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-3) var(--sp-5);
  z-index: 1000;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; color: var(--c-white); }

/* --- Header & nav -------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(17, 17, 17, 0.92);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--c-white);
  /* NOTE: backdrop-filter is applied only at desktop (≥960px) below.
     At mobile widths, backdrop-filter would turn the header into the
     containing block for the fixed-positioned .nav-menu drawer, trapping
     the menu inside the header instead of covering the viewport. */
}
@media (min-width: 960px) {
  .site-header {
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-white);
  text-transform: uppercase;
}
.logo:hover { color: var(--c-turquoise); }
.logo > span {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  gap: 2px;
}
.logo small {
  display: block;
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--c-mist);
  text-transform: uppercase;
  margin: 0;
}
.logo-mark {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  /* Slight horizontal expansion so the mark reads as a grounded block
     rather than a thin pillar. translateY lifts it a hair so it sits
     with the cap-height of "Stay Fit" instead of dropping below it. */
  transform: translateY(-2px) scaleX(1.05) scaleY(0.92);
}
img.logo-mark {
  background: transparent;
  border: 0;
}

.nav-links {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--sp-5);
}
.nav-links a {
  color: var(--c-fog);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.005em;
  padding: var(--sp-2) 0;
  position: relative;
}
.nav-links a:hover { color: var(--c-white); }
.nav-links a.is-active {
  color: var(--c-white);
}
.nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -4px;
  height: 3px;
  background: var(--c-coral);
  border-radius: 2px;
}

.btn.nav-cta {
  display: none;
  font-size: 0.9375rem;
  padding: var(--sp-3) var(--sp-5);
  min-height: 44px;
}

.nav-toggle {
  background: transparent;
  border: 0;
  padding: var(--sp-2);
  cursor: pointer;
  color: var(--c-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-toggle svg { width: 28px; height: 28px; }

.nav-menu {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--c-black);
  padding: var(--sp-6) var(--sp-5) calc(var(--sticky-bar-h) + var(--sp-6));
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  z-index: 40;
}
.nav-menu.is-open { transform: translateX(0); }
.nav-menu .nav-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.nav-menu .nav-links li {
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nav-menu .nav-links a {
  display: block;
  padding: var(--sp-4) 0;
  font-size: var(--fz-lg);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.nav-menu-footer {
  margin-top: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

@media (min-width: 960px) {
  .nav-toggle { display: none; }
  .nav-links { display: flex; }
  .btn.nav-cta { display: inline-flex; }
  .nav-menu { position: static; inset: auto; transform: none; background: transparent; padding: 0; overflow: visible; display: contents; }
  .nav-menu .nav-links {
    flex-direction: row;
    border: 0;
    gap: var(--sp-6);
  }
  .nav-menu .nav-links li { border: 0; }
  .nav-menu .nav-links a {
    padding: var(--sp-2) 0;
    font-family: var(--ff-body);
    font-style: normal;
    font-weight: 700;
    font-size: 1.125rem;
    text-transform: none;
    letter-spacing: -0.005em;
  }
  .nav-menu-footer { display: none; }
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: var(--fz-sm);
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
  text-transform: uppercase;
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-turquoise);
  color: var(--c-white);
  border-color: var(--c-turquoise);
}
.btn--primary:hover {
  background: var(--c-turquoise-dark);
  border-color: var(--c-turquoise-dark);
  color: var(--c-white);
}

.btn--secondary {
  background: transparent;
  color: var(--c-black);
  border-color: var(--c-black);
}
.btn--secondary:hover {
  background: var(--c-black);
  color: var(--c-white);
}
/* On dark backgrounds, flip the palette so the outline button is readable */
.section--dark .btn--secondary,
.hero .btn--secondary,
.page-header .btn--secondary {
  color: var(--c-white);
  border-color: rgba(255,255,255,0.5);
}
.section--dark .btn--secondary:hover,
.hero .btn--secondary:hover,
.page-header .btn--secondary:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}

.btn--ghost {
  background: transparent;
  color: var(--c-white);
  border-color: rgba(255,255,255,0.4);
}
.btn--ghost:hover {
  background: var(--c-white);
  color: var(--c-black);
  border-color: var(--c-white);
}

.btn--turquoise {
  background: var(--c-turquoise);
  color: var(--c-white);
  border-color: var(--c-turquoise);
}
.btn--turquoise:hover {
  background: var(--c-turquoise-dark);
  border-color: var(--c-turquoise-dark);
}

.btn--lg {
  padding: var(--sp-4) var(--sp-7);
  font-size: var(--fz-base);
  min-height: 56px;
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --- Hero (typographic) ------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-9) 0 var(--sp-10);
  isolation: isolate;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  opacity: 0.9;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(17,17,17,0.15), rgba(17,17,17,0.3) 70%, rgba(17,17,17,0.45)),
    rgba(17,17,17,0.1);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Sound toggle — tucked in the bottom-right of the hero */
.hero__sound-toggle {
  position: absolute;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 10px var(--sp-4);
  background: rgba(17,17,17,0.75);
  color: var(--c-white);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  font-family: var(--ff-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__sound-toggle:hover {
  background: rgba(17,17,17,0.9);
  border-color: var(--c-turquoise);
}
.hero__sound-toggle svg { width: 16px; height: 16px; }
.hero__sound-icon--on { display: none; }
.hero__sound-icon--off { display: inline-block; }
.hero__sound-toggle[aria-pressed="true"] .hero__sound-icon--on { display: inline-block; }
.hero__sound-toggle[aria-pressed="true"] .hero__sound-icon--off { display: none; }
.hero__sound-toggle[aria-pressed="true"] {
  background: var(--c-turquoise);
  border-color: var(--c-turquoise);
}
@media (min-width: 768px) {
  .hero { padding: var(--sp-10) 0 var(--sp-10); }
}

.hero__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-6);
  text-align: center;
  background: rgba(17, 17, 17, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .hero__inner { padding: var(--sp-8) var(--sp-7); }
}
.hero__inner h1 { margin-left: auto; margin-right: auto; }
.hero__lead { margin-left: auto; margin-right: auto; }
.hero__cta { justify-content: center; }
.hero__meta { justify-content: center; }

/* Rotating testimonial eyebrow — sits centered above the H1 */
.hero__eyebrow {
  text-align: center;
  max-width: 780px;
  margin: 0 auto var(--sp-8);
  color: var(--c-white);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero__eyebrow .rotator { align-self: stretch; width: 100%; }
.hero__eyebrow .rotator__track { min-height: 120px; }
.hero__eyebrow .rotator__slide {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.375rem, 2.8vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--c-white);
}
.hero__eyebrow .rotator__slide span {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--ff-body);
  font-style: normal;
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mist);
}
.hero__eyebrow-cta {
  display: inline-block;
  margin-top: var(--sp-4);
  color: var(--c-white);
  font-size: var(--fz-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  border-bottom: 1.5px solid var(--c-turquoise);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.hero__eyebrow-cta:hover {
  color: var(--c-turquoise);
  border-color: var(--c-white);
}
.hero h1 {
  color: var(--c-white);
  font-size: clamp(3rem, 13vw, 9rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  margin-bottom: var(--sp-8);
}
.hero h1 em {
  color: var(--c-turquoise);
  font-style: italic;
  font-weight: inherit;
}
.hero__lead {
  font-size: clamp(1.0625rem, 1.6vw, 1.3125rem);
  color: var(--c-fog);
  max-width: 52ch;
  line-height: 1.7;
  margin: 0 auto var(--sp-8);
}
.hero__lead strong {
  color: var(--c-white);
  font-weight: 700;
}
.hero__lead--intro {
  color: var(--c-white);
  font-weight: 500;
  margin-bottom: var(--sp-4);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-8);
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-7);
  padding-top: var(--sp-7);
  border-top: 1px solid rgba(255,255,255,0.12);
}
.hero__meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}
.hero__meta-item strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.95;
  color: var(--c-white);
  letter-spacing: -0.025em;
}
.hero__meta-item span {
  font-size: 0.75rem;
  color: var(--c-mist);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}
.hero__meta-divider {
  width: 1px;
  height: 64px;
  background: rgba(255,255,255,0.15);
}
@media (max-width: 640px) {
  .hero__meta-divider { display: none; }
  .hero__meta { gap: var(--sp-5); }
  .hero__meta-item strong { font-size: 2.75rem; }
}

/* --- Rating badge -------------------------------------------------------- */
.rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--c-white);
  font-size: 0.8125rem;
  margin-bottom: var(--sp-6);
}
.rating-badge__stars {
  color: var(--c-coral);
  letter-spacing: 0.15em;
  font-size: 0.8125rem;
}
.rating-badge__score {
  font-weight: 700;
  color: var(--c-white);
  font-variant-numeric: tabular-nums;
}
.rating-badge__label {
  color: var(--c-mist);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.rating-badge--light { color: var(--c-ink); }
.rating-badge--light .rating-badge__stars { color: var(--c-coral-dark); }
.rating-badge--light .rating-badge__score { color: var(--c-black); }
.rating-badge--light .rating-badge__label { color: var(--c-slate); }

/* Hero placement — sits below the "Read All Reviews" link inside the eyebrow */
.rating-badge--hero {
  display: inline-flex;
  margin: var(--sp-3) auto 0;
  gap: var(--sp-3);
  font-size: 0.875rem;
}
.rating-badge--hero .rating-badge__stars { font-size: 1rem; letter-spacing: 0.18em; }
.rating-badge--hero .rating-badge__score { font-size: 1rem; }

/* --- Value props --------------------------------------------------------- */
.value-grid {
  --divider: var(--c-fog);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--divider);
}
@media (min-width: 768px) {
  .value-grid { grid-template-columns: repeat(3, 1fr); }
}
.section--dark .value-grid,
.value-grid--dark { --divider: rgba(255,255,255,0.1); }

.value-card {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--divider);
  padding: var(--sp-6) 0;
  transition: none;
}
/* Last item, in any layout, has no trailing bottom border */
.value-grid > .value-card:last-child { border-bottom: 0; }

@media (min-width: 768px) {
  .value-card {
    padding: var(--sp-6);
    border-right: 1px solid var(--divider);
  }
  /* Strip the right edge on the last column of every row */
  .value-grid > .value-card:nth-child(3n) { border-right: 0; }
  /* Last full row (3 items) has no bottom border */
  .value-grid > .value-card:nth-last-child(-n+3) { border-bottom: 0; }
  /* Outer-edge padding cancellation so the grid aligns flush to container */
  .value-grid > .value-card:nth-child(3n+1) { padding-left: 0; }
  .value-grid > .value-card:nth-child(3n) { padding-right: 0; }
}
.value-card:hover { transform: none; box-shadow: none; }
.value-card__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.8125rem;
  letter-spacing: 0.2em;
  color: var(--c-coral);
  margin-bottom: var(--sp-4);
  display: inline-block;
}
.value-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  color: var(--c-turquoise-dark);
  border: 1.5px solid var(--c-turquoise);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-4);
}
.value-card h3 { margin-bottom: var(--sp-3); font-size: var(--fz-xl); }
.value-card p { color: var(--c-slate); margin: 0; line-height: 1.65; }
.section--dark .value-card h3 { color: var(--c-white); }
.section--dark .value-card p { color: var(--c-fog); }

/* --- Generic card grids -------------------------------------------------- */
.card-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: transparent;
  border: 0;
  overflow: hidden;
  transition: none;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: none; box-shadow: none; }
.card__media {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: var(--c-turquoise-light);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-4);
}
.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.card:hover .card__media img { transform: scale(1.03); }
.card__body {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card__tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-turquoise-dark);
  margin-bottom: var(--sp-3);
}
.card h3 { margin-bottom: var(--sp-2); font-size: var(--fz-xl); letter-spacing: -0.01em; }
.card p { color: var(--c-slate); line-height: 1.6; }
.card__meta {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fz-sm);
}
.card__meta a {
  color: var(--c-black);
  font-weight: 600;
  border-bottom: 1.5px solid var(--c-coral);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.card__meta a:hover {
  color: var(--c-coral-dark);
  border-color: var(--c-coral-dark);
}

/* --- Offerings list (editorial row-menu with thumbnails) -------------- */
.offerings {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-fog);
}
.offering {
  display: grid;
  grid-template-columns: 180px auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: var(--sp-5) 0;
  border-bottom: 1px solid var(--c-fog);
  color: var(--c-black);
  transition: padding 0.3s var(--ease);
}
.offering:hover {
  padding-left: var(--sp-3);
  padding-right: var(--sp-3);
}
.offering__media {
  aspect-ratio: 4/3;
  width: 180px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--c-turquoise-light);
}
.offering__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease);
}
.offering:hover .offering__media img { transform: scale(1.05); }

.offering__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--c-coral);
  letter-spacing: -0.01em;
  align-self: center;
}

.offering__body { min-width: 0; }
.offering__title {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.75rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-2);
  color: var(--c-black);
  transition: color 0.2s var(--ease);
}
.offering:hover .offering__title { color: var(--c-turquoise-dark); }
.offering__blurb {
  margin: 0;
  color: var(--c-slate);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 62ch;
}
.offering__arrow {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 2.25rem;
  color: var(--c-black);
  transition: transform 0.3s var(--ease), color 0.2s var(--ease);
  align-self: center;
  padding-right: var(--sp-2);
}
.offering:hover .offering__arrow {
  transform: translateX(10px);
  color: var(--c-turquoise);
}

/* Desktop — bump blurb copy for readability on wide viewports */
@media (min-width: 900px) {
  .offering__blurb { font-size: 1.4375rem; line-height: 1.55; max-width: 56ch; }
}

@media (max-width: 760px) {
  .offering {
    grid-template-columns: 110px auto 1fr auto;
    gap: var(--sp-4);
    padding: var(--sp-4) 0;
  }
  .offering__media { width: 110px; }
  .offering__num { font-size: 1rem; }
  .offering__title { font-size: 1.5rem; }
  .offering__blurb { font-size: 0.9375rem; }
  .offering__arrow { font-size: 1.5rem; }
  .offering:hover { padding-left: 0; padding-right: 0; }
}
@media (max-width: 520px) {
  .offering {
    grid-template-columns: 1fr auto;
    gap: var(--sp-3);
    row-gap: var(--sp-3);
  }
  .offering__media {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16/9;
  }
  .offering__num {
    grid-row: 2;
    grid-column: 1;
    justify-self: start;
    align-self: center;
  }
  /* Arrow hidden on mobile — the "Learn more →" text below covers the
     affordance on its own. */
  .offering__arrow { display: none; }
  .offering__body {
    grid-row: 3;
    grid-column: 1 / -1;
  }
  /* Explicit "Learn more →" text cue appended after each blurb */
  .offering__body::after {
    content: "Learn more →";
    display: inline-block;
    margin-top: var(--sp-3);
    color: var(--c-turquoise);
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.03em;
    border-bottom: 1.5px solid var(--c-turquoise);
    padding-bottom: 2px;
  }
}

/* Offerings — dark-section treatment */
.section--dark .offerings { border-top-color: rgba(255,255,255,0.1); }
.section--dark .offering {
  color: var(--c-white);
  border-bottom-color: rgba(255,255,255,0.1);
}
.section--dark .offering__title { color: var(--c-white); }
.section--dark .offering:hover .offering__title { color: var(--c-turquoise); }
.section--dark .offering__blurb { color: var(--c-fog); }
.section--dark .offering__arrow { color: var(--c-white); }
.section--dark .offering:hover .offering__arrow { color: var(--c-turquoise); }

/* --- Step blocks (typographic service teasers) -------------------------- */
.steps {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-fog);
}
@media (min-width: 880px) { .steps { grid-template-columns: repeat(3, 1fr); border-top: 0; } }

.step {
  padding: var(--sp-6) 0;
  border-bottom: 1px solid var(--c-fog);
  display: flex;
  flex-direction: column;
}
@media (min-width: 880px) {
  .step {
    border-bottom: 0;
    border-right: 1px solid var(--c-fog);
    padding: 0 var(--sp-6);
  }
  .step:first-child { padding-left: 0; }
  .step:last-child { border-right: 0; padding-right: 0; }
}
.step__num {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fz-2xl);
  line-height: 1;
  color: var(--c-coral);
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-4);
}
.step__tag {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--c-turquoise-dark);
  margin-bottom: var(--sp-2);
}
.step h3 {
  font-size: clamp(1.375rem, 2.2vw, 1.75rem);
  letter-spacing: -0.01em;
  margin-bottom: var(--sp-3);
  line-height: 1.2;
}
.step p { color: var(--c-slate); line-height: 1.6; }
.step__link {
  margin-top: auto;
  padding-top: var(--sp-4);
  font-weight: 600;
  font-size: var(--fz-sm);
  color: var(--c-black);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border-bottom: 1.5px solid var(--c-coral);
  padding-bottom: 2px;
  transition: color 0.2s var(--ease), gap 0.2s var(--ease);
}
.step__link:hover { color: var(--c-coral-dark); gap: 12px; }

/* --- Statement block (used for "across the street" etc.) --------------- */
.statement {
  max-width: 920px;
  margin: 0 auto;
}
.statement__kicker {
  display: inline-block;
  font-family: var(--ff-display);
  font-style: normal;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-coral);
  margin-bottom: var(--sp-4);
}
.statement h2 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: var(--sp-5);
}
.statement p {
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.6;
  max-width: 58ch;
  color: var(--c-fog);
}
.statement p + p { margin-top: var(--sp-4); }
.statement__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- Find us block (address + map) ----------------------------------- */
.find {
  display: grid;
  gap: var(--sp-7);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .find {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--sp-8);
  }
}
.find__info { max-width: 46ch; }
.find__facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: var(--sp-5) 0 0;
  padding: 0;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.find__fact {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin: 0;
}
.find__fact dt {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-mist);
  margin: 0;
  align-self: center;
}
.find__fact dd {
  color: var(--c-white);
  font-size: var(--fz-base);
  margin: 0;
  align-self: center;
}
.find__fact dd a { color: var(--c-white); border-bottom: 1.5px solid var(--c-turquoise); padding-bottom: 2px; transition: color 0.2s var(--ease); }
.find__fact dd a:hover { color: var(--c-turquoise); }

.find__map {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: var(--shadow-lg);
  background: var(--c-charcoal);
}
.find__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: contrast(1.02); }

/* --- Comparison table (big-box vs Stay Fit) --------------------------- */
.compare {
  --compare-divider: rgba(255,255,255,0.12);
  --compare-row-divider: rgba(255,255,255,0.08);
  --compare-label: var(--c-white);
  --compare-head-label: var(--c-mist);
  --compare-them: var(--c-slate);
  --compare-us: var(--c-white);
  --compare-head-them: var(--c-mist);
  --compare-head-us: var(--c-turquoise);
  --compare-x-border: rgba(255,255,255,0.15);
  --compare-x-color: var(--c-mist);
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--compare-divider);
}
.compare--light {
  --compare-divider: var(--c-ink);
  --compare-row-divider: var(--c-fog);
  --compare-label: var(--c-ink);
  --compare-head-label: var(--c-mist);
  --compare-them: var(--c-mist);
  --compare-us: var(--c-black);
  --compare-head-them: var(--c-mist);
  --compare-head-us: var(--c-turquoise-dark);
  --compare-x-border: var(--c-fog);
  --compare-x-color: var(--c-mist);
}
/* Subhead beneath "Feel the difference." */
.compare-sub {
  font-family: var(--ff-body);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.125rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  color: var(--c-fog);
  margin: var(--sp-4) auto 0;
  max-width: 44ch;
}

.compare__row {
  display: grid;
  grid-template-columns: 1fr 120px 120px;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--compare-row-divider);
  transition: background 0.2s var(--ease);
}
.compare__row--head {
  border-bottom: 1px solid var(--compare-divider);
  padding: var(--sp-3) 0 var(--sp-4);
}
.compare__label {
  font-size: 1.125rem;
  color: var(--compare-label);
  font-weight: 600;
  padding-right: var(--sp-4);
  line-height: 1.35;
  letter-spacing: -0.005em;
}
.compare__row--head .compare__label {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--compare-head-label);
  font-weight: 900;
}
.compare__col {
  text-align: center;
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}
.compare__col--them { color: var(--compare-them); }
.compare__col--us { color: var(--compare-us); font-weight: 700; }
.compare__row--head .compare__col {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: 0.9375rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.3;
}
.compare__row--head .compare__col--them { color: #8F2EBB; }
.compare__row--head .compare__col--us { color: var(--compare-head-us); }

.compare__check,
.compare__x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1.125rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0;
}
.compare__check {
  background: var(--c-turquoise);
  color: var(--c-white);
}
.compare__x {
  background: #8F2EBB;
  color: var(--c-white);
  border: 0;
}

@media (max-width: 560px) {
  .compare__row { grid-template-columns: 1fr 70px 70px; gap: var(--sp-2); padding: var(--sp-3) 0; }
  .compare__label { font-size: 1rem; padding-right: var(--sp-2); font-weight: 600; }
  .compare__row--head .compare__col { font-size: 0.75rem; letter-spacing: 0.15em; }
  .compare__check, .compare__x { width: 36px; height: 36px; font-size: 1rem; }
}

/* Desktop — upsize compare chart text + pills for wide-viewport legibility */
@media (min-width: 900px) {
  .compare__row {
    grid-template-columns: 1fr 220px 220px;
    padding: var(--sp-6) 0;
  }
  .compare__label { font-size: 2.125rem; line-height: 1.2; }
  .compare__col { font-size: 2.125rem; }
  .compare__row--head {
    padding: var(--sp-5) 0 var(--sp-6);
  }
  .compare__row--head .compare__col {
    font-size: 1.5rem;
    letter-spacing: 0.2em;
  }
  .compare__row--head .compare__label {
    font-size: 0.9375rem;
  }
  .compare__check,
  .compare__x {
    width: 84px;
    height: 84px;
    font-size: 2.25rem;
  }
  .compare-sub {
    font-size: 1.625rem;
    max-width: 52ch;
    margin-top: var(--sp-5);
  }
}

/* --- Marquee strip (stats / value markers on cream sections) ----------- */
.marker-row {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--c-fog);
  border-bottom: 1px solid var(--c-fog);
  margin: 0;
}
@media (min-width: 768px) { .marker-row { grid-template-columns: repeat(3, 1fr); } }
.marker {
  padding: var(--sp-5) var(--sp-4);
  border-bottom: 1px solid var(--c-fog);
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
@media (min-width: 768px) {
  .marker {
    border-bottom: 0;
    border-right: 1px solid var(--c-fog);
    justify-content: center;
    text-align: center;
  }
  .marker:last-child { border-right: 0; }
}
.marker strong {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fz-2xl);
  line-height: 1;
  color: var(--c-black);
  letter-spacing: -0.02em;
}
.marker span {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-slate);
}

/* --- Testimonial --------------------------------------------------------- */
.quote-block {
  background: transparent;
  border-radius: 0;
  padding: var(--sp-3) 0 var(--sp-3) var(--sp-5);
  position: relative;
  border-left: 2px solid var(--c-coral);
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .quote-block { padding: var(--sp-4) 0 var(--sp-4) var(--sp-6); }
}
.quote-block blockquote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: clamp(1.125rem, 2.2vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0 0 var(--sp-3);
  color: var(--c-black);
}
.quote-block cite {
  font-style: normal;
  font-weight: 600;
  color: var(--c-slate);
  font-size: var(--fz-sm);
  letter-spacing: 0.02em;
}
.quote-block cite span {
  display: block;
  color: var(--c-mist);
  font-size: var(--fz-xs);
  font-weight: 400;
  margin-top: 2px;
}

.rotator {
  position: relative;
}
.rotator__track {
  position: relative;
  display: grid;
}
.rotator__slide {
  grid-area: 1 / 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s var(--ease);
}
.rotator__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}
.rotator__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  flex-wrap: wrap;
}
.rotator__dots {
  display: flex;
  gap: var(--sp-2);
  margin: 0;
}

/* Editorial rotator: big pull-quote, no left rule, prominent CTA */
.rotator--editorial .quote-block {
  border-left: 0;
  padding: 0;
  max-width: none;
}
.rotator--editorial .quote-block blockquote {
  font-size: clamp(1.375rem, 3.4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.012em;
  margin: var(--sp-4) 0 var(--sp-4);
}
.rotator--editorial .quote-block cite {
  font-size: var(--fz-sm);
}
.rotator--editorial .rotator__track { min-height: 200px; }
.rotator__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--c-fog);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.rotator__dot.is-active { background: var(--c-coral); transform: scale(1.25); }

/* --- Testimonial wall ---------------------------------------------------- */
.wall {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 768px) { .wall { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .wall { grid-template-columns: repeat(3, 1fr); } }

.wall-card {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
}
.wall-card__stars {
  color: var(--c-coral);
  font-size: var(--fz-base);
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-3);
}
.wall-card blockquote {
  margin: 0 0 var(--sp-4);
  font-size: var(--fz-base);
  line-height: 1.6;
  color: var(--c-ink);
}
.wall-card cite {
  margin-top: auto;
  font-style: normal;
  font-weight: 600;
  font-size: var(--fz-sm);
  color: var(--c-slate);
}
.wall-card cite span {
  display: block;
  color: var(--c-mist);
  font-size: var(--fz-xs);
  font-weight: 400;
}

.theme-pill {
  display: inline-block;
  font-size: var(--fz-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--c-turquoise-dark);
  background: var(--c-turquoise-light);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-pill);
  margin-bottom: var(--sp-3);
}

/* --- Feature strip ------------------------------------------------------- */
.strip {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 768px) {
  .strip { grid-template-columns: 1fr 1fr; align-items: center; gap: var(--sp-8); }
}
.strip--reverse .strip__media { order: -1; }
@media (min-width: 768px) {
  .strip--reverse .strip__media { order: 1; }
}
.strip__media img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  aspect-ratio: 4/3;
  width: 100%;
  object-fit: cover;
}

/* --- Pricing ------------------------------------------------------------- */
.price-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 768px) { .price-grid { grid-template-columns: repeat(3, 1fr); } }

.price-card {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.price-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.price-card--featured {
  border-color: var(--c-turquoise);
  border-width: 2px;
  background: var(--c-turquoise-light);
  position: relative;
}
.price-card--featured::before {
  content: "Most Popular";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-coral);
  color: var(--c-black);
  font-size: var(--fz-xs);
  font-weight: 700;
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.price-card__name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fz-xl);
  color: var(--c-black);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}
.price-card__price {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fz-3xl);
  color: var(--c-black);
  line-height: 1;
  margin-bottom: var(--sp-2);
}
.price-card__price small {
  font-size: var(--fz-sm);
  font-weight: 400;
  color: var(--c-slate);
  font-style: normal;
  letter-spacing: 0;
}
.price-card__note {
  color: var(--c-slate);
  font-size: var(--fz-sm);
  margin-bottom: var(--sp-5);
}
.price-card__list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.price-card__list li {
  font-size: var(--fz-sm);
  padding-left: 26px;
  position: relative;
  color: var(--c-ink);
}
.price-card__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--c-turquoise-dark);
  font-weight: 800;
}
.price-card .btn { margin-top: auto; }

.no-fees {
  background: var(--c-black);
  color: var(--c-white);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: grid;
  /* Items lay out in a single row at every viewport — no stacking on mobile.
     auto-fit + minmax(0, 1fr) handles 2/3/4 items without dead space.
     The grid lays out children evenly regardless of count. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--sp-2);
  /* Establish containment so children can scale based on .no-fees width
     (not viewport width). Critical because .no-fees lives inside a 50%
     .strip column on Services — viewport-based clamps don't shrink enough. */
  container-type: inline-size;
  container-name: nofees;
}
.no-fees__item {
  text-align: center;
  padding: var(--sp-2) var(--sp-1);
}
.no-fees__item strong {
  display: block;
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fz-lg);
  color: var(--c-coral);
  margin-bottom: var(--sp-1);
  line-height: 1;
}
.no-fees__item span {
  font-size: 0.625rem;
  color: var(--c-fog);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1.25;
  display: block;
}

/* Desktop restores the roomier sizing */
@media (min-width: 768px) {
  .no-fees { padding: var(--sp-6); gap: var(--sp-4); }
  .no-fees__item { padding: var(--sp-3); }
  .no-fees__item strong { font-size: var(--fz-xl); }
  .no-fees__item span {
    font-size: var(--fz-sm);
    letter-spacing: 0.08em;
  }
}

/* Container query: when .no-fees itself is narrow (e.g., inside a 50%
   .strip column at smaller desktop widths), shrink labels and tighten
   tracking so "Cancellation Fee" never crashes into "Contracts". */
@container nofees (max-width: 600px) {
  .no-fees__item span {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}
@container nofees (max-width: 480px) {
  .no-fees__item span {
    font-size: 0.625rem;
    letter-spacing: 0.02em;
  }
}

/* --- Forms --------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-4);
}
.form-row {
  display: grid;
  gap: var(--sp-4);
}
@media (min-width: 640px) {
  .form-row--2 { grid-template-columns: 1fr 1fr; }
}
label {
  display: block;
  font-weight: 600;
  font-size: var(--fz-sm);
  margin-bottom: var(--sp-2);
  color: var(--c-charcoal);
}
input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: inherit;
  font-size: var(--fz-base);
  color: var(--c-ink);
  background: var(--c-white);
  border: 1.5px solid var(--c-fog);
  border-radius: var(--radius-md);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--c-turquoise);
  box-shadow: 0 0 0 4px rgba(37,164,177,0.12);
}
textarea { min-height: 140px; resize: vertical; }

.form-note {
  font-size: var(--fz-xs);
  color: var(--c-mist);
}

/* Honeypot — off-screen but not display:none (Netlify requires it) */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

/* --- Footer & contact strip --------------------------------------------- */
/* Photo marquee — airport-walkway style infinite horizontal scroll.
   Small facility thumbnails drift slowly from right to left, looping
   seamlessly. Edges fade to black. Each tile has a faint turquoise glow. */
.photo-marquee {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
  padding: var(--sp-7) 0;
}
.photo-marquee__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  /* Only capture horizontal gestures so vertical page-scroll still works
     when a finger drags over the marquee on mobile. */
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;  /* Firefox */
}
@media (min-width: 768px) {
  .photo-marquee { padding: var(--sp-8) 0; }
}
/* Dark fade edges removed — photos now run all the way to the viewport edges. */

.photo-marquee__track {
  display: flex;
  gap: var(--sp-4);
  width: max-content;
  will-change: scroll-position;
}
/* Chromium/WebKit scrollbar hide — keep the marquee clean. */
.photo-marquee__viewport::-webkit-scrollbar { display: none; }
/* While actively click-dragging on desktop, show the grabbing cursor
   and prevent text/image selection on the photos. */
.photo-marquee__viewport.is-grabbing { cursor: grabbing; }
.photo-marquee__viewport.is-grabbing .photo-marquee__item img {
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.photo-marquee__item {
  flex-shrink: 0;
  height: 160px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--c-charcoal);
  box-shadow:
    0 0 0 1px rgba(37, 164, 177, 0.4),
    0 0 16px rgba(37, 164, 177, 0.2),
    0 0 40px rgba(37, 164, 177, 0.08);
}
@media (min-width: 768px) {
  .photo-marquee__item { height: 200px; }
}
.photo-marquee__item img {
  /* Width auto + fixed height = variable-width items that preserve each
     photo's natural aspect ratio. You see the whole frame pass by. */
  height: 100%;
  width: auto;
  max-width: 520px;
  object-fit: cover;
  display: block;
}

.contact-strip {
  background: var(--c-black);
  color: var(--c-turquoise);
  padding: var(--sp-7) 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-strip__grid {
  display: grid;
  gap: var(--sp-5);
  align-items: center;
}
@media (min-width: 768px) {
  .contact-strip__grid {
    grid-template-columns: 1.5fr auto;
    gap: var(--sp-6);
  }
}
.contact-strip h3 {
  color: var(--c-turquoise);
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  margin: 0;
  font-size: var(--fz-2xl);
}
.contact-strip p { margin: 0; color: var(--c-fog); }
.contact-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.site-footer {
  background: var(--c-black);
  color: var(--c-fog);
  padding: var(--sp-8) 0 calc(var(--sticky-bar-h) + var(--sp-5));
  font-size: var(--fz-sm);
}
@media (min-width: 960px) {
  .site-footer { padding-bottom: var(--sp-7); }
}
.site-footer a { color: var(--c-fog); }
.site-footer a:hover { color: var(--c-coral); }
.footer-grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--sp-7); }
}
.footer-col h4 {
  color: var(--c-white);
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  font-size: var(--fz-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-3);
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-3);
  padding-top: var(--sp-5);
  color: var(--c-mist);
  font-size: var(--fz-xs);
}
.built-by {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: 1.0625rem;
  color: var(--c-fog);
  letter-spacing: 0.01em;
}
.built-by__mark {
  height: 64px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.socials { display: inline-flex; gap: var(--sp-3); margin-top: var(--sp-3); }
.socials a {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s var(--ease);
}
.socials a:hover { background: var(--c-coral); color: var(--c-black); }
.socials svg { width: 20px; height: 20px; }

/* --- Sticky mobile action bar ------------------------------------------- */
.mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--sticky-bar-h);
  background: var(--c-black);
  color: var(--c-white);
  display: grid;
  grid-template-columns: 1fr 1fr;
  z-index: 45;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.12);
}
.mobile-bar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--c-white);
  font-family: var(--ff-display);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  font-size: var(--fz-sm);
  letter-spacing: 0.05em;
}
.mobile-bar a:hover { color: var(--c-coral); }
.mobile-bar a + a {
  border-left: 1px solid rgba(255,255,255,0.12);
}
.mobile-bar svg { width: 18px; height: 18px; }

@media (min-width: 960px) {
  .mobile-bar { display: none; }
  .site-footer { padding-bottom: var(--sp-8); }
}

/* --- Page header (interior pages) --------------------------------------- */
.page-header {
  background: var(--c-black);
  color: var(--c-white);
  padding: var(--sp-8) 0 var(--sp-7);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 80% 0%, rgba(37,164,177,0.22), transparent 60%);
  pointer-events: none;
}
.page-header h1 {
  color: var(--c-white);
  position: relative;
  max-width: 18ch;
}
.page-header h1 em {
  color: var(--c-coral);
  font-style: italic;
}
.page-header p {
  color: var(--c-fog);
  max-width: 56ch;
  font-size: var(--fz-lg);
  margin: 0;
  position: relative;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 820px;
  margin: 0 auto;
}
.faq-item {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  transition: border-color 0.2s var(--ease);
}
.faq-item[open] { border-color: var(--c-turquoise); }
.faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: var(--fz-base);
  color: var(--c-black);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: var(--ff-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--c-turquoise-dark);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__answer {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-fog);
  color: var(--c-slate);
}
.faq-item__answer p:last-child { margin-bottom: 0; }

/* --- Merch grid --------------------------------------------------------- */
.merch-grid {
  display: grid;
  gap: var(--sp-5);
}
@media (min-width: 640px) { .merch-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .merch-grid { grid-template-columns: repeat(3, 1fr); } }

.merch-card {
  background: var(--c-white);
  border: 1px solid var(--c-fog);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.merch-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.merch-card__media {
  aspect-ratio: 1;
  background: var(--c-turquoise-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--c-turquoise-dark);
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fz-sm);
  text-transform: uppercase;
  letter-spacing: 0.15em;
}
.merch-card__body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.merch-card__name {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 900;
  font-size: var(--fz-lg);
  text-transform: uppercase;
  color: var(--c-black);
  margin-bottom: var(--sp-2);
}
.merch-card__price { font-weight: 700; color: var(--c-slate); margin-bottom: var(--sp-4); }
.merch-card .btn { margin-top: auto; }

/* --- Map embed ---------------------------------------------------------- */
.map {
  aspect-ratio: 16/9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--c-fog);
  box-shadow: var(--shadow-sm);
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* --- Contact layout ----------------------------------------------------- */
.contact-grid {
  display: grid;
  gap: var(--sp-7);
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.25fr 1fr; gap: var(--sp-8); }
}
.contact-facts {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}
.contact-fact {
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--c-fog);
}
.contact-fact:last-child { border-bottom: 0; }
.contact-fact h4 {
  font-family: var(--ff-display);
  font-style: italic;
  font-size: var(--fz-sm);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--c-mist);
  margin-bottom: var(--sp-2);
}
.contact-fact p { margin: 0; font-size: var(--fz-lg); color: var(--c-black); }
.contact-fact a { color: var(--c-ink); font-weight: 600; }
.contact-fact a:hover { color: var(--c-turquoise-dark); }

/* --- Helpers ------------------------------------------------------------ */
.only-desktop { display: none; }
@media (min-width: 960px) { .only-desktop { display: initial; } }
.only-mobile { display: initial; }
@media (min-width: 960px) { .only-mobile { display: none; } }

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Cinematic color grade — marquee only ------------------------------ */
/* Deep shadows, punched midtones, slightly rich colors. Film-still energy
   without going B&W or brand-tinted. Everything below stays untouched. */
.photo-marquee__item img {
  filter: contrast(1.25) saturate(1.15) brightness(0.92);
  transition: filter 0.4s var(--ease);
}
.photo-marquee__item:hover img {
  filter: contrast(1.1) saturate(1.2) brightness(1);
}

/* --- Dark-section overrides for components styled for light bg -------- */

/* Form fields */
.section--dark label { color: var(--c-fog); }
.section--dark input[type="text"],
.section--dark input[type="email"],
.section--dark input[type="tel"],
.section--dark select,
.section--dark textarea {
  background: var(--c-charcoal);
  border-color: rgba(255,255,255,0.12);
  color: var(--c-white);
}
.section--dark input[type="text"]::placeholder,
.section--dark input[type="email"]::placeholder,
.section--dark input[type="tel"]::placeholder,
.section--dark textarea::placeholder { color: var(--c-mist); }
.section--dark input:focus,
.section--dark select:focus,
.section--dark textarea:focus {
  border-color: var(--c-turquoise);
  box-shadow: 0 0 0 4px rgba(37,164,177,0.2);
}
.section--dark .form-note { color: var(--c-mist); }

/* Pricing cards */
.section--dark .price-card {
  background: var(--c-charcoal);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .price-card:hover {
  box-shadow: 0 0 0 1px rgba(37,164,177,0.3), 0 12px 28px rgba(0,0,0,0.4);
}
.section--dark .price-card__name,
.section--dark .price-card__price { color: var(--c-white); }
.section--dark .price-card__price small { color: var(--c-fog); }
.section--dark .price-card__note { color: var(--c-fog); }
.section--dark .price-card__list li { color: var(--c-white); }
.section--dark .price-card--featured {
  background: rgba(37,164,177,0.12);
  border-color: var(--c-turquoise);
}

/* FAQ */
.section--dark .faq-item {
  background: transparent;
  border-color: rgba(255,255,255,0.12);
}
.section--dark .faq-item[open] { border-color: var(--c-turquoise); }
.section--dark .faq-item summary { color: var(--c-white); }
.section--dark .faq-item__answer {
  /* Match the cream-turquoise callout style used in the shop "how pickup
     works" box — the answer reads as a bright, branded callout panel. */
  background: var(--c-turquoise-light);
  color: var(--c-black);
  border: 0;
  border-left: 4px solid var(--c-turquoise);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-4);
}
.section--dark .faq-item__answer p { color: var(--c-black); }

/* Contact facts */
.section--dark .contact-fact {
  border-bottom-color: rgba(255,255,255,0.1);
}
.section--dark .contact-fact h4 { color: var(--c-mist); }
.section--dark .contact-fact p { color: var(--c-white); }
.section--dark .contact-fact a { color: var(--c-white); }
.section--dark .contact-fact a:hover { color: var(--c-turquoise); }

/* Testimonial wall cards */
.section--dark .wall-card {
  background: var(--c-charcoal);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .wall-card blockquote { color: var(--c-white); }
.section--dark .wall-card cite { color: var(--c-fog); }
.section--dark .wall-card cite span { color: var(--c-mist); }
.section--dark .theme-pill {
  color: var(--c-turquoise);
  background: rgba(37,164,177,0.12);
}

/* Merch cards */
.section--dark .merch-card {
  background: var(--c-charcoal);
  border-color: rgba(255,255,255,0.1);
}
.section--dark .merch-card__name { color: var(--c-white); }
.section--dark .merch-card__price { color: var(--c-fog); }
.section--dark .merch-card__media {
  background: rgba(37,164,177,0.08);
  color: var(--c-turquoise);
}

/* Value cards default color cascade — already handled earlier, but ensure
   headings are white and body is fog on dark */
.section--dark .value-card h3 { color: var(--c-white); }
.section--dark .value-card p { color: var(--c-fog); }
.section--dark .value-card__icon {
  background: rgba(37,164,177,0.12);
  color: var(--c-turquoise);
}

/* Strip / generic sections */
.section--dark .strip p { color: var(--c-fog); }
.section--dark .strip a:not(.btn) { color: var(--c-turquoise); }

/* Lead paragraphs in light-mode default become fog on dark */
.section--dark .lead { color: var(--c-fog); }

/* --- Reveals ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Site-wide warm overlay ("night-shift" wash) ------------------------- */
.warm-tint {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: multiply;
  background: rgba(255, 198, 150, 0.14);
}