/* ─────────────────────────────────────────────
   WARDEN AUTO SPA — "The Family Atelier"
   Dark garage-luxury. Serif lineage + red steel.
   ───────────────────────────────────────────── */
:root{
  --coal:#0B0B0D; --coal-2:#121215; --panel:#17171B; --panel-2:#1E1E24;
  --line:#2B2B33; --line-2:#3A3A44;
  --red:#E8202A; --red-hot:#FF3B43; --red-deep:#8E1218;
  --bone:#F4F1EC; --bone-dim:#B9B4AC; --bone-faint:#8A8680;
  --gold:#D8B36A; --good:#3ECF8E;
  /* Instrument Serif ships one weight (400) plus italic. It is drawn for
     display sizes: high stroke contrast, tight fit, short descenders. Any
     font-weight above 400 on display type is therefore a no-op, so weight is
     never used to create hierarchy here — size and colour do that work. */
  --display:'Instrument Serif',Georgia,serif; --body:'Manrope',-apple-system,sans-serif;
  --maxw:1180px; --rad:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* Form controls don't inherit font-family by default, so bare <button>s (the ☰
   hamburger, the ✕ popup-close, the booking service tabs) were falling back to
   Arial while the rest of the site is Manrope. Inherit it site-wide. */
button,input,select,textarea{font-family:inherit}
html{scroll-behavior:smooth}
body{background:var(--coal);color:var(--bone);font-family:var(--body);line-height:1.6;letter-spacing:-.004em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:'kern' 1,'liga' 1;overflow-x:hidden}
/* Prices, times and totals line up in columns all over this site, so numerals
   must be fixed-width or the digits jitter between states. */
.o-price,.from,.size-line,.dur,.n,.big,.money,[class*="total"],[class*="price"]{font-variant-numeric:tabular-nums}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E")}
/* Instrument Serif is already tightly fitted, so it needs far less negative
   tracking than a text serif would; overdoing it closes the counters. It also
   has short descenders, which is what lets the leading run this tight. */
