/*
Theme Name: DriveX Auto
Theme URI: https://www.drivexautos.com/
Author: Shawn Williams
Description: Custom theme for DriveX Auto - woman-owned used car dealership and repair shop in Plainville, CT. Light build. Inventory is driven by the Automotive Inventory Importer "vehicles" post type, with a bundled fallback set.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: drivex-auto
Tags: custom-theme, automotive, one-page
*/


:root{
  --asphalt:#0A090C; --asphalt-2:#131117; --asphalt-3:#1B1822; --hair:#2A2634;
  --chrome:#E8EAF0; --steel:#8E8A9B; --steel-2:#635E72;
  --mag:#FF2E93; --mag-d:#C9146E; --mag-deep:#8E0447; --ink:#0A090C; --paper:#FFFFFF; --blush-2:#FFF5FA; --violet:#7B2FF7; --mint:#5FD0A0;
  --d:"Saira Condensed",Impact,"Haettenschweiler","Arial Narrow",sans-serif;
  --b:Archivo,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --m:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --collage:url("assets/img/drivex-auto-vintage-car-dealership-collage-plainville-ct.jpg");
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--asphalt);color:var(--chrome);font-family:var(--b);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--mag);outline-offset:3px}
.wrap{width:min(1280px,100% - 48px);margin-inline:auto}
@media(max-width:640px){.wrap{width:calc(100% - 28px)}}

/* type roles */
.disp{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.88;letter-spacing:-.005em;text-wrap:balance}
.lbl{font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--steel)}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}
h2.disp{font-size:clamp(38px,6vw,80px)}

/* chrome text treatment */
.chrome-t{
  background:linear-gradient(177deg,#FFFFFF 0%,#C3C8D6 32%,#6E7488 49%,#F2F4FA 52%,#AFB5C6 68%,#7D8296 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));
}
.mag-t{background:linear-gradient(177deg,#FFB4DC,#FF2E93 46%,#B70E62 54%,#FF6FB6);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}

/* buttons — hard edges, sheared accent */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 26px;font-family:var(--d);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.06em;position:relative;transition:.16s ease;border:1px solid transparent}
.btn-m{background:var(--mag);color:#12030A}
.btn-m:hover{background:#FF57A9;transform:translateY(-2px);box-shadow:0 10px 30px rgba(255,46,147,.35)}
.btn-g{border-color:var(--hair);color:var(--chrome);background:rgba(255,255,255,.02)}
.btn-g:hover{border-color:var(--steel);background:rgba(255,255,255,.06)}
.btn-s{height:40px;padding:0 16px;font-size:14px}

/* ── motion ─────────────────────────────────────────────────
   .rv is only ever applied BY JS, and only to elements already
   below the fold — so the page at rest is fully visible, and if
   the script never runs nothing is hidden.
   ─────────────────────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(20px)}
.rv-in{opacity:1;transform:none;
  transition:opacity .62s cubic-bezier(.22,.7,.3,1),transform .62s cubic-bezier(.22,.7,.3,1)}
.prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:90;pointer-events:none;
  background:linear-gradient(90deg,var(--mag),#A32BD6);box-shadow:0 0 14px rgba(255,46,147,.7);
  transition:width .1s linear}
@media(prefers-reduced-motion:reduce){
  .rv,.rv-in{opacity:1;transform:none;transition:none}
  .prog{display:none}
}

/* ── utility strip ── */
.strip{border-bottom:1px solid var(--hair);background:#07060A}
.strip .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:38px;font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.strip b{color:var(--chrome);font-weight:500}
.live{display:inline-flex;align-items:center;gap:7px}
.live i{width:6px;height:6px;background:var(--mint);border-radius:50%;box-shadow:0 0 0 3px rgba(95,208,160,.18)}
.strip .r{display:flex;gap:26px}
@media(max-width:880px){.strip .r span:first-child{display:none}}
@media(max-width:560px){.strip{display:none}}

/* ── header ── */
.hdr{position:sticky;top:0;z-index:70;background:rgba(10,9,12,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.hdr .wrap{display:flex;align-items:center;gap:32px;height:86px}
.logo img{height:64px;width:auto;filter:saturate(1.1) contrast(1.05) drop-shadow(0 2px 12px rgba(255,46,147,.35))}
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{padding:10px 14px;font-family:var(--d);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.05em;color:var(--steel);transition:.15s;position:relative}
.nav a:hover{color:var(--chrome)}
.nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;background:var(--mag);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a:hover::after{transform:scaleX(1)}
.hcta{display:flex;align-items:center;gap:16px}
.hcta .ph{display:block;font-family:var(--d);font-weight:900;font-size:22px;letter-spacing:.01em;line-height:1}
.hcta .ph span{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.2em;color:var(--steel);font-weight:500;margin-bottom:3px}
.burger{margin-left:auto;width:46px;height:46px;border:1px solid var(--hair);display:none;place-items:center}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--chrome);content:"";position:relative}
.burger span::before{position:absolute;top:-6px}.burger span::after{position:absolute;top:6px}
@media(max-width:1060px){.nav,.hcta{display:none}.burger{display:grid}}
.mob{display:none;border-bottom:1px solid var(--hair);background:var(--asphalt-2);position:sticky;top:86px;z-index:69}
.mob.on{display:block}
.mob a{display:block;padding:15px 0;border-bottom:1px solid var(--hair);font-family:var(--d);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.04em}
.mob .mrow{display:flex;gap:10px;padding:16px 0}
.mob .mrow .btn{flex:1}

/* ── hero: the pink band ── */
.hero{position:relative;overflow:hidden;background:var(--mag);border-bottom:0;padding:64px 0 0;color:var(--ink)}
.hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/drivex-auto-used-car-dealership-plainville-ct-hero.jpg") 50% 50%/cover no-repeat;
  opacity:.55;filter:saturate(.85) contrast(1.05)}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,46,147,.88) 0%,rgba(255,46,147,.72) 26%,rgba(255,46,147,.34) 52%,rgba(255,46,147,.50) 100%),
             linear-gradient(180deg,rgba(255,46,147,.46) 0%,rgba(255,46,147,.14) 34%,rgba(255,46,147,.20) 74%,rgba(255,46,147,.52) 100%)}
.hero .glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(900px 500px at 78% 4%,rgba(255,255,255,.34),transparent 62%),
             radial-gradient(700px 460px at 4% 96%,rgba(142,4,71,.30),transparent 66%)}
.hero .scan{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(10,9,12,.5) 0 1px,transparent 1px 4px);
  mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.sweep{position:absolute;top:0;bottom:0;width:34%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22) 45%,transparent);
  animation:sweep 9s linear infinite}
