/* Dealix Auto Group — shared stylesheet for every page. */

  /* ---------- Design tokens ----------
     Chosen with the ui-ux-pro-max skill: editorial-grid-magazine style (fits an
     independent, honest, no-pressure dealer better than the skill's raw
     "Automotive/Car Dealership" default, which biases toward a flashy
     motion-driven big-brand showroom look — deliberately not used). Palette
     blends the skill's Automotive and Luxury/Premium matches, kept close to
     Dealix's existing brass identity rather than switching to a generic
     dealership red or navy. Typography keeps Cormorant Garamond (already the
     brand's display face) and swaps the body from Manrope to Inter, the
     skill's paired body font for this style. Two brass tones exist on purpose:
     --brass for large/decorative use (icons, big prices — 3:1 is enough),
     --brass-text for small body-size text (labels, links — needs 4.5:1). */
  :root{
    --ground:#faf7f1; --surface:#ffffff; --raised:#f3efe4; --line:#e7ddc9; --line-strong:#d6c9a8;
    --ink:#221d14; --ink-muted:#6a5f4c; --ink-faint:#9a8e78; --label:#5b5142;
    --brass:#a9843a; --brass-text:#7a5c28; --brass-hover:#8f6f30; --brass-ink:#1a1408;
    --good:#3f7d4a; --plate:#f7d400;

    /* dark bookend surfaces — nav, hero photo, footer */
    --dark:#171209; --dark-line:#2c2415;
    --cream:#f8f2e4; --cream-muted:rgba(248,242,228,.66); --brass-on-dark:#c9a24a;

    --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
    --body:"Inter","Helvetica Neue",Arial,sans-serif;
    --radius:8px; --max:1180px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth;color-scheme:light}
  body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  a{color:inherit}
  img,svg{max-width:100%}
  h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;margin:0;text-wrap:balance;letter-spacing:-0.01em}
  h1{font-size:clamp(2.6rem,6vw,5rem)}
  h2{font-size:clamp(2rem,4vw,3.1rem)}
  h3{font-size:1.35rem}
  p{margin:0}
  .wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
  .eyebrow{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass-text);font-weight:600}
  .muted{color:var(--ink-muted)}
  .num{font-variant-numeric:tabular-nums}
  section{padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--line)}
  .tint{background:var(--raised)}
  .sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:40px}
  .sec-head p{max-width:46ch}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--radius);font-weight:600;font-size:.92rem;text-decoration:none;border:1px solid transparent;cursor:pointer;font-family:inherit;transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
  .btn-brass{background:var(--brass);color:var(--brass-ink);border-color:var(--brass)}
  .btn-brass:hover{background:var(--brass-hover)}
  .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
  .btn-ghost:hover{border-color:var(--brass);color:var(--brass-text)}
  .btn-ghost-invert{background:transparent;color:var(--cream);border-color:rgba(248,242,228,.35)}
  .btn-ghost-invert:hover{border-color:var(--brass-on-dark);color:var(--brass-on-dark)}
  .btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

  /* nav — stays on the dark palette regardless of scroll position, echoing the footer */
  nav.main{position:sticky;top:0;z-index:20;background:rgba(23,18,9,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--dark-line)}
  nav.main .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:14px}
  .logo{display:flex;align-items:center;gap:12px;text-decoration:none}
  .logo-mark{width:38px;height:38px;border:1.5px solid var(--brass-on-dark);border-radius:4px;display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--brass-on-dark);font-size:1.3rem}
  .logo-word{font-family:var(--display);font-size:1.45rem;font-weight:600;letter-spacing:.01em;line-height:1;color:var(--cream)}
  .logo-word small{display:block;font-family:var(--body);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-muted);font-weight:600;margin-top:3px}
  .navlinks{display:flex;gap:22px;list-style:none;margin:0;padding:0}
  .navlinks a{white-space:nowrap;text-decoration:none;font-size:.9rem;font-weight:500;color:var(--cream-muted)}
  .navlinks a:hover{color:var(--cream)}
  .navlinks a[aria-current="page"]{color:var(--cream);text-decoration:underline;text-decoration-color:var(--brass-on-dark);text-underline-offset:6px;text-decoration-thickness:2px}
  .nav-cta{display:flex;gap:10px;align-items:center}
  .menu-btn{display:none;background:none;border:1px solid var(--dark-line);color:var(--cream);border-radius:var(--radius);padding:8px 10px;cursor:pointer}
  @media (max-width:1200px){
    .navlinks{display:none;position:absolute;top:100%;left:0;right:0;background:var(--dark);flex-direction:column;gap:0;border-bottom:1px solid var(--dark-line)}
    .navlinks.open{display:flex}
    .navlinks li a{display:block;padding:14px clamp(16px,4vw,40px);border-top:1px solid var(--dark-line)}
    .menu-btn{display:inline-flex}
    .nav-cta .btn-ghost-invert{display:none}
  }

  /* hero — full-bleed placeholder "forecourt" gradient stands in for a real
     photo of 163 Victoria Road. Swap .hero-media's background for
     url(hero.jpg) center/cover (or similar) once a real photo exists. */
  .hero{border-top:0;padding-block:clamp(64px,9vw,120px) clamp(48px,6vw,80px);position:relative;overflow:hidden;color:var(--cream)}
  .hero-media{position:absolute;inset:0;z-index:0;background:
    radial-gradient(120% 90% at 12% -10%,rgba(201,162,74,.30),transparent 55%),
    radial-gradient(90% 70% at 88% 105%,rgba(23,18,9,.9),transparent 60%),
    repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 68px),
    linear-gradient(160deg,#2c2413,#14100a 75%)}
  .hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,5,.2),rgba(15,11,5,.85) 78%)}
  .hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:end}
  .pill{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(248,242,228,.35);color:var(--cream);background:rgba(248,242,228,.07);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:8px 16px;border-radius:999px}
  .hero h1{margin-top:20px}
  .hero h1 em{font-style:italic;color:var(--brass-on-dark);display:block}
  .hero-lede{font-size:1.15rem;color:var(--cream-muted);max-width:46ch;margin-top:20px}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  .facts{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:0 24px 60px rgba(10,8,3,.35)}
  .fact{padding:18px 20px;border-top:1px solid var(--line)}
  .fact:first-child{border-top:0}
  .fact .lbl{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:600}
  .fact .val{font-size:1.05rem;font-weight:600;margin-top:4px;color:var(--ink)}
  .fact .val a{text-decoration:none;color:inherit}
  .fact .val a:hover{color:var(--brass-text)}
  .open-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--good);margin-right:8px;vertical-align:middle}
  @media (max-width:880px){.hero .wrap{grid-template-columns:1fr}}

  /* trust strip */
  .strip{border-top:1px solid var(--line);background:var(--raised)}
  .strip .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding-block:22px}
  .strip div{display:flex;gap:12px;align-items:center;font-size:.9rem;color:var(--ink-muted)}
  .strip svg{width:22px;height:22px;flex:none;stroke:var(--brass);fill:none;stroke-width:1.6}
  @media (max-width:880px){.strip .wrap{grid-template-columns:1fr 1fr}}
  @media (max-width:480px){.strip .wrap{grid-template-columns:1fr}}

  /* stock */
  .filters{display:grid;grid-template-columns:repeat(4,1fr) auto;gap:12px;align-items:end;margin-bottom:28px}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--label);font-weight:600}
  .field select,.field input,.field textarea{background:var(--raised);border:1px solid var(--line-strong);color:var(--ink);border-radius:var(--radius);padding:11px 12px;font:inherit;font-size:.95rem;width:100%}
  .field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
  .count{font-size:.9rem;color:var(--ink-muted);padding-bottom:12px;white-space:nowrap}
  @media (max-width:880px){.filters{grid-template-columns:1fr 1fr}.count{grid-column:1/-1;padding-bottom:0}}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  @media (max-width:980px){.grid{grid-template-columns:1fr 1fr}}
  @media (max-width:600px){.grid{grid-template-columns:1fr}}
  .car{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s;cursor:pointer}
  .car:hover{border-color:var(--brass);transform:translateY(-2px);box-shadow:0 16px 32px rgba(20,16,8,.08)}
  .car-more{font-size:.82rem;font-weight:600;color:var(--brass-text);text-decoration:none}
  .car-more:hover{text-decoration:underline}
  .car-img{aspect-ratio:4/3;max-width:100%;background:linear-gradient(160deg,#27231d,#141210);position:relative;display:grid;place-items:center}
  .car-img svg{width:70%;height:auto;opacity:.9}
  .car-img .tag{position:absolute;top:12px;left:12px;background:var(--brass);color:var(--brass-ink);font-size:.66rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px;border-radius:3px}
  .car-img .photo{position:absolute;bottom:10px;right:12px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(248,242,228,.55)}
  .car-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 60%;cursor:pointer}
  .car-img .count{position:absolute;bottom:10px;right:12px;background:rgba(15,12,7,.75);color:var(--cream);font-size:.7rem;padding:3px 8px;border-radius:3px}
  .car.sold .car-img img,.car.sold .car-img svg{opacity:.35;filter:grayscale(1)}
  .car.sold .price{color:var(--ink-faint);text-decoration:line-through}
  .car-img .tag.status{background:var(--ink);color:var(--ground)}
  .car-img .tag.status.reserved{background:#d98b3a;color:var(--brass-ink)}
  .chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
  .chips li{background:var(--raised);border:1px solid var(--line);color:var(--ink-muted);font-size:.78rem;font-weight:500;padding:5px 11px;border-radius:999px;white-space:nowrap}
  .chips li.chip-ulez{color:var(--brass-text);border-color:var(--brass);background:rgba(169,132,58,.08)}

  /* car detail view (?car=<id>) — replaces the old modal */
  html.car-route #stock .sec-head, html.car-route #stock .filters, html.car-route #grid{display:none}
  #stock.detail-mode .sec-head, #stock.detail-mode .filters, #stock.detail-mode #grid{display:none}
  .detail{max-width:100%}
  .detail-back{display:inline-flex;align-items:center;gap:8px;font-size:.9rem;font-weight:600;color:var(--ink-muted);text-decoration:none;margin-bottom:26px}
  .detail-back:hover{color:var(--brass-text)}
  /* minmax(0,…) + min-width:0: the thumbnail strip's min-content width (every thumb in one
     row) must not size the column, or a car with many photos blows the page out sideways. */
  .detail-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:start}
  .detail-media,.detail-info{min-width:0}
  .detail-media{position:sticky;top:86px}
  /* contain, never cover: the main photo is always shown whole. Any bars left by an
     off-ratio (e.g. portrait) shot are filled by a blurred, cover-cropped copy of the
     same photo behind it (.gallery-fill); a 4:3 landscape shot hides it entirely. */
  .gallery{position:relative;aspect-ratio:4/3;max-width:100%;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  /* both layers absolute so the photo's intrinsic height can't grow the grid row past
     4/3 (which, with overflow:hidden, silently cropped portrait shots despite contain) */
  .gallery img{position:absolute;inset:0;width:100%;height:100%}
  .gallery-fill{object-fit:cover;filter:blur(28px) brightness(.9);transform:scale(1.15)}
  .gallery-photo{object-fit:contain;object-position:center}
  .gallery svg{width:60%;height:auto}
  .gallery button{position:absolute;top:50%;transform:translateY(-50%);background:rgba(15,12,7,.7);color:var(--cream);border:1px solid rgba(248,242,228,.3);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.2rem}
  .gallery .prev{left:12px}.gallery .next{right:12px}
  .thumbs{display:flex;gap:6px;padding:8px 0;overflow-x:auto}
  .thumbs img{width:72px;height:54px;object-fit:cover;object-position:center 60%;border-radius:3px;cursor:pointer;opacity:.5;border:2px solid transparent;flex:none}
  .thumbs img.on{opacity:1;border-color:var(--brass)}
  .detail-title{font-family:var(--body);font-size:1.9rem;font-weight:700;line-height:1.2;margin-top:6px}
  .detail-variant{font-size:1rem;margin-top:4px}
  .detail-price{font-size:2.6rem;margin-top:18px}
  .car.sold .detail-price,.detail-price.sold{color:var(--ink-faint);text-decoration:line-through}
  .detail-specs{margin-top:22px;padding-top:18px}
  /* Features / Vehicle Description accordions — full width under the gallery+price block.
     Native <details>/<summary>: keyboard + screen-reader support with no JS. */
  .detail-more{margin-top:40px;display:grid;gap:12px}
  .acc{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 22px;font-weight:700;font-size:1.05rem;border-radius:var(--radius)}
  .acc summary::-webkit-details-marker{display:none}
  .acc summary:hover{color:var(--brass-text)}
  .acc summary:focus-visible{outline:2px solid var(--brass);outline-offset:2px}
  .acc summary .acc-count{font-weight:500;font-size:.85rem;color:var(--ink-muted);margin-left:8px}
  .acc summary::after{content:"";flex:none;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-3px) rotate(45deg);transition:transform .2s}
  .acc[open] summary::after{transform:translateY(2px) rotate(-135deg)}
  .acc-body{padding:4px 22px 22px;border-top:1px solid var(--line);padding-top:18px}
  .detail-desc p{color:var(--ink-muted);font-size:.95rem;line-height:1.7;margin:0;max-width:75ch}
  .feature-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 24px}
  .feature-list li{display:flex;align-items:flex-start;gap:10px;font-size:.93rem;line-height:1.4}
  .feature-list li::before{content:"";flex:none;width:6px;height:11px;margin:2px 4px 0 3px;border-right:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(45deg)}
  @media (max-width:880px){ .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
  @media (max-width:480px){ .feature-list{grid-template-columns:1fr} }
  .detail-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
  .detail-gone{text-align:center;padding:64px 24px;border:1px dashed var(--line-strong);border-radius:var(--radius)}
  .detail-gone h2{font-size:1.9rem}
  .detail-gone p{margin:12px auto 24px;max-width:44ch}
  @media (max-width:880px){
    .detail-grid{grid-template-columns:minmax(0,1fr);gap:26px}
    .detail-media{position:static}
    .detail-price{font-size:2.1rem}
  }
  @media (max-width:480px){
    .detail-specs{grid-template-columns:1fr}
  }
  .car-body{padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;flex:1}
  .car-top{display:flex;justify-content:space-between;gap:12px;align-items:start}
  .car h3{font-family:var(--body);font-size:1.02rem;font-weight:700;line-height:1.3}
  .car .variant{font-size:.85rem;color:var(--ink-muted);margin-top:2px}
  .price{font-family:var(--body);font-size:1.7rem;font-weight:700;letter-spacing:-0.01em;color:var(--brass);line-height:1;white-space:nowrap}
  .specs{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:.82rem;color:var(--ink-muted);border-top:1px solid var(--line);padding-top:12px;margin:0;list-style:none}
  .specs li{display:flex;gap:6px;justify-content:space-between}
  .specs li b{color:var(--ink);font-weight:500}
  .car-foot{display:flex;justify-content:flex-end;align-items:center;margin-top:auto;padding-top:6px;gap:10px;flex-wrap:wrap}
  .car .btn{padding:9px 14px;font-size:.84rem}
  .empty{grid-column:1/-1;padding:48px;text-align:center;color:var(--ink-muted);border:1px dashed var(--line-strong);border-radius:var(--radius)}

  /* finance — not offered yet; the section is kept as a "coming soon" slot */
  .fin-soon{background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--radius);padding:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .fin-soon p{margin:0;color:var(--ink-muted);max-width:52ch}
  .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;pointer-events:none}
  .points{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:18px}
  .points li{display:grid;grid-template-columns:28px 1fr;gap:14px}
  .points li svg{width:24px;height:24px;stroke:var(--brass);fill:none;stroke-width:1.6;margin-top:2px}
  .points b{display:block;font-weight:600;margin-bottom:2px}
  .points span{color:var(--ink-muted);font-size:.95rem}

  /* why Dealix */
  .why-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
  @media (max-width:880px){.why-grid{grid-template-columns:1fr;gap:32px}}
  .why-list{list-style:none;margin:0;padding:0;display:grid;gap:20px}
  .why-list li{display:grid;grid-template-columns:24px 1fr;gap:14px}
  .why-list li svg{width:22px;height:22px;stroke:var(--brass);fill:none;stroke-width:1.8;margin-top:2px}
  .why-list b{display:block;font-weight:600;margin-bottom:2px}
  .why-list span{color:var(--ink-muted);font-size:.92rem}
  .why-stats{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .why-stats>div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center}
  .why-stats b{display:block;font-family:var(--display);font-size:2rem;color:var(--brass);line-height:1}
  .why-stats span{display:block;margin-top:6px;font-size:.76rem;color:var(--ink-muted);text-transform:uppercase;letter-spacing:.06em}

  /* part exchange */
  .px{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:start}
  @media (max-width:880px){.px{grid-template-columns:1fr}}
  .form{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;display:grid;gap:16px}
  .form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  @media (max-width:520px){.form .row{grid-template-columns:1fr}}
  .plate{display:flex;align-items:stretch;border-radius:5px;overflow:hidden;border:2px solid #1a1a1a;box-shadow:0 0 0 1px var(--line-strong)}
  .plate .gb{background:#003399;color:#fff;font-size:.6rem;font-weight:700;display:grid;place-items:end center;padding:6px 7px;letter-spacing:.05em}
  .plate input{flex:1;background:var(--plate);color:#111;border:0;font-family:"Inter",Arial,sans-serif;font-weight:700;font-size:1.5rem;letter-spacing:.12em;text-transform:uppercase;text-align:center;padding:8px;min-width:0}
  .plate input::placeholder{color:#7a6d00;opacity:.8}
  .plate input:focus{outline:none}
  .form .btn{justify-content:center}
  .form-note{font-size:.78rem;color:var(--ink-muted)}

  /* contact */
  .contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
  @media (max-width:880px){.contact{grid-template-columns:1fr}}
  .map-embed{margin-top:40px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
  .map-embed iframe{display:block;width:100%;height:360px;border:0}
  @media (max-width:600px){.map-embed iframe{height:280px}}
  .details{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface)}
  .details > div{padding:20px 22px;border-top:1px solid var(--line)}
  .details > div:first-child{border-top:0}
  .details .lbl{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--label);font-weight:600;margin-bottom:6px}
  .details a{text-decoration:none}
  .details a:hover{color:var(--brass-text)}
  .hours{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;margin:0}
  .hours dt{color:var(--ink-muted)}
  .hours dd{margin:0;font-weight:500}
  .hours .today dt,.hours .today dd{color:var(--brass-text)}

  footer{border-top:1px solid var(--dark-line);background:var(--dark);padding-block:40px 32px;font-size:.85rem;color:var(--cream-muted)}
  footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px 48px}
  .foot-brand{display:block;font-family:var(--display);font-size:1.4rem;font-weight:500;color:var(--cream);margin-bottom:6px}
  .foot-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,auto);gap:8px 32px}
  .foot-copy{flex-basis:100%;border-top:1px solid var(--dark-line);padding-top:18px;font-size:.78rem}
  footer a{text-decoration:none;color:inherit}
  footer a:hover{color:var(--brass-on-dark)}

  .toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--brass);color:var(--brass-ink);padding:12px 18px;border-radius:var(--radius);font-weight:600;font-size:.9rem;transition:.25s;pointer-events:none;z-index:50;max-width:calc(100% - 32px)}
  .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

  /* floating WhatsApp bubble — persistent across the whole page */
  .wa-bubble{position:fixed;right:20px;bottom:20px;z-index:30;width:56px;height:56px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(10,8,3,.35);transition:transform .15s}
  .wa-bubble:hover{transform:scale(1.06)}
  .wa-bubble svg{width:26px;height:26px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  @media (max-width:600px){.wa-bubble{right:14px;bottom:14px;width:50px;height:50px}}

  @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

  /* ---------- multi-page additions ---------- */
  /* Each page's main heading is an <h1> sized like the section headings */
  .h2{font-size:clamp(2rem,4vw,3.1rem)}
  /* homepage "how we can help" tiles linking to the inner pages */
  .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
  @media (max-width:980px){.tiles{grid-template-columns:1fr 1fr}}
  @media (max-width:520px){.tiles{grid-template-columns:1fr}}
  .tile{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;transition:border-color .15s}
  .tile:hover{border-color:var(--brass)}
  .tile b{font-weight:700;font-size:1.05rem}
  .tile span{color:var(--ink-muted);font-size:.92rem}
  .tile .go{margin-top:auto;padding-top:8px;color:var(--brass-text);font-weight:600;font-size:.88rem}
  /* about page body copy */
  .prose{max-width:64ch;display:grid;gap:18px;font-size:1.05rem;color:var(--ink-muted)}
  .page-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
  /* FAQs reuse the .acc accordion from the car detail page */
  .faq{display:grid;gap:12px;max-width:860px}
  .faq .acc-body p{color:var(--ink-muted);line-height:1.7;margin:0}
  .faq .acc-body p + p{margin-top:10px}
  .faq .acc-body a{color:var(--brass-text)}
  .xlink{margin-top:20px;font-size:.92rem;color:var(--ink-muted)}
  .xlink a{color:var(--brass-text);font-weight:600}
  /* homepage latest arrivals — reuses the stock grid's .car card */
  .latest-card{text-decoration:none;color:inherit}
  .latest-facts{font-size:.88rem;color:var(--ink-muted)}
  .latest-card .car-more{margin-top:auto}
  .latest-card:hover .car-more{text-decoration:underline}
  .latest-foot{display:flex;justify-content:center;margin-top:32px}