/* Andover Auto Group: black like the logo, navy and red from it. System fonts, no framework. */
/* brand:start (written by scripts/brand.mjs from ops/functions/_lib/design.js; edit there) */
:root{--navy:#2f3192;--navy-2:#23246f;--red:#c8102e;--ink:#14151a;--muted:#5b6070;--r-xs:4px;--r-sm:6px;--r-md:10px;--r:12px;--r-lg:16px;--r-xl:20px;--r-pill:999px}
/* brand:end */
:root{--line:#e4e6ec;--bg:#fff;--soft:#f5f6f9;--black:#000}
/* Website color tokens: text and accents on the dark sections, greens, ambers, the gauge silver, the night backgrounds */
:root{--on-dark:#e6e7ef;--on-dark-muted:#c9ccd8;--on-dark-link:#cfd2ff;--silver:#d4d7e1;--red-on-dark:#ff8fa0;--red-bright:#ff5a6e;--red-2:#a50d26;--tint-red:#fde8eb;--green:#1f7a3a;--green-ink:#1f6b35;--tint-green:#e3f4e8;--tint-green-soft:#eef7f0;--green-line:#c4e4cc;--live:#3ddc84;--amber:#e0a800;--star:#ffc53d;--tint-amber:#fff7e0;--night:#09090e;--night-2:#0d0e1c;--night-navy:#14153a;--navy-glow:#2a2c86;--line-on-dark:#444}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--ink);background:var(--bg)}
img{max-width:100%;height:auto;display:block}
a{color:var(--navy)}
h1{font-size:clamp(26px,4.2vw,40px);line-height:1.15;margin:24px 0 12px;letter-spacing:-.01em}
h2{font-size:21px;line-height:1.25;margin:28px 0 10px}
.wrap{max-width:1120px;margin:0 auto;padding:0 16px}
.narrow{max-width:760px}
.prose p{max-width:68ch}
.preview{background:var(--navy);color:#fff;font-size:13px;text-align:center;padding:6px 12px}
.preview a{color:#fff}
.top{background:var(--black);display:flex;align-items:center;gap:18px;padding:10px 16px}
.brand img{width:160px;height:auto}
.links{display:none;gap:18px;margin-left:auto}
.links a,.top .call{color:#fff;text-decoration:none;font-weight:600;font-size:15px}
.links a[aria-current]{color:var(--on-dark-link);text-decoration:underline;text-underline-offset:6px}
.top .call{display:none;background:var(--red);padding:9px 14px;border-radius:var(--r-pill)}
.menu{margin-left:auto;position:relative}
.menu summary{list-style:none;color:#fff;font-weight:600;cursor:pointer;padding:8px 12px;border:1px solid var(--line-on-dark);border-radius:var(--r-md)}
.menu summary::-webkit-details-marker{display:none}
.menu nav{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 30px rgba(0,0,0,.18);display:grid;min-width:220px;z-index:20;padding:6px}
.menu nav a{padding:10px 12px;color:var(--ink);text-decoration:none;border-radius:var(--r-md)}
.menu nav a:hover{background:var(--soft)}
@media(min-width:1000px){.links,.top .call{display:flex}.menu{display:none}}
.btn,button{display:inline-block;background:var(--navy);color:#fff;border:0;border-radius:var(--r-md);padding:13px 18px;font:inherit;font-weight:650;text-decoration:none;cursor:pointer;text-align:center}
.btn:hover,button:hover{background:var(--navy-2)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
button:disabled{opacity:.6;cursor:progress}
:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.hero{position:relative;color:#fff;min-height:540px;display:grid;align-items:end;overflow:hidden;background:var(--black)}
.hero picture{position:absolute;inset:0}.hero-img{width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,.85) 100%)}
.hero-in{position:relative;z-index:1;padding-top:120px;padding-bottom:32px}
.hero h1{margin-top:0;text-shadow:0 2px 16px rgba(0,0,0,.5)}.hero p{color:var(--on-dark);max-width:60ch;text-shadow:0 1px 8px rgba(0,0,0,.6)}
@media(min-width:1000px){.hero{min-height:620px}.hero-in{padding-bottom:48px}}
picture{display:block}
.quick{display:grid;gap:10px;margin-top:18px;grid-template-columns:1fr 1fr}
.quick label{display:grid;font-size:13px;color:var(--on-dark-muted);gap:4px}
.quick button{grid-column:1/-1}
@media(min-width:760px){.quick{grid-template-columns:repeat(3,1fr) auto;align-items:end}.quick button{grid-column:auto}}
select,input,textarea{font:inherit;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);width:100%}
.row-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.grid{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}}
.card a{display:block;color:inherit;text-decoration:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff;transition:box-shadow .15s}
.card a:hover{box-shadow:0 8px 24px rgba(20,21,26,.1)}
.card .ph{aspect-ratio:4/3;background:var(--soft)}
.card picture,.card img{width:100%;height:100%;object-fit:cover}
.card h3{font-size:17px;margin:12px 14px 2px;line-height:1.3}
.card .meta{color:var(--muted);font-size:14px;margin:0 14px}
.card .price{font-size:20px;font-weight:750;color:var(--red);margin:6px 14px 14px}
.filters{display:grid;gap:10px;grid-template-columns:1fr 1fr;margin:8px 0 14px}
/* On a phone the filters fold behind one button, so the first screen is cars and the concierge sits on nothing. On a wide screen the fold is open and its button is gone. */
.filters-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;margin:8px 0;border:1px solid var(--line);border-radius:var(--r-pill);font-weight:650;background:var(--bg)}
.filters-fold>summary::-webkit-details-marker{display:none}.filters-fold>summary::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.filters-fold[open]>summary::after{transform:rotate(225deg);margin-top:4px}
@supports selector(::details-content){@media(min-width:760px){.filters-fold>summary{display:none}.filters-fold::details-content{content-visibility:visible}}}
.filters label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
@media(min-width:760px){.filters{grid-template-columns:repeat(4,1fr)}}
.results{transition:opacity .15s}.results.htmx-request{opacity:.45}
.count{color:var(--muted);margin:6px 0 14px}.empty{padding:28px 0}
.vdp{display:grid;gap:0 36px;padding-top:16px}
@media(min-width:1000px){.vdp{grid-template-columns:640px 1fr;align-items:start}}
.stage{position:relative;margin:0 -16px}
@media(min-width:1000px){.stage{margin:0;border-radius:var(--r);overflow:hidden}}
.slides{list-style:none;margin:0;padding:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.slides::-webkit-scrollbar{display:none}
.slides li{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/3;background:var(--soft)}
.slides picture,.slides img{width:100%;height:100%;object-fit:cover}
.nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:var(--ink);box-shadow:0 2px 10px rgba(0,0,0,.25)}
.nav:hover{background:#fff}.prev{left:12px}.next{right:12px}
.counter{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.7);color:#fff;font-size:13px;font-weight:600;padding:4px 10px;border-radius:var(--r-pill)}
.thumbs{list-style:none;margin:10px 0 0;padding:0 0 4px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:thin}
.thumbs li{flex:0 0 auto}
.thumbs a{display:block;width:88px;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;outline:2px solid transparent;outline-offset:1px;opacity:.75;transition:opacity .15s}
.thumbs a:hover,.thumbs a[aria-current]{opacity:1}.thumbs a[aria-current]{outline-color:var(--navy)}
.thumbs picture,.thumbs img{width:100%;height:100%;object-fit:cover}
@media(min-width:1000px){.thumbs a{width:104px}}
.info h1{margin-top:12px}.sub{color:var(--muted);margin:0}
.big-price{font-size:32px;font-weight:800;color:var(--red);margin:10px 0 14px}
.cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.specs{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.specs dt{color:var(--muted)}.specs dd{margin:0;font-weight:550}
.lead{display:grid;gap:12px;background:var(--soft);border-radius:var(--r);padding:18px;margin:24px 0}
.lead h2{margin:0 0 4px}.lead label{display:grid;gap:4px;font-size:14px;color:var(--muted)}
.lead .two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead .note{font-size:13px;color:var(--muted);margin:0}
.lead.done{background:var(--tint-green-soft)}.error{color:var(--red);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.similar{margin-bottom:24px}
.stick{position:sticky;bottom:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px 16px;background:#fff;border-top:1px solid var(--line);z-index:10}
@media(min-width:1000px){.stick{display:none}}
.split{display:grid;gap:28px;padding-bottom:12px}
@media(min-width:860px){.split{grid-template-columns:1fr 1fr}}
blockquote{margin:0;padding:22px;border-left:4px solid var(--red);background:var(--soft);border-radius:0 var(--r) var(--r) 0;align-self:start}
blockquote p{font-size:19px;margin:0 0 8px}cite{color:var(--muted);font-style:normal;font-weight:600}
.visit{background:var(--soft);border-radius:var(--r);padding:18px;align-self:start;margin-top:24px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}.hours dt{font-weight:600}.hours dd{margin:0}
.callout{background:var(--tint-amber);border-left:4px solid var(--amber);padding:12px 14px;border-radius:0 var(--r-md) var(--r-md) 0}
.foot{background:var(--black);color:var(--on-dark-muted);margin-top:40px;padding:28px 0 10px}
.foot a{color:#fff}.foot h2{color:#fff;font-size:16px;margin:0 0 8px}
.foot .cols{display:grid;gap:24px}@media(min-width:760px){.foot .cols{grid-template-columns:1.2fr 1fr 1fr}}
.foot .hours dt{color:#fff}.fine{text-align:center;font-size:13px;margin:22px 0 0}
/* Grid and flex items default to min-width:auto, so a column stretches to its
   widest child -- the <picture> elements' 800px photos -- and pushes the whole
   page past a phone screen. Let them shrink. */
.vdp>*,.split>*,.grid>*,.stage,.vdp-side,.vdp-rest{min-width:0}
.slides li,.slides picture{min-width:0;max-width:100%}

/* Concierge: a <details> that floats bottom-right; open, it becomes a chat panel. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.concierge{position:fixed;right:16px;bottom:16px;z-index:50}
.concierge>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;font-weight:700;padding:12px 18px;border-radius:var(--r-pill);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.concierge>summary::-webkit-details-marker{display:none}
.concierge>summary:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.concierge .dot{width:9px;height:9px;border-radius:50%;background:var(--live)}
.concierge[open]>summary{margin-left:auto;width:max-content;margin-bottom:10px;background:var(--black)}
.concierge[open]>summary .dot{display:none}
.concierge[open]>summary::after{content:"Close";font-weight:600}
.concierge[open]>summary{font-size:0;gap:0}
.concierge[open]>summary::after{font-size:15px}
.chat{width:min(380px,calc(100vw - 32px));height:min(560px,calc(100dvh - 120px));display:flex;flex-direction:column;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.25);overflow:hidden}
.chat header{background:var(--black);color:#fff;padding:12px 14px;display:flex;flex-direction:column}
.chat header span{font-size:12px;color:var(--on-dark-muted)}
.log{flex:1;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:10px;background:var(--soft)}
.msg{max-width:88%;padding:9px 12px;border-radius:var(--r);font-size:15px;line-height:1.45}
.msg p{margin:0}.msg p+p{margin-top:6px}
.msg.assistant{background:#fff;border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.user{background:var(--navy);color:#fff;align-self:flex-end;border-bottom-right-radius:4px}
.chat-cars{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.chat-car{display:flex;gap:10px;align-items:center;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);padding:6px;background:var(--bg)}
.chat-car:hover{border-color:var(--navy)}
.chat-car picture,.chat-car img{width:96px;height:72px;object-fit:cover;border-radius:var(--r-sm);flex:none}
.chat-car>span{display:flex;flex-direction:column;min-width:0;font-size:13px;line-height:1.3}
.chat-car strong{font-size:14px}
.chat-car>span>span{color:var(--muted)}
.chat-car b{color:var(--red);font-size:15px;margin-top:2px}
.typing{display:none;margin:0;padding:4px 14px;font-size:13px;color:var(--muted);background:var(--soft)}
.chat.htmx-request .typing{display:block}
.ask{border-top:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column}
.ask .chips{order:-1}
.chips{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}
.chips button{flex:none;border:1px solid var(--navy);color:var(--navy);background:#fff;border-radius:var(--r-pill);padding:6px 11px;font:inherit;font-size:13px;cursor:pointer}
.ask .row{display:flex;gap:8px}
.ask input{flex:1;min-width:0;font:inherit;font-size:16px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r-pill)}
.ask input:focus-visible,.chips button:focus-visible,.ask .send:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.ask .send{border:0;background:var(--red);color:#fff;font:inherit;font-weight:700;padding:9px 16px;border-radius:var(--r-pill);cursor:pointer}
.ask button:disabled,.ask input:disabled{opacity:.6}
.ask .fine{margin:6px 0 0;font-size:11px;color:var(--muted)}
@media print{.concierge{display:none}}

/* Equipment: collapsible groups, two columns of items on wide screens. */
.equipment{margin:8px auto 28px}
.equipment .sub{margin-bottom:12px}
.equipment details{border-top:1px solid var(--line)}
.equipment details:last-of-type{border-bottom:1px solid var(--line)}
.equipment summary{cursor:pointer;padding:14px 4px;font-weight:650;font-size:17px;display:flex;align-items:center;gap:8px}
.equipment summary small{color:var(--muted);font-weight:500;font-size:13px;background:var(--soft);border-radius:var(--r-pill);padding:1px 8px}
.equipment summary:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.equipment ul{margin:0 0 16px;padding:0 0 0 20px;columns:1;column-gap:32px}
.equipment li{break-inside:avoid;padding:3px 0;font-size:15px}
.equipment li span{color:var(--muted)}
@media (min-width:760px){.equipment ul{columns:2}}
/* On car pages phones get a sticky Check availability / Call bar; sit above it. */
@media(max-width:999px){body:has(.stick) .concierge{bottom:84px}}

/* Booking form and confirmation, inside a concierge reply. */
.book{display:grid;gap:4px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--bg)}
.book .book-title{font-weight:700;margin:0 0 4px}
.book label{font-size:13px;color:var(--muted);margin-top:4px}
.book input,.book select{font:inherit;font-size:16px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;width:100%;min-width:0}
.book input:focus-visible,.book select:focus-visible,.book button:focus-visible{outline:3px solid var(--navy);outline-offset:1px}
.book button{margin-top:8px;border:0;background:var(--red);color:#fff;font:inherit;font-weight:700;padding:10px;border-radius:var(--r-pill);cursor:pointer}
.book button:disabled{opacity:.6}
.book .fine{font-size:12px;color:var(--muted);margin:4px 0 0}
.book .error{margin:0 0 4px;font-size:14px}
.book.done{background:var(--tint-green-soft);border-color:var(--green-line)}
.book.done p{margin:0 0 6px}

/* After-hours test drives: shopper pages, car page panel, dealer page. */
.lede{font-size:18px;color:var(--muted);max-width:60ch}
.crumb{margin:16px 0 0;font-size:14px}
.drive-car{display:flex;gap:14px;align-items:center;border:1px solid var(--line);border-radius:var(--r);padding:10px;margin:16px 0}
.drive-car picture,.drive-car img{width:120px;height:90px;object-fit:cover;border-radius:var(--r-md);flex:none}
.drive-car>div{display:flex;flex-direction:column;min-width:0}
.drive-car span{color:var(--muted);font-size:14px}.drive-car b{color:var(--red)}
.how{padding-left:22px}.how li{margin:6px 0}
.steps{list-style:none;padding:0;margin:16px 0;display:grid;gap:6px;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:10px;align-items:center;color:var(--muted);font-size:15px}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:700;border:2px solid var(--line);color:var(--muted);background:#fff}
.steps li.done{color:var(--ink)}.steps li.done::before{content:"✓";background:var(--green);border-color:var(--green);color:#fff}
.steps li.now{color:var(--ink);font-weight:700}.steps li.now::before{border-color:var(--navy);background:var(--navy);color:#fff}
.status-pill{display:inline-block;margin:0;padding:3px 10px;border-radius:var(--r-pill);font-size:13px;font-weight:650;background:var(--soft);color:var(--ink)}
.status-review,.status-id,.status-terms{background:var(--tint-amber)}.status-approved{background:var(--tint)}.status-ready,.status-out{background:var(--tint-green)}
.status-declined,.status-cancelled{background:var(--tint-red)}
.drive-step{background:var(--soft);border-radius:var(--r);padding:16px 18px;margin:12px 0}
.drive-step h2{margin-top:0}
.code-label{margin:0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.code{font-size:40px;font-weight:800;letter-spacing:.12em;margin:0 0 8px;font-variant-numeric:tabular-nums}
.demo-note{font-size:13px;color:var(--muted);border-left:3px solid var(--line);padding-left:10px;margin:10px 0 0}
.agree{border:0;padding:0;margin:4px 0;display:grid;gap:8px}.agree legend{font-weight:650;margin-bottom:6px}
.agree label{display:flex!important;gap:10px;align-items:flex-start;color:var(--ink)!important;font-size:15px!important}
.agree input{margin-top:4px;width:18px;height:18px;flex:none}
.outbox{margin:12px 0}.outbox summary{cursor:pointer;font-weight:650}
.outbox .sent{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;margin-top:8px;background:#fff}
.outbox .sent span{display:block;font-size:12px;color:var(--muted)}.outbox .sent p{margin:4px 0 0;font-size:14px}
.cancel{margin:8px 0}.linkish{background:none!important;color:var(--red);padding:0;text-decoration:underline;font-weight:500}
.afterhours{border:2px solid var(--navy);border-radius:var(--r);padding:14px 16px;margin:20px 0}
.afterhours h2{margin:0 0 6px}.afterhours p{margin:0 0 12px}
.chat-drive{display:block;margin-top:8px;text-align:center;background:var(--navy);color:#fff;border-radius:var(--r-pill);padding:9px 12px;text-decoration:none;font-weight:650;font-size:14px}
.dealer h2 small{color:var(--muted);font-weight:500}
.drive-list{display:grid;gap:12px}
.drive-row{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff}
.drive-row.late{border-color:var(--red);box-shadow:0 0 0 2px var(--tint-red)}
.drive-row header{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.drive-row .when{margin:6px 0;color:var(--muted);font-size:14px}.drive-row .when b{color:var(--red)}
.drive-row dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0;font-size:14px}
.drive-row dt{color:var(--muted)}.drive-row dd{margin:0;min-width:0;overflow-wrap:anywhere}
.acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.acts button{padding:10px 14px}.acts .ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
.wait{margin:0;font-size:14px;color:var(--muted)}.empty{color:var(--muted)}

/* Agreement and signing. The pad takes touches for drawing, not scrolling. */
.agreement{max-height:420px;overflow-y:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:14px 16px;margin:12px 0;font-size:14px;line-height:1.5}
.agreement:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.agreement h3{margin:0 0 8px;font-size:18px}.agreement h4{margin:14px 0 4px;font-size:15px}
.agreement p{margin:0 0 8px}.agreement .loud{font-weight:700;font-size:13px}
.agreement .version{color:var(--muted);font-size:12px}
.draft-flag{display:inline-block;background:var(--tint-red);color:var(--red);font-weight:700;font-size:12px;letter-spacing:.04em;border-radius:var(--r-sm);padding:3px 8px;margin:0 0 8px!important}
.lead .check{display:flex;gap:10px;align-items:flex-start;color:var(--ink);font-size:15px}
.lead .check input{margin-top:3px;width:20px;height:20px;flex:none}
.sigpad{display:grid;gap:6px}
.sig-label{margin:4px 0 0;font-weight:650}
.sig-canvas{display:none;width:100%;height:170px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);touch-action:none;cursor:crosshair}
.sigpad.ready .sig-canvas{display:block}
.sigpad:not(.ready) .sig-row,.sigpad:not(.ready) .sig-label{display:none}
.sigpad.signed .sig-canvas{border-color:var(--navy)}
.sig-canvas:focus-visible{outline:3px solid var(--navy);outline-offset:2px}
.sig-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.signed-by{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;margin:12px 0;background:#fff}
.signed-by p{margin:0 0 6px}
.sig-img{max-width:280px;height:auto;background:#fff}
.typed-sig{font-style:italic;font-size:26px;margin:4px 0}
.signed-doc{background:var(--tint-green);border-radius:var(--r-md);padding:10px 14px;font-weight:600}
/* Keep the pad clear: no chat button over it, and a line to sign on. */
body:has(.sigpad) .concierge{display:none}
.sig-canvas{background:linear-gradient(to bottom,transparent calc(75% - 1px),var(--on-dark-muted) calc(75% - 1px),var(--on-dark-muted) 75%,transparent 75%) no-repeat #fff;background-size:calc(100% - 32px) 100%;background-position:16px 0}

/* Design pass. Later rules here refine the ones above. */
:root{--sh-1:0 1px 2px rgba(20,21,26,.05),0 6px 18px rgba(20,21,26,.06);--sh-2:0 14px 34px rgba(20,21,26,.14);--tint:#eeeefc}
h1,h2,h3{letter-spacing:-.015em}
.eyebrow{margin:0 0 8px;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--red)}
.ico{display:block}
input:focus,select:focus,textarea:focus{border-color:var(--navy);outline:none;box-shadow:0 0 0 3px rgba(47,49,146,.2)}

/* Hero: Andover's own Range Rover, text on the dark side. */
.hero{min-height:580px;align-items:center}
.hero .hero-img{object-position:65% 55%}
.hero::after{background:linear-gradient(90deg,rgba(5,5,10,.92) 0%,rgba(5,5,10,.7) 40%,rgba(5,5,10,.1) 78%),linear-gradient(0deg,rgba(5,5,10,.5),transparent 35%)}
.hero-in{padding-top:64px;padding-bottom:56px}
.hero h1{font-size:clamp(34px,5.2vw,58px);line-height:1.04;max-width:14ch;margin:0 0 14px}
.hero .eyebrow{color:var(--red-on-dark);text-shadow:none}
.hero-lede{font-size:18px;max-width:44ch;margin:0}
.quick{max-width:880px;margin-top:26px;padding:14px;border-radius:var(--r);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16)}
.quick button{background:var(--red)}.quick button:hover{background:var(--red-2)}
/* On phones the photo sits whole above the headline, not cropped behind it. */
@media(max-width:759px){.hero{display:block;min-height:0}.hero picture{position:relative;inset:auto;aspect-ratio:2/1}
  .hero::after{display:none}.hero-in{padding-top:22px;padding-bottom:26px}.hero h1{font-size:34px}}

/* At-a-glance strip. */
.facts{background:var(--navy);color:#fff}
.facts-in{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px;padding-top:20px;padding-bottom:20px}
@media(min-width:900px){.facts-in{grid-template-columns:repeat(4,1fr)}}
.facts p{margin:0;display:grid;gap:3px}
.facts b{font-size:19px;font-weight:750;color:#fff;display:flex}
.facts span{font-size:14px;color:var(--on-dark-link)}
.stars{display:inline-flex;gap:2px;color:var(--star);vertical-align:-2px}.stars .ico{fill:currentColor;stroke:none}

/* Why Andover. */
.perks{display:grid;gap:16px;margin-top:40px}
@media(min-width:640px){.perks{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.perks{grid-template-columns:repeat(4,1fr)}}
.perk{display:flex;flex-direction:column;gap:6px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.perk h2{font-size:17.5px;margin:10px 0 0}.perk p{margin:0;color:var(--muted);font-size:15px;flex:1}.perk a{font-weight:650;margin-top:8px;text-decoration:none}
.perk-ico{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--tint);color:var(--navy);flex:none}

/* Section heads, chips, cards. */
.row-head{margin-top:52px}.row-head h2{font-size:clamp(24px,3vw,30px);margin:0}.row-head a{font-weight:650;text-decoration:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 20px}
.chips a{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 15px;font-size:14px;font-weight:600;text-decoration:none;color:var(--ink);background:#fff;transition:border-color .15s,color .15s}
.chips a:hover{border-color:var(--navy);color:var(--navy)}
.chips.small{margin:0 0 4px;gap:6px}.chips.small span{font-size:13px;padding:4px 10px;border-radius:var(--r-pill);background:var(--soft);color:var(--ink)}
.card a{border-radius:var(--r-lg);box-shadow:var(--sh-1);transition:transform .18s,box-shadow .18s}
.card a:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.card .ph{overflow:hidden}.card img{transition:transform .45s}.card a:hover img{transform:scale(1.035)}
.card h3{font-size:16.5px;margin-top:14px}.card .price{font-size:21px}
@media(prefers-reduced-motion:reduce){.card a,.card img,.chips a{transition:none}.card a:hover,.card a:hover img{transform:none}}

/* Dark feature band. */
.band{margin-top:64px;padding:60px 0}
.band.dark{color:var(--on-dark);background:radial-gradient(1100px 420px at 88% -10%,rgba(47,49,146,.95),transparent 62%),var(--night)}
.band h2{color:#fff;font-size:clamp(28px,3.8vw,42px);line-height:1.1;max-width:20ch;margin:0 0 12px}
.band .eyebrow{color:var(--red-on-dark)}.band-lede{color:var(--on-dark-muted);font-size:17.5px;max-width:52ch;margin:0}
.steps-row{list-style:none;padding:0;margin:30px 0;display:grid;gap:14px}
@media(min-width:760px){.steps-row{grid-template-columns:repeat(4,1fr)}}
.steps-row li{display:grid;gap:8px;align-content:start;padding:20px;border-radius:var(--r-lg);background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.steps-row b{color:#fff}.steps-row li>span:last-child{color:var(--on-dark-muted);font-size:15px}
.step-ico{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:rgba(255,255,255,.09);color:#fff}
.btn.light{background:#fff;color:var(--ink)}.btn.light:hover{background:var(--on-dark)}

/* Story, review, closing cards. */
.story{margin-top:64px;align-items:center}
.story h2{font-size:clamp(24px,3vw,32px);margin-top:0}
blockquote{border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:28px}
blockquote p{font-size:21px;line-height:1.45}cite{display:flex;gap:8px;align-items:center}
.cta-row{display:grid;gap:14px;margin-top:40px}
@media(min-width:760px){.cta-row{grid-template-columns:1fr 1fr}}
.cta-card{display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:var(--r-lg);border:1px solid var(--line);background:var(--soft);text-decoration:none;color:var(--ink);transition:border-color .15s,background .15s}
.cta-card:hover{border-color:var(--navy);background:#fff}
.cta-card>span:nth-child(2){flex:1;display:grid;gap:2px}.cta-card>span:nth-child(2)>span{color:var(--muted);font-size:14.5px}
.cta-card>span:last-child{font-size:22px;color:var(--navy)}

/* Inner pages open with a branded band. */
.page-head{color:#fff;padding:40px 0 36px;margin-bottom:28px;background:radial-gradient(900px 320px at 92% -30%,rgba(47,49,146,.95),transparent 62%),var(--night)}
.page-head h1{color:#fff;margin:0;font-size:clamp(30px,4.4vw,46px);line-height:1.08}
.page-head .eyebrow{color:var(--red-on-dark)}
.page-head .lede{color:var(--on-dark-muted);font-size:17.5px;margin:12px 0 0;max-width:60ch}
.page-head p:last-child{margin-bottom:0}.page-head .btn{margin-top:18px}
.toolbar{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);padding:14px 16px 0;margin-bottom:6px}
.how-cards{list-style:none;padding:0;margin:8px 0 24px;display:grid;gap:12px}
@media(min-width:700px){.how-cards{grid-template-columns:repeat(3,1fr)}}
.how-cards li{display:grid;gap:8px;align-content:start;padding:18px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:var(--sh-1)}
.how-cards li>span:last-child{color:var(--muted);font-size:14.5px}
.lead{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:22px}
.drive-step .lead{box-shadow:none}
.visit{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1);border-radius:var(--r-lg);padding:22px;margin-top:0}.visit h2{margin-top:0}
.crumb a{text-decoration:none;font-weight:600}

/* Car page: photos and details on the left, price and actions pinned right. */
.vdp{grid-template-areas:"gallery" "side" "rest"}
.gallery-wrap{grid-area:gallery}.vdp-side{grid-area:side}.vdp-rest{grid-area:rest}
@media(min-width:1000px){
  .vdp{grid-template-columns:minmax(0,1fr) 390px;grid-template-areas:"gallery side" "rest side";gap:0 36px;align-items:start;padding-top:24px}
  .vdp-side{position:sticky;top:20px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
  .vdp-side h1{margin-top:0}}
.vdp-side h1{font-size:clamp(24px,2.6vw,31px);line-height:1.15;margin:18px 0 10px}
.big-price{font-size:36px;letter-spacing:-.02em;margin:10px 0 16px}
.vdp-side .cta{grid-template-columns:1fr auto}.vdp-side .cta .ghost{padding-left:20px;padding-right:20px}
.afterhours{display:flex;gap:12px;align-items:flex-start;border:0;background:var(--tint);border-radius:var(--r);padding:14px;margin:16px 0 4px}
.afterhours .perk-ico{background:#fff;width:42px;height:42px}
.afterhours h2{font-size:16px;margin:0 0 4px}.afterhours p{font-size:14px;color:var(--muted);margin:0 0 6px}.afterhours a{font-weight:650;font-size:14.5px;text-decoration:none}
.trust{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px;font-size:14px;color:var(--muted)}
.trust li{display:flex;gap:9px;align-items:center}.trust .ico{color:var(--navy);flex:none}
.panel{margin-top:30px}.panel h2{font-size:21px;margin:0 0 12px}
.specs{grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.specs>div{background:#fff;padding:11px 14px;min-width:0}
.specs dt{font-size:12px;text-transform:uppercase;letter-spacing:.07em;margin-bottom:2px}.specs dd{overflow-wrap:anywhere}
.equipment h2{font-size:21px}

/* Footer. */
.foot{margin-top:72px;padding-top:40px;border-top:4px solid var(--red)}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot .cols p{line-height:1.9}

@media(max-width:759px){
  .perk{display:grid;grid-template-columns:48px 1fr;gap:2px 14px;padding:18px}
  .perk .perk-ico{grid-row:span 3}.perk h2{margin:2px 0 0}
  .how-cards li{grid-template-columns:48px 1fr;gap:2px 14px}.how-cards .perk-ico{grid-row:span 2}
  .concierge>summary{padding:10px 15px;font-size:14px}
  .steps-row li{grid-template-columns:48px 1fr;gap:2px 14px}.steps-row .step-ico{grid-row:span 2}
}

/* The standalone after-hours app: a slimmer header, links back to the dealr site. */
.app .app-links{display:none;margin-left:auto}
@media(min-width:760px){.app .app-links{display:flex}}
.app .top .app-call{display:inline-block;margin-left:auto;padding:8px 13px;font-size:14px}
@media(min-width:760px){.app .top .app-call{margin-left:0;padding:9px 14px;font-size:15px}}
.row-head.first{margin-top:4px}.how-head{margin-top:44px}
.fob-pick{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;color:var(--muted);width:100%}
.fob-pick select{width:auto;min-width:110px}

/* Keycafe connection page. */
.kc-steps{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.kc-steps li{display:flex;gap:10px;align-items:center}
.kc-ok{display:inline-block;min-width:38px;text-align:center;font-size:12px;font-weight:700;border-radius:var(--r-pill);padding:2px 8px;background:var(--tint-green);color:var(--green-ink)}
.kc-ok.no{background:var(--tint-red);color:var(--red)}
.kc-table{width:100%;border-collapse:collapse;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.kc-table th,.kc-table td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.kc-table th{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--soft)}
.kc-table small{color:var(--muted)}
.kc-cmd{background:var(--night);color:var(--on-dark);border-radius:var(--r-md);padding:12px 14px;font-size:13px;overflow-x:auto;white-space:pre}
code{font-size:.92em;background:var(--soft);padding:1px 5px;border-radius:var(--r-xs);overflow-wrap:anywhere}

/* License check in progress: an indeterminate bar and where it stands. */
.id-progress{display:grid;gap:12px}
.id-progress p{margin:0;color:var(--muted)}
.progress-bar{height:8px;border-radius:var(--r-pill);background:var(--on-dark);overflow:hidden;position:relative}
.progress-bar span{position:absolute;inset:0 auto 0 0;width:38%;border-radius:var(--r-pill);background:var(--navy);animation:id-slide 1.4s ease-in-out infinite}
@keyframes id-slide{0%{left:-38%}100%{left:100%}}
.id-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.id-steps li{display:flex;gap:10px;align-items:center;color:var(--muted)}
.id-steps li::before{content:"";width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:none}
.id-steps li.done{color:var(--ink)}.id-steps li.done::before{content:"✓";display:grid;place-items:center;color:#fff;font-size:11px;font-weight:800;background:var(--green);border-color:var(--green)}
.id-steps li.now{color:var(--ink);font-weight:650}.id-steps li.now::before{border-color:var(--navy);border-top-color:transparent;animation:id-spin .8s linear infinite}
@keyframes id-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.progress-bar span{animation:none;left:0;width:100%;opacity:.35}.id-steps li.now::before{animation:none;border-top-color:var(--navy)}}

/* Admin: navigation, messages, dashboard, drive page, cars, settings. */
.admin-nav{background:#fff;border-bottom:1px solid var(--line);margin:-28px 0 20px;position:sticky;top:0;z-index:20}
.admin-nav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.admin-nav a{padding:13px 12px;color:var(--muted);font-weight:650;text-decoration:none;border-bottom:3px solid transparent;white-space:nowrap}
.admin-nav a:hover{color:var(--ink)}.admin-nav a[aria-current]{color:var(--navy);border-bottom-color:var(--navy)}
.admin-nav a.out{margin-left:auto}
.admin h2{font-size:20px;margin:28px 0 12px}
.flash{background:var(--tint-green);color:var(--green-ink);border-radius:var(--r-md);padding:10px 14px;font-weight:600}
.flash.err{background:var(--tint-red);color:var(--red)}
.summary{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.summary span{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px;font-size:14px;color:var(--muted)}
.summary b{color:var(--ink);font-size:16px}.summary .zero{opacity:.55}
.summary .late{border-color:var(--red);background:var(--tint-red)}.summary .late b{color:var(--red)}
.fob-board{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.fob{display:grid;gap:2px;align-content:start;padding:12px 14px;border-radius:var(--r);border:1px solid var(--line);background:#fff;color:var(--ink);text-decoration:none;min-height:96px}
.fob span{font-size:13.5px;color:var(--ink)}.fob small{font-size:12.5px;color:var(--muted)}
.fob-n{font-size:12px!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)!important}
.fob-free{background:var(--soft);border-style:dashed}.fob-free strong{color:var(--muted);font-weight:600}
.fob-wait{border-color:var(--amber);background:var(--tint-amber)}.fob-ready{border-color:var(--green);background:var(--tint-green-soft)}
.fob-out{border-color:var(--navy);background:var(--tint)}.fob-late{border-color:var(--red);background:var(--tint-red)}.fob-late strong{color:var(--red)}
.sched-day h3{font-size:15px;margin:18px 0 8px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.sched-row{display:grid;grid-template-columns:80px 1fr;gap:6px 14px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:8px}
.sched-row.late{border-color:var(--red)}
.sched-time{font-weight:750;display:grid}.sched-time small{font-weight:500;color:var(--muted)}
.sched-main{display:grid;gap:3px;min-width:0}.sched-main a{text-decoration:none;color:var(--ink)}.sched-main>span:not(.status-pill){font-size:14px;color:var(--muted)}
.sched-main .status-pill{justify-self:start}
.sched-act,.sched-open{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sched-act select{width:auto;min-width:120px}.sched-act button{padding:10px 14px}
.sched-open{font-weight:650;text-decoration:none}
@media(min-width:760px){.sched-row{grid-template-columns:90px 1fr auto}.sched-act,.sched-open{grid-column:auto}}
.drive-cols{display:grid;gap:20px}
@media(min-width:900px){.drive-cols{grid-template-columns:1.3fr 1fr;align-items:start}.drive-actions{position:sticky;top:64px}}
.kv{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}.kv dt{color:var(--muted)}.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.history{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.history li{display:flex;justify-content:space-between;gap:12px;border-left:3px solid var(--line);padding-left:10px}.history small{color:var(--muted)}
.drive-actions{display:grid;gap:12px}
.act-block{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px}
.act-block h3{margin:0 0 8px;font-size:15px}.act-block p{margin:6px 0 0}
.drive-act{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 0}
.drive-act select{flex:1;min-width:140px}.drive-act.stack{display:grid}
button.ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 2px var(--navy)}
button.danger{background:transparent;color:var(--red);box-shadow:inset 0 0 0 2px var(--red)}
.late-text{color:var(--red)}
.car-list{display:grid;gap:8px}
.car-row{display:grid;grid-template-columns:96px 1fr auto;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.car-row.off{background:var(--soft)}.car-row.off .car-ph{opacity:.5}
.car-ph img,.car-ph picture{width:96px;height:72px;object-fit:cover;border-radius:var(--r-md)}
.car-info{display:grid;gap:2px;min-width:0}.car-info span{font-size:14px;color:var(--muted)}
.switch{display:inline-flex;align-items:center;gap:8px;background:var(--soft)!important;color:var(--muted)!important;border-radius:var(--r-pill);padding:8px 14px 8px 8px;font-size:14px}
.switch::before{content:"";width:34px;height:20px;border-radius:var(--r-pill);background:var(--on-dark-muted);box-shadow:inset -14px 0 0 2px #fff;transition:box-shadow .15s,background .15s}
.switch.on{background:var(--tint-green-soft)!important;color:var(--green-ink)!important}.switch.on::before{background:var(--green);box-shadow:inset 14px 0 0 2px #fff}
@media(max-width:600px){.car-row{grid-template-columns:72px 1fr}.car-row form{grid-column:1/-1}.car-ph img,.car-ph picture{width:72px;height:54px}}
/* One row per day of time chips (real checkboxes, visually the chip). */
.slot-days{display:grid;gap:10px}
.slot-day-row{border:0;padding:0;margin:0;display:grid;gap:6px}
.slot-day-row legend{font-weight:700;font-size:14px;padding:0;margin-bottom:4px}
.time-chips{display:flex;flex-wrap:wrap;gap:6px}
.time-chip{position:relative;cursor:pointer}
.time-chip input{position:absolute;opacity:0;width:1px;height:1px}
.time-chip span{display:inline-block;min-width:52px;text-align:center;padding:8px 10px;border-radius:var(--r-pill);border:1px solid var(--line);background:#fff;font-size:14px;color:var(--muted)}
.time-chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:650}
.time-chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.settings-form{display:grid;gap:4px}.settings-form>button{justify-self:start;margin-top:12px}

/* UX pass: slim bands, task first, Cam's own header. */
.page-head.compact{padding:18px 0 16px;margin-bottom:18px}
.page-head.compact h1{font-size:clamp(22px,3.4vw,30px)}.page-head.compact .eyebrow{margin-bottom:4px}
.admin-top{padding:8px 16px}.admin-top .brand img{width:120px}
.admin-tag{color:#fff;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.12);border-radius:var(--r-pill);padding:4px 10px}
.admin-view{margin-left:auto;color:var(--on-dark-link);font-size:14px;font-weight:600;text-decoration:none}
.page-head.compact+.admin-nav{margin-top:-18px}
/* Dashboard */
.admin h2 small{color:var(--muted);font-weight:500}
.need-list{display:grid;gap:10px}
.need-row{display:grid;gap:10px;padding:14px 16px;border:2px solid var(--amber);border-radius:var(--r-lg);background:var(--tint-amber)}
.need-main{display:grid;gap:3px;min-width:0}.need-main a{color:var(--ink);text-decoration:none}.need-main span{font-size:14px;color:var(--muted)}
.need-act{display:flex;flex-wrap:wrap;gap:8px;align-items:end}
.need-act label{display:grid;gap:3px;font-size:12.5px;color:var(--muted);font-weight:600}
.need-act select{width:auto;min-width:120px}.need-act button{padding:11px 16px}
@media(min-width:900px){.need-row{grid-template-columns:1fr auto;align-items:center}}
.all-clear{background:var(--tint-green-soft);color:var(--green-ink);border-radius:var(--r);padding:12px 14px;font-weight:600;margin:0}
a.sched-row{color:var(--ink);text-decoration:none}a.sched-row:hover{border-color:var(--navy)}
@media(min-width:760px){a.sched-row{grid-template-columns:90px 1fr}}
.key-strip{display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.key-chip{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;color:var(--ink);text-decoration:none;font-size:13.5px;min-width:0}
.key-chip b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--soft);flex:none;font-size:13px}
.key-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.key-free{color:var(--muted)}.key-wait b{background:var(--tint-amber)}.key-ready b{background:var(--green);color:#fff}.key-out b{background:var(--navy);color:#fff}
.key-late{border-color:var(--red)}.key-late b{background:var(--red);color:#fff}
.drive-act.stack label{display:grid;gap:3px;font-size:12.5px;color:var(--muted);font-weight:600}
/* Customer: booking and status */
.how-list{padding-left:20px;margin:6px 0 18px;display:grid;gap:6px;color:var(--muted)}.how-list b{color:var(--ink)}
.short-version{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:10px 0}
.short-version h3{margin:0 0 8px;font-size:16px}.short-version ul{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px}
.full-agreement{margin:8px 0 4px}.full-agreement>summary{cursor:pointer;font-weight:650;color:var(--navy);padding:6px 0}
.big-when{font-size:19px;font-weight:750;margin:4px 0 10px}
.pickup{list-style:none;padding:0;margin:10px 0;display:grid;gap:8px}.pickup li{line-height:1.45}
.drive-live>.drive-step{margin-top:0}

/* The concierge matches Andover Ops' assistant: a round button in the corner
   (the spark; a cross when open), the chat as a card above it, a sheet on phones. */
.concierge{right:20px;bottom:20px;z-index:50}
.concierge>summary,.concierge[open]>summary{width:56px;height:56px;padding:0;margin:0 0 0 auto;border-radius:50%;justify-content:center;gap:0;font-size:0;background:var(--navy);box-shadow:0 8px 24px rgba(20,21,26,.28)}
.concierge>summary:hover{background:var(--navy-2)}
.concierge>summary svg{width:24px;height:24px}.concierge>summary .c-gauge{width:34px;height:34px}
.concierge .c-x,.concierge[open] .c-spark{display:none}.concierge[open] .c-x{display:block}
.concierge[open]>summary::after{content:none}
.concierge .chat{position:absolute;right:0;bottom:68px;width:min(400px,calc(100vw - 32px));height:min(640px,calc(100dvh - 110px));border-radius:var(--r-lg);box-shadow:0 18px 48px rgba(20,21,26,.25)}
.chat header{background:#fff;color:var(--ink);border-bottom:1px solid var(--line);padding:12px 14px;gap:1px}
.chat header strong{font-size:15px}.chat header span{color:var(--muted);font-size:12px}
.concierge .log{padding:12px;gap:8px}
.concierge .ask{border-top:0;margin:0 10px 10px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1)}
.concierge .chips{flex-wrap:nowrap;margin:0;padding-bottom:8px;scrollbar-width:none}
.concierge .ask input{border-radius:var(--r-md)}
.concierge .ask .send{border-radius:var(--r-md);background:var(--navy)}
@media(max-width:759px){
  .concierge{right:14px;bottom:14px}
  .concierge>summary,.concierge[open]>summary{width:52px;height:52px;padding:0;font-size:0}
  .concierge .chat{position:fixed;left:8px;right:8px;width:auto;bottom:78px;height:min(72dvh,600px)}
}
@media(max-width:999px){
  body:has(.stick) .concierge{bottom:84px}
  body:has(.stick) .concierge .chat{bottom:148px;height:min(62dvh,560px)}
}
@media(min-width:760px) and (max-width:999px){body:has(.stick) .concierge .chat{position:absolute;bottom:68px}}
@media print{.concierge{display:none}}
.chat .lead .grid3{display:grid;grid-template-columns:72px 1fr 1fr;gap:6px}.chat .lead .grid3 label{min-width:0}
.msg.staff{background:var(--tint-green-soft);border:1px solid var(--green-line);align-self:flex-start;border-bottom-left-radius:4px}
.msg.staff .staff-who{font-size:12px;font-weight:700;color:var(--green-ink);margin-bottom:2px}
.desk-ask .pair{display:grid;grid-template-columns:1fr 1fr;gap:6px}.desk-ask .pair label{min-width:0}
.desk-sent{margin:6px 0 0}
/* Concierge buttons under a reply, and the part of the page a "Show me" lights up. */
.chat-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chat-act{display:inline-flex;align-items:center;min-height:36px;padding:6px 12px;border-radius:var(--r-pill);border:1.5px solid var(--navy);background:#fff;color:var(--navy);font:600 13.5px/1.2 inherit;text-decoration:none;cursor:pointer}
.chat-act:hover{background:var(--navy);color:#fff}
#photos,#equipment,#details,#after-hours,#similar,main form.lead{scroll-margin-top:96px}
.c-spot{animation:c-spot 2.6s ease-out}
@keyframes c-spot{0%,40%{box-shadow:0 0 0 4px rgba(46,49,146,.55);border-radius:var(--r)}100%{box-shadow:0 0 0 4px rgba(46,49,146,0)}}
@media (prefers-reduced-motion:reduce){.c-spot{animation:none;outline:3px solid rgba(46,49,146,.6)}}
/* Touch screens: everything a finger must hit at least 44px tall (links in the footer, the
   menu, the cards' "→" links, the call button); a computer keeps the tighter look. */
@media(pointer:coarse){
  .foot a{display:inline-block;padding:9px 0}
  .menu summary{min-height:44px;display:flex;align-items:center}
  .links a{padding:12px 4px}
  .top .call{min-height:44px;align-items:center}
  .perk a,.row-head a{display:inline-flex;align-items:center;min-height:44px}
}
/* Phones: room under the footer for the chat button, so it never covers the last line */
@media(max-width:759px){.foot{padding-bottom:96px}}
/* A car's story: the owner's note and the mechanic's, in their words. */
.story figure{margin:0 0 18px;padding:18px 20px;background:var(--soft);border-radius:var(--r);border-left:4px solid var(--navy)}
.story .story-shop{border-left-color:var(--red)}
.story blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font-size:17px;line-height:1.55;color:var(--ink)}.story blockquote p{font-size:17px}.story blockquote p{margin:0 0 10px}.story blockquote p:last-child{margin:0}
.story figcaption{margin-top:10px;font-weight:600;color:var(--muted);font-size:15px}.story figcaption::before{content:"— "}
@media(max-width:600px){.story figure{padding:14px 14px}.story blockquote,.story blockquote p{font-size:16px}}
/* The showroom: the car cut out over the logo's gauge and a red sweep, on the left; who we are, on the right. */
.showroom{position:relative;overflow:hidden;color:#fff;background:radial-gradient(120% 90% at 22% 40%,var(--navy-2) 0%,var(--night-2) 52%,#000 100%)}
.sh-in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);grid-template-areas:'title title' 'stage copy';column-gap:64px;align-items:center;padding-top:56px;padding-bottom:64px}
.sh-title{grid-area:title;margin:0 0 32px;font-size:clamp(34px,3.6vw,52px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:#fff;text-wrap:balance;position:relative;z-index:2}
.sh-stage{grid-area:stage}.sh-copy{grid-area:copy}
.sh-stage{position:relative;aspect-ratio:1.45/1;display:grid;place-items:center}
.sh-gauge{position:absolute;width:96%;left:-2%;top:-12%;color:var(--silver);opacity:.3}
.sh-swoosh{position:absolute;left:-40%;width:146%;bottom:4%;height:36%;opacity:.95}
.sh-car{position:relative;width:100%;margin-top:14%;z-index:1}
.sh-car img{width:100%;height:auto;display:block;filter:drop-shadow(0 26px 22px rgba(0,0,0,.55)) drop-shadow(0 6px 6px rgba(0,0,0,.35))}
.sh-copy{max-width:440px;padding-top:24px}
.sh-lede{font-size:18px;line-height:1.55;color:var(--on-dark-muted);margin:0 0 40px;max-width:30em}.sh-lede a{color:#fff;white-space:nowrap}
.sh-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin:0 0 64px}
.sh-cta .btn{min-height:48px;padding:14px 26px}
.sh-call{color:var(--on-dark-muted);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:2px}.sh-call:hover{color:#fff;border-color:#fff}
.sh-quote{margin:0;padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.sh-quote blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none;font-size:18px;line-height:1.45;color:#fff;font-style:italic;max-width:24em}
.sh-quote figcaption{margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red-bright)}
.btn.ghost-light{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7)}.btn.ghost-light:hover{background:rgba(255,255,255,.1)}
.find{background:var(--soft);padding:22px 0;border-bottom:1px solid var(--line)}
.find .quick{margin:0}
@media(max-width:980px){
  .sh-in{grid-template-columns:1fr;grid-template-areas:'title' 'stage' 'copy';gap:8px;padding-top:32px;padding-bottom:40px}
  .sh-title{margin-bottom:16px}
  .sh-copy{max-width:none;padding-top:8px}.sh-cta{margin-bottom:40px}
  .sh-stage{aspect-ratio:1.6/1}.sh-car{margin:10% 0 0;width:96%}
}
/* A page's header (stageHead): the words on the left; a cut-out photo for the page over the gauge on the right. */
.stage-head{position:relative;overflow:hidden;color:#fff;margin-bottom:56px;background:radial-gradient(110% 100% at 76% 45%,var(--navy-2) 0%,var(--night-2) 55%,#000 100%)}
.st-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:center;padding-top:48px;padding-bottom:48px;min-height:min(62vh,520px)}
.st-copy{max-width:520px;position:relative;z-index:2}
.st-copy h1{font-size:clamp(38px,4.4vw,60px);line-height:1.02;letter-spacing:-.03em;font-weight:800;margin:0;color:#fff;text-wrap:balance}
.st-lede{font-size:18px;line-height:1.55;color:var(--on-dark-muted);margin:24px 0 0;max-width:30em}
.st-cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 20px;margin:40px 0 0}.st-cta .btn{min-height:48px;padding:14px 26px}
.st-art{position:relative;aspect-ratio:1.5/1;display:grid;place-items:center}
.st-gauge{position:absolute;width:88%;right:-2%;top:-20%;color:var(--silver);opacity:.26}
.st-swoosh{position:absolute;left:-14%;width:150%;bottom:6%;height:34%;opacity:.95;-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 30%);mask-image:linear-gradient(90deg,transparent 4%,#000 30%)}
.st-obj{position:relative;z-index:1;width:54%;margin:8% 0 0 12%}
.st-obj img{width:100%;height:auto;display:block;filter:drop-shadow(0 22px 22px rgba(0,0,0,.5)) drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@media(max-width:899px){
  .st-in{grid-template-columns:1fr;gap:0;padding-top:32px;padding-bottom:16px;min-height:0}
  .st-art{aspect-ratio:1.5/1;margin-top:8px}.st-obj{width:50%;margin:8% 0 0 14%}
  .stage-head{margin-bottom:40px}
  /* The object sits whole above the stage's bottom edge, not cut off by it. */
  .st-art{aspect-ratio:1.35/1;overflow:visible}.st-obj{width:46%;margin:2% 0 6% 16%}
}
/* About: where it started, as a road of gauge blocks; the story beside Cam's words; the culture in three words. */
.road{list-style:none;margin:0 0 64px;padding:0;display:grid;gap:24px}
@media(min-width:760px){.road{grid-template-columns:repeat(3,1fr);gap:16px}}
.road li{display:grid;gap:8px;align-content:start}
.draw-pic{height:140px;display:flex;align-items:flex-end;margin-bottom:8px}
.draw-pic img{max-height:100%;max-width:80%;width:auto;height:auto;display:block}
/* Service: how a visit works, a drawing over each step. */
.draw-steps-wrap{margin-top:72px}.draw-steps-wrap h2{margin:0 0 32px}
.draw-steps{list-style:none;margin:0;padding:0;display:grid;gap:40px 32px}
@media(min-width:700px){.draw-steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.draw-steps{grid-template-columns:repeat(4,1fr)}}
.draw-steps li{display:grid;gap:8px;align-content:start}.draw-steps b{font-size:17px}.draw-steps li>span:last-child{color:var(--muted);font-size:15px;line-height:1.5}
.draw-steps .draw-pic{height:120px;padding-bottom:12px;border-bottom:3px solid var(--line)}
.road-bar{display:block;height:8px;background:var(--silver);margin-bottom:12px}.road li:last-child .road-bar{background:var(--red)}
.road b{font-size:clamp(36px,4vw,52px);line-height:1;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.road span{color:var(--muted);font-size:16px;line-height:1.5;max-width:28ch}
.ab-story{display:grid;gap:40px;align-items:start;margin-bottom:72px}
@media(min-width:900px){.ab-story{grid-template-columns:1.2fr 1fr;gap:64px}}
.ab-story .prose p{font-size:18px;line-height:1.65}
.pull{margin:0;padding-left:24px;border-left:4px solid var(--red)}
.pull blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font-size:clamp(22px,2.2vw,28px);line-height:1.35;letter-spacing:-.01em;font-weight:600;color:var(--ink)}
.pull figcaption{margin-top:16px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.values{background:var(--soft);padding:56px 0 64px}
.values h2{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.values ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 40px}
.values li{font-size:clamp(36px,5.4vw,72px);line-height:1.05;letter-spacing:-.035em;font-weight:800;color:var(--ink)}
/* Contact: three ways to reach us, big enough to tap. */
.ways{display:grid;gap:16px;margin-bottom:48px}
@media(min-width:760px){.ways{grid-template-columns:repeat(3,1fr)}}
.way{display:grid;grid-template-columns:48px 1fr;gap:2px 16px;align-items:center;padding:20px;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;box-shadow:var(--sh-1);text-decoration:none;color:var(--ink);transition:transform .18s,box-shadow .18s}
.way:hover{transform:translateY(-3px);box-shadow:var(--sh-2)}
.way .perk-ico{grid-row:span 2}.way b{font-size:18px}.way span:last-child{color:var(--muted);font-size:15px;overflow-wrap:anywhere}
/* Service */
@media(min-width:1000px){.perks.perks-3{grid-template-columns:repeat(3,1fr)}}
.stage-head+.perks{margin-top:0}
.band+.split{margin-top:56px}
.split>div>.lead:first-child{margin-top:0}
/* A card with drawn art on top (art.js spotArt): the scene on the showroom's dark ground, the words below. */
.perk.has-art{padding:0;gap:0;overflow:hidden}
.perk-art{height:112px;display:grid;place-items:center;background:radial-gradient(120% 140% at 30% 20%,var(--navy-glow) 0%,var(--night-navy) 60%,var(--night) 100%)}
.perk-art .spot{height:100%;width:auto;max-width:100%;display:block}
.perk-body{display:flex;flex-direction:column;gap:6px;flex:1;padding:20px 22px 22px}
.perk-body h2{margin:0}
@media(max-width:759px){
  .perk.has-art{display:flex;flex-direction:row;padding:0}
  .perk.has-art .perk-art{height:auto;width:112px;flex:none}
  .perk.has-art .perk-body{padding:16px 16px 14px}
}
/* The concierge's name with its mark: the gauge, as on its button. */
.chat .c-title{display:flex;align-items:center;gap:10px}
.c-mark{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;flex:none}.c-mark svg{width:22px;height:22px}
.fin-go{margin-top:48px}
/* Financing: what to bring, and the questions we hear. */
.fin-more{display:grid;gap:40px;margin-top:56px}
@media(min-width:860px){.fin-more{grid-template-columns:1fr 1.2fr;gap:64px}}
.fin-more h2{margin:0 0 16px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ticks li{position:relative;padding-left:32px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;background:var(--red)}
.ticks li::after{content:"";position:absolute;left:6px;top:7px;width:8px;height:5px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:rotate(-45deg)}
.fin-trade{margin:20px 0 0}.fin-trade a{font-weight:650;text-decoration:none}
.faq{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;font-weight:650;padding:14px 32px 14px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:10px;font-size:22px;color:var(--navy)}
.faq[open] summary::after{content:"\2212"}
.faq p{margin:0 0 16px;color:var(--muted)}
.btn-line{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}.btn-line a:not(.btn){font-weight:650;text-decoration:none}
.road .draw-pic{height:150px;margin-bottom:-2px}
/* Home: find us. The map fills the bottom of the page; Andover's own pin (the gauge, the logo above it)
   sits on the business, which the map centers on, and opens the address and hours beside it.
   The reviews scroll along the bottom, over the map. On phones the details sit under the map. */
.find-us{position:relative;width:calc(100% - 32px);max-width:1088px;margin:96px auto 0;height:min(100vh,860px);min-height:720px;overflow:hidden;background:var(--soft);border-radius:var(--r-lg);box-shadow:var(--sh-1)}
.fu-map{position:absolute;inset:0;width:100%;height:100%;border:0}
.fu-over{position:absolute;inset:0;pointer-events:none}
.fu-over>*{pointer-events:auto}
.fu-pin{position:absolute;left:50%;top:50%;width:0;height:0;z-index:2}
.fu-pin>summary{list-style:none;cursor:pointer;position:absolute;left:0;bottom:4px;width:max-content;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px}
.fu-pin>summary::-webkit-details-marker{display:none}
.fu-pin>summary:focus-visible{outline:none}.fu-pin>summary:focus-visible .fu-mark{outline:3px solid var(--red);outline-offset:4px}
.fu-logo{display:block;background:#000;border-radius:var(--r);padding:2px 6px;box-shadow:0 8px 20px rgba(20,21,26,.3)}.fu-logo img{display:block;width:150px;max-width:none;height:auto}
.fu-mark{width:56px;height:56px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--navy);border:3px solid #fff;display:grid;place-items:center;box-shadow:-4px 6px 16px rgba(20,21,26,.35);transition:transform .18s}
.fu-mark svg{width:30px;height:30px;color:#fff;transform:rotate(45deg)}
.fu-pin>summary:hover .fu-mark,.fu-pin[open] .fu-mark{transform:rotate(-45deg) scale(1.08)}
.fu-pin>summary::after{content:"";position:absolute;left:50%;bottom:-17px;width:26px;height:10px;margin-left:-13px;border-radius:50%;background:rgba(200,16,46,.35);animation:fu-pulse 2.4s ease-out infinite;z-index:-1}
@keyframes fu-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.6);opacity:0}}
@media(prefers-reduced-motion:reduce){.fu-pin>summary::after{animation:none}}
.fu-card{background:#fff;border-radius:var(--r-lg);box-shadow:0 18px 44px rgba(20,21,26,.22);padding:28px}
.fu-card h2{margin:0 0 14px}.fu-card .hours{margin:18px 0 0}.fu-card .btn-line{margin-top:24px}
.fu-pin .fu-card{position:absolute;left:96px;bottom:24px;width:340px}
.fu-below{display:none}
.fu-reviews{position:absolute;left:0;right:0;bottom:40px}
.fu-reviews .reviews{margin:0;padding:0;background:none;border:0}
.fu-reviews .rv-head{display:flex;width:max-content;max-width:calc(100% - 32px);margin:0 auto 20px;padding:8px 18px;background:rgba(255,255,255,.94);border-radius:var(--r-pill);box-shadow:var(--sh-1);align-items:center}
.fu-reviews .rv-head h2{font-size:16px}
.fu-reviews .rv-track{-webkit-mask-image:none;mask-image:none}
.fu-reviews .rv{width:300px;margin:0 12px;padding:20px;gap:12px;box-shadow:0 12px 30px rgba(20,21,26,.18);border:0}
.fu-reviews .rv blockquote{font-size:14.5px;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
@media(max-width:860px){
  .find-us{width:auto;max-width:none;margin:72px 0 0;border-radius:0;box-shadow:none;height:auto;min-height:0;overflow:visible;background:none;display:flex;flex-direction:column}
  .fu-map{position:relative;height:400px;display:block;order:0}
  .fu-over{position:static;order:2}
  .fu-pin{top:200px}.fu-pin .fu-card{display:none}.fu-pin>summary{cursor:default}
  .fu-below{display:block;order:1;padding:0 16px;margin-top:20px}
  .fu-reviews{position:static;margin-top:40px;padding:40px 0 48px;background:var(--soft)}
  .fu-reviews .rv-head{border-radius:var(--r-lg);flex-wrap:wrap}
  .fu-reviews .rv{width:270px}
}
/* Home: the 5-star Google reviews, a slow loop (paused on hover; still for reduced motion). */
.reviews{padding:56px 0 64px;background:var(--soft);border-top:1px solid var(--line)}
.rv-head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:8px 24px;margin-bottom:28px}
.rv-head h2{margin:0}.rv-head p{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:8px;color:var(--muted)}.rv-head b{font-size:20px;color:var(--ink)}.rv-head a{font-weight:650;text-decoration:none}
.rv-track{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.rv-belt{display:flex;width:max-content;animation:rv-loop 54s linear infinite}.rv-belt.rv-n8{animation-duration:72s}.rv-belt.rv-n10{animation-duration:90s}
.rv-belt:hover,.rv-belt:focus-within{animation-play-state:paused}
.rv-set{display:flex}
.rv{width:340px;margin:0 8px;padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);display:flex;flex-direction:column;gap:14px}
.rv blockquote{margin:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0;font-size:15.5px;line-height:1.55;color:var(--ink);flex:1}
.rv figcaption{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}.rv figcaption a{color:var(--ink);font-weight:650;text-decoration:none}
@keyframes rv-loop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.rv-belt{animation:none}.rv-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.rv-set[aria-hidden]{display:none}}
@media(max-width:600px){.rv{width:280px}}
/* Home: the after-hours steps, a drawing on a white tile in each dark card. */
.step-draw{display:flex;align-items:center;justify-content:center;height:132px;padding:14px;margin-bottom:6px;background:#fff;border-radius:var(--r);overflow:hidden}
.step-draw img{max-height:104px;max-width:100%;width:auto;height:auto;display:block}
@media(max-width:759px){.steps-row li:has(.step-draw){grid-template-columns:1fr;gap:8px}}
@media(min-width:1000px){.draw-steps.draw-3{grid-template-columns:repeat(3,1fr)}}
.wrap.narrow>.draw-steps{margin:8px 0 40px}
/* Sell your car: the form beside what to have ready, then the questions. */
.sell-form{margin-top:72px;scroll-margin-top:96px}.sell-form .visit h2{margin-top:0}
.sell-faq{margin-top:64px}.sell-faq .faq{max-width:760px}.sell-faq h2{margin:0 0 16px}
/* Home: the two closing cards, each with its line drawing in place of an icon. */
.cta-draw{flex:none;width:112px;height:72px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--r);padding:8px 10px}
.cta-draw img{max-width:100%;max-height:56px;width:auto;height:auto;display:block}
@media(min-width:700px){.draw-steps.draw-2{grid-template-columns:repeat(2,1fr)}}
.drive .draw-steps{margin:16px 0 28px}
/* The after-hours booking page: How it works as one row of steps, above the form. */
.td-how-h{margin:28px 0 0}
.drive .td-steps{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:16px 0 32px}
.td-steps .draw-pic{height:88px;padding-bottom:10px}
.td-steps b{font-size:15px}.td-steps li>span:last-child{font-size:13.5px}
@media(max-width:640px){
  .drive .td-steps{grid-template-columns:1fr;gap:14px}
  .td-steps li{grid-template-columns:72px 1fr;column-gap:14px;row-gap:2px;align-items:center}
  .td-steps .draw-pic{grid-row:span 2;height:60px;padding:0;border:0;margin:0;justify-content:center}
}
/* Contact: each way to reach us with its line drawing. */
.way:has(.way-draw){grid-template-columns:88px 1fr}
.way-draw{grid-row:span 2;width:88px;height:72px;display:flex;align-items:center;justify-content:center;background:var(--soft);border-radius:var(--r);padding:8px}
.way-draw img{max-width:100%;max-height:56px;width:auto;height:auto;display:block}
.way:has(.way-draw) span:last-child{overflow-wrap:normal}

/* --- Layout pass (designer audit, 2026-10-04) ---------------------------------------------- */
/* On a phone, a step or a year of the story is a row: the drawing on the left, the words beside it; no hole to its right. */
@media(max-width:699px){
  .draw-steps{gap:22px}.draw-steps li,.road li{grid-template-columns:92px minmax(0,1fr);grid-template-areas:"pic title" "pic text";column-gap:16px;row-gap:4px;align-items:center}
  .draw-steps .draw-pic,.road .draw-pic{grid-area:pic;height:auto;max-height:92px;padding:0;border:0;margin:0;align-items:center;justify-content:center}
  .draw-steps .draw-pic img,.road .draw-pic img{max-width:100%;max-height:92px}
  .draw-steps b,.road b{grid-area:title}.draw-steps li>span:last-child,.road span{grid-area:text}.road-bar{display:none}.road{gap:20px}.road b{font-size:30px}
  .steps-row li{grid-template-columns:64px minmax(0,1fr);grid-template-areas:"pic title" "pic text";column-gap:14px;row-gap:4px;align-items:center;padding:14px 16px}
  .steps-row .step-draw{grid-area:pic}.steps-row b{grid-area:title}.steps-row li>span:last-child{grid-area:text}
}
/* Home: the search floats over the hero's edge as a card, and the numbers sit under it as one quiet line, not a band of their own. */
.find{background:none;border:0;padding:0;position:relative;z-index:2;margin-top:-30px}
.find .quick{background:#fff;border-radius:var(--r-lg);box-shadow:var(--sh-2);padding:16px 18px;margin:0}
.find .quick label{color:var(--muted)}
.facts{background:none;color:var(--ink)}
.facts-in{display:flex;flex-wrap:wrap;gap:8px 28px;padding:16px 0 0;justify-content:center}
.facts p{display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}.facts b{font-size:16px;color:var(--ink)}.facts span{font-size:14px;color:var(--muted)}
.perks{margin-top:40px}
/* A form beside a short card: two columns of fields on a computer, so the pair sit level. */
@media(min-width:860px){
  .split .lead{grid-template-columns:1fr 1fr;gap:12px 16px}.split .lead>h2,.split .lead>label:has(textarea),.split .lead>button,.split .lead>.note,.split .lead>.two,.split .lead>p{grid-column:1/-1}
  .side-stack{display:grid;gap:20px;align-content:start}.side-stack .visit{margin:0}.side-stack .sell-faq h2{margin-top:0}
}
.side-stack{display:grid;gap:20px}.mini-map{width:100%;aspect-ratio:4/3;border:0;border-radius:var(--r-lg);box-shadow:var(--sh-1);display:block}
/* A car's page on a phone: the sticky bar carries the two buttons; the card doesn't repeat them. */
@media(max-width:999px){.vdp-side .cta{display:none}}
/* A supporting fact under the hero copy: one line, a thin rule above, so the column carries its weight on a wide screen. */
.st-fact{margin:36px 0 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);font-size:15.5px;line-height:1.5;color:var(--on-dark-muted);max-width:34em}.st-fact b{color:#fff;font-weight:650}
@media(max-width:899px){.st-fact{margin-top:24px;padding-top:14px}}
/* The floating chat button never covers the end of a line on a phone: text gets a gutter on its side. */
@media(max-width:899px){.wrap{padding-right:max(16px,env(safe-area-inset-right))}.road li,.draw-steps li,.steps-row li,.perk,.ways .way,.lead,.visit,.faq,.ticks li,.story,.split>*{scroll-margin-right:72px}
  .road li>span,.draw-steps li>span:last-child,.story p,.story blockquote,.fin-more p,.sell-faq p,.faq p,.ticks li,.perk p{padding-right:60px}}
/* Inventory: every sixth card from the first spans two columns on a wide screen, for a rhythm down the page. */
@media(min-width:1000px){.grid.rhythm{grid-auto-flow:dense}.grid.rhythm .card:nth-child(7n+1),.grid.rhythm .card:nth-child(7n){grid-column:span 2}.grid.rhythm .card:is(:nth-child(7n+1),:nth-child(7n)) .ph{aspect-ratio:2/1}.grid.rhythm .card:is(:nth-child(7n+1),:nth-child(7n)) h3{font-size:20px}.grid.rhythm .card:is(:nth-child(7n+1),:nth-child(7n)) .price{font-size:24px}}
/* The service request: taps for the pattern, and photos or a video of the problem. */
.lead .chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0;align-items:flex-start;align-content:flex-start}
.lead .chips legend{font-size:14px;color:var(--muted);padding:0;margin-bottom:6px;float:left;width:100%}
.chip{position:relative;display:inline-flex}.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid var(--line);border-radius:var(--r-pill);background:#fff;color:var(--ink);font-size:14px;font-weight:600;cursor:pointer}
.chip input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}.chip input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.lead .three{display:grid;grid-template-columns:88px 1fr 1fr;gap:10px}
.media-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--muted);font-size:14px}
.media-lead{flex:1 1 100%;color:var(--ink);font-weight:600}
.media-btn{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid var(--navy);border-radius:var(--r-pill);color:var(--navy);font-weight:600;cursor:pointer;background:#fff}
.media-btn:focus-within{outline:3px solid var(--red);outline-offset:2px}
.media-hint{flex:1 1 100%;font-size:13px}.media-note:empty{display:none}.media-note{flex:1 1 100%;color:var(--red);font-weight:600}
.media-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}.media-list:empty{display:none}
.media-item{display:grid;grid-template-columns:48px minmax(0,1fr) auto 28px;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:14px}
.media-item img,.media-item video{width:48px;height:48px;object-fit:cover;border-radius:var(--r-sm);background:var(--soft)}
.media-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.media-state{color:var(--muted);white-space:nowrap}.media-item.is-ok .media-state{color:var(--green)}.media-item.is-bad .media-state{color:var(--red);cursor:pointer;white-space:normal}
.media-item progress{grid-column:2/4;width:100%;height:6px;accent-color:var(--green)}
.media-x{width:28px;height:28px;border:0;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer;border-radius:var(--r-sm)}
.lead-more{display:grid;gap:10px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line)}
@media(max-width:560px){.lead .three{grid-template-columns:72px 1fr 1fr}.lead .facts{grid-template-columns:1fr}}
/* The car's walk-around video, from Stream. */
.panel.video iframe{width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:var(--r);background:#000;display:block}

/* Patterns borrowed from the Tailwind Plus marketing kit (stats grid, bento, equal cards, split call-to-action),
   written in this stylesheet with its own tokens, so the page keeps its weight. */
h1,h2,.band h2,.sh-title{text-wrap:balance}
.sh-title{letter-spacing:-.02em}
/* The stats band: one rounded block, each number first, its words under it (kit: stats, simple grid). */
.stats{margin-top:28px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0;overflow:hidden;border-radius:var(--r-xl);background:var(--line)}
@media(min-width:900px){.stats-grid{grid-template-columns:repeat(4,1fr)}}
.stats-grid>div{display:flex;flex-direction:column;gap:4px;padding:22px 20px;background:var(--soft)}
.stats-grid dd{margin:0;font-size:clamp(22px,2.4vw,28px);font-weight:750;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.stats-grid dt{font-size:14px;color:var(--muted);line-height:1.35}
.stats-grid .stars{display:inline-flex;gap:2px;color:var(--star)}
/* The bento: on a wide screen the test drive and the shop stand tall at the ends, the two quick ones stack
   between them; the outer corners round more than the inner (kit: three-column bento). */
@media(min-width:1000px){
  .bento{grid-template-columns:1.15fr 1fr 1.15fr;grid-template-rows:auto auto;gap:14px}
  .bento .bento-night{grid-row:span 2;border-radius:28px var(--r-lg) var(--r-lg) 28px}
  .bento .bento-shop{grid-row:span 2;border-radius:var(--r-lg) 28px 28px var(--r-lg)}
  .bento .bento-chat{grid-column:2;grid-row:1}.bento .bento-card{grid-column:2;grid-row:2}
  .bento .bento-night,.bento .bento-shop{padding:26px}
  .bento .bento-night .perk-art,.bento .bento-shop .perk-art{height:200px}
  .bento .bento-night h2,.bento .bento-shop h2{font-size:21px}
  .bento .bento-chat .perk-art,.bento .bento-card .perk-art{height:96px}
  .bento .bento-chat .perk-body,.bento .bento-card .perk-body{padding:16px 20px 18px}
}
.bento .perk{position:relative}
.bento .perk>a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.bento .perk:hover{border-color:var(--navy);box-shadow:var(--sh-2)}
/* Featured cars: every card as tall as its row, the price on the same line across the row. */
.grid .card{display:flex}.grid .card a{display:flex;flex-direction:column;width:100%}
.grid .card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.grid .card .price{margin-top:auto;padding-top:6px}
/* The closing pair: two panels, the drawing large on top, the words below (kit: call-to-action with image tiles). */
.cta-split .cta-card{flex-direction:column;align-items:stretch;gap:0;padding:0;overflow:hidden;background:#fff;border-radius:var(--r-xl)}
.cta-split .cta-draw{display:flex;align-items:flex-end;justify-content:center;height:150px;padding:18px 24px 0;background:var(--soft);border-bottom:1px solid var(--line)}
.cta-split .cta-card .cta-draw{width:auto;height:150px;flex:none}.cta-split .cta-card .cta-draw img{width:auto;height:132px;max-height:none;max-width:100%;object-fit:contain}
.cta-split .cta-card>span:nth-child(2){padding:18px 22px 20px;gap:4px}.cta-split .cta-card>span:nth-child(2)>b{font-size:19px}
.cta-split .cta-card>span:last-child{position:absolute;right:20px;bottom:18px}.cta-split .cta-card{position:relative}
.cta-split .cta-card:hover{box-shadow:var(--sh-2);background:#fff}

/* The phone menu is a sheet over the page (kit: header with mobile menu): every link a full row the thumb
   can reach, the call at the bottom, the one button that opened it now reads Close and stays put. */
.menu[open] summary{position:fixed;top:12px;right:16px;z-index:32;font-size:0;background:rgba(255,255,255,.1)}
.menu[open] summary::after{content:"Close";font-size:16px}
.menu[open] nav{position:fixed;inset:0;border:0;border-radius:0;min-width:0;padding:76px 16px 20px;background:var(--night);box-shadow:none;display:flex;flex-direction:column;gap:0;z-index:31;overflow:auto}
.menu[open] nav a{color:#fff;font-size:22px;font-weight:650;padding:15px 12px;border-bottom:1px solid var(--line-on-dark);border-radius:0}
.menu[open] nav a:hover{background:rgba(255,255,255,.06)}
.menu[open] nav a:last-child{margin-top:auto;border:0;background:var(--red);border-radius:var(--r);text-align:center;font-size:18px;padding:16px}

/* Edges, text and motion (from the kits): hairline edges, tight balanced headings, no widows, a light along
   solid buttons, one timing for every change. */
:root{--line:rgba(20,21,26,.09);--edge:inset 0 1px rgba(255,255,255,.15);--dur:150ms;--ease:cubic-bezier(.2,0,0,1)}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance}
p,li,dd{text-wrap:pretty}
.btn,button,.quick button,.sh-cta .btn{box-shadow:var(--edge)}
.btn,button,.chips a,.menu nav a,.cta-card,.perk,.links a,.thumbs a,.stats-grid>div{transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease),transform var(--dur) var(--ease)}
.card a{transition:transform .18s var(--ease),box-shadow .18s var(--ease)}
@media(prefers-reduced-motion:reduce){.btn,button,.chips a,.menu nav a,.cta-card,.perk,.links a,.card a{transition:none}}

/* Reviews as a grid of cards (kit: testimonials grid), still: easier to read on a phone than a belt. */
.rv-grid{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:640px){.rv-grid{grid-template-columns:1fr 1fr}}@media(min-width:1000px){.rv-grid{grid-template-columns:repeat(3,1fr)}}
.rv-grid .rv{width:auto;margin:0}
/* The makes on the lot, as a quiet row of names (kit: logo cloud). */
.makes-row{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;margin:18px 0 0;font-size:15px;font-weight:650;letter-spacing:.02em}
.makes-row a{color:var(--muted);text-decoration:none;padding:6px 2px}.makes-row a:hover{color:var(--navy)}
/* Questions as the kit's accordion: bigger question, the answer quiet, a chevron that turns. */
.faq{padding:0}.faq summary{font-size:17px;padding:18px 36px 18px 0}.faq summary::after{content:"";width:10px;height:10px;border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(45deg);top:22px;right:8px;transition:transform var(--dur) var(--ease)}
.faq[open] summary::after{content:"";transform:rotate(225deg);top:28px}.faq>p{margin:0 0 18px;color:var(--muted);max-width:64ch}

/* A page header's numbers (kit: header with stats): a row of figures under the title, on the dark band. */
.ph-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:26px 0 0;overflow:hidden;border-radius:var(--r-lg);background:rgba(255,255,255,.12)}
@media(min-width:900px){.ph-stats{grid-template-columns:repeat(4,1fr)}}
.ph-stats>div{display:flex;flex-direction:column;gap:2px;padding:14px 18px;background:rgba(255,255,255,.06)}
.ph-stats dd{margin:0;font-size:clamp(18px,2vw,22px);font-weight:750;letter-spacing:-.02em;color:#fff}.ph-stats dt{font-size:13px;color:var(--on-dark-muted)}

/* Prices in ink: the red is for the one thing to do (Search, Call), not for every number on the page. */
.card .price,.big-price{color:var(--ink)}
/* A page's first screen has something to do (kit: header with call to action): Financing, Contact and the Guarantee open with a button. */
.st-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin:24px 0 0}
.st-cta .btn{min-height:48px;padding:14px 24px}
/* Links that stand alone are a thumb tall on a touch screen. */
@media(pointer:coarse){
  .sh-call,.st-cta a:not(.btn),.makes-row a,.preview a,.vdp-side a:not(.btn),.fin-go a:not(.btn),.btn-line a:not(.btn),.hours-card a,.fu-card a:not(.btn){display:inline-flex;align-items:center;min-height:44px}
  .preview a{padding:0 6px}
}
/* On Contact the first screen's right edge is the Call card: the concierge goes to the left there. */
@media(max-width:899px){body[data-page="contact-us"] .concierge{right:auto;left:16px}}

@media(pointer:coarse){
  .chips a{min-height:44px;display:inline-flex;align-items:center}
  main p>a:only-child:not(.btn),.story a,.st-fact a{display:inline-flex;align-items:center;min-height:44px}
}
/* About: the team (from Ops), a row of faces above Our culture */
.team{margin:0 0 72px}.team h2{margin:0 0 24px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.tm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:28px 20px}
.tm-grid li{display:grid;gap:4px;justify-items:start;align-content:start}
.tm-pic{display:block;width:112px;height:112px;border-radius:50%;overflow:hidden;background:var(--soft);box-shadow:var(--sh-1);margin-bottom:8px}
.tm-pic img{width:100%;height:100%;object-fit:cover;display:block}.tm-pic i{display:grid;place-items:center;width:100%;height:100%;font-style:normal;font-weight:800;font-size:34px;letter-spacing:-.02em;color:var(--navy)}
.tm-grid b{font-size:18px;letter-spacing:-.01em;color:var(--ink)}.tm-grid span{font-size:14px;color:var(--muted)}.tm-grid p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--muted);text-wrap:pretty;max-width:30ch}
@media(max-width:599px){.tm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tm-pic{width:96px;height:96px}}