@keyframes sweep{0%{left:-40%}100%{left:110%}}
@media(prefers-reduced-motion:reduce){.sweep{animation:none;opacity:.18;left:20%}}
.hero .mark{position:absolute;inset:0;z-index:1;pointer-events:none;display:grid;place-items:center;overflow:hidden}
.hero .mark img{width:min(1180px,104%);max-width:none;opacity:.15;mix-blend-mode:luminosity;
  filter:contrast(1.2) brightness(1.15);transform:translate(9%,-4%);
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.35) 24%,#000 52%);
  mask-image:linear-gradient(100deg,transparent 4%,rgba(0,0,0,.35) 24%,#000 52%)}
@media(max-width:820px){.hero .mark img{width:158%;opacity:.13;transform:translate(4%,-2%)}}
.hero .wrap{position:relative;z-index:2}
.hgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:end;padding-bottom:56px}
@media(max-width:1000px){.hgrid{grid-template-columns:1fr;gap:36px;padding-bottom:40px}}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.kicker .bar{width:44px;height:3px;background:var(--ink);transform:skewX(-22deg)}
.hero .lbl{color:#33000F}
.hero h1{font-size:clamp(44px,6.6vw,92px);overflow-wrap:break-word;color:var(--ink)}
.hero h1 .l1{display:block}
.hero h1 .l2{display:block;margin-top:.04em}
.hero .chrome-t{color:var(--ink)}
.hero .mag-t{color:var(--blush-2)}
.hero p{color:#3B0417;font-size:17px;max-width:46ch;margin:26px 0 32px}
.hero p b{color:var(--ink);font-weight:700}
.hbtns{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn-g{border-color:var(--ink);color:var(--ink)}
.hero .btn-g:hover{background:var(--ink);color:var(--mag)}
.hstats{display:grid;grid-template-columns:repeat(3,auto);gap:34px;margin-top:44px;padding-top:26px;border-top:2px solid var(--ink);justify-content:start}
.hstats b{display:block;font-family:var(--d);font-weight:900;font-size:40px;line-height:1;color:var(--ink)}
.hstats .lbl{margin-top:7px;display:block;color:#33000F}
@media(max-width:560px){.hstats{grid-template-columns:1fr 1fr;gap:22px}}

/* photo well — black is the accent */
.well{position:relative;border:2px solid var(--ink);background:var(--ink);box-shadow:12px 12px 0 rgba(10,9,12,.22)}
.well::after{content:"";position:absolute;inset:0;pointer-events:none}
.well .corner{position:absolute;width:14px;height:14px;border:2px solid var(--mag);z-index:3}
.well .c1{top:-1px;left:-1px;border-right:0;border-bottom:0}
.well .c2{top:-1px;right:-1px;border-left:0;border-bottom:0}
.well .c3{bottom:-1px;left:-1px;border-right:0;border-top:0}
.well .c4{bottom:-1px;right:-1px;border-left:0;border-top:0}
.shot{aspect-ratio:16/10;display:grid;place-items:center;position:relative;overflow:hidden;background:#141119}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;filter:contrast(1.05) saturate(1.06);transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.shot:has(img)::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,9,12,.30) 0%,transparent 26%,transparent 58%,rgba(10,9,12,.62) 100%)}
.shot:has(img)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;box-shadow:inset 0 0 90px 22px rgba(10,9,12,.55)}
.stk:hover .shot img{transform:scale(1.03)}
.shot.nophoto::before,.shot.nophoto::after{display:none}
.shot.nophoto img{object-position:50% 50%;filter:none}
.stk:hover .shot.nophoto img{transform:none}
@media(prefers-reduced-motion:reduce){.shot img{transition:none}.stk:hover .shot img{transform:none}}
.slot{text-align:center;padding:24px}
.slot .lbl{display:block;margin-bottom:10px;color:var(--mag)}
.slot .big{font-family:var(--d);font-weight:700;font-size:26px;color:#6C6178;text-transform:uppercase;letter-spacing:.04em}
.slot .hint{font-family:var(--m);font-size:10.5px;color:#584E64;margin-top:8px;letter-spacing:.06em}
.well .cap{position:relative;z-index:4;display:flex;justify-content:space-between;align-items:flex-end;gap:16px;padding:20px 22px;border-top:2px solid var(--mag);background:var(--ink);color:var(--chrome)}
.well .cap h3{font-family:var(--d);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.well .cap .sub{margin-top:7px;color:#C79BB4}
.well .cap .pr{text-align:right;flex:0 0 auto}
.well .cap .pr b{font-family:var(--d);font-weight:900;font-size:34px;line-height:1;display:block;color:var(--mag)}
.tagpin{position:absolute;top:16px;left:16px;z-index:4;background:var(--mag);color:var(--ink);font-family:var(--m);font-size:10px;font-weight:700;letter-spacing:.16em;padding:6px 11px}

/* ── brand ticker ── */
.tick{border-bottom:1px solid var(--hair);background:#07060A;overflow:hidden;padding:16px 0}
.tick-in{display:flex;gap:52px;width:max-content;animation:roll 38s linear infinite;align-items:center}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tick-in{animation:none}}
.tick span{font-family:var(--d);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.1em;color:var(--steel-2);white-space:nowrap}
.tick span.k{color:var(--mag);font-size:13px;letter-spacing:.24em;font-family:var(--m);font-weight:700}

/* ── milestone ── */
.mile{position:relative;overflow:hidden;background:#0B0A0E;border-bottom:1px solid var(--hair)}
.mile::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--collage) 50% 50%/cover no-repeat}
.mile::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(58% 116% at 40% 50%,rgba(11,10,14,.72),rgba(11,10,14,.30) 72%,transparent 100%),
             linear-gradient(180deg,rgba(11,10,14,.62) 0%,rgba(11,10,14,.34) 42%,rgba(11,10,14,.86) 100%),
             radial-gradient(620px 320px at 92% 96%,rgba(123,47,247,.16),transparent 68%)}
.mile .wrap{position:relative;z-index:2;display:grid;grid-template-columns:auto 1fr auto;gap:44px;align-items:center;padding:54px 0}
@media(max-width:900px){.mile .wrap{grid-template-columns:1fr;gap:26px;padding:44px 0;text-align:center;justify-items:center}}
.mile .fig{font-family:var(--d);font-weight:900;font-size:clamp(88px,13.5vw,176px);line-height:1;padding-block:.04em;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:linear-gradient(177deg,#FFC4E2,#FF2E93 44%,#A9075A 53%,#FF7CC0);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 3px 0 rgba(0,0,0,.6))}
.mile .say h2{font-family:var(--d);font-weight:900;font-size:clamp(30px,4.4vw,54px);text-transform:uppercase;line-height:.92;color:var(--chrome)}
.mile .say p{color:var(--steel);font-size:15px;margin-top:12px;max-width:44ch}
@media(max-width:900px){.mile .say p{margin-inline:auto}}
.mile .say .lbl{display:block;margin-bottom:12px}
.stamp{flex:0 0 auto;border:3px solid var(--mag);color:var(--mag);padding:14px 20px;transform:rotate(-9deg);
  background:rgba(11,10,14,.55);backdrop-filter:blur(3px);
  font-family:var(--d);font-weight:900;font-size:34px;text-transform:uppercase;letter-spacing:.06em;line-height:1;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,46,147,.35)}
.stamp small{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.24em;font-weight:500;margin-top:7px;color:var(--steel)}
@media(max-width:900px){.stamp{transform:rotate(-5deg)}}

/* ── why choose ── */
.why{background:#0C0B10;border-bottom:1px solid var(--hair)}
.why .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
@media(max-width:960px){.why .wrap{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.why .wrap{grid-template-columns:1fr}}
.why .w{display:flex;gap:18px;align-items:flex-start;padding:34px 30px;border-left:1px solid var(--hair)}
.why .w:first-child{border-left:0;padding-left:0}
.why .w:last-child{padding-right:0}
@media(max-width:960px){
  .why .w{padding:28px 24px}
  .why .w:nth-child(odd){border-left:0;padding-left:0}
  .why .w:nth-child(-n+2){border-bottom:1px solid var(--hair)}
  .why .w:nth-child(even){padding-right:0}
}
@media(max-width:560px){
  .why .w{border-left:0;padding:26px 0}
  .why .w+.w{border-top:1px solid var(--hair)}
  .why .w:nth-child(-n+2){border-bottom:0}
}
.why svg{flex:0 0 40px;width:40px;height:40px;fill:none;stroke:var(--mag);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.why h3{font-family:var(--d);font-weight:900;font-size:20px;text-transform:uppercase;line-height:1;letter-spacing:.01em;margin-bottom:9px}
.why p{color:var(--steel);font-size:14px;line-height:1.55}

/* ── social ── */
.soc-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:24px}
@media(max-width:900px){.soc-grid{grid-template-columns:1fr}}
.follow{position:relative;overflow:hidden;border:1px solid var(--hair);padding:36px;display:flex;flex-direction:column;
  background:radial-gradient(130% 110% at 100% 0%,rgba(255,46,147,.22),transparent 62%),
             radial-gradient(110% 100% at 0% 100%,rgba(123,47,247,.18),transparent 66%),var(--asphalt-2)}
.follow .handle{font-family:var(--d);font-weight:900;font-size:clamp(30px,3.6vw,44px);text-transform:none;line-height:1;margin:14px 0 14px}
.follow p{color:var(--steel);font-size:14.5px;margin-bottom:26px;max-width:36ch}
.follow .btns{display:grid;gap:10px;margin-top:auto}
.follow .btns .btn{width:100%}
.follow .btn svg{width:18px;height:18px;fill:currentColor}
.follow .why{display:flex;gap:10px;align-items:center;font-family:var(--m);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mag);margin-bottom:22px}
.follow .why i{width:6px;height:6px;border-radius:50%;background:var(--mag);box-shadow:0 0 0 3px rgba(255,46,147,.2)}

.posts{border:1px solid var(--hair);background:var(--asphalt-2)}
.posts .ph{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:1px solid var(--hair)}
.posts .ph .lbl{color:var(--steel)}
.pt{display:flex;gap:18px;align-items:flex-start;padding:20px 26px;border-bottom:1px solid var(--hair);transition:background .15s}
.pt:last-child{border-bottom:0}
.pt:hover{background:rgba(255,46,147,.05)}
.pt svg{flex:0 0 30px;width:30px;height:30px;fill:none;stroke:var(--mag);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.pt h3{font-family:var(--d);font-weight:900;font-size:19px;text-transform:uppercase;line-height:1;margin-bottom:7px}
.pt p{color:var(--steel);font-size:13.5px;line-height:1.55}
.pt .tag{margin-left:auto;font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--steel-2);border:1px solid var(--hair);padding:5px 9px;white-space:nowrap;align-self:center}
@media(max-width:560px){.pt .tag{display:none}}

/* ── get approved band ── */
#approve{position:relative;overflow:hidden;background:#050308}
/* the source banner is 2.76:1 and its left half is solid black behind the baked-in type,
   so the whole frame is used and that half is simply covered — the car lands exactly where
   the reference has it, at full scale, with no cut edge */
#approve::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/get-approved-auto-financing-all-credit-plainville-ct.jpg") 50% 50%/cover no-repeat}
#approve::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,#050308 0%,#050308 48%,rgba(5,3,8,.94) 55%,rgba(5,3,8,.66) 63%,rgba(5,3,8,.24) 74%,transparent 86%),
             linear-gradient(180deg,rgba(5,3,8,.55) 0%,transparent 16%,transparent 68%,rgba(10,9,12,.75) 92%,#0A090C 100%)}
@media(max-width:900px){
  #approve::before{background-position:74% 50%}
  #approve::after{background:linear-gradient(180deg,rgba(5,3,8,.93) 0%,rgba(5,3,8,.86) 46%,rgba(5,3,8,.55) 78%,#0A090C 100%)}
}
#approve>.wrap{position:relative;z-index:2;width:min(1520px,100% - 56px);padding:74px 0 84px}
.apv{max-width:56%}
@media(max-width:900px){.apv{max-width:100%}}
.apv .lbl{display:block;margin-bottom:16px;color:var(--chrome);letter-spacing:.4em;font-size:12px}
.apv h2{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.82;letter-spacing:-.012em;
  transform:skewX(-9deg);transform-origin:left bottom;margin-bottom:22px}
.apv h2 span{display:block}
.apv h2 .w{color:var(--chrome);font-size:clamp(50px,7.2vw,112px)}
.apv h2 .p{color:var(--mag);font-size:clamp(62px,9.6vw,150px);margin-top:-.05em}
.apv .sub{font-family:var(--d);font-weight:700;font-size:clamp(21px,2.9vw,38px);text-transform:uppercase;
  letter-spacing:.17em;color:var(--chrome);margin-bottom:32px}
.apv-pts{display:flex;flex-wrap:wrap;margin-bottom:40px}
.apv-pts div{display:flex;align-items:center;gap:12px;padding:0 26px;border-left:1px solid rgba(255,46,147,.35)}
.apv-pts div:first-child{padding-left:0;border-left:0}
.apv-pts svg{flex:0 0 30px;width:30px;height:30px;fill:none;stroke:var(--mag);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.apv-pts b{font-family:var(--m);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--chrome);
  font-weight:500;line-height:1.5}
@media(max-width:640px){.apv-pts div{padding:0;border-left:0;flex:0 0 100%;margin-bottom:14px}}
.apv-cta{position:relative;display:inline-block}
.apv-cta::before{content:"";position:absolute;left:-46px;right:-46px;top:50%;height:1px;background:var(--mag);
  box-shadow:0 0 12px rgba(255,46,147,.8)}
.apv-cta a{position:relative;display:inline-flex;align-items:center;height:70px;padding:0 46px;
  background:var(--mag);color:#12030A;font-family:var(--d);font-weight:900;font-size:clamp(20px,2.6vw,30px);
  text-transform:uppercase;letter-spacing:.05em;transform:skewX(-9deg);
  box-shadow:0 12px 40px rgba(255,46,147,.45);transition:.16s ease}
.apv-cta a:hover{background:#FF5FA8;transform:skewX(-9deg) translateY(-2px)}
.apv-cta a span{display:inline-flex;align-items:center;gap:16px;transform:skewX(9deg)}

/* wording bar carries the eye from the CTA into the inventory */
.apv-bar{position:relative;z-index:3;background:#0A090C;border-top:1px solid rgba(255,46,147,.45);
  overflow:hidden;padding:14px 0}
.apv-bar .roll{display:flex;gap:44px;width:max-content;align-items:center;animation:roll 34s linear infinite}
@media(prefers-reduced-motion:reduce){.apv-bar .roll{animation:none}}
.apv-bar span{font-family:var(--d);font-weight:700;font-size:17px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--steel);white-space:nowrap}
.apv-bar span.d{color:var(--mag);font-size:11px;letter-spacing:.3em}

/* ── about ── */
#about{position:relative;overflow:hidden;background:#0B0A0E;padding-bottom:210px}
@media(max-width:820px){#about{padding-bottom:190px}}
#about::before{content:"";position:absolute;left:0;right:0;bottom:0;top:0;z-index:0;
  background:url("assets/img/about-drivex-auto-used-car-dealer-plainville-ct.jpg") 50% 100%/100% auto no-repeat;opacity:.52}
#about::after{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(76% 46% at 50% 30%,rgba(11,10,14,.70),transparent 78%),
             linear-gradient(180deg,#0B0A0E 0%,rgba(11,10,14,.95) 30%,rgba(11,10,14,.90) 56%,rgba(11,10,14,.66) 74%,rgba(11,10,14,.22) 86%,rgba(10,9,12,.64) 95%,#050308 100%)}
#about>.wrap{position:relative;z-index:2}
.ab-head{text-align:center;margin:0 auto 34px}
.ab-head .lbl{display:block;margin-bottom:20px;color:var(--mag)}
.ab-head h2{font-family:var(--d);font-weight:900;text-transform:uppercase;line-height:.9;letter-spacing:-.01em;
  font-size:clamp(38px,6.6vw,84px);text-wrap:balance}
.ab-head h2 .w{display:block;color:var(--chrome)}
.ab-head h2 .p{display:block;color:var(--mag)}
.ab-lede{text-align:center;max-width:56ch;margin:0 auto 52px;color:var(--chrome);font-size:clamp(17px,2vw,20px);line-height:1.6}
.ab-cols{display:grid;grid-template-columns:1fr 1fr;gap:44px;max-width:1020px;margin:0 auto}
@media(max-width:820px){.ab-cols{grid-template-columns:1fr;gap:0}}
.ab-cols p{color:#B4AEC0;font-size:15.5px;line-height:1.72;margin-bottom:20px}
.ab-cols p b{color:var(--chrome);font-weight:600}
.ab-sign{display:flex;align-items:center;gap:22px;margin:52px auto 0;max-width:820px}
.ab-sign span{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--mag))}
.ab-sign span:last-child{background:linear-gradient(90deg,var(--mag),transparent)}
.ab-sign b{font-family:var(--d);font-weight:900;font-size:clamp(19px,2.6vw,30px);text-transform:uppercase;
  letter-spacing:.02em;white-space:nowrap;color:var(--chrome)}
.ab-sign b em{font-style:normal;color:var(--mag)}
@media(max-width:620px){.ab-sign span{display:none}.ab-sign{justify-content:center}.ab-sign b{white-space:normal;text-align:center}}
.ab-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:44px}

/* ── careers: lot & bay backdrop ── */
#careers{position:relative;overflow:hidden;background:#0A090C}
#careers::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:0;
  background:url("assets/img/automotive-mechanic-jobs-hiring-plainville-ct.jpg") 50% 0/100% auto no-repeat}
#careers::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,9,12,.44) 0%,rgba(10,9,12,.38) 24%,rgba(10,9,12,.84) 58%,#0A090C 78%),
             linear-gradient(96deg,rgba(10,9,12,.62) 0%,rgba(10,9,12,.30) 34%,rgba(10,9,12,.30) 66%,rgba(10,9,12,.50) 100%)}
#careers>.wrap{position:relative;z-index:2}

/* ── careers ── */
.job{display:grid;grid-template-columns:1.35fr .95fr;gap:24px}
@media(max-width:960px){.job{grid-template-columns:1fr}}
.jb{border:1px solid var(--hair);background:rgba(17,15,21,.88);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.55);padding:32px}
.jb-role{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--hair)}
.jb-role h3{font-family:var(--d);font-weight:900;font-size:clamp(30px,3.6vw,42px);text-transform:uppercase;line-height:.98}
.jb-role .open{display:inline-flex;align-items:center;gap:8px;font-family:var(--m);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--mint);border:1px solid rgba(95,208,160,.4);padding:6px 11px;white-space:nowrap}
.jb-role .open i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(95,208,160,.18)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.chips span{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);
  border:1px solid var(--hair);padding:6px 11px}
.jb p{color:var(--steel);font-size:14.5px;margin-bottom:15px;max-width:62ch}
.jb p b{color:var(--chrome);font-weight:600}
.jb .lbl{display:block;margin:26px 0 15px}
.wl{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 26px}
@media(max-width:620px){.wl{grid-template-columns:1fr}}
.wl li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--chrome)}
.wl li svg{flex:0 0 15px;width:15px;height:15px;margin-top:3px;fill:none;stroke:var(--mag);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rq{list-style:none;display:grid;gap:12px}
.rq li{display:flex;gap:11px;align-items:flex-start;font-size:14px;color:var(--chrome)}
.rq li svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;fill:none;stroke:var(--mag);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.jb-note{display:flex;gap:13px;margin-top:26px;padding:18px;border-left:3px solid var(--mag);background:rgba(255,46,147,.07)}
.jb-note svg{flex:0 0 20px;width:20px;height:20px;fill:var(--mag);margin-top:1px}
.jb-note p{font-size:13.5px;margin:0;color:var(--steel)}
.jb-note b{color:var(--chrome);font-weight:600}
.apply{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:center;margin-top:24px;
  padding:26px 30px;border:1px solid var(--hair);background:rgba(17,15,21,.88);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
@media(max-width:820px){.apply{grid-template-columns:1fr;gap:16px}}
.apply h3{font-family:var(--d);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.apply p{color:var(--steel);font-size:14px;margin-top:7px}
.apply .btn{white-space:nowrap}

/* ── service: shop backdrop ── */
#service{position:relative;overflow:hidden;background:#0A090C}
#service::before{content:"";position:absolute;left:0;right:0;top:0;height:1000px;z-index:0;
  background:url("assets/img/auto-repair-oil-change-brake-service-plainville-ct.jpg") 50% 0/100% auto no-repeat}
#service::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,9,12,.48) 0%,rgba(10,9,12,.40) 26%,rgba(10,9,12,.86) 62%,#0A090C 82%),
             linear-gradient(90deg,transparent 0%,rgba(10,9,12,.45) 26%,rgba(10,9,12,.55) 50%,rgba(10,9,12,.45) 74%,transparent 100%)}
#service>.wrap{position:relative;z-index:2}

/* ── service specials ── */
.svc{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:900px){.svc{grid-template-columns:1fr}}
.sv{border:1px solid var(--hair);background:rgba(17,15,21,.88);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.55);display:flex;flex-direction:column;transition:border-color .2s}
.sv:hover{border-color:var(--mag)}
.sv-head{display:flex;align-items:center;gap:16px;padding:24px 26px;border-bottom:1px solid var(--hair);
  background:radial-gradient(110% 200% at 0% 0%,rgba(255,46,147,.14),transparent 62%)}
