/* ============================================================
   KWT theme layer.

   styles.css is the ACE site's stylesheet, carried over as the base — it
   already supplies the dark cinematic chrome (nav, callbar, ticker, hero,
   .section rhythm, .review cards, footer, buttons, grain). This file does
   two jobs:
     1. Re-point the design tokens from ACE red/cream to KWT green/chrome.
     2. Add the components the CWO-style layout needs and ACE never had —
        rating badges, brand wall, steps, service + build grids, financing,
        contact/quote block.
   Load order in index.html is styles.css -> kwt.css -> kwt3d.css.
   ============================================================ */

/* Tokens now live in kwt-base.css, which owns :root. This sheet is
   components only — two files declaring the same custom properties is how a
   restyle ends up half-applied. */

/* The base stylesheet paints eyebrows and accents in ACE red. Everything
   below repoints those to the shop's own green. */
.section-eyebrow{color:var(--brand);}
.section-eyebrow::before{background:var(--brand);}
.hero-brand-line{background:linear-gradient(90deg,transparent,var(--brand),transparent);}
.hero h1 .accent{color:var(--brand);text-shadow:0 0 60px var(--brand-glow);}
.section-title .accent{color:var(--brand);}
.review .text::before{color:var(--brand);}
.review .avatar{background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:#151006;}
.topbar-track .dot{background:var(--brand);}
.brand small{color:var(--brand);}

/* ── Open/closed pill in the call bar ───────────────────────── */
.opennow{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-ui);font-weight:600;
  font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding-left:24px;
  border-left:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.9);}
.opennow .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.opennow.is-open .dot{background:#2ecc71;box-shadow:0 0 0 0 rgba(46,204,113,.6);animation:pulse 2.4s ease-in-out infinite;}
.opennow.is-closed .dot{background:#888;}
@media (max-width:720px){ .opennow{display:none;} }

/* ── Rating badges (the headline social proof) ───────────────
   One badge per platform, side by side. Deliberately loud: this is the
   single element Andrew asked to lead with. */
.rbadges{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 36px;}
.rbadge{display:inline-flex;align-items:center;gap:16px;text-decoration:none;color:var(--text);
  background:rgba(16,16,16,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(232,178,43,.35);border-left:5px solid var(--brand);
  padding:14px 24px 14px 18px;box-shadow:0 14px 40px rgba(0,0,0,.55);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;}
.rbadge:hover{transform:translateY(-3px);border-color:var(--brand);
  box-shadow:0 20px 52px rgba(0,0,0,.7),0 0 0 1px var(--brand-glow) inset;}
.rbadge .src-mark{width:32px;height:32px;flex:none;}
.rbadge-body{display:flex;flex-direction:column;gap:4px;line-height:1;}
.rbadge-top{display:flex;align-items:center;gap:10px;}
.rbadge-num{font-family:var(--font-display);font-size:34px;line-height:1;color:var(--text);}
.rbadge-stars{font-size:17px;letter-spacing:.04em;line-height:1;}
.rbadge-sub{font-family:var(--font-ui);font-weight:600;font-size:11.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--text-secondary);}
.rbadge-sub strong{color:var(--brand);font-weight:700;}

/* Star glyphs. A 4.7 must not render as five solid stars — the .half
   glyph is clipped with a gradient so the fraction is visible. */
.rbadge-stars .s,.rsum-stars .s{color:#4a4640;}

.rbadges-lg{justify-content:center;margin:0 0 48px;}
.rbadges-lg .rbadge{padding:20px 34px 20px 26px;}
.rbadges-lg .rbadge-num{font-size:44px;}
.rbadges-lg .rbadge .src-mark{width:40px;height:40px;}

/* ── Reviews section ─────────────────────────────────────── */
.reviews .section-eyebrow{justify-content:center;}
.reviews .section-eyebrow::before{display:none;}
.reviews .section-title{text-align:center;}
.rsum{display:flex;align-items:center;justify-content:center;gap:26px;margin:8px 0 28px;}
.rsum-num{font-family:var(--font-display);font-size:clamp(72px,10vw,124px);line-height:.85;
  color:var(--brand);text-shadow:0 0 60px var(--brand-glow);}
.rsum-right{display:flex;flex-direction:column;gap:8px;}
.rsum-stars{font-size:30px;letter-spacing:.08em;line-height:1;}
.rsum-label{font-family:var(--font-ui);font-size:13px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text-secondary);}
.rsum-label strong{color:var(--text);}
.review-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.review .src-mark{width:20px;height:20px;flex:none;opacity:.9;}
.reviews-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:44px;}

/* ── Brand wall ──────────────────────────────────────────── */
.brand-wall{display:grid;gap:1px;
  background:var(--border);border:1px solid var(--border);margin-top:44px;}
.brand-tile{display:flex;align-items:center;justify-content:center;background:var(--bg);
  padding:30px 16px;min-height:104px;transition:background .2s,color .2s;}
.brand-tile:hover{background:var(--surface-2);}
.brand-tile span{font-family:var(--font-display);font-size:24px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);transition:color .2s;}
.brand-tile:hover span{color:var(--brand);}

/* ── How it works ────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;margin-top:52px;}
.step{background:var(--surface-1);border:1px solid var(--border);border-top:3px solid var(--brand);
  padding:34px 28px;transition:transform .25s,border-color .25s;}
.step:hover{transform:translateY(-4px);border-color:var(--border-strong);border-top-color:var(--brand-bright);}
.step-n{font-family:var(--font-display);font-size:48px;line-height:1;color:var(--brand);opacity:.5;margin-bottom:14px;}
.step h3{font-family:var(--font-display);font-size:26px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:10px;}
.step p{font-size:15px;line-height:1.6;color:var(--text-secondary);}

/* ── Services ────────────────────────────────────────────── */
.svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;margin-top:52px;}
.svc{background:var(--surface-1);border:1px solid var(--border);padding:32px 28px;
  transition:transform .25s,border-color .25s,box-shadow .25s;}
