/* =========================================================
   CANADA MOTOR HOUSE — components
   ========================================================= */

/* ---------- mobile nav ---------- */
@media (max-width: 900px){
  .burger{display:flex;position:relative;z-index:60}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .burger.open span:nth-child(2){opacity:0}
  .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  [data-nav]{position:fixed;inset:0 0 0 auto;width:min(82vw,380px);transform:translateX(105%);
    flex-direction:column;align-items:flex-start;justify-content:center;gap:1.4rem;
    background:var(--bg-2);border-left:1px solid var(--line);padding:2rem var(--gutter);
    transition:transform .5s var(--ease);z-index:55}
  [data-nav].open{transform:none}
  [data-nav] a{font-size:1.1rem}
  .head-cta .btn-ghost{display:none}
}
@media (min-width:901px){ [data-nav]{display:flex!important;transform:none!important} }

/* ---------- HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:clamp(48px,8vh,96px)}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.hero-media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,10,12,.62) 0%,rgba(8,10,12,.32) 34%,rgba(8,10,12,.86) 80%,var(--bg) 100%),
             linear-gradient(90deg,rgba(8,10,12,.72) 0%,rgba(8,10,12,.22) 46%,transparent 72%),
             radial-gradient(120% 80% at 50% 0%,transparent 40%,rgba(8,10,12,.5) 100%)}
.hero .wrap{width:100%}
.hero-inner{max-width:980px}
.hero h1{margin:.35em 0 .3em}
.hero h1 .line{display:block;overflow:hidden}
.hero-sub{display:flex;flex-wrap:wrap;gap:1rem 2.2rem;margin-top:1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}
.hero-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  font-family:var(--font-mono);font-size:.62rem;letter-spacing:.3em;color:var(--ink-mute);
  text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:.6rem}
.hero-scroll::after{content:"";width:1px;height:34px;background:linear-gradient(var(--red),transparent);animation:scrolln 2s var(--ease) infinite}
@keyframes scrolln{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

.ticker{border-block:1px solid var(--line-soft);background:var(--bg-2);overflow:hidden;white-space:nowrap;padding-block:14px;position:relative;z-index:2}
.ticker-track{display:inline-flex;gap:3.5rem;animation:tick 38s linear infinite;font-family:var(--font-mono);
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.ticker-track span{display:inline-flex;align-items:center;gap:1rem}
.ticker-track span::before{content:"◆";color:var(--red);font-size:.6em}
@media (prefers-reduced-motion:reduce){.ticker-track{animation:none}}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- stat row ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-soft);border-block:1px solid var(--line-soft)}
.stat{background:var(--bg);padding:clamp(22px,3vw,38px) clamp(16px,2vw,28px)}
.stat .num{font-family:var(--font-display);font-weight:700;font-size:clamp(2.2rem,4vw,3.4rem);line-height:1;color:var(--ink)}
.stat .lbl{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin-top:.6rem}

/* ---------- section head ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.sec-head .lead{margin-top:1rem}
.sec-head-l{max-width:60ch}

/* ---------- category cards ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat-grid .cat-card:nth-child(1){grid-column:span 3;grid-row:span 2}
.cat-grid .cat-card:nth-child(2){grid-column:span 3}
.cat-card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius-lg);
  min-height:200px;display:flex;align-items:flex-end;text-decoration:none;isolation:isolate;background:var(--surface)}
.cat-card:nth-child(1){min-height:420px}
.cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 1s var(--ease);filter:grayscale(.2) brightness(.85)}
.cat-card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,transparent 30%,rgba(8,10,12,.5) 62%,rgba(8,10,12,.95) 100%)}
.cat-card:hover img{transform:scale(1.06)}
.cat-card .cat-body{padding:clamp(16px,2vw,26px);width:100%}
.cat-card h3{font-size:clamp(1.3rem,2.4vw,2rem);transition:color .3s}
.cat-card:hover h3{color:#fff}
.cat-card .cat-meta{display:flex;justify-content:space-between;align-items:center;margin-top:.5rem;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.cat-card .arrow{width:34px;height:34px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;
  transition:.35s var(--ease);color:var(--ink)}
.cat-card:hover .arrow{background:var(--red);border-color:var(--red);transform:rotate(-45deg)}

/* ---------- split / how it works ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,72px);align-items:center}
.split-media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/3}
.split-media img{width:100%;height:100%;object-fit:cover}
.split-media .badge-float{position:absolute;left:18px;bottom:18px;background:rgba(10,12,14,.82);
  backdrop-filter:blur(8px);border:1px solid var(--line);border-radius:var(--radius);padding:.8rem 1.1rem}

.steps{counter-reset:step;display:grid;gap:0}
.step{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;padding:1.5rem 0;border-top:1px solid var(--line-soft);position:relative}
.step:last-child{border-bottom:1px solid var(--line-soft)}
.step .sn{counter-increment:step;font-family:var(--font-mono);color:var(--red);font-size:.85rem;letter-spacing:.1em;padding-top:.2rem}
.step .sn::before{content:"0" counter(step)}
.step h4{font-size:1.15rem;margin-bottom:.3rem}
.step p{color:var(--ink-mute);font-size:.97rem;margin:0}

/* ---------- routes ---------- */
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.route{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.5rem;background:var(--surface);transition:.4s var(--ease)}
.route:hover{border-color:rgba(228,21,28,.45);transform:translateY(-4px)}
.route .rt-h{display:flex;align-items:center;gap:.7rem;font-family:var(--font-display);text-transform:uppercase;font-size:1.25rem}
.route .rt-h .maple{font-size:1.3em}
.route ul{list-style:none;padding:0;margin:1rem 0 0;font-size:.92rem;color:var(--ink-soft)}
.route li{padding:.35rem 0;border-top:1px dashed var(--line-soft);display:flex;justify-content:space-between;gap:1rem}
.route li:first-child{border-top:0}

