/* ==========================================================================
   Happy Bubbles Car Wash — COMPONENTS & LAYOUT
   Every value here pulls from css/brand.css. Nothing hardcoded.
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--color-ink);
  background: var(--color-bg);
  overflow-x: hidden;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { color: var(--color-ink); }
ul[class], ol[class], .site-nav ul, .site-footer ul { list-style: none; margin: 0; padding: 0; }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }
button { font: inherit; cursor: pointer; }

/* ---------- Type ---------- */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--color-secondary);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
.lead { font-size: var(--text-lg); line-height: var(--leading-snug); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-2);
}
.eyebrow::before { content: ""; width: 2rem; height: 3px; border-radius: 2px; background: var(--color-primary); flex: none; }
.section-head--center .eyebrow::after { content: ""; width: 2rem; height: 3px; border-radius: 2px; background: var(--color-primary); flex: none; }
.hero .eyebrow, .section--deep .eyebrow, .section--photo .eyebrow, .on-dark .eyebrow { color: var(--color-primary); }
.fine { font-size: var(--text-xs); color: var(--color-ink-soft); }
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4, .on-dark p { color: var(--color-bg); }
.on-dark a, .hero a, .section--deep a { color: var(--color-bg); }
.hero a:hover, .section--deep a:hover { color: var(--color-accent); }
.on-dark .fine, .hero .fine, .section--deep .fine { color: var(--color-primary-tint); }

/* ---------- Accessibility helpers ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; top: -100%; left: var(--space-2); z-index: 1000;
  background: var(--color-secondary); color: var(--color-bg);
  padding: var(--space-1) var(--space-2); border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-display); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 0; outline: 3px solid var(--color-focus); outline-offset: 2px; }

:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 3px; border-radius: var(--radius-sm); }
.on-dark :focus-visible, .hero :focus-visible, .site-footer :focus-visible, .utility-bar :focus-visible, .section--deep :focus-visible { outline-color: var(--color-focus); }

/* ---------- Layout ---------- */
.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.container--narrow { max-width: 46rem; }
.section { padding-block: var(--section-pad); position: relative; }
.section--alt { background: var(--color-bg-alt); }
   /* ink text only — never white body text */

.section--deep { background: var(--color-secondary-deep); }
.section--deep { color: var(--color-bg); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--color-bg); }
.section-head { max-width: 46rem; margin-bottom: var(--space-5); }
.section-head--center { margin-inline: auto; text-align: center; }
.grid { display: grid; gap: var(--space-4); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.stack > * + * { margin-top: var(--space-2); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.center { text-align: center; }
.center .cluster { justify-content: center; }

/* ---------- Buttons: exactly two styles ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--btn-font); font-weight: var(--btn-weight); font-size: var(--btn-size);
  line-height: 1; letter-spacing: 0.02em; text-decoration: none; text-align: center;
  padding: var(--btn-pad-y) var(--btn-pad-x); border-radius: var(--btn-radius);
  border: var(--btn-border) solid transparent; min-height: 3rem;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease), color var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn--primary { background: var(--color-cta); color: var(--color-bg); border-color: var(--color-cta); box-shadow: var(--shadow-soft); }
.btn--primary:hover, .btn--primary:focus-visible { background: var(--color-cta-hover); border-color: var(--color-cta-hover); color: var(--color-bg); transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-soft); }

.btn--secondary { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); }
.btn--secondary:hover, .btn--secondary:focus-visible { background: var(--color-secondary); color: var(--color-bg); transform: translateY(-2px); }
/* Same secondary style, inverted for navy/deep grounds */
.on-dark .btn--secondary, .hero .btn--secondary, .section--deep .btn--secondary, .site-footer .btn--secondary { color: var(--color-bg); border-color: var(--color-bg); }
.on-dark .btn--secondary:hover, .hero .btn--secondary:hover, .section--deep .btn--secondary:hover, .on-dark .btn--secondary:focus-visible, .hero .btn--secondary:focus-visible, .section--deep .btn--secondary:focus-visible { background: var(--color-bg); color: var(--color-secondary); }

.btn--lg { --btn-pad-y: 1.1rem; --btn-pad-x: 2.25rem; --btn-size: 1.25rem; }
.btn--block { width: 100%; }
@media (prefers-reduced-motion: reduce) { .btn, .btn:hover { transition: none; transform: none; } }

/* ---------- Utility bar ---------- */
.utility-bar { background: var(--color-secondary-deep); color: var(--color-bg); font-size: var(--text-xs); }
.utility-bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 2.5rem; }
.utility-bar a { color: var(--color-bg); text-decoration: none; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0; }
.utility-bar a:hover, .utility-bar a:focus-visible { text-decoration: none; color: var(--color-accent); }
.utility-bar .social { display: flex; gap: var(--space-2); }
.utility-bar .social svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.utility-bar .social span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.utility-bar .social a { padding: 0.5rem 0.25rem; }
.utility-bar .member-links { display: flex; gap: var(--space-3); }
.utility-bar .member-links a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); }
.utility-bar .member-links a.is-join { color: var(--color-accent); }
@media (max-width: 47.99rem) { .utility-bar .social { display: none; } .utility-bar .container { justify-content: center; } }

/* ---------- Header ---------- */
.site-header { position: sticky; top: 0; z-index: 900; background: var(--color-bg); box-shadow: 0 2px 0 var(--color-line); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 6rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand picture img { width: auto; height: 5.25rem; }

.site-nav ul { display: flex; gap: var(--space-3); align-items: center; }
.site-nav a { font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); color: var(--color-secondary); text-decoration: none; padding: 0.5rem 0.25rem; border-bottom: 3px solid transparent; transition: border-color var(--dur) var(--ease); }
.site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--color-primary); color: var(--color-secondary); }
.nav-toggle { display: none; background: none; border: 0; color: var(--color-secondary); padding: 0.5rem; margin-left: auto; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.nav-toggle__bars { display: grid; gap: 5px; width: 1.4rem; }
.nav-toggle__bars i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.header-cta { white-space: nowrap; }
@media (max-width: 63.99rem) {
  .nav-toggle { display: inline-flex; }
  .site-nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-bg); box-shadow: var(--shadow-soft); padding: var(--space-3) var(--gutter); display: none; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { display: block; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-line); font-size: var(--text-lg); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-bottom-color: var(--color-primary); }
  .header-cta { --btn-pad-x: 1rem; --btn-size: 0.95rem; min-height: 2.75rem; }
  .site-header .container { min-height: 4.25rem; gap: var(--space-2); }
  .brand picture img { height: 3.25rem; }
}
@media (max-width: 30rem) { .header-cta .long { display: none; } }
.fact-list { display: grid; gap: var(--space-2); }
.fact-list li { display: flex; gap: var(--space-2); align-items: flex-start; }
.fact-list .icon-bubble { width: 2.5rem; height: 2.5rem; flex: none; }
.fact-list .icon-bubble svg { width: 1.2rem; height: 1.2rem; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; background: var(--color-secondary-deep); color: var(--color-bg); isolation: isolate; }
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media video, .hero__media img, .hero__media .ph { width: 100%; height: 100%; object-fit: cover; }
.hero__overlay { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0,58,99,0.94) 0%, rgba(0,58,99,0.82) 40%, rgba(0,58,99,0.35) 75%, rgba(0,58,99,0.2) 100%), linear-gradient(180deg, rgba(0,58,99,0) 60%, rgba(0,58,99,0.6) 100%); }
.hero__media img { filter: saturate(1.05); }
.hero .container { position: relative; padding-block: var(--space-7); min-height: min(86vh, 50rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero h1, .hero p { color: var(--color-bg); }
.hero h1 { font-size: var(--text-5xl); max-width: 14ch; letter-spacing: -0.03em; }
.hero .lead { max-width: 34rem; color: var(--color-primary-tint); }
.hero .cluster { margin-top: var(--space-3); }
.hero__note { margin-top: var(--space-2); font-size: var(--text-base); color: var(--color-primary-tint); }
.media-pause { position: absolute; right: var(--space-2); bottom: var(--space-2); z-index: 2; background: var(--color-bg); color: var(--color-secondary); border: 2px solid var(--color-secondary); border-radius: var(--radius-pill); padding: 0.5rem 0.9rem; font-family: var(--font-display); font-weight: 600; font-size: var(--text-xs); }
.media-pause:hover, .media-pause:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
@media (max-width: 47.99rem) { .hero .container { min-height: 0; padding-block: var(--space-6); } .hero__overlay { background: linear-gradient(180deg, rgba(0,58,99,0.88) 0%, rgba(0,58,99,0.82) 100%); } }

/* ---------- Bubble motif (decorative) ---------- */
.bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubbles span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(26,177,234,0.28), rgba(26,177,234,0) 70%); filter: blur(24px); }
.section--deep .bubbles span, .hero .bubbles span, .section--photo .bubbles span { background: radial-gradient(circle, rgba(26,177,234,0.45), rgba(26,177,234,0) 70%); }
.bubbles span:nth-child(1) { width: 28rem; height: 28rem; left: -8rem; top: -6rem; }
.bubbles span:nth-child(2) { width: 14rem; height: 14rem; left: 30%; bottom: -6rem; }
.bubbles span:nth-child(3) { width: 34rem; height: 34rem; right: -10rem; top: -10rem; }
.bubbles span:nth-child(4), .bubbles span:nth-child(5) { display: none; }
.section > .container, .hero > .container { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .bubbles span { animation: floaty 9s ease-in-out infinite alternate; }
  .bubbles span:nth-child(2) { animation-duration: 7s; } .bubbles span:nth-child(4) { animation-duration: 11s; }
  @keyframes floaty { to { transform: translate(1.5rem, -1.5rem) scale(1.08); } }
}

/* ---------- Cards (light, not boxed-heavy) ---------- */
.card { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-soft); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.card h3 { margin-top: var(--space-2); }
.card--flat { box-shadow: none; border: 2px solid var(--color-line); }
.card--flat:hover { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .card, .card:hover { transition: none; transform: none; } }
.icon-bubble { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-secondary); display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.icon-bubble svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: var(--color-secondary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Steps (scroll storytelling) ---------- */
.steps { counter-reset: step; display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.step { position: relative; padding-top: var(--space-3); }
.steps--stack { grid-template-columns: 1fr; gap: var(--space-3); }
.steps--stack .step { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: auto auto; column-gap: var(--space-3); row-gap: 0; padding-top: 0; align-items: start; }
.steps--stack .step__num { grid-row: 1 / span 2; margin-bottom: 0; }
.steps--stack .step h3, .steps--stack .step p { grid-column: 2; }
.steps--stack .step h3 { margin-top: 0.4rem; margin-bottom: var(--space-1); }
.step__num { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-primary); color: var(--color-ink); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); display: grid; place-items: center; margin-bottom: var(--space-2); }

