/* Mr. Car Wash — Landing page CSS
   Palette from the Mr. Car Wash logo: deep navy shield / orange accent / white.
   Variable names --red / --black kept from the previous palette for backwards
   compatibility across the codebase; only the values changed.
   --red is now the orange accent, --black is now the navy primary.
   For pure-black text where navy would look off, use --ink. */

:root {
  --red: #F26A21;         /* orange accent */
  --red-hover: #FF8547;
  --red-deep: #D45418;
  --black: #1B2A5A;       /* navy primary (backgrounds, headings, wordmark) */
  --black-soft: #2A3B70;
  --black-elev: #364980;
  --ink: #0A0A0A;         /* pure-black text where navy would wash out */
  --off-white: #F5F5F5;
  --white: #FFFFFF;
  --gray-100: #E5E5E5;
  --gray-300: #B8B8B8;
  --gray-500: #6E6E6E;
  --gray-700: #333333;
  /* Semantic status colors — one source of truth shared by the public site,
     the admin back-office, and JS-set inline styles. Use these instead of raw
     hex so success/warning/error never drift between surfaces. The rgba(...)
     tints used for badge backgrounds are intentionally left inline. */
  --success: #66DD8E;       /* paid / confirmed / on / ok */
  --success-deep: #4CB575;  /* darker partner for success gradients */
  --warning: #FFCE54;       /* unpaid / pending */
  --danger: #FF6B6B;        /* errors / destructive actions */
  --font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-head: 'Playfair Display', Georgia, serif;
  --container: 1180px;
  --radius: 14px;
  --shadow-1: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-2: 0 12px 36px rgba(242, 106, 33, 0.20);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* wins over component styles that set display */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--off-white);
  background: var(--black);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 900; letter-spacing: -0.01em; margin: 0 0 0.6em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

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

.skip {
  position: absolute; top: -100px; left: 0;
  background: var(--red); color: var(--white); padding: 12px 16px; z-index: 200;
  font-weight: 600;
}
.skip:focus { top: 0; }

/* ---------- Brand wordmark (replaces the logo image) ---------- */
.brand-text {
  display: inline-flex; flex-direction: column; align-items: flex-start;
  padding: 6px 12px 6px 0;
  text-decoration: none;
  line-height: 1;
  gap: 3px;
}
.brand-text .wm-line-1 {
  font-family: 'Kaushan Script', cursive;
  color: var(--red);
  font-size: 1.8rem;
  letter-spacing: 0.005em;
  line-height: 1;
  transform: translateY(2px);
}
.brand-text .wm-line-2 {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-top: 1px solid var(--white);
  padding: 4px 2px 0;
  margin: 0;
  align-self: stretch;
  text-align: center;
}
.hero-wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 0 auto 28px;
  line-height: 1;
  filter: drop-shadow(0 10px 40px rgba(242,106,33,0.35));
}
.hero-wm-1 {
  font-family: 'Kaushan Script', cursive;
  color: var(--red);
  font-size: clamp(2.6rem, 8vw, 4.6rem);
  line-height: 1;
}
.hero-wm-2 {
  color: var(--white);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 1.6vw, 1.15rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  border-top: 2px solid var(--white);
  padding: 8px 24px 0;
  margin-top: 4px;
}
.footer-wordmark { margin-bottom: 12px; }

/* ---------- Header (unified: top-info-bar + main nav row = one component) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: 8px;
  min-width: 0;
}
/* The logo must never be squeezed or cropped by its neighbours in the single
   row — it keeps its intrinsic size while the address absorbs the slack. */
.header-inner .brand-mark { flex: 0 0 auto; }
.header-inner .header-cta { flex: 0 0 auto; }

.brand-mark {
  display: inline-flex; align-items: center;
  text-decoration: none;
  line-height: 1;
}
/* Real logo (orange "Mr." + navy "Car Wash" + the mustache mark) on a small
   white pill — same treatment used in the footer/hero so the actual brand
   art shows everywhere instead of a plain-text substitute. */
.brand-logo {
  display: block;
  height: 40px;
  width: auto;
  background: #fff;
  padding: 4px 8px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
@media (max-width: 520px) {
  .brand-logo { height: 32px; padding: 3px 6px; }
}

/* Hero logo image kept for the homepage hero section (used above the fold,
   not in the header anymore). */
.hero-logo {
  display: block;
  width: min(320px, 60vw);
  height: auto;
  margin: 0 auto 24px;
  background: #fff;
  padding: 14px 18px;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.55);
}
.footer-logo {
  display: block;
  height: 48px;
  width: auto;
  background: #fff;
  padding: 3px 6px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.nav {
  display: none;
  gap: 28px;
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--off-white);
}
.nav a { position: relative; padding: 4px 0; transition: color .18s var(--ease); }
.nav a:hover { color: var(--red); }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.nav a:hover::after { transform: scaleX(1); }
.header-cta {
  display: flex; align-items: center; gap: 6px;
}
.header-cta .btn-sm {
  padding: 10px 14px; font-size: 0.9rem;
  min-height: 44px;
}
.header-cta .phone-btn-text { display: inline; }
@media (min-width: 900px) { .nav { display: flex; } }

/* Hamburger toggle (mobile only) */
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  width: 44px; height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.nav-toggle:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.3); }
.nav-toggle span {
  display: block;
  width: 22px; height: 2px;
  background: var(--off-white);
  border-radius: 2px;
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
.site-header.nav-open .nav-toggle {
  background: rgba(242,106,33,0.15);
  border-color: rgba(242,106,33,0.5);
}
.site-header.nav-open .nav-toggle span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Small "signed in" dot on the account link */
.nav a.nav-signed-in::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  box-shadow: 0 0 0 2px rgba(102,221,142,0.2);
}

/* Mobile nav dropdown */
@media (max-width: 899px) {
  .header-inner { position: relative; gap: 8px; }
  .nav-toggle { display: flex; }
  .nav {
    display: flex; flex-direction: column;
    gap: 0; /* desktop uses gap:28px for a horizontal row; as a vertical menu
               that becomes 28px of dead space between every item — the rows are
               already separated by their own dividers, so collapse it. */
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: rgba(6,6,6,0.98);
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: max-height .25s var(--ease), opacity .18s var(--ease);
  }
  .site-header.nav-open .nav {
    max-height: 60vh;
    opacity: 1;
    pointer-events: auto;
  }
  .nav a {
    padding: 13px 20px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .nav a:last-child { border-bottom: none; }
  /* Reuse the desktop underline pseudo as a right-side chevron so each row
     reads as a tappable menu item, not floating text. Scoped to the top-level
     menu links (direct children) so injected social/info rows are untouched. */
  .nav a::after { display: none; }
  .nav > a::after {
    content: "›"; display: inline;
    position: static; left: auto; right: auto; bottom: auto;
    width: auto; height: auto; background: none;
    transform: none;
    color: rgba(255,255,255,0.35);
    font-size: 1.35rem; font-weight: 400; line-height: 1;
  }
  .nav a:hover, .nav a[aria-current="page"] {
    color: var(--red);
    background: rgba(242,106,33,0.08);
  }
  .nav > a:hover::after, .nav > a[aria-current="page"]::after { color: var(--red); }
  /* Icon-only phone button on very small screens */
  .header-cta .phone-btn-text { display: none; }
  .brand-text .wm-line-1 { font-size: 1.5rem; }
  .brand-text .wm-line-2 { font-size: 0.65rem; letter-spacing: 0.18em; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px;
  min-height: 44px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .15s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
  background: var(--red); color: var(--white); border-color: var(--red);
  box-shadow: var(--shadow-2);
}
.btn-primary:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-outline {
  background: transparent; color: var(--white); border-color: rgba(255,255,255,0.6);
}
.btn-outline:hover { border-color: var(--white); background: rgba(255,255,255,0.08); }
.btn-ghost {
  background: transparent; color: var(--off-white); border-color: transparent;
}
.btn-ghost:hover { color: var(--red); }
.btn-lg { padding: 16px 28px; font-size: 1.05rem; }
.btn-sm { padding: 8px 14px; font-size: 0.9rem; }
.btn-block { width: 100%; }

/* ---------- Hero ----------
   Photo-forward hero: the team+Ferrari image fills the top of the section,
   with a strong dark gradient at the bottom so the H1 / sub-copy / CTA
   stay readable. The navy + orange radial glow is used as a fallback while
   the image loads and as a color tint under the photo. */
.hero {
  padding: 0 0 clamp(48px, 8vw, 96px);
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(242,106,33,0.28), transparent 60%),
    radial-gradient(700px 500px at 100% 100%, rgba(242,106,33,0.12), transparent 60%),
    var(--black);
  text-align: center;
  position: relative; overflow: hidden;
  color: var(--off-white);
}
.hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: 62vh;
  overflow: hidden;
  background: var(--black);
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}
/* Fade the bottom of the image into the section background so text sits
   comfortably below without a hard seam. */