/* ---------- inventory ---------- */
.inv-toolbar{position:sticky;top:62px;z-index:40;background:rgba(9,11,13,.9);backdrop-filter:blur(12px);
  border-block:1px solid var(--line-soft);padding-block:14px;margin-bottom:clamp(24px,3vw,40px)}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}
.fbtn{font-family:var(--font-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  padding:.6em 1.05em;border:1px solid var(--line);border-radius:100px;background:transparent;color:var(--ink-soft);
  cursor:pointer;transition:.3s var(--ease);display:inline-flex;align-items:center;gap:.5em;white-space:nowrap}
.fbtn:hover{border-color:var(--ink-mute);color:var(--ink)}
.fbtn[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.fbtn .cnt{opacity:.6;font-size:.9em}
.inv-meta{margin-left:auto;font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);letter-spacing:.08em}

.inv-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:clamp(16px,2vw,26px)}
.vcard{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);
  display:flex;flex-direction:column;transition:transform .5s var(--ease),border-color .5s var(--ease);position:relative}
.vcard:hover{transform:translateY(-5px);border-color:rgba(228,21,28,.4)}
.vcard-media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0d0f12}
.vcard-media img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);filter:saturate(1.02)}
.vcard:hover .vcard-media img{transform:scale(1.05)}
.vcard-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(8,10,12,.55))}
.vbadges{position:absolute;top:12px;left:12px;display:flex;gap:.4rem;z-index:2}
.vstatus{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.4em .7em;border-radius:100px;backdrop-filter:blur(6px);border:1px solid transparent}
.vstatus.stock{background:rgba(34,160,90,.18);color:#5fd28b;border-color:rgba(60,200,120,.4)}
.vstatus.order{background:rgba(228,160,21,.16);color:#e9bf63;border-color:rgba(228,160,21,.4)}
.vstatus.transit{background:rgba(90,150,228,.16);color:#82b0f2;border-color:rgba(90,150,228,.4)}
.vtag{position:absolute;top:12px;right:12px;z-index:2;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;background:var(--red);color:#fff;padding:.4em .7em;border-radius:3px}
.vloc{position:absolute;bottom:10px;left:12px;z-index:2;font-family:var(--font-mono);font-size:.64rem;
  letter-spacing:.08em;color:var(--ink-soft);display:flex;align-items:center;gap:.4em}
.vloc svg{width:11px;height:11px;color:var(--red)}
.vcard-body{padding:1.1rem 1.2rem 1.3rem;display:flex;flex-direction:column;flex:1}
.vbrand{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.vcard h3{font-size:1.32rem;margin:.25rem 0 .1rem;line-height:1}
.vtrim{font-size:.82rem;color:var(--ink-mute);min-height:1.1em}
.vspecs{display:flex;flex-wrap:wrap;gap:.35rem;margin:.85rem 0}
.vspecs span{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.04em;color:var(--ink-soft);
  border:1px solid var(--line-soft);border-radius:3px;padding:.3em .55em;background:var(--bg-2)}
.vcolors{display:flex;align-items:center;gap:.4rem;margin-top:auto;padding-top:.9rem}
.vcolors .sw{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(0,0,0,.3)}
.vcolors .more{font-family:var(--font-mono);font-size:.66rem;color:var(--ink-mute)}
.vfoot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft)}
.vprice{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--ink-soft);text-transform:uppercase}
.vprice b{color:var(--ink);font-weight:600}
.vask{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
  display:inline-flex;align-items:center;gap:.4em;background:none;border:0;cursor:pointer;transition:gap .3s}
.vask:hover{gap:.7em}
.inv-empty{text-align:center;padding:4rem 1rem;color:var(--ink-mute);font-family:var(--font-mono);grid-column:1/-1}

/* ---------- modal (request) ---------- */
.modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.modal.open{display:flex}
.modal-bg{position:absolute;inset:0;background:rgba(5,6,8,.78);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);
  animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}}
