/* Sublime Motors — premium dark showroom. Inter, charcoal base, brand red + gold. */
:root{
  --bg:#0b0d11; --bg-2:#0e1116; --panel:#12151c; --panel-2:#171b23;
  --ink:#f4f5f7; --muted:#9aa2b1; --muted-2:#6b7280;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.05);
  --red:#E1231F; --red-2:#ff4a3d; --gold:#D4B26A; --gold-2:#B08D3F;
  --shadow:0 30px 60px -30px rgba(0,0,0,.7); --shadow-sm:0 14px 30px -18px rgba(0,0,0,.6);
  --r:14px; --container:1240px;
}
*{box-sizing:border-box}
html{scroll-padding-top:110px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.08}
.wrap{max-width:var(--container);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}
svg{width:17px;height:17px;flex:0 0 auto}

.eyebrow{display:inline-flex;align-items:center;gap:.6rem;color:var(--gold);font-weight:600;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase}
.eyebrow::before{content:"";width:28px;height:1px;background:var(--gold)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:clamp(1.6rem,4vw,2.6rem)}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.6rem);margin-top:.6rem}
.sec-head.center{flex-direction:column;align-items:center;text-align:center}
.seeall{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-weight:600;font-size:.9rem;transition:color .25s}
.seeall:hover{color:var(--gold)}

