:root{
    --navy:#0d2340; --navy-2:#16335c; --navy-3:#1e4576;
    --red:#e11b22; --red-dark:#b3131a;
    --silver:#838d9c; --silver-2:#c7cfdb;
    --ink:#16233a; --muted:#5b6b82; --line:#e3e8f0; --bg-soft:#f5f7fb;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;scroll-padding-top:90px}
  body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.6}
  h1,h2,h3,h4,.font-head{font-family:Montserrat,sans-serif;font-weight:800;letter-spacing:-.01em}
  a{text-decoration:none;color:inherit}
  img{display:block;max-width:100%}
  .wrap{max-width:1200px;margin:0 auto;padding:0 22px}
  .eyebrow{font-family:Montserrat,sans-serif;font-weight:700;letter-spacing:.18em;text-transform:uppercase;font-size:.74rem;color:var(--red)}

  /* ── Buttons ── single forward-cut corner (no skew, no shine sweep) ── */
  .btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:.5rem;font-family:Montserrat,sans-serif;font-weight:700;font-size:.95rem;padding:.85rem 1.6rem;border-radius:2px;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .2s,background .2s,color .2s,border-color .2s;clip-path:polygon(0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%)}
  .btn:hover{transform:translateY(-2px)}
  .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 22px #e11b2245}
  .btn-red:hover{background:var(--red-dark);box-shadow:0 12px 28px #e11b2255}
  /* Outline drawn as an evenodd clip-path RING on ::after: an outer polygon
     identical to the .btn cut, then an inner polygon inset 2px (the diagonal
     inset by 2*sqrt2 ~= 13.83px). evenodd punches the inner loop out as a hole,
     so the 2px stroke follows the angled cut EXACTLY and the interior stays
     truly transparent over the textured hero. inset:-2px extends ::after to the
     border box so its edge coincides with the parent clip edge. */
  .btn-outline{--oc:#ffffff8c;background:transparent;color:#fff;border-color:transparent;overflow:visible;clip-path:none}
  .btn-outline::after,.btn-ghost::after{content:"";position:absolute;inset:-2px;z-index:-1;background:var(--oc);clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 13px),calc(100% - 13px) 100%,0 100%,0 0,2px 2px,2px calc(100% - 2px),calc(100% - 13.83px) calc(100% - 2px),calc(100% - 2px) calc(100% - 13.83px),calc(100% - 2px) 2px,2px 2px)}
  .btn-outline:hover{--oc:#fff;background-color:#ffffff12}
  .btn-silver{background:linear-gradient(135deg,#e9edf3,#c7cfdb);color:var(--navy);box-shadow:0 8px 22px #0d234040}
  .btn-silver:hover{background:linear-gradient(135deg,#fff,#d7dee8)}
  .btn-navy{background:var(--navy);color:#fff}
  .btn-navy:hover{background:var(--navy-2)}
  .btn-ghost{--oc:var(--line);background:transparent;color:var(--navy);border-color:transparent;overflow:visible;clip-path:none}
  .btn-ghost:hover{--oc:var(--red);color:var(--red)}

  /* ── Nav ── */
  header.nav{position:sticky;top:0;margin-bottom:-74px;z-index:50;transition:background .3s,box-shadow .3s,backdrop-filter .3s}
  header.nav.scrolled{background:#0b1d36e6;backdrop-filter:blur(10px);box-shadow:0 2px 20px #00000045}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:20px;height:74px}
  .nav-logo{flex:0 0 auto}
  .nav-logo img{height:46px;width:auto;margin-left:-2.3px}
  .hero-logo{height:74px;width:auto;margin-bottom:22px;filter:drop-shadow(0 8px 22px #00000066)}
  @media(max-width:640px){.hero-logo{height:56px}.nav-logo img{height:38px}}
  .nav-links{display:flex;align-items:center;gap:2px;flex:0 0 auto;flex-wrap:nowrap;margin-left:auto}
  .nav-links a.link{color:#e7ecf3;font-family:Montserrat,sans-serif;font-weight:600;font-size:.9rem;padding:.55rem .85rem;position:relative;white-space:nowrap;flex:0 0 auto}
  .nav-links a.link::after{content:"";position:absolute;left:.85rem;right:.85rem;bottom:.35rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .22s}
  .nav-links a.link:hover::after{transform:scaleX(1)}
  .nav-drop{position:relative;flex:0 0 auto}
  .nav-drop .drop-caret{margin-left:3px;vertical-align:-1px;transition:transform .18s ease}
  .nav-drop:hover .drop-caret{transform:rotate(180deg)}
  .nav-drop-menu{position:absolute;top:100%;left:.85rem;min-width:180px;background:#0b1d36;border:1px solid #ffffff1f;border-radius:8px;box-shadow:0 14px 30px #00000055;padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .nav-drop:hover .nav-drop-menu,.nav-drop:focus-within .nav-drop-menu{opacity:1;visibility:visible;transform:translateY(0)}
  .nav-drop-menu a{display:block;color:#e7ecf3;font-family:Montserrat,sans-serif;font-weight:600;font-size:.85rem;padding:.6rem .75rem;border-radius:5px;white-space:nowrap}
  .nav-drop-menu a:hover{background:#ffffff14;color:#fff}
  .nav-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
  .nav-phone{display:inline-flex;align-items:center;gap:.4rem;color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:.9rem;white-space:nowrap;flex:0 0 auto}
  .nav-cta{flex:0 0 auto}
  .burger{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:0}

  /* ── Hero ── */
  .hero{position:relative;min-height:94vh;display:flex;align-items:center;overflow:hidden;background:var(--navy)}
  .hero-bg{position:absolute;inset:0}
  /* Each slide fades in/out for the rotating photo background; the overlay/slash sit on top. */
  .hero-slide{position:absolute;inset:0;transition:opacity 1s ease;will-change:opacity}
  .hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(105deg,#081426f2 0%,#0b1d36e6 46%,#0d234075 100%)}
  /* red angular speed slash echoing the logo */
  .hero-slash{position:absolute;top:0;bottom:0;right:-8%;width:46%;background:linear-gradient(135deg,#e11b22 0%,#b3131a 100%);transform:skewX(-14deg);opacity:.10;filter:blur(2px)}
  .hero-slash.two{right:2%;width:2px;opacity:.7;filter:none;background:var(--red)}
  .hero-inner{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,430px);gap:clamp(48px,7vw,112px);align-items:center;padding:140px 22px 70px}
  .hero-copy{color:#fff;max-width:640px}
  .hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:#e11b22;color:#fff;font-family:Montserrat,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:.4rem .8rem;clip-path:polygon(8px 0,100% 0,100% 100%,0 100%,0 8px);margin-bottom:22px}
  .hero h1{font-size:clamp(2.4rem,5vw,4rem);line-height:1.02;margin-bottom:0}
  .hero h1 .accent{color:#fff}
  /* angular red accent bar replaces the all-red headline. Keeps the brand red as
     an accent (per design review) without shouting it in the type. */
  .hero .h1-rule{display:block;width:82px;height:5px;background:var(--red);transform:skewX(-14deg);border-radius:1px;margin:16px 0 22px;box-shadow:0 4px 16px #e11b2255}
  .hero p.sub{font-size:1.12rem;color:#dbe3ef;max-width:560px;margin-bottom:28px;line-height:1.6}
  .hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:34px}
  .trust{display:flex;flex-wrap:wrap;gap:26px}
  .trust .item{display:flex;flex-direction:column}
  .trust .num{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.7rem;color:#fff;line-height:1}
  .trust .num span{color:var(--silver-2)}
  .trust .lbl{font-size:.78rem;color:#aab7c9;margin-top:4px;text-transform:uppercase;letter-spacing:.05em}
  .trust .divider{width:1px;background:#ffffff20}

  /* ── Lead form card ── */
  /* 1px border + soft outer shadow so the card lifts off the navy background it
     sits on. Border kept; main shadow at 0.37 opacity (no red accent). Nate, 9/1. */
  .form-card{background:#fff;border-radius:4px;border:1px solid rgba(255,255,255,.35);box-shadow:0 30px 70px rgba(0,0,0,.37),0 0 0 4px rgba(255,255,255,.07);overflow:hidden;position:relative;justify-self:end;width:100%;max-width:430px}
  .form-card::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-top:38px solid var(--red);border-right:38px solid transparent}
  .form-card .head{background:linear-gradient(120deg,var(--navy),var(--navy-3));padding:22px 26px 20px;color:#fff;position:relative}
  .form-card .head h3{font-size:1.32rem;line-height:1.1}
  .form-card .head p{font-size:.82rem;color:#c3cede;margin-top:5px}
  .form-body{padding:22px 26px 26px}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .fld{margin-bottom:14px}
  label.fl{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:6px;font-family:Montserrat,sans-serif}
  .inp{width:100%;border:1px solid var(--line);border-radius:3px;padding:.72rem .85rem;font-size:.93rem;color:var(--ink);font-family:inherit;background:#fff;transition:border-color .15s,box-shadow .15s}
  .inp:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 3px #1e457622}
  .consent{display:flex;gap:.55rem;align-items:flex-start;font-size:.72rem;color:var(--muted);line-height:1.45;margin:4px 0 14px}
  .form-success{display:none;padding:38px 26px;text-align:center}
  .form-success .ck{width:56px;height:56px;border-radius:50%;background:#dcfce7;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
  .form-success h4{color:var(--navy);font-size:1.2rem;margin-bottom:6px}
  .form-success p{color:var(--muted);font-size:.9rem}

  /* ── Sections ── */
  section.pad{padding:104px 0}
  @media(max-width:768px){section.pad{padding:64px 0}}
  .sec-head{max-width:640px;margin-bottom:44px}
  .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--navy);margin-top:8px;line-height:1.08}
  .sec-head p{color:var(--muted);margin-top:12px;font-size:1.02rem}

  /* value props ── a divided horizontal strip, not a card grid. No boxes, no
     shadows: items sit directly on a soft banded background and are separated
     by hairline rules (vertical on desktop where everything fits one row,
     horizontal once it wraps/stacks on tablet/mobile). Works for any item
     count (3 on about.html, 5 on the homepage) since dividers key off
     adjacency, not a fixed column count. */
  .vp-band{background:var(--bg-soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  /* .vp-grid stacks one or more .vp-row lines (3-across, then a centered
     2-across line on the homepage; a single 3-across line on about.html).
     Fixed item width keeps both rows visually matched instead of the
     2-item row stretching wider than the 3-item row above it. */
  .vp-grid{display:flex;flex-direction:column;align-items:center}
  .vp-row{display:flex;flex-wrap:nowrap;justify-content:center;width:100%}
  .vp-row+.vp-row{border-top:1px solid var(--line);margin-top:30px;padding-top:30px}
  .vp{position:relative;flex:0 1 300px;min-width:0;text-align:center;padding:8px 30px;border-left:1px solid var(--line)}
  .vp:first-child{border-left:none}
  .vp .ic{width:50px;height:50px;border-radius:50%;background:#fff;border:1px solid var(--line);color:var(--red);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;transition:background .25s,color .25s,border-color .25s}
  .vp .ic svg{width:25px;height:25px}
  .vp:hover .ic{background:var(--red);border-color:var(--red);color:#fff}
  .vp h3{color:var(--navy);font-family:Montserrat,sans-serif;font-weight:700;font-size:.92rem;letter-spacing:.01em;margin-bottom:7px;line-height:1.28}
  .vp p{color:var(--muted);font-size:.83rem;line-height:1.56;max-width:210px;margin:0 auto}

  /* inventory */
  .inv-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .car{background:#fff;border:1px solid var(--line);border-radius:4px;overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative}
  .car:hover{transform:translateY(-6px);box-shadow:0 24px 52px #0d234022;border-color:#cdd7e6}
  .car .ph{position:relative;aspect-ratio:4/3;background:#0d2340;overflow:hidden}
  .car .ph .ph-fit{transition:transform .4s}
  .car:hover .ph .ph-fit{transform:scale(1.04)}
  .car .tag{position:absolute;bottom:0;left:0;background:var(--red);color:#fff;font-family:Montserrat,sans-serif;font-weight:800;font-size:1.02rem;padding:.4rem .9rem .4rem .8rem;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 100%,0 100%)}
  .car .info{padding:16px 18px 18px}
  .car .info h3{font-size:1.02rem;color:var(--navy);margin-bottom:5px}
  .car .info .meta{font-size:.82rem;color:var(--muted);display:flex;gap:12px;margin-bottom:14px}
  /* price lives in the card body now (bold navy), not as a red block over the photo */
  .car .info .foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);padding-top:13px}
  .car .info .price{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.3rem;color:var(--navy);line-height:1}
  .car .info .go{font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;color:var(--navy);transition:color .18s}
  .car:hover .info .go{color:var(--red)}

  /* under 10k banner */
  .band{background:var(--navy);color:#fff;position:relative;overflow:hidden}
  .band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(120% 85% at 50% 0%,#1e457655,transparent 62%),radial-gradient(circle at 1px 1px,#ffffff0a 1px,transparent 0);background-size:auto,34px 34px}
  .band .band-slash{position:absolute;top:-20%;right:-6%;width:34%;height:140%;background:var(--red);opacity:.1;transform:skewX(-14deg)}
  .band-inner{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
  .band h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin:10px 0 14px}
  .band p{color:#c7d1e0;max-width:480px;margin-bottom:24px;line-height:1.6}
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .stat{background:#ffffff0a;border:1px solid #ffffff1a;padding:22px 14px;text-align:center;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
  .stat .n{font-family:Montserrat,sans-serif;font-weight:800;font-size:2.1rem;color:var(--silver-2);line-height:1}
  .stat .t{font-size:.74rem;color:#aeb9c9;margin-top:7px;text-transform:uppercase;letter-spacing:.05em}

  /* quick paths */
  .qp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .qp{border:1px solid var(--line);padding:28px 24px;background:#fff;transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:0 10px 26px #0d23400f}
  .qp:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 24px 48px #0d234017}
  .qp h3{color:var(--navy);font-size:1.08rem;margin-bottom:8px}
  .qp:hover h3{color:var(--red)}
  .qp p{color:var(--muted);font-size:.88rem;margin-bottom:12px}
  .qp .go{font-family:Montserrat,sans-serif;font-weight:700;font-size:.82rem;color:var(--red)}

  /* reviews */
  .rev-sub{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted);font-size:.92rem}
  .rev-sub .g-stars{color:#f6a609;letter-spacing:.06em;font-size:1rem}
  .rev-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .rev-card{border:1px solid var(--line);padding:26px 24px;background:#fff;position:relative;display:flex;flex-direction:column;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:0 10px 26px #0d23400f;transition:transform .2s,box-shadow .2s,border-color .2s}
  .rev-card:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 24px 48px #0d234017}
  .rev-stars{color:#f6a609;letter-spacing:.14em;font-size:1.02rem;margin-bottom:14px}
  .rev-quote{color:var(--ink);font-size:.94rem;line-height:1.66;margin:0 0 20px;flex:1}
  .rev-person{display:flex;align-items:center;gap:12px;padding-top:18px;border-top:1px solid var(--line)}
  .rev-ini{width:40px;height:40px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:Montserrat,sans-serif;font-weight:800;font-size:.82rem;color:#fff;background:linear-gradient(135deg,var(--red),var(--red-dark))}
  .rev-person b{display:block;color:var(--navy);font-family:Montserrat,sans-serif;font-weight:700;font-size:.92rem}
  .rev-person small{display:block;color:var(--silver);font-size:.78rem;margin-top:2px}

  /* qualify section */
  .qualify{background:linear-gradient(120deg,var(--navy) 0%,var(--navy-2) 60%,var(--navy-3) 100%);position:relative;overflow:hidden}
  .qualify::before{content:"";position:absolute;top:0;bottom:0;left:-6%;width:30%;background:var(--red);opacity:.1;transform:skewX(-14deg)}
  .qualify-inner{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
  .qualify .lead h2{color:#fff;font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.06;margin:10px 0 16px}
  .qualify .lead p{color:#cdd6e4;font-size:1.02rem;margin-bottom:22px;line-height:1.6}
  .qualify .lead ul{list-style:none;display:flex;flex-direction:column;gap:12px}
  .qualify .lead li{display:flex;gap:.6rem;align-items:center;color:#e7ecf3;font-size:.98rem}
  .qualify .lead li svg{color:var(--red);flex-shrink:0}

  /* footer */
  footer.ft{background:#081426;color:#c3cede;padding:56px 0 30px}
  .ft-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:36px}
  .ft-logo img{height:38px;margin-bottom:16px}
  .ft h4{color:#fff;font-size:.95rem;margin-bottom:14px;font-family:Montserrat,sans-serif}
  .ft a,.ft p{color:#9fb0c6;font-size:.9rem;display:block;margin-bottom:9px}
  .ft a:hover{color:#fff}
  .ft-bottom{border-top:1px solid #ffffff14;padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.8rem;color:#7488a1}

  /* concept badge */

  /* reveal */
  [data-rev]{opacity:0;transform:translateY(22px);transition:opacity .7s,transform .7s}
  [data-rev].vis{opacity:1;transform:none}

  @media(max-width:960px){
    /* Row gap 34px -> 48px so the stat badges get clear breathing room above
       the "See What You Qualify For" form card when the hero stacks (Nate,
       8/31). Desktop 2-col layout is unaffected. */
    .hero-inner{grid-template-columns:1fr;gap:48px}
    .form-card{justify-self:stretch;max-width:none}
    .band-inner,.qualify-inner{grid-template-columns:1fr;gap:32px}
    .inv-grid,.qp-grid,.rev-grid{grid-template-columns:repeat(2,1fr)}
    .ft-grid{grid-template-columns:1fr 1fr}
  }
  /* value props: below the point where a single row of icon+heading+paragraph
     items still reads comfortably, drop the horizontal strip for a plain,
     left-aligned list. Icon sits beside the text; items are divided by a
     horizontal hairline instead of the desktop's vertical ones. */
  @media(max-width:900px){
    .vp-grid{flex-direction:column;flex-wrap:nowrap}
    /* Flatten the desktop's row wrappers so all items form one continuous
       vertical list (display:contents drops the row's own box, including
       its divider/spacing, so only the per-item hairlines below apply). */
    .vp-row{display:contents}
    .vp{flex:1 1 auto;width:100%;text-align:left;border-left:none;border-top:1px solid var(--line);padding:22px 4px;display:flex;align-items:flex-start;gap:16px}
    .vp:first-child{border-top:none}
    /* .vp:first-child above also (wrongly) matches the item that starts the
       2nd desktop row, since it's structurally first-child of its own
       .vp-row. Restore its divider so the list reads as one flat run. */
    .vp-row:not(:first-child)>.vp:first-child{border-top:1px solid var(--line)}
    .vp .ic{margin:2px 0 0;flex:none}
    .vp .txt{flex:1 1 auto;min-width:0}
    .vp p{max-width:none;margin:0;text-align:left}
  }
  /* Staged nav collapse. The phone number and Get Approved CTA live in
     .nav-actions (separate from the collapsible .nav-links), so they stay
     visible next to the burger instead of hiding behind it.
     >992px : full nav (links + phone + Get Approved)
     <=992px: links collapse to burger; phone + Get Approved + burger remain
     <=560px: Get Approved CTA drops too; phone + burger remain (phone never hides) */
  @media(max-width:992px){
    .nav-links{display:none}
    .burger{display:block}
  }
  @media(max-width:560px){
    .nav-cta{display:none}
  }
  #mmenu.open{display:block!important}
  @media(max-width:640px){
    .inv-grid,.qp-grid,.rev-grid,.grid2,.stat-row{grid-template-columns:1fr}
    .stat-row{grid-template-columns:repeat(3,1fr)}
    /* Mobile footer: Shop + Company side-by-side, logo (row 1) and Visit Us
       (row 3) span full width below them. Nate, 9/1. */
    .ft-grid{grid-template-columns:1fr 1fr;gap:22px 28px}
    .ft-grid>div:nth-child(1),.ft-grid>div:nth-child(4){grid-column:1/-1}
    .trust{gap:16px}
    /* Tighten the gap above the hero copy on mobile: nudge content up ~25px
       (base .hero-inner top padding is 140px). Nate, 9/1. */
    .hero-inner{padding-top:115px}
  }

  /* ═══════════ INNER PAGES (About/Inventory/Finance/Contact/etc.) ═══════════ */
  /* Navy page header band, echoing the homepage hero texture + red slash. */
  .page-hero{position:relative;background:var(--navy);color:#fff;overflow:hidden;padding:130px 0 56px}
  .page-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(120% 85% at 82% 0%,#1e457655,transparent 62%),radial-gradient(circle at 1px 1px,#ffffff0a 1px,transparent 0);background-size:auto,34px 34px}
  .page-hero .slash{position:absolute;top:-24%;right:-6%;width:30%;height:150%;background:var(--red);opacity:.1;transform:skewX(-14deg)}
  .page-hero .wrap{position:relative}
  .page-hero h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.05;margin:8px 0 0;max-width:17ch}
  .page-hero .ph-rule{display:block;width:72px;height:5px;background:var(--red);transform:skewX(-14deg);border-radius:1px;margin:16px 0 0;box-shadow:0 4px 16px #e11b2255}
  .page-hero p.lede{color:#cdd6e4;font-size:1.1rem;max-width:620px;margin-top:20px;line-height:1.6}

  /* Two-column content block */
  .two-col{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
  .prose h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--navy);margin-bottom:16px;line-height:1.1}
  .prose p{color:var(--muted);margin-bottom:14px;line-height:1.7}
  .prose .cta-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px}

  /* Fact cards (About) */
  .fact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .fact{background:var(--bg-soft);border:1px solid var(--line);padding:26px 18px;text-align:center;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
  .fact .n{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.7rem;color:var(--red);line-height:1.05}
  .fact .t{font-size:.84rem;color:var(--muted);margin-top:6px}
  /* Real dealership pylon-sign photo (About page), replacing the trust-badge
     grid in the right column. Nate, 9/1. */
  .about-photo-fig{margin:0;justify-self:center;max-width:430px;width:100%;position:relative}
  .about-photo-fig::before{content:"";position:absolute;top:-12px;right:-12px;width:70px;height:70px;background:var(--red);opacity:.12;border-radius:5px;z-index:0}
  .about-photo{position:relative;z-index:1;width:100%;height:auto;display:block;border-radius:6px;box-shadow:0 26px 60px #00000045;border:1px solid var(--line)}
  .about-photo-cap{text-align:center;font-size:.82rem;color:var(--muted);margin-top:12px}

  /* Benefit list (Finance) */
  .benefit{display:flex;gap:14px;margin-bottom:20px}
  .benefit .bic{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--red)}
  .benefit h3{color:var(--navy);font-size:1.02rem;margin-bottom:3px}
  .benefit p{color:var(--muted);font-size:.9rem;line-height:1.55}

  /* Generic light card / calculator / info card */
  .card{background:#fff;border:1px solid var(--line);border-radius:4px;box-shadow:0 10px 26px #0d23400f}
  .calc{padding:26px}
  .calc h3{color:var(--navy);font-size:1.12rem;margin-bottom:18px}
  .calc-out{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;align-items:baseline;justify-content:space-between}
  .calc-out .amt{font-family:Montserrat,sans-serif;font-weight:800;font-size:2.1rem;color:var(--red);line-height:1}
  .calc-out .amt small{font-size:1rem;font-weight:600;color:var(--muted)}
  .calc .disc{font-size:.72rem;color:var(--muted);margin-top:12px;line-height:1.5}
  .ro-rate{width:100%;border:1px solid var(--line);border-radius:3px;padding:.72rem .85rem;font-size:.93rem;background:var(--bg-soft);display:flex;align-items:center;justify-content:space-between;color:var(--navy);font-family:Montserrat,sans-serif;font-weight:700;cursor:not-allowed}

  /* Info cards (Contact) */
  .info-card{background:#fff;border:1px solid var(--line);padding:18px 20px;display:flex;gap:14px;align-items:flex-start;transition:border-color .18s,transform .18s;clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
  .info-card:hover{border-color:var(--red);transform:translateY(-3px)}
  .info-card .ic2{flex-shrink:0;width:42px;height:42px;border-radius:8px;background:#e11b221a;color:var(--red);display:flex;align-items:center;justify-content:center}
  .info-card .lbl2{display:block;font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
  .info-card .val2{display:block;font-family:Montserrat,sans-serif;font-weight:700;color:var(--navy);font-size:1.02rem;margin-top:2px}
  .hours-row{display:flex;justify-content:space-between;font-size:.88rem;padding:4px 0}
  .hours-row .d{color:var(--muted)}
  .hours-row .h{color:var(--navy);font-weight:600}
  .map-embed{border:1px solid var(--line);border-radius:4px;overflow:hidden;aspect-ratio:16/10}
  .map-embed iframe{width:100%;height:100%;border:0;display:block}

  /* Inventory filter bar + tabs */
  .inv-tabs{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
  .inv-filter{background:#fff;border:1px solid var(--line);border-radius:4px;padding:18px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:14px;align-items:end;box-shadow:0 10px 26px #0d23400f;margin-bottom:22px}
  .inv-meta{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:.9rem;color:var(--muted)}
  .inv-empty{text-align:center;padding:70px 0}
  .inv-empty h3{color:var(--navy);font-size:1.3rem;margin-bottom:8px}
  .inv-empty p{color:var(--muted);margin-bottom:18px}

  /* Centered single-form page wrapper */
  .form-narrow{max-width:760px;margin:0 auto}
  /* On a single-form page the card is not in the homepage two-column grid, so the
     hero-form defaults (justify-self:end + max-width:430px) would jam it left and
     narrow. Reset them here so the card fills the wrapper and stays centered. */
  .form-narrow .form-card{margin-top:0;max-width:none;width:100%;justify-self:auto;margin-left:auto;margin-right:auto}
  .form-sub{color:var(--muted);font-size:.92rem;margin-bottom:4px}
  .fld-group-title{font-family:Montserrat,sans-serif;font-weight:700;color:var(--navy);margin:6px 0 12px;font-size:1rem}
  .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

  @media(max-width:900px){
    .two-col{grid-template-columns:1fr;gap:32px}
    .inv-filter{grid-template-columns:1fr 1fr}
  }
  @media(max-width:640px){
    .fact-grid{grid-template-columns:1fr 1fr}
    .inv-filter{grid-template-columns:1fr}
    .grid3{grid-template-columns:1fr}
  }


  /* Active nav link (current page) */
  .nav-links a.link.active{color:#fff}
  .nav-links a.link.active::after{transform:scaleX(1)}

  /* 3-up card grid for inner pages */

  /* ── Trust stats band (restored) ── */
  .trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .trust-row .stat{padding:26px 16px}
  .trust-row .stat .n{font-size:2.5rem;color:#fff}
  .trust-row .stat .n em{color:var(--red);font-style:normal;margin-left:1px}
  .trust-row .stat .t{color:var(--silver-2);font-size:.78rem}
  @media(max-width:640px){.trust-row{grid-template-columns:repeat(2,1fr);gap:14px}.trust-row .stat .n{font-size:2.1rem}}

  /* ── Why Choose / What Sets Us Apart (restored) ── */
  .feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
  .feat{background:var(--line);padding:30px 24px;position:relative;transition:transform .2s,background .2s;clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%)}
  .feat::before{content:"";position:absolute;inset:1px;background:#fff;z-index:0;clip-path:polygon(0 0,100% 0,100% calc(100% - 15px),calc(100% - 15px) 100%,0 100%)}
  .feat>*{position:relative;z-index:1}
  .feat:hover{transform:translateY(-6px);background:#cdd7e6}
  .feat .ico{width:54px;height:54px;display:grid;place-items:center;background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;margin-bottom:18px;clip-path:polygon(0 0,100% 0,100% calc(100% - 11px),calc(100% - 11px) 100%,0 100%);box-shadow:0 10px 22px #e11b2233}
  .feat .ico svg{width:26px;height:26px}
  .feat h3{color:var(--navy);font-size:1.12rem;margin-bottom:9px}
  .feat p{color:var(--muted);font-size:.93rem;line-height:1.65}
  @media(max-width:960px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.feat-grid{grid-template-columns:1fr}}

  /* ── Inventory card CTA buttons (restored outline Finance/Test Drive) ── */
  .car{display:flex;flex-direction:column}
  .car .car-media,.car .car-head{display:block;color:inherit;text-decoration:none}
  .car .info{display:flex;flex-direction:column;flex:1}
  .car-cta{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
  .car-cta .btn-sm{padding:.58rem .7rem;font-size:.82rem;width:100%;justify-content:center}
  .car-cta .btn-ghost{--oc:var(--navy);color:var(--navy)}
  .car-cta .btn-ghost:hover{--oc:var(--red);color:var(--red);background:#e11b2208}
  .car-cta .btn-outline{--oc:var(--navy);color:var(--navy)}
  .car-cta .btn-outline:hover{--oc:var(--red);color:var(--red);background:#e11b2208}

  /* ── 3-up feature card grid (car-finder / trade-in explainers) ── */
  .grid3-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  @media(max-width:840px){.grid3-cards{grid-template-columns:1fr}}

  /* ── Q&A / FAQ two-up (trade-in explainer) ── */
  .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 40px}
  .qa-item h3{color:var(--navy);font-size:1.15rem;margin-bottom:8px;font-family:Montserrat,sans-serif}
  .qa-item p{color:var(--muted);line-height:1.7}
  @media(max-width:760px){.qa-grid{grid-template-columns:1fr;gap:22px}}

/* ============ Vehicle Detail Page ============ */
.vd-crumb{padding:92px 0 18px}
.vd-crumb .wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-family:Montserrat,sans-serif;font-size:.78rem;font-weight:600;color:var(--muted);letter-spacing:.02em}
.vd-crumb a{color:var(--muted);text-decoration:none}
.vd-crumb a:hover{color:var(--red)}
.vd-crumb .sep{color:var(--silver)}
.vd-crumb .cur{color:var(--navy)}
.vd-top{padding:22px 0 40px}
/* minmax(0,..) + min-width:0 are load-bearing (2026-10-05): a grid track's
   default minimum is its content's width, and the thumbnail strip is one long
   flex row (13-17 photos = 1300-1700px), so plain 1.35fr let it blow the gallery
   column (and the main photo with it) far past the viewport on every page with
   photos. Never drop them. */
.vd-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:38px;align-items:start}
.vd-gallery{position:relative;min-width:0}
.vd-main{position:relative;aspect-ratio:16/9;max-height:72vh;background:#0d2340;border-radius:6px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.vd-badge{position:absolute;top:14px;left:14px;background:var(--red);color:#fff;font-family:Montserrat,sans-serif;font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .7rem;border-radius:3px;z-index:3}
.vd-nav{position:absolute;top:50%;z-index:3;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;background:#0d2340b3;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .18s;-webkit-tap-highlight-color:transparent}
.vd-nav:hover,.vd-nav:focus-visible{background:var(--red)}
.vd-nav svg{width:22px;height:22px}
.vd-prev{left:12px}.vd-next{right:12px}
.vd-count{position:absolute;left:14px;bottom:12px;z-index:3;background:#0d2340b3;color:#fff;font-family:Montserrat,sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.03em;padding:.28rem .6rem;border-radius:3px;pointer-events:none}
.vd-count b{font-weight:800}
.vd-thumbs{position:relative;display:flex;gap:8px;margin-top:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;scroll-behavior:smooth;overscroll-behavior-x:contain}
.vd-thumb{flex:0 0 96px;aspect-ratio:16/9;border-radius:4px;overflow:hidden;border:2px solid transparent;cursor:pointer;padding:0;background:#0d2340;opacity:.72;transition:opacity .18s,border-color .18s}
.vd-thumb:hover,.vd-thumb.active{opacity:1}
.vd-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.vd-thumb.active{border-color:var(--red)}
@media(max-width:560px){.vd-thumb{flex-basis:78px}.vd-nav{width:36px;height:36px;margin-top:-18px}.vd-prev{left:8px}.vd-next{right:8px}}
.vd-summary .eyebrow{color:var(--red)}
.vd-title{font-family:Montserrat,sans-serif;font-weight:800;font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.12;color:var(--navy);margin:.35rem 0 .5rem}
.vd-price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.vd-price .amt{font-family:Montserrat,sans-serif;font-weight:800;font-size:2rem;color:var(--red)}
.vd-price .note{font-size:.82rem;color:var(--muted)}
.vd-addons-note{font-size:.82rem;color:var(--muted);margin:-10px 0 16px;display:flex;align-items:center;gap:6px}
.vd-addons-note::before{content:"\2713";color:var(--red);font-weight:700}
.vd-quick{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0}
.vd-quick .q{background:var(--bg-soft);border:1px solid var(--line);border-radius:5px;padding:.6rem .7rem}
.vd-quick .q .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:Montserrat,sans-serif;font-weight:700}
.vd-quick .q .v{font-size:.95rem;color:var(--navy);font-weight:600;margin-top:2px}
.vd-cta{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.vd-cta .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.vd-est{background:#0d2340;border-radius:6px;padding:18px;margin-top:18px;color:#e7ecf3}
.vd-est h4{font-family:Montserrat,sans-serif;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;color:var(--silver-2);margin:0 0 12px}
.vd-est .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vd-est label{display:block;font-size:.72rem;color:var(--silver-2);margin-bottom:4px;font-family:Montserrat,sans-serif;font-weight:600}
.vd-est select{width:100%;padding:.5rem .6rem;border-radius:4px;border:1px solid #ffffff26;background:#16335c;color:#fff;font-size:.9rem}
.vd-est .estval{margin-top:14px;display:flex;align-items:baseline;gap:8px}
.vd-est .estval b{font-family:Montserrat,sans-serif;font-size:1.5rem;color:#fff}
.vd-est .estval span{font-size:.78rem;color:var(--silver-2)}
.vd-est .disc{font-size:.68rem;color:var(--silver);margin-top:10px;line-height:1.5}
/* Read-only vehicle price row, above the Down Payment select (Nate, 9/1):
   same dark-box treatment as the selects — light divider, label style reused
   from .vd-est label so it reads as part of the calculator, not an input. */
.vd-est .estprice{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:8px 0 10px;margin-bottom:12px;border-bottom:1px solid #ffffff1f}
.vd-est .estprice .k{font-size:.72rem;color:var(--silver-2);font-family:Montserrat,sans-serif;font-weight:600}
.vd-est .estprice .v{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.1rem;color:#fff}
/* "Get Financing" relocated from the top button group to below the $/mo
   estimate (Nate, 9/1). btn-outline inside the dark .vd-est box needs the
   light ring treatment (like .vd-est select's border) so it reads on navy. */
.vd-est .est-fin{margin-top:14px;justify-content:center;width:100%}
.vd-est .est-fin{--oc:#ffffff8c;color:#fff}
.vd-est .est-fin:hover{--oc:#fff;background-color:#ffffff12}
.vd-specs-sec{padding:10px 0 60px}
.vd-specs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#fff}
.vd-specs .sp{display:flex;flex-direction:column;gap:2px;padding:.9rem 1.1rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line)}
.vd-specs .sp .k{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-family:Montserrat,sans-serif;font-weight:700}
.vd-specs .sp .v{font-size:.98rem;color:var(--navy);font-weight:600}
.vd-inquire{max-width:760px;margin:0 auto}
/* The form-card defaults (max-width:430px) come from the homepage hero grid; inside
   the vd-inquire block wrapper they left-align the card. Same reset as .form-narrow
   uses on the single-form pages, so the card fills the wrapper and stays centered. */
.vd-inquire .form-card{max-width:none;width:100%;justify-self:auto}
@media(max-width:900px){.vd-grid{grid-template-columns:minmax(0,1fr);gap:26px}.vd-specs{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.vd-quick{grid-template-columns:1fr 1fr}.vd-specs{grid-template-columns:1fr}}

/* ============ Top utility bar + EN/ES language picker (restored) ============ */
.topbar{background:#000;border-bottom:1px solid #ffffff1a}
.topbar-inner{height:43px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.tb-addr{display:inline-flex;align-items:center;gap:.5rem;color:#ffffffc2;font-size:.95rem;font-weight:500;min-width:0;text-decoration:none;transition:color .18s}
.tb-addr:hover{color:#fff}
.tb-addr svg{width:17px;height:17px;color:var(--red);flex:0 0 auto}
.tb-addr span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-right{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.lang-pick{display:inline-flex;align-items:center;border:1px solid #ffffff33;border-radius:3px;overflow:hidden}
.lang-pick button,.lang-pick a{font-family:Montserrat,sans-serif;font-weight:700;font-size:.85rem;letter-spacing:.02em;color:#e7ecf3;background:transparent;border:0;padding:.4rem .72rem;cursor:pointer;line-height:1;transition:background .18s,color .18s;text-decoration:none;display:inline-block}
.lang-pick button+button,.lang-pick a+a{border-left:1px solid #ffffff33}
.lang-pick button.active,.lang-pick a.active{background:var(--red);color:#fff}
.lang-pick button:hover:not(.active),.lang-pick a:hover:not(.active){background:#ffffff14;color:#e7ecf3}
.tb-social{display:flex;align-items:center;gap:3px}
.tb-social a{width:32px;height:32px;display:grid;place-items:center;border-radius:4px;color:#ffffffbf;transition:background .18s,color .18s}
.tb-social a:hover{background:var(--red);color:#fff}
.tb-social svg{width:17px;height:17px}
@media(min-width:768px){.topbar-inner{gap:22px}.tb-addr{font-size:1.05rem}.tb-addr svg{width:19px;height:19px}.tb-right{gap:18px}.lang-pick button,.lang-pick a{font-size:.92rem;padding:.46rem .85rem}.tb-social a{width:36px;height:36px}.tb-social svg{width:19px;height:19px}}
@media(max-width:560px){.tb-addr span{display:none}.tb-addr::after{content:"Directions";white-space:nowrap;font-size:.95rem;font-weight:500;color:inherit;line-height:1}.topbar-inner{gap:10px}}
html[lang="es"] .tb-addr::after{content:"Cómo llegar"}

/* ============ Reviews auto-scroll carousel (gentle marquee) ============ */
.rev-carousel{position:relative;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.rev-track{display:flex;gap:22px;width:max-content;animation:rev-marquee 64s linear infinite;will-change:transform}
.rev-carousel:hover .rev-track{animation-play-state:paused}
.rev-track .rev-card{flex:0 0 340px;width:340px}
@keyframes rev-marquee{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 11px))}}
@media(max-width:560px){.rev-track .rev-card{flex-basis:280px;width:280px}.rev-track{animation-duration:48s}}
@media(prefers-reduced-motion:reduce){.rev-track{animation:none;flex-wrap:wrap;width:auto}}


/* Hero CTA: fully clean, flat red button. No red glow halo (box-shadow).
   (The diagonal light-sweep shine/lens-flare pseudo-element was removed
   sitewide from the base .btn rule, so no per-section override is needed here.) */
.hero-ctas .btn-red,.hero-ctas .btn-red:hover{box-shadow:none;background:var(--red)}

/* Anchor jumps (#qualify, #inquire, #apply) land below the sticky nav via the
   global html{scroll-padding-top} above — no per-anchor scroll-margin needed. */

/* ============ Finance CTA card (replaces top pre-qualify form; button scrolls to #apply) ============ */
.cta-card-body{padding:24px 26px 26px}
.cta-points{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:14px}
.cta-points li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink);line-height:1.45}
.cta-points li svg{flex:0 0 auto;width:22px;height:22px;color:var(--red);margin-top:1px}
.cta-apply-btn{width:100%;justify-content:center;padding:.95rem}
.cta-note{text-align:center;color:var(--muted);font-size:.78rem;margin-top:14px}

/* ============ Vehicle detail page: dark nav over the light breadcrumb ============
   Detail pages open with a white .vd-crumb (no dark hero), so the transparent
   nav went white-on-white. Force a solid dark bar there (logo/CTA/burger stay
   visible), matching the rest of the site. */
body:has(.vd-crumb) header.nav{background:#0b1d36}
/* "Get Financing" outline button sits on a white card: give it navy ink/ring
   so it reads (same fix as the inventory Finance card button). */
.vd-cta .btn-outline{--oc:var(--navy);color:var(--navy)}
.vd-cta .btn-outline:hover{--oc:var(--red);color:var(--red);background:#e11b2208}
/* Book Test Drive + WhatsApp are .btn-ghost, which defaults to a faint --line
   border, so they looked unbordered next to Get Financing's navy outline.
   Match them to the same navy border/hover treatment. */
.vd-cta .btn-ghost{--oc:var(--navy);color:var(--navy)}
.vd-cta .btn-ghost:hover{--oc:var(--red);color:var(--red);background:#e11b2208}

/* "Back to Inventory" link at the bottom of the vehicle detail page: keeps
   the site's normal cut-corner notch (same clip-path ring as Get Financing /
   Book Test Drive, inherited from .btn-ghost::after) but was invisible
   against the light page background with the default faint --line border.
   Just darken the border/text to navy (red on hover) for contrast. */
.btn-flat-back{--oc:var(--navy);color:var(--navy)}
.btn-flat-back:hover{--oc:var(--red);color:var(--red)}

/* ============ Mobile menu: overlay (no content push) + dim backdrop + contrast ============
   Was in-flow inside the sticky header, so opening it grew the header, pushed the
   hero down, and left the transparent bar over white. Now it's an absolute overlay
   dropping below the nav (no push), the page dims behind it, and the bar goes dark. */
#mmenu{position:absolute;top:100%;left:0;right:0;z-index:5;max-height:80vh;overflow-y:auto;box-shadow:0 24px 48px #00000055}
.mmenu-backdrop{position:fixed;inset:0;background:#050d1acc;z-index:40;opacity:0;visibility:hidden;transition:opacity .25s ease}
.mmenu-backdrop.show{opacity:1;visibility:visible}
body.mmenu-open{overflow:hidden}
body.mmenu-open header.nav{background:#0b1d36;box-shadow:0 2px 20px #00000045}

/* ============ Inventory pagination ============ */
.inv-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin:30px 0 6px}
.inv-pager .pg-btn{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);background:#fff;color:var(--navy);
  font-family:Montserrat,sans-serif;font-weight:700;font-size:.9rem;border-radius:10px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.inv-pager .pg-btn.pg-end{font-size:.82rem}
.inv-pager .pg-btn:hover:not(:disabled):not(.is-active){border-color:var(--navy);background:#f4f7fb}
.inv-pager .pg-btn.is-active{background:var(--navy);border-color:var(--navy);color:#fff;cursor:default}
.inv-pager .pg-btn:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:520px){.inv-pager .pg-btn{min-width:36px;height:36px;padding:0 9px;font-size:.85rem}}

/* ═══════════ BRANDS WE CARRY — auto-scrolling logo strip ═══════════ */
.brands-sec{background:#fff;padding-top:66px;padding-bottom:70px;overflow:hidden}
.brands-head{max-width:none;text-align:center;margin-bottom:36px}
.brands-sub{max-width:560px;margin:14px auto 0;color:var(--muted);font-size:.98rem}
.brands-carousel{position:relative;overflow:hidden;padding:6px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.brand-track{display:flex;align-items:center;gap:0;width:max-content;animation:brand-marquee 52s linear infinite;will-change:transform}
.brands-carousel:hover .brand-track{animation-play-state:paused}
.brand-item{flex:0 0 auto;width:158px;height:92px;display:flex;align-items:center;justify-content:center;padding:0 14px}
.brand-item img{max-width:108px;max-height:44px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.48;transition:filter .32s ease,opacity .32s ease,transform .32s ease}
.brand-item:hover img{filter:none;opacity:1;transform:scale(1.07)}
@keyframes brand-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(max-width:640px){
  .brands-sec{padding-top:52px;padding-bottom:54px}
  .brand-item{width:126px;height:78px;padding:0 11px}
  .brand-item img{max-width:86px;max-height:38px;opacity:.55}
  .brand-track{animation-duration:38s}
}
@media(prefers-reduced-motion:reduce){
  .brand-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;row-gap:12px}
  .brands-carousel{-webkit-mask-image:none;mask-image:none}
}

/* ═══════════ NEW HOMEPAGE SECTIONS (Nate, 9/1) ═══════════ */

/* Hero ambient brand logos: same manufacturer marks ghosted low-contrast into
   the hero bottom. Decorative trust signaling, NOT a second brand section.
   Lives as a full-width last child of .hero-inner (grid-column:1/-1). */
.hero-brands{grid-column:1/-1;position:relative;z-index:2;width:100%;margin-top:42px;padding-top:24px;border-top:1px solid rgba(255,255,255,.09);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px 40px}
.hero-brands img{height:23px;width:auto;filter:brightness(0) invert(1);opacity:.14;transition:opacity .3s}
.hero-brands img:hover{opacity:.34}
@media(max-width:900px){.hero-brands{gap:18px 30px;margin-top:34px}.hero-brands img{height:20px;opacity:.17}}
@media(max-width:560px){.hero-brands{margin-top:28px;padding-top:18px;gap:15px 22px}.hero-brands img{height:17px}}

/* Shop by Body Style tiles */
.bodystyle-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.bs-tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:22px 20px 24px;background:#fff;border:1px solid var(--line);text-decoration:none;position:relative;clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,0 100%);box-shadow:0 10px 26px #0d23400f;transition:transform .2s,box-shadow .2s,border-color .2s}
.bs-tile:hover{transform:translateY(-6px);border-color:var(--red);box-shadow:0 24px 48px #0d234017}
.bs-photo{width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;margin-bottom:4px}
.bs-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.bs-tile:hover .bs-photo img{transform:scale(1.05)}
.bs-name{font-family:Montserrat,sans-serif;font-weight:700;font-size:1.06rem;color:var(--navy)}
.bs-count{font-size:.82rem;color:var(--muted)}
.bs-count strong{color:var(--red);font-weight:800}
@media(max-width:760px){.bodystyle-grid{grid-template-columns:repeat(2,1fr);gap:15px}.bs-tile{padding:26px 14px 22px}}

/* Shop by Brand clickable grid (distinct from the passive scrolling logo strip) */
.brandshop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px}
.brandshop-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:22px 14px;background:#fff;border:1px solid var(--line);border-radius:4px;text-decoration:none;transition:transform .18s,box-shadow .2s,border-color .2s;box-shadow:0 8px 20px #0d23400d}
.brandshop-tile:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 20px 40px #0d234015}
/* Definite width+height on the box so brand SVGs that ship without intrinsic
   width/height (the 24x24 simple-icons: Ford, BMW, etc.) still resolve a size. */
.bt-logo{width:100%;height:44px;display:flex;align-items:center;justify-content:center}
.bt-logo img{max-height:40px;max-width:112px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter .28s,opacity .28s}
.brandshop-tile:hover .bt-logo img{filter:none;opacity:1}
.bt-word{font-family:Montserrat,sans-serif;font-weight:800;font-size:1.08rem;letter-spacing:.02em;color:var(--navy);text-transform:uppercase}
.bt-count{font-size:.78rem;color:var(--muted);font-weight:600}
.bt-count strong{color:var(--red);font-weight:800}
@media(max-width:560px){.brandshop-grid{grid-template-columns:repeat(3,1fr);gap:11px}.brandshop-tile{padding:16px 8px}.bt-logo{height:34px}.bt-logo img{max-height:32px;max-width:78px}.bt-word{font-size:.86rem}}

/* Shop Inventory banner (big CTA, content constrained to .wrap so it never overflows our width) */
.shopbanner{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.shopbanner::before{content:"";position:absolute;inset:0;background-image:radial-gradient(120% 90% at 50% 0%,#1e457666,transparent 60%),radial-gradient(circle at 1px 1px,#ffffff0a 1px,transparent 0);background-size:auto,34px 34px}
.shopbanner .slash{position:absolute;top:-30%;right:-4%;width:26%;height:160%;background:var(--red);opacity:.12;transform:skewX(-14deg)}
.shopbanner-inner{position:relative;text-align:center;max-width:720px;margin:0 auto;padding:8px 0}
.shopbanner h2{font-size:clamp(1.95rem,3.8vw,2.9rem);line-height:1.05;margin:12px 0 16px}
.shopbanner h2 .accent{color:var(--red)}
.shopbanner p{color:#c7d1e0;font-size:1.06rem;line-height:1.6;max-width:540px;margin:0 auto 28px}
.shopbanner .cta-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center}

/* ── Photo frames (2026-10-05) ──────────────────────────────────────────────
   Shared by the vehicle detail gallery (.vd-main) and the listing cards
   (.car .ph). The dealership's IDMS photos come in mixed shapes (4:3 promo
   graphics with text to the edges, 16:9 lot photos, portrait placeholders), so
   the frame keeps a fixed aspect and shows the WHOLE image (contain) over a
   blurred, darkened copy of itself. Any size or orientation looks deliberate,
   nothing is cropped, nothing can push the layout. Markup comes from
   scripts/gen-inventory.mjs (img.ph-fill + img.ph-fit). */
.ph-fill,.ph-fit{position:absolute;inset:0;width:100%;height:100%;display:block}
.ph-fill{object-fit:cover;transform:scale(1.18);filter:blur(18px) brightness(.62) saturate(1.1);pointer-events:none}
.ph-fit{object-fit:contain;z-index:1}
.ph-fit.is-default{object-fit:cover}

  /* ═══════════ LEGAL PAGES (2026-11-03) ═══════════ */
  /* Privacy Policy, Electronic Disclosure, Federal/State Notices, Accessibility
     Statement: DealerFront's text carried over verbatim in its own table layout
     (cutover/legal-capture/). Only the look is ours. */
  .legal{max-width:940px;margin:0 auto;color:var(--ink);font-size:.95rem;line-height:1.65;overflow-wrap:break-word}
  .legal table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);margin:0 0 26px;box-shadow:0 10px 26px #0d23400f}
  .legal td{border:1px solid var(--line);padding:14px 18px;vertical-align:top;text-align:left}
  .legal td.lbl{width:30%;background:var(--bg-soft)}
  .legal h3,.legal h4{font-family:Montserrat,sans-serif;font-weight:700;color:var(--navy);font-size:1rem;line-height:1.35;letter-spacing:0}
  .legal h3{font-size:1.15rem}
  .legal h5{font-size:1rem;font-weight:500;line-height:1.6;color:var(--ink)}
  .legal tr.sec td,.legal thead td{background:var(--navy);color:#fff;border-color:var(--navy)}
  .legal tr.sec h4,.legal thead h4,.legal thead strong{color:#fff}
  .legal strong{color:var(--navy);font-weight:600}
  .legal p{margin:0 0 10px}
  .legal p:last-child{margin-bottom:0}
  .legal ul{margin:8px 0 10px 20px}
  .legal li{margin:3px 0}
  .legal a{color:var(--red);text-decoration:underline}
  .legal td.mk{width:17%;text-align:center;vertical-align:middle;font-size:1.15rem;font-weight:700}
  .legal td.mk.y{color:#16a34a}
  .legal td.mk.n{color:var(--red)}
  .legal-chart thead td:not(:first-child){text-align:center;vertical-align:middle;font-size:.86rem}
  @media(max-width:640px){
    .legal{font-size:.9rem}
    .legal td{padding:12px 13px}
    .legal table.stack,.legal table.stack tbody,.legal table.stack tr,.legal table.stack td{display:block;width:100%}
    .legal table.stack td{border-width:0 0 1px}
    .legal table.stack tr:last-child td:last-child{border-bottom:0}
    .legal td.mk{width:23%}
    .legal-chart thead td:not(:first-child){font-size:.76rem}
  }
  /* Footer legal links + the Privacy Policy link in every form's consent line */
  .ft-legal{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin:-14px 0 22px}
  .ft .ft-legal a{display:inline;margin:0;font-size:.82rem}
  .ft-legal-note{font-size:.78rem;color:#7488a1}
  .consent-link{color:inherit;font-weight:600;text-decoration:underline}