/* ==========================================================================
   Switch-Cars — DARK THEME + IMAGE FIT + VEHICLE DETAIL POLISH
   + SPEC CLARITY PACK (high contrast, zebra rows, key/value alignment)
   STRICT: no HTML changes, no new containers. Only style existing markup.
   Targets: #featured-grid, .car-card, .vehicle-wrap,
            [data-vehicle-title],[data-vehicle-price],
            [data-vehicle-gallery],[data-vehicle-specs]
   ========================================================================== */

:root{
  --charcoal:#111111;
  --charcoal-2:#0b0b0b;
  --ink:#171717;
  --offwhite:#FAFAF7;
  --muted:#b7b7b7;
  --blue:#00CFEA;
  --gold:#B29A5B;
  --card:#151515;
  --border:#242424;
  --row:#161616;
  --row-alt:#131313;
  --label:#9aa0a6;
  --value:#ffffff;
  --chip:#1b1b1b;
  --chip-border:#2a2a2a;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--charcoal);
  color:var(--offwhite);
  line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Links & buttons */
a{color:var(--blue);text-decoration:none}
a:hover{opacity:.9}
.btn-primary,.btn-secondary{
  display:inline-block;
  padding:.7rem 1.2rem;
  border-radius:8px;
  font-weight:600;
  border:1px solid transparent;
  transition:transform .05s ease,opacity .15s ease;
}
.btn-primary{background:var(--blue);color:#001015}
.btn-primary:hover{transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--offwhite);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--blue)}

/* Header / Nav */
.site-header{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(0deg,var(--ink),var(--charcoal-2));
  border-bottom:1px solid var(--border);
  padding:0.9rem 1rem;
}
.site-header .logo{font-weight:800;letter-spacing:.2px;color:var(--offwhite)}
.main-nav ul{list-style:none;display:flex;gap:1rem;flex-wrap:wrap}
.main-nav a{color:var(--offwhite);opacity:.9}
.main-nav a.active,.main-nav a:hover{color:var(--blue);opacity:1}

/* Containers / Sections */
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.page-hero,.hero,.finance-cta,.content,.inventory,.featured,.form-wrap,.contact-grid{padding:2rem 1rem}
.page-hero h1,.featured h2{font-weight:800;letter-spacing:.2px}

/* Hero (home) */
.hero{
  background:url('assets/hero.jpg') center/cover no-repeat;
  min-height:60vh;display:flex;align-items:center;justify-content:center;text-align:center;
}
.hero .hero-overlay{background:rgba(0,0,0,.55);padding:2rem;border-radius:12px}
.hero h1{font-size:2.4rem;margin-bottom:.5rem}
.hero p{color:var(--muted)}

/* ====== IMAGE FIT UTILITIES ====== */
.img-cover{width:100%;height:100%;object-fit:cover;object-position:center;background:#000;display:block}
.img-contain{width:100%;height:100%;object-fit:contain;object-position:center;background:#000;display:block}

/* Card image frames */
.car-card .thumb,
.car-card .image,
.car-card figure,
.car-card picture{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  background:#000;
  border-bottom:1px solid var(--border);
}

/* Featured image fix (home) */
#featured-grid .car-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#000}
#featured-grid .car-card .thumb,
#featured-grid .car-card .image,
#featured-grid .car-card figure,
#featured-grid .car-card picture{aspect-ratio:16/9}

/* Featured / Inventory cards */
.car-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1rem;
}
.car-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,255,255,0.02) inset;
  transition:transform .08s ease,box-shadow .2s ease;
}
.car-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.car-card img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#000}
.car-card h3{font-size:1.05rem;padding:.65rem .8rem;border-top:1px solid var(--border)}
.car-card p{padding:0 .8rem .8rem .8rem;color:var(--muted)}

/* Used Cars filters */
.filters{display:flex;gap:1rem;flex-wrap:wrap;align-items:flex-end;padding:1rem}
.filter-group{display:flex;flex-direction:column;gap:.4rem}
.filter-group label{font-size:.9rem;color:var(--muted)}
select,input[type="range"],input[type="number"],input[type="text"],input[type="email"],input[type="tel"],textarea{
  background:var(--card);
  color:var(--offwhite);
  border:1px solid var(--border);
  border-radius:10px;
  padding:.6rem .7rem;
  outline:none;
}
input[type="range"]{padding:0}
.result-count{padding:0 1rem 1rem;color:var(--muted)}

/* ==========================================================================
   VEHICLE DETAIL POLISH
   ========================================================================== */

.vehicle-wrap{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:1.2rem;
  padding:1rem;
}

/* Gallery */
[data-vehicle-gallery]{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:.6rem;
}
[data-vehicle-gallery] img{
  width:100%; height:260px; object-fit:cover; background:#000;
  border-radius:10px; border:1px solid var(--border);
}
[data-vehicle-gallery] img:first-child{
  grid-column:1 / -1;
  height:360px;
}

/* Title / price column */
.vehicle-summary{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  position:sticky; top:78px;
}
[data-vehicle-title]{
  font-size:1.6rem;
  font-weight:800;
  line-height:1.25;
  margin-bottom:.35rem;
}
[data-vehicle-price]{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:1.5rem; font-weight:800;
  background:linear-gradient(180deg, rgba(178,154,91,.16), rgba(178,154,91,.06));
  color:#fff; border:1px solid rgba(178,154,91,.45);
  padding:.45rem .7rem; border-radius:10px;
  margin:.35rem 0 0.6rem 0;
}
.badges{margin-top:.4rem;display:flex;gap:.5rem;flex-wrap:wrap}
.badge{
  padding:.25rem .6rem;border-radius:999px;font-size:.75rem;
  background:rgba(0,207,234,.12);color:#9af2ff;border:1px solid rgba(0,207,234,.35)
}
.badge.sold{background:rgba(178,154,91,.12);color:#ffe7b1;border-color:rgba(178,154,91,.4)}

/* ==========================================================================
   SPEC CLARITY PACK — applies to whatever you render in [data-vehicle-specs]
   Supports tables, lists (UL/LI with <strong>Label</strong><span>Value</span>),
   and definition lists (DL/DT/DD). No HTML changes required.
   ========================================================================== */

.vehicle-specs,
[data-vehicle-specs]{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:1rem;
  margin-top:.8rem;
}

/* Section headings inside specs */
[data-vehicle-specs] h2,
[data-vehicle-specs] h3,
[data-vehicle-specs] h4{
  font-weight:800;
  font-size:1.02rem;
  margin:.2rem 0 .6rem;
  padding:.35rem .55rem;
  background:var(--chip);
  border:1px solid var(--chip-border);
  border-radius:8px;
  color:#fff;
}

/* --- TABLE OUTPUT --- */
[data-vehicle-specs] table{width:100%;border-collapse:separate;border-spacing:0 0}
[data-vehicle-specs] thead th{
  text-transform:uppercase; letter-spacing:.04em;
  font-size:.75rem; color:var(--label);
  padding:.6rem .8rem .35rem;
  border-bottom:1px solid var(--border);
}
[data-vehicle-specs] tbody tr{background:var(--row)}
[data-vehicle-specs] tbody tr:nth-child(even){background:var(--row-alt)}
[data-vehicle-specs] th,[data-vehicle-specs] td{
  padding:.7rem .8rem; vertical-align:top;
  border-bottom:1px solid var(--border);
}
[data-vehicle-specs] tbody tr:last-child th,
[data-vehicle-specs] tbody tr:last-child td{border-bottom:0}
[data-vehicle-specs] th{
  width:40%;
  color:var(--label);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.03em;
}
[data-vehicle-specs] td{color:var(--value);font-weight:600}

/* Dotted leader between key/value for narrow tables */
@media (min-width:700px){
  [data-vehicle-specs] tbody tr{
    display:grid; grid-template-columns:1fr 1fr; align-items:center;
  }
  [data-vehicle-specs] tbody tr > th{
    position:relative; padding-right:1.6rem;
  }
  [data-vehicle-specs] tbody tr > th:after{
    content:"";
    position:absolute; left:calc(100% - 1rem); right:.6rem; top:50%;
    height:1px; transform:translateY(-50%);
    background:linear-gradient(90deg,rgba(255,255,255,.14) 33%, rgba(0,0,0,0) 0%);
    background-size:6px 1px; background-repeat:repeat-x;
    opacity:.6;
  }
}

/* --- UL / LI OUTPUT (Label in <strong>, value in <span>) --- */
[data-vehicle-specs] ul{list-style:none;margin:0;padding:0}
[data-vehicle-specs] ul{display:grid;grid-template-columns:1fr 1fr;gap:.0rem;border-top:1px solid var(--border)}
@media (max-width:900px){ [data-vehicle-specs] ul{grid-template-columns:1fr} }

[data-vehicle-specs] li{
  display:grid; grid-template-columns:1fr 1fr;
  gap:.8rem; align-items:center;
  padding:.6rem .4rem;
  background:var(--row);
  border-bottom:1px solid var(--border);
}
[data-vehicle-specs] li:nth-child(even){background:var(--row-alt)}
[data-vehicle-specs] li strong{
  color:var(--label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
[data-vehicle-specs] li span{
  color:var(--value);
  font-weight:700;
  text-align:right;
}

/* --- DL OUTPUT --- */
[data-vehicle-specs] dl{margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
@media (max-width:900px){ [data-vehicle-specs] dl{grid-template-columns:1fr} }
[data-vehicle-specs] dt,
[data-vehicle-specs] dd{
  margin:0;
  padding:.6rem .6rem;
  border-bottom:1px solid var(--border);
  background:var(--row);
}
[data-vehicle-specs] dt:nth-of-type(even),
[data-vehicle-specs] dd:nth-of-type(even){background:var(--row-alt)}
[data-vehicle-specs] dt{
  color:var(--label);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
}
[data-vehicle-specs] dd{
  color:var(--value);
  font-weight:700;
}

/* Small helper spacing if you output plain paragraphs */
[data-vehicle-specs] p{margin:.3rem 0}
[data-vehicle-specs] p + p{margin-top:.5rem}

/* Finance (unchanged visual container polish) */
.finance-calculator,
.finance-cta,
.calc-controls,
.calc-output{
  margin-top:.8rem;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
}
.finance-calculator .calc-grid{display:grid;grid-template-columns:1fr;gap:1rem;padding:1rem}
.calc-controls,.calc-output{padding:1rem}
.rep-example,.fca-box{margin-top:.6rem;padding:1rem;border:1px dashed var(--border);border-radius:10px;background:rgba(255,255,255,.02)}
.fca-box p{color:var(--muted)}
.fca-box small{display:block;margin-top:.35rem;color:var(--muted)}

/* Blog */
.blog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.post-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:1rem}
.post-card h3{margin-bottom:.4rem}
#postArticle h1{margin-bottom:.3rem}

/* Footer */
.site-footer{
  background:var(--charcoal-2);
  border-top:1px solid var(--border);
  text-align:center;
  padding:1rem;
  color:var(--muted);
}

/* Responsive tweaks */
@media (max-width: 900px){
  .vehicle-wrap{grid-template-columns:1fr}
  [data-vehicle-gallery]{grid-template-columns:1fr 1fr}
  [data-vehicle-gallery] img:first-child{height:280px}
  .finance-calculator .calc-grid{grid-template-columns:1fr}
}

/* Safety: force dark base */
html, body { background:var(--charcoal) !important; }
/* ===== Switch-Cars — Sticky Header Spacing Hotfix (non-visual) ===== */
:root {
  /* Fallback header height if JS can't measure (kept subtle) */
  --header-h: 72px;
}

/* Make sure header stays on top */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* When JS measures the header, we add this class to body */
body.has-fixed-header {
  padding-top: var(--header-h);
}

/* Ensure hero/section headings don't hide under the sticky header when anchored */
.page-hero, .featured, .inventory, .vehicle-wrap {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* Prevent nav bunching into the logo on narrower widths without changing layout */
.site-header .logo { flex-shrink: 0; }
.main-nav ul { flex-wrap: wrap; gap: 0.75rem; }
/* ===== Switch-Cars — Header Overlap Hotfix (CSS-only) ===== */
/* Fallback header height (adjusts with screen width so titles never sit under the logo) */
:root { --header-h: 76px; }
@media (max-width: 900px) { :root { --header-h: 92px; } }
@media (max-width: 600px) { :root { --header-h: 108px; } }

/* Keep header above content; works whether your header was fixed or not */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Push the whole page down by the header height */
body { padding-top: var(--header-h); }

/* Make sure in-page anchors and the first sections don’t hide under the header */
.page-hero,
.page-title,
.featured,
.inventory,
.vehicle-wrap,
section,
main {
  scroll-margin-top: calc(var(--header-h) + 12px);
}

/* A tiny nudge so the very first block on pages doesn’t cling to the header */
main > *:first-child { margin-top: 0.5rem; }

/* Prevent nav from bunching into the logo without changing your look */
.site-header .logo { flex-shrink: 0; }
.site-header nav ul { flex-wrap: wrap; gap: 0.75rem; }
/* ===== Switch-Cars — Header alignment fix (logo left, nav right) ===== */
:root { --header-h: 76px; }

.site-header { position: sticky; top: 0; z-index: 1000; }

/* Force a clean flex row: logo on left, nav on right */
.site-header .container {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem;
}

/* Make sure previous floats don’t break layout */
.site-header .logo { flex: 0 0 auto; display: block; }
.site-header .nav { margin-left: auto !important; float: none !important; }
.site-header nav ul {
  display: flex !important;
  align-items: center;
  gap: 1rem;
  flex-wrap: nowrap;
  margin: 0; padding: 0; list-style: none;
}
.site-header nav li { display: block; }
.site-header nav a { display: block; white-space: nowrap; }

/* Prevent wrapping under the logo on medium screens */
@media (max-width: 900px) {
  .site-header nav ul { gap: 0.75rem; }
}

/* Allow wrap on small screens instead of overlap */
@media (max-width: 640px) {
  .site-header nav ul { flex-wrap: wrap; }
}

/* Keep page content clear of the sticky header */
body { padding-top: var(--header-h); }
main, section { scroll-margin-top: calc(var(--header-h) + 12px); }
/* === Switch-Cars: Header Horizontal Alignment Fix === */

/* Ensure header sits above content */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* Make the logo and nav share a single horizontal line */
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;     /* prevent wrapping under logo */
  gap: 2rem;
}

/* Logo stays on the left */
.site-header .logo {
  flex: 0 0 auto;
  display: block;
  font-weight: 600;
  text-decoration: none;
}

/* Nav group sits on the right */
.site-header .nav {
  margin-left: auto;
}

/* Force nav links to line up horizontally */
.site-header .nav a {
  display: inline-block;
  margin-left: 1.5rem;
  text-decoration: none;
  white-space: nowrap;
}

/* Slightly tighter spacing on smaller screens */
@media (max-width: 900px) {
  .site-header .nav a {
    margin-left: 1rem;
  }
}

/* Wrap on very small screens instead of overlapping */
@media (max-width: 600px) {
  .site-header .container {
    flex-wrap: wrap;
  }
  .site-header .nav {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
  .site-header .nav a {
    margin: 0 0.75rem;
  }
}
/* =========================
   Vehicle Sourcing — tidy form layout
   Scoped so other pages stay unchanged
   ========================= */
.sourcing-page .sourcing-card {
  max-width: 1100px;
  margin: 24px auto;
}

.sourcing-page .form-title {
  margin: 0 0 12px 0;
  font-size: 1.25rem;
  line-height: 1.3;
}

.sourcing-page .sourcing-form {
  display: grid;
  gap: 16px;
}

.sourcing-page .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 900px) {
  .sourcing-page .form-grid {
    grid-template-columns: 1fr;
  }
}

.sourcing-page .form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 500; /* label weight, readable on dark */
}

.sourcing-page .form-field--full {
  grid-column: 1 / -1; /* full width row */
}

.sourcing-page .form-field input,
.sourcing-page .form-field select,
.sourcing-page .form-field textarea {
  /* Distinct white borders per your request */
  border: 2px solid #ffffff;
  background: rgba(255, 255, 255, 0.02); /* keep dark theme */
  color: #ffffff;
  border-radius: 10px;
  padding: 12px 14px;
  line-height: 1.2;
  min-height: 44px; /* comfortable touch target */
  width: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.sourcing-page .form-field textarea {
  min-height: 96px;
  resize: vertical;
}

.sourcing-page .form-field input::placeholder,
.sourcing-page .form-field textarea::placeholder {
  color: rgba(255, 255, 255, 0.65);
}

.sourcing-page .form-field input:focus,
.sourcing-page .form-field select:focus,
.sourcing-page .form-field textarea:focus {
  outline: none;
  border-color: #ffffff; /* keep crisp white on focus */
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
}

.sourcing-page .form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.sourcing-page .status {
  font-size: 0.95rem;
  opacity: 0.9;
}

.sourcing-page .mt-xs {
  margin-top: 6px;
}
/* Finance calculator styling fix */
.finance-calculator {
  background: var(--charcoal);
  color: var(--offwhite);
  padding: 2rem;
  border-radius: 10px;
  margin: 2rem auto;
  max-width: 900px;
}

.calc-grid {
  display: grid;
  gap: 2rem;
}

.calc-controls label {
  display: block;
  margin-bottom: 1rem;
}

.calc-controls input {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #fff;
  border-radius: 5px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
}

.calc-controls input:focus {
  outline: none;
  border-color: var(--switchblue);
  box-shadow: 0 0 5px var(--switchblue);
}

.calc-output {
  background: #1a1a1a;
  padding: 1.5rem;
  border-radius: 8px;
  border: 1px solid #444;
}

.rep-example, .fca-box {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 6px;
}

.rep-example h4 {
  margin-bottom: 0.5rem;
  color: var(--switchblue);
}
/* ===============================
   CONTACT PAGE STYLING UPGRADE
   =============================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  padding: 2rem;
  background: var(--charcoal);
  color: var(--offwhite);
}

.contact-grid .card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.contact-grid h3 {
  margin-bottom: 1rem;
  color: var(--switchblue);
  text-align: center;
}

/* Form fields with white borders */
#contactForm label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--offwhite);
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--offwhite);
  border-radius: 6px;
  background: transparent;
  color: var(--offwhite);
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}

#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: var(--switchblue);
  background: rgba(255, 255, 255, 0.05);
}