/* ---------- Stats ---------- */
.stat { text-align: center; }
.stat__num { font-family: var(--font-display); font-weight: 700; font-size: var(--text-4xl); line-height: 1; color: var(--color-secondary); }
.section--deep .stat__num, .section--photo .stat__num { color: var(--color-primary); }
.stat__label { font-weight: 700; margin-top: var(--space-1); }

/* ---------- Reveal on scroll (content always in DOM) ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 600ms var(--ease), transform 600ms var(--ease); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .reveal:nth-child(2) { transition-delay: 90ms; } .js .reveal:nth-child(3) { transition-delay: 180ms; } .js .reveal:nth-child(4) { transition-delay: 270ms; }
}

/* ---------- FAQ ---------- */
.faq details { border-bottom: 2px solid var(--color-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-lg); color: var(--color-secondary); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 2rem; height: 2rem; border-radius: 50%; background: var(--color-primary); color: var(--color-ink); display: grid; place-items: center; font-weight: 700; transition: transform var(--dur) var(--ease); }
.faq details[open] summary::after { content: "–"; transform: rotate(180deg); }
.faq details > div { padding-bottom: var(--space-3); max-width: 60ch; }

/* ---------- Wash menu ---------- */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price { font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); font-size: var(--text-lg); white-space: nowrap; }

.tier { position: relative; text-align: center; }
.tier__name { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-secondary); }
.tier__price { font-family: var(--font-display); font-weight: 700; font-size: var(--text-3xl); color: var(--color-secondary); line-height: 1; margin: var(--space-1) 0; }
.tier__price small { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--color-ink-soft); }

.tier ul { text-align: left; margin: var(--space-3) 0; list-style: none; padding: 0; }
.tier li { padding: 0.35rem 0 0.35rem 1.6rem; position: relative; border-bottom: 1px solid var(--color-line); }
.tier li::before { content: ""; position: absolute; left: 0; top: 0.75rem; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--color-primary); }
.tier--featured { outline: 3px solid var(--color-accent); padding-top: var(--space-5); }
.tier__badge { position: absolute; top: -0.9rem; left: 50%; transform: translateX(-50%); }
.tier__badge.eyebrow { margin: 0; white-space: nowrap; font-size: var(--text-xs); background: var(--color-accent); color: var(--color-secondary); padding: 0.3rem 0.9rem; border-radius: var(--radius-pill); letter-spacing: 0.08em; }
.tier__badge.eyebrow::before, .tier__badge.eyebrow::after { display: none; }

/* ---------- Location cards ---------- */

/* ---------- Placeholders (build phase only) ---------- */
.ph { display: grid; place-items: center; text-align: center; background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-deep) 100%); color: var(--color-primary-tint); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); border-radius: var(--radius-lg); padding: var(--space-3); min-height: 12rem; aspect-ratio: 4 / 3; }
.ph--wide { aspect-ratio: 16 / 9; }
.ph--square { aspect-ratio: 1; }

/* ---------- Map embed ---------- */
.map { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 2px solid var(--color-line); }
.map iframe { width: 100%; height: 100%; border: 0; }

/* ---------- Embed placeholder (forms) ---------- */
.embed-slot { border: 3px dashed var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-4); background: var(--color-bg-alt); text-align: center; }
.embed-slot strong { font-family: var(--font-display); color: var(--color-secondary); display: block; margin-bottom: var(--space-1); }
.form-embed { margin-top: var(--space-3); }
.form-privacy { font-size: var(--text-xs); margin-top: var(--space-2); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-secondary-deep); color: var(--color-bg); padding-block: var(--space-6) var(--space-4); }
.site-footer a { color: var(--color-bg); text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--color-accent); text-decoration: none; }
.footer-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding-bottom: var(--space-5); border-bottom: 1px solid rgba(255,255,255,0.15); }
.footer-logo { display: inline-block; background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-1); }
.footer-logo img { width: 6.5rem; height: auto; }
.footer-tag { flex: 1 1 14rem; }
.footer-tagline { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.footer-social { display: flex; gap: var(--space-2); }
.footer-social a { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: rgba(255,255,255,0.1); }
.footer-social a:hover, .footer-social a:focus-visible { background: var(--color-bg); color: var(--color-secondary); text-decoration: none; }
.footer-social svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.footer-cta { margin-left: auto; }
.footer-grid { display: grid; gap: var(--space-5); grid-template-columns: 1.6fr 1fr 1fr; padding-block: var(--space-5); }
.site-footer h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-2); }
.site-footer ul li { padding: 0.3rem 0; }
.site-footer address { font-style: normal; }
.footer-locs li { padding: 0.5rem 0; }
.footer-locs li + li { border-top: 1px solid rgba(255,255,255,0.1); }
.footer-locs strong { display: block; font-family: var(--font-display); font-size: var(--text-base); }
.footer-locs span { display: block; font-size: var(--text-base); color: var(--color-primary-tint); }
.footer-locs strong a { color: var(--color-bg); }
.footer-locs span a { color: var(--color-primary-tint); font-weight: 400; white-space: normal; }
.footer-locs span a[href^="tel:"] { white-space: nowrap; font-weight: 700; color: var(--color-bg); }
.footer-bottom { padding-top: var(--space-3); border-top: 1px solid rgba(255,255,255,0.15); font-size: var(--text-xs); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; color: var(--color-primary-tint); }
.footer-bottom a { color: var(--color-bg); text-decoration: underline; }
@media (max-width: 63.99rem) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-col--locations { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) { .footer-grid { grid-template-columns: 1fr; } .footer-cta { margin-left: 0; width: 100%; } }
/* ---------- Sticky mobile CTA bar ---------- */

/* ---------- Misc ---------- */

.badge-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.badge-row li { background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-pill); padding: 0.4rem 1rem; font-weight: 700; font-size: var(--text-base); color: var(--color-secondary); }

.tel { font-family: var(--font-display); font-weight: 600; text-decoration: none; }

/* ---------- Legal pages ---------- */
.legal { max-width: 46rem; }
.legal h2 { font-size: var(--text-xl); margin-top: var(--space-5); }
.legal ul { list-style: disc; padding-left: 1.4rem; margin: 0 0 var(--space-2); }
.legal li { margin-bottom: 0.4rem; }
.legal a { overflow-wrap: anywhere; }
/* Build-phase marker for a legal placeholder we could not fill from intake. Must not ship. */
mark.todo { background: var(--color-accent); color: var(--color-secondary); font-weight: 700; padding: 0 0.3em; border-radius: var(--radius-sm); }

/* ---------- Photos (added 2026-09-04 with the real Ontario set) ---------- */
.photo { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-secondary-deep); box-shadow: var(--shadow-soft); }
.photo img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.photo--tall img { aspect-ratio: 3 / 4; }

.card--photo { padding: 0; overflow: hidden; }
.card--photo img, .card--photo .ph { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 0; min-height: 0; }
.card__body { padding: var(--space-4); }
.card--photo h3 { margin-top: 0; }
.card__body .icon-bubble { margin-top: calc(-1 * var(--space-4) - 1.75rem); position: relative; box-shadow: var(--shadow-soft); background: var(--color-bg); margin-bottom: var(--space-2); }

/* Section with a photo behind it (dark overlay, white text) */
.section--photo { position: relative; isolation: isolate; color: var(--color-bg); overflow: hidden; }
.section--photo .bg { position: absolute; inset: 0; z-index: -2; }
.section--photo .bg img { width: 100%; height: 100%; object-fit: cover; }
.section--photo .bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,58,99,0.86), rgba(0,58,99,0.92)); }
.section--photo h1, .section--photo h2, .section--photo h3, .section--photo p { color: var(--color-bg); }
.section--photo a { color: var(--color-bg); }
.section--photo .fine { color: var(--color-primary-tint); }
.section--photo .btn--secondary { color: var(--color-bg); border-color: var(--color-bg); }
.section--photo .btn--secondary:hover, .section--photo .btn--secondary:focus-visible { background: var(--color-bg); color: var(--color-secondary); }
.section--photo :focus-visible { outline-color: var(--color-focus); }

/* Split layout with a slightly tilted photo pair */
.split { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }

.photo-grid { display: grid; gap: var(--space-2); grid-template-columns: repeat(3, 1fr); }
.photo-grid .photo { position: relative; min-height: 12rem; }
.photo-grid .photo img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
.photo-grid .photo:first-child { grid-column: span 2; aspect-ratio: 8 / 5; }
.photo-grid .photo--banner { grid-column: span 3; aspect-ratio: 21 / 8; }
@media (max-width: 47.99rem) { .photo-grid { grid-template-columns: 1fr 1fr; } .photo-grid .photo:first-child { grid-column: span 2; } }

/* ==========================================================================
   LIVELINESS PASS (2026-09-04) — sunny hero, ticker, photo strip, waves, highlights
   ========================================================================== */

/* Marker highlight for one or two key words */
.hl { background: var(--color-accent); color: var(--color-secondary); padding: 0 0.25em; border-radius: 0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---- Sunny hero: sky gradient, navy type, photo collage ---- */
.hero--sunny { background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-primary-tint) 45%, var(--color-primary) 100%); color: var(--color-ink); }
.hero--sunny .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-5); align-items: center; min-height: min(84vh, 48rem); padding-block: var(--space-6); }
.hero--sunny h1 { color: var(--color-secondary); }
.hero--sunny .lead, .hero--sunny .hero__note { color: var(--color-ink); }
.hero--sunny .eyebrow { color: var(--color-secondary); }
.hero--sunny a:not(.btn) { color: var(--color-secondary); }
.hero--sunny .btn--secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
.hero--sunny .btn--secondary:hover, .hero--sunny .btn--secondary:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
.hero--sunny :focus-visible { outline-color: var(--color-secondary); }
.hero--sunny .bubbles span { background: radial-gradient(circle, rgba(255,255,255,0.55), rgba(255,255,255,0) 70%); }

@media (prefers-reduced-motion: no-preference) {
  
  
  
  @keyframes bob { to { translate: 0 -0.75rem; } }
}
@media (max-width: 63.99rem) {
  .hero--sunny .container { grid-template-columns: 1fr; min-height: 0; }
  
}

/* ---- Ticker ---- */

@keyframes ticker { to { transform: translateX(-50%); } }

