/* =========================================================
   Astro Auto - Home page specific styles
   ========================================================= */

/* ---------- Hero: full-bleed deep-space galaxy scene — a dark gradient
   with a warm horizon glow (nodding at Mercury's "blue hour" mood, in our
   own red), a starfield, soft nebula glows, shooting stars, and a rocket
   that launches diagonally across. Exactly one screen tall (see below) —
   each section is its own self-contained screen now, so nothing fades or
   blends into the next; there's no ::after overlay softening the bottom
   edge anymore, on purpose. */
.hero{
  /* svh (small viewport height — sized as if the browser's address-bar
     chrome is always shown), not dvh, on purpose: dvh's whole point is that
     it changes as that chrome collapses/expands during scroll, which is
     exactly what made mobile scroll-snap flaky here — the snap points
     themselves shifted mid-scroll, so a swipe could overshoot past the
     section it was snapping to and land stuck between two of them. svh
     never changes, so the snap grid stays put no matter how the toolbar
     animates. Same reasoning on the #services..#faq rule below. */
  min-height:100vh;min-height:100svh;
  height:100vh;height:100svh;
  display:flex;align-items:center;align-items:safe center;
  padding:calc(var(--nav-h) + 12px) 0 60px;
  position:relative;z-index:1;overflow:hidden;
  background:
    radial-gradient(1100px 620px at 50% 108%, rgba(227,28,44,.32), transparent 68%),
    radial-gradient(800px 560px at 14% 10%, rgba(70,70,105,.4), transparent 60%),
    linear-gradient(180deg, #08080d 0%, #101019 38%, #181824 68%, #121219 100%);
}
.hero-bg{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;}
/* inset:0 (not just width/height:100%) so this spans .hero's true full box,
   ignoring .hero's own padding (reserved for nav clearance, and asymmetric
   top-vs-bottom) — otherwise .hero-book's "top:50%" below would center
   against the smaller, off-center padded content area instead of the
   hero's actual visual center. max-width + margin:auto (from the shared
   .wrap class) still keep the content column itself sensibly narrow and
   centered horizontally within this full-bleed box. */
.hero-inner{
  position:absolute;inset:0;z-index:1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}

.hero-stars{
  position:absolute;inset:-20%;transform-origin:50% 50%;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.1px 1.1px at 18% 62%, rgba(255,255,255,.7), transparent),
    radial-gradient(2px 2px at 27% 12%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 38% 44%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.7px 1.7px at 47% 78%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.1px 1.1px at 58% 22%, rgba(255,255,255,.55), transparent),
    radial-gradient(2.2px 2.2px at 66% 56%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 74% 8%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.6px 1.6px at 83% 68%, rgba(255,255,255,.8), transparent),
    radial-gradient(1.1px 1.1px at 91% 30%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.9px 1.9px at 12% 88%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.1px 1.1px at 96% 82%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 55% 5%, rgba(255,255,255,.65), transparent),
    radial-gradient(1.4px 1.4px at 30% 32%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 70% 90%, rgba(255,255,255,.5), transparent);
  background-repeat:no-repeat;
}
@media (prefers-reduced-motion: no-preference){
  .hero-stars{animation:warpZoom 10s linear infinite;animation-delay:-8s;}
}

/* ---------- Warp-speed starfield — three copies of the same star pattern,
   each continuously scaling up and fading out from centre, staggered so
   one is always mid-flight: the effect reads as travelling forward through
   space rather than a single field simply growing and resetting. ---------- */
.hero-warp{
  position:absolute;inset:-20%;transform-origin:50% 50%;
  background-repeat:no-repeat;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent),
    radial-gradient(2px 2px at 60% 15%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 80% 55%, #fff, transparent),
    radial-gradient(2.2px 2.2px at 35% 70%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 10% 80%, #fff, transparent),
    radial-gradient(1.8px 1.8px at 90% 25%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 50% 90%, #fff, transparent),
    radial-gradient(2px 2px at 70% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 25% 50%, #fff, transparent),
    radial-gradient(1.7px 1.7px at 45% 10%, #fff, transparent);
  opacity:0;
}
@media (prefers-reduced-motion: no-preference){
  .hero-warp.w1{animation:warpZoom 10s linear infinite;}
  .hero-warp.w2{animation:warpZoom 10s linear infinite;animation-delay:-3.3s;}
  .hero-warp.w3{animation:warpZoom 10s linear infinite;animation-delay:-6.6s;}
}
@keyframes warpZoom{
  0%{transform:scale(.5);opacity:0;}
  12%{opacity:.75;}
  75%{opacity:.4;}
  100%{transform:scale(2.4);opacity:0;}
}

/* ---------- Deep space galaxy backdrop — soft nebula glows standing in
   for the old orbit rings, which read too geometric/technical for a
   "night sky" mood. Screen-blended so the colour lifts off the dark base
   like light rather than sitting as a flat tint. ---------- */
.hero-galaxy{
  position:absolute;inset:-15%;
  background:
    radial-gradient(32% 26% at 74% 26%, rgba(172,110,255,.24), transparent 70%),
    radial-gradient(26% 22% at 82% 20%, rgba(99,140,255,.18), transparent 70%),
    radial-gradient(40% 34% at 18% 68%, rgba(90,70,200,.14), transparent 70%),
    radial-gradient(16% 14% at 76% 28%, rgba(255,255,255,.08), transparent 70%);
  filter:blur(50px);
  mix-blend-mode:screen;
}

/* ---------- Shooting stars — a bright sparkling head leads, with a thin
   fading streak trailing behind at the exact angle it's travelling.
   Position, direction, and timing are randomised in JS (home.js) rather
   than fixed here: each flight is confined to the left/right margins so
   nothing ever streaks across the headline, and picking start point,
   angle, speed and the gap before the next flight at random per-launch
   means no two passes look alike. This block only holds the static look;
   .trail's rotation and the element's position are set inline per flight. */
.shooting-star{position:absolute;top:0;left:0;width:0;height:0;pointer-events:none;}
.shooting-star .trail{
  position:absolute;top:-1px;left:0;width:190px;height:2px;border-radius:2px;
  transform-origin:left center;
  opacity:0;
  background:linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.35) 35%, transparent 85%);
}
.shooting-star .head{
  position:absolute;top:-2.5px;left:-2.5px;width:5px;height:5px;border-radius:50%;
  background:#fff;
  opacity:0;
  box-shadow:0 0 5px 1.5px rgba(255,255,255,.85), 0 0 13px 4px rgba(196,214,255,.4);
}

/* ---------- Rocket launch — climbs from bottom-left to top-right, then
   resets off-screen for the next pass ---------- */
/* Path (a straight climb up the left margin, then a diagonal cut to the
   top-right, staying above the headline the whole time) is computed and
   animated from home.js, since it needs the text's real rendered position —
   a fixed CSS keyframe can't know that and would risk flying right through
   it, as it briefly did before this used measured safe zones like the
   shooting stars. Position/rotation are set inline per launch. */
.hero-rocket{
  position:absolute;top:0;left:0;width:36px;height:36px;color:rgba(245,245,247,.8);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.25));opacity:0;
}
.hero-rocket svg{position:relative;width:100%;height:100%;display:block;}
/* Flame trail — a child of the rocket itself, positioned in the icon's own
   (unrotated) local coordinates right at the engine, so it automatically
   points the right way whichever direction the rocket is rotated to face.
   Bright where it meets the engine, fading out along its own length to
   read as exhaust dissipating behind, not a shooting-star-style streak. */
.hero-rocket .flame-trail{
  position:absolute;top:66%;left:50%;width:7px;height:56px;
  transform-origin:top center;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(to bottom,
    rgba(255,220,150,.95) 0%, rgba(255,150,60,.6) 28%,
    rgba(255,90,40,.22) 60%, transparent 100%);
  filter:blur(.5px);
}
/* Bright inner core, layered on top of the softer outer trail — narrower,
   whiter-hot, and flickering on its own (different duration/keyframes
   than the outer trail) so the two never move in lockstep. Two
   out-of-sync layers reads as real combustion turbulence; one layer
   pulsing uniformly reads as a fake, mechanical blink. */