/* Submit button */
#contactForm .btn-primary {
  width: 100%;
  padding: 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1rem;
}

/* Contact status message */
#contactStatus {
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
  color: var(--switchblue);
}

/* Map card styling */
.contact-grid .card img {
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
/* ===============================
   CONTACT PAGE STYLING (v2)
   =============================== */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  padding: 2rem 0;
  color: var(--offwhite);
}

.contact-grid .form.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

#contactForm label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
  color: var(--offwhite);
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--offwhite);
  border-radius: 6px;
  background: transparent;
  color: var(--offwhite);
  font-size: 1rem;
  transition: border-color 0.2s, background 0.2s;
}

#contactForm input:focus,
#contactForm textarea:focus {
  outline: none;
  border-color: var(--switchblue);
  background: rgba(255, 255, 255, 0.05);
}

#contactForm .btn-primary {
  width: 100%;
  padding: 0.9rem;
  font-weight: 700;
  font-size: 1rem;
  margin-top: 1rem;
}

#contactStatus {
  text-align: center;
  margin-top: 1rem;
  font-style: italic;
  color: var(--switchblue);
}

/* Map section styling */
.map-container {
  text-align: center;
}

.map-img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.map-note {
  margin-top: 0.5rem;
  color: var(--offwhite);
  font-size: 0.9rem;
  opacity: 0.8;
}
/* Finance calculator — white borders + dark panel */
.finance-calculator {
  background: var(--charcoal);
  color: var(--offwhite);
  padding: 2rem;
  border-radius: 10px;
  margin: 2rem auto;
  max-width: 1000px;
  border: 1px solid #2a2a2a;
}

.calc-grid {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .calc-grid { grid-template-columns: 1fr 1fr; }
}

.calc-controls label {
  display: block;
  margin-bottom: 1rem;
  font-weight: 600;
}

.calc-controls input {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #fff;          /* white border */
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 1rem;
}

.calc-controls input:focus {
  outline: none;
  border-color: var(--switchblue);
  box-shadow: 0 0 6px rgba(0, 207, 234, 0.6);
}

.calc-output {
  background: #1a1a1a;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 10px;
  border: 1px solid #444;
}

.rep-example, .fca-box {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
}

.rep-example h4 {
  margin-bottom: 0.5rem;
  color: var(--switchblue);
}
/* === Align header navigation to the right === */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between; /* logo left, nav right */
}