/* ---- Photo strip ---- */
.strip { overflow: hidden; padding-block: var(--space-2) var(--space-7); background: var(--color-bg); }
@media (max-width: 47.99rem) { .strip { padding-bottom: var(--space-6); } }
.strip__track { display: flex; gap: var(--space-2); width: max-content; }
.strip__track .photo { flex: none; width: clamp(14rem, 26vw, 22rem); box-shadow: none; }
.strip__track .photo:nth-child(odd) { transform: rotate(-1deg); }
.strip__track .photo:nth-child(even) { transform: rotate(1deg) translateY(0.5rem); }
@media (prefers-reduced-motion: no-preference) { .strip__track { animation: strip 55s linear infinite; } .strip:hover .strip__track, .strip:focus-within .strip__track { animation-play-state: paused; } }
@media (prefers-reduced-motion: reduce) { .strip { overflow-x: auto; } .strip__track .photo { transform: none; } }
@keyframes strip { to { transform: translateX(-50%); } }

/* ---- Bubble Blue sections: ink/navy type only ---- */

/* ---- Wave dividers ---- */

/* ---- Hover life ---- */
.card--photo img { transition: transform 600ms var(--ease); }
.card--photo:hover img { transform: scale(1.04); }
.btn--primary .arrow { display: inline-block; transition: transform var(--dur) var(--ease); }
.btn--primary:hover .arrow, .btn--primary:focus-visible .arrow { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .card--photo img, .card--photo:hover img { transition: none; transform: none; } }

/* ---- Big statement type ---- */

/* ---------- Landing shell: Free Wash + Thank You (no header, no footer) ---------- */
.landing { min-height: 100vh; display: grid; align-content: start; justify-items: center; row-gap: var(--space-2); text-align: center; padding: var(--space-5) var(--gutter) var(--space-6); background: linear-gradient(160deg, var(--color-secondary-deep) 0%, var(--color-secondary) 45%, var(--color-primary) 100%); color: var(--color-bg); position: relative; overflow: hidden; isolation: isolate; }
.landing > * { position: relative; z-index: 1; max-width: 40rem; width: 100%; }
.landing h1 { color: var(--color-bg); font-size: var(--text-4xl); margin: var(--space-2) 0 var(--space-1); }
.landing .lead { color: var(--color-primary-tint); max-width: 32rem; margin-inline: auto; }
.landing__pill { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-bg); border: 2px solid rgba(255,255,255,0.45); border-radius: var(--radius-pill); padding: 0.4rem 1rem; }
.landing__card { background: var(--color-bg); color: var(--color-ink); border-radius: var(--radius-lg); padding: var(--space-4); margin-top: var(--space-4); box-shadow: var(--shadow-lift); text-align: center; }
.landing__card img { margin-inline: auto; width: 11rem; height: auto; }
.landing__card .embed-slot { margin-top: var(--space-3); }
.landing__card .form-privacy { border-top: 1px solid var(--color-line); padding-top: var(--space-2); margin-top: var(--space-3); }
.landing__card a { color: var(--color-secondary); }
.landing__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3) var(--space-4); margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700; }
.landing__chips li { display: inline-flex; align-items: center; gap: 0.6rem; }
.landing__chips .icon-bubble { width: 2.5rem; height: 2.5rem; background: rgba(255,255,255,0.14); color: var(--color-bg); }
.landing__chips .icon-bubble svg { stroke: var(--color-bg); width: 1.2rem; height: 1.2rem; }
.landing__back { margin-top: var(--space-4); font-family: var(--font-display); font-weight: 700; color: var(--color-bg); text-decoration: none; }
.landing__back:hover, .landing__back:focus-visible { color: var(--color-accent); text-decoration: none; }
.landing :focus-visible { outline-color: var(--color-focus); }
.landing .bubbles span { background: radial-gradient(circle, rgba(26,177,234,0.5), rgba(26,177,234,0) 70%); }
@media (max-width: 47.99rem) { .landing { padding-top: var(--space-4); } .landing__card { padding: var(--space-3); } }

/* ---------- Big photo CTA: the photo shows through, text sits on the dark side ---------- */
.section--cta { min-height: 34rem; display: flex; align-items: center; padding-block: var(--space-7); text-align: center; }
.section--cta .bg::after { background: radial-gradient(ellipse at 50% 55%, rgba(0,58,99,0.86) 0%, rgba(0,58,99,0.74) 55%, rgba(0,58,99,0.62) 100%); }
.section--cta .bg img { filter: saturate(1.15); }
.section--cta .container { display: flex; flex-direction: column; align-items: center; }
.section--cta h2 { font-size: var(--text-5xl); letter-spacing: -0.03em; max-width: 16ch; margin-inline: auto; }
.section--cta .lead { max-width: 32rem; margin-inline: auto; color: var(--color-primary-tint); }
.section--cta .cluster { margin-top: var(--space-3); justify-content: center; }
.section--cta .fine { margin-top: var(--space-3); }
@media (max-width: 47.99rem) {
  .section--cta { min-height: 0; padding-block: var(--space-6); }
  .section--cta .bg::after { background: rgba(0,58,99,0.84); }
}

/* ---------- Trust bar: slim, white, icon + label ---------- */
.trust-bar { background: var(--color-bg); border-bottom: 1px solid var(--color-line); padding-block: var(--space-3); }
.trust-bar ul { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.trust-bar li { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); font-size: var(--text-base); line-height: 1.2; }
.trust-bar .icon-bubble { width: 2.75rem; height: 2.75rem; flex: none; }
.trust-bar .icon-bubble svg { width: 1.3rem; height: 1.3rem; }
.trust-bar small { display: block; font-family: var(--font-body); font-weight: 400; color: var(--color-ink-soft); font-size: var(--text-xs); }
@media (max-width: 63.99rem) { .trust-bar ul { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 47.99rem) { .trust-bar ul { grid-template-columns: 1fr; gap: var(--space-2); } .trust-bar small { display: inline; margin-left: 0.35rem; } .trust-bar small::before { content: "· "; } }

/* ---------- Hero with a light full-bleed photo (replaces the collage) ---------- */
.hero--bg .container { display: block; max-width: none; width: min(100% - 2 * var(--gutter), var(--container)); min-height: min(84vh, 46rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.hero--bg .hero__media { z-index: -2; }
.hero--bg .hero__media img { object-position: 72% 10%; filter: none; } /* anchor near the top so the subject's face never crops out on short viewports */
.hero--bg .hero__overlay { z-index: -1; background: linear-gradient(90deg, rgba(234,247,253,0.97) 0%, rgba(234,247,253,0.94) 34%, rgba(234,247,253,0.72) 50%, rgba(234,247,253,0.15) 68%, rgba(234,247,253,0) 100%); }
.hero--bg .hero__copy { max-width: 34rem; }
.hero--bg h1 { color: var(--color-secondary); }
.hero--bg .lead, .hero--bg .hero__note { color: var(--color-ink); }
.hero--bg .bubbles { display: none; }
@media (max-width: 63.99rem) {
  /* Small screens: the photo stays full-bleed. Her face sits in the clear top half; the copy sits at the bottom over a navy fade. */
  .hero--bg .container { min-height: min(92vh, 46rem); justify-content: flex-end; padding-block: var(--space-6) var(--space-5); }
  .hero--bg .hero__media img { object-position: 58% 0%; }
  .hero--bg .hero__overlay { background: linear-gradient(180deg, rgba(0,58,99,0) 22%, rgba(0,58,99,0.55) 42%, rgba(0,58,99,0.90) 62%, rgba(0,58,99,0.96) 100%); }
  .hero--bg .hero__copy { max-width: none; }
  .hero--bg h1 { color: var(--color-bg); }
  .hero--bg .lead, .hero--bg .hero__note { color: var(--color-primary-tint); }
  .hero--bg .eyebrow { color: var(--color-primary); }
  .hero--bg .btn--secondary { color: var(--color-bg); border-color: var(--color-bg); }
  .hero--bg .btn--secondary:hover, .hero--bg .btn--secondary:focus-visible { background: var(--color-bg); color: var(--color-secondary); }
  .hero--bg :focus-visible { outline-color: var(--color-focus); }
  .hero--bg .hero__note strong { color: var(--color-bg); }
}

/* <picture> wrappers inside full-bleed media must fill the box, or the img's 100% height collapses to its natural ratio */
.hero__media picture, .section--photo .bg picture { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   MOTION PASS (2026-09-04) — bubbles, entrances, hover life. All off under prefers-reduced-motion.
   ========================================================================== */

/* ---- Rising bubbles (decorative, aria-hidden) ---- */
.bubble-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bubble-field i { position: absolute; bottom: -10%; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.18) 18%, rgba(255,255,255,0.04) 55%, rgba(255,255,255,0.02) 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); opacity: 0; }
.hero--sunny .bubble-field i { background: radial-gradient(circle at 32% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.3) 18%, rgba(26,177,234,0.05) 55%, rgba(26,177,234,0.02) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45); }
@media (prefers-reduced-motion: no-preference) {
  .bubble-field i { animation: bubble-rise var(--d) linear infinite; animation-delay: var(--t); }
  @keyframes bubble-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
    8%   { opacity: 0.45; }
    50%  { transform: translate3d(var(--drift), -60vh, 0) scale(1); }
    92%  { opacity: 0.4; }
    100% { transform: translate3d(calc(var(--drift) * -0.6), -120vh, 0) scale(1.05); opacity: 0; }
  }
}
@media (prefers-reduced-motion: reduce) { .bubble-field i { opacity: 0.2; bottom: var(--rest, 30%); } }
.hero > .container, .section > .container, .landing > * { position: relative; z-index: 1; }

/* ---- Hero entrance ---- */
@media (prefers-reduced-motion: no-preference) {
  .hero__copy > * { opacity: 0; transform: translateY(1.25rem); animation: rise-in 700ms var(--ease) forwards; }
  .hero__copy > :nth-child(1) { animation-delay: 60ms; } .hero__copy > :nth-child(2) { animation-delay: 160ms; }
  .hero__copy > :nth-child(3) { animation-delay: 300ms; } .hero__copy > :nth-child(4) { animation-delay: 440ms; }
  .hero__copy > :nth-child(5) { animation-delay: 560ms; }
  @keyframes rise-in { to { opacity: 1; transform: none; } }
  .hero h1 .hl { background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat 0 0 / 0% 100%; animation: sweep 600ms 700ms var(--ease) forwards; }
  @keyframes sweep { to { background-size: 100% 100%; } }
  .hero__media img { animation: hero-zoom 8s var(--ease) both; }
  @keyframes hero-zoom { from { transform: scale(1.06); } to { transform: scale(1); } }
}