.sv-head svg{flex:0 0 40px;width:40px;height:40px;fill:none;stroke:var(--mag);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.sv-head h3{font-family:var(--d);font-weight:900;font-size:27px;text-transform:uppercase;line-height:1}
.sv-head .lbl{display:block;margin-bottom:6px}
.sv-body{padding:26px;display:flex;flex-direction:column;flex:1}
.sv-body>p{color:var(--steel);font-size:14.5px;margin-bottom:22px}

.sv-price{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding-bottom:22px;margin-bottom:22px;border-bottom:1px solid var(--hair)}
.sv-price b{font-family:var(--d);font-weight:900;font-size:clamp(52px,7vw,72px);line-height:.85;font-variant-numeric:tabular-nums;
  background:linear-gradient(177deg,#FFC4E2,#FF2E93 46%,#B70E62 54%,#FF7CC0);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 rgba(0,0,0,.55))}
.sv-price span{font-family:var(--m);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}

.sv-tier{font-family:var(--m);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--mag);margin:0 0 4px}
.sv-tier+.sv-tier{margin-top:20px}
.sv-rows{margin-bottom:20px}
.sv-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair)}
.sv-row .n{font-size:14.5px}
.sv-row .n em{font-style:normal;display:inline-block;font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  background:var(--mag);color:var(--asphalt);padding:3px 7px;margin-left:9px;font-weight:700;vertical-align:2px}
.sv-row .v{font-family:var(--d);font-weight:900;font-size:26px;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.sv-row .v small{font-family:var(--m);font-weight:500;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);display:block;text-align:right;margin-bottom:3px}

