@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-core.woff2) format('woff2');unicode-range:U+0000-00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA-00B6, U+00B8-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2025, U+2027-2038, U+203B-206F, U+20AC, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-core.woff2) format('woff2');unicode-range:U+0000-00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA-00B6, U+00B8-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2025, U+2027-2038, U+203B-206F, U+20AC, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-greek.woff2) format('woff2');unicode-range:U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-core.woff2) format('woff2');unicode-range:U+0000-00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-stretch:100%;font-display:swap;src:url(/assets/font-ibmplexsans-v23-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA-00B6, U+00B8-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2025, U+2027-2038, U+203B-206F, U+20AC, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/font-newsreader-v26-vietnamese.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/font-newsreader-v26-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/font-newsreader-v26-core.woff2) format('woff2');unicode-range:U+0000-00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2039-203A, U+2212}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 600;font-display:swap;src:url(/assets/font-newsreader-v26-latin.woff2) format('woff2');unicode-range:U+00A1-00A8, U+00AA-00B6, U+00B8-00D6, U+00D8-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-2012, U+2015-2017, U+201A-201B, U+201E-2025, U+2027-2038, U+203B-206F, U+20AC, U+2122, U+2191, U+2193, U+2215, U+FEFF, U+FFFD}

*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#0c0c0d; --ink-soft:#17171a;
  --paper:#ffffff;            /* light theme — white reads as trustworthy retail */
  --card:#f6f5f3;             /* the quiet band, a hair off white */
  --line:#e2ded8;
  --muted:#6f6862;
  --red:#c21e24; --red-dk:#96161b;
  --gold:#b99b5f;
  --shell:1380px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
/* sticky header is 92px — anchors must stop below it, not behind it */
[id]{scroll-margin-top:112px}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 "IBM Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-feature-settings:"kern" 1,"liga" 1;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 28px}
@media(max-width:380px){.wrap{padding:0 18px}}

/* ── type: editorial serif display against a plain grotesque. the serif is the
      single biggest signal that a human chose something. ── */
h1,h2,h3,.serif{font-family:"Newsreader",Georgia,serif;font-weight:500;
  letter-spacing:-.014em;line-height:1.02;margin:0}
/* interior pages get a restrained headline; the hero overrides it below */
h1{font-size:clamp(29px,3.2vw,44px);line-height:1.14;letter-spacing:-.012em}
h2{font-size:clamp(32px,4.1vw,58px)}
h3{font-size:25px}
.lbl{font:500 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.19em;text-transform:uppercase;
  color:var(--muted)}