/* ---- Buttons: shine sweep on hover ---- */
.btn--primary { position: relative; overflow: hidden; }
.btn--primary::before { content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%); transform: skewX(-20deg); transition: left 600ms var(--ease); pointer-events: none; }
.btn--primary:hover::before, .btn--primary:focus-visible::before { left: 120%; }
.btn--primary > * { position: relative; }
@media (prefers-reduced-motion: reduce) { .btn--primary::before { display: none; } }

/* ---- Mascot wiggle on hover ---- */
@media (prefers-reduced-motion: no-preference) {
  .brand:hover img, .brand:focus-visible img, .footer-logo:hover img { animation: wiggle 700ms var(--ease); transform-origin: 50% 80%; }
  @keyframes wiggle { 0%,100% { rotate: 0deg; } 25% { rotate: -5deg; } 55% { rotate: 4deg; } 80% { rotate: -2deg; } }
}

/* ---- Header shrinks once you scroll ---- */
.site-header, .site-header .container, .brand picture img { transition: min-height var(--dur) var(--ease), height var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.site-header.is-scrolled .container { min-height: 4.25rem; }
.site-header.is-scrolled .brand picture img { height: 3.5rem; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(0,85,142,0.12); }

/* ---- Cards tilt toward the pointer (JS sets --rx/--ry) ---- */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0)); transition: transform 220ms var(--ease), box-shadow var(--dur) var(--ease); will-change: transform; }
.tilt:hover { --lift: -4px; }
@media (prefers-reduced-motion: reduce), (pointer: coarse) { .tilt { transform: none !important; } }

/* ---- Step numbers pop, FAQ answers slide ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal.is-visible .step__num { animation: pop 600ms var(--ease) both; }
  @keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
  .faq details[open] > div { animation: fade-slide 320ms var(--ease) both; }
  @keyframes fade-slide { from { opacity: 0; transform: translateY(-0.4rem); } to { opacity: 1; transform: none; } }
  .faq summary::after { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .faq summary:hover::after { background: var(--color-secondary); color: var(--color-bg); }
  .trust-bar .icon-bubble, .fact-list .icon-bubble, .card__body .icon-bubble { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .trust-bar li:hover .icon-bubble, .fact-list li:hover .icon-bubble, .card:hover .icon-bubble { transform: scale(1.12) rotate(-6deg); background: var(--color-primary); }
  .trust-bar li:hover .icon-bubble svg, .fact-list li:hover .icon-bubble svg, .card:hover .icon-bubble svg { stroke: var(--color-ink); }
  .site-nav a { transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .site-nav a:hover { transform: translateY(-2px); }
  .badge-row li { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .badge-row li:hover { transform: translateY(-2px); }
  .footer-social a { transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease); }
  .footer-social a:hover { transform: translateY(-3px) rotate(-6deg); }
  .photo img { transition: transform 700ms var(--ease); }
  .photo:hover img { transform: scale(1.04); }
}

/* ---------- Membership feature: navy stage, big photo, floating badge ---------- */
.club-feature { position: relative; overflow: hidden; }
.club-feature .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.club-feature h2 { font-size: var(--text-4xl); }
.club-feature .lead { color: var(--color-primary-tint); }
.club-feature .perks { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.club-feature .perks li { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); }
.club-feature .perks .icon-bubble { width: 2.75rem; height: 2.75rem; background: var(--color-primary); flex: none; }
.club-feature .perks .icon-bubble svg { stroke: var(--color-ink); width: 1.3rem; height: 1.3rem; }
.club-feature .fine { color: var(--color-primary-tint); }
.club-stage { position: relative; padding: var(--space-4) var(--space-3) var(--space-5); }
.club-stage::before { content: ""; position: absolute; inset: 8% -6% 4% 6%; border-radius: 50% 40% 55% 45% / 50% 50% 45% 55%; background: radial-gradient(circle at 40% 40%, var(--color-primary), var(--color-secondary) 85%); opacity: 0.9; }
.club-stage .photo { position: relative; transform: rotate(-3deg); box-shadow: var(--shadow-lift); border: 6px solid var(--color-bg); border-radius: var(--radius-lg); max-width: 26rem; margin-inline: auto; }
.club-stage .photo img { aspect-ratio: 4 / 5; }
.club-stage .badge { position: absolute; right: 2%; top: 4%; background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); line-height: 1; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); transform: rotate(6deg); text-align: center; z-index: 2; }
.club-stage .badge small { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); margin-top: 0.25rem; }
.club-stage .badge--b { right: auto; left: 0; top: auto; bottom: 6%; background: var(--color-bg); color: var(--color-secondary); transform: rotate(-5deg); font-size: var(--text-lg); }
@media (prefers-reduced-motion: no-preference) {
  .club-stage .badge { animation: bob 5s ease-in-out infinite alternate; }
  .club-stage .badge--b { animation-duration: 6.5s; animation-direction: alternate-reverse; }
  .club-stage::before { animation: blob 14s ease-in-out infinite alternate; }
  @keyframes blob { to { border-radius: 45% 55% 40% 60% / 55% 45% 60% 40%; transform: rotate(6deg) scale(1.04); } }
}
@media (max-width: 63.99rem) { .club-feature .split { grid-template-columns: 1fr; } .club-stage { max-width: 28rem; margin-inline: auto; } }

/* ---------- Join the Team page ---------- */
.perk-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

/* Buttons never inherit link hover styles from their section (footer, photo sections, landing card) */
.site-footer a.btn, .site-footer a.btn:hover, .site-footer a.btn:focus-visible,
.section--photo a.btn--primary, .section--photo a.btn--primary:hover, .section--photo a.btn--primary:focus-visible,
.landing a.btn--primary, .landing a.btn--primary:hover, .landing a.btn--primary:focus-visible,
.hero a.btn--primary, .hero a.btn--primary:hover, .hero a.btn--primary:focus-visible { text-decoration: none; color: var(--color-bg); }
a.btn:hover, a.btn:focus-visible { text-decoration: none; }

/* ---------- Brand swoosh background (matches the pay stations and Patheon checkout) ----------
   The blue and red areas do not give text enough contrast, so copy on these sections lives in white panels. */
.bg-swoosh { background-color: var(--color-primary); background-image: url("/images/brand/swoosh-1758.jpg"); background-image: image-set(url("/images/brand/swoosh-1758.webp") type("image/webp"), url("/images/brand/swoosh-1758.jpg") type("image/jpeg")); background-size: cover; background-position: center; background-repeat: no-repeat; }
.panel { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-soft); }
.panel--center { text-align: center; }
.section.bg-swoosh .section-head { margin-inline: auto; }
.section.bg-swoosh .bubbles, .section.bg-swoosh .bubble-field { display: none; }

/* Landing pages on the swoosh: everything readable lives in the card or in white pills */
.landing.bg-swoosh { background-color: var(--color-primary); }
.landing.bg-swoosh .bubbles, .landing.bg-swoosh .bubble-field { display: none; }
.landing.bg-swoosh .landing__card { margin-top: 0; }
.landing.bg-swoosh .landing__card h1 { color: var(--color-secondary); margin-top: var(--space-2); }
.landing.bg-swoosh .landing__card .lead { color: var(--color-ink); }
.landing.bg-swoosh .landing__pill { color: var(--color-secondary); border-color: var(--color-line); background: var(--color-bg-alt); }
.landing.bg-swoosh .landing__chips li { background: var(--color-bg); color: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.4rem 1rem 0.4rem 0.4rem; box-shadow: var(--shadow-soft); }
.landing.bg-swoosh .landing__chips .icon-bubble { background: var(--color-bg-alt); color: var(--color-secondary); }
.landing.bg-swoosh .landing__chips .icon-bubble svg { stroke: var(--color-secondary); }
.landing.bg-swoosh .landing__back { background: var(--color-bg); color: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.75rem 1.25rem; box-shadow: var(--shadow-soft); }
.landing.bg-swoosh .landing__back:hover, .landing.bg-swoosh .landing__back:focus-visible { color: var(--color-bg); background: var(--color-secondary); }
.landing.bg-swoosh :focus-visible { outline-color: var(--color-secondary); }

/* ---------- Photo CTA: no gradient over the photo; copy sits in a frosted navy card ---------- */
.section--cta .bg::after { background: none; }
.section--cta .bg img { filter: saturate(1.1); }
.section--cta .container { background: rgba(0, 58, 99, 0.80); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.18); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); max-width: 52rem; box-shadow: var(--shadow-lift); }
.section--cta .bubble-field { display: none; }
@media (max-width: 47.99rem) { .section--cta .container { padding: var(--space-5) var(--space-3); } }
.steps--stack .step:last-child { margin-bottom: 0; }
.plan-cta { padding-left: calc(3.5rem + var(--space-3)); }
@media (max-width: 47.99rem) { .plan-cta { padding-left: 0; } }

/* ==========================================================================
   LOCATION FINDER — one tap to your wash. Works as stacked panels without JS.
   ========================================================================== */
.finder { display: grid; gap: var(--space-4); }
.finder__tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.finder__tab { display: grid; gap: 0.15rem; text-align: left; background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--color-secondary); min-width: 14rem; cursor: pointer; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.finder__tab:hover { transform: translateY(-2px); border-color: var(--color-primary); }
.finder__tab[aria-selected="true"] { border-color: var(--color-secondary); box-shadow: var(--shadow-soft); }
.finder__tab small { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); color: var(--color-ink-soft); }
.finder__tab .is-open { color: var(--color-open); }   /* status green, 4.6:1 on white — status is also spelled out in words */
.finder__tab .is-closed { color: var(--color-cta); }
.finder__locate { display: inline-flex; align-items: center; gap: 0.5rem; background: none; border: 0; padding: 0.5rem 0; font-family: var(--font-display); font-weight: 700; color: var(--color-secondary); cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em; }
.finder__locate:hover { color: var(--color-ink); }

.finder__panel { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--color-bg); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.finder__panel + .finder__panel { margin-top: var(--space-4); }
.js .finder__panel[hidden] { display: none; }
.finder__photo { position: relative; min-height: 18rem; }
.finder__photo img, .finder__photo .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; min-height: 0; }
.finder__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: start; }
.finder__body h3 { font-size: var(--text-2xl); margin: 0; }
.finder__status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; }
.finder__status::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: currentColor; }
.finder__facts { display: grid; gap: var(--space-2); }
.finder__facts li { display: flex; gap: var(--space-2); align-items: flex-start; }
.finder__facts .icon-bubble { width: 2.5rem; height: 2.5rem; flex: none; }
.finder__facts .icon-bubble svg { width: 1.2rem; height: 1.2rem; }
.finder__facts address { font-style: normal; }
.finder__facts a { text-decoration: none; font-weight: 700; }
.finder__facts a:hover { text-decoration: underline; }
.finder__facts .fine { display: block; }
.finder__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 63.99rem) { .finder__panel { grid-template-columns: 1fr; } .finder__photo { min-height: 14rem; aspect-ratio: 16 / 9; } .finder__body { padding: var(--space-4); } .finder__tab { min-width: 0; flex: 1 1 10rem; } }
@media (prefers-reduced-motion: no-preference) { .js .finder__panel:not([hidden]) { animation: rise-in 400ms var(--ease) both; } }