.hero-media-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, var(--black) 100%);
  pointer-events: none;
}
.hero-inner {
  margin-top: -20px;   /* pull copy up into the fade for a "hero" feel */
}
@media (min-width: 900px) {
  .hero-media { max-height: 58vh; }
  .hero-inner { margin-top: -40px; }
}
@media (max-width: 520px) {
  /* Compress the hero hard on phones so "Book Now" lands within the first
     screenful — no scrolling required to see it. Was aspect-ratio 4/3 with
     no max-height (~280px tall on a 375px-wide phone); capped + shrunk
     copy below saves ~150px of vertical space total. */
  .hero-media { aspect-ratio: 16 / 10; max-height: 200px; }
  .hero-media img { object-position: center 22%; }
  .hero-inner { margin-top: -34px; }
  .hero h1 { font-size: 1.6rem; line-height: 1.18; margin-bottom: 8px; }
  .hero-sub { font-size: 0.92rem; margin-bottom: 16px; }
  .hero-cta { margin-bottom: 18px; gap: 8px; }
  .hero-cta .btn-lg { padding: 13px 20px; font-size: 0.95rem; }
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 40px);
  pointer-events: none;
}
.hero-inner { position: relative; z-index: 1; }
.hero-logo {
  margin: 0 auto 28px;
  width: min(420px, 78%);
  height: auto;
  filter: drop-shadow(0 10px 40px rgba(242,106,33,0.35));
}
.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.05;
  margin-bottom: 18px;
  color: var(--white);
}
.hero h1 .accent { color: var(--red); }
.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  max-width: 640px; margin: 0 auto 32px;
  color: var(--gray-100);
}
.hero-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 36px; }
.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 28px;
  color: var(--gray-300);
  font-size: 0.95rem;
}
.trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.trust-row strong { color: var(--white); }

/* ---------- Top signup banner (sticky, dismissible) ---------- */
.top-banner {
  position: sticky; top: 0; z-index: 101;
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: linear-gradient(90deg, var(--black) 0%, var(--red) 50%, var(--black) 100%);
  color: var(--white);
  padding: 8px 44px 8px 12px; /* right pad reserves room for close X */
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.35);
}
.top-banner-link {
  color: var(--white);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px;
  line-height: 1.25;
}
.top-banner-link strong {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
.top-banner-link:hover, .top-banner-link:focus-visible { opacity: 0.9; }
.top-banner-close {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  background: transparent; border: none; color: var(--white);
  width: 36px; height: 36px; padding: 0; line-height: 1;
  font-size: 1.4rem; cursor: pointer;
  opacity: 0.75;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.top-banner-close:hover, .top-banner-close:focus-visible {
  opacity: 1; background: rgba(255,255,255,0.1); outline: none;
}
.top-banner .banner-short { display: none; }
@media (max-width: 520px) {
  .top-banner-link { font-size: 0.82rem; padding: 4px 4px; }
  .top-banner .banner-full { display: none; }
  .top-banner .banner-short { display: inline-flex; }
}

/* When banner is present, drop the sticky header below it so both stack */
body.has-banner .site-header { top: 44px; }

/* ---------- Address + icon-only socials ----------
   These now sit INSIDE the single .header-inner row rather than in their own
   strip above it, so the header is one row tall and never clips the logo.
   The address is the flexible element: it shrinks and finally hides on narrow
   screens, since the logo and the action buttons matter more there. */
.top-info-address {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--gray-300);
  font-size: 0.8rem;
  text-decoration: none;
  transition: color .15s var(--ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1 1 auto;
}
.top-info-address:hover, .top-info-address:focus-visible { color: var(--red); }
.top-info-socials { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Branded social badges — colored circular chips shared by the header, footer,
   and mobile menu, matching the /links hub the banner QR points to so the brand
   reads identically on the site and in print. Each glyph is white (currentColor)
   on its platform color; Facebook's own SVG carries the blue circle itself. */
.social-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #fff;
  transition: transform .15s var(--ease), filter .15s var(--ease);
}
/* Fixed px (not %) so the glyph never collapses inside the flex badge; block
   removes the inline descender gap that would otherwise stretch the circle. */
.social-icon svg { display: block; flex: 0 0 auto; width: 19px; height: 19px; }
.social-icon:hover, .social-icon:focus-visible { transform: translateY(-1px); filter: brightness(1.1); }
.social-icon--instagram { background: #E1306C; }
.social-icon--tiktok    { background: #010101; }
.social-icon--facebook  { background: transparent; }
/* Facebook's SVG is its own filled blue circle, so it fills the whole badge. */
.social-icon--facebook svg { width: 32px; height: 32px; color: #1877F2; }

@media (max-width: 900px) {
  /* Drop the street text (keep the 📍 pin), and move socials out of the header:
     the CTA row (phone + Sign In + menu button) has no room, so they live in the
     hamburger menu (.nav-socials) and the footer on phones. */
  .top-info-address-text { display: none; }
  .top-info-address { flex: 0 0 auto; }
  .top-info-socials { display: none; }
}
@media (max-width: 520px) {
  .top-info-address { display: none; }
}
@media (max-width: 380px) {
  /* Very narrow phones (iPhone SE) — drop font one more notch so full address
     still fits without ellipsis alongside the socials. */
  .top-info-bar { font-size: 0.68rem; }
}

/* Branded "Follow us" row inside the mobile hamburger menu. Visibility follows
   its parent .nav-mobile-info (mobile-only); JS toggles [hidden] when no socials
   are configured. Larger badges here — easy tap targets on a phone. */
.nav-socials { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.08); }
.nav-socials-title {
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray-400); margin-bottom: 12px;
}
.nav-socials-row { display: flex; align-items: center; gap: 14px; }
/* These badges are <a> inside <nav>, so the mobile `.nav a` rules (padding 22px,
   min-height 52px, border) apply and crush them — reset those here. */
.nav-socials-row .social-icon {
  width: 46px; height: 46px;
  padding: 0; border: none; min-height: 0;
}
.nav-socials-row .social-icon svg { flex: 0 0 auto; width: 27px; height: 27px; }
.nav-socials-row .social-icon--facebook svg { width: 46px; height: 46px; }

/* Footer socials — branded badges, generous gap, comfortable tap targets. */
.footer-socials-row { display: flex; align-items: center; gap: 12px; padding-top: 6px; }
/* Restore the flex badge: the generic `.footer-links a` rule (display:block;
   padding:6px 0) overrides .social-icon's inline-flex, which knocked the glyph
   to the top-left of its circle. Re-assert flex centering + zero padding here. */
.footer-socials-row .social-icon { display: inline-flex; padding: 0; width: 42px; height: 42px; }
.footer-socials-row .social-icon svg { width: 25px; height: 25px; }
/* Facebook: fill the badge blue like the other three (was a transparent badge
   with the icon drawing its OWN smaller circle, which left a dark gap to the
   border and made the row look uneven). Now it's a uniform 42px filled circle. */
.footer-socials-row .social-icon--facebook { background: #1877F2; }
.footer-socials-row .social-icon--facebook svg { width: 25px; height: 25px; }

/* Prominent "Sign In" button in the top-right header CTA area. Orange outline
   button, always visible. On mobile, text collapses to just the person icon. */
.signin-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--red);
  color: var(--white);
  padding: 8px 14px;
}
.signin-btn:hover { background: var(--red); color: var(--white); }
@media (max-width: 520px) {
  .signin-btn { padding: 8px 10px; }
  .signin-btn-text { display: none; }
}

/* Signed-in account menu (replaces .signin-btn once /api/auth/session returns
   an authenticated customer). Matches the sign-in button visually so the
   swap is seamless. */
.account-menu { position: relative; display: inline-flex; }
.account-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border-color: var(--red);
  color: var(--white);
  padding: 8px 14px;
  cursor: pointer;
}
.account-btn:hover, .account-btn:focus-visible { background: var(--red); color: var(--white); }
.account-btn-caret { font-size: 0.75rem; opacity: 0.8; }
.account-menu-panel {
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 180px;
  background: var(--gray-900, #1a1a1a);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.45);
  z-index: 60;
  display: flex; flex-direction: column;
}
.account-menu-panel[hidden] { display: none; }
.account-menu-panel a,
.account-menu-panel button {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px;
  color: var(--white);
  background: transparent; border: none; cursor: pointer;
  font: inherit;
  border-radius: 6px;
  text-decoration: none;
}
.account-menu-panel a:hover, .account-menu-panel a:focus-visible,
.account-menu-panel button:hover, .account-menu-panel button:focus-visible {
  background: rgba(255,255,255,0.08);
  outline: none;
}
.account-menu-signout { color: var(--red) !important; }
@media (max-width: 520px) {
  .account-btn { padding: 8px 10px; }
  .account-btn-text { max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Returning-customer sign-in panel (membership page) ---------- */
.member-signin {
  background: linear-gradient(180deg, rgba(242,106,33,0.08) 0%, rgba(242,106,33,0.03) 100%);
  border: 1px dashed rgba(242,106,33,0.45);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin: 24px 0 12px;
}
.signin-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 14px;
}
.signin-icon { font-size: 1.8rem; line-height: 1; margin-top: 2px; }
.signin-title { color: var(--white); font-weight: 700; margin: 0 0 4px; font-size: 1.05rem; }
.signin-sub { color: var(--gray-300); margin: 0; font-size: 0.9rem; }
.signin-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.signin-row input {
  background: var(--black);
  color: var(--off-white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  min-height: 48px;
}
.signin-row input:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242,106,33,0.25);
}
.signin-row .btn { min-width: 110px; }
.signin-followup { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(255,255,255,0.1); }
.signin-welcome { color: var(--gray-100); margin: 0 0 10px; font-size: 0.95rem; }
.signin-welcome code.pin-code {
  display: inline-block;
  background: #0A0A0A; color: var(--white);
  font-size: 1.15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 3px 10px;
  border-radius: 6px;
  margin: 0 4px;
  letter-spacing: 0.14em;
  border: 1px solid rgba(242,106,33,0.4);
}
.signin-error {
  color: #ffb4b4;
  background: rgba(242,106,33,0.15);
  border-left: 3px solid var(--red);
  padding: 10px 12px;
  border-radius: 6px;
  margin: 12px 0 0;
  font-size: 0.9rem;
}
.signin-hint {
  color: var(--gray-300);
  font-size: 0.85rem;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.member-signedin {
  background: rgba(102,221,142,0.1);
  border: 1px solid rgba(102,221,142,0.4);
  border-radius: var(--radius);
  padding: 12px 18px;
  margin: 24px 0 12px;
}
.signedin-inner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--off-white);
  font-size: 0.95rem;
}
.signedin-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: var(--success); color: #0A0A0A;
  border-radius: 50%; font-weight: 700; font-size: 0.85rem;
}
.signedin-inner strong { color: var(--white); }
.signedin-inner a { color: var(--red); text-decoration: underline; margin-left: auto; font-size: 0.85rem; }