.sv-inc{margin-bottom:22px}
.sv-inc .lbl{display:block;margin-bottom:13px}
.sv-inc ul{list-style:none;display:grid;gap:10px}
.sv-inc li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;color:var(--chrome)}
.sv-inc li svg{flex:0 0 17px;width:17px;height:17px;margin-top:3px;fill:none;stroke:var(--mag);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

.sv-warn{display:flex;gap:13px;padding:16px 18px;border-left:3px solid var(--mag);background:rgba(255,46,147,.07);margin-bottom:22px}
.sv-warn svg{flex:0 0 20px;width:20px;height:20px;fill:none;stroke:var(--mag);stroke-width:2.4;stroke-linecap:round;margin-top:2px}
.sv-warn p{font-size:13.5px;color:var(--steel);line-height:1.55}
.sv-warn b{color:var(--chrome);font-weight:600}
.sv-note{font-family:var(--m);font-size:10.5px;line-height:1.65;color:var(--steel-2);margin-bottom:22px;letter-spacing:.02em}
.sv .btn{margin-top:auto;width:100%}

.sv-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-top:24px;padding:26px 30px;border:1px solid var(--hair);background:rgba(17,15,21,.88);backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(0,0,0,.5)}
.sv-cta .t h3{font-family:var(--d);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1}
.sv-cta .t p{color:var(--steel);font-size:14px;margin-top:7px}
.sv-cta .a{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.sv-cta .tel{font-family:var(--d);font-weight:900;font-size:30px;line-height:1;white-space:nowrap}

/* ── sections ── */
.sec{padding:96px 0}
[id]{scroll-margin-top:104px}
@media(max-width:640px){.sec{padding:64px 0}}
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:36px}
.shead .kicker{margin-bottom:16px}

/* ── inventory: night lot collage ── */
#inventory{position:relative;overflow:hidden;background:#0A090C;padding-bottom:170px}
#inventory::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/used-cars-for-sale-plainville-ct-dealership-lot.jpg") 50% 0/100% auto repeat-y}
#inventory::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#0A090C 0%,rgba(10,9,12,0) 150px,rgba(10,9,12,0) calc(100% - 300px),#0A090C 100%),
             linear-gradient(90deg,rgba(10,9,12,.26) 0%,rgba(10,9,12,.66) 28%,rgba(10,9,12,.70) 72%,rgba(10,9,12,.26) 100%),
             linear-gradient(rgba(10,9,12,.34),rgba(10,9,12,.34))}
