/* ==========================================================================
   MOBILE CAR CARE - Franchise design system  (rebuilt 2026)
   One coherent stylesheet. Display: Saira Condensed · Body/UI: Inter.
   Photography-forward light base · deep navy as punctuation · racing red for
   action · amber/gold sparingly. No notches, no checkered textures, no hard
   offset shadows, no ambient animation. Built to read like a real franchise.
   ========================================================================== */

/* ------------------------------------------------------------------ Tokens */
:root,
html[data-theme],
html[data-theme="classic"],
html[data-theme="patch"],
html[data-theme="velocity"]{
  /* Brand - Velocity logo palette (black badge · red→violet→blue · gold) */
  --ink:#13131c;          /* rich near-black, faint indigo - text + headings   */
  --navy:#0a0a12;         /* deep luxe near-black - dark sections, header      */
  --navy-2:#181523;       /* secondary dark / gradient stop                    */
  --red:#db2430;          /* logo red - primary action                         */
  --red-dark:#b3151f;
  --violet:#a21fb0;       /* logo magenta-violet                               */
  --blue:#2546d6;         /* logo blue                                         */
  --grad:linear-gradient(100deg,#e0342b 0%,#a51fb0 52%,#2546d6 100%);
  --grad-deep:linear-gradient(122deg,#a81d27 0%,#6f1885 50%,#1c34a6 100%);
  --amber:#e2a63f;        /* gold accent - stars, seals, fine premium lines    */
  --amber-deep:#c2841f;
  --amber-soft:#f6e3bd;

  /* Neutrals */
  --bone:#f7f5ef;         /* warm page background                              */
  --bone-2:#efeadd;       /* alt section background                            */
  --paper:#ffffff;        /* cards / surfaces                                  */
  --body:#4a5562;         /* body copy                                         */
  --muted:#5a636e;        /* secondary text - AA on bone                       */
  --faint:#707985;        /* tertiary / captions                              */
  --line:#ece7dd;         /* fine warm hairline border                        */
  --line-soft:rgba(19,19,28,.07);
  --success:#1c7c42;
  --star:#b8791b;         /* gold stars on light surfaces (AA graphical)       */

  /* Surfaces on dark */
  --on-dark:#f4f1ea;
  --on-dark-soft:rgba(244,241,234,.74);

  /* Type */
  --font-display:'Saira Condensed','Oswald','Arial Narrow',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Radius */
  --r-xs:6px; --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;

  /* Shadow - soft, realistic, layered */
  --sh-sm:0 1px 2px rgba(12,26,40,.06), 0 2px 6px rgba(12,26,40,.05);
  --sh:0 10px 26px rgba(12,26,40,.08), 0 2px 8px rgba(12,26,40,.05);
  --sh-md:0 18px 44px rgba(12,26,40,.12), 0 4px 12px rgba(12,26,40,.06);
  --sh-lg:0 34px 70px rgba(12,26,40,.18), 0 8px 22px rgba(12,26,40,.08);
  --sh-navy:0 24px 60px rgba(7,17,28,.45);

  /* Layout */
  --wrap:1220px; --gutter:24px; --section:clamp(76px,9vw,128px);

  /* legacy aliases still referenced in markup */
  --orange:var(--red); --orange-dark:var(--red-dark);
  --cream:var(--on-dark); --cream2:var(--on-dark-soft);
  --steel:var(--navy-2); --brown:var(--body); --accent2:var(--amber);
  --shadow:var(--sh-md); --radius:var(--r);
}

/* ------------------------------------------------------------------ Reset */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
/* Safety net: the off-canvas mobile nav drawer sits at translateX(105%) when
   closed, which some browsers still count toward the document's scrollable
   width. This keeps that from ever producing real horizontal scroll/rubber-
   banding on a phone. */
body{font-family:var(--font-body);background:var(--bone);color:var(--body);
  font-size:17px;line-height:1.62;font-weight:400;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--red-dark);text-decoration:none}
svg{display:block}
::selection{background:var(--amber-soft);color:var(--ink)}
/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:3px}
.foot-contact a{color:inherit;text-decoration:none}
.foot-contact a:hover{color:#fff}

/* ------------------------------------------------------------- Typography */
h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--ink);line-height:1.05}
h1,h2{font-weight:700;text-transform:uppercase;letter-spacing:.01em}
h1{font-size:clamp(40px,5.6vw,66px);line-height:1.0}
h2{font-size:clamp(29px,3.8vw,46px);line-height:1.04}
h3{font-family:var(--font-body);font-weight:700;font-size:21px;line-height:1.25;
  letter-spacing:-.01em;text-transform:none}
h4{font-family:var(--font-body);font-weight:700;font-size:16px;text-transform:none}
strong{font-weight:700;color:var(--ink)}
.display{font-family:var(--font-display)}

h1 .accent,h2 .accent{
  background:var(--grad);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:#db2430}
@supports (-webkit-background-clip:text) or (background-clip:text){
  h1 .accent,h2 .accent{color:transparent}
}
.cta-band h2 .accent{background:none;-webkit-text-fill-color:#fff;color:#fff}

.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--body);max-width:62ch}
.center{text-align:center}
.center .lead{margin-left:auto;margin-right:auto}
.muted{color:var(--muted)}
.tag-line{font-size:14px;color:var(--muted)}

/* Eyebrow / kicker - small, tracked, subordinate to the headline */
.kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-display);
  font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-dark);margin-bottom:14px}
.kicker::before{content:"";width:28px;height:3px;background:var(--grad);border-radius:3px}
.center .kicker{justify-content:center}
.dark-bg .kicker,.cta-band .kicker,.page-head .kicker{color:var(--amber)}

/* ---------------------------------------------------------------- Layout */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:780px;margin:0 auto;padding:0 var(--gutter)}
section{padding:var(--section) 0}
.section-tight{padding:48px 0}
/* collapse doubled spacing between two consecutive same-background (cream) sections */
section:not(.alt-bg):not(.dark-bg):not(.cta-band):not(.hero):not(.statband):not(.lane-section):not(.member-nudge-sec):not(.member-booking-strip) + section:not(.alt-bg):not(.dark-bg):not(.cta-band):not(.hero):not(.statband):not(.lane-section):not(.member-nudge-sec):not(.member-booking-strip){padding-top:0}
.alt-bg{background:var(--bone-2)}
.dark-bg{background:
  radial-gradient(720px 420px at 86% -6%,rgba(37,70,214,.18),transparent 60%),
  radial-gradient(520px 340px at 4% 106%,rgba(162,31,176,.15),transparent 60%),
  var(--navy);color:var(--on-dark)}
.dark-bg h2,.dark-bg h3{color:#fff}
.dark-bg .lead,.dark-bg p{color:var(--on-dark-soft)}
.mt-0{margin-top:0}.mt-s{margin-top:10px}.mt-l{margin-top:30px}

/* ---------------------------------------------------------------- Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-body);font-weight:600;font-size:15px;line-height:1;
  padding:15px 26px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;
  text-decoration:none;white-space:nowrap;
  transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:0 10px 24px rgba(219,36,48,.28)}
.btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);box-shadow:0 14px 30px rgba(219,36,48,.34)}
.btn-dark{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-dark:hover{background:var(--navy)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--ink);background:rgba(22,33,46,.03)}
/* A full-width button takes its width from its container, so a label too long for one line wraps
   (balanced) inside the button. The extra 4px of line-height comes back out of the vertical padding,
   so a one-line block button keeps the standard .btn height. */
.btn-block{display:flex;width:100%;white-space:normal;text-align:center;text-wrap:balance;
  line-height:calc(1em + 4px);padding:13px 12px}
.btn-lg{padding:17px 32px;font-size:16px}
.btn .ico{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.hero .btn-ghost,.dark-bg .btn-ghost,.page-head .btn-ghost,.cta-band .btn-ghost,
.pricecard .btn-ghost,.info-panel .btn-ghost,.tier-card.premium .btn-ghost,
.mvd-strip .btn-ghost,.statband .btn-ghost{
  background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}
.hero .btn-ghost:hover,.dark-bg .btn-ghost:hover,.page-head .btn-ghost:hover,
.pricecard .btn-ghost:hover,.info-panel .btn-ghost:hover,.tier-card.premium .btn-ghost:hover,
.mvd-strip .btn-ghost:hover,.statband .btn-ghost:hover{
  background:rgba(255,255,255,.12);border-color:#fff}
.cta-band .btn-dark{background:#fff;color:var(--navy);border-color:#fff}
.cta-band .btn-dark:hover{background:var(--bone)}

/* =====================================================================
   HEADER - utility bar + main nav
   ===================================================================== */
.util-bar{background:var(--navy);color:var(--on-dark-soft);font-size:13px}
.util-bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:40px}
.util-bar a{color:var(--on-dark-soft);font-weight:500}
.util-bar a:hover{color:#fff}
.util-left,.util-right{display:flex;align-items:center;gap:16px;min-width:0}
.util-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.util-item svg{width:14px;height:14px;stroke:var(--amber);fill:none;stroke-width:2;flex:none}
.util-stars{color:var(--amber);letter-spacing:1px;font-size:12px}
.util-sep{width:1px;height:14px;background:rgba(255,255,255,.16)}
.util-phone{color:#fff!important;font-weight:700!important}
@media(max-width:860px){.util-bar .hide-sm{display:none}.util-bar .wrap{justify-content:center}}

.site-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease}
.site-header.scrolled{box-shadow:0 10px 30px rgba(12,26,40,.1)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;height:78px}

/* brand lockup (injected by app.js or static) */
.wordmark{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:.01em;
  color:var(--ink);text-decoration:none;text-transform:uppercase;display:inline-flex;align-items:center}
.wordmark .dot{color:var(--red)}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;line-height:1;min-width:0}
/* width-led so a tight nav (tablet, small phones) scales the logo down in proportion */
.brand .logo-img{width:280px;max-width:100%;height:auto;display:block}
.brand .brand-words{display:none;flex-direction:column;line-height:.92}
.brand.show-fallback .logo-img{display:none}
.brand.show-fallback .brand-words{display:flex}
.brand-words .l1{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink)}
.brand-words .l2{font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:.02em;
  text-transform:uppercase;color:var(--red)}
.brand-words .l2 i{font-style:normal;color:var(--muted);font-size:12px;letter-spacing:.04em}
.site-footer .brand-words .l1,.lp-header .brand-words .l1{color:#fff}
.site-footer .brand-words .l2 i,.lp-header .brand-words .l2 i{color:var(--on-dark-soft)}
.brand-mark{flex:none;width:44px;height:44px;border-radius:11px;display:block}

/* nav links */
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
/* nowrap: if the inline nav comes up a few px short just above the drawer breakpoint (a wider
   font render, a classic scrollbar), the width-led logo gives up those px and no label wraps. */
.nav-links>li>a,.dropdown-toggle{font-family:var(--font-body);font-weight:600;font-size:15px;
  color:var(--ink);text-decoration:none;background:none;border:none;cursor:pointer;padding:6px 0;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:color .15s ease}
.nav-links>li>a:hover,.dropdown-toggle:hover,
.nav-links a.active,.nav-dropdown.active-section .dropdown-toggle{color:var(--red)}
.nav-links>li>a.active{position:relative}
.nav-links>li>a.active::after{content:"";position:absolute;left:0;right:0;bottom:-27px;height:3px;background:var(--grad)}
.grad-top{height:3px;background:var(--grad)}
.nav-cta{margin-left:4px}
.nav-cta .btn{padding:12px 22px}
/* .nav-links>li>a strips background/color/border to bare-text nav-link styling (by design,
   for the plain links), but its selector is more specific than the base .btn-primary rule,
   so it was silently winning here too and leaving "Book Now" as plain black text with no
   red fill at all, on every screen size. Restate the button styling at equal-or-higher
   specificity so it always renders as a solid red button, not just glow-free. */
.nav-cta .btn-primary{background:var(--red);color:#fff;border-color:var(--red);box-shadow:none}
.nav-cta .btn-primary:hover{background:var(--red-dark);border-color:var(--red-dark);box-shadow:none}
.nav-toggle{display:none;background:none;border:none;color:var(--ink);cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;font-size:0}
.nav-toggle::before{content:"";width:22px;height:2px;background:currentColor;
  box-shadow:0 -7px 0 currentColor,0 7px 0 currentColor}
.nav-close{display:none}

/* dropdown */
.nav-dropdown{position:relative}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-1px,-1px);transition:transform .2s ease;font-size:0;opacity:.7}
.nav-dropdown:hover .caret,.nav-dropdown.open .caret{transform:rotate(-135deg) translate(-2px,-2px)}
.dropdown-menu{position:absolute;top:calc(100% + 16px);left:-16px;min-width:230px;background:#fff;
  border:1px solid var(--line);border-radius:var(--r);padding:8px;list-style:none;box-shadow:var(--sh-md);
  opacity:0;visibility:hidden;transform:translateY(6px);transition:all .18s ease;z-index:200}
.dropdown-menu::before{content:"";position:absolute;top:-16px;left:0;right:0;height:16px}
.nav-dropdown:hover .dropdown-menu,.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-menu li a{display:block;padding:11px 14px;border-radius:var(--r-xs);color:var(--ink);
  font-size:15px;font-weight:600;text-decoration:none;transition:all .12s ease}
.dropdown-menu li a:hover,.dropdown-menu li a.active{background:var(--bone);color:var(--red)}
.drop-divider{border-top:1px solid var(--line);margin:7px 6px}
.drop-label{display:block;padding:8px 14px 4px;font-family:var(--font-display);font-size:11px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:600}

/* =====================================================================
   HERO - photo-forward
   ===================================================================== */
.hero{position:relative;overflow:hidden;color:var(--on-dark);padding:clamp(54px,6.5vw,94px) 0;
  background:
    radial-gradient(900px 480px at 86% -12%,rgba(37,70,214,.22),transparent 60%),
    radial-gradient(720px 440px at 8% 112%,rgba(162,31,176,.20),transparent 60%),
    radial-gradient(620px 400px at 58% 44%,rgba(219,36,48,.10),transparent 62%),
    linear-gradient(155deg,#0b0b14 0%,#12101e 55%,#0a0a12 100%)}
.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(34px,5vw,68px);align-items:center}
.hero-copy{position:relative;z-index:2}
.hero .flag{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:600;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:#f1ead9;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.16);padding:9px 16px;
  border-radius:var(--r-pill);margin-bottom:24px;backdrop-filter:blur(6px)}
.hero .flag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--grad);
  box-shadow:0 0 0 4px rgba(162,31,176,.22)}
.hero h1{color:#fff;max-width:16ch}
.hero h1 .accent{color:var(--amber)}
.hero .sub{margin-top:20px;max-width:54ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--on-dark-soft)}
.hero .actions{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.hero-proof{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-proof .p-stars{color:var(--amber);letter-spacing:2px;font-size:16px}
.hero-proof .p-text{font-size:14px;color:var(--on-dark-soft)}
.hero-proof .p-dot{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.3)}

.dispatch-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:30px;max-width:560px}
.dispatch-strip span{display:flex;flex-direction:column;gap:3px;padding:14px 16px;border-radius:var(--r-sm);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);font-size:13px;font-weight:500;
  color:var(--on-dark-soft)}