.step-badge {
  display: inline-block;
  background: rgba(102,221,142,0.15);
  color: var(--success);
  font-family: var(--font-body);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 10px;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .signin-row { grid-template-columns: 1fr; }
  .signin-row .btn { width: 100%; }
}

/* ---------- Section shell ---------- */
.section { padding: clamp(64px, 10vw, 112px) 0; position: relative; }
/* Phones: shorter section padding + tighter head so each section's title and
   its content land on the same screen — the page reads like flipping pages in
   a notebook rather than one long scroll. */
@media (max-width: 719px) {
  .section { padding: 40px 0; }
  .section-head { margin-bottom: 24px; }
  .section-head .lead { font-size: 1rem; }
}
.section-dark {
  background:
    radial-gradient(1200px 400px at 50% -10%, rgba(242,106,33,0.15), transparent 60%),
    var(--black);
  color: var(--off-white);
}
.section-light { background: var(--off-white); color: var(--black); }
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--black); }

/* Thin orange accent bar between adjacent dark sections so hero → wash-menu →
   difference no longer reads as one continuous navy slab. Only draws when the
   NEXT sibling is also dark (uses :has selector — 96% browser support). */
.section-dark + .section-dark { position: relative; }
.section-dark + .section-dark::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(120px, 40%);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  opacity: 0.7;
}
/* Same accent between the .hero and the first .section-dark that follows. */
.hero + .section-dark::before {
  content: "";
  position: absolute; top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(120px, 40%);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--red) 50%, transparent 100%);
  opacity: 0.7;
}

.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.section-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.1;
}
.section-head .lead {
  font-size: 1.05rem;
  color: var(--gray-300);
}
.section-light .section-head .lead { color: var(--gray-700); }

.section-cta { display: flex; justify-content: center; margin-top: 40px; }

/* ---------- Memberships ---------- */
.tier-grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .tier-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---- Mobile carousel: one full card at a time with scroll-snap. Full-width
   card (100%), so each swipe cleanly advances to the next. Below the
   carousel, a dots-indicator (populated by booking.js) tells the user
   which of N cards is currently visible. */
@media (max-width: 719px) {
  /* Flexbox instead of CSS Grid's implicit percentage columns — flex-basis
     with flex-grow/shrink both locked to 0 gives every card the exact same
     pixel width no matter how its content differs (long price, extra
     feature lines, a badge). Grid's `grid-auto-columns: 100%` should do the
     same in theory, but was reported to render inconsistent card widths on
     at least one real device — flex is the more battle-tested pattern for
     this and removes any doubt. */
  #book-picker .tier-grid {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0 4px;
    scrollbar-width: none;
    position: relative;
  }
  #book-picker .tier-grid::-webkit-scrollbar { display: none; }
  #book-picker .tier-grid > .tier {
    flex: 0 0 calc(100% - 8px);
    max-width: calc(100% - 8px);
    box-sizing: border-box;
    margin: 0 auto;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  /* Featured tier's translateY lift would push it off the snap alignment;
     neutralize it in mobile carousel context. */
  #book-picker .tier-grid > .tier-featured { transform: none; }
}

/* Carousel dots indicator — auto-populated by booking.js as one <button>
   per card. Active dot is filled orange; the rest are muted. */
.carousel-dots {
  display: none;
  justify-content: center;
  gap: 8px;
  margin: 12px 0 4px;
}
.carousel-dots button {
  width: 8px; height: 8px; padding: 0;
  border: none; border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.carousel-dots button.active {
  background: var(--red);
  transform: scale(1.4);
}
.carousel-dots button:hover:not(.active) { background: rgba(255,255,255,0.5); }
@media (max-width: 719px) {
  .carousel-dots { display: flex; }
}

/* Swipe-hint above each mobile carousel. */
@media (max-width: 719px) {
  .swipe-hint {
    display: block;
    text-align: center;
    color: var(--gray-300);
    font-size: 0.78rem;
    margin: 4px 0 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .swipe-hint::after { content: " →"; color: var(--red); }
}
@media (min-width: 720px) {
  .swipe-hint { display: none; }
}

.tier {
  position: relative;
  background: linear-gradient(180deg, var(--black-elev) 0%, var(--black-soft) 100%);
  /* Bumped from 1.5px/0.15 opacity — still read as "no border at all" on
     some phone screens (reported twice). 2px solid at much higher opacity
     is unambiguous regardless of display/brightness. */
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 16px;
  padding: 32px 26px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.08);
  transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.tier:hover { transform: translateY(-4px); border-color: rgba(242,106,33,0.6); box-shadow: 0 16px 44px rgba(0,0,0,0.55), 0 0 30px rgba(242,106,33,0.15); }
@media (max-width: 480px) {
  /* Free up horizontal room for feature text ("Clear Coat Protectant" etc.)
     by trimming the card's own side padding. Vertical rhythm is also tightened
     across the board so the tallest card (e.g. "Everything", 9 features + a
     highlight box) fits on one phone screen — no scroll needed before swiping
     to the next card. */
  .tier { padding: 18px 16px; }
  .tier-name { font-size: 1.4rem; margin-bottom: 4px; }
  .tier-price .price { font-size: 2.2rem; }
  .tier-price .cadence { font-size: 0.9rem; }
  .tier-tagline { margin-bottom: 10px; font-size: 0.95rem; }
  .tier-features { margin: 0 0 12px; }
}
/* Featured tier stands out via an orange border + a modest glow — same
   border WIDTH as every other card (2px) so it doesn't look like a
   different-sized card next to its siblings; only the color + a lighter
   glow (was a 60px blur that dwarfed neighboring cards) differ. */
.tier-featured {
  background: linear-gradient(180deg, var(--black-elev) 0%, var(--black-soft) 100%);
  border: 2px solid var(--red);
  box-shadow: 0 10px 28px rgba(242,106,33,0.3), inset 0 1px 0 rgba(255,255,255,0.08);
  transform: translateY(-6px);
}
@media (min-width: 720px) { .tier-featured { transform: translateY(-16px); } }
.badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: var(--white);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(242,106,33,0.5);
  white-space: nowrap;
}
.tier-name {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--white);
  margin-bottom: 6px;
}
.tier-price { margin: 0 0 4px; }
.tier-price .price {
  font-family: var(--font-head);
  font-size: 3rem;
  font-weight: 900;
  color: var(--white);
}
.tier-price .cadence {
  color: var(--gray-300);
  font-size: 1rem;
  margin-left: 6px;
}
.tier-tagline { color: var(--red); font-weight: 600; margin-bottom: 20px; }
.tier-features { flex: 1; margin: 0 0 24px; }
.tier-features li {
  padding: 8px 0 8px 26px;
  position: relative;
  color: var(--gray-100);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.tier-features li:last-child { border-bottom: none; }
.tier-features li::before {
  content: "✓";
  position: absolute; left: 0; top: 8px;
  color: var(--red);
  font-weight: 700;
}
@media (max-width: 480px) {
  /* Smaller checkmark indent + slightly smaller text = more room for
     phrases like "Clear Coat Protectant" to fit on one line, and tighter
     row height so a long feature list still fits one screen. */
  .tier-features li { padding: 4px 0 4px 20px; font-size: 0.9rem; line-height: 1.3; }
  .tier-features li::before { top: 4px; }
}
.fine-print {
  text-align: center; color: var(--gray-500); font-size: 0.9rem; margin: 32px 0 0;
}

/* ---------- Wash menu (one-time purchase — reuses .tier/.tier-grid/.badge) ---------- */
.tier-highlight-box {
  background: linear-gradient(180deg, rgba(242,106,33,0.14) 0%, rgba(242,106,33,0.05) 100%);
  border: 1px dashed rgba(242,106,33,0.45);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 20px;
}
.tier-highlight-label {
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem;
  font-weight: 700; color: var(--red); margin: 0 0 8px;
}
.tier-highlight-box ul { margin: 0; }
.tier-highlight-box li {
  padding: 4px 0 4px 22px; position: relative; color: var(--gray-100); font-size: 0.92rem;
}
.tier-highlight-box li::before { content: "+"; position: absolute; left: 0; color: var(--red); font-weight: 900; }
@media (max-width: 480px) {
  .tier-highlight-box { padding: 9px 12px; margin: 0 0 10px; }
  .tier-highlight-label { margin: 0 0 4px; }
  .tier-highlight-box li { padding: 3px 0 3px 20px; font-size: 0.88rem; }
}
/* Selectable state for the /wash purchase page (homepage tiers stay static/non-clickable) */
.tier.selectable { cursor: pointer; }
.tier.selectable:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tier.selectable.tier-selected {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242,106,33,0.35), 0 20px 60px rgba(242,106,33,0.28);
}
/* Always-visible selection bubble (top-right) so customers know a card is
   tappable to select. Empty ring by default; fills orange with a ✓ when picked. */