.svc:hover{transform:translateY(-4px);border-color:rgba(232,178,43,.45);box-shadow:0 18px 44px rgba(0,0,0,.5);}
.svc h3{font-family:var(--font-display);font-size:30px;letter-spacing:.03em;text-transform:uppercase;
  margin-bottom:12px;color:var(--text);}
.svc p{font-size:15px;line-height:1.65;color:var(--text-secondary);}

/* ── Build gallery ───────────────────────────────────────── */
.build-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:52px;}
.build{position:relative;overflow:hidden;border:1px solid var(--border);background:var(--surface-1);}
.build img,.build-ph{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);}
/* Placeholder tread pattern so the gallery reads as intentional rather than
   broken while we are waiting on real photos. */
.build-ph{background:
  repeating-linear-gradient(115deg,#1b1b1b 0 14px,#151515 14px 30px),
  radial-gradient(ellipse at 50% 40%,rgba(232,178,43,.10),transparent 70%);}
.build:hover img,.build:hover .build-ph{transform:scale(1.05);}
.build figcaption{position:absolute;left:0;right:0;bottom:0;padding:36px 20px 18px;
  display:flex;flex-direction:column;gap:4px;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.92));}
.build figcaption strong{font-family:var(--font-display);font-size:24px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text);}
.build figcaption span{font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--brand);}

/* ── Financing ───────────────────────────────────────────── */
.fin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-top:44px;}
.fin-card{background:var(--surface-1);border:1px solid var(--border);border-left:4px solid var(--brand);
  padding:30px 26px;transition:transform .25s,border-color .25s;}
.fin-card:hover{transform:translateY(-3px);border-color:var(--border-strong);border-left-color:var(--brand-bright);}
.fin-name{font-family:var(--font-display);font-size:30px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:6px;}
.fin-blurb{font-family:var(--font-ui);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);}

/* ── Contact / hours / map ───────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:32px;margin-top:52px;align-items:start;}
.contact-info{display:flex;flex-direction:column;gap:30px;}
.ci-block h3{font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brand);margin-bottom:10px;}
.ci-block p{font-size:17px;line-height:1.6;color:var(--text-secondary);margin-bottom:14px;}
.ci-phone{font-family:var(--font-display);font-size:44px;letter-spacing:.02em;color:var(--text);
  transition:color .2s;}
.ci-phone:hover{color:var(--brand);}
.hours{list-style:none;display:flex;flex-direction:column;gap:8px;}
.hours li{display:flex;justify-content:space-between;gap:20px;padding-bottom:8px;
  border-bottom:1px solid var(--border);font-family:var(--font-ui);font-size:14px;letter-spacing:.08em;}
.hours .hd{color:var(--text-secondary);text-transform:uppercase;}
.hours .ht{color:var(--text);font-weight:600;}
.contact-map{border:1px solid var(--border);overflow:hidden;min-height:420px;}
.contact-map iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:grayscale(.55) invert(.9) hue-rotate(180deg);}

/* ── Quote form ──────────────────────────────────────────── */
.quote-card{margin-top:44px;background:var(--surface-1);border:1px solid var(--border);
  border-top:3px solid var(--brand);padding:44px;}
.quote-card h3{font-family:var(--font-display);font-size:clamp(34px,5vw,54px);letter-spacing:.02em;
  text-transform:uppercase;margin-bottom:8px;}
.quote-sub{color:var(--text-secondary);font-size:16px;margin-bottom:26px;}
.quote-form{display:flex;flex-direction:column;gap:14px;max-width:820px;}
.qf-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.qf-row:has(> :only-child){grid-template-columns:1fr;}
.quote-form input,.quote-form textarea{width:100%;background:var(--bg);border:1px solid var(--border-strong);
  color:var(--text);font-family:var(--font-body);font-size:16px;padding:16px 18px;transition:border-color .2s;}
.quote-form input:focus,.quote-form textarea:focus{outline:none;border-color:var(--brand);}
.quote-form input::placeholder,.quote-form textarea::placeholder{color:var(--text-muted);}
.quote-form .btn{align-self:flex-start;margin-top:6px;}
.qf-fine{font-size:14px;color:var(--text-muted);}
.qf-fine a{color:var(--brand);}
/* Honeypot — must be invisible to people but present for bots. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;}

/* ── Footer ──────────────────────────────────────────────── */
.footer-brand strong{font-family:var(--font-display);font-size:30px;letter-spacing:.04em;display:block;}
.footer-brand span{font-family:var(--font-ui);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--brand);}
.fb-tag{margin-top:14px;color:var(--text-muted);font-size:14px;font-style:italic;}
.footer-col h4{font-family:var(--font-ui);font-weight:700;font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--brand);margin-bottom:16px;}
.footer-col a{display:block;color:var(--text-secondary);font-size:15px;line-height:1.7;transition:color .2s;}
.footer-col a:hover{color:var(--brand);}
.footer-bottom{max-width:var(--max-w);margin:56px auto 0;padding-top:24px;border-top:1px solid var(--border);
  text-align:center;font-family:var(--font-ui);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:980px){
  .contact-grid{grid-template-columns:1fr;}
  .contact-map{min-height:320px;}
  .contact-map iframe{min-height:320px;}
}
@media (max-width:720px){
  .rbadges{gap:10px;}
  .rbadge{padding:12px 18px 12px 14px;gap:12px;flex:1 1 100%;}
  .rbadge-num{font-size:28px;}
  .rsum{flex-direction:column;gap:12px;text-align:center;}
  .qf-row{grid-template-columns:1fr;}
  .quote-card{padding:28px 20px;}
  .brand-wall{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .brand-tile{min-height:80px;padding:20px 10px;}
  .brand-tile span{font-size:19px;}
  .ci-phone{font-size:34px;}
}


/* ── Custom-Offsets-leaning treatments ─────────────────────────
   Denser grids, harder edges and chrome headline type, sitting on the
   cinematic dark base the ACE stylesheet already provides. */

/* Primary CTA: brand green with near-black label. White on #10C603 lands
   around 2.4:1 contrast, which is unreadable at button weight. */
.btn-primary{background:var(--brand);border-color:var(--brand);color:#04140A;font-weight:700;}
.btn-primary:hover{background:var(--brand-bright);border-color:var(--brand-bright);color:#04140A;
  box-shadow:0 0 34px var(--brand-glow);}
.btn-ghost:hover{border-color:var(--brand);color:var(--brand);}

/* Chrome wordmark treatment for the big display headings — the badge's
   brushed-metal lettering, echoed in type. */
.hero h1 span:not(.accent){
  background:linear-gradient(177deg,#FFFFFF 6%,#E4E9EC 34%,#8E979F 52%,#FDFEFF 68%,#B9C1C7 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  color:transparent;}
/* The gradient replaces the glyph fill, which also kills text-shadow, so the
   headline lift comes from a drop-shadow filter on the block instead. */
.hero h1{filter:drop-shadow(0 6px 26px rgba(0,0,0,.75));}
.hero h1 .accent{-webkit-text-fill-color:var(--brand);color:var(--brand);}

/* Angular cut on cards — CWO's slanted-corner motif. */
.quote-card{clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px));}

/* Tighter, more product-grid-like brand wall. */
.brand-wall{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));}