.hero-rocket .flame-core{
  position:absolute;top:70%;left:50%;width:3px;height:30px;
  transform-origin:top center;transform:translateX(-50%);border-radius:50%;
  background:linear-gradient(to bottom,
    #fff 0%, rgba(255,235,180,.95) 22%,
    rgba(255,170,80,.55) 55%, transparent 100%);
}
@media (prefers-reduced-motion: no-preference){
  .hero-rocket .flame-trail{animation:flameFlickerA .42s ease-in-out infinite;}
  .hero-rocket .flame-core{animation:flameFlickerB .27s ease-in-out infinite;}
}
@keyframes flameFlickerA{
  0%{opacity:.85;transform:translateX(-50%) scaleY(1) scaleX(1);}
  22%{opacity:.65;transform:translateX(-50%) scaleY(.82) scaleX(.88);}
  48%{opacity:1;transform:translateX(-50%) scaleY(1.18) scaleX(1.08);}
  71%{opacity:.75;transform:translateX(-50%) scaleY(.92) scaleX(.95);}
  100%{opacity:.85;transform:translateX(-50%) scaleY(1) scaleX(1);}
}
@keyframes flameFlickerB{
  0%{opacity:.9;transform:translateX(-50%) scaleY(1) scaleX(1);}
  30%{opacity:1;transform:translateX(-50%) scaleY(1.25) scaleX(.9);}
  55%{opacity:.7;transform:translateX(-50%) scaleY(.78) scaleX(1.1);}
  80%{opacity:1;transform:translateX(-50%) scaleY(1.12) scaleX(.95);}
  100%{opacity:.9;transform:translateX(-50%) scaleY(1) scaleX(1);}
}

/* Wide enough that "Service. Sales. Style." always fits on one line up to
   the headline's max font size (it needs ~780px at 80px type) — the
   trailing "One shop." always starts its own line via an explicit <br> in
   the markup, not natural wrapping, but the line above it still has to
   have room to not wrap early on its own. */
.hero-head{max-width:840px;margin:0 auto 0;text-align:center;}
/* Scales with viewport height (same idea as the hero-choice clamp further
   down) — a flat -195px pulls the headline up into the nav on a shorter
   desktop window, since the now-independently-centered button no longer
   drags the headline down with it the way the old single-block shift did. */
@media (min-width:761px){ .hero-head{transform:translateY(clamp(-220px, calc(-14vh - 70px), -140px));} }
@media (max-width:760px){ .hero-head{transform:translateY(-120px);} }
.hero-head .eyebrow{justify-content:center;color:var(--red-2);}
.hero-head h1{font-size:clamp(44px,6.8vw,80px);letter-spacing:-.01em;color:#f5f5f7;}
.hero-head h1 .accent{color:var(--red-2);position:relative;}

/* ---------- Hero entrance sequence (plays once on load, no scroll needed) ---------- */
@keyframes heroFadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes heroPop{0%{opacity:0;transform:translateY(14px) scale(.94);}70%{opacity:1;}100%{opacity:1;transform:translateY(0) scale(1);}}
/* Same pop as heroPop, but with the permanent translate(-50%,-50%) centering
   baked into every keyframe — .hero-book is absolutely centered via that
   transform now, and an animation's keyframes fully replace transform
   while running, so the plain heroPop above would momentarily un-center it. */
@keyframes heroBookPop{
  0%{opacity:0;transform:translate(-50%,-50%) translateY(14px) scale(.94);}
  70%{opacity:1;}
  100%{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1);}
}
@keyframes heroChoiceFade{from{opacity:0;}to{opacity:1;}}
@media (prefers-reduced-motion: no-preference){
  .hero-head .eyebrow{animation:heroFadeUp .6s cubic-bezier(.2,.8,.2,1) .1s both;}
  .hero-head h1{animation:heroPop .7s cubic-bezier(.2,.8,.2,1) .2s both;}
  .hero-book{animation:heroBookPop .6s cubic-bezier(.2,.8,.2,1) .55s both;}
  /* Opacity-only — the permanent overlap position lives in transform, so
     the entrance animation must never touch that property or it'll fight it. */
  .hero-choice{animation:heroChoiceFade .5s ease .7s both;}
}

/* ---------- Quick paths (Service / Inventory) — the cards visually dock
   into the tail of the hero, but the section itself takes zero layout
   space (height:0 + overflow:visible) so the cards can be pushed up with a
   transform — a purely visual shift — instead of a negative margin. A
   negative margin on a normal-flow element also drags everything AFTER it
   up in the document, which let #services start above the hero's true
   bottom edge and caused hero/next-section content to bleed into each
   other depending on scroll position. transform never touches layout, so
   hero and #services now meet at an exact, non-overlapping edge. ---------- */
.quick-paths{padding:0;height:0;overflow:visible;position:relative;z-index:2;}
.hero-choice{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:860px;margin:0 auto;transform:translateY(-170px);}
@media (min-width:761px){
  .hero-choice{gap:110px;max-width:1180px;transform:translateY(clamp(-330px, calc(-55vh + 245px), -190px));}
}
/* Liquid-glass dark panel, same material as the nav — used on every size,
   not just desktop: the cards overlap up into the dark hero via transform
   on mobile too now, so a light/white card would look just as out of place
   there as it would on desktop. */
.choice-card{
  position:relative;
  background:rgba(38,38,45,.5);
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.16);
  padding:19px;border-radius:var(--radius-md);
  display:flex;flex-direction:column;gap:8px;
  min-height:0;justify-content:flex-start;align-items:flex-start;text-align:left;overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14);
  transition:background .3s ease,transform .25s ease,box-shadow .3s ease,border-color .3s ease;
}
.choice-card:hover{transform:translateY(-4px);background:rgba(38,38,45,.6);border-color:rgba(255,255,255,.24);box-shadow:0 34px 64px -22px rgba(8,8,13,.45);}
.choice-card::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s ease;
  background:radial-gradient(circle at 30% 20%,rgba(227,28,44,.18),transparent 60%);
}
.choice-card:hover::before{opacity:1;}
.choice-top{display:flex;align-items:center;gap:13px;position:relative;z-index:1;}
.choice-card .choice-icon{
  width:38px;height:38px;flex-shrink:0;border-radius:11px;background:rgba(227,28,44,.24);color:var(--red-2);
  display:flex;align-items:center;justify-content:center;
}
.choice-card .choice-icon svg{width:18px;height:18px;}
.choice-card h3{font-size:clamp(19px,2vw,25px);line-height:1;color:#f5f5f7;}
.choice-card p{font-size:12.5px;max-width:360px;position:relative;z-index:1;color:rgba(245,245,247,.68);}
.choice-card .choice-go{
  display:inline-block;margin-top:auto;position:relative;z-index:1;border-radius:999px;
}
.choice-go-inner{
  display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:12.5px;color:#f5f5f7;
  padding:8px 15px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  transition:border-color .25s ease, background .25s ease, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;
}
.choice-card:hover .choice-go-inner{background:rgba(255,255,255,.16);border-color:var(--red-2);transform:translateY(-2px);box-shadow:0 10px 20px -12px rgba(227,28,44,.5);}
.choice-go-inner svg{width:14px;height:14px;transition:transform .2s ease;}
.choice-card:hover .choice-go-inner svg{transform:translateX(5px);}
/* Placed after the base card rules (not with the .hero-inner/.hero-choice
   desktop block above) so these actually win the cascade — same class,
   same specificity, so source order decides, and the base rules come
   later in the file than that block. */
@media (min-width:761px){
  .choice-card{padding:34px;}
  .choice-card .choice-icon{width:54px;height:54px;}
  .choice-card .choice-icon svg{width:25px;height:25px;}
  .choice-card h3{font-size:clamp(23px,2.4vw,31px);}
  .choice-card p{font-size:14.5px;max-width:400px;}
  .choice-go-inner{padding:11px 19px;font-size:13.5px;gap:8px;}
  .choice-go-inner svg{width:15px;height:15px;}
}

/* Absolutely centered on the hero itself (not just horizontally, which
   text-align:center would already give it) — hero-inner is full height with
   its own centering (see above), so this "50%" resolves against the hero's
   true vertical center, independent of however tall the headline above it
   is. That's what makes the button "perfectly centered" a real guarantee
   instead of an approximation from stacking heights and margins. */
.hero-book{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  text-align:center;display:flex;flex-direction:column;align-items:center;gap:16px;
}
.hero-book .btn-primary{padding:29px 66px;font-size:21px;}
.hero-book .hero-book-note{font-size:13px;color:rgba(245,245,247,.55);font-family:var(--ff-mono);}
.hero-book .hero-book-note a{color:var(--red-2);}

.trust-strip{display:flex;gap:32px;flex-wrap:wrap;justify-content:center;margin-top:44px;}
.trust-item{display:flex;flex-direction:column;gap:4px;align-items:center;text-align:center;}
.trust-item .num{font-family:var(--ff-mono);font-size:16px;color:var(--red-2);}
.trust-item .lbl{font-size:12.5px;color:var(--white-faint);}

@media (max-width:760px){
  .hero{padding:calc(var(--nav-h) + 18px) 0 22px;}
  .hero-head{margin-bottom:22px;}
  .hero-head h1{font-size:clamp(27px,8.6vw,36px);}
  /* Stacked (1 column) on mobile — each card reads as its own row instead
     of two half-width cards squeezed side by side. Kept compact (small
     icon, no description, tight padding) since stacking roughly doubles
     the row's total height versus 2 columns, and it still has to fit
     inside the hero's overlap zone above #services.
     The overlap amount also has to scale with viewport height (same idea
     as the desktop clamp above it) — a flat translateY pulls the cards up
     too far on a short phone (landscape, or a browser with a lot of chrome)
     and they collide with the "Book an Appointment" button/note above them. */
  .hero-choice{grid-template-columns:1fr;gap:10px;transform:translateY(clamp(-240px, calc(-36vh + 100px), -70px));}
  .choice-card{min-height:0;padding:14px 17px;border-radius:var(--radius-md);gap:0;flex-direction:row;align-items:center;}
  .choice-top{gap:11px;}
  .choice-card .choice-icon{width:32px;height:32px;border-radius:9px;}
  .choice-card .choice-icon svg{width:15px;height:15px;}
  .choice-card h3{font-size:17px;}
  .choice-card p{display:none;}
  .choice-card .choice-go{margin-top:0;margin-left:auto;}
  .choice-go-inner{padding:7px 12px;font-size:10.5px;gap:5px;white-space:nowrap;}
  .hero-book{gap:10px;}
  .hero-book .btn-primary{padding:22px 46px;font-size:18.5px;}
  .hero-book .hero-book-note{font-size:11.5px;}
  .trust-strip{margin-top:20px;gap:16px 22px;}
  .trust-item .num{font-size:13px;}
  .trust-item .lbl{font-size:10.5px;}
}

/* A short phone screen (landscape, or heavy browser chrome — under ~700px
   of visible height) doesn't have room for the headline + note + stacked
   card column at normal mobile sizing without either the cards overlapping
   the button above them or spilling past the hero into #services below.
   Trimming everything here frees up enough space for both to have real
   margins. */
@media (max-width:760px) and (max-height:700px){
  .hero{padding:calc(var(--nav-h) + 10px) 0 14px;}
  .hero-head{margin-bottom:14px;}
  .hero-head h1{font-size:clamp(24px,7.6vw,32px);}
  .hero-book{gap:6px;}
  .hero-book .btn-primary{padding:17px 36px;font-size:16px;}
  .hero-book .hero-book-note{font-size:10.5px;}
  /* Stacking (see the 760px tier) means 2 rows here instead of 1, so this
     short-viewport tier needs to shave more than before to still fit. */
  .hero-choice{gap:6px;transform:translateY(clamp(-240px, calc(-36vh + 60px), -70px));}
  .choice-card{padding:9px 12px;gap:6px;}
  .choice-top{gap:7px;}
  .choice-card .choice-icon{width:26px;height:26px;}
  .choice-card .choice-icon svg{width:12px;height:12px;}
  .choice-card h3{font-size:14px;}
}
/* ---------- Full-screen snap sections — each major section is a locked,
   exactly-one-screen "card" (Webflow "sticky full-screen with pagination"
   pattern): height is pinned to the viewport, not just min-height, so
   scrolling truly pages through discrete screens instead of drifting past
   an oversized section. Uses 100dvh (falling back to 100vh where dvh isn't
   supported) so the screen genuinely fits the visible area on any device —
   100vh alone is taller than what's actually visible on mobile browsers
   whose address bar shrinks the viewport, which is what "fit any device"
   needs here. Applies on both desktop and mobile; overflow-y:auto is a
   safety net only, for the rare case content still can't fit at a very
   short viewport — it should never visibly kick in at normal sizes. ---------- */
#services > .wrap, #inventory > .wrap, #why > .wrap, #process > .wrap,
#reviews > .wrap, #area > .wrap, #faq > .wrap{
  width:100%;
}
/* z-index:0 (any explicit value, not just position) is what actually makes
   #services its own stacking context — without it, .services-showcase's own
   glow (below) could stack against #services' sibling sections instead of
   staying contained to this section, since a plain position:relative
   element with no z-index doesn't contain z-index layering to itself. */