/* ---------- Location finder v2: selectors stacked beside the card, nothing pre-selected ---------- */
.finder { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); align-items: start; gap: var(--space-4); }
.finder__tabs { flex-direction: column; justify-content: flex-start; align-items: stretch; }
.finder__tab { min-width: 0; width: 100%; }
.finder__stage { min-height: 100%; }
.finder__panel { grid-template-columns: 1fr; }
.finder__panel + .finder__panel { margin-top: 0; }
.finder__photo { aspect-ratio: 21 / 9; min-height: 0; }
.finder__body { grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: var(--space-5); }
.finder__body h3, .finder__status { grid-column: 1 / -1; }
.finder__actions { flex-direction: column; align-items: stretch; }
.finder__actions .btn { justify-content: center; }
.finder__empty { border-radius: var(--radius-lg); overflow: hidden; min-height: 26rem; display: grid; place-items: center; padding: var(--space-5); box-shadow: var(--shadow-soft); }
.finder__empty .panel { max-width: 28rem; text-align: center; }
.finder__empty h3 { margin-top: 0; }
.finder__locate { display: inline-flex; margin-top: var(--space-2); text-decoration: none; background: var(--color-bg-alt); border-radius: var(--radius-pill); padding: 0.6rem 1.1rem; }
.finder__locate:hover, .finder__locate:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
.finder__result { display: block; margin-top: var(--space-2); font-size: var(--text-base); color: var(--color-ink); min-height: 1.5rem; }
.js .finder__empty[hidden] { display: none; }
@media (max-width: 63.99rem) {
  .finder { grid-template-columns: 1fr; }
  .finder__tabs { flex-direction: row; flex-wrap: wrap; }
  .finder__tab { flex: 1 1 10rem; width: auto; }
  .finder__body { grid-template-columns: 1fr; }
  .finder__empty { min-height: 0; }
}

/* Anchored sections land below the sticky header */
section[id], [id^="panel-"], #manage, #plans, #apply, #careers, #menu, #message { scroll-margin-top: 7rem; }

/* ---------- Location finder v3: photo beside the details so the card stays short ---------- */
.finder { align-items: stretch; }
.finder__stage { display: grid; }
.finder__panel { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); height: 100%; }
.finder__photo { aspect-ratio: auto; min-height: 16rem; }
.finder__body { grid-template-columns: 1fr; padding: var(--space-4) var(--space-5); gap: var(--space-2); }
.finder__body h3 { font-size: var(--text-xl); }
.finder__facts { gap: var(--space-1); }
.finder__facts .icon-bubble { width: 2.25rem; height: 2.25rem; }
.finder__facts .icon-bubble svg { width: 1.1rem; height: 1.1rem; }
.finder__actions { flex-direction: row; align-items: center; margin-top: var(--space-1); }
.finder__actions .btn { --btn-pad-y: 0.7rem; --btn-pad-x: 1.25rem; --btn-size: 0.95rem; min-height: 2.75rem; }
.finder__empty { min-height: 0; height: 100%; }
@media (max-width: 63.99rem) {
  .finder__panel { grid-template-columns: 1fr; height: auto; }
  .finder__photo { aspect-ratio: 16 / 9; min-height: 0; }
  .finder__actions { flex-direction: column; align-items: stretch; }
}
/* Selected location: unmistakable */
.finder__tab[aria-selected="true"] { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-bg); }
.finder__tab[aria-selected="true"] small { color: var(--color-primary-tint); }
.finder__tab[aria-selected="true"] .is-open { color: var(--color-open-on-dark); }
.finder__tab[aria-selected="true"] .is-closed { color: var(--color-accent); }
.utility-bar .member-links a.is-join:hover, .utility-bar .member-links a.is-join:focus-visible { color: var(--color-bg); }

/* ---------- Mobile header, tidied ---------- */
@media (max-width: 63.99rem) {
  .site-header .container { min-height: 4.5rem; gap: var(--space-2); }
  .brand picture img { height: 3rem; }
  .header-cta { margin-left: auto; }
  .header-cta .long { display: none; }
  .nav-toggle { margin-left: 0; order: 3; }
  .utility-bar .member-links { gap: var(--space-3); }
  .utility-bar .member-links a { font-size: var(--text-xs); letter-spacing: 0.02em; }
  .utility-bar .container { min-height: 2.25rem; }
}

/* Mobile finder: three selectors on one row */
@media (max-width: 63.99rem) {
  .finder__tabs { flex-wrap: nowrap; gap: var(--space-1); }
  .finder__tab { flex: 1 1 0; min-width: 0; text-align: center; justify-items: center; padding: var(--space-2) var(--space-1); font-size: var(--text-base); border-radius: var(--radius-md); }
  .finder__tab small { font-size: var(--text-xs); line-height: 1.25; }
}

/* ---------- Photo strip on phones: swipe one photo at a time ---------- */
@media (max-width: 47.99rem) {
  .strip { overflow: visible; padding-inline: var(--gutter); }
  .strip__track { animation: none !important; width: auto; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--space-2); padding-bottom: var(--space-1); }
  .strip__track::-webkit-scrollbar { display: none; }
  .strip__track .photo { flex: 0 0 88%; width: auto; scroll-snap-align: center; transform: none; }
  .strip__track .photo[aria-hidden="true"] { display: none; }
  .strip__track:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 4px; }
}

/* Mobile: bigger logo; hero copy sits higher */
@media (max-width: 63.99rem) {
  .site-header .container { min-height: 5rem; }
  .brand picture img { height: 3.75rem; }
  .hero--bg .container { min-height: min(82vh, 40rem); padding-bottom: var(--space-6); }
  .hero--bg .hero__overlay { background: linear-gradient(180deg, rgba(0,58,99,0) 14%, rgba(0,58,99,0.55) 32%, rgba(0,58,99,0.90) 50%, rgba(0,58,99,0.96) 100%); }
}
@media (max-width: 63.99rem) { .hero--bg .eyebrow { color: var(--color-bg); text-shadow: 0 1px 8px rgba(0,58,99,0.6); } .hero--bg .eyebrow::before { background: var(--color-accent); } }
.strip__controls { text-align: center; margin: var(--space-2) 0 0; }
.strip__pause { background: var(--color-bg); border: 2px solid var(--color-line); color: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.45rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); }
.strip__pause:hover, .strip__pause:focus-visible { border-color: var(--color-secondary); }
.strip.is-paused .strip__track { animation-play-state: paused; }

/* ---------- Mobile hero: same light treatment as desktop ---------- */
@media (max-width: 63.99rem) {
  .hero--bg .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 10%, rgba(234,247,253,0.72) 26%, rgba(234,247,253,0.95) 42%, rgba(234,247,253,0.98) 100%); }
  .hero--bg h1 { color: var(--color-secondary); }
  .hero--bg .lead, .hero--bg .hero__note { color: var(--color-ink); }
  .hero--bg .hero__note strong { color: var(--color-ink); }
  .hero--bg .eyebrow { color: var(--color-secondary); text-shadow: none; }
  .hero--bg .eyebrow::before { background: var(--color-primary); }
  .hero--bg .btn--secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
  .hero--bg .btn--secondary:hover, .hero--bg .btn--secondary:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
  .hero--bg :focus-visible { outline-color: var(--color-secondary); }
}

/* Mobile hero: more of the photo, fade only where the copy needs it */
@media (max-width: 63.99rem) {
  .hero--bg .container { min-height: min(96vh, 48rem); padding-bottom: var(--space-5); }
  .hero--bg .hero__media img { object-position: 60% 8%; }
  .hero--bg .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 36%, rgba(234,247,253,0.62) 48%, rgba(234,247,253,0.92) 60%, rgba(234,247,253,0.98) 100%); }
}
@media (max-width: 63.99rem) {
  .hero--bg .eyebrow { background: rgba(255,255,255,0.88); padding: 0.35rem 0.75rem 0.35rem 0.6rem; border-radius: var(--radius-pill); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
@media (max-width: 63.99rem) {
  .hero--bg .container { min-height: min(88vh, 44rem); padding-bottom: var(--space-6); }
  .hero--bg .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 28%, rgba(234,247,253,0.62) 40%, rgba(234,247,253,0.92) 52%, rgba(234,247,253,0.98) 100%); }
}

/* ---------- Location pages ---------- */

.open-status { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--color-ink); }
.open-status::before { content: ""; width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--color-ink-soft); flex: none; }
.open-status.is-open { color: var(--color-open); } .open-status.is-open::before { background: var(--color-open); }
.open-status.is-closed { color: var(--color-cta); } .open-status.is-closed::before { background: var(--color-cta); }
.facts-bar a { text-decoration: none; color: var(--color-secondary); }
.facts-bar a:hover, .facts-bar a:focus-visible { text-decoration: underline; }
.facts-bar .btn { --btn-pad-y: 0.6rem; --btn-pad-x: 1.1rem; --btn-size: 0.95rem; min-height: 2.5rem; }
.facts-bar li:last-child { justify-content: flex-end; }
@media (max-width: 63.99rem) { .facts-bar li:last-child { justify-content: flex-start; } }
.section.bg-swoosh .tier { box-shadow: var(--shadow-lift); }
.section.bg-swoosh .badge-row li { box-shadow: var(--shadow-soft); border-color: transparent; }
.club-stage .photo .ph { aspect-ratio: 4 / 5; border-radius: 0; }
.facts-bar small.open-status { display: inline-flex; }
@media (max-width: 47.99rem) { .facts-bar small.open-status { display: flex; margin-left: 0; } .facts-bar small.open-status::before { content: ""; } }
.tier .btn--block { margin-top: auto; }
/* Tier cards: equal height, button pinned to the bottom */

.tier { display: flex; flex-direction: column; }
.tier ul { flex: 1 1 auto; }

/* ==========================================================================
   WASH MENU v2 — one price at a time, full lists, calm background
   ========================================================================== */
.menu { padding-block: 0 var(--section-pad); background: var(--color-bg-alt); }