/* Green scrollbar + selection to carry the brand to the chrome of the page. */
::selection{background:var(--brand);color:#04140A;}
::-webkit-scrollbar-thumb:hover{background:var(--brand);}
.scroll-progress{background:linear-gradient(90deg,var(--brand-dark),var(--brand-bright));}

/* Call bar: the base stylesheet paints this as a full-width accent slab.
   At the brand's green that reads as neon and drowns out the green CTAs
   further down, so it goes dark with the number itself carrying the colour. */
.callbar{background:linear-gradient(180deg,#0E1113 0%,#08090A 100%);
  border-bottom:1px solid rgba(16,198,3,.35);}
.callbar::before{background:radial-gradient(ellipse at 50% 0%,rgba(16,198,3,.16) 0%,transparent 70%);}
.callbar-cta{color:var(--text);}
.callbar-cta > span > span:last-child{color:var(--brand);}
.callbar-cta .label{color:var(--text-secondary);}
.callbar-cta .ringer{background:rgba(16,198,3,.14);border-color:rgba(16,198,3,.55);color:var(--brand);}
.callbar-cta .ringer svg{color:var(--brand);}

/* Nav badge: the shield is tall, not square, so the base 40x40 box crops it. */
.brand img{width:auto;height:46px;}

/* Star glyphs stay amber, not brand green. People read a star rating against
   the convention Google and Facebook set; recolouring the stars to the shop's
   green makes the badge look like decoration rather than a real rating. The
   green stays on the number and the chrome around it. */
.rbadge-stars .s.full,.rsum-stars .s.full{color:#F5B400;text-shadow:0 0 18px rgba(245,180,0,.35);}
.rbadge-stars .s.half,.rsum-stars .s.half{
  background:linear-gradient(90deg,#F5B400 50%,#4a4640 50%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.review .text::before{color:var(--brand);}

/* Hero backdrop while there is no photo: a green floor-glow over the dark
   base, so the empty .hero-bg still reads as lit shop floor rather than a
   flat black band. Adding an <img> to .hero-bg layers on top of this. */
.hero-bg{background:
  radial-gradient(ellipse 80% 60% at 50% 100%, rgba(16,198,3,.16) 0%, transparent 70%),
  radial-gradient(ellipse 60% 50% at 15% 20%, rgba(255,255,255,.05) 0%, transparent 70%),
  linear-gradient(180deg,#0B0D0E 0%,#08090A 100%);}

/* Hero reel. Sits under the medallion and the copy; kwt3d.css already orders
   .hero-bg (0) < canvas < .hero-content (2). */
.hero-video{width:100%;height:100%;object-fit:cover;display:block;}
/* The gradient scrim lives on .hero-bg::after in styles.css; strengthen it a
   little now that there is moving footage under the headline rather than a
   flat colour, or the chrome type loses its edges against a bright frame. */
.hero .hero-bg::after{background:
  linear-gradient(180deg,rgba(8,9,10,.72) 0%,rgba(8,9,10,.62) 45%,rgba(8,9,10,.94) 100%),
  radial-gradient(ellipse 70% 60% at 25% 45%,rgba(8,9,10,.55) 0%,transparent 70%),
  radial-gradient(ellipse 80% 60% at 50% 100%,rgba(16,198,3,.14) 0%,transparent 70%);}
/* kwt3d.css dims .hero-bg to .5 so the medallion reads through a still photo.
   With real footage that just makes it muddy — keep the reel at full strength
   and let the scrim above do the darkening. */
.hero .hero-bg{opacity:1;}
@media (max-width:820px){ .hero .hero-bg{opacity:1;} }

/* The Custom Offsets density pass that used to sit here has been removed:
   it capped .section-title at 62px and the bands at 76px, which is the exact
   opposite of the edge-to-edge display type this design is built on. It
   survives at git tag design-custom-offsets.

── Hairline grids ───────────────────────────────────────────
   One shared 1px background showing through the gaps turns a row of cards
   into a single slab. This is the same trick .brand-wall already used.

   Cards are rgba, NOT var(--bg): kwt3d.css deliberately makes the section
   surfaces translucent so the medallion reads through the whole page. Going
   opaque here would hide the badge behind four solid bands. .86 is dense
   enough to read as a wall and still lets it ghost through. */
.steps,.svc-grid,.build-grid,.fin-grid,.reviews-grid{
  gap:1px;background:var(--border);border:1px solid var(--border);}
.step,.svc,.build,.fin-card,.review{border:0;background:rgba(8,9,10,.86);}
.step:hover,.svc:hover,.fin-card:hover{transform:none;background:rgba(20,24,26,.92);}
.svc:hover{box-shadow:none;}
/* Accent lives on the top/left edge, drawn inside so it cannot reopen the
   1px gaps the hairline grid depends on. */
.step{box-shadow:inset 0 3px 0 var(--brand);}
.fin-card{box-shadow:inset 3px 0 0 var(--brand);}
.step:hover{box-shadow:inset 0 3px 0 var(--brand-bright);}
.fin-card:hover{box-shadow:inset 3px 0 0 var(--brand-bright);}

/* Gallery reads as a tight wall rather than six posters. */
.build-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;}
/* Placeholder tread tint was still ACE amber. */
.build-ph{background:
  repeating-linear-gradient(115deg,#1b1b1b 0 14px,#151515 14px 30px),
  radial-gradient(ellipse at 50% 40%,var(--brand-glow),transparent 70%);}

.brand-wall{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));}
.brand-tile{min-height:88px;}

/* styles.css pins the footer line left with flex; this centres it again. */
.footer-bottom{display:block;}

/* ── Fitment bar ──────────────────────────────────────────────
   Custom Offsets' signature: pick your vehicle before anything else. Here it
   feeds the visualizer that already exists rather than a fitment database. */
.fitbar{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;
  background:var(--border);border:1px solid rgba(16,198,3,.55);
  padding:1px;margin:24px 0 20px;max-width:940px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);}
.fitbar-label{display:flex;align-items:center;padding:0 20px;background:var(--bg);
  font-family:var(--font-ui);font-weight:700;font-size:12px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--brand);white-space:nowrap;}
.fitbar select{flex:1 1 150px;min-width:0;background:var(--bg);border:0;
  color:var(--text);font-family:var(--font-ui);font-weight:600;font-size:14px;
  letter-spacing:.14em;text-transform:uppercase;padding:16px 18px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),
                   linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.fitbar select:focus{outline:none;background-color:#12171a;}
.fitbar select:disabled{color:var(--text-muted);cursor:not-allowed;}
.fitbar .btn{flex:0 0 auto;}
@media (max-width:820px){
  .fitbar{margin:20px 0 18px;}
  .fitbar-label{flex:1 1 100%;padding:12px 16px;justify-content:center;}
  .fitbar select,.fitbar .btn{flex:1 1 100%;}
}

/* ── Scale stats ──────────────────────────────────────────────
   styles.css paints .stats as a full-bleed red gradient; kwt.css repoints the
   red tokens to green, which would make it a neon slab. Override to dark.
   Kept deliberately SHORT (<120px): kwt3d.js only builds a keyframe for
   sections taller than that, so a tall strip here would re-alternate the
   medallion's side for every band below it. */
.stats{background:linear-gradient(180deg,#0E1113 0%,#08090A 100%);
  border-top:1px solid rgba(16,198,3,.35);border-bottom:1px solid rgba(16,198,3,.35);
  padding:26px 40px;}
.stats-inner{max-width:var(--max-w);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:20px 56px;justify-content:space-between;align-items:baseline;}
.stats-item{display:flex;align-items:baseline;gap:12px;}
.stats-item .num{font-family:var(--font-display);font-size:clamp(30px,3.4vw,44px);
  line-height:1;color:var(--brand);text-shadow:0 0 26px var(--brand-glow);}
.stats-item .label{font-family:var(--font-ui);font-weight:600;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--text-secondary);margin:0;}
@media (max-width:720px){
  .stats{padding:20px;}
  .stats-inner{gap:14px 24px;}
  .stats-item{flex:1 1 42%;}
}

/* Brand wall hairlines: drawn as tile borders with a negative margin to
   collapse the doubles, NOT as a container background showing through 1px
   gaps. With 16 brands in an 11-column grid the last row leaves 6 empty
   cells, and the gap technique paints those as a pale grey slab. Borders on
   the tiles themselves mean empty cells are simply absent. */
.brand-wall{background:transparent;border:0;gap:0;}
.brand-tile{border:1px solid var(--border);margin:-1px 0 0 -1px;}

/* ══════════════════════════════════════════════════════════════
   PHASE 1 — THE PAPER HERO

   Light canvas, contour field, one giant subject, a floating corner card.
   Everything below the hero stays on ink; the flip is the whole point.
   ══════════════════════════════════════════════════════════════ */

.hero{
  background:var(--paper);
  color:var(--on-paper);
  border-bottom:0;
  /* Not a stacking context: kwt3d.css relies on z-index:auto here so the
     fixed 3D canvas can order BETWEEN the hero's children. */
  min-height:calc(100svh - 96px);
  align-items:center;
}
/* The base darkens .hero-sub/.section text for an ink page. On paper every
   one of those has to invert. */
.hero .hero-brand-text{ color:var(--on-paper-2); }
.hero .hero-brand-line{ background:linear-gradient(90deg,transparent,var(--brand-dark),transparent); }
.hero h1{ color:var(--on-paper); filter:drop-shadow(0 8px 30px rgba(0,0,0,.10)); }
.hero h1 .accent{ color:var(--brand-dark); }
.hero h1 .serif{ color:var(--brand-dim-p); }
.hero .hero-sub{ color:var(--on-paper-2); }
.hero .hero-sub strong{ color:var(--on-paper); }

/* Content sits left; the truck takes the right half. On paper the subject
   and the type are both dark, so they cannot overlap the way Lando's white
   headline can sit over his photo. */
.hero-content{
  max-width:min(660px, 54vw);
  margin:0;
  padding-inline:var(--edge);
  padding-block:clamp(40px,6vw,84px);
}

/* Contour field. Behind everything, including the badge. */
.topo{ position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.85; }

/* The subject. */
.heroreveal{ position:absolute; z-index:1; pointer-events:none;
  right:calc(var(--edge) * -0.35); bottom:6%;
  width:min(64vw, 940px); }
.heroreveal .kr-svg{ width:100%; height:auto; display:block;
  filter:drop-shadow(0 26px 40px rgba(0,0,0,.16)); }

/* ── Wave reveal, tuned for PAPER ──
   tools/dev-reveal.html was built against a dark stage and two of its values
   are actively wrong here: .10 ghost is invisible on #F3F3EE, and a screen
   blend erases the green edge instead of drawing it. */
.kr-stock{ opacity:.92; }
.kr-ghost{ opacity:.17; }
.kr-edge{ mix-blend-mode:multiply; opacity:.85; }

/* ── Floating corner card ── */
.nextcard{
  position:absolute; z-index:2; left:var(--edge); bottom:clamp(20px,4vw,44px);
  width:min(268px, 42vw); padding:16px 18px 18px;
  background:rgba(255,255,255,.86); backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.10); border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.12);
  display:flex; flex-direction:column; gap:11px; color:var(--on-paper);
}
.nextcard-eyebrow{ font-family:var(--font-ui); font-weight:800; font-size:9.5px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--brand-dark); }
.nextcard .hours{ list-style:none; display:flex; flex-direction:column; gap:5px; }
.nextcard .hours li{ display:flex; justify-content:space-between; gap:12px;
  font-family:var(--font-ui); font-size:11.5px; letter-spacing:.04em; }
.nextcard .hours .hd{ color:var(--on-paper-2); text-transform:uppercase; }
.nextcard .hours .ht{ color:var(--on-paper); font-weight:700; }
.nextcard .btn{ padding:10px 14px; font-size:11px; }
/* One badge, compact, no card chrome of its own inside a card. */
.nextcard-rating{ margin:0; }
.nextcard-rating .rbadge{ background:transparent; border:0; border-left:3px solid var(--brand);
  box-shadow:none; padding:2px 0 2px 10px; gap:9px; }
.nextcard-rating .rbadge:hover{ transform:none; box-shadow:none; }
.nextcard-rating .rbadge .src-mark{ width:20px; height:20px; }
.nextcard-rating .rbadge-num{ font-size:21px; color:var(--on-paper); }
.nextcard-rating .rbadge-stars{ font-size:12px; }
.nextcard-rating .rbadge-sub{ font-size:9px; color:var(--on-paper-2); }

/* ── Fitment bar on paper ── */
.hero .fitbar{ background:rgba(0,0,0,.10); border-color:var(--brand-dark);
  border-radius:var(--r-pill); overflow:hidden; box-shadow:0 12px 30px rgba(0,0,0,.10); }
.hero .fitbar-label{ background:var(--paper); color:var(--brand-dark); }
/* background-COLOR, never the `background` shorthand: the shorthand resets
   background-size/-repeat/-position to their initial values, so the two tiny
   arrow gradients tiled at full size and painted every select solid green.
   Size and position therefore have to be restated here. */
.hero .fitbar select{ background-color:var(--paper); color:var(--on-paper);
  background-image:linear-gradient(45deg,transparent 50%,var(--brand-dark) 50%),
                   linear-gradient(135deg,var(--brand-dark) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px;
  background-repeat:no-repeat, no-repeat; }
.hero .fitbar select:focus{ background-color:#EAEAE3; }

/* The bar shares the hero with the truck, so it lives in a ~660px column,
   not the full width it was designed for. Give the label its own line and
   let the three selects share the next one with the button. */
.hero .fitbar{ flex-wrap:wrap; }
.hero .fitbar-label{ flex:1 1 100%; padding:11px 16px;
  border-bottom:1px solid rgba(0,0,0,.10); }
.hero .fitbar select{ flex:1 1 104px; min-width:0; padding:14px 30px 14px 14px;
  font-size:12.5px; letter-spacing:.1em; }
.hero .fitbar .btn{ flex:1 1 100%; }
.hero .fitbar select:disabled{ color:#9AA096; }
.hero .fitbar .btn{ border-radius:0; }

/* ── Rating badges on paper ── */
.hero .rbadge{ background:rgba(255,255,255,.82); border-color:rgba(0,0,0,.10);
  border-left-color:var(--brand); box-shadow:0 12px 30px rgba(0,0,0,.10); }
.hero .rbadge-num{ color:var(--on-paper); }
.hero .rbadge-sub{ color:var(--on-paper-2); }
.hero .rbadge-sub strong{ color:var(--brand-dark); }

/* ── The reel, now a gallery tile rather than the hero background ── */
.build--reel{ position:relative; }
.build--reel .hero-bg{ position:static; }
.build--reel .hero-bg::after{ content:none; }
.build--reel .hero-video{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

@media (max-width:980px){
  /* Below this the two-column read collapses: the truck goes under the copy
     at full width rather than shrinking into a stripe beside it. */
  .hero{ display:block; min-height:0; }
  .hero-content{ max-width:none; }
  .heroreveal{ position:static; width:100%; margin:8px 0 0; }
  .nextcard{ position:static; width:auto; margin:20px var(--edge) 28px;
    backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ── Paper-hero corrections ─────────────────────────────────────

   1. The chrome-gradient headline treatment is a DARK-page device: brushed
      white-to-grey on #F3F3EE is near-invisible. Cancel it inside the hero
      and paint flat ink instead. (It still earns its keep on the ink body.)
   2. The h1 is no longer full-bleed — it shares the hero with the truck and
      lives in a ~660px column — so 9vw overflowed it badly.
   3. .nav.on-paper cannot be transparent: the nav sits ABOVE the hero in
      document flow, so "transparent" reveals body's ink, not the paper
      behind it. It has to actually BE paper.
   ─────────────────────────────────────────────────────────────── */
.hero h1 span:not(.accent){
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:var(--on-paper); color:var(--on-paper);
}
.hero h1{
  font-size:clamp(40px, 5.2vw, 94px);
  line-height:.9; letter-spacing:-.025em;
  filter:none;
}
.hero h1 .accent{ -webkit-text-fill-color:var(--brand-dark); color:var(--brand-dark); }
.hero h1 .serif{ -webkit-text-fill-color:var(--brand-dim-p); color:var(--brand-dim-p);
  font-size:1.04em; }

.nav.on-paper{ background:var(--paper); border-bottom-color:transparent; }
.nav.on-paper.scrolled{ border-bottom-color:rgba(0,0,0,.09); }

/* The contour field was drawn so faintly it read as a printing artefact. */
.topo{ opacity:1; }

/* ══════════════════════════════════════════════════════════════
   PHASE 2 — THE INK BODY

   Everything below the hero. The flip from paper to ink happens at the
   ticker; from there down the page is dark, dense and photographic.
   ══════════════════════════════════════════════════════════════ */

/* ── Manifesto ──
   One statement, edge to edge. Wider than a reading column on purpose: this
   is display type, not body copy. */
.manifesto{ padding-block:clamp(72px,10vw,168px); }
.manifesto-line{
  font-family:var(--font-display); font-weight:900; font-stretch:88%;
  font-size:clamp(30px,5.4vw,86px); line-height:1.02; letter-spacing:-.02em;
  max-width:22ch; color:var(--text);
}
.manifesto-line .serif{ font-stretch:normal; font-weight:400; font-size:1.06em; }

/* ── Scattered photo wall ──
   A 12-column grid with explicit spans and per-tile offsets. Deliberately
   NOT absolute positioning: that reads fine at one width and collapses at
   every other, and this has to survive 390px. */
.shots{ display:grid; grid-template-columns:repeat(12,1fr); gap:clamp(10px,1.4vw,22px);
  margin-top:clamp(28px,4vw,56px); align-items:start; }
.shot{ position:relative; overflow:hidden; margin:0;
  background:var(--ink-2); border:1px solid var(--border); }
.shot img, .shot .hero-video{ width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.16,1,.3,1); }
.shot:hover img, .shot:hover .hero-video{ transform:scale(1.035); }
.shot figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 14px 12px;
  background:linear-gradient(180deg,transparent,rgba(6,9,7,.92)); }

/* Four sizes + vertical offsets are what make it read as scattered rather
   than as a tidy grid of equal boxes. */
/* Every supplied photo is roughly SQUARE (1.00-1.15). The tiles used to vary
   the ASPECT as well as the size - 4/3 and 3/4 - and object-fit:cover then
   sliced the vehicles apart to fill them. Size varies by grid span instead,
   and every tile keeps a near-square ratio the sources can actually fill. */
.shot.is-xl{ grid-column:span 7; aspect-ratio:5/4; }
.shot.is-lg{ grid-column:span 5; aspect-ratio:5/4; margin-top:clamp(20px,4vw,64px); }
.shot.is-md{ grid-column:span 4; aspect-ratio:1/1; }
.shot.is-sm{ grid-column:span 3; aspect-ratio:1/1; margin-top:clamp(14px,3vw,44px); }
/* The reel is 16:9 footage; a square tile would crop the trucks out of it. */
.shot--reel{ aspect-ratio:16/10; }
/* Bias the crop upward: on a vehicle photo the interesting half is the body
   and glass, not the tarmac under it. */
.shot img{ object-position:50% 42%; }
.shot--reel .hero-bg{ position:static; width:100%; height:100%; }
.shot--reel .hero-bg::after{ content:none; }

@media (max-width:900px){
  .shot.is-xl,.shot.is-lg{ grid-column:span 12; }
  .shot.is-md,.shot.is-sm{ grid-column:span 6; }
}
@media (max-width:560px){
  /* Offsets and aspect games both go: one clean column reads better than a
     scatter squeezed into 390px. */
  .shots{ grid-template-columns:1fr; }
  .shot{ grid-column:span 1 !important; margin-top:0 !important; aspect-ratio:4/3; }
}

/* ── Pull-quote ── */
.pullquote{ margin:clamp(48px,7vw,104px) 0 0; max-width:26ch; }
.pullquote-text{ font-family:var(--font-serif); font-style:italic; font-weight:400;
  font-size:clamp(24px,3.6vw,48px); line-height:1.18; letter-spacing:-.01em;
  color:var(--text); }
.pullquote-text::before{ content:"\201C"; }
.pullquote-text::after{ content:"\201D"; }
.sig{ display:flex; align-items:center; gap:12px; margin-top:22px; }
.sig img{ width:34px; height:34px; object-fit:contain; flex:none; }
.sig-meta{ display:flex; flex-direction:column; gap:3px; }
.sig-name{ font-family:var(--font-ui); font-weight:800; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text); }

/* ── Brand marquee ──
   Right-to-left, matching the ticker at the top of the page. Two identical
   tracks translate together by -50%, so the second is already mid-frame when
   the loop resets: no snap. Pauses on hover so a logo can be read. */
@keyframes brandrun{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

#brandWall{ display:flex; width:max-content; gap:0;
  background:transparent; border:0; overflow:visible;
  margin-top:clamp(24px,3vw,44px);
  animation:brandrun 46s linear infinite; }
.brands-rail{ overflow:hidden; position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.brands-rail:hover #brandWall{ animation-play-state:paused; }
.brand-track{ display:flex; flex:none; }

.brand-tile{ flex:none; display:flex; align-items:center; justify-content:center;
  width:clamp(150px,17vw,230px); min-height:104px; padding:20px 22px;
  border:0; margin:0; background:transparent; }
.brand-tile span{ font-family:var(--font-display); font-weight:900; font-stretch:88%;
  font-size:clamp(18px,2vw,27px); letter-spacing:.04em; text-transform:uppercase;
  color:var(--text-secondary); white-space:nowrap; transition:color .25s; }
.brand-tile:hover span{ color:var(--brand); }
/* Full colour, because that is the whole point of shipping the real marks.
   What keeps 17 colourways from reading as a ransom note is the paper band
   and the spacing, not desaturation - so the only restraint here is a slight
   lift off full black and a nudge of scale on hover.

   Height alone cannot normalise these: BFGoodrich is 4.8:1 and Pirelli is
   2.8:1, so matching heights makes the wide marks tower over the compact
   ones. Both axes are capped and the tile centres whatever fits. */
.brand-tile img{ max-height:46px; max-width:calc(100% - 8px); width:auto;
  object-fit:contain; filter:none; opacity:.92;
  transition:opacity .25s, transform .25s; }
.brand-tile:hover img{ opacity:1; transform:scale(1.06); }

@media (prefers-reduced-motion: reduce){
  #brandWall{ animation:none; }
  .brands-rail{ overflow-x:auto; }
}

/* ── Full-bleed band ──
   .section is width-capped, so a band that has to reach the viewport edges
   needs a wrapper outside it. Used for the paper brand rail: the page is ink
   from the ticker down, and this is the one place that flips back. */
.band{ width:100%; }
.band--paper{ background:var(--paper); color:var(--on-paper); }
.band--paper .section-title{ color:var(--on-paper); }
.band--paper .section-lede{ color:var(--on-paper-2); }
.band--paper .section-eyebrow{ color:var(--brand-dark); }
.band--paper .section-eyebrow::before{ background:var(--brand-dark); }
.band--paper .brand-tile span{ color:var(--on-paper-2); }
.band--paper .brand-tile:hover span{ color:var(--brand-dark); }

.brands-wheels{ margin-top:clamp(20px,2.6vw,34px);
  font-family:var(--font-ui); font-size:13px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--on-paper-2); }
.brands-wheels span{ color:var(--on-paper); font-weight:700; }

/* ── Two-panel split ── */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--border); border:1px solid var(--border);
  margin-top:clamp(28px,4vw,52px); }
.split-panel{ background:var(--ink); padding:clamp(22px,3vw,40px); }
.split-head{ font-family:var(--font-ui); font-weight:800; font-size:clamp(20px,2.4vw,32px);
  letter-spacing:.04em; text-transform:uppercase; color:var(--text);
  padding-bottom:16px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.split-head .accent{ color:var(--brand); }
.split .svc{ background:transparent; border:0; box-shadow:none; padding:18px 0;
  border-bottom:1px solid var(--border); }
.split .svc:last-child{ border-bottom:0; }
.split .svc:hover{ transform:none; background:transparent; }
.split .svc h3{ font-size:clamp(19px,2vw,26px); }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } }

/* ── The finish wall ──
   Hairlines drawn as tile borders with a negative margin, the same technique
   the brand wall uses, so empty cells in the last row leave no grey slab. */
.finish-wall{ display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  margin-top:clamp(28px,4vw,52px); }
.finish{ display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:22px 14px 18px; text-align:center;
  border:1px solid var(--border); margin:-1px 0 0 -1px;
  transition:background .3s ease; }
.finish:hover{ background:var(--ink-3); }
.finish-art{ width:min(112px,52%); height:auto; display:block;
  transition:transform .6s cubic-bezier(.16,1,.3,1); }
.finish:hover .finish-art{ transform:rotate(28deg); }
.finish-name{ font-family:var(--font-ui); font-weight:800; font-size:11.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text); margin-top:6px; }
.finish-sub{ font-family:var(--font-ui); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--brand-dim); }