#services{background:var(--black);z-index:0;}
/* The pillars/showcase block is still vertically centered within #services
   (align-items:center, from the shared rule above) — but .services-label
   is a fixed top-pinned overlay, not part of that flow, so nothing was
   reserving it any space. The showcase's own padding makes that block
   tall enough that centering it against the section's *full* height can
   push its top edge up past the label at the shorter end of desktop
   heights. Restoring padding-top here (overriding the shared rule's 0)
   makes the centering math run against the space *below* the label
   instead, which rules out the overlap by construction rather than by
   tuning one specific height. Matches the label's own two-tier top offset
   with a bit of clearance added on top of it.
   html.home-page #services (not plain #services): the shared rule this
   overrides lives further down the file, and a same-specificity override
   placed earlier than the rule it's meant to beat loses the cascade
   regardless of how it reads — this file has hit that exact bug more than
   once already. Adding the .home-page class node makes this selector
   unambiguously more specific instead of relying on file position. */
html.home-page #services{padding-top:172px;}
@media (max-height:760px){ html.home-page #services{padding-top:150px;} }

/* Showcase enclosure housing the 4 pillar cards — a dark glass display
   case the cards sit inside, with a soft red glow blooming outward from
   behind its own edges onto the light page (the ::before below, blurred
   and sized larger than the case itself), rather than a diffuse tint
   spread across the whole section. All sizing here is relative
   (percent/em, no fixed pixel width) so the case scales cleanly at any
   desktop width; the two media queries only trim its padding/glow size on
   shorter viewports, since #services still has to fit exactly one screen
   with no scroll — same constraint every section on this page already
   has to satisfy. */
.services-showcase{
  position:relative;z-index:0;
  border-radius:32px;
  padding:clamp(28px,5vh,64px) clamp(24px,4vw,56px);
  background:linear-gradient(165deg, rgba(23,23,28,.94), rgba(23,23,28,.86));
  border:1px solid rgba(227,28,44,.22);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.06);
}
.services-showcase::before{
  content:"";position:absolute;inset:clamp(-45px,-6vh,-25px);
  background:radial-gradient(ellipse at center, rgba(227,28,44,.32), transparent 70%);
  filter:blur(clamp(28px,4vh,50px));
  z-index:-1;border-radius:inherit;pointer-events:none;
}
/* Individual cards get a faint light lift against the dark case behind
   them — without this they're close enough in tone to the showcase's own
   dark glass that they'd blend into it instead of reading as distinct
   pieces on display. */
.services-showcase .pillar-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14);}
.services-showcase .pillar-card:hover{border-color:rgba(255,255,255,.26);}
/* One shared call to action for the whole case, centred below the cards —
   the per-card "Request an Appointment" buttons are gone. */
.showcase-cta{display:flex;justify-content:center;margin-top:clamp(20px,3.5vh,34px);}
/* No button under each card now, so drop the trailing divider on the last
   bullet inside the showcase cards. */
.services-showcase .pillar-list li:last-child{border-bottom:none;padding-bottom:0;}
.services-showcase .pillar-list{margin-bottom:0;}
/* The "What We Offer" label sits pinned near the top-left of the section
   instead of stacked directly above the pillar cards, so it reads as a
   corner kicker rather than just the first line of the centered block —
   the pillars (in their own separate .wrap below) stay centered in the
   section exactly as before, unaffected by this. Reusing the .wrap class
   here (rather than a one-off max-width) is what keeps the label's left
   edge lined up with the pillar cards' own left edge. */
.services-label{position:absolute;top:112px;left:0;right:0;z-index:1;}
@media (max-height:760px){ .services-label{top:96px;} }
#inventory{background:var(--black-3);}
#why{background:var(--black);}
#process{background:var(--black-3);}
#reviews{background:var(--black);}
#area{background:var(--black-3);}
#faq{background:var(--black);}
#blog{background:var(--black-3);}
/* Blog teaser cards, mobile only — a home-page teaser is one screen of the
   scroll-snap sequence, and blog.css's normal card (full-width cover image
   + title + excerpt + meta + button) runs 500px+ tall, so even 2 stacked
   would overflow. Compact, horizontal cards instead — thumbnail left, title
   + date right — the same row shape already used for the Service/Inventory
   choice cards' mobile layout. Scoped with the #blog id (not just a class)
   so it reliably outranks blog.css's own .blog-card rules regardless of
   which stylesheet loads second. */
@media (max-width:760px){
  #blog .reviews-head{margin-bottom:18px;}
  #blog .blog-grid{gap:10px;}
  #blog .blog-card{flex-direction:row;align-items:center;}
  #blog .blog-card-media{width:84px;aspect-ratio:1/1;flex-shrink:0;}
  #blog .blog-card-body{padding:12px 14px;gap:4px;}
  #blog .blog-card-tags,
  #blog .blog-card-excerpt,
  #blog .blog-card-link{display:none;}
  #blog .blog-card-title{font-size:14.5px;line-height:1.3;}
  #blog .blog-card-meta{margin-top:2px;font-size:10.5px;}
}
/* Same idea on a shorter desktop window — the 3-across grid keeps its
   normal card shape (unlike the mobile row layout above), just trimmed
   down enough to fit one screen. Threshold goes all the way up to 950px
   (not just ~760px, where the other sections' compact tier tops out) —
   right above 760px the card is still its full, untrimmed size while the
   overlap/centering math hasn't caught up yet, the same razor-thin-margin
   trap the hero cards hit earlier, so this stays compact through that
   whole risky band instead of snapping back to full size at 761px. */