.price-toggle { display: inline-flex; background: var(--color-bg); border: 2px solid var(--color-line); border-radius: var(--radius-pill); padding: 0.25rem; gap: 0.25rem; margin-top: var(--space-3); }
.price-toggle button { border: 0; background: transparent; color: var(--color-secondary); font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); padding: 0.6rem 1.25rem; border-radius: var(--radius-pill); cursor: pointer; }
.price-toggle button[aria-pressed="true"] { background: var(--color-secondary); color: var(--color-bg); }
.price-toggle button:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }

.plan { display: flex; flex-direction: column; text-align: left; padding: var(--space-4); }

/* Without JS both prices show; with JS the toggle hides the inactive one */

.plan .btn { margin-top: auto; }
.plan.tier--featured { padding-top: var(--space-5); }

@media (max-width: 47.99rem) { .price-toggle { width: 100%; } .price-toggle button { flex: 1; } }
.plan { position: relative; }

/* ==========================================================================
   LOCATION HERO v3 — brand swoosh, copy in a white panel, framed location photo
   ========================================================================== */
.loc-hero2 { padding-block: var(--space-6); }
.loc-hero2 .split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-5); align-items: center; }
.loc-hero2 .panel { padding: var(--space-5); }
.loc-hero2 h1 { font-size: var(--text-4xl); margin-top: var(--space-1); }
.loc-hero2 .lead { color: var(--color-ink); }
.loc-frame { position: relative; padding: var(--space-3) var(--space-2) var(--space-4); }
.loc-frame .photo { border: 8px solid var(--color-bg); box-shadow: var(--shadow-lift); transform: rotate(2deg); }
.loc-frame .photo img, .loc-frame .photo .ph { aspect-ratio: 4 / 3; border-radius: 0; }
.loc-frame .badge { position: absolute; left: -0.5rem; bottom: 0.5rem; background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); line-height: 1.05; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); transform: rotate(-4deg); z-index: 2; }
.loc-frame .badge small { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); }
@media (prefers-reduced-motion: no-preference) { .loc-frame .badge { animation: bob 5s ease-in-out infinite alternate; } }
@media (max-width: 63.99rem) { .loc-hero2 .split { grid-template-columns: 1fr; } .loc-hero2 .panel { padding: var(--space-4); } .loc-frame { max-width: 30rem; margin-inline: auto; } .loc-hero2 h1 { font-size: var(--text-3xl); } }

/* ==========================================================================
   WASH MENU v3 — "sign board": stacked tier bands in each location's signage colors.
   Brand exception: --band colors come from the physical menu boards and are scoped to this component.
   ========================================================================== */
.board { background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-lift); position: relative; overflow: hidden; }
.board .bubbles { z-index: 0; }
.board > * { position: relative; z-index: 1; }

@media (max-width: 47.99rem) { .board { padding: var(--space-2); }   }

@media (max-width: 47.99rem) { .loc-hero2 .btn--lg { --btn-size: 1.05rem; --btn-pad-x: 1.5rem; white-space: nowrap; } }

/* ==========================================================================
   WASH MENU v4 — clean price cards with a signage-colored cap
   ========================================================================== */
.pricing { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); align-items: stretch; }
.price-card { position: relative; display: flex; flex-direction: column; background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.price-card--featured { box-shadow: var(--shadow-lift); outline: 3px solid var(--color-accent); }
.price-card__cap { background: var(--cap); color: var(--cap-text, var(--color-bg)); padding: var(--space-3) var(--space-4) var(--space-2); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); letter-spacing: -0.01em; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.price-card__cap small { font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; }
.price-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; flex: 1 1 auto; }
.price-card__price { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); color: var(--color-secondary); line-height: 1; letter-spacing: -0.03em; }
.price-card__price sup { font-size: 0.45em; vertical-align: top; margin-right: 0.05em; }
.price-card__price small { font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--color-ink-soft); letter-spacing: 0; margin-left: 0.35rem; }
.price-card__monthly { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: var(--space-2); background: var(--color-bg-alt); color: var(--color-secondary); border-radius: var(--radius-pill); padding: 0.4rem 0.9rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); align-self: flex-start; }
.price-card__monthly small { font-family: var(--font-body); font-weight: 400; color: var(--color-ink-soft); font-size: var(--text-xs); }
.price-card__list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: 0.5rem; }
.price-card__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 700; color: var(--color-ink); line-height: 1.35; }
.price-card__list li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.05rem; border-radius: 50%; background: var(--cap) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 0.75rem no-repeat; }
.price-card__list li.is-dark-cap::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>"); }
.price-card__more { margin-top: var(--space-2); }
.price-card__more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); color: var(--color-secondary); padding: 0.35rem 0; text-decoration: underline; text-underline-offset: 0.2em; }
.price-card__more summary::-webkit-details-marker { display: none; }
.price-card__more summary::after { content: "+"; font-size: 1rem; }
.price-card__more[open] summary::after { content: "–"; }
.price-card__more ul { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; gap: 0.35rem; }
.price-card__more li { color: var(--color-ink-soft); font-size: var(--text-base); display: flex; gap: 0.6rem; align-items: flex-start; }
.price-card__more li::before { content: ""; flex: none; width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; border-radius: 50%; background: var(--color-line) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5568' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 0.65rem no-repeat; }
.price-card .btn { margin-top: auto; }
.price-card__body .btn { margin-top: var(--space-4); }
.price-card__tag { position: absolute; top: 0.75rem; right: 0.75rem; background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); z-index: 1; }
.pricing-notes { margin-top: var(--space-4); text-align: center; }
.pricing-notes .badge-row { justify-content: center; }
@media (max-width: 47.99rem) {
  .pricing { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-2); padding: 0.25rem var(--gutter) var(--space-2); margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .pricing::-webkit-scrollbar { display: none; }
  .price-card { flex: 0 0 86%; scroll-snap-align: center; }
  .pricing-hint { display: block; text-align: center; font-size: var(--text-xs); color: var(--color-ink-soft); margin-bottom: var(--space-2); }
}
.pricing-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .price-card, .price-card:hover { transition: none; transform: none; } }
/* Menu v4 tweaks: space under the pill, inherited-items link above the list, no underline */
.price-card__list { margin-top: var(--space-3); }
.price-card__more { margin-top: var(--space-3); }
.price-card__more + .price-card__list { margin-top: var(--space-2); }
.price-card__more summary { text-decoration: none; color: var(--color-ink-soft); font-family: var(--font-body); font-weight: 700; }
.price-card__more summary:hover { color: var(--color-secondary); }
.price-card__more ul { margin-bottom: var(--space-1); }

/* ---------- Header: Locations dropdown ---------- */
.site-nav .has-sub { position: relative; display: flex; align-items: center; gap: 0.15rem; }
.sub-toggle { background: none; border: 0; color: var(--color-secondary); width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border-radius: var(--radius-sm); cursor: pointer; padding: 0; }
.sub-toggle svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur) var(--ease); }
.has-sub.is-open .sub-toggle svg { transform: rotate(180deg); }
.site-nav .sub { list-style: none; margin: 0; padding: var(--space-1); }
@media (min-width: 64rem) {
  .site-nav .sub { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%); min-width: 13rem; background: var(--color-bg); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); border: 1px solid var(--color-line); display: none; flex-direction: column; gap: 0; z-index: 20; }
  .site-nav .sub::before { content: ""; position: absolute; top: -0.5rem; left: 0; right: 0; height: 0.5rem; }
  .site-nav .has-sub:hover .sub, .site-nav .has-sub:focus-within .sub, .site-nav .has-sub.is-open .sub { display: block; }
  .site-nav .sub a { display: block; padding: 0.6rem 0.9rem; border-bottom: 0; border-radius: var(--radius-sm); font-size: var(--text-base); }
  .site-nav .sub a:hover, .site-nav .sub a:focus-visible { background: var(--color-bg-alt); border-bottom: 0; }
}
@media (max-width: 63.99rem) {
  .site-nav .has-sub { flex-wrap: wrap; align-items: stretch; }
  .site-nav .has-sub > a { flex: 1 1 auto; }
  .sub-toggle { display: none; }
  .site-nav .sub { flex: 1 1 100%; padding: 0 0 0 var(--space-3); }
  .site-nav .sub a { font-size: var(--text-base); padding: 0.6rem 0; }
}
/* Unlimited Club plan picker: same finder shell, but the stage holds price cards */
.finder--plans { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
.finder--plans .plans-panel { background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4); box-shadow: var(--shadow-soft); }
.js .finder--plans .plans-panel[hidden] { display: none; }
.finder--plans .pricing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.finder--plans .price-card__price { font-size: var(--text-3xl); }
@media (max-width: 63.99rem) { .finder--plans { grid-template-columns: 1fr; } .finder--plans .plans-panel { padding: var(--space-3); } }
/* Club plan picker: selectors in a row, full-width stage so the cards match the location pages */
.finder--plans { grid-template-columns: 1fr; gap: var(--space-3); }
.finder--plans .finder__tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.finder--plans .finder__tab { width: auto; min-width: 14rem; text-align: center; justify-items: center; }
.finder--plans .finder__empty { min-height: 18rem; }
.finder--plans .pricing { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.finder--plans .price-card__price { font-size: var(--text-4xl); }
/* Price label: "$34.99/mo" on one line, "unlimited washes" beneath */
.price-card__price .per { font-size: 0.45em; font-weight: 700; color: var(--color-ink-soft); letter-spacing: 0; margin-left: 0.15em; }
.price-card__price small { display: block; margin: 0.35rem 0 0; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
@media (max-width: 63.99rem) { .finder--plans .finder__tab { min-width: 0; flex: 1 1 8rem; } }
/* Price card rhythm: price → 12px → pill → 24px → list (or details → 12px → list) → 32px → button */
.price-card__body .price-card__price { margin: 0 0 var(--space-2); }
.price-card__body .price-card__price small { margin-top: 0.4rem; }
.price-card__body .price-card__monthly { margin: 0; }
.price-card__body .price-card__more { margin: var(--space-3) 0 0; }
.price-card__body .price-card__list { margin: var(--space-3) 0 0; }
.price-card__body .price-card__more + .price-card__list { margin-top: var(--space-2); }
.price-card__body .btn { margin-top: var(--space-4); }
.price-card__body .price-card__label { margin: var(--space-3) 0 0; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); color: var(--color-ink-soft); }
.price-card__body .price-card__label + .price-card__list { margin-top: var(--space-2); }
/* Buy Now buttons line up: the list stretches to fill, the button sits at the bottom */
.price-card__body .price-card__list { flex: 1 1 auto; }
.price-card__body .btn { margin-top: var(--space-4); }
.price-card__body .price-card__list { align-content: start; }
/* Team hero: portrait photo — anchor to the top so faces never crop */

/* Framed portrait photo (team hero) */
.loc-frame--tall .photo img { aspect-ratio: 4 / 5; object-position: 50% 20%; }
.loc-frame--tall { max-width: 26rem; margin-inline: auto; }
/* Photo grids: bias the crop toward the top so faces stay in frame */
.photo-grid .photo img, .strip__track .photo img, .card--photo img { object-position: 50% 25%; }
/* Light hero: placeholder gets a sky gradient instead of navy */

.hero--bg .hero__note strong { color: var(--color-ink); }
/* Contact FAQ: two columns on desktop, CTA under answers */
@media (min-width: 64rem) { .faq--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-6); align-items: start; } .faq--cols details { border-bottom: 2px solid var(--color-line); } }
.faq__cta { margin-top: var(--space-2); }
.faq__cta .btn { --btn-pad-y: 0.6rem; --btn-pad-x: 1.1rem; --btn-size: 0.95rem; min-height: 2.5rem; }
/* Contact page: form card + compact location rows */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-6); align-items: start; margin-top: var(--space-2); }
.contact-h { font-size: var(--text-xl); margin-bottom: var(--space-2); }
.contact-locs { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.contact-locs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2) var(--space-3); align-items: center; background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-soft); }
.contact-locs strong { font-family: var(--font-display); font-size: var(--text-lg); display: block; }
.contact-locs strong a { text-decoration: none; }
.contact-locs strong a:hover { text-decoration: underline; }
.contact-locs li > div > span { display: block; color: var(--color-ink-soft); font-size: var(--text-base); }
.contact-locs li > div:last-child { text-align: right; }
.contact-locs .hours { color: var(--color-secondary); font-weight: 700; }
.contact-locs .tel { display: block; white-space: nowrap; font-size: var(--text-lg); }
@media (max-width: 63.99rem) { .contact-grid { grid-template-columns: 1fr; gap: var(--space-5); } .contact-locs li { grid-template-columns: 1fr; } .contact-locs li > div:last-child { text-align: left; } }
/* Contact: one card, two columns with a divider */
.contact-card { padding: 0; overflow: hidden; margin-top: var(--space-3); }
.contact-card .contact-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0; margin-top: 0; }
.contact-card .contact-grid > div { padding: var(--space-5); }
.contact-card .contact-grid > div:last-child { background: var(--color-bg-alt); border-left: 1px solid var(--color-line); }
.contact-card .contact-locs li { box-shadow: none; border: 1px solid var(--color-line); padding: var(--space-2) var(--space-3); }
.contact-card .contact-locs { margin-top: var(--space-3); }
.contact-card .embed-slot { border-style: solid; border-width: 2px; border-color: var(--color-line); background: var(--color-bg-alt); }
@media (max-width: 63.99rem) { .contact-card .contact-grid { grid-template-columns: 1fr; } .contact-card .contact-grid > div { padding: var(--space-4); } .contact-card .contact-grid > div:last-child { border-left: 0; border-top: 1px solid var(--color-line); } }
/* Contact: the call column sits on navy */
.contact-card .contact-grid > div:last-child { background: var(--color-secondary); border-left: 0; color: var(--color-bg); }
.contact-card .contact-grid > div:last-child .contact-h { color: var(--color-bg); }
.contact-card .contact-grid > div:last-child > p { color: var(--color-primary-tint) !important; }
.contact-card .contact-locs li { border: 0; box-shadow: var(--shadow-soft); }
.contact-card .contact-grid > div:last-child :focus-visible { outline-color: var(--color-focus); }
@media (max-width: 63.99rem) { .contact-card .contact-grid > div:last-child { border-top: 0; } }
.manage-note { margin: 0 0 var(--space-3); }
.manage-note .btn { --btn-pad-y: 0.6rem; --btn-pad-x: 1.1rem; --btn-size: 0.95rem; min-height: 2.5rem; }