/* ── Footer shout ── */
.footer-shout{ max-width:var(--max-w); margin:0 auto clamp(40px,5vw,72px);
  font-family:var(--font-display); font-weight:900; font-stretch:88%;
  font-size:clamp(40px,9.5vw,140px); line-height:.86; letter-spacing:-.025em;
  text-transform:uppercase; color:var(--text); }
.footer-shout .accent{ color:var(--brand); }

/* ══════════════════════════════════════════════════════════════
   HERO ON INK — black canvas, green contours.

   Reversed from the original paper plan for one decisive reason: the hero
   subject is now a WHITE Escalade. A white vehicle on an off-white ground is
   the weakest pairing available, and it was only ever going to need a heavy
   shadow to separate. On black it separates by itself.

   Two things fall out of it for free: the badge artwork and the 3D medallion
   are both authored for dark, so neither needs the light lighting preset that
   Phase 3 was going to build; and the green reads at full chroma instead of
   being darkened to --brand-dark for contrast against paper.
   ══════════════════════════════════════════════════════════════ */
.hero{ background:var(--ink); color:var(--text); }
.hero .hero-brand-text{ color:var(--text-secondary); }
.hero .hero-brand-line{ background:linear-gradient(90deg,transparent,var(--brand),transparent); }
.hero h1 span:not(.accent){ -webkit-text-fill-color:var(--text); color:var(--text); }
.hero h1 .accent{ -webkit-text-fill-color:var(--brand); color:var(--brand); }
.hero h1 .serif{ -webkit-text-fill-color:var(--brand-dim); color:var(--brand-dim); }
.hero .hero-sub{ color:var(--text-secondary); }
.hero .hero-sub strong{ color:var(--text); }
.hero .btn-ghost{ border-color:var(--border-strong); color:var(--text); }
.hero .btn-ghost:hover{ border-color:var(--brand); color:var(--brand); }