@media (min-width:761px) and (max-height:950px){
  #blog .reviews-head{margin-bottom:16px;}
  #blog .blog-grid{gap:16px;}
  #blog .blog-card-media{aspect-ratio:28/9;}
  #blog .blog-card-body{padding:12px;gap:5px;}
  #blog .blog-card-excerpt{display:none;}
  #blog .blog-card-title{font-size:15.5px;}
  #blog .blog-card-link{padding:6px 13px;font-size:11.5px;}
}
/* Mandatory + scroll-snap-stop:always is what makes each screen properly
   lock in place (the "sticky full-screen with pagination" behavior) — it
   was fighting scroll on short desktop viewports only because a couple of
   sections were taller than 100vh and fell back to their own internal
   overflow-y:auto, which competed with the page-level snap. The real fix
   for that is the max-height spacing rules further down, which make every
   section actually fit one screen — so mandatory can stay mandatory, on
   mobile too: the earlier mobile "jump and land stuck between sections" bug
   was really the *dvh* unit changing value as the browser's toolbar
   collapsed mid-scroll, which shifted the snap points out from under an
   in-progress scroll — svh below fixes that at the root, so mandatory no
   longer needs to be relaxed to proximity on mobile to avoid it. Proximity
   was actually the wrong trade: it only snaps when a scroll happens to end
   up near a snap point, so on many ordinary swipes it doesn't snap at all,
   which reads as the lock not working.
   Selectors here use the .home-page class on <html> (set in index.html),
   not :has(#services) — :has() isn't supported on every mobile browser
   still in real use, and on one that doesn't, the whole rule silently
   never matches, so the "no white gap" fix below would just do nothing on
   that device. A plain class has no such gap in support. */
html.home-page{scroll-snap-type:y mandatory;}
.hero, #services, #inventory, #why, #process, #reviews, #area, #faq, #blog, #book{
  scroll-snap-align:start;scroll-snap-stop:always;
}
#services, #inventory, #why, #process, #reviews, #area, #faq, #blog, #book{
  height:100vh;height:100svh;padding-top:0;padding-bottom:0;
}
#services, #inventory, #why, #process, #reviews, #area, #faq, #blog{
  display:flex;align-items:center;align-items:safe center;
  overflow-y:auto;overflow-x:hidden;
}
/* #book is a mandatory snap-stop target (above) *and* the one section whose
   content routinely runs taller than one screen (the multi-step booking
   form), so it actually needs the overflow-y:auto the other sections above
   only carry as a rarely-used safety net. Putting that auto-scroll directly
   on the snap target itself turned out to be the reason scrolling from
   #blog skipped straight over #book to the footer: a snap-stop:always
   element that is also its own overflow:auto scroll container is a known
   rough edge for browsers' mandatory-snap engines, which can fail to
   recognize it as a stop at all once it's carrying its own scrollable
   overflow. Splitting the two roles apart — #book stays a plain,
   non-scrolling snap target, and .book-scroll (an absolutely-positioned
   child filling it) carries the actual overflow-y:auto — resolves that
   ambiguity, so the outer page-level scroller has no reason to treat #book
   as anything other than a normal stop. */
#book{overflow:hidden;position:relative;}
.book-scroll{
  position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;
  display:flex;align-items:center;align-items:safe center;
}
/* No light gap, ever, at the seam between the dark hero and the page's own
   base background — overscroll rubber-banding (the iOS/Android bounce past
   a scroll boundary) can reveal whatever sits behind the sections for an
   instant, and body's own background is the light page-content tone, not
   the hero's dark space tone. overscroll-behavior stops the bounce outright
   on the snap-scrolling home page; the dark fallback background is a second
   line of defence for any sub-pixel seam even without a bounce. */