.nav .menu {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Keep your blue hover effect */
.nav .menu li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.nav .menu li a:hover,
.nav .menu li a.active {
  color: #00aaff; /* keep your existing blue highlight */
}
/* ===== Switch-Cars: Vehicle page image fit fixes ===== */

/* Make all listing/featured images consistent too (nice bonus) */
.car-card img{
  width:100%;
  aspect-ratio: 4 / 3;     /* consistent tiles in grids */
  object-fit: cover;        /* no stretching */
  display:block;
  background:#000;          /* hides gaps while loading */
}

/* Vehicle detail gallery */
.vehicle-gallery{
  display:grid;
  gap:12px;
}

/* Every image in the gallery is the same shape and never stretches */
.vehicle-gallery img{
  width:100%;
  aspect-ratio: 16 / 9;     /* widescreen frame for car photos */
  object-fit: cover;        /* fills the frame without distortion */
  display:block;
  background:#000;
  border-radius:8px;        /* subtle, keeps your current look */
}

/* If you ever prefer full image without any crop, swap cover→contain:
   .vehicle-gallery img{ object-fit: contain; background:#000; } */
/* ==========================================================
   Switch-Cars | Vehicle Page Image Fixes
   Keeps images neat, same size, and no distortion
   ========================================================== */

/* Used cars + featured car cards */
.car-card img {
  width: 100%;
  aspect-ratio: 4 / 3;       /* consistent thumbnail frame */
  object-fit: cover;          /* fills card nicely */
  display: block;
  background: #000;           /* black bars if image doesn't fit */
  border-radius: 6px;
}

/* Vehicle detail gallery */
[data-vehicle-gallery] {
  display: grid;
  gap: 12px;
}

/* FILL FRAME — replaces prior contain so photos don't look tiny */
[data-vehicle-gallery] img {
  width: 100%;
  aspect-ratio: 16 / 9;       /* widescreen frame */
  object-fit: cover;          /* <-- changed from contain to cover */
  background: #000;           /* fallback while loading */
  display: block;
  border-radius: 8px;
}

/* Optional: make gallery responsive on smaller screens */
@media (max-width: 600px) {
  [data-vehicle-gallery] {
    gap: 8px;
  }
}
/* === Switch-Cars: Vehicle gallery = GRID, no stretching (final override) === */
[data-vehicle-gallery]{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3-up grid on desktop */
  gap: 10px;
}

@media (max-width: 1024px){
  [data-vehicle-gallery]{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 600px){
  [data-vehicle-gallery]{ grid-template-columns: 1fr; }
}

/* Uniform tiles, no distortion, no stretch */
[data-vehicle-gallery] img{
  width: 100%;
  height: auto !important;          /* kill any old fixed heights */
  aspect-ratio: 4 / 3;              /* consistent tile shape */
  object-fit: contain;               /* show full photo, never stretch/crop */
  background: #000;                  /* subtle letterbox where needed */
  display: block;
  border-radius: 8px;
  border: 1px solid var(--border);
}

/* Cancel any "first image spans two columns" from earlier CSS */
[data-vehicle-gallery] img:first-child{
  grid-column: auto !important;
  grid-row: auto !important;
}
/* ====== HOVER OVERLAY FOR CAR CARDS (non-breaking, additive) ====== */
.car-grid .car-card,
#featured-cars .car-card {
  position: relative;
  display: block;
  border: 1px solid var(--border, #242424);
  background: var(--card, #151515);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Keep images tidy without stretching */
.car-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Title/price strip (still shown when not hovering) */
.car-card h3,
.car-card p {
  padding: 0.6rem 0.75rem;
  margin: 0;
}
.car-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--offwhite, #FAFAF7);
  background: var(--ink, #171717);
  border-bottom: 1px solid var(--border, #242424);
}
.car-card p {
  color: var(--muted, #b7b7b7);
  background: var(--card, #151515);
}

/* Overlay that appears on hover/focus */
.car-card .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  color: var(--offwhite, #FAFAF7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none; /* don’t steal clicks from the card link */
}

.car-card .overlay-title {
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}

.car-card .overlay-price {
  font-weight: 700;
  color: var(--blue, #00CFEA);
}

.car-card .overlay-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.92rem;
}

.car-card .overlay-specs span {
  color: var(--offwhite, #FAFAF7);
  opacity: 0.92;
}

/* show on hover and keyboard focus */
.car-card:hover .card-overlay,
.car-card:focus-within .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Touch devices fallback: keep cards tappable; overlay is hover-only so touch users can click through */
@media (hover: none) and (pointer: coarse) {
  .car-card .card-overlay { display: none; }
}
/* ====== HOVER OVERLAY FOR CAR CARDS (Switch-Cars strict containers) ====== */
#featured-grid .car-card,
#used-cars-grid .car-card {
  position: relative;
  display: block;
  border: 1px solid var(--border, #242424);
  background: var(--card, #151515);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Keep images tidy without stretching */
#featured-grid .car-card img,
#used-cars-grid .car-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* Optional title/price strip (if your card markup includes these elements) */
#featured-grid .car-card h3,
#used-cars-grid .car-card h3,
#featured-grid .car-card p,
#used-cars-grid .car-card p {
  padding: 0.6rem 0.75rem;
  margin: 0;
}
#featured-grid .car-card h3,
#used-cars-grid .car-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--offwhite, #FAFAF7);
  background: var(--ink, #171717);
  border-bottom: 1px solid var(--border, #242424);
}
#featured-grid .car-card p,
#used-cars-grid .car-card p {
  color: var(--muted, #b7b7b7);
  background: var(--card, #151515);
}

/* Hover/focus overlay */
.car-card .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  color: var(--offwhite, #FAFAF7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.car-card .overlay-title { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.car-card .overlay-price { font-weight: 700; color: var(--blue, #00CFEA); }
.car-card .overlay-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.92rem;
}
.car-card .overlay-specs span { color: var(--offwhite, #FAFAF7); opacity: 0.92; }

/* show overlay */
.car-card:hover .card-overlay,
.car-card:focus-within .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* touch: no hover overlay */
@media (hover: none) and (pointer: coarse) {
  .car-card .card-overlay { display: none; }
}
/* ====== HOVER OVERLAY FOR CAR CARDS (Featured + Used) ====== */
#featured-grid .car-card,
#used-cars-grid .car-card {
  position: relative;
  display: block;
  border: 1px solid var(--border, #242424);
  background: var(--card, #151515);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Keep images tidy without stretching */
#featured-grid .car-card img,
#used-cars-grid .car-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
}

/* (If your template already has a title/price strip, keep it) */
#featured-grid .car-card h3,
#used-cars-grid .car-card h3,
#featured-grid .car-card p,
#used-cars-grid .car-card p {
  padding: 0.6rem 0.75rem;
  margin: 0;
}
#featured-grid .car-card h3,
#used-cars-grid .car-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--offwhite, #FAFAF7);
  background: var(--ink, #171717);
  border-bottom: 1px solid var(--border, #242424);
}
#featured-grid .car-card p,
#used-cars-grid .car-card p {
  color: var(--muted, #b7b7b7);
  background: var(--card, #151515);
}

/* Overlay (shown on hover/focus only) */
.car-card .card-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.78);
  color: var(--offwhite, #FAFAF7);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 0.9rem 1rem;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}
.car-card .overlay-title { font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.car-card .overlay-price { font-weight: 700; color: var(--blue, #00CFEA); }
.car-card .overlay-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.92rem;
}
.car-card .overlay-specs span { color: var(--offwhite, #FAFAF7); opacity: 0.92; }

/* show overlay */
.car-card:hover .card-overlay,
.car-card:focus-within .card-overlay {
  opacity: 1;
  transform: translateY(0);
}

/* touch devices: no hover */
@media (hover: none) and (pointer: coarse) {
  .car-card .card-overlay { display: none; }
}
/* =========================================================
   HOVER INFO PANEL (text-only, hides images)
   Appears when hovering over a car card
   ========================================================= */
#featured-grid .car-card,
#used-cars-grid .car-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* hide the normal image & body when hovering */
#featured-grid .car-card:hover img,
#used-cars-grid .car-card:hover img,
#featured-grid .car-card:hover .car-card-body,
#used-cars-grid .car-card:hover .car-card-body {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* info panel that shows on hover */
.car-card .hover-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0,0,0,0.92);
  color: var(--offwhite, #FAFAF7);
  padding: 1.2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.car-card:hover .hover-info {
  opacity: 1;
  transform: translateY(0);
}

.hover-info h3 {
  margin: 0 0 0.3rem 0;
  font-size: 1.1rem;
  color: var(--blue, #00CFEA);
}
.hover-info p {
  margin: 0.15rem 0;
  font-size: 0.95rem;
  color: var(--offwhite, #FAFAF7);
  opacity: 0.9;
}
/* =========================================================
   HOVER INFO PANEL (text-only, hides image/card body on hover)
   ========================================================= */

#featured-grid .car-card,
#used-cars-grid .car-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* Keep images tidy (no stretching) */
#featured-grid .car-card img,
#used-cars-grid .car-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: opacity 0.25s ease;
}

/* Fade out image + any visible body while hovering */
#featured-grid .car-card:hover img,
#used-cars-grid .car-card:hover img,
#featured-grid .car-card:hover .car-card-body,
#used-cars-grid .car-card:hover .car-card-body {
  opacity: 0;
}

/* Info panel that appears on hover */
.car-card .hover-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0,0,0,0.92);
  color: var(--offwhite, #FAFAF7);
  padding: 1.2rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.car-card:hover .hover-info,
.car-card:focus-within .hover-info {
  opacity: 1;
  transform: translateY(0);
}

.hover-info h3 {
  margin: 0 0 0.3rem 0;
  font-size: 1.1rem;
  color: var(--blue, #00CFEA);
}
.hover-info p {
  margin: 0.15rem 0;
  font-size: 0.95rem;
  color: var(--offwhite, #FAFAF7);
  opacity: 0.9;
}

/* Touch devices: no hover changes */
@media (hover: none) and (pointer: coarse) {
  #featured-grid .car-card:hover img,
  #used-cars-grid .car-card:hover img,
  #featured-grid .car-card:hover .car-card-body,
  #used-cars-grid .car-card:hover .car-card-body,
  .car-card .hover-info { opacity: 1; transform: none; }
  .car-card .hover-info { display: none; } /* keep mobile behaviour unchanged */
}
/* =========================================================
   HOVER SPEC SHEET (big, clear, key/value list)
   Works inside #featured-grid and #used-cars-grid only
   ========================================================= */
#featured-grid .car-card,
#used-cars-grid .car-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

/* keep images tidy */
#featured-grid .car-card img,
#used-cars-grid .car-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: opacity 0.22s ease;
}

/* fade out the default content during hover */
#featured-grid .car-card:hover img,
#used-cars-grid .car-card:hover img,
#featured-grid .car-card:hover .car-card-body,
#used-cars-grid .car-card:hover .car-card-body {
  opacity: 0;
}

/* the sheet itself */
.hover-sheet {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.94);
  color: var(--offwhite, #FAFAF7);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.car-card:hover .hover-sheet,
.car-card:focus-within .hover-sheet {
  opacity: 1;
  transform: translateY(0);
}

/* header row (title + price) */
.hover-sheet .sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border, #242424);
  padding-bottom: 0.4rem;
}
.hover-sheet .sheet-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.hover-sheet .sheet-price {
  font-weight: 800;
  color: var(--blue, #00CFEA);
}
.hover-sheet .sheet-sub {
  font-size: 0.95rem;
  color: var(--muted, #b7b7b7);
}

/* spec list as two-column key/value, crisp and readable */
.hover-sheet .spec-grid {
  margin-top: 0.2rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-height: 100%;
  overflow: auto;
}
.hover-sheet .kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.75rem;
  padding: 0.42rem 0.2rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: transparent;
}
.hover-sheet .kv:nth-child(odd) {
  background: rgba(255,255,255,0.03);
}
.hover-sheet .k {
  font-weight: 700;
  color: var(--offwhite, #FAFAF7);
  white-space: nowrap;
}
.hover-sheet .v {
  color: var(--offwhite, #FAFAF7);
  opacity: 0.96;
}

/* touch devices: keep normal behaviour (no hover sheet) */
@media (hover: none) and (pointer: coarse) {
  .hover-sheet { display: none; }
}

/* =========================
   APPENDED: Home hero layered background
   (transparent overlay image + existing hero.jpg)
   ========================= */
.hero{
  /* Add transparent PNG overlay above the current hero.jpg */
  background:
    url('assets/hero-overlay.png') center/contain no-repeat,
    url('assets/hero.jpg') center/cover no-repeat;
  position: relative; /* required for ::before overlay */
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  /* keep text readable on top of both images */
  background: rgba(0,0,0,0.45);
}
.hero .hero-overlay{
  position: relative; /* keep hero text above ::before */
  z-index: 1;
}
/* === Hero layered background (paths for current file locations) === */
.hero{
  background:
    url('assets/hero-overlay.png') center/contain no-repeat, /* put this file into /assets/ */
    url('hero.jpg') center/cover no-repeat;                   /* this matches your root hero.jpg */
  position: relative;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(0,0,0,0.45);
}
.hero .hero-overlay{ position: relative; z-index: 1; }
/* ===== Switch-Cars: HERO LAYERED BACKGROUND — FINAL OVERRIDE ===== */
/* Works whether your homepage uses .hero or .page-hero */
.hero,
.page-hero{
  /* Put your transparent PNG in /assets/hero-overlay.png
     and your photo in /assets/hero.jpg (or change the second URL below) */
  background-image:
    url("assets/hero-overlay.png"),
    url("assets/hero.jpg");           /* change to 'hero.jpg' if your photo is at root */
  background-position: center center, center center;
  background-size: contain, cover;    /* overlay sits on top, main photo fills area */
  background-repeat: no-repeat, no-repeat;
  min-height: 60vh;
  position: relative;
}

/* Slightly lighter mask so the image is visible */
.hero::before,
.page-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.28);       /* was 0.45; lighten so you can see the photo */
  pointer-events: none;
}

/* Ensure this wins even if earlier CSS sets .hero background */
.hero,
.page-hero{ background-image: url("assets/hero-overlay.png"), url("assets/hero.jpg") !important; }
/* ===== Switch-Cars — Homepage FULL-PAGE background (only where .hero exists) ===== */
/* Applies to pages that have a .hero element (Chrome/Edge/Safari support :has) */
body:has(.hero) {
  /* main photo across the entire page */
  background-image: url("assets/hero.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll; /* change to fixed if you want a parallax feel */
}

/* Optional: add a transparent watermark/logo layer on top of the photo */
body:has(.hero)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;

  /* layered: transparent PNG on top of the photo already on <body> */
  background-image: url("assets/hero-overlay.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;

  /* slight tint so text stays readable; reduce if you want it brighter */
  background-color: rgba(0,0,0,0.20);
  z-index: -1; /* stays behind all content */
}

/* If some earlier rule forces a solid background, neutralise it on the home page */
body:has(.hero) {
  background-color: transparent !important;
}
/* === Switch-Cars: FINAL HERO BACKGROUND OVERRIDE === */
.hero,
.page-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* Layered background (absolute path + cache-buster) */
  background-image:
    url("/assets/hero-overlay.png?v=1"),
    url("/assets/hero.jpg?v=1");
  background-position: center center, center center;
  background-repeat: no-repeat, no-repeat;
  background-size: contain, cover;

  /* ensure nothing earlier wins */
  background-color: transparent !important;
  background-blend-mode: normal;
}

.hero::before,
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.25); /* lighten if it still looks too dark */
  pointer-events: none;
  z-index: 0;
}

.hero .hero-overlay,
.page-hero .hero-overlay {
  position: relative;
  z-index: 1;
}
/* === Switch-Cars: HOMEPAGE FIXED BACKGROUND IMAGE === */
/* Applies only on homepage (has #featured-grid) */
body:has(#featured-grid) {
  /* Two layers: optional transparent overlay + main photo */
  background-image:
    url("/assets/hero-overlay.png?v=3"),
    url("/assets/hero.jpg?v=3") !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: contain, cover !important;

  /* ✨ Key line: keeps background still while scrolling */
  background-attachment: scroll, fixed !important;

  /* keep your dark tone under it just in case */
  background-color: var(--charcoal) !important;
}
/* === Switch-Cars: Homepage fixed full-page background (no HTML changes) === */
/* Applies only on pages that have the featured grid (your home page) */
body:has(#featured-grid) {
  position: relative;
  background-color: transparent !important; /* let the image show behind */
}

/* Single fixed layer behind everything */
body:has(#featured-grid)::before {
  content: "";
  position: fixed;           /* pins to viewport */
  inset: 0;
  z-index: -1;               /* sits behind all content */
  pointer-events: none;

  /* Two stacked backgrounds: overlay PNG (top) + photo (bottom) */
  background-image:
    url("/assets/hero-overlay.png?v=4"),
    url("/assets/hero.jpg?v=4");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, cover;   /* overlay stays sized, photo fills */
}
/* === Switch-Cars: Parallax Drift Background — HOMEPAGE ONLY === */
/* Trigger only when #featured-grid exists (your homepage) */
body:has(#featured-grid) {
  position: relative;
  background-color: transparent !important;
}

/* Parallax background layer (photo) */
body:has(#featured-grid)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  /* your main image */
  background-image: url("/assets/hero.jpg?v=6");
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;

  /* subtle drift animation */
  animation: parallaxDrift 40s linear infinite alternate;
  transform: translateZ(0);
}

/* Optional transparent overlay/logo layer */
body:has(#featured-grid)::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: url("/assets/hero-overlay.png?v=6");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.9;
}

/* Slow floating motion */
@keyframes parallaxDrift {
  0%   { background-position: center 0; }
  50%  { background-position: center 30px; }
  100% { background-position: center -30px; }
}

/* Prevent image on all other pages */
body:not(:has(#featured-grid))::before,
body:not(:has(#featured-grid))::after {
  background: none !important;
  content: none !important;
}
/* === Switch-Cars: Parallax Drift Background — HOME PAGE ONLY === */

/* Reset all pages to solid dark base first */
body {
  background: var(--charcoal) !important;
}

/* Apply parallax only on the home page (data-page="home") */
body[data-page="home"] {
  position: relative;
  background-color: transparent !important;
}

/* Photo layer */
body[data-page="home"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/hero.jpg?v=7");
  background-repeat: no-repeat;
  background-position: center 0;
  background-size: cover;
  animation: parallaxDrift 40s linear infinite alternate;
  transform: translateZ(0);
}

/* Optional overlay/logo layer */
body[data-page="home"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("/assets/hero-overlay.png?v=7");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.9;
}

/* Motion */
@keyframes parallaxDrift {
  0%   { background-position: center 0; }
  50%  { background-position: center 30px; }
  100% { background-position: center -30px; }
}

/* Safety: disable all pseudo-backgrounds on non-home pages */
body:not([data-page="home"])::before,
body:not([data-page="home"])::after {
  content: none !important;
  background: none !important;
}
/* ===== SWITCH-CARS — FINAL CLEANUP =====
   1) Nuke any previous pseudo-backgrounds + body images on ALL pages
   2) Re-apply a simple, non-parallax background on HOME only
   3) Keep other pages solid dark
   ======================================= */

/* 1) HARD RESET: remove any earlier ::before/::after imagery and body bg images */
body::before,
body::after {
  content: none !important;
  background: none !important;
}
body {
  background-color: var(--charcoal) !important;  /* your dark base */
  background-image: none !important;             /* kill any earlier body bg */
}

/* Also ensure section-level heroes don't bring the image back unintentionally */
.hero,
.page-hero {
  background-image: none !important;
}

/* 2) HOME PAGE ONLY — simple non-parallax background image (no animation, no drift) */
/* Preferred: use data-page marker on index.html => <body data-page="home"> */
body[data-page="home"] {
  position: relative;
  background-color: var(--charcoal) !important; /* base tone under the image */
}

/* Plain fixed layer for the home page ONLY (no parallax) */
body[data-page="home"]::before {
  content: "";
  position: fixed;        /* stays put while scrolling */
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: url("/assets/hero.jpg?v=8");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Optional transparent watermark on home (comment out if not needed) */
body[data-page="home"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image: url("/assets/hero-overlay.png?v=8");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.9;
}

/* 3) SAFETY — explicitly ensure non-home pages stay dark (no image) */
body:not([data-page="home"])::before,
body:not([data-page="home"])::after {
  content: none !important;
  background: none !important;
}

/* ----- Fallback (if your index.html doesn't have data-page="home") -----
   Use this instead of the data-page rules above by uncommenting:

   body:has(#featured-grid)::before { ...same as the home ::before... }
   body:has(#featured-grid)::after  { ...same as the home ::after... }
   body:not(:has(#featured-grid))::before,
   body:not(:has(#featured-grid))::after { content:none !important; background:none !important; }

   But prefer data-page="home" for precision.
*/
/* ========= Switch-Cars — FINAL RESET ========= */
/* 1) Remove ALL pseudo-layer placeholders site-wide */
body::before,
body::after,
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 2) Force non-home pages back to solid dark (no images) */
body:not([data-page="home"]) {
  background: var(--charcoal) !important;
  background-image: none !important;
}
body:not([data-page="home"]) .hero,
body:not([data-page="home"]) .page-hero {
  background-image: none !important;
}

/* 3) Home page only — SIMPLE background image (no overlay, no parallax) */
body[data-page="home"] {
  background: var(--charcoal) !important; /* base tone under photo */
  background-image: url("/assets/hero.jpg?v=9") !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center center !important;
}
/* ===== Switch-Cars | Home-only fixed background + clean text spacing ===== */

/* 0) Nuke any old pseudo-bg layers everywhere (placeholders) */
body::before, body::after,
.hero::before, .hero::after,
.page-hero::before, .page-hero::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 1) Keep all non-home pages dark (no images) */
body:not([data-page="home"]) {
  background: var(--charcoal) !important;
  background-image: none !important;
}
body:not([data-page="home"]) .hero,
body:not([data-page="home"]) .page-hero {
  background-image: none !important;
}

/* 2) HOME PAGE — use the HERO section only (not the whole body) */
body[data-page="home"] .hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* fixed background that stays in place while scrolling */
  background-image: url("/assets/hero.jpg?v=12");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-attachment: fixed; /* pin the photo */
}

/* Readability mask (does NOT affect other pages) */
body[data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 0;
}

/* 3) Restore tidy hero text block + spacing */
body[data-page="home"] .hero .hero-overlay {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.55);
  padding: 2rem;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 1rem;
}

body[data-page="home"] .hero h1 {
  font-size: 2.4rem;
  line-height: 1.15;
  margin: 0 0 .5rem 0;
}

body[data-page="home"] .hero p {
  margin-top: .4rem;
  color: var(--muted);
}

/* 4) Absolute cleanup: make sure old body-level images are gone */
body[data-page="home"] {
  background-image: none !important; /* use hero-only image, not body */
}
/* ===== Switch-Cars | FINAL: Home-only fixed background + reset others ===== */

/* 0) Kill ANY leftover placeholders/layers everywhere */
body::before, body::after,
.hero::before, .hero::after,
.page-hero::before, .page-hero::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 1) Default for ALL pages = solid dark, no images */
body {
  background: var(--charcoal) !important;
  background-image: none !important;
}

/* 2) Make sure non-home pages have no big “hero gap” */
body:not([data-page="home"]) .hero,
body:not([data-page="home"]) .page-hero {
  /* remove any forced hero background/height on non-home pages */
  background-image: none !important;
  background-attachment: scroll !important;
  min-height: initial !important;   /* prevents a tall empty block */
}

/* 3) HOME PAGE ONLY — full-page, fixed background that stays on scroll
      (prefer <body data-page="home"> on index.html) */
body[data-page="home"] {
  position: relative;
}

/* One fixed layer behind ALL content; no impact on text spacing */
body[data-page="home"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;              /* sits under everything */
  pointer-events: none;

  background-image: url("/assets/hero.jpg?v=13");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* Ensure home hero itself doesn’t fight the body background */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero {
  background: transparent !important;
}

/* ---- Fallback if you don't have data-page="home" set ----
   Uncomment this block if needed, otherwise ignore.

body:has(#featured-grid) { position: relative; }
body:has(#featured-grid)::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("/assets/hero.jpg?v=13");
  background-repeat: no-repeat; background-position: center center; background-size: cover;
}
body:not(:has(#featured-grid))::before,
body:not(:has(#featured-grid))::after { content: none !important; background: none !important; }
*/
/* === Switch-Cars: Homepage fixed full-page background (no HTML changes) === */
/* Applies only on pages that have the featured grid (your home page) */
body:has(#featured-grid) {
  position: relative;
  background-color: transparent !important; /* let the image show behind */
}

/* Single fixed layer behind everything */
body:has(#featured-grid)::before {
  content: "";
  position: fixed;           /* pins to viewport */
  inset: 0;
  z-index: -1;               /* sits behind all content */
  pointer-events: none;

  /* Two stacked backgrounds: overlay PNG (top) + photo (bottom) */
  background-image:
    url("/assets/hero-overlay.png?v=4"),
    url("/assets/hero.jpg?v=4");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: contain, cover;   /* overlay stays sized, photo fills */
}
/* ===== Switch-Cars | HOME HERO FIXED SCROLLING BACKGROUND ===== */

/* Only affects the home page (index.html) */
body[data-page="home"] .hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* fixed hero background that stays still when scrolling */
  background-image: url("/assets/hero.jpg?v=14");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed; /* <- keeps it still */
}

/* readable overlay on top of the fixed photo */
body[data-page="home"] .hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35); /* darken slightly for text clarity */
  z-index: 0;
}

/* keep your hero text above the overlay */
body[data-page="home"] .hero .hero-overlay {
  position: relative;
  z-index: 1;
  background: rgba(0,0,0,0.55);
  padding: 2rem;
  border-radius: 12px;
  max-width: 900px;
  margin: 0 1rem;
}

body[data-page="home"] .hero h1 {
  font-size: 2.4rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

body[data-page="home"] .hero p {
  color: var(--muted);
  margin-top: 0.4rem;
}

/* ===== Switch-Cars | HOME fixed background — final, minimal, reliable ===== */

/* Base dark on the root (so non-home pages stay black) */
html { background: var(--charcoal) !important; }

/* Kill any body images by default (other pages) */
body {
  background-color: transparent !important;
  background-image: none !important;
  background-attachment: scroll !important;
}

/* HOME ONLY: fixed full-page background image that stays while scrolling */
body[data-page="home"] {
  /* one-line shorthand so nothing resets it */
  background: url("/assets/hero.jpg?v=15") center center / cover no-repeat fixed !important;
}

/* Ensure the hero itself is transparent on home (no extra overlays/gaps) */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero {
  background: transparent !important;
  min-height: 70vh; /* keep your hero height */
}

/* Remove any previous pseudo-elements that might create a big “placeholder” */
body::before, body::after,
.hero::before, .hero::after,
.page-hero::before, .page-hero::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}
/* ==== HOME PAGE: fixed full-page background + transparent section wrappers ==== */
/* 1) Fixed image on the HOME page only */
body[data-page="home"] {
  background: url("/assets/hero.jpg?v=20") center center / cover no-repeat fixed !important;
}

/* 2) Keep the hero itself transparent (no extra layer) */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero { background: transparent !important; }

/* 3) Make section wrappers transparent on HOME so the body image shows as you scroll */
body[data-page="home"] .content,
body[data-page="home"] .featured,
body[data-page="home"] .inventory,
body[data-page="home"] .finance-cta,
body[data-page="home"] .form-wrap,
body[data-page="home"] .contact-grid,
body[data-page="home"] .page-hero,
body[data-page="home"] main,
body[data-page="home"] section {
  background: transparent !important;
}

/* 4) Footer on HOME should also be transparent so the image continues to show */
body[data-page="home"] .site-footer {
  background: transparent !important;
}

/* 5) Do NOT touch cards/panels: they keep their dark backgrounds for readability */
/* ===== HOME PAGE — fixed background visible through full scroll ===== */

/* 1) Put the fixed image behind the entire HOME page */
body[data-page="home"] {
  background: none !important;  /* don't use body bg; we use a fixed layer */
  position: relative;
}
body[data-page="home"]::before {
  content: "";
  position: fixed;     /* pinned to viewport */
  inset: 0;
  z-index: -1;         /* behind all content */
  pointer-events: none;

  background: url("/assets/hero.jpg?v=30") center center / cover no-repeat;
}

/* 2) On HOME ONLY, make the big wrappers transparent so the image shows as you scroll */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero,
body[data-page="home"] .content,
body[data-page="home"] .featured,
body[data-page="home"] .inventory,
body[data-page="home"] .finance-cta,
body[data-page="home"] .form-wrap,
body[data-page="home"] .contact-grid,
body[data-page="home"] main,
body[data-page="home"] section,
body[data-page="home"] .site-footer {
  background: transparent !important;
}

/* 3) Remove any hero overlays/masks on HOME that could darken or cover the image */
body[data-page="home"] .hero::before,
body[data-page="home"] .page-hero::before {
  content: none !important;
  background: none !important;
}

/* 4) Leave cards/panels dark for readability (no changes needed) */
/* ==== HOME PAGE — fixed background visible the whole scroll (final) ==== */

/* 0) Kill ANY previous "home bg" attempts so nothing conflicts */
body:has(#featured-grid)::before,
body:has(#featured-grid)::after,
body:not(:has(#featured-grid))::before,
body:not(:has(#featured-grid))::after,
body::before, body::after,
.hero::before, .hero::after,
.page-hero::before, .page-hero::after {
  content: none !important;
  background: none !important;
  animation: none !important;
  box-shadow: none !important;
}

/* 1) HOME ONLY: put one fixed image behind everything */
body[data-page="home"] {
  position: relative;
  background: transparent !important;      /* don't paint over the layer */
}
body[data-page="home"]::before {
  content: "";
  position: fixed;                          /* pinned to viewport */
  inset: 0;
  z-index: -1;                              /* behind all content */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=40") center center / cover no-repeat;
}

/* 2) Make the big wrappers transparent on HOME so the image shows as you scroll */
body[data-page="home"] main,
body[data-page="home"] section,
body[data-page="home"] .container,
body[data-page="home"] .featured,
body[data-page="home"] .inventory,
body[data-page="home"] #featured-grid,
body[data-page="home"] #used-cars-grid,
body[data-page="home"] .car-grid,
body[data-page="home"] .finance-cta,
body[data-page="home"] .form-wrap,
body[data-page="home"] .contact-grid,
body[data-page="home"] .page-hero,
body[data-page="home"] .hero,
body[data-page="home"] .site-footer {
  background: transparent !important;
}

/* 3) Keep cards/panels readable (leave their dark backgrounds as-is) */
/* (no change — .car-card, .post-card, etc. keep var(--card) backgrounds) */

/* 4) Ensure non-home pages stay dark and have no fixed layer */
body:not([data-page="home"]) { background: var(--charcoal) !important; }
/* ===== HOME PAGE — hero image behind ALL featured cars (full scroll) ===== */

/* 1) On HOME ONLY, make html/body transparent so a fixed layer can show through */
html:has(body[data-page="home"]) { background: transparent !important; }
body[data-page="home"]           { background: transparent !important; }

/* 2) Pin ONE fixed image to the viewport on the HTML element (sits behind everything) */
html:has(body[data-page="home"])::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;                       /* behind all page content */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=50") center center / cover no-repeat;
}

/* 3) Ensure the home hero section itself doesn’t re-paint over it */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero{
  background: transparent !important;
}

/* 4) If any big wrappers on HOME still paint over it, force them transparent */
body[data-page="home"] main,
body[data-page="home"] section,
body[data-page="home"] .featured,
body[data-page="home"] #featured-grid,
body[data-page="home"] .inventory {
  background: transparent !important;
}
/* ===== SWITCH-CARS — HOME PAGE FULL-HEIGHT FIXED BACKGROUND (FINAL, LAST OVERRIDE) ===== */
/* Put this AT THE VERY END of style.css so it beats earlier !important resets. */

/* 1) On home only, make html/body transparent so our fixed layer can show */
html:has(body[data-page="home"]) { background: transparent !important; }
body[data-page="home"]          { background: transparent !important; }

/* 2) Pin ONE fixed image behind the entire page (home only).
      We use html::before and mark content as !important so it overrides earlier "content:none !important". */
html:has(body[data-page="home"])::before {
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: -1;                 /* sits behind all page content */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=99") center center / cover no-repeat;
}

/* 3) Make only the big wrappers transparent on HOME so the image stays visible while scrolling.
      (Cards/panels keep their dark backgrounds for readability.) */
body[data-page="home"] main,
body[data-page="home"] section,
body[data-page="home"] .featured,
body[data-page="home"] #featured-grid,
body[data-page="home"] .inventory,
body[data-page="home"] .content,
body[data-page="home"] .finance-cta,
body[data-page="home"] .form-wrap,
body[data-page="home"] .contact-grid,
body[data-page="home"] .site-footer {
  background: transparent !important;
}

/* 4) Ensure the hero block itself doesn't repaint over the fixed layer */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero {
  background: transparent !important;
}
/* === HOME: fixed full-page background that persists on scroll (final) === */
.hero {
  position: relative !important;
  background: transparent !important; /* stop the old hero bg from covering */
}

/* Pin one image to the viewport, scoped to pages that have .hero (home) */
.hero::before {
  content: "" !important;            /* override any earlier content:none */
  position: fixed;                   /* stays put while scrolling */
  inset: 0;
  z-index: -1;                       /* behind all content */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=100") center center / cover no-repeat;
}
/* === HOME PAGE — fixed background visible to the bottom (stacking-context fix) === */

/* Scope to HOME in two ways (either one will match):
   - <body data-page="home">
   - a page that contains #featured-grid (your home)
*/

/* 1) Make html/body transparent on HOME so our layer can show through */
html:has(body[data-page="home"]), 
html:has(#featured-grid) {
  background: transparent !important;
}
body[data-page="home"],
body:has(#featured-grid) {
  background: transparent !important;
  position: relative !important; /* creates a stacking context we can control */
}

/* 2) The fixed background layer — sits BETWEEN html background and page content */
body[data-page="home"]::before,
body:has(#featured-grid)::before {
  content: "" !important;                        /* override any earlier content:none */
  position: fixed;                               /* pinned to viewport */
  inset: 0;
  z-index: 0;                                    /* <- key: not -1 */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=120") center center / cover no-repeat;
}

/* 3) Lift all page content ABOVE the fixed layer so it never gets covered by black */
body[data-page="home"] > *,
body:has(#featured-grid) > * {
  position: relative;
  z-index: 1;                                    /* content renders above z:0 layer */
}

/* 4) Ensure the hero itself doesn't repaint over the image */
body[data-page="home"] .hero,
body:has(#featured-grid) .hero {
  background: transparent !important;
}
/* ===== FINAL FIX — keep hero.jpg visible behind the whole page while scrolling ===== */
/* 1) Use the html background for all non-home pages */
html { background: var(--charcoal) !important; }

/* 2) Make the body transparent everywhere so a fixed layer can sit between html and content */
body { background: transparent !important; }

/* 3) Pin ONE fixed image to the viewport. We scope it to pages that actually have .hero
      by attaching the layer to .hero (which only exists on the home page). */
.hero { position: relative !important; }

/* The fixed layer sits BETWEEN the html background (black) and your page content */
.hero::before {
  content: "" !important;                 /* override any earlier content:none */
  position: fixed;                        /* pinned to the viewport */
  inset: 0;
  z-index: 0;                             /* key: above html background, below content */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=200") center center / cover no-repeat;
}

/* 4) Lift all page content above the fixed layer so nothing covers the image */
body > * { position: relative; z-index: 1; }

/* 5) Ensure the hero itself doesn't paint over the layer */
.hero, .page-hero { background: transparent !important; }
/* ===== HOME PAGE — full-page fixed background, visible to the bottom (FINAL) ===== */

/* Use the HTML element for the image so nothing in <body> covers it */
html:has(#featured-grid) {
  /* fixed, full-viewport background */
  background: url("/assets/hero.jpg?v=999") center center / cover no-repeat fixed !important;
}

/* Make body transparent on the home page so the html background shows through */
body:has(#featured-grid) {
  background: transparent !important;
}

/* Keep the hero strip itself transparent (we're using the page background now) */
body:has(#featured-grid) .hero,
body:has(#featured-grid) .page-hero {
  background: transparent !important;
}

/* Make the big wrappers transparent on HOME so the image is visible between cards */
body:has(#featured-grid) main,
body:has(#featured-grid) section,
body:has(#featured-grid) .featured,
body:has(#featured-grid) .inventory,
body:has(#featured-grid) .content,
body:has(#featured-grid) .finance-cta,
body:has(#featured-grid) .form-wrap,
body:has(#featured-grid) .contact-grid,
body:has(#featured-grid) .site-footer {
  background: transparent !important;
}
/* === Page title spacing fix (Sell Your Car / Finance / Blog) === */
/* Keeps titles clear of the sticky header and adds a small gap to the sub-line */
:root{
  /* Tweak if your header is taller/shorter (try 72px if still tight) */
  --header-h: 64px;
}

/* Ensure header stays above content */
.site-header{
  position: sticky;
  top: 0;
  z-index: 200;
}

/* Add safe space under the header for all hero title areas */
.page-hero{
  /* top padding includes header height so content never sits underneath it */
  padding: calc(1rem + var(--header-h)) 1rem 1.25rem;
}

/* Clear, readable title + subtext spacing */
.page-hero h1{
  line-height: 1.2;
  margin-bottom: 0.5rem;   /* space between the title and the line below */
}

.page-hero p{
  margin-top: 0.25rem;     /* gentle gap so it doesn’t feel cramped */
}

/* Optional: if any page doesn’t use .page-hero and still looks bunched,
   this gives a small universal top offset to the first content section */
.site-header + section{
  scroll-margin-top: var(--header-h);
}
/* === Header overlap fix (global + safe for Sell Your Car / Finance / Blog) === */
:root{
  /* Adjust if your header is taller/shorter */
  --header-h: 72px;
}

/* Ensure header actually reserves space above content */
.site-header{
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--charcoal, #111111); /* avoid transparent overlap */
}

/* Push main content down below the sticky header */
body > main,
main.container{
  padding-top: calc(var(--header-h) + 12px);
}

/* Tighten h1 spacing so it doesn’t look double-spaced */
h1,
.page-title{
  margin-top: 0;
  line-height: 1.2;
}

/* If a page uses a hero/top section, give it the same safe top space */
.page-hero,
.hero{
  padding-top: calc(var(--header-h) + 16px);
}

/* Smooth in-page anchor jumps (so titles don't hide under header when linking) */
html{ scroll-padding-top: var(--header-h); }
/* === Page title line-break + spacing fix (Sell Your Car / Finance / Blog) === */
/* Force headings/subtext back to block flow in case a reset made them inline */
.page-hero h1,
h1.page-title {
  display: block !important;
  margin: 0 0 0.5rem !important;   /* gap under the title */
  line-height: 1.2;
}

/* Ensure the line under the title is its own block with a little breathing room */
.page-hero h1 + p,
h1.page-title + p,
.page-hero p.page-subtitle {
  display: block !important;
  margin: 0.25rem 0 0.75rem !important;  /* small gap above + below */
}

/* If a sticky header exists, keep a safe top offset for hero areas */
:root { --header-h: 72px; }
.page-hero { padding-top: calc(var(--header-h) + 16px); }
html { scroll-padding-top: var(--header-h); }
/* === Page title + subtitle spacing fix === */
h1 {
  display: block;
  margin: 0 0 0.5rem;
  font-weight: 700;
  line-height: 1.2;
}

.subtitle {
  display: block;
  margin: 0 0 1.5rem;
  color: var(--muted, #b7b7b7);
  font-size: 1rem;
}
/* === Hero title stacking + spacing (Sell Your Car / Finance / Blog) === */
:root { --header-h: 72px; } /* adjust if your sticky header is taller */

.page-hero{
  display: flex !important;
  flex-direction: column !important;  /* stack title and subtitle */
  align-items: center;                 /* keep centered as per your layout */
  gap: 0.5rem;                         /* space between title and line below */
  padding: calc(var(--header-h) + 16px) 1rem 1rem;  /* clear the sticky header */
}

.page-hero h1,
.page-hero p{
  margin: 0 !important;
  line-height: 1.2;
  white-space: normal !important;      /* defeat any nowrap from global resets */
}

.page-hero p{ color: var(--muted, #b7b7b7); }

/* Smooth anchor jumps so titles don't hide under the header */
html { scroll-padding-top: var(--header-h); }
.fca-disclaimer {
  font-size: 0.85rem;
  color: var(--muted, #b7b7b7);
  margin-top: 1.5rem;
  border-top: 1px solid var(--border, #242424);
  padding-top: 1rem;
  line-height: 1.5;
}
.fca-disclaimer strong {
  color: var(--switchblue, #00CFEA);
}
/* FCA disclaimer style */
.fca-disclaimer {
  text-align: left;                 /* ← makes it align left */
  font-size: 0.85rem;
  color: var(--muted, #b7b7b7);
  margin: 1.5rem auto 0;
  border-top: 1px solid var(--border, #242424);
  padding-top: 1rem;
  line-height: 1.5;
  max-width: 1000px;                /* keeps it neat on wide screens */
}
.fca-disclaimer strong {
  color: var(--switchblue, #00CFEA);
}
/* --- FCA disclaimer: always left-aligned --- */
.fca-disclaimer {
  text-align: left !important;      /* overrides footer center alignment */
  font-size: 0.85rem;
  color: var(--muted, #b7b7b7);
  margin: 1.5rem auto 0;
  border-top: 1px solid var(--border, #242424);
  padding-top: 1rem;
  line-height: 1.5;
  max-width: 1000px;                /* keeps tidy width */
}
.fca-disclaimer strong {
  color: var(--switchblue, #00CFEA);
}
/* --- Regulatory Page Alignment Fix --- */
[data-page="regulatory-information"] .site-footer,
[data-page="regulatory-information"] .site-footer .footer-info,
[data-page="regulatory-information"] .fca-disclaimer {
  text-align: left !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
}

[data-page="regulatory-information"] .site-footer p,
[data-page="regulatory-information"] .site-footer a {
  text-align: left !important;
  display: block;
}
/* --- Regulatory Page Footer Alignment Fix --- */
html[data-page="regulatory-information"] .site-footer,
html[data-page="regulatory-information"] .footer-info,
html[data-page="regulatory-information"] .fca-disclaimer {
  text-align: left !important;
  margin-left: 0 !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* restore footer links inline, not stacked */
html[data-page="regulatory-information"] .site-footer p a {
  display: inline !important;
  margin-right: 10px;
}

html[data-page="regulatory-information"] .site-footer p {
  text-align: left !important;
}
.logo img {
  height: 50px;
  width: auto;
}
/* --- Logo adjustments (transparent logo fix) --- */
.logo img {
  height: 80px;
  width: auto;
  display: block;
  object-fit: contain;
  background: none;
  mix-blend-mode: lighten;  /* or 'screen' if it still looks too dark */
  filter: brightness(1.2);
}

.logo img:hover {
  filter: brightness(1.4);
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}
/* --- Larger transparent logo (Switch-Cars header) --- */
.logo img {
  height: 110px;              /* increase size */
  width: auto;
  display: block;
  object-fit: contain;
  background: none;
  mix-blend-mode: lighten;    /* or 'screen' if it's too dim */
  filter: brightness(1.2);
  margin-top: -10px;          /* slightly lift to align vertically */
}

.logo img:hover {
  filter: brightness(1.4);
  transform: scale(1.05);
  transition: all 0.2s ease-in-out;
}

/* optional: increase header height slightly to balance spacing */
.site-header {
  padding: 1rem 2rem;
  height: 120px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* --- Header alignment + larger logo --- */
.site-header {
  background: var(--charcoal);
  color: var(--offwhite);
  display: flex;
  justify-content: space-between; /* keeps logo left, nav right */
  align-items: center;
  padding: 1rem 3rem;              /* wider padding for balance */
  height: 120px;
}

/* Logo sizing */
.logo img {
  height: 110px;                  /* adjust until perfect */
  width: auto;
  display: block;
  object-fit: contain;
  background: none;
  mix-blend-mode: lighten;
  filter: brightness(1.2);
  margin-top: 0;                  /* centers vertically */
}

/* Nav links (centred nicely again) */
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 2rem;                      /* space between links */
  justify-content: flex-end;
  align-items: center;
  margin: 0;
}

.main-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 600;
}

.main-nav a:hover {
  color: var(--switchblue);
}

/* Optional: responsive adjustment for mobile */
@media (max-width: 768px) {
  .logo img {
    height: 70px;
  }
  .site-header {
    flex-direction: column;
    height: auto;
  }
  .main-nav ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* --- Switch-Cars header: logo hard-left, menu right, larger logo --- */
.site-header {
  background: var(--charcoal);
  color: var(--offwhite);
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-left: 0;          /* hard-left */
  padding-right: 2.5rem;    /* breathing room on the right */
  height: 128px;            /* taller bar to fit bigger logo */
}

/* keep logo at the very left edge */
.site-header .logo {
  margin-left: 0;
  margin-right: auto;       /* pushes nav to the right */
}

/* bigger transparent logo */
.logo img {
  height: 120px;            /* adjust up/down (try 130px if you want larger) */
  width: auto;
  display: block;
  object-fit: contain;
  background: none;
  mix-blend-mode: lighten;  /* or 'screen' if you want more pop */
  filter: brightness(1.15);
}

/* nav locked to the right with even spacing */
.main-nav {
  margin-left: auto;        /* sticks nav to the right side */
}

.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  list-style: none;
  gap: 2.25rem;             /* even spacing between items */
  margin: 0;
}

/* responsive tidy-up */
@media (max-width: 900px) {
  .site-header {
    height: 100px;
    padding-right: 1rem;
  }
  .logo img { height: 80px; }
  .main-nav ul { gap: 1.25rem; }
}
/* --- Switch-Cars Header: large logo, hard-left alignment, tidy right menu --- */
.site-header {
  background: var(--charcoal);
  color: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem 0 0;        /* no left padding, only right */
  height: 140px;              /* taller bar to fit large logo */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* LOGO — fully left aligned */
.site-header .logo {
  margin: 0;
  padding-left: 0;            /* touches the edge */
  display: flex;
  align-items: center;
}

/* LARGE transparent logo */
.logo img {
  height: 140px;              /* adjust 140-160px for desired size */
  width: auto;
  object-fit: contain;
  display: block;
  background: none;
  mix-blend-mode: lighten;    /* or 'screen' for brighter neon effect */
  filter: brightness(1.2);
  margin-left: 0;             /* ensures it hugs the left */
}

/* NAVIGATION — pinned right with consistent spacing */
.main-nav {
  margin-left: auto;
}
.main-nav ul {
  display: flex;
  list-style: none;
  gap: 2.5rem;                /* spacing between links */
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
}
.main-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 600;
}
.main-nav a:hover {
  color: var(--switchblue);
}

/* Responsive tweak for tablets/phones */
@media (max-width: 900px) {
  .site-header {
    flex-direction: column;
    height: auto;
    padding: 0.5rem 1rem;
  }
  .logo img { height: 90px; }
  .main-nav ul { gap: 1.25rem; }
}
/* --- Switch-Cars Header: ultra-left large transparent logo --- */
.site-header {
  background: var(--charcoal);
  color: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3rem 0 0;       /* remove left padding, keep right space */
  height: 180px;             /* taller bar to fit 220px logo nicely */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* LOGO: fully to the left edge */
.site-header .logo {
  margin: 0;
  padding-left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-left: -15px;        /* pulls slightly past container for edge alignment */
}

/* LARGE TRANSPARENT LOGO */
.logo img {
  height: 220px;             /* make logo large */
  width: auto;
  object-fit: contain;
  display: block;
  background: none;
  mix-blend-mode: lighten;   /* or 'screen' for brighter glow */
  filter: brightness(1.25);  /* brighten for clarity */
  margin-left: 0;
  margin-top: -10px;         /* minor vertical centering tweak */
}

/* NAVIGATION: right side spacing + balance */
.main-nav {
  margin-left: auto;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 2.5rem;               /* even spacing between items */
  justify-content: flex-end;
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 600;
}

.main-nav a:hover {
  color: var(--switchblue);
}

/* RESPONSIVE — scale logo smaller on tablets/phones */
@media (max-width: 900px) {
  .site-header {
    flex-direction: column;
    height: auto;
    padding-right: 1rem;
  }
  .logo img {
    height: 120px;
    margin-top: 0;
  }
  .main-nav ul {
    gap: 1.25rem;
    flex-wrap: wrap;
    justify-content: center;
  }
}
/* --- Header: full-width, logo far left, nav far right --- */
.site-header .container,
.site-header .header-inner {
  max-width: 100% !important;   /* stop centering/limiting width */
  width: 100%;
  margin: 0;
  padding-left: 1.25rem;         /* small breathing space on the left */
  padding-right: 2.5rem;         /* space on the right edge */
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Logo hard-left & big (~220px) */
.site-header .logo {
  margin: 0 !important;          /* cancel any previous negative margins */
}
.logo img {
  height: 220px;                  /* adjust if needed */
  width: auto;
  display: block;
  object-fit: contain;
  background: none;
  mix-blend-mode: lighten;        /* or 'screen' if you want more pop */
  filter: brightness(1.2);
  margin: 0 !important;           /* ensure it sits flush */
}

/* Menu hard-right with even spacing */
.main-nav { margin-left: auto; }
.main-nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3rem;                      /* spacing between links */
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Responsive tidy-up */
@media (max-width: 900px) {
  .site-header .container,
  .site-header .header-inner {
    flex-direction: column;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .logo img { height: 120px; }
  .main-nav ul { gap: 1.25rem; flex-wrap: wrap; justify-content: center; }
}
/* --- Two-bar header layout --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Top Nav Bar */
.top-nav {
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.9rem 2rem;
}
.top-nav .menu {
  display: flex;
  justify-content: center;  /* centers menu horizontally */
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 700;
}
.top-nav a:hover {
  color: var(--switchblue);
}

/* Logo Bar (independent control) */
:root {
  --logoH: 220px;  /* adjust this to change logo size easily */
}
.brand-bar {
  background: var(--charcoal);
  display: flex;
  justify-content: center;  /* centers logo */
  align-items: center;
  padding: 1rem 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.brand-bar .logo img {
  height: var(--logoH);
  width: auto;
  object-fit: contain;
  display: block;
  background: none;
  mix-blend-mode: lighten;
  filter: brightness(1.15);
}

/* Responsive */
@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav .menu {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}
/* --- Fix two-bar header: stack bars, center contents, reset old overrides --- */

/* 1) Stack the bars vertically (not side-by-side) */
.site-header {
  display: block !important;      /* overrides old flex header */
  position: sticky;
  top: 0;
  z-index: 100;
}

/* 2) Top nav bar — centered links */
.top-nav {
  width: 100%;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: var(--charcoal);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0.9rem 2rem;
}
.top-nav .menu {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 3) Brand bar — logo only, centered, independent size */
:root { --logoH: 220px; }          /* adjust this to resize the logo */
.brand-bar {
  width: 100%;
  display: flex !important;
  justify-content: center !important;  /* centered logo bar */
  align-items: center !important;
  background: var(--charcoal);
  padding: 1rem 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

/* 4) Reset any old logo tweaks (negative margins / floats / positions) */
.site-header .logo {
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}
.brand-bar .logo img {
  height: var(--logoH) !important;
  width: auto;
  display: block;
  object-fit: contain;
  margin: 0 !important;
  background: none;
  mix-blend-mode: lighten;
  filter: brightness(1.15);
}

/* 5) Responsive tidy-up */
@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav { padding: 0.75rem 1rem; }
  .top-nav .menu { gap: 1.25rem; flex-wrap: wrap; }
}
/* Stack the two bars; keep both centered */
.site-header { display: block; position: sticky; top: 0; z-index: 100; }

/* --- Brand bar (logo only, centered) --- */
:root { --logoH: 220px; }           /* change this to resize the logo */
.brand-bar {
  background: var(--charcoal);
  display: flex; justify-content: center; align-items: center;
  padding: 1rem 0;
  /* optional: remove the shadow if you saw a box */
  box-shadow: none;
}
.brand-bar .logo img {
  height: var(--logoH); width: auto; display: block; object-fit: contain;
  background: none; mix-blend-mode: lighten; filter: brightness(1.15);
}

/* --- Top nav bar (links centered) --- */
.top-nav {
  background: var(--charcoal);
  border-top: 1px solid rgba(255,255,255,0.06);  /* subtle separator */
  padding: 0.9rem 2rem;
}
.top-nav .menu {
  display: flex; justify-content: center; align-items: center;
  gap: 2.5rem; list-style: none; margin: 0; padding: 0;
}
.top-nav a { color: var(--offwhite); text-decoration: none; font-weight: 700; }
.top-nav a:hover { color: var(--switchblue); }

/* Responsive */
@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav { padding: 0.75rem 1rem; }
  .top-nav .menu { gap: 1.25rem; flex-wrap: wrap; }
}
/* --- Fix for header + nav positioning (separate from content) --- */

/* keep both bars stacked cleanly */
.site-header {
  display: block;
  position: relative; /* no longer sticky to avoid overlap */
  z-index: 50;
  margin: 0;
  padding: 0;
}

/* --- Logo banner --- */
.brand-bar {
  background: var(--charcoal);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0 1.5rem;   /* extra bottom padding to give breathing room */
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.brand-bar .logo img {
  height: var(--logoH);
  width: auto;
  display: block;
}

/* --- Navigation banner --- */
.top-nav {
  background: var(--charcoal);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 0;           /* space inside nav */
  border-bottom: 1px solid rgba(255,255,255,0.1);
  position: relative;
  z-index: 60;               /* ensures it stays above hero background */
}
.top-nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 700;
  transition: color 0.3s ease;
}
.top-nav a:hover { color: var(--switchblue); }

/* --- Content spacing after the header --- */
main, #featured-grid, section {
  margin-top: 2rem !important; /* pushes the Featured Vehicles section down */
}

/* --- Responsive adjustment --- */
@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav .menu {
    flex-wrap: wrap;
    gap: 1.25rem;
  }
}
/* ===== 3–row header: Logo bar (top), Nav bar (middle), Content below ===== */

/* RESET old header overrides so bars stack and don't overlap content */
.site-header {
  display: block !important;
  position: relative !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 10;
}
.site-header .logo,
.site-header .logo img {
  margin: 0 !important;
  position: static !important;
}

/* 1) LOGO BAR — centered logo on its own banner (top row) */
:root { --logoH: 220px; }            /* change this to resize the logo */
.brand-bar {
  background: var(--charcoal);
  width: 100%;
  text-align: center;
  padding: 16px 0 20px;              /* space around the logo */
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-bar .logo img {
  height: var(--logoH) !important;
  width: auto;
  display: inline-block;
  background: none;
  mix-blend-mode: lighten;           /* or 'screen' for extra pop */
  filter: brightness(1.15);
}

/* 2) NAV BAR — centered links on their own banner (middle row) */
.top-nav {
  background: var(--charcoal);
  width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.top-nav .menu {
  display: flex;
  justify-content: center;           /* center the links */
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 14px 0;
}
.top-nav a {
  color: var(--offwhite);
  text-decoration: none;
  font-weight: 700;
}
.top-nav a:hover { color: var(--switchblue); }

/* 3) CONTENT — ensure it's clearly below the nav (bottom row) */
main, #featured-grid, .hero, .banner, section {
  /* add a little top spacing so "Featured Vehicles" never touches the nav */
  margin-top: 20px !important;
}

/* Responsive */
@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav .menu { gap: 1.25rem; flex-wrap: wrap; }
}
/* --- Put NAV directly under the LOGO bar; keep content below --- */

/* stack header bars only; no side-by-side, no sticky */
.site-header{display:block!important;position:relative!important;margin:0!important;padding:0!important;z-index:10;}
.brand-bar{margin:0!important;padding:16px 0 18px;background:var(--charcoal);border-bottom:1px solid rgba(255,255,255,.08);}
.brand-bar .logo img{height:var(--logoH,220px);width:auto;display:block;object-fit:contain;background:none;mix-blend-mode:lighten;filter:brightness(1.15);}

/* NAV: directly under logo (not fixed, not sticky, not bottom) */
.top-nav{
  position:relative!important; top:auto!important; bottom:auto!important; left:auto!important; right:auto!important;
  display:flex!important; justify-content:center!important; align-items:center!important;
  background:var(--charcoal); padding:12px 0; margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.10);
  z-index:20;
}
.top-nav .menu{display:flex;gap:2.5rem;list-style:none;margin:0;padding:0;}
.top-nav a{color:var(--offwhite);text-decoration:none;font-weight:700;}
.top-nav a:hover{color:var(--switchblue);}

/* Ensure page content starts AFTER both bars */
header.site-header + *{margin-top:24px!important;}
/* === Two-bar header: logo banner above, nav banner below === */

/* reset old flex/sticky header rules */
.site-header { display:block !important; position:relative !important; margin:0; padding:0; z-index:10; }
.site-header .logo, .site-header .logo img { margin:0 !important; position:static !important; }

/* 1) Logo banner (centered) */
:root { --logoH: 220px; }          /* change this to resize only the logo */
.brand-bar {
  background: var(--charcoal);
  display:flex; justify-content:center; align-items:center;
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-bar .logo img {
  height: var(--logoH); width:auto; display:block; object-fit:contain;
  background:none; mix-blend-mode:lighten; filter:brightness(1.15);
}

/* 2) Nav banner (centered links) */
.top-nav {
  background: var(--charcoal);
  display:flex; justify-content:center; align-items:center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.top-nav .menu {
  display:flex; gap:2.5rem; list-style:none; margin:0; padding:0;
}
.top-nav a { color: var(--offwhite); text-decoration:none; font-weight:700; }
.top-nav a:hover { color: var(--switchblue); }

/* 3) Make sure content sits below both banners */
header.site-header + main { margin-top: 20px; }

@media (max-width: 900px) {
  :root { --logoH: 130px; }
  .top-nav .menu { gap: 1.25rem; flex-wrap: wrap; }
}
/* ===== FINAL PATCH: 3 clean rows =====
   1) Logo bar (centered)
   2) Nav bar (centered links)
   3) Page content (“Featured Vehicles” etc.) clearly below
======================================= */

/* Kill old header flex/sticky rules */
.site-header { display:block !important; position:relative !important; margin:0 !important; padding:0 !important; z-index:10; }
.site-header .header-inner,
.site-header .container { all: unset; }  /* stop any old layout container from interfering */

/* ---------- Row 1: LOGO BAR ---------- */
:root { --logoH: 220px; }                 /* change this number to resize ONLY the logo */
.brand-bar{
  background:#151515;                     /* your charcoal */
  width:100%;
  text-align:center;
  padding: 18px 0 20px;                   /* space around logo */
  border-bottom:1px solid rgba(255,255,255,.08);
  position:relative; z-index:20;
}
.brand-bar .logo,
.brand-bar .logo img{ margin:0 !important; }
.brand-bar .logo img{
  height:var(--logoH) !important;
  width:auto; display:inline-block; object-fit:contain;
  background:none; mix-blend-mode:lighten; filter:brightness(1.15);
}

/* ---------- Row 2: NAV BAR ---------- */
.top-nav{
  background:#151515;
  width:100%;
  position:relative !important;           /* not sticky/fixed */
  z-index:21;
  border-bottom:1px solid rgba(255,255,255,.1);
  padding: 14px 0;
}
.top-nav nav{ width:100%; }
.top-nav .menu{
  display:flex !important;
  justify-content:center !important;      /* CENTER the links */
  align-items:center !important;
  gap:2.5rem;
  list-style:none; margin:0; padding:0;
}
.top-nav a{ color:#eee; text-decoration:none; font-weight:700; }
.top-nav a:hover{ color:var(--switchblue); }

/* ---------- Row 3: CONTENT SEPARATION ---------- */
header.site-header + main,
header.site-header + .container,
header.site-header + section{
  margin-top: 28px !important;            /* push content DOWN below nav */
}

/* Safety: nothing from old header should float/overlap */
.site-header *{ float:none !important; }

/* Responsive */
@media (max-width: 900px){
  :root { --logoH: 130px; }
  .top-nav{ padding: 10px 0; }
  .top-nav .menu{ gap:1.25rem; flex-wrap:wrap; }
}
/* ===== 3 clean rows (final lock) ===== */

/* kill any old header flex/sticky rules */
.site-header { display:block !important; position:relative !important; margin:0 !important; padding:0 !important; z-index:5; }
.site-header .container, .site-header .header-inner { all: unset; }

/* 1) LOGO BAR (top) */
:root { --logoH: 220px; }   /* change to resize logo only */
.brand-bar{
  background:#151515;
  text-align:center;
  padding:18px 0 20px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.brand-bar .logo img{
  height:var(--logoH) !important;
  width:auto; display:inline-block; object-fit:contain;
  background:none; mix-blend-mode:lighten; filter:brightness(1.15);
  margin:0 !important;
}

/* 2) NAV BAR (middle) */
.top-nav{
  background:#151515;                 /* solid strip */
  border-bottom:1px solid rgba(255,255,255,.1);
  padding:14px 0;                     /* inner height */
  position:relative !important;       /* not sticky/fixed */
  z-index:6;                          /* above page bg only */
}
.top-nav .menu{
  display:flex !important;
  justify-content:center !important;  /* centered links */
  align-items:center !important;
  gap:2.5rem;
  list-style:none; margin:0; padding:0;
}
.top-nav a{ color:#eee; text-decoration:none; font-weight:700; }
.top-nav a:hover{ color:var(--switchblue); }

/* 3) CONTENT (bottom) — ensure clear gap below nav */
header.site-header + main{
  margin-top: 28px !important;        /* pushes Featured down */
}
.page-title{
  margin-top: 0 !important;           /* avoid double spacing */
}

/* safety: nothing from old rules should float/overlap */
.site-header *{ float:none !important; }
/* ===== Compact, clean 3-row header ===== */

/* reset any old header layout */
.site-header { display:block !important; margin:0 !important; padding:0 !important; }

/* 1) LOGO BANNER (tight) */
:root{
  --logoH: 160px;     /* <-- change this only to resize the logo */
  --logoPad: 8px;     /* top/bottom padding around the logo strip */
}
.brand-bar{
  background:#151515;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:center;
  padding: var(--logoPad) 0;  /* compact strip */
}
.brand-bar .logo{ display:inline-block; line-height:0; } /* kill extra line height */
.brand-bar .logo img{
  height: var(--logoH);
  width:auto;
  display:block;              /* removes baseline gap */
  object-fit:contain;
  margin:0;
  background:none;
  mix-blend-mode:lighten;
  filter:brightness(1.12);
}

/* 2) NAV BANNER (centered links) */
.top-nav{
  background:#151515;
  border-bottom:1px solid rgba(255,255,255,.10);
  padding: 12px 0;            /* height of the nav strip */
}
.top-nav .menu{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 2.25rem;               /* even spacing */
  list-style:none;
  margin:0; padding:0;
}
.top-nav a{ color:#eee; text-decoration:none; font-weight:700; }
.top-nav a:hover{ color:var(--switchblue); }

/* 3) CONTENT — give the section clear space below nav */
header.site-header + main{ margin-top: 36px; }  /* adjust if you want more/less gap */

/* Responsive */
@media (max-width: 900px){
  :root{ --logoH: 200px; --logoPad: 6px; }
  .top-nav .menu{ gap:1.1rem; flex-wrap:wrap; }
}
/* remove any hero/background showing above the header */
body {
  margin: 0;
  padding: 0;
  background: #151515; /* same charcoal as header */
}
/* ===== Transparent Header Overlay ===== */

/* make both header bars see-through */
.brand-bar {
  background: rgba(21, 21, 21, 0.65);   /* black at 65% opacity */
  backdrop-filter: blur(6px);           /* soft glass effect (optional) */
  -webkit-backdrop-filter: blur(6px);   /* Safari support */
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.top-nav {
  background: rgba(21, 21, 21, 0.75);   /* slightly stronger for readability */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* keep everything else normal */
.top-nav a { color: #fff; }
.top-nav a:hover { color: var(--switchblue); }
/* ===== FULL TRANSPARENT HEADER (logo + nav) ===== */

/* Logo banner (top) — transparent black with subtle blur */
.brand-bar {
  background: rgba(21, 21, 21, 0.55);   /* 55% opaque black */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
  padding: 8px 0 10px;
  position: relative;
  z-index: 20;
}
.brand-bar .logo {
  display: inline-block;
  line-height: 0;
}
.brand-bar .logo img {
  height: var(--logoH, 200px);
  width: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.15) drop-shadow(0 0 4px rgba(0,0,0,0.6)); /* improves contrast */
}

/* Nav banner (below) — slightly darker for readability */
.top-nav {
  background: rgba(21, 21, 21, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 12px 0;
  position: relative;
  z-index: 21;
}
.top-nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.top-nav a:hover {
  color: var(--switchblue);
}

/* Ensure content starts below both bars */
header.site-header + main {
  margin-top: 40px;
}
/* === Transparent header fix (logo + nav both overlay hero) === */

.site-header {
  position: absolute; /* float header over hero image */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* top logo bar */
.brand-bar {
  background: rgba(0, 0, 0, 0.45);  /* 45% opacity black */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 10px 0 12px;
}

/* nav bar */
.top-nav {
  background: rgba(0, 0, 0, 0.55);  /* slightly darker for contrast */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
}

.top-nav a { color: #fff; }
.top-nav a:hover { color: var(--switchblue); }

/* logo image style */
.brand-bar .logo img {
  height: var(--logoH, 200px);
  width: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.2);
}
/* === Transparent Logo + Nav Header Overlay === */

.site-header {
  position: absolute;     /* floats header over hero image */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

/* --- Top logo banner --- */
:root { --logoH: 200px; } /* change to resize only the logo */
.brand-bar {
  background: rgba(0, 0, 0, 0.45);  /* 45% opaque black */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  text-align: center;
  padding: 10px 0 12px;
}
.brand-bar .logo {
  display: inline-block;
  line-height: 0;
}
.brand-bar .logo img {
  height: var(--logoH);
  width: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* --- Navigation banner --- */
.top-nav {
  background: rgba(0, 0, 0, 0.55);  /* slightly darker for contrast */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
}
.top-nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.top-nav a:hover {
  color: var(--switchblue);
}

/* --- Space below transparent header so content isn’t hidden --- */
header.site-header + main {
  margin-top: 260px;  /* matches combined height of logo + nav */
}
/* === Put hero image behind EVERYTHING (incl. header) === */
html, body { height: 100%; margin: 0; }
body {
  background: #000; /* fallback */
}
body::before {
  content: "";
  position: fixed;       /* stays behind even when scrolling */
  inset: 0;
  background: url("assets/hero.jpg") center / cover no-repeat;
  z-index: -1;           /* behind all content */
  pointer-events: none;
}

/* Optional: subtle darken for readability at top */
body::after {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 420px;         /* fade height; adjust if needed */
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.45) 0%,
    rgba(0,0,0,0.25) 60%,
    rgba(0,0,0,0.00) 100%
  );
  z-index: 0;
  pointer-events: none;
}

/* === Transparent header overlay (logo + nav) === */
.site-header {
  position: absolute;    /* overlay on the background image */
  top: 0; left: 0; width: 100%;
  z-index: 100;
}

/* Logo bar (lighter tint) */
:root { --logoH: 200px; }       /* bump this if you want a bigger logo */
.brand-bar {
  background: rgba(0,0,0,0.25); /* more see-through */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 8px 0 10px;
}
.brand-bar .logo { display: inline-block; line-height: 0; }
.brand-bar .logo img {
  height: var(--logoH);
  width: auto; display: block; margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* Nav bar (slightly darker for contrast) */
.top-nav {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  padding: 10px 0;
}
.top-nav .menu {
  display:flex; justify-content:center; align-items:center;
  gap: 2.25rem; list-style:none; margin:0; padding:0;
}
.top-nav a { color: #fff; text-decoration: none; font-weight: 700; }
.top-nav a:hover { color: var(--switchblue); }

/* Push main content below transparent header (logo + nav total height) */
header.site-header + main { margin-top: 260px; }
/* === Put the hero image BEHIND the whole page (incl. header) === */
html, body { height: 100%; margin: 0; }
body {
  background: transparent !important;      /* remove solid black */
}
body::before {
  content: "";
  position: fixed;                          /* stays at the top */
  inset: 0;
  background: url("assets/hero.jpg") center / cover no-repeat;
  z-index: -1;                              /* behind everything */
  pointer-events: none;
}

/* === Transparent header overlay (logo + nav) === */
.site-header {
  position: absolute;                       /* sits OVER the image */
  top: 0; left: 0; width: 100%;
  z-index: 100;
}

/* Logo bar — make sure it's actually see-through */
:root { --logoH: 200px; }                   /* adjust logo size here */
.brand-bar {
  background: rgba(0,0,0,0.28) !important;  /* lighter tint */
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 8px 0 10px;
}
.brand-bar .logo { display: inline-block; line-height: 0; }
.brand-bar .logo img {
  height: var(--logoH);
  width: auto; display: block; margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* Nav bar — slightly darker so links are readable */
.top-nav {
  background: rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
}
.top-nav .menu {
  display:flex; justify-content:center; align-items:center;
  gap: 2.25rem; list-style:none; margin:0; padding:0;
}
.top-nav a { color:#fff; font-weight:700; text-decoration:none; }
.top-nav a:hover { color: var(--switchblue); }

/* Make sure content starts below the header overlay */
header.site-header + main { margin-top: 260px; }  /* tweak if you change --logoH */
/* === Force hero background to fill the very top of the page === */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

/* full-page background image behind everything */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("assets/hero.jpg") center top / cover no-repeat;
  z-index: -1;
  pointer-events: none;
}

/* transparent header overlays */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}

:root { --logoH: 200px; }

.brand-bar {
  background: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 8px 0 10px;
}
.brand-bar .logo img {
  height: var(--logoH);
  width: auto;
  display: block;
  margin: 0 auto;
  mix-blend-mode: lighten;
  filter: brightness(1.15) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

.top-nav {
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 10px 0;
}
.top-nav .menu {
  display:flex; justify-content:center; align-items:center;
  gap: 2.25rem; list-style:none; margin:0; padding:0;
}
.top-nav a { color:#fff; font-weight:700; text-decoration:none; }
.top-nav a:hover { color: var(--switchblue); }

header.site-header + main {
  margin-top: 260px;
}
/* ===== Switch-Cars — Transparent header over background (FINAL PATCH) =====
   Scopes to the HOME page only. Remove [data-page="home"] if you want it everywhere.
   Place AT THE VERY END so it beats all earlier rules.
*/
:root{
  --logoH: 200px;                  /* logo height (updates spacing below) */
  --hdrTint: rgba(0,0,0,0.28);     /* top/logo bar tint */
  --navTint: rgba(0,0,0,0.38);     /* nav bar tint (slightly darker for text contrast) */
  --hdrBlur: 6px;                  /* glass blur strength */
}

/* 1) Float the header over the page background and make it see-through */
body[data-page="home"] .site-header{
  position: absolute !important;
  top: 0; left: 0; width: 100%;
  z-index: 1000;
  background: transparent !important;
  box-shadow: none !important;
}

/* 2) Make the two bars translucent (glass) instead of solid black */
body[data-page="home"] .brand-bar{
  background: var(--hdrTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
body[data-page="home"] .top-nav{
  background: var(--navTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,0.10);
}

/* 3) Kill any overlays that might be darkening the very top */
body[data-page="home"]::after,
body[data-page="home"] .site-header::before,
body[data-page="home"] .brand-bar::before,
body[data-page="home"] .top-nav::before{
  content: none !important;
  background: none !important;
}

/* 4) Ensure the hero/page background actually shows through */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero{
  background: transparent !important;
}

/* 5) Push the main content below the transparent header (logo + nav heights) */
body[data-page="home"] header.site-header + main,
body[data-page="home"] header.site-header + .container,
body[data-page="home"] header.site-header + section{
  margin-top: calc(var(--logoH) + 64px) !important; /* adjust if your nav is taller/shorter */
}

/* Optional: brighten the transparent PNG logo slightly so it pops on photo bg */
body[data-page="home"] .brand-bar .logo img{
  mix-blend-mode: lighten;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,0,0,0.5));
  height: var(--logoH) !important;
  width: auto;
  background: none;
}
/* ===== Switch-Cars — KILL black bar + true translucent header (FINAL LOCK) ===== */
/* One source of truth for the photo: attach it to <html>::before so it sits behind everything. */

:root{
  --logoH: 200px;          /* header logo height */
  --hdrTint: rgba(0,0,0,.28);
  --navTint: rgba(0,0,0,.38);
  --hdrBlur: 6px;
}

/* A) Nuke any solid paints at the top */
html, body{
  background: transparent !important;
  background-image: none !important;
}
body::before, body::after,
.hero::before, .hero::after,
.page-hero::before, .page-hero::after{
  content: none !important;
  background: none !important;
}

/* B) Pin the hero image BEHIND the entire page */
html::before{
  content: "" !important;
  position: fixed;
  inset: 0;
  z-index: 0;                    /* base layer */
  pointer-events: none;
  background: url("/assets/hero.jpg?v=222") center top / cover no-repeat;
}

/* C) Lift all page content above that layer */
body > *{ position: relative; z-index: 1; }

/* D) Float the header over the photo and make it translucent */
.site-header{
  position: absolute !important;
  top: 0; left: 0; width: 100%;
  z-index: 2;
  background: transparent !important;
  box-shadow: none !important;
}
.brand-bar{
  background: var(--hdrTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.top-nav{
  background: var(--navTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* E) Logo polish (no background fill) */
.brand-bar .logo img{
  height: var(--logoH) !important;
  width: auto;
  background: none !important;
  mix-blend-mode: lighten;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,0,0,.6));
}

/* F) Space page content below the now-overlaid header (logo + nav) */
header.site-header + main,
header.site-header + .container,
header.site-header + section{
  margin-top: calc(var(--logoH) + 64px) !important;
}
/* ===== Switch-Cars — RESTORE HEADER AT TOP + KEEP TRANSLUCENT (FINAL) ===== */
/* Home page only; remove [data-page="home"] if you want it site-wide. */
:root{
  --logoH: 180px;           /* your logo bar height */
  --navH: 56px;             /* your nav bar height */
  --hdrTint: rgba(0,0,0,.28);
  --navTint: rgba(0,0,0,.38);
  --hdrBlur: 6px;
}

/* 1) Put header back in normal flow (top of page), not absolute */
body[data-page="home"] .site-header{
  position: sticky !important;   /* sits at top, stays on scroll */
  top: 0;
  z-index: 1000;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2) Keep both bars translucent (glass) */
body[data-page="home"] .brand-bar{
  background: var(--hdrTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,.08);
}
body[data-page="home"] .top-nav{
  background: var(--navTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,.10);
}

/* 3) Logo sizing (no black fill) */
body[data-page="home"] .brand-bar .logo img{
  height: var(--logoH) !important;
  width: auto;
  background: none !important;
  mix-blend-mode: lighten;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,0,0,.5));
}

/* 4) REMOVE the pushes we added earlier so “Featured Vehicles” sits right under the nav */
body[data-page="home"] { padding-top: 0 !important; }
body[data-page="home"] header.site-header + main,
body[data-page="home"] header.site-header + .container,
body[data-page="home"] header.site-header + section{
  margin-top: 0 !important;
}
body[data-page="home"] .hero,
body[data-page="home"] .page-hero{
  padding-top: 0 !important;
  background: transparent !important;  /* keep the photo visible */
}

/* (Optional) If the very top still looks a touch dark, you can lighten the tints:
   --hdrTint: rgba(0,0,0,.22); --navTint: rgba(0,0,0,.30); */
/* ===== Switch-Cars — FINAL HEADER LIFT FIX ===== */
/* Keeps logo bar flush to the top, nav directly below it, then content. */

:root{
  --logoH: 200px;          /* adjust logo size if needed */
  --navH: 60px;            /* adjust nav height if needed */
  --hdrTint: rgba(0,0,0,0.28);
  --navTint: rgba(0,0,0,0.38);
  --hdrBlur: 6px;
}

/* 1️⃣ Always keep the header at the very top */
.site-header {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1000;
  background: transparent !important;
}

/* 2️⃣ Logo bar (top) */
.brand-bar {
  background: var(--hdrTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.5rem 0 0.75rem;
}
.brand-bar .logo img {
  height: var(--logoH);
  width: auto;
  display: block;
  margin: 0 auto;
  background: none !important;
  mix-blend-mode: lighten;
  filter: brightness(1.2) drop-shadow(0 0 6px rgba(0,0,0,0.6));
}

/* 3️⃣ Nav bar (below logo) */
.top-nav {
  background: var(--navTint) !important;
  backdrop-filter: blur(var(--hdrBlur));
  -webkit-backdrop-filter: blur(var(--hdrBlur));
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.75rem 0;
  text-align: center;
}
.top-nav .menu {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.top-nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
}
.top-nav a:hover { color: var(--switchblue); }

/* 4️⃣ Move the page content back down just below the header */
header.site-header + main,
header.site-header + section,
header.site-header + #featured-grid {
  margin-top: calc(var(--logoH) + var(--navH)) !important;
}

/* Optional: lighten tints slightly if it still looks too dark at the top
   --hdrTint: rgba(0,0,0,0.2);
   --navTint: rgba(0,0,0,0.3);
*/
/* ===== Switch-Cars — tighten space between header and Featured Vehicles ===== */

/* Reduce the gap created by margin-top from previous fixes */
header.site-header + main,
header.site-header + section,
header.site-header + #featured-grid {
  margin-top: 10px !important;   /* ↓ try 20–40px until it feels perfect */
}

/* Keep logo + nav spacing consistent */
.brand-bar {
  padding-bottom: 0.5rem !important;
}
.top-nav {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}






/* === HOME: tighten space under header (wins over everything above) === */
:root { --gap-after-header: 4px; } /* adjust to taste */

body[data-page="home"] {
  padding-top: 0 !important;
}

/* Kill all previous big pushes under the header */
body[data-page="home"] header.site-header + main,
body[data-page="home"] header.site-header + section,
body[data-page="home"] header.site-header + #featured-grid,
body[data-page="home"] header.site-header + .container {
  margin-top: var(--gap-after-header) !important;
  padding-top: 0 !important;
}

/* Remove any extra padding added to hero/first sections */
body[data-page="home"] .hero,
body[data-page="home"] .page-hero,
body[data-page="home"] main.container {
  padding-top: 0 !important;
}

/* Make sure the bars themselves aren’t adding extra space */
body[data-page="home"] .brand-bar,
body[data-page="home"] .top-nav {
  margin-bottom: 0 !important;
  padding-bottom: .5rem !important; /* keep them snug */
}
/* === HERO IMAGE: HOME PAGE ONLY === */

/* Hide hero on every page by default */
.hero,
.page-hero {
  display: none !important;
}

/* Show it only on Home (where we have data-page="home") */
body[data-page="home"] .hero {
  display: block !important;
}
/* === HERO: HOME PAGE ONLY === */

/* Hide hero everywhere by default */
.hero, .page-hero {
  display: none !important;
}

/* Show + style hero only on Home */
body[data-page="home"] .hero {
  display: block !important;
  min-height: 50vh; /* adjust between 40–60vh to taste */
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("assets/hero.jpg") center/cover no-repeat;
  position: relative;
}

/* Keep header translucent so hero shows behind it */
.site-header {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-bar,
.top-nav {
  background: rgba(0,0,0,0.55) !important;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
}

/* Ensure content below hero sits correctly */
body[data-page="home"] .container {
  margin-top: 18px;
}
/* === QUICK FIX: make header links clickable above hero === */
.site-header{
  position: sticky;
  top: 0;
  z-index: 10010 !important;   /* higher than anything else */
  pointer-events: auto !important;
}

.brand-bar,
.top-nav{
  position: relative;
  z-index: 10011 !important;   /* ensure nav sits above hero */
}

/* The hero is decorative — don't let it steal clicks */
body[data-page="home"] .hero{
  position: relative;
  z-index: 0 !important;
  pointer-events: none;        /* so clicks pass through */
  margin-top: 0 !important;
}

/* Belt & braces for the actual links */
.main-nav .menu a{
  position: relative;
  z-index: 10012 !important;
  pointer-events: auto !important;
}
/* === FIX: HERO IMAGE ONLY ON HOME PAGE === */

/* Remove any background image or gradient from all pages */
body, html {
  background: var(--charcoal, #111111) !important; /* your normal dark base */
}

/* Make sure all sections use normal backgrounds unless on home */
main, section, .container, .page-hero, .hero {
  background: none !important;
}

/* Show hero image ONLY on home page */
body[data-page="home"] .hero {
  display: block !important;
  min-height: 50vh;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("assets/hero.jpg") center/cover no-repeat;
  position: relative;
}

/* Hide hero on every other page */
body:not([data-page="home"]) .hero {
  display: none !important;
  background: none !important;
}
/* === FINAL LOCK: Hero image ONLY on Home, nowhere else === */

/* 1) Reset any global background (some earlier rule is setting the hero on body) */
html, body {
  background: #111 !important;           /* your charcoal base */
  background-image: none !important;
}

/* If an overlay was added on body via ::before/::after, nuke it */
body::before,
body::after {
  content: none !important;
  background: none !important;
}

/* 2) Hide hero everywhere by default */
.hero, .page-hero {
  display: none !important;
  background: none !important;
}

/* 3) Show + style hero ONLY on Home (index.html) */
body[data-page="home"] .hero {
  display: block !important;
  min-height: 50vh;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("assets/hero.jpg") center/cover no-repeat;
  position: relative;
}

/* 4) Make absolutely sure non-home never shows a bg image */
body:not([data-page="home"]) {
  background-image: none !important;
}
body:not([data-page="home"]) .hero,
body:not([data-page="home"]) .page-hero {
  background: none !important;
}
/* === SWITCH-CARS — ONE HERO ONLY ON HOME (FINAL OVERRIDE) === */

/* 1️⃣ Nuke all global background layers */
html::before,
html::after,
body::before,
body::after {
  content: none !important;
  background: none !important;
  animation: none !important;
}

/* 2️⃣ Reset non-home pages to your dark base */
body:not([data-page="home"]),
html:not(:has(body[data-page="home"])) {
  background: var(--charcoal, #111) !important;
  background-image: none !important;
}

/* 3️⃣ Make sure no .hero element shows unless it's home */
.hero, .page-hero {
  display: none !important;
  background: none !important;
}

/* 4️⃣ On HOME ONLY (index.html), show your hero image */
body[data-page="home"] .hero {
  display: block !important;
  position: relative !important;
  min-height: 60vh !important;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.35)),
    url("assets/hero.jpg") center/cover no-repeat !important;
  background-attachment: scroll !important;
  z-index: 0 !important;
}

/* 5️⃣ Absolutely block any body-level image for non-home pages */
body:not([data-page="home"]) {
  background-color: var(--charcoal, #111) !important;
  background-image: none !important;
}
/* === FOOTER VISIBILITY FIX — SOLID GREY BACKGROUND === */

.site-footer {
  background: #2a2a2a !important; /* medium grey banner */
  color: #fafafa !important;
  padding: 2rem 1.5rem !important;
  text-align: left !important;
  position: relative;
  z-index: 5;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Optional: make links pop slightly */
.site-footer a {
  color: #00cfea !important; /* your brand blue */
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

/* Ensure inner text doesn't fade/translucent anywhere */
.site-footer p,
.site-footer strong {
  opacity: 1 !important;
}
/* === FOOTER GREY BACKGROUND FIX (FORCED ABOVE HERO) === */

.site-footer {
  position: relative !important;
  z-index: 9999 !important; /* brings footer above background layers */
  background: #2a2a2a !important; /* solid medium grey */
  color: #fafafa !important;
  padding: 2rem 2rem !important;
  text-align: left !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Footer links + text colour clarity */
.site-footer a {
  color: #00cfea !important; /* brand blue */
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}
.site-footer p,
.site-footer strong {
  opacity: 1 !important;
  color: #fafafa !important;
}
/* === HOME PAGE ONLY: force solid grey footer above all layers === */
body[data-page="home"] .site-footer {
  background: #2a2a2a !important;   /* solid grey banner */
  color: #fafafa !important;
  position: relative !important;
  z-index: 10020 !important;         /* sit above any BG layers */
  border-top: 1px solid rgba(255,255,255,0.1);
}

body[data-page="home"] .site-footer::before,
body[data-page="home"] .site-footer::after {
  content: none !important;          /* kill any leftover overlays */
  background: none !important;
}

/* readable links in the home footer */
body[data-page="home"] .site-footer a { color: #00cfea !important; }
body[data-page="home"] .site-footer a:hover { text-decoration: underline; }
/* === HOME PAGE ONLY: force a solid grey banner behind the footer (layered) === */
body[data-page="home"] .site-footer{
  position: relative !important;
  isolation: isolate !important;          /* keeps the layer under the footer only */
  z-index: 10020 !important;
  color: #fafafa !important;
}

body[data-page="home"] .site-footer::before{
  content: "" !important;
  position: absolute;
  inset: 0;
  background: #2a2a2a;                    /* solid grey banner */
  z-index: -1;                             /* sits behind footer content */
}

/* make links readable */
body[data-page="home"] .site-footer a{ color:#00cfea !important; }
body[data-page="home"] .site-footer a:hover{ text-decoration: underline; }
/* === HOME PAGE FOOTER: hard, final override (wins over everything) === */
html:has(body[data-page="home"]) footer.site-footer,
body[data-page="home"]) footer.site-footer,
body[data-page="home"] .site-footer {
  position: relative !important;
  z-index: 100000 !important;
  background-color: #2a2a2a !important;
  background-image: none !important;
  opacity: 1 !important;
  filter: none !important;
  isolation: isolate !important; /* own stacking context */
}

/* Put a solid layer inside the footer so nothing bleeds through */
html:has(body[data-page="home"]) footer.site-footer::before,
body[data-page="home"] footer.site-footer::before,
body[data-page="home"] .site-footer::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: #2a2a2a !important;
  z-index: 0 !important;
}

/* Lift the footer content above that plate */
html:has(body[data-page="home"]) footer.site-footer > *,
body[data-page="home"] footer.site-footer > *,
body[data-page="home"] .site-footer > * {
  position: relative !important;
  z-index: 1 !important;
  opacity: 1 !important;
  color: #fafafa !important;
}

/* Make links readable */
body[data-page="home"] .site-footer a {
  color: #00cfea !important;
  text-decoration: none;
}
body[data-page="home"] .site-footer a:hover { text-decoration: underline; }
/* Sell page: make left column comfy width + remove bullets cleanly */
.sell-aside { max-width: 52ch; }
.plain-list { margin: .5rem 0 1rem 0; }
.plain-list p { margin: .3rem 0; }

/* If any legacy list classes are present, neutralize bullets */
.tick-list, .dot-list { list-style: none; padding-left: 0; margin: .5rem 0 1rem 0; }
.tick-list li, .dot-list li { margin: .3rem 0; }
/* ============================================================
   SELL YOUR CAR — SPACING + BALANCE REFINEMENT
   Keeps equal breathing space between header, content, footer.
   ============================================================ */

/* Space below the double header */
body[data-page="sell"] .page-hero {
  margin-top: 4rem;   /* clear header height */
  margin-bottom: 3rem;
  text-align: center;
}

/* Ensure main grid (info + form) sits comfortably in middle */
body[data-page="sell"] main.container {
  padding-top: 1rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 3rem;
}

/* Equal vertical rhythm inside two-column section */
body[data-page="sell"] .grid-2 {
  align-items: flex-start;
  gap: 3rem;
}

/* Tidy up left-hand info block */
body[data-page="sell"] .sell-aside {
  max-width: 50ch;
  line-height: 1.6;
  margin: auto;
}
body[data-page="sell"] .sell-aside h2,
body[data-page="sell"] .sell-aside h3 {
  margin-top: 1.25rem;
  margin-bottom: .75rem;
}
body[data-page="sell"] .sell-aside .plain-list p {
  margin: .4rem 0;
}

/* Ensure footer sits with equal space below main content */
body[data-page="sell"] .site-footer {
  margin-top: 4rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}
/* ============================================================
   SELL YOUR CAR — FINAL SPACING POLISH
   Adds balanced spacing between header, content, and footer.
   ============================================================ */

body[data-page="sell"] main.container {
  padding-top: 3rem;       /* space below header */
  padding-bottom: 6rem;    /* extra space above footer */
}

body[data-page="sell"] .page-hero {
  margin-top: 3.5rem;
  margin-bottom: 3.5rem;
  text-align: center;
}

body[data-page="sell"] .grid-2 {
  gap: 4rem;               /* equal gap between columns */
}

body[data-page="sell"] .sell-aside {
  max-width: 50ch;
  line-height: 1.7;
  margin: 0 auto;
}

/* Footer separation */
body[data-page="sell"] .site-footer {
  margin-top: 5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* SELL PAGE — fix selectors + add real space above footer */
html[data-page="sell"] body{
  min-height: 100dvh;             /* full-height page */
  display: flex;
  flex-direction: column;
}

html[data-page="sell"] main.container{
  flex: 1;                         /* push footer down */
  padding-top: 3rem !important;    /* space below header */
  padding-bottom: 8rem !important; /* clear the grey footer bar */
}

html[data-page="sell"] .page-hero{
  margin: 3.5rem 0 3.5rem !important;
  text-align: center;
}

html[data-page="sell"] .grid-2{
  gap: 4rem !important;
}

html[data-page="sell"] .site-footer{
  margin-top: 5rem !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* ============================================================
   GLOBAL SPACING FIX — Sell + Used Cars pages
   Gives equal breathing room above the grey footer.
   ============================================================ */

/* Sell Your Car page */
html[data-page="sell"] body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

html[data-page="sell"] main.container {
  flex: 1;
  padding-top: 3rem !important;
  padding-bottom: 8rem !important; /* balanced footer spacing */
}

html[data-page="sell"] .page-hero {
  margin: 3.5rem 0 3.5rem !important;
  text-align: center;
}

html[data-page="sell"] .grid-2 {
  gap: 4rem !important;
}

html[data-page="sell"] .site-footer {
  margin-top: 5rem !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

/* Used Cars page */
html[data-page="used-cars"] body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

html[data-page="used-cars"] main.container {
  flex: 1;
  padding-top: 3rem !important;
  padding-bottom: 8rem !important; /* add same gap above footer */
}

html[data-page="used-cars"] .site-footer {
  margin-top: 5rem !important;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
/* ===== Used Cars — add breathing room above footer (no HTML changes) ===== */
html[data-page="used-cars"] body{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
html[data-page="used-cars"] main,
html[data-page="used-cars"] .page { /* fallback if there's no <main> */
  flex:1;
}

/* The actual grid on your used page — cover all known IDs/classes */
html[data-page="used-cars"] #used-cars-grid,
html[data-page="used-cars"] #inventoryGrid,
html[data-page="used-cars"] .used-cars-grid{
  padding-bottom:8rem !important;   /* space before footer */
}

/* Optional: small gap on the footer itself for consistency */
html[data-page="used-cars"] .site-footer{
  margin-top:4rem !important;
}
/* ============================================================
   FOOTER ALIGNMENT FIX — FCA text hard-left
   ============================================================ */

.site-footer,
.site-footer .footer-info,
.site-footer .fca-disclaimer {
  text-align: left !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.site-footer .fca-disclaimer p {
  text-align: left !important;
  margin-left: 0 !important;
}

/* keep links row aligned left but still spaced neatly */
.site-footer .footer-info p,
.site-footer .footer-info a {
  text-align: left !important;
}
/* ============================================================
   SELL YOUR CAR — Left-align layout + better balance
   ============================================================ */

/* Align content left inside the container */
html[data-page="sell"] main.container {
  text-align: left !important;
  padding-top: 3rem;
  padding-bottom: 8rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Two-column grid: narrow left, wide right (desktop) */
html[data-page="sell"] .grid-2 {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 4rem;
  align-items: flex-start;
}

/* Info column readability */
html[data-page="sell"] .sell-aside {
  max-width: 600px;
  margin: 0;
  line-height: 1.7;
}

/* Headings and text spacing tidy */
html[data-page="sell"] .sell-aside h2,
html[data-page="sell"] .sell-aside h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}
html[data-page="sell"] .sell-aside p {
  margin: 0.4rem 0;
}

/* Form width tidy — aligns nicely beside text */
html[data-page="sell"] form#sellForm {
  max-width: 600px;
  margin: 0;
}

/* Keep hero text centered but rest left */
html[data-page="sell"] .page-hero {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 2rem;
}

/* Mobile fallback: stack vertically with spacing */
@media (max-width: 900px) {
  html[data-page="sell"] .grid-2 {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  html[data-page="sell"] .sell-aside,
  html[data-page="sell"] form#sellForm {
    max-width: 100%;
  }
}
/* === Footer spacing + final section breathing room === */
main.container {
  padding-bottom: 4rem; /* space before footer */
}

.site-footer {
  margin-top: 3rem; /* separates footer visually */
  padding-top: 2rem;
  background: #222; /* same dark grey backing */
}

/* ensure final section like .team-grid has consistent bottom margin */
.team-grid {
  margin-bottom: 3rem;
}
/* === Balanced vertical spacing for page content === */

/* Give consistent space below the header and above the footer */
main.container {
  padding-top: 3.5rem;   /* space below header */
  padding-bottom: 3.5rem; /* space above footer */
}

/* Footer breathing room + background continuity */
.site-footer {
  margin-top: 0; /* rely on main padding for gap */
  padding: 2rem 2rem;
  background: #222; /* solid dark grey backing */
}

/* Optional: make the final card grid not crowd the footer */
.team-grid {
  margin-bottom: 2rem;
}
/* === Balanced vertical spacing (header ↔ main ↔ footer) === */

/* Give consistent top + bottom padding for all main containers */
main.container,
section.content,
section.form-wrap,
section.contact-grid {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Prevent footer from sitting tight against previous content */
.site-footer {
  margin-top: 4rem;
}

/* If a page uses .page-hero or h1 right after header, give even breathing room */
.page-hero,
main.container > h1:first-of-type {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

/* Slight tweak for mobile so it still feels balanced */
@media (max-width: 768px) {
  main.container,
  section.content,
  section.form-wrap,
  section.contact-grid {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  .site-footer {
    margin-top: 3rem;
  }
}
/* === Global, equal vertical spacing — works across ALL pages === */
:root{
  /* Tweak one knob to change page spacing everywhere */
  --page-gap: clamp(28px, 5vw, 64px);
  --section-gap: clamp(20px, 3.5vw, 40px);
}

/* 1) Ensure the first block AFTER the sticky header always has top breathing room */
header.site-header + .page-hero,
header.site-header + main,
header.site-header + section {
  margin-top: var(--page-gap) !important;
}

/* 2) Give consistent top/bottom padding to main content wrappers */
main.container,
section.content,
section.form-wrap,
section.contact-grid,
section.inventory,
section.vehicle-wrap {
  padding-top: var(--page-gap) !important;
  padding-bottom: var(--page-gap) !important;
}

/* 3) Balance spacing between stacked sections inside the page */
main.container > * + *,
section.content > * + *,
section.form-wrap > * + *,
section.contact-grid > * + *,
section.inventory > * + *,
section.vehicle-wrap > * + *,
.page-hero + * {
  margin-top: var(--section-gap) !important;
}

/* 4) Keep the footer off the content */
.site-footer {
  margin-top: var(--page-gap) !important;
}

/* 5) Mobile tune so it doesn’t feel cramped or too airy */
@media (max-width: 768px){
  :root{
    --page-gap: clamp(24px, 6vw, 48px);
    --section-gap: clamp(16px, 4vw, 28px);
  }
}

/* 6) Safety: avoid margin-collapsing at the top of main/sections */
main.container,
section.content,
section.form-wrap,
section.contact-grid,
section.inventory,
section.vehicle-wrap,
.page-hero {
  /* Ensure outer spacing is respected even if children use margins */
  border-top: 0.1px solid transparent;
}
/* ================================
   CONTACT PAGE — spacing + layout
   (no colour or font changes)
   ================================ */

/* 0) Knobs you can tweak */
:root{
  --contact-top-gap: clamp(8px, 2vw, 20px);   /* distance under the nav */
  --contact-gap: clamp(18px, 2.5vw, 28px);    /* gap between columns/blocks */
  --contact-radius: 14px;                      /* subtle rounding */
}

/* 1) Pull the content UP under the header on the Contact page only */
html[data-page="contact"] header.site-header + main {
  margin-top: var(--contact-top-gap) !important;
}

/* 2) Two-column grid that favours the form slightly so the map doesn't overpower */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.15fr) minmax(280px, 0.95fr);
  gap: var(--contact-gap);
  align-items: start; /* keep headings aligned */
}

/* 3) Make the form card look neat and fill the column height */
.contact-grid .card,
.contact-grid .form.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--contact-radius);
  padding: 1.2rem;
  height: 100%;
}

/* 4) Give the map its own 'card' treatment and keep it visually lighter */
.map-container {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--contact-radius);
  padding: 0.8rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

/* 5) Map media: support either <img> or an embedded <iframe> */
.map-container .map-img,
.map-container iframe {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;        /* keeps it from towering over the form */
  object-fit: cover;
  border: 0;
  border-radius: calc(var(--contact-radius) - 4px);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset;
  max-height: 520px;          /* gentle cap so it never dominates */
}

/* 6) Keep the page heading tight and aligned with columns */
html[data-page="contact"] main.container > h1:first-of-type {
  margin: 0 0 0.8rem 0;
}

/* 7) Inputs spacing (small polish) */
#contactForm label {
  display: block;
  margin: 0 0 0.7rem 0;
}
#contactForm input,
#contactForm textarea {
  width: 100%;
  margin-top: 0.3rem;
}

/* 8) Footer breathing room below the grid */
html[data-page="contact"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px);
}

/* 9) Mobile: stack cleanly with generous spacing */
@media (max-width: 820px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .map-container .map-img,
  .map-container iframe {
    aspect-ratio: 16 / 10;   /* a bit wider when stacked */
    max-height: 380px;
  }
}
/* ================================
   ABOUT PAGE — spacing + tidy grid
   (no colour or layout changes)
   ================================ */

/* knobs */
:root{
  --about-top-gap: clamp(8px, 2vw, 20px);
  --about-gap: clamp(18px, 2.5vw, 28px);
  --about-radius: 14px;
}

/* 1) Pull content up under the two-bar header */
html[data-page="about"] header.site-header + main,
html[data-page="about"] header.site-header + .page-hero {
  margin-top: var(--about-top-gap) !important;
}

/* 2) Tighten main heading spacing */
html[data-page="about"] main.container > h1:first-of-type,
html[data-page="about"] .page-hero h1 {
  margin: 0 0 0.8rem 0;
}

/* 3) Card polish for the about-copy block (uses your existing .card) */
html[data-page="about"] .card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--about-radius);
  padding: 1.2rem;
}

/* 4) Values/Our Team grid (you already use .values-grid, .value-card) */
.values-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--about-gap);
  margin-top: 1rem;
}
.value-card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--about-radius);
  padding: 1rem;
  height: 100%;
}

/* Optional avatar/images in cards */
.value-card img{
  width: 100%;
  height: auto;
  border-radius: calc(var(--about-radius) - 4px);
  display: block;
  object-fit: cover;
  aspect-ratio: 4 / 3; /* keeps heights consistent if images vary */
}

/* 5) Balance space above footer on About */
html[data-page="about"] .site-footer{
  margin-top: clamp(28px, 5vw, 48px) !important;
}

/* 6) Mobile tuning */
@media (max-width: 820px){
  :root{
    --about-top-gap: clamp(6px, 3vw, 16px);
    --about-gap: clamp(14px, 4vw, 24px);
  }
}
/* ================================
   SELL YOUR CAR — spacing + layout polish
   ================================ */

/* knobs */
:root{
  --sell-top-gap: clamp(8px, 2vw, 20px);
  --sell-gap: clamp(18px, 2.5vw, 28px);
  --sell-radius: 14px;
}

/* 1) Pull page content up under the header */
html[data-page="sell"] header.site-header + main,
html[data-page="sell"] header.site-header + .page-hero {
  margin-top: var(--sell-top-gap) !important;
}

/* 2) Headings */
html[data-page="sell"] .page-hero h1 {
  margin: 0 0 0.8rem 0;
}

/* 3) Form wrapper (your <section class="form-wrap">) */
.form-wrap {
  padding-top: var(--sell-gap);
  padding-bottom: var(--sell-gap);
  display: flex;
  justify-content: center;
}

/* 4) Quote form card */
html[data-page="sell"] .form-wrap .card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--sell-radius);
  padding: 1.5rem;
  max-width: 620px;
  width: 100%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* 5) Inputs tidy */
#sellForm label {
  display: block;
  margin-bottom: 0.9rem;
}
#sellForm input,
#sellForm textarea {
  width: 100%;
  margin-top: 0.3rem;
}

/* 6) File input spacing */
#sellPhotos {
  margin-top: 0.3rem;
}

/* 7) Footer spacing */
html[data-page="sell"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px) !important;
}

/* 8) Mobile stack adjustments */
@media (max-width: 820px){
  :root{
    --sell-top-gap: clamp(6px, 3vw, 16px);
    --sell-gap: clamp(14px, 4vw, 24px);
  }
  html[data-page="sell"] .form-wrap .card {
    padding: 1.2rem;
  }
}
/* ================================
   USED CARS — spacing + layout polish
   ================================ */

/* knobs */
:root{
  --used-top-gap: clamp(8px, 2vw, 20px);
  --used-gap: clamp(18px, 2.5vw, 28px);
  --used-radius: 14px;
}

/* 1) Pull hero/content up below the two-bar header */
html[data-page="used-cars"] header.site-header + main,
html[data-page="used-cars"] header.site-header + .page-hero {
  margin-top: var(--used-top-gap) !important;
}

/* 2) Headings + intro text spacing */
html[data-page="used-cars"] .page-hero {
  margin-bottom: var(--used-gap);
  text-align: center;
}
html[data-page="used-cars"] .page-hero h1 {
  margin: 0 0 0.8rem 0;
}

/* 3) Filters and results layout */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-bottom: var(--used-gap);
}
.filter-group {
  display: flex;
  flex-direction: column;
  min-width: 180px;
}
.filter-group label {
  margin-bottom: 0.3rem;
}

/* 4) Inventory grid spacing */
.inventory {
  padding-top: var(--used-gap);
  padding-bottom: var(--used-gap);
}
#inventoryGrid.car-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.2rem;
}
#inventoryGrid .car-card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--used-radius);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#inventoryGrid .car-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* 5) Result count alignment */
.result-count {
  text-align: center;
  margin-bottom: var(--used-gap);
}

/* 6) Footer breathing room */
html[data-page="used-cars"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px) !important;
}

/* 7) Mobile adjustments */
@media (max-width: 820px) {
  :root{
    --used-top-gap: clamp(6px, 3vw, 16px);
    --used-gap: clamp(14px, 4vw, 24px);
  }
  .filters {
    flex-direction: column;
    align-items: stretch;
  }
  .filter-group {
    width: 100%;
  }
}
/* ================================
   USED CARS — force compact top spacing
   (new approach: header reset + optional pull-up)
   ================================ */

/* 0) single knob to fine-tune how high the title sits */
:root{ --used-pull: 80px; } /* increase to pull further up (e.g. 100–120px) */

/* 1) Remove any gap created by the two-bar header on this page only */
html[data-page="used-cars"] .site-header,
html[data-page="used-cars"] .brand-bar,
html[data-page="used-cars"] .top-nav {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* 2) Neutralise big hero blocks (some builds give min-height/padding) */
html[data-page="used-cars"] .page-hero {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0.5rem !important;
  display: block !important;
  align-items: normal !important;
  justify-content: flex-start !important;
}

/* 3) If there is STILL a stubborn gap, pull the first block up by a fixed amount */
html[data-page="used-cars"] header.site-header + .page-hero,
html[data-page="used-cars"] header.site-header + main {
  margin-top: calc(12px - var(--used-pull)) !important; /* 12px breathing room minus pull */
}

/* 4) Tighten the title and filters */
html[data-page="used-cars"] .page-hero h1 { margin: 0 0 0.75rem 0 !important; }
html[data-page="used-cars"] .filters { margin-top: 0 !important; margin-bottom: 22px !important; }

/* 5) Keep footer breathing room consistent */
html[data-page="used-cars"] .site-footer { margin-top: clamp(28px, 5vw, 48px) !important; }
/* =========================================
   USED CARS — hard pull-up (transform method)
   ========================================= */

/* Tweak this until the title sits where you want */
:root { --used-shift: 84px; } /* try 84 → 96 → 112 if needed */

/* Shift the first content block upward, but preserve layout with compensating padding */
html[data-page="used-cars"] header.site-header + main,
html[data-page="used-cars"] header.site-header + .page-hero {
  /* visual shift up */
  transform: translateY(calc(-1 * var(--used-shift))) !important;
  -webkit-transform: translateY(calc(-1 * var(--used-shift))) !important;
  /* keep internal flow comfortable so nothing gets crushed */
  padding-top: calc(0.5rem + var(--used-shift)) !important;
}

/* If your structure is header → main → .page-hero inside, also shift the hero */
html[data-page="used-cars"] main .page-hero {
  transform: translateY(0) !important;          /* don't double-shift */
  padding-top: 0.5rem !important;
  margin-bottom: 1.2rem !important;
}

/* Tighten title/filters after the shift */
html[data-page="used-cars"] .page-hero h1 { margin: 0 0 0.75rem 0 !important; }
html[data-page="used-cars"] .filters    { margin-top: 0 !important; }

/* Footer breathing room remains consistent */
html[data-page="used-cars"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px) !important;
}

/* Safety: remove any extra top margins that might still reappear */
html[data-page="used-cars"] header.site-header + * { margin-top: 0 !important; }
/* ==== SWITCH-CARS — Used Cars spacing fix (final, page-scoped) ==== */
/* Goal: remove double spacing under the header on the Used Cars page only */

body[data-page="used-cars"] {
  padding-top: 0 !important; /* cancel any global body padding-top */
}

/* Kill any header-pushes that target main/sections/grids */
body[data-page="used-cars"] header.site-header + main,
body[data-page="used-cars"] header.site-header + section,
body[data-page="used-cars"] header.site-header + #used-cars-grid,
body[data-page="used-cars"] main,
body[data-page="used-cars"] .container,
body[data-page="used-cars"] .inventory,
body[data-page="used-cars"] #used-cars-grid {
  margin-top: 10px !important;   /* small, consistent gap */
  padding-top: 0 !important;     /* no extra padding creep */
}

/* If any hero/page-hero padding got applied globally, neutralise it here */
body[data-page="used-cars"] .hero,
body[data-page="used-cars"] .page-hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Keep anchor jumps tidy without adding visible space */
body[data-page="used-cars"] html {
  scroll-padding-top: 0 !important;
}
/* ==== SWITCH-CARS — Used Cars final spacing balance ==== */

body[data-page="used-cars"] {
  padding-top: 0 !important; /* cancel global body push */
}

/* Pull content up, but keep title visible */
body[data-page="used-cars"] header.site-header + main,
body[data-page="used-cars"] header.site-header + .page-hero {
  margin-top: 95px !important;   /* sweet spot for alignment */
  padding-top: 0 !important;
}

/* Neutralise extra hero padding if it exists */
body[data-page="used-cars"] .page-hero {
  padding-top: 0.3rem !important;
  margin-top: 0 !important;
  min-height: auto !important;
}

/* Title and filters spacing */
body[data-page="used-cars"] .page-hero h1 {
  margin: 0 0 0.8rem 0 !important;
}
body[data-page="used-cars"] .filters {
  margin-top: 0 !important;
  margin-bottom: clamp(16px, 2vw, 24px) !important;
}

/* Footer breathing room */
body[data-page="used-cars"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px) !important;
}
/* ==== SWITCH-CARS — Home page spacing balance (matches Used Cars) ==== */

body[data-page="home"] {
  padding-top: 0 !important; /* cancel global push */
}

/* Fine-tune how far below the two-bar header the hero/featured section starts */
:root { --home-gap: 45px; }  /* adjust like Used Cars — increase = lower, decrease = higher */

body[data-page="home"] header.site-header + main,
body[data-page="home"] header.site-header + section,
body[data-page="home"] header.site-header + .page-hero,
body[data-page="home"] header.site-header + #featured-grid {
  margin-top: var(--home-gap) !important;
  padding-top: 0 !important;
}

/* Neutralise any old header offset rules */
body[data-page="home"] .page-hero,
body[data-page="home"] .hero,
body[data-page="home"] #featured-grid {
  padding-top: 0.3rem !important;
  margin-top: 0 !important;
  min-height: auto !important;
}

/* Footer breathing room remains consistent */
body[data-page="home"] .site-footer {
  margin-top: clamp(28px, 5vw, 48px) !important;
}
/* ==========================================================
   Fine-tune header spacing for individual pages
   (keeps content aligned evenly under the translucent header)
   ========================================================== */

/* Terms & Conditions page */
body[data-page="terms"] header.site-header ~ main {
  margin-top: 105px !important;  /* moves text closer to header */
  position: relative;
  z-index: 1;
}

/* If you want to match all legal pages later: 
   just duplicate this block and change the data-page value 
   e.g. body[data-page="privacy"], body[data-page="complaints"], etc. */
/* ==========================================================
   TERMS: pull content closer to the header (fine-tune)
   Works whether <main> has an id/class and regardless of markup.
   ========================================================== */

/* Primary target (adjacent sibling of header) */
body[data-page="terms"] header.site-header + main,

/* Common variants */
body[data-page="terms"] main#main,
body[data-page="terms"] main.container,
html[data-page="terms"] body[data-page="terms"] main {
  margin-top: -35px !important;   /* tweak this number to taste */
  position: relative;
  z-index: 1;
}
/* ================================
   CONTACT PAGE — equal column heights
   ================================ */

/* Let both columns in the contact grid align neatly */
html[data-page="contact"] .contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* even columns */
  align-items: stretch;           /* make both same height */
  gap: clamp(20px, 3vw, 32px);
}

/* Ensure the card/form fills its grid cell */
html[data-page="contact"] .contact-grid .card,
html[data-page="contact"] .contact-grid .form.card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Make the map container the same height as the form */
html[data-page="contact"] .map-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

/* Keep the map image proportionate inside its container */
html[data-page="contact"] .map-container .map-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Mobile: stack cleanly */
@media (max-width: 820px) {
  html[data-page="contact"] .contact-grid {
    grid-template-columns: 1fr;
  }
  html[data-page="contact"] .map-container,
  html[data-page="contact"] .contact-grid .card {
    height: auto;
  }
  html[data-page="contact"] .map-container .map-img {
    height: auto;
    aspect-ratio: 16 / 10;
  }
}
/* ================================
   CONTACT — equal heights + nicer spacing
   ================================ */

:root{
  --contact-card-pad: 1.2rem;   /* pad for both cards */
  --contact-radius: 14px;
}

/* 1) Make both columns stretch to the same height */
html[data-page="contact"] .contact-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;               /* equal heights */
  gap: clamp(20px, 3vw, 32px);
}

/* 2) Form card = full height, tidy internal spacing */
html[data-page="contact"] .form.card{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--contact-radius);
  padding: var(--contact-card-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;                        /* space between labels & button */
}

/* 3) Map card = full height, match look to form card */
html[data-page="contact"] .map-container{
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: var(--contact-radius);
  padding: var(--contact-card-pad);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 4) Map media fills available space, keeps corners rounded */
html[data-page="contact"] .map-container .map-img,
html[data-page="contact"] .map-container iframe{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  border-radius: calc(var(--contact-radius) - 4px);
  flex: 1 1 auto;                     /* grow to fill card height */
}

/* 5) Caption not tight to the map, sits above card bottom */
html[data-page="contact"] .map-note{
  margin-top: 0.8rem;                 /* breathing room above caption */
  margin-bottom: 0;
  line-height: 1.35;
  color: var(--muted);
}

/* 6) Mobile stack */
@media (max-width: 820px){
  html[data-page="contact"] .contact-grid{ grid-template-columns: 1fr; }
  html[data-page="contact"] .map-container,
  html[data-page="contact"] .form.card{ height: auto; }
  html[data-page="contact"] .map-container .map-img,
  html[data-page="contact"] .map-container iframe{
    height: auto;
    aspect-ratio: 16 / 10;            /* keeps a neat shape when stacked */
  }
}
/* ================================
   CONTACT — align map bottom + breathing space
   ================================ */

/* Give the intro text above the form some space */
html[data-page="contact"] .contact-grid {
  margin-top: 1.5rem; /* breathing room below the "Email/Phone" text */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: end; /* align map bottom with form bottom */
  gap: clamp(20px, 3vw, 32px);
}

/* Form box — normal height */
html[data-page="contact"] .form.card {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
}

/* Map box — align bottom with form */
html[data-page="contact"] .map-container {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* keeps the caption near bottom */
  height: 100%;
  box-sizing: border-box;
}

/* Keep the map image from being too tall */
html[data-page="contact"] .map-container .map-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

/* Caption spacing */
html[data-page="contact"] .map-note {
  margin-top: 0.8rem;
  text-align: center;
  line-height: 1.4;
  color: var(--muted);
}

/* Mobile layout */
@media (max-width: 820px) {
  html[data-page="contact"] .contact-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 1rem;
  }
  html[data-page="contact"] .map-container {
    justify-content: flex-start;
  }
}
/* === Remove bullet points globally === */
ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
/* === Switch-Cars | Force vehicle page header to match main two-bar header === */
(function () {
  // Run on vehicle detail pages (selector OR URL fallback)
  const isVehiclePage =
    document.querySelector('[data-vehicle-title],[data-vehicle-gallery],[data-vehicle-specs]') ||
    /vehicle/i.test(location.pathname);

  if (!isVehiclePage) return;

  const header = document.querySelector('header.site-header');
  if (!header) return;

  // Always overwrite on vehicle pages (prevents double-logo/mismatched markup)
  header.innerHTML = `
    <div class="brand-bar">
      <a class="logo" href="index.html" aria-label="Switch Cars">
        <img src="logo.png" alt="Switch Cars">
      </a>
    </div>
    <div class="top-nav">
      <nav class="nav">
        <a href="index.html">Home</a>
        <a href="used-cars.html">Used Cars</a>
        <a href="sell-your-car.html">Sell Your Car</a>
        <a href="finance-options.html">Finance</a>
        <a href="about.html">About</a>
        <a href="blog.html">Blog</a>
        <a href="contact.html">Contact</a>
      </nav>
    </div>
  `;

  // Highlight Used Cars when viewing a vehicle
  const used = header.querySelector('.nav a[href="used-cars.html"]');
  if (used) used.classList.add('active');
})();
/* ===== Switch-Cars — Header normaliser (safe, minimal) ===== */
.site-header { position: sticky; top: 0; z-index: 9999; }

/* Brand bar: keep it tight and consistent */
.brand-bar {
  display: flex; align-items: center;
  padding: 8px 16px; min-height: 64px;
  background: var(--charcoal, #0b0b0b);
}

/* Ensure the logo image actually shows and no text leaks */
.brand-bar .logo { display: inline-flex; align-items: center; font-size: 0; line-height: 0; }
.brand-bar .logo img { display: block; height: 48px; width: auto; }

/* Top nav stays as the translucent bar we use elsewhere */
.top-nav {
  position: relative;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.35);
  border-top: 1px solid var(--border, #242424);
  border-bottom: 1px solid var(--border, #242424);
}
.top-nav .main-nav .menu { margin: 0; }

/* Prevent accidental extra space between bars on some pages */
.site-header .brand-bar + .top-nav { margin-top: 0; }

/* Guard: if any page had old text-logo styles, neutralise them */
.logo { text-decoration: none; }
/* ===== Switch-Cars — Header normaliser (page-specific, minimal) ===== */
.site-header { position: sticky; top: 0; z-index: 9999; }

.brand-bar {
  display: flex; align-items: center;
  padding: 8px 16px; min-height: 64px;
  background: var(--charcoal, #0b0b0b);
}

/* Ensure the image logo renders and no text peeks through */
.brand-bar .logo { display: inline-flex; align-items: center; font-size: 0; line-height: 0; }
.brand-bar .logo img { display: block !important; height: 48px; width: auto; }

/* Translucent nav to match other pages */
.top-nav {
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.35);
  border-top: 1px solid var(--border, #242424);
  border-bottom: 1px solid var(--border, #242424);
  margin-top: 0 !important;
}

/* Remove accidental extra spacing between bars */
.site-header .brand-bar + .top-nav { margin-top: 0 !important; }

/* Make sure only HOME shifts content down; others (like Blog) should not */
body[data-page="home"] header.site-header ~ *:first-of-type { margin-top: var(--home-header-total, 80px) !important; }
html[data-page="blog"] header.site-header ~ *:first-of-type { margin-top: 0 !important; }