#inventory>.wrap{position:relative;z-index:2}

/* ── inventory controls ── */
.ctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:22px;border-bottom:1px solid var(--hair);margin-bottom:28px}
.fil{padding:9px 15px;border:1px solid var(--hair);font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);transition:.15s;white-space:nowrap}
.fil:hover{border-color:var(--steel-2);color:var(--chrome)}
.fil[aria-pressed="true"]{background:var(--chrome);border-color:var(--chrome);color:#0A090C;font-weight:700}
.vtog{margin-left:auto;display:flex;border:1px solid var(--hair)}
.vtog button{padding:9px 15px;font-family:var(--m);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.vtog button[aria-pressed="true"]{background:var(--mag);color:#12030A;font-weight:700}
@media(max-width:760px){.vtog{margin-left:0;width:100%}.vtog button{flex:1}}
.count{font-family:var(--m);font-size:11.5px;letter-spacing:.14em;color:var(--steel);text-transform:uppercase;margin-bottom:18px}
.count b{color:var(--mag);font-weight:700}

/* ── window-sticker cards ── */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:1060px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:660px){.grid{grid-template-columns:1fr}}
.stk{border:1px solid var(--hair);background:rgba(18,16,22,.93);backdrop-filter:blur(10px);box-shadow:0 22px 52px rgba(0,0,0,.5);display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.stk:hover{border-color:var(--mag);transform:translateY(-3px)}
.stk-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px dashed var(--hair);font-family:var(--m);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel-2)}
.stk-top .days{color:var(--steel)}
.stk-top .days.fresh{color:var(--mint)}
.stk .shot{aspect-ratio:4/3;background:radial-gradient(120% 84% at 50% 0%,#282234 0%,#151219 52%,#0C0B0F 100%);border-bottom:1px solid var(--hair)}
.stk .slot .big{font-size:19px}
.pin{position:absolute;top:11px;left:11px;z-index:3;font-family:var(--m);font-size:9.5px;font-weight:700;letter-spacing:.16em;padding:5px 9px;background:var(--chrome);color:#0A090C}
.pin.hot{background:var(--mag);color:#12030A}
.stk-body{padding:16px 16px 0;flex:1}
.stk-body h3{font-family:var(--d);font-weight:900;font-size:21px;text-transform:uppercase;line-height:1.02;letter-spacing:.005em}
.stk-body .trim{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);margin-top:6px}
.spec{margin:15px 0 0;border-top:1px solid var(--hair)}
.spec div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--hair);font-family:var(--m);font-size:11.5px}
.spec dt{color:var(--steel-2);letter-spacing:.1em;text-transform:uppercase}
.spec dd{color:var(--chrome);font-variant-numeric:tabular-nums}
.stk-pay{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px}
.stk-pay .p b{font-family:var(--d);font-weight:900;font-size:31px;line-height:1;display:block}
.stk-pay .p .mo{font-family:var(--m);font-size:10.5px;color:var(--steel);letter-spacing:.08em;margin-top:5px;display:block}
.stk-pay .p .call{font-family:var(--d);font-weight:900;font-size:23px;line-height:1.1;display:block;color:var(--chrome)}
.stk-act{display:grid;grid-template-columns:1fr auto;gap:8px;padding:0 16px 16px}
.stk-act .btn{width:100%}

/* ── table view ── */
.tblwrap{overflow-x:auto;border:1px solid var(--hair);background:rgba(18,16,22,.93);backdrop-filter:blur(10px)}
table{width:100%;border-collapse:collapse;min-width:760px}
thead th{font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-2);text-align:left;padding:13px 16px;border-bottom:1px solid var(--hair);background:#07060A;white-space:nowrap}
tbody td{padding:13px 16px;border-bottom:1px solid var(--hair);font-size:14px}
tbody tr{transition:background .15s}
tbody tr:hover{background:rgba(255,46,147,.055)}
td.stkno{font-family:var(--m);font-size:11px;color:var(--steel-2);letter-spacing:.08em}
td.veh{font-family:var(--d);font-weight:700;font-size:19px;text-transform:uppercase;letter-spacing:.01em;white-space:nowrap}
td.veh small{display:block;font-family:var(--m);font-size:10px;font-weight:400;letter-spacing:.1em;color:var(--steel);text-transform:uppercase;margin-top:3px}
td.n{font-family:var(--m);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
td.pr{font-family:var(--d);font-weight:900;font-size:22px;text-align:right;white-space:nowrap}
td.pr .callsm{font-size:14px;color:var(--steel);font-family:var(--m);font-weight:500;letter-spacing:.1em}
td.go{text-align:right;white-space:nowrap}

/* ── payment calculator ── */
.calc{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--hair)}
@media(max-width:900px){.calc{grid-template-columns:1fr}}
.calc-in{padding:38px;background:var(--asphalt-2)}
.calc-out{padding:38px;background:radial-gradient(120% 100% at 80% 0%,#2A1030,#120B18);display:flex;flex-direction:column;justify-content:center;border-left:1px solid var(--hair)}
@media(max-width:900px){.calc-out{border-left:0;border-top:1px solid var(--hair)}}
.sl{margin-bottom:26px}
.sl .row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:11px}
.sl .row b{font-family:var(--d);font-weight:900;font-size:24px;font-variant-numeric:tabular-nums}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:3px;background:var(--steel-2);outline:0;cursor:pointer}
input[type=range]:focus-visible{outline:2px solid var(--mag);outline-offset:8px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;background:var(--mag);border:3px solid var(--asphalt-2);cursor:pointer;box-shadow:0 0 0 1px var(--mag),0 4px 14px rgba(255,46,147,.4)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;background:var(--mag);border:3px solid var(--asphalt-2);cursor:pointer;border-radius:0}
.ticks{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;color:var(--steel-2);margin-top:9px;letter-spacing:.08em}
.terms{display:flex;gap:8px}
.terms button{flex:1;padding:11px 0;border:1px solid var(--hair);font-family:var(--m);font-size:12px;letter-spacing:.1em;color:var(--steel)}
.terms button[aria-pressed="true"]{background:var(--chrome);color:#0A090C;border-color:var(--chrome);font-weight:700}
.payout .lbl{display:block;margin-bottom:12px}
.payout .big{font-family:var(--d);font-weight:900;font-size:clamp(64px,9vw,104px);line-height:.86;font-variant-numeric:tabular-nums}
.payout .per{font-family:var(--m);font-size:13px;color:var(--steel);letter-spacing:.14em;margin-top:12px}
.breakdown{margin-top:26px;border-top:1px solid var(--hair)}
.breakdown div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--hair);font-family:var(--m);font-size:12px}
.breakdown dt{color:var(--steel)}
.breakdown dd{font-variant-numeric:tabular-nums}
.disc{font-family:var(--m);font-size:10.5px;color:var(--steel-2);line-height:1.6;margin-top:18px}

/* ── finance band ── */
.band{position:relative;overflow:hidden;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:#08070B}
.band::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/car-loan-financing-all-credit-plainville-ct.jpg") 50% 100%/100% auto no-repeat}
.band::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,#08070B 0%,rgba(8,7,11,.72) 26%,rgba(8,7,11,.30) 52%,rgba(8,7,11,.34) 100%),
             linear-gradient(96deg,rgba(8,7,11,.66) 0%,rgba(8,7,11,.34) 40%,transparent 66%)}
.band>.wrap{position:relative;z-index:2}
.fin{display:grid;grid-template-columns:1fr 420px;gap:60px;align-items:center}
@media(max-width:960px){.fin{grid-template-columns:1fr;gap:36px}}
.fin ul{list-style:none;display:grid;gap:0;margin:28px 0 30px;border-top:1px solid var(--hair)}
.fin li{display:flex;gap:16px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--hair)}
.fin li .n{font-family:var(--m);font-size:11px;color:var(--mag);letter-spacing:.1em;flex:0 0 auto}
.fin li span{font-size:15px}
.form{background:rgba(19,17,23,.92);backdrop-filter:blur(8px);border:1px solid var(--hair);padding:30px;box-shadow:0 26px 70px rgba(0,0,0,.55)}
.form h3{font-family:var(--d);font-weight:900;font-size:28px;text-transform:uppercase;line-height:1}
.form>p{font-family:var(--m);font-size:11px;color:var(--steel);letter-spacing:.1em;text-transform:uppercase;margin:10px 0 22px}
.f{margin-bottom:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.f label{display:block;font-family:var(--m);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:7px}
.f input,.f select{width:100%;height:46px;background:#0A090C;border:1px solid var(--hair);color:var(--chrome);padding:0 13px;font-family:var(--b);font-size:15px;outline:0;transition:border-color .15s}
.f input::placeholder{color:var(--steel-2)}
.f input:focus,.f select:focus{border-color:var(--mag)}
.form .btn{width:100%;margin-top:6px}
.form .fine{font-family:var(--m);font-size:10px;color:var(--steel-2);margin-top:12px;line-height:1.6;letter-spacing:.04em}

/* ── how to buy: archive backdrop ── */
#howto{position:relative;overflow:hidden;background:#0A090C}
#howto::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/how-to-buy-a-used-car-drivex-auto-plainville-ct.jpg") 50% 26%/cover no-repeat}
#howto::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,9,12,.58) 0%,rgba(10,9,12,.40) 34%,rgba(10,9,12,.74) 100%),
             linear-gradient(100deg,rgba(10,9,12,.82) 0%,rgba(10,9,12,.46) 42%,rgba(10,9,12,.40) 100%)}
#howto>.wrap{position:relative;z-index:2}

/* ── how to buy ── */
.buy{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:16px}
@media(max-width:900px){.buy{grid-template-columns:1fr;gap:34px;padding-top:20px}}
.step{position:relative;border:1px solid var(--hair);background:rgba(19,17,23,.94);backdrop-filter:blur(6px);box-shadow:0 22px 54px rgba(0,0,0,.55);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.step:hover{border-color:var(--mag);transform:translateY(-3px);box-shadow:0 30px 66px rgba(0,0,0,.62)}
.step .badge{position:absolute;top:-16px;left:-16px;z-index:4;width:66px;height:66px;display:grid;place-items:center;
  background:var(--mag);color:var(--asphalt);font-family:var(--d);font-weight:900;font-size:38px;line-height:1;
  box-shadow:0 10px 26px rgba(255,46,147,.34)}
@media(max-width:520px){.step .badge{width:54px;height:54px;font-size:31px;top:-12px;left:-12px}}
.step .stage{position:relative;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;
  border-bottom:1px solid var(--hair);
  background:radial-gradient(120% 92% at 50% 6%,#2A2336 0%,#151119 52%,#0C0B0F 100%)}
.step .stage::before{content:"";position:absolute;inset:0;
  background:radial-gradient(52% 52% at 50% 46%,rgba(255,46,147,.20),transparent 70%)}
.step .stage::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.step .stage svg{position:relative;z-index:2;width:44%;max-width:150px;height:auto;
  transition:transform .35s cubic-bezier(.2,.7,.3,1)}
.step:hover .stage svg{transform:scale(1.06)}
@media(prefers-reduced-motion:reduce){.step .stage svg,.step{transition:none}.step:hover .stage svg{transform:none}}
.step .ico-line{fill:none;stroke:var(--chrome);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.step .ico-hot{fill:none;stroke:var(--mag);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.step .ico-fill{fill:var(--mag)}
.step .txt{padding:28px 26px 30px;text-align:center}
.step .txt .lbl{display:block;margin-bottom:12px;color:var(--mag)}
.step .txt h3{font-family:var(--d);font-weight:900;font-size:26px;text-transform:uppercase;line-height:1.02;margin-bottom:11px}
.step .txt p{color:var(--steel);font-size:14.5px;max-width:34ch;margin-inline:auto}

/* ── split cards ── */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media(max-width:820px){.duo{grid-template-columns:1fr}}
.pane{position:relative;overflow:hidden;border:1px solid var(--hair);padding:52px 48px;display:flex;flex-direction:column;
  background:var(--asphalt-2);min-height:470px}
@media(max-width:640px){.pane{padding:36px 28px;min-height:0}}
.pane.accent{background:radial-gradient(130% 110% at 100% 0%,rgba(255,46,147,.20),transparent 60%),
             radial-gradient(110% 100% at 0% 100%,rgba(123,47,247,.20),transparent 64%),#150C1B}
.pane h3{font-family:var(--d);font-weight:900;font-size:clamp(34px,4vw,48px);text-transform:uppercase;line-height:.98;margin:16px 0 16px;color:var(--chrome)}
.pane>p{color:var(--steel);font-size:16px;margin-bottom:30px;max-width:40ch}
.pane .btn{align-self:flex-start}
.pane ol{list-style:none;counter-reset:pl;margin:0 0 32px;border-top:1px solid var(--hair)}
.pane ol li{counter-increment:pl;display:flex;gap:16px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair)}
.pane ol li::before{content:"0" counter(pl);font-family:var(--m);font-size:11px;letter-spacing:.12em;color:var(--mag);flex:0 0 auto}
.pane ol li span{font-size:15px;color:var(--chrome)}
.pane .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;padding-bottom:26px;border-bottom:1px solid var(--hair)}
@media(max-width:520px){.pane .facts{grid-template-columns:1fr 1fr}}
.pane .facts b{display:block;font-family:var(--d);font-weight:900;font-size:32px;line-height:1}
.pane .facts span{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);margin-top:6px;display:block}
.pane .foot{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.brands{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:30px}
.brands span{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);border:1px solid var(--hair);padding:6px 10px}

/* ── visit ── */
#visit{padding-top:118px}
.visit{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hair)}
@media(max-width:900px){.visit{grid-template-columns:1fr}}
.visit .side{padding:44px}
.visit .side h2{font-size:clamp(34px,4.4vw,56px);margin-bottom:24px}
.bigphone{font-family:var(--d);font-weight:900;font-size:42px;line-height:1;display:block;margin:6px 0 30px;letter-spacing:.005em}
.hrs{border-top:1px solid var(--hair)}
.hrs div{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--hair);font-family:var(--m);font-size:12.5px;letter-spacing:.06em}
.hrs dt{color:var(--steel);text-transform:uppercase}
.hrs dd{font-variant-numeric:tabular-nums}
.hrs div.now dt,.hrs div.now dd{color:var(--chrome)}
.hrs div.now dt::after{content:"OPEN NOW";margin-left:10px;background:var(--mint);color:#04120C;padding:2px 7px;font-size:9px;letter-spacing:.14em;font-weight:700}
.lotmap{position:relative;background:#0C0B10;min-height:400px;overflow:hidden;border-left:1px solid var(--hair)}
@media(max-width:900px){.lotmap{border-left:0;border-top:1px solid var(--hair);min-height:300px}}
.lotmap .g{position:absolute;inset:0;background-image:linear-gradient(var(--hair) 1px,transparent 1px),linear-gradient(90deg,var(--hair) 1px,transparent 1px);background-size:44px 44px;opacity:.55}
.lotmap .road{position:absolute;left:-10%;right:-10%;top:46%;height:34px;background:var(--asphalt-3);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);transform:rotate(-4deg)}
.lotmap .road::after{content:"";position:absolute;top:50%;left:0;right:0;height:2px;background:repeating-linear-gradient(90deg,var(--steel-2) 0 22px,transparent 22px 44px);opacity:.5}
.lotmap .marker{position:absolute;left:50%;top:44%;transform:translate(-50%,-100%);text-align:center;z-index:3}
.lotmap .marker .dot{width:16px;height:16px;background:var(--mag);margin:0 auto 12px;transform:rotate(45deg);box-shadow:0 0 0 6px rgba(255,46,147,.18)}
.lotmap .marker b{font-family:var(--m);font-size:11px;letter-spacing:.16em;background:var(--chrome);color:#0A090C;padding:7px 12px;text-transform:uppercase;font-weight:700}
.lotmap .rdlbl{position:absolute;font-family:var(--m);font-size:10px;letter-spacing:.2em;color:var(--steel-2);text-transform:uppercase}

/* ── footer ── */
footer{position:relative;overflow:hidden;border-top:1px solid var(--hair);background:#07060A;padding:60px 0 0}
footer::before{content:"";position:absolute;inset:0;z-index:0;
  background:url("assets/img/drivex-auto-dealership-east-street-plainville-ct.jpg") 50% 50%/cover no-repeat}
footer::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,6,10,.53) 0%,rgba(7,6,10,.29) 38%,rgba(7,6,10,.47) 100%)}
footer>.wrap{position:relative;z-index:2}
.fg{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:44px}
@media(max-width:900px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}
footer h4{font-family:var(--m);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--mag);margin-bottom:18px}
footer ul{list-style:none;display:grid;gap:11px}
footer li a{font-size:14px;color:var(--steel);transition:.15s}
footer li a:hover{color:var(--chrome)}
footer .blurb{color:var(--steel);font-size:14px;margin:18px 0 22px;max-width:40ch}
.fbot{border-top:1px solid var(--hair);padding:20px 0;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;color:var(--steel-2);text-transform:uppercase}
.fbot a{color:var(--steel-2)}.fbot a:hover{color:var(--chrome)}
.fbot .set{display:flex;gap:20px;flex-wrap:wrap}

/* ── mobile dock ── */
.dock{display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;background:rgba(7,6,10,.95);backdrop-filter:blur(12px);border-top:1px solid var(--hair);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:8px}
.dock a{flex:1;height:48px;display:grid;place-items:center;font-family:var(--d);font-weight:700;font-size:16px;text-transform:uppercase;letter-spacing:.06em}
.dock .a1{border:1px solid var(--hair);color:var(--chrome)}
.dock .a2{background:var(--mag);color:#12030A}
@media(max-width:820px){.dock{display:flex}body{padding-bottom:74px}}

/* mockup annotation */
.note{border:1px dashed var(--mag);background:rgba(255,46,147,.06);padding:15px 18px;font-family:var(--m);font-size:11.5px;line-height:1.7;color:var(--steel);letter-spacing:.03em}
.note b{color:var(--mag);letter-spacing:.14em;text-transform:uppercase;font-weight:700}
.note code{color:var(--chrome);background:#0A090C;padding:1px 5px;border:1px solid var(--hair)}

/* ═══════════════════════════════════════════════════════════
   LIGHT VARIANT — identical structure and content.
   Sections built around photography stay dark; everything
   else flips to paper. Ink/rule weights come up because
   hairlines that read on black disappear on white.
   ═══════════════════════════════════════════════════════════ */
:root{
  --ink-l:#160A11; --ink-soft:#5E4C58; --ink-mute:#826B7A;
  --pap:#FFFFFF; --pap-2:#FFF6FA; --pap-3:#FDECF4;
  --rule:#E7D3E0; --rule-2:#F3E4EE;
}
body{background:var(--pap);color:var(--ink-l)}
/* dark regions must not inherit the light body colour */
.strip,.tick,.mile,.why:not(.lt),#about,#approve,.band,#howto,#service,#careers,#inventory,
footer,.dock,.calc-out,.pane.accent,.form,.well .cap{color:var(--chrome)}
.lt{background:var(--pap);color:var(--ink-l)}
.lt .lbl,.lt .count{color:var(--ink-mute)}
.lt .count b{color:var(--ink-l)}
.lt h2.disp,.lt h3,.lt .shead h2{color:var(--ink-l)}
.lt .kicker .bar{background:var(--mag)}
.lt .btn-g{border-color:var(--ink-l);color:var(--ink-l);background:transparent}
.lt .btn-g:hover{background:var(--ink-l);color:var(--pap)}
.lt .btn-m{color:#160A11}

/* header */
.hdr.lt{background:rgba(255,255,255,.93);border-bottom:1px solid var(--rule)}
.hdr.lt::after{opacity:.5}
.lt .nav a{color:var(--ink-soft)}
.lt .nav a:hover{color:var(--ink-l)}
.lt .hcta .ph{color:var(--ink-l)}
.lt .hcta .ph span{color:var(--ink-mute)}
.lt .logo img{filter:saturate(1.05) contrast(1.04)}
.lt .burger{border-color:var(--rule)}
.lt .burger span,.lt .burger span::before,.lt .burger span::after{background:var(--ink-l)}
.mob.lt{background:var(--pap-2);border-bottom:2px solid var(--ink-l)}
.lt.mob a{color:var(--ink-l);border-bottom-color:var(--rule-2)}

/* why-choose pillars */
.why.lt{background:var(--pap-2);border-bottom:1px solid var(--rule)}
.lt .w{border-left-color:var(--rule)}
.lt .why p,.why.lt p{color:var(--ink-soft)}
@media(max-width:960px){.why.lt .w:nth-child(-n+2){border-bottom-color:var(--rule)}}

/* inventory — paper stock, ink rules */
.lt .ctrl{border-bottom:2px solid var(--ink-l)}
.lt .fil{background:var(--pap-2);border-color:var(--rule);color:var(--ink-soft)}
.lt .fil:hover{border-color:var(--ink-l);color:var(--ink-l)}
.lt .fil[aria-pressed="true"]{background:var(--ink-l);border-color:var(--ink-l);color:var(--pap)}
.lt .vtog{border-color:var(--ink-l)}
.lt .vtog button{background:var(--pap-2);color:var(--ink-l)}
.lt .vtog button[aria-pressed="true"]{background:var(--mag);color:#160A11}
.lt .stk{background:var(--pap);border:2px solid var(--ink-l);backdrop-filter:none;box-shadow:none}
.lt .stk:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--mag);border-color:var(--ink-l)}
.lt .stk-top{color:var(--ink-mute);border-bottom-color:var(--rule)}
.lt .stk-top .days.fresh{color:#0E8F5C}
.lt .stk .shot{background:#1A1119;border-bottom:2px solid var(--ink-l)}
.lt .stk-body h3{color:var(--ink-l)}
.lt .stk-body .trim{color:var(--ink-mute)}
.lt .spec{border-top-color:var(--rule)}
.lt .spec div{border-bottom-color:var(--rule-2)}
.lt .spec dt{color:var(--ink-mute)}
.lt .spec dd{color:var(--ink-l)}
.lt .stk-pay .p b,.lt .stk-pay .p .call{color:var(--ink-l)}
.lt .stk-pay .p .mo{color:var(--ink-mute)}
.lt .pin{background:var(--ink-l);color:var(--pap)}
.lt .pin.hot{background:var(--mag);color:#160A11}
.lt .tblwrap{background:var(--pap);border:2px solid var(--ink-l);backdrop-filter:none}
.lt thead th{background:var(--ink-l);color:var(--mag)}
.lt tbody td{border-bottom-color:var(--rule-2)}
.lt tbody tr:hover{background:var(--pap-3)}
.lt td.veh,.lt td.pr{color:var(--ink-l)}
.lt td.stkno,.lt td.veh small{color:var(--ink-mute)}

/* payment calculator — dark readout keeps the number loud */
.lt .calc{border:2px solid var(--ink-l)}
.lt .calc-in{background:var(--pap)}
.lt .calc-out{border-left-color:var(--ink-l)}
@media(max-width:900px){.lt .calc-out{border-top-color:var(--ink-l)}}
.lt .sl .row b{color:var(--ink-l)}
.lt input[type=range]{background:var(--rule)}
.lt input[type=range]::-webkit-slider-thumb{border-color:var(--pap)}
.lt input[type=range]::-moz-range-thumb{border-color:var(--pap)}
.lt .ticks{color:var(--ink-mute)}
.lt .terms button{background:var(--pap-2);border-color:var(--rule);color:var(--ink-soft)}
.lt .terms button[aria-pressed="true"]{background:var(--ink-l);border-color:var(--ink-l);color:var(--mag)}

/* trade / warranty */
.lt .pane{background:var(--pap);border:2px solid var(--ink-l)}
.lt .pane h3{color:var(--ink-l)}
.lt .pane>p{color:var(--ink-soft)}
.lt .pane .facts{border-bottom-color:var(--rule)}
.lt .pane .facts b{color:var(--ink-l)}
.lt .pane .facts span{color:var(--ink-mute)}
.lt .brands span{color:var(--ink-soft);border-color:var(--rule)}
.lt .pane.accent{border-color:transparent;
  background:radial-gradient(130% 110% at 100% 0%,rgba(255,46,147,.20),transparent 60%),
             radial-gradient(110% 100% at 0% 100%,rgba(123,47,247,.20),transparent 64%),#150C1B}
.lt .pane.accent ol{border-top-color:rgba(255,255,255,.14)}
.lt .pane.accent ol li{border-bottom-color:rgba(255,255,255,.14)}
.lt .pane.accent ol li span{color:var(--chrome)}
.lt .pane.accent h3{color:var(--chrome)}
.lt .pane.accent>p{color:#C9B6D4}
.lt .pane.accent .lbl{color:var(--mag)}

/* social */
.lt .follow{background:var(--pap-2);border:2px solid var(--ink-l)}
.lt .follow .handle{color:var(--ink-l)}
.lt .follow p{color:var(--ink-soft)}
.lt .posts{background:var(--pap);border:2px solid var(--ink-l)}
.lt .posts .ph{border-bottom-color:var(--rule)}
.lt .pt{border-bottom-color:var(--rule-2)}
.lt .pt:hover{background:var(--pap-3)}
.lt .pt h3{color:var(--ink-l)}
.lt .pt p{color:var(--ink-soft)}
.lt .pt .tag{color:var(--ink-mute);border-color:var(--rule)}
.lt .note{background:var(--pap);border-color:var(--ink-l);color:var(--ink-soft)}
.lt .note b{color:var(--ink-l)}
.lt .note code{background:var(--pap-3);border-color:var(--rule);color:var(--ink-l)}

/* visit */
.lt .visit{background:var(--pap);border:2px solid var(--ink-l)}
.lt .visit .side h2{color:var(--ink-l)}
.lt .bigphone{color:var(--ink-l)}
.lt .hrs{border-top-color:var(--rule)}
.lt .hrs div{border-bottom-color:var(--rule-2)}
.lt .hrs dt{color:var(--ink-mute)}
.lt .hrs dd{color:var(--ink-l)}
.lt .hrs div.now dt,.lt .hrs div.now dd{color:var(--ink-l)}
.lt .hrs div.now dt::after{background:var(--ink-l);color:var(--mag)}
.lt .lotmap{border-left-color:var(--ink-l)}
@media(max-width:900px){.lt .lotmap{border-top-color:var(--ink-l)}}


/* ═══════════════════════════════════════════════════════════
   INNER PAGES — vehicle detail, vehicle archive, generic page.
   The one-pager above is unchanged; everything here is scoped
   to .dx-inner so it cannot leak into the home page.
   ═══════════════════════════════════════════════════════════ */
.dx-inner{background:var(--pap);color:var(--ink-l)}
.dx-inner .sec{padding:58px 0 90px}
.dx-inner .crumb{font:500 12px/1 var(--m);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 20px}
.dx-inner .crumb a{color:var(--ink-soft);text-decoration:none}
.dx-inner .crumb a:hover{color:var(--mag)}

.vd{display:grid;grid-template-columns:1.25fr .85fr;gap:46px;align-items:start}
.vd-media{border:1px solid var(--rule);border-radius:4px;overflow:hidden;background:#fff}
.vd-media img{display:block;width:100%;height:auto}
.vd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}
.vd-thumbs img{display:block;width:100%;height:84px;object-fit:cover;border:1px solid var(--rule);border-radius:3px}
.vd h1{font:900 clamp(30px,4vw,46px)/.98 var(--d);text-transform:uppercase;
  transform:skewX(-8deg);transform-origin:left;margin:0 0 6px;letter-spacing:.01em}
.vd .vtrim{font:500 15px/1.4 var(--b);color:var(--ink-soft);margin:0 0 20px}
.vd .vprice{font:700 38px/1 var(--m);color:var(--ink-l);margin:0 0 4px}
.vd .vmo{font:400 13px/1 var(--m);color:var(--ink-soft);margin:0 0 22px}
.vd .vcall{font:700 28px/1 var(--d);color:var(--mag);text-transform:uppercase;margin:0 0 22px}
.vd .spec{margin:0 0 26px}
.vd-act{display:flex;gap:10px;flex-wrap:wrap}
.vstock{font:500 12px/1 var(--m);letter-spacing:.1em;color:var(--ink-soft);
  text-transform:uppercase;margin:0 0 14px}

.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(282px,1fr));gap:22px}
.vempty{padding:50px 0;font:400 16px/1.6 var(--b);color:var(--ink-soft)}
.dx-pag{display:flex;gap:8px;margin-top:40px;flex-wrap:wrap}
.dx-pag .page-numbers{display:inline-flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:3px;
  font:600 13px/1 var(--m);color:var(--ink-l);text-decoration:none;background:#fff}
.dx-pag .page-numbers:hover{border-color:var(--mag);color:var(--mag)}
.dx-pag .page-numbers.current{background:var(--mag);border-color:var(--mag);color:#fff}

.dx-prose{max-width:760px}
.dx-prose h1{font:900 clamp(30px,4vw,48px)/1 var(--d);text-transform:uppercase;
  transform:skewX(-8deg);transform-origin:left;margin:0 0 22px}
.dx-prose h2{font:700 26px/1.2 var(--d);text-transform:uppercase;margin:36px 0 12px}
.dx-prose h3{font:700 19px/1.3 var(--b);margin:28px 0 10px}
.dx-prose p,.dx-prose li{font:400 16px/1.72 var(--b);color:var(--ink-l)}
.dx-prose ul,.dx-prose ol{padding-left:22px;margin:0 0 18px}
.dx-prose li{margin-bottom:7px}
.dx-prose a{color:var(--mag)}
.dx-prose img{max-width:100%;height:auto;border-radius:4px}
.dx-prose blockquote{border-left:3px solid var(--mag);padding-left:18px;margin:22px 0;
  font-style:italic;color:var(--ink-soft)}

@media(max-width:900px){
  .vd{grid-template-columns:1fr;gap:28px}
}

/* Inner pages sit on paper, but .spec dd and the ghost button carry the
   dark-section text colour. Declare them explicitly or they render
   near-white on white - invisible, and invisible in a thumbnail too. */
.dx-inner .vd .spec dd,
.dx-inner .dx-prose .spec dd{color:var(--ink-l)}
.dx-inner .vd .spec dt{color:var(--ink-mute)}
.dx-inner .vd .spec > div{border-bottom:1px solid var(--rule)}
.dx-inner .vd-act .btn-g,
.dx-inner .dx-prose .btn-g{color:var(--ink-l);background:transparent;border-color:var(--ink-l)}
.dx-inner .vd-act .btn-g:hover,
.dx-inner .dx-prose .btn-g:hover{color:var(--mag);border-color:var(--mag);background:var(--pap-2)}
/* the archive reuses the dark sticker card, which supplies its own colours -
   only the breadcrumb row and section head live on paper */
.dx-inner .shead .disp{color:var(--ink-l)}
.dx-inner .shead .lbl{color:var(--ink-mute)}
.dx-inner .shead .btn-g{color:var(--ink-l);border-color:var(--ink-l);background:transparent}
.dx-inner .shead .btn-g:hover{color:var(--mag);border-color:var(--mag)}
/* a tall portrait photo should not swallow the page */
.vd-media img{max-height:620px;object-fit:cover}
/* The sticker card is a dark surface wherever it appears. On the home page it
   inherits --chrome from the #inventory rule; on the archive there is no such
   ancestor, so declare it here or the price renders ink-on-ink. */
.dx-inner .stk{color:var(--chrome)}