html.home-page{overscroll-behavior-y:none;}
html.home-page body{background:#08080d;overscroll-behavior-y:none;}

/* The footer is its own snap-locked block too, same as every full-screen
   section above — but it doesn't get the height:100vh treatment, since it's
   naturally much shorter than a full screen and stretching it to fill one
   would just leave a wall of empty space under the real content. Aligning
   its *end* edge (rather than start) means what snaps into place is the
   footer sitting flush against the bottom of the viewport, with the tail
   end of #book visible above it — the natural "bottomed out" reading,
   instead of pinning the short footer to the top of an otherwise-empty
   screen. scroll-snap-stop:always makes it a genuine lock like the rest,
   not just a fallback landing spot. */
html.home-page footer{scroll-snap-align:end;scroll-snap-stop:always;}


/* ---------- Section pagination rail — one slim liquid-glass tick per
   screen, active state tracks scroll position (via JS), click to jump
   straight to a section. The whole rail flips to a light-glass look
   (.on-light, toggled in JS) once the active section itself is light —
   every section but the hero — so it never loses contrast. ---------- */
.section-dots{display:none;}
@media (min-width:761px){
  .section-dots{
    display:flex;flex-direction:column;align-items:center;gap:8px;
    position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:150;
    padding:10px 7px;border-radius:999px;
    background:rgba(38,38,45,.45);
    backdrop-filter:blur(20px) saturate(200%);
    -webkit-backdrop-filter:blur(20px) saturate(200%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
    transition:background .35s ease,border-color .35s ease;
  }
  .section-dots .dot{
    -webkit-appearance:none;appearance:none;
    border:none;outline:none;box-shadow:none;
    width:3px;height:16px;border-radius:2px;padding:0;margin:0;
    background:rgba(255,255,255,.22);
    transition:background .25s ease,width .25s ease,height .25s ease;
  }
  .section-dots .dot:focus-visible{outline:2px solid rgba(255,255,255,.6);outline-offset:2px;}
  .section-dots .dot:hover{background:rgba(255,255,255,.5);}
  .section-dots .dot.active{background:#ff0000;width:7px;height:24px;}
  .section-dots.on-light{
    background:rgba(255,255,255,.5);
    border-color:rgba(20,20,26,.08);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  }
  .section-dots.on-light .dot{background:rgba(20,20,26,.16);}
  .section-dots.on-light .dot:hover{background:rgba(20,20,26,.36);}
  .section-dots.on-light .dot.active{background:#ff0000;}
}

/* ---------- Scroll indicator — a small bouncing arrow at the bottom
   centre of whichever screen is active, hinting there's more to scroll.
   Same light/dark glass flip as the rail; hidden on the final screen. ---------- */
.scroll-indicator{display:none;}
@media (min-width:761px){
  .scroll-indicator{
    display:flex;align-items:center;justify-content:center;
    position:fixed;left:50%;bottom:28px;z-index:150;
    transform:translateX(-50%);
    width:36px;height:36px;border-radius:50%;
    background:rgba(38,38,45,.5);
    backdrop-filter:blur(20px) saturate(200%);
    -webkit-backdrop-filter:blur(20px) saturate(200%);
    border:1px solid rgba(255,255,255,.16);
    color:var(--red-2);
    animation:scrollIndicatorBounce 1.8s ease-in-out infinite;
    transition:background .35s ease,border-color .35s ease,opacity .3s ease;
  }
  .scroll-indicator svg{width:17px;height:17px;}
  .scroll-indicator.on-light{background:rgba(255,255,255,.55);border-color:rgba(20,20,26,.12);}
  .scroll-indicator.is-hidden{opacity:0;pointer-events:none;}
}
@keyframes scrollIndicatorBounce{
  0%,100%{transform:translateX(-50%) translateY(0);}
  50%{transform:translateX(-50%) translateY(6px);}
}
@media (prefers-reduced-motion: reduce){
  .scroll-indicator{animation:none;}
}

/* ---------- Services pillars — floating liquid-glass cards, same dark
   frosted material as the nav and hero cards ---------- */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch;}
/* One uniform look for every card now (the old primary/secondary split —
   a red-tinted card with a solid button next to three plain ones with
   outline buttons — is gone; every card uses the former "primary" card's
   style). Flex column + the button's margin-top:auto is what actually
   lines up the buttons: the cards list different numbers of bullet points,
   so without this each button would sit at a different height depending on
   how much text is above it, even though the cards themselves are already
   equal height (the grid row stretches them to match). */
.pillar-card{
  background:linear-gradient(165deg, rgba(64,30,34,.6), rgba(38,38,45,.5));
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);
  padding:24px;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:stretch;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.pillar-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.24);}
.pillar-icon{width:44px;height:44px;border-radius:14px;background:rgba(227,28,44,.24);display:flex;align-items:center;justify-content:center;color:var(--red-2);margin-bottom:16px;}
.pillar-icon svg{width:22px;height:22px;}
.pillar-card h3{margin-bottom:8px;color:#f5f5f7;font-size:19px;}
.pillar-card p{font-size:13.5px;margin-bottom:16px;color:rgba(245,245,247,.68);}
.pillar-list{display:flex;flex-direction:column;gap:7px;margin-bottom:18px;}
.pillar-list li{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding-bottom:7px;border-bottom:1px dashed rgba(255,255,255,.14);color:rgba(245,245,247,.68);}
.pillar-list li b{color:#f5f5f7;font-weight:500;}
.pillar-list li .price{font-family:var(--ff-mono);color:var(--red-2);white-space:nowrap;}
.pillar-card .btn{width:100%;margin-top:auto;}

/* "Signs you need this" checklists on the individual service pages */
.signs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;}
.sign-item{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.5;color:var(--white-dim);}
.sign-item svg{width:20px;height:20px;flex-shrink:0;color:var(--red-2);margin-top:2px;}
@media (max-width:760px){ .signs-grid{grid-template-columns:1fr;gap:12px;} }

/* Single-quote trust callout on the individual service pages. These pages
   sit on the site's light theme (see :root — --white/--white-dim are dark
   grays, not literal white) with no dark card behind this block, so it
   needs dark-on-light text, not the near-white (#f5f5f7-family) hardcoded
   colors that only read correctly inside the homepage's own dark
   glass cards (.pillar-card, .why-item, etc). */
.trust-quote{border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:28px 32px;max-width:640px;}
.trust-quote .stars{color:var(--red-2);letter-spacing:2px;margin-bottom:10px;font-size:14px;}
.trust-quote p{font-family:var(--ff-display);font-size:17px;color:var(--white);margin-bottom:14px;}
.trust-quote .who{font-size:13px;color:var(--white-faint);}
.trust-quote .who b{color:var(--white-dim);font-weight:500;}
@media (max-width:760px){ .trust-quote{padding:22px 20px;} .trust-quote p{font-size:15.5px;} }

/* Pricing that varies by vehicle size (e.g. oil change tiers) — a small
   card of its own above the flat pillar-list, since a single dashed row
   can't carry more than one price. Same light-theme colors as .trust-quote
   above, for the same reason (no dark card background here). */
.price-tier-card{
  border:1px solid var(--border-soft);border-radius:var(--radius-md);
  padding:20px 24px;margin-bottom:16px;max-width:520px;
}
.price-tier-card .tier-title{font-family:var(--ff-display);font-size:15.5px;color:var(--white);margin-bottom:3px;}
.price-tier-card .tier-desc{font-size:12.5px;color:var(--white-dim);margin-bottom:14px;}
.price-tier-rows{display:flex;flex-direction:column;}
.price-tier-rows li{
  display:flex;justify-content:space-between;gap:10px;padding:8px 0;
  border-bottom:1px dashed var(--border);font-size:12.5px;color:var(--white-dim);
}
.price-tier-rows li:last-child{border-bottom:none;}
.price-tier-rows li .price{font-family:var(--ff-mono);color:var(--red-2);font-weight:600;white-space:nowrap;}

/* .pillar-list itself is also used standalone (not nested in a
   .pillar-card) on these same light-theme service pages, for the
   "Starting Prices" lists — its base colors above assume the dark card
   background .pillar-card normally supplies (home page only), so give it
   the light-theme reading everywhere that dark card isn't present. */
html:not(.home-page) .pillar-list li{color:var(--white-dim);border-bottom-color:var(--border);}
html:not(.home-page) .pillar-list li b{color:var(--white);}

/* ---------- Featured vehicles — same liquid-glass card material ---------- */
.veh-scroller{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.veh-card{
  background:rgba(38,38,45,.5);
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);overflow:hidden;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  transition:transform .2s ease, border-color .2s ease;display:flex;flex-direction:column;
}
.veh-card:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.24);}
.veh-media{aspect-ratio:4/3;background:linear-gradient(150deg, rgba(255,255,255,.08), rgba(255,255,255,.02));position:relative;overflow:hidden;}
.veh-media img{width:100%;height:100%;object-fit:cover;}
.veh-media .veh-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(245,245,247,.4);}
.veh-media .veh-placeholder svg{width:64px;height:64px;opacity:.35;}
.veh-status{position:absolute;top:14px;left:14px;}
.veh-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1;}
.veh-title{font-family:var(--ff-display);font-size:17px;font-weight:500;color:#f5f5f7;}
.veh-trim{font-size:13px;color:rgba(245,245,247,.5);margin-top:-6px;}
.veh-price{font-family:var(--ff-mono);color:var(--red-2);font-size:18px;font-weight:600;}
.veh-meta{display:flex;flex-wrap:wrap;gap:8px;font-size:12px;color:rgba(245,245,247,.65);font-family:var(--ff-mono);margin-top:2px;}
.veh-meta span{padding:4px 9px;background:rgba(255,255,255,.08);border-radius:6px;}
.veh-body .btn{margin-top:auto;}
.veh-body .btn-ghost{background:rgba(255,255,255,.08);color:#f5f5f7;border-color:rgba(255,255,255,.2);}
.veh-body .btn-ghost:hover{border-color:var(--red-2);color:var(--red-2);}
.veh-empty{grid-column:1/-1;text-align:center;padding:50px 20px;color:var(--white-faint);border:1px dashed var(--border);border-radius:var(--radius-md);}

@media (max-width:980px){
  .pillars{grid-template-columns:1fr 1fr;}
  .veh-scroller{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .pillars{grid-template-columns:1fr 1fr;}
  .veh-scroller{grid-template-columns:1fr;}
}
/* Mobile: title-only cards. The full card (description + bullet list +
   book button) stacked in one column made #services run to several
   screens tall, so it had to scroll internally (overflow-y:auto) — and
   that inner scroll fights the page's own scroll-snap paging: a swipe
   over a card scrolls the list inside it instead of paging to the next
   section, so it's not obvious which "layer" of the page is actually
   scrolling. Stripping each card down to just its icon + title (2 columns,
   same idea as the hero's Service/Inventory cards) makes the whole row
   short enough to fit one screen on its own, so #services goes back to
   being a real, lockable, non-scrolling page like every other section. */
@media (max-width:760px){
  .pillars{gap:16px;}
  /* Height comes purely from content (padding + icon + title), not
     aspect-ratio — aspect-ratio ties height to the card's own width, and
     width comes from viewport WIDTH, not height, so a landscape phone
     (wide but short) would blow the cards up tall right when there's the
     least vertical room to spare. Content-driven height stays essentially
     the same regardless of viewport width, which is what actually needs
     to fit a landscape screen. */
  .pillar-card{
    padding:22px;gap:0;min-height:0;
    align-items:center;justify-content:center;text-align:center;
  }
  .pillar-card p, .pillar-list, .pillar-card .btn{display:none;}
  .pillar-icon{width:46px;height:46px;margin-bottom:14px;}
  .pillar-icon svg{width:21px;height:21px;}
  .pillar-card h3{margin-bottom:0;font-size:18.5px;}
}
/* A phone in landscape (wide but short — commonly ~380-430px of visible
   height) still doesn't have quite enough room for the normal mobile card
   size above, even without the aspect-ratio problem. Shrinking further
   here (a pure height condition, independent of width) closes that gap. */
@media (max-width:760px) and (max-height:500px){
  .section-head{margin-bottom:14px;}
  .pillars{gap:10px;}
  .pillar-card{padding:13px;}
  .pillar-icon{width:30px;height:30px;margin-bottom:7px;}
  .pillar-icon svg{width:14px;height:14px;}
  .pillar-card h3{font-size:14.5px;}
  /* Same reasoning as .pillar-card .btn above — the shared case CTA is
     dropped on landscape-phone heights so #services still fits one screen
     without an internal scroll. The nav's Inquire Now stays reachable. */
  .showcase-cta{display:none;}
}
/* A phone in landscape commonly reports a CSS width ABOVE the 760px mobile
   cutoff (rotating swaps width/height, and most phones are 760-1000px wide
   lying flat) — so it was landing on the desktop's full card (description +
   list + button) at a phone-short height instead of the title-only
   treatment above, and hit the exact same scroll-fights-scroll problem this
   whole change is about. Width is capped at 1024px so this never touches a
   genuine short desktop/laptop browser window, only the landscape-phone
   range. */
@media (min-width:761px) and (max-width:1024px) and (max-height:520px){
  .section-head{margin-bottom:14px;}
  .pillars{gap:10px;}
  .pillar-card{
    padding:13px;gap:0;min-height:0;
    align-items:center;justify-content:center;text-align:center;
  }
  .pillar-card p, .pillar-list, .pillar-card .btn{display:none;}
  .pillar-icon{width:30px;height:30px;margin-bottom:7px;}
  .pillar-icon svg{width:14px;height:14px;}
  .pillar-card h3{font-size:14.5px;}
  .showcase-cta{display:none;}
}

/* ---------- Why — same liquid-glass card material ---------- */
/* 4 cards now — one row on wide desktops (3 columns would orphan one),
   2x2 below 1100px (see media query further down). */
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
/* "Built around the whole vehicle" stays on one line: lift the shared
   .section-head 640px cap for this heading; natural wrapping returns on
   narrow phones. */
#why .section-head{max-width:none;}
@media (min-width:601px){ #why .section-head h2{white-space:nowrap;} }
@media (max-width:1100px){ .why-grid{grid-template-columns:1fr 1fr;} }
.why-item{
  background:rgba(38,38,45,.5);
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);padding:32px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  transition:border-color .2s ease;
}
.why-item:hover{border-color:rgba(255,255,255,.24);}
.why-item .ic{width:40px;height:40px;color:var(--red-2);margin-bottom:18px;}
.why-item .ic svg{width:100%;height:100%;}
.why-item h4{font-size:16.5px;margin-bottom:8px;color:#f5f5f7;}
.why-item p{font-size:14px;color:rgba(245,245,247,.68);}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.process::before{content:"";position:absolute;top:23px;left:6%;right:6%;height:1px;background:repeating-linear-gradient(90deg,var(--border) 0 8px,transparent 8px 16px);}
.process-step{position:relative;padding-right:20px;}
.process-step .idx{
  width:46px;height:46px;border-radius:50%;background:var(--black);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:14px;color:var(--red-2);
  margin-bottom:20px;position:relative;z-index:2;
}
.process-step h4{font-size:16px;margin-bottom:8px;}
.process-step p{font-size:14px;}

@media (max-width:980px){
  .why-grid,.process{grid-template-columns:1fr 1fr;}
  .process::before{display:none;}
}
@media (max-width:760px){
  .why-grid,.process{grid-template-columns:1fr;}
}

/* ---------- Reviews — same liquid-glass card material ---------- */
.reviews-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:44px;}
/* Home blog heading "Tips, guides & shop news" is short — keep it on one
   line instead of letting the shared .section-head 640px cap wrap it.
   Natural wrapping still applies below 601px where the screen is narrow. */
#blog .reviews-head .section-head{max-width:none;}
@media (min-width:601px){ #blog .reviews-head .section-head h2{white-space:nowrap;} }
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.review-card{
  background:rgba(38,38,45,.5);
  backdrop-filter:blur(28px) saturate(220%);
  -webkit-backdrop-filter:blur(28px) saturate(220%);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-md);padding:32px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.14);
  transition:border-color .2s ease;
}
.review-card:hover{border-color:rgba(255,255,255,.24);}
.stars{color:var(--red-2);font-size:14px;letter-spacing:2px;margin-bottom:16px;}
.review-card p{font-size:14.5px;margin-bottom:20px;color:rgba(245,245,247,.68);}
.review-who{display:flex;align-items:center;gap:10px;}
.review-avatar{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:12px;color:var(--red-2);border:1px solid rgba(255,255,255,.16);}
.review-who .name{font-size:13.5px;font-weight:600;color:#f5f5f7;}
.review-who .src{font-size:12px;color:rgba(245,245,247,.45);}
.review-note{margin-top:22px;font-size:12.5px;color:rgba(245,245,247,.45);font-family:var(--ff-mono);}
@media (max-width:760px){ .review-grid{grid-template-columns:1fr;} }

/* ---------- Area / map ---------- */
/* Desktop: give the map the larger share of the row and let the text column
   sit narrower on the left. minmax(0,…) keeps it from blowing out between
   ~981px and the wrap's max width. */
.area-grid{display:grid;grid-template-columns:minmax(0,0.78fr) minmax(0,1.3fr);gap:48px;align-items:center;}
.area-address{
  display:flex;align-items:flex-start;gap:10px;margin-top:22px;font-family:var(--ff-mono);
  font-size:13.5px;color:var(--white-dim);
}
.area-address svg{width:18px;height:18px;color:var(--red-2);flex-shrink:0;margin-top:1px;}
/* Liquid-glass map: dark charcoal frosted panel with a light edge and the
   same deep drop shadow as the nav glass. The OSM tiles themselves are
   colour, so they're desaturated + darkened below to sit inside it. */
.map-frame{
  /* Slightly landscape so the bigger desktop map still clears one screen. */
  aspect-ratio:3/2;border-radius:var(--radius-lg);
  border:1px solid rgba(255,255,255,.18);
  background:rgba(38,38,45,.55);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.14);
  position:relative;overflow:hidden;
}
#siteMap{width:100%;height:100%;background:transparent;font-family:var(--ff-body);}
.map-frame .leaflet-container{background:rgba(38,38,45,.55) !important;}
/* Tone the colour raster tiles down to dark charcoal so the map reads as a
   frosted-glass surface rather than a raw embed. Applied per-tile (not the
   pane) so the red dot marker and the controls keep their own colour. */
.map-frame .leaflet-tile{
  filter:grayscale(1) invert(0.9) contrast(0.86) brightness(0.98) saturate(1.1);
}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(227,28,44,.35);}50%{box-shadow:0 0 0 14px rgba(227,28,44,0);}}
@media (max-width:980px){
  .area-grid{grid-template-columns:1fr;}
  .map-frame{aspect-ratio:4/3;}
}