h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.04;letter-spacing:-.012em;text-wrap:balance}
h3,h4{letter-spacing:-.006em;line-height:1.18}
a{color:inherit;text-decoration:none}
img{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.eyebrow{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--red-hot);font-weight:600;display:flex;align-items:center;gap:12px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}
.sec{padding:96px 0}
.sec-title{font-size:clamp(30px,4.2vw,48px);margin:14px 0 12px;color:#fff}
.sec-lede{color:var(--bone-dim);max-width:640px;font-size:17px}

/* Nav */
nav{position:sticky;top:0;z-index:60;background:rgba(11,11,13,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:14px 26px;display:flex;align-items:center;gap:26px}
/* The wordmark is set in the display serif, which has no bold, so it gains its
   presence from size rather than weight. */
.logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-size:23px;color:#fff;font-weight:400;letter-spacing:-.01em}
.logo img{height:44px}
.logo .sub{display:block;font-family:var(--body);font-size:9.5px;letter-spacing:.3em;color:var(--bone-faint);text-transform:uppercase;font-weight:600}
.nav-links{display:flex;gap:24px;margin-left:auto;font-size:14px;font-weight:500;color:var(--bone-dim)}
.nav-links a{white-space:nowrap} /* keep multi-word labels ("Services & Pricing") on one line, never break mid-phrase */
.nav-links a:hover{color:#fff}
/* Transparent border keeps solid and ghost buttons the same height, so CTAs
   stay on one baseline when they sit side by side. */
.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:9px;background:var(--red);color:#fff;font-weight:700;font-size:14.5px;padding:13px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.18s;box-shadow:0 6px 24px rgba(232,32,42,.28)}
.btn:hover{background:var(--red-hot);transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--line-2);box-shadow:none;color:var(--bone)}
.btn.ghost:hover{border-color:var(--bone-faint);background:var(--panel)}
.btn.sm{padding:9px 18px;font-size:13px}
/* Nav CTA must never shrink or wrap: as a flex sibling of the logo and the link
   row it was subject to flex-shrink:1 by default, so in the ~1025-1150px band
   (enough width to show the full link row, not quite enough to also fit the
   button at natural size) it got squeezed until "Book Now" wrapped to two
   lines. flex-shrink:0 removes that failure mode outright, and the breakpoint
   below is raised past the row's true minimum width as a second guard. */
.nav-in > a.btn.sm{flex-shrink:0;white-space:nowrap;
  box-shadow:0 0 16px 2px rgba(232,32,42,.55),0 6px 20px rgba(232,32,42,.35);
  animation:navBtnGlow 2.6s ease-in-out infinite}
.nav-in > a.btn.sm:hover{animation-play-state:paused}
@keyframes navBtnGlow{
  0%,100%{box-shadow:0 0 14px 1px rgba(232,32,42,.45),0 6px 20px rgba(232,32,42,.3)}
  50%{box-shadow:0 0 28px 5px rgba(232,32,42,.8),0 6px 24px rgba(232,32,42,.4)}
}
@media(prefers-reduced-motion:reduce){
  .nav-in > a.btn.sm{animation:none;box-shadow:0 0 18px 3px rgba(232,32,42,.55),0 6px 20px rgba(232,32,42,.35)}
}

/* Booking-wizard step buttons (Next / Confirm Booking) get the same glow as the
   nav CTA. Excludes .ghost (the outline "Back" buttons stay quiet) and
   :disabled (the greyed-out box-shadow:none look from .btn:disabled must win
   while a step isn't valid yet - only the live, clickable button glows). */
.wiz-nav .btn:not(.ghost):not(:disabled){
  box-shadow:0 0 16px 2px rgba(232,32,42,.55),0 6px 20px rgba(232,32,42,.35);
  animation:navBtnGlow 2.6s ease-in-out infinite;
}
.wiz-nav .btn:not(.ghost):not(:disabled):hover{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .wiz-nav .btn:not(.ghost):not(:disabled){animation:none;box-shadow:0 0 18px 3px rgba(232,32,42,.55),0 6px 20px rgba(232,32,42,.35)}
}

/* Hero */
.hero{position:relative;padding:110px 0 90px;overflow:hidden}
.hero::before{content:"";position:absolute;top:-40%;right:-18%;width:900px;height:900px;border-radius:50%;
  background:radial-gradient(circle,rgba(232,32,42,.16),transparent 62%);filter:blur(10px)}
.hero::after{content:"1996";position:absolute;right:-30px;bottom:-70px;font-family:var(--display);font-weight:700;
  font-size:min(34vw,380px);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,241,236,.06);pointer-events:none}
.hero-kicker{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line-2);border-radius:999px;padding:8px 18px;font-size:12.5px;color:var(--bone-dim);letter-spacing:.08em;text-transform:uppercase;font-weight:600;animation:rise .7s .05s both}
.hero-kicker b{color:var(--gold)}
.hero h1{font-size:clamp(42px,6.4vw,84px);margin:26px 0 20px;color:#fff;max-width:820px;animation:rise .7s .15s both}
.hero h1 em{font-style:italic;color:var(--red-hot)}
.hero p.lede{font-size:19px;color:var(--bone-dim);max-width:560px;animation:rise .7s .25s both}
.hero-cta{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;animation:rise .7s .35s both}
.trust-row{display:flex;gap:26px;margin-top:44px;flex-wrap:wrap;animation:rise .7s .45s both}
.trust{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--bone-dim);font-weight:500}
.trust b{color:#fff}
.star{color:var(--gold)}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Stats strip */
.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--coal-2)}
.stats-in{max-width:var(--maxw);margin:0 auto;padding:30px 26px;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
@media(max-width:1100px) and (min-width:961px){.stats-in{grid-template-columns:repeat(3,1fr)}}
.stat b{font-family:var(--display);font-size:32px;color:#fff;display:block}
.stat span{font-size:12.5px;color:var(--bone-faint);letter-spacing:.06em;text-transform:uppercase;font-weight:600}
.stat b .u{color:var(--red-hot);font-size:20px}

/* Package cards */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.pkg{background:linear-gradient(180deg,var(--panel),var(--coal-2));border:1px solid var(--line);border-radius:var(--rad);padding:30px 28px;position:relative;display:flex;flex-direction:column;transition:.22s}
.pkg:hover{transform:translateY(-5px);border-color:var(--line-2)}
.pkg.hot{border-color:rgba(232,32,42,.55);background:linear-gradient(180deg,#1D1416,var(--coal-2));box-shadow:0 18px 60px rgba(232,32,42,.14)}
.pkg .flag{position:absolute;top:-13px;left:26px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;padding:6px 14px;border-radius:999px}
.pkg h3{font-size:24px;color:#fff}
.pkg .from{margin:14px 0 4px;font-family:var(--display);font-size:44px;color:#fff;font-weight:700}
/* Baseline-aligned so "from $" sits on the bottom of the big number */
.pkg .from{display:flex;align-items:baseline;gap:6px}
.pkg .from .cur{font-size:20px;color:var(--bone-faint)}
.pkg .size-line{font-size:12.5px;color:var(--bone-faint);margin-bottom:6px}
.pkg .size-line b{color:var(--bone-dim)}
.pkg .dur{font-size:12px;color:var(--gold);margin-bottom:16px;font-weight:600}
.pkg ul{list-style:none;margin:10px 0 24px;display:grid;gap:9px;font-size:14.5px;color:var(--bone-dim)}
.pkg li::before{content:"—";color:var(--red-hot);margin-right:10px}
.pkg .btn{margin-top:auto;justify-content:center}
.pkg .note{font-size:12px;color:var(--bone-faint);margin-top:10px;text-align:center}

/* Price tables */
.ptables{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
.ptable{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:26px}
.ptable h3{font-size:19px;color:#fff;margin-bottom:4px}
.ptable .pt-sub{font-size:13px;color:var(--bone-faint);margin-bottom:16px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-faint);padding:9px 10px;border-bottom:1px solid var(--line)}
/* Left-align price columns so the $ signs line up within each column */
th.n,td.n{text-align:left;font-variant-numeric:tabular-nums;white-space:nowrap}
td{padding:10px;border-bottom:1px solid var(--line);color:var(--bone-dim)}
td:first-child{color:var(--bone);font-weight:500}
tr:last-child td{border-bottom:none}
.chip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:3px 10px;border-radius:999px;background:rgba(216,179,106,.12);color:var(--gold);margin-left:8px}
.chip.red{background:rgba(232,32,42,.14);color:var(--red-hot)}
.fineprint{font-size:12.5px;color:var(--bone-faint);margin-top:18px;max-width:720px}
/* Decision aid above the polish table - advisory, so it reads as guidance
   rather than another priced row. */
.pick-help{font-size:13.5px;line-height:1.6;color:var(--bone-dim);background:rgba(216,179,106,.06);
  border-left:2px solid var(--gold);border-radius:0 8px 8px 0;padding:12px 16px;margin:0 0 16px}
.pick-help b{color:var(--bone)}
/* Turns the quote-only rows into an actionable step. */
.quote-cta{margin-top:16px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.quote-cta p{font-size:13px;color:var(--bone-dim);margin:0;flex:1 1 260px}

/* Ceramic ladder */
.ladder{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.rung{border:1px solid var(--line);border-radius:var(--rad);padding:28px;background:var(--panel);position:relative;overflow:hidden}
.rung::after{content:"";position:absolute;inset:auto -30% -55% -30%;height:70%;background:radial-gradient(ellipse,rgba(216,179,106,.12),transparent 70%)}
.rung .yr{font-family:var(--display);font-size:54px;color:var(--gold);font-weight:700;line-height:1}
.rung .yr small{font-size:16px;color:var(--bone-dim);font-family:var(--body);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.rung p{font-size:14px;color:var(--bone-dim);margin:12px 0}
.rung .rp{font-size:15px;color:#fff;font-weight:600}

/* Booking wizard */
#book{scroll-margin-top:80px}
.wizard{background:linear-gradient(180deg,var(--panel),var(--coal-2));border:1px solid var(--line-2);border-radius:20px;margin-top:44px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.wiz-head{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 30px;border-bottom:1px solid var(--line);background:rgba(232,32,42,.05)}
.wiz-steps{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.wstep{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--bone-faint);padding:7px 13px;border-radius:999px;border:1px solid transparent}
.wstep .dot{width:22px;height:22px;border-radius:50%;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;font-size:11px;color:var(--bone-dim)}
.wstep.on{color:#fff;border-color:var(--line-2);background:var(--panel-2)}
.wstep.on .dot{background:var(--red);border-color:var(--red);color:#fff}
.wstep.done .dot{background:var(--good);border-color:var(--good);color:#06130c}
.wiz-timer{font-size:12px;color:var(--bone-faint);letter-spacing:.08em;text-transform:uppercase;font-weight:700}
.wiz-timer b{color:var(--good)}
.wiz-body{display:grid;grid-template-columns:1fr 340px;min-height:480px}
.wiz-main{padding:30px}
.wiz-side{border-left:1px solid var(--line);background:var(--coal-2);padding:28px;display:flex;flex-direction:column}
.pane{display:none;animation:fade .3s both}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.pane h3{font-size:21px;color:#fff;margin-bottom:6px}
.pane .ph{font-size:14px;color:var(--bone-faint);margin-bottom:20px}
.svc-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.svc-tab{font-size:13px;font-weight:600;color:var(--bone-dim);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;transition:.15s;background:transparent}
.svc-tab.on{background:var(--red);border-color:var(--red);color:#fff}
.opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.opt{border:1px solid var(--line);border-radius:12px;padding:16px;cursor:pointer;transition:.15s;background:var(--panel);font-family:inherit;font-size:inherit;color:inherit;text-align:left;width:100%}
.opt:hover{border-color:var(--line-2)}
.opt.on{border-color:var(--red);background:rgba(232,32,42,.07);box-shadow:0 0 0 1px var(--red)}
.opt .o-name{font-weight:700;color:#fff;font-size:15px;display:flex;justify-content:space-between;gap:10px}
.opt .o-price{color:var(--red-hot);font-variant-numeric:tabular-nums;white-space:nowrap}
.opt .o-desc{font-size:12.5px;color:var(--bone-faint);margin-top:5px}
.size-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.size-card{border:1px solid var(--line);border-radius:12px;padding:20px 16px;text-align:center;cursor:pointer;transition:.15s;background:var(--panel);font-family:inherit;font-size:inherit;color:inherit;width:100%}
.size-card.on{border-color:var(--red);background:rgba(232,32,42,.07);box-shadow:0 0 0 1px var(--red)}
/* Line-art vehicle marks rather than emoji: emoji render differently on every
   OS, sit off-baseline, and are the loudest "generic template" tell in the
   whole booking flow. These inherit currentColor so they pick up the red on
   the selected card for free. */
.size-card .ic{font-size:26px;color:var(--bone-faint);transition:color .15s}
.size-card .ic svg{width:44px;height:22px;display:block;margin:0 auto;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.size-card.on .ic{color:var(--red-hot)}
.size-card:hover .ic{color:var(--bone-dim)}
.size-card b{display:block;color:#fff;margin-top:8px}
.size-card span{font-size:12px;color:var(--bone-faint)}
/* Three size cards across a phone leaves ~47px of usable width each, so
   "7-seat SUV · Minivan · Crew cab" wrapped to five lines and pushed each
   card's icon and label to a different height. Stack them as rows below
   560px: full-width tap targets, one line of descriptor, icons aligned. */
@media(max-width:560px){
  .size-grid{grid-template-columns:1fr;gap:10px}
  .size-card{display:grid;grid-template-columns:32px 1fr;column-gap:12px;align-items:center;text-align:left;padding:14px 16px}
  .size-card{grid-template-columns:44px 1fr}
  .size-card .ic{grid-row:1/span 2;align-self:center;font-size:24px;line-height:1}
  .size-card .ic svg{width:40px;height:20px}
  .size-card b{grid-column:2;margin-top:0}
  .size-card span{grid-column:2;font-size:12.5px}
}
.addon{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;transition:.15s;background:var(--panel)}
.addon.on{border-color:var(--gold);background:rgba(216,179,106,.06)}
.addon input{accent-color:var(--red);margin-top:4px}
.addon .a-name{font-weight:600;color:#fff;font-size:14px;display:flex;justify-content:space-between;width:100%;gap:10px}
.addon .a-price{color:var(--gold);white-space:nowrap;font-variant-numeric:tabular-nums}
.addon .a-desc{font-size:12px;color:var(--bone-faint)}
.addons-list{display:grid;gap:10px}
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.field label{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-faint);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;color:#fff;padding:12px 14px;font-size:14.5px;font-family:var(--body)}
.field input:focus,.field select:focus{outline:none;border-color:var(--red)}
.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:6px}
.slot{border:1px solid var(--line);border-radius:9px;padding:9px 4px;text-align:center;font-size:13px;cursor:pointer;color:var(--bone-dim);background:var(--panel);font-family:inherit}
.slot.on{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.slot.off{opacity:.28;pointer-events:none;text-decoration:line-through}
.promo-banner{display:none;margin:16px 0 0;border:1px dashed var(--gold);border-radius:12px;padding:13px 16px;font-size:13.5px;color:var(--gold);background:rgba(216,179,106,.06)}
.promo-banner.show{display:block}
.sun-note{display:none;margin-top:14px;font-size:13.5px;color:var(--red-hot)}
.tc{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--bone-dim);margin-top:18px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px}
.tc input{accent-color:var(--red);margin-top:3px}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:26px}
/* Summary side */
.sum-h{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--bone-faint);font-weight:700;margin-bottom:16px}
.sum-line{display:flex;justify-content:space-between;gap:12px;font-size:14px;color:var(--bone-dim);padding:9px 0;border-bottom:1px solid var(--line)}
.sum-line b{color:#fff;font-weight:600}
.sum-line .amt{font-variant-numeric:tabular-nums;color:var(--bone)}
.sum-line.disc .amt{color:var(--good)}
.sum-total{display:flex;justify-content:space-between;margin-top:16px;font-size:16px;color:#fff;font-weight:700}
.sum-total .amt{font-family:var(--display);font-size:26px}
.sum-dep{display:flex;justify-content:space-between;margin-top:6px;font-size:14px;color:var(--gold);font-weight:600}
.sum-note{font-size:12px;color:var(--bone-faint);margin-top:14px;line-height:1.55}
.sq-badge{margin-top:auto;padding-top:20px;font-size:11.5px;color:var(--bone-faint);display:flex;align-items:center;gap:8px}
.sq-badge .sq{width:16px;height:16px;border-radius:4px;background:#fff;color:#000;display:grid;place-items:center;font-weight:900;font-size:10px}

/* Story */
.story{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.story-quote{font-family:var(--display);font-size:clamp(24px,3vw,34px);font-style:italic;color:#fff;line-height:1.35;border-left:3px solid var(--red);padding-left:26px;margin:26px 0}
.timeline{display:grid;gap:0;position:relative;padding-left:26px}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--line-2)}
.tl{position:relative;padding:0 0 26px}
.tl::before{content:"";position:absolute;left:-26px;top:7px;width:11px;height:11px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(232,32,42,.18)}
.tl b{color:#fff;font-family:var(--display);font-size:18px}
.tl p{font-size:14px;color:var(--bone-dim);margin-top:4px}

/* Reviews */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.rev{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:24px;font-size:14.5px;color:var(--bone-dim)}
.rev .stars{color:var(--gold);letter-spacing:3px;margin-bottom:12px;font-size:13px}
.rev .who{margin-top:14px;font-size:13px;color:var(--bone-faint);font-weight:600}
.rev .who b{color:var(--bone)}

/* Rideshare */
.ride{background:linear-gradient(120deg,#141519,#101014);border:1px solid var(--line);border-radius:20px;padding:50px;display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:center;position:relative;overflow:hidden}
.ride::before{content:"";position:absolute;top:-50%;left:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(216,179,106,.1),transparent 65%)}
.ride ul{list-style:none;margin-top:18px;display:grid;gap:10px;font-size:15px;color:var(--bone-dim)}
.ride li::before{content:"✓";color:var(--good);margin-right:12px;font-weight:700}
.ride-card{background:var(--coal);border:1px solid var(--line-2);border-radius:16px;padding:28px;text-align:center}
.ride-card .big{font-family:var(--display);font-size:40px;color:var(--gold);font-weight:700}

/* Visit */
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:40px}
.vcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:26px}
.vcard h4{color:#fff;font-size:17px;margin-bottom:10px}
.vcard p{font-size:14px;color:var(--bone-dim)}
.vcard .hrs{display:grid;gap:5px;font-size:13.5px;margin-top:6px}
.vcard .hrs div{display:flex;justify-content:space-between;color:var(--bone-dim)}
.vcard .hrs .cl{color:var(--red-hot)}

/* Footer */
footer{border-top:1px solid var(--line);background:var(--coal-2);padding:54px 0 90px;margin-top:40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;font-size:14px;color:var(--bone-dim)}
.foot h5{color:#fff;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:14px}
.foot a{display:block;padding:4px 0;color:var(--bone-dim)}
.foot a:hover{color:#fff}
.foot-social{margin-top:6px;font-size:13px;color:var(--bone-faint)}
.foot-social a{display:inline;padding:0;color:var(--bone-dim)}
.foot-social a:hover{color:#fff}
.copy{margin-top:40px;font-size:12.5px;color:var(--bone-faint);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* Floaters */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:70;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:.2s;font-size:26px}
.wa-float:hover{transform:scale(1.08)}
.mobile-bar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;background:rgba(11,11,13,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:12px 16px}
.mobile-bar .btn{width:100%;justify-content:center}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media(max-width:960px){
  .nav-links{display:none}
  .nav-in{padding:10px 16px;gap:12px}
  .logo{font-size:16px;white-space:nowrap}
  .logo img{height:34px}
  .logo{font-size:15px}
  .logo .sub{display:none} /* mark has no wordmark, so keep the name, drop the tagline line */
  .nav-in > a.btn.sm{display:none} /* the fixed bottom bar carries the Book CTA on mobile */
  .wa-float{bottom:86px;right:16px;width:48px;height:48px;font-size:22px}
  .mobile-bar .btn{font-size:13.5px;padding:12px 18px}
  .stats-in{grid-template-columns:repeat(2,1fr)}
  .pkg-grid,.ladder,.rev-grid,.visit-grid{grid-template-columns:1fr}
  .ptables{grid-template-columns:1fr}
  .wiz-body{grid-template-columns:1fr}
  .wiz-side{border-left:none;border-top:1px solid var(--line)}
  .story,.ride,.foot{grid-template-columns:1fr}
  .ride{padding:30px}
  .opt-grid{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(3,1fr)}
  .mobile-bar{display:block}
  .sec{padding:64px 0}
}

/* ── Tabs / multi-page nav ── */
.nav-links a.active{color:#fff;position:relative}
.nav-links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--red)}
.nav-toggle{display:none;margin-left:auto;background:transparent;border:1px solid var(--line-2);border-radius:8px;color:var(--bone);font-size:20px;line-height:1;padding:7px 12px;cursor:pointer}
.page-head{padding:76px 0 10px}
.page-head h1{font-size:clamp(34px,4.8vw,56px);color:#fff;margin:14px 0 12px}
/* Above-the-fold conversion path on the pricing page. */
.head-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.head-proof{margin-top:14px;font-size:13px;color:var(--bone-faint)}
.head-proof b{color:var(--bone)}
.head-proof::first-letter{color:var(--gold)}

/* ── Mon/Tue promo popup ── */
.promo-pop{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.62);backdrop-filter:blur(4px);padding:22px}
.promo-pop.show{display:flex}
.promo-pop .pp-card{background:linear-gradient(180deg,var(--panel-2),var(--coal-2));border:1px solid var(--gold);border-radius:18px;max-width:420px;width:100%;padding:34px 30px;text-align:center;position:relative;box-shadow:0 30px 90px rgba(0,0,0,.6)}
/* The X is the "just let me look at the site" path, so it has to be an obvious,
   thumb-sized target — it was a dim 34px glyph, under the 44px tap minimum. */
.promo-pop .pp-close{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:50%;
  color:var(--bone);font-size:18px;line-height:1;cursor:pointer;padding:0;transition:.15s}
.promo-pop .pp-close:hover{background:rgba(255,255,255,.12);color:#fff;border-color:var(--bone-faint)}
.promo-pop .pp-close:focus-visible{outline:2px solid var(--red-hot);outline-offset:2px}
.promo-pop .pp-kicker{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:700}
.promo-pop h3{font-size:26px;color:#fff;margin:12px 0 8px}
.promo-pop p{font-size:14.5px;color:var(--bone-dim)}
.promo-pop .btn{margin-top:20px;justify-content:center;width:100%}

@media(max-width:1160px){
  /* Collapse to the hamburger before the content grids do (960px): the logo +
     7 inline links + Book button need ~1056px to all fit at natural size, and
     960-1024 wasn't enough headroom (the button would get flex-shrunk until
     its text wrapped). 1160px clears that with margin for font variance. */
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:rgba(11,11,13,.97);border-bottom:1px solid var(--line);padding:8px 0}
  .nav-links.open{display:flex}
  .nav-links a{padding:13px 22px;border-bottom:1px solid var(--line)}
  .nav-links a:last-child{border-bottom:none}
  .nav-links a.active::after{display:none}
}

/* ── Calendar dropdown (booking step 4) ── */
.cal-wrap{position:relative}
.cal-btn{width:100%;background:var(--panel);border:1px solid var(--line-2);border-radius:10px;color:var(--bone-faint);padding:12px 14px;font-size:14.5px;font-family:var(--body);text-align:left;cursor:pointer}
.cal-btn::after{content:"▾";float:right;color:var(--bone-faint)}
.cal-btn.has-val{color:#fff;font-weight:600}
.cal-btn:focus-visible{outline:none;border-color:var(--red)}
.cal-pop{display:none;position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:292px;max-width:calc(100vw - 60px);background:var(--panel-2);border:1px solid var(--line-2);border-radius:14px;padding:14px;box-shadow:0 24px 60px rgba(0,0,0,.6)}
.cal-pop.open{display:block}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
/* UI label, not editorial type: the display serif has no bold, so at 15px it
   would read weaker than the controls beside it. Set in the body face. */
.cal-title{font-family:var(--body);font-weight:700;color:#fff;font-size:15px;letter-spacing:-.01em}
.cal-nav{background:transparent;border:1px solid var(--line-2);border-radius:8px;color:var(--bone);width:28px;height:28px;cursor:pointer;font-size:15px;line-height:1;font-family:var(--body)}
.cal-nav:hover:not(:disabled){border-color:var(--bone-faint)}
.cal-nav:disabled{opacity:.28;cursor:default}
/* minmax(0,1fr), not 1fr. A bare `1fr` is `minmax(auto,1fr)`, and that `auto`
   floor is the grid item's min-content width — so when the WordPress theme's
   own button padding lands on .cal-cell, each column refuses to shrink and the
   7 columns burst out past the popup's edge. minmax(0,…) lets them shrink. */
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.cal-dow{font-size:10px;text-align:center;color:var(--bone-faint);font-weight:700;letter-spacing:.06em;padding:4px 0}
.cal-cell{background:transparent;border:1px solid transparent;border-radius:8px;color:var(--bone);font-size:13px;font-family:var(--body);padding:8px 0;cursor:pointer;font-variant-numeric:tabular-nums;
  min-width:0;box-sizing:border-box} /* min-width:0 — see .cal-grid note above */
.cal-cell:hover:not(:disabled){border-color:var(--line-2)}
.cal-cell.empty{visibility:hidden}
.cal-cell:disabled{opacity:.22;cursor:default}
.cal-cell.sel{background:var(--red);border-color:var(--red);color:#fff;font-weight:700}
.cal-foot{margin-top:10px;font-size:11px;color:var(--bone-faint);text-align:center}

/* ── 4-up package grid (Exterior Wash / Interior / Mini / Max) ── */
.pkg-grid.g4{grid-template-columns:repeat(4,1fr);gap:18px}
.pkg-grid.g4 .pkg{padding:26px 22px}
.pkg-grid.g4 .pkg h3{font-size:21px}
.pkg-grid.g4 .pkg .from{font-size:38px}
.pkg-grid.g4 .pkg .size-line{font-size:12px}
@media(max-width:1100px) and (min-width:961px){.pkg-grid.g4{grid-template-columns:repeat(2,1fr)}}

/* Most-popular card: warmer flag + a glow that separates it from the row */
.pkg.hot .flag{background:linear-gradient(90deg,var(--red),var(--red-hot));box-shadow:0 6px 20px rgba(232,32,42,.45)}
.pkg.hot{box-shadow:0 18px 60px rgba(232,32,42,.18)}

/* ── Cursor glow: a soft light that trails the mouse (desktop only) ── */
.cursor-glow{position:fixed;top:0;left:0;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;
  pointer-events:none;z-index:3;opacity:0;transition:opacity .45s ease;will-change:transform;
  background:radial-gradient(circle,rgba(232,32,42,.15),rgba(232,32,42,.05) 42%,transparent 70%)}
.cursor-glow.on{opacity:1}

/* ── Scroll reveal ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media(hover:none){.cursor-glow{display:none}}
@media(prefers-reduced-motion:reduce){
  .cursor-glow{display:none}
  .reveal{opacity:1;transform:none;transition:none}
}

/* 4-up card row (driver menu) so four cards never leave an orphan on row two */
.visit-grid.g4{grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:1100px) and (min-width:961px){.visit-grid.g4{grid-template-columns:repeat(2,1fr)}}

/* ── Mobile corrections ──
   These come last on purpose: `.pkg-grid.g4` (two classes) outranks the
   single-class collapse rule above, so the 4-up grids need an equally
   specific override here or they stay 4 across on a phone. */
@media(max-width:960px){
  .pkg-grid.g4,.visit-grid.g4{grid-template-columns:1fr}

  /* Price tables can be wider than a phone; let them scroll inside their own
     card rather than pushing the whole page sideways. */
  .ptable{padding:22px 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ptable table{min-width:300px}
  table{font-size:13.5px}
  th,td{padding:9px 7px}

  /* Comfortable touch targets (44px min) */
  .btn{min-height:46px}
  .nav-toggle{min-height:44px;min-width:44px}
  .svc-tab{min-height:44px}
  .slot{min-height:44px}
  .cal-btn{min-height:46px}
}

/* ── Blog ── */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px}
.post{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--panel),var(--coal-2));border:1px solid var(--line);border-radius:var(--rad);padding:28px 26px;transition:.22s}
.post:hover{transform:translateY(-5px);border-color:var(--line-2)}
.post .tag{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--red-hot)}
.post h3{font-size:21px;color:#fff;margin:12px 0 10px;line-height:1.2}
.post p{font-size:14.5px;color:var(--bone-dim);margin-bottom:18px}
.post .meta{margin-top:auto;font-size:12.5px;color:var(--bone-faint);display:flex;gap:10px;align-items:center}
.post .more{color:var(--red-hot);font-weight:600;font-size:14px;margin-top:12px}

/* Article */
.article{max-width:720px;margin:0 auto}
.article .kicker{font-size:12.5px;color:var(--bone-faint);margin-bottom:26px;display:flex;gap:10px;flex-wrap:wrap}
.article h2{font-size:clamp(24px,3vw,32px);color:#fff;margin:44px 0 14px}
.article h3{font-size:20px;color:#fff;margin:30px 0 10px}
.article p{color:var(--bone-dim);font-size:16.5px;margin-bottom:18px}
.article ul,.article ol{color:var(--bone-dim);font-size:16.5px;margin:0 0 18px 20px;display:grid;gap:8px}
.article li{padding-left:4px}
.article strong{color:var(--bone)}
.article a{color:var(--red-hot);text-decoration:underline;text-underline-offset:3px}
.article table{margin:8px 0 22px}
.article .callout{border-left:3px solid var(--red);background:var(--panel);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}
.article .callout p{margin:0;color:var(--bone)}
.article-cta{border:1px solid var(--line-2);background:var(--coal-2);border-radius:var(--rad);padding:30px;margin:44px 0 0;text-align:center}
.article-cta h3{margin-top:0}

@media(max-width:960px){
  .post-grid{grid-template-columns:1fr}
  .article p,.article ul,.article ol{font-size:16px}
}

/* Add-ons the package already covers: shown, not hidden, so the customer can
   see what they are getting rather than being tempted to pay twice. */
.addon.included{border-color:rgba(62,207,142,.35);background:rgba(62,207,142,.05);cursor:default}
.addon.included .a-name span:first-child{color:var(--bone-dim)}
.a-inc{color:var(--good);font-weight:700;font-size:12.5px;white-space:nowrap}
/* Comped add-on: still a live, unticked-able choice (unlike .included), so it
   keeps the gold "selected" frame and only the price reads as free. */
.addon.comped .a-price{color:var(--good);font-weight:700}
.addon.comped .a-price s{color:var(--bone-faint);font-weight:500;margin-right:6px}

/* Vehicle picker row */
.veh-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:600px){.veh-row{grid-template-columns:1fr}}

/* Monthly price suffix on membership cards */
.pkg .from .per{font-size:16px;color:var(--bone-faint);font-family:var(--body);font-weight:600}

/* ── Promise band (satisfaction guarantee + why-us, authentic claims only) ── */
.promise{background:linear-gradient(120deg,#141519,#101014);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.promise-in{max-width:var(--maxw);margin:0 auto;padding:56px 26px;display:grid;grid-template-columns:1.1fr 1fr;gap:44px;align-items:center}
.promise-lead .big{font-family:var(--display);font-size:clamp(26px,3.2vw,38px);color:#fff;line-height:1.15}
.promise-lead .big em{font-style:italic;color:var(--red-hot)}
.promise-lead p{color:var(--bone-dim);margin-top:12px;font-size:15.5px}
.promise-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.promise-card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.promise-card .ic{font-size:22px}
.promise-card b{display:block;color:#fff;font-size:14.5px;margin:8px 0 4px}
.promise-card span{font-size:12.5px;color:var(--bone-faint)}
@media(max-width:960px){
  .promise-in{grid-template-columns:1fr;padding:44px 20px;gap:28px}
}

/* Inline field hint; turns red when the value cannot be right */
.field .hint{font-size:11.5px;color:var(--bone-faint);margin-top:6px;font-weight:500}
.field .hint.bad{color:var(--red-hot)}

/* FAQ accordion */
.faq{margin-top:60px;max-width:820px}
.faq-item{border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-top:10px;padding:0 20px;transition:.18s}
.faq-item[open]{border-color:var(--line-2)}
.faq-item summary{cursor:pointer;padding:18px 0;font-weight:600;color:#fff;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;min-height:44px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";color:var(--red-hot);font-size:20px;font-weight:400;flex:none}
.faq-item[open] summary::after{content:"–"}
.faq-item p{color:var(--bone-dim);font-size:14.5px;padding:0 0 18px;margin:0}

/* ── Price lines without separator dots (Anthony: "every price, remove the dots") ──
   Spacing carries the separation now, so the numbers read as a rank not a sentence. */
.pkg .size-line,.rung .rp{display:flex;flex-wrap:wrap;gap:2px 16px}
.rung .rp{gap:2px 14px;font-size:14px}

/* Per-row service descriptions in the price tables. Anthony wanted customers to
   see what each line actually includes without leaving the table. */
.td-d{display:block;font-size:12.5px;color:var(--bone-faint);font-weight:400;margin-top:5px;max-width:52ch;white-space:normal;line-height:1.45}

/* Ceramic ladder at 4 rungs: all four now read "Tier N" (a word, not a bare
   numeral), so all four need the smaller size the 54px numeral style can't fit. */
.ladder.g4{grid-template-columns:repeat(4,1fr);gap:18px}
.ladder.g4 .rung{padding:22px}
.ladder.g4 .yr{font-size:30px}
.rung .yr small{display:block;margin-top:4px}
@media(max-width:1100px){.ladder.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.ladder.g4{grid-template-columns:1fr}}

/* Two-card ceramic ladder (Ceramic Wax / 3-Year Coating): fewer, wider cards
   than g4, so the headline can stay a full name at readable size. */
.ladder.g2{grid-template-columns:repeat(2,1fr);gap:22px}
.ladder.g2 .yr{font-size:26px}
@media(max-width:640px){.ladder.g2{grid-template-columns:1fr}}

/* "Everything included" list under the Showroom table */
.inc-list{list-style:none;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;font-size:14px;color:var(--bone-dim)}
.inc-list li::before{content:"✓";color:var(--gold);margin-right:9px;font-weight:700}
@media(max-width:640px){.inc-list{grid-template-columns:1fr}}

/* ── Disabled buttons read as disabled ──
   There was no :disabled style, so a blocked "Next" looked exactly as live as a
   ready one — the customer clicked and nothing happened. Anthony asked for it to
   sit grey until the step is satisfied, then go red. */
.btn:disabled,.btn[disabled]{background:var(--line-2);border-color:var(--line-2);color:var(--bone-faint);
  box-shadow:none;cursor:not-allowed;opacity:1}
.btn:disabled:hover,.btn[disabled]:hover{background:var(--line-2);transform:none}

/* Required / Optional field tags */
.tag-req,.tag-opt{font-size:9.5px;font-weight:700;letter-spacing:.08em;padding:2px 7px;border-radius:999px;margin-left:7px;vertical-align:middle}
.tag-req{background:rgba(232,32,42,.14);color:var(--red-hot)}
.tag-opt{background:rgba(255,255,255,.06);color:var(--bone-faint)}

/* The vehicle-step gate message: only shown while Next is still grey */
.veh-hint{display:none;margin-top:12px}
.veh-hint.show{display:block}
.field textarea{resize:vertical;min-height:76px;line-height:1.5}
.field textarea:focus{outline:none;border-color:var(--red)}

/* ── Add-on rows now stack a clickable row + an optional quantity picker ── */
.addon{flex-direction:column;gap:0;cursor:default}
.a-hit{display:flex;align-items:flex-start;gap:12px;width:100%;cursor:pointer}
.addon.locked{border-color:rgba(216,179,106,.45);background:rgba(216,179,106,.06);cursor:default}
.addon.locked .a-hit{cursor:default}
.addon.locked input{opacity:.5}

/* Quantity picker — the shop needs the count, not "some" */
.a-qty{display:flex;align-items:center;flex-wrap:wrap;gap:8px;width:100%;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.a-qty .q-lab{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--bone-faint);margin-right:2px}
.q-btn{background:transparent;border:1px solid var(--line-2);color:var(--bone-dim);border-radius:999px;
  padding:5px 15px;font-size:13px;font-weight:700;font-family:var(--body);cursor:pointer;transition:.15s;min-height:44px;min-width:44px}
.q-btn:hover{border-color:var(--bone-faint);color:#fff}
.q-btn.on{background:var(--red);border-color:var(--red);color:#fff}

/* ── Process stages (paint correction / ceramic coating explainers) ──
   Deliberately NOT numbered: the price ladder is 1/2/3/4-Step Polish, and
   numbering these would read as those tiers. Named stages instead. */
.stages{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:34px}
.stage{background:var(--panel);border:1px solid var(--line);border-radius:var(--rad);padding:24px;position:relative}
.stage .s-ic{font-size:26px;line-height:1;margin-bottom:12px}
.stage b{display:block;color:#fff;font-size:15.5px;margin-bottom:8px}
.stage p{font-size:13.5px;color:var(--bone-faint);line-height:1.55;margin:0}
.stage .chip{margin-left:6px}
@media(max-width:1100px){.stages{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.stages{grid-template-columns:1fr}}

/* Sub-heading for the ladder, so the ceramic section doesn't stack two ledes */
.stages-h{font-family:var(--display);font-size:clamp(20px,2.4vw,26px);color:#fff;margin-top:46px}
.stages-sub{font-size:14.5px;color:var(--bone-dim);margin-top:8px;max-width:70ch}

/* "Which polish do I buy" mapping list inside the callout */
.map-list{list-style:none;margin:14px 0 0;display:grid;gap:8px;font-size:14px;color:var(--bone-dim)}
.map-list b{color:var(--bone)}
.map-list li::before{content:"→";color:var(--red-hot);margin-right:10px;font-weight:700}

/* Sub-heading inside a price card. Ceramic Coatings now sits inside the
   "By Appointment & Quote" card instead of owning one, so it needs a rule and a
   heading to read as its own group rather than a continuation of the table above. */
.ptable .pt-h{font-size:16.5px;color:#fff;margin:26px 0 4px;padding-top:24px;border-top:1px solid var(--line)}
.ptable table + .pt-h{margin-top:22px}

/* ── Required-field error state (booking) ──
   Greying the Confirm button isn't enough — the customer needs to see WHICH box
   is stopping them. On error the field's border and label go red. */
.field.err label{color:var(--red-hot)}
.field.err input,.field.err select{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.field.err input:focus,.field.err select:focus{border-color:var(--red-hot);box-shadow:0 0 0 2px rgba(232,32,42,.35)}

/* ── Before/after gallery slider ──
   Drag the handle to wipe between the before and after image. Each .ba reads its
   photos from data-before / data-after (any image URL); with none set it shows a
   styled placeholder so the grid is a ready-to-fill template. Works with mouse
   and touch (pointer events + touch-action:none). */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:40px}
@media(max-width:760px){.ba-grid{grid-template-columns:1fr}}
.ba{display:flex;flex-direction:column}
.ba-frame{position:relative;aspect-ratio:4/3;border-radius:var(--rad);overflow:hidden;
  border:1px solid var(--line);cursor:ew-resize;user-select:none;touch-action:none;background:var(--coal-2)}
.ba-layer{position:absolute;inset:0;background-size:cover;background-position:center;
  display:flex;align-items:center;justify-content:center}
.ba-after{background-image:linear-gradient(135deg,#15151a,#20242b 60%,#2b2f38)}
.ba-before{background-image:linear-gradient(135deg,#191714,#221d17 60%,#141210);clip-path:inset(0 50% 0 0)}
/* placeholder wordmark shown only when no photo is set */
.ba-frame.has-photo .ba-ph{display:none}
.ba-ph{font-family:var(--display);font-weight:700;font-size:clamp(22px,4vw,34px);letter-spacing:.04em;opacity:.28}
.ba-after .ba-ph{color:#7ea6c8}
.ba-before .ba-ph{color:#b08a5a}
.ba-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:#fff;transform:translateX(-1px);pointer-events:none}
.ba-handle::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:38px;height:38px;border-radius:50%;background:var(--red);border:3px solid #fff;
  box-shadow:0 4px 14px rgba(0,0,0,.5)}
.ba-handle::before{content:"‹ ›";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:13px;font-weight:700;letter-spacing:1px;z-index:2}
.ba-tag{position:absolute;top:12px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(11,11,13,.7);color:#fff;backdrop-filter:blur(4px)}
.ba-tag.b{left:12px;color:var(--gold)}
.ba-tag.a{right:12px;color:var(--red-hot)}
.ba-cap{margin-top:12px;font-size:14px;color:var(--bone-dim)}
.ba-cap b{color:#fff;font-weight:600}

/* "Recent work" grid — finished-result showcase shots (not before/after pairs).
   Fixed 4:5 tiles via object-fit so mixed phone-photo ratios tile evenly. */
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:34px}
.work{border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;background:var(--panel)}
.work img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block}
.work .wcap{padding:13px 16px;font-size:13.5px;color:var(--bone-dim);line-height:1.5}
.work .wcap b{color:#fff;font-weight:600}
@media(max-width:900px){.work-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.work-grid{grid-template-columns:1fr}}
/* ── WordPress embed overrides ─────────────────────────────────────────────
   wardenautospa.com runs WordPress/Elementor, and our pages are embedded
   there inside an HTML widget. The theme's own CSS would otherwise restyle
   our headings, buttons and links (it was turning red buttons gold and
   white-on-hover). These rules are scoped to the #warden-page / #warden-home
   wrappers, which only exist on those WordPress embeds, so they are inert
   here on the Vercel site. Keeping them in this shared stylesheet means each
   WordPress page only has to link styles.css - no per-page CSS to maintain. */
#warden-page,#warden-home{font-family:'Manrope',-apple-system,sans-serif!important;line-height:1.6!important}
/* NOTE: use literal font stacks here, NOT var(--display)/var(--body). The
   WordPress theme defines its own --display variable (set to `flex` for layout),
   which overrides ours in that context and made every heading fall back to
   sans-serif. Literals are immune to that collision. */
#warden-page h1,#warden-page h2,#warden-page h3,#warden-page h4,
#warden-home h1,#warden-home h2,#warden-home h3,#warden-home h4{
  font-family:'Instrument Serif',Georgia,serif!important;font-weight:400!important;line-height:1.06!important;
  letter-spacing:-.012em!important;color:#fff!important}
#warden-page a,#warden-home a{text-decoration:none}
#warden-page .btn,#warden-home .btn{background:#E8202A!important;color:#fff!important;
  border:1px solid transparent!important;box-shadow:0 6px 24px rgba(232,32,42,.28)!important;text-decoration:none!important}
#warden-page .btn:hover,#warden-page .btn:focus,
#warden-home .btn:hover,#warden-home .btn:focus{background:#FF3B43!important;color:#fff!important}
#warden-page .btn.ghost,#warden-home .btn.ghost{background:transparent!important;
  border:1px solid #3A3A44!important;color:#F4F1EC!important;box-shadow:none!important}
#warden-page .btn.ghost:hover,#warden-page .btn.ghost:focus,
#warden-home .btn.ghost:hover,#warden-home .btn.ghost:focus{background:#17171B!important;
  border-color:#7E7A74!important;color:#fff!important}
#warden-page .star,#warden-page .stars,#warden-home .star,#warden-home .stars{color:#D8B36A!important}
#warden-page .eyebrow,#warden-home .eyebrow{color:#FF3B43!important}

/* ── Reset the WordPress theme/Elementor kit's global <button> style
   (a red gradient background + text-transform:capitalize applied to every
   raw <button> tag) so the booking wizard's own button-based controls -
   service/vehicle/add-on/slot pickers - keep their real dark styling
   instead of inheriting a solid red pill. Anything not explicitly a
   .btn stays transparent/dark by default; .on states restore the red
   selected look on purpose. ── */
#warden-page button,#warden-home button{background-image:none!important;text-transform:none!important;appearance:none!important;-webkit-appearance:none!important;white-space:normal!important;min-width:0!important}
#warden-page .svc-tab,#warden-home .svc-tab{background:transparent!important;color:var(--bone-dim)!important;border-color:var(--line)!important}
#warden-page .svc-tab.on,#warden-home .svc-tab.on{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
#warden-page .opt,#warden-home .opt,
#warden-page .size-card,#warden-home .size-card{background:var(--panel)!important;border-color:var(--line)!important;color:inherit!important}
#warden-page .opt.on,#warden-home .opt.on,
#warden-page .size-card.on,#warden-home .size-card.on{border-color:var(--red)!important;background:rgba(232,32,42,.07)!important;box-shadow:0 0 0 1px var(--red)!important}
#warden-page .slot,#warden-home .slot,
#warden-page .cal-cell,#warden-home .cal-cell,
#warden-page .q-btn,#warden-home .q-btn{background:var(--panel)!important;border-color:var(--line)!important;color:var(--bone-dim)!important}
#warden-page .slot.on,#warden-home .slot.on,
#warden-page .cal-cell.sel,#warden-home .cal-cell.sel,
#warden-page .q-btn.on,#warden-home .q-btn.on{background:var(--red)!important;border-color:var(--red)!important;color:#fff!important}
#warden-page .cal-nav,#warden-home .cal-nav{
  background:transparent!important;border-color:var(--line-2)!important;color:var(--bone)!important;
  width:28px!important;height:28px!important;min-width:0!important;padding:0!important;
  border-radius:8px!important;font-size:15px!important;line-height:1!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important}
/* The WP theme styles every <button>, and .cal-cell is a button. Its padding /
   min-width / font-size were leaking through and forcing each of the 7 grid
   columns to ~62px — 452px of columns inside a 262px popup, so half the month
   rendered outside the box. Pin the metrics back and let columns shrink. */
#warden-page .cal-grid,#warden-home .cal-grid{
  grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:3px!important}
#warden-page .cal-cell,#warden-home .cal-cell{
  min-width:0!important;width:auto!important;padding:8px 0!important;
  font-size:13px!important;line-height:1.2!important;letter-spacing:normal!important;
  text-transform:none!important;box-sizing:border-box!important}
#warden-page .cal-dow,#warden-home .cal-dow{
  min-width:0!important;padding:4px 0!important;font-size:10px!important}
#warden-page .cal-pop,#warden-home .cal-pop{box-sizing:border-box!important}
#warden-page .cal-btn,#warden-home .cal-btn{background:var(--panel)!important;border-color:var(--line-2)!important;color:var(--bone-faint)!important}
#warden-page .cal-btn.has-val,#warden-home .cal-btn.has-val{color:#fff!important}

/* ── Focus visibility (WCAG 2.4.7) + iOS auto-zoom prevention ── */
.btn:focus-visible,.svc-tab:focus-visible,.size-card:focus-visible,
.tab:focus-visible,.act:focus-visible,.q-btn:focus-visible{
  outline:3px solid #fff!important;outline-offset:3px!important}
a:focus-visible{outline:2px solid var(--red-hot);outline-offset:3px;border-radius:4px}
.field input,.field select,.field textarea,
input[type=text],input[type=tel],input[type=email],input[type=number],select,textarea{
  font-size:16px!important}