.lede{font-size:19px;line-height:1.6;color:#3b3733}

/* ── buttons: no pill, no gradient, real weight ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;cursor:pointer;
  font:600 13.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.1em;text-transform:uppercase;
  padding:17px 30px;transition:background .25s var(--ease),color .25s var(--ease)}
.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dk)}
.btn-line{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.42)}
.btn-line:hover{background:#fff;color:var(--ink);box-shadow:none}
/* .btn-line is a white outline meant for the dark hero — on a light page it is
   invisible. Anything inside .lightbtn gets the ink outline instead. */
.lightbtn .btn-line{color:var(--ink);box-shadow:inset 0 0 0 1px rgba(24,22,20,.28)}
.lightbtn .btn-line:hover{background:var(--ink);color:#fff;box-shadow:none}
.btn-ink{background:var(--ink);color:#fff}.btn-ink:hover{background:#2a2a2e}
.btn-outink{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn-outink:hover{background:var(--ink);color:#fff}

/* ── header: transparent over the film, solidifies on scroll ── */
header{position:sticky;top:0;z-index:80;background:#fff;
  border-bottom:1px solid var(--line)}
.hb{display:flex;align-items:center;gap:34px;height:92px}
.hb .mark img{height:52px;width:auto;display:block}
.hb nav{display:flex;align-items:center;gap:30px;margin-left:auto}
.hb nav a{font:500 13px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:#4a4540;position:relative;padding:4px 0}
.hb nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:1px;
  background:var(--red);transition:right .35s var(--ease)}
.hb nav a:hover{color:var(--ink)}.hb nav a:hover::after{right:0}
.hb nav a.on{color:var(--ink)}.hb nav a.on::after{right:0}
.hb nav a.mnav{display:none}
.hb .tel{display:inline-flex;align-items:center;gap:9px;background:var(--red);color:#fff;
  font:600 15px/1 "IBM Plex Sans",sans-serif;letter-spacing:.01em;padding:14px 22px;border-radius:2px;
  transition:background .22s var(--ease),transform .22s var(--ease)}
.hb .tel:hover{background:var(--red-dk);transform:translateY(-1px)}
.hb .tel svg{width:16px;height:16px;fill:currentColor;flex:none}
.burger{display:none;background:0;border:0;color:var(--ink);font-size:23px;cursor:pointer;margin-left:auto}

/* ── hero: full-bleed film, text sitting on it, nothing centerd ── */
.hero{position:relative;min-height:calc(100svh - 92px);display:flex;align-items:flex-end;
  padding:0 0 104px;overflow:hidden;background:#0c0c0d}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero video{opacity:0;transition:opacity .8s var(--ease)}.hero video.on{opacity:1}
.hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(12,12,13,.72) 0%,rgba(12,12,13,.18) 34%,
    rgba(12,12,13,.52) 68%,rgba(12,12,13,.93) 100%)}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero h1{font-size:clamp(38px,6.4vw,88px);line-height:1.04;margin-top:.14em;color:#fff;max-width:14ch;text-shadow:0 2px 40px rgba(0,0,0,.4)}
.hero .lbl{color:rgba(255,255,255,.62)}
.hero .sub{color:rgba(255,255,255,.9);font-size:19.5px;line-height:1.55;max-width:47ch;
  margin:22px 0 32px}
.hcta{display:flex;gap:12px;flex-wrap:wrap}
.scrollcue{display:none;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3;
  width:1px;height:44px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.6))}

/* ── search: a light panel straddling the hero edge. it is the one thing they
      came to do, so it cannot sit dark-on-dark underneath the film. ── */
.band{position:relative;z-index:5;margin-top:-58px;padding:0 0 0}
.bandcard{background:#fff;box-shadow:0 26px 60px -22px rgba(0,0,0,.55);padding:26px 30px 28px}
.bandcard .lbl{display:block;margin-bottom:15px;color:var(--muted)}
.bandrow{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch}
.bandrow input,.bandrow select{font:400 16px/1 "IBM Plex Sans",sans-serif;padding:17px 16px;
  border:1px solid var(--line);background:#fff;color:var(--ink);min-width:0;
  transition:border-color .22s var(--ease),box-shadow .22s var(--ease)}
.bandrow input{flex:1 1 280px}
.bandrow input::placeholder{color:#9a938c}
.bandrow input:focus,.bandrow select:focus{outline:0;border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink)}
.bandrow select{cursor:pointer;flex:0 1 170px}
.bandrow .btn{flex:0 0 auto;padding-left:34px;padding-right:34px}
@media(max-width:760px){.band{margin-top:-30px}.bandcard{padding:22px 20px 24px}
  .bandrow select{flex:1 1 46%}.bandrow .btn{flex:1 1 100%}}

/* ── sections: space does the work, no rules, no boxes ── */
section{padding:112px 0}
.sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:52px}
.sechead .lbl{margin-bottom:14px;display:block}

/* ── vehicle cards: borderless. image, price, name. hover lifts the photo only ── */
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:48px 30px}
.vwrap{display:block}
/* the buttons under each card (Book a test drive, Inquire). The small message icon that sat beside them
   opened the same form as Inquire; removed 1 Oct (Colin). Bring it back as "chat about this car" once the
   website chat is live. */
.ctarow{display:flex;gap:8px;margin-top:13px}
/* SCOPED to .ctarow on purpose. A bare .cta rule also hits .phero .cta, which is the
   hero's button ROW, and painted a white bar across the hero that went black on hover. */
.ctarow .cta{flex:1;height:42px;border:1px solid var(--ink);background:#fff;color:var(--ink);
  border-radius:3px;cursor:pointer;font:600 12.5px/1 "IBM Plex Sans",sans-serif;
  letter-spacing:.08em;text-transform:uppercase;
  transition:background .18s var(--ease),color .18s var(--ease)}
.ctarow .cta:hover{background:var(--ink);color:#fff}
.v{display:block}
.vfig{position:relative;aspect-ratio:3/2;overflow:hidden;background:#eae5de;margin-bottom:18px}
.vfig img{width:100%;height:100%;object-fit:cover;
  transition:transform .85s var(--ease),filter .5s var(--ease)}
.v:hover .vfig img{transform:scale(1.045)}
/* AutoManager burns a red banner top and bottom of some shots — and it carries the OLD
   wrong address. Zoom past it rather than publish incorrect information. */
.vfig img.wm,.gal img.wm{transform:scale(1.34)}
.v:hover .vfig img.wm{transform:scale(1.38)}
.vfig .none{position:absolute;inset:0;display:grid;place-items:center;text-align:center;
  color:#a49d95;font:500 10.5px/1.7 "IBM Plex Sans",sans-serif;letter-spacing:.17em;text-transform:uppercase}
.vfig .mi{position:absolute;left:14px;bottom:13px;color:#fff;font:500 11px/1 "IBM Plex Sans",sans-serif;
  letter-spacing:.11em;text-transform:uppercase;text-shadow:0 1px 12px rgba(0,0,0,.85)}
.vtop{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.vname{font:600 17px/1.3 "IBM Plex Sans",sans-serif;letter-spacing:-.005em}
.vprice{font:600 19px/1 "IBM Plex Sans",sans-serif;white-space:nowrap}
.vmeta{font-size:13.5px;color:var(--muted);margin-top:9px;letter-spacing:.005em}
.vmeta b{color:var(--ink);font-weight:600}


/* ── Google review marquee. Track is rendered twice and slid exactly -50%,
      so the loop has no seam. Pauses on hover; falls back to a scroller
      when the visitor asks for reduced motion. ── */
.revrail{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:34px 0 38px;overflow:hidden}
.revhead{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:26px;
  flex-wrap:wrap;text-align:center}
.revhead .g{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 "IBM Plex Sans",sans-serif}
.revhead svg{width:19px;height:19px}
.revhead .sc{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:27px;line-height:1}
.revhead .stars{color:#e7a33e;letter-spacing:2px;font-size:15px}
.revhead .n{color:var(--muted);font-size:13.5px}
.marq{position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marq-track{display:flex;gap:20px;width:max-content;will-change:transform}
@media (prefers-reduced-motion:no-preference){
  .marq-track{animation:marqslide var(--rail-dur,72s) linear infinite}
  @keyframes marqslide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
}
@media (prefers-reduced-motion:reduce){
  .marq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .marq-track{animation:none}
}
.rev{flex:none;width:clamp(268px,30vw,332px);background:#fff;border:1px solid var(--line);
  padding:22px 22px 20px;display:flex;flex-direction:column}
.rev .stars{color:#e7a33e;letter-spacing:2.5px;font-size:14px;margin-bottom:12px}
.rev p{font-size:14.5px;line-height:1.62;color:#3b3733;margin:0 0 16px}
.rev .who{margin-top:auto;padding-top:13px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:9px}
.rev .nm{font:600 13.5px/1 "IBM Plex Sans",sans-serif}
.rev .src{font-size:12px;color:var(--muted)}
@media(max-width:640px){.rev{width:80vw}}

/* ── shop by lifestyle: real cars off his lot, not stock photography ── */
.shopwrap{position:relative}
.shop{overflow:hidden}
.shop-track{display:flex;gap:30px;transition:transform .55s var(--ease);will-change:transform}
.shop-track .tile{flex:0 0 calc((100% - 90px)/4)}
@media(max-width:1100px){.shop-track .tile{flex:0 0 calc((100% - 60px)/3)}}
@media(max-width:820px){.shop-track{gap:20px}.shop-track .tile{flex:0 0 calc((100% - 20px)/2)}}
@media(max-width:560px){.shop-track{gap:16px}.shop-track .tile{flex:0 0 78%}}

/* the row under the carousel: a scrollbar thumb that tracks position, arrows on the right */
.shopfoot{display:flex;align-items:center;gap:28px;margin-top:34px}
.shopbar{position:relative;flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden}
.shopbar span{position:absolute;top:0;bottom:0;left:0;background:var(--ink);border-radius:2px;
  transition:left .45s var(--ease),width .45s var(--ease)}
.shopnav{display:flex;gap:12px;flex:none}
.shoparrow{width:44px;height:44px;border-radius:50%;border:0;background:var(--ink);cursor:pointer;
  display:grid;place-items:center;
  transition:opacity .25s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.shoparrow:hover{background:#000;transform:translateY(-1px)}
.shoparrow:active{transform:scale(.94)}
.shoparrow svg{width:18px;height:18px;stroke:#fff;stroke-width:2.2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.shoparrow:disabled{opacity:.28;pointer-events:none}

.tile{position:relative;display:block;aspect-ratio:375/582;overflow:hidden;background:#eae5de;
  border-radius:12px;transition:transform .22s var(--ease)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile:hover img{transform:scale(1.04)}
.tile:active{transform:scale(.985)}                 /* the press, same as theirs */
.pill{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:11px;background:#fff;border-radius:999px;
  height:44px;padding:0 23px;white-space:nowrap;
  font:600 19px/1 "IBM Plex Sans",sans-serif;letter-spacing:-.01em;color:var(--ink);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.34);
  transition:transform .25s var(--ease),background .16s var(--ease)}
.tile:hover .pill{transform:translateX(-50%) translateY(-3px)}
.tile:active .pill{background:#dedad4}              /* pill greys out on press */
.pill svg{width:21px;height:21px;flex:none;color:var(--ink);opacity:.85}
@media(max-width:560px){.pill{height:42px;font-size:16.5px;padding:0 20px;bottom:22px}
  .pill svg{width:19px;height:19px}}

/* ── nav dropdown. Note the .hb nav prefix — without it these lose the
      specificity fight with .hb nav a and inherit the uppercase nav styling. ── */
.hasdrop{position:relative;display:inline-flex;align-items:center}
.drop{position:absolute;top:calc(100% + 20px);left:50%;
  transform:translateX(-50%) translateY(-8px) scale(.98);transform-origin:top center;
  background:#fff;border-radius:4px;min-width:216px;padding:10px;
  box-shadow:0 2px 6px rgba(12,12,13,.06),0 18px 44px -14px rgba(12,12,13,.26);
  opacity:0;visibility:hidden;
  transition:opacity .2s var(--ease),transform .22s var(--ease),visibility .22s;z-index:90}
.drop.open{opacity:1;visibility:visible;transform:translateX(-50%) scale(1)}
/* hover bridge so the pointer can cross the gap */
.drop::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
/* caret */
.drop::after{content:"";position:absolute;top:-7px;left:50%;margin-left:-7px;width:14px;height:14px;
  background:#fff;transform:rotate(45deg);border-radius:2px;
  box-shadow:-2px -2px 5px rgba(12,12,13,.05)}
.hb nav .drop a{display:block;padding:14px 18px;border-radius:3px;
  font:500 15px/1.25 "IBM Plex Sans",sans-serif;letter-spacing:0;text-transform:none;
  color:#26231f;position:relative;transition:background .16s var(--ease),color .16s var(--ease)}
.hb nav .drop a em{display:block;font-style:normal;font-size:12.5px;color:var(--muted);
  margin-top:3px;letter-spacing:0}
.hb nav .drop a::after{display:none}
.hb nav .drop a:hover{background:var(--card);color:var(--red)}
.hb nav .drop a:hover em{color:#8a827a}
@media(max-width:820px){.drop{display:none}}

/* ── mega menu ── */
.hasmega{position:relative;display:inline-flex;align-items:center}
.mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:0 24px 44px -26px rgba(0,0,0,.32);padding:38px 0 42px;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s}
.mega.open{opacity:1;visibility:visible;transform:none}
.megagrid{display:grid;grid-template-columns:1fr 2.15fr 1.05fr .95fr;gap:40px}
.mega h6{font:600 13px/1 "IBM Plex Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin:0 0 15px;padding-bottom:12px;border-bottom:1px solid #bdb5aa}
.mega ul{list-style:none;margin:0;padding:0;columns:1}
/* the class sits on the child div, not on .mega — as .mega.cols2 this never matched
   and the make list ran twelve deep in a single column. */
.mega .cols2 ul{columns:3;column-gap:26px}
.mega li{padding:5.5px 0;break-inside:avoid}
.mega a{font-size:15.5px;color:#33302c}
.mega a:hover{color:var(--red)}
.mega .ct{color:var(--muted);font-size:13px;margin-left:5px}
@media(max-width:900px){.mega{display:none}}

/* ── editorial two-up ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch}
.duo .fig{background:#eae5de;min-height:560px;position:relative;overflow:hidden}
.duo .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
.duo .txt{background:var(--card);padding:84px 72px;display:flex;flex-direction:column;
  justify-content:center}
.duo .txt p{color:#4a4540;max-width:44ch}

/* ── quotes: no cards. rules and space, like a page ── */
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:56px}
.q p{font-family:"Newsreader",Georgia,serif;font-weight:400;font-size:22px;line-height:1.38;margin:0 0 20px}
.q cite{font-style:normal;font-size:13.5px;color:var(--muted);display:block;
  padding-top:16px;border-top:1px solid var(--line)}
.q cite b{color:var(--ink);font-weight:600}

/* ── numbers row: type only, no tiles ── */
.nums{display:flex;flex-wrap:wrap;gap:0 72px;row-gap:34px}
.n b{display:block;font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:52px;line-height:1;
  letter-spacing:-.02em}
.n span{display:block;font:500 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.17em;
  text-transform:uppercase;color:var(--muted);margin-top:11px}

/* ── footer: AutoNation's structure, our brand. link columns, centered mark,
      brand-coloured socials, legal rail. ── */
footer.site{background:var(--card);color:#5c5650;padding:78px 0 30px;font-size:15px;
  border-top:1px solid var(--line)}
footer.site a{color:#3a3630}footer.site a:hover{color:var(--red)}
.fcols{display:grid;grid-template-columns:repeat(5,1fr);gap:40px;padding-bottom:56px}
footer.site h4{font:600 12.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.02em;
  color:var(--ink);margin:0 0 20px}
.fcols ul{list-style:none;margin:0;padding:0}
.fcols li{padding:7px 0;font-size:14.5px}
.fmid{border-top:1px solid var(--line);padding:42px 0 34px;text-align:center}
.fmid img{height:44px;width:auto;margin:0 auto 26px;opacity:.92}
.socials{display:flex;justify-content:center;gap:16px}
.soc{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  transition:transform .22s var(--ease),filter .22s var(--ease)}
.soc:hover{transform:translateY(-2px);filter:brightness(1.08)}
.soc svg{width:21px;height:21px;fill:#fff}
.soc.fb{background:#1877F2}
.soc.ig{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}
.soc.gg{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.soc.gg svg{fill:none}
.fbar{border-top:1px solid var(--line);padding-top:24px;display:flex;flex-wrap:wrap;gap:10px 26px;
  align-items:center;justify-content:center;font-size:13px;color:var(--muted)}
.fbar a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.fbar .sep{opacity:.4}
.fnote{text-align:center;font-size:12.5px;color:#8c857e;margin-top:18px;line-height:1.6}
@media(max-width:960px){.fcols{grid-template-columns:repeat(2,1fr);gap:34px}}
@media(max-width:520px){.fcols{grid-template-columns:1fr}}



/* ── sticky action bar: mobile only. the primary actions never scroll away. ── */
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;
  border-top:1px solid var(--line);box-shadow:0 -8px 26px -14px rgba(0,0,0,.34);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));gap:8px}
.mbar a{flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.05em;text-transform:uppercase;
  padding:15px 6px;border-radius:2px;text-align:center}
.mbar .c{background:var(--red);color:#fff}
.mbar .a{background:var(--ink);color:#fff}
.mbar .t{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.mbar svg{width:15px;height:15px;fill:currentColor;flex:none}
@media(max-width:820px){.mbar{display:flex}body{padding-bottom:78px}}

/* ── chat launcher ── */
.chatfab{position:fixed;right:22px;bottom:22px;z-index:75;width:62px;height:62px;border-radius:50%;
  border:0;background:var(--red);cursor:pointer;display:grid;place-items:center;
  box-shadow:0 12px 30px -8px rgba(194,30,36,.6);transition:transform .25s var(--ease),background .2s}
.chatfab:hover{background:var(--red-dk);transform:translateY(-2px)}
.chatfab svg{width:26px;height:26px;fill:#fff}
.chatfab span{position:absolute;top:-3px;right:-3px;width:15px;height:15px;border-radius:50%;
  background:#1db954;box-shadow:0 0 0 3px #fff}
.chatpanel{position:fixed;right:22px;bottom:96px;z-index:76;width:340px;background:#fff;
  display:flex;flex-direction:column;max-height:calc(100svh - 96px - 110px);
  border:1px solid var(--line);box-shadow:0 26px 56px -22px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.chatpanel.open{opacity:1;visibility:visible;transform:none}
.chatpanel header{background:var(--ink);color:#fff;padding:16px 14px 16px 20px;flex:none;
  display:flex;align-items:center;gap:10px}
.chatpanel header>div{flex:1;min-width:0}
.chatpanel header b{display:block;font:600 15px/1.3 "IBM Plex Sans",sans-serif}
.chatpanel .t-ask,.chatpanel .chatback{display:none}
.chatpanel.asking .t-ask{display:block}.chatpanel.asking .t-main{display:none}
.chatpanel.asking .chatback{display:block}.chatpanel.asking header{padding-left:8px}
.chatback,.chatx{flex:none;width:34px;height:34px;border:0;border-radius:50%;background:transparent;
  color:#fff;font:400 22px/1 "IBM Plex Sans",sans-serif;cursor:pointer;opacity:.75}
.chatback:hover,.chatx:hover{opacity:1;background:rgba(255,255,255,.1)}
.chatpanel header span{font-size:12.5px;color:rgba(255,255,255,.66)}
.chatpanel .opts{padding:8px}
.chatpanel .opts a,.chatpanel .opts button{display:flex;align-items:center;gap:13px;
  padding:14px;font:500 14.5px/1.25 "IBM Plex Sans",sans-serif;border-radius:2px;width:100%;
  background:0;border:0;cursor:pointer;text-align:left;color:var(--ink)}
.chatpanel .opts a:hover,.chatpanel .opts button:hover{background:var(--card)}
.chatpanel .opts svg{width:19px;height:19px;fill:var(--red);flex:none}
.chatpanel .opts em{display:block;font-style:normal;font-size:12px;color:var(--muted);
  margin-top:3px;font-weight:400;white-space:normal}
.chatpanel .opts span{white-space:nowrap}
.askform{display:none;padding:14px 16px 16px;overflow-y:auto;overscroll-behavior:contain;min-height:0}
.askpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.askform .consent{margin-top:4px;padding-top:12px}
.askform .consent label{font-size:11.5px;line-height:1.5;gap:10px}
.askform .consent label+label{margin-top:10px}
.askform .consent input[type=checkbox]{width:17px;height:17px}
.askform .consent .consentnote{font-size:11.5px;margin:10px 0 0 27px}
.chatpanel.asking .foot{display:none}
.askform .backlink[hidden]{display:none}
.askform.on{display:block}
.chatpanel.asking .opts{display:none}
.askform label{display:block;font:600 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.askform input,.askform textarea{display:block;width:100%;margin-top:7px;padding:12px;
  border:1px solid var(--line);border-radius:2px;background:#fff;
  font:400 14.5px/1.45 "IBM Plex Sans",sans-serif;letter-spacing:0;text-transform:none;color:var(--ink)}
.askform textarea{min-height:76px;resize:vertical}
.inqf input,.inqf textarea{display:block;width:100%;padding:13px;border:1px solid var(--line);
  border-radius:2px;background:#fff;font:400 15px/1.45 "IBM Plex Sans",sans-serif;
  letter-spacing:0;text-transform:none;color:var(--ink)}
.inqf textarea{min-height:88px;resize:vertical}
.inqf input:focus,.inqf textarea:focus{outline:0;border-color:var(--ink)}
.askform input:focus,.askform textarea:focus{outline:0;border-color:var(--ink)}
.askform .btn{width:100%;margin-top:14px}
.backlink{display:block;width:100%;background:0;border:0;cursor:pointer;margin-top:10px;
  font:500 13px/1 "IBM Plex Sans",sans-serif;color:var(--muted);text-decoration:underline;
  text-underline-offset:3px}
.sent{padding:22px 16px;font-size:14.5px;line-height:1.55}
.sent b{display:block;margin-bottom:6px}
.chatpanel .foot{padding:12px 18px 16px;font-size:11.5px;color:var(--muted);
  border-top:1px solid var(--line);line-height:1.5}
@media(max-width:820px){.chatfab{bottom:92px;width:54px;height:54px}
  .chatpanel{bottom:158px;right:14px;left:14px;width:auto;max-height:calc(100svh - 158px - 108px)}}
/* "Text us" opens the Mac Messages app on a desktop; only offer it on phones */
@media(hover:hover) and (pointer:fine){.chatpanel .opts a.smsopt{display:none}}
/* ── live chat: only used when /api/chat says it is switched on ── */
.chatpanel .t-chat,.chatpanel .s-chat{display:none}
.chatpanel.talking .t-chat,.chatpanel.talking .s-chat{display:block}
.chatpanel.talking .t-ask,.chatpanel.talking .t-main,.chatpanel.talking .s-hours{display:none}
.chatpanel.talking{width:380px;height:min(640px,calc(100svh - 96px - 110px))}
.convo{display:flex;flex-direction:column;flex:1;min-height:0}
.convo[hidden]{display:none}
.cmsgs{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:16px 14px 10px;
  display:flex;flex-direction:column;gap:10px}
.cb{max-width:86%;padding:10px 13px;font:400 14.5px/1.5 "IBM Plex Sans",sans-serif;white-space:pre-wrap;
  overflow-wrap:anywhere;border-radius:14px}
.cb.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.cb.them{align-self:flex-start;background:var(--card);color:var(--ink);border-bottom-left-radius:4px}
.cb.typing{display:flex;gap:4px;padding:14px 15px}
.cb.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:cdot 1.2s infinite}
.cb.typing i:nth-child(2){animation-delay:.2s}.cb.typing i:nth-child(3){animation-delay:.4s}
@keyframes cdot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.ccars{display:flex;flex-direction:column;gap:8px;align-self:stretch}
.ccar{display:grid;grid-template-columns:104px 1fr;gap:12px;border:1px solid var(--line);background:#fff;padding:8px;
  align-items:center}
.ccar .cimg{display:block;width:104px;height:78px;background:var(--card);overflow:hidden}
.ccar img{width:100%;height:100%;object-fit:cover;display:block}
.ccar b{display:block;font:600 13.5px/1.3 "IBM Plex Sans",sans-serif;color:var(--ink)}
.ccar div>span{display:block;font-size:12.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
.ccar .cbtns{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px}
.ccar .cbtns a,.ccar .cbtns button{font:600 12.5px/1.2 "IBM Plex Sans",sans-serif;color:var(--red);background:0;border:0;
  padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.cchips{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex:none}
.cchips[hidden]{display:none}
.cchips button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 12px;cursor:pointer;
  font:500 12.5px/1.2 "IBM Plex Sans",sans-serif;color:var(--ink)}
.cchips button:hover{border-color:var(--ink)}
.cbar{display:flex;gap:8px;padding:10px 12px 12px;border-top:1px solid var(--line);align-items:flex-end;flex:none}
.cbar textarea{flex:1;resize:none;border:1px solid var(--line);border-radius:2px;padding:10px 12px;min-height:44px;
  max-height:120px;font:400 14.5px/1.45 "IBM Plex Sans",sans-serif;color:var(--ink);background:#fff}
.cbar textarea:focus{outline:0;border-color:var(--ink)}
.cbar button{flex:none;width:44px;height:44px;border:0;background:var(--red);cursor:pointer;display:grid;place-items:center}
.cbar button:disabled{opacity:.4;cursor:default}
.cbar svg{width:18px;height:18px;fill:#fff}
.chand{align-self:stretch;flex:none;overflow:visible;min-height:auto;border:1px solid var(--line);background:#fff;padding:14px}
.chand .chandh{margin:0 0 12px;font:500 14px/1.45 "IBM Plex Sans",sans-serif;color:var(--ink);text-transform:none;letter-spacing:0}
.cmsgs .sent{align-self:stretch;border:1px solid var(--line);padding:14px}
@media(max-width:820px){.chatpanel.talking{width:auto;height:calc(100svh - 158px - 108px)}
  .cbar textarea{font-size:16px}}


/* ── warranty: editorial, generous, no invented specifics ── */
/* was Instrument Serif — that is a display face, and at six lines of body copy it
   read thin and cheap. Sans, same family as the rest of the page. */
.wlede{font-family:"IBM Plex Sans",sans-serif;font-size:clamp(20px,1.8vw,25px);
  font-weight:400;line-height:1.5;letter-spacing:-.012em;color:var(--ink);
  max-width:30ch;margin:0}
.wbody{font-size:18px;line-height:1.68;color:#3b3733;max-width:60ch}
.wsplit{display:grid;grid-template-columns:1fr 1.25fr;gap:70px;align-items:start;padding-top:8px}
.scale{margin:0;padding:0;list-style:none;counter-reset:s;border-top:1px solid var(--line)}
.scale li{border-bottom:1px solid var(--line);padding:34px 0;display:grid;
  grid-template-columns:72px minmax(200px,1fr) 1.5fr;gap:30px;align-items:baseline}
.scale .n{font-family:"Newsreader",Georgia,serif;font-weight:500;font-size:34px;line-height:1;
  color:var(--red);letter-spacing:-.02em}
.scale h3{font:600 20px/1.3 "IBM Plex Sans",sans-serif;margin:0}
.scale p{font-size:16px;line-height:1.66;color:var(--muted);margin:0;max-width:60ch}
.adamcard{display:grid;grid-template-columns:260px 1fr auto;gap:40px;align-items:center;
  border:1px solid var(--line);padding:34px;background:#fff;margin-top:60px}
.adamcard img{width:260px;height:210px;object-fit:cover;object-position:center 22%}
.adamcard .acts{display:flex;flex-direction:column;gap:10px;min-width:212px}
.adamcard .acts .btn{justify-content:center}
.adamcard h3{font:600 21px/1.2 "IBM Plex Sans",sans-serif;margin:0 0 6px}
.adamcard .r{font:500 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.16em;
  text-transform:uppercase;color:var(--red);margin:0 0 14px}
.adamcard p{font-size:16px;line-height:1.62;color:#4a4540;margin:0;max-width:52ch}
.wnote{border-left:2px solid var(--line);padding:4px 0 4px 20px;margin-top:52px;
  font-size:14.5px;line-height:1.62;color:var(--muted);max-width:66ch}
@media(max-width:1000px){.scale li{grid-template-columns:60px 1fr;gap:22px}
  .scale li>div{grid-column:2}}
@media(max-width:900px){.wsplit{grid-template-columns:1fr;gap:36px}
  .adamcard{grid-template-columns:1fr;gap:24px}.adamcard img{width:100%;height:240px}
  .adamcard .acts{min-width:0}}


/* ── trade-in ── */
.tgrid{display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start;padding-top:6px}
.tform{display:grid;gap:16px}
.tform .pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.tform label{display:block;font:600 11.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
.consent{border-top:1px solid var(--line);margin-top:10px;padding-top:16px}
.consent label{display:flex;gap:12px;align-items:flex-start;text-transform:none;
  letter-spacing:0;font:400 13px/1.55 "IBM Plex Sans",sans-serif;color:var(--muted);margin:0}
.consent input[type=checkbox]{appearance:none;width:18px;height:18px;flex:none;margin-top:1px;
  border:1.5px solid #bdb6ad;border-radius:2px;background:#fff;cursor:pointer}
.consent input[type=checkbox]:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6'><path d='M3 8.4l3.2 3.2L13 4.8'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.consent b{color:var(--ink);font-weight:600}
.ctarow .cta-alt{background:transparent;color:var(--ink);border:1px solid var(--line)}
.bookbox{position:relative;max-width:720px;width:min(720px,calc(100vw - 28px));padding:0;
  max-height:calc(100vh - 60px);overflow:auto}
.bookhead{padding:26px 26px 18px;border-bottom:1px solid var(--line)}
.bookh2{font:500 27px/1.15 "Newsreader",Georgia,serif;margin:8px 0 6px}
.booksub{margin:0;color:var(--muted);font-size:14.5px}
.booksteps{display:flex;gap:18px;padding:0 26px;border-bottom:1px solid var(--line);background:var(--card)}
.booksteps span{font:600 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);padding:13px 0;border-bottom:2px solid transparent}
.booksteps span.on{color:var(--ink);border-bottom-color:var(--red)}
.bookbody{padding:22px 26px 26px}
.bookcols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.blbl{font:600 11px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px}
.bcal{border:1px solid var(--line);border-radius:2px;padding:14px}
.bcalhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.bcalhead b{font:600 14px/1 "IBM Plex Sans",sans-serif}
.barrow{border:1px solid var(--line);background:var(--paper);width:26px;height:26px;border-radius:2px;
  cursor:pointer;color:var(--ink);font-size:15px;line-height:1}
.barrow[disabled]{opacity:.35;cursor:default}
.bdow,.bgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.bdow span{font:600 10.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;color:var(--muted);
  text-align:center;padding-bottom:7px}
.bgrid button{aspect-ratio:1;border:1px solid transparent;background:transparent;border-radius:2px;
  font:500 13.5px/1 "IBM Plex Sans",sans-serif;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.bgrid button:hover:not(:disabled):not([aria-pressed="true"]){border-color:var(--line);background:var(--card)}
.bgrid button[disabled]{color:#c8c2b9;cursor:default}
.bgrid button[aria-pressed="true"]{background:var(--red);color:#fff;border-color:var(--red);font-weight:600}
.bslots{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bslots .bslot{border:1px solid var(--line);background:var(--paper);border-radius:2px;padding:11px 8px;
  font:500 14px/1 "IBM Plex Sans",sans-serif;color:var(--ink);cursor:pointer;font-variant-numeric:tabular-nums}
.bslots .bslot:hover{border-color:var(--ink)}
.bslots .bslot[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.bempty{grid-column:1/-1;border:1px dashed var(--line);border-radius:2px;padding:26px 18px;
  text-align:center;color:var(--muted);font-size:13.5px}
.bnote{margin:12px 0 0;font-size:12.5px;color:var(--muted)}
.bnote a{color:var(--red)}
.bookactions{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:22px;flex-wrap:wrap}
.booksum{font-size:13.5px;color:var(--muted)}
.booksum b{color:var(--ink)}
.btn-outink{background:transparent;color:var(--muted);border:1px solid var(--line)}
#bookTo2[disabled]{opacity:.45;cursor:not-allowed}
.bookdone{display:grid;gap:14px}
.btick{width:42px;height:42px;border-radius:50%;background:var(--red);color:#fff;display:grid;
  place-items:center;font-size:20px}
.bdoneh{font:500 28px/1.15 "Newsreader",Georgia,serif;margin:0}
.bdcard{border:1px solid var(--line);border-left:2px solid var(--red);border-radius:2px;padding:16px 18px;
  display:grid;gap:8px;font-size:14px}
.bdcard .bdrow{display:flex;justify-content:space-between;gap:16px}
.bdcard .bdrow span:first-child{color:var(--muted)}
.bdcard .bdrow span:last-child{font-weight:500;text-align:right}
@media(max-width:620px){.bookcols{grid-template-columns:1fr;gap:20px}.bookhead,.bookbody{padding-left:18px;padding-right:18px}
  .booksteps{padding-left:18px;padding-right:18px;gap:12px}.bookh2{font-size:23px}}
.consent label+label{margin-top:12px}
.consent .consentnote{font:400 12.5px/1.55 "IBM Plex Sans",sans-serif;color:var(--muted);margin:12px 0 0 30px}
.consent .consentnote a{color:var(--red)}
.hpot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;opacity:0!important}
.leadfail{color:var(--red);font-size:14px;margin:10px 0 0}
.tform input,.tform select,.tform textarea{width:100%;padding:14px;border:1px solid var(--line);
  border-radius:2px;background:#fff;font:400 15.5px/1.45 "IBM Plex Sans",sans-serif;color:var(--ink)}
.tform textarea{min-height:96px;resize:vertical}
.tform input:focus,.tform select:focus,.tform textarea:focus{outline:0;border-color:var(--ink)}
.tform .hint{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;color:var(--muted);margin:6px 0 0;line-height:1.5}
.tform .btn{margin-top:6px}
.tside{border:1px solid var(--line);padding:32px;background:#fff}
.tside h3{font:600 18px/1.3 "IBM Plex Sans",sans-serif;margin:0 0 18px}
.steps{list-style:none;margin:0 0 30px;padding:0;counter-reset:t}
.steps li{position:relative;padding:0 0 24px 44px;counter-increment:t}
.steps li::before{content:counter(t);position:absolute;left:0;top:-2px;width:28px;height:28px;
  border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;
  font:600 13px/1 "IBM Plex Sans",sans-serif}
.steps li::after{content:"";position:absolute;left:13.5px;top:30px;bottom:6px;width:1px;
  background:var(--line)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps b{display:block;font:600 15.5px/1.35 "IBM Plex Sans",sans-serif;margin-bottom:4px}
.steps span{font-size:14.5px;line-height:1.6;color:var(--muted)}
.bring{border-top:1px solid var(--line);padding-top:24px}
.bring li{font-size:14.5px;line-height:1.75;color:#4a4540;list-style:none}
.bring li::before{content:"—";color:var(--red);margin-right:10px}
@media(max-width:960px){.tgrid{grid-template-columns:1fr;gap:44px}.tform .pair{grid-template-columns:1fr}}


/* ── how it goes: three real cards — two faces and the lot — each with an action ── */
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.howcard{display:block}
.howfig{aspect-ratio:4/3;overflow:hidden;background:#eae5de;margin-bottom:22px}
.howfig img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  transition:transform .9s var(--ease)}
.howcard:hover .howfig img{transform:scale(1.045)}
.howcard h3{font:600 21px/1.25 "IBM Plex Sans",sans-serif;letter-spacing:-.01em;margin:0 0 12px}
.howcard p{font-size:15.5px;line-height:1.66;color:var(--muted);margin:0 0 18px;max-width:44ch}
.howcta{display:inline-flex;align-items:center;gap:8px;font:600 13px/1 "IBM Plex Sans",sans-serif;
  letter-spacing:.09em;text-transform:uppercase;color:var(--red);
  border-bottom:1.5px solid var(--red);padding-bottom:5px;transition:gap .25s var(--ease)}
.howcta::after{content:"\2192";font-size:15px;line-height:1}
.howcard:hover .howcta{gap:13px}
@media(max-width:960px){.how{grid-template-columns:1fr;gap:44px}
  .howfig{aspect-ratio:16/9}.howcard p{max-width:none}}


/* ── content bands: image + copy + action, alternating. AutoNation's rhythm, our material. ── */
.band2{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;background:var(--card);
  border:1px solid var(--line);overflow:hidden;margin-top:26px}
.band2.flip .b2fig{order:2}
.b2fig{position:relative;min-height:400px;background:#eae5de;overflow:hidden}
.b2fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.b2txt{padding:56px 54px;display:flex;flex-direction:column;justify-content:center;
  align-items:stretch;background:#fff;min-width:0}
.b2txt h2{font-size:clamp(26px,2.7vw,36px);margin:0 0 8px}
.b2txt .rule{width:52px;height:2px;background:var(--red);margin:16px 0 22px}
.b2txt p{font-size:16.5px;line-height:1.68;color:#4a4540;margin:0 0 26px;max-width:46ch}
.b2txt .btn{align-self:flex-start}
.trustchip{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);
  background:#fff;padding:11px 16px;border-radius:999px;font:500 13.5px/1 "IBM Plex Sans",sans-serif;
  margin-bottom:22px;align-self:flex-start}
.trustchip svg{width:16px;height:16px;stroke:#1c6b34;fill:none;stroke-width:2.2}
.numsteps{list-style:none;margin:0 0 26px;padding:0;counter-reset:q;width:100%;
  align-self:stretch;min-width:0}
.numsteps li{counter-increment:q;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;
  padding:0 0 22px;align-items:start;width:100%;min-width:0}
.numsteps li>div{min-width:0}
.numsteps li::before{content:counter(q) ".";font-family:"Newsreader",Georgia,serif;font-weight:500;
  font-size:25px;line-height:1;color:var(--red)}
.numsteps b{display:block;font:600 16.5px/1.35 "IBM Plex Sans",sans-serif;margin-bottom:5px;min-width:0}
.numsteps span{display:block;font-size:15.5px;line-height:1.62;color:var(--muted);
  min-width:0;max-width:44ch}
.bands3{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;margin-top:8px}
.bandcard{display:block;text-align:center}
.bandcard .f{aspect-ratio:16/11;background:var(--card);overflow:hidden;margin-bottom:18px;
  display:grid;place-items:center}
.bandcard .f img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.bandcard:hover .f img{transform:scale(1.05)}
.bandcard b{display:block;font:600 17px/1.3 "IBM Plex Sans",sans-serif;margin-bottom:6px}
.bandcard span{font-size:14px;color:var(--muted)}
@media(max-width:960px){.band2,.band2.flip{grid-template-columns:1fr}
  .band2.flip .b2fig{order:0}.b2fig{min-height:260px}.b2txt{padding:38px 26px}
  .bands3{grid-template-columns:1fr;gap:26px}}


/* ── contact ── */
.ctgrid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.mapwrap{aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--card)}
.mapwrap iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(.15)}
.addr{border:1px solid var(--line);border-top:0;padding:30px 32px;background:#fff}
.addr h2{font-size:29px;margin:0}
.addr .city{font-size:17px;color:var(--muted);margin:6px 0 0}
.addr .near{font-size:14.5px;color:var(--muted);margin:14px 0 0}
.addrow{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0 26px}
.mailrow{font-size:15.5px;color:var(--muted);margin:-8px 0 22px}.mailrow a{font-weight:600}
.direct{border-top:1px solid var(--line);padding:16px 0 18px;display:grid;grid-template-columns:1fr 1fr;gap:6px 20px}
.direct .dh{grid-column:1/-1;font:600 12px/1.4 'IBM Plex Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 4px}
.direct p{margin:0;font-size:15px;line-height:1.55}.direct span{color:var(--muted)}
.direct a{overflow-wrap:anywhere}
@media(max-width:420px){.direct{grid-template-columns:1fr}}
.hrs{border-top:1px solid var(--line);padding-top:8px}
/* Day on the left, hours flush right in a tabular column so the times line up.
   Today's row is the only one in full ink. */
.hrow{display:flex;align-items:baseline;gap:20px;padding:10px 0;font-size:15px;
  border-bottom:1px solid rgba(17,17,17,.06)}
.hrow:last-child{border-bottom:0}
.hrow span{color:var(--muted)}
.hrow b{margin-left:auto;font-weight:400;color:var(--muted);white-space:nowrap;
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.hrow.now span,.hrow.now b{color:var(--ink);font-weight:600}
@media(max-width:960px){.ctgrid{grid-template-columns:1fr;gap:44px}}


/* ── stepped sell/trade flow ── */
.wiz{max-width:720px}
/* recap of earlier answers, so nothing is asked twice and they can go back */
.recap{display:none;align-items:center;gap:14px;flex-wrap:wrap;background:var(--card);
  border-left:2px solid var(--ink);padding:15px 18px;margin:0 0 30px}
.recap.on{display:flex}
.recap b{font:600 15.5px/1.3 "IBM Plex Sans",sans-serif}
.recap span{font-size:14px;color:var(--muted)}
.recap button{margin-left:auto;background:0;border:0;padding:0;cursor:pointer;color:var(--red);
  font:500 13.5px/1 "IBM Plex Sans",sans-serif;text-decoration:underline;text-underline-offset:4px}
/* the wizard is its own form, so it needs the field styling too */
#sellWiz label{display:block;font:600 11.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink);margin-bottom:8px}
#sellWiz input:not([type=checkbox]):not([type=radio]),#sellWiz select,#sellWiz textarea{
  width:100%;padding:14px;border:1px solid var(--line);border-radius:2px;background:#fff;
  font:400 15.5px/1.45 "IBM Plex Sans",sans-serif;color:var(--ink)}
#sellWiz textarea{min-height:96px;resize:vertical}
#sellWiz input:focus,#sellWiz select:focus,#sellWiz textarea:focus{outline:0;border-color:var(--ink)}
#sellWiz .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#sellWiz .hint{font-family:"IBM Plex Sans",sans-serif;font-size:12.5px;color:var(--muted);margin:7px 0 0;line-height:1.5}
#sellWiz .consent label{display:flex;text-transform:none;letter-spacing:0;
  font:400 13px/1.55 "IBM Plex Sans",sans-serif;color:var(--muted);margin:0}
#sellWiz .manual>div+div{margin-top:16px}
@media(max-width:600px){#sellWiz .pair{grid-template-columns:1fr}}
.wizbar{display:flex;gap:8px;margin:0 0 34px}
.wizbar i{flex:1;height:3px;background:var(--line);border-radius:2px;transition:background .35s var(--ease)}
.wizbar i.on{background:var(--ink)}
.wizstep{display:none}
.wizstep.on{display:block}
.wizstep h2{font:600 26px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:-.015em;margin:0 0 6px}
.wizstep .sub{color:var(--muted);font-size:15.5px;margin:0 0 28px}
.vinrow2{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
#sellWiz input#vinIn{flex:1 1 260px;width:auto;font:500 17px/1 "IBM Plex Mono",ui-monospace,monospace;
  letter-spacing:.08em;text-transform:uppercase;padding:16px;border:1px solid var(--line);
  border-radius:2px;background:#fff;min-width:0}
.vinrow2 input:focus{outline:0;border-color:var(--ink)}
.vinrow2 input.bad{border-color:var(--red)}
.vinhelp{font-size:13px;color:var(--muted);margin:10px 0 0;line-height:1.55}
.decoded{border:1px solid var(--line);background:var(--card);padding:20px 22px;margin-top:18px;
  display:none}
.decoded.on{display:block}
.decoded b{display:block;font:600 19px/1.25 "IBM Plex Sans",sans-serif;margin-bottom:6px}
.decoded span{font-size:14.5px;color:var(--muted)}
.decoded .warn{display:block;margin-top:10px;font-size:13px;color:#8a5a12}
.manual{display:none;margin-top:22px;padding-top:22px;border-top:1px solid var(--line)}
/* one rhythm between questions on the condition step — they were 22px and read as one block */
.wizstep .wq{margin-top:40px}
.wizstep .wq>label{display:block;margin-bottom:10px}
.manual.on{display:block}
.linkbtn{background:0;border:0;padding:0;cursor:pointer;color:var(--red);
  font:500 14.5px/1 "IBM Plex Sans",sans-serif;text-decoration:underline;text-underline-offset:4px}
.chips2{display:flex;gap:9px;flex-wrap:wrap}
.chips2 label{cursor:pointer}
.chips2 input{position:absolute;opacity:0}
.chips2 span{display:inline-block;padding:12px 17px;border:1px solid var(--line);border-radius:2px;
  font:500 14.5px/1 "IBM Plex Sans",sans-serif;transition:all .18s var(--ease)}
.chips2 input:checked + span{background:var(--ink);color:#fff;border-color:var(--ink)}
/* validation: say what is missing where it is missing, in the site's own voice,
   never a browser bubble */
.werr{display:none;color:var(--red);font:500 14px/1.5 "IBM Plex Sans",sans-serif;
  margin:22px 0 0;padding:12px 0 12px 16px;border-left:2px solid var(--red)}
.werr.on{display:block}
.wizstep input.miss,.wizstep textarea.miss,.wizstep .cbx.miss input{border-color:var(--red)}
.wizstep .wq.miss .chips2 span{border-color:var(--red)}
.wiznav{display:flex;gap:10px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.wiznav .btn{flex:0 0 auto}
.wiznav .back{margin-right:auto}
.drop2{border:1.5px dashed var(--line);border-radius:3px;padding:34px 20px;text-align:center;
  cursor:pointer;transition:border-color .2s var(--ease),background .2s var(--ease)}
.drop2:hover,.drop2.over{border-color:var(--ink);background:var(--card)}
.drop2 b{display:block;font:600 15.5px/1 "IBM Plex Sans",sans-serif;margin-bottom:7px}
.drop2 span{font-size:13.5px;color:var(--muted)}
.thumbs2{display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));gap:8px;margin-top:14px}
.thumbs2 figure{position:relative;margin:0;aspect-ratio:4/3;background:var(--card);overflow:hidden}
.thumbs2 img{width:100%;height:100%;object-fit:cover}
.thumbs2 button{position:absolute;top:4px;right:4px;width:22px;height:22px;border:0;border-radius:50%;
  background:rgba(12,12,13,.8);color:#fff;cursor:pointer;font-size:13px;line-height:1}
@media(max-width:600px){.wiznav{flex-wrap:wrap}.wiznav .btn{flex:1 1 100%}}


/* ── page hero: full-bleed photo, headline over it ── */
.phero{position:relative;min-height:560px;display:flex;align-items:center;overflow:hidden;
  background:#1a1a1c}
.phero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 58%}
.phero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(12,12,13,.86) 0%,rgba(12,12,13,.62) 42%,rgba(12,12,13,.12) 78%)}
.phero .wrap{position:relative;z-index:2;width:100%}
.phero h1{color:#fff;max-width:17ch;font:600 clamp(30px,3.6vw,50px)/1.14 "IBM Plex Sans",sans-serif;
  letter-spacing:-.018em}
.phero p{color:rgba(255,255,255,.86);font-size:17.5px;line-height:1.6;max-width:46ch;margin:18px 0 0}
.pchip{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.28);color:#fff;padding:11px 17px;border-radius:999px;
  font:500 13.5px/1 "IBM Plex Sans",sans-serif;margin:24px 0 0;backdrop-filter:blur(4px)}
.pchip svg{width:15px;height:15px;stroke:#7ee2a0;fill:none;stroke-width:2.4}
.phero .cta{margin-top:26px;display:flex;gap:11px;flex-wrap:wrap}
@media(max-width:760px){.phero{min-height:440px}
  .phero::after{background:linear-gradient(180deg,rgba(12,12,13,.5),rgba(12,12,13,.9))}}


/* ── about: dark statement + real review + facts strip (approved 25 Sep) ── */
.abtns{display:flex;gap:11px;flex-wrap:wrap;margin-top:30px}
.ax-b{background:var(--ink);color:#fff;padding:170px 0 96px}
.ax-b .lbl{color:rgba(255,255,255,.6)}
.ax-b h1{color:#fff;font:500 clamp(46px,6vw,92px)/.98 "Newsreader",Georgia,serif;letter-spacing:-.012em;margin:18px 0 0}
.ax-b-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.ax-b p{color:rgba(255,255,255,.82);font-size:18.5px;line-height:1.65;margin:26px 0 0;max-width:54ch}
.ax-b figure{margin:0;border-top:2px solid var(--red);padding-top:30px}
.ax-b blockquote{margin:0;font:400 30px/1.3 "Newsreader",Georgia,serif;color:#fff}
.ax-b figcaption{margin-top:22px;color:rgba(255,255,255,.6);font-size:14px}
.ax-b figcaption b{color:#fff;font-weight:500}
.afacts{padding:0;border-bottom:1px solid var(--line);background:#fff}
.afgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.afgrid>div{padding:34px 26px 32px;border-left:1px solid var(--line)}
.afgrid>div:first-child{border-left:0;padding-left:0}
.afgrid b{display:block;font:500 40px/1 "Newsreader",Georgia,serif;color:var(--ink);margin-bottom:10px}
.afgrid span{font:400 14.5px/1.45 "IBM Plex Sans",sans-serif;color:var(--muted)}
@media(max-width:760px){.ax-b{padding:130px 0 64px}.ax-b-grid{grid-template-columns:1fr;gap:40px}
 .ax-b blockquote{font-size:25px}
 .afgrid{grid-template-columns:1fr 1fr}.afgrid>div{padding:24px 14px;border-left:0;border-top:1px solid var(--line)}
 .afgrid>div:nth-child(odd){padding-left:0}.afgrid b{font-size:32px}}
/* ── split: media left, card right (their sell-page hero) ── */
.split{background:var(--card);border-bottom:1px solid var(--line);padding:52px 0}
.splitin{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.splitfig{aspect-ratio:4/3;overflow:hidden;border-radius:3px;background:#eae5de}
.splitfig img{width:100%;height:100%;object-fit:cover}
.splitcard{background:#fff;border-radius:3px;padding:42px 44px;
  box-shadow:0 1px 3px rgba(12,12,13,.05),0 18px 44px -26px rgba(12,12,13,.22)}
.splitcard .kicker{font:600 15px/1 "IBM Plex Sans",sans-serif;color:var(--muted);margin:0 0 10px}
.splitcard h1{font:600 clamp(28px,3.1vw,42px)/1.12 "IBM Plex Sans",sans-serif;letter-spacing:-.02em;
  margin:0 0 20px;max-width:15ch}
.ticks{list-style:none;margin:0 0 26px;padding:0}
.ticks li{display:flex;gap:11px;align-items:flex-start;padding:7px 0;font-size:15.5px;color:#3b3733}
.ticks svg{width:17px;height:17px;flex:none;margin-top:2px;stroke:#1c8a44;fill:none;stroke-width:2.6}
@media(max-width:1000px){.splitin{grid-template-columns:1fr;gap:30px}.splitcard{padding:32px 26px}}

/* ── three centred columns ── */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:46px;text-align:center}
.three .ic{width:76px;height:76px;border-radius:50%;background:var(--card);display:grid;
  place-items:center;margin:0 auto 22px}
.three .ic svg{width:32px;height:32px;stroke:var(--ink);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.three h3{font:600 20px/1.3 "IBM Plex Sans",sans-serif;margin:0 0 10px}
.three p{font-size:15.5px;line-height:1.65;color:var(--muted);margin:0 auto;max-width:34ch}
@media(max-width:860px){.three{grid-template-columns:1fr;gap:38px}}

/* ── FAQ, two columns of accordions ── */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 56px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 0;display:flex;gap:20px;
  align-items:flex-start;justify-content:space-between;font:500 16.5px/1.45 "IBM Plex Sans",sans-serif}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--muted);flex:none;
  transition:transform .25s var(--ease)}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 40px 24px 0;font-size:15.5px;line-height:1.68;color:var(--muted);margin:0}
@media(max-width:860px){.faq{grid-template-columns:1fr}}

/* ── dark closing band ── */
.closer{background:var(--ink);color:#fff;padding:76px 0;text-align:center}
.closer h2{color:#fff;font:600 clamp(28px,3.2vw,42px)/1.15 "IBM Plex Sans",sans-serif;
  letter-spacing:-.02em;margin:0 0 14px}
.closer p{color:rgba(255,255,255,.74);font-size:17px;max-width:46ch;margin:0 auto 30px}
.closer .btn{background:#fff;color:var(--ink)}
.closer .btn:hover{background:var(--red);color:#fff}


/* ── combobox: a styled, capped, filterable list. Native select and datalist elements
      render as full-height OS menus that swallow the screen and cannot be styled. ── */
.cbx{position:relative}
.cbx>input{width:100%}
.cbx>input[readonly]{cursor:pointer;background:#fff}
.cbx .caret{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;
  width:11px;height:11px;border-right:1.6px solid #8d867f;border-bottom:1.6px solid #8d867f;
  margin-top:-4px;rotate:45deg;transition:rotate .2s var(--ease),margin-top .2s var(--ease)}
.cbx.open .caret{rotate:225deg;margin-top:1px}
.cbxlist{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;background:#fff;
  border:1px solid var(--line);border-radius:3px;box-shadow:0 18px 40px -18px rgba(12,12,13,.32);
  max-height:296px;overflow-y:auto;overscroll-behavior:contain;padding:6px;display:none}
.cbx.open .cbxlist{display:block}
.cbxlist div{padding:9px 7px;border-radius:2px;cursor:pointer;
  font:400 15px/1.25 "IBM Plex Sans",sans-serif;color:#33302c}
.cbxlist div:hover,.cbxlist div.hi{background:var(--card);color:var(--ink)}
.cbxlist .none{color:var(--muted);cursor:default;font-size:14.5px}
.cbxlist .none:hover{background:0}


/* This section follows the category-carousel convention: a bold sans heading with a
   single plain line under it, no eyebrow label. The page's default h2 is the display
   serif, which reads wrong at this size next to the tiles. */
.shophead h2{font:700 clamp(30px,3.3vw,42px)/1.12 "IBM Plex Sans",sans-serif;
  letter-spacing:-.028em;color:var(--ink);margin:0}
.shophead p{font:400 17px/1.5 "IBM Plex Sans",sans-serif;color:var(--muted);
  margin:14px 0 0;max-width:62ch}
.shopheadrow{align-items:flex-start}
@media(max-width:700px){.shophead p{font-size:15.5px}}
/* price bands — photo, the number, and a link. Nothing else. */
.pbands{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.pband{display:block;text-decoration:none;border:1px solid var(--line);border-radius:6px;
  overflow:hidden;background:#fff;
  transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.pband:hover{border-color:var(--ink);transform:translateY(-3px);
  box-shadow:0 18px 34px -22px rgba(12,12,13,.4)}
.pbandfig{aspect-ratio:16/10;overflow:hidden;background:var(--card)}
.pbandfig img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pband:hover .pbandfig img{transform:scale(1.04)}
.pbandtext{padding:24px 24px 26px}
.pbandtext h3{font:600 21px/1.2 "IBM Plex Sans",sans-serif;color:var(--ink);
  margin:0 0 14px;letter-spacing:-.02em}
.pbandlink{font:600 12.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.09em;
  text-transform:uppercase;color:var(--red)}
@media(max-width:900px){.pbands{grid-template-columns:1fr;gap:22px}}
.lotsec{padding:84px 0 96px;border-top:1px solid var(--line)}
.lotmore{display:flex;justify-content:center;margin-top:48px}
@media(max-width:700px){.lotsec{padding:60px 0 70px}}
/* ── /apply ── */
/* .pchip was built for the dark hero — white text on a translucent white ground.
   On a white page it disappears, so the light-page variant is spelled out here. */
.astep .pchip{background:var(--card);border:1px solid var(--line);color:#3b3733}
.astep .pchip svg{stroke:#2e9e5b}
/* every other page heading on the site is bold sans; the global h1 is the serif */
.astep h1{font:600 clamp(30px,3.4vw,44px)/1.14 "IBM Plex Sans",sans-serif;
  letter-spacing:-.022em;color:var(--ink)}
.astep .sub{color:var(--muted);font-size:17px;line-height:1.6}
.alist{list-style:none;margin:26px 0 0;padding:0;max-width:54ch}
.alist li{position:relative;padding:0 0 0 26px;margin-bottom:14px;font-size:16px;
  line-height:1.6;color:#453f3a}
.alist li:before{content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--red)}
.alist b{color:var(--ink)}
.abar{display:flex;gap:8px;max-width:280px}
.abar span{flex:1;height:2px;background:var(--line);border-radius:2px}
.abar span.on,.abar span.done{background:var(--ink)}
.astep{display:none}
.astep.on{display:block}
.arecap{border-left:2px solid var(--red);padding:12px 0 12px 18px;margin-top:22px;
  font-size:15px;color:#453f3a}
.arecap b{color:var(--ink)}
.aframe{margin-top:28px;border:1px solid var(--line);border-radius:4px;overflow:hidden;
  background:var(--card)}
.aframe iframe{display:block;width:100%;height:1500px;border:0}
@media(max-width:700px){.aframe iframe{height:1900px}}
.err{color:var(--red);font-size:14px;margin:14px 0 0}

/* ── motion: everything arrives, nothing bounces ── */
/* content is visible immediately — the old scroll-in reveal meant cards and sections
   faded in as you scrolled, which read as the page lagging behind the scroll. */
.rise,.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}
  .hero video{display:none}}

@media(max-width:1000px){.duo{grid-template-columns:1fr}.duo .txt{padding:56px 30px}
  .duo .fig{min-height:340px}.fg{grid-template-columns:1fr;gap:44px}}
@media(max-width:820px){
  /* the phone menu: a white sheet under the header, one full-width row per page, big enough to hit */
  .hb nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);
    flex-direction:column;align-items:stretch;gap:0;padding:4px 24px 18px;
    border-top:1px solid var(--line);box-shadow:0 22px 44px rgba(12,12,13,.16);
    max-height:calc(100svh - 84px);overflow-y:auto}
  .hb nav.open{display:flex}
  .hb nav .hasmega,.hb nav .hasdrop{display:block}
  .hb nav a{display:block;padding:18px 2px;font-size:14px;color:var(--ink);border-bottom:1px solid var(--line)}
  .hb nav > a:last-child{border-bottom:0}
  .hb nav a::after{display:none}.hb nav a.on{color:var(--red)}
  .hb nav a.mnav{display:block}
  .burger{display:block}.hb .tel{display:none}
  section{padding:76px 0}.hero{padding-bottom:48px}
  .vgrid{gap:40px 22px}.nums{gap:0 44px}
}

.revrail.feed .revhead{gap:8px 18px}
.revrail.feed .revhead .all{font:600 13.5px/1.2 "IBM Plex Sans",sans-serif;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px}
.revrail.feed .rev p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:8;line-clamp:8;overflow:hidden}

/* ── inventory: white page, left filter rail, results right. ── */
.ihead{padding:52px 0 30px;border-bottom:1px solid var(--line)}
.ihead h1{font-size:clamp(34px,4.4vw,58px)}
.ihead .sum{color:var(--muted);font-size:17px;margin-top:14px;max-width:58ch}
/* Page headlines say what the page is, in the words people search: a car page's reads
   "2019 RAM 1500 Laramie" (year and make as a small line above the model, so the look is
   unchanged), and the inventory has one at all (28 Sep: it had none). */
.vh1{font:600 29px/1.18 'IBM Plex Sans',sans-serif;letter-spacing:-.01em;margin:9px 0 0}
.vh1 .vyr{display:block;font:500 12.5px/1.3 'IBM Plex Sans',sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 7px}
.invhead{padding:40px 0 0}                 /* no side padding: lines up with the grid below */
@media(max-width:1000px){.invhead{padding:34px 28px 0}}
.invhead h1{font-size:clamp(28px,2.6vw,38px)}
.invhead h1 span{color:var(--muted)}
.ilay{display:grid;grid-template-columns:262px 1fr;gap:44px;padding:34px 0 90px;align-items:start}
/* 8 Oct: .ilay's padding (above) wiped out .wrap's side gutter, so on a phone the search box, Filters, photos, prices and
   buttons ran flush to the screen edges, and below 1437 px the headline and the filter rail did too. The list now keeps
   the same 28 px gutter as the headline above it on phones; at 1437 px and wider the page is exactly as before. */
@media(max-width:1000px){.ilay{padding-left:28px;padding-right:28px}}
@media(max-width:380px){.ilay .vgrid{grid-template-columns:minmax(0,1fr)}}   /* one card a row: the 272 px minimum no longer fits */
@media(min-width:1001px) and (max-width:1436px){.invhead,.ilay{padding-left:28px;padding-right:28px}}

.rail{position:sticky;top:100px}
/* 7 Oct: the rail is taller than a laptop screen, so the bottom of it (the "Email me matches" box) could never be
   reached while it stuck. It now scrolls inside itself when it doesn't fit. */
@media(min-width:1001px){.rail{max-height:calc(100vh - 116px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;padding-right:6px}}
.fset{border-bottom:1px solid var(--line);padding:0 0 20px;margin-bottom:20px}
.fset:last-child{border:0}
.fset h5{font:600 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.15em;text-transform:uppercase;
  margin:0 0 14px;color:var(--ink)}
.opt{display:flex;align-items:center;gap:10px;padding:6px 0;cursor:pointer;font-size:15px;
  color:#453f3a;transition:color .2s var(--ease)}
.opt:hover{color:var(--ink)}
.opt input{appearance:none;width:17px;height:17px;border:1.5px solid #bdb6ad;background:#fff;
  flex:none;cursor:pointer;transition:background .18s var(--ease),border-color .18s var(--ease)}
.opt input:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.4'><path d='M3 8.4l3.2 3.2L13 4.8'/></svg>");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.opt .ct{margin-left:auto;font-size:13px;color:var(--muted)}
.clr{font:500 12.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;color:var(--red);
  background:0;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.rtop{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:26px}
.rtop input{flex:1 1 250px;font:400 15.5px/1 "IBM Plex Sans",sans-serif;padding:15px 16px;
  border:1px solid var(--line);background:#fff;min-width:0;transition:border-color .2s var(--ease)}
.rtop input:focus{outline:0;border-color:var(--ink)}
.rtop select{font:400 15px/1 "IBM Plex Sans",sans-serif;padding:15px 14px;border:1px solid var(--line);
  background:#fff;cursor:pointer}
.rcount{font:600 14.5px/1 "IBM Plex Sans",sans-serif;color:var(--ink);white-space:nowrap}
.empty{padding:70px 0;font-size:18px;color:var(--muted)}
.mfilt{display:none}
/* ── collapsible filter groups, AutoNation pattern ── */
.fgrp{border-bottom:1px solid var(--line)}
.fgrp:last-of-type{border-bottom:0}
.fgrp>summary{list-style:none;cursor:pointer;padding:17px 0;display:flex;align-items:center;
  justify-content:space-between;font:600 13.5px/1 "IBM Plex Sans",sans-serif;color:var(--ink)}
.fgrp>summary::-webkit-details-marker{display:none}
.fgrp>summary::after{content:"";width:9px;height:9px;border-right:1.6px solid #8d867f;
  border-bottom:1.6px solid #8d867f;transform:rotate(45deg) translateY(-2px);
  transition:transform .25s var(--ease)}
.fgrp[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fgrp .body{padding:2px 0 20px}
.opt{display:flex;align-items:center;gap:11px;padding:6px 0;cursor:pointer;font-size:14.5px;
  color:#453f3a}
.opt:hover{color:var(--ink)}
.opt input{appearance:none;width:17px;height:17px;border:1.5px solid #bdb6ad;background:#fff;
  flex:none;cursor:pointer;border-radius:2px;transition:background .16s,border-color .16s}
.opt input:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6'><path d='M3 8.4l3.2 3.2L13 4.8'/></svg>");
  background-size:12px;background-repeat:no-repeat;background-position:center}
.opt .ct{margin-left:auto;font-size:12.5px;color:var(--muted)}
/* colour swatches */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 8px;padding-top:6px}
.sw{display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;font-size:12px;
  color:#453f3a;text-align:center}
.sw input{appearance:none;position:absolute;opacity:0}
.sw i{width:32px;height:32px;border-radius:50%;display:block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);
  transition:box-shadow .18s var(--ease)}
.sw input:checked + i{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16),0 0 0 2px #fff,0 0 0 4px var(--ink)}
.sw .ct{color:var(--muted);font-size:11px}
/* range pair */
.range{display:flex;gap:9px;align-items:center;padding-top:4px}
.range input{width:100%;min-width:0;font:400 14px/1 "IBM Plex Sans",sans-serif;padding:11px 10px;
  border:1px solid var(--line);background:#fff;border-radius:2px}
.range input:focus{outline:0;border-color:var(--ink)}
.range span{color:var(--muted)}
/* sort */
.sortwrap{position:relative}
.sortbtn{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);
  padding:14px 16px;cursor:pointer;font:500 14.5px/1 "IBM Plex Sans",sans-serif;border-radius:2px}
.sortbtn:hover{border-color:var(--ink)}
.sortmenu{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--line);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.34);min-width:236px;z-index:40;padding:6px 0;display:none}
.sortmenu.open{display:block}
.sortmenu button{display:block;width:100%;text-align:left;background:0;border:0;cursor:pointer;
  padding:11px 18px;font:400 14.5px/1 "IBM Plex Sans",sans-serif;color:#3a3630}
.sortmenu button:hover{background:var(--card)}
.sortmenu button.on{font-weight:600;color:var(--ink)}
/* saved search */
.alert{background:var(--card);padding:20px;margin-top:22px}
.alert h5{font:600 13.5px/1.4 "IBM Plex Sans",sans-serif;margin:0 0 7px}
.alert p{font-size:13px;color:var(--muted);margin:0 0 13px;line-height:1.5}
.alert input{width:100%;padding:12px;border:1px solid var(--line);background:#fff;
  font:400 14.5px/1 "IBM Plex Sans",sans-serif;border-radius:2px;margin-bottom:9px}
.alert button{width:100%}

.chipwrap{display:flex;flex-wrap:wrap;gap:8px}
.fchip{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;border:0;
  border-radius:999px;padding:9px 14px;font:500 13px/1 "IBM Plex Sans",sans-serif;cursor:pointer;
  transition:background .2s var(--ease)}
.fchip:hover{background:var(--red)}
.fchip span{font-size:15px;line-height:1;opacity:.75}

/* card gets a light plate + a real CTA, AutoNation-style */
.vfig{background:#f1efec}
.v .cta{display:block;margin-top:14px;text-align:center;background:var(--ink);color:#fff;
  font:600 12.5px/1 "IBM Plex Sans",sans-serif;letter-spacing:.11em;text-transform:uppercase;
  padding:14px;transition:background .22s var(--ease)}
.v:hover .cta{background:var(--red)}


/* ── vehicle page, AutoNation structure ── */
.crumb{display:flex;gap:9px;align-items:center;font-size:13px;color:var(--muted);padding:22px 0 4px}
.crumb a:hover{color:var(--red)}
.crumb i{font-style:normal;opacity:.5}
.galwrap{position:relative;background:#fff;border:1px solid var(--line)}
.galcount{position:absolute;left:14px;bottom:14px;background:rgba(12,12,13,.82);color:#fff;
  font:500 12px/1 "IBM Plex Sans",sans-serif;letter-spacing:.06em;padding:9px 12px;border-radius:2px}
/* click through the photos without hunting for the thumbnail */
.galnav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;
  border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.22);
  cursor:pointer;display:grid;place-items:center;z-index:2;
  transition:background .2s var(--ease),transform .2s var(--ease)}
.galnav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.galnav:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.galnav svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.galprev{left:14px}.galnext{right:14px}
@media(max-width:700px){.galnav{width:38px;height:38px}.galnav svg{width:17px;height:17px}
  .galprev{left:8px}.galnext{right:8px}}
.buy{position:sticky;top:104px;border:1px solid var(--line);padding:26px;background:#fff}
.buytop{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.instock{display:inline-flex;align-items:center;gap:7px;background:#e9f5ec;color:#1c6b34;
  font:600 12px/1 "IBM Plex Sans",sans-serif;padding:8px 12px;border-radius:999px}
.instock svg{width:13px;height:13px;fill:currentColor}
.iconbtns{display:flex;gap:6px}
.iconbtn{width:38px;height:38px;border:0;background:transparent;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;transition:background .2s var(--ease)}
.iconbtn:hover{background:var(--card)}
.iconbtn svg{width:19px;height:19px;fill:none;stroke:var(--ink);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.iconbtn.on svg{fill:var(--red);stroke:var(--red)}
.carfax{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:12px 14px;
  border:1px solid var(--line);width:100%;font:500 13.5px/1.3 "IBM Plex Sans",sans-serif}
.carfax b{color:#0a5ca8}
.carfax:hover{border-color:var(--ink)}

/* spec icon grid */
.specgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 20px;padding:26px 0 0}
.sp{display:flex;gap:13px;align-items:flex-start}
.sp svg{width:22px;height:22px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.sp b{display:block;font:600 15px/1.3 "IBM Plex Sans",sans-serif}
.sp span{font-size:12.5px;color:var(--muted)}
.panel{border:1px solid var(--line);padding:28px 30px;margin-top:22px;background:#fff}
.panel h3{font:600 19px/1 "IBM Plex Sans",sans-serif;letter-spacing:-.01em}
.vinrow{display:flex;align-items:center;gap:11px;font-size:14.5px;padding-bottom:20px;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.vinrow>svg{width:20px;height:20px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round}
.vinrow b{font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.02em}
.copyvin{background:0;border:0;cursor:pointer;padding:4px;display:grid;place-items:center}
.copyvin svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.6}
.copyvin:hover svg{stroke:var(--ink)}
.morelink{margin-top:24px;background:0;border:0;padding:0;cursor:pointer;color:var(--red);
  font:500 14.5px/1 "IBM Plex Sans",sans-serif;text-decoration:underline;text-underline-offset:4px}

/* feature chips */
.feats{display:flex;flex-wrap:wrap;gap:9px;padding-top:6px}
.feats span{background:var(--card);border:1px solid var(--line);padding:11px 15px;
  font:500 13.5px/1 "IBM Plex Sans",sans-serif;border-radius:2px}

/* store card */
.storecard{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line);
  margin-top:22px;background:#fff;overflow:hidden}
.storecard .info{padding:30px}
.storecard .info h3{margin-bottom:16px}
.storecard .row{display:flex;gap:11px;align-items:flex-start;padding:9px 0;font-size:14.5px}
.storecard .row svg{width:17px;height:17px;flex:none;stroke:var(--muted);fill:none;stroke-width:1.6;
  margin-top:2px}
.storecard iframe{width:100%;height:100%;min-height:280px;border:0;display:block;filter:grayscale(.18)}
@media(max-width:760px){.storecard{grid-template-columns:1fr}.specgrid{grid-template-columns:repeat(2,1fr)}}

/* modal */
.panel svg,.storecard svg,.buytop svg,.carfax svg{fill:none;stroke-linecap:round;stroke-linejoin:round}
.carfax>svg{width:19px;height:19px;flex:none;stroke:#1c6b34;stroke-width:2.2}
.instock svg{fill:currentColor;stroke:none}
.modal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px;
  background:rgba(12,12,13,.55)}
.modal.open{display:grid}
.modal .box{background:#fff;max-width:620px;width:100%;max-height:82vh;overflow:auto;padding:34px}
.modal h2{font:600 26px/1 "IBM Plex Sans",sans-serif;margin-bottom:22px}
.modal .x{position:absolute;top:26px;right:26px;width:40px;height:40px;border-radius:50%;border:0;
  background:var(--card);cursor:pointer;font-size:19px;line-height:1}
.acc{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;padding:16px 0;display:flex;justify-content:space-between;
  font:600 15px/1 "IBM Plex Sans",sans-serif}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--muted);font-weight:400;font-size:19px}
.acc[open] summary::after{content:"\2212"}
.acc table{width:100%;border-collapse:collapse;font-size:14.5px;margin-bottom:14px}
.acc td{padding:9px 0;border-bottom:1px solid var(--line)}
.acc td:last-child{text-align:right;color:var(--muted)}

/* ── vehicle detail (legacy) ── */
.vd{display:grid;grid-template-columns:1.62fr 1fr;gap:64px;padding:46px 0 40px;align-items:start}
.gal{position:relative;aspect-ratio:3/2;background:#f1efec;overflow:hidden}
.gal img{width:100%;height:100%;object-fit:cover}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px;margin-top:8px}
.thumbs img{width:100%;aspect-ratio:3/2;object-fit:cover;cursor:pointer;opacity:.48;
  transition:opacity .3s var(--ease)}
.thumbs img:hover,.thumbs img.on{opacity:1}
.buy{position:sticky;top:100px;border:1px solid var(--line);padding:30px}
.buy .price{font:600 46px/1 "IBM Plex Sans",sans-serif;letter-spacing:-.025em;margin:12px 0 6px}
.buy .mi{color:var(--muted);font-size:15px}
.stack{display:flex;flex-direction:column;gap:10px;margin:28px 0 0}
.stack .btn{width:100%}
.note{font-size:13.5px;color:var(--muted);line-height:1.55;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--line)}
.spec{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0 0}
.spec th,.spec td{text-align:left;padding:14px 0;border-bottom:1px solid var(--line);vertical-align:top}
.spec th{font:500 11px/1.5 "IBM Plex Sans",sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);width:44%}
@media(max-width:1000px){
  .ilay{grid-template-columns:1fr;gap:0}
  .rail{position:static;display:none;padding-bottom:26px;border-bottom:1px solid var(--line);
    margin-bottom:26px}
  .rail.open{display:block}
  .mfilt{display:inline-flex}
}
@media(max-width:980px){.vd{grid-template-columns:1fr;gap:38px}.buy{position:static}}