/* Leaflet marker + dark control theming */
.map-marker{position:relative;}
.map-marker-dot{position:absolute;top:50%;left:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--red-2);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.5);}
.map-marker-ring{position:absolute;top:50%;left:50%;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;background:var(--red-soft);animation:pulse 2.6s ease-in-out infinite;}
.leaflet-container{background:rgba(38,38,45,.55) !important;}
/* Zoom + attribution controls tuned to the dark glass panel. */
.leaflet-control-zoom a{
  background:rgba(38,38,45,.7) !important;color:#f5f5f7 !important;
  border-color:rgba(255,255,255,.16) !important;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.leaflet-control-zoom a:hover{background:rgba(48,48,56,.85) !important;color:var(--red-2) !important;}
.leaflet-control-attribution{
  background:rgba(23,23,28,.6) !important;color:rgba(245,245,247,.55) !important;
  font-size:10px !important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.leaflet-control-attribution a{color:rgba(245,245,247,.75) !important;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--border-soft);}
.faq-item{border-bottom:1px solid var(--border-soft);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;background:none;border:none;color:var(--white);text-align:left;padding:24px 0;font-family:var(--ff-display);font-size:16.5px;font-weight:500;}
.faq-q .plus{width:22px;height:22px;flex-shrink:0;border:1px solid var(--border);border-radius:50%;position:relative;transition:transform .25s ease, border-color .25s ease;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--white-dim);}
.faq-q .plus::before{top:50%;left:5px;right:5px;height:1px;transform:translateY(-50%);}
.faq-q .plus::after{left:50%;top:5px;bottom:5px;width:1px;transform:translateX(-50%);transition:opacity .2s ease;}
.faq-item.open .faq-q .plus{transform:rotate(90deg);border-color:var(--red-2);}
.faq-item.open .faq-q .plus::after{opacity:0;}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-a p{font-size:14.5px;padding-bottom:24px;max-width:680px;}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(150deg,var(--black-3),var(--black-2));
  border-radius:var(--radius-lg);
  padding:56px;display:flex;justify-content:space-between;align-items:center;gap:30px;flex-wrap:wrap;
  position:relative;overflow:hidden;
}
.cta-band::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,var(--red-soft),transparent 70%);}
.cta-band h2{font-size:clamp(24px,3vw,32px);margin-bottom:8px;}
.cta-band p{font-size:15px;}
.cta-actions{display:flex;gap:14px;flex-wrap:wrap;position:relative;z-index:1;}
@media (max-width:760px){ .cta-band{padding:38px 26px;flex-direction:column;align-items:flex-start;} }

/* ---------- Booking wizard ---------- */
/* min-width:0 is load-bearing: .book-wrap is a flex item inside the
   scroll-snap .book-scroll (display:flex), so its default min-width:auto
   would refuse to shrink below its content's min-content width. On step 4
   that min-content is set by .book-nav ("Back" + "Request an Appointment"
   side by side ≈ 331px), which pushed the whole panel wider than a phone
   viewport and clipped the right edge under .book-scroll's overflow:hidden.
   Letting the flex item shrink, plus stacking .book-nav on narrow screens
   (below), keeps the wizard within any viewport. */
.book-wrap{max-width:780px;margin:0 auto;min-width:0;}
/* The "this is a request, we'll confirm" note that sits directly under the
   "Request an Appointment" heading on every booking surface: the home #book
   section, the pop-up booking modal, and /qrbooking. Deliberately near-black
   and bold so it reads as a clear, up-front expectation rather than fine
   print. The .section-head scope is needed to out-specify style.css's
   `.section-head p{color:var(--white-dim)}` (same specificity, but this file
   loads later so it wins). */