/* ==========================================================================
   FUNDRAISING — lively version
   ========================================================================== */
.fund-hero .container { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-5); align-items: center; min-height: min(80vh, 46rem); }
.fund-collage { position: relative; }
.fund-collage::before { content: ""; display: block; padding-top: 85%; }
.fund-collage__photo { position: absolute; inset: 6% 6% 6% 10%; transform: rotate(2deg); border: 8px solid var(--color-bg); box-shadow: var(--shadow-lift); }
.fund-collage__photo .ph { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; min-height: 0; }
.sticker { position: absolute; background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-display); font-weight: 800; font-size: var(--text-2xl); line-height: 1; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); box-shadow: var(--shadow-lift); text-align: center; }
.sticker small { display: block; font-family: var(--font-body); font-weight: 700; font-size: var(--text-xs); margin-top: 0.25rem; }
.sticker--a { left: -2%; top: 2%; transform: rotate(-6deg); }
.sticker--b { right: -2%; top: 30%; transform: rotate(5deg); background: var(--color-bg); }
.sticker--c { left: 12%; bottom: -2%; transform: rotate(-3deg); background: var(--color-secondary); color: var(--color-bg); }
.sticker--c small { color: var(--color-primary-tint); }
@media (prefers-reduced-motion: no-preference) { .sticker--a { animation: bob 5s ease-in-out infinite alternate; } .sticker--b { animation: bob 6s ease-in-out infinite alternate-reverse; } .sticker--c { animation: bob 7s ease-in-out infinite alternate; } }
@media (max-width: 63.99rem) { .fund-hero .container { grid-template-columns: 1fr; min-height: 0; } .fund-collage { max-width: 30rem; margin-inline: auto; width: 100%; } }
.fund-steps { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); counter-reset: fs; }
.fund-step { position: relative; padding-top: var(--space-5); }
.fund-step__num { position: absolute; top: -1.25rem; left: var(--space-4); width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-primary); color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-size: var(--text-xl); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.fund-step__tag { display: inline-block; margin-top: var(--space-2); background: var(--color-accent); color: var(--color-secondary); font-family: var(--font-display); font-weight: 700; font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.75rem; border-radius: var(--radius-pill); }

.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.checklist li { display: flex; gap: 0.6rem; align-items: flex-start; font-weight: 700; }
.checklist li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; margin-top: 0.1rem; background: var(--color-primary) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2314213A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center / 0.75rem no-repeat; }
.fund-card .contact-grid > div:last-child { background: var(--color-secondary-deep); color: var(--color-bg); }
.fund-card .contact-grid > div:last-child .contact-h, .fund-card .contact-grid > div:last-child p { color: var(--color-bg); }
.fund-card .checklist li::before { background-color: var(--color-accent); }
.fund-card .contact-grid > div:last-child .btn--secondary { color: var(--color-bg); border-color: var(--color-bg); }
.fund-card .contact-grid > div:last-child .btn--secondary:hover { background: var(--color-bg); color: var(--color-secondary); }
.group-list { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem var(--space-3); }
.group-list li { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--color-secondary); }
.group-list li::before { content: ""; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--color-primary); flex: none; }
@media (max-width: 30rem) { .group-list { grid-template-columns: 1fr; } }
.fund-collage__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.fund-collage__photo picture { display: block; width: 100%; height: 100%; }
.fund-collage__photo img { object-position: 60% 30%; }
.price-card__body .btn { white-space: nowrap; --btn-pad-x: 1rem; --btn-size: 0.95rem; }
/* Club hero: the couple sits center-right; keep their faces clear of the copy panel */
.hero--couple .hero__media img { object-position: 78% 35%; }
@media (max-width: 63.99rem) { .hero--couple .hero__media img { object-position: 62% 20%; } }
@media (max-width: 63.99rem) {
  .hero--couple .container { min-height: min(100vh, 52rem); }
  .hero--couple .hero__media img { object-position: 70% 0%; }
  .hero--couple .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 24%, rgba(234,247,253,0.75) 36%, rgba(234,247,253,0.96) 48%, rgba(234,247,253,0.98) 100%); }
}
@media (max-width: 63.99rem) {
  .hero--couple .btn--secondary, .hero--couple .hero__note { display: none; }
  .hero--couple .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 34%, rgba(234,247,253,0.78) 46%, rgba(234,247,253,0.96) 56%, rgba(234,247,253,0.98) 100%); }
}
/* Club hero (driver): he sits center-right; keep his face right of the copy panel on desktop and above it on phones */
.hero--couple .hero__media img { object-position: 70% 30%; }
@media (max-width: 63.99rem) { .hero--couple .hero__media img { object-position: 55% 0%; } }
/* Landing chips on one line */
.landing .landing__chips { max-width: 60rem; flex-wrap: nowrap; gap: var(--space-2); justify-content: center; }
.landing__chips li { white-space: nowrap; font-size: var(--text-base); }
@media (max-width: 47.99rem) { .landing .landing__chips { flex-wrap: wrap; } }
.landing .landing__back { width: auto; justify-self: center; }
.landing.bg-swoosh .landing__card .landing__pill { margin-top: 0; }
@media (max-width: 63.99rem) {
  .hero--couple .hero__media img { object-position: 50% 0%; }
  .hero--couple .container { min-height: min(100vh, 54rem); }
  .hero--couple .hero__overlay { background: linear-gradient(180deg, rgba(234,247,253,0) 44%, rgba(234,247,253,0.78) 56%, rgba(234,247,253,0.96) 66%, rgba(234,247,253,0.98) 100%); }
}
/* Membership links inside the mobile menu */
.nav-mobile-only { display: none; }
@media (max-width: 63.99rem) {
  .nav-mobile-only { display: block; }
  .site-nav .nav-mobile-only a { color: var(--color-secondary); }
  .site-nav .nav-mobile-only:first-of-type a { border-top: 0; }
  .site-nav .nav-mobile-only a::before { content: "★"; color: var(--color-accent); margin-right: 0.5rem; }
}
/* Photo grid on phones: one stacked column, every tile a fixed ratio */
@media (max-width: 47.99rem) {
  .photo-grid { grid-template-columns: 1fr; gap: var(--space-2); }
  .photo-grid .photo, .photo-grid .photo:first-child, .photo-grid .photo--banner { grid-column: auto; aspect-ratio: 4 / 3; min-height: 0; }
}

/* ==========================================================================
   ACCESSIBILITY PREFERENCES PANEL
   Not an overlay and not a compliance substitute — the HTML meets WCAG AA on its own.
   These are visitor preferences that switch our own CSS via classes on <html>.
   ========================================================================== */
