:root{--navy:#0b1a33;--gold:#d4af37;--white:#fff;--muted:#e6edf5;--text:#fff;--body:#0b1222}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--body);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.navbar{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(255,255,255,.08)}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000}
.brand{font-weight:800;letter-spacing:.5px}.nav-links{display:flex;gap:1rem;align-items:center}
.nav-links a{color:var(--white);font-weight:600}.menu-toggle{display:none;background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--white);padding:.4rem .6rem;border-radius:.5rem}
@media (max-width:720px){.nav-links{display:none;flex-direction:column;align-items:flex-start;padding:.75rem 1rem}.menu-toggle{display:inline-block}.nav-open .nav-links{display:flex;background:var(--navy)}}
.btn{background:var(--gold);color:#111;padding:.8rem 1.2rem;border:none;border-radius:.75rem;font-weight:800;display:inline-block}.btn:hover{filter:brightness(1.05)}
.hero{ padding:clamp(28px,4vw,48px) 1rem; text-align:center; color:var(--white);
}
.hero-media{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; overflow:hidden; max-width:1100px; margin:0 auto 1.25rem;
}
.hero-media picture, .hero-media img{display:block;width:100%}
.hero-media img{ height:auto; max-height: clamp(220px, 45vh, 420px); object-fit: contain;
}
.hero h1{font-size:clamp(1.8rem,5.6vw,3rem);font-weight:900;line-height:1.1;margin:.5rem 0 .5rem}
.hero p{font-size:clamp(1rem,2.4vw,1.15rem);opacity:.95;max-width:60ch;margin:0 auto 1rem}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap} .hero .content{max-width:1000px;margin-inline:auto}
.hero h1{font-size:clamp(2rem,6vw,3.25rem);font-weight:900;line-height:1.1;margin:0 0 .75rem}
.hero p{font-size:clamp(1rem,2.5vw,1.15rem);opacity:.95;max-width:52ch;margin:0 auto 1.25rem}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.section{padding:48px 0;background:var(--body)}.footer{background:var(--navy);padding:1.5rem 1rem;text-align:center;color:var(--muted);border-top:1px solid rgba(255,255,255,.08)}
.inventory-search{display:flex;justify-content:center;margin:1rem 0}
.inventory-search input{width:min(720px,100%);padding:.85rem 1rem;border-radius:.75rem;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:var(--white)}
.inventory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.inventory-card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:1rem;overflow:hidden;display:flex;flex-direction:column}
.inventory-card img{aspect-ratio:16/10;object-fit:cover}.inventory-card .pad{padding:1rem}.inventory-card h3{margin:.25rem 0 .25rem;font-size:1.1rem}
.price{font-weight:900;color:var(--gold)}.badge{display:inline-block;background:rgba(212,175,55,.15);color:var(--gold);padding:.25rem .5rem;border-radius:.5rem;font-size:.85rem;font-weight:700}
.no-anim,*{animation:none!important;transition:transform .2s ease,opacity .2s ease} @media (max-width: 480px){ .navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000} .btn{padding:1rem 1.1rem;font-weight:800} .hero{ padding:clamp(28px,4vw,48px) 1rem; text-align:center; color:var(--white);
}
.hero-media{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; overflow:hidden; max-width:1100px; margin:0 auto 1.25rem;
}
.hero-media picture, .hero-media img{display:block;width:100%}
.hero-media img{ height:auto; max-height: clamp(220px, 45vh, 420px); object-fit: contain;
}
.hero h1{font-size:clamp(1.8rem,5.6vw,3rem);font-weight:900;line-height:1.1;margin:.5rem 0 .5rem}
.hero p{font-size:clamp(1rem,2.4vw,1.15rem);opacity:.95;max-width:60ch;margin:0 auto 1rem}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap} .hero .content{max-width:1000px;margin-inline:auto} .inventory-search input{padding:1rem 1rem} .nav-links a{padding:.5rem 0}
} @media (max-width: 768px){ .hero{ padding:clamp(28px,4vw,48px) 1rem; text-align:center; color:var(--white);
}
.hero-media{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; overflow:hidden; max-width:1100px; margin:0 auto 1.25rem;
}
.hero-media picture, .hero-media img{display:block;width:100%}
.hero-media img{ height:auto; max-height: clamp(220px, 45vh, 420px); object-fit: contain;
}
.hero h1{font-size:clamp(1.8rem,5.6vw,3rem);font-weight:900;line-height:1.1;margin:.5rem 0 .5rem}
.hero p{font-size:clamp(1rem,2.4vw,1.15rem);opacity:.95;max-width:60ch;margin:0 auto 1rem}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap} }
@media (max-width: 480px){ .hero{ padding:clamp(28px,4vw,48px) 1rem; text-align:center; color:var(--white);
}
.hero-media{ background:linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.04)); border:1px solid rgba(255,255,255,.08); border-radius:1rem; overflow:hidden; max-width:1100px; margin:0 auto 1.25rem;
}
.hero-media picture, .hero-media img{display:block;width:100%}
.hero-media img{ height:auto; max-height: clamp(220px, 45vh, 420px); object-fit: contain;
}
.hero h1{font-size:clamp(1.8rem,5.6vw,3rem);font-weight:900;line-height:1.1;margin:.5rem 0 .5rem}
.hero p{font-size:clamp(1rem,2.4vw,1.15rem);opacity:.95;max-width:60ch;margin:0 auto 1rem}
.hero .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap} .navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000} .btn{padding:1rem 1.1rem;font-weight:800} .hero .content{padding:0}
} @media (max-width: 600px){ .hero-media img{max-height: clamp(180px, 42vh, 320px)}
} .navbar{ position:sticky;top:0;z-index:50; border-bottom:1px solid rgba(255,255,255,.12);
}
.navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000}
.brand img{height:72px;display:inline-block;vertical-align:middle}
@media (max-width: 720px){ .brand img{height:72px;display:inline-block;vertical-align:middle} .navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000}
} .fade-reveal{opacity:0; transform: translateY(8px); will-change: opacity, transform;}
.fade-reveal.is-visible{opacity:1; transform:none; transition: opacity .6s ease, transform .6s ease;}