.modal-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border:1px solid var(--line);
  background:none;color:var(--ink);border-radius:50%;cursor:pointer;font-size:1.1rem;transition:.3s}
.modal-close:hover{background:var(--red);border-color:var(--red)}
.modal h3{font-size:1.5rem}
.modal .veh-ref{font-family:var(--font-mono);font-size:.78rem;color:var(--red);margin-top:.3rem}

/* ---------- forms ---------- */
.field{margin-bottom:1.05rem}
.field label{display:block;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-mute);margin-bottom:.5rem}
.field input,.field select,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);padding:.85rem 1rem;font-family:var(--font-body);font-size:1rem;
  transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);outline:none}
.field textarea{min-height:96px;resize:vertical}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-note{font-size:.78rem;color:var(--ink-faint);margin-top:.4rem}
.form-ok{display:none;text-align:center;padding:1rem 0}
.form-ok.show{display:block}
.form-ok .ico{width:58px;height:58px;border-radius:50%;background:rgba(34,160,90,.15);border:1px solid rgba(60,200,120,.4);
  color:#5fd28b;display:grid;place-items:center;margin:0 auto 1rem;font-size:1.6rem}

/* ---------- contact cards ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px)}
.warehouse{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface)}
.warehouse .wh-media{aspect-ratio:16/9;overflow:hidden}
.warehouse .wh-media img{width:100%;height:100%;object-fit:cover}
.warehouse .wh-body{padding:1.4rem}
.chanrow{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1rem}
.chan{display:inline-flex;align-items:center;gap:.5em;border:1px solid var(--line);border-radius:100px;
  padding:.6em 1.05em;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;transition:.3s var(--ease)}
.chan:hover{border-color:var(--red);background:rgba(228,21,28,.08);transform:translateY(-2px)}
.chan svg{width:16px;height:16px}

/* ---------- CTA band ---------- */
.cta-band{position:relative;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--line);
  padding:clamp(36px,6vw,80px);background:linear-gradient(120deg,#16080a 0%,var(--surface) 55%);text-align:center}
.cta-band::before{content:"";position:absolute;inset:0;z-index:0;opacity:.5;
  background:radial-gradient(60% 120% at 50% -10%,rgba(228,21,28,.28),transparent 60%)}
.cta-band>*{position:relative;z-index:1}

/* ---------- page hero (sub pages) ---------- */
.page-hero{position:relative;padding-top:clamp(120px,16vh,180px);padding-bottom:clamp(40px,6vw,72px);overflow:hidden;
  border-bottom:1px solid var(--line-soft)}
.page-hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.18;
  background:radial-gradient(70% 100% at 80% 0%,rgba(228,21,28,.3),transparent 55%)}
.breadcrumb{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:1.2rem}
.breadcrumb a:hover{color:var(--red)}

/* ---------- prose ---------- */
.prose p{color:var(--ink-soft);max-width:68ch}
.prose p+p{margin-top:1rem}

/* ---------- value cards ---------- */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.value{border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem;background:var(--surface);transition:.4s var(--ease)}
.value:hover{transform:translateY(-4px);border-color:rgba(228,21,28,.4)}
.value .vi{width:46px;height:46px;border:1px solid var(--line);border-radius:var(--radius);display:grid;place-items:center;color:var(--red);margin-bottom:1rem}
.value h4{font-size:1.1rem;margin-bottom:.5rem}
.value p{color:var(--ink-mute);font-size:.92rem;margin:0}

/* ---------- vcard link + desc + actions ---------- */
.vcard-link{display:block;color:inherit;text-decoration:none}
.vcard h3 a{color:inherit;text-decoration:none;transition:color .3s}
.vcard:hover h3 a{color:var(--red)}
.vdesc{font-size:.84rem;color:var(--ink-mute);line-height:1.5;margin:.4rem 0 0;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.vdetail{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);display:inline-flex;align-items:center;gap:.4em;text-decoration:none;transition:.3s}
.vdetail:hover{color:var(--ink);gap:.7em}
.vfoot{display:flex;justify-content:space-between;align-items:center;margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line-soft);gap:.5rem}

