:root{--bg:#0A0A0B;--ink:#F4F2EE;--muted:#9A9A9E;--line:rgba(255,255,255,.13);--ev:#16A34A;--glass:rgba(255,255,255,.035);--sold:#D82B3A}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{background:var(--bg);color:var(--ink);font-family:"Inter",system-ui,sans-serif;font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
/* The container is fluid with only a high outer bound, so a wide screen
   gains layout instead of two bands of dead margin. Running text carries
   its own readable cap further down - see "readable measure". */
.wrap{width:100%;max-width:1920px;margin:0 auto;padding-inline:clamp(16px,4vw,64px)}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--line)}
.eyebrow{font-family:"Inter";font-weight:400;font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted)}
.btn{display:inline-block;font-family:"Inter";font-weight:400;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;padding:1.15em 2.4em;border:1px solid var(--line);color:var(--ink);cursor:pointer;background:transparent;transition:background .4s,color .4s,border-color .4s;text-align:center}
.btn:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.fill{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.fill:hover{background:transparent;color:var(--ink)}
.btn.small{padding:.85em 1.5em;font-size:.66rem}
.link{display:inline-flex;align-items:center;gap:.7em;font-family:"Inter";font-weight:400;font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--ink);padding-bottom:.4em;position:relative;background:none;border:0;cursor:pointer}
.link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--line);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.link:hover::after{transform:scaleX(1)}
.link .ar{transition:transform .4s}.link:hover .ar{transform:translateX(6px)}
.h2ico{width:26px;height:26px;stroke:var(--muted);fill:none;stroke-width:1.4;vertical-align:middle;margin-right:.7rem}
/* header + util */
header{position:fixed;top:0;left:0;right:0;z-index:50;isolation:isolate;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
header.solid{background:rgba(10,10,11,.82);backdrop-filter:blur(16px);border-color:var(--line)}
.util{border-bottom:1px solid rgba(255,255,255,.06)}
.utilrow{display:flex;align-items:center;justify-content:space-between;height:36px;font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.ustatus,.uphone{display:inline-flex;align-items:center;gap:.55rem;color:var(--muted)}
.ustatus svg,.uphone svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.6}
.uphone b{font-weight:600;letter-spacing:.1em;color:var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav .logo{height:24px}
.nav ul{display:flex;gap:2.2rem;list-style:none}
.nav a.n{font-family:"Inter";font-weight:400;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.nav a.n:hover,.nav a.n.active{color:var(--ink)}
.nav .right{display:flex;align-items:center;gap:1.2rem}
.navtoggle{display:none;background:none;border:0;color:var(--ink);cursor:pointer;font-family:"Inter";font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.mobile{position:fixed;inset:0;background:var(--bg);z-index:60;display:none;flex-direction:column;justify-content:center;gap:1.7rem;padding:2rem}
.mobile.open{display:flex}
.mobile a{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:1.4rem;color:var(--ink)}
.mobile .close{position:absolute;top:2rem;right:2rem;background:none;border:0;color:var(--ink);font-size:1.6rem;cursor:pointer}
/* the collapse breakpoint lives with the rest of the nav rules below */
.rev{opacity:0;transform:translateY(28px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rev.in{opacity:1;transform:none}
/* one rhythm for the whole site. This was the home page's tightened
   value; at 104px every interior page opened on as much empty space as
   the home page used to. */
section{padding-block:clamp(2.4rem,4vw,3.6rem);position:relative}
.sec-top{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(1.3rem,2.2vw,2rem)}
/* one section-title size everywhere, matching the compact page header */
/* sizing lives with the other type tokens, further down */
.sec-top h2{text-transform:uppercase}
.sec-top .eyebrow{display:block;margin-bottom:1.1rem}
/* This used to pull up against a .sec-top that had a far bigger bottom
   margin. The density pass cut that margin to 17.6px on a phone, so a
   -2.4rem pull put the paragraph 21px inside the heading above it. The
   gap is .sec-top's own margin now and nothing has to stay in step. */
.sec-intro{max-width:54ch;color:var(--muted);margin:0 0 3.6rem}
/* hero */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;overflow:hidden}
.hero-media{position:absolute;inset:0;z-index:0;background:radial-gradient(120% 90% at 70% 30%,#17171b 0%,#0b0b0d 55%,#080809 100%)}
.hero-media::after{content:"CINEMATIC VEHICLE PHOTOGRAPHY";position:absolute;inset:0;display:grid;place-items:center;font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.4em;color:rgba(255,255,255,.14)}
.hero-mark{position:absolute;right:-4%;bottom:-12%;height:78%;opacity:.045;z-index:0;filter:grayscale(1)}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero .eyebrow{display:block;margin-bottom:2.4rem;opacity:0;animation:rise 1.1s .1s ease forwards}
.hero h1{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(2.6rem,7vw,6rem);line-height:1.02;opacity:0;animation:rise 1.1s .22s ease forwards}
.hero h1 b{font-weight:400}
.hero .sub{max-width:44ch;color:var(--muted);font-size:1.02rem;margin:2.2rem 0 3rem;opacity:0;animation:rise 1.1s .34s ease forwards}
.hero .cta{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center;opacity:0;animation:rise 1.1s .46s ease forwards}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:1.9rem 0;background:#080809}
.marquee-track{display:flex;align-items:center;width:max-content;animation:scroll 55s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee svg{height:26px;width:auto;fill:var(--muted);opacity:.62;transition:opacity .35s;flex:none;margin-right:clamp(2.6rem,5vw,5rem)}
.marquee svg:hover{opacity:1;fill:var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}
.page-head{padding-block:clamp(170px,22vh,250px) clamp(2rem,5vw,4rem)}
.page-head .eyebrow{display:block;margin-bottom:1.4rem}
.page-head h1{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(2.2rem,5.5vw,4rem);line-height:1.02}
.page-head p{max-width:60ch;color:var(--muted);margin-top:1.6rem}
.crumb{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:1.4rem}.crumb a:hover{color:var(--ink)}
/* cards */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,3vw,3rem)}
@media(max-width:900px){.grid3{grid-template-columns:1fr}}
.vhc{display:block;cursor:pointer}
.vhc .frame{position:relative;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(150deg,#161619,#0d0d10);border:1px solid var(--line)}
.vhc .frame img.real{width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.vhc:hover .frame img.real{transform:scale(1.05)}
.vhc .frame img.ph{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:34%;opacity:.08;filter:grayscale(1)}
/* vehicle tag chips - replaces the single EV badge. Stacked top-left on
   card frames and on the detail gallery. */
.tags{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.vhc .tags,.gallery .main .tags{position:absolute;top:1rem;left:1rem;z-index:2;flex-direction:column;align-items:flex-start;max-width:calc(100% - 2rem);pointer-events:none}
.vpanel .tags{margin-top:.95rem}
.tags span{font-family:"Inter";font-weight:500;font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;padding:.42rem .72rem;border-radius:2px;white-space:nowrap;line-height:1}
.tags .t-ev{background:var(--ev);color:#fff}
.tags .t-eco{background:#0E7490;color:#fff}
.tags .t-new{background:var(--ink);color:var(--bg)}
.tags .t-cap{background:rgba(10,10,11,.58);color:var(--ink);border:1px solid var(--line);backdrop-filter:blur(6px)}
.tags .t-value{background:#CE9254;color:#0A0A0B}
.vhc .meta{border:1px solid var(--line);border-top:0;padding:1.5rem 1.4rem}
.cyear{font-family:"Oswald";font-weight:300;font-size:1.7rem;letter-spacing:.04em;line-height:1}
.cname{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.08em;font-size:1rem;color:var(--muted);margin-top:.35rem}
.cprice{font-family:"Inter";font-weight:400;font-size:1.1rem;margin-top:.9rem}
.callout{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);margin-top:.7rem;opacity:.75}
.cspecs{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.2rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.cspecs dt{font-family:"Inter";font-size:.52rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.28rem}
.cspecs dd{font-family:"Oswald";font-weight:300;font-size:.85rem;letter-spacing:.03em;text-transform:uppercase}
.vhc.sold .frame{filter:grayscale(1) brightness(.72)}
/* The SOLD stamp is the one semantic accent on the site. It cannot live on
   .frame::after any more: .frame carries the grayscale that desaturates a
   sold photo, and a filter repaints its own pseudo-elements, so a red badge
   rendered grey. It hangs off .vhc instead - already position:relative and
   outside the filtered box - leaving the photo treatment alone.
   Filled rather than outlined: white on #D82B3A reads at 9px, red-on-photo
   does not. The right padding loses the trailing letter-space so the filled
   box looks optically even. */
.vhc.sold::after{content:"SOLD";position:absolute;top:1rem;left:1rem;z-index:3;pointer-events:none;font-family:"Inter";font-weight:500;font-size:.56rem;letter-spacing:.34em;color:#fff;background:var(--sold);border:1px solid var(--sold);padding:.4rem calc(.8rem - .34em) .4rem .8rem}
.vhc.sold .cprice{color:var(--muted)}
.center-cta{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap;margin-top:4.5rem}
/* process / why / props */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,3.2rem)}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{border-top:1px solid var(--line);padding-top:1.7rem}
.step .n{font-family:"Oswald";font-weight:200;font-size:2.6rem;color:var(--muted);line-height:1}
.step h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:1.02rem;margin:1.1rem 0 .7rem}
.step p{color:var(--muted);font-size:.9rem;line-height:1.65}
.why{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:900px){.why{grid-template-columns:1fr 1fr}}@media(max-width:560px){.why{grid-template-columns:1fr}}
.why .cell{background:var(--bg);padding:clamp(1.8rem,3vw,2.6rem)}
.why .ico{width:30px;height:30px;color:var(--ink);margin-bottom:1.4rem;opacity:.85}
.why h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.12em;font-size:1.05rem;margin-bottom:.7rem}
.why p{color:var(--muted);font-size:.9rem}
.dband{border:1px solid var(--line);padding:clamp(2.4rem,5vw,4rem);text-align:center}
.railmap{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:2.4rem auto 0;max-width:900px;position:relative}
.railmap::before{content:"";position:absolute;left:5%;right:5%;top:6px;height:1px;background:var(--line)}
.railmap .dot{position:relative;text-align:center;flex:1}
.railmap .dot i{display:block;width:9px;height:9px;border-radius:50%;background:var(--muted);margin:0 auto 1rem;position:relative;z-index:1}
.railmap .dot.hq i{background:var(--ink);box-shadow:0 0 0 4px rgba(244,242,238,.12)}
.railmap .dot span{font-family:"Inter";font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.railmap .dot.hq span{color:var(--ink)}
.transport{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.4rem,3vw,2.4rem)}@media(max-width:820px){.transport{grid-template-columns:1fr}}
.tcard{border:1px solid var(--line);padding:clamp(1.8rem,3vw,2.6rem);position:relative}
.tcard.rec{border-color:rgba(244,242,238,.4)}
.tcard .tag{position:absolute;top:-1px;right:-1px;font-family:"Inter";font-size:.56rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bg);background:var(--ink);padding:.35rem .7rem}
.tcard h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.12em;font-size:1.3rem;margin-bottom:.8rem}
.tcard>p{color:var(--muted);font-size:.9rem;margin-bottom:1.4rem}
.tcard ul{list-style:none;display:flex;flex-direction:column;gap:.7rem}
.tcard li{font-family:"Inter";font-size:.8rem;color:var(--ink);padding-left:1.3rem;position:relative}.tcard li::before{content:"—";position:absolute;left:0;color:var(--muted)}
.protect{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,3vw,2.4rem)}@media(max-width:900px){.protect{grid-template-columns:1fr 1fr}}@media(max-width:560px){.protect{grid-template-columns:1fr}}
.protect .p h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.1em;font-size:1rem;margin-bottom:.6rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.protect .p p{color:var(--muted);font-size:.86rem}
.faq-item{border-top:1px solid var(--line)}.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--ink);cursor:pointer;display:flex;justify-content:space-between;gap:1rem;padding:1.5rem 0;font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.08em;font-size:1.02rem}
.faq-q .pm{color:var(--muted);transition:transform .3s;flex:none}.faq-q[aria-expanded=true] .pm{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}.faq-a p{color:var(--muted);font-size:.92rem;padding-bottom:1.5rem;max-width:80ch}
/* story */
.story{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center;margin-bottom:clamp(3rem,7vw,7rem)}
.story:nth-child(even) .story-img{order:2}@media(max-width:820px){.story{grid-template-columns:1fr}.story:nth-child(even) .story-img{order:0}}
.story-img{aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(150deg,#161619,#0d0d10);display:grid;place-items:center}.story-img img{height:34%;opacity:.08;filter:grayscale(1)}
.story .n{font-family:"Oswald";font-weight:200;font-size:2.4rem;color:var(--muted);line-height:1;margin-bottom:1rem}
.story h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.12em;font-size:1.5rem;margin-bottom:1rem}.story p{color:var(--muted);margin-bottom:1rem}
.promise{text-align:center;border-top:1px solid var(--line);padding-top:clamp(4rem,8vw,7rem)}
.promise p{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.3;max-width:22ch;margin:0 auto}
/* inventory dropdowns (glass) */
/* minmax(0,..) not bare fr: an fr track will not shrink below its
   content min-content, and a select reading "All Body Types" is wider
   than the track on a phone, pushing the row past the viewport. */
.filterbar{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,minmax(0,1fr));gap:1.2rem;margin-bottom:2.4rem}
.filterbar>*{min-width:0}
.fld input,.fld select{min-width:0;max-width:100%}
@media(max-width:1040px){.filterbar{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:560px){.filterbar{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fld{display:flex;flex-direction:column}
.fld label{font-family:"Inter";font-weight:400;font-size:.56rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.fld input,.fld select{background:var(--glass);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:"Inter";font-weight:300;font-size:.9rem;padding:.85em 1em;cursor:pointer;appearance:none;transition:border-color .3s}
.fld input{cursor:text}.fld input:focus,.fld select:focus{outline:none;border-color:rgba(244,242,238,.4)}
.fld select option{background:#111}
.invhead{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.8rem}
.count{font-family:"Inter";font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
/* fluid rather than four fixed columns: in a full-width container a fixed
   count just inflates the cards, so the grid packs as many as fit at a
   readable card width and the breakpoints fall out of the track size.
   min() keeps the track inside the container on the narrowest screens. */
.invgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));
 gap:clamp(1.1rem,2vw,1.8rem)}
.invgrid>*{min-width:0}
.empty{grid-column:1/-1;padding:4rem 0;text-align:center;color:var(--muted);font-family:"Oswald";letter-spacing:.1em;text-transform:uppercase}
.pager{display:flex;justify-content:center;gap:.6rem;margin-top:4rem}
.pager button{background:transparent;border:1px solid var(--line);color:var(--muted);width:42px;height:42px;font-family:"Inter";font-size:.72rem;cursor:pointer;transition:.25s}
.pager button[aria-current=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}.pager button:hover{color:var(--ink)}
/* VDP */
/* minmax(0,..) not bare fr: an fr track takes its automatic minimum from
   min-content, so the 24-31 thumbnail strip (now a fixed-basis flex row)
   could inflate the gallery column and blow up the 4:3 frame with it. */
.vdp{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.5rem);align-items:start}
.vdp>*{min-width:0}
.gallery{min-width:0}
.gallery .thumbs{min-width:0}@media(max-width:960px){.vdp{grid-template-columns:1fr}}
.gallery .main{position:relative;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(150deg,#161619,#0d0d10);overflow:hidden;display:grid;place-items:center}
.gallery .main img.real{width:100%;height:100%;object-fit:cover}.gallery .main img.ph{height:38%;opacity:.09;filter:grayscale(1)}
/* the feed sends 24-31 photos; flex:1 shared one row between them all
   and produced slivers. Fixed-width thumbs that scroll instead. */
.gallery .thumbs{display:flex;gap:.6rem;margin-top:.7rem;overflow-x:auto;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scrollbar-width:thin;padding-bottom:.4rem}
.gallery .thumbs button{flex:0 0 clamp(76px,13vw,104px);scroll-snap-align:start;aspect-ratio:4/3;border:1px solid var(--line);background:linear-gradient(150deg,#161619,#0d0d10);cursor:pointer;display:grid;place-items:center;overflow:hidden}
.gallery .thumbs button[aria-current=true]{border-color:var(--ink)}.gallery .thumbs img.ph{height:44%;opacity:.14;filter:grayscale(1)}
/* real thumbnails had no sizing at all: a 1024x768 photo rendered at
   intrinsic size inside a ~130px button and was centre-cropped by
   overflow:hidden. Scale it to the button instead. */
.gallery .thumbs img.real{width:100%;height:100%;object-fit:cover}
.quickspec{display:flex;flex-wrap:wrap;gap:1.4rem 2.4rem;margin-top:1.6rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.quickspec div{min-width:80px}.quickspec dt{font-family:"Inter";font-size:.54rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}.quickspec dd{font-family:"Oswald";font-weight:300;letter-spacing:.04em;text-transform:uppercase;font-size:.92rem}
.vinfo .yr{font-family:"Inter";font-weight:400;font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}
.vinfo h1{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.05;margin:.6rem 0}
.vinfo .price{font-family:"Oswald";font-weight:300;font-size:1.9rem}
.docfee{font-family:"Inter";font-size:.66rem;letter-spacing:.06em;color:var(--muted);margin:.5rem 0 1.6rem;position:relative;cursor:help;display:inline-block}
.docfee .tip{display:none;position:absolute;left:0;top:130%;width:min(280px,calc(100vw - 48px));background:#111;border:1px solid var(--line);padding:1rem;font-size:.66rem;line-height:1.6;letter-spacing:0;text-transform:none;z-index:5}.docfee:hover .tip{display:block}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin:1.8rem 0}
.spec-grid div{background:var(--bg);padding:1rem 1.1rem}
.spec-grid dt{font-family:"Inter";font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.35rem}.spec-grid dd{font-family:"Oswald";font-weight:300;letter-spacing:.05em;text-transform:uppercase;font-size:.95rem}
.vcta{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.vnote{font-family:"Inter";font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin-bottom:1.8rem}.vnote a{color:var(--ink)}
.section-label{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:3rem 0 1.4rem;padding-top:2rem;border-top:1px solid var(--line)}
.overview p{color:var(--muted);max-width:80ch}
.features{columns:3;column-gap:2.5rem}@media(max-width:900px){.features{columns:2}}@media(max-width:560px){.features{columns:1}}
.features span{display:block;font-family:"Inter";font-size:.82rem;color:var(--ink);padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.06);break-inside:avoid}
.badges{display:flex;gap:1rem;flex-wrap:wrap;margin-top:2rem}
.badges a{display:inline-flex;align-items:center;gap:.6rem;border:1px solid var(--line);padding:.9rem 1.3rem;font-family:"Inter";font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}.badges a:hover{color:var(--ink);border-color:var(--ink)}
/* calc module */
.calcmod{padding:clamp(1.8rem,3vw,2.6rem)}
.calc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,3vw,3rem)}@media(max-width:760px){.calc-grid{grid-template-columns:1fr}}
.calc-controls .f{margin-bottom:1.4rem}
.calc-controls .l{display:flex;justify-content:space-between;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.calc-controls .l b{color:var(--ink);font-weight:400}
.calc-controls input[type=range]{width:100%;accent-color:var(--ink)}
.terms{display:flex;gap:.5rem;margin-top:.3rem;flex-wrap:wrap}
.terms button{flex:1;min-width:52px;background:transparent;border:1px solid var(--line);color:var(--muted);padding:.5rem;font-family:"Inter";font-size:.68rem;cursor:pointer}
.terms button[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.calc-results .est{font-family:"Oswald";font-weight:200;font-size:2.6rem;line-height:1}.calc-results .est small{font-size:.8rem;color:var(--muted);font-family:"Inter";margin-left:.3rem}
.calc-results{border-left:1px solid var(--line);padding-left:clamp(1.6rem,3vw,3rem)}@media(max-width:760px){.calc-results{border-left:0;padding-left:0;border-top:1px solid var(--line);padding-top:2rem}}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.6rem}
.rgrid div{background:var(--bg);padding:1rem 1.1rem}.rgrid dt{font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem;font-family:"Inter"}.rgrid dd{font-family:"Oswald";font-weight:300;font-size:1rem;letter-spacing:.04em}
.disc{font-size:.68rem;color:var(--muted);margin-top:1.2rem;line-height:1.5}
/* finance tabs + lenders */
.fintabs{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2.6rem}
.fintab{background:transparent;border:1px solid var(--line);color:var(--muted);padding:.9em 1.6em;font-family:"Inter";font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;transition:.25s}
.fintab[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.lenders{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
@media(max-width:820px){.lenders{grid-template-columns:repeat(2,1fr)}}
.lenders span{background:var(--bg);padding:1.4rem;text-align:center;font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;color:var(--muted)}
/* forms */
/* A form is a contained thing on a full-width page, so it centres in its
   container rather than hugging the left edge. */
.form{max-width:820px;margin-inline:auto}.form.glass{padding:clamp(1.8rem,3vw,2.6rem)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}@media(max-width:640px){.frow{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;margin-bottom:1.6rem}.field.full{grid-column:1/-1}
.field label{font-family:"Inter";font-weight:400;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.field input,.field select,.field textarea{background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--ink);font-family:"Inter";font-weight:300;font-size:.98rem;padding:.85em 1em;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:rgba(244,242,238,.4)}
.field select{appearance:none;cursor:pointer}.field select option{background:#111}.field textarea{resize:vertical;min-height:120px}
.consent{display:flex;gap:.8rem;align-items:flex-start;font-size:.8rem;color:var(--muted);margin-bottom:1.8rem;max-width:640px}.consent input{margin-top:.35rem;accent-color:var(--ink)}
.form-ok{display:none;border:1px solid var(--line);padding:1.4rem;font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.1em;margin-top:1.4rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:start}@media(max-width:900px){.split{grid-template-columns:1fr}}
.cinfo .row{padding:1.4rem 0;border-bottom:1px solid var(--line)}.cinfo .row:first-child{border-top:1px solid var(--line)}
.cinfo dt{font-family:"Inter";font-weight:400;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:.5rem}.cinfo dd{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:1.05rem;line-height:1.5}.cinfo dd a{color:var(--ink)}
/* The map shows real aerial imagery now, so the monochrome treatment that
   used to match it to the dark page comes off - inverting a photograph
   would turn the lot into a negative. */
.map{aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;margin-top:2rem}
.map iframe{width:100%;height:100%;border:0}
.statement{border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}.statement .wrap{max-width:1000px}
.statement p{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.5rem,3.6vw,2.7rem);line-height:1.3}.statement .eyebrow{display:block;margin-bottom:2.2rem}
.ig-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.ig-grid a{position:relative;aspect-ratio:1;overflow:hidden;background:linear-gradient(150deg,#161619,#0d0d10);border:1px solid var(--line);display:grid;place-items:center}.ig-grid a img{height:32%;opacity:.08;filter:grayscale(1);transition:opacity .4s}.ig-grid a:hover img{opacity:.18}
/* where to next */
.next-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.2rem,2.5vw,1.8rem)}
@media(max-width:900px){.next-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.next-grid{grid-template-columns:1fr}}
.nextcard{padding:clamp(1.6rem,3vw,2.2rem);display:flex;flex-direction:column;gap:.8rem;transition:border-color .35s,transform .35s}
.nextcard:hover{border-color:rgba(244,242,238,.4);transform:translateY(-4px)}
.nextcard h3{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.1em;font-size:1.15rem}
.nextcard p{color:var(--muted);font-size:.85rem;flex:1}
.nextcard .link{font-size:.66rem}
/* footer */
footer{border-top:1px solid var(--line);padding-block:clamp(4rem,7vw,6rem) 2.4rem}
.foot-grid3{display:grid;grid-template-columns:1.8fr 1fr 1fr;gap:clamp(2rem,4vw,4rem)}
@media(max-width:760px){.foot-grid3{grid-template-columns:1fr 1fr}}@media(max-width:480px){.foot-grid3{grid-template-columns:1fr}}
.foot-brand img{height:30px;margin-bottom:1.3rem}.foot-brand p{color:var(--muted);font-size:.82rem;max-width:38ch;margin-bottom:1.4rem;line-height:1.7}
/* bare white glyph, no frame. It takes the 38px the old bordered box
   occupied, so the footer rhythm is unchanged. With the border gone the
   hover cue moves to the glyph itself. */
.socials{display:flex;gap:.7rem;align-items:center}
.socials a{display:block;line-height:0;transition:opacity .25s}
.socials a:hover{opacity:.7}
.socials img{display:block;height:30px;width:auto}
.foot h4{font-family:"Inter";font-weight:400;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1.2rem}
.foot ul{list-style:none}.foot li{margin-bottom:.7rem}.foot li a{font-family:"Inter";font-weight:300;font-size:.86rem;color:#c8c8cc}.foot li a:hover{color:var(--ink)}
/* trimmed to hold the footer at the height it was, now that the revised
   disclaimer runs longer */
.foot-bottom{margin-top:clamp(2.2rem,3.6vw,3.2rem);padding-top:1.5rem;border-top:1px solid var(--line)}
.foot-bottom .disc{font-family:"Inter";font-weight:300;font-size:.64rem;letter-spacing:.02em;color:var(--muted);line-height:1.7;margin-bottom:1.4rem}
.foot-bottom .row2{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap}
.foot-bottom .c{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.foot-bottom ul{display:flex;gap:1.6rem;list-style:none;flex-wrap:wrap}.foot-bottom a{font-family:"Inter";font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.foot-bottom a:hover{color:var(--ink)}
/* --- card top revert --- */
.vhc .meta .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.vhc .meta .cyear{display:block;font-family:"Inter";font-weight:400;font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.vhc .meta .cname{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;line-height:1.1}
.vhc .meta .cprice{font-family:"Inter";font-weight:400;font-size:.98rem;white-space:nowrap}
/* --- finance modules centered --- */
.finwrap{max-width:900px;margin:0 auto}
.finwrap .fintabs{justify-content:center}
.finwrap .form{margin-inline:auto}
/* --- VDP gallery controls --- */
.gallery .main .counter{position:absolute;top:1rem;right:1rem;z-index:3;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);border:1px solid var(--line);padding:.4rem .7rem;font-family:"Inter";font-size:.6rem;letter-spacing:.18em;color:var(--ink)}
.gallery .main .gnav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border:1px solid var(--line);background:rgba(0,0,0,.4);backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;display:grid;place-items:center;font-size:1.4rem;transition:.25s}
.gallery .main .gnav:hover{background:var(--ink);color:var(--bg)}
.gallery .main .gprev{left:1rem}.gallery .main .gnext{right:1rem}
.viewall{width:100%;margin-top:.7rem;background:transparent;border:1px solid var(--line);color:var(--muted);padding:1rem;font-family:"Inter";font-weight:400;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;cursor:pointer;transition:.25s}
.viewall:hover{color:var(--ink);border-color:var(--ink)}
/* --- VDP right panel --- */
/* this was a hardcoded 118px - the header plus six. Derived from --hdr it
   resolves to the same number, and it cannot fall out of step if the
   header is ever resized. */
.vpanel{padding:clamp(1.8rem,3vw,2.4rem);position:sticky;top:calc(var(--hdr) + 6px)}
@media(max-width:960px){.vpanel{position:static}}
.vp-title{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.08;margin:.55rem 0 .3rem}
.vp-sub{font-family:"Oswald";font-weight:200;text-transform:uppercase;letter-spacing:.1em;font-size:1.05rem;color:var(--muted);margin-bottom:1.3rem}
.vp-price{font-family:"Oswald";font-weight:300;font-size:2.2rem;line-height:1}
.vp-ids{font-family:"Inter";font-size:.87rem;letter-spacing:.1em;color:var(--muted);margin-top:1rem;display:flex;gap:1.6rem;flex-wrap:wrap}
.vp-div{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.vp-specs{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.5rem 1rem}
@media(max-width:560px){.vp-specs{grid-template-columns:1fr 1fr}}
.vp-specs dt{font-family:"Inter";font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.vp-specs dd{font-family:"Oswald";font-weight:400;font-size:.95rem;letter-spacing:.03em;text-transform:uppercase}
.vp-cta{display:flex;flex-direction:column;gap:.8rem}
.btn.block{width:100%;display:block}
.vp-note{text-align:center;font-family:"Inter";font-size:.68rem;color:var(--muted);margin-top:1rem}
.vp-spec-line{display:flex;align-items:center;justify-content:center;gap:.6rem;font-family:"Inter";font-size:.72rem;letter-spacing:.08em;color:var(--muted)}
.vp-spec-line b{color:var(--ink);font-weight:600}
.vp-spec-line svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.6}
/* --- footer restore 4 col --- */
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(2rem,4vw,4rem)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
/* equal cards + one-line title */
.invgrid,.grid3{align-items:stretch}
.vhc{display:flex;flex-direction:column;height:100%}
.vhc .frame{flex:none}
.vhc .meta{flex:1;display:flex;flex-direction:column}
.vhc .meta .top{display:flex;justify-content:space-between;align-items:baseline;gap:1rem}
.vhc .meta .cname{font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.07em;font-size:1.02rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.vhc .meta .cprice{font-family:"Inter";font-weight:400;font-size:.98rem;white-space:nowrap}
.cspecs{margin-top:auto}
/* sold cards: masked VIN, no price, find-similar CTA */
.vhc{position:relative}
.vhc .cardlink{display:block;flex:none}
/* the stretched ::after that used to live here covered the whole card and
   swallowed clicks meant for the links and buttons inside it */
.vhc[data-href]{cursor:pointer}
.cnamelink{color:inherit;display:block}
.cnamelink:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
/* dealer credentials in the footer brand column. Heights are set rather
   than widths because the two badges have different aspect ratios. */
/* reusable white chip: the CARFAX logo artwork is black and needs a light
   ground to read on this theme. The colour shields do not get one. */
.cfx-chip{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-radius:8px;padding:7px 11px;line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.cfx-chip img{display:block;height:auto;max-width:100%}
/* CARFAX badge has to clear the stretched card link to stay clickable */
/* clears the stretched card link so it stays clickable; margin follows the
   card meta rhythm. align-self stops the column flex .meta stretching the
   chip to the full card width - it should hug its 110px logo. */
/* the chip has its own row in the card meta, so centre that row */
.vhc .cfx-card{position:relative;z-index:2;margin-top:1.1rem;max-width:100%;align-self:center}
.cvin{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.16em;color:var(--muted);margin-top:.55rem;margin-bottom:1.15rem}
.vhc.sold .findsim{position:relative;z-index:2;margin-top:auto;display:block}
/* footer 3-col */
.foot-grid{grid-template-columns:1.7fr 1fr 1fr}
/* bare 1fr is minmax(auto,1fr) and its auto floor is min-content, so a
   lender name that will not wrap pushes the track wider than the column.
   This overflowed the page at 390px once the tiles got shorter. */
/* The lenders are their own marks now, floating on the background with no
   tile around them. Each file is pre-trimmed to its artwork and painted
   white, so one height makes them optically equal rather than merely the
   same number of pixels tall; the filter stays as the guarantee that
   anything dropped in here later still reads as one tone. */
.lenderwall{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));
 gap:clamp(1.6rem,3vw,2.8rem) clamp(1.2rem,2.4vw,2.4rem);
 align-items:center;justify-items:center}
.lender-logo{height:34px;width:auto;max-width:100%;object-fit:contain;
 filter:brightness(0) invert(1);opacity:.8;transition:opacity .3s}
/* a square emblem at a wordmark's height reads much smaller than it is,
   so the compact marks step up. Measured by aspect ratio, not by eye-ball
   per logo, so a new file lands in the right tier on its own. */
.lender-logo.sq{height:46px}
.lender-logo.mid{height:40px}
.lender-logo:hover{opacity:1}
.lender-more{font-family:"Oswald";font-weight:300;text-transform:uppercase;
 letter-spacing:.08em;font-size:.86rem;color:var(--muted);white-space:nowrap}
@media(max-width:1100px){.lenderwall{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:820px){.lenderwall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.lenderwall{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lender-logo{height:28px}
 .lender-logo.sq{height:38px}
 .lender-logo.mid{height:33px}}
/* CARFAX subscriber badge - fixed 155x56 asset, kept from overflowing a
   narrow column. line-height:0 stops the inline-image baseline gap. */
/* detail-page CARFAX button, left-aligned to the gallery gutter like the
   rest of that column. The artwork is a finished button - no chip. */
.cfx{margin-top:1rem;display:flex;justify-content:flex-start;align-items:center;gap:.6rem;flex-wrap:wrap}
.cfx .cfx-chip{padding:9px 12px}
.cfx img{max-width:220px;width:100%;height:auto;display:block}
/* CARFAX value flags - only rendered when the feed supplies them */
.cfx-flags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.cfx-flags span{font-family:"Inter";font-weight:400;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:.5rem .7rem;border-radius:2px}
.estcta{text-align:center;margin-top:2.4rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.estcta .eyebrow{display:block;margin-bottom:1rem}
.estcta p{color:var(--muted);max-width:52ch;margin:0 auto 1.6rem}
.estcta-btns{display:flex;gap:1.2rem;justify-content:center;flex-wrap:wrap}

/* Desktop-only header sizing (complements the max-width:1080px mobile nav breakpoint) */
@media (min-width: 1081px){
  .nav .logo{height:34px}
  .uphone{font-size:.74rem}
  .uphone svg{width:15px;height:15px}
}/* ===== HOME hero + section imagery + one-block footer ===== */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero-media{background:#0a0a0b url(../img/hero.png) center right/cover no-repeat;transform:scale(1.12);transform-origin:60% 45%;animation:heroKen 26s ease-in-out infinite alternate}
@keyframes heroKen{0%{transform:scale(1.12) translate(0,0)}100%{transform:scale(1.26) translate(-2.6%,1.8%)}}
.hero-media::after{content:none}
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.4;mix-blend-mode:overlay;background-image:var(--grain)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(8,8,9,.88) 0%,rgba(8,8,9,.55) 36%,rgba(8,8,9,0) 70%),radial-gradient(130% 100% at 50% 42%,transparent 55%,rgba(0,0,0,.55))}
.hero .wrap{position:relative;z-index:2}
@media (prefers-reduced-motion:reduce){.hero-media{animation:none;transform:scale(1.12)}}
#process{position:relative;overflow:hidden}
#process::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(rgba(10,10,11,.86),rgba(10,10,11,.9)),url(../img/hiw.png) center/cover no-repeat}
#process>.wrap{position:relative;z-index:1}
.home-delivery{position:relative;overflow:hidden}
.home-delivery::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(rgba(6,8,12,.58),rgba(6,8,12,.74)),url(../img/delivery.png) center/cover no-repeat}
.home-delivery>.wrap{position:relative;z-index:1}
.home-delivery .dband{background:rgba(10,13,22,.4);backdrop-filter:blur(3px)}
.statement{position:relative;overflow:hidden}
.statement::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(130% 120% at 50% 50%,rgba(8,8,9,.6),rgba(8,8,9,.84)),url(../img/statement.png) center/cover no-repeat}
.statement .wrap{position:relative;z-index:1}
.find-next{position:relative;overflow:hidden}
.find-next::before{content:"";position:absolute;inset:0;z-index:0;background:radial-gradient(130% 120% at 50% 45%,rgba(10,10,11,.6),rgba(10,10,11,.86)),url(../img/fync.png) center/cover no-repeat}
.find-next .wrap{position:relative;z-index:1}
/* The wordmark is 1300x245 - an aspect of 5.3 - so at 52px tall it needs
   about 276px of width. The brand column was 240px at 1440 and 175px at
   1024, and max-width:100% was squeezing the image to fit, which stretched
   it out of ratio. The brand takes a larger share of the row now. */
/* The brand's extra width comes out of the 4rem gaps rather than out of the
   link columns - taking it from them wrapped "Payment Calculator" and
   "Nationwide Delivery" onto second lines and made the footer taller. */
.foot-grid{grid-template-columns:2fr 1fr 1fr 1.05fr 1.5fr;align-items:start;
 gap:clamp(1.5rem,2.6vw,2.6rem)}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.foot-grid{grid-template-columns:1fr}}
footer h4{font-family:"Inter";font-weight:400;font-size:.6rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
footer .foot-col h4:not(:first-of-type){margin-top:1.3rem}
footer .foot-col ul{list-style:none;margin:0;padding:0}
footer .foot-col li{margin-bottom:.7rem}
footer .foot-col li a{font-family:"Inter";font-weight:300;font-size:.86rem;color:#c8c8cc}
footer .foot-col li a:hover{color:var(--ink)}
footer .foot-col .v{display:block;font-family:"Oswald";font-weight:300;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;color:var(--ink);line-height:1.6;margin-bottom:.35rem}
footer .foot-col a.v:hover{color:var(--muted)}
/* ===== Nationwide delivery map ===== */
.usmap-wrap{margin:1.8rem auto 0;max-width:920px}
.usmap{width:100%;height:auto;display:block}
.usmap .usa{fill:rgba(255,255,255,.02);stroke:rgba(255,255,255,.15);stroke-width:1.1;stroke-linejoin:round}
.usmap .arc{fill:none;stroke:rgba(244,242,238,.12);stroke-width:1}
.usmap .node{fill:#eef1f5}
.usmap .halo{fill:rgba(238,241,245,.10)}
.usmap .pulse{fill:#e6f2ec;filter:drop-shadow(0 0 5px rgba(22,163,74,.9))}
.usmap .hq{fill:var(--ev)}
.usmap .hqhalo{fill:rgba(22,163,74,.16)}
.usmap .hqring{fill:none;stroke:var(--ev);stroke-width:1.4;transform-box:fill-box;transform-origin:center;animation:hqring 6s ease-out infinite}
@keyframes hqring{0%{transform:scale(.7);opacity:.85}70%{opacity:0}100%{transform:scale(3.4);opacity:0}}
.usmap-legend{display:flex;gap:1.6rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem}
.usmap-legend span{display:inline-flex;align-items:center;gap:.5rem;font-family:"Inter";font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.usmap-legend i{width:8px;height:8px;border-radius:50%}
@media (prefers-reduced-motion:reduce){.usmap .pulse{display:none}.usmap .hqring{animation:none;opacity:.5}}
.home-delivery::before{background:radial-gradient(70% 70% at 50% -10%,rgba(255,255,255,.03),transparent 70%),#0A0A0B}
.home-delivery::after{display:none}
.home-delivery .dband{background:transparent;backdrop-filter:none}
/* ===== HOME cohesion: one continuous canvas, feathered seams ===== */
/* 1. A single ambient wash sits behind every section, so the plain
      sections and the photographic ones read as one continuous surface
      instead of alternating panels. Fixed, so it never seams on scroll. */
body.home::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(58% 38% at 80% 6%,rgba(150,170,210,.08),transparent 62%),radial-gradient(66% 42% at 10% 40%,rgba(206,146,84,.075),transparent 64%),radial-gradient(60% 38% at 72% 80%,rgba(150,180,230,.055),transparent 62%)}
/* 2. One film grain over the whole page — a shared texture is the cheapest
      way to make separately-sourced imagery feel like one shoot. */
body.home::after{content:"";position:fixed;inset:0;z-index:6;pointer-events:none;opacity:.11;mix-blend-mode:overlay;background-image:var(--grain)}
/* 3. Lift all content above every backdrop, so bleeding layers can never
      paint over a neighbouring section's text. */
body.home section>.wrap{position:relative;z-index:1}
/* ...but never demote the hero content below its own vignette overlays */
body.home .hero>.wrap{z-index:2}
/* 4. The seam killer: let each photographic backdrop overhang its section
      box and fade out at both ends, so neighbours cross-dissolve rather
      than butting against a hard edge. */
body.home #process,body.home .home-delivery,body.home .statement,body.home .find-next{overflow:visible}
body.home #process::before,body.home .home-delivery::before,body.home .statement::before,body.home .find-next::before{inset:-14vh 0;z-index:0;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 83%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 17%,#000 83%,transparent 100%)}
/* 5. Keep the map section translucent so the page wash carries through it. */
body.home .home-delivery::before{background:radial-gradient(70% 70% at 50% -10%,rgba(255,255,255,.035),transparent 70%)}
/* 6. Hero dissolves downward into the page instead of stopping dead. */
body.home .hero{overflow:hidden}
body.home .hero::after{background:linear-gradient(90deg,rgba(8,8,9,.88) 0%,rgba(8,8,9,.55) 36%,rgba(8,8,9,0) 70%),radial-gradient(130% 100% at 50% 42%,transparent 55%,rgba(0,0,0,.55)),linear-gradient(to bottom,transparent 74%,rgba(10,10,11,.85) 93%,var(--bg) 100%)}
/* 7. No ruled lines between home sections. */
body.home .statement{border-top:0;border-bottom:0}
/* featured inventory on the home page runs 4 wide (.grid3 stays 3 for
   the vehicle page's You May Also Like, which renders exactly 3 cards) */
/* minmax(0,1fr) not 1fr: a bare 1fr track will not shrink below its
   content's min-content width, so at 4-up the grid outgrows .wrap and
   spills off the page. min-width:0 lets the card contents shrink too. */
/* The tracks are capped rather than fluid. Once .wrap went full-width a 1fr
   track stretched these to 426px at 1920 - half again the size of a card on
   the sold listing (335px) and a third wider than one on the inventory grid.
   340px holds them at the same scale as the rest of the stock on the site;
   the row centres in whatever is left rather than stretching to fill it.
   minmax(0,340px) is a cap, not a fixed width, so below about 1575px the
   tracks still shrink to fit and the centring has no free space to act on. */
#feat{grid-template-columns:repeat(4,minmax(0,340px));justify-content:center;
 gap:clamp(1.1rem,2vw,1.8rem)}
#feat>*{min-width:0}
/* home.js stamps data-n with the number of cards it rendered, so fewer
   than four photographed cars give a full row rather than empty cells. */
#feat[data-n="0"]{display:none}
#feat[data-n="1"]{grid-template-columns:minmax(0,340px)}
#feat[data-n="2"]{grid-template-columns:repeat(2,minmax(0,340px))}
#feat[data-n="3"]{grid-template-columns:repeat(3,minmax(0,340px))}
/* narrow widths cap the count; 4 cards never go 3-up because that orphans
   one card on a second row. These come after, so they win. */
/* these must restate the data-n selectors: #feat[data-n] carries an
   attribute, so a bare #feat in here would lose to it. */
@media(max-width:1080px){#feat,#feat[data-n="3"],#feat[data-n="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
 #feat[data-n="1"]{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){#feat,#feat[data-n="1"],#feat[data-n="2"],#feat[data-n="3"],#feat[data-n="4"]{grid-template-columns:minmax(0,1fr)}}
/* real Instagram media replaces the monogram placeholder in the social grid */
.ig-grid a img.real{width:100%;height:100%;object-fit:cover;opacity:1;filter:none;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.ig-grid a:hover img.real{opacity:1;transform:scale(1.06)}
.ig-grid .igplay{position:absolute;right:.5rem;bottom:.4rem;z-index:2;font-size:.58rem;color:#fff;opacity:.9;text-shadow:0 1px 4px rgba(0,0,0,.65);pointer-events:none}
/* ===== home refinements ===== */
/* marquee dissolves at both ends instead of clipping mid-logo */
.marquee{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
/* The featured block caps its own wrap, because the heading, the card row
   and the All Inventory link share it and have to line up with each other.
   Capping only the card tracks centred them 173px inside the heading at
   1920. The number is the card row itself: four 340px cards, three gaps
   and the container padding, so the heading sits exactly on the first
   card and the link exactly on the last. */
#inventory>.wrap{max-width:calc(340px * 4 + 1.8rem * 3 + 64px * 2)}
/* no frame around the delivery band on the home page - delivery.html and
   financing.html keep theirs */
.home-delivery .dband{border:0}
/* ===== Hero slideshow (5 slides, slow zoom + cross-fade) ===== */
/* No slide image on the container: it sat under every slide and showed
   through as a flash of slide 1 on each transition. */
.hero-media{background:#0a0a0b;transform:none;animation:none}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform;animation:heroFade 60s linear infinite,heroKen 30s ease-in-out infinite alternate}
.hero-slide:nth-child(1){animation-delay:0s,0s}
.hero-slide:nth-child(2){animation-delay:12s,0s}
.hero-slide:nth-child(3){animation-delay:24s,0s}
.hero-slide:nth-child(4){animation-delay:36s,0s}
.hero-slide:nth-child(5){animation-delay:48s,0s}
/* 12s per slide = 20% of the 60s cycle. Each slide holds to 20% and fades
   out over 20-23%, which is exactly the window the next one fades in, so
   they cross-dissolve instead of both hitting zero together. */
@keyframes heroFade{0%{opacity:0}3%{opacity:1}20%{opacity:1}23%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.hero-slide{animation:none;opacity:0}.hero-slide:nth-child(1){opacity:1}}
/* listing pages run to the global wrap like every other page; their grids
   gain columns rather than stretching a fixed four. */
/* ===== vehicles with no photos yet ===== */
/* The coming-soon template fills the frame like a real photo instead of the
   small faded monogram. It is 1448x1086 (exactly 4:3) like the frames, but
   object-fit:contain guarantees none of its text is ever clipped. Absolute
   positioning makes it fill regardless of the wrapper span's sizing. */
.vhc .frame img.soon,.gallery .main img.soon{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;opacity:1;filter:none}
/* ===== full-screen photo viewer ===== */
.lightbox{position:fixed;inset:0;z-index:200;display:none;background:rgba(6,6,8,.97)}
.lightbox.open{display:block}
.lb-stage{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(3.2rem,11vw,4.5rem) clamp(.5rem,3vw,5rem) clamp(2.6rem,9vw,3.6rem);touch-action:pan-y}
.lb-img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;-webkit-user-select:none;user-select:none}
.lb-bar{position:absolute;top:0;left:0;right:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:calc(.9rem + env(safe-area-inset-top,0px)) clamp(.9rem,3vw,1.6rem) .9rem}
.lb-count{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.lb-close{width:44px;height:44px;flex:none;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;font-size:1rem;display:grid;place-items:center;transition:background .25s,color .25s}
.lb-close:hover{background:var(--ink);color:var(--bg)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;width:46px;height:46px;border:1px solid var(--line);background:rgba(0,0,0,.45);backdrop-filter:blur(6px);color:var(--ink);cursor:pointer;font-size:1.5rem;display:grid;place-items:center;transition:background .25s,color .25s}
.lb-nav:hover{background:var(--ink);color:var(--bg)}
.lb-prev{left:clamp(.5rem,2vw,1.6rem)}
.lb-next{right:clamp(.5rem,2vw,1.6rem)}
.lb-close:focus-visible,.lb-nav:focus-visible{outline:2px solid var(--ev);outline-offset:2px}
.lb-hint{position:absolute;bottom:calc(.9rem + env(safe-area-inset-bottom,0px));left:0;right:0;text-align:center;font-family:"Inter";font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);pointer-events:none}
/* on a phone the arrows crowd the photo - swipe carries it instead */
@media(max-width:620px){.lb-nav{width:38px;height:38px;font-size:1.2rem;background:rgba(0,0,0,.3)}}
@media (prefers-reduced-motion:reduce){.lb-close,.lb-nav{transition:none}}
/* ===== award badges =====
   Several of these are dark artwork on transparency and would vanish on the
   site's ground, so every badge sits on a white chip. A fixed chip height
   lines up shapes that are otherwise unrelated - shield, circle, square and
   wide laurel - while object-fit:contain keeps each one undistorted. */
/* nine badges, so three across is exact - a 3x3 block with no orphan row.
   auto-fit was fitting six and stranding the remainder. */
.badge-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:2.8rem}
@media(max-width:560px){.badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.badge-chip{background:#fff;border-radius:12px;padding:16px;height:130px;display:flex;align-items:center;justify-content:center}
.badge-chip img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
/* footer trust row: no chip - these three read on the dark ground as they
   are. Each sits in an equal-size box so the tall shield, the wide laurel
   and the roundel occupy the same footprint and line up on one baseline. */
/* own strip across the footer rather than crammed in the brand column,
   which was only ~248px wide and forced the four badges to wrap. */
.foot-trust{display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);flex-wrap:wrap;margin-top:clamp(2.4rem,4.5vw,3.4rem)}
.foot-trust span{height:48px;display:flex;align-items:center;justify-content:flex-start}
.foot-trust a{display:block;line-height:0;transition:opacity .25s}
.foot-trust a:hover{opacity:.75}
.foot-trust img{height:48px;width:auto;max-width:100%;object-fit:contain;display:block}
@media(max-width:560px){.foot-trust span{height:38px}.foot-trust img{height:38px}}

/* ===== language toggle (EN | ES) =====
   It sits in the utility bar rather than the main nav because the nav list and
   its buttons are both hidden below 1080px - the utility bar is the one strip
   that survives at every width, so the toggle is always reachable.
   .uright groups it with the phone number so .utilrow keeps its two-child
   space-between rhythm. */
.uright{display:inline-flex;align-items:center;gap:clamp(.9rem,2.4vw,1.5rem)}
.langtoggle{display:inline-flex;align-items:center;gap:.45rem}
.langbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;
 letter-spacing:inherit;text-transform:uppercase;color:var(--muted);
 transition:color .25s}
.langbtn:hover{color:var(--ink)}
/* the active language carries both weight and full-contrast ink, so it still
   reads as selected without colour alone doing the work */
.langbtn.on{color:var(--ink);font-weight:600}
.langbtn:focus-visible{outline:1px solid var(--ink);outline-offset:3px}
.langsep{color:var(--line);user-select:none}

/* ===== header at Spanish lengths =====
   The nav was sized around the English labels; "Financiamiento" and
   "Vender / Intercambiar" are a good deal wider, which pushed the logo flush
   against the links and wrapped both buttons onto two lines. Rather than
   hand-tune widths the header holds English-width behaviour and simply flexes:
   the links keep a minimum breathing gap, nothing in the bar wraps mid-label,
   and the buttons stop being squeezed by the link list. */
/* the wordmark is a flex item like any other, so a longer link list was
   shrinking it to zero width instead of pushing the links along */
.nav>a{flex:0 0 auto}
.nav .logo{flex:0 0 auto;max-width:none}
.nav ul{gap:clamp(1.1rem,1.9vw,2.2rem)}
.nav ul a{white-space:nowrap}
.nav .right{gap:clamp(.85rem,1.3vw,1.2rem)}
/* .nav is space-between, so the gap beside the wordmark comes for free -
   an explicit margin here only ate the headroom the buttons needed. */

/* ===== vehicle card =====
   The card leads with the number the customer actually pays. Because the feed
   already quotes fee-inclusive prices, the breakdown runs downwards - sale
   price, then the fees that were always in it, then the estimated price in
   bold - so the arithmetic is visible rather than implied. */
.vhc .frame{border-radius:10px 10px 0 0}
.vhc .meta{border-radius:0 0 10px 10px;padding:1.25rem 1.25rem 1.35rem}
.tags span{border-radius:4px}

.cstock{font-family:"Inter";font-weight:400;font-size:.56rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--muted)}
/* .cname used to sit inside a flex ROW, where flex:1 meant "take the spare
   width". It is now a direct child of the flex COLUMN, where that same rule
   made the title grow vertically and shove the pricing down the card. */
.vhc .meta .cname{flex:0 0 auto;white-space:normal;overflow:visible;text-overflow:clip;
 font-family:"Oswald";font-weight:500;font-size:1.12rem;line-height:1.15;
 letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:.45rem 0 0}
.csub{display:flex;justify-content:space-between;align-items:baseline;gap:.9rem;
 margin-top:.45rem;font-family:"Inter";font-size:.68rem;letter-spacing:.04em;color:var(--muted)}
.csub .ctrim{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.csub .cmiles{white-space:nowrap}

/* pricing table - hairline separators rather than boxes, so it stays quiet */
/* pushes the whole pricing block to the foot of the card so the figures
   line up across a row whatever the title length */
.ptable{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line)}
.prow{display:flex;justify-content:space-between;align-items:center;gap:.8rem;
 padding:.5rem 0;border-bottom:1px solid rgba(255,255,255,.055);
 font-family:"Inter";font-size:.74rem;color:var(--muted)}
.prow:last-child{border-bottom:0}
.prow .pl{display:inline-flex;align-items:center;gap:.3rem;min-width:0}
.prow .pv{white-space:nowrap;color:var(--ink);font-variant-numeric:tabular-nums}
.prow.was .pv{color:var(--muted);text-decoration:line-through}
.prow.disc .pv{color:#4ADE80}
.prow.est{padding-top:.6rem;font-size:.82rem;color:var(--ink)}
.prow.est .pl,.prow.est .pv{font-weight:600}
.prow.est .pv{font-size:1.06rem;letter-spacing:.01em}
.pnote{font-family:"Inter";font-size:.62rem;color:var(--muted);padding-bottom:.5rem}

/* info affordance + tooltip. The card has a stretched link over it, so these
   sit above it on their own layer and take pointer events back. */
/* The icon and its tooltip are siblings inside .ci-wrap rather than the
   tooltip living inside the button - a button may not contain a tooltip it
   describes, and nesting made the hit area the size of the whole popup.
   Touch devices never hover, so visibility is driven by an .open class that
   base.js toggles on tap, click and focus; hover is an extra on pointer
   devices only. */
.ci-wrap{position:relative;z-index:3;display:inline-flex;align-items:center;flex:0 0 auto}
.ci{display:inline-flex;align-items:center;justify-content:center;
 width:22px;height:22px;margin:-4px;padding:0;border:0;background:none;
 color:var(--muted);cursor:pointer;flex:0 0 auto;-webkit-tap-highlight-color:transparent}
.ci svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.5}
.ci:hover,.ci:focus-visible,.ci-wrap.open .ci{color:var(--ink)}
.ci:focus-visible{outline:1px solid var(--ink);outline-offset:2px;border-radius:50%}
.citip{position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%);
 width:min(17rem,calc(100vw - 2rem));background:#141417;border:1px solid var(--line);
 border-radius:8px;padding:.65rem .75rem;font-family:"Inter";font-weight:400;
 font-size:.66rem;line-height:1.55;letter-spacing:.01em;text-transform:none;
 color:var(--ink);text-align:left;white-space:normal;
 box-shadow:0 12px 34px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .18s,visibility .18s;z-index:40}
.ci-wrap.open .citip{opacity:1;visibility:visible}
/* little pointer, so the tooltip reads as belonging to its row */
.citip::after{content:"";position:absolute;top:100%;left:50%;margin-left:-5px;
 border:5px solid transparent;border-top-color:#141417}
@media(hover:hover){.ci-wrap:hover .citip{opacity:1;visibility:visible}}

/* estimated payment - a pill, and a real link into the calculator, so it has
   to clear the card's stretched overlay */
.paypill{position:relative;z-index:2;display:flex;align-items:center;gap:.6rem;
 margin-top:.95rem;padding:.6rem .85rem;border-radius:999px;
 background:rgba(255,255,255,.045);border:1px solid var(--line);
 transition:background .25s,border-color .25s}
.paypill:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22)}
.paypill .ppl{font-family:"Inter";font-weight:400;font-size:.56rem;letter-spacing:.2em;
 text-transform:uppercase;color:var(--muted)}
.paypill .ppv{margin-left:auto;font-family:"Oswald";font-weight:400;font-size:1rem;
 color:var(--ink);white-space:nowrap}
.paypill .ppv small{font-family:"Inter";font-size:.6rem;color:var(--muted);margin-left:.15rem}
.paypill .ppi{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;
 stroke-width:1.4;color:var(--muted);stroke-linecap:round}
.paypill:hover .ppi{color:var(--ink)}

.pdisc{display:inline-flex;align-items:center;gap:.35rem;margin-top:.55rem;
 font-family:"Inter";font-size:.58rem;letter-spacing:.06em;color:var(--muted)}

.vhc .cfx-card{margin-top:1rem}
@media(max-width:560px){
 .vhc .meta{padding:1.1rem 1rem 1.2rem}
 .citip{font-size:.7rem;padding:.7rem .8rem}
}

/* ===== compact page header =====
   .page-head used to reserve clamp(170px,22vh,250px) of top padding and set
   the title at up to 4rem, so every interior page opened on a screenful of
   empty space before any content. The header is position:fixed, so the only
   padding that is actually required is its own height - --hdr - plus a little
   breathing room. Everything beyond that was decoration.
   36px utility strip + 76px nav row = 112px. Anything positioned under the
   header reads --hdr rather than repeating the literal. */
:root{--hdr:112px;--btn-radius:6px}
.page-head{padding-block:calc(var(--hdr) + clamp(1.1rem,2.6vw,2.2rem)) clamp(1.1rem,2.2vw,1.8rem)}
.page-head .eyebrow{display:block;margin-bottom:.6rem}
.page-head h1{font-size:clamp(1.65rem,3.1vw,2.35rem);letter-spacing:.09em;line-height:1.08}
.page-head p{margin-top:.75rem;max-width:58ch;font-size:.92rem;line-height:1.65}
/* the first section used to sit a full section's padding below the title,
   which put the gap straight back */
.page-head + section{padding-top:clamp(1.4rem,2.8vw,2.4rem)}
@media(max-width:640px){
 .page-head{padding-block:calc(var(--hdr) + 1rem) 1rem}
 .page-head p{font-size:.86rem}
}

/* ===== phase 3: header and hero band =====

   HEADER. The bar is logo + links + one CTA. Two rules keep it honest at
   every width and in both languages:
     1. the wordmark is flex:0 0 auto and the link group carries a hard
        margin-left, so the links can never butt against or overrun it;
     2. the links and CTA are hidden for the burger well before they would
        wrap, at a breakpoint set from measured content width - Spanish runs
        about a quarter wider than English, so it collapses earlier. */
.nav{gap:1rem}
.nav>a{flex:0 0 auto}
.nav .logo{flex:0 0 auto;max-width:none}
.nav .right{display:flex;align-items:center;gap:clamp(.8rem,1.2vw,1.15rem);
 margin-left:clamp(1.5rem,3vw,3rem);min-width:0}
.nav ul{display:flex;align-items:center;gap:clamp(.95rem,1.5vw,1.7rem);list-style:none;margin:0}
/* six items plus a CTA is a lot of bar. The generous .22em tracking was
   sized for four short words, so the links run tighter here; Spanish runs
   tighter still, being about a quarter longer word for word. */
.nav ul a,.nav ul .nbtn{white-space:nowrap}
.nav .right .ctabtn{flex:0 0 auto}
.nav a.n,.nav ul .nbtn{font-size:.68rem;letter-spacing:.13em}
html[lang="es"] .nav a.n,html[lang="es"] .nav ul .nbtn{font-size:.645rem;letter-spacing:.08em}
html[lang="es"] .nav ul{gap:clamp(.8rem,1.15vw,1.25rem)}
html[lang="es"] .nav .right{gap:clamp(.7rem,1vw,.95rem);margin-left:clamp(1.2rem,2.2vw,2rem)}

/* the Finance trigger is a button for keyboard and screen-reader reasons but
   has to read exactly like the links beside it */
.nav ul .nbtn{background:none;border:0;padding:0;cursor:pointer;font-family:"Inter";
 font-weight:400;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
 color:var(--muted);transition:color .3s;display:inline-flex;align-items:center;gap:.4rem}
.nav ul .nbtn::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;
 border-bottom:1px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);
 transition:transform .25s}
.nav ul .nbtn:hover,.nav ul .nbtn.active,.nav ul .nbtn[aria-expanded="true"]{color:var(--ink)}
.nav ul .nbtn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
/* the hero carries one of these too, so the positioning context is on the
   wrapper itself rather than scoped to the nav */
.hasmenu{position:relative}
.submenu{position:absolute;top:calc(100% + 1.1rem);left:50%;transform:translateX(-50%) translateY(6px);
 min-width:14rem;background:#121215;border:1px solid var(--line);border-radius:10px;
 padding:.45rem;display:flex;flex-direction:column;
 box-shadow:0 18px 44px rgba(0,0,0,.6);opacity:0;visibility:hidden;pointer-events:none;
 transition:opacity .22s,transform .22s,visibility .22s;z-index:60}
.hasmenu.open .submenu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
/* a hover bridge, so the pointer can cross the gap without the menu closing */
.hasmenu::after{content:"";position:absolute;top:100%;left:0;right:0;height:1.2rem}
.submenu a{font-family:"Inter";font-weight:400;font-size:.68rem;letter-spacing:.14em;
 text-transform:uppercase;color:var(--muted);padding:.6rem .75rem;border-radius:6px;
 white-space:nowrap;transition:background .2s,color .2s}
.submenu a:hover,.submenu a:focus-visible{background:rgba(255,255,255,.07);color:var(--ink)}

/* HERO BAND. Was min-height:100vh; now a short band that lets the first real
   section sit near the fold instead of a screen below it. */
body.home .hero{min-height:0;padding-block:calc(var(--hdr) + clamp(2rem,5vw,3.4rem)) clamp(2.4rem,5vw,3.6rem);
 align-items:center}
body.home .hero .eyebrow{margin-bottom:1rem}
body.home .hero h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.04}
body.home .hero .sub{max-width:52ch;font-size:.97rem;margin:1rem 0 1.8rem}
body.home .hero .cta{gap:.9rem}
@media(max-width:640px){
 body.home .hero{padding-block:calc(var(--hdr) + 1.6rem) 2.2rem}
 body.home .hero h1{font-size:clamp(1.8rem,8vw,2.4rem)}
 body.home .hero .sub{font-size:.9rem;margin:.9rem 0 1.4rem}
}

/* NAV COLLAPSE. English fits to 1080px; Spanish needs the burger sooner.
   Both are measured from the real content width, not guessed. */
/* Measured with the CTA present at every width: six items plus the button
   fit to about 920px in both languages, so the links hand over to the burger
   at 980px - clear of the floor rather than right on it. English and Spanish
   share the breakpoint; the revised labels are short enough that Spanish no
   longer needs its own. */
/* Measured floors with the standardised buttons: English holds to about
   1081px, Spanish only to about 1160px. A single shared breakpoint cost
   English the 1081-1160 band for no reason, so each language collapses at
   its own measured floor. */
@media(max-width:1080px){
 .nav ul{display:none}
 .navtoggle{display:inline-flex}
}
@media(max-width:1160px){
 html[lang="es"] .nav ul{display:none}
 html[lang="es"] .navtoggle{display:inline-flex}
}

/* Get Approved is the primary conversion action and most of this traffic is
   on a phone, so the CTA stays in the bar at every width rather than hiding
   behind the burger. Measured down to 390px: it fits without crowding the
   wordmark or spilling. */
/* UTILITY STRIP. At 390px, and in Spanish especially, the status line and the
   phone number were wrapping inside a 36px row and colliding with the nav
   below. Nothing in the strip wraps now, and the opening hours - the one part
   that is not essential - drop away on the narrowest screens. */
.utilrow{white-space:nowrap;gap:.75rem}
.ustatus,.uphone{white-space:nowrap;min-width:0}
.ustatus .ustate{font-weight:400}
@media(max-width:560px){
 .uhrs{display:none}
 .utilrow{font-size:.58rem;letter-spacing:.14em}
}
@media(max-width:380px){
 .ustatus svg{display:none}
}
/* the mobile sheet carries everything the bar drops, plus Sold and Contact */
.mobile .btn{margin-top:1rem}

/* ===== trade/sell form stub =====
   Neither form submits yet, so rather than a fake confirmation the page says
   so plainly and offers the two channels that do work. */
.formstub{margin-top:1.4rem;padding:1.15rem 1.25rem;border:1px solid var(--line);
 border-left:2px solid var(--ink);border-radius:10px;background:rgba(255,255,255,.035);
 transition:border-color .3s,background .3s}
.formstub.flash{border-color:var(--ink);background:rgba(255,255,255,.07)}
.formstub strong{display:block;font-family:"Inter";font-weight:500;font-size:.72rem;
 letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.formstub p{margin:.5rem 0 0;font-size:.84rem;line-height:1.6;color:var(--muted)}
.stubcta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.95rem}

/* the inventory categories inside the mobile sheet, indented under their parent */
.mobile-sub{display:flex;flex-direction:column;gap:1.1rem;padding-left:1.1rem;
 border-left:1px solid var(--line)}
.mobile-sub a{font-size:1.05rem;color:var(--muted)}

/* ===== trust band =====
   Three figures, hairline-separated, sitting between the inventory grid and
   the Why section. Deliberately quiet - rules rather than boxes - so it reads
   as a statement of record and not as another promotional panel. */
.trustband{padding-block:clamp(2.2rem,4vw,3.2rem);
 border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
 gap:clamp(1.4rem,3vw,2.5rem);list-style:none;margin:0;text-align:center}
.tstats li{display:flex;flex-direction:column;align-items:center;gap:.45rem;min-width:0}
.tstats li + li{border-left:1px solid var(--line)}
.tnum{font-family:"Oswald";font-weight:300;font-size:clamp(1.9rem,4vw,2.9rem);
 line-height:1;letter-spacing:.02em;color:var(--ink)}
.tlabel{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--muted);line-height:1.5}
@media(max-width:620px){
 /* Three across rather than stacked. Stacked, the band ran 291px tall on a
    390px phone and read as three separate sections rather than one row of
    credentials, so the vertical rules come back and the gaps come in. */
 .tstats{grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
 .tstats li{gap:.3rem;justify-content:flex-start}
 .tstats li + li{border-left:1px solid var(--line);border-top:0;padding-top:0}
 .tnum{font-size:clamp(1.3rem,6.4vw,1.85rem)}
 /* the label's size and tracking on a phone are set with the column
    padding, in the trust band block at the end of the file */
 .tlabel{line-height:1.45}
}

/* ===== header legibility =====
   The bar sits over a photographic hero, so at rest the links were grey on
   whatever happened to be behind them. They are now full-contrast ink, with a
   scrim behind the whole header so nothing washes out over a bright frame,
   and the current page is marked by a rule that stays rather than by colour
   alone - colour is not something every visitor can rely on. */
header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,0));
 transition:opacity .4s}
header.solid::before{opacity:0}

.nav a.n,.nav ul .nbtn{color:var(--ink)}
.nav a.n{position:relative;padding-bottom:.3rem}
.nav a.n::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
 background:currentColor;transform:scaleX(0);transform-origin:left;
 transition:transform .25s}
.nav a.n:hover::after,.nav a.n:focus-visible::after{transform:scaleX(1)}
/* the active page keeps its underline; hover only borrows the effect */
.nav a.n.active::after{transform:scaleX(1)}
.nav ul .nbtn{position:relative;padding-bottom:.3rem}
/* replaced: see .nlabel below - this fought the caret for ::after */
.nav ul .nbtn:hover,.nav ul .nbtn[aria-expanded="true"]{color:var(--ink)}
.ustatus,.uphone,.langbtn,.langsep{color:rgba(244,242,238,.82)}
.uphone b,.langbtn.on{color:var(--ink)}
.navtoggle{color:var(--ink)}

/* ===== right-side buttons ===== */
.navbtns{display:flex;align-items:center;gap:clamp(.5rem,.9vw,.8rem)}
.navbtns .hasmenu{display:inline-flex}
/* the trigger is a button, so it carries the caret itself rather than
   borrowing the nav link's */

/* a menu hanging off a right-hand button, and one off a left-aligned hero
   button, cannot both be centred */
.submenu.smr{left:auto;right:0;transform:translateX(0)}
.hasmenu.open .submenu.smr{transform:translateX(0)}
.submenu.sml{left:0;right:auto;transform:translateX(0)}
.hasmenu.open .submenu.sml{transform:translateX(0)}

/* ===== hero: three buttons ===== */
body.home .hero .cta{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem}
body.home .hero .cta .btn{white-space:nowrap}
body.home .hero .herotrade .submenu{top:calc(100% + .7rem)}
@media(max-width:560px){
 /* stacked, full width, so three buttons never shard into odd rows */
 body.home .hero .cta{flex-direction:column;align-items:stretch;gap:.65rem}
 body.home .hero .cta .btn,body.home .hero .herotrade{width:100%}
 body.home .hero .herotrade .btn{width:100%;justify-content:center}
 body.home .hero .herotrade .submenu{left:0;right:0;width:auto;min-width:0}
}

/* Two right-side buttons will not fit beside the wordmark on a phone. Get
   Approved is the conversion action and stays in the bar to 390px; Trade-in
   or Sell steps aside and remains in the mobile sheet. This sits last because
   the .navbtns display rules above would otherwise win on source order. */
@media(max-width:620px){.navbtns .hasmenu{display:none}}

/* The hero clipped its own dropdown. overflow:hidden was there to contain the
   Ken Burns pan, which belongs to .hero-media - moving it there lets the menu
   escape the band while the image stays clipped. */
body.home .hero{overflow:visible}
body.home .hero-media{overflow:hidden}

/* ===== CTA button component =====
   Header and hero share one button, so the two rows read as the same control
   placed twice rather than as two different designs. Outlined, never filled:
   nothing in either row outranks anything else, which is what was asked for.
   Fixed height rather than padding-driven height, so a caret or a longer
   Spanish label cannot make one button taller than its neighbours. */
.ctabtn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
 height:42px;padding:0 1.15rem;border:1px solid rgba(255,255,255,.34);border-radius:var(--btn-radius);
 background:rgba(255,255,255,.04);color:var(--ink);cursor:pointer;
 font-family:"Inter";font-weight:400;font-size:.66rem;letter-spacing:.13em;
 text-transform:uppercase;text-align:center;white-space:nowrap;
 transition:background .3s,border-color .3s}
.ctabtn:hover,.ctabtn:focus-visible{background:rgba(255,255,255,.12);
 border-color:rgba(255,255,255,.62)}
/* Get Approved is the one primary action, so it is the only filled button.
   It keeps the component's height, padding and radius, and it now behaves
   like the contact form's Send Message: the same .74rem type and the same
   .4s cross-fade, inverting to an outline on hover rather than just
   brightening. .btn.fill is the reference; this matches it. */
.ctabtn.primary{background:var(--ink);border-color:var(--ink);color:var(--bg);
 font-size:.74rem;transition:background .4s,color .4s,border-color .4s}
.ctabtn.primary:hover,.ctabtn.primary:focus-visible{background:transparent;
 color:var(--ink);border-color:var(--ink)}
.ctabtn:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
/* the dropdown trigger carries its own caret */
.ctabtn.nbtn::after{content:"";width:5px;height:5px;flex:0 0 auto;
 border-right:1px solid currentColor;border-bottom:1px solid currentColor;
 transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s}
.ctabtn.nbtn[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}

/* ===== hero row =====
   Equal columns sized to the widest label, so the three read as one block
   whichever language is on. */
body.home .hero .cta{display:inline-grid;grid-auto-flow:column;grid-auto-columns:1fr;
 gap:.75rem;max-width:100%}
body.home .hero .cta > *{min-width:0}
body.home .hero .herotrade{display:inline-flex}
body.home .hero .herotrade .ctabtn{width:100%}
@media(max-width:560px){
 body.home .hero .cta{display:flex;flex-direction:column;align-items:stretch;gap:.6rem}
 body.home .hero .cta > *{width:100%}
}

/* The component shrinks as a set on the narrowest screens, so the buttons
   stay identical to each other while "Obtenga Aprobacion" still fits beside
   the wordmark at 390px. */
@media(max-width:470px){
 /* .ctabtn.primary carries its own .74rem to match Send Message, which is a
    class more specific than this one - so it has to be named here or the
    filled button alone keeps desktop type on a phone and shoulders the
    burger off the screen. */
 .ctabtn,.ctabtn.primary{height:38px;padding:0 .8rem;font-size:.6rem;letter-spacing:.08em}
}

/* ===== hero buttons =====
   The hero pair of CTAs carries the page, so they are a size up from the
   header's compact chips - taller, wider padding, slightly larger label.
   All three move together so the row stays uniform; only the fill differs. */
body.home .hero .cta .ctabtn{height:54px;padding:0 1.9rem;font-size:.74rem;
 letter-spacing:.15em}
@media(max-width:560px){
 body.home .hero .cta .ctabtn{height:50px;padding:0 1.2rem;font-size:.7rem}
}

/* ===== home density =====
   With seven cars in stock, 104px of padding above and below every section
   read as empty rather than considered. One tighter rhythm is applied to the
   whole page, the section headings come down to the compact page-header
   scale, and the few blocks that were mostly air - the statement, the map,
   the Instagram tiles - are brought in. Nothing is removed; this is spacing
   and type size only, and it is scoped to the home page so the interior
   pages keep their own rhythm. */
/* these three moved into the base rules above; the eyebrow stays here
   because it is the only one that is still home-specific in degree */
.sec-top .eyebrow{display:block;margin-bottom:.55rem}
body.home .center-cta{margin-top:clamp(1.2rem,2.2vw,1.8rem)}
/* the trust band sets its own tighter padding, which the blanket section
   rule above would otherwise override upwards */
body.home .trustband{padding-block:clamp(1.7rem,2.9vw,2.4rem)}

/* the hero band starts the page, so every pixel here delays everything below */
body.home .hero{padding-block:calc(var(--hdr) + clamp(1.3rem,2.8vw,2.1rem)) clamp(1.7rem,3.2vw,2.5rem)}
body.home .hero .eyebrow{margin-bottom:.7rem}
body.home .hero h1{font-size:clamp(1.9rem,3.9vw,3rem)}
body.home .hero .sub{margin:.8rem 0 1.5rem}

/* a logo strip does not need 30px of air on each side */
body.home .marquee{padding:1.05rem 0}

/* one sentence inside a full-bleed band was running 486px tall */
body.home .statement p{font-size:clamp(1.2rem,2.5vw,1.85rem)}
body.home .statement .eyebrow{margin-bottom:1rem}

/* the delivery band and its map were the tallest block on the page */
body.home .dband{padding:clamp(1.5rem,2.8vw,2.3rem)}
body.home .usmap-wrap{max-width:660px;margin-top:1.1rem}

/* three square tiles across the full column made this the emptiest section
   of all; the feed still fills the same three, just smaller */
body.home .ig-grid{max-width:720px;margin-inline:auto;gap:.5rem}

@media(max-width:640px){
 section{padding-block:clamp(1.8rem,5vw,2.4rem)}
 .sec-top{margin-bottom:1.1rem}
 body.home .usmap-wrap,body.home .ig-grid{max-width:none}
}

/* ===== footer restructure =====
   The left column is the brand alone now, with the wordmark up from 30px so
   it carries that side of the footer. Instagram sits in Visit rather than
   Contact: the grid height is set by Services and Contact at 226px, while
   Visit had 80px of slack, so this is the one column that absorbs an icon
   without making the whole footer taller. The trust badges move from the
   bottom-left to a centred row, a size down, evenly spaced. */
/* width:auto keeps the ratio; object-fit:contain means that even if a
   narrow column ever caps it, it letterboxes rather than stretching. */
.foot-brand img{height:clamp(38px,3.4vw,52px);width:auto;max-width:100%;
 object-fit:contain;margin-bottom:1.1rem}
.foot-brand p{max-width:34ch;margin-bottom:0}

/* compact enough to tuck under Get Directions without crowding it */
.foot-col .socials{margin-top:1.1rem}
.foot-col .socials img{height:24px}

.foot-trust{justify-content:center;gap:clamp(1.4rem,3.4vw,2.8rem)}
.foot-trust span{height:40px;justify-content:center}
.foot-trust img{height:40px}

@media(max-width:900px){
 /* the brand block spans the full row once the columns halve, so the
    wordmark does not end up marooned beside a narrow column */
 .foot-brand{grid-column:1/-1}
}
@media(max-width:560px){
 .foot-brand img{height:clamp(34px,9vw,44px)}
 .foot-trust{gap:1.1rem 1.6rem}
 .foot-trust span,.foot-trust img{height:34px}
}

/* ===== site-wide heading + spacing consistency =====
   A few blocks set their own heading size and sat outside the .sec-top
   scale, so interior pages still carried 48px titles after the home pass.
   They all come to the same compact size. */
.faqhead h2,.estcta h2,.dband h2,.about-block h2,.lenderwall-head h2{
 font-size:clamp(1.45rem,2.4vw,1.95rem);letter-spacing:.08em}
.statement p{font-size:clamp(1.2rem,2.5vw,1.85rem)}
.statement .eyebrow{margin-bottom:1rem}
.dband{padding:clamp(1.5rem,2.8vw,2.3rem)}

/* The hero was given overflow:visible so its dropdown could escape the band,
   which also un-clipped the decorative monogram - it bleeds 4% past the right
   edge by design and was widening the whole document. overflow-x:clip trims
   it back without re-trapping the menu, which overflow:hidden would. */
body.home .hero{overflow:visible;overflow-x:clip}

/* ===== interior density =====
   What the per-page audit flagged after the rhythm went site-wide: the page
   header reserved more clearance than the fixed bar needs, the forms and the
   award grid were padded for a roomier page, and the delivery map and lender
   wall were sized before the rest tightened around them. */
.page-head{padding-block:calc(var(--hdr) + clamp(.85rem,1.9vw,1.5rem)) clamp(1rem,2vw,1.6rem)}

/* nine chips at 130px tall made Recognition the emptiest block on About */
.badge-chip{height:96px;padding:12px}
.badge-grid{margin-top:1.6rem}

/* forms carried a roomier page's padding */
.form.glass{padding:clamp(1.35rem,2.4vw,1.9rem)}
.calcmod.glass{padding:clamp(1.35rem,2.4vw,1.9rem)}

/* the map was only capped on the home page */
.usmap-wrap{max-width:660px;margin-top:1.1rem}

/* twelve tiles at 16/7 is a lot of vertical for twelve words */

@media(max-width:640px){
 .page-head{padding-block:calc(var(--hdr) + .8rem) .9rem}
 .badge-chip{height:84px}
 .usmap-wrap{max-width:none}
}

/* and the labels themselves must be allowed to wrap inside those tracks */

/* ===== nav active state =====
   A dropdown trigger needs two decorations - the caret and, when its section
   is current, the underline - and both were ::after on the same button, so
   only the caret ever drew. The label now sits in its own element and carries
   the underline, which also makes the rule stop at the text rather than
   stretching under the caret, so it matches the plain links beside it. */
.nav ul .nbtn .nlabel{position:relative;display:inline-block}
.nav ul .nbtn .nlabel::after{content:"";position:absolute;left:0;right:0;bottom:-.3rem;
 height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;
 transition:transform .25s}
.nav ul .nbtn:hover .nlabel::after,
.nav ul .nbtn:focus-visible .nlabel::after,
.nav ul .nbtn.active .nlabel::after{transform:scaleX(1)}

/* the current page inside an open menu - a highlight, not an underline */
.submenu a.on{background:rgba(255,255,255,.09);color:var(--ink);font-weight:500}

/* Trade In / Sell is a button, so its current state is a button state */
.ctabtn.is-current{border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.14)}

/* ===== button family =====
   The audit found five different corner treatments across the site: 6px on
   the header CTAs, 7px on the hero copies of the same component, and square
   corners on .btn and on every one-off button - the gallery arrows, the
   finance tabs, the term and pager toggles, View All Photos, and every form
   submit. They are one family now, taking the header button's radius.
   Borders and hover behaviour are brought into line with it too; sizes stay
   as they are, since the hero buttons are deliberately larger. */
.btn,
.viewall,
.fintab,
.gnav,
.terms button,
.pager button,
.gallery .thumbs button,
.faq-q,
button[type="submit"],
input[type="submit"]{border-radius:var(--btn-radius)}

/* the outlined members share one border and one hover */
.btn:not(.fill),.viewall,.fintab,.gnav{border:1px solid var(--line)}
.btn:not(.fill):hover,.viewall:hover,.fintab:hover,.gnav:hover{
 border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.07);color:var(--ink)}

/* ===== footer polish =====
   Thin-stroke icons borrowed from the utility bar, so the footer reads in the
   same hand. They are sized in ems to stay locked to their text. */
.fico{width:1em;height:1em;flex:0 0 auto;stroke:currentColor;fill:none;opacity:.72}
footer .foot-col .v.ico,footer .foot-col h4.ico{display:flex;align-items:center;gap:.5rem}
footer .foot-col h4.ico .fico{opacity:.6}

/* only the brand is centred. Putting align-items:center on the grid itself
   centred every column, which left the four column headings staggered. */
.foot-brand{align-self:center}

/* Get Directions was muted enough to read as body copy rather than a link */
.dirlink{display:inline-flex;align-items:center;gap:.45rem;margin-top:.55rem;
 color:var(--ink);font-family:"Inter";font-weight:400;font-size:.78rem;
 letter-spacing:.06em;transition:color .25s}
.dirlink .ar{transition:transform .25s}
.dirlink:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.dirlink:hover .ar{transform:translateX(3px)}

/* bottom bar: copyright left, credit centred, links right */
/* the existing .foot-bottom .row2 is flex with space-between and outranks a
   bare .row2, so this has to match its specificity to take effect */
.foot-bottom .row2{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
 align-items:center;gap:1rem}
.foot-bottom .row2 > .c{justify-self:start}
.foot-bottom .row2 > ul{justify-self:end}
/* "Site by" is plain footer text: same family, weight, size, tracking and
   colour as the copyright line beside it. The wrapper sets no font of its
   own, so only the VNTRDigital lockup carries special treatment. */
/* .foot-bottom a sets .62rem on every link down here and outranks a bare
   class, so the credit is scoped to match it and keep its own 11px */
.foot-bottom .vntr-credit{justify-self:center;display:inline-flex;align-items:center;gap:.5em;
 font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.22em;
 text-transform:uppercase;color:var(--muted);text-decoration:none;white-space:nowrap;
 line-height:1.7;transition:color .2s ease}
/* only the wordmark responds to hover. .foot-bottom a:hover brightens every
   link down here, so the label has to be held muted explicitly. */
.foot-bottom .vntr-credit:hover,.foot-bottom .vntr-credit:focus-visible{color:var(--muted)}
.foot-bottom .vntr-credit__mark{font-weight:700;letter-spacing:-.02em;font-size:13px;
 display:inline-block;transform:skewX(-12deg)}
/* VNTR and Digital are one wordmark, so they sit tight against each other
   inside their own box - the parent's .4em gap only separates the label from
   the mark. The skew stays on VNTR alone; Digital is upright and lighter. */
/* Jost is the wordmark face; the label beside it stays Inter. No scaleY -
   the letterforms carry the brand, not a squash. */
.foot-bottom .vntr-credit__wm{display:inline-flex;align-items:baseline;line-height:1;
 font-family:'Jost','Futura','Century Gothic','Space Grotesk',sans-serif;
 color:rgba(244,242,238,.82);transition:color .2s ease}
.foot-bottom .vntr-credit:hover .vntr-credit__wm,
.foot-bottom .vntr-credit:focus-visible .vntr-credit__wm{color:var(--ink)}
/* the skew pulls the R away at the baseline, so the gap is tuned by eye
   rather than left at the nominal value */
.foot-bottom .vntr-credit__suffix{font-weight:300;font-size:13px;letter-spacing:.02em;
 margin-left:.02em;text-transform:none}

@media(max-width:760px){
 .foot-bottom .row2{grid-template-columns:1fr;justify-items:center;text-align:center;gap:.9rem}
 .foot-bottom .row2 > .c,.foot-bottom .row2 > ul,.vntr-credit{justify-self:center}
 /* the link list wraps on the narrowest screens and its rows were left
    aligned inside it, which read as off-centre under the other two */
 .foot-bottom .row2 > ul{justify-content:center;row-gap:.6rem}
}
footer .disc{font-size:.68rem;line-height:1.6}

/* ===== inventory filter rail =====
   The filters move out of a horizontal bar above the grid and into a column
   beside it, which is where a shopper expects to narrow a list. The rail is
   sticky on desktop and a drawer below 1000px. */
/* The rail is a fixed column and the results take whatever is left, so the
   grid widens with the viewport. No cap of its own: the global .wrap bound
   is the only one, which is what keeps this page in line with the others. */
.invlayout{display:grid;grid-template-columns:260px minmax(0,1fr);
 gap:clamp(1.4rem,2.6vw,2.6rem);align-items:start}
.invmain{min-width:0}

.filterrail{position:sticky;top:calc(var(--hdr) + 1rem);align-self:start}
.railbody{border:1px solid var(--line);border-radius:10px;padding:1.1rem 1.1rem 1.3rem;
 background:rgba(255,255,255,.02);max-height:calc(100vh - var(--hdr) - 3rem);overflow:auto}
.railtop{display:flex;align-items:baseline;justify-content:space-between;gap:.6rem;
 padding-bottom:.85rem;margin-bottom:.95rem;border-bottom:1px solid var(--line)}
.matchcount{font-family:"Inter";font-weight:500;font-size:.72rem;letter-spacing:.12em;
 text-transform:uppercase;color:var(--ink)}
.clearall{background:none;border:0;padding:0;cursor:pointer;font-family:"Inter";
 font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
 text-decoration:underline;text-underline-offset:3px;transition:color .25s}
.clearall:hover{color:var(--ink)}

.railsearch{margin-bottom:1.1rem}
.railsearch label{display:block;font-family:"Inter";font-size:.56rem;letter-spacing:.2em;
 text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.railsearch input{width:100%;background:rgba(255,255,255,.03);border:1px solid var(--line);
 border-radius:var(--btn-radius);color:var(--ink);font-family:"Inter";font-size:.8rem;
 padding:.6rem .7rem}
.railsearch input:focus{outline:none;border-color:rgba(255,255,255,.45)}

.facet + .facet{margin-top:1.15rem;padding-top:1.15rem;border-top:1px solid rgba(255,255,255,.07)}
.facet-h{font-family:"Inter";font-weight:500;font-size:.58rem;letter-spacing:.2em;
 text-transform:uppercase;color:var(--muted);margin:0 0 .55rem}
.facet-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.facet-opt{display:flex;align-items:center;gap:.55rem;cursor:pointer;padding:.28rem 0;
 font-family:"Inter";font-size:.78rem;color:var(--ink);transition:color .2s}
.facet-opt input{position:absolute;opacity:0;width:0;height:0}
.fo-box{width:14px;height:14px;flex:0 0 auto;border:1px solid var(--line);border-radius:3px;
 position:relative;transition:border-color .2s,background .2s}
.facet-opt:hover .fo-box{border-color:rgba(255,255,255,.5)}
.facet-opt input:checked + .fo-box{background:var(--ink);border-color:var(--ink)}
/* the tick is drawn rather than a glyph, so it cannot pick up a font fallback */
.facet-opt input:checked + .fo-box::after{content:"";position:absolute;left:4px;top:1px;
 width:4px;height:8px;border:solid var(--bg);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.facet-opt input:focus-visible + .fo-box{outline:1px solid var(--ink);outline-offset:2px}
.fo-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fo-n{margin-left:auto;font-size:.66rem;color:var(--muted);font-variant-numeric:tabular-nums}
.facet-opt.is-empty{opacity:.38;cursor:default}

.railapply{display:none;width:100%;margin-top:1.1rem}
.railtoggle{display:none}

/* results column */
.invhead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;
 margin-bottom:1.1rem;flex-wrap:wrap}
/* the rail already shows the match count, so this one only appears once the
   rail has collapsed into a drawer and that count is out of sight */
.count-top{display:none;font-family:"Inter";font-size:.62rem;letter-spacing:.2em;
 text-transform:uppercase;color:var(--muted)}
.sortfld{max-width:220px;min-width:170px}
/* fluid rather than a fixed column count: the grid packs as many cards as fit
   beside the rail at a readable minimum, so a wide screen gains columns
   instead of stretching three of them. min() keeps the track from exceeding
   the container on the narrowest screens, which bare minmax() would. */
.invmain .grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr));
 gap:clamp(1rem,1.8vw,1.5rem)}

/* ===== in-grid CTA cards =====
   Same footprint as a vehicle card so a short list still reads as a full
   grid rather than a sparse one. Outlined, so they never compete with stock. */
.ctacard{display:flex;flex-direction:column;justify-content:center;gap:.55rem;
 border:1px dashed rgba(255,255,255,.22);border-radius:10px;
 padding:1.6rem 1.4rem;text-align:left;background:rgba(255,255,255,.015);
 cursor:default;transition:border-color .3s,background .3s}
.ctacard:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.035)}
.ctacard .eyebrow{display:block}
.ctacard h3{font-family:"Oswald";font-weight:400;font-size:1.15rem;line-height:1.15;
 letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin:.2rem 0 0}
.ctacard p{font-family:"Inter";font-size:.78rem;line-height:1.6;color:var(--muted);margin:0}
.ctacard .ctabtn{margin-top:.8rem;align-self:flex-start}

@media(max-width:1000px){
 /* the rail becomes a drawer: a button in the flow, a panel over the page */
 .invlayout{grid-template-columns:minmax(0,1fr)}
 .filterrail{position:static}
 .railtoggle{display:inline-flex;align-items:center;gap:.5rem;width:100%;
  justify-content:center;height:44px;padding:0 1.15rem;border:1px solid var(--line);
  border-radius:var(--btn-radius);background:rgba(255,255,255,.04);color:var(--ink);
  cursor:pointer;font-family:"Inter";font-size:.66rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:1rem}
 .rt-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;
  height:20px;padding:0 .35rem;border-radius:999px;background:var(--ink);color:var(--bg);
  font-size:.62rem;letter-spacing:0}
 .railbody{display:none;max-height:none}
 .filterrail.open .railbody{display:block;position:fixed;inset:auto 0 0 0;z-index:70;
  max-height:78vh;overflow:auto;border-radius:14px 14px 0 0;background:#111114;
  box-shadow:0 -18px 50px rgba(0,0,0,.6)}
 .railapply{display:inline-flex}
 .count-top{display:block}
}
@media(max-width:640px){
 .invhead{align-items:stretch}
 .sortfld{max-width:none}
}

/* colour swatches in the rail. Every swatch carries the same light hairline so
   white and ivory stay visible against the dark panel. */
.fo-sw{width:12px;height:12px;flex:0 0 auto;border-radius:50%;
 border:1px solid rgba(255,255,255,.3)}
.fo-sw-none{background:transparent;border-style:dashed;opacity:.5}

/* ===== readable measure =====
   .wrap now runs to 1920px, so running text needs a cap of its own - the
   footer disclaimer was setting 175-character lines, which no screen width
   makes readable. Only prose is capped; grids, bands and cards still take
   the full container. Each selector here is prose-only, so none of them can
   reach a grid item or a card. */
.wrap>p,.formstub p{max-width:72ch}
.disc{max-width:92ch}
/* the bottom bar is left-aligned, so this stays left-aligned too. Fine print
   earns a slightly wider measure than body copy, not an unbounded one. */
.foot-bottom .disc{max-width:90ch}

/* ===== "What's your car worth?" band =====
   A trade-in prompt on the listing page, between the intro line and the
   results. It is an in-page band rather than a global strip: this is where a
   shopper is already weighing their own car against the lot, so it is the one
   page where the question earns its place. Dismissal is remembered, and an
   inline script in <head> applies it before the first paint so the band never
   shows and then vanishes. */
html.tbar-off .tradebar{display:none}
.tradebar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;
 align-items:center;gap:.9rem 1.3rem;
 margin-bottom:clamp(1.3rem,2.4vw,2rem);
 padding:clamp(.85rem,1.6vw,1.1rem) clamp(1rem,2vw,1.4rem);
 border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.03)}
.tradebar .tbar-q{min-width:0;font-family:"Oswald";font-weight:300;text-transform:uppercase;
 letter-spacing:.1em;font-size:clamp(.92rem,1.7vw,1.1rem);line-height:1.25;color:var(--ink)}
.tradebar .ctabtn{height:38px;font-size:.62rem}
.tbar-x{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
 padding:0;background:none;border:0;border-radius:50%;color:var(--muted);cursor:pointer;
 transition:color .25s,background .25s}
.tbar-x svg{width:14px;height:14px}
.tbar-x:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.tbar-x:focus-visible{outline:1px solid var(--ink);outline-offset:2px}
@media(max-width:620px){
 /* The prompt keeps the dismiss beside it and the button takes its own row,
    so neither the question nor the action has to shrink to fit. Every cell is
    placed by hand: a full-width button cannot share row one, and left to
    auto-placement the dismiss is pushed past it onto a third row. */
 .tradebar{grid-template-columns:minmax(0,1fr) auto}
 .tradebar .tbar-q{grid-column:1;grid-row:1}
 .tradebar .tbar-x{grid-column:2;grid-row:1;align-self:start}
 .tradebar .ctabtn{grid-column:1/-1;grid-row:2;justify-self:start}
}

/* ===== finance hub ===== */
/* The forms are contained and centred rather than running the full width of
   the page - .finwrap already caps them, and a credit application is easier
   to read at a single column's measure than at 1900px. */
.finlede{max-width:56ch;margin:0 auto 1.6rem;text-align:center;color:var(--muted);
 font-size:.92rem;line-height:1.65}
.creditapp{max-width:900px;margin-inline:auto}
/* the application is a third-party page: it brings its own light chrome, so it
   sits on a white panel rather than bleeding into the dark theme */
.creditframe{border:1px solid var(--line);border-radius:10px;overflow:hidden;
 background:#fff}
.creditframe iframe{display:block;width:100%;height:1093px;border:0}
/* This is not a decorative fallback. The application refuses to render inside
   a frame it does not recognise - the refusal is drawn by its own script, and
   being cross-origin we cannot detect it - so anyone who meets that message
   needs the way out to be the next thing they see, not a footnote. */
.creditalt{margin-top:1.1rem;text-align:center}
.creditalt a{display:inline-flex;align-items:center;gap:.5rem;
 padding:.7rem 1.2rem;border:1px solid var(--line);border-radius:var(--btn-radius);
 font-family:"Inter";font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted);transition:color .25s,border-color .25s,background .25s}
.creditalt a::after{content:"97";font-size:.9em;line-height:1}
.creditalt a:hover,.creditalt a:focus-visible{color:var(--ink);
 border-color:rgba(255,255,255,.5);background:rgba(255,255,255,.05)}
@media(max-width:620px){
 /* a tall form on a short screen scrolls inside the frame, which traps the
    page scroll, so the frame gets the height it needs instead */
 .creditframe iframe{height:1280px}
}

/* ===== bad credit ===== */
/* The headline is the one place on the site that raises its voice, so it takes
   the condensed face at a weight and an oblique nothing else uses. Oswald has
   no italic cut, so this is a real skew rather than a synthesised one - the
   same treatment the VNTR mark in the footer uses. */
.bc-hero{text-align:center}
.bc-hero .eyebrow{display:block;margin-bottom:.9rem}
.bc-h1{font-family:"Oswald";font-weight:500;text-transform:uppercase;
 font-size:clamp(1.9rem,5.6vw,4.4rem);line-height:1.02;letter-spacing:.01em;
 max-width:21ch;margin-inline:auto;transform:skewX(-7deg)}
.bc-sub{max-width:40ch;margin:1.4rem auto 0;color:var(--muted);
 font-size:clamp(.95rem,1.5vw,1.1rem);line-height:1.6}
.bc-actions{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.bc-hero .bc-actions,.bc-actions-center{justify-content:center}
.bc-btn{min-width:190px}

/* two grouped panels, each row an icon and a short label - a capability grid
   to scan, not a wall of bullets */
.bc-panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
 gap:clamp(1.2rem,2.4vw,2rem);max-width:1100px;margin-inline:auto}
.bc-panel{border:1px solid var(--line);border-radius:12px;
 background:rgba(255,255,255,.025);padding:clamp(1.4rem,2.4vw,2rem)}
.bc-panel-h{font-family:"Inter";font-weight:500;font-size:.62rem;letter-spacing:.26em;
 text-transform:uppercase;color:var(--muted);padding-bottom:1rem;margin-bottom:.4rem;
 border-bottom:1px solid var(--line)}
.bc-list{list-style:none;margin:0;padding:0}
.bc-item{display:flex;align-items:center;gap:.9rem;padding:.85rem 0;
 font-size:.95rem;line-height:1.4;color:var(--ink)}
.bc-item + .bc-item{border-top:1px solid rgba(255,255,255,.06)}
.bc-item .x{width:17px;height:17px;flex:0 0 auto;color:var(--ev)}

/* the free local delivery promise, now a band in the delivery page flow */
.freedel-sec{padding-block:0}
.freedel{display:flex;align-items:center;justify-content:center;gap:.9rem;
 max-width:1100px;margin:0 auto clamp(1.6rem,3vw,2.6rem);
 padding:clamp(.9rem,1.8vw,1.2rem) clamp(1.1rem,2.2vw,1.6rem);
 border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.015);
 text-align:center}
.freedel .x{width:22px;height:22px;flex:0 0 auto;color:var(--muted)}
.freedel p{font-family:"Inter";font-size:.88rem;letter-spacing:.02em;color:var(--ink);
 margin:0;max-width:52ch}

/* The closing line sits in the shared .statement band, which already supplies
   the condensed uppercase type, the centring and the 1000px measure - and
   .statement p outranks a single class, so setting any of that here would be
   dead code. All this needs is the gap under it. */
.bc-close-sec .bc-actions{margin-top:1.8rem}

@media(max-width:820px){
 .bc-panels{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
 .freedel{flex-direction:column;gap:.7rem}
 .bc-btn{min-width:0;width:100%}
 .bc-actions{width:100%}
}

/* ===== nav parents navigate ===== */
/* Inventory and Finance used to be buttons that only opened a menu, so the
   word itself went nowhere. The label is a link to its own page now and the
   caret beside it is a separate control, which keeps both the page and the
   sub-items reachable - including on a touchscreen, where there is no hover
   to fall back on. */
/* A plain <li> is a block, so its height is the line box struck from the
   list's own 16px font - 27.2px - while a flex .hasmenu is only as tall as
   its link. That 4px difference is what tipped Inventory and Finance off the
   axis. Every item is a flex box now, so they all measure the same. */
.nav ul>li{display:inline-flex;align-items:stretch}
/* The caret is a sibling of the label, so the two have to share the link's
   box or the word rides off the axis its plain neighbours sit on. Stretch
   gives the caret the link's full height, and repeating the link's .3rem
   bottom padding leaves a content box exactly as tall as the text - so
   centring inside it lands the chevron on the word's own centre line. */
.nav ul .hasmenu{display:inline-flex;align-items:stretch;gap:.1rem}
.nav ul .ncaret{display:inline-flex;align-items:center;justify-content:center;
 position:relative;width:16px;height:auto;padding:0 0 .3rem;margin:0;
 background:none;border:0;cursor:pointer;color:var(--muted);transition:color .3s;
 flex:0 0 auto}
/* a 16px chevron is a small thing to hit, so the target reaches past it */
.nav ul .ncaret::before{content:"";position:absolute;inset:-8px -5px}
.nav ul .ncaret::after{content:"";width:5px;height:5px;
 border-right:1px solid currentColor;border-bottom:1px solid currentColor;
 transform:rotate(45deg) translate(-1px,-1px);transition:transform .25s}
.nav ul .hasmenu:hover .ncaret,.nav ul .ncaret:hover,
.nav ul .ncaret[aria-expanded="true"]{color:var(--ink)}
.nav ul .ncaret[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}
.nav ul .ncaret:focus-visible{outline:1px solid var(--ink);outline-offset:2px;border-radius:3px}
/* the underline belongs to the word, not to the word plus the caret */
.nav ul .nparent{position:relative}

/* ===== pre-qualification intake ===== */
/* A long form reads as a wall unless it is grouped, so each run of fields
   carries a quiet heading. It stays at the form's own measure rather than the
   page's - the container is full-width now, and a 1900px input is unusable. */
.pqform{max-width:720px}
.pqform .fsec{font-family:"Inter";font-weight:500;font-size:.58rem;letter-spacing:.26em;
 text-transform:uppercase;color:var(--muted);margin:0 0 1.1rem;padding-bottom:.6rem;
 border-bottom:1px solid var(--line)}
.pqform .fsec + .frow{margin-bottom:.4rem}
.pqform .frow + .fsec{margin-top:1.4rem}
.pqform textarea{min-height:110px}
.pqform .consent{margin-top:.6rem}
@media(max-width:640px){
 .pqform .fsec{margin-bottom:.9rem}
}

/* appearance:none strips the native arrow, so a select reads as a text input
   unless it draws its own. There are four of them on the pre-qualification
   form, where telling a menu from a free-text box actually matters. */
.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239A9A9E' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 1.05em center;
 background-size:10px 6px;padding-right:2.6em}

/* ===== mobile trigger ===== */
/* It used to be the word Menu, and in Spanish "MENÚ" pushed itself past the
   right edge of a 360 and 375px screen. Three lines say the same thing at a
   fixed width in every language, and the word moves to the aria-label. */
.navtoggle{align-items:center;justify-content:center;width:44px;height:44px;
 padding:0;margin-right:-10px;flex:0 0 auto}
.bgr{position:relative;display:block;width:22px;height:2px;background:currentColor;
 border-radius:2px}
.bgr::before,.bgr::after{content:"";position:absolute;left:0;width:22px;height:2px;
 background:currentColor;border-radius:2px}
.bgr::before{top:-7px}
.bgr::after{top:7px}
.navtoggle:focus-visible{outline:1px solid var(--ink);outline-offset:2px;border-radius:4px}

/* The narrowest phones, Spanish especially. OBTENGA APROBACIÓN is 153px of the
   328px a 360 screen leaves after padding, and with a 127px wordmark and a
   44px trigger beside it the row ran 27px past the edge. The wordmark and the
   button each give back a little; nothing is dropped. */
@media(max-width:420px){
 .nav .logo{height:21px}
 .nav .right .ctabtn{padding:0 .62rem;font-size:.56rem;letter-spacing:.05em}
 .navtoggle{margin-right:-8px}
}

/* ===== type scale =====
   One token per kind of element, so a new section inherits the scale instead
   of inventing one. The recognition grid on About is the reference for what
   counts as legible here; nothing below brings anything down to meet it. */
:root{
 --eyebrow-size:clamp(12px,1vw,13.5px);
 --eyebrow-track:.26em;
 --eyebrow-ink:rgba(244,242,238,.72);
 --h2-size:clamp(1.45rem,2.4vw,1.95rem);
 --sub-size:clamp(.95rem,1.4vw,1.05rem);
}
/* the kicker above a heading. It was 9.6-10.6px at 42% tracking against the
   muted grey, which is below the bar the rest of the page sets. */
.eyebrow{font-size:var(--eyebrow-size);font-weight:500;
 letter-spacing:var(--eyebrow-track);color:var(--eyebrow-ink)}
/* over a photograph the scrim alone is not enough to hold a thin uppercase
   line, so these get a brighter ink and a shadow to sit on */
.hero .eyebrow,#process .eyebrow,.home-delivery .eyebrow,
.statement .eyebrow,.find-next .eyebrow{color:rgba(255,255,255,.82);
 text-shadow:0 1px 2px rgba(0,0,0,.55)}

/* every section heading, wherever it sits */
h2,.sec-top h2,.faqhead h2,.estcta h2,.dband h2,.about-block h2,.lenderwall-head h2{
 font-family:"Oswald";font-weight:300;text-transform:uppercase;
 letter-spacing:.08em;font-size:var(--h2-size)}

/* every sub-sentence under a heading */
.sec-intro,.page-head p,.estcta p,.dband p,.finlede,.bc-sub,.sec-top > div > p{
 font-size:var(--sub-size);line-height:1.55;color:var(--muted);max-width:48ch}
.estcta p,.dband p,.finlede,.bc-sub{margin-inline:auto}
/* the one exception: the credit-application line is written to hold on a
   single line on a desktop, so it gets the panel's width rather than a
   reading measure. It may wrap below 1024px. */
.creditapp > .finlede{max-width:900px}

/* ===== lead forms ===== */
/* The honeypot has to be reachable by a bot filling the DOM and invisible to
   everyone else, so it is moved out of view rather than display:none - some
   bots skip hidden inputs. */
.hpwrap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin-top:1rem;font-family:"Inter";font-size:.82rem;line-height:1.55}
.form-msg.is-busy{color:var(--muted)}
.form-msg.is-ok{color:var(--ev)}
.form-msg.is-err{color:#e2a0a0}
.form-msg:empty{display:none}
form[data-lead] button[type="submit"][disabled]{opacity:.55;cursor:default}

/* ===== credit application ===== */
/* Longer than the pre-qualification form and asking for far more, so it leans
   harder on grouping: a heading per section, optional sections folded away
   until asked for, and the submit held until both required consents are
   ticked rather than refusing afterwards. */
.caform{max-width:820px}
.caform .fsec{font-family:"Inter";font-weight:500;font-size:.58rem;letter-spacing:.26em;
 text-transform:uppercase;color:var(--muted);margin:1.6rem 0 1.1rem;padding-bottom:.6rem;
 border-bottom:1px solid var(--line)}
.caform .fsec:first-of-type{margin-top:.4rem}
.caform .reqnote,.caform .securenote{font-size:.76rem;color:var(--muted);line-height:1.6;
 max-width:72ch;margin-inline:auto}
.caform .reqnote{margin:-.6rem 0 .4rem;text-align:center}
.caform .securenote{margin-top:1rem}
/* The marker rides on the label itself. A sibling element would drop to its
   own line inside a column flex box, and a child element inside a data-i18n
   label would be erased the first time the language changed. */
.field.is-req > label::after{content:"*";color:#e2a0a0;margin-left:.3em;font-size:.95em}
.grouplabel{display:block;font-family:"Inter";font-weight:400;font-size:.58rem;
 letter-spacing:.3em;text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.frow.tight{gap:0 1rem}
.caform textarea{min-height:90px}

/* the toggle that opens an optional section */
/* flex, not inline-flex, so two toggles whose sections are both closed take
   a line each instead of running together; fit-content keeps the hit area on
   the label rather than the whole row */
.ftoggle{display:flex;width:fit-content;align-items:center;gap:.6rem;cursor:pointer;
 font-family:"Inter";font-size:.8rem;color:var(--ink);margin:0 0 1.2rem}
.ftoggle input{position:absolute;opacity:0;width:0;height:0}
.ftoggle .fo-box{width:16px;height:16px}
.ftoggle input:checked + .fo-box{background:var(--ink);border-color:var(--ink)}
.ftoggle input:checked + .fo-box::after{content:"";position:absolute;left:5px;top:2px;
 width:4px;height:9px;border:solid var(--bg);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.ftoggle input:focus-visible + .fo-box{outline:1px solid var(--ink);outline-offset:2px}
.fgroup[hidden]{display:none}
.fgroup{border-left:1px solid var(--line);padding-left:clamp(.9rem,2vw,1.4rem);
 margin:0 0 1.4rem}

.consent.opt{font-size:.78rem}
.caform .consent{align-items:flex-start;margin-bottom:1.1rem}
.caform .consent a{text-decoration:underline;text-underline-offset:3px}
.caform button[type="submit"][disabled]{opacity:.5;cursor:not-allowed}
@media(max-width:640px){
 .caform .fsec{margin-top:1.3rem}
}

/* ===== long-form legal prose ===== */
/* One column at a reading measure, using the shared subcopy size so the policy
   is not a different typeface from the rest of the site. */
.prose{max-width:72ch}
.prose p{font-size:var(--sub-size);line-height:1.75;color:var(--muted);max-width:none}
.prose p + p{margin-top:1.1rem}
.prose .pv-h{font-family:"Inter";font-weight:500;font-size:.72rem;letter-spacing:.18em;
 text-transform:uppercase;color:var(--ink);margin:2.4rem 0 .8rem}
.prose .pv-h:first-child{margin-top:0}
.prose a{text-decoration:underline;text-underline-offset:3px;color:var(--ink)}

/* the line that introduces the credit application - above the form, not in it */
.creditapp > .caintro{max-width:68ch;margin:0 auto 1.6rem;text-align:center;
 color:var(--muted);font-size:var(--sub-size);line-height:1.55}

/* The trade-in and sell pages put their form directly under the step grid
   with nothing between them, so the two read as one block. */
.steps + .form{margin-top:clamp(2.2rem,4vw,3.4rem)}

/* ===== form motion =====
   All of it answers something the visitor did - taking a field, satisfying
   one, scrolling to the next section, sending - rather than running on its
   own. Every rule here sits inside prefers-reduced-motion: no-preference, and
   the pre-reveal state is attached by script, so with JavaScript off or motion
   turned down the forms are exactly as they were.

   Nothing here moves the page: the reveal uses transform and opacity, the
   rings are box-shadows outside the border box, and the space the validity
   tick occupies is reserved whether or not the tick is there. */

/* the tick sits in the control's own right margin, which is held open for it */
/* :required rather than a class, so every form reserves the space - only the
   credit application carries the is-req marker class */
.field input:required{padding-right:2.6em}
.field{position:relative}
.fxtick{position:absolute;right:1em;bottom:calc(var(--fx-ctl,44px) / 2);
 transform:translateY(50%);width:14px;height:10px;pointer-events:none;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' fill='none' stroke='%2316A34A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

@media (prefers-reduced-motion: no-preference){
 /* a ring leaves the field once, then a quiet glow holds while it is yours */
 @keyframes fxRing{
  from{box-shadow:0 0 0 0 rgba(244,242,238,.3)}
  to{box-shadow:0 0 0 9px rgba(244,242,238,0)}
 }
 .field input:focus,.field select:focus,.field textarea:focus{
  animation:fxRing .45s ease-out;
  box-shadow:0 0 0 1px rgba(244,242,238,.25)}

 /* fields and section headings rise as they arrive */
 html.fx .fx-rise{opacity:0;transform:translateY(10px);
  transition:opacity .3s ease,transform .3s ease}
 html.fx .fx-rise.fx-in{opacity:1;transform:none}

 @keyframes fxTickIn{from{opacity:0;transform:translateY(50%) scale(.5)}
  to{opacity:1;transform:translateY(50%) scale(1)}}
 html.fx .fxtick{animation:fxTickIn .3s ease-out}

 /* one ring off the submit, and the check draws itself beside the message */
 @keyframes fxPulse{
  from{box-shadow:0 0 0 0 rgba(244,242,238,.45)}
  to{box-shadow:0 0 0 20px rgba(244,242,238,0)}
 }
 html.fx .fx-pulse{animation:fxPulse .6s ease-out}
 @keyframes fxDraw{from{opacity:0;transform:rotate(-45deg) scale(.4)}
  to{opacity:1;transform:rotate(-45deg) scale(1)}}
 html.fx .form-msg.is-ok::before{animation:fxDraw .35s .05s ease-out backwards}
}

/* the check beside a success message, drawn rather than set in a glyph so it
   cannot pick up a font fallback */
.form-msg.is-ok::before{content:"";display:inline-block;width:13px;height:7px;
 border:solid currentColor;border-width:0 0 2px 2px;transform:rotate(-45deg);
 margin:0 .7em .25em 0;vertical-align:middle}

/* a field that failed, and why - under the field, not in a summary at the top */
.fielderr{margin:.45rem 0 0;font-family:"Inter";font-size:.72rem;line-height:1.45;
 color:#e2a0a0}
.field.is-bad input,.field.is-bad select,.field.is-bad textarea{
 border-color:rgba(226,160,160,.65)}

/* ===== phones =====
   The hero is a photograph of a silver car, and at this width the copy and
   the outlined buttons sit right on top of it rather than in the dark margin
   the desktop layout gives them. */
@media(max-width:700px){
 /* A scrim that runs down rather than across: the desktop one fades out at
    70% from the left, which on a narrow screen leaves the right-hand half of
    every line unprotected. The last stop keeps the fade into the page. */
 body.home .hero::after{
  background:linear-gradient(to bottom,rgba(8,8,9,.58) 0%,rgba(8,8,9,.68) 40%,
   rgba(8,8,9,.80) 74%,rgba(10,10,11,.92) 93%,var(--bg) 100%)}
 /* muted grey is a comfortable read on flat black and a poor one on a photo */
 body.home .hero .sub{color:rgba(255,255,255,.88)}
 body.home .hero h1{text-shadow:0 1px 10px rgba(0,0,0,.45)}
 /* the outlined buttons get something to sit on. The filled Get Approved is
    already opaque and is left alone. */
 body.home .hero .cta .ctabtn:not(.primary),
 body.home .hero .herotrade .ctabtn:not(.primary){
  background:rgba(0,0,0,.35);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  border-color:rgba(255,255,255,.7);color:#fff}
 body.home .hero .cta .ctabtn:not(.primary):hover,
 body.home .hero .herotrade .ctabtn:not(.primary):hover{
  background:rgba(0,0,0,.55);border-color:#fff}
}

/* ===== the burger panel scrolls =====
   Twelve links, two sub-items and a button are taller than a phone, and the
   panel centred its contents with no way to reach either end. */
.mobile{justify-content:flex-start;overflow-y:auto;-webkit-overflow-scrolling:touch;
 max-height:100vh;max-height:100dvh;
 padding:5.5rem 2rem calc(2.5rem + env(safe-area-inset-bottom,0px))}
/* the close button belongs to the panel, not to what is scrolling inside it */
.mobile .close{position:fixed;top:1.5rem;right:1.5rem;z-index:1;width:44px;height:44px;
 display:flex;align-items:center;justify-content:center}
.mobile > :last-child{margin-bottom:.5rem}

/* ===== the footer centres on a phone =====
   Down here the five footer columns have collapsed to one or two tracks, but
   every block inside them was still left-aligned, so the whole footer hugged
   the left edge in a ragged column. 760px is where .foot-bottom already
   centres itself, so the rest of the footer now joins it at the same width.

   text-align carries the headings, links, address lines and hours, and the
   inline-flex "Get Directions". It does nothing for a flex row, so the two
   flex rows it cannot reach - .v.ico and .socials - are centred explicitly.
   .foot-trust and .foot-bottom already centre themselves at every width and
   are left alone. Desktop is untouched: this whole block is mobile-only. */
@media(max-width:760px){
 footer .wrap{text-align:center}
 /* the wordmark is a replaced inline, so it would centre on text-align alone -
    but it is the one element here that must not drift, so it is explicit */
 .foot-brand img{display:block;margin-inline:auto}
 /* the blurb is capped at 34ch, which is narrower than the track */
 .foot-brand p{margin-inline:auto}
 /* icon + text rows: the icon and its label travel together to the middle */
 footer .foot-col .v.ico,footer .foot-col h4.ico{justify-content:center}
 .socials{justify-content:center}
}

/* The trust band on a phone. body.home .trustband above sets the padding at
   the same specificity as anything inside the 620px block further up the
   file, and being later it won - so the band kept its desktop padding while
   its three stats had already come down to one row. It belongs here. */
@media(max-width:620px){
 body.home .trustband{padding-block:1.4rem}
 /* The rule between two stats is the left border of the second one, so a
    grid gap put all of its space on one side of the rule: 11px of air to
    the left of each divider and none to the right, where the Spanish labels
    sat 3px off the line at 360px. The gap goes and every column carries the
    same padding on both sides instead, which keeps the three columns equal
    and puts each divider midway between its neighbours.
    The .wrap gutter (16px) sits outside the outer columns, so the first and
    last labels clear the screen edge by that much more.
    Each label stays on one line, so its size follows the column. A column
    is a third of the viewport less the gutters; less its padding and the
    rule, that is 100vw/3 - 24.5px of room. "Years of experience" is the
    longest English label and runs 11.67 times its font size at this
    tracking, which gives 2.856vw - 2.1px; the 2.23px here leaves 1.5px
    spare for a phone that sets the face a touch wider. It reaches the old
    9.6px at 414px and stops there, and from then on the padding takes up
    the extra width instead. The tracking comes in from .07em to make the
    room. The Spanish "Socios de financiamiento" is five characters longer
    and would need 6.5px type to sit on one line, so it alone takes two. */
 .tstats{gap:0}
 .tstats li{padding-inline:clamp(.4rem,calc((100vw - 380px) * .16),1rem)}
 .tlabel{font-size:clamp(6.5px,calc(2.856vw - 2.23px),.6rem);letter-spacing:.02em}
}

/* A form reached by an #anchor has to clear the fixed header, or the browser
   scrolls its first field to y=0 and the 114px bar covers it. Keyed off the
   id so only forms that are actually link targets pay for it. */
.form[id]{scroll-margin-top:calc(var(--hdr) + 1.5rem)}

/* ---- About: photo rows ------------------------------------------------
   The four numbered sections carry real photographs now rather than the
   monogram placeholder, so the frame becomes a 16:9 crop and the picture
   fills it. The side alternates starting with the photo on the right; the
   rules above put it on the left first, and sit at the same specificity,
   so the order is restated here where it comes last. */
.story-img{aspect-ratio:16/9;display:block;overflow:hidden;border-radius:var(--btn-radius)}
.story-img img{width:100%;height:100%;object-fit:cover;opacity:1;filter:none}
.story:nth-child(odd) .story-img{order:2}
.story:nth-child(even) .story-img{order:0}
@media(max-width:820px){
 .story:nth-child(odd) .story-img{order:0}
}

/* ---- Google rating ----------------------------------------------------
   Monochrome on purpose: no Google colours and no gold. The five stars are
   drawn twice - once faint, once solid and clipped to the rating - so 4.8
   reads as four full stars and most of a fifth. */
.greview{padding-block:clamp(1.7rem,2.9vw,2.4rem);text-align:center}
.gbadge{display:inline-flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.55rem 1.2rem;
 padding:.9rem 1.6rem;border:1px solid var(--line);border-radius:var(--btn-radius);background:var(--glass);
 color:var(--ink);transition:opacity .25s}
.gbadge:hover{opacity:.8}
.gb-g{width:22px;height:22px;fill:currentColor;flex:none}
.gb-rate{display:inline-flex;align-items:center;gap:.65rem}
.gb-stars{width:104px;height:auto;fill:currentColor;display:block}
.gb-score{font-family:"Oswald";font-weight:300;font-size:1.5rem;line-height:1;letter-spacing:.02em}
.gb-count{font-family:"Inter";font-weight:400;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
/* the footer line: a star, the score and the count, nothing more */
footer .grate{display:inline-flex;align-items:center;gap:.45em;margin-top:.9rem;font-family:"Inter";font-weight:400;
 font-size:.72rem;letter-spacing:.08em;color:var(--muted);transition:color .25s}
footer .grate:hover{color:var(--ink)}
footer .grate svg{width:.95em;height:.95em;fill:currentColor;flex:none}
/* The rating sits in the .socials row now, to the right of the Instagram
   mark, rather than on a line of its own. That row's own link rules -
   line-height:0 and a fade on hover - are written for icon links and would
   reach it, so they are handed back here; the row centres the two. */
footer .socials{gap:1rem}
footer .socials .grate{margin-top:0;line-height:inherit}
footer .socials .grate:hover{opacity:1}
@media(max-width:620px){
 /* on a phone the count drops to its own line under the stars, so the
    badge stays narrow and does not compete with the three stats above it */
 .greview{padding-block:1.4rem}
 .gbadge{display:inline-grid;grid-template-columns:auto auto;justify-items:center;padding:.8rem 1.3rem;gap:.5rem .9rem}
 .gb-g{width:19px;height:19px}
 .gb-stars{width:92px}
 .gb-score{font-size:1.3rem}
 .gb-count{grid-column:1 / -1;letter-spacing:.16em}
}