.dispatch-strip strong{font-family:var(--font-display);font-weight:600;font-size:15px;color:var(--amber);
  text-transform:uppercase;letter-spacing:.02em}

/* hero photo */
.hero-art{position:relative;margin:0;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-navy);min-height:380px}
.hero-art img{width:100%;height:100%;min-height:380px;object-fit:cover}
.hero-art figcaption{position:absolute;left:18px;bottom:18px;right:18px;z-index:2;display:flex;
  flex-direction:column;gap:2px;padding:14px 16px;background:rgba(8,18,30,.82);backdrop-filter:blur(6px);
  border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.12);color:#fff}
.hero-art figcaption span{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber)}
.hero-art figcaption strong{font-weight:600;font-size:14.5px;line-height:1.3;color:#fff}
.hero-chip{position:absolute;top:18px;right:18px;z-index:2;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.96);border-radius:var(--r-pill);padding:9px 16px 9px 11px;box-shadow:var(--sh-md)}
.hero-chip .g{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--amber);display:flex;
  align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:15px}
.hero-chip .t{display:flex;flex-direction:column;line-height:1.1}
.hero-chip .t b{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--ink)}
.hero-chip .t s{text-decoration:none;font-size:11px;color:var(--muted);font-weight:500}

/* =====================================================================
   QUICK LANES - overlap cards under hero
   ===================================================================== */
.lane-section{background:transparent;padding:0 0 var(--section)}
.lane-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;transform:translateY(-38px);
  margin-bottom:-38px;position:relative;z-index:5}
.lane-card{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:5px;align-items:start;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  text-decoration:none;color:var(--ink);box-shadow:var(--sh);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.lane-card:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:rgba(207,42,42,.3)}
.lane-card .lane-icon{grid-row:1 / span 3}
.lane-icon{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border-radius:var(--r-sm);background:var(--red);color:#fff;flex:none}
.lane-icon svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8}
.lane-kicker{font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--red-dark)}
.lane-card strong{font-family:var(--font-body);font-weight:700;font-size:19px;color:var(--ink);line-height:1.2}
.lane-card span:last-child{color:var(--muted);font-size:14.5px;line-height:1.5}
.lane-member{border-color:rgba(224,162,58,.4);background:linear-gradient(180deg,#fffdf7,#fff)}
.lane-member .lane-icon{background:var(--navy);color:var(--amber)}

/* =====================================================================
   BRANDS-CARRIED STRIP + TRUST BADGES
   ===================================================================== */
.brands{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0}
.brands .lab{text-align:center;font-family:var(--font-display);font-weight:500;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.brands-row{display:flex;align-items:center;justify-content:center;gap:clamp(22px,5vw,54px);flex-wrap:wrap}
.brands-row .bname{font-family:var(--font-display);font-weight:600;font-size:clamp(17px,2vw,23px);
  letter-spacing:.02em;color:#6b7480;text-transform:uppercase;transition:color .2s ease}
.brands-row .bname:hover{color:var(--ink)}

.badges{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:24px}
.badge{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-pill);
  background:var(--bone);border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--ink)}
.badge svg{width:16px;height:16px;stroke:var(--success);fill:none;stroke-width:2;flex:none}
.dark-bg .badge{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff}

/* area tags - served-town chips (service area) */
.area-tags{display:flex;flex-wrap:wrap;gap:10px}
.area-tag{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:var(--r-pill);
  background:var(--bone);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--ink)}
.area-tag svg{width:15px;height:15px;stroke:var(--red);fill:none;flex:none}

/* =====================================================================
   STAT BAND
   ===================================================================== */
.statband{background:var(--navy);color:#fff;padding:clamp(44px,5vw,64px) 0;position:relative;
  background-image:radial-gradient(760px 360px at 82% 0,rgba(37,70,214,.18),transparent 60%),
    radial-gradient(520px 320px at 8% 100%,rgba(162,31,176,.13),transparent 60%)}
.statband::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad)}
.statband .grid-4{gap:0}
.stat{text-align:center;padding:14px 22px;position:relative}
.stat .big{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4.8vw,56px);line-height:1;color:#fff}
.stat .big .u,.stat .lead-num{color:var(--amber)}
.stat .lab{margin-top:8px;font-size:13.5px;color:var(--on-dark-soft);font-weight:500}
@media(min-width:781px){
  .statband .stat::after{content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:1px;height:54px;background:rgba(255,255,255,.14)}
  .statband .stat:last-child::after{display:none}}

/* =====================================================================
   PAGE HEAD (interior heroes)
   ===================================================================== */