/* ---------- nav dropdown ---------- */
.nav-group{position:relative;display:flex;align-items:center}
/* invisible hover-bridge: keeps the dropdown open while the cursor crosses
   the gap between the button and the menu (prevents flicker/disappear) */
.nav-group::after{content:"";position:absolute;top:100%;left:-16px;width:248px;height:20px;pointer-events:none}
.nav-group:hover::after{pointer-events:auto}
.nav-group-btn{background:none;border:0;color:var(--ink-soft);font-family:var(--font-mono);font-size:.76rem;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;
  gap:.28em;padding:0;transition:color .3s}
.nav-group-btn:hover{color:var(--ink)}
.nav-chevron{transition:transform .35s var(--ease);flex-shrink:0}
.nav-group.open .nav-chevron{transform:rotate(180deg)}
.nav-drop{position:absolute;top:calc(100% + 14px);left:-12px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:.45rem;
  min-width:220px;z-index:200;opacity:0;visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .22s,transform .22s,visibility .22s;pointer-events:none;
  box-shadow:0 16px 48px rgba(0,0,0,.55)}
.nav-group:hover .nav-drop,.nav-group.open .nav-drop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nd-row{display:flex;justify-content:space-between;align-items:center;padding:.6rem .85rem;
  border-radius:var(--radius);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.04em;
  color:var(--ink-soft);text-decoration:none;transition:background .2s,color .2s;gap:1rem}