/* ===== vFinal3: Mobile polish ===== */
:root{
  --tap: 48px;
}
/* Make buttons comfortable */
.btn{min-height:var(--tap); padding:.9rem 1.1rem; font-weight:800; border-radius:12px}

/* Images scale cleanly */
img{max-width:100%; height:auto}

/* Container padding on small screens */
@media (max-width: 600px){
  .container{padding-left:0.9rem; padding-right:0.9rem}
  .hero{padding-block:48px}
  .hero h1{font-size:clamp(1.6rem, 6.2vw, 2.2rem)}
  .hero p{font-size:clamp(1rem, 3.6vw, 1.05rem)}
  .nav-links a{padding:.7rem 0; display:block}
}

/* Collapsible nav */
.menu-toggle{display:none; background:none; border:1px solid rgba(255,255,255,.3); padding:.5rem .7rem; border-radius:10px; color:#fff; font-weight:700}
@media (max-width: 860px){
  .menu-toggle{display:inline-flex; align-items:center; gap:.4rem}
  .nav-links{display:none}
  .nav-links.open{display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; background:rgba(0,0,0,.92); padding:0.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.12)}
  .navbar-inner{display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;background:#0b1a33;position:relative;z-index:1000}
  .nav-links a{padding:.75rem 0; border-top:1px solid rgba(255,255,255,.08)}
  .nav-links a:first-child{border-top:none}
}

/* Forms: avoid iOS zoom + give comfortable fields */
input, select, textarea{font-size:16px; min-height:44px; border-radius:10px}
label{display:block; margin-bottom:.35rem}
/* Inventory cards tighten spacing on small screens */
@media (max-width: 600px){
  .card{border-radius:14px}
}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important}
}