.book-note,
.section-head .book-note{
  margin-top:14px;
  font-size:14.5px;
  font-weight:700;
  line-height:1.55;
  color:var(--white);
}
.section-head.center .book-note{margin-left:auto;margin-right:auto;max-width:540px;}
@media (max-width:600px){
  .book-note,
  .section-head .book-note{font-size:13.5px;}
}
.book-panel{background:var(--black-2);border-radius:var(--radius-lg);padding:46px;}
/* The pop-up booking modal (index.html's #bookingModal, which relocates
   this exact .book-panel into #bookingModalCard via booking-modal.js) was
   getting the generic vehicle-detail-modal sizing from inventory.css
   (width:min(880px,100%)) plus an inline max-width:640px on top — far too
   narrow for the multi-step wizard's grids on desktop. Scoping the override
   to "#bookingModal .modal-card" (an id-anchored selector) beats that plain
   .modal-card class regardless of stylesheet load order, without touching
   the shared modal styling used elsewhere (e.g. the vehicle detail modal on
   inventory.html). */
@media (min-width:761px){
  #bookingModal .modal-card{width:min(1180px,96vw);max-height:94vh;}
}
/* Phones: the wizard was losing ~112px of a ~320-390px screen to three
   nested paddings (24px overlay + 28px modal-body + 28px .book-panel, each
   side), leaving the category grid and forms painfully narrow. Go
   edge-to-edge full-screen instead, drop the now-redundant inner .book-panel
   chrome (the modal card is already the panel), and keep only a slim 16px
   text margin. */
@media (max-width:600px){
  #bookingModal{padding:0;}
  #bookingModal .modal-card{width:100%;max-width:none;min-height:100%;max-height:100%;border-radius:0;}
  #bookingModal .modal-body{padding:54px 16px 20px;}
  #bookingModal .book-panel{padding:0;background:none;border-radius:0;}
}
.steps-bar{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:40px;}
.step-dot{width:32px;height:32px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-family:var(--ff-mono);font-size:12.5px;color:var(--white-faint);flex-shrink:0;transition:all .2s ease;}
.step-dot.active{border-color:var(--red);color:var(--red-2);background:var(--red-soft);}
.step-dot.done{border-color:var(--red);color:var(--red-2);background:var(--red-soft);}
.step-line{width:26px;height:1px;background:var(--border);}
.step-line.done{background:var(--red);}
/* Inquiry flow skips steps 2 & 3, so collapse the progress bar to 1 — 4
   (hide dots 2/3 and two of the three connector lines — children 4 and 6). */
.steps-bar.inquiry-flow .step-dot[data-step="2"],
.steps-bar.inquiry-flow .step-dot[data-step="3"],
.steps-bar.inquiry-flow > :nth-child(4),
.steps-bar.inquiry-flow > :nth-child(6){display:none;}
.book-step{display:none;}
.book-step.active{display:block;animation:fadein .3s ease;}
@keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.book-step h3{margin-bottom:6px;}
.hint{font-size:14px;margin-bottom:28px;}

/* grid-auto-rows:1fr is the equal-height trick: even though this grid's
   rows are implicit (5 cards over 2 rows at 3 columns, or one row per card
   once mobile collapses to a single column below), giving every row the
   same 1fr track makes each row match the height of the tallest card's
   content anywhere in the grid — so "make all the cards the same size
   based on the biggest one" holds on both breakpoints without JS. */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:14px;}
.cat-grid-4{grid-template-columns:repeat(2,1fr);}
.cat-grid-5{grid-template-columns:repeat(3,1fr);}
.opt-card{
  border:1px solid var(--border);background:var(--black-3);border-radius:var(--radius-md);
  padding:20px 16px;text-align:left;transition:border-color .18s ease, background .18s ease;
  display:flex;flex-direction:row;align-items:center;gap:14px;color:var(--white);
}
.opt-card .ic{width:34px;height:34px;color:var(--red-2);flex-shrink:0;}
.opt-card .ic svg{width:100%;height:100%;}
.opt-card .opt-text{display:flex;flex-direction:column;gap:6px;min-width:0;}
.opt-card .opt-eyebrow{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--red-2);}
.opt-card b{font-size:14.5px;font-family:var(--ff-display);}
.opt-card small{color:var(--white-faint);font-size:12px;line-height:1.4;}
.opt-card:hover{border-color:var(--white-faint);}
.opt-card.selected{border-color:var(--red);background:var(--red-soft);}

/* New vs. Existing Customer toggle, and the phone lookup + saved-vehicle
   picker that appears under it — step 1 of the booking wizard. */
.customer-mode-toggle{display:flex;gap:8px;margin-bottom:22px;}
.mode-btn{
  padding:10px 20px;border-radius:var(--radius-pill);border:1px solid var(--border);background:var(--black-3);
  font-size:13px;font-weight:600;color:var(--white-dim);transition:all .15s ease;
}
.mode-btn.active{border-color:var(--red);color:var(--red-2);background:var(--red-soft);}
.existing-lookup{
  border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:20px;margin-bottom:24px;
}
/* flex-wrap + min-width:0 so that at large OS/browser text-scaling settings
   the "Find My Account" button drops below the phone field instead of
   shoving it off-screen. */
.existing-lookup-row{display:flex;gap:10px;flex-wrap:wrap;}
.existing-lookup-row input{
  flex:1 1 12rem;min-width:0;background:var(--black-3);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:12px 18px;color:var(--white);font-family:var(--ff-body);
  /* 16px, not smaller, on every device and orientation: iOS Safari zooms
     the page in when a focused input is under 16px, and a phone in
     landscape can be wider than any mobile breakpoint — so this is set on
     the base rule, not inside a media query. Android never does this, but
     16px is a fine input size there too. */
  font-size:16px;
}
.existing-lookup-row input:focus{outline:none;border-color:var(--red-2);}
.existing-lookup-row .btn{flex:1 1 auto;white-space:nowrap;padding:12px 22px;font-size:13.5px;}
.existing-lookup-result{margin-top:16px;}
.existing-lookup-result .lookup-note{font-size:13.5px;color:var(--white-dim);}
.existing-lookup-result .lookup-note.error{color:var(--red-2);}
.existing-lookup-welcome{font-size:14.5px;color:var(--white);margin-bottom:12px;}
.existing-lookup-welcome b{color:var(--white);}
.vehicle-pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;}
.vehicle-pick-card{
  border:1px solid var(--border);background:var(--black-3);border-radius:var(--radius-md);
  padding:14px 16px;text-align:left;font-size:13.5px;font-weight:600;color:var(--white);
  transition:border-color .15s ease, background .15s ease;
}
.vehicle-pick-card:hover{border-color:var(--white-faint);}
.vehicle-pick-card.selected{border-color:var(--red);background:var(--red-soft);color:var(--red-2);}
.vehicle-pick-card small{display:block;font-weight:400;color:var(--white-faint);margin-top:3px;}
.vehicle-pick-card.add-new{color:var(--white-dim);font-weight:600;}

.pkg-list{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;}
.pkg-card{
  display:flex;justify-content:space-between;align-items:center;gap:16px;width:100%;color:var(--white);
  border:1px solid var(--border);background:var(--black-3);border-radius:var(--radius-md);
  padding:16px 18px;text-align:left;transition:border-color .18s ease, background .18s ease;
}
.pkg-card:hover{border-color:var(--white-faint);}
.pkg-card.selected{border-color:var(--red);background:var(--red-soft);}
.pkg-card .pkg-name{font-weight:600;font-size:14.5px;margin-bottom:4px;}
.pkg-card .pkg-desc{font-size:12.5px;color:var(--white-faint);}
.pkg-card .pkg-price{font-family:var(--ff-mono);color:var(--red-2);font-size:13.5px;white-space:nowrap;}

.subhead{font-size:12.5px;font-family:var(--ff-mono);letter-spacing:.06em;color:var(--white-faint);text-transform:uppercase;margin:26px 0 12px;}

/* Month-grid calendar (step 3) — replaces the old 12-day horizontal chip
   row, which couldn't be navigated past its fixed window. */
/* Cap the calendar width so the day cells stay a sensible size on desktop —
   in the full-width booking panel a 7-col aspect-ratio:1 grid blows up to
   ~85px squares. This keeps it compact and left-aligned with the heading;
   it's a max, so mobile stays fluid. */
.calendar-card{border:1px solid var(--border-soft);border-radius:var(--radius-md);padding:16px;margin-bottom:22px;max-width:380px;}
.calendar-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.cal-month-label{font-family:var(--ff-display);font-size:15.5px;font-weight:600;color:var(--white);}
.cal-nav-btn{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);background:var(--black-3);color:var(--white);
  display:flex;align-items:center;justify-content:center;transition:border-color .15s ease, background .15s ease;flex-shrink:0;
}
.cal-nav-btn svg{width:16px;height:16px;}
.cal-nav-btn:hover:not(:disabled){border-color:var(--white-faint);}
.cal-nav-btn:disabled{opacity:.35;cursor:not-allowed;}
.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px;}
.calendar-weekdays span{text-align:center;font-size:11px;font-family:var(--ff-mono);color:var(--white-faint);text-transform:uppercase;}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.cal-day-empty{aspect-ratio:1;}
.cal-day{
  aspect-ratio:1;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--black-3);
  color:var(--white);font-family:var(--ff-mono);font-size:13.5px;display:flex;align-items:center;justify-content:center;
  transition:border-color .18s ease, background .18s ease;
}
.cal-day:hover:not(:disabled){border-color:var(--white-faint);}
.cal-day.selected{border-color:var(--red);background:var(--red-soft);color:var(--red-2);}
.cal-day.today{font-weight:700;}
.cal-day:disabled{opacity:.3;cursor:not-allowed;background:transparent;border-color:transparent;}
@media (max-width:520px){ .cal-day{font-size:12px;} .cal-month-label{font-size:14px;} }