.nd-row:hover{background:var(--surface);color:var(--ink)}
.nd-all{color:var(--ink);font-weight:600}
.nd-all:hover{background:rgba(228,21,28,.12);color:var(--red)}
.nd-cnt{color:var(--red);font-size:.68rem;opacity:.85;flex-shrink:0}
.nd-sep{height:1px;background:var(--line-soft);margin:.3rem .85rem}
/* mobile: dropdown stacks inside drawer */
@media(max-width:900px){
  .nav-group{flex-direction:column;align-items:flex-start;width:100%}
  .nav-group::after{display:none}
  .nav-group-btn{font-size:1.1rem;font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--ink-soft)}
  .nav-drop{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;
    background:transparent;border:0;box-shadow:none;padding:.2rem 0 .2rem 1rem;
    max-height:0;overflow:hidden;transition:max-height .35s var(--ease);min-width:0}
  .nav-group.open .nav-drop{max-height:420px}
  .nd-row{font-family:var(--font-body);font-size:.95rem;letter-spacing:0;padding:.45rem .5rem;color:var(--ink-mute)}
  .nd-sep{margin:.25rem .5rem}
}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .cat-grid .cat-card:nth-child(1){grid-column:span 2;grid-row:auto;min-height:300px}
  .cat-grid .cat-card:nth-child(2){grid-column:span 2}
  .routes,.values{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  body{font-size:16px}
  .stats{grid-template-columns:1fr 1fr}
  .cat-grid{grid-template-columns:1fr}
  .field-row{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .sec-head{flex-direction:column;align-items:flex-start}
  .inv-toolbar{top:56px}
  .inv-meta{display:none}
  .hero-scroll{display:none}
  .hero{min-height:100svh;padding-bottom:36px}
}

/* ═══════════════════════════════════════════════════════════
   DESIGN OVERHAUL v2 — brutal · premium · motion · atmosphere
   ═══════════════════════════════════════════════════════════ */

/* ---------- atmosphere: animated aurora field behind everything ---------- */
.atmos{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.atmos::before,.atmos::after{content:"";position:absolute;border-radius:50%;filter:blur(74px);opacity:.5;
  mix-blend-mode:screen;will-change:transform}
.atmos::before{width:60vw;height:60vw;left:-10vw;top:-15vw;
  background:radial-gradient(circle,rgba(228,21,28,.30),transparent 62%);animation:drift1 26s var(--ease) infinite alternate}
.atmos::after{width:48vw;height:48vw;right:-12vw;bottom:-10vw;
  background:radial-gradient(circle,rgba(40,90,170,.24),transparent 62%);animation:drift2 32s var(--ease) infinite alternate}
@keyframes drift1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(8vw,10vh) scale(1.18)}}
@keyframes drift2{0%{transform:translate(0,0) scale(1.05)}100%{transform:translate(-7vw,-8vh) scale(.9)}}
@media (prefers-reduced-motion:reduce){.atmos::before,.atmos::after{animation:none}}
/* keep content above the field */
.hero,.section,.ticker,.stats,.site-foot,.page-hero{position:relative;z-index:2}
/* header stays fixed/floating (style.css sets top/left/right) and must own a
   stacking context ABOVE every section so the nav + language dropdowns are
   never buried by the hero (which is also z:2) */
.site-head{position:fixed;z-index:120}
.modal{z-index:1000}