.tier-selected-check {
  position: absolute; top: 14px; right: 14px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.4);
  background: transparent; color: transparent;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: 1rem;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.tier.selectable { position: relative; }
.tier.tier-selected .tier-selected-check {
  background: var(--red); border-color: var(--red); color: var(--white);
}
.wash-surcharge-note { text-align: center; color: var(--gray-300); font-size: 0.9rem; margin: -6px 0 28px; }

/* ---------- Services ---------- */
.service-grid {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .service-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .service-grid { grid-template-columns: repeat(4, 1fr); } }

.service {
  position: relative;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 24px 20px;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.service:hover {
  transform: translateY(-3px);
  border-color: var(--red);
  box-shadow: 0 12px 30px rgba(242,106,33,0.15);
}
.service h3 { font-family: var(--font-head); font-size: 1.15rem; margin-bottom: 8px; color: var(--black); }
.service-price {
  font-family: var(--font-head);
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--red);
  margin: 0 0 4px;
}
.service-meta { color: var(--gray-500); font-size: 0.9rem; margin: 0; }
.service-highlight { border-color: var(--red); background: #fff; }
.service-highlight .badge {
  background: var(--black); color: var(--white); top: -12px;
}
.chip {
  display: inline-block;
  background: var(--black);
  color: var(--white);
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 6px;
}

.addons {
  margin: 40px auto 0; max-width: 780px;
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-radius: var(--radius);
  padding: 18px 22px;
}
.addons summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--black);
  list-style: none;
}
.addons summary::-webkit-details-marker { display: none; }
.addons summary::after { content: " ▾"; color: var(--red); }
.addons[open] summary::after { content: " ▴"; }
.addons ul { margin-top: 14px; }
.addons li {
  padding: 8px 0;
  border-bottom: 1px solid var(--gray-100);
  color: var(--gray-700);
}
.addons li:last-child { border-bottom: none; }