/* ===== vFinal4: Parallax hero + split intro ===== */
.hero-parallax{
  position:relative;
  min-height:68vh;
  display:flex;align-items:flex-end;justify-content:center;
  color:#fff;text-align:center;
  background-image:url("../assets/hero/hero-dealership-sign.webp");
  background-size:cover;
  background-position:center 12%;
  background-attachment:fixed;
  isolation:isolate;
}
.hero-parallax::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.65));
  z-index:0;
}
.hero-parallax .content{position:relative;z-index:1;padding:clamp(16px,3vw,24px) 1rem clamp(28px,6vw,80px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
.hero-parallax .actions{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin-top:1rem}

.split-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:2rem;align-items:center}
.split-intro .logo-wrap{display:flex;align-items:center;justify-content:center;background:#0b1a33;border-radius:1rem;padding:1rem}
.split-intro .logo-wrap img{height:88px}

.section-title{font-size:clamp(1.6rem,4.5vw,2.2rem);font-weight:900;margin:0 0 .5rem}
.section-sub{opacity:.95;margin:0 0 1rem}

.featured-vehicles{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.featured-vehicles .card img{border-top-left-radius:12px;border-top-right-radius:12px}
.featured-vehicles .card{border-radius:12px;overflow:hidden}

.cta-strip{background:#0b1a33;color:#fff;border-radius:1rem;padding:1.25rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}
.cta-strip .cta-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.cta-strip .map{flex:1 1 280px;min-width:280px}

@media (max-width: 980px){
  .split-intro{grid-template-columns:1fr;gap:1rem}
  .featured-vehicles{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .hero-parallax{
  position:relative;
  min-height:68vh;
  display:flex;align-items:flex-end;justify-content:center;
  color:#fff;text-align:center;
  background-image:url("../assets/hero/hero-dealership-sign.webp");
  background-size:cover;
  background-position:center 12%;
  background-attachment:fixed;
  isolation:isolate;
}
}
 /* disable fixed on small screens */
  .featured-vehicles{grid-template-columns:1fr}
}

.hero-parallax h1{font-weight:900}
.hero-parallax p{font-weight:600;opacity:.98}

@media (max-width: 640px){.hero-parallax{min-height:60vh;background-attachment:scroll;background-position:center 18%}.hero-parallax .content{padding-bottom:64px}}

.nav-links{display:flex;gap:1.5rem;list-style:none;margin:0;padding:0}
.nav-links a{color:#fff;text-decoration:none;font-weight:600}
.nav-links a:hover{color:#d4af37}
@media(max-width:980px){
  .nav-links{flex-direction:column;align-items:flex-end;gap:.75rem;padding-top:.75rem}
}


/* vFinal9: Gold hamburger + slide-down mobile nav */
.menu-toggle{display:none; background:transparent; border:1px solid #d4af37; color:#d4af37; padding:.45rem .7rem; border-radius:10px; font-weight:800; line-height:1; cursor:pointer}
.menu-toggle:focus{outline:2px solid #d4af37; outline-offset:2px}

@media (max-width: 980px){
  .menu-toggle{display:inline-flex; align-items:center; gap:.4rem}
  .nav-links{position:absolute; right:1.5rem; top:100%; background:rgba(0,0,0,.92);
    padding:.75rem 1rem; border-bottom:1px solid rgba(255,255,255,.12); border-left:1px solid rgba(255,255,255,.08);
    flex-direction:column; align-items:flex-end; gap:.75rem;
    max-height:0; overflow:hidden; transition:max-height .35s ease}
  .nav-links.open{max-height:520px}
}

/* vFinal11: Simplified mobile dropdown */
@media (max-width: 980px){
  .menu-toggle{display:inline-flex; align-items:center; gap:.4rem; background:transparent; border:1px solid #d4af37; color:#d4af37; padding:.45rem .7rem; border-radius:10px; font-weight:800}
  .nav-links{position:absolute; left:0; right:0; top:100%; background:#0b0f19; padding:.75rem 1rem; flex-direction:column; align-items:flex-end; gap:.75rem; display:none}
  .nav-links.open{display:flex}
}