/* ---------- header: premium glass + icon cluster ---------- */
.site-head{gap:1.2rem}
.site-head.scrolled{background:rgba(8,10,12,.96);
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 18px 40px -28px rgba(0,0,0,.9)}
.nav a::after{height:2px;bottom:-3px;background:linear-gradient(90deg,var(--red),var(--red-bright))}
.nav a[aria-current="page"]{color:#fff}
.nav-group-btn[aria-current="true"]{color:#fff}

/* header utility cluster (search / favorites / compare / lang) */
.head-tools{display:flex;align-items:center;gap:.35rem}
.htool{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:var(--radius);background:rgba(255,255,255,.015);color:var(--ink-soft);cursor:pointer;
  transition:.3s var(--ease)}
.htool:hover{color:#fff;border-color:rgba(228,21,28,.55);background:rgba(228,21,28,.08);transform:translateY(-1px)}
.htool svg{width:18px;height:18px}
.htool .badge{position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:100px;
  background:var(--red);color:#fff;font-family:var(--font-mono);font-size:.6rem;font-weight:600;
  display:none;align-items:center;justify-content:center;box-shadow:0 0 0 2px var(--bg)}
.htool .badge.show{display:flex;animation:pop .4s var(--ease)}

/* language switcher */
.lang{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:.4em;height:40px;padding:0 .7rem;border:1px solid var(--line);
  border-radius:var(--radius);background:rgba(255,255,255,.015);color:var(--ink-soft);cursor:pointer;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;transition:.3s var(--ease)}
.lang-btn:hover{color:#fff;border-color:rgba(228,21,28,.55)}
.lang-btn .nav-chevron{width:10px;height:10px}
.lang.open .nav-chevron{transform:rotate(180deg)}
.lang-drop{position:absolute;top:calc(100% + 10px);right:0;min-width:148px;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-lg);padding:.4rem;z-index:200;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .2s,transform .2s,visibility .2s;box-shadow:0 16px 48px rgba(0,0,0,.55)}
.lang.open .lang-drop{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.lang-opt{display:flex;align-items:center;gap:.6rem;width:100%;padding:.55rem .7rem;border:0;background:none;
  border-radius:var(--radius);color:var(--ink-soft);font-family:var(--font-mono);font-size:.74rem;letter-spacing:.06em;
  cursor:pointer;text-align:left;transition:.2s}
.lang-opt:hover{background:var(--surface);color:#fff}
.lang-opt[aria-current="true"]{color:var(--red)}
.lang-opt .flag{font-size:1rem;line-height:1}

/* ---------- heading chrome glow ---------- */
.h-xxl,.h-xl{position:relative}
.text-red{text-shadow:0 0 32px rgba(228,21,28,.35)}
.eyebrow{position:relative}
.eyebrow.center{justify-content:center}

/* ---------- brutal section index ---------- */
.sec-head{position:relative}
.sec-index{position:absolute;right:0;top:-.4em;font-family:var(--font-display);font-weight:700;
  font-size:clamp(3rem,9vw,8rem);line-height:.8;letter-spacing:-.04em;pointer-events:none;
  -webkit-text-stroke:1px var(--line);color:transparent;opacity:.6;z-index:-1}

/* ---------- premium hairline dividers ---------- */
.divider{height:1px;background:linear-gradient(90deg,transparent,var(--red) 50%,transparent);opacity:.5}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--line) 12%,var(--line) 88%,transparent)}

/* ---------- button sheen sweep ---------- */
.btn::before{content:"";position:absolute;inset:0;z-index:0;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  transition:transform .7s var(--ease)}
.btn:hover::before{transform:translateX(120%)}
.btn>*{position:relative;z-index:1}
.btn-red{box-shadow:0 8px 30px -10px rgba(228,21,28,.7)}
.btn-red:hover{box-shadow:0 12px 38px -8px rgba(228,21,28,.85)}

/* ---------- vcard premium glass + hover sweep ---------- */
.vcard{background:linear-gradient(180deg,rgba(22,27,32,.9),rgba(14,17,20,.92));
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 20px 50px -34px rgba(0,0,0,.9)}
.vcard::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  border-radius:inherit;transition:opacity .5s var(--ease);
  background:radial-gradient(120% 60% at 50% -10%,rgba(228,21,28,.16),transparent 60%)}
.vcard:hover{transform:translateY(-7px);border-color:rgba(228,21,28,.55);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.95),0 0 0 1px rgba(228,21,28,.18)}
.vcard:hover::before{opacity:1}
.vcard-media::before{content:"";position:absolute;top:0;left:-60%;width:50%;height:100%;z-index:2;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.10),transparent);
  transform:skewX(-18deg);transition:left .7s var(--ease);pointer-events:none}
.vcard:hover .vcard-media::before{left:130%}
.vcard-media.noimg img{display:none}
.vcard-media.noimg::after{content:"CMH";position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-size:2rem;letter-spacing:.2em;color:var(--ink-faint);opacity:.4;z-index:1;background:none}

/* favorite + compare controls on cards */
.vctl{position:absolute;top:12px;right:12px;z-index:4;display:flex;gap:.4rem}
.vcard .vtag~.vctl,.vcard .vtag+.vctl{top:46px}
.vfav,.vcmp{width:34px;height:34px;display:grid;place-items:center;border:1px solid var(--line);
  border-radius:50%;background:rgba(10,12,14,.72);backdrop-filter:blur(6px);color:var(--ink-soft);
  cursor:pointer;transition:.28s var(--ease)}