.time-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.time-chip{border:1px solid var(--border);background:var(--black-3);border-radius:var(--radius-sm);padding:12px 6px;font-family:var(--ff-mono);font-size:13px;text-align:center;transition:border-color .18s ease, background .18s ease;color:var(--white);}
.time-chip.selected{border-color:var(--red);background:var(--red-soft);color:var(--red-2);}
.empty-note{color:var(--white-faint);font-size:13.5px;font-style:italic;}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-grid .full{grid-column:1/-1;}
.form-field label{display:block;font-size:12.5px;color:var(--white-faint);margin-bottom:7px;}
.form-field input,.form-field textarea,.form-field select{
  width:100%;background:var(--black-3);border:1px solid var(--border);border-radius:var(--radius-pill);
  padding:12px 18px;color:var(--white);font-family:var(--ff-body);transition:border-color .15s ease;
  /* 16px minimum on every device/orientation — see .existing-lookup-row
     input above for why this can't live in a mobile media query. */
  font-size:16px;
}
.form-field input:focus,.form-field textarea:focus,.form-field select:focus{outline:none;border-color:var(--red-2);}
.form-field textarea{resize:vertical;min-height:80px;border-radius:var(--radius-md);}

/* Vehicle-type picker (step 4, above Year/Make) — three buttons wired to
   the backend booking system's bookings.vehicleType field. Single grid row
   at every width; align-items:stretch (grid default) keeps all three the
   same height even when "Truck / Large SUV" wraps to two lines on a narrow
   phone. Mirrors the .mode-btn / .opt-card.selected brand-red selected
   state used elsewhere in the wizard. */
.veh-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.veh-type-btn{
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--border);background:var(--black-3);border-radius:var(--radius-md);
  padding:12px 8px;color:var(--white-dim);font-family:var(--ff-body);font-size:12.5px;font-weight:600;line-height:1.3;
  transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.veh-type-btn:hover{border-color:var(--white-faint);}
.veh-type-btn.selected{border-color:var(--red);background:var(--red-soft);color:var(--red-2);}

.summary-box{background:var(--black-3);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:24px;font-size:13.5px;}
.summary-box div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px dashed var(--border-soft);color:var(--white-dim);}
.summary-box div:last-child{border-bottom:none;}
.summary-box b{color:var(--white);font-weight:500;}

.checkbox-row{display:flex;align-items:center;gap:10px;margin-top:4px;}
.checkbox-row input{width:18px;height:18px;accent-color:var(--red);flex-shrink:0;}
.checkbox-row label{font-size:14px;color:var(--white);margin:0;}
.marketing-check{margin-top:18px;}
.marketing-check label{font-size:13px;color:var(--white-faint);}

.book-nav{display:flex;justify-content:space-between;align-items:center;margin-top:34px;}
/* Phones can't fit "Back" beside the step-4 "Request an Appointment" button
   (≈331px together) inside the panel — stack them full-width instead, primary
   action on top. Paired with .book-wrap{min-width:0} above; see that note. */
@media (max-width:430px){
  .book-nav{flex-direction:column-reverse;align-items:stretch;gap:12px;}
  .book-nav .btn{width:100%;}
}
.err-msg{color:var(--red-2);font-size:13px;margin-top:14px;display:none;}

.confirm-box{text-align:center;padding:30px 0;}
.confirm-icon{width:64px;height:64px;border-radius:50%;background:var(--red-soft);color:var(--red-2);display:flex;align-items:center;justify-content:center;margin:0 auto 22px;}
.confirm-icon svg{width:30px;height:30px;}
.confirm-box h3{font-size:22px;margin-bottom:10px;}
.confirm-box p{font-size:14.5px;max-width:420px;margin:0 auto 26px;}

@media (max-width:760px){
  .cat-grid,.cat-grid-4,.cat-grid-5{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .book-panel{padding:28px;}
  .time-grid{grid-template-columns:repeat(3,1fr);}
  /* 3-across leaves each vehicle-type button ~100px wide on a phone, which
     wraps "Sedan / Coupe" / "Truck / Large SUV" at the slash and looks
     cramped — stack them full-width like the rest of the wizard's mobile
     controls instead. */
  .veh-type-grid{grid-template-columns:1fr;}
}

/* ---------- Shorter desktop viewports (small laptops, browser chrome, OS
   taskbars — commonly ~650-760px of actual visible height) don't have room
   for the normal-height spacing the full-screen sections above use, which
   was pushing a couple of sections past 100vh and into their overflow-y:auto
   safety net — fighting the page's scroll-snap and making scrolling feel
   like it "stuck". Tightening spacing here (placed last so it wins over the
   base rules above it) keeps every section genuinely fitting one screen. */
@media (min-width:761px) and (max-height:760px){
  .section-head{margin-bottom:22px;}
  .section-head p{margin-top:8px;}
  .reviews-head{margin-bottom:22px;}
  .pillars{gap:12px;}
  .pillar-card{padding:16px;}
  .pillar-icon{margin-bottom:8px;}
  .pillar-card h3{margin-bottom:5px;}
  .pillar-card p{margin-bottom:10px;}
  .pillar-list{gap:5px;margin-bottom:12px;}
  .why-grid{gap:12px;}
  .why-item{padding:20px;}
  .why-item .ic{margin-bottom:10px;}
  .veh-scroller{gap:14px;}
  .veh-media{aspect-ratio:16/9;}
  .veh-body{padding:14px;gap:6px;}
}
/* The bigger hero cards (padding/icon/heading bumped up for normal-height
   screens) need more headroom to not overflow into #services than the
   806-760px tier above alone provides — even right above that tier's own
   760px cutoff, the overlap transform hasn't ramped up enough yet to make
   room for the larger cards, leaving only a razor-thin (sub-10px) margin
   through the 761-900px range. This gets its own taller cutoff, separate
   from the shared tier above, so it doesn't have to touch the pillar/why/
   vehicle-card tuning that's already dialed in through 760px. */
@media (min-width:761px) and (max-height:900px){
  .choice-card{padding:19px;}
  .choice-card .choice-icon{width:38px;height:38px;}
  .choice-card .choice-icon svg{width:18px;height:18px;}
  .choice-card h3{font-size:clamp(19px,2vw,25px);}
}
/* A phone in landscape (short but comparatively wide — commonly ~350-430px
   of visible height, sometimes crossing the 760px mobile width cutoff, same
   as the #services landscape tier further down) has no real vertical room
   for a stacked 2-row card column at any size, but has plenty of width to
   spare — so this falls back to the pre-stacking 2-column layout instead of
   trying to shrink the stack further. Width capped at 1024px so a genuine
   short desktop/laptop window never lands here.
   Placed after every other .choice-card tier above (including the
   761px/900px one right above) so it actually wins the cascade for the
   width/height combinations it targets — same specificity, so whichever
   matching rule is LAST in the file wins, regardless of which one looks
   "more specific" to read. */
@media (max-width:1024px) and (max-height:480px){
  .hero{padding:calc(var(--nav-h) + 6px) 0 10px;}
  .hero-head{margin-bottom:8px;transform:translateY(-110px);}
  .hero-head h1{font-size:clamp(20px,6.5vw,26px);}
  .hero-book{gap:4px;}
  .hero-book .btn-primary{padding:12px 26px;font-size:13.5px;}
  .hero-book .hero-book-note{font-size:9.5px;}
  .hero-choice{grid-template-columns:1fr 1fr;gap:6px;max-width:520px;transform:translateY(clamp(-160px, calc(-30vh + 40px), -40px));}
  .choice-card{padding:8px 10px;gap:5px;flex-direction:column;align-items:flex-start;}
  .choice-top{gap:6px;}
  .choice-card .choice-icon{width:22px;height:22px;}
  .choice-card .choice-icon svg{width:10px;height:10px;}
  .choice-card h3{font-size:12.5px;}
  .choice-card p{display:none;}
  .choice-card .choice-go{margin-top:auto;margin-left:0;}
  .choice-go-inner{padding:5px 9px;font-size:9px;}
}
@media (min-width:761px) and (max-height:640px){
  .section-head{margin-bottom:14px;}
  .reviews-head{margin-bottom:14px;}
  .pillar-card{padding:13px;}
  .why-item{padding:15px;}
  .veh-media{aspect-ratio:21/9;}
}