/* Contours in brand green, low enough to read as texture not as pattern. */
.topo{ --topo-ink:rgba(16,198,3,.16); opacity:1; }

/* The nav no longer has a light canvas to sit on, so the paper theme is off. */
.nav.on-paper{ background:rgba(14,18,15,.86); border-bottom-color:var(--border); }
.nav.on-paper .nav-links a{ color:var(--text-secondary); }
.nav.on-paper .nav-links a:hover,.nav.on-paper .nav-links a.active{ color:var(--text); }
.nav.on-paper .brand{ color:var(--text); }
.nav.on-paper .brand small{ color:var(--brand); }
.nav.on-paper .phone-pill{ background:var(--brand); color:#04140A; }
.nav.on-paper .menu-btn span,
.nav.on-paper .menu-btn span::before,
.nav.on-paper .menu-btn span::after{ background:var(--text); }

/* Controls back to their dark treatment. */
.hero .fitbar{ background:var(--border); border-color:rgba(16,198,3,.55); box-shadow:0 14px 40px rgba(0,0,0,.5); }
.hero .fitbar-label{ background:var(--bg); color:var(--brand); }
.hero .fitbar select{ background-color:var(--bg); color:var(--text);
  background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),
                   linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat, no-repeat; }
.hero .fitbar select:focus{ background-color:#12171A; }
.hero .rbadge{ background:rgba(16,16,16,.88); border-color:rgba(232,178,43,0);
  border-left-color:var(--brand); box-shadow:0 14px 40px rgba(0,0,0,.55); }
.hero .rbadge-num{ color:var(--text); }
.hero .rbadge-sub{ color:var(--text-secondary); }
.hero .rbadge-sub strong{ color:var(--brand); }

/* Corner card on ink. */
.nextcard{ background:rgba(21,26,22,.9); border-color:var(--border); color:var(--text); }
.nextcard-eyebrow{ color:var(--brand); }
.nextcard .hours .hd{ color:var(--text-secondary); }
.nextcard .hours .ht{ color:var(--text); }
.nextcard-rating .rbadge-num{ color:var(--text); }
.nextcard-rating .rbadge-sub{ color:var(--text-secondary); }

/* A white vehicle on black needs no drop shadow; it needs a floor. */
.heroreveal .kr-svg{ filter:none; }
.kr-stock{ opacity:1; }
.kr-ghost{ opacity:.14; }
.kr-edge{ mix-blend-mode:screen; opacity:.95; }

/* ── Shop by vehicle ──────────────────────────────────────────
   The panel under the hero. Reads as one solid slab against the ink so the
   picker is unmistakably the thing to use first, rather than another band
   of copy. The selects reuse the .fitbar treatment (same custom arrow, same
   uppercase UI face) because they are the same control doing a bigger job —
   two different-looking vehicle pickers on one page would read as two
   different features. */
.shopby{background:linear-gradient(180deg,#0B0F0C 0%,#121815 100%);
  border-bottom:1px solid rgba(16,198,3,.28);}
.shopby-inner{max-width:var(--max-w);margin:0 auto;text-align:center;}
.shopby .section-lede{margin-left:auto;margin-right:auto;}

.shopby-picker{display:flex;flex-wrap:wrap;align-items:stretch;gap:1px;
  background:var(--border);border:1px solid rgba(16,198,3,.55);
  padding:1px;margin:32px auto 0;max-width:1040px;
  box-shadow:0 18px 50px rgba(0,0,0,.55);}
.shopby-picker select{flex:1 1 200px;min-width:0;background:var(--bg);border:0;
  color:var(--text);font-family:var(--font-ui);font-weight:600;font-size:15px;
  letter-spacing:.14em;text-transform:uppercase;padding:20px 22px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--brand) 50%),
                   linear-gradient(135deg,var(--brand) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.shopby-picker select:focus{outline:none;background-color:#12171a;}
.shopby-picker select:disabled{color:var(--text-muted);cursor:not-allowed;}
.shopby-picker .btn{flex:0 0 auto;}
/* Disabled until a model is chosen: the button cannot do anything useful
   before then, and a button that silently no-ops teaches people the picker
   is broken. */
.shopby-picker .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;}

/* The answer the page can give before the customer clicks anything. */
.shopby-note{margin:18px auto 0;max-width:1040px;
  font-family:var(--font-ui);font-weight:600;font-size:13px;letter-spacing:.06em;
  color:var(--brand);}

.shopby-alt{margin:14px 0 0;font-family:var(--font-ui);font-weight:600;
  font-size:13px;letter-spacing:.04em;color:var(--text-secondary);}
.shopby-alt a{color:var(--text);border-bottom:1px solid var(--brand-dark);
  padding-bottom:1px;transition:color .18s ease,border-color .18s ease;}
.shopby-alt a:hover{color:var(--brand);border-color:var(--brand);}

.shopby-quick{margin:34px auto 0;max-width:1040px;}
.shopby-quick-label{display:block;font-family:var(--font-ui);font-weight:700;
  font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--text-muted);margin-bottom:14px;}
.shopby-quick-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.shopby-chip{background:var(--surface-1);border:1px solid var(--border);
  color:var(--text-secondary);font-family:var(--font-ui);font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  padding:11px 18px;border-radius:var(--r-pill);cursor:pointer;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;}
.shopby-chip:hover,.shopby-chip:focus-visible{color:var(--text);
  border-color:var(--brand);background:var(--surface-2);outline:none;}

@media (max-width:820px){
  .shopby-picker{margin-top:24px;}
  .shopby-picker select,.shopby-picker .btn{flex:1 1 100%;}
  .shopby-quick-row{justify-content:flex-start;}
  .shopby-note,.shopby-alt{text-align:left;}
  .shopby-inner{text-align:left;}
  .shopby .section-lede{margin-left:0;}
}