.page-head{position:relative;overflow:hidden;color:var(--on-dark);
  padding:clamp(72px,7.5vw,116px) 0 clamp(60px,6vw,88px);
  background:
    radial-gradient(820px 440px at 88% -16%,rgba(37,70,214,.20),transparent 60%),
    radial-gradient(560px 360px at 4% 122%,rgba(162,31,176,.17),transparent 60%),
    linear-gradient(155deg,#0b0b14,#14111f)}
.page-head::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--grad)}
.page-head h1{color:#fff;max-width:20ch}
.page-head .sub{margin-top:18px;max-width:62ch;color:var(--on-dark-soft);
  font-size:clamp(17px,1.5vw,20px);line-height:1.6}
.page-head .actions{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}

/* =====================================================================
   CARDS + GRIDS
   ===================================================================== */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.card .ic{display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;
  border-radius:var(--r-sm);background:var(--bone-2);color:var(--red);margin-bottom:18px}
.card .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.7}
.card h3{margin-bottom:9px}
.card p{font-size:15.5px;color:var(--body);line-height:1.6}
.card.feature{border-color:rgba(207,42,42,.3);box-shadow:0 14px 40px rgba(207,42,42,.08)}
.card.feature .ic{background:var(--red);color:#fff}
.card.dark{background:var(--navy);border-color:var(--navy);color:#fff}
.card.dark h3{color:#fff}.card.dark p{color:var(--on-dark-soft)}
.card.dark .ic{background:rgba(255,255,255,.08);color:var(--amber)}
.dark-bg .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.dark-bg .card h3{color:#fff}.dark-bg .card p{color:var(--on-dark-soft)}
.dark-bg .card .ic{background:rgba(255,255,255,.07);color:var(--amber)}
.badge-new{display:inline-block;vertical-align:middle;background:var(--red);color:#fff;
  font-family:var(--font-display);font-weight:600;font-size:10px;letter-spacing:.08em;
  padding:3px 8px;border-radius:var(--r-xs);margin-left:8px}
.link-arrow{display:inline-flex;align-items:center;gap:6px;margin-top:16px;color:var(--red-dark);
  font-weight:700;font-size:14.5px}
.link-arrow::after{content:"\2192";transition:transform .15s ease}
.link-arrow:hover::after{transform:translateX(3px)}
/* Card polish: the icon lifts a touch with the card. Smooth, not bouncy. */
.card .ic{transition:transform .25s cubic-bezier(.2,.7,.2,1),background .2s ease,color .2s ease}
.card:hover .ic{transform:scale(1.08)}
@media(prefers-reduced-motion:reduce){
  .card{transition:box-shadow .2s ease,border-color .2s ease}
  .card:hover{transform:none}
  .card:hover .ic{transform:none}
  .link-arrow:hover::after{transform:none}
}

/* lettered ordered list */
ol.lettered{list-style:none;counter-reset:item;margin-top:18px}
ol.lettered>li{counter-increment:item;position:relative;padding-left:44px;margin-top:15px;max-width:64ch}
ol.lettered>li::before{content:counter(item);position:absolute;left:0;top:-1px;width:28px;height:28px;
  border-radius:50%;background:var(--red);color:#fff;font-family:var(--font-display);font-weight:600;
  font-size:14px;display:flex;align-items:center;justify-content:center}
ol.lettered>li strong{color:var(--ink)}
.dark-bg ol.lettered>li strong{color:#fff}
.dark-bg ol.lettered>li::before{background:var(--amber);color:var(--navy)}

/* numbered steps */
.steps{counter-reset:step;display:grid;gap:6px;margin-top:8px}
.step{display:flex;gap:18px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:none}
.step .num{counter-increment:step;flex:none;width:42px;height:42px;border-radius:50%;background:var(--navy);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:18px;display:flex;align-items:center;
  justify-content:center}
.step .num::before{content:counter(step)}
.step .txt strong{display:block;font-family:var(--font-body);font-weight:700;font-size:17px;color:var(--ink)}
.step .txt p{font-size:15px;color:var(--body);margin-top:4px}

/* =====================================================================
   SPLIT / MEDIA
   ===================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,64px);align-items:center}
.media,.media-fig{position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:380px;
  background:linear-gradient(150deg,#0c1a28,#16304a);box-shadow:var(--sh-md)}
.media{display:flex;align-items:center;justify-content:center;color:var(--on-dark-soft);text-align:center;
  padding:30px;font-size:15px}
.media-fig{display:flex;flex-direction:column;align-items:center;justify-content:center}
.media-fig img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media-fig .fig-glow{position:absolute;width:60%;height:60%;border-radius:50%;
  background:radial-gradient(circle,rgba(224,162,58,.18),transparent 70%);top:18%;left:20%;pointer-events:none}
.media-fig .fig-icon{position:relative;z-index:1;width:96px;height:96px;stroke:rgba(255,255,255,.4);fill:none;
  stroke-width:1;opacity:.5}
.media-fig .fig-cam{position:absolute;top:16px;right:16px;width:20px;height:20px;stroke:rgba(255,255,255,.4);
  fill:none;stroke-width:1.5}
.media-fig .fig-label{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--font-display);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500;z-index:1}
.media-fig.has-photo .fig-icon,.media-fig.has-photo .fig-glow,.media-fig.has-photo .fig-cam{display:none}
.media-fig.has-photo .fig-label{background:linear-gradient(0deg,rgba(8,18,30,.85),transparent);
  padding:30px 12px 14px;bottom:0;color:#fff}

/* info panel (a designed alternative to a photo on .split) */
.info-panel{position:relative;border-radius:var(--r-lg);padding:34px;background:var(--navy);color:#fff;
  box-shadow:var(--sh-md);background-image:radial-gradient(500px 280px at 85% 0,rgba(224,162,58,.16),transparent 60%)}
.info-panel h3{color:#fff;font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  letter-spacing:.01em;font-size:24px}
.info-panel .pl{list-style:none;margin-top:18px}
.info-panel .pl li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.1);color:var(--on-dark-soft);font-size:15px}
.info-panel .pl li:last-child{border-bottom:none}
.info-panel .pl li svg{width:20px;height:20px;stroke:var(--amber);fill:none;stroke-width:2;flex:none;margin-top:1px}
.info-panel .pl li b{color:#fff;font-weight:700}
.info-panel .pp{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.info-panel .pp .n{font-family:var(--font-display);font-weight:700;font-size:46px;color:#fff;line-height:1}
.info-panel .pp .u{color:var(--on-dark-soft);font-size:15px}

/* =====================================================================
   TRUST STRIP (slim feature row)
   ===================================================================== */
.trust{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}
.trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.trust .item{padding:26px 28px;border-right:1px solid var(--line);font-size:14px;color:var(--body);line-height:1.5}
.trust .item:last-child{border-right:none}
.trust .item strong{display:block;font-family:var(--font-display);font-weight:600;font-size:18px;color:var(--ink);
  margin-bottom:3px;text-transform:uppercase;letter-spacing:.01em}

/* =====================================================================
   REVIEWS
   ===================================================================== */
.gsum{display:inline-flex;align-items:center;gap:14px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:11px 22px;box-shadow:var(--sh)}
.gsum .gicon{width:24px;height:24px;flex:none}
.gsum .score{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--ink);line-height:1}
.gsum .gstars{color:var(--star);letter-spacing:2px;font-size:14px}
.gsum .gtext{font-size:13px;color:var(--muted);font-weight:500}
.review{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;
  flex-direction:column;transition:transform .2s ease,box-shadow .2s ease}
.review:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.review .stars{color:var(--star);letter-spacing:2px;font-size:16px}
.review p{font-size:16px;color:var(--ink);margin-top:14px;line-height:1.6;flex:1}
.review .who{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-weight:700;font-size:14px;
  color:var(--ink);display:flex;align-items:center;gap:10px}
.review .who .av{width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-weight:600;font-size:14px;color:#fff;
  background:linear-gradient(135deg,var(--navy),var(--navy-2))}
.review .who .nm{display:flex;flex-direction:column;line-height:1.2}
.review .who .nm s{text-decoration:none;font-weight:500;font-size:12px;color:var(--muted)}
.review .who .gicon{margin-left:auto;width:18px;height:18px;flex:none}
/* Reviews: 3-up grid on desktop, swipeable carousel on mobile (keeps the trust
   section short). Edge-to-edge bleed + scroll-snap; next card peeks to signal "more". */
.rc-hint{display:none}
@media(max-width:880px){
  .reviews-carousel{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;
    scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-inline:calc(-1 * var(--gutter));padding:6px var(--gutter) 14px}
  .reviews-carousel::-webkit-scrollbar{display:none}
  /* Descendant (not child) selector: the <reveal> wrapper is display:contents, so the
     .review cards are flex items of the carousel but are still DOM children of <reveal>. */
  .reviews-carousel .review{flex:0 0 84%;scroll-snap-align:start}
  /* Off-screen carousel cards must not stay stuck at the reveal hidden state. The
     <reveal stagger> wrapper fires them as a group when card 1 enters view; this is
     the belt-and-braces so they are visible even if a swipe outpaces the observer. */
  .reviews-carousel .review{opacity:1;transform:none}
  .rc-hint{display:block;text-align:center;margin-top:6px;
    font-size:13px;font-weight:600;color:var(--muted)}
}

/* =====================================================================
   GUARANTEE SEAL
   ===================================================================== */
.seal{display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:184px;height:184px;border-radius:50%;background:var(--navy);
  color:var(--amber);border:3px solid var(--amber);text-align:center;font-family:var(--font-display);font-weight:600;
  line-height:1;padding:22px;flex:none;box-shadow:var(--sh-md)}
.seal .s1{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase}
.seal .s2{font-size:25px;line-height:.92;color:#fff;margin:7px 0;text-transform:uppercase}
.seal .s3{font-size:10.5px;letter-spacing:.08em;color:var(--on-dark-soft);text-transform:uppercase}

/* =====================================================================
   PRICE CARD + CTA BAND
   ===================================================================== */
.pricecard{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:38px;text-align:center;
  box-shadow:var(--sh-md);background-image:radial-gradient(600px 300px at 80% 0,rgba(224,162,58,.16),transparent 60%)}
.pricecard .tag-label{font-family:var(--font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin-bottom:8px}
.pricecard .amt{font-family:var(--font-display);font-weight:700;font-size:58px;line-height:1;color:#fff}
.pricecard .per{font-size:17px;color:var(--on-dark-soft)}
.pricecard .note{margin-top:10px;font-size:14px;color:var(--on-dark-soft)}
.cta-band{position:relative;overflow:hidden;color:#fff;text-align:center;padding:clamp(64px,6.5vw,96px) 0;
  background:
    radial-gradient(900px 520px at 50% -24%,rgba(0,0,0,.30),transparent 62%),
    radial-gradient(700px 400px at 90% 120%,rgba(0,0,0,.22),transparent 60%),
    var(--grad-deep)}
.cta-band::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(255,255,255,.05))}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.92);margin:14px auto 0}
.cta-band .btn-dark{margin-top:28px}

/* =====================================================================
   FORMS
   ===================================================================== */
.form-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:34px;
  box-shadow:var(--sh-md);max-width:680px;margin:0 auto}
.form-row{margin-top:18px}
.form-row:first-child{margin-top:0}
.form-row label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px}
.form-row input,.form-row select,.form-row textarea{width:100%;padding:14px 15px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);font-family:var(--font-body);font-size:16px;color:var(--ink);background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease}
.form-row input::placeholder,.form-row textarea::placeholder{color:var(--faint)}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none;border-color:var(--red);
  box-shadow:0 0 0 4px rgba(207,42,42,.1)}
.help{font-size:14px;color:var(--muted);margin-top:8px}
.demo-note{background:var(--bone-2);border-radius:var(--r-sm);padding:11px 15px;font-size:13px;color:var(--muted);
  margin-top:18px;text-align:center}
.postal{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  box-shadow:var(--sh-md);max-width:520px}
.postal.on-dark{box-shadow:none}
.postal h3{margin-bottom:6px}
.postal .field{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.postal input{flex:1;min-width:170px;padding:14px 15px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  font-family:var(--font-body);font-size:16px;color:var(--ink)}
.postal input:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 4px rgba(207,42,42,.1)}
.result{margin-top:14px;font-size:15px;font-weight:600;display:none}
.result.ok{display:block;color:var(--success)}
.result.no{display:block;color:var(--red-dark)}
.ooa-capture{margin-top:18px;padding-top:18px;border-top:1px solid var(--line);display:none}
.ooa-capture .btn{margin-top:4px}
.ooa-done{margin-top:4px}
.ooa-done-title{font-size:17px;font-weight:800;color:var(--ink);margin-bottom:8px}
.ooa-done .btn{margin-top:14px}

/* =====================================================================
   BOOKING WIDGET
   ===================================================================== */
.stepper{display:flex;gap:6px;margin-bottom:26px;flex-wrap:wrap}
.stepper .s{flex:1;min-width:84px;text-align:center;font-family:var(--font-display);font-weight:500;font-size:11px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:10px;
  border-bottom:3px solid var(--line);transition:all .2s ease}
.stepper .s.active{color:var(--red);border-color:var(--red)}
.stepper .s.done{color:var(--success);border-color:var(--success)}
.book-step{display:none}
.book-step.active{display:block;animation:fadeStep .3s ease}
@keyframes fadeStep{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.book-step h3{margin-bottom:4px}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.svc{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:16px;cursor:pointer;background:#fff;
  text-align:left;transition:all .14s ease}
.svc:hover{border-color:var(--red);transform:translateY(-2px)}
.svc.sel{border-color:var(--red);background:#fff6f4;box-shadow:0 0 0 3px rgba(207,42,42,.1)}
.svc strong{display:block;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink)}
.svc span{font-size:13px;color:var(--muted)}
.svc.member-svc{border-color:rgba(224,162,58,.45);background:linear-gradient(180deg,#fffdf7,#fff)}
.svc.member-svc strong::before{content:"PLAN";display:inline-block;margin-right:7px;padding:2px 6px;
  background:var(--amber);color:#fff;border-radius:4px;font-family:var(--font-display);font-size:9px;
  letter-spacing:.06em;vertical-align:1px}
.svc.onramp-svc{border-color:rgba(219,36,48,.45);background:linear-gradient(180deg,#fff6f4,#fff)}
.svc.onramp-svc strong::before{content:"CONVERT";display:inline-block;margin-right:7px;padding:2px 6px;
  background:var(--red);color:#fff;border-radius:4px;font-family:var(--font-display);font-size:9px;
  letter-spacing:.06em;vertical-align:1px}
.service-grid-direct{max-width:340px}
.svc.direct-svc strong::before{content:"BOOK NOW";display:inline-block;margin-right:7px;padding:2px 6px;
  background:var(--red);color:#fff;border-radius:4px;font-family:var(--font-display);font-size:9px;
  letter-spacing:.06em;vertical-align:1px}
.svc-group-label{margin-top:20px;font-weight:700;color:var(--ink)}
.onramp-note{margin:16px 0 2px;background:var(--navy);color:#fff;border-radius:var(--r);padding:16px 18px;font-size:14px;line-height:1.55}
.onramp-note[hidden]{display:none}
.onramp-note strong{color:#fff}
.bk-lead,.bk-gone{background:rgba(226,166,63,.14);border:1px solid rgba(226,166,63,.4);border-radius:var(--r-sm);
  padding:10px 14px;margin-bottom:12px;color:var(--brown)}
.bk-lead strong{color:var(--ink)}
/* "That time was just booked by someone else": shown when the customer's pick went while they
   filled in their details. See slotTaken() in app.js. */
.bk-gone{color:var(--ink);margin-top:10px}
.bk-gone[hidden]{display:none}
.date-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:8px}
.slot{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 10px;text-align:center;cursor:pointer;
  font-size:14px;background:#fff;color:var(--ink);transition:all .14s ease}
.slot:hover{border-color:var(--red);transform:translateY(-2px)}
.slot.sel{border-color:var(--red);background:#fff6f4;font-weight:700;box-shadow:0 0 0 3px rgba(207,42,42,.1)}
.slot .badge-area{display:block;font-size:10px;font-weight:700;letter-spacing:.02em;margin-top:4px}
.slot.rec{border-color:rgba(28,124,66,.4);background:#f3faf4}
.slot.rec .badge-area{color:var(--success)}
.slot.rec.sel{border-color:var(--red);background:#fff6f4}
.slot.special .badge-area{color:var(--muted)}
/* A day or time somebody already booked. It stays in the grid so nothing jumps around, but it
   is greyed out, says so, and cannot be picked. See markFull() in app.js. */
.slot .badge-full{display:none;font-size:10px;font-weight:700;letter-spacing:.02em;margin-top:4px}
.slot.full,.slot.full:hover{border-color:var(--line);background:var(--bone);color:var(--muted);cursor:not-allowed;
  transform:none;box-shadow:none}
.slot.full .badge-area{display:none}
.slot.full .badge-full{display:block}
/* Arrival times on the half hour. A full day lists up to 19, so they sit tighter than the date
   cards and keep several columns on a phone (two classes, so the phone rule for .date-grid
   below does not stack them). Only times with room for the whole visit are drawn; see
   renderTimes() in app.js. */
.date-grid.time-grid{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px}
.time-grid .slot{padding:10px 6px}
/* Under the times: the two-hour arrival window the picked time opens (showWindow() in app.js). */
.bk-window{margin-top:10px}
.bk-window.set{color:var(--ink);font-weight:600}
.summary{background:var(--bone);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px;margin-top:8px;font-size:15px}
.summary .line{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line)}
.summary .line:last-child{border-bottom:none}
.summary .line .v{font-weight:700;color:var(--ink);text-align:right}
.book-actions{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
.confirm-box{text-align:center;padding:8px 0 4px}
.confirm-box .check{width:64px;height:64px;border-radius:50%;background:var(--success);color:#fff;font-size:32px;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
/* The same confirm panel when the request could not be sent. Red, not green, because
   the customer has to act. See flagSendFailure() in app.js. */
.confirm-box.confirm-failed .check{background:var(--red)}
.confirm-box.confirm-failed h3{color:var(--red-dark)}
.confirm-box .help{text-wrap:pretty}
.confirm-box .add-cal{margin-top:14px}
.confirm-box .add-cal[hidden]{display:none}
.ooa-done.ooa-failed .ooa-done-title{color:var(--red-dark)}
#bk-route{margin-bottom:6px}
.routestrip{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin:10px 0 4px}
.routestrip .rday{background:#fff;border:1px solid var(--line);border-radius:var(--r-xs);padding:9px 4px;text-align:center}
.routestrip .rday .d{display:block;font-family:var(--font-display);font-weight:600;font-size:13px;color:var(--ink)}
.routestrip .rday .z{display:block;margin-top:3px;font-size:9.5px;line-height:1.2;text-transform:uppercase;
  letter-spacing:.02em;color:var(--muted)}
.routestrip .rday.you{border-color:var(--success);background:#f1faf2}
.routestrip .rday.you .z{color:var(--success);font-weight:700}
.req-toggle{margin-top:14px;font-size:14px;color:var(--muted)}
.req-toggle a{color:var(--red-dark);cursor:pointer;text-decoration:underline;font-weight:600}
.req-box{display:none;margin-top:10px;background:var(--bone);border:1px solid var(--line);border-radius:var(--r-sm);padding:16px}
.req-box.open{display:block}
.req-box .help{margin-bottom:14px;text-wrap:pretty}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:8px}
.legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .g{background:#dcf2e0;border:1px solid var(--success)}
.legend .o{background:#fff;border:1px solid var(--line)}

/* =====================================================================
   MEMBERSHIP TIERS
   ===================================================================== */
.tier-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:start;max-width:820px;margin-left:auto;margin-right:auto}
.tier-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:34px 28px;box-shadow:var(--sh)}
.tier-card.popular{border:2px solid var(--red);box-shadow:0 22px 56px rgba(207,42,42,.14);transform:translateY(-8px)}
.tier-card.premium{background:var(--navy);border-color:var(--navy);color:#fff;
  background-image:radial-gradient(500px 260px at 80% 0,rgba(224,162,58,.18),transparent 60%)}
.tier-badge{position:absolute;top:-15px;left:50%;transform:translateX(-50%);white-space:nowrap;background:var(--red);
  color:#fff;font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 18px;border-radius:var(--r-pill)}
.tier-badge.gold{background:var(--amber);color:var(--navy)}
.tier-name{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-dark);margin-bottom:12px}
.tier-card.premium .tier-name{color:var(--amber)}
.tier-price{font-family:var(--font-display);font-weight:700;font-size:56px;line-height:1;color:var(--ink)}
.tier-card.premium .tier-price{color:#fff}
.tier-period{font-size:14px;color:var(--muted);margin-top:4px}
.tier-card.premium .tier-period{color:var(--on-dark-soft)}
.tier-tag{font-size:14.5px;color:var(--body);padding-bottom:20px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.tier-card.premium .tier-tag{color:var(--on-dark-soft);border-color:rgba(255,255,255,.14)}
.tier-includes{display:block;font-family:var(--font-display);font-weight:500;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red-dark);background:rgba(207,42,42,.07);border-radius:var(--r-xs);
  padding:9px 12px;margin-bottom:16px}
.tier-card.premium .tier-includes{background:rgba(224,162,58,.14);color:var(--amber)}
.tier-features{list-style:none;margin:0 0 28px}
.tier-features li{display:flex;gap:11px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;color:var(--ink);line-height:1.45}
.tier-card.premium .tier-features li{color:#fff;border-color:rgba(255,255,255,.1)}
.tier-features li:last-child{border-bottom:none}
.tier-check{flex:none;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;margin-top:1px}
.tier-check.yes{background:#dcf2e0;color:var(--success)}
.tier-card.premium .tier-check.yes{background:rgba(34,197,94,.16);color:#5ad985}
.tier-check.no{background:var(--bone-2);color:var(--faint)}
.tier-wgl-btn{background:#fff;color:var(--navy);border-color:#fff}
.tier-wgl-btn:hover{background:var(--bone)}
.val-stack{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:grid;gap:9px;text-align:left}
.val-row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;font-size:13.5px}
.val-row .vlbl{color:var(--muted)}
.val-row .vamt{font-family:var(--font-display);font-weight:700;font-size:19px;color:var(--red-dark);white-space:nowrap;letter-spacing:.01em}
.val-stack.on-dark{border-color:rgba(255,255,255,.16)}
.val-stack.on-dark .vlbl{color:var(--cream2)}
.val-stack.on-dark .vamt{color:var(--amber)}
.mvd-strip{display:flex;align-items:center;gap:20px;background:var(--navy);color:#fff;border-radius:var(--r-lg);
  padding:26px 30px;margin-top:28px;flex-wrap:wrap;box-shadow:var(--sh-md)}
.mvd-strip .mvd-icon{flex:none;width:56px;height:56px;border-radius:var(--r-sm);background:rgba(224,162,58,.16);
  color:var(--amber);font-family:var(--font-display);font-weight:700;font-size:24px;display:flex;align-items:center;
  justify-content:center}
.mvd-strip .mvd-body{flex:1;min-width:220px}
.mvd-strip .mvd-body strong{display:block;font-family:var(--font-display);font-weight:600;font-size:19px;color:#fff;
  text-transform:uppercase;letter-spacing:.01em}
.mvd-strip .mvd-body p{font-size:14.5px;color:var(--on-dark-soft);margin-top:4px}
.member-booking-strip{padding:clamp(48px,5vw,68px) 0}
.member-booking-grid{display:grid;grid-template-columns:1fr 340px;gap:34px;align-items:center}
.member-booking-grid h2{max-width:680px}
.member-action-card{display:grid;gap:12px;padding:26px;background:var(--paper);border:1px solid var(--line);
  border-left:4px solid var(--red);border-radius:var(--r);box-shadow:var(--sh)}
.member-action-card .lane-icon{background:var(--navy);color:var(--amber)}
.member-action-card strong{font-family:var(--font-body);font-weight:700;font-size:21px;color:var(--ink)}
.member-action-card span:not(.lane-icon){color:var(--muted);font-size:14.5px;line-height:1.5}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 22px;
  margin-top:12px;transition:box-shadow .2s ease}
.faq details[open]{box-shadow:var(--sh)}
.faq summary{cursor:pointer;font-weight:700;font-size:16.5px;color:var(--ink);padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:13px;height:13px;border-right:2.5px solid var(--red);
  border-bottom:2.5px solid var(--red);transform:rotate(45deg) translateY(-3px);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p{color:var(--body);font-size:15.5px;padding:0 0 18px;line-height:1.6}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer{background:var(--navy);color:var(--on-dark-soft);padding:64px 0 30px;font-size:14.5px;
  border-top:3px solid var(--red)}
.foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1.4fr;gap:40px}
.site-footer .wordmark,.site-footer .brand{color:#fff;margin-bottom:14px}
.site-footer .wordmark .dot{color:var(--red)}
.site-footer p{max-width:320px;color:var(--on-dark-soft);line-height:1.6}
.foot-col h4{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--amber);margin-bottom:16px}
.foot-col ul{list-style:none}
.foot-col li{margin-top:10px}
.foot-col a{color:var(--on-dark-soft);text-decoration:none;transition:color .12s ease}
.foot-col a:hover{color:#fff}
.foot-contact{display:flex;flex-direction:column;gap:11px;margin-top:4px}
.foot-contact .fc{display:flex;align-items:flex-start;gap:10px;color:var(--on-dark-soft)}
.foot-contact .fc svg{width:17px;height:17px;stroke:var(--amber);fill:none;stroke-width:1.8;flex:none;margin-top:2px}
.foot-contact .fc b{color:#fff;font-weight:700;display:block}
.foot-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.foot-badges .badge{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);color:#fff;font-size:12px;padding:7px 12px}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:44px;padding-top:22px;display:flex;
  justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:13px;color:var(--faint)}
.foot-bottom a{color:var(--faint)}
.foot-bottom a:hover{color:#fff}

/* =====================================================================
   MOBILE STICKY CTA
   ===================================================================== */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:1fr auto;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);
  backdrop-filter:blur(10px);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(12,26,40,.1)}
.sticky-cta .btn{width:100%;padding:14px 10px;font-size:15px}
.sticky-cta .call{width:52px;flex:none;background:var(--bone);color:var(--ink);border:1px solid var(--line)}
.sticky-cta .call svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:2}

/* =====================================================================
   GRAND-SLAM / OFFER bits (landing pages)
   ===================================================================== */
.include-head{font-family:var(--font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:10px}
.include-list{list-style:none}
.include-list li{position:relative;padding:13px 0 13px 34px;border-bottom:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:16px}
.include-list li:last-child{border-bottom:none}
.include-list li::before{content:"";position:absolute;left:0;top:15px;width:18px;height:18px;border-radius:50%;
  background:rgba(34,197,94,.18);box-shadow:inset 0 0 0 1.5px #4ade80}
.include-list li::after{content:"";position:absolute;left:6px;top:19px;width:6px;height:3px;
  border-left:2px solid #4ade80;border-bottom:2px solid #4ade80;transform:rotate(-45deg)}
.compare-box{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);
  padding:20px 24px;margin-top:24px}
.compare-head{font-family:var(--font-display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-soft);margin-bottom:12px}
.compare-line{display:flex;justify-content:space-between;align-items:center;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.08);font-size:14.5px;color:var(--on-dark-soft)}
.compare-line:last-child{border-bottom:none}
.compare-line .val{text-decoration:line-through;opacity:.6;color:#fff;font-weight:600}
.compare-line .num{color:#fff;font-weight:600}

/* Membership section (homepage #membership): two-col "why" + price-anchor card */
.mem-grid{display:grid;grid-template-columns:1fr;gap:26px;align-items:center;text-align:left;margin-top:34px}
@media(min-width:840px){.mem-grid{grid-template-columns:1.04fr .96fr;gap:46px}}
.mem-grid .include-list{max-width:none}
.mem-grid .include-head{margin-bottom:14px}
.mem-anchor{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r);padding:26px 26px 22px;box-shadow:0 26px 64px rgba(0,0,0,.36)}
.mem-anchor .compare-head{margin-bottom:14px}
.mem-anchor-total{margin-top:2px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);
  border-bottom:none;font-size:15px;color:#fff}
.mem-anchor-total span:last-child{font-weight:700}
.mem-anchor-plan{margin-top:18px;padding:18px 20px;border-radius:calc(var(--r) - 5px);
  background:linear-gradient(180deg,rgba(219,36,48,.17),rgba(219,36,48,.05));
  border:1px solid rgba(219,36,48,.4)}
.mem-price{font-family:var(--font-display);font-size:40px;line-height:1;color:#fff;font-weight:800}
.mem-price span{font-size:16px;font-weight:600;color:var(--on-dark-soft);margin-left:3px}
.mem-anchor-plan p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--on-dark-soft)}
.mem-anchor-plan p b{color:#fff}
.mem-reassure{margin-top:14px;font-size:13px;color:var(--on-dark-soft);text-align:center}
.mem-reassure strong{color:#fff}
#membership{padding-top:clamp(44px,5.5vw,68px);padding-bottom:clamp(44px,5.5vw,68px)}
#membership .mem-grid{align-items:start;margin-top:0}
#membership .lead{font-size:clamp(15.5px,1.35vw,18px)}
@media(max-width:839px){
  #membership .mem-grid{gap:22px}
  #membership .lead{margin-bottom:18px}
}
@media(max-width:560px){.mem-anchor{padding:20px 18px 18px}}
body.lp-body .sticky-cta{display:none!important}
.lp-header{background:var(--navy);padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.lp-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.lp-phone{color:#fff;font-weight:700;font-size:16px}
.lp-foot{background:var(--navy);color:var(--on-dark-soft);text-align:center;padding:26px var(--gutter);font-size:13px}
.lp-foot a{color:var(--on-dark-soft)}

/* legacy theme switch - retired */
.theme-switch{display:none!important}

/* =====================================================================
   MOTION (scroll-reveal only)
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){
  /* Initial hidden state for every reveal target. The CSS transition below is the
     fallback path used when JS is off or Motion fails to load: app.js flips .in and
     these animate. When Motion loads it sets html.reveal-motion and drives the
     timeline itself, so the transition is switched off to avoid a double animation. */
  .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}
  .reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}
  html.reveal-motion .reveal{transition:none}
}

/* <reveal> component: a layout-neutral wrapper. Its children sit directly in the
   parent flow or grid, so wrapping a grid's cards or a heading cluster changes no layout. */
reveal{display:contents}

/* Lenis smooth scroll. Native smooth is turned off so Lenis is the single source of motion. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto !important}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media(max-width:980px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:32px}
  .hero-layout{grid-template-columns:1fr;gap:36px}
  .hero-art,.hero-art img{min-height:320px}
  .member-booking-grid{grid-template-columns:1fr}
}
@media(max-width:880px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:1fr}
  /* minmax(0,1fr): a bare 1fr track can't shrink below its widest child, so one wide item
     would push the whole stacked column into the right gutter. */
  .split{grid-template-columns:minmax(0,1fr)}
  .tier-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .tier-card.popular{transform:none}
  .trust .row{grid-template-columns:repeat(2,1fr)}
  .trust .item:nth-child(2){border-right:none}
  .trust .item:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
/* .grid-2 has no other collapse point (unlike grid-3/grid-4 above), so two-up
   icon+copy cards (about/battery/book/detailing/tires) stay jammed into two
   narrow columns all the way down to a phone. Stack them on small screens. */
@media(max-width:640px){.grid-2{grid-template-columns:1fr}}
@media(max-width:780px){
  .statband .grid-4{grid-template-columns:repeat(2,1fr);gap:10px}
  .lane-grid{grid-template-columns:1fr;transform:none;margin:24px 0 0}
  .lane-section{padding-bottom:48px}
}
/* Nav drawer, phones and portrait tablets. The inline nav needs about 890px (the 280px logo
   plus five links), so at 900px and below the links move into the off-canvas drawer and the
   header keeps the full logo on one line. app.js reads drawer mode from .nav-toggle's display,
   so this breakpoint lives here only. */
@media(max-width:900px){
  .nav-toggle{display:inline-flex}
  /* backdrop-filter on .site-header creates a containing block for fixed-position
     descendants, which traps the full-height off-canvas .nav-links inside the
     header's own (short) box instead of the viewport. Drop it while the drawer is
     open and while it slides shut (app.js holds .nav-open for both), so .nav-links
     positions against the viewport the whole time. */
  .site-header.nav-open{backdrop-filter:none}
  .nav-links{position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);z-index:120;background:#fff;
    flex-direction:column;align-items:stretch;gap:0;padding:84px 22px 30px;box-shadow:-20px 0 50px rgba(12,26,40,.2);
    transform:translateX(105%);visibility:hidden;
    transition:transform .28s cubic-bezier(.4,0,.2,1),visibility .28s;overflow-y:auto;display:flex}
  .nav-links.open{transform:translateX(0);visibility:visible}
  .nav-links>li{width:100%;border-bottom:1px solid var(--line)}
  .nav-links>li>a,.dropdown-toggle{display:flex;width:100%;justify-content:space-between;padding:16px 0;font-size:16px}
  .nav-links a.active::after{display:none}
  /* .nav-links>.nav-cta outranks the .nav-links>li border above (a bare .nav-cta lost to it
     and left a hairline under Book Now) */
  .nav-links>.nav-cta{margin:18px 0 0;border-bottom:none}
  .nav-cta .btn{width:100%}
  /* The open drawer covers the hamburger, so it carries its own close button (app.js adds it).
     right:11px lines the X up with the 22px padding edge the menu rows end on. */
  .nav-links>.nav-close{display:block;position:absolute;top:17px;right:11px;width:auto;border-bottom:none}
  .nav-close button{position:relative;display:block;width:44px;height:44px;background:none;border:none;
    color:var(--ink);cursor:pointer}
  .nav-close button::before,.nav-close button::after{content:"";position:absolute;left:11px;top:21px;
    width:22px;height:2px;background:currentColor;transform:rotate(45deg)}
  .nav-close button::after{transform:rotate(-45deg)}
  .dropdown-menu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:none;
    background:var(--bone);padding:4px;margin:0 0 12px;display:none}
  .nav-dropdown.open .dropdown-menu{display:block}
  .nav-dropdown:hover .dropdown-menu{opacity:1;visibility:visible}
  .caret{transform:rotate(45deg)}
}
@media(max-width:720px){
  .sticky-cta{display:grid}
  /* Motion-enhanced: hidden until the hero scrolls away (Motion animates the slide;
     these classes guarantee the resting/shown end states even if the animation is cut). */
  .sticky-cta.cta-enhanced{transform:translateY(130%)}
  .sticky-cta.cta-enhanced.cta-shown{transform:none}
  body:not(.lp-body){padding-bottom:84px}
  .hero .actions .btn{flex:1;min-width:0}
  .dispatch-strip{grid-template-columns:1fr;max-width:none}
  .trust .row{grid-template-columns:1fr}
  .trust .item{border-right:none;border-bottom:1px solid var(--line)}
  .trust .item:last-child{border-bottom:none}
  .foot-grid{grid-template-columns:1fr}
  .mvd-strip{flex-direction:column;align-items:flex-start;text-align:left}
  .book-actions .btn{flex:1}
}
@media(max-width:480px){
  body{font-size:16px}
  .form-card{padding:24px}
  .card{padding:24px}
  .service-grid,.date-grid{grid-template-columns:1fr}
  .statband .grid-4{grid-template-columns:1fr}
  .routestrip{grid-template-columns:repeat(3,1fr)}
  .routestrip .rday .z{font-size:10.5px}
  .brand-mark{width:40px;height:40px}
  .brand-words .l1,.brand-words .l2{font-size:17px}
}

/* =====================================================================
   MEMBER NUDGE - inline prompt to join membership from one-off pages
   ===================================================================== */
.member-nudge-sec{padding:clamp(28px,3.4vw,46px) 0}
.member-nudge{display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--red);
  border-radius:var(--r-lg);padding:26px 32px;box-shadow:var(--sh)}
.member-nudge .mn-body{flex:1;min-width:260px}
.member-nudge .mn-badge{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep);background:rgba(226,166,63,.15);
  border-radius:var(--r-pill);padding:5px 13px;margin-bottom:13px}
.member-nudge .mn-badge::before{content:"\2605";font-size:11px;line-height:1}
.member-nudge h3{font-family:var(--font-display);font-weight:700;
  font-size:clamp(20px,2.1vw,25px);line-height:1.12;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:0}
.member-nudge p{font-size:15px;line-height:1.55;color:var(--body);margin:9px 0 0;max-width:58ch}
.member-nudge p .save{color:var(--ink);font-weight:700}
.member-nudge .btn{flex:none;align-self:center;white-space:nowrap}
@media(max-width:640px){
  .member-nudge{padding:24px 22px}
  .member-nudge .btn{width:100%}
}

/* =====================================================================
   ADD-ONS: solo hero · ghost graphics · brand ticker · media · tier expander
   ===================================================================== */

/* Solo hero (no photo) */
.hero-solo .wrap{position:relative;z-index:1}
.hero-solo .hero-copy{max-width:820px}
.hero-solo .sub{max-width:62ch}
.hero-solo .dispatch-strip{max-width:720px}

/* Ghosted automotive wheel watermark behind sections */
.ghosted{position:relative;overflow:hidden}
.ghosted>*{position:relative;z-index:1}
.ghosted::after{content:"";position:absolute;right:-60px;bottom:-80px;width:min(440px,46vw);height:min(440px,46vw);
  opacity:.05;pointer-events:none;z-index:0;background:no-repeat center/contain;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20240%20240'%20fill='none'%20stroke='white'%3E%3Ccircle%20cx='120'%20cy='120'%20r='112'%20stroke-width='3'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='72'%20stroke-width='3'/%3E%3Ccircle%20cx='120'%20cy='120'%20r='46'%20stroke-width='3'/%3E%3Cg%20stroke-width='10'%3E%3Cpath%20d='M120%2012v40M120%20188v40M12%20120h40M188%20120h40M48%2048l28%2028M192%2048l-28%2028M48%20192l28-28M192%20192l-28-28'/%3E%3C/g%3E%3C/svg%3E")}
.hero-solo.ghosted::after{top:50%;bottom:auto;right:-70px;transform:translateY(-50%);
  width:min(580px,54vw);height:min(580px,54vw);opacity:.06}
.cta-band.ghosted::after,.dark-bg.ghosted::after{opacity:.06}
@media(max-width:760px){.ghosted::after{opacity:.04;width:300px;height:300px;right:-90px}}

/* Brand ticker (monochrome wordmarks scrolling) */
.brand-ticker{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.brand-track{display:flex;align-items:center;gap:clamp(34px,6vw,74px);width:max-content;
  animation:brandscroll 72s linear infinite}
.brand-ticker:hover .brand-track{animation-play-state:paused}
@keyframes brandscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.brand-track .bname{font-family:var(--font-display);font-weight:600;font-size:clamp(18px,2vw,27px);
  letter-spacing:.04em;color:#7a818c;text-transform:uppercase;white-space:nowrap;flex:none;transition:color .2s ease}
.brand-track .bname:hover{color:var(--ink)}
/* Logo version: each --h is sized off the logo's aspect so wide and compact marks read at a similar weight.
   Muted to one flat grey; full colour on hover. Michelin keeps its white Bibendum, so it greys instead of flattening. */
.brand-track .brand-dup{display:contents}
.brand-track .blogo{--bs:1;display:block;flex:none;width:auto;height:calc(var(--h) * var(--bs));
  filter:brightness(0) opacity(.42);transition:filter .2s ease}
.brand-track .blogo[src$="michelin.svg"]{filter:grayscale(1) contrast(1.4) brightness(.8) opacity(.6)}
.brand-track .blogo:hover{filter:none}
@media(max-width:760px){.brand-track .blogo{--bs:.8}}
@media(prefers-reduced-motion:reduce){
  .brand-track .brand-dup{display:none}
  .brand-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:clamp(20px,4vw,48px)}
  .brand-ticker{-webkit-mask:none;mask:none}
}

/* =====================================================================
   TRUST STRIP — scrolling review snippets (data-driven, pause on hover)
   ===================================================================== */
.review-strip{background:var(--bone-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(26px,3.4vw,40px) 0}
.review-strip .rs-eyebrow{text-align:center;font-family:var(--font-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:var(--muted);margin-bottom:clamp(16px,2vw,24px)}
.review-strip .rs-eyebrow b{color:var(--ink)}
.review-strip .rs-eyebrow .star{color:var(--star)}
[data-review-marquee]{display:block;min-height:210px}             /* reserve the rendered pill height before JS injects: no layout shift */
.review-ticker{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.review-track{display:flex;align-items:stretch;gap:18px;width:max-content;padding:4px 0;
  animation:reviewscroll 56s linear infinite}
.review-ticker:hover .review-track,.review-ticker:focus-within .review-track{animation-play-state:paused}
@keyframes reviewscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.review-pill{flex:none;width:min(330px,82vw);background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-sm);padding:17px 20px;display:flex;flex-direction:column;gap:7px}
.review-pill .rp-stars{color:var(--star);font-size:13.5px;letter-spacing:.06em}
.review-pill .rp-quote{margin:0;font-size:14.5px;line-height:1.5;color:var(--body);
  display:-webkit-box;-webkit-line-clamp:5;line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.review-pill .rp-who{font-size:12.5px;font-weight:600;color:var(--ink)}
@media(prefers-reduced-motion:reduce){
  /* No auto-scroll: keep one row the user can scroll by hand, so the reserved height
     still holds (a wrapped multi-row layout would blow past it and shift the page). */
  .review-ticker{-webkit-mask:none;mask:none;overflow-x:auto}
  .review-track{animation:none;width:max-content;padding-bottom:6px}
  .review-track .review-pill[aria-hidden]{display:none}
}

/* =====================================================================
   MOBILE MODEL — "we come to you": service-area map + steps + coverage
   ===================================================================== */
.mm-map{position:relative;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
  background:#e9eaed;box-shadow:var(--sh-md);
  display:flex;align-items:center;justify-content:center;padding:0}
.mm-map::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--grad);z-index:1}
.mm-map>svg{width:100%;height:auto;display:block}
.mm-map-real{aspect-ratio:560/440;display:block}
.mm-map-real iframe{width:100%;height:100%;display:block}
/* Service-area map (assets/service-map.js): own stacking context so the chip and gradient bar sit on top */
.svc-map{position:absolute;inset:0;z-index:0;background:#e9eaed;font-family:var(--font-body)}
.svc-map .leaflet-tile-pane{filter:saturate(.35) contrast(.95) brightness(1.03)}
.svc-map .leaflet-control-attribution{font-size:10px;background:rgba(255,255,255,.8)}
.mm-map-chip{position:absolute;left:14px;bottom:14px;z-index:2;background:#fff;padding:6px 14px;border-radius:13px;
  font-size:12px;font-weight:600;letter-spacing:.2px;color:#5f6368;box-shadow:0 1px 4px rgba(0,0,0,.18);
  display:flex;align-items:center;gap:6px}
.mm-steps{display:flex;flex-direction:column;gap:clamp(14px,2vw,20px)}
.mm-step{display:flex;gap:17px;align-items:flex-start}
.mm-num{flex:none;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff;background:var(--navy);position:relative}
.mm-num::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1px solid var(--line)}
.mm-step:nth-child(2) .mm-num{background:var(--red)}      /* spotlight the mobile value: "we come to you" */
.mm-step-body h3{margin:0 0 3px;font-size:20px}
.mm-step-body p{margin:0;font-size:15px;line-height:1.55;color:var(--body)}
.mm-coverage{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,3.5vw,48px);align-items:center;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:clamp(26px,3vw,42px)}
.mm-coverage h3{font-size:clamp(22px,2.4vw,28px);margin:6px 0 8px}
.mm-coverage h3 .accent{color:var(--red)}
.mm-coverage p{font-size:15.5px;color:var(--body);line-height:1.6}
.mm-coverage .area-tags{margin-top:18px}
.mm-coverage .postal{box-shadow:none;max-width:none;background:var(--bone);border-color:var(--line)}
@media(max-width:880px){
  .mm-coverage{grid-template-columns:1fr;gap:24px}
}

/* =====================================================================
   SKIP-TO-CONTENT LINK (a11y) + partial-star rating
   ===================================================================== */
/* Aggregate rating shown as a real 4.4 (88% fill) instead of five full stars.
   Uses currentColor so it inherits the amber/star color of whatever context it's in. */
.rstars{position:relative;display:inline-block;vertical-align:middle;white-space:nowrap;line-height:1}
.rstars::before{content:"★★★★★";color:currentColor;opacity:.30}
.rstars::after{content:"★★★★★";color:currentColor;position:absolute;left:0;top:0;width:88%;overflow:hidden}
.skip-link{position:fixed;top:10px;left:10px;z-index:200;background:var(--navy);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:14px;padding:11px 18px;border-radius:var(--r-sm);
  text-decoration:none;box-shadow:var(--sh-md);transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0);outline:3px solid var(--blue);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}

/* =====================================================================
   SERVICE MENU (homepage services & pricing, scannable rows)
   ===================================================================== */
.svc-menu{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.svc-row{display:flex;align-items:center;gap:15px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:15px 18px;text-decoration:none;
  transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease}
.svc-row:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--sh)}
.svc-ic{flex:none;width:42px;height:42px;border-radius:11px;background:var(--bone-2);color:var(--red);
  display:inline-flex;align-items:center;justify-content:center}
.svc-ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.svc-text{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.svc-text b{font-size:16px;color:var(--ink)}
.svc-text i{font-style:normal;font-size:13px;color:var(--muted);line-height:1.35}
.svc-price{flex:none;font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);white-space:nowrap}
.svc-price.quote{font-family:var(--font-body);font-weight:600;font-size:12.5px;color:var(--muted)}
@media(max-width:680px){.svc-menu{grid-template-columns:1fr}}

/* =====================================================================
   VISIT COST ESTIMATOR
   ===================================================================== */
.est{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-md);
  padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;gap:22px;text-align:left}
.est-group{display:flex;flex-direction:column;gap:11px}
.est-label{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  font-size:13px;color:var(--muted)}
.est-opts{display:grid;gap:10px;grid-template-columns:1fr}
.est-opts-2{grid-template-columns:1fr 1fr}
.est-live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.est-opt{text-align:left;background:var(--bone);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:14px 16px;cursor:pointer;display:flex;flex-direction:column;gap:3px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.est-opt:hover{border-color:var(--red)}
.est-opt.sel{border-color:var(--red);background:#fff6f4;box-shadow:0 0 0 3px rgba(207,42,42,.08)}
.est-opt strong{font-size:16px;color:var(--ink)}
.est-opt-note{font-size:13px;color:var(--muted)}
.est-opt-sm{align-items:center;text-align:center}
.est-opt-sm strong{font-size:15px}
.est-addons{display:flex;flex-wrap:wrap;gap:9px}
.est-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bone);border:1.5px solid var(--line);
  border-radius:var(--r-pill);padding:9px 15px;cursor:pointer;font-size:14px;
  transition:border-color .15s ease,background .15s ease}
.est-chip:hover{border-color:var(--red)}
.est-chip.sel{border-color:var(--red);background:#fff6f4}
.est-chip-label{font-weight:600;color:var(--ink)}
.est-chip-price{font-size:12.5px;color:var(--muted)}
.est-chip.sel .est-chip-price{color:var(--red-dark)}
.est-chip-quote .est-chip-price{font-style:italic}
.est-sub{font-size:13px;color:var(--muted);margin-top:2px}
.est-out{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.est-total{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.est-from{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;font-size:13px;
  color:var(--muted);align-self:center}
.est-amt{font-family:var(--font-display);font-weight:800;font-size:clamp(34px,5vw,46px);line-height:1;color:var(--ink)}
.est-dash{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--muted)}
.est-note{font-size:13.5px;color:var(--muted);line-height:1.5;margin:0;max-width:54ch}
.est-book{align-self:stretch;text-align:center}
/* Membership verdict: à la carte vs membership, membership built to win */
.est-member{align-self:stretch;border-top:1px solid var(--line);margin-top:4px;padding-top:20px;display:flex;flex-direction:column;gap:14px}
.est-member-h{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px;color:var(--muted)}
.est-compare{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;align-items:stretch}
.est-col{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:16px 18px;display:flex;flex-direction:column;gap:6px}
.est-col-ala{background:var(--bone)}
.est-col-mem{border-color:var(--red);background:#fff6f4;position:relative;box-shadow:0 0 0 3px rgba(207,42,42,.08)}
.est-col-tag{position:absolute;top:-11px;right:14px;background:var(--red);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:3px 10px;border-radius:var(--r-pill)}
.est-col-label{font-size:13px;color:var(--muted);font-weight:600}
.est-col-amt{font-family:var(--font-display);font-weight:800;font-size:clamp(28px,4vw,38px);line-height:1;color:var(--ink)}
.est-col-amt .per{font-size:14px;color:var(--muted);font-weight:600;margin-left:2px}
.est-col-sub{font-size:12.5px;color:var(--muted);line-height:1.4}
.est-col-mem-sub{color:var(--ink);font-weight:600}
.est-col-mem-sub:empty{display:none}
.est-perks{list-style:none;margin:5px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.est-perks li{font-size:13px;color:var(--ink);padding-left:19px;position:relative;line-height:1.35}
.est-perks li::before{content:"";position:absolute;left:1px;top:4px;width:11px;height:6px;
  border-left:2px solid var(--success);border-bottom:2px solid var(--success);transform:rotate(-45deg)}
.est-member-note{font-size:13.5px;color:var(--body);line-height:1.5;margin:0;background:var(--bone-2);border-radius:var(--r-sm);padding:12px 15px}
.est-actions{align-self:stretch;display:flex;flex-direction:column;gap:10px}
.est-actions .btn{width:100%}
@media(max-width:560px){.est-compare{grid-template-columns:1fr}}

/* Media: video feature + photo gallery (slots ready for real media) */
.media-video{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/9;
  display:flex;align-items:center;justify-content:center;box-shadow:var(--sh-md);border:1px solid rgba(255,255,255,.12);
  background:radial-gradient(600px 360px at 72% 18%,rgba(37,70,214,.2),transparent 60%),linear-gradient(150deg,#0b0b14,#181527)}
.media-video .play{width:80px;height:80px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--sh-lg);transition:transform .2s ease}
.media-video:hover .play{transform:scale(1.07)}
.media-video .play svg{width:28px;height:28px;margin-left:5px;fill:var(--red)}
.media-video .vcap{position:absolute;left:18px;bottom:15px;color:#fff;font-family:var(--font-display);font-size:12px;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
.media-video video,.media-video iframe,.media-video>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}

.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gallery .shot{position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);
  border:1px solid rgba(255,255,255,.1);background:linear-gradient(150deg,#10101a,#1b1830);
  display:flex;align-items:center;justify-content:center}
.gallery .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gallery .shot svg{width:28px;height:28px;stroke:rgba(255,255,255,.32);fill:none;stroke-width:1.5}
.gallery .shot .cap{position:absolute;left:0;right:0;bottom:0;padding:26px 12px 10px;color:#fff;font-size:12px;
  font-weight:600;background:linear-gradient(0deg,rgba(8,8,14,.82),transparent)}
@media(max-width:780px){.gallery{grid-template-columns:repeat(2,1fr)}}

/* White Glove "see everything" expander inside tier card */
.tier-more{margin:-4px 0 24px}
.tier-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--amber);padding:8px 0}
.tier-more>summary::-webkit-details-marker{display:none}
.tier-more>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease}
.tier-more[open]>summary::after{transform:rotate(-135deg)}
.tier-more .tier-features{margin:10px 0 0}

/* =====================================================================
   PHOTO SLOTS (placeholder frames ready for real photos) + WG blur reveal
   ===================================================================== */
.photo-slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  min-height:400px;border-radius:var(--r-lg);overflow:hidden;text-align:center;padding:26px;margin:0;
  border:1px solid rgba(255,255,255,.14);box-shadow:var(--sh-md);
  background:radial-gradient(620px 380px at 70% 16%,rgba(37,70,214,.18),transparent 60%),linear-gradient(150deg,#0b0b14,#181527)}
.photo-slot>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.photo-slot .ps-ic{width:48px;height:48px;stroke:rgba(255,255,255,.42);fill:none;stroke-width:1.3;position:relative;z-index:1}
.photo-slot .ps-label{position:relative;z-index:1;font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);max-width:26ch;line-height:1.5}
.hero .photo-slot{min-height:440px}
@media(max-width:980px){.hero .photo-slot{min-height:300px}}

/* camera-icon placeholder reused inside existing media-fig / hero-art frames (stylized photo pulled) */
.media-fig .ps-ic,.hero-art .ps-ic{position:relative;z-index:1;width:46px;height:46px;stroke:rgba(255,255,255,.42);fill:none;stroke-width:1.3}
.hero-art:has(.ps-ic){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:radial-gradient(620px 380px at 70% 16%,rgba(37,70,214,.18),transparent 60%),linear-gradient(150deg,#0b0b14,#181527)}

/* White Glove: headline items show by default at the same height as the other cards;
   the rest expand inline on click. No forced min-height so the card matches its siblings. */
.wg-more{display:block;width:100%;margin:2px 0 16px;padding:8px;background:transparent;border:0;
  font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--amber);cursor:pointer;text-align:center}
.wg-more:hover{color:#eeb44e;text-decoration:underline}
/* collapsible height animator (0 -> auto); box opens, then the cinematic reveal plays */
.wg-anim{position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;
  transition:grid-template-rows .45s cubic-bezier(.2,.85,.25,1)}
.wg-anim>.wg-hidden{overflow:hidden;min-height:0}
.wg-open .wg-anim{grid-template-rows:1fr}

/* content resolves with a quick, even fade as it opens */
.wg-open .wg-anim>.wg-hidden{animation:wgUnblur .5s ease both}
@keyframes wgUnblur{
  0%{filter:blur(6px);opacity:0}
  100%{filter:blur(0);opacity:1}
}

@media(prefers-reduced-motion:reduce){
  .wg-anim{transition:none}
  .wg-open .wg-anim>.wg-hidden{animation:none}
}

/* =====================================================================
   RIM FINDER - on-rim vs off-rim setup selector that routes to the funnel
   ===================================================================== */
.rim-finder .rf-head{max-width:680px;margin:0 auto}
/* guided flow: one plain question -> one clear answer */
.rf-guide{max-width:780px;margin:32px auto 0}
.rf-stage[hidden]{display:none}
.rf-q-label{display:flex;align-items:center;justify-content:center;gap:11px;text-align:center;
  font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.5vw,26px);color:var(--ink);margin-bottom:20px}
.rf-q-num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px}
.rf-choices{display:grid;gap:12px}
.rf-choice{display:flex;align-items:center;gap:16px;text-align:left;cursor:pointer;width:100%;
  background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);padding:17px 18px;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.rf-choice:hover{border-color:var(--red);transform:translateY(-2px);box-shadow:var(--sh)}
.rf-choice-ic{flex:none;width:46px;height:46px;border-radius:12px;background:#fff6f4;
  display:flex;align-items:center;justify-content:center}
.rf-choice-ic svg{width:26px;height:26px;stroke:var(--red);fill:none;stroke-width:1.7}
.rf-choice-soft .rf-choice-ic{background:var(--bone-2)}
.rf-choice-soft .rf-choice-ic svg{stroke:var(--muted)}
.rf-choice-txt{flex:1;min-width:0}
.rf-choice-txt strong{display:block;font-family:var(--font-body);font-weight:700;font-size:16px;color:var(--ink);line-height:1.25}
.rf-choice-txt span{display:block;font-size:13.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.rf-choice-go{flex:none;font-size:22px;line-height:1;color:var(--red);font-weight:700;opacity:.45;
  transition:opacity .18s ease,transform .18s ease}
.rf-choice:hover .rf-choice-go{opacity:1;transform:translateX(3px)}
.rf-q-foot{text-align:center;font-size:13.5px;color:var(--muted);margin-top:16px}
.rf-back{display:inline-flex;align-items:center;gap:7px;background:none;border:none;cursor:pointer;
  font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--muted);padding:4px 2px;margin-bottom:14px}
.rf-back:hover{color:var(--red)}

/* "not sure" -> how to tell, then route to a result */
.rf-howto{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)}
.rf-howto-lead{font-size:15.5px;line-height:1.6;color:var(--body);margin:4px 0 0}
.rf-howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0 0}
.rf-howto-card{border-radius:var(--r);padding:16px 17px;border:1.5px solid var(--line);background:var(--bone)}
.rf-howto-card.good{border-color:rgba(28,124,66,.4);background:rgba(28,124,66,.06)}
.rf-howto-card.lever{border-color:rgba(226,166,63,.5);background:rgba(226,166,63,.09)}
.rf-howto-card strong{display:block;font-family:var(--font-body);font-weight:700;font-size:15px;color:var(--ink);line-height:1.3}
.rf-howto-card span{display:block;font-size:13.5px;color:var(--body);margin-top:7px;line-height:1.5}
.rf-howto-card b{color:var(--ink);font-weight:700}
.rf-howto-tip{font-size:14px;line-height:1.6;color:var(--body);margin:18px 0 0;border-top:1px solid var(--line);padding-top:16px}
.rf-howto-tip b{color:var(--ink)}
.rf-howto-pick{margin-top:20px}
.rf-howto-pick-q{display:block;font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--ink);margin-bottom:12px}
.rf-howto-pick-btns{display:flex;gap:12px;flex-wrap:wrap}
.rf-howto-pick-btns .btn{flex:none}

/* supporting tools, kept below the main answer */
.rf-more{max-width:780px;margin:30px auto 0;display:grid;gap:18px}
.rf-more-head{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);text-align:center;margin:10px 0 -3px}
.rf-card{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:clamp(26px,3.4vw,42px);
  box-shadow:var(--sh-navy);overflow:hidden}
.rf-card .rf-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rf-card .rf-price .n{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1;color:#fff}
.rf-card .rf-price .u{color:var(--on-dark-soft);font-size:15px}
.rf-card .rf-lead{color:var(--on-dark-soft);font-size:16px;line-height:1.6;margin-top:13px;max-width:62ch}
.rf-card .rf-lead b{color:#fff;font-weight:700}
.rf-flag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:600;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;border-radius:var(--r-pill);padding:6px 14px;
  margin-bottom:15px;background:rgba(255,255,255,.09);color:var(--on-dark)}
.rf-flag.good{background:rgba(34,197,94,.16);color:#7ee2a0}
.rf-flag.lever{background:rgba(226,166,63,.16);color:var(--amber)}
.rf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0 2px}
.rf-step{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);padding:16px}
.rf-step .rs-n{width:26px;height:26px;border-radius:50%;background:var(--red);color:#fff;display:flex;
  align-items:center;justify-content:center;font-weight:700;font-size:13px;margin-bottom:11px}
.rf-step.dest{border-color:rgba(34,197,94,.4);background:rgba(34,197,94,.1)}
.rf-step.dest .rs-n{background:var(--success)}
.rf-step strong{display:block;color:#fff;font-size:14.5px;font-weight:700;margin-bottom:4px}
.rf-step span{font-size:13px;color:var(--on-dark-soft);line-height:1.5}
.rf-save{display:block;margin-top:18px;font-family:var(--font-display);font-weight:600;font-size:16px;
  color:var(--amber);letter-spacing:.01em}
.rf-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.rf-actions .btn{flex:none}
.rf-card .btn-ghost{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.28)}
.rf-card .btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff}
.rf-fine{font-size:13px;color:var(--on-dark-soft);margin-top:16px}
.rf-fine a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.rf-divider{height:1px;background:rgba(255,255,255,.13);margin:22px 0 4px}
.rf-calc .calc-answer{margin-top:0}
@media(max-width:760px){
  .rf-steps{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rf-howto-grid{grid-template-columns:1fr}
  .rf-howto-pick-btns .btn{flex:1}
}
@media(max-width:440px){
  .rf-choice{gap:13px;padding:15px 15px}
  .rf-choice-ic{width:40px;height:40px}
  .rf-choice-ic svg{width:23px;height:23px}
}

/* widget: "who it's for" two-column panel */
.rf-fit{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:8px 0 2px}
.rf-fit-col strong{display:block;font-family:var(--font-body);font-weight:700;font-size:15px;color:#fff;margin-bottom:9px}
.rf-fit-col ul{list-style:none}
.rf-fit-col li{position:relative;padding-left:24px;margin-top:9px;font-size:14px;line-height:1.45;color:var(--on-dark-soft)}
.rf-fit-col li::before{position:absolute;left:0;top:0;font-weight:700}
.rf-fit-col.good li::before{content:"\2713";color:#7ee2a0}
.rf-fit-col.skip li::before{content:"\2014";color:var(--amber)}
@media(max-width:600px){.rf-fit{grid-template-columns:1fr;gap:14px}}

/* widget as a popup (booking page) */
.rim-modal{position:fixed;inset:0;z-index:2000;display:flex;align-items:flex-start;justify-content:center;
  padding:24px 16px;overflow:auto;background:rgba(10,10,18,.62);opacity:0;transition:opacity .26s ease}
.rim-modal.show{opacity:1}
.rim-modal-inner{position:relative;width:100%;max-width:760px;margin:auto;background:var(--bone);
  border-radius:var(--r-lg);padding:38px 30px 32px;box-shadow:var(--sh-lg)}
.rim-modal-inner .rf-head{margin-top:4px}
.rim-modal-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:none;background:transparent;
  font-size:26px;line-height:1;color:var(--muted);cursor:pointer;border-radius:var(--r-pill);z-index:1}
.rim-modal-close:hover{background:var(--bone-2);color:var(--ink)}
@media(prefers-reduced-motion:reduce){.rim-modal{transition:none}}

/* booking flow: rim-setup sub-question (shown when changeover is picked) */
.rim-q{margin:18px 0 2px;border-top:1px solid var(--line);padding-top:20px}
.rim-q[hidden]{display:none}
.rim-q h4{margin-bottom:4px}
.rim-q .rq-help{font-size:13.5px;color:var(--muted);margin-bottom:13px}
.rim-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rim{border:1.5px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;cursor:pointer;background:#fff;
  text-align:left;transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease}
.rim:hover{border-color:var(--red);transform:translateY(-2px)}
.rim.sel{border-color:var(--red);background:#fff6f4;box-shadow:0 0 0 3px rgba(219,36,48,.1)}
.rim strong{display:block;font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--ink)}
.rim span{font-size:12.5px;color:var(--muted)}
.rim-nudge{margin-top:15px;background:linear-gradient(180deg,#fffdf7,#fff);border:1px solid rgba(226,166,63,.42);
  border-radius:var(--r-sm);padding:14px 16px;font-size:14px;line-height:1.55;color:var(--body)}
.rim-nudge[hidden]{display:none}
.rim-nudge b{color:var(--ink)}
.rim-nudge a{font-weight:700;color:var(--red-dark);text-decoration:underline;text-underline-offset:2px}
@media(max-width:520px){.rim-opts{grid-template-columns:1fr}}

/* rim finder: "run the numbers" off-rim breakeven calculator (third panel) */
.rf-calc .calc-answer{font-size:16px;line-height:1.55;margin-top:0;color:var(--on-dark-soft)}
.rf-calc .calc-answer b{color:#fff}
.calc-control{margin:22px 0 6px}
.calc-control label{display:block;font-size:13.5px;color:var(--on-dark-soft);margin-bottom:10px}
.calc-slider-row{display:flex;align-items:center;gap:16px}
.rf-calc input[type=range]{flex:1;accent-color:var(--red);height:6px;cursor:pointer}
.calc-slider-row output{font-family:var(--font-display);font-weight:700;font-size:19px;color:#fff;min-width:84px;text-align:right}
.calc-bars{display:grid;gap:15px;margin:22px 0 2px}
.cb-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;font-size:14px;color:var(--on-dark-soft)}
.cb-head b{font-family:var(--font-display);font-weight:700;font-size:21px;color:#fff}
.cb-track{height:14px;border-radius:var(--r-pill);background:rgba(255,255,255,.09);overflow:hidden}
.cb-fill{height:100%;border-radius:var(--r-pill);transition:width .28s ease;min-width:4px}
.cb-fill.off{background:var(--red)}
.cb-fill.club{background:var(--success)}
.calc-verdict{margin:22px 0 2px;background:rgba(226,166,63,.12);border:1px solid rgba(226,166,63,.32);
  border-radius:var(--r);padding:15px 18px}
.calc-verdict .cv-num{display:block;font-family:var(--font-display);font-weight:700;font-size:27px;color:var(--amber);line-height:1.05}
.calc-verdict .cv-sub{display:block;font-size:13.5px;color:var(--on-dark-soft);margin-top:5px}
.calc-seg{display:flex;gap:8px;flex-wrap:wrap}
.calc-seg .seg{flex:1;min-width:96px;font-family:var(--font-body);font-weight:600;font-size:13.5px;
  padding:11px 12px;border-radius:var(--r-sm);border:1.5px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.05);color:var(--on-dark-soft);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,color .15s ease}
.calc-seg .seg:hover{border-color:rgba(255,255,255,.4);color:#fff}
.calc-seg .seg.is-active{background:var(--red);border-color:var(--red);color:#fff}
.rc-kit{font-weight:400;color:var(--on-dark-soft)}
@media(max-width:520px){.calc-seg .seg{min-width:0;padding:10px 8px;font-size:12.5px}}

/* "Is the club right for you?" expand-on-demand fit check (membership) */
.fit-toggle[aria-expanded="true"]{background:var(--navy)}
.fit-panel[hidden]{display:none}
.fit-panel .card{padding:26px 28px}
.fit-good{border-color:rgba(28,124,66,.32)}
.fit-skip{border-color:rgba(226,166,63,.4)}
.fit-good h3,.fit-skip h3{margin-bottom:10px}
.fit-list{list-style:none;text-align:left}
.fit-list li{position:relative;padding-left:28px;margin-top:11px;font-size:15.5px;line-height:1.5;color:var(--body)}
.fit-list li::before{position:absolute;left:0;top:0;font-weight:700;font-size:15px}
.fit-good .fit-list li::before{content:"\2713";color:var(--success)}
.fit-skip .fit-list li::before{content:"\2014";color:var(--amber-deep)}

/* =====================================================================
   ON-RAMP BANNER - off-rim to on-rim conversion strip (tires + guide)
   ===================================================================== */
.onramp-banner{display:flex;align-items:stretch;gap:0;background:var(--paper);
  border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
  padding:30px 34px;flex-wrap:wrap}
.orb-steps{flex:1 1 560px;display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;
  align-items:stretch;min-width:0}
.orb-step{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.orb-tag{display:flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:600;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.orb-n{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;
  border-radius:var(--r-pill);background:var(--navy);color:var(--on-dark);
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:0}
.orb-step svg{width:clamp(96px,11vw,138px);height:auto;margin:14px 0 10px}
.orb-price{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3vw,38px);
  line-height:1;color:var(--ink)}
.orb-price small{font-family:var(--font-body);font-weight:600;font-size:14px;color:var(--muted)}
.orb-price.steep{color:var(--red-dark)}
.orb-price.good{color:var(--success)}
.orb-step .orb-cap{font-size:13px;color:var(--muted);margin-top:5px}
.orb-arrow{display:flex;align-items:center;justify-content:center;color:var(--red)}
.orb-arrow svg{width:26px;height:26px}
.orb-aside{flex:1 1 230px;max-width:300px;margin-left:30px;padding-left:30px;
  border-left:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.orb-savelbl{font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--amber-deep)}
.orb-save{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,4.4vw,54px);
  line-height:1;color:var(--success);margin-top:2px}
.orb-save small{font-family:var(--font-body);font-weight:600;font-size:15px;color:var(--muted)}
.orb-aside p{font-size:14px;line-height:1.5;color:var(--body);margin:10px 0 0}
.orb-aside .btn{margin-top:16px;align-self:flex-start}
@media(max-width:940px){
  .orb-aside{flex-basis:100%;max-width:none;margin:24px 0 0;padding:22px 0 0;
    border-left:none;border-top:1px solid var(--line);
    flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}
  .orb-aside p{margin:0;flex:1;min-width:200px}
  .orb-aside .btn{margin-top:0}
}
@media(max-width:640px){
  .onramp-banner{padding:24px 20px}
  .orb-steps{grid-template-columns:1fr;gap:18px}
  .orb-arrow{transform:rotate(90deg);height:22px}
  .orb-aside .btn{width:100%;text-align:center}
}

/* =====================================================================
   BOOKING PAGE: zero-scroll head, assurance strip, membership placements
   Added 2026-08-17. The booking funnel is the page's only job, so the
   head is trimmed to let step 1 sit on the first screen, and membership
   moves from a pre-roll block to two contextual moments (below the card,
   and on the confirmation step).
   ===================================================================== */
.page-head-slim{padding:clamp(30px,3.6vw,46px) 0 clamp(26px,3vw,38px)}
.page-head-slim h1{max-width:18ch;font-size:clamp(30px,4.4vw,50px)}
.page-head-slim .sub{margin-top:10px;max-width:52ch;font-size:clamp(15px,1.3vw,17px);line-height:1.5}
.bk-assure{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:16px 0 0;padding:0}
.bk-assure li{position:relative;padding-left:19px;font-size:13px;font-weight:600;
  color:var(--on-dark-soft);letter-spacing:.01em}
.bk-assure li::before{content:"";position:absolute;left:0;top:50%;width:11px;height:6px;
  margin-top:-4px;border-left:2px solid var(--amber);border-bottom:2px solid var(--amber);
  transform:rotate(-45deg)}
.bk-section{padding-top:clamp(24px,3vw,36px)}

/* Membership strip, below the booking card */
.member-strip{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  max-width:680px;margin:26px auto 0;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:var(--r-lg);padding:20px 24px}
.member-strip .ms-body{flex:1;min-width:250px}
.member-strip .ms-badge{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:8px}
.member-strip .ms-badge::before{content:"\2605";font-size:10px;line-height:1}
.member-strip p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0;max-width:56ch}
.member-strip .btn{flex:none;white-space:nowrap}

/* Membership offer on the confirmation step */
.member-offer{margin-top:20px;padding:20px 22px;border-radius:var(--r-lg);
  background:linear-gradient(180deg,#fffdf7,#fff);
  border:1px solid rgba(226,166,63,.45)}
.member-offer .mo-badge{display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--amber-deep);margin-bottom:9px}
.member-offer .mo-badge::before{content:"\2605";font-size:10px;line-height:1}
.member-offer p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0 0 10px}
.member-offer .mo-note{font-size:13px;color:var(--muted,#6b6b76);margin-bottom:14px}
.member-offer .btn{margin-top:2px}

/* Postal checker hand-off into the booking flow */
.result .pc-ok-line{display:block}
.result .pc-go{margin-top:12px}
.result .pc-ok-note{display:block;margin-top:8px;font-size:13px;font-weight:500;
  color:var(--body);opacity:.85}

@media(max-width:640px){
  .member-strip{padding:18px 18px}
  .member-strip .btn{width:100%}
  .bk-assure{gap:6px 16px}
  .bk-assure li{font-size:12.5px}
}

/* ================================================================
   Membership join / checkout (join.html)
   Its own flow, separate from the service booking on book.html.
   ================================================================ */
.join-switch{max-width:680px;margin:0 auto 18px;font-size:14px;color:var(--muted);text-align:center}
.join-switch a{font-weight:700;color:var(--red-dark);text-decoration:underline;text-underline-offset:2px}

.plan-opts{display:grid;gap:12px;margin-top:14px}
.plan{position:relative;display:block;width:100%;text-align:left;border:1.5px solid var(--line);
  border-radius:var(--r-sm);padding:16px 18px;cursor:pointer;background:#fff;
  font:inherit;transition:border-color .18s,box-shadow .18s,transform .18s}
.plan:hover{border-color:var(--red);transform:translateY(-2px)}
.plan.sel{border-color:var(--red);background:#fff6f4;box-shadow:0 0 0 3px rgba(219,36,48,.1)}
.plan .pl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.plan .pl-head strong{font-family:var(--font-display);font-weight:700;font-size:21px;
  letter-spacing:.01em;text-transform:uppercase;color:var(--ink)}
.plan .pl-price{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--ink);white-space:nowrap}
.plan .pl-price i{font-style:normal;font-family:var(--font-body);font-weight:600;font-size:13px;color:var(--muted)}
.plan .pl-tag{display:block;margin-top:5px;font-size:14px;font-weight:600;color:var(--body)}
.plan .pl-list{display:block;margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--muted)}
.plan .pl-flag{position:absolute;top:-9px;left:16px;font-family:var(--font-display);font-weight:600;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--red);
  padding:3px 9px;border-radius:99px}
.plan .pl-flag.gold{background:var(--amber-deep)}

.join-compare{text-align:center;margin-top:12px}
.join-compare a{font-weight:700;color:var(--red-dark);text-decoration:underline;text-underline-offset:2px}
.join-vehicles{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}

/* The booking flow's projected total (.bk-total) is the same box */
.join-total,.bk-total{margin-top:18px;background:var(--bone);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:16px 18px}
.join-total[hidden],.bk-total[hidden]{display:none}
.join-total .jt-row,.bk-total .jt-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.join-total .jt-row span,.bk-total .jt-row span{font-size:15px;font-weight:600;color:var(--ink)}
.join-total .jt-row b,.bk-total .jt-row b{font-family:var(--font-display);font-weight:700;font-size:24px;color:var(--ink);white-space:nowrap}
.join-total .jt-note,.bk-total .jt-note{margin:7px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted)}

.join-later{margin-top:18px;border-top:1px solid var(--line);padding-top:16px}
.join-later label{display:flex;align-items:flex-start;gap:10px;font-size:14px;color:var(--body);cursor:pointer}
.join-later input{flex:none;width:17px;height:17px;margin-top:1px;accent-color:var(--red)}

.join-next{margin-top:20px;background:var(--navy);color:var(--on-dark);
  border-radius:var(--r-lg);padding:22px 24px}
.join-next h4{color:#fff;margin:0 0 10px}
.join-next ol{margin:0;padding-left:20px}
.join-next li{font-size:14px;line-height:1.55;color:var(--on-dark-soft);margin-bottom:8px}
.join-next li:last-child{margin-bottom:0}
.join-next .jn-help{margin:14px 0 0;font-size:13px;color:var(--on-dark-soft)}
.join-next .jn-help a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}

@media(max-width:640px){
  .plan{padding:15px 15px}
  .plan .pl-head strong{font-size:19px}
  .plan .pl-price{font-size:20px}
  .join-total .jt-row b,.bk-total .jt-row b{font-size:21px}
}

/* Booking: address shown read-only on the details step */
.addr-confirm{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-top:18px;padding:12px 14px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--bone)}
.addr-confirm-k{flex-basis:100%;font-size:13px;font-weight:700;color:var(--ink)}
#bk-addr-show{flex:1;min-width:0;color:var(--ink)}
.addr-change{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--red-dark);
  text-decoration:underline;cursor:pointer}

/* Booking: which way the flow goes, shown under the services */
.bk-path{margin-top:14px;padding:10px 14px;border-radius:10px;font-size:14px;line-height:1.45;color:var(--ink);background:var(--bone);border:1.5px solid var(--line)}
.bk-path.instant{border-color:var(--red)}

/* Booking: the itemized lines above the projected total on the details step */
.bk-total .bt-line{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 14px;
  margin-bottom:10px;font-size:14.5px;color:var(--ink)}
.bk-total .bt-line>span{flex:1 1 0;min-width:0}
.bk-total .bt-line b{font-weight:600;text-align:right;white-space:nowrap}
.bk-total .bt-note{flex-basis:100%;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--muted)}
.bk-total .jt-row{margin-top:4px;padding-top:12px;border-top:1px solid var(--line)}

/* Booking: tire storage add-on above the projected total, ticked = the .svc/.rim selected look */
.bk-addon{display:flex;align-items:flex-start;gap:12px;margin-top:18px;padding:14px 16px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:var(--r-sm);background:#fff;transition:border-color .15s ease,background .15s ease}
.bk-addon[hidden]{display:none}
.bk-addon:hover{border-color:var(--red)}
.bk-addon.sel{border-color:var(--red);background:#fff6f4;box-shadow:0 0 0 3px rgba(219,36,48,.1)}
.bk-addon input{flex:none;width:18px;height:18px;margin:2px 0 0;accent-color:var(--red);cursor:pointer}
.bk-addon-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.bk-addon-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.bk-addon-head strong{font-size:15px;color:var(--ink)}
.bk-addon-price{font-size:13px;font-weight:600;color:var(--ink)}
.bk-addon-sub{font-size:13.5px;line-height:1.45;color:var(--muted)}