.a11y-fab { position: fixed; left: var(--space-2); bottom: var(--space-2); z-index: 1200; width: 3.25rem; height: 3.25rem; border-radius: 50%; border: 0; background: var(--color-secondary); color: var(--color-bg); display: grid; place-items: center; box-shadow: var(--shadow-lift); cursor: pointer; }
.a11y-fab svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.a11y-fab:hover, .a11y-fab:focus-visible { background: var(--color-secondary-deep); outline: 3px solid var(--color-focus); outline-offset: 3px; }
.a11y-panel { position: fixed; left: var(--space-2); bottom: calc(3.25rem + var(--space-3)); z-index: 1200; width: min(22rem, calc(100vw - 2 * var(--space-2))); background: var(--color-bg); color: var(--color-ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); border: 1px solid var(--color-line); padding: var(--space-3); }
.a11y-panel[hidden] { display: none; }
.a11y-panel h2 { font-size: var(--text-lg); margin: 0 0 var(--space-1); }
.a11y-panel p { font-size: var(--text-xs); color: var(--color-ink-soft); margin: 0 0 var(--space-2); }
.a11y-panel__close { position: absolute; top: var(--space-2); right: var(--space-2); width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 0; background: var(--color-bg-alt); color: var(--color-secondary); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.a11y-panel__close:hover, .a11y-panel__close:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
.a11y-grid { display: grid; gap: 0.5rem; }
.a11y-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; text-align: left; background: var(--color-bg-alt); border: 2px solid transparent; border-radius: var(--radius-md); padding: 0.7rem 0.9rem; font-family: var(--font-body); font-weight: 700; font-size: var(--text-base); color: var(--color-ink); cursor: pointer; }
.a11y-opt:hover { border-color: var(--color-primary); }
.a11y-opt:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: 2px; }
.a11y-opt[aria-pressed="true"] { background: var(--color-secondary); color: var(--color-bg); }
.a11y-opt small { font-weight: 400; font-size: var(--text-xs); opacity: 0.85; display: block; }
.a11y-opt__state { flex: none; font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase; }
.a11y-steps { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); background: var(--color-bg-alt); border-radius: var(--radius-md); padding: 0.5rem 0.9rem; }
.a11y-steps span { font-weight: 700; }
.a11y-steps button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--color-secondary); background: var(--color-bg); color: var(--color-secondary); font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; cursor: pointer; }
.a11y-steps button:hover, .a11y-steps button:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
.a11y-steps button:disabled { opacity: 0.4; cursor: default; }
.a11y-reset { margin-top: var(--space-2); width: 100%; }
@media (max-width: 47.99rem) { .a11y-fab { width: 3rem; height: 3rem; } }

/* ---- Preference effects (classes on <html>) ---- */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }
html.a11y-text-3 { font-size: 140%; }
html.a11y-spacing body { letter-spacing: 0.06em; word-spacing: 0.12em; line-height: 1.85; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 0.75em; }
html.a11y-underline a:not(.btn) { text-decoration: underline !important; text-underline-offset: 0.15em; }
html.a11y-font body, html.a11y-font h1, html.a11y-font h2, html.a11y-font h3, html.a11y-font h4, html.a11y-font .btn, html.a11y-font .eyebrow, html.a11y-font .display { font-family: Verdana, "Segoe UI", Arial, sans-serif; letter-spacing: 0; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.a11y-motion .strip__track { animation: none !important; overflow-x: auto; width: auto; }
html.a11y-motion .strip__track .photo[aria-hidden="true"] { display: none; }
html.a11y-motion .js .reveal, html.a11y-motion .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-motion .bubble-field { display: none; }
html.a11y-contrast { --color-ink: #000000; --color-ink-soft: #1F2937; --color-secondary: #003A63; --color-line: #7A8A99; --color-primary-tint: #FFFFFF; --color-bg-alt: #FFFFFF; }
html.a11y-contrast .hero__overlay { background: rgba(255,255,255,0.94) !important; }
html.a11y-contrast .hero--bg .lead, html.a11y-contrast .hero--bg h1 { color: #000; }
html.a11y-contrast .section--photo .container { background: #002A47; -webkit-backdrop-filter: none; backdrop-filter: none; }
html.a11y-contrast .section--photo .bg img { filter: brightness(0.35); }
html.a11y-contrast .bg-swoosh { background-image: none; background-color: #003A63; }
html.a11y-contrast .eyebrow { color: #003A63; }
html.a11y-contrast .hl { background: #FFE200; color: #000; }
html.a11y-contrast .btn--primary { background: #B3101A; border-color: #B3101A; }
html.a11y-contrast .badge-row li, html.a11y-contrast .trust-bar, html.a11y-contrast .card { border: 2px solid #003A63; }
html.a11y-contrast .price-card__cap { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); }
html.a11y-contrast .fine, html.a11y-contrast .price-card__monthly small, html.a11y-contrast .plan__annual { color: #1F2937; }
html.a11y-contrast .site-footer a, html.a11y-contrast .footer-locs span { color: #fff; }
html.a11y-contrast :focus-visible { outline: 4px solid #000 !important; outline-offset: 3px; }
/* Stage photo can carry its own ratio when the source is small (Jurupa exterior) */
.club-stage .photo img[style*="aspect-ratio"] { max-width: 628px; margin-inline: auto; display: block; }
.loc-frame .photo img[height="1020"] { object-position: 50% 45%; }
/* Slim callout band with one action */
.callout { background: var(--color-bg-alt); padding-block: var(--space-5); }
.callout__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-soft); }
.callout__inner h2 { font-size: var(--text-xl); margin: 0 0 var(--space-1); }
.callout__inner p { margin: 0; color: var(--color-ink-soft); }
.callout__inner .eyebrow { margin-bottom: var(--space-1); }
.callout__inner .btn { flex: none; }
/* The preferences panel keeps its own compact scale so it always fits, whatever text size is chosen */
.a11y-fab { font-size: 16px; width: 52px; height: 52px; left: 16px; bottom: 16px; }
.a11y-fab svg { width: 26px; height: 26px; }
.a11y-panel { font-size: 16px; left: 16px; bottom: 80px; width: min(352px, calc(100vw - 32px)); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; padding: 16px; border-radius: 20px; }
.a11y-panel h2 { font-size: 18px; letter-spacing: -0.01em; }
.a11y-panel p { font-size: 13px; line-height: 1.4; margin-bottom: 12px; }
.a11y-panel__close { top: 12px; right: 12px; width: 34px; height: 34px; font-size: 20px; }
.a11y-grid { gap: 8px; }
.a11y-opt { padding: 9px 12px; font-size: 15px; line-height: 1.3; border-radius: 12px; }
.a11y-opt small { font-size: 12px; }
.a11y-opt__state { font-size: 11px; }
.a11y-steps { padding: 6px 12px; font-size: 15px; border-radius: 12px; }
.a11y-steps button { width: 36px; height: 36px; font-size: 16px; }
.a11y-reset { margin-top: 10px; --btn-pad-y: 0.55rem; --btn-size: 15px; font-size: 15px; min-height: 40px; }
html.a11y-text-1 .a11y-panel, html.a11y-text-2 .a11y-panel, html.a11y-text-3 .a11y-panel,
html.a11y-spacing .a11y-panel, html.a11y-spacing .a11y-panel * { letter-spacing: normal; word-spacing: normal; line-height: 1.3; }
@media (max-height: 640px) { .a11y-panel { bottom: 16px; left: 80px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); } }
/* On phones the accessibility button and panel sit bottom-right so they never cover the hero buttons */
@media (max-width: 47.99rem) {
  .a11y-fab { left: auto; right: 16px; }
  .a11y-panel { left: auto; right: 16px; }
}
@media (max-width: 47.99rem) and (max-height: 640px) { .a11y-panel { left: 16px; right: 80px; width: auto; } }
/* Accessibility button: smaller, Bubble Blue, navy icon (white on this blue fails 3:1 for controls) */
.a11y-fab { width: 44px; height: 44px; background: var(--color-primary); color: var(--color-secondary); box-shadow: var(--shadow-soft); }
.a11y-fab svg { width: 22px; height: 22px; }
.a11y-fab:hover, .a11y-fab:focus-visible { background: var(--color-secondary); color: var(--color-bg); }
.a11y-panel { bottom: 72px; }
@media (max-width: 47.99rem) { .a11y-fab { width: 44px; height: 44px; } }
/* Wash menus on phones: stacked cards, not a swipe row (user decision 2026-09-04) */
@media (max-width: 47.99rem) {
  .pricing { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; padding: 0; margin-inline: 0; gap: var(--space-3); }
  .price-card { flex: none; scroll-snap-align: none; }
  .pricing-hint { display: none; }
}
/* Map embeds show a focus ring when they take keyboard focus */
.map iframe:focus, .map iframe:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: -3px; }

/* ---------- Reviews ---------- */
.reviews { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.review { position: relative; padding-top: var(--space-5); }
.review__mark { position: absolute; top: var(--space-2); left: var(--space-4); font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; color: var(--color-primary); }
.review blockquote { margin: 0; font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink); }
.review footer { margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-ink-soft); display: flex; align-items: center; gap: 0.5rem; }
.review__stars { color: var(--color-accent); letter-spacing: 0.05em; font-size: var(--text-base); }
.reviews .review:nth-child(n+4) { grid-column: span 1; }
@media (min-width: 64rem) { .reviews { grid-template-columns: repeat(6, 1fr); } .reviews .review { grid-column: span 2; } .reviews .review:nth-child(4) { grid-column: 2 / span 2; } .reviews .review:nth-child(5) { grid-column: 4 / span 2; } }
/* Map frame shows the focus ring when the embedded map has focus */
.map:focus-within { outline: 3px solid var(--color-secondary); outline-offset: 3px; }
@media (min-width: 64rem) { .reviews--six .review:nth-child(4), .reviews--six .review:nth-child(5) { grid-column: span 2; } }
@media (min-width: 64rem) { .reviews--six .review { grid-column: span 2; } }
@media (min-width: 64rem) { .reviews--six .review:nth-child(n) { grid-column: span 2; } }
/* Jurupa hero: the exterior file is small — show it at its native 2:1 ratio inside the frame, never upscaled past its width */
.loc-frame .photo img[width="628"] { aspect-ratio: 628 / 310; max-width: 628px; margin-inline: auto; display: block; object-fit: contain; }
/* Menu signup note — used on location pages with no online store (San Diego, Jurupa Valley) */
.menu-note { max-width: 40rem; margin: 0 auto var(--space-4); padding: var(--space-2) var(--space-4); background: var(--color-bg-alt); border-left: 4px solid var(--color-secondary); border-radius: var(--radius-md); color: var(--color-ink); text-align: left; }
.menu-note strong { color: var(--color-secondary); }