/* ============================================================
   SOAPIFY CAR WASH — Home page styles
   Brand: black background, red + teal accents (per brand guide)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Primary palette (brand guide) */
  --black:    #000000;
  --ink:      #0a0a0a;   /* near-black panels */
  --panel:    #141414;
  --panel-2:  #2d2d2d;   /* brand secondary dark */
  --red:      #c92127;   /* brand primary red */
  --red-2:    #d1333e;   /* brand secondary red */
  --teal:     #00b3c2;   /* brand primary teal */
  --teal-soft:#b0dcdd;   /* brand secondary */
  --teal-pale:#d3edef;   /* brand secondary */
  --white:    #ffffff;
  --muted:    #9aa3a4;

  /* Brand fonts via Adobe Typekit (kit moh7srx). */
  --font-display: 'brandon-grotesque', 'Montserrat', system-ui, sans-serif;
  --font-body:    'kallisto', 'Saira', system-ui, sans-serif;

  /* Layout */
  --maxw: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0,0,0,.55);
  --ring: 0 0 0 3px rgba(0,179,194,.5);

  /* Shared page backdrop (used by body AND knockouts so they match exactly) */
  --page-bg:
    radial-gradient(1100px 720px at 82% -8%, rgba(0,179,194,.13), transparent 58%),
    radial-gradient(900px 800px at -10% 22%, rgba(201,33,39,.08), transparent 55%),
    radial-gradient(1000px 900px at 60% 78%, rgba(0,179,194,.07), transparent 60%),
    #04070a;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Ambient depth: a single cohesive backdrop ties the whole dark zone together
     (hero → gallery) so sections read as one designed space, not flat black boxes. */
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(1rem, .95rem + .25vw, 1.125rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: 0;
  text-transform: uppercase;
}

p { margin: 0 0 1rem; }
a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--teal-pale); }
img, svg { display: block; max-width: 100%; }
s { color: var(--muted); text-decoration-color: var(--red); }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 6px; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }

.skip-link {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--red); color: #fff; padding: .6rem 1.2rem; border-radius: 0 0 10px 10px;
  z-index: 200; transition: top .2s ease; font-family: var(--font-display); font-weight: 700;
}
.skip-link:focus { top: 0; color:#fff; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--red);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .92rem;
  padding: .8rem 1.4rem;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lg { font-size: 1rem; padding: 1rem 1.8rem; }

.btn-primary { background: var(--red); color: #fff; box-shadow: 0 8px 24px rgba(201,33,39,.35); }
.btn-primary:hover { background: var(--red-2); color:#fff; box-shadow: 0 12px 30px rgba(201,33,39,.5); }

.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.35); }
.btn-ghost:hover { color:#fff; border-color: var(--teal); background: rgba(0,179,194,.12); }

.btn-outline { background: transparent; color: var(--teal); border-color: var(--teal); }
.btn-outline:hover { background: var(--teal); color: #002; }

.btn-review { background: transparent; color: var(--white); border-color: rgba(255,255,255,.25); }
.btn-review:hover { color: #fff; border-color: var(--teal); background: rgba(0,179,194,.1); }
.btn-review .rev-stars { color: #f5b301; font-size: 1.05em; line-height: 1; }
.section-light .btn-review { color: #07171a; border-color: rgba(0,0,0,.22); }
.section-light .btn-review:hover { color: #07171a; border-color: var(--teal); background: rgba(0,179,194,.1); }

.btn-buy { background: #fff; color: var(--red); width: 100%; margin-top: auto; }
.btn-buy:hover { background: var(--teal-pale); color: var(--red); }
.btn-buy-light { background: #fff; color: var(--red); }
.btn-buy-light:hover { background: var(--teal-pale); color: var(--red); }

/* ---------- Logo (official brand asset) ---------- */
.logo { display: inline-flex; align-items: center; line-height: 0; }
.logo img { height: 72px; width: auto; transition: opacity .2s ease, height .3s ease; }
.logo:hover img { opacity: .85; }
.logo-footer img { height: 92px; }
@media (max-width: 860px) { .logo img { height: 60px; } }
@media (max-width: 560px) { .logo img { height: 50px; } }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled {
  background: rgba(0,0,0,.92); box-shadow: 0 6px 24px rgba(0,0,0,.5);
  backdrop-filter: blur(16px) saturate(1.2);
}
/* condense the bar once scrolled — a premium, considered feel */
.site-header.scrolled .header-inner { padding-block: .35rem; }
.site-header.scrolled .logo img { height: 54px; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding-block: .7rem; gap: 1rem; transition: padding .3s ease; }

.main-nav { display: flex; align-items: center; }
.nav-menu { display: flex; align-items: center; gap: 1.6rem; list-style: none; margin: 0; padding: 0; }
.nav-menu > li > a:not(.btn) {
  color: var(--white); font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; letter-spacing: .06em; position: relative; padding-block: .3rem;
  text-transform: uppercase;
}
.nav-menu > li > a:not(.btn)::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--teal); transition: width .25s ease;
}
.nav-menu > li > a:not(.btn):hover { color: var(--teal-pale); }
.nav-menu > li > a:not(.btn):hover::after { width: 100%; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  padding: 8px; cursor: pointer; z-index: 120;
}
.nav-toggle span { width: 26px; height: 3px; background: #fff; border-radius: 3px; transition: transform .3s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ---------- Bubbles decoration (styled to match the logo soap bubble:
       teal ring · soft translucent fill · white crescent shine) ---------- */
.bubbles-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble {
  position: absolute; border-radius: 50%;
  border: 2.5px solid rgba(0,179,194,.9);     /* clean teal ring, like the logo */
  background: transparent;
}
/* the large bubble carries the logo's solid white comma */
.bubble.b1::after {
  content: ""; position: absolute; inset: 12%; border-radius: 50%;
  background: #fff;
  -webkit-mask: radial-gradient(circle at 72% 26%, transparent 0 40%, #000 41.5%);
          mask: radial-gradient(circle at 72% 26%, transparent 0 40%, #000 41.5%);
}
/* small bubbles get a tiny crescent highlight, like the logo's little bubbles */
.bubble.b2::before, .bubble.b3::before {
  content: ""; position: absolute; right: 22%; top: 18%; width: 24%; height: 24%;
  border-radius: 50%; background: transparent;
  border: 2px solid #fff; border-right-color: transparent; border-bottom-color: transparent;
  transform: rotate(38deg);
}
.bubble.b1 { width: 340px; height: 340px; right: -80px; top: -60px; }
.bubble.b2 { width: 180px; height: 180px; right: 180px; top: 200px; border-color: rgba(176,220,221,.18); }
.bubble.b3 { width: 90px; height: 90px; right: 60px; bottom: 40px; }
.bubble.b4 { width: 140px; height: 140px; left: -40px; bottom: -30px; border-color: rgba(201,33,39,.18); }

/* ---------- Sections ---------- */
.section { position: relative; padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.section-title { font-size: clamp(1.9rem, 1.1rem + 3vw, 3.4rem); letter-spacing: -.018em; line-height: 1; }
.section-title.center { text-align: center; }
.section-lead { color: var(--teal-soft); font-size: 1.15rem; max-width: 60ch; margin-bottom: 2.5rem; }
.section-lead.center { text-align: center; margin-inline: auto; }

/* ---------- Section header layouts (vary the rhythm vs. the centered default) ---------- */
/* Split header: eyebrow + title sit on the left, the lead (and any section CTA) on the right. */
.split-head {
  display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.2rem, 3vw, 3rem); align-items: center; margin-bottom: 2.8rem;
}
.split-head .eyebrow { margin-bottom: 1rem; }
.split-head .section-title { margin: 0; }
.split-head .section-lead { margin: 0; max-width: 46ch; }
.split-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }

/* Side rail: the heading column sticks on the left while content scrolls on the right. */
.rail {
  display: grid; grid-template-columns: minmax(240px, 340px) 1fr;
  gap: clamp(1.6rem, 4vw, 4rem); align-items: start;
}
.rail-head { position: sticky; top: 104px; }
.rail-head .section-title { margin-bottom: 1rem; }
.rail-head .section-lead { margin-bottom: 0; max-width: none; }
/* Inside a rail the content list goes single-column — the sticky head balances the height. */
.rail .faq-list,
.rail .review-grid { grid-template-columns: 1fr; max-width: none; margin: 0; }

@media (max-width: 860px) {
  .split-head { grid-template-columns: 1fr; gap: 1rem; align-items: start; margin-bottom: 2rem; }
  .rail { grid-template-columns: 1fr; gap: 1.4rem; }
  .rail-head { position: static; }
}

/* ---------- Modern heading system ----------
   Reusable accents so headings aren't all the same flat block:
   .grad = teal gradient fill word · .out = outlined word · .title-xl = oversized */
.section-title .grad {
  background: linear-gradient(96deg, var(--teal) 0%, #5fdfe9 46%, var(--teal-pale) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.section-light .section-title .grad {
  background: linear-gradient(96deg, #0093a0, var(--teal) 90%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.section-title .out {
  color: transparent;
  -webkit-text-stroke: 1.6px rgba(255,255,255,.55); text-stroke: 1.6px rgba(255,255,255,.55);
}
.section-light .section-title .out {
  -webkit-text-stroke: 1.6px rgba(7,23,26,.42); text-stroke: 1.6px rgba(7,23,26,.42);
}
.section-title .red { color: var(--red-2); }
.title-xl { font-size: clamp(2.3rem, 1.1rem + 4.4vw, 4.6rem); line-height: .92; }

/* Editorial heading: a thin kicker line + index numeral, an alternative to the pill eyebrow */
.kicker {
  display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 1.1rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .18em; font-size: .76rem; color: var(--teal);
}
.kicker::before { content: ""; width: 36px; height: 2px; background: var(--teal); opacity: .8; }
.kicker.center { justify-content: center; }
.section-light .kicker { color: #0093a0; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--teal);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .76rem; margin-bottom: 1.1rem;
  padding: .42rem .95rem; border-radius: 999px;
  background: rgba(0,179,194,.12); border: 1px solid rgba(0,179,194,.32);
}
.eyebrow .dot { width: 8px; height: 8px; background: var(--red); border-radius: 50%; }
.accent { color: var(--teal); }

/* ---------- Photo placeholders ---------- */
.photo-ph {
  position: relative; margin: 0; border-radius: var(--radius);
  background:
    radial-gradient(circle at 70% 20%, rgba(0,179,194,.18), transparent 55%),
    radial-gradient(circle at 20% 80%, rgba(201,33,39,.16), transparent 55%),
    linear-gradient(140deg, #1b1b1b, #0c0c0c);
  border: 1px solid rgba(255,255,255,.08);
  min-height: 280px;
  display: grid; place-items: center;
  overflow: hidden;
}
.photo-ph::after {
  content: attr(data-photo);
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  font-family: var(--font-body); font-size: .8rem; color: var(--teal-soft);
  font-style: italic; opacity: .65; text-align: center;
}
.photo-ph .ph-icon { width: 54px; height: 54px; color: rgba(255,255,255,.35); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: min(860px, calc(100svh - 90px));   /* fill the screen below the header, capped on tall monitors */
  display: flex; align-items: center;
  padding-block: clamp(1.5rem, 4vh, 3rem);
  background: #050708;
}
/* Ken Burns photo layer (slow zoom + pan) */
.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background-color: #050708;
  background-image: url('../assets/img/hero.jpg');   /* fallback for old browsers */
  background-image: -webkit-image-set(url('../assets/img/hero.webp') type('image/webp'), url('../assets/img/hero.jpg') type('image/jpeg'));
  background-image: image-set(url('../assets/img/hero.webp') type('image/webp'), url('../assets/img/hero.jpg') type('image/jpeg'));
  background-size: cover; background-position: right center; background-repeat: no-repeat;
  transform-origin: 66% 42%;
  animation: kenburns 26s ease-in-out infinite alternate;
}
@keyframes kenburns {
  from { transform: scale(1.05); }
  to   { transform: scale(1.18) translate(-1.8%, -1.4%); }
}
/* cinematic scrim above the photo, below the content */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(125% 135% at 74% 40%, rgba(0,0,0,0) 36%, rgba(0,0,0,.28) 72%, rgba(0,0,0,.6) 100%),
    linear-gradient(90deg, rgba(3,7,8,.96) 0%, rgba(3,7,8,.8) 28%, rgba(3,7,8,.42) 52%, rgba(3,7,8,.08) 74%, rgba(3,7,8,0) 100%),
    linear-gradient(0deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 30%),
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 16%),
    linear-gradient(0deg, rgba(0,30,35,.18), rgba(0,30,35,.18));
}
.hero-inner { z-index: 2; }
@media (prefers-reduced-motion: reduce) { .hero-bg { animation: none; } }
/* soft moving glow for energy */
.hero::before { content: none; }
@keyframes glowPulse { 0%,100% { opacity:.7; transform: scale(1); } 50% { opacity:1; transform: scale(1.08); } }

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
}
/* Editorial stacked headline with weight + treatment contrast */
.hero-inner { grid-template-columns: 1fr; }
.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 1rem + 6.2vw, 6.4rem);
  line-height: .85; letter-spacing: -.02em; text-transform: uppercase;
  margin: 0 0 1.4rem; display: grid;
}
.hero-title span { display: block; }
.hero-title .t-out {
  font-weight: 800; color: transparent;
  -webkit-text-stroke: 1.6px rgba(255,255,255,.6); text-stroke: 1.6px rgba(255,255,255,.6);
}
.hero-title .t-solid { font-weight: 900; color: #fff; }
.hero-title .t-accent { font-weight: 900; color: var(--teal); text-shadow: 0 0 48px rgba(0,179,194,.5); }
.hero-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: #cfd9da; max-width: 40ch; margin-bottom: 2.2rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem; margin-bottom: 0; }

/* Mobile home hero: center the copy, enlarge the headline for impact, and shift
   the photo so the driver's face sits on the right, clear of the text. */
@media (max-width: 768px) {
  .hero-bg { background-position: 78% center; }
  .hero-inner { text-align: center; }
  .hero-title { justify-items: center; font-size: clamp(3.3rem, 1rem + 11vw, 5.4rem); }
  .hero-sub { margin-inline: auto; }
  /* Stack any secondary hero CTA directly under the primary one, across all heroes. */
  .hero-actions, .mem-hero-actions, .jt-hero-actions, .lx-hero-cta {
    flex-direction: column; align-items: stretch; gap: 1rem;
  }
  .hero-actions .hero-link, .mem-hero-actions .hero-link, .lx-hero-cta .hero-link { justify-content: center; }
}
.hero-link {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; font-size: .9rem; color: #fff;
}
.hero-link span { color: var(--teal); transition: transform .2s ease; }
.hero-link:hover { color: var(--teal-pale); }
.hero-link:hover span { transform: translateX(6px); }

/* Photo stage — premium glossy frame, ready for a real photo */
.hero-stage { position: relative; align-self: stretch; min-height: clamp(380px, 46vw, 580px); }
.stage-photo {
  position: absolute; inset: 0; margin: 0; border-radius: 28px; overflow: hidden; min-height: 0;
  background:
    radial-gradient(70% 55% at 64% 28%, rgba(0,179,194,.34), transparent 70%),
    linear-gradient(155deg, #0b2a2f 0%, #0a1417 52%, #050708 100%);
  box-shadow:
    0 44px 100px rgba(0,0,0,.62),
    0 0 0 1px rgba(0,179,194,.22),
    inset 0 1px 0 rgba(255,255,255,.14);
}
.stage-photo::before { /* top sheen for a wet, glossy read */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), transparent 26%);
  z-index: 2; pointer-events: none;
}
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 1.2rem 1.7rem; list-style: none; padding: 1.5rem 0 0; margin: 0;
  border-top: 1px solid rgba(255,255,255,.12);
}
.hero-stats li {
  display: flex; flex-direction: column; line-height: 1;
  padding-right: 1.7rem; border-right: 1px solid rgba(255,255,255,.1);
}
.hero-stats li:last-child { border-right: 0; padding-right: 0; }
.hero-stats .stat-num {
  font-family: var(--font-display); font-weight: 900; color: #fff;
  font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem);
}
.hero-stats li:nth-child(2) .stat-num { color: var(--teal); }
.hero-stats .stat-lbl {
  margin-top: .4rem; color: var(--teal-soft); font-size: .74rem;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}

/* shimmer sweep — reserved ONLY for the Get Your Free Wash CTA (.btn-shine),
   never on other red buttons */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-18deg); animation: shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer { 0%,55% { left: -120%; } 80%,100% { left: 140%; } }

/* ---------- Hero visual (animated soap & shine scene) ---------- */
.hero-visual { position: relative; min-height: clamp(340px, 44vw, 500px); }
.wash-scene {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(70% 60% at 50% 38%, rgba(0,179,194,.38), transparent 70%),
    radial-gradient(50% 50% at 75% 80%, rgba(176,220,221,.18), transparent 70%),
    linear-gradient(160deg, #05343b 0%, #0a1416 55%, #000 100%);
  border: 1px solid rgba(0,179,194,.35);
  box-shadow: inset 0 0 80px rgba(0,179,194,.18), 0 30px 80px rgba(0,0,0,.6);
}
/* big glossy centerpiece bubble (echoes the logo droplet) */
.wash-scene .drop {
  position: absolute; left: 50%; top: 46%; transform: translate(-50%,-50%);
  width: 46%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 36% 30%, #ffffff 0%, rgba(211,237,239,.9) 14%, rgba(0,179,194,.55) 48%, rgba(0,80,90,.5) 75%, rgba(0,40,46,.6) 100%);
  box-shadow: 0 10px 50px rgba(0,179,194,.5), inset -8px -12px 30px rgba(0,0,0,.35);
  animation: bob 6s ease-in-out infinite;
}
.wash-scene .drop::after {
  content: ""; position: absolute; left: 22%; top: 16%; width: 26%; height: 20%;
  background: rgba(255,255,255,.85); border-radius: 50%; filter: blur(2px);
}
@keyframes bob { 0%,100% { transform: translate(-50%,-50%); } 50% { transform: translate(-50%,-58%); } }

/* rising suds */
.suds {
  position: absolute; bottom: -12%; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(211,237,239,.55) 35%, rgba(0,179,194,.35) 70%, transparent 78%);
  border: 1px solid rgba(255,255,255,.25);
  animation: rise linear infinite;
  opacity: 0;
}
@keyframes rise {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  12% { opacity: .9; }
  85% { opacity: .8; }
  100% { transform: translateY(-560px) scale(1.05); opacity: 0; }
}
.suds.s1 { left: 12%; width: 42px; height: 42px; animation-duration: 7s; animation-delay: 0s; }
.suds.s2 { left: 26%; width: 22px; height: 22px; animation-duration: 5.5s; animation-delay: 1.2s; }
.suds.s3 { left: 40%; width: 60px; height: 60px; animation-duration: 8.5s; animation-delay: .4s; }
.suds.s4 { left: 58%; width: 28px; height: 28px; animation-duration: 6.2s; animation-delay: 2s; }
.suds.s5 { left: 72%; width: 50px; height: 50px; animation-duration: 7.8s; animation-delay: .8s; }
.suds.s6 { left: 84%; width: 18px; height: 18px; animation-duration: 5s; animation-delay: 1.6s; }
.suds.s7 { left: 50%; width: 16px; height: 16px; animation-duration: 4.6s; animation-delay: 3s; }

/* diagonal shine sweep */
.wash-scene .shine {
  position: absolute; top: -60%; left: -30%; width: 50%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(18deg); animation: sweep 6s ease-in-out infinite; z-index: 3;
}
@keyframes sweep { 0%,60% { left: -40%; } 90%,100% { left: 120%; } }

/* FREE burst badge */
.free-burst {
  position: absolute; z-index: 4; top: -22px; right: -10px;
  width: 132px; height: 132px; border-radius: 50%;
  display: grid; align-content: center; justify-items: center; gap: 0;
  background: radial-gradient(circle at 38% 32%, #e0444b, var(--red) 55%, #8c1418);
  color: #fff; text-align: center;
  box-shadow: 0 12px 34px rgba(201,33,39,.6), 0 0 0 6px rgba(255,255,255,.08);
  border: 3px solid #fff;
  animation: pop 4s ease-in-out infinite; transform: rotate(-8deg);
}
.free-burst .fb-top { font-family: var(--font-display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; }
.free-burst .fb-big { font-family: var(--font-display); font-weight: 900; font-size: 2.1rem; line-height: .9; }
.free-burst .fb-bot { font-family: var(--font-body); font-size: .72rem; opacity: .9; }
@keyframes pop { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(-8deg) scale(1.06); } }

@media (prefers-reduced-motion: reduce) {
  .hero::before, .btn-shine::after, .wash-scene .drop, .suds, .wash-scene .shine, .free-burst { animation: none; }
  .suds { opacity: .7; }
  .pkg:hover::after { animation: none; opacity: 0; }
}

/* (hero now uses a full-bleed photo background; no color drift) */

/* ---- Immersive rising foam field ---- */
.hero-foam { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; will-change: transform; opacity: .4; }
.hero-foam span {
  position: absolute; bottom: -8%; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.92), rgba(211,237,239,.35) 42%, rgba(0,179,194,.18) 72%, transparent 80%);
  border: 1px solid rgba(255,255,255,.18);
  animation: foamRise linear infinite;
}
@keyframes foamRise {
  0%   { transform: translateY(0) scale(.55); opacity: 0; }
  10%  { opacity: .8; }
  82%  { opacity: .5; }
  100% { transform: translateY(-94vh) scale(1.1); opacity: 0; }
}
.hero-foam span:nth-child(1){ left:4%;  width:18px;height:18px; animation-duration:13s; animation-delay:-2s; }
.hero-foam span:nth-child(2){ left:11%; width:10px;height:10px; animation-duration:9s;  animation-delay:-5s; }
.hero-foam span:nth-child(3){ left:17%; width:30px;height:30px; animation-duration:17s; animation-delay:-1s; }
.hero-foam span:nth-child(4){ left:23%; width:14px;height:14px; animation-duration:11s; animation-delay:-7s; }
.hero-foam span:nth-child(5){ left:30%; width:22px;height:22px; animation-duration:15s; animation-delay:-3s; }
.hero-foam span:nth-child(6){ left:36%; width:8px; height:8px;  animation-duration:8s;  animation-delay:-6s; }
.hero-foam span:nth-child(7){ left:42%; width:36px;height:36px; animation-duration:19s; animation-delay:-9s; }
.hero-foam span:nth-child(8){ left:48%; width:12px;height:12px; animation-duration:10s; animation-delay:-2s; }
.hero-foam span:nth-child(9){ left:54%; width:26px;height:26px; animation-duration:16s; animation-delay:-4s; }
.hero-foam span:nth-child(10){left:60%; width:9px; height:9px;  animation-duration:9s;  animation-delay:-8s; }
.hero-foam span:nth-child(11){left:66%; width:20px;height:20px; animation-duration:14s; animation-delay:-1s; }
.hero-foam span:nth-child(12){left:72%; width:14px;height:14px; animation-duration:11s; animation-delay:-5s; }
.hero-foam span:nth-child(13){left:78%; width:32px;height:32px; animation-duration:18s; animation-delay:-3s; }
.hero-foam span:nth-child(14){left:84%; width:10px;height:10px; animation-duration:9s;  animation-delay:-7s; }
.hero-foam span:nth-child(15){left:89%; width:24px;height:24px; animation-duration:15s; animation-delay:-2s; }
.hero-foam span:nth-child(16){left:93%; width:12px;height:12px; animation-duration:10s; animation-delay:-6s; }
.hero-foam span:nth-child(17){left:7%;  width:16px;height:16px; animation-duration:12s; animation-delay:-10s; }
.hero-foam span:nth-child(18){left:51%; width:42px;height:42px; animation-duration:20s; animation-delay:-12s; }

/* ---- Trust marquee: a continuous band of proof points that bridges
       the hero into the content (replaces the old vertical rotator) ---- */
.trustbar {
  position: relative; z-index: 4; overflow: hidden;
  padding-block: clamp(.9rem, 2vw, 1.25rem);
  background:
    linear-gradient(90deg, rgba(0,179,194,.10), rgba(201,33,39,.08) 55%, rgba(0,179,194,.10));
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.tb-track {
  display: flex; width: max-content;
  animation: tbScroll 34s linear infinite;
}
.trustbar:hover .tb-track { animation-play-state: paused; }
.tb-group { display: flex; align-items: center; flex: 0 0 auto; }
.tb-item {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; font-size: clamp(1rem, .8rem + .8vw, 1.5rem);
  color: #fff; white-space: nowrap; padding: 0 1.4rem;
}
.tb-item:nth-child(8n+1) { color: var(--teal); }
.tb-item:nth-child(8n+5) { color: var(--red-2); }
.tb-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #fff, var(--teal) 60%, #007480);
  box-shadow: 0 0 10px rgba(0,179,194,.5);
}
@keyframes tbScroll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .hero { animation: none !important; }
  .tb-track { animation: none; justify-content: center; }
  .trustbar { -webkit-mask: none; mask: none; }
}