.vfav svg,.vcmp svg{width:16px;height:16px;transition:.28s}
.vfav:hover,.vcmp:hover{color:#fff;border-color:var(--red);transform:scale(1.1)}
.vfav.active{color:var(--red);border-color:var(--red);background:rgba(228,21,28,.16)}
.vfav.active svg{fill:var(--red)}
.vcmp.active{color:#fff;border-color:var(--red);background:var(--red)}

/* ---------- toolbar: filters + sort + search ---------- */
.inv-toolbar2{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.4rem}
.toolsearch{position:relative;flex:1;min-width:200px;max-width:340px}
.toolsearch input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:100px;
  color:var(--ink);padding:.7rem 1rem .7rem 2.6rem;font-family:var(--font-body);font-size:.92rem;transition:border-color .3s}
.toolsearch input:focus{border-color:var(--red);outline:none}
.toolsearch svg{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-mute)}
.sortwrap{position:relative}
.sortwrap select{appearance:none;background:var(--surface);border:1px solid var(--line);border-radius:100px;
  color:var(--ink-soft);padding:.7rem 2.4rem .7rem 1.1rem;font-family:var(--font-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:border-color .3s}
.sortwrap select:focus{border-color:var(--red);outline:none}
.sortwrap::after{content:"▾";position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:var(--ink-mute);pointer-events:none}

/* ---------- search page ---------- */
.search-hero{max-width:680px}
.toolsearch.search-big{max-width:680px;width:100%}
.toolsearch.search-big input{padding:1.05rem 1.3rem 1.05rem 3.2rem;font-size:1.05rem;border-radius:14px}
.toolsearch.search-big svg{left:1.25rem;width:20px;height:20px}
.search-chips{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;margin-top:1rem}
.search-chips .chips-label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.schip{background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);border-radius:100px;
  padding:.45rem 1rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.04em;cursor:pointer;transition:.25s}
.schip:hover{border-color:var(--red);color:var(--ink);transform:translateY(-2px)}
.fav-actions{display:flex;flex-wrap:wrap;gap:.8rem}

/* ---------- compare tray ---------- */
.cmp-tray{position:fixed;left:50%;bottom:18px;transform:translate(-50%,140%);z-index:90;
  display:flex;align-items:center;gap:1rem;padding:.7rem .7rem .7rem 1.3rem;
  background:rgba(14,17,20,.92);backdrop-filter:blur(16px);border:1px solid var(--line);
  border-radius:100px;box-shadow:0 20px 50px -16px rgba(0,0,0,.85);transition:transform .5s var(--ease);max-width:94vw}
.cmp-tray.show{transform:translate(-50%,0)}
.cmp-tray .cmp-label{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);white-space:nowrap}
.cmp-tray .cmp-label b{color:var(--red)}
.cmp-thumbs{display:flex;gap:.4rem}
.cmp-thumbs .ct{width:42px;height:30px;border-radius:4px;overflow:hidden;border:1px solid var(--line);position:relative;background:#0d0f12}
.cmp-thumbs .ct img{width:100%;height:100%;object-fit:cover}
.cmp-thumbs .ct button{position:absolute;inset:0;background:rgba(0,0,0,.4);color:#fff;border:0;cursor:pointer;opacity:0;transition:.2s;font-size:.8rem}
.cmp-thumbs .ct:hover button{opacity:1}

/* ---------- reveal variants ---------- */
[data-reveal][data-anim="blur"]{filter:blur(14px)}
[data-reveal][data-anim="blur"].in{filter:blur(0)}
[data-reveal][data-anim="rise"]{transform:translateY(48px)}
[data-reveal][data-anim="clip"]{clip-path:inset(0 0 100% 0);transform:none;opacity:1}
[data-reveal][data-anim="clip"].in{clip-path:inset(0 0 0 0)}

/* ---------- marquee strip (brutal) ---------- */
.bigmarq{overflow:hidden;border-block:1px solid var(--line-soft);padding-block:clamp(10px,1.6vw,20px);position:relative}
.bigmarq-track{display:inline-flex;gap:2.2rem;white-space:nowrap;animation:tick 30s linear infinite;
  font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.6rem,3.4vw,3rem);
  font-weight:700;letter-spacing:-.01em;color:transparent;-webkit-text-stroke:1px var(--ink-mute)}
.bigmarq-track span{display:inline-flex;align-items:center;gap:2.2rem}
.bigmarq-track span::after{content:"◆";-webkit-text-stroke:0;color:var(--red);font-size:.5em}
.bigmarq-track .solid{color:var(--ink);-webkit-text-stroke:0}
@media (prefers-reduced-motion:reduce){.bigmarq-track{animation:none}}

/* ---------- responsive header tools ---------- */
@media(max-width:900px){
  .head-tools .htool.opt-hide{display:none}
  .lang-btn{height:38px}
}
@media(max-width:560px){
  .sec-index{display:none}
}

/* ═══════════════════════════════════════════════════════════
   PREMIUM POLISH v3 — cinematic grade · kinetic light · depth
   Layered on top of v2; only enhances existing components.
   ═══════════════════════════════════════════════════════════ */

/* ---------- hero: slow Ken-Burns drift + cinematic letterbox grade ---------- */
.hero-media img{animation:kenburns 24s var(--ease) infinite alternate;will-change:transform}
@keyframes kenburns{
  0%{transform:scale(1.06) translate3d(0,0,0)}
  100%{transform:scale(1.14) translate3d(-1.4%,-1.8%,0)}
}
@media (prefers-reduced-motion:reduce){.hero-media img{animation:none}}
/* faint cinematic bars + breathing red core glow for grade */
.hero-media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(80% 60% at 18% 88%,rgba(228,21,28,.16),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.55) 0,transparent 12%,transparent 86%,rgba(0,0,0,.45) 100%);
  animation:heroPulse 9s var(--ease) infinite alternate}