.btn{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;font-size:.9rem;border-radius:9px;padding:.9rem 1.6rem;cursor:pointer;border:0;transition:transform .25s,background .25s,border-color .25s,color .25s}
.btn svg{width:16px;height:16px}
.btn-red{background:var(--red);color:#fff;box-shadow:0 16px 30px -14px rgba(225,35,31,.55)}
.btn-red:hover{background:#c4160f;transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3)}
.btn-ghost-light{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.btn-ghost-light:hover{background:rgba(255,255,255,.08)}

/* HEADER — Romans style: transparent over hero, serif wordmark, letterspaced small-caps */
:root{--hdh:104px}
.hd{position:fixed;top:0;left:0;right:0;z-index:70;background:transparent;transition:background .4s,box-shadow .4s,border-color .4s;border-bottom:1px solid transparent}
.hd.stuck{background:rgba(9,11,15,.94);backdrop-filter:blur(12px);border-bottom-color:var(--line-2);box-shadow:var(--shadow-sm)}
.hd-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;height:var(--hdh)}
.hd-links{display:flex;align-items:center;gap:clamp(1.2rem,2.4vw,2.4rem)}
.hd-left{justify-content:flex-start}
.hd-right{justify-content:flex-end}
.hd-links a{font-size:.74rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,245,247,.82);transition:color .25s;white-space:nowrap;text-shadow:0 1px 12px rgba(0,0,0,.35)}
.hd-links a:hover,.hd-links a.on{color:#fff}
.hd-phone{display:inline-flex;color:var(--gold)!important}
.hd-phone svg{width:18px;height:18px}
/* serif wordmark lockup */
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.brand b{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:1.72rem;letter-spacing:.13em;line-height:1;margin-right:-.13em}
.brand i{width:100%;height:1px;background:rgba(255,255,255,.55);margin:.5rem 0 .42rem}
.brand span{font-size:.64rem;font-weight:500;letter-spacing:.6em;margin-right:-.6em;text-transform:uppercase;color:rgba(255,255,255,.88);line-height:1}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;grid-column:3;justify-self:end}
.burger span{width:24px;height:2px;background:#fff;border-radius:2px}
@media(max-width:1080px){
  :root{--hdh:80px}
  .hd-links{display:none}
  .hd-in{grid-template-columns:auto 1fr auto}
  .brand{grid-column:1;align-items:flex-start;text-align:left}
  .brand b{font-size:1.3rem}
  .brand span{font-size:.55rem}
  .burger{display:flex}
}

/* HERO — Romans: pure full-viewport photograph, small-caps caption bottom-left */
/* Hero was a full 100vh, so the search bar sat a whole screen below the fold. Shorter hero =
   the customer sees the intro AND the filter without hunting for it. */
/* Info block and caption are in normal flow (flex column) — when they were both
   absolutely positioned they collided on short browser windows. */
/* min-height (not a fixed height) so a short window lets the hero grow to fit its
   text rather than clipping the caption off the bottom edge. */
.heroR{position:relative;min-height:clamp(460px,70vh,660px);overflow:hidden;
  display:flex;flex-direction:column;gap:.9rem;
  padding-top:clamp(4.6rem,8vw,6rem);padding-bottom:clamp(2rem,4.5vw,3.4rem)}
/* Short browser windows: the hero keeps its 460px floor, so tighten the type rhythm
   instead — otherwise the caption is pushed past the bottom edge and clipped away. */
@media(max-height:780px){
  .heroR{padding-bottom:clamp(1.1rem,2.4vw,1.7rem);gap:.6rem}
  .hi-eyebrow{margin-top:.85rem}
  .heroR-info h1{margin-top:.7rem;line-height:1.26}
  .hi-sub{margin-top:.7rem;line-height:1.62}
  .hi-cta{margin-top:1.1rem}
}
.heroR-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%}
.heroR-shade{position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(9,11,15,.42) 0%,transparent 22%,transparent 58%,rgba(9,11,15,.62) 100%)}
.heroR-cap{position:relative;z-index:2;flex:none}
.heroR-cap h1{font-size:clamp(.82rem,1.3vw,1.02rem);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.92);line-height:1.8;max-width:60ch}
.heroR-cap h1 i{font-style:normal;color:var(--gold);margin:0 .5em}
.heroR-cue{position:absolute;right:clamp(1.4rem,4vw,3rem);bottom:clamp(2rem,4.5vw,3.2rem);z-index:2;width:1px;height:56px;background:linear-gradient(rgba(255,255,255,.75),transparent);animation:heroCue 2.2s ease-in-out infinite}
@keyframes heroCue{0%,100%{opacity:.3;transform:scaleY(.65);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}
@media(max-width:700px){
  .heroR-ph{object-position:80% 62%}
  .heroR-shade{background:linear-gradient(180deg,rgba(9,11,15,.62) 0%,rgba(9,11,15,.44) 34%,rgba(9,11,15,.5) 62%,rgba(9,11,15,.85) 100%)}
}
@media(prefers-reduced-motion:reduce){.heroR-cue{animation:none}}

/* SECTIONS */
.band{padding:clamp(3.6rem,7vw,6rem) 0}
.band-tint{background:linear-gradient(180deg,var(--bg-2),var(--bg));border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
@media(min-width:881px){.band:first-of-type{padding-top:clamp(5rem,9vw,7.5rem)}}

/* VEHICLE CARD */
.vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
@media(max-width:1000px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.vgrid{grid-template-columns:1fr}}
.vc{background:linear-gradient(180deg,var(--panel-2),var(--panel));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s}
.vc:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:rgba(255,255,255,.16)}
.vc-media{position:relative;display:block;aspect-ratio:16/10.5;overflow:hidden;background:#14171e}
.vc-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vc:hover .vc-media img{transform:scale(1.05)}
.vc-body-tag{position:absolute;top:.9rem;left:.9rem;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line);color:#fff;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .65rem;border-radius:100px}
.vc-view{position:absolute;right:.9rem;bottom:.9rem;display:inline-flex;align-items:center;gap:.4rem;background:var(--red);color:#fff;font-size:.78rem;font-weight:700;padding:.5rem .9rem;border-radius:8px;opacity:0;transform:translateY(8px);transition:.3s}
.vc:hover .vc-view{opacity:1;transform:none}
.vc-info{padding:1.25rem 1.3rem 1.35rem}
.vc-top h3{font-size:1.12rem;font-weight:700;letter-spacing:-.015em}
.vc-top a:hover{color:var(--gold)}
.vc-variant{color:var(--muted-2);font-size:.84rem;margin:.3rem 0 .9rem}
.vc-chips{display:flex;flex-wrap:wrap;gap:.45rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.045);border:1px solid var(--line-2);color:var(--muted);font-size:.76rem;font-weight:500;padding:.35rem .65rem;border-radius:7px}
.chip svg{width:13px;height:13px;color:var(--gold)}
.vc-foot{display:flex;align-items:center;justify-content:space-between;margin-top:1.1rem;padding-top:1.05rem;border-top:1px solid var(--line-2)}
.vc-price{font-size:1.18rem;font-weight:800;letter-spacing:-.02em;color:var(--gold)}
.vc-cta{font-size:.84rem;font-weight:700;color:var(--ink);border:1px solid var(--line);padding:.5rem 1rem;border-radius:8px;transition:.25s}
.vc-cta:hover{background:var(--red);border-color:var(--red)}

/* BODY-TYPE TILES + MAKES */
.bt-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem}
@media(max-width:1000px){.bt-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.bt-grid{grid-template-columns:repeat(2,1fr)}}
.bt{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.5rem 1.3rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;overflow:hidden;transition:transform .3s,border-color .3s,box-shadow .3s}
.bt::after{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:linear-gradient(90deg,var(--red),var(--gold));opacity:0;transition:.3s}
.bt:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18);box-shadow:var(--shadow-sm)}
.bt:hover::after{opacity:1}
.bt-n{font-size:1.9rem;font-weight:800;letter-spacing:-.03em;color:var(--gold)}
.bt-l{font-weight:600;font-size:.95rem}
.bt-go{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted-2);font-size:.78rem;font-weight:600;margin-top:.7rem;transition:color .25s}
.bt-go svg{width:13px;height:13px}
.bt:hover .bt-go{color:var(--red-2)}
.mk-row{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-top:2.2rem}
.mk-label{color:var(--muted-2);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin-right:.6rem}
.mk{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:100px;padding:.5rem 1rem;font-size:.86rem;font-weight:600;color:var(--muted);transition:.25s}
.mk em{font-style:normal;color:var(--muted-2);font-size:.76rem}
.mk:hover{color:#fff;border-color:var(--gold)}

/* WHY */
.why-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.why-in{grid-template-columns:1fr}}
.why-txt h2{font-size:clamp(1.8rem,3.8vw,2.7rem);margin:.7rem 0 0}
.why-txt>p{color:var(--muted);margin:1.2rem 0 0;max-width:54ch;line-height:1.75}
.why-list{list-style:none;margin:2rem 0 0;padding:0}
.why-list li{display:flex;gap:1.3rem;padding:1.3rem 0;border-top:1px solid var(--line-2)}
.why-list li span{font-size:.82rem;font-weight:700;color:var(--gold);letter-spacing:.1em;padding-top:.2rem}
.why-list b{display:block;font-size:1.05rem;margin-bottom:.25rem}
.why-list p{margin:0;color:var(--muted);font-size:.92rem}
.why-media{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.why-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:1.8rem 1.5rem;text-align:center}
.why-card b{display:block;font-size:2.1rem;font-weight:800;letter-spacing:-.03em}
.why-card small{color:var(--muted-2);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.why-card.gold b{color:var(--gold)}
.why-card.wide{grid-column:1/-1;display:flex;align-items:center;justify-content:center;gap:.7rem;font-weight:600;font-size:.95rem;color:var(--muted);text-align:left}
.why-card .wl{color:var(--red-2);display:inline-flex}

/* CTA BAND */
.cta{padding:clamp(3rem,6vw,5rem) 0}
.cta-in{position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--line);background:
  radial-gradient(70% 120% at 85% 0%,rgba(225,35,31,.28),transparent 55%),
  linear-gradient(120deg,#141821,#10131a);padding:clamp(2.2rem,5vw,3.8rem);display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta-in h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
.cta-in p{color:var(--muted);margin:.7rem 0 0;max-width:46ch}
.cta-btns{display:flex;gap:.9rem;flex-wrap:wrap}

/* PAGE HEAD */
.page-head{background:linear-gradient(180deg,#12151d,var(--bg));border-bottom:1px solid var(--line-2);padding:calc(var(--hdh) + clamp(1.6rem,4vw,3rem)) 0 clamp(2.2rem,5vw,3.4rem)}
.page-head.slim{padding:calc(var(--hdh) + 1rem) 0 1.2rem}
.page-head h1{font-size:clamp(2rem,4.6vw,3.2rem);margin:.7rem 0 0}
.page-head p{color:var(--muted);margin:.7rem 0 0;max-width:58ch}
.crumb{font-size:.84rem;color:var(--muted-2);display:flex;gap:.5rem;flex-wrap:wrap}
.crumb a:hover{color:var(--gold)}
.crumb b{color:var(--muted)}

/* STOCK — the filter is a compact bar ABOVE the grid, never a sticky sidebar.
   A sticky sidebar with its own overflow:auto swallows the page scroll whenever the cursor is
   over it, and collapsing it behind a toggle on mobile hides the single most useful control. */
.stock-in{display:block}
.filters-head{display:flex;align-items:center;justify-content:space-between}
.filters-head h3{font-size:1.05rem}
.clearf{background:none;border:0;color:var(--red-2);font:inherit;font-weight:600;font-size:.82rem;cursor:pointer}
.fgroup{padding:1.1rem 0;border-top:1px solid var(--line-2);margin-top:1rem}
.fgroup:first-of-type{margin-top:.6rem}
.fgroup h4{margin:0 0 .7rem;font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.fopt{display:flex;align-items:center;gap:.6rem;padding:.35rem 0;cursor:pointer;font-size:.9rem;color:var(--muted)}
.fopt:hover{color:#fff}
.fopt input{width:17px;height:17px;accent-color:var(--red);cursor:pointer}
.fopt span{flex:1}
.fopt em{font-style:normal;color:var(--muted-2);font-size:.78rem}
.stock-bar{display:flex;align-items:center;gap:1rem;margin-bottom:1.4rem;flex-wrap:wrap}
.filters-toggle{display:none;background:var(--panel);border:1px solid var(--line);color:var(--ink);border-radius:9px;padding:.65rem 1.2rem;font:inherit;font-weight:600;cursor:pointer}
.stock-count{color:var(--muted);font-weight:600;font-size:.9rem}
.sort{margin-left:auto;display:flex;align-items:center;gap:.6rem}
.sort label{color:var(--muted-2);font-size:.84rem;font-weight:600}
.sort select{background:var(--panel);border:1px solid var(--line);color:var(--ink);font:inherit;font-weight:600;font-size:.87rem;padding:.6rem 2.1rem .6rem 1rem;border-radius:9px;cursor:pointer;-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239aa2b1' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8rem center}
.sort select option{background:#171b23}
.noresults{text-align:center;padding:4rem 1rem;color:var(--muted)}
.noresults p{font-weight:600;margin-bottom:1.2rem}
@media(max-width:960px){
  .stock-in{grid-template-columns:1fr}
  .filters{position:fixed;inset:0 0 0 auto;width:min(88vw,340px);border-radius:0;z-index:96;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);max-height:none}
  .filters.open{transform:none}
  .filters-toggle{display:block}
  .mobile-close{display:flex!important}
}

/* VEHICLE DETAIL */
.veh-in{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:900px){.veh-in{grid-template-columns:1fr}}
.vg-main{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10.5;background:#14171e}
.vg-main img{width:100%;height:100%;object-fit:cover}
.vg-tag{position:absolute;top:1rem;left:1rem;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);border:1px solid var(--line);color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.35rem .7rem;border-radius:100px}
/* prev / next arrows over the main shot, SBT-style */
.vg-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(255,255,255,.28);background:rgba(12,15,20,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:.25s ease;opacity:.9}
.vg-nav svg{width:20px;height:20px}
.vg-nav:hover{background:var(--gold,#c9a227);border-color:transparent;color:#0c0f14;opacity:1;transform:translateY(-50%) scale(1.06)}
.vg-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.vg-prev{left:14px}
.vg-next{right:14px}
.vg-count{position:absolute;right:14px;bottom:14px;z-index:3;font-size:12px;letter-spacing:.06em;
  color:#fff;background:rgba(12,15,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  padding:.42em .8em;border-radius:99px;border:1px solid rgba(255,255,255,.2)}
.vg-count b{font-weight:700}
.vg-count i{font-style:normal;opacity:.75}
@media(max-width:640px){
  .vg-nav{width:38px;height:38px}
  .vg-nav svg{width:17px;height:17px}
  .vg-prev{left:8px}.vg-next{right:8px}
}

.vg-thumbs{display:flex;gap:.7rem;margin-top:.8rem}
.vg-th{cursor:pointer;transition:.25s ease}
.vg-th.on{outline:2px solid var(--gold,#c9a227);outline-offset:2px}
.vg-th{width:88px;aspect-ratio:16/11;border-radius:9px;overflow:hidden;border:1.5px solid var(--line);cursor:pointer;opacity:.65;transition:.25s}
.vg-th img{width:100%;height:100%;object-fit:cover}
.vg-th.on,.vg-th:hover{opacity:1;border-color:var(--gold)}
.vg-note{color:var(--muted-2);font-size:.82rem;margin-top:.8rem}
.veh-year{color:var(--gold);font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase}
.veh-info h1{font-size:clamp(1.9rem,4vw,2.9rem);margin:.6rem 0 .3rem}
.veh-sub{color:var(--muted);font-size:1rem;margin:0}
.veh-price{font-size:clamp(1.7rem,3.4vw,2.3rem);font-weight:800;letter-spacing:-.02em;color:var(--gold);margin:1.3rem 0;display:flex;flex-direction:column}
.veh-price span{font-size:.82rem;font-weight:500;color:var(--muted-2);letter-spacing:0}
.veh-keychips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.6rem}
.veh-keychips .chip{font-size:.84rem;padding:.5rem .8rem}
.veh-buy{display:flex;gap:.9rem;flex-wrap:wrap}
.veh-trust{list-style:none;margin:1.8rem 0 0;padding:1.4rem 0 0;border-top:1px solid var(--line-2);display:flex;flex-direction:column;gap:.7rem}
.veh-trust li{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.92rem}
.veh-trust svg{color:var(--gold)}
.veh-specs{margin-top:clamp(2.5rem,5vw,4rem)}
.veh-specs h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:1.4rem}
/* ---------- STOCKLIST (vigoasia list rows) ---------- */
.stock-count{font-weight:700;font-size:clamp(1.05rem,2.2vw,1.35rem);letter-spacing:.01em;
  padding-bottom:.8rem;margin-bottom:1.4rem;border-bottom:2px solid var(--gold,#c9a227)}
.slist{display:flex;flex-direction:column;gap:0}
.srow{display:grid;grid-template-columns:230px 1fr;gap:clamp(1rem,2.5vw,1.8rem);
  padding:clamp(1.1rem,2.5vw,1.6rem) 0;border-bottom:1px solid var(--line,#e4e3e0)}
.srow:first-child{border-top:1px solid var(--line,#e4e3e0)}
.srow-media{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:#14171e}
.srow-media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.srow-media:hover img{transform:scale(1.05)}
.srow-ref{position:absolute;left:0;bottom:0;right:0;background:rgba(12,15,20,.82);color:#fff;
  font-size:.8rem;font-weight:600;letter-spacing:.04em;text-align:center;padding:.5rem}
.srow-info{min-width:0}
.srow-name{margin:0 0 .5rem;font-size:clamp(1.05rem,2vw,1.3rem);font-weight:700;letter-spacing:-.01em;line-height:1.3}
.srow-name a{color:inherit}.srow-name a:hover{color:var(--gold,#c9a227)}
.srow-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:.3rem .9rem;margin-bottom:.9rem}
.srow-price>span{font-size:.82rem;color:var(--muted-2,#8a8f98)}
.srow-price>b{font-size:clamp(1.2rem,2.6vw,1.6rem);font-weight:800;color:var(--gold-2,#b8860b)}
.srow-price>i{font-style:normal;font-size:.82rem;color:var(--muted-2,#8a8f98)}
.srow-spec{list-style:none;margin:0 0 1rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:1px;background:var(--line,#e4e3e0);border:1px solid var(--line,#e4e3e0);border-radius:var(--r);overflow:hidden}
.srow-spec li{background:var(--panel,#fff);padding:.6rem .75rem}
.srow-spec span{display:block;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2,#8a8f98)}
.srow-spec b{display:block;margin-top:.15rem;font-size:.92rem;font-weight:700}
.srow-inq{display:inline-flex;background:#14171e;color:#fff;border:none}
.srow-inq:hover{background:var(--gold,#c9a227);color:#14171e}
.srow.is-sold{opacity:.72}
}
.lt .srow-spec,.lt .srow{border-color:#e4e3e0}
.lt .srow-spec{background:#e4e3e0}.lt .srow-spec li{background:#fff}

/* vigoasia-style headline strip: Year | Engine | Trans | Fuel */
.spec-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:1rem}
.spec-strip>div{background:var(--panel);padding:.9rem 1.1rem;text-align:center}
.spec-strip span{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2)}
.spec-strip b{display:block;margin-top:.25rem;font-size:1.02rem;font-weight:700}
.lt .spec-strip{border-color:#e4e3e0;background:#e4e3e0}
.lt .spec-strip>div{background:#fff}
@media(max-width:520px){.spec-strip{grid-template-columns:1fr 1fr}}
.specs-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
@media(max-width:640px){.specs-list{grid-template-columns:1fr}}
.specs-list li{display:flex;justify-content:space-between;gap:1rem;padding:.95rem 1.3rem;border-bottom:1px solid var(--line-2);background:var(--panel)}
.specs-list li:nth-child(4n+1),.specs-list li:nth-child(4n+2){background:var(--panel-2)}
.specs-list span{color:var(--muted-2);font-size:.88rem}
.specs-list b{font-weight:600;font-size:.92rem}
.specs-note{color:var(--muted-2);font-size:.82rem;margin-top:.9rem}

/* FINANCE */
.fin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
@media(max-width:860px){.fin-grid{grid-template-columns:1fr}}
.fin-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:2rem 1.7rem;transition:transform .3s,border-color .3s}
.fin-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
.fin-n{font-size:.8rem;font-weight:700;color:var(--gold);letter-spacing:.14em}
.fin-card h3{font-size:1.2rem;margin:.8rem 0 .5rem}
.fin-card p{color:var(--muted);font-size:.93rem;margin:0;line-height:1.7}

/* ABOUT */
.about-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2rem,5vw,4rem);align-items:center}
@media(max-width:900px){.about-in{grid-template-columns:1fr}}
.about-txt h2{font-size:clamp(1.8rem,3.8vw,2.7rem);margin:.7rem 0 0}
.about-txt p{color:var(--muted);margin:1.1rem 0 0;line-height:1.75;max-width:58ch}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin:2rem 0}
@media(max-width:640px){.about-stats{grid-template-columns:1fr 1fr}}
.about-stats b{display:block;font-size:1.4rem;font-weight:800;color:var(--gold);letter-spacing:-.02em}
.about-stats small{color:var(--muted-2);font-size:.78rem}
.about-panel{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:2.4rem;display:flex;flex-direction:column;gap:1rem;align-items:center}
.ap-badge-lg{padding:1rem;background:radial-gradient(circle at 50% 40%,rgba(251,200,30,.14),transparent 70%);border-radius:50%}
.ap-line{display:flex;align-items:center;gap:.7rem;color:var(--muted);font-size:.94rem;font-weight:500;width:100%;justify-content:center;padding:.7rem 0;border-top:1px solid var(--line-2)}
.ap-line span{color:var(--gold);display:inline-flex}

/* CONTACT */
.contact-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3rem);align-items:start}
@media(max-width:860px){.contact-in{grid-template-columns:1fr}}
.contact-info h2{font-size:clamp(1.7rem,3.4vw,2.4rem);margin:.7rem 0 0}
.cinfo{list-style:none;margin:1.8rem 0;padding:0}
.cinfo li{display:flex;gap:1rem;padding:1.05rem 0;border-bottom:1px solid var(--line-2);align-items:flex-start}
.cinfo li:last-child{border-bottom:0}
.ci-ic{width:44px;height:44px;flex:0 0 44px;border-radius:11px;background:rgba(251,200,30,.1);color:var(--gold);display:grid;place-items:center}
.cinfo b{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);margin-bottom:.25rem}
.cinfo a,.cinfo li div span{font-weight:600;color:var(--ink)}
.cinfo a:hover{color:var(--gold)}
.contact-btns{display:flex;gap:.9rem;flex-wrap:wrap}
.contact-map{border-radius:16px;overflow:hidden;border:1px solid var(--line);min-height:440px;filter:grayscale(.25) contrast(1.05)}
.contact-map iframe{width:100%;height:100%;min-height:440px;border:0;display:block}

/* ============ ROMANS-STRUCTURE HOME SECTIONS ============ */
/* Light editorial bands */
.lt{background:#f7f6f4;color:#17181b}
.lt-eyebrow{display:block;text-align:center;font-size:.74rem;letter-spacing:.42em;text-transform:uppercase;color:#a2a2a0;font-weight:500}
.lt-title{text-align:center;font-size:clamp(1.2rem,2.5vw,1.75rem);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:#141519;margin:.85rem 0 0}
.welcome{padding:clamp(2.8rem,5.5vw,4.4rem) 0}
/* Search band and arrivals share the same light band — two full paddings between them reads as a hole */
.homesearch+.arrivals{padding-top:clamp(1.6rem,3vw,2.4rem)}
.welcome p{max-width:76ch;margin:1.5rem auto 0;text-align:center;color:#54565c;font-size:.97rem;line-height:1.95}
/* Search band sits alone under the hero — the tiles below it are full-bleed, so it needs its own air */
.homesearch{padding:clamp(1.5rem,3vw,2.2rem) 0}
.homesearch .fbar{margin-bottom:0}

/* Photo nav tiles (4-up / 3-up) */
.tiles{display:grid;gap:5px;background:#0b0d11}
.t4{grid-template-columns:repeat(4,1fr)}
.t3{grid-template-columns:repeat(3,1fr)}
.tile{position:relative;aspect-ratio:16/10.5;overflow:hidden;display:flex;align-items:center;justify-content:center}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.8);transition:filter .5s,transform .7s cubic-bezier(.2,.7,.2,1)}
.tile:hover img{filter:brightness(.52) saturate(1);transform:scale(1.045)}
.tile-cap{position:relative;z-index:2;color:#fff;font-size:clamp(.8rem,1.15vw,.98rem);font-weight:500;letter-spacing:.3em;text-transform:uppercase;line-height:1.9;text-align:center;padding:1.05rem 0;border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);min-width:60%}
@media(max-width:900px){.t4{grid-template-columns:1fr 1fr}.t3{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.t4,.t3{grid-template-columns:1fr}.tile{aspect-ratio:16/9}}

/* Arrivals — home shows the six newest cars only. Full floor is on /stock. */
.arrivals{padding:clamp(2.8rem,5.5vw,4.4rem) 0}

/* HOME CAR SHOWCASE — full-width list rows, hairline-separated. No boxes, no tile grid: the
   client wants the front page to read as a showcase, not a catalogue. /stock keeps .rgrid. */
.lrows{margin-top:clamp(2rem,4vw,3rem);border-top:1px solid #e6e5e2}
/* photo | details | price+CTA — the third column keeps the row from trailing off into dead space */
.lrow{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr) minmax(215px,auto);
  gap:clamp(1.2rem,3vw,2.6rem);align-items:center;padding:clamp(1.5rem,2.8vw,2.2rem) 0;border-bottom:1px solid #e6e5e2}
.lrow-media{position:relative;display:block;aspect-ratio:16/10.5;overflow:hidden;border-radius:12px;background:#e9e8e5}
.lrow-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.lrow:hover .lrow-media img{transform:scale(1.04)}
.lrow-year{position:absolute;top:.75rem;left:.75rem;background:var(--red);color:#fff;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;padding:.3rem .62rem;border-radius:6px}
.lrow-body{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:#a2a2a0}
.lrow-name{margin:.55rem 0 0;font-size:clamp(1.1rem,1.9vw,1.45rem);font-weight:700;letter-spacing:-.01em;color:#17181b;line-height:1.3}
.lrow-name a:hover{color:var(--gold-2)}
.lrow-meta{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0}
.lrow-meta li{display:inline-flex;align-items:center;gap:.38rem;font-size:.73rem;font-weight:600;color:#54565c;
  background:#f2f1ee;border:1px solid #e6e5e2;border-radius:100px;padding:.34rem .68rem}
.lrow-meta svg{width:12px;height:12px;color:#a2a2a0}
.lrow-meta i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.lrow-feat{margin:.85rem 0 0;font-size:.83rem;line-height:1.7;color:#8a8a86;max-width:44ch}

.lrow-aside{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;
  padding-left:clamp(1rem,2vw,1.8rem);border-left:1px solid #e6e5e2;align-self:stretch;justify-content:center}
.lrow-price{font-size:1.28rem;font-weight:800;color:#141519;letter-spacing:-.02em}
.lrow-aside .rbtn{margin-top:.2rem;width:100%}
.lrow-wa{display:inline-flex;align-items:center;gap:.45rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:#54565c;transition:color .25s}
.lrow-wa svg{width:15px;height:15px;color:#25d366;flex:0 0 auto}
.lrow-wa:hover{color:#141519}
@media(max-width:1000px){
  .lrow{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
  .lrow-aside{grid-column:1/-1;border-left:0;padding-left:0;padding-top:1rem;border-top:1px solid #e6e5e2;
    flex-direction:row;align-items:center;flex-wrap:wrap;gap:1rem}
  .lrow-aside .rbtn{width:auto}
  .lrow-price{margin-right:auto}
}
@media(max-width:760px){
  .lrow{grid-template-columns:1fr;gap:1rem;padding:1.4rem 0}
  .lrow-name{font-size:1.05rem}
  .lrow-feat{display:none}
  .lrow-aside .rbtn{width:100%}
}
/* ---- VEHICLE TILE (home + stock grids) ----
   Image-led card. Two per row on a phone, so a customer sees the whole floor by scrolling,
   not one car per screen. */
.rgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.8vw,1.5rem);margin-top:clamp(2.2rem,4.5vw,3.2rem)}
@media(max-width:1100px){.rgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:860px){.rgrid{grid-template-columns:repeat(2,1fr)}}

.rvc{display:flex;flex-direction:column;background:#fff;border:1px solid #e6e5e2;border-radius:14px;
  overflow:hidden;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}
.rvc:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 20px 40px -24px rgba(20,21,25,.4)}

.rvc-media{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#e9e8e5}
.rvc-media img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.rvc:hover .rvc-media img{transform:scale(1.05)}
.rvc-year{position:absolute;top:.6rem;left:.6rem;background:var(--red);color:#fff;font-size:.72rem;
  font-weight:700;letter-spacing:.06em;padding:.28rem .55rem;border-radius:6px;line-height:1}
/* Bottom-right, NOT top-right: the stock badge owns the top-left corner, and on a narrow card a long
   body tag ("DOUBLE CAB") ran under it and lost its first letter — the badge wrapper has z-index 2, so
   it painted over the tag. Opposite corners can't collide at any card width. */
.rvc-body-tag{position:absolute;bottom:.6rem;right:.6rem;background:rgba(12,13,16,.72);backdrop-filter:blur(6px);
  color:#fff;font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .5rem;border-radius:6px;line-height:1;white-space:nowrap;z-index:2}

/* ---- Stock-number badge, stacked above the year badge, top-left of every vehicle photo ----
   Auto-numbered (newest = Stock #1) from the vehicle's position. The wrapper is the positioned
   element; the year badges become static inside it so the two stack instead of overlapping. */
.rvc-badges,.lrow-badges,.vg-badges{position:absolute;display:flex;flex-direction:column;align-items:flex-start;z-index:2}
.rvc-badges{top:.6rem;left:.6rem;gap:.3rem}
.lrow-badges{top:.75rem;left:.75rem;gap:.32rem}
.vg-badges{top:1rem;left:1rem;gap:.4rem}
.rvc-badges .rvc-year,.lrow-badges .lrow-year,.vg-badges .vg-tag{position:static;top:auto;left:auto}
.rvc-stock,.lrow-stock,.vg-stock{background:#141519;color:#fff;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;border-radius:6px;line-height:1;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.rvc-stock{font-size:.64rem;padding:.3rem .55rem}
.lrow-stock{font-size:.68rem;padding:.34rem .6rem}
.vg-stock{font-size:.72rem;padding:.4rem .7rem;letter-spacing:.08em}

/* ---- SOLD ----
   The client keeps sold stock on the site rather than deleting it, so a buyer can see what has
   moved. The photo is desaturated and dimmed so a sold car reads as "gone" at a glance across the
   grid, with a red flag over it. The price and details stay legible — sold stock is still proof. */
/* Sits at 62% height, not 50%: the stock/year badges occupy the top-left down to roughly the photo's
   mid-line on a narrow card, and a centred flag ran straight into the year badge. */
.sold-flag{position:absolute;top:62%;left:50%;transform:translate(-50%,-50%) rotate(-8deg);z-index:3;
  background:var(--red);color:#fff;font-size:.86rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;padding:.42rem 1.5rem;border-radius:4px;pointer-events:none;
  box-shadow:0 6px 20px rgba(0,0,0,.4);border:2px solid rgba(255,255,255,.9)}
/* Grid cards are ~173px wide on a phone — the full-size flag spans almost the whole card and shouts. */
.rvc .sold-flag{font-size:.6rem;letter-spacing:.18em;padding:.3rem .85rem;border-width:1.5px}
.sold-flag-lg{font-size:1.3rem;padding:.6rem 2.4rem;letter-spacing:.3em}
.is-sold .rvc-media img,.is-sold .lrow-media img,.vg-main.is-sold img{filter:grayscale(1) brightness(.62)}
.rvc.is-sold,.lrow.is-sold{opacity:.9}
/* the media wrappers must be positioned for the flag to centre on the photo */
.rvc-media,.lrow-media{position:relative}

.rvc-info{display:flex;flex-direction:column;flex:1;padding:.85rem .85rem .85rem}
.rvc-name{font-size:.9rem;font-weight:700;letter-spacing:-.01em;text-transform:none;line-height:1.3;color:#17181b;margin:0 0 .45rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.35em}
.rvc-name a:hover{color:var(--gold-2)}
.rvc-price{font-size:1rem;font-weight:800;color:#141519;padding:0 0 .7rem;border-bottom:1px solid #eceae6}

.rvc-meta{list-style:none;margin:.7rem 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem;flex:1;align-content:flex-start}
.rvc-meta li{display:inline-flex;align-items:center;gap:.32rem;font-size:.7rem;font-weight:600;
  color:#4b4d52;background:#f5f4f1;border:1px solid #eceae6;border-radius:100px;padding:.28rem .55rem;line-height:1}
.rvc-meta svg{width:12px;height:12px;color:#a2a2a0}
.rvc-meta .m-trans{background:#faf5e8;border-color:#f0e6cd;color:#7a6420}
.rvc-meta .m-trans svg{color:var(--gold-2)}
.rvc-meta .m-km svg{color:#8a8f98}
.rvc-meta .m-colour i{width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.18);flex:0 0 auto}
.rvc .rbtn{margin-top:auto}
.rbtn{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.15rem;width:100%;padding:.95rem 1.4rem;background:#17181b;color:#fff;font-size:.72rem;font-weight:600;letter-spacing:.26em;text-transform:uppercase;transition:background .3s;border:1px solid #17181b;cursor:pointer}
.rbtn:hover{background:var(--red);border-color:var(--red)}
.lt-more{text-align:center;margin-top:clamp(2rem,4vw,3rem)}
.rbtn-lg{display:inline-flex;width:auto;padding:1.05rem 3rem}
.rbtn-light{display:inline-flex;width:auto;background:#fff;border-color:#fff;color:#141519}
.rbtn-light:hover{background:var(--gold);border-color:var(--gold);color:#141519}
.rbtn-ghost{display:inline-flex;width:auto;background:transparent;border:1px solid rgba(255,255,255,.4);color:#fff}
.rbtn-ghost:hover{background:rgba(255,255,255,.08);border-color:#fff}

/* Split band (Selling your car?) */
.split{background:var(--bg);padding:clamp(3.6rem,7vw,5.6rem) 0}
.split-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,4.5vw,3.6rem);align-items:center}
.dk-title{font-size:clamp(1.3rem,2.6vw,1.9rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#fff}
.split-txt p{color:var(--muted);margin:1.4rem 0 1.9rem;line-height:1.9;max-width:46ch}
.split-media{position:relative}
.split-media img{width:100%;aspect-ratio:16/9.5;object-fit:cover;display:block}
.split-cap{position:absolute;left:0;right:0;bottom:0;background:rgba(9,11,15,.85);color:rgba(255,255,255,.85);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;padding:.95rem 1.2rem;text-align:center;line-height:1.7}
@media(max-width:860px){.split-in{grid-template-columns:1fr}}

/* Subs band */
.subs{background:#0e1116;border-top:1px solid var(--line-2);padding:clamp(2.8rem,6vw,4.4rem) 0}
.subs-in{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.subs-t{font-size:clamp(1.05rem,2.1vw,1.45rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:#fff}
.subs p{color:var(--muted);margin:.8rem 0 0;max-width:52ch}
.subs-act{display:flex;gap:.9rem;flex-wrap:wrap}
.subs-act .rbtn{margin-top:0}
.subs-act svg{width:16px;height:16px}

/* FOOTER — Romans centered */
.footR{background:#08090c;border-top:1px solid var(--line-2);padding:clamp(3.2rem,6vw,4.8rem) 0 1.8rem;text-align:center}
.footR-logo{margin:0 auto;display:block}
.footR-word{margin-top:1.2rem;font-size:.95rem;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:#fff}
.fbrand{display:inline-flex;flex-direction:column;align-items:center;color:#fff}
.fbrand b{font-family:'Cinzel',Georgia,serif;font-weight:500;font-size:2.1rem;letter-spacing:.14em;margin-right:-.14em;line-height:1}
.fbrand i{width:100%;height:1px;background:rgba(255,255,255,.5);margin:.6rem 0 .5rem}
.fbrand span{font-size:.72rem;font-weight:500;letter-spacing:.58em;margin-right:-.58em;text-transform:uppercase;color:rgba(255,255,255,.85);line-height:1}
.footR-sub{margin-top:.9rem;color:var(--muted-2);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase}
.footR-tel{display:inline-block;margin-top:1.7rem;font-size:1.3rem;letter-spacing:.24em;color:rgba(255,255,255,.88);font-weight:500}
.footR-tel:hover{color:var(--gold)}
.footR-soc{display:flex;justify-content:center;gap:.9rem;margin-top:1.5rem}
.footR-soc a{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:rgba(255,255,255,.75);transition:.25s}
.footR-soc a:hover{color:#fff;border-color:var(--gold)}
.footR-soc svg{width:18px;height:18px}
.footR-legal{color:var(--muted-2);font-size:.8rem;margin:1.9rem auto 0;max-width:66ch;line-height:1.9}
.footR-links{margin-top:2.4rem;padding-top:1.5rem;border-top:1px solid var(--line-2);display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2)}
.footR-links nav{display:flex;gap:1.5rem;flex-wrap:wrap}
.footR-links a:hover{color:#fff}
@media(max-width:640px){.footR-links{justify-content:center;text-align:center}}

/* DRAWER + WA FLOAT */
.drawer{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--panel);z-index:98;transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);box-shadow:var(--shadow);padding:1.4rem;display:flex;flex-direction:column;gap:.2rem;overflow-y:auto}
.drawer.open{transform:none}
.drawer a{padding:.95rem .4rem;font-weight:600;border-bottom:1px solid var(--line-2);color:var(--muted)}
.drawer a:hover{color:#fff}
.drawer .dclose{align-self:flex-end;background:none;border:0;font-size:1.7rem;cursor:pointer;color:var(--ink)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;opacity:0;pointer-events:none;transition:.3s}
.scrim.on{opacity:1;pointer-events:auto}
.wafloat{position:fixed;right:20px;bottom:20px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 14px 32px -10px rgba(37,211,102,.55);transition:transform .25s;color:#fff}
.wafloat:hover{transform:scale(1.08)}
.wafloat svg{width:28px;height:28px}

/* REVEAL */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ HERO INFO + LOAD ANIMATIONS ============ */
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.heroR-ph{animation:kenburns 6.5s cubic-bezier(.2,.6,.3,1) both}
.heroR-info{position:relative;z-index:2;margin-block:auto;min-width:0}
.heroR-info>*{animation:fadeUp .9s cubic-bezier(.2,.7,.2,1) both}
.heroR-info>*:nth-child(1){animation-delay:.2s}.heroR-info>*:nth-child(2){animation-delay:.32s}
.heroR-info>*:nth-child(3){animation-delay:.46s}.heroR-info>*:nth-child(4){animation-delay:.6s}.heroR-info>*:nth-child(5){animation-delay:.76s}
.heroR-cap p{animation:fadeUp 1s .9s cubic-bezier(.2,.7,.2,1) both}
.hi-rule{display:block;width:44px;height:1px;background:var(--gold)}
.hi-eyebrow{margin:1.2rem 0 0;color:var(--gold);font-size:.72rem;font-weight:500;letter-spacing:.3em;text-transform:uppercase}
.heroR-info h1{margin:1rem 0 0;font-size:clamp(1.4rem,2.8vw,2.2rem);font-weight:600;letter-spacing:-.01em;line-height:1.4;color:#fff;max-width:22ch}
.hi-sub{margin:1rem 0 0;color:rgba(244,245,247,.75);font-size:clamp(.88rem,1.1vw,.96rem);line-height:1.8;max-width:44ch}
.hi-cta{display:flex;gap:2.2rem;flex-wrap:wrap;margin-top:1.9rem}
.hi-link{color:#fff;font-size:.76rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;padding-bottom:.5rem;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .3s,color .3s}
.hi-link em{font-style:normal;transition:transform .3s;display:inline-block;margin-left:.3rem}
.hi-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
.hi-link:hover em{transform:translateX(4px)}
.heroR-cap p{font-size:clamp(.72rem,1vw,.86rem);font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.85);margin:0;line-height:1.8}
.heroR-cap p i{font-style:normal;color:var(--gold);margin:0 .5em}
@media(max-width:700px){.hi-cta{gap:1.2rem}.heroR-cap{display:none}}
@media(prefers-reduced-motion:reduce){.heroR-ph,.heroR-info>*,.heroR-cap p{animation:none}}
[data-plx]{overflow:hidden}
[data-plx] img{will-change:transform;transform:scale(1.09)}

/* ============ PAGE HEAD — Romans centered ============ */
.page-head{text-align:center}
.page-head h1{font-size:clamp(1.4rem,3vw,2.15rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.page-head p{margin-left:auto;margin-right:auto}
.crumb{justify-content:center}

/* ============ LIGHT SKIN — inner pages ============ */
.rbtn-fit{display:inline-flex;width:auto;padding:.95rem 2rem}
.rbtn-dkghost{background:transparent;border:1px solid #caccd0;color:#17181b}
.rbtn-dkghost:hover{background:#17181b;border-color:#17181b;color:#fff}
.lt .filters{background:#fff;border:1px solid #e4e3e0;border-radius:0}
.lt .filters-head h3{color:#141519;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.9rem}
.lt .fgroup{border-top:1px solid #eceae6}
.lt .fgroup h4{color:#a2a2a0}
.lt .fopt{color:#54565c}
.lt .fopt:hover{color:#000}
.lt .fopt input{accent-color:#17181b}
.lt .fopt em{color:#b5b5b2}
.lt .stock-count{color:#54565c}
.lt .sort label{color:#a2a2a0}
.lt .sort select{background:#fff;border-color:#e4e3e0;color:#17181b}
.lt .sort select option{background:#fff;color:#17181b}
.lt .filters-toggle{background:#fff;border-color:#e4e3e0;color:#17181b}
.lt .noresults{color:#54565c}
.lt .crumb b{color:#141519}
.stock-main{min-width:0}
.rvc{min-width:0}
.rvc-info{min-width:0}

/* vehicle detail on light */
.lt .vg-main{background:#eceae6;border-color:#e4e3e0}
.lt .vg-th{background:#f1efec;border-color:#e4e3e0;opacity:.7}
.lt .vg-th.on,.lt .vg-th:hover{border-color:var(--gold-2);opacity:1}
.lt .vg-tag{background:rgba(20,21,25,.75);border-color:transparent}
.lt .vg-note{color:#a2a2a0}
.lt .veh-year{color:var(--gold-2)}
.lt .veh-info h1{color:#141519;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:clamp(1.5rem,3vw,2.2rem)}
.lt .veh-sub{color:#54565c}
.lt .veh-price{color:#141519}
.lt .veh-price span{color:#a2a2a0}
.lt .chip{background:#fff;border-color:#e4e3e0;color:#54565c}
.lt .chip svg{color:var(--gold-2)}
.lt .veh-trust{border-top-color:#e4e3e0}
.lt .veh-trust li{color:#54565c}
.lt .veh-trust svg{color:var(--gold-2)}
.lt .veh-specs h2{color:#141519;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.5rem)}
.lt .specs-list{border-color:#e4e3e0}
.lt .specs-list li{background:#fff;border-bottom-color:#eceae6}
.lt .specs-list li:nth-child(4n+1),.lt .specs-list li:nth-child(4n+2){background:#f1efec}
.lt .specs-list span{color:#a2a2a0}
.lt .specs-list b{color:#26272b}
.lt .specs-note{color:#a2a2a0}
.lt .sec-head h2{color:#141519;font-weight:600;letter-spacing:.2em;text-transform:uppercase;font-size:clamp(1.1rem,2.2vw,1.5rem)}
.lt .eyebrow{color:var(--gold-2)}
.lt .eyebrow::before{background:var(--gold-2)}
.lt .seeall{color:#54565c}
.lt .seeall:hover{color:#000}
/* finance cards on light */
.lt .fin-card{background:#fff;border-color:#e4e3e0;border-radius:0}
.lt .fin-n{color:var(--gold-2)}
.lt .fin-card h3{color:#141519;font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:1rem}
.lt .fin-card p{color:#54565c}
/* about on light */
.lt .about-txt h2{color:#141519;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem)}
.lt .about-txt p{color:#54565c}
.lt .about-stats b{color:#141519}
.lt .about-stats small{color:#a2a2a0}
.lt .about-panel{background:#fff;border-color:#e4e3e0;border-radius:0}
.lt .ap-line{color:#54565c;border-top-color:#eceae6}
.lt .ap-line span{color:var(--gold-2)}
/* contact on light */
.lt .contact-info h2{color:#141519;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:clamp(1.3rem,2.6vw,1.9rem)}
.lt .cinfo li{border-bottom-color:#eceae6}
.lt .ci-ic{background:#f3ecdc;color:var(--gold-2);border-radius:0}
.lt .cinfo b{color:#a2a2a0}
.lt .cinfo a,.lt .cinfo li div span{color:#26272b}
.lt .cinfo a:hover{color:var(--gold-2)}
.lt .contact-map{border-color:#e4e3e0;border-radius:0;filter:none}
/* dark CTA band inside light sections (finance) — keep text white */
.lt .cta-in h2{color:#fff}
.lt .cta-in p{color:var(--muted)}
/* FAQ (contact) */
.faqs{max-width:820px;margin:clamp(1.6rem,3vw,2.4rem) auto 0}
.faq-item{border-bottom:1px solid #e4e3e0}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 0;font-weight:600;font-size:.96rem;color:#17181b}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;font-weight:400;color:var(--gold-2);transition:transform .3s;line-height:1}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{margin:0 0 1.2rem;color:#54565c;line-height:1.8;max-width:64ch}

/* ---- real-stock price notes + gallery ---- */
.vat{font-style:normal;font-size:.6rem;font-weight:600;color:#9a9a98;letter-spacing:.08em;text-transform:uppercase;display:block;margin-top:.18rem}
.veh-price .vat{font-size:.72rem;margin:.1rem 0 .2rem}
.vg-thumbs{flex-wrap:wrap}

/* ---- SEARCH FOR CARS dropdown panel (stock sidebar) ---- */
.sgroup{margin-top:1.05rem}
.slab{display:block;font-size:.6rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8d;margin-bottom:.4rem}
.fsel{width:100%;-webkit-appearance:none;appearance:none;background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"><path d="M1 1l4 4 4-4" fill="none" stroke="%23948a75" stroke-width="1.6"/></svg>') no-repeat right .8rem center;border:1px solid #e4e3e0;border-radius:8px;padding:.6rem 2rem .6rem .8rem;font:inherit;font-size:.84rem;color:#141519;cursor:pointer;transition:border-color .2s}
.fsel:hover{border-color:#cfcdc8}
.fsel:focus{outline:none;border-color:var(--gold-2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.filters-head{align-items:center}
.filters-head h3{white-space:nowrap}
.clearf{white-space:nowrap}

/* ---- real client logo (badge + wordmark lockup) ---- */
.brand{flex-direction:row;align-items:center;gap:.85rem}
.brand-badge{height:56px;width:auto;filter:drop-shadow(0 1px 10px rgba(0,0,0,.35))}
.brand-txt{display:flex;flex-direction:column;align-items:center;text-align:center}
.brand-txt i{width:100%}
@media (max-width:960px){
  .brand{gap:.6rem}
  .brand-badge{height:42px}
  .brand-txt{align-items:flex-start;text-align:left}
}
.fbrand-badge{height:88px;width:auto;margin-bottom:1rem;opacity:.95}
.ap-badge-lg img{width:190px;height:auto}
.arrivals-in{margin-top:1.6rem}

/* ---- Vehicle highlights (real-stock feature list) ---- */
.veh-feats{margin-top:2.4rem}
.veh-feats h3{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#8a8f98;font-weight:600;margin:0 0 .9rem}
.feats-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 2.6rem}
.feats-list li{border-top:1px solid #e4e6e9;padding:.85rem 0;font-size:.95rem;color:#2a2d33;display:flex;align-items:baseline;gap:.65rem}
.feats-list li::before{content:"";width:7px;height:7px;border:1px solid var(--gold,#D4B26A);transform:rotate(45deg);flex:none;position:relative;top:-1px}
@media (max-width:640px){.feats-list{grid-template-columns:1fr}}

/* ---- Dual VAT price rows (vehicle page) ---- */
.veh-price .vp-row{display:flex;align-items:baseline;gap:.65rem;font-size:1em;font-weight:800;letter-spacing:-.02em;color:inherit}
.veh-price .vp-row em{font-style:normal;font-size:.64rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:#a2a2a0;white-space:nowrap}
.veh-price .vp-in{font-size:.66em;margin-top:.2rem}
.veh-price .vp-in b{font-weight:700;color:#3c4046}

/* EMAIL INQUIRY / PROFORMA INVOICE — lives inside .lt (light) bands */
.inq{margin-top:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:1.55fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:start}
@media(max-width:940px){.inq{grid-template-columns:1fr}}
.inq-head{grid-column:1/-1;border-top:1px solid rgba(0,0,0,.12);padding-top:1.6rem}
.inq-head .eyebrow{color:#8a8a86}
.inq-head h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:.55rem 0 .7rem;color:#141519}
.inq-head p{margin:0;color:#55565b;max-width:62ch;font-size:.95rem}
.inq-head b{color:#141519;font-weight:600}
.inq-form{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem}
@media(max-width:640px){.inq-form{grid-template-columns:1fr}}
.inq-wide{grid-column:1/-1}
.inq-row{display:flex;flex-direction:column;gap:.45rem}
.inq-row label{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:#55565b}
.inq-row label i{color:var(--red);font-style:normal}
.inq-row input,.inq-row textarea{width:100%;font:inherit;font-size:.95rem;color:#17181b;background:#fff;
  border:1px solid rgba(0,0,0,.14);border-radius:10px;padding:.85rem 1rem;transition:border-color .2s,box-shadow .2s}
.inq-row textarea{resize:vertical;min-height:130px}
.inq-row input::placeholder,.inq-row textarea::placeholder{color:#a2a2a0}
.inq-row input:focus,.inq-row textarea:focus{outline:none;border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(212,178,106,.22)}
.inq-actions{display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.inq-err{margin:0;color:var(--red);font-size:.85rem;font-weight:500}
.inq-note{margin:0;color:#8a8a86;font-size:.8rem}
.inq-steps{border:1px solid rgba(0,0,0,.12);border-radius:var(--r);padding:1.6rem 1.5rem;background:#fff}
.inq-steps h3{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:#55565b;font-weight:600;margin-bottom:1.1rem}
.inq-steps ol{margin:0;padding-left:1.15rem;display:grid;gap:.7rem}
.inq-steps li{color:#55565b;font-size:.9rem;line-height:1.55}
.inq-steps li b{color:#141519;font-weight:600}
.inq-alt{margin:1.4rem 0 0;padding-top:1.1rem;border-top:1px solid rgba(0,0,0,.1);color:#55565b;font-size:.86rem;line-height:1.75}
.inq-alt svg{color:#25D366;display:inline-block;vertical-align:-3px;margin:0 .1rem}
.inq-alt a{color:#141519;font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   SEARCH-FOR-CARS DROPDOWN  (home + stock, light `.lt` bands)
   One strip you click to drop the filters open beneath it.
   Closed on home (`.fbar`), open on /stock (`.fbar.open`).
   ============================================================ */
.fbar{background:#fff;border:1px solid #e4e3e0;border-radius:12px;margin-bottom:1.9rem}
.fbar-head{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;
  padding:.95rem 1.15rem;background:none;border:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.fbar-lede{display:flex;align-items:center;gap:.6rem}
.fbar-lede svg{width:15px;height:15px;color:#948a75;flex:0 0 auto}
.fbar-title{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#55565b}
.fbar-side{display:flex;align-items:center;gap:.85rem}
.fbar-count{font-size:.8rem;font-weight:600;color:#8a8a86;white-space:nowrap}
.fbar-chev{width:8px;height:8px;flex:0 0 auto;border-right:1.6px solid #948a75;border-bottom:1.6px solid #948a75;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .2s}
.fbar.open .fbar-chev{transform:translateY(1px) rotate(-135deg)}
.fbar-head:hover .fbar-title{color:#141519}
.fbar-head:hover .fbar-chev{border-color:var(--gold-2)}
/* 0fr→1fr row is the height animation; .fbar-clip carries the overflow so the grid's own padding
   never leaks height while closed. */
.fbar-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s cubic-bezier(.2,.7,.2,1)}
.fbar.open .fbar-body{grid-template-rows:1fr}
.fbar-clip{overflow:hidden;min-height:0}

.fbar-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem;padding:.15rem 1.15rem 1.15rem}
.fbar .fsel{padding:.55rem 1.9rem .55rem .7rem;font-size:.82rem;border-radius:8px;background-position:right .6rem center}
.fbar .frow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.35rem}
.frow-sep{color:#b6b5b0;font-size:.8rem;line-height:1}

.fbar-actions{display:flex;gap:.55rem}
.fbtn{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border-radius:8px;
  padding:.55rem .9rem;font:inherit;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;white-space:nowrap}
.fbtn svg{width:14px;height:14px}
.fbtn-go{background:#141519;color:#fff}
.fbtn-go:hover{background:#2a2c31}
.fbtn-reset{background:#fff;border-color:#e4e3e0;color:#55565b;flex:0 0 auto;padding-inline:1rem}
.fbtn-reset:hover{border-color:#cfcdc8;color:#141519}

@media(max-width:1080px){ .fbar-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(max-width:820px){  .fbar-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
/* Phone keeps TWO columns — stacking eleven controls one per row turns the "compact" bar into a
   screen and a half of scrolling. The paired ranges and the buttons take the full width. */
@media(max-width:520px){
  .fbar-head{padding:.85rem .85rem;gap:.5rem}
  .fbar-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;padding:.15rem .85rem 1rem}
  .fbar .fsel{font-size:.78rem;padding:.5rem 1.6rem .5rem .6rem;background-position:right .45rem center}
  .fbar-grid .frow,.fbar-actions{grid-column:1/-1}
}

/* the stock grid is now full width under the bar */
/* stock grid follows .rgrid — 4 / 3 / 2 columns. No single-column phone view. */

/* The stock page leads with the search bar, so it doesn't need the tall first-band lead-in. */
.band-stock{padding-top:clamp(1.8rem,3.5vw,2.6rem)}
@media(min-width:881px){.band.band-stock:first-of-type{padding-top:clamp(1.8rem,3.5vw,2.6rem)}}

/* the tile's CTA is a small button, not the full-width slab the old card used */
.rvc .rbtn{margin-top:auto;padding:.62rem 1rem;font-size:.64rem;letter-spacing:.16em;border-radius:8px}
.rvc .rbtn:hover{background:var(--red);border-color:var(--red)}
.rvc .vat{font-size:.55rem;letter-spacing:.04em;margin-top:.2rem;line-height:1.4}

@media(max-width:560px){
  .rgrid{gap:.7rem}
  .rvc-info{padding:.7rem .65rem}
  .rvc-name{font-size:.8rem;min-height:2.4em}
  .rvc-price{font-size:.86rem}
  .rvc-meta{gap:.28rem;margin:.55rem 0 .7rem}
  .rvc-meta li{font-size:.62rem;padding:.24rem .45rem}
  .rvc .rbtn{font-size:.58rem;padding:.55rem .6rem;letter-spacing:.12em}
  .rvc-year{font-size:.66rem}
  .rvc-body-tag{font-size:.54rem}
}

/* ---- USD indicative line ---- */
.vusd{color:var(--gold-2)}
.vp-usd b{font-size:1.02rem;color:#7a6420}
.vp-usd em{color:#a89a72}

/* ---- Standard features grid (vigoasia pattern) ---- */
.veh-std{margin-top:2.4rem}
.veh-std h3{font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:#8a8f98;font-weight:600;margin:0 0 .9rem}
.stdgrid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.45rem}
.stdgrid li{text-align:center;padding:.6rem .4rem;border-radius:8px;font-size:.74rem;font-weight:600;
  background:#f5f4f1;border:1px solid #eceae6;color:#b6b5b0}
.stdgrid li.on{background:#faf5e8;border-color:#e7d9b4;color:#7a6420}
@media(max-width:760px){.stdgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.stdgrid{grid-template-columns:repeat(2,1fr)}.stdgrid li{font-size:.68rem;padding:.5rem .3rem}}

/* ---------- MOBILE: compact vigoasia-style density on the inside pages ----------
   The client wants the vehicle page to read like vigoasia on a phone: the headline strip
   stays 4-across, the spec rows are tight label|value lines, and the standard-features
   catalogue keeps 4 columns instead of stretching to 18 rows. Declared last so it wins
   over the earlier 760/520/460px rules. */
@media (max-width: 640px) {
  .veh-specs h2 { font-size: 1.05rem; margin-bottom: .85rem; letter-spacing: .12em }

  .spec-strip { grid-template-columns: repeat(4, 1fr); margin-bottom: .7rem }
  .spec-strip > div { padding: .55rem .28rem }
  .spec-strip span { font-size: .55rem; letter-spacing: .07em }
  .spec-strip b { font-size: .8rem; margin-top: .12rem }

  .specs-list li { padding: .5rem .8rem }
  .specs-list span { font-size: .76rem }
  .specs-list b { font-size: .8rem }

  .veh-feats, .veh-std { margin-top: 1.5rem }
  .veh-feats h3, .veh-std h3 { font-size: .68rem; margin-bottom: .6rem }
  .feats-list li { padding: .58rem 0; font-size: .86rem }

  .stdgrid { grid-template-columns: repeat(4, 1fr); gap: .3rem }
  .stdgrid li { font-size: .57rem; padding: .42rem .18rem; line-height: 1.25; border-radius: 5px }

  .vg-note, .specs-note { font-size: .75rem }
}

/* Tighter page header on phones — the client asked for this area to be more compact. */
@media (max-width: 640px) {
  .page-head { padding-top: 5.2rem; padding-bottom: 1.4rem }
  .page-head h1 { font-size: 1.6rem; letter-spacing: .16em }
  .page-head p { font-size: .85rem; margin-top: .5rem }
  .page-head .crumb { font-size: .72rem; margin-bottom: .5rem }
  .fbar { margin-bottom: 1.1rem }
}

/* Compact hero on phones — the client asked for the intro to be shorter. It used to hold 72vh,
   so the search bar and the first car never showed until you scrolled. Same words, tighter frame.
   Declared last because the base .hi-* rules further up the sheet would otherwise win. */
@media (max-width: 700px) {
  .heroR { min-height: clamp(360px, 54vh, 480px); gap: .5rem;
    padding-top: clamp(4.3rem, 16vw, 5.1rem); padding-bottom: clamp(1.2rem, 4vw, 1.8rem) }
  .hi-eyebrow { margin: .75rem 0 0; font-size: .58rem; letter-spacing: .16em }
  .heroR-info h1 { margin: .55rem 0 0; font-size: 1.34rem; line-height: 1.26 }
  .hi-sub { margin: .55rem 0 0; font-size: .83rem; line-height: 1.58 }
  .hi-cta { margin-top: 1.1rem; gap: .85rem 1.4rem }
  .hi-link { font-size: .69rem; letter-spacing: .17em; padding-bottom: .38rem }
  .heroR-cue { display: none }
}

/* "Search for cars" reads as a solid full-width bar on a phone, the way the reference site's
   Advanced Search Filter does — the light outlined card disappeared against the page. */
@media (max-width: 640px) {
  .fbar { border-color: #14171e; border-radius: 10px; overflow: hidden }
  .fbar-head { background: #14171e; padding: .95rem 1rem }
  .fbar-lede svg { color: var(--gold, #c9a227); width: 16px; height: 16px }
  .fbar-title { color: #fff; font-size: .78rem; font-weight: 800; letter-spacing: .12em }
  .fbar-count { color: rgba(255,255,255,.72); font-size: .74rem }
  .fbar-chev { border-color: var(--gold, #c9a227); width: 9px; height: 9px; border-width: 2px }
  .fbar-head:hover .fbar-title { color: #fff }
}

/* Bolder wordmark in the header — the client wants the name to carry more weight on a phone. */
@media (max-width: 940px) {
  .brand-badge { height: 46px }
  .brand b { font-family: 'Cinzel', Georgia, serif; font-weight: 700; font-size: 1.42rem; letter-spacing: .11em }
  .brand i { height: 1.5px; background: rgba(255,255,255,.75) }
  .brand span { font-weight: 700; font-size: .58rem; letter-spacing: .5em; margin-right: -.5em; color: #fff }
}

/* Mobile keeps the reference's two-column row — a large thumbnail left with the name and price
   beside it — but the spec table and the Inquiry button break out to the FULL width of the row.
   Penned into the right-hand column they left a dead white strip under the photo, and the photo
   itself had to stay small to leave the text any room. */
@media(max-width:640px){
  .srow{grid-template-columns:150px 1fr;column-gap:.8rem;row-gap:.5rem;padding:.95rem 0}
  .srow-info{display:contents}
  /* The photo spans the name + price rows. Keep an explicit aspect ratio: some of the stock
     photography is portrait 960×1280, so letting the image size itself gave that car a 200px
     thumbnail and a ragged list. 6/5 at 150px wide ≈ the reference site's thumbnail. */
  .srow-media{grid-column:1;grid-row:1/3;aspect-ratio:6/5;height:auto;align-self:start}
  .srow-ref{font-size:.62rem;padding:.32rem}
  .srow-name{grid-column:2;grid-row:1;align-self:start;margin:0;font-size:.94rem;line-height:1.25}
  /* Price leads on its own line, the label and the dollar note share the line beneath it —
     next to a 150px photo there is no room to sit the big UGX figure beside its label. */
  .srow-price{grid-column:2;grid-row:2;align-self:end;display:flex;flex-wrap:wrap;
    align-items:baseline;column-gap:.35rem;row-gap:.05rem;margin:0}
  .srow-price>b{order:1;flex:0 0 100%;font-size:1rem;line-height:1.25}
  .srow-price>span{order:2;font-size:.55rem}
  .srow-price>i{order:3;font-size:.58rem;text-align:left}
  .srow-spec{grid-column:1/-1;grid-row:3;grid-template-columns:repeat(4,1fr);margin:0}
  .srow-spec li{padding:.4rem .5rem}
  .srow-spec span{font-size:.55rem;letter-spacing:.06em}
  .srow-spec b{font-size:.76rem}
  .srow-inq{grid-column:1/-1;grid-row:4;width:100%;margin-top:0;padding:.62rem;font-size:.68rem;
    letter-spacing:.2em}
  .stock-count{font-size:1rem}