/* ---------- Problem ---------- */
.problem { background: transparent; }
.pain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; list-style: none; padding: 0; margin: 0; }
.pain-card {
  background: var(--panel); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius); padding: 2rem 1.6rem; transition: transform .2s ease, border-color .2s ease;
}
.pain-card:hover { transform: translateY(-4px); border-color: rgba(0,179,194,.4); }
.pain-ico { display: inline-flex; margin-bottom: 1rem; color: var(--teal); }
.pain-ico svg { width: 40px; height: 40px; }
.pain-card h3 { font-size: 1.25rem; }
.pain-card p { color: var(--muted); margin: 0; }

/* ---------- Problem → Solution comparison ---------- */
.cmp-head { text-align: center; max-width: 46ch; margin: 0 auto 2.6rem; }
.cmp-head .section-lead { margin: 0 auto; }
.compare { display: flex; flex-direction: column; gap: 1rem; max-width: none; margin: 0; }
.cmp-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; }
.cmp-bad, .cmp-good {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.1rem 1.4rem; border-radius: 14px;
  font-family: var(--font-body); font-size: 1.05rem; line-height: 1.3;
}
.cmp-bad { background: rgba(201,33,39,.10); border: 1px solid rgba(201,33,39,.26); color: #d9b3b5; }
.cmp-good { background: rgba(0,179,194,.10); border: 1px solid rgba(0,179,194,.32); color: #fff; font-weight: 600; }
.cmp-ico {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: .8rem; font-weight: 900; line-height: 1;
}
.cmp-ico.bad { background: var(--red); color: #fff; }
.cmp-ico.good { background: var(--teal); color: #00252a; }
.cmp-arrow { color: var(--teal); font-size: 1.5rem; font-weight: 900; text-align: center; }
.cmp-cta { text-align: center; margin-top: 2.4rem; }

/* Scroll reveal: problem slides in from the left, solution from the right.
   Within each row the problem lands first, then the arrow, then the solution —
   and rows cascade top to bottom for a problem -> solution flow. */
.cmp-bad, .cmp-good, .cmp-arrow { opacity: 0; transition: opacity .55s ease, transform .55s ease; will-change: opacity, transform; }
.cmp-bad { transform: translateX(-26px); }
.cmp-good { transform: translateX(26px); }
.compare.in .cmp-bad, .compare.in .cmp-good { opacity: 1; transform: none; }
.compare.in .cmp-arrow { opacity: 1; }
.compare.in .cmp-row:nth-child(1) .cmp-bad { transition-delay: .05s; }
.compare.in .cmp-row:nth-child(1) .cmp-arrow { transition-delay: .15s; }
.compare.in .cmp-row:nth-child(1) .cmp-good { transition-delay: .23s; }
.compare.in .cmp-row:nth-child(2) .cmp-bad { transition-delay: .20s; }
.compare.in .cmp-row:nth-child(2) .cmp-arrow { transition-delay: .30s; }
.compare.in .cmp-row:nth-child(2) .cmp-good { transition-delay: .38s; }
.compare.in .cmp-row:nth-child(3) .cmp-bad { transition-delay: .35s; }
.compare.in .cmp-row:nth-child(3) .cmp-arrow { transition-delay: .45s; }
.compare.in .cmp-row:nth-child(3) .cmp-good { transition-delay: .53s; }
.compare.in .cmp-row:nth-child(4) .cmp-bad { transition-delay: .50s; }
.compare.in .cmp-row:nth-child(4) .cmp-arrow { transition-delay: .60s; }
.compare.in .cmp-row:nth-child(4) .cmp-good { transition-delay: .68s; }
/* On desktop the rows are driven by .compare.in (left/right slide), so neutralize
   the generic reveal hidden-state there; per-row scroll reveal is mobile-only. */
@media (min-width: 721px) { .cmp-row.reveal { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cmp-bad, .cmp-good, .cmp-arrow { opacity: 1; transform: none; transition: none; }
}

/* ---------- Guide ---------- */
.guide { position: relative; overflow: hidden; }
.guide::before {                       /* depth glow behind the photo */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(44% 72% at 22% 48%, rgba(0,179,194,.12), transparent 72%);
}
.guide .container { position: relative; z-index: 1; }
.guide-inner { position: relative; display: grid; grid-template-columns: 1.02fr .98fr; gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
/* (decorative ring removed) */
.guide-photo {
  position: relative; z-index: 1; margin: 0; border-radius: 24px; overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px rgba(0,179,194,.2);
}
.guide-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.guide-photo::after {                  /* cinematic floor for the caption */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40%; z-index: 1;
  background: linear-gradient(0deg, rgba(0,0,0,.6), transparent); pointer-events: none;
}
.guide-cap {
  position: absolute; z-index: 2; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px);
  border: 1px solid rgba(0,179,194,.32); color: #fff;
  padding: .5rem .95rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.guide-cap .dot { width: 8px; height: 8px; background: var(--teal); border-radius: 50%; }
/* circular FREE burst badge on the photo (matches the hero badge style) */
.guide-burst { bottom: 18px; left: 18px; top: auto; right: auto; width: 110px; height: 110px; z-index: 3; text-transform: uppercase; }

/* designed checklist: circled checks with hairline dividers */
.guide-points { list-style: none; padding: 0; margin: 1.9rem 0 0; display: grid; gap: 0; }
.guide-points li {
  display: flex; align-items: center; gap: .9rem; padding: .95rem 0;
  border-top: 1px solid rgba(255,255,255,.09); color: #e3eaeb; font-size: 1.05rem;
}
.guide-points li:first-child { border-top: 0; padding-top: .2rem; }
.guide-points li span {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,179,194,.16); border: 1px solid rgba(0,179,194,.45); color: var(--teal);
  display: grid; place-items: center; font-size: .82rem; font-weight: 900; line-height: 1;
}
/* stacked "free with every wash" amenities in the guide copy */
.guide-amen-label {
  display: flex; align-items: center; gap: .5rem; margin: 1.7rem 0 1rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .14em; font-size: .74rem; color: var(--teal);
}
.guide-amen-label .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.guide-amen { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.4rem; }
.guide-amen li {
  display: flex; align-items: center; gap: .75rem; color: #e3eaeb;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: .9rem;
}
.ga-ic {
  flex: 0 0 auto; width: 58px; height: 58px; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1f1f1f, #121212);
  border: 2px solid var(--teal); display: grid; place-items: center;
}
.ga-ic img { width: 56%; height: 56%; object-fit: contain; }
.guide-copy .btn { margin-top: 1.9rem; }
.guide-points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: .7rem; }
.guide-points li { display: flex; gap: .7rem; align-items: flex-start; color: #d8dede; }
.guide-points span { color: var(--teal); font-weight: 700; }

/* ---------- Gallery (real location photos) ---------- */
.gallery-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(150px, 18vw, 220px));
  gap: 12px; margin-top: 2.6rem;
}
.gallery-grid figure { margin: 0; border-radius: 16px; overflow: hidden; position: relative; }
.gallery-grid .g-feature { grid-column: span 2; grid-row: span 2; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.gallery-grid figure:hover img { transform: scale(1.06); }
@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
  .gallery-grid .g-feature { grid-column: span 2; grid-row: auto; aspect-ratio: 16/10; }
  .gallery-grid figure:not(.g-feature) { aspect-ratio: 1; }
}

/* ---------- Amenities (free with every wash) ---------- */
.amen-head { text-align: center; max-width: 48ch; margin: 0 auto 1rem; }
.amen-head .section-lead { margin: 0 auto; }
.amen-grid {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
  list-style: none; padding: 0; margin: 2.6rem 0 0;
}
.amen-grid li { display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.amen-ic {
  width: clamp(82px, 9vw, 124px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, #1f1f1f, #121212);
  border: 3px solid var(--teal); display: grid; place-items: center;
  box-shadow: 0 0 0 6px rgba(0,179,194,.06), 0 14px 30px rgba(0,0,0,.5);
  transition: transform .22s ease, box-shadow .22s ease;
}
.amen-ic img { width: 52%; height: 52%; object-fit: contain; }
.amen-grid li:hover .amen-ic { transform: translateY(-7px); box-shadow: 0 0 0 6px rgba(0,179,194,.14), 0 0 36px rgba(0,179,194,.4); }
.amen-label { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .92rem; color: #fff; }

/* ---------- Plan ---------- */
.plan { background: transparent; }
.steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
  list-style: none; padding: 0; margin: 3rem 0 2.8rem;
}
.steps::before {              /* dashed teal path connecting the numbers */
  content: ""; position: absolute; left: 16%; right: 16%; top: 30px; height: 3px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--teal) 0 11px, transparent 11px 23px);
  opacity: .5;
  /* show the dashes ONLY in the two gaps between numbers, so the path never
     runs behind a number — no knockout box needed at all */
  -webkit-mask: linear-gradient(90deg, transparent 0 10%, #000 10% 40%, transparent 40% 60%, #000 60% 90%, transparent 90% 100%);
          mask: linear-gradient(90deg, transparent 0 10%, #000 10% 40%, transparent 40% 60%, #000 60% 90%, transparent 90% 100%);
}
.step { position: relative; text-align: center; padding: 0 1rem; }
.step-no {
  position: relative; z-index: 1; display: inline-block; line-height: 1;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 1.8rem + 2.4vw, 4.2rem);
  color: transparent; -webkit-text-stroke: 2px var(--teal);
  background: none;          /* no knockout: the dashed path is masked away behind numbers */
  transition: color .25s ease, transform .25s ease;
}
.step:hover .step-no { color: var(--teal); transform: translateY(-3px); }
.step h3 { margin-top: 1.15rem; font-size: 1.4rem; }
.step p { color: var(--muted); margin: .3rem auto 0; max-width: 26ch; }
.plan-cta { text-align: center; }

/* ---------- Packages (bold, color-coded tiers, best → least) ---------- */
.packages { background: var(--ink); }
.packages > .container { max-width: 1320px; }
.pkg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; align-items: stretch; }
.pkg {
  display: flex; flex-direction: column; border-radius: 20px;
  background: #15181a; border: 1px solid rgba(255,255,255,.1); color: #fff;
  position: relative; box-shadow: 0 22px 48px rgba(0,0,0,.4);
  transition: transform .22s ease, box-shadow .22s ease;
}
.pkg { cursor: pointer; }
.pkg-grid .pkg:hover { transform: translateY(-12px) scale(1.07); box-shadow: 0 42px 86px rgba(0,0,0,.66), 0 0 0 1px rgba(0,179,194,.55), 0 22px 64px rgba(0,179,194,.28); z-index: 3; }
.pkg.featured { border-color: rgba(255,255,255,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.4), 0 32px 74px rgba(0,0,0,.6); }
@media (min-width: 981px) {
  .pkg.featured { transform: scale(1.05); z-index: 1; }
  .pkg.featured:hover { transform: scale(1.09) translateY(-10px); }
}
/* glossy "wash" shine sweep on hover — echoes the hero wash-scene shine */
.pkg::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  border-radius: 20px; opacity: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 48%, rgba(0,179,194,.22) 50%, rgba(255,255,255,.18) 52%, transparent 58%);
  background-size: 240% 100%; background-position: 150% 0;
}
.pkg:hover::after { animation: pkg-wash .85s ease; }
@keyframes pkg-wash {
  0%   { opacity: 0; background-position: 150% 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { opacity: 0; background-position: -60% 0; }
}
/* whole card is a clickable link (stretched over the card via the CTA) */
.pkg .btn-buy::after { content: ""; position: absolute; inset: 0; z-index: 2; }

/* color-coded header band per tier */
.pkg-head { text-align: center; padding: 1.8rem 1.3rem 1.5rem; border-radius: 20px 20px 0 0; }
.pkg-soap .pkg-head        { background: linear-gradient(160deg, #d8efef, #b3dcdd); }   /* light teal */
.pkg-soapier .pkg-head     { background: linear-gradient(160deg, #0e8b97, #075660); }
.pkg-soapify .pkg-head     { background: linear-gradient(160deg, #e52a31, #a81a20); }
.pkg-soapifyplus .pkg-head { background: linear-gradient(135deg, #c4ccd1 0%, #888f96 52%, #aeb6bc 100%); }  /* silver / platinum */
.pkg-name { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.7rem, 1.4rem + .9vw, 2.2rem); letter-spacing: .05em; color: #fff; margin: 0 0 .4rem; }
.pkg .pkg-single { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: #fff; margin: 0; }
.pkg .pkg-single span { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; opacity: .9; }
/* SOAP (light teal) keeps dark text; SOAPIFY+ (platinum) uses white + drop shadow */
.pkg-soap .pkg-name, .pkg-soap .pkg-single { color: #07171a; }
.pkg-soapifyplus .pkg-name, .pkg-soapifyplus .pkg-single { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4); }

/* body */
.pkg-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem 1.5rem 1.6rem; }
.pkg-price { background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; padding: 1.2rem .7rem 1.05rem; text-align: center; margin-bottom: 1.3rem; }
.pkg-unlimited { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.5rem, 2rem + 1.3vw, 3.1rem); margin: 0; color: #fff; line-height: 1; display: flex; align-items: baseline; justify-content: center; gap: .45rem; }
.pkg-unlimited .promo { color: transparent; -webkit-text-stroke: 2px #fff; text-stroke: 2px #fff; }
.pkg-term { font-family: var(--font-display); font-weight: 700; font-size: .92rem; color: rgba(255,255,255,.82); text-transform: uppercase; letter-spacing: .05em; }
.pkg .pkg-promo-label { font-size: .9rem; color: rgba(255,255,255,.78); margin: .5rem 0 0; line-height: 1.35; }

.pkg-feats { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: .68rem; font-size: 1.02rem; color: #fff; }
.pkg-feats li { padding-left: 1.9rem; position: relative; line-height: 1.3; }
.pkg-feats li::before {
  content: "✓"; position: absolute; left: 0; top: .04em;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .76rem; font-weight: 900; line-height: 1;
  background: rgba(0,179,194,.24); color: var(--teal-pale);
}
.pkg-feats li:first-child { padding-left: 0; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: .78rem; opacity: .68; margin-bottom: .15rem; }
.pkg-feats li:first-child::before { content: none; }
.pkg .btn-buy { margin-top: auto; width: 100%; padding: 1.05rem; font-size: 1.05rem; border-radius: 999px; }

/* flags */
.pkg-flag {
  position: absolute; top: -15px; left: 50%; transform: translateX(-50%); z-index: 2;
  background: #fff; color: var(--red); font-family: var(--font-display); font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; font-size: .76rem;
  padding: .45rem 1.1rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
}
.pkg-flag-value { background: linear-gradient(135deg, #f4d97a 0%, #d9af3a 55%, #c79a22 100%); color: #3a2c00; }
.pkg-note { text-align: center; color: var(--muted); font-size: .9rem; margin-top: 2rem; }

/* ---------- Membership ---------- */
.membership-panel {
  display: grid; grid-template-columns: 1.05fr .95fr; align-items: stretch;
  position: relative; border-radius: 28px; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255,255,255,.06), transparent 30%),
    linear-gradient(145deg, #2a2d2f 0%, #0c0d0e 46%, #1a1c1d 100%);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 14px 54px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1);
}
.membership-copy { padding: clamp(2rem, 4vw, 3.6rem); align-self: center; }
.section-light .membership-panel .section-title { color: #fff; }
.section-light .membership-panel .member-perks h3 { color: #fff; }
.section-light .membership-panel .member-perks p { color: #aeb9ba; }
.section-light .membership-panel .member-reassure { color: #b9c1c2; }
.section-light .membership-panel .member-reassure strong { color: var(--red-2); }
.member-perks { list-style: none; padding: 0; margin: 0 0 2rem; display: grid; gap: 1.2rem; }
.member-perks li { display: flex; gap: 1rem; align-items: flex-start; }
.perk-ico {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; color: var(--teal);
  background: radial-gradient(circle at 50% 36%, #20292b, #0d1314);
  border: 2px solid var(--teal); box-shadow: 0 0 0 4px rgba(0,179,194,.08);
}
.perk-ico svg { width: 24px; height: 24px; }
.perk-ico svg { width: 26px; height: 26px; }
.member-perks h3 { font-size: 1.15rem; margin-bottom: .15rem; }
.member-perks p { color: var(--muted); margin: 0; }
.membership-visual { position: relative; min-height: clamp(380px, 40vw, 580px); perspective: 1600px; }
.membership-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* distinct membership CTA — white, to contrast the red Free-Wash button */
.btn-member { background: #fff; color: var(--red); box-shadow: 0 14px 36px rgba(0,0,0,.35); }
.btn-member:hover { background: var(--teal-pale); color: var(--red); }
.btn-member span { transition: transform .2s ease; }
.btn-member:hover span { transform: translateX(5px); }

/* Membership card visual */
.member-cta { display: flex; flex-direction: column; align-items: flex-start; gap: .85rem; }
.member-reassure { color: #51666b; font-size: .92rem; }
.section-light .member-reassure strong { color: var(--red); }

/* ---------- Membership reveal: panel floats up, then contents fade in one by one ---------- */
/* the whole rectangle starts low + hidden, then floats up when scrolled to */
.membership-panel { opacity: 0; transform: translateY(70px); transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.25,1); }
.membership.mem-in .membership-panel { opacity: 1; transform: translateY(0); }
/* each element inside the rectangle staggers in after the panel lands */
.membership-panel .eyebrow,
.membership-panel .section-title,
.membership-panel .member-perks li,
.membership-panel .member-cta,
.membership-panel .membership-visual {
  opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease;
}
.membership.mem-in .membership-panel .eyebrow,
.membership.mem-in .membership-panel .section-title,
.membership.mem-in .membership-panel .member-perks li,
.membership.mem-in .membership-panel .member-cta,
.membership.mem-in .membership-panel .membership-visual { opacity: 1; transform: translateY(0); }
/* the stagger — each item waits a little longer than the last */
.membership.mem-in .membership-panel .eyebrow         { transition-delay: .35s; }
.membership.mem-in .membership-panel .section-title    { transition-delay: .45s; }
.membership.mem-in .membership-panel .member-perks li:nth-child(1) { transition-delay: .55s; }
.membership.mem-in .membership-panel .member-perks li:nth-child(2) { transition-delay: .65s; }
.membership.mem-in .membership-panel .member-perks li:nth-child(3) { transition-delay: .75s; }
.membership.mem-in .membership-panel .member-cta       { transition-delay: .85s; }
.membership.mem-in .membership-panel .membership-visual{ transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .membership-panel,
  .membership-panel .eyebrow, .membership-panel .section-title,
  .membership-panel .member-perks li, .membership-panel .member-cta,
  .membership-panel .membership-visual { opacity: 1; transform: none; transition: none; }
}
.member-card-wrap { position: relative; display: grid; place-items: center; padding: 1.5rem; }
.member-card {
  position: relative; width: min(440px, 100%); aspect-ratio: 1.62 / 1; border-radius: 22px; overflow: hidden;
  background: linear-gradient(135deg, #0a1517 0%, #0e2b2f 46%, #1c0e11 100%);
  border: 1px solid rgba(0,179,194,.4); color: #fff;
  box-shadow: 0 40px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  padding: clamp(1.2rem, 3vw, 1.9rem); display: flex; flex-direction: column; justify-content: space-between;
  transform: rotate(-5deg); animation: cardFloat 6s ease-in-out infinite; transform-origin: center;
}
@keyframes cardFloat { 0%, 100% { transform: rotate(-5deg) translateY(0); } 50% { transform: rotate(-5deg) translateY(-10px); } }
.mc-glow { position: absolute; width: 60%; height: 70%; right: -12%; top: -22%; background: radial-gradient(circle, rgba(0,179,194,.45), transparent 70%); filter: blur(22px); }
.mc-shine { position: absolute; top: -60%; left: -45%; width: 38%; height: 220%; z-index: 2; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); transform: rotate(18deg); animation: mcShine 5.5s ease-in-out infinite; }
@keyframes mcShine { 0%, 62% { left: -45%; } 100% { left: 135%; } }
.mc-row { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; }
.mc-logo { height: 30px; width: auto; }
.mc-type { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--teal); font-size: .92rem; }
.mc-chip { width: 44px; height: 32px; border-radius: 7px; background: linear-gradient(135deg, #e9c46a, #c49a32); box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.mc-tagline { font-family: var(--font-body); font-style: italic; color: var(--teal-soft); font-size: .92rem; }
.mc-num { font-family: var(--font-display); letter-spacing: .14em; font-size: 1rem; color: rgba(255,255,255,.85); }
.mc-since { font-family: var(--font-display); font-weight: 700; font-size: .7rem; letter-spacing: .12em; color: rgba(255,255,255,.5); text-transform: uppercase; }
.mc-badge {
  position: absolute; top: 20px; right: 20px; z-index: 3; width: 122px; height: 122px; border-radius: 50%;
  display: grid; place-content: center; text-align: center; gap: .12em;
  background: radial-gradient(circle at 38% 32%, #e0444b, var(--red) 58%, #8c1418);
  color: #fff; border: 3px solid #fff; font-family: var(--font-display); font-weight: 700; font-size: .58rem;
  text-transform: uppercase; letter-spacing: .06em; transform: rotate(8deg);
  box-shadow: 0 16px 36px rgba(201,33,39,.55); animation: pop 4s ease-in-out infinite;
}
.mc-badge b { display: block; font-size: 2.1rem; font-weight: 900; line-height: .9; }
.mcb-top, .mcb-bot { display: block; opacity: .95; }
/* ---------- Membership flip card: Unlimited Club badge -> member photo ---------- */
.flip-inner {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(.6,.04,.3,1);
}
.flip-front, .flip-back {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
/* Front: the badge centered on a dark brand panel so it pops */
.flip-front {
  background: linear-gradient(135deg, #0a1517 0%, #0e2b2f 50%, #1c0e11 100%);
  display: grid; place-items: center;
}
.flip-front .club-badge {
  position: static; width: clamp(190px, 55%, 320px); height: auto;
  filter: drop-shadow(0 18px 42px rgba(0,0,0,.55));
}
/* Back: the member photo (carries the $10 badge), pre-rotated so it faces out after the flip */
.flip-back { transform: rotateY(180deg); }
/* Badge shows first; once the section scrolls in, the card flips to the photo and rests there */
.membership.mem-in .flip-inner { transform: rotateY(180deg); transition-delay: 2s; }
@media (prefers-reduced-motion: reduce) {
  .member-card, .mc-shine, .mc-badge { animation: none; }
  .flip-inner { transform: rotateY(180deg); transition: none; }   /* skip the flip — show the photo */
}

/* ---------- Locations ---------- */
.loc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem; }
.loc-actions { display: flex; flex-wrap: wrap; gap: .8rem; position: relative; z-index: 1; }

/* ---------- Reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; list-style: none; padding: 0; margin: 2.6rem 0 0; }
.review-card {
  --rc-accent: #00b3c2; --rc-ink: #0093a0; --rc-tint: rgba(0,179,194,.06);
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, #fff, var(--rc-tint));
  border: 1px solid rgba(0,0,0,.08); border-left: 5px solid var(--rc-accent);
  border-radius: 16px; padding: 1.8rem 1.9rem;
  box-shadow: 0 14px 34px rgba(0,0,0,.06); transition: transform .2s ease, box-shadow .2s ease;
}
/* Alternate the brand accent down the column — teal, red, teal. */
.review-card:nth-child(2) { --rc-accent: #d4282e; --rc-ink: #c0212a; --rc-tint: rgba(212,40,46,.05); }
.review-card:nth-child(3) { --rc-accent: #0093a0; --rc-ink: #0093a0; --rc-tint: rgba(0,179,194,.06); }
/* Oversized decorative quote mark in the card's accent color. */
.review-card::before {
  content: "\201C"; position: absolute; top: .35rem; right: 1.2rem;
  font-family: var(--font-display); font-weight: 700; font-size: 4.5rem; line-height: 1;
  color: var(--rc-accent); opacity: .16; pointer-events: none;
}
.review-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(0,0,0,.12); }
.rc-stars { color: #f5b301; font-size: 1.15rem; letter-spacing: .12em; }
.rc-quote { position: relative; color: #2a3638; font-size: 1.02rem; line-height: 1.5; margin: .9rem 0 1rem; font-style: italic; }
.rc-author { color: var(--rc-ink); font-family: var(--font-display); font-weight: 700; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.review-cta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 2.6rem; }
.review-loc {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  padding: 1.7rem; border-radius: 16px; background: #eef6f7; border: 1px solid rgba(0,0,0,.06);
}
.review-loc h3 { color: #0093a0; font-size: 1.3rem; margin: 0; }
.review-loc-btns { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.btn-teal { background: var(--teal); color: #00252a; }
.btn-teal:hover { background: var(--teal-pale); color: #00252a; }
.btn-outline .rev-stars { color: #f5b301; }

/* ---------- FAQ (accordion, light zone) ---------- */
/* Two-column accordion — compact, halves the vertical footprint.
   align-items:start so an open item grows on its own without stretching its row partner. */
.faq-list {
  max-width: 980px; margin: 2.4rem auto 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; align-items: start;
}
.faq-item {
  background: #fff; border: 1px solid rgba(0,0,0,.1); border-radius: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05); overflow: hidden;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.faq-item[open] { border-color: rgba(0,179,194,.45); box-shadow: 0 14px 32px rgba(0,0,0,.08); }
.faq-item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  padding: .95rem 1.15rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; font-size: .92rem; color: #07171a; line-height: 1.25;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #0093a0; }
/* Chevron: points down when closed, flips up when open */
.faq-item summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin-top: -4px;
  border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(45deg); transition: transform .25s ease, margin-top .25s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); margin-top: 2px; }
.faq-a { padding: 0 1.15rem 1.1rem; }
.section-light .faq-a p { margin: 0; color: #51666b; font-size: .9rem; line-height: 1.55; }
/* Small in-answer CTA */
.faq-cta {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .85rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: .72rem;
  padding: .5rem .95rem; border-radius: 999px;
  border: 2px solid var(--teal); color: #0093a0; background: transparent;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.faq-cta:hover { background: var(--teal); color: #00252a; transform: translateY(-2px); }
.faq-cta-primary { border-color: var(--red); color: #fff; background: var(--red); }
.faq-cta-primary:hover { background: var(--red-2); color: #fff; }
.faq-item[open] .faq-a { animation: faqOpen .25s ease both; }
@keyframes faqOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .faq-item[open] .faq-a { transition: none; animation: none; }
}

/* ---------- Final CTA (bold standout band) ---------- */
.final-cta {
  position: relative; overflow: hidden; text-align: center;
  padding-block: clamp(4.5rem, 8vw, 8rem);
  /* flat color matches the wave divider above so they read as one block */
  background: #d4282e;
}
.final-cta::after {            /* animated shine sweep across the block */
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -35%; width: 45%; z-index: 0;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.16), transparent);
  transform: skewX(-16deg); pointer-events: none;
  animation: ctaShine 6.5s ease-in-out infinite;
}
@keyframes ctaShine { 0%, 58% { left: -45%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .final-cta::after { animation: none; } }
/* Faint bubble clusters bled off the left/right edges and vertically centered, so the
   wavy top/bottom dividers never clip them. */
.cta-bubble { position: absolute; z-index: 0; top: 50%; height: auto; pointer-events: none; opacity: .12; transform: translateY(-50%); will-change: transform; }
.cb1 { width: clamp(200px, 22vw, 320px); left: -10%;  animation: ctaBubbleDrift 16s ease-in-out infinite; }
.cb2 { width: clamp(160px, 18vw, 260px); right: -8%;  animation: ctaBubbleDriftFlip 18s ease-in-out -4s infinite; }
@keyframes ctaBubbleDrift     { 0%, 100% { transform: translateY(-50%); }            50% { transform: translateY(calc(-50% - 16px)); } }
@keyframes ctaBubbleDriftFlip { 0%, 100% { transform: translateY(-50%) scaleX(-1); } 50% { transform: translateY(calc(-50% - 16px)) scaleX(-1); } }
@media (prefers-reduced-motion: reduce) {
  .cta-bubble { animation: none; }
  .cb2 { transform: translateY(-50%) scaleX(-1); }
}
.final-kicker {
  display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1.4rem;
  background: var(--teal); color: #00252a;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .12em; font-size: .82rem; padding: .55rem 1.2rem; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}
.final-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
.final-inner { position: relative; z-index: 1; }
.final-cta h2 { font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem); letter-spacing: -.02em; line-height: 1; margin-bottom: 1rem; text-shadow: 0 6px 30px rgba(0,0,0,.25); }
.final-sub { color: #ffe3e4; font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem); max-width: 48ch; margin: 0 auto 2.2rem; }
.final-cta .btn-primary { background: #fff; color: var(--red); padding: 1.2rem 2.6rem; font-size: 1.15rem; box-shadow: 0 16px 40px rgba(0,0,0,.4); }
.final-cta .btn-primary:hover { background: var(--teal-pale); color: var(--red); }

/* ---------- Footer ---------- */
.site-footer { background: #050505; border-top: 1px solid rgba(255,255,255,.07); padding-top: 3.5rem; }
.footer-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.5fr; gap: 2.5rem; padding-bottom: 2.5rem; }
@media (max-width: 1100px) { .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (max-width: 760px) { .footer-inner { grid-template-columns: 1fr 1fr; } }
.footer-locs a { color: #cfd6d6; }
.footer-locs a:hover { color: var(--teal-pale); }
.footer-tagline { color: var(--teal-soft); margin-top: 1rem; font-style: italic; }
/* Footer social row — same bubble-ring icons as the header utility bar */
.footer-social { display: flex; align-items: center; gap: .4rem; margin-top: 1.2rem; }
.footer-social .util-soc { color: #cfd9da; }
/* In-content social row (contact page + location cards) */
.connect-social { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem; }
.connect-social .connect-label { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; color: var(--teal-soft); margin-right: .3rem; }
.contact-follow { margin-top: 2rem; }
/* Light-background variant for the white location cards */
.connect-social.soc-light .connect-label { color: #4a5a5c; }
.soc-light .util-soc { color: #2a3b3d; }
.soc-light .util-soc:hover { color: var(--teal); }
/* Linked location-card title + "view location" link → location detail pages */
.loc-card h3 a { color: inherit; text-decoration: none; transition: color .2s ease; }
.loc-card h3 a:hover { color: var(--teal); }
.loc-more { display: inline-block; margin-top: .9rem; color: var(--teal); font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; transition: color .2s ease, transform .2s ease; }
.loc-more:hover { color: var(--teal-pale); transform: translateX(2px); }
.incl-card h3 a { color: inherit; text-decoration: none; transition: color .2s ease; }
.incl-card h3 a:hover { color: var(--teal); }

/* ===== Location detail pages ===== */
.locpage-hero { text-align: center; }
.locpage-cta-row { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: 1.9rem; }
.locpage-map { position: relative; height: clamp(300px, 42vw, 480px); border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.45); margin-top: 2.6rem; }
.locpage-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.2) contrast(1.05) brightness(.95); }
.locpage-facts { margin-top: 2.6rem; }
.locpage-facts .incl-card p { font-size: 1rem; }
.fact-link { color: var(--teal); font-weight: 700; transition: color .2s ease; }
.fact-link:hover { color: var(--teal-pale); }
.locpage-social { margin-top: 2.4rem; }
.footer-nav h4, .footer-locs h4 {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: var(--teal); margin-bottom: 1rem;
}
.footer-nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer-nav a { color: #cfd6d6; font-size: .9rem; }
.footer-nav a:hover { color: var(--teal-pale); }
.footer-locs p { color: #cfd6d6; font-size: .92rem; margin-bottom: 1rem; }
/* Richer locations block */
.footer-loc { line-height: 1.55; }
.footer-loc-name { display: block; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; margin-bottom: .15rem; }
.footer-loc-name:hover { color: var(--teal-pale); }
@media (max-width: 760px) { .footer-brand { grid-column: 1 / -1; } }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.07); padding-block: 1.3rem; }
.footer-bottom .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.footer-bottom p { margin: 0; color: var(--muted); font-size: .82rem; }
.footer-credit a { color: var(--teal-soft); font-weight: 700; transition: color .2s ease; }
.footer-credit a:hover { color: var(--teal); text-decoration: underline; }
.footer-legal a { color: var(--muted); transition: color .2s ease; }
.footer-legal a:hover { color: var(--teal); text-decoration: underline; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
/* staggered reveal — gallery photos and review cards rise in one after another */
.gallery-grid figure.reveal:nth-child(2) { transition-delay: .08s; }
.gallery-grid figure.reveal:nth-child(3) { transition-delay: .16s; }
.gallery-grid figure.reveal:nth-child(4) { transition-delay: .24s; }
.gallery-grid figure.reveal:nth-child(5) { transition-delay: .32s; }
.review-card.reveal:nth-child(2) { transition-delay: .12s; }
.review-card.reveal:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- Premium polish ---------- */
/* No orphan words in headings; tidy paragraph wrapping */
.hero-title, .section-title, .final-cta h2, .pkg-name, .step h3 { text-wrap: balance; }
.hero-sub, .section-lead, .final-sub, .member-perks p { text-wrap: pretty; }

/* Considered, consistent keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 8px;
}

/* Unified CTA arrow nudge on hover */
.btn span[aria-hidden], .hero-link span[aria-hidden], .faq-cta span[aria-hidden] { transition: transform .2s ease; display: inline-block; }
.btn:hover span[aria-hidden], .hero-link:hover span[aria-hidden], .faq-cta:hover span[aria-hidden] { transform: translateX(4px); }

/* Blur-up image load — photos "develop" into focus instead of popping in */
.fade-img { opacity: 0; filter: blur(14px); transform: scale(1.03); transition: opacity .8s ease, filter .8s ease, transform .8s ease; }
.fade-img.loaded { opacity: 1; filter: none; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-img { opacity: 1; filter: none; transform: none; transition: none; } }

/* ============================================================
   SUBTLE LIVELINESS — ambient motion + micro-interactions
   ============================================================ */

/* ---- Scroll progress bar (subtle teal→red gauge) ---- */
.wash-meter {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 200;
  background: rgba(255,255,255,.05); pointer-events: none;
}
.wash-meter span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), var(--teal-pale) 45%, var(--red));
  box-shadow: 0 0 10px rgba(0,179,194,.6);
  transition: width .1s linear;
}

/* ---- Ambient drifting decorative bubbles ---- */
.bubble { animation: drift 14s ease-in-out infinite; }
.bubble.b2 { animation-duration: 18s; animation-delay: -3s; }
.bubble.b3 { animation-duration: 11s; animation-delay: -6s; }
.bubble.b4 { animation-duration: 16s; animation-delay: -2s; }
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-14px, -22px); }
}

/* ---- Gentle pulse on eyebrow dots ---- */
.eyebrow .dot { animation: dotPulse 2.6s ease-in-out infinite; }
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,33,39,.5); }
  50% { box-shadow: 0 0 0 5px rgba(201,33,39,0); }
}

/* ---- Icon pop on hover (problem + membership cards) ---- */
.pain-ico, .perk-ico, .step-num, .ga-ic { transition: transform .25s ease; }
.pain-card:hover .pain-ico,
.member-perks li:hover .perk-ico,
.guide-amen li:hover .ga-ic { transform: scale(1.18) rotate(-4deg); }
.step:hover .step-num { transform: scale(1.08); }

/* ---- Reactive package-card tilt + soft light glow ---- */
.pkg { transform-style: preserve-3d; will-change: transform; }
.pkg::before {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius); z-index: 3;
  background: radial-gradient(200px 200px at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,.14), transparent 60%);
  opacity: 0; transition: opacity .25s ease; pointer-events: none;
}
.pkg.lit::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bubble, .eyebrow .dot, .wash-meter span { animation: none !important; }
}

/* ============================================================
   INTRO SPLASH — words stack & pop, then a circle opens to the hero
   ============================================================ */
@property --hole { syntax: "<length-percentage>"; inherits: false; initial-value: 0%; }
.intro {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: radial-gradient(120% 120% at 50% 40%, #00c2d2, var(--teal) 55%, #008c98);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px));
          mask: radial-gradient(circle at 50% 50%, transparent var(--hole), #000 calc(var(--hole) + 0.5px));
}
body.intro-active { overflow: hidden; }
.intro-words { display: grid; gap: .04em; text-align: center; justify-items: center; }
/* Soapify logo, flipped to white, pinned near the top of the teal splash. Present from
   the start (no fade-in) and small, so the words popping up in the center read first. */
.intro-logo {
  position: absolute; top: clamp(34px, 8vh, 84px); left: 50%; transform: translateX(-50%);
  width: clamp(96px, 16vw, 150px); height: auto;
  filter: brightness(0) invert(1) drop-shadow(0 6px 24px rgba(0,0,0,.18));
}
.iw {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(4rem, 15vw, 7rem); line-height: .92; color: #fff;
  text-shadow: 0 6px 30px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(28px) scale(.92);
  animation: iwIn .5s cubic-bezier(.2,.7,.3,1) forwards;
  animation-delay: calc(var(--i) * .34s);
}
@keyframes iwIn { to { opacity: 1; transform: translateY(0) scale(1); } }
/* FREE as a white-on-red tag — matches the "Get Your Free Wash" CTA buttons */
.iw-free {
  justify-self: center; margin-top: .12em; padding: .02em .32em 0;
  font-size: clamp(5rem, 20vw, 9rem); line-height: 1.08;
  color: #fff; background: var(--red); border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0,0,0,.28); text-shadow: none;
}
.intro.pop .intro-words { animation: iwPop .45s cubic-bezier(.3,1.4,.5,1) forwards; }
@keyframes iwPop { 0% { transform: scale(1); } 45% { transform: scale(1.14); } 100% { transform: scale(1); } }
.intro.open { animation: iris 1.05s cubic-bezier(.6,0,.3,1) forwards; }
@keyframes iris { from { --hole: 0%; } to { --hole: 160%; } }
/* Two large, faint bubble clusters bled off opposite corners — a soft background
   texture that frames the words without cluttering them. */
.intro-bubble { position: absolute; height: auto; pointer-events: none; opacity: .12; will-change: transform; }
.ib1 { width: clamp(360px, 52vw, 680px); left: -10%; bottom: -16%; animation: introDrift 16s ease-in-out infinite; }
.ib2 { width: clamp(280px, 40vw, 520px); right: -8%; top: -8%;  animation: introDriftFlip 18s ease-in-out -4s infinite; }
@keyframes introDrift     { 0%, 100% { transform: translateY(0); }            50% { transform: translateY(-18px); } }
@keyframes introDriftFlip { 0%, 100% { transform: scaleX(-1) translateY(0); } 50% { transform: scaleX(-1) translateY(-18px); } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ============================================================
   WAVE SHAPE DIVIDERS — water-like transitions between sections
   ============================================================ */
.divider {
  position: relative; width: 100%; line-height: 0; z-index: 3;
  background: var(--top, #000); margin-top: -1px; margin-bottom: -1px; overflow: hidden;
}
.divider svg { display: block; width: 100%; height: clamp(40px, 5vw, 70px); }
.divider svg path { fill: var(--bot, #fff); }

/* random soap bubbles drifting up and popping sporadically */
.divider .foam-bubbles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.divider .foam-bubbles i {
  position: absolute; bottom: 30%; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, rgba(255,255,255,.65), var(--bot, #fff) 62%);
  opacity: 0; animation: floatPop 6s ease-in infinite;
}
.foam-bubbles i:nth-child(1){ left:8%;  width:10px;height:10px; animation-duration:5.5s; animation-delay:.2s; }
.foam-bubbles i:nth-child(2){ left:20%; width:6px;  height:6px;  animation-duration:4.2s; animation-delay:1.7s; }
.foam-bubbles i:nth-child(3){ left:33%; width:13px; height:13px; animation-duration:6.6s; animation-delay:.9s; }
.foam-bubbles i:nth-child(4){ left:45%; width:7px;  height:7px;  animation-duration:5s;   animation-delay:2.6s; }
.foam-bubbles i:nth-child(5){ left:57%; width:11px; height:11px; animation-duration:6s;   animation-delay:.5s; }
.foam-bubbles i:nth-child(6){ left:69%; width:6px;  height:6px;  animation-duration:4.6s; animation-delay:3.1s; }
.foam-bubbles i:nth-child(7){ left:81%; width:12px; height:12px; animation-duration:6.9s; animation-delay:1.3s; }
.foam-bubbles i:nth-child(8){ left:92%; width:8px;  height:8px;  animation-duration:5.2s; animation-delay:2.2s; }
@keyframes floatPop {
  0%   { transform: translateY(0) scale(.4);    opacity: 0; }
  15%  { opacity: .95; }
  65%  { transform: translateY(-30px) scale(1);   opacity: .9; }
  85%  { transform: translateY(-40px) scale(1.4); opacity: .4; }
  100% { transform: translateY(-44px) scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .divider .foam-bubbles { display: none; } }

/* ============================================================
   LIGHT SECTIONS — break up the dark with white backgrounds
   ============================================================ */
.section.section-light {
  background: #ffffff;
  color: #24383c;
}
.section-light .section-title { color: #07171a; }
.section-light .section-lead { color: #51666b; }
.section-light p { color: #51666b; }
.section-light .eyebrow { color: #0093a0; }
.section-light .eyebrow .dot { background: var(--red); }

/* Guide (light) */
.section-light .guide-copy strong { color: #07171a; }
.section-light .guide-points li { color: #34474d; }
.section-light .guide-points span { color: #0093a0; }

/* Packages (light) — colored cards pop on white */
.section-light .pkg-note { color: #7a8a8e; }

/* Membership (light) */
.section-light .member-perks h3 { color: #07171a; }
.section-light .member-perks p { color: #51666b; }

/* Locations — map card + details, best-UX layout */
.section-light .loc-card {
  display: flex; flex-direction: column; overflow: hidden; border-radius: 22px;
  background: linear-gradient(150deg, #1b1e20 0%, #0a0b0c 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 30px 70px rgba(0,0,0,.4);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.section-light .loc-card:hover { transform: translateY(-5px); border-color: rgba(0,179,194,.45); box-shadow: 0 38px 84px rgba(0,0,0,.5); }
.loc-map { position: relative; height: clamp(180px, 22vw, 240px); background: #111; }
.loc-map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.25) contrast(1.05) brightness(.95); }
.loc-info { padding: clamp(1.4rem, 2.6vw, 2.1rem); }
.loc-info-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.section-light .loc-card h3 { color: #fff; font-size: 1.6rem; margin: 0; }
.section-light .loc-card address { font-style: normal; color: #cfd9da; font-size: 1rem; margin-bottom: .45rem; }
.section-light .loc-hours { color: var(--teal-soft); font-weight: 600; margin-bottom: 1.3rem; font-size: .98rem; }
.loc-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.section-light .loc-card .btn-ghost { color: #fff; border-color: rgba(255,255,255,.3); }
.section-light .loc-card .btn-ghost:hover { color: #fff; border-color: var(--teal); background: rgba(0,179,194,.14); }
.loc-tag {
  flex-shrink: 0; display: inline-flex; align-items: center; gap: .45rem;
  background: rgba(0,179,194,.14); border: 1px solid rgba(0,179,194,.4); color: var(--teal);
  padding: .32rem .7rem; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .62rem;
}
.loc-live { width: 7px; height: 7px; border-radius: 50%; background: #36d399; box-shadow: 0 0 0 0 rgba(54,211,153,.6); animation: livePulse 2s ease-in-out infinite; }
@keyframes livePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(54,211,153,.5); } 50% { box-shadow: 0 0 0 5px rgba(54,211,153,0); } }
.loc-tag.is-closed { color: #b9c1c2; border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.05); }
.loc-tag.is-closed .loc-live { background: #8a9799; animation: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .loc-live { animation: none; } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
  .hero-inner, .guide-inner, .membership-panel { grid-template-columns: 1fr; }
  .guide-photo { order: -1; }
  .hero-visual { min-height: 320px; margin-top: .5rem; }
  .free-burst { width: 108px; height: 108px; }
  .free-burst .fb-big { font-size: 1.7rem; }
  .pkg-grid { grid-template-columns: repeat(2, 1fr); }
  .amen-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  /* The header's backdrop-filter makes it the containing block for the fixed
     drawer, trapping it inside the ~99px header. Drop it on mobile so the menu
     fills the full viewport height. */
  .site-header, .site-header.scrolled { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(0,0,0,.94); }
  .nav-menu {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    background: rgba(8,8,8,.98); backdrop-filter: blur(12px);
    padding: 2rem 2.2rem; transform: translateX(100%); transition: transform .3s ease;
    box-shadow: -20px 0 60px rgba(0,0,0,.6);
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu > li { width: 100%; }
  .nav-menu > li > a:not(.btn) { font-size: 1.2rem; }
  .nav-cta .btn, .nav-phone a { width: 100%; }
  .nav-phone a { font-size: 1.1rem; }
  body.nav-open { overflow: hidden; }
}

@media (max-width: 720px) {
  .pain-grid, .steps, .loc-grid { grid-template-columns: 1fr; }
  .steps::before { display: none; }
  .steps { gap: 2.2rem; }
  .hero-actions .btn { flex: 1 1 auto; }
  .cmp-row { grid-template-columns: 1fr; gap: .45rem; }
  .cmp-arrow { transform: rotate(90deg); opacity: 1; }
  /* Separate each problem→solution group, and reveal each one as it scrolls in. */
  .compare { gap: 2.8rem; }
  .cmp-bad, .cmp-good { opacity: 1; transform: none; }
  .cmp-row.reveal { opacity: 0; transform: translateY(26px); transition: opacity .55s ease, transform .55s ease; }
  .cmp-row.reveal.in { opacity: 1; transform: none; }
  .review-grid, .review-cta { grid-template-columns: 1fr; }
  .faq-list { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .pkg-grid { grid-template-columns: 1fr; }
  .amen-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
  .logo-word { font-size: 1.5rem; }
}

/* ============================================================
   FREE WASH PAGE (/free-wash)
   A simple, single-purpose claim page: headline, one line of
   copy, then the form. Drop the Paperform embed into #paperform.
   ============================================================ */

/* Full-height teal stage that centers the claim block */
.fw-page {
  position: relative; overflow-x: hidden;
  min-height: 100svh;
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #1ec3d0 0%, var(--teal) 42%, #0093a0 100%) #0093a0;
  background-attachment: fixed;
  color: #fff;
}
.fw-main { position: relative; z-index: 1; flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 6vw, 4.5rem) 0; }

/* Decorative drifting bubbles, same as the intro splash */
.fw-bubble { position: absolute; z-index: 0; height: auto; pointer-events: none; opacity: .12; will-change: transform; }
.fw-bubble.b1 { width: clamp(360px, 52vw, 680px); left: -10%; bottom: -16%; animation: introDrift 16s ease-in-out infinite; }
.fw-bubble.b2 { width: clamp(280px, 40vw, 520px); right: -8%; top: -8%;  animation: introDriftFlip 18s ease-in-out -4s infinite; }
@media (prefers-reduced-motion: reduce) { .fw-bubble { animation: none; } }

/* Centered single column */
.fw-wrap { width: 100%; max-width: 640px; margin-inline: auto; padding-inline: var(--gutter); text-align: center; }

.fw-eyebrow {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .16em; font-size: .8rem; color: #eafdff; opacity: .9; margin-bottom: 1rem;
}
.fw-title {
  font-family: var(--font-display); font-weight: 900; color: #fff; line-height: .95;
  font-size: clamp(2.4rem, 1.4rem + 5vw, 4rem); letter-spacing: -.02em; margin-bottom: 1rem;
}
.fw-tagline {
  display: inline-block; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.05rem, 1rem + .6vw, 1.4rem); color: #fff;
  background: var(--red); padding: .45rem 1.1rem; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(201,33,39,.4); margin-bottom: 1.4rem;
}
.fw-lead { font-size: 1.1rem; line-height: 1.5; color: #f3feff; max-width: 42ch; margin: 0 auto 2.2rem; }

/* White card that holds the form */
.fw-formcard {
  background: #fff; border-radius: 18px; padding: clamp(1.4rem, 3vw, 2.4rem);
  box-shadow: 0 24px 60px rgba(0,0,0,.22); text-align: left;
}

/* Placeholder shown until the real embed is pasted into #paperform */
.fw-placeholder {
  border: 2px dashed var(--teal); border-radius: 14px;
  background: var(--teal-pale); color: #07474d;
  padding: 2.6rem 1.5rem; text-align: center; min-height: 300px;
  display: grid; place-content: center; gap: .6rem;
}
.fw-placeholder .fw-ph-ico { font-size: 2rem; }
.fw-placeholder strong { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; }
.fw-placeholder span { font-size: .9rem; opacity: .85; }

/* Thank-you page: success checkmark + action buttons */
.fw-check-badge {
  width: clamp(78px, 14vw, 108px); height: clamp(78px, 14vw, 108px);
  margin: 0 auto 1.6rem; display: grid; place-items: center;
  background: #fff; border-radius: 50%; box-shadow: 0 16px 38px rgba(0,0,0,.24);
}
.fw-check-badge svg { width: 52%; height: 52%; stroke: var(--teal); }
.fw-actions { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; margin-top: .4rem; }

.fw-fine { color: #eafdff; opacity: .82; font-size: .82rem; line-height: 1.5; max-width: 50ch; margin: 1.8rem auto 0; }
.fw-back { display: inline-block; margin-top: 1.6rem; font-family: var(--font-display); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.fw-back:hover { color: #06363b; }

/* ============================================================
   MEMBERSHIP PAGE (/membership)
   Its own identity: a teal "Unlimited Club" hero with a floating
   member card, an everything-included perks grid, and an
   interactive "do the math" savings calculator. The home page
   leans black/cinematic; this page leans teal/club.
   ============================================================ */

/* Active nav item (current page) */
.nav-menu > li > a[aria-current="page"] { color: var(--teal); }
.nav-menu > li > a[aria-current="page"]::after { width: 100%; }

/* Reusable centered section head (replaces the home split-head / rail rhythm) */
.center-head { text-align: center; max-width: 56ch; margin: 0 auto 2.8rem; }
.center-head .eyebrow, .center-head .section-lead { margin-left: auto; margin-right: auto; }
.center-head .section-title { margin-bottom: 1rem; }
.center-head .section-lead { margin-bottom: 0; }

/* ---------- Club hero (teal identity — distinct from the dark home hero) ---------- */
.mem-hero {
  position: relative; overflow: hidden; color: #fff;
  background: radial-gradient(120% 95% at 82% -10%, #21c7d4 0%, var(--teal) 44%, #0093a0 100%) #0093a0;
  /* generous bottom room so the photo's drop shadow lands inside the teal, not on the wave divider */
  padding-block: clamp(2.4rem, 5.5vh, 4.4rem) clamp(4.5rem, 9vh, 7rem);
}
.mem-hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch;
}
.mem-hero .eyebrow { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); color: #fff; }
.mem-hero .eyebrow .dot { background: var(--red); }
.mem-hero-title {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(2.5rem, 1.2rem + 5vw, 5rem); line-height: .9; letter-spacing: -.022em;
  margin: 0 0 1rem; color: #fff; text-shadow: 0 6px 30px rgba(0,0,0,.18);
}
.mem-hero-title .ht-accent { color: #04282c; }          /* deep teal-black pops on the teal field */
.mem-hero-sub { font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); color: #ecffff; max-width: 40ch; margin: 0 0 1.3rem; }
.mem-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; margin-bottom: 1.1rem; }
.mem-hero .btn-white { background: #fff; color: #0093a0; box-shadow: 0 14px 36px rgba(0,0,0,.22); }
.mem-hero .btn-white:hover { background: #04282c; color: #fff; }
.mem-hero .hero-link { color: #fff; }
.mem-hero .hero-link span { color: #04282c; }
.mem-hero .hero-link:hover { color: #eafdff; }
/* decorative bubbles (white-bubbles png, matching the free-wash teal stage) */
.mem-hero-bubble { position: absolute; z-index: 0; height: auto; pointer-events: none; opacity: .14; will-change: transform; }
.mem-hero-bubble.b1 { width: clamp(300px, 40vw, 560px); right: -8%; top: -22%; animation: introDriftFlip 18s ease-in-out infinite; }
.mem-hero-bubble.b2 { width: clamp(180px, 22vw, 320px); left: -6%; bottom: -26%; animation: introDrift 16s ease-in-out -3s infinite; }
@media (prefers-reduced-motion: reduce) { .mem-hero-bubble { animation: none; } }
/* Hero member photo (replaces the membership-card mockup) */
.mem-hero-visual { position: relative; }
.mem-hero-photo {
  position: relative; margin: 0; border-radius: 24px; overflow: hidden;
  height: 100%; min-height: 300px;
  box-shadow: 0 18px 40px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.16);
}
.mem-hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 42% center; display: block; }
@media (max-width: 860px) { .mem-hero-photo { aspect-ratio: 3 / 2; } }
.mem-hero-photo::after {        /* subtle top sheen for a glossy read */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255,255,255,.14), transparent 22%);
}
/* "Already a member?" — quick path to manage an existing membership.
   Styled as a clear bordered pill button so it reads as an action, not body text. */
.mem-member-note {
  display: flex; align-items: center; flex-wrap: wrap; gap: .75rem;
  margin: 1.4rem 0 0; font-size: .98rem; color: #eafdff; font-weight: 600;
  grid-column: 1;   /* keep under the copy column on desktop; stacks last (under photo) on mobile */
}
.mem-member-note a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  letter-spacing: .03em; font-size: .8rem; color: #fff;
  padding: .52rem 1.1rem; border-radius: 999px;
  background: transparent; border: 2px solid rgba(255,255,255,.55); text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.mem-member-note a:hover { background: #fff; color: #0093a0; border-color: #fff; transform: translateY(-2px); }
.mem-member-note a span { transition: transform .2s ease; }
.mem-member-note a:hover span { transform: translateX(4px); }
@media (max-width: 860px) {
  /* minmax(0,1fr) stops the grid track blowing out past the viewport (a 1fr track
     has a min-content floor); centered copy matches the other mobile heroes. */
  .mem-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 2.4rem; text-align: center; }
  .mem-hero-copy { min-width: 0; }
  .mem-hero-title { font-size: clamp(2rem, 1rem + 5vw, 3.1rem); }
  .mem-hero-sub { max-width: none; margin-inline: auto; }
  .mem-member-note { justify-content: center; }
}

/* ---------- "Everything included" perks grid (membership-specific) ---------- */
.incl-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  list-style: none; padding: 0; margin: 0;
}
.incl-card {
  background: var(--panel); border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius); padding: 1.9rem 1.7rem;
  transition: transform .2s ease, border-color .2s ease;
}
.incl-card:hover { transform: translateY(-5px); border-color: rgba(0,179,194,.4); }
.incl-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%; color: var(--teal); margin-bottom: 1.1rem;
  background: radial-gradient(circle at 50% 36%, #20292b, #0d1314); border: 2px solid var(--teal);
  box-shadow: 0 0 0 4px rgba(0,179,194,.08); transition: transform .25s ease;
}
.incl-card:hover .incl-ic { transform: scale(1.1) rotate(-4deg); }
.incl-ic svg { width: 26px; height: 26px; }
.incl-card h3 { font-size: 1.18rem; margin: 0 0 .35rem; }
.incl-card p { color: var(--muted); margin: 0; font-size: .96rem; }
/* incl-cards stay dark even inside light zones, so keep their text light & readable
   (light sections set a dark inherited color that would otherwise wash out the heading) */
.section-light .incl-card { color: #e7eced; }
.section-light .incl-card h3 { color: #fff; }
.section-light .incl-card p { color: var(--muted); }
@media (max-width: 980px) { .incl-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .incl-grid { grid-template-columns: 1fr; } }

/* ---------- Interactive savings calculator ---------- */
.calc {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  background:
    radial-gradient(70% 80% at 12% 10%, rgba(0,179,194,.18), transparent 60%),
    linear-gradient(150deg, #13292d 0%, #0a0b0c 58%, #1c0e11 100%);
  border: 1px solid rgba(0,179,194,.3); border-radius: 26px;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  box-shadow: 0 30px 70px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.08);
  color: #fff;
}
.calc-control .calc-q {
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em;
  font-size: 1.05rem; color: #fff; margin: 0 0 1.4rem;
}
.calc-readout { text-align: center; margin-bottom: 1.4rem; }
.calc-readout b {
  font-family: var(--font-display); font-weight: 900; color: var(--teal);
  font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1;
}
.calc-readout span { display: block; margin-top: .3rem; color: var(--teal-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.calc-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 8px; border-radius: 999px; margin: 0;
  background: linear-gradient(90deg, var(--teal) 0 var(--pct, 24%), rgba(255,255,255,.14) var(--pct, 24%) 100%);
  cursor: pointer;
}
.calc-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--teal) 60%, #007480);
  border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,179,194,.6); cursor: pointer;
}
.calc-slider::-moz-range-thumb {
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #fff, var(--teal) 60%, #007480);
  border: 2px solid #fff; box-shadow: 0 4px 14px rgba(0,179,194,.6); cursor: pointer;
}
.calc-scale { display: flex; justify-content: space-between; margin-top: .7rem; color: var(--muted); font-size: .76rem; }

/* Result side: the big save number + two comparison bars */
.calc-result { border-left: 1px solid rgba(255,255,255,.1); padding-left: clamp(1.2rem, 3vw, 2.6rem); }
.calc-save { text-align: center; margin-bottom: 1.6rem; }
.calc-save .cs-top { display: block; color: var(--teal-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .2rem; }
.calc-save b {
  font-family: var(--font-display); font-weight: 900; color: var(--teal);
  font-size: clamp(3rem, 2rem + 4vw, 5rem); line-height: .95; display: block;
  text-shadow: 0 0 40px rgba(0,179,194,.4);
}
.calc-save .cs-bot { display: block; color: #cfe8ea; font-size: .92rem; margin-top: .2rem; }
.calc-save.neg b { color: #fff; font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2rem); text-shadow: none; }
.calc-bars { display: grid; gap: 1rem; }
.calc-bar-row { display: grid; gap: .4rem; }
.calc-bar-top { display: flex; justify-content: space-between; align-items: baseline; font-size: .86rem; }
.calc-bar-top .cb-label { color: #cfd9da; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .76rem; }
.calc-bar-top .cb-val { font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: #fff; }
.calc-bar { height: 14px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.calc-bar span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .35s cubic-bezier(.2,.8,.25,1); }
.calc-bar.pay span { background: linear-gradient(90deg, var(--red), var(--red-2)); }
.calc-bar.plan span { background: linear-gradient(90deg, #00b3c2, var(--teal-pale)); }
.calc-note { text-align: center; color: var(--muted); font-size: .86rem; margin: 1.8rem 0 0; }
.calc-cta { text-align: center; margin-top: 1.8rem; }

@media (max-width: 760px) {
  .calc { grid-template-columns: 1fr; gap: 1.8rem; }
  .calc-result { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.8rem; }
}

/* ---------- Family Plans (membership light zone) ---------- */
/* Light, friendly cards — these sit on a WHITE section, so override the
   default dark .incl-card look. Scoped to .fam-grid only. */
.fam-grid { grid-template-columns: repeat(3, 1fr); max-width: 1040px; margin-inline: auto; }
.fam-grid .incl-card {
  background: #fff; border: 1px solid var(--teal-soft);
  box-shadow: 0 10px 28px rgba(0,179,194,.10); text-align: center;
}
.fam-grid .incl-card:hover {
  transform: translateY(-6px); border-color: var(--teal);
  box-shadow: 0 18px 42px rgba(0,179,194,.20);
}
.fam-grid .incl-ic {
  margin-left: auto; margin-right: auto; color: var(--teal);
  background: radial-gradient(circle at 50% 36%, #eafbfc, #d3edef);
  border-color: var(--teal); box-shadow: 0 0 0 5px rgba(0,179,194,.10);
}
.fam-grid .incl-card h3 { color: var(--ink); }
.fam-grid .incl-card p { color: #5b6566; }

/* Highlight the headline perk — the $5 deal — in brand teal so it pops. */
.fam-grid .fam-feature {
  background: linear-gradient(160deg, var(--teal), #0093a0);
  border-color: transparent; box-shadow: 0 16px 40px rgba(0,179,194,.32);
}
.fam-grid .fam-feature .incl-ic {
  background: rgba(255,255,255,.18); border-color: #fff; color: #fff;
  box-shadow: 0 0 0 5px rgba(255,255,255,.14);
}
.fam-grid .fam-feature h3,
.fam-grid .fam-feature p { color: #fff; }
.fam-grid .fam-feature p { opacity: .95; }

@media (max-width: 760px) { .fam-grid { grid-template-columns: 1fr; max-width: 420px; } }

.fam-cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.8rem); }
.fam-note { max-width: 52ch; margin: 1.1rem auto 0; font-size: .96rem; }

/* ---------- Club close (distinct from the home red CTA + the teal free-wash page) ---------- */
.mem-final {
  position: relative; overflow: hidden; background: #07171c;
  padding-block: clamp(3.4rem, 7vw, 6rem);
}
.mem-final::before {                 /* teal club glow */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 120% at 15% 50%, rgba(0,179,194,.24), transparent 60%),
    radial-gradient(45% 100% at 100% 8%, rgba(0,179,194,.12), transparent 55%);
}
.mem-final-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: auto 1fr; gap: clamp(1.6rem, 5vw, 4rem); align-items: center;
}
.mem-final-badge {
  width: clamp(150px, 22vw, 240px); height: auto;
  filter: drop-shadow(0 20px 50px rgba(0,179,194,.42));
  animation: introDrift 7s ease-in-out infinite;
}
.mem-final-copy .eyebrow { background: rgba(0,179,194,.16); border-color: rgba(0,179,194,.4); color: var(--teal); }
.mem-final-copy h2 {
  font-size: clamp(2.1rem, 1.4rem + 3vw, 3.7rem); color: #fff;
  letter-spacing: -.02em; line-height: 1; margin: 0 0 1rem;
}
.mem-final-copy h2 .grad {
  background: linear-gradient(96deg, var(--teal) 0%, #5fdfe9 46%, var(--teal-pale) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.mem-final-sub { color: #bfe6ea; font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 46ch; margin: 0 0 1.9rem; }
.mem-final-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; }
.mem-final .hero-link { color: #fff; }
.mem-final .hero-link span { color: var(--teal); }
@media (max-width: 760px) {
  .mem-final-inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .mem-final-actions { justify-content: center; }
  .mem-final-sub { margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) { .mem-final-badge { animation: none; } }

/* ============================================================
   JOIN THE TEAM PAGE (/join-the-team)
   A recruiting page: dark hero with the crew photo, a perks
   marquee, "why work here" grid, open roles, how-to-apply
   steps, and a teal apply zone holding the Paperform embed.
   Reuses .incl-grid, .steps, .center-head, .fw-formcard,
   and .fw-placeholder; this block adds only what's unique.
   ============================================================ */

/* ---- Hero: copy left, crew photo right ---- */
.jt-hero { position: relative; padding-block: clamp(2.6rem, 6vw, 5rem) clamp(2.6rem, 5vw, 4.5rem); overflow: hidden; }
.jt-hero-inner {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.8rem, 4vw, 3.6rem);
  align-items: stretch;
}
.jt-hero-copy { display: flex; flex-direction: column; justify-content: center; }
.jt-hero-title {
  font-size: clamp(2.3rem, 1.2rem + 4.4vw, 4.3rem); line-height: .96;
  letter-spacing: -.02em; margin: 0 0 1.1rem;
}
.jt-hero-sub { color: var(--teal-soft); font-size: clamp(1.05rem, 1rem + .4vw, 1.3rem); max-width: 44ch; margin: 0 0 1.9rem; }
.jt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.3rem; }

.jt-hero-visual { position: relative; display: flex; }
.jt-hero-photo {
  margin: 0; border-radius: 22px; overflow: hidden; flex: 1; min-height: clamp(360px, 40vw, 520px);
  box-shadow: 0 30px 70px rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.08);
}
.jt-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.jt-hero-badge {
  position: absolute; top: 18px; right: 18px; bottom: auto; left: auto; z-index: 2;
  display: grid; place-items: center; gap: 0; text-align: center;
  width: clamp(92px, 13vw, 120px); height: clamp(92px, 13vw, 120px);
  background: var(--red); color: #fff; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.92);   /* white ring so it reads as a sticker on the photo */
  box-shadow: 0 12px 30px rgba(0,0,0,.45);
  transform: rotate(-8deg); animation: introDrift 7s ease-in-out infinite;
}
.jt-hero-badge .jhb-top { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; opacity: .9; }
.jt-hero-badge b { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem); line-height: 1; }
@media (prefers-reduced-motion: reduce) { .jt-hero-badge { animation: none; } }

@media (max-width: 860px) {
  .jt-hero-inner { grid-template-columns: minmax(0, 1fr); }
  /* Center the copy and drop the image below it on mobile (order:0 keeps DOM order). */
  .jt-hero-copy { text-align: center; align-items: center; }
  .jt-hero-visual { order: 0; max-width: 520px; margin-inline: auto; }
  .jt-hero-actions { }
}

/* ---- Open roles grid (light zone) ---- */
.jt-roles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
  list-style: none; padding: 0; margin: 0 0 1.6rem;
}
.jt-role {
  background: linear-gradient(150deg, #1b1e20 0%, #0a0b0c 100%);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 1.8rem 1.7rem; display: flex; flex-direction: column; gap: .7rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.18);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.jt-role:hover { transform: translateY(-5px); border-color: rgba(0,179,194,.4); }
.jt-role-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; }
.jt-role h3 { color: #fff; font-size: 1.3rem; margin: 0; }
.jt-tag {
  flex: 0 0 auto; align-self: flex-start;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: .66rem; color: var(--teal);
  background: rgba(0,179,194,.14); border: 1px solid rgba(0,179,194,.4);
  padding: .35rem .6rem; border-radius: 999px; white-space: nowrap;
}
.jt-role p { color: #aeb9ba; margin: 0; font-size: .96rem; flex: 1 0 auto; }
.jt-role-link {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; font-size: .82rem; color: var(--teal);
}
.jt-role-link span { transition: transform .2s ease; display: inline-block; }
.jt-role-link:hover span { transform: translateX(5px); }
.jt-roles-note { text-align: center; color: #7a8a8e; font-size: .92rem; margin: 0; }
@media (max-width: 880px) { .jt-roles { grid-template-columns: 1fr; } }

/* ---- Apply zone: teal stage holding the form card ---- */
.jt-apply {
  position: relative; overflow: hidden;
  /* Vertical gradient so the TOP edge is a single uniform teal across the full
     width — lets the wave divider above it (--bot:#1ec3d0) meet it seamlessly. */
  background: linear-gradient(180deg, #1ec3d0 0%, var(--teal) 32%, #0093a0 100%) #0093a0;
  padding-block: clamp(3rem, 7vw, 6rem);
  text-align: center; color: #fff;
}
.jt-apply-bubble { position: absolute; z-index: 0; height: auto; pointer-events: none; opacity: .12; will-change: transform; }
.jt-apply-bubble.b1 { width: clamp(320px, 46vw, 600px); left: -10%; bottom: -16%; animation: introDrift 16s ease-in-out infinite; }
.jt-apply-bubble.b2 { width: clamp(260px, 38vw, 480px); right: -8%; top: -10%; animation: introDriftFlip 18s ease-in-out -4s infinite; }
@media (prefers-reduced-motion: reduce) { .jt-apply-bubble { animation: none; } }
.jt-apply-inner { position: relative; z-index: 1; max-width: 640px; }
.jt-apply-eyebrow { justify-content: center; color: #eafdff; }
.jt-apply-eyebrow .dot { background: #fff; }
.jt-apply-title {
  font-family: var(--font-display); font-weight: 900; color: #fff; line-height: .98;
  font-size: clamp(2rem, 1.3rem + 3.4vw, 3.4rem); letter-spacing: -.02em; margin: 0 0 .8rem;
}
.jt-apply-lead { font-size: 1.1rem; line-height: 1.5; color: #f3feff; max-width: 42ch; margin: 0 auto 2.2rem; }
.jt-apply .fw-formcard { text-align: left; }
.jt-apply-fine { color: #eafdff; opacity: .82; font-size: .82rem; line-height: 1.5; max-width: 52ch; margin: 1.8rem auto 0; }
.jt-apply-fine a { color: var(--red); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.jt-apply-fine a:hover { color: #fff; }
.jt-apply-back { display: inline-block; margin-top: 1.6rem; font-family: var(--font-display); font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; }
.jt-apply-back:hover { color: #06363b; }

/* ---- Hero perk chips (under the hero actions) ---- */
.jt-chips { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1.7rem 0 0; padding: 0; list-style: none; }
.jt-chips li {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  font-size: .72rem; color: var(--teal-soft);
  background: rgba(0,179,194,.1); border: 1px solid rgba(0,179,194,.3);
  padding: .5rem .85rem; border-radius: 999px;
}
.jt-chips svg { width: 14px; height: 14px; color: var(--teal); }

/* ---- Perks bento (replaces the generic 6-card grid; one teal feature tile + ghost numbers) ---- */
.jt-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; margin-top: 2.4rem; }
.bento-card {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, #1b1e20 0%, #0a0b0c 100%);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius);
  padding: 1.7rem; display: flex; flex-direction: column; gap: .45rem;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bento-card > * { position: relative; z-index: 1; }
.bento-card:hover { transform: translateY(-5px); border-color: rgba(0,179,194,.4); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.bento-card h3 { color: #fff; font-size: 1.2rem; margin: 0; }
.bento-card p { color: var(--muted); margin: 0; font-size: .96rem; }
.bento-num {
  position: absolute; right: .6rem; bottom: -.7rem; z-index: 0;
  font-family: var(--font-display); font-weight: 900; line-height: 1;
  font-size: clamp(3.5rem, 8vw, 6rem); color: rgba(255,255,255,.045); pointer-events: none;
}
.bento-card.is-feature {
  grid-column: span 2;
  background: linear-gradient(145deg, #15bccb 0%, #0093a0 100%); border-color: transparent;
  box-shadow: 0 24px 60px rgba(0,147,160,.3);
}
.bento-card.is-feature h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.bento-card.is-feature p { color: #eafdff; font-size: 1.05rem; max-width: 38ch; }
.bento-card.is-feature .incl-ic { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); color: #fff; box-shadow: none; }
.bento-card.is-feature .bento-num { color: rgba(255,255,255,.13); }
@media (max-width: 820px) { .jt-bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .jt-bento { grid-template-columns: 1fr; } .bento-card.is-feature { grid-column: span 1; } }

/* ============================================================
   FUNDRAISING PAGE
   Reuses .jt-hero, .hero-stats, .trustbar, .incl-grid, .steps,
   .rail/.faq-list, .jt-apply, .fw-formcard. Adds the "perfect
   for" pill grid below, shown on a light section.
   ============================================================ */
.fr-tags {
  list-style: none; padding: 0; margin: 0 auto 1.6rem; max-width: 880px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem;
}
.fr-tags li {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: .82rem; color: #07171a;
  background: rgba(0,179,194,.1); border: 1px solid rgba(0,179,194,.35);
  padding: .7rem 1.1rem; border-radius: 999px;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.fr-tags li:hover {
  transform: translateY(-3px); border-color: var(--teal);
  background: rgba(0,179,194,.16);
}

/* ============================================================
   WASH BOOKS PAGE
   Reuses .jt-hero, .hero-stats, .trustbar, .incl-grid, .steps,
   .pkg cards, .rail/.faq-list, .jt-apply. Adds a 2-up grid for
   the two book cards (the shared .pkg-grid is built for four).
   ============================================================ */
.wb-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6rem;
  align-items: stretch; max-width: 760px; margin: 0 auto;
}
.wb-grid .pkg { cursor: pointer; }
.wb-grid .pkg:hover {
  transform: translateY(-12px) scale(1.04);
  box-shadow: 0 42px 86px rgba(0,0,0,.66), 0 0 0 1px rgba(0,179,194,.55), 0 22px 64px rgba(0,179,194,.28);
  z-index: 3;
}
@media (max-width: 620px) { .wb-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   SECONDARY-PAGE HEROES — distinct per page so they stop looking
   alike. Shared centered base (.center-hero) + a different stat/
   figure treatment each: Fleet = stat band, Fundraising = big
   stats, Wash Books = outlined savings figure.
   ============================================================ */
.center-hero { position: relative; overflow: hidden; text-align: center; padding-block: clamp(2.8rem, 6vw, 5rem) clamp(2rem, 4vw, 3.4rem); }
.center-hero .jt-hero-title { margin-inline: auto; max-width: 20ch; }
.center-hero .jt-hero-sub { margin-inline: auto; }
.center-hero .jt-hero-actions { justify-content: center; }
.center-hero .hero-stats { justify-content: center; }
.center-hero .ch-figure { text-align: center; }

/* Fleet — a structured 4-cell stat band */
.stat-band {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
}
.sb-cell { padding: clamp(1.2rem, 2.5vw, 1.7rem) 1rem; border-left: 1px solid rgba(255,255,255,.08); }
.sb-cell:first-child { border-left: 0; }
.sb-num { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.9rem, 1.2rem + 1.9vw, 2.7rem); line-height: 1; color: #fff; }
.sb-cell:nth-child(odd) .sb-num { color: var(--teal); }
.sb-lbl { display: block; margin-top: .45rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--teal-soft); }
@media (max-width: 680px) { .stat-band { grid-template-columns: repeat(2, 1fr); } .sb-cell:nth-child(3) { border-left: 0; } .sb-cell:nth-child(3), .sb-cell:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); } }

/* Fundraising — three big celebratory stats */
.ch-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(1.5rem, 5vw, 3.6rem); margin: clamp(2rem, 4vw, 3rem) auto 0; padding: 0; list-style: none; }
.ch-stats li { text-align: center; }
.ch-stats .stat-num { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem); line-height: 1; color: var(--teal); }
.ch-stats .stat-lbl { display: block; margin-top: .5rem; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; color: var(--teal-soft); }

/* Fundraising hero: full-bleed photo (CSS bg so a not-yet-added file shows the
   dark fallback, not a broken image), content compacted to sit above the fold */
.fr-hero {
  min-height: 100svh; background-color: #04070a; background-position: center; background-size: cover; background-repeat: no-repeat;
  background-image: url(../assets/img/fundraising-hero.jpg);   /* fallback for old browsers */
  background-image: -webkit-image-set(url(../assets/img/fundraising-hero.webp) type('image/webp'), url(../assets/img/fundraising-hero.jpg) type('image/jpeg'));
  background-image: image-set(url(../assets/img/fundraising-hero.webp) type('image/webp'), url(../assets/img/fundraising-hero.jpg) type('image/jpeg'));
}
.fr-hero h1 { font-size: clamp(2rem, 1rem + 3.6vw, 3.8rem); margin-bottom: .55rem; }
.fr-hero .lx-hero-sub { margin-bottom: 1.2rem; }
.fr-hero .ch-stats { margin-top: clamp(1.3rem, 3vh, 2rem); gap: clamp(1.4rem, 5vw, 3rem); }
.fr-hero .ch-stats .stat-num { font-size: clamp(2rem, 1.4rem + 1.8vw, 3.2rem); }
.fr-hero .ch-stats .stat-lbl { font-size: .72rem; }

/* Fundraising "why it works" — struck-through "not a…" list + a punchy statement */
.fr-pitch-inner { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.fr-nots { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.fr-nots li {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.5rem, 1rem + 2.4vw, 3rem); line-height: 1.04; letter-spacing: -.01em;
  color: #5d696d; text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px;
}
.fr-pitch-copy .section-title { margin-bottom: 1.2rem; }
.fr-pitch-copy .section-title .red { color: var(--red); }   /* brand primary red, matching the strikethrough */
.fr-pitch-copy p { color: var(--muted); max-width: 54ch; }
.fr-pitch-copy strong { color: #fff; }
@media (max-width: 820px) { .fr-pitch-inner { grid-template-columns: 1fr; } }

/* Wash Books — oversized outlined savings figure */
.ch-figure { display: inline-flex; align-items: center; gap: .6rem; margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; line-height: .85; text-align: left; }
.ch-figure span { display: block; max-width: 6ch; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; color: var(--teal-soft); margin: 0; line-height: 1.1; }
.ch-figure b { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 2.4rem + 5.5vw, 6.6rem); color: transparent; -webkit-text-stroke: 2px var(--teal); }

/* Fleet split hero: compacted so the whole hero sits above the fold */
.fl-compact { padding-block: clamp(1.6rem, 3.5vw, 3rem); }
.fl-compact .jt-hero-title { font-size: clamp(2rem, 1.1rem + 3vw, 3.5rem); }
.fl-compact .jt-hero-sub { margin-bottom: 1.4rem; }

/* Wash Books hero: full-bleed tunnel photo, compacted to sit above the fold */
.wb-hero { min-height: 100svh; }
.wb-hero h1 { font-size: clamp(1.85rem, 1rem + 3.4vw, 3.7rem); margin-bottom: .5rem; white-space: nowrap; }
/* On narrow phones, let the headline wrap instead of clipping (body is overflow-x:hidden). */
@media (max-width: 480px) { .wb-hero h1 { white-space: normal; } }
.wb-hero .lx-hero-sub { margin-bottom: .6rem; }
.wb-hero .ch-figure { margin-top: clamp(.6rem, 1.5vh, 1.2rem); }
.wb-hero .ch-figure b { font-size: clamp(3rem, 2rem + 4.5vw, 5.6rem); }
.wb-hero .lx-hero-cta { margin-top: clamp(1.2rem, 3vh, 2rem); }
/* Hide the secondary "How it works" link in the hero on phones — keep the single SEE THE BOOKS CTA. */
@media (max-width: 600px) { .wb-hero .lx-hero-cta .hero-link { display: none; } }

/* Contact — two dark location cards (reuse the live .loc-tag pill) */
.ct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.4rem; }
.ct-card { position: relative; background: linear-gradient(150deg, #1b1e20, #0a0b0c); border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.ct-card:hover { transform: translateY(-5px); border-color: rgba(0,179,194,.4); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.ct-card .loc-tag { margin-bottom: .9rem; }
.ct-card h3 { font-size: 1.5rem; margin: 0 0 .5rem; }
.ct-card h3 a { color: #fff; } .ct-card h3 a:hover { color: var(--teal); }
.ct-card address { font-style: normal; color: #cfd9da; margin: 0 0 .25rem; }
.ct-card .ct-phone { display: inline-block; color: var(--teal-soft); font-family: var(--font-display); font-weight: 700; margin-bottom: 1.2rem; }
.ct-card-btns { display: flex; flex-wrap: wrap; gap: .6rem; }
@media (max-width: 740px) { .ct-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HEADER DROPDOWN MENUS
   Desktop: open on hover / keyboard focus / click (aria-expanded).
   Mobile (<=860px): inline accordion inside the slide-in panel.
   ============================================================ */
.nav-has-dd { position: relative; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: .34rem;
  background: none; border: 0; cursor: pointer;
  color: var(--white); font-family: var(--font-display); font-weight: 600;
  font-size: .82rem; letter-spacing: .06em; text-transform: uppercase;
  padding-block: .3rem;
}
.nav-dd-btn:hover { color: var(--teal-pale); }
.nav-caret { width: 13px; height: 13px; transition: transform .25s ease; }
.nav-has-dd:hover .nav-caret,
.nav-has-dd:focus-within .nav-caret,
.nav-dd-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-item.is-active > .nav-dd-btn,
.nav-item.is-active > a { color: var(--teal); }

.nav-dd {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px; margin: 0; padding: .5rem; list-style: none;
  background: #1b1f20; border: 1px solid rgba(255,255,255,.08);
  border-top: 3px solid var(--teal); border-radius: 0 0 14px 14px;
  box-shadow: 0 26px 60px rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease; z-index: 130;
}
/* invisible hover bridge so the menu doesn't close crossing the gap */
.nav-dd::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.nav-has-dd:hover > .nav-dd,
.nav-has-dd:focus-within > .nav-dd,
.nav-dd-btn[aria-expanded="true"] + .nav-dd {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-dd li { width: 100%; }
.nav-dd a {
  display: block; padding: .7rem .9rem; border-radius: 8px;
  color: #e7eced; font-family: var(--font-display); font-weight: 600;
  font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.nav-dd a:hover { background: rgba(0,179,194,.14); color: var(--teal-pale); }
.nav-dd a[aria-current="page"] { color: var(--teal); }

@media (max-width: 860px) {
  .nav-has-dd { width: 100%; position: static; }
  .nav-dd-btn { width: 100%; justify-content: space-between; font-size: 1.2rem; }
  .nav-dd {
    position: static; transform: none; min-width: 0; width: 100%;
    background: none; border: 0; border-top: 0; box-shadow: none; padding: 0;
    opacity: 1; visibility: visible; pointer-events: auto;
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .nav-dd::before { content: none; }
  /* on mobile, only the toggle (aria-expanded) opens a submenu — not hover */
  .nav-has-dd:hover > .nav-dd,
  .nav-has-dd:focus-within > .nav-dd { max-height: 0; }
  /* keep the open submenu in flow (the desktop open-state sets a translateX(-50%)
     that otherwise shoves it out the left of the drawer). */
  .nav-dd-btn[aria-expanded="true"] + .nav-dd { max-height: 420px; transform: none; }
  .nav-dd a { padding: .5rem 0 .5rem 1rem; font-size: 1rem; color: #cfd6d6; }
}

/* ============================================================
   LIGHTBOX MODAL (Military Discount, etc.)
   Injected once by main.js; shown by toggling .is-open.
   ============================================================ */
body.modal-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: 1.5rem; }
.lightbox.is-open { display: flex; }
.lightbox-overlay { position: absolute; inset: 0; background: rgba(2,6,8,.74); backdrop-filter: blur(4px); }
.lightbox-dialog {
  position: relative; z-index: 1; width: min(520px, 100%); text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #0f2a2e 0%, #0a1416 60%, #070f10 100%);
  border: 1px solid rgba(0,179,194,.3); border-top: 4px solid var(--teal);
  border-radius: 20px; padding: clamp(2rem, 4vw, 2.8rem);
  box-shadow: 0 40px 100px rgba(0,0,0,.6); animation: lbIn .25s ease;
}
@keyframes lbIn { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lightbox-dialog { animation: none; } }
.lightbox-close { position: absolute; top: .8rem; right: .8rem; z-index: 3; background: none; border: 0; color: #cfe7ea; font-size: 1.9rem; line-height: 1; cursor: pointer; padding: .1rem .5rem; border-radius: 8px; }
.lightbox-close:hover { color: #fff; background: rgba(255,255,255,.08); }
.lightbox-eyebrow { display: inline-flex; align-items: center; gap: .5rem; justify-content: center; color: #9fe9f0; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; margin: 0 0 .8rem; }
.lightbox-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.lightbox-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -.01em; margin: 0 0 1.3rem; color: #fff; }
.lightbox-amt { display: flex; align-items: center; justify-content: center; gap: .75rem; margin: 0 0 1.2rem; }
.lightbox-amt-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(3.4rem, 2rem + 5vw, 4.8rem); line-height: 1; color: var(--teal); text-shadow: 0 0 40px rgba(0,179,194,.45); }
.lightbox-amt-lbl { text-align: left; font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; line-height: 1.05; color: #eafdff; }
.lightbox-lead { color: #cdd9da; font-size: 1.02rem; line-height: 1.55; max-width: 38ch; margin: 0 auto 1.7rem; }
.lightbox-actions { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.lightbox-link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem; color: var(--teal-pale); }
.lightbox-link:hover { color: #fff; }
.lightbox-fine { color: #8aa0a3; font-size: .8rem; line-height: 1.5; margin: .3rem 0 0; }

/* Patriotic skin for the Military Discount modal: red top, faint flag stripes,
   and a star-spangled blue canton in the corner — kept dark for readability. */
.lightbox-dialog.lb-patriotic {
  border: 1px solid rgba(178,34,52,.55); border-top: 5px solid #b22234;
  background-color: #0a1016; background-repeat: no-repeat; background-position: center; background-size: cover;
  background-image:
    linear-gradient(rgba(8,12,18,.80), rgba(6,10,16,.90)),
    url('../assets/img/flag.jpg');   /* fallback for old browsers */
  background-image:
    linear-gradient(rgba(8,12,18,.80), rgba(6,10,16,.90)),
    -webkit-image-set(url('../assets/img/flag.webp') type('image/webp'), url('../assets/img/flag.jpg') type('image/jpeg'));
  background-image:
    linear-gradient(rgba(8,12,18,.80), rgba(6,10,16,.90)),
    image-set(url('../assets/img/flag.webp') type('image/webp'), url('../assets/img/flag.jpg') type('image/jpeg'));
  overflow: hidden;
}
/* keep text crisp over the flag */
.lightbox-dialog.lb-patriotic .lightbox-title,
.lightbox-dialog.lb-patriotic .lightbox-lead { text-shadow: 0 2px 14px rgba(0,0,0,.75); }

/* ---------- Header utility bar (socials + Unlimited / Manage quick links) ---------- */
.util-bar { background: #202428; border-bottom: 1px solid rgba(255,255,255,.08); }
.util-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .12rem; min-height: 26px; }
.util-social { display: flex; align-items: center; gap: .25rem; }
.util-soc { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #cfd9da; box-shadow: inset 0 0 0 2px transparent; transition: color .2s ease, box-shadow .25s ease, transform .25s ease; }
.util-soc svg { width: 16px; height: 16px; }
/* keep the top strip slim — smaller icon hit-areas here only (footer/in-content keep full size) */
.util-bar .util-soc { width: 26px; height: 26px; }
.util-bar .util-soc svg { width: 15px; height: 15px; }
/* teal ring "bubble" on hover, matching the logo bubble */
.util-soc:hover { color: #fff; box-shadow: inset 0 0 0 2px var(--teal), 0 0 14px rgba(0,179,194,.35); transform: translateY(-1px); }
.util-links { display: flex; align-items: center; gap: 1.5rem; }
.util-link { display: inline-flex; align-items: center; gap: .45rem; color: #dbe4e5; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .72rem; transition: color .2s ease, transform .2s ease; transform-origin: center; }
.util-link svg { width: 16px; height: 16px; color: var(--teal); flex: 0 0 auto; }
.util-link:hover { color: #fff; transform: scale(1.07); }
.util-link[aria-current="page"] { color: var(--teal); }
/* the utility strip stays put on scroll (the whole header is sticky) */
@media (max-width: 600px) {
  .util-social { display: none; }
  .util-bar-inner { justify-content: center; }
  .util-links { gap: 1.1rem; }
  .util-link { font-size: .66rem; }
}

/* ============================================================
   LEGAL PAGES (/privacy-policy, etc.)
   A simple readable prose column on a light zone. Reuses
   .section-light, .container, and .center-head; this block
   adds only the long-form text styling.
   ============================================================ */
.legal-prose { max-width: 72ch; margin: 0 auto; }
.legal-prose h2 {
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; color: #07171a; font-size: 1.25rem; line-height: 1.2;
  margin: 2.4rem 0 .8rem;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose p { color: #51666b; line-height: 1.7; margin: 0 0 1rem; }
.legal-prose ul { margin: 0 0 1rem; padding-left: 1.2rem; }
.legal-prose li { color: #51666b; line-height: 1.7; margin-bottom: .4rem; }
.legal-prose a { color: #0093a0; text-decoration: underline; }
.legal-prose a:hover { color: var(--teal); }
.legal-prose strong { color: #07171a; }
.legal-updated {
  color: #7a8a8e; font-size: .9rem; font-style: italic; margin: 0 0 2.2rem;
  text-align: center;
}

/* ============================================================
   LOCATION PAGE v2 (.lx-*) — a place-forward identity, distinct
   from the shared secondary-page template (jt-hero / incl-grid).
   Full-bleed photo hero → sticky info + big map → amenity rows.
   3 color zones: dark (arrive + where) → light (what + proof) → red CTA.
   ============================================================ */

/* ---- Full-bleed photo hero, copy anchored bottom-left ---- */
.lx-hero {
  position: relative; isolation: isolate;
  min-height: clamp(540px, 84vh, 800px);
  display: flex; align-items: center; text-align: center; overflow: hidden;
}
.lx-hero-bg {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: center 38%;
  transform: scale(1.06); animation: lxZoom 20s ease-out forwards;
}
@keyframes lxZoom { to { transform: scale(1); } }
/* directional veil — darkest at bottom-left under the copy, with a teal wash */
.lx-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(2,5,8,.70) 0%, rgba(2,5,8,.60) 42%, rgba(2,5,8,.84) 100%),
    radial-gradient(120% 100% at 50% 50%, rgba(2,5,8,.34) 22%, rgba(2,5,8,.72) 100%);
}
.lx-hero-inner { padding-block: clamp(2.4rem, 6vw, 4.6rem); max-width: 820px; margin-inline: auto; }
.lx-hero .loc-tag { margin-bottom: 1.1rem; font-size: .66rem; }
.lx-hero .eyebrow { color: var(--teal-soft); margin-bottom: .9rem; }
.lx-hero h1 {
  font-size: clamp(2.6rem, 1.2rem + 5.4vw, 5.2rem);
  line-height: .92; letter-spacing: -.022em; margin: 0 0 .55rem;
  text-shadow: 0 10px 44px rgba(0,0,0,.55);
}
.lx-hero-sub { color: #e2eeef; font-size: 1.16rem; max-width: 46ch; margin: 0 auto 1.7rem; text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.lx-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }
/* inline meta strip under the buttons (address · phone · hours) */
.lx-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.5rem; margin-top: 1.7rem; padding: 0; list-style: none;
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em;
  font-size: .8rem; color: #e3eeef; text-shadow: 0 2px 12px rgba(0,0,0,.7);
}
.lx-meta li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.lx-meta svg { width: 16px; height: 16px; color: var(--teal); flex-shrink: 0; }
.lx-meta a { color: #cfe1e2; }
.lx-meta a:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .lx-hero-bg { animation: none; transform: none; } }

/* ---- Find us: sticky info card + big map (dark zone) ---- */
.lx-find-grid {
  display: grid; grid-template-columns: 370px 1fr;
  gap: clamp(1.3rem, 3vw, 2.4rem); align-items: start; margin-top: 2.4rem;
}
.lx-info {
  position: sticky; top: 104px;
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--radius);
  padding: clamp(1.4rem, 2.6vw, 2rem);
}
.lx-info h2 { font-size: 1.45rem; margin: 0 0 1.1rem; }
.lx-info-row { display: flex; gap: .9rem; padding: .95rem 0; border-top: 1px solid rgba(255,255,255,.08); }
.lx-info-row:first-of-type { border-top: 0; padding-top: 0; }
.lx-info-ic {
  flex-shrink: 0; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 11px; background: rgba(0,179,194,.14); color: var(--teal);
}
.lx-info-ic svg { width: 20px; height: 20px; }
.lx-info-row h3 { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--teal); margin: 0 0 .25rem; }
.lx-info-row p { margin: 0; color: #dfe7e8; font-size: .96rem; line-height: 1.5; }
.lx-info-row a { color: #dfe7e8; }
.lx-info-row a:hover { color: var(--teal-pale); }
.lx-info-btns { display: grid; gap: .6rem; margin-top: 1.3rem; }
.lx-info-btns .btn { width: 100%; }
.lx-map {
  position: relative; min-height: clamp(360px, 56vw, 580px);
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,255,255,.10); box-shadow: 0 30px 70px rgba(0,0,0,.5);
}
.lx-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25) contrast(1.05) brightness(.92); }
@media (max-width: 860px) {
  .lx-find-grid { grid-template-columns: 1fr; }
  .lx-info { position: static; }
  .lx-map { min-height: 320px; }
}

/* ---- Amenity rows: a connected 2-col slab (NOT the incl-grid) ---- */
.lx-amen { position: relative; overflow: hidden; }
.lx-amen .container { position: relative; z-index: 1; }
/* faint oversized city-name watermark behind the header */
.lx-watermark {
  position: absolute; top: clamp(1.5rem, 4vw, 3rem); left: 50%; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(5rem, 21vw, 15rem); line-height: 1; letter-spacing: -.04em;
  color: rgba(0,147,160,.055); white-space: nowrap; pointer-events: none; z-index: 0;
}
.lx-amen-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(7,23,26,.10); border: 1px solid rgba(7,23,26,.10);
  border-radius: var(--radius); overflow: hidden; margin-top: 2.4rem;
}
.lx-amen-row { display: flex; gap: 1.1rem; align-items: center; padding: clamp(1.2rem, 2.4vw, 1.7rem); background: #fbfdfd; transition: background .2s ease; }
.lx-amen-row:hover { background: #fff; }
/* reuse the home page's amenity icon treatment (dark teal-ringed coin + PNG) */
.lx-amen-row .ga-ic { width: 54px; height: 54px; }
.lx-amen-row:hover .ga-ic { transform: scale(1.1) rotate(-4deg); }
.lx-amen-row h3 { font-size: 1.1rem; color: #07171a; margin: 0 0 .25rem; }
.lx-amen-row p { margin: 0; color: #51666b; font-size: .94rem; line-height: 1.5; }
@media (max-width: 600px) { .lx-amen-grid { grid-template-columns: 1fr; } }

/* ---- Gift cards band (split: angled card art + copy/CTA), light zone ---- */
.lx-gift-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.6rem, 4vw, 3.6rem); align-items: center; }
.lx-gift-art { margin: 0; }
.lx-gift-art img {
  width: 100%; max-width: 540px; height: auto; margin-inline: auto;
  filter: drop-shadow(0 26px 46px rgba(2,40,44,.26));
  transform: rotate(-3deg); transition: transform .45s ease;
}
.lx-gift-art:hover img { transform: rotate(-1deg) translateY(-6px); }
.lx-gift-copy .section-lead { margin-bottom: 1.3rem; }
.lx-gift-copy .btn { margin-top: 1.5rem; }
@media (prefers-reduced-motion: reduce) { .lx-gift-art img { transition: none; } }
@media (max-width: 820px) {
  .lx-gift-inner { grid-template-columns: 1fr; text-align: center; }
  .lx-gift-art { order: -1; }
  .lx-gift-copy .section-lead { margin-inline: auto; }
  .lx-gift-copy .guide-points { display: inline-grid; text-align: left; }
}

/* ============================================================
   ACCESSIBILITY WIDGET (ADA)
   A floating launcher (bottom-left) opens a panel of real,
   persistent accessibility controls. Markup is injected by
   js/main.js so every content page shares one widget.
   The effect classes (.ada-*) live on <html> so a saved
   preference re-applies on the next page automatically.
   ============================================================ */

/* ---- Launcher button ---- */
.ada-fab {
  position: fixed; right: 18px; bottom: 18px; z-index: 1000;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: #000; color: #fff; border: 3px solid var(--teal);
  box-shadow: 0 10px 28px rgba(0,0,0,.45);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ada-fab:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 34px rgba(0,0,0,.55); }
.ada-fab:focus-visible { outline: none; box-shadow: var(--ring), 0 10px 28px rgba(0,0,0,.45); }
.ada-fab svg { width: 26px; height: 26px; display: block; }

/* ---- Panel ---- */
.ada-panel {
  position: fixed; right: 18px; bottom: 84px; z-index: 1001;
  width: min(92vw, 340px); max-height: min(78vh, 620px); overflow-y: auto;
  background: #0e1416; color: #eef6f7;
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.6);
  padding: 1rem 1rem 1.15rem;
  transform: translateY(12px) scale(.98); opacity: 0; visibility: hidden;
  transition: transform .2s ease, opacity .2s ease, visibility .2s;
  font-family: var(--font-body);
}
.ada-panel.is-open { transform: translateY(0) scale(1); opacity: 1; visibility: visible; }
.ada-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.ada-panel-title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: .01em; }
.ada-panel-sub { font-size: .78rem; color: var(--muted); margin: 0 0 .85rem; }
.ada-close {
  width: 30px; height: 30px; flex: none; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.08); color: #fff; border: 0; font-size: 1.2rem; line-height: 1;
}
.ada-close:hover { background: rgba(255,255,255,.16); }
.ada-close:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Controls grid ---- */
.ada-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.ada-opt {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  padding: .7rem .5rem; border-radius: 12px; cursor: pointer; text-align: center;
  background: rgba(255,255,255,.05); color: #eef6f7;
  border: 2px solid transparent; transition: background .15s ease, border-color .15s ease;
  font: inherit; font-size: .8rem; line-height: 1.2;
}
.ada-opt:hover { background: rgba(0,179,194,.14); }
.ada-opt:focus-visible { outline: none; box-shadow: var(--ring); }
.ada-opt svg { width: 24px; height: 24px; }
.ada-opt[aria-pressed="true"] { background: rgba(0,179,194,.2); border-color: var(--teal); }
.ada-opt-state { font-size: .68rem; color: var(--muted); min-height: .85em; }
.ada-opt[aria-pressed="true"] .ada-opt-state { color: var(--teal-soft); }

.ada-reset {
  margin-top: .85rem; width: 100%; padding: .6rem; cursor: pointer;
  background: transparent; color: #eef6f7; border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px; font: inherit; font-size: .82rem;
}
.ada-reset:hover { background: rgba(255,255,255,.08); }
.ada-reset:focus-visible { outline: none; box-shadow: var(--ring); }

@media (max-width: 520px) { .ada-fab { width: 44px; height: 44px; right: 12px; bottom: 12px; } .ada-panel { right: 12px; bottom: 68px; } }

/* ============================================================
   ACCESSIBILITY EFFECT CLASSES (applied to <html>)
   ============================================================ */

/* Bigger text — font-size set inline on <html>; rem-based type scales. */

/* High contrast.
   NOTE: we deliberately avoid combinators inside :not() (e.g. :not(.ada-fab *)) —
   some browsers drop the WHOLE rule when they hit that, which silently disables
   contrast. Instead we force contrast across everything, then restore the widget's
   own look afterward with higher-specificity rules. */
html.ada-contrast body { background: #000 !important; }
html.ada-contrast body * {
  background-color: transparent !important; background-image: none !important;
  color: #fff !important; border-color: #fff !important; text-shadow: none !important; box-shadow: none !important;
}
html.ada-contrast a, html.ada-contrast a * { color: #ff0 !important; }
html.ada-contrast .btn, html.ada-contrast button {
  background: #fff !important; color: #000 !important; border: 2px solid #fff !important;
}

/* Restore the accessibility widget so it stays usable in high-contrast mode. */
html.ada-contrast .ada-fab {
  background: #000 !important; color: #fff !important; border: 3px solid var(--teal) !important;
}
html.ada-contrast .ada-fab svg, html.ada-contrast .ada-fab svg * { color: #fff !important; fill: currentColor; }
html.ada-contrast .ada-panel { background: #0e1416 !important; border-color: #fff !important; }
html.ada-contrast .ada-panel,
html.ada-contrast .ada-panel * { color: #eef6f7 !important; }
html.ada-contrast .ada-opt, html.ada-contrast .ada-close, html.ada-contrast .ada-reset {
  background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.2) !important;
}
html.ada-contrast .ada-opt[aria-pressed="true"] {
  background: rgba(0,179,194,.22) !important; border-color: var(--teal) !important;
}

/* Highlight links. (No combinators inside :not() — the widget has no <a>s.) */
html.ada-links a {
  text-decoration: underline !important; text-underline-offset: 3px !important;
  outline: 2px solid #ffd400 !important; outline-offset: 2px !important;
  background: rgba(255,212,0,.18) !important; border-radius: 3px;
}

/* Readable font — swap brand display/body type for a plain, legible sans.
   Scoped to body descendants so it never touches <html>; :not(i) keeps icon fonts. */
html.ada-readable body *:not(i) {
  font-family: Verdana, Tahoma, Arial, sans-serif !important;
  letter-spacing: normal !important;
}

/* Bigger spacing — easier tracking for low-vision / dyslexic readers. */
html.ada-spacing p, html.ada-spacing li, html.ada-spacing a,
html.ada-spacing span, html.ada-spacing h1, html.ada-spacing h2,
html.ada-spacing h3, html.ada-spacing h4, html.ada-spacing dd, html.ada-spacing dt {
  letter-spacing: .075em !important; word-spacing: .14em !important; line-height: 1.85 !important;
}

/* Pause animations / motion */
html.ada-stop *, html.ada-stop *::before, html.ada-stop *::after {
  animation-duration: .001s !important; animation-iteration-count: 1 !important;
  transition-duration: .001s !important; scroll-behavior: auto !important;
}

/* Big cursor */
html.ada-cursor, html.ada-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 11-6 1 4 7-3 1-4-7-5 4z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto !important;
}