@keyframes heroPulse{0%{opacity:.7}100%{opacity:1}}

/* ---------- brand ticker: soft edge fades so it dissolves into the dark ---------- */
.ticker::before,.ticker::after{content:"";position:absolute;top:0;bottom:0;width:14%;z-index:3;pointer-events:none}
.ticker::before{left:0;background:linear-gradient(90deg,var(--bg-2),transparent)}
.ticker::after{right:0;background:linear-gradient(270deg,var(--bg-2),transparent)}
.ticker-track span:hover{color:var(--ink)}

/* ---------- stats: animated top hairline + accented first number ---------- */
.stat{position:relative;transition:background .4s var(--ease)}
.stat::before{content:"";position:absolute;top:-1px;left:0;height:2px;width:0;
  background:linear-gradient(90deg,var(--red),var(--red-bright));transition:width .7s var(--ease-out)}
.stat:hover{background:var(--bg-2)}
.stat:hover::before{width:100%}
.stat .num{background:linear-gradient(180deg,#fff,#cfd5da);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat:hover .num{background:linear-gradient(180deg,#fff,var(--red-bright));-webkit-background-clip:text;background-clip:text}

/* ---------- category cards: glow ring + sliding sheen on hover ---------- */
.cat-card{transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .5s var(--ease)}
.cat-card:hover{border-color:rgba(228,21,28,.5);box-shadow:0 26px 60px -28px rgba(0,0,0,.9),0 0 0 1px rgba(228,21,28,.18) inset;transform:translateY(-3px)}
.cat-card::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.08) 50%,transparent 62%);
  transform:translateX(-60%);transition:opacity .1s}
.cat-card:hover::before{opacity:1;animation:sheen 1.1s var(--ease-out)}
@keyframes sheen{0%{transform:translateX(-60%)}100%{transform:translateX(120%)}}

/* ---------- vehicle cards: deeper hover lift with red-tinted glow ---------- */
.vcard:hover{box-shadow:0 30px 64px -30px rgba(0,0,0,.92),0 0 30px -18px rgba(228,21,28,.5)}
.vstatus.stock{box-shadow:0 0 14px -4px rgba(60,200,120,.45)}

/* ---------- buttons: light sweep on the primary CTA ---------- */
.btn-red{position:relative;overflow:hidden;isolation:isolate}
.btn-red::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;z-index:-1;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.28),transparent);
  transform:skewX(-18deg);transition:left .6s var(--ease-out)}
.btn-red:hover::after{left:130%}

/* ---------- section headings: red accent tick before the eyebrow ---------- */
.sec-head .eyebrow{position:relative;padding-left:1.6rem}
.sec-head .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1rem;height:2px;
  background:var(--red);transform:translateY(-50%)}

/* ---------- route + value cards: subtle inner glow on hover ---------- */
.route:hover,.value:hover{box-shadow:0 22px 50px -30px rgba(0,0,0,.85),0 0 0 1px rgba(228,21,28,.12) inset}