/* ---------- The Difference ---------- */
.diff-grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .diff-grid { grid-template-columns: repeat(3, 1fr); } }
.diff {
  background: linear-gradient(180deg, var(--black-elev) 0%, var(--black-soft) 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 34px 28px;
  text-align: center;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.diff:hover { transform: translateY(-4px); border-color: rgba(242,106,33,0.5); }
.diff-icon {
  font-size: 2.4rem;
  margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px;
  background: rgba(242,106,33,0.12);
  border: 1px solid rgba(242,106,33,0.35);
  border-radius: 50%;
  margin-inline: auto;
}
.diff h3 { color: var(--white); font-size: 1.5rem; font-weight: 900; margin-top: 12px; }
.diff p { color: var(--gray-100); margin: 0; }
.diff p.special-note {
  margin-top: 12px; font-size: 0.8rem; color: var(--gray-300);
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700;
}
/* Phones: compact perk cards so the title, the Mon–Thu flyer, and a perk card
   all share one screen in the Specials & Perks section. */
@media (max-width: 719px) {
  .diff { padding: 20px 18px; }
  .diff-icon { width: 54px; height: 54px; font-size: 1.8rem; margin-bottom: 10px; }
  .diff h3 { font-size: 1.2rem; margin-top: 6px; }
  .diff p { font-size: 0.95rem; line-height: 1.4; }
  .diff p.special-note { margin-top: 8px; font-size: 0.72rem; }
}

/* Featured wash-package deal cards (data-driven from /admin/pricing).
   Share the .diff shell but get a stronger accent so they read as the top
   sale, plus a live savings calculator. */
.special-pkg {
  position: relative;
  /* Extra top room so the "Top Deal" badge sits INSIDE the card — the swipe
     row clips vertical overflow, so a badge protruding above would be cut. */
  padding-top: 48px;
  border-color: rgba(242,106,33,0.55);
  background: linear-gradient(180deg, rgba(242,106,33,0.14) 0%, var(--black-soft) 62%);
  box-shadow: var(--shadow-2);
}
.special-pkg .pkg-badge {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  background: var(--red); color: #fff; font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 16px;
  border-radius: 999px; white-space: nowrap; box-shadow: 0 6px 16px rgba(242,106,33,0.45);
}
.special-pkg h3 { margin-top: 6px; }
.special-pkg .pkg-bonus { color: var(--warning); }
.special-pkg .pkg-sub { color: var(--gray-100); font-size: 0.92rem; margin-top: 6px; }
.special-pkg .pkg-tier-label {
  display: block; margin: 16px 0 4px; text-align: left;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-300);
}
.special-pkg .pkg-tier-select {
  width: 100%; margin-top: 6px; min-height: 50px; padding: 0 48px 0 14px;
  border-radius: 10px; background-color: var(--black); color: var(--white);
  border: 1.6px solid rgba(255,255,255,0.28); font-size: 1.02rem; font-weight: 600;
  /* Replace the faint native arrow with a bold, high-contrast chevron that's
     easy to see (accessibility for older customers). */
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F26A21' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 24px 24px;
}
.special-pkg .pkg-tier-select:focus { outline: none; border-color: var(--red); }
/* A little tap-target chevron backdrop so the arrow reads as an interactive control. */
.special-pkg .pkg-tier-label { position: relative; }
.special-pkg .pkg-calc {
  margin: 14px 0 18px; padding: 14px 16px; text-align: left;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.10); border-radius: 12px;
}
.special-pkg .pkg-calc-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  color: var(--white);
}
.special-pkg .pkg-calc-row .pkg-total { color: var(--gray-100); font-weight: 600; }
.special-pkg .pkg-calc-row .pkg-price { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
.special-pkg .pkg-calc-save { margin-top: 8px; color: var(--warning); font-weight: 800; font-size: 0.98rem; }
.special-pkg .pkg-calc-save b { color: var(--warning); }
.special-pkg .pkg-calc-per { margin-top: 2px; color: var(--gray-300); font-size: 0.85rem; }
.special-pkg .pkg-buy { width: 100%; }
@media (max-width: 719px) {
  /* Compact the deal card so the swipe hint, the whole card, and the
     "Buy this package" button all fit on one phone screen. */
  .special-pkg { padding-top: 38px; }
  .special-pkg .pkg-badge { top: 11px; }
  .special-pkg .diff-icon { width: 42px; height: 42px; font-size: 1.4rem; margin-bottom: 4px; }
  .special-pkg h3 { font-size: 1.18rem; margin-top: 2px; }
  .special-pkg .pkg-sub { font-size: 0.84rem; margin-top: 4px; }
  .special-pkg .pkg-tier-label { margin: 10px 0 2px; }
  .special-pkg .pkg-tier-select { min-height: 46px; }
  .special-pkg .pkg-calc { margin: 10px 0 12px; padding: 10px 12px; }
  .special-pkg .pkg-calc-row .pkg-price { font-size: 1.4rem; }
  .special-pkg .pkg-calc-save { font-size: 0.9rem; margin-top: 6px; }
  .special-pkg .pkg-calc-per { font-size: 0.8rem; }
  .special-pkg .pkg-buy { min-height: 48px; }
}

/* ---------- Reviews ---------- */
.review-grid {
  display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .review-grid { grid-template-columns: repeat(3, 1fr); } }
.review {
  background: var(--white);
  border: 1px solid var(--gray-100);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  padding: 28px 26px;
  margin: 0;
}
.review .stars { color: var(--red); font-size: 1.1rem; margin: 0 0 10px; letter-spacing: 2px; }
.review p { color: var(--gray-700); font-size: 1.02rem; font-style: italic; }
.review footer { color: var(--gray-500); font-size: 0.9rem; margin-top: 12px; font-style: normal; }

/* ---------- Location ---------- */
.location-grid {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .location-grid { grid-template-columns: 1fr 1.15fr; align-items: start; }
}
.location-info dl { margin: 0 0 24px; }
.location-info .row { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.location-info dt {
  color: var(--red);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 6px;
}
.location-info dd { margin: 0; color: var(--off-white); font-size: 1.05rem; }
.location-info dd a { color: var(--white); text-decoration: underline; text-decoration-color: var(--red); }
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hours th, .hours td { padding: 6px 0; text-align: left; font-weight: 400; color: var(--gray-100); }
.hours th { color: var(--gray-300); width: 60px; }
.location-map {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  aspect-ratio: 4 / 3;
  background: var(--black-elev);
}
.location-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Footer ---------- */
.site-footer {
  background: #060606;
  color: var(--gray-300);
  padding: 56px 0 96px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.footer-inner {
  display: grid; gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) {
  .footer-inner { grid-template-columns: 2fr 1fr 1fr; }
}
.footer-brand img { height: 60px; width: auto; margin-bottom: 12px; }
.footer-tag { color: var(--gray-100); margin: 4px 0; font-weight: 500; }
.footer-address { color: var(--gray-300); }
.footer-links h4 {
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--white);
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-links a {
  display: block; padding: 6px 0;
  color: var(--gray-300);
  transition: color .15s var(--ease);
}
.footer-links a:hover { color: var(--red); }
.footer-legal {
  margin-top: 40px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: var(--gray-500);
  font-size: 0.85rem;
  text-align: center;
}
.footer-legal .tiny { font-size: 0.78rem; margin-top: 6px; }
/* Footer socials visible on the near-black footer: a light ring so TikTok's
   black badge doesn't vanish, and a white badge behind the multicolor Google G. */
.footer-socials-row .social-icon { border: 1px solid rgba(255,255,255,0.3); }
.social-icon--google { background: #fff; }
.social-icon--google svg { width: 26px; height: 26px; }
/* Phones: Explore + Trust side by side (brand + socials full width) so the
   footer is a compact block, not one tall stack. */
@media (max-width: 779px) {
  .site-footer { padding-top: 40px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 24px 18px; align-items: start; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-socials { grid-column: 1 / -1; }
}

/* ---------- Mobile sticky bar ---------- */
.mobile-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--black);
  border-top: 1px solid rgba(255,255,255,0.1);
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 20px rgba(0,0,0,0.4);
}
.mobile-bar a {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 6px;
  color: var(--off-white);
  font-size: 0.75rem;
  font-weight: 600;
  transition: background .15s var(--ease);
}
.mobile-bar a:active { background: rgba(242,106,33,0.2); }
.mobile-bar a span[aria-hidden] { font-size: 1.2rem; }
@media (min-width: 900px) { .mobile-bar { display: none; } }

/* Extra padding on last section for mobile bar clearance */
@media (max-width: 899px) {
  .site-footer { padding-bottom: 110px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

/* =========================================================
   BOOKING & MEMBERSHIP PAGES
   ========================================================= */

.page-book { background: var(--black); color: var(--off-white); }
.book-page { padding-bottom: 180px; }

.book-hero {
  padding: 48px 0 24px;
  text-align: center;
  background: radial-gradient(800px 300px at 50% 0, rgba(242,106,33,0.20), transparent 60%);
}
.book-hero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 12px;
}
.book-hero .lead { color: var(--gray-100); font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

.book-form { padding: 24px 0; display: grid; gap: 40px; }

/* SMS consent blocks (A2P 10DLC). Carrier reviewers must be able to READ the
   disclosure, so these colours are picked by measured contrast against the
   card background (--black-elev #364980), not by brand palette:
     --gray-500 #6E6E6E = 1.70  ✗   --gray-300 #B8B8B8 = 4.37  ✗ (just under AA)
     #E2E8F0            = 8.2   ✓   link #FFB088       = 4.88  ✓
   The brand orange --red #F26A21 is only 2.83 here, so links use the lighter
   #FFB088 instead — same family, actually legible. */
.sms-consent-text { color: #E2E8F0; }
.sms-consent-text a {
  color: #FFB088;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.sms-consent-text a:hover, .sms-consent-text a:focus-visible { color: #FFD0B5; }

.step {
  background: var(--black-elev);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 28px 24px;
  /* Offset so a step scrolled into view via the wizard doesn't land under
     the sticky header. */
  scroll-margin-top: 140px;
  /* Hard clip so nothing inside a step (a carousel card, a badge, long
     text) can ever drag the whole page into horizontal scroll. Safe here —
     unlike html/body, .step is not an ancestor of the sticky header, so
     this can't break position:sticky. */
  overflow-x: hidden;
}
@media (max-width: 480px) {
  /* Tighten the padding stack (.container 20px + .step 24px = 44px eaten
     before card content even starts) so tier-feature text has real room
     instead of wrapping mid-phrase ("Clear Coat" / "Protectant"). */
  .step { padding: 22px 12px; }
}
.step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
/* Always-visible "← Back" at the top of each step so you can return to the menu
   without hunting for the bottom nav (which the sticky Estimate bar can cover). */
.step-back { margin-left: auto; background: transparent; border: 1.6px solid rgba(255,255,255,0.3);
  color: var(--white); border-radius: 999px; padding: 9px 18px; font-weight: 800; font-size: 0.98rem;
  cursor: pointer; white-space: nowrap; }
.step-back:hover { border-color: var(--red); color: var(--red); }
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  background: var(--red); color: var(--white);
  border-radius: 50%;
  font-weight: 700; font-family: var(--font-body);
  box-shadow: 0 6px 16px rgba(242,106,33,0.4);
}
.step h2 { margin: 0; color: var(--white); font-size: 1.4rem; }
.step-hint { color: var(--gray-300); font-size: 0.95rem; margin: -6px 0 18px; }

/* Prominent "price may change in person" callout for detailing bookings.
   Overrides the muted .step-hint look so customers cannot miss it and are not
   surprised by an in-person price adjustment when they arrive at the shop. */
.step-hint.pay-mode-note--alert {
  color: var(--white);
  font-size: 0.98rem;
  line-height: 1.5;
  background: rgba(255, 206, 84, 0.12);
  border: 1px solid rgba(255, 206, 84, 0.5);
  border-left: 4px solid var(--warning);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 2px 0 18px;
}
.step-hint.pay-mode-note--alert strong {
  display: block;
  color: var(--warning);
  font-size: 1.02rem;
  margin-bottom: 4px;
}

/* Card pickers (services, sizes) */
.card-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .card-grid-4 { grid-template-columns: repeat(4, 1fr); } }

.pick-card {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 4px;
  background: var(--black-soft);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 18px 18px;
  color: var(--off-white);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1rem;
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
}
.pick-card:hover { border-color: rgba(242,106,33,0.5); transform: translateY(-2px); }
.pick-card.selected {
  background: linear-gradient(180deg, #1a0508 0%, #14090b 100%);
  border-color: var(--red);
  box-shadow: 0 10px 30px rgba(242,106,33,0.30);
}
.pick-card.featured { border-color: rgba(242,106,33,0.35); }
.pick-title { font-weight: 700; color: var(--white); font-size: 1.05rem; }
.pick-meta { color: var(--gray-300); font-size: 0.88rem; }
.pick-price { color: var(--red); font-family: var(--font-head); font-weight: 900; font-size: 1.4rem; margin-top: 6px; }
.pick-adj { color: var(--gray-100); font-size: 0.9rem; font-weight: 600; margin-top: 6px; }
.pick-badge {
  position: absolute; top: -10px; right: 14px;
  background: var(--red); color: var(--white);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.size-card { align-items: center; text-align: center; }

/* Fields */
.field-grid {
  display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 20px;
}
@media (min-width: 640px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field-full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  color: var(--gray-100); font-size: 0.9rem; font-weight: 600;
}
.field > span em { color: var(--gray-500); font-style: normal; font-weight: 400; margin-left: 6px; }
.field input, .field select {
  background: var(--black); color: var(--off-white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  padding: 14px 14px;
  font: inherit;
  font-size: 16px; /* prevent iOS Safari zoom on focus */
  min-height: 48px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(242,106,33,0.25);
}

/* Big thumb-friendly PIN input */
#auth-pin, #setpw-a, #setpw-b, #auth-password {
  font-size: 18px;
}
#auth-pin {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.5em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 16px 12px 16px 24px; /* rebalance for letter-spacing */
}

/* Add-ons */
.addon-set { border: none; padding: 0; margin: 0 0 22px; }
.addon-set legend {
  color: var(--red); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 700; margin-bottom: 12px; padding: 0;
}
.addon-grid { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .addon-grid { grid-template-columns: repeat(2, 1fr); } }
.addon-card {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  background: var(--black-soft);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
  position: relative;
}
.addon-card:hover { border-color: rgba(242,106,33,0.4); }
.addon-card.checked {
  border-color: var(--red);
  background: linear-gradient(180deg, #1a0508 0%, #14090b 100%);
}
.addon-card input[type="checkbox"] {
  position: absolute; opacity: 0; pointer-events: none;
}
.addon-body { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.addon-icon { grid-row: 1 / span 2; font-size: 1.4rem; align-self: center; }
.addon-name { color: var(--white); font-weight: 700; }
.addon-desc { color: var(--gray-300); font-size: 0.88rem; grid-column: 2; }
.addon-price {
  color: var(--red); font-family: var(--font-head); font-weight: 900; font-size: 1.1rem;
  white-space: nowrap;
}
.addon-featured { border-color: rgba(242,106,33,0.35); }

/* ---------- Booking wizard nav + progress ---------- */
.wizard-progress {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 22px;
}
.wizard-progress-text {
  color: var(--gray-300); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.wizard-progress-track {
  flex: 1; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.1); overflow: hidden;
}
.wizard-progress-fill {
  height: 100%; width: 25%;
  background: linear-gradient(90deg, var(--red), var(--red-deep));
  border-radius: 999px;
  transition: width .3s var(--ease);
}
.wizard-nav {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 28px;
}
.wizard-nav-split { justify-content: space-between; }
.wizard-nav .btn { min-width: 140px; }

/* Persistent running total shown on every wizard step except the final one
   (Your Info & Payment shows the full Total + Book & Pay bar instead). */
.picker-mini-total {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  background: linear-gradient(180deg, rgba(27,42,90,0.85) 0%, var(--black) 100%);
  border: 1px solid rgba(242,106,33,0.35);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.picker-mini-total .summary-label { color: var(--gray-300); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.picker-mini-total .summary-total { color: var(--white); font-family: var(--font-head); font-weight: 900; font-size: 1.5rem; }
/* Figures on the left, the always-visible next-step button on the right, so a
   customer never has to hunt down the page for how to proceed. */
.mini-total-figures { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mini-total-cta { flex: 0 0 auto; padding: 11px 18px; min-height: 46px; font-size: 1rem; white-space: nowrap; }
.mini-total-cta:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* On mobile, pin the running total to the viewport (not the page) so it
   never scrolls away — stacked directly above the fixed Call/Directions/
   Book bar, same idea, always in the same spot regardless of scroll. */
@media (max-width: 899px) {
  .picker-mini-total {
    position: fixed;
    left: 12px; right: 12px;
    /* The Call/Directions/Book bar is ~77px tall (plus the safe-area inset it
       already pads for); sit fully above it with an ~11px gap so this pill's
       orange border is never clipped by that bar. z-index above the bar too. */
    bottom: calc(88px + env(safe-area-inset-bottom));
    margin: 0;
    z-index: 91;
  }
}

/* Collapsible add-ons on the final step — collapsed by default so "Your
   Info & Payment" isn't a wall of checkboxes; tap + to reveal them all as
   a quick add right before paying. */
.addon-collapse { margin: 4px 0 28px; }
.addon-toggle {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  background: var(--black-soft);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 16px 18px;
  color: var(--white);
  font: inherit; font-weight: 700;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.addon-toggle:hover { border-color: rgba(242,106,33,0.5); }
.addon-toggle-plus {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--red); color: var(--white);
  font-size: 1.2rem; line-height: 1; flex-shrink: 0;
  transition: transform .2s var(--ease);
}
.addon-toggle-open .addon-toggle-plus { transform: rotate(45deg); }
.addon-toggle-hint {
  display: block; color: var(--gray-300); font-size: 0.82rem; font-weight: 500; margin-top: 3px;
}
.addon-panel { margin-top: 16px; }
.step-sub { margin: 0 0 22px; }
.step-sub-title { color: var(--white); font-size: 1.1rem; margin: 0 0 12px; }
.addon-featured::after {
  content: "Recommended";
  position: absolute; top: -10px; left: 14px;
  background: var(--red); color: var(--white);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
}

.deposit-explainer {
  color: var(--gray-100); background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.15);
  border-radius: var(--radius);
  padding: 16px 20px; text-align: center;
  font-size: 0.95rem;
}

/* Sticky summary */
.book-summary {
  position: fixed; left: 0; right: 0; bottom: 0;
  background: rgba(6,6,6,0.96);
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 14px 0 calc(14px + env(safe-area-inset-bottom));
  z-index: 100;
  box-shadow: 0 -8px 28px rgba(0,0,0,0.6);
}
.summary-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.summary-lines { display: flex; flex-direction: column; gap: 2px; }
.summary-label { color: var(--gray-300); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.summary-total { color: var(--white); font-family: var(--font-head); font-weight: 900; font-size: 1.8rem; }
.summary-deposit { color: var(--gray-100); font-size: 0.85rem; }
.summary-deposit strong { color: var(--red); }
.book-summary .btn { min-width: 200px; }
.book-summary .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* Tier picker (membership page) */
.tier-grid-picker .tier { cursor: pointer; text-align: left; font-family: var(--font-body); }
.tier-picker.selected {
  border-color: var(--red);
  box-shadow: 0 12px 40px rgba(242,106,33,0.35);
  transform: translateY(-6px);
}
.tier-select {
  display: inline-block; margin-top: 10px;
  color: var(--red); font-weight: 700; font-size: 0.95rem;
}
.tier-picker.selected .tier-select::after { content: " ✓"; }

/* Profile page — "My Wash Credits" card. Renders one group per tier with a
   large remaining-count and per-credit lines below. */
.credit-group {
  background: var(--black-elev);
  border: 1px solid rgba(242,106,33,0.25);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
}
.credit-group-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.credit-group-name {
  font-family: var(--font-head); color: var(--white);
  font-size: 1.2rem;
}
.credit-group-total {
  color: var(--red); font-weight: 700; font-size: 1.1rem;
}
.credit-line {
  color: var(--gray-100); font-size: 0.9rem;
  padding: 4px 0;
}
.credit-line-remaining {
  color: var(--white); font-weight: 700;
}
.credit-line-source {
  color: var(--gray-300); font-size: 0.82rem;
}
.credit-line code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px; border-radius: 4px;
  font-family: monospace; font-size: 0.78rem;
  color: var(--red);
}

/* Homepage-embedded picker — labels between the 3 tier groups
   (Express Washes / Full Details / Ceramic Protection), plus the sticky
   summary bar scoped inside the picker section (unlike the fixed
   .book-summary which was tied to the standalone /book page). */
.picker-group-label {
  color: var(--gray-100);
  font-size: 1.15rem;
  margin: 0 0 24px;
  text-align: center;
  padding: 16px 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(90deg, transparent 0%, rgba(242,106,33,0.10) 50%, transparent 100%);
  letter-spacing: 0.01em;
  /* Force wrapping — defensive, guarantees this line never pushes past the
     viewport edge regardless of how narrow the screen or how long the copy. */
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}
/* The menu NAME is the big, unmistakable heading — older eyes must catch it. */
.picker-group-label strong {
  display: block;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0;
  margin-bottom: 4px;
}
@media (max-width: 480px) {
  .picker-group-label { font-size: 1.02rem; padding: 14px 8px; }
  .picker-group-label strong { font-size: 1.7rem; }
}

/* ---------- Package selector (bold pill grid on tier cards) ----
   "How much do you want?" — displayed as a 2-column grid so each pill
   is big enough to read easily on a phone. Desktop widens to 4 across.
   Big price, prominent SAVE % badge, obvious active state. */
.pkg-chip-row-label {
  display: block;
  color: var(--gray-100);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 18px 0 8px;
  text-align: center;
}
.pkg-chip-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px;
  background: rgba(0,0,0,0.35);
  border-radius: 14px;
  border: 1.5px solid rgba(255,255,255,0.12);
}
.pkg-chip {
  position: relative;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.15);
  border-radius: 11px;
  padding: 14px 10px;
  color: var(--gray-100);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease), transform .18s var(--ease);
  line-height: 1.3;
  min-height: 78px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  text-align: center;
}
.pkg-chip:hover:not(.pkg-chip-active) {
  color: var(--white);
  border-color: rgba(242,106,33,0.4);
  background: rgba(255,255,255,0.05);
}
.pkg-chip-active {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  border-color: var(--red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(242,106,33,0.4), inset 0 -1px 0 rgba(0,0,0,0.15);
  transform: translateY(-1px);
}
.pkg-chip-active .pkg-chip-price,
.pkg-chip-active .pkg-chip-bonus { color: var(--white); }
.pkg-chip-price {
  display: block;
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.15rem;
  color: var(--white);
  letter-spacing: 0;
}
.pkg-chip-bonus {
  display: inline;
  color: var(--red);
  font-size: 0.85rem;
  font-weight: 800;
}
.pkg-chip-save {
  position: absolute;
  top: -9px; right: 8px;
  background: #22C55E;
  color: var(--white);
  font-size: 0.62rem;
  font-weight: 900;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 0 2px var(--black-elev);
  white-space: nowrap;
}
/* Desktop: 4 across when there's more room. */
@media (min-width: 720px) {
  .pkg-chip-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pkg-chip { min-height: 82px; font-size: 0.88rem; }
  .pkg-chip-price { font-size: 1.1rem; }
}
.picker-summary {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  margin-top: 32px;
  background: linear-gradient(180deg, rgba(27,42,90,0.85) 0%, var(--black) 100%);
  border: 1px solid rgba(242,106,33,0.35);
  border-radius: 14px;
  padding: 14px 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.picker-summary-inner {
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.picker-summary .summary-lines { display: flex; flex-direction: column; gap: 2px; }
.picker-summary .summary-label { color: var(--gray-300); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; }
.picker-summary .summary-total { color: var(--white); font-family: var(--font-head); font-weight: 900; font-size: 1.8rem; }
.picker-summary .btn { min-width: 180px; }
.picker-summary .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

/* When the picker is embedded on the homepage, the .book-form has no
   padding-bottom compensation for a fixed summary bar — remove it here so
   the section doesn't have a giant empty gap. */
#book-picker { scroll-margin-top: 100px; }
#book-picker .book-form { padding-bottom: 0; }

/* Reservation confirmation (replaces the picker after a successful reserve). */
.reserve-success { text-align: center; max-width: 520px; margin: 0 auto; padding: 24px 6px 8px; }
.reserve-success-check {
  width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(46,204,113,0.15); border: 2px solid #2ecc71;
  color: #2ecc71; font-size: 2.4rem; font-weight: 900;
}
.reserve-success h2 { color: var(--white); margin: 0 0 14px; }
.reserve-success p { color: var(--gray-100); line-height: 1.55; margin: 0 0 14px; }
.reserve-success .reserve-conf { color: var(--gray-300); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.reserve-success .reserve-conf span {
  display: inline-block; margin-top: 6px; font-family: var(--font-head);
  font-size: 1.6rem; letter-spacing: 0.1em; color: var(--red); font-weight: 900;
}
.reserve-success .btn { margin-top: 10px; }

/* Phone: collapse the tall intro stack so a price card is nearly the first
   thing seen. The section's own padding, the centered head's 56px margin, the
   form's 24px top padding + 40px gap, and the step's padding otherwise total
   ~160px of empty space before "Step 1" and the first card. */
@media (max-width: 719px) {
  #book-picker { padding-top: 30px; padding-bottom: 34px; }
  #book-picker .section-head { margin-bottom: 18px; }
  #book-picker .section-head .lead { font-size: 1rem; margin-top: 8px; }
  #book-picker .book-form { padding-top: 2px; gap: 14px; }
  #book-picker .wizard-progress { margin-bottom: 12px; }
  #book-picker #step-1 { padding-top: 10px; }
  #book-picker .step-header { margin-bottom: 10px; }
}

/* Make details/ceramic detail cards behave like wash tiers when hovered/selected. */
#book-picker .tier[data-service] { cursor: pointer; }
#book-picker .tier[data-service]:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

/* Thanks page */
.thanks-wrap { max-width: 640px; }
.thanks-card {
  background: var(--black-elev);
  border: 1px solid rgba(242,106,33,0.3);
  border-radius: 18px;
  padding: 44px 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), 0 0 60px rgba(242,106,33,0.15);
}
.thanks-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  background: var(--red); color: var(--white);
  border-radius: 50%;
  font-size: 2.6rem; font-weight: 700;
  margin: 0 auto 20px;
  box-shadow: 0 12px 32px rgba(242,106,33,0.5);
}
.thanks-card h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.6rem); margin: 0 0 12px; }
.thanks-summary {
  text-align: left; margin: 28px 0;
  background: var(--black); border-radius: var(--radius);
  padding: 8px 22px;
}
.thanks-summary .row {
  display: grid; grid-template-columns: 1fr auto; gap: 20px;
  padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.thanks-summary .row:last-child { border-bottom: none; }
.thanks-summary dt {
  color: var(--gray-300); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 600; margin: 0;
}
.thanks-summary dd { margin: 0; color: var(--white); font-weight: 600; text-align: right; }
.thanks-note { color: var(--gray-100); margin: 20px 0 24px; }
.thanks-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; }
.thanks-fineprint { color: var(--gray-500); font-size: 0.85rem; }
.thanks-fineprint a { color: var(--red); text-decoration: underline; }

/* Nav aria-current */
.nav a[aria-current="page"] { color: var(--red); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Welcome-back banner (booking/membership) */
.welcome-back {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(242,106,33,0.12);
  border: 1px solid rgba(242,106,33,0.4);
  color: var(--off-white);
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.92rem;
  margin-top: 18px;
}
.welcome-back a { color: var(--red); text-decoration: underline; }

/* Plate row (plate input + lookup button) */
.plate-row { display: flex; gap: 8px; align-items: stretch; }
.plate-row input { flex: 1; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.plate-row .btn { white-space: nowrap; }

/* Date strip (Step 4) */
.date-strip-wrap {
  display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center;
  margin-bottom: 20px;
}
.date-nav {
  background: transparent; color: var(--off-white);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px; padding: 12px 0;
  font-size: 1.4rem; font-weight: 700; cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease);
}
.date-nav:hover:not(:disabled) { background: rgba(242,106,33,0.15); border-color: rgba(242,106,33,0.4); }
.date-nav:disabled { opacity: 0.35; cursor: not-allowed; }

.date-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
}
@media (max-width: 720px) {
  .date-strip { grid-template-columns: repeat(4, 1fr); }
}
.date-cell {
  background: var(--black-soft);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 4px;
  cursor: pointer;
  color: var(--off-white);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-body);
  transition: transform .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
  position: relative;
}
.date-cell:hover:not(:disabled) { transform: translateY(-2px); border-color: rgba(242,106,33,0.5); }
.date-cell.selected {
  background: linear-gradient(180deg, #1a0508, #14090b);
  border-color: var(--red);
  box-shadow: 0 6px 20px rgba(242,106,33,0.3);
}
.date-cell:disabled { opacity: 0.35; cursor: not-allowed; }
.date-day { font-size: 0.72rem; color: var(--gray-300); text-transform: uppercase; letter-spacing: 0.1em; }
.date-num { font-family: var(--font-head); font-size: 1.4rem; font-weight: 900; color: var(--white); line-height: 1; }
.date-avail { font-size: 0.7rem; color: var(--gray-300); margin-top: 2px; }
.date-cell[data-status="open"] .date-avail { color: var(--success); }
.date-cell[data-status="tight"] .date-avail { color: #F5C518; }
.date-cell[data-status="full"] .date-avail { color: #E85A5A; }

/* Slot grid */
.slot-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  min-height: 60px;
}
.slot-empty { color: var(--gray-500); text-align: center; padding: 20px; grid-column: 1 / -1; }
.slot {
  background: var(--black-soft);
  border: 2px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 8px;
  color: var(--off-white);
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s var(--ease), border-color .1s var(--ease), background .1s var(--ease);
}
.slot:hover:not(:disabled) { transform: translateY(-2px); }
.slot.selected {
  background: var(--red); color: var(--white); border-color: var(--red);
  box-shadow: 0 6px 20px rgba(242,106,33,0.4);
}
.slot-available { border-color: rgba(102,221,142,0.4); }
.slot-available:hover { border-color: var(--success); background: rgba(102,221,142,0.1); }
.slot-few-left {
  border-color: rgba(245,197,24,0.5);
  position: relative;
}
.slot-few-left::after {
  content: "few left";
  position: absolute; top: 2px; right: 4px;
  font-size: 0.6rem; color: #F5C518; font-weight: 400;
}
.slot-few-left:hover { background: rgba(245,197,24,0.1); }
.slot-booked {
  opacity: 0.35; cursor: not-allowed;
  text-decoration: line-through;
  color: var(--gray-500);
  border-color: rgba(255,255,255,0.05);
}

/* Form feedback line. Named .coupon-feedback for historical reasons but the
   coupon UI is gone — this class is now reused across the auth/profile forms
   (phone, PIN, password, signup, save) for their inline status messages. */
.coupon-feedback { margin: 10px 0 0; font-size: 0.9rem; min-height: 1.2em; }
.coupon-feedback.ok { color: var(--success); }
.coupon-feedback.err { color: #E85A5A; }

/* Prepay code box (thanks page) */
.prepay-code {
  margin: 24px 0;
  background: linear-gradient(180deg, #1a0508, #14090b);
  border: 2px solid var(--red);
  border-radius: 14px;
  padding: 22px;
  text-align: center;
}
.prepay-code-box {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.14em;
  padding: 14px 20px;
  background: var(--black);
  border-radius: 10px;
  margin: 10px 0;
  display: inline-block;
  min-width: 240px;
  border: 1px dashed rgba(242,106,33,0.5);
}

/* Modal */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 200;
}
@media (max-width: 599px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-inner {
    border-radius: 18px 18px 0 0;
    max-width: none;
    padding-bottom: max(28px, env(safe-area-inset-bottom));
  }
}
.modal[hidden] { display: none; }
.modal-inner {
  background: var(--black-elev);
  border: 1px solid rgba(242,106,33,0.4);
  border-radius: 14px;
  padding: 32px 28px;
  max-width: 460px;
  width: 100%;
  position: relative;
  color: var(--off-white);
}
.modal-inner h3 { color: var(--white); margin: 0 0 12px; font-size: 1.3rem; }
.modal-inner p { margin: 0 0 12px; }
.modal-inner .tiny { color: var(--gray-500); font-size: 0.82rem; margin-bottom: 20px; }
.modal-close {
  position: absolute; top: 10px; right: 12px;
  background: transparent; border: none;
  color: var(--gray-300); font-size: 1.6rem;
  width: 32px; height: 32px; cursor: pointer;
  line-height: 1; padding: 0;
}
.modal-close:hover { color: var(--white); }

/* Profile page — booking cards. (The sibling coupon-card styles were removed
   with the coupon feature; only .bk-item remains, used by the bookings list.) */
.bk-item {
  display: block;
  background: var(--black-soft);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
}
.bk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.bk-title { color: var(--white); font-weight: 700; font-size: 1.05rem; }
.bk-when { color: var(--gray-300); font-size: 0.9rem; }
.bk-total { color: var(--red); font-family: var(--font-head); font-weight: 900; font-size: 1.25rem; }
.bk-addons { color: var(--gray-100); font-size: 0.88rem; margin-top: 6px; }
.bk-code { color: var(--gray-100); font-size: 0.88rem; margin-top: 6px; }
.bk-code code { background: var(--black); color: var(--red); padding: 3px 8px; border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bk-conf { color: var(--gray-500); font-size: 0.78rem; margin-top: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Auth flow (profile page) */
.auth-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

/* ============ Consolidated social sign-in (Google + Apple) ============
   Makes the two social buttons visually identical: same width (Google's GIS
   iframe is measured & sized to the slot in profile.js), same 40px height, same
   pill shape, logo pinned far-left with the label centered. The block is capped
   at 400px (GIS's max width) and centered so it reads as one clean group under
   the phone field — the three sign-in options together. */
.social-signin { width: 100%; max-width: 400px; margin: 20px auto 0; }
.social-divider {
  display: flex; align-items: center; gap: 12px;
  color: var(--gray-400, #9FB4AC); font-size: 0.8rem; letter-spacing: 0.03em;
  text-transform: uppercase; margin: 2px 0 16px;
}
.social-divider::before, .social-divider::after {
  content: ""; flex: 1; height: 1px;
  background: var(--gray-800, #26312e);
}
.social-slots { display: flex; flex-direction: column; gap: 10px; }
.social-slot { width: 100%; min-height: 40px; display: flex; justify-content: center; }
/* Center whatever GIS injects (its iframe/div wrapper) within the slot. */
#gsi-button > div, #gsi-button iframe { margin: 0 auto !important; }

/* Apple button (built in apple-auth.js) — mirrors the GIS pill button. */
.apple-signin-btn {
  position: relative; width: 100%; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; box-sizing: border-box; border-radius: 20px;
  /* #202124 matches Google's GIS filled_black pill exactly so the two buttons
     read as one set (Apple's brand guide allows a near-black button). */
  background: #202124; color: #fff; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  transition: filter 0.15s ease, transform 0.02s ease;
}
.apple-signin-btn:hover { filter: brightness(1.18); }
.apple-signin-btn:active { transform: translateY(1px); }
.apple-signin-btn:disabled { opacity: 0.6; cursor: default; }
.apple-signin-btn .apple-glyph {
  position: absolute; left: 16px; top: 50%; transform: translateY(-52%);
  display: flex; align-items: center;
}
/* Google's GIS button centers its label in the space to the RIGHT of its logo
   tile, so the text sits ~20px right of the true button center. Nudge Apple's
   label the same ~20px so the two labels line up vertically when stacked. */
.apple-signin-btn .apple-label { text-align: center; transform: translateX(20px); }

/* ============ Sign-in page density (.profile-signin only) ============
   The sign-in page is the #1 conversion surface — impatient and older customers
   must see the phone field, Continue, AND the Google/Apple options WITHOUT
   scrolling. Previously a tall hero + a duplicate in-card "Sign in" header +
   a long hint pushed the alternate sign-in methods below the fold. These rules
   compress only this page (scoped by .profile-signin); the booking page's shared
   .book-hero/.book-form are untouched. */
.profile-signin .book-hero { padding: 24px 0 10px; }
.profile-signin .book-hero .eyebrow { margin-bottom: 4px; }
.profile-signin .book-hero h1 { font-size: clamp(1.7rem, 6vw, 2.4rem); margin-bottom: 6px; }
.profile-signin .book-hero .lead { font-size: 0.98rem; }
.profile-signin .book-form { padding-top: 10px; gap: 18px; }
.profile-signin.book-page { padding-bottom: 64px; }
/* Hero already says "Sign In" — drop the duplicate header inside the card. */
.profile-signin #auth-phone-step .step-header { display: none; }
.profile-signin #auth-phone-step .step-hint { margin: 0 0 12px; }
.profile-signin #auth-phone-step .auth-cta { margin-top: 12px; }
.profile-signin #auth-phone-step .social-signin { margin-top: 12px; }
.profile-signin #auth-phone-step .social-divider { margin: 2px 0 12px; }
/* Empty error paragraphs reserve blank vertical space before the SMS consent
   block — collapse them until they actually hold an error message. */
.profile-signin #auth-phone-step .coupon-feedback:empty { margin: 0; }

@media (max-width: 640px) {
  /* Reclaim more vertical space on phones specifically. */
  .profile-signin .book-hero { padding: 16px 0 6px; }
  .profile-signin .book-hero .lead { font-size: 0.9rem; max-width: 340px; }
  .profile-signin .book-form { padding-top: 6px; gap: 14px; }
}
.demo-pin-notice {
  background: rgba(245,197,24,0.08);
  border: 1px dashed rgba(245,197,24,0.5);
  color: #F5C518;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  margin: 12px 0;
}
.demo-pin-notice code.pin-code {
  display: inline-block;
  background: #0A0A0A; color: var(--white);
  font-size: 1.2rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 4px 10px;
  border-radius: 6px;
  margin: 0 4px;
  letter-spacing: 0.14em;
}

/* Guest / save-profile toggle (booking page) */
.save-profile-wrap { margin-top: 24px; }
.save-profile-toggle {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  padding: 14px 16px;
  background: var(--black-elev);
  border: 1px dashed rgba(242,106,33,0.4);
  border-radius: var(--radius);
  cursor: pointer;
  align-items: start;
}
.save-profile-toggle input[type="checkbox"] {
  width: 22px; height: 22px; accent-color: var(--red); margin-top: 2px;
}
.save-profile-title { display: block; color: var(--white); font-weight: 600; margin-bottom: 4px; }
.save-profile-badge {
  display: inline-block;
  background: rgba(242,106,33,0.15); color: var(--red);
  font-size: 0.72rem; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
}
.save-profile-desc { color: var(--gray-300); font-size: 0.88rem; }

/* Prepay barcode graphic */
.prepay-bars {
  display: block;
  width: 100%;
  height: 40px;
  color: var(--white);
  margin: 10px 0;
  max-width: 320px;
  margin-left: auto; margin-right: auto;
}

/* Guest signup nudge on thanks page */
.guest-signup-nudge {
  margin: 20px auto;
  padding: 16px 20px;
  background: rgba(242,106,33,0.1);
  border: 1px dashed rgba(242,106,33,0.4);
  border-radius: 12px;
  text-align: center;
  max-width: 460px;
}
.guest-signup-nudge p { margin: 0 0 6px; }
.guest-signup-nudge .tiny { color: var(--gray-300); margin-bottom: 10px; }

/* Roadmap section (home page) */
.roadmap-grid {
  display: grid; gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .roadmap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .roadmap-grid { grid-template-columns: repeat(3, 1fr); } }
.roadmap-item {
  background: var(--black-elev);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 18px 18px;
  display: flex; align-items: flex-start; gap: 12px;
}
.roadmap-item .icon {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(242,106,33,0.15); border: 1px solid rgba(242,106,33,0.4);
  border-radius: 8px; font-size: 1.05rem;
}
.roadmap-item h4 {
  color: var(--white); font-family: var(--font-body);
  font-size: 0.98rem; font-weight: 700; margin: 0 0 4px;
}
.roadmap-item p { color: var(--gray-300); font-size: 0.86rem; margin: 0; }


/* ---- Scannable QR (prepay redemption) ---- */
/* A QR needs dark modules on a light quiet zone to scan reliably, so the card
   is always white regardless of the page theme. Encodes a /crew?code= deep
   link; see public/qr.js. Replaced the old cosmetic barcode on /thanks. */
.qr-card {
  display: inline-block; background: #fff; padding: 12px;
  border-radius: 12px; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  text-align: center; line-height: 0;
}
.qr-card svg { width: 200px; height: 200px; display: block; }
.qr-card-label {
  line-height: 1.2; margin-top: 8px; color: #111;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem; font-weight: 700; letter-spacing: 1px;
}
.qr-card-fallback code {
  font-size: 1.1rem; color: #111; letter-spacing: 1px; line-height: 1.4;
}
.qr-mini .qr-card { padding: 8px; box-shadow: none; border: 1px solid rgba(0,0,0,0.1); }
.qr-mini .qr-card svg { width: 120px; height: 120px; }