/* ============================================================
   Crescent Motors — Premium Automotive
   Tanzania | Charcoal/Black + White + Metallic Grey + Gold Accent
   Mobile-first • Minimal • Sophisticated
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Instrument+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{
  --charcoal-950:#0E1318;
  --charcoal-900:#151B22;
  --charcoal-800:#1E262F;
  --charcoal-700:#28333E;
  --charcoal-100:#EEF0F2;
  --metal-050:#F6F7F8;
  --metal-100:#E9EDEF;
  --metal-200:#D9DEE2;
  --metal-300:#C3CACE;
  --gold-500:#C8A86A;
  --gold-600:#B8935A;
  --gold-700:#A87F45;
  --gold-100:#FFF7E6;
  --gold-050:#FFFBF0;
  --ink-900:#0E1318;
  --ink-700:#2B3642;
  --ink-500:#5E6B7A;
  --ink-400:#8893A1;
  --ink-300:#A8B2BE;
  --ink-200:#E2E7EB;
  --bg:#FFFFFF;
  --surface:#F6F7F8;
  --surface-2:#EEF0F2;
  --line:#E2E7EB;
  --line-light:#EDF0F2;
  --radius-s:10px;
  --radius-m:16px;
  --radius-l:20px;
  --radius-xl:26px;
  --shadow-s:0 4px 16px rgba(14,19,24,.07);
  --shadow-m:0 12px 32px rgba(14,19,24,.11);
  --shadow-l:0 24px 64px rgba(14,19,24,.14);
  --shadow-gold:0 8px 22px rgba(200,168,106,.28);
  --font-body:"Inter","Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  --font-display:"Instrument Serif","Times New Roman",serif;
  --container:1240px;
  --header-h:72px;
  --topbar-h:36px;
}

*{box-sizing:border-box; min-width:0}
*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; scroll-padding-top:calc(var(--header-h) + 10px)}
body{margin:0; font-family:var(--font-body); font-size:1rem; line-height:1.65; color:var(--ink-700); background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:clip; word-wrap:break-word; overflow-wrap:break-word}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{font-family:var(--font-body); color:var(--ink-900); line-height:1.15; margin:0 0 .5em; font-weight:800; letter-spacing:-0.03em}
h1{font-size:clamp(2.2rem,5.2vw,3.9rem); line-height:.96}
h2{font-size:clamp(1.65rem,3.2vw,2.45rem)}
h3{font-size:clamp(1.05rem,1.6vw,1.22rem)}
p{margin:0 0 1em}
ul{padding:0; margin:0; list-style:none}
a{color:var(--charcoal-900); text-decoration:none}
a:hover{color:var(--gold-600)}
:focus-visible{outline:3px solid var(--gold-500); outline-offset:2px; border-radius:4px}
::selection{background:var(--gold-500); color:#fff}
.container{width:min(var(--container),100% - 2rem); margin-inline:auto}
@media(min-width:760px){.container{width:min(var(--container),100% - 2.5rem)}}
.section{padding-block:clamp(3rem,6vw,5.5rem)}
.section--surface{background:var(--surface)}
.skip-link{position:absolute; left:-9999px; top:0; z-index:200; background:var(--gold-500); color:#fff; padding:.7rem 1.1rem; font-weight:700}
.skip-link:focus{left:.5rem; top:.5rem}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.9rem 1.5rem; border-radius:999px; font-weight:700; font-size:.94rem; line-height:1.2; border:2px solid transparent; cursor:pointer; transition:all .2s ease; font-family:var(--font-body); letter-spacing:-0.01em; white-space:nowrap}
.btn svg{width:1.1em; height:1.1em; flex:none}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--gold-500); color:#fff; box-shadow:var(--shadow-gold); border-color:var(--gold-500)}
.btn--accent:hover{background:var(--gold-600); border-color:var(--gold-600); color:#fff; transform:translateY(-1px)}
.btn--dark{background:var(--charcoal-950); color:#fff; border-color:var(--charcoal-950)}
.btn--dark:hover{background:var(--charcoal-800); border-color:var(--charcoal-800); color:#fff}
.btn--outline-light{border-color:rgba(255,255,255,.75); color:#fff; background:rgba(255,255,255,.06); backdrop-filter:blur(6px)}
.btn--outline-light:hover{background:#fff; color:var(--charcoal-950); border-color:#fff}
.btn--outline-dark{border-color:var(--line); color:var(--charcoal-950); background:#fff}
.btn--outline-dark:hover{border-color:var(--charcoal-950); background:var(--charcoal-950); color:#fff}
.btn--wa{background:#25D366; color:#fff; border-color:#25D366}
.btn--wa:hover{background:#1FB356; border-color:#1FB356; color:#fff}
.btn--ghost{background:transparent; border-color:var(--line); color:var(--ink-700)}
.btn--ghost:hover{border-color:var(--charcoal-950); color:var(--charcoal-950)}
.btn--lg{padding:1.05rem 2rem; font-size:1rem}
.btn--sm{padding:.68rem 1.2rem; font-size:.88rem}

/* Topbar */
.topbar{background:var(--charcoal-950); color:#94A3B8; font-size:.8rem; border-bottom:1px solid rgba(255,255,255,.07)}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--topbar-h); flex-wrap:wrap; padding-block:.3rem}
.topbar__left{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap}
.topbar__dot{width:7px; height:7px; border-radius:50%; background:#22C55E; box-shadow:0 0 0 4px rgba(34,197,94,.18); flex:none}
.topbar__note{margin:0; color:#CBD5E1; font-size:.8rem}
.topbar__note strong{color:var(--gold-500); font-weight:700}
.topbar__sep{opacity:.3}
.topbar__est{display:none; color:#8FA0B0; font-weight:600}
@media(min-width:860px){.topbar__est{display:inline}}
.topbar__right{display:flex; align-items:center; gap:.6rem; margin-left:auto; flex-wrap:wrap}
.topbar__right a{color:#E2E8F0; font-weight:600; font-size:.8rem}
.topbar__right a:hover{color:var(--gold-500)}
.topbar__pill{font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:rgba(200,168,106,.14); color:var(--gold-500); border:1px solid rgba(200,168,106,.2); padding:.2rem .55rem; border-radius:999px}

/* Header — sticky + robust */
.header{position:sticky; position:-webkit-sticky; top:0; z-index:1000; background:rgba(255,255,255,.97); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); border-bottom:1px solid transparent; transition:box-shadow .25s,border-color .25s, background .2s}
.header.is-scrolled{box-shadow:0 6px 24px rgba(14,19,24,.08); border-color:var(--line-light); background:rgba(255,255,255,.98)}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:.75rem; min-height:var(--header-h); min-width:0}
.brand{display:inline-flex; align-items:center; gap:.85rem; min-width:0}
.brand__mark{width:44px; height:44px; border-radius:11px; background:var(--charcoal-950); display:grid; place-items:center; color:var(--gold-500); flex:none; box-shadow:var(--shadow-s)}
.brand__mark svg{width:22px; height:22px}
.brand__text{display:flex; flex-direction:column; line-height:1}
.brand__name{font-weight:800; font-size:1.18rem; color:var(--charcoal-950); letter-spacing:.02em; line-height:1}
.brand__name span{color:var(--gold-600)}
.brand__tag{font-size:.66rem; text-transform:uppercase; letter-spacing:.14em; color:var(--ink-400); font-weight:700; margin-top:3px}
.main-nav{display:none}
.header__cta{display:none}
.header__phone{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; color:var(--charcoal-950); font-size:.88rem}
.header__phone svg{color:var(--gold-600)}
.nav-toggle{display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1.5px solid var(--line); border-radius:999px; width:44px; height:44px; cursor:pointer; color:var(--charcoal-950)}
.nav-toggle__bars{position:relative; width:18px; height:14px; display:inline-block}
.nav-toggle__bars::before,.nav-toggle__bars::after,.nav-toggle__bars span{content:""; position:absolute; left:0; width:100%; height:2.5px; border-radius:99px; background:currentColor; transition:transform .25s,opacity .2s,top .25s}
.nav-toggle__bars::before{top:0}
.nav-toggle__bars span{top:6px}
.nav-toggle__bars::after{top:12px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:6px; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars span{opacity:0}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:6px; transform:rotate(-45deg)}
.mobile-nav{display:none; position:absolute; inset-inline:0; top:100%; background:#fff; border-top:1px solid var(--line); box-shadow:var(--shadow-l); padding:1rem 1.1rem 1.4rem; max-height:calc(100vh - var(--header-h)); overflow-y:auto}
.mobile-nav.is-open{display:block}
.mobile-nav a{display:block; padding:.75rem 0; font-weight:650; color:var(--charcoal-950); font-size:1rem; border-bottom:1px solid var(--surface)}
.mobile-nav a:last-of-type{border:none}
.mobile-nav__cta{display:grid; gap:.6rem; margin-top:1rem}
.mobile-nav__cta .btn{width:100%}
.mobile-nav__foot{margin-top:1rem; color:var(--ink-500); font-size:.84rem; line-height:1.5; text-align:center}
.mobile-nav__foot a{color:var(--charcoal-950); font-weight:700; display:inline; padding:0; border:none}
@media(min-width:1080px){
  .nav-toggle{display:none}
  .mobile-nav{display:none !important}
  .main-nav{display:flex; align-items:center; gap:.15rem; flex:1; justify-content:center}
  .main-nav a{padding:.6rem .85rem; font-weight:650; font-size:.9rem; color:var(--ink-500); border-radius:8px}
  .main-nav a:hover{color:var(--charcoal-950); background:var(--surface)}
  .main-nav a.is-active{color:var(--charcoal-950); background:var(--surface)}
  .header__cta{display:inline-flex; align-items:center; gap:.7rem}
}

/* Hero */
.hero{position:relative; background:var(--charcoal-950); color:#fff; overflow:hidden; isolation:isolate}
.hero__bg{position:absolute; inset:0; z-index:-1}
.hero__bg img{width:100%; height:100%; object-fit:cover; object-position:center 40%}
.hero__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(92deg, rgba(14,19,24,.96) 28%, rgba(14,19,24,.74) 52%, rgba(14,19,24,.38) 76%, rgba(14,19,24,.18)), radial-gradient(700px 500px at 18% 100%, rgba(200,168,106,.16), transparent 62%)}
.hero__inner{display:grid; gap:2rem; align-items:center; padding-block:clamp(2.8rem,7vw,5.2rem) clamp(2.8rem,6vw,4rem); min-height:clamp(560px,84vh,760px)}
.hero__eyebrow{display:inline-flex; align-items:center; gap:.6rem; background:rgba(200,168,106,.13); border:1px solid rgba(200,168,106,.22); padding:.38rem .75rem .38rem .5rem; border-radius:999px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-500); margin-bottom:1rem; flex-wrap:wrap}
.hero__eyebrow-dot{width:8px; height:8px; border-radius:50%; background:var(--gold-500); box-shadow:0 0 0 4px rgba(200,168,106,.18)}
.eyebrow__pill{background:var(--gold-500); color:#fff; padding:.2rem .5rem; border-radius:999px; font-size:.68rem; letter-spacing:.06em}
.hero h1{color:#fff; max-width:16ch}
.hero h1 em{font-style:normal; color:var(--gold-500); font-family:var(--font-display); font-weight:400; letter-spacing:-0.02em}
.hero__lead{max-width:54ch; color:#C7D3E2; font-size:clamp(1.02rem,1.4vw,1.18rem); line-height:1.6; margin-bottom:1.6rem}
.hero__actions{display:flex; flex-wrap:wrap; gap:.8rem}
.hero__trust{display:flex; flex-wrap:wrap; gap:1rem 1.4rem; margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid rgba(255,255,255,.11); font-size:.86rem; color:#A8BBCF}
.hero__trust li{display:flex; align-items:center; gap:.45rem; font-weight:600}
.hero__trust li svg{width:16px; height:16px; color:var(--gold-500); flex:none}
.hero__card{display:none; background:rgba(255,255,255,.97); backdrop-filter:blur(10px); border-radius:var(--radius-l); overflow:hidden; box-shadow:var(--shadow-l); color:var(--ink-700); max-width:380px; border:1px solid rgba(255,255,255,.6)}
.hero__card-top{display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem .6rem; background:var(--metal-050); border-bottom:1px solid var(--line-light)}
.hero__card-badge{font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; background:var(--charcoal-950); color:#fff; padding:.3rem .6rem; border-radius:999px}
.hero__card-avatars{display:flex; align-items:center}
.hero__card-avatars img{width:26px; height:26px; border-radius:50%; border:2px solid #fff; margin-left:-8px; object-fit:cover}
.hero__card-avatars img:first-child{margin-left:0}
.hero__card-avatars span{font-size:.74rem; font-weight:700; color:var(--ink-500); margin-left:.5rem}
.hero__card-img{aspect-ratio:16/9.5; object-fit:cover; width:100%}
.hero__card-body{padding:1rem 1.1rem}
.hero__card-body h3{margin:0 0 .15rem; font-size:1rem; color:var(--charcoal-950)}
.hero__card-body p{margin:0; color:var(--ink-500); font-size:.88rem}
.hero__card-row{display:flex; align-items:center; justify-content:space-between; margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line-light)}
.hero__card-row strong{font-size:1.05rem; color:var(--charcoal-950)}
.hero__card-row strong span{font-size:.72rem; color:var(--ink-400); font-weight:500}
.card-link{font-weight:700; color:var(--gold-600); font-size:.88rem}
.card-link:hover{color:var(--gold-700)}
.hero__card-note{font-size:.7rem; color:var(--ink-400); margin:0 1.1rem 1rem; line-height:1.4}
.hero__bottombar{background:rgba(255,255,255,.06); backdrop-filter:blur(6px); border-top:1px solid rgba(255,255,255,.08); padding:.7rem 0; font-size:.82rem; color:#CBD5E1}
.hero__bottombar-inner{display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; justify-content:center}
.hero__bottombar strong{color:#fff; font-weight:700}
.hero__bottombar em{font-style:normal; opacity:.4}
.hero__bottombar-cta{margin-left:auto; display:none; align-items:center; gap:.4rem}
.hero__bottombar-cta a{color:var(--gold-500); font-weight:700}
@media(min-width:980px){
  .hero__inner{grid-template-columns:1.12fr .88fr; gap:2.8rem}
  .hero__card{display:block}
  .hero__bottombar-inner{justify-content:flex-start}
  .hero__bottombar-cta{display:inline-flex}
}
@media(max-width:640px){.hero__bg img{object-position:62% center}}

/* Stats */
.stats{background:var(--charcoal-950); color:#fff; padding-block:1.6rem 1.1rem; border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06)}
.stats__inner{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem 1rem; text-align:center}
.stat__num{font-size:clamp(1.9rem,4vw,2.6rem); font-weight:800; color:var(--gold-500); line-height:1; letter-spacing:-0.03em}
.stat__num span{font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-500); font-weight:700; vertical-align:middle; margin-left:.15rem}
.stat__label{font-weight:700; color:#fff; margin-top:.3rem; font-size:.94rem}
.stat__sub{font-size:.74rem; color:#8FA0B0; margin-top:2px; line-height:1.4}
.stats__disclaimer{text-align:center; font-size:.72rem; color:#6B7B8E; margin:.9rem auto 0; max-width:760px; line-height:1.5}
@media(min-width:760px){.stats__inner{grid-template-columns:repeat(4,1fr)}}

/* Section heads */
.section-head{max-width:720px; margin-bottom:clamp(1.8rem,3vw,2.6rem)}
.section-head--center{margin-inline:auto; text-align:center}
.eyebrow{display:inline-flex; align-items:center; gap:.5rem; font-size:.72rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-600); margin-bottom:.7rem}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold-500); border-radius:99px}
.eyebrow--light{color:var(--gold-500)}
.eyebrow--light::before{background:var(--gold-500)}
.section-head p{color:var(--ink-500); margin:0; font-size:1.02rem}
.section-head h2{margin-bottom:.4em}

/* Why */
.why-grid{display:grid; gap:1rem; grid-template-columns:1fr}
.why-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.4rem 1.3rem; transition:transform .2s,box-shadow .2s,border-color .2s; position:relative; overflow:hidden}
.why-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--gold-500),var(--gold-600)); opacity:0; transition:opacity .2s}
.why-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-m); border-color:rgba(200,168,106,.25)}
.why-card:hover::before{opacity:1}
.why-card__icon{width:44px; height:44px; border-radius:12px; background:var(--charcoal-950); color:var(--gold-500); display:grid; place-items:center; margin-bottom:.9rem}
.why-card__icon svg{width:20px; height:20px}
.why-card h3{font-size:1.02rem; margin-bottom:.35em}
.why-card p{margin:0; font-size:.92rem; color:var(--ink-500); line-height:1.6}
@media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr)}}

/* Vehicles */
.vehicles-grid{display:grid; gap:1.2rem; grid-template-columns:1fr}
.vehicle-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); overflow:hidden; display:flex; flex-direction:column; transition:transform .22s,box-shadow .22s,border-color .22s}
.vehicle-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-m); border-color:rgba(200,168,106,.28)}
.vehicle-card__media{position:relative; aspect-ratio:16/10.2; overflow:hidden; background:var(--metal-100)}
.vehicle-card__media img{width:100%; height:100%; object-fit:cover; transition:transform .45s}
.vehicle-card:hover .vehicle-card__media img{transform:scale(1.05)}
.vehicle-card__badges{position:absolute; top:10px; left:10px; display:flex; gap:.4rem; z-index:2}
.badge{font-size:.68rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:.28rem .55rem; border-radius:999px; border:1px solid transparent}
.badge--est{background:var(--gold-500); color:#fff}
.badge--src{background:rgba(255,255,255,.92); color:var(--charcoal-950); border-color:rgba(255,255,255,.9)}
.vehicle-card__price-tag{position:absolute; bottom:10px; right:10px; background:rgba(14,19,24,.88); color:#fff; padding:.4rem .7rem; border-radius:999px; font-weight:800; font-size:.92rem; z-index:2; backdrop-filter:blur(6px)}
.vehicle-card__price-tag span{font-size:.68rem; font-weight:500; color:rgba(255,255,255,.7); margin-left:.2rem}
.vehicle-card__body{padding:1.1rem 1.15rem 1rem; display:flex; flex-direction:column; gap:.45rem; flex:1}
.vehicle-card__title{margin:0; font-size:1.08rem; line-height:1.3}
.vehicle-card__meta{color:var(--ink-500); font-size:.86rem}
.vehicle-card__specs{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem .8rem; margin:.6rem 0 .3rem; padding:.8rem; background:var(--surface); border-radius:10px; border:1px solid var(--line-light)}
.vehicle-card__spec{display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--ink-500); font-weight:500}
.vehicle-card__spec svg{width:14px; height:14px; color:var(--ink-400); flex:none}
.vehicle-card__spec strong{color:var(--ink-700); font-weight:700; margin-left:1px}
.vehicle-card__actions{display:grid; gap:.5rem; margin-top:auto; padding-top:.8rem}
.vehicle-card__actions .btn{width:100%}
.vehicle-card__actions-row{display:grid; grid-template-columns:1fr 1fr; gap:.5rem}
@media(min-width:640px){.vehicles-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.vehicles-grid{grid-template-columns:repeat(4,1fr)}}
.vehicles__note{text-align:center; color:var(--ink-400); font-size:.78rem; max-width:780px; margin:1.2rem auto 0; line-height:1.5}

/* Form */
.form-layout{display:grid; gap:2.2rem; align-items:start}
.form-benefits{display:grid; gap:.6rem; margin:1.2rem 0 1.4rem}
.form-benefits li{display:flex; gap:.6rem; align-items:center; font-weight:600; color:var(--ink-700); font-size:.92rem}
.form-benefits li svg{width:18px; height:18px; color:var(--gold-600); background:var(--gold-100); border-radius:50%; padding:3px; flex:none}
.form-contact-mini{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-m); font-size:.88rem}
.form-contact-mini a{font-weight:700; color:var(--charcoal-950)}
.form-contact-mini__badge{font-size:.7rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; background:var(--charcoal-950); color:#fff; padding:.3rem .6rem; border-radius:999px; white-space:nowrap}
.form-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-l); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow-s)}
.form-fieldset{border:1px solid var(--line-light); border-radius:var(--radius-m); padding:1.1rem 1.1rem .9rem; margin:0 0 1.1rem; background:var(--metal-050)}
.form-fieldset legend{font-weight:800; font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--charcoal-950); padding:0 .4rem}
.form-grid{display:grid; gap:.9rem; grid-template-columns:1fr}
@media(min-width:560px){.form-grid{grid-template-columns:repeat(2,1fr)} .field--full{grid-column:1/-1}}
.field label{display:block; font-weight:700; font-size:.84rem; color:var(--ink-900); margin-bottom:.35rem}
.field input,.field select,.field textarea{width:100%; font:inherit; color:var(--ink-900); padding:.82rem .95rem; border:1.5px solid var(--line); border-radius:var(--radius-s); background:#fff; transition:border-color .2s,box-shadow .2s,background .2s; font-size:.94rem}
.field textarea{resize:vertical; min-height:110px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--gold-500); box-shadow:0 0 0 4px rgba(200,168,106,.15)}
.form-note{font-size:.8rem; color:var(--ink-400); margin:.7rem 0 0; line-height:1.5}
.form-note a{color:var(--gold-600); font-weight:700}
.form-success{text-align:center; padding:1.5rem 1rem}
.form-success__icon{width:52px; height:52px; border-radius:50%; background:#ECFDF5; color:#059669; display:grid; place-items:center; margin:0 auto .9rem; border:2px solid #A7F3D0}
.form-success__icon svg{width:24px; height:24px}
.form-success h3{margin-bottom:.3rem}
.form-success p{color:var(--ink-500)}
@media(min-width:980px){.form-layout{grid-template-columns:.95fr 1.15fr}}

/* Services */
.services-grid{display:grid; gap:1rem; grid-template-columns:1fr}
.service-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.4rem 1.3rem; transition:transform .2s,box-shadow .2s}
.service-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.service-card__icon{width:44px; height:44px; border-radius:12px; background:var(--charcoal-950); color:var(--gold-500); display:grid; place-items:center; margin-bottom:.9rem}
.service-card__icon svg{width:20px; height:20px}
.service-card h3{margin-bottom:.4em}
.service-card p{margin:0; font-size:.92rem; color:var(--ink-500); line-height:1.6}
@media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.services-grid{grid-template-columns:repeat(3,1fr)}}

/* Steps */
.steps{display:grid; gap:1rem; grid-template-columns:1fr; position:relative}
.step{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.4rem 1.3rem; position:relative}
.step__num{width:44px; height:44px; border-radius:12px; background:var(--charcoal-950); color:var(--gold-500); display:grid; place-items:center; font-weight:800; font-size:.9rem; letter-spacing:.04em; margin-bottom:.9rem}
.step__line{display:none}
.step h3{font-size:1.02rem; margin-bottom:.3rem}
.step p{margin:0; font-size:.92rem; color:var(--ink-500); line-height:1.6}
@media(min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1100px){.steps{grid-template-columns:repeat(5,1fr)} .step__line{display:block; position:absolute; top:34px; left:58px; right:-1rem; height:2px; background:var(--line); z-index:0} .step:last-child .step__line{display:none} .step__num{position:relative; z-index:1}}

/* About */
.about-grid{display:grid; gap:2.2rem; align-items:center}
.about-media{position:relative}
.about-media img{border-radius:var(--radius-l); box-shadow:var(--shadow-m); aspect-ratio:4/3; object-fit:cover; width:100%}
.about-badge{position:absolute; bottom:-12px; right:14px; background:var(--charcoal-950); color:#fff; border-radius:var(--radius-m); padding:1rem 1.2rem; box-shadow:var(--shadow-m); display:flex; gap:.8rem; align-items:center; min-width:150px}
.about-badge strong{font-size:1.8rem; line-height:1; color:var(--gold-500)}
.about-badge span{font-weight:700; line-height:1.2; font-size:.88rem}
.about-badge small{display:block; font-size:.7rem; color:#94A3B8; font-weight:500}
.about-markets{position:absolute; top:14px; left:14px; background:rgba(255,255,255,.94); border:1px solid #fff; border-radius:12px; padding:.6rem .8rem; box-shadow:var(--shadow-s)}
.about-markets span{font-size:.68rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400)}
.about-markets__flags{display:flex; gap:.35rem; margin-top:.25rem; flex-wrap:wrap}
.flag{font-size:.72rem; font-weight:700; background:var(--surface); border:1px solid var(--line); padding:.2rem .45rem; border-radius:999px}
.about-values{display:grid; gap:1rem; grid-template-columns:1fr; margin:1.2rem 0}
@media(min-width:640px){.about-values{grid-template-columns:repeat(2,1fr)}}
.about-value{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1rem}
.about-value h4{margin:0 0 .3rem; font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; color:var(--gold-600)}
.about-value p{margin:0; font-size:.9rem; color:var(--ink-500); line-height:1.6}
.about-pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:.7rem; margin-top:1rem}
.about-pillar{background:var(--charcoal-950); color:#fff; border-radius:var(--radius-m); padding:.9rem .8rem; text-align:center}
.about-pillar strong{display:block; color:var(--gold-500); font-size:.9rem; letter-spacing:.04em}
.about-pillar span{font-size:.78rem; color:#CBD5E1}
.about-stats-row{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:2rem; text-align:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.2rem}
.about-stats-row strong{display:block; font-size:1.4rem; color:var(--charcoal-950)}
.about-stats-row span{font-size:.8rem; color:var(--ink-500); font-weight:600}
@media(min-width:980px){.about-grid{grid-template-columns:1fr 1fr} .about-stats-row{grid-template-columns:repeat(4,1fr)}}

/* Contact */
.contact-cards{display:grid; gap:1rem; grid-template-columns:1fr; margin-bottom:2rem}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-m); padding:1.3rem; display:flex; gap:1rem; align-items:flex-start; transition:transform .2s,box-shadow .2s}
.contact-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-m)}
.contact-card__icon{width:48px; height:48px; flex:none; border-radius:12px; display:grid; place-items:center; background:var(--charcoal-950); color:var(--gold-500)}
.contact-card__icon svg{width:22px; height:22px}
.contact-card h3{font-size:1rem; margin-bottom:.15rem}
.contact-card p{margin:0; font-size:.92rem; color:var(--ink-500)}
.contact-card a{font-weight:700}
@media(min-width:720px){.contact-cards{grid-template-columns:repeat(3,1fr)}}
.contact-layout{display:grid; gap:2rem}
@media(min-width:1024px){.contact-layout{grid-template-columns:1.1fr .9fr}}
.map-wrap{border-radius:var(--radius-l); overflow:hidden; border:1px solid var(--line); min-height:380px; background:var(--surface); box-shadow:var(--shadow-s)}
.map-wrap iframe{width:100%; height:100%; min-height:380px; border:0; display:block}
.contact-hours{margin-top:1rem; background:var(--charcoal-950); color:#CBD5E1; border-radius:var(--radius-m); padding:1.3rem}
.contact-hours h4{display:flex; align-items:center; gap:.5rem; color:#fff; margin:0 0 .6rem; font-size:.95rem}
.contact-hours p{margin:0; font-size:.92rem; line-height:1.6}
.contact-social{display:flex; align-items:center; gap:.6rem; margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,.08)}
.contact-social span{font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-500); margin-right:.2rem}
.social-link{width:36px; height:36px; border-radius:999px; background:rgba(255,255,255,.08); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.8rem; border:1px solid rgba(255,255,255,.12)}
.social-link:hover{background:var(--gold-500); color:#fff; border-color:var(--gold-500)}

/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--charcoal-950) 10%, var(--charcoal-800) 92%); color:#fff; text-align:center; padding-block:clamp(3rem,6vw,5rem); position:relative; overflow:hidden}
.cta-band::before{content:""; position:absolute; inset:0; background:radial-gradient(700px 360px at 8% -40%, rgba(200,168,106,.18), transparent 60%); pointer-events:none}
.cta-band>.container{position:relative}
.cta-band h2{color:#fff}
.cta-band p{color:#B9C7D6; max-width:62ch; margin:.6rem auto 1.2rem; font-size:1.04rem}
.cta-band__actions{display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center}

/* Modal */
.modal{position:fixed; inset:0; z-index:150; display:none; align-items:center; justify-content:center; padding:1rem}
.modal.is-open{display:flex}
.modal__backdrop{position:absolute; inset:0; background:rgba(14,19,24,.62); backdrop-filter:blur(4px)}
.modal__card{position:relative; background:#fff; border-radius:var(--radius-l); overflow:hidden; width:min(720px,100%); max-height:calc(100vh - 2rem); overflow-y:auto; box-shadow:var(--shadow-l); animation:modalIn .25s ease}
@keyframes modalIn{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
.modal__close{position:absolute; top:12px; right:12px; z-index:2; width:40px; height:40px; border-radius:999px; background:rgba(255,255,255,.92); border:1px solid var(--line); display:grid; place-items:center; cursor:pointer; color:var(--charcoal-950); box-shadow:var(--shadow-s)}
.modal__close svg{width:18px; height:18px}
.modal__media{position:relative; aspect-ratio:16/9; background:var(--metal-100); overflow:hidden}
.modal__media img{width:100%; height:100%; object-fit:cover}
.modal__media-badge{position:absolute; bottom:12px; left:12px; background:var(--gold-500); color:#fff; padding:.35rem .7rem; border-radius:999px; font-weight:800; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase}
.modal__body{padding:1.3rem 1.3rem 1.4rem}
.modal__price{font-size:1.35rem; font-weight:800; color:var(--charcoal-950); margin:.3rem 0 .2rem}
.modal__note{font-size:.8rem; color:var(--ink-400); margin:0 0 .8rem}
.modal__specs{display:grid; grid-template-columns:repeat(2,1fr); gap:.5rem; background:var(--surface); border:1px solid var(--line-light); border-radius:12px; padding:.9rem}
.modal__spec{display:flex; justify-content:space-between; gap:.5rem; font-size:.88rem; padding:.35rem 0; border-bottom:1px solid var(--line-light)}
.modal__spec:last-child{border:none}
.modal__spec span{color:var(--ink-500)}
.modal__spec strong{color:var(--charcoal-950)}
.modal__actions{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem}

/* Footer */
.site-footer{background:var(--charcoal-950); color:#94A3B8; font-size:.92rem}
.footer-main{display:grid; gap:2.4rem; padding-block:clamp(2.8rem,6vw,4rem) 2rem; grid-template-columns:1fr}
@media(min-width:640px){.footer-main{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.footer-main{grid-template-columns:1.45fr .9fr 1fr 1.25fr}}
.site-footer h3{color:#fff; font-size:.84rem; text-transform:uppercase; letter-spacing:.12em; margin-bottom:1rem; font-weight:800}
.site-footer .brand{margin-bottom:1rem}
.footer-about{margin:0 0 1.1rem; max-width:36ch; color:#94A3B8; line-height:1.6}
.footer-links{display:grid; gap:.55rem}
.footer-links a{color:#94A3B8; display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.9rem}
.footer-links a::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--gold-500); flex:none}
.footer-links a:hover{color:#fff}
.footer-contact{display:grid; gap:.85rem}
.footer-contact li{display:flex; gap:.75rem; align-items:flex-start}
.footer-contact svg{width:18px; height:18px; color:var(--gold-500); flex:none; margin-top:.2rem}
.footer-contact a{color:#CBD5E1; font-weight:600}
.footer-contact a:hover{color:var(--gold-500)}
.footer-contact address{font-style:normal; color:#94A3B8; line-height:1.6}
.footer-hours{margin-top:1rem; font-size:.8rem; color:#64748B}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08); padding-block:1.2rem; display:flex; flex-wrap:wrap; gap:.7rem 1.5rem; align-items:center; justify-content:space-between; font-size:.82rem}
.footer-bottom p{margin:0; color:#64748B}
.footer-bottom nav{display:flex; gap:1.1rem; flex-wrap:wrap}
.footer-bottom nav a{color:#94A3B8; font-weight:600}
.footer-bottom nav a:hover{color:var(--gold-500)}

/* Floating */
.wa-float{position:fixed; right:1rem; bottom:1rem; z-index:90; width:56px; height:56px; border-radius:50%; background:#25D366; color:#fff; display:grid; place-items:center; box-shadow:0 10px 28px rgba(37,211,102,.35); transition:transform .2s,box-shadow .2s; border:2px solid #fff}
.wa-float:hover{transform:scale(1.07); box-shadow:0 14px 32px rgba(37,211,102,.45); color:#fff}
.wa-float svg{width:26px; height:26px}
.call-float{position:fixed; right:1rem; bottom:4.6rem; z-index:90; width:56px; height:56px; border-radius:50%; background:var(--charcoal-950); color:#fff; display:none; place-items:center; box-shadow:var(--shadow-m); border:2px solid #fff}
.call-float svg{width:22px; height:22px}
@media(max-width:760px){.call-float{display:grid}}

/* Reveal */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Alert */
.alert{display:none; background:#ECFDF5; border:1px solid #A7F3D0; color:#065F46; border-radius:var(--radius-s); padding:.85rem 1rem; font-size:.9rem; font-weight:600; margin-bottom:1rem}
.alert.is-visible{display:block}
.alert--error{background:#FEF2F2; border-color:#FECACA; color:#991B1B}

/* placeholder note */
.placeholder-note{background:#FFFBEB; border:1px dashed #F59E0B; color:#92400E; padding:.7rem .9rem; border-radius:var(--radius-s); font-size:.82rem; font-weight:600; margin:1rem 0; line-height:1.5}

/* Utilities */
.divider{height:1px; background:var(--line); margin:1.5rem 0; border:none}

/* ============================================================
   MOBILE RESPONSIVENESS FIXES — prevent horizontal overflow
   ============================================================ */
fieldset{min-width:0; max-width:100%; border:1px solid var(--line-light)}
.form-fieldset{min-width:0; max-width:100%; overflow:hidden}
.form-card, .vehicle-card, .why-card, .service-card, .step, .contact-card, .about-value, .about-pillar, .form-contact-mini, .map-wrap{max-width:100%; min-width:0; overflow-wrap:break-word}
.vehicle-card__title, .vehicle-card__meta, .vehicle-card__spec, .service-card p, .why-card p{overflow-wrap:break-word; word-break:break-word}
.vehicle-card__actions-row .btn, .hero__actions .btn, .cta-band__actions .btn{white-space:normal; text-align:center; line-height:1.3}
img, iframe{max-width:100%}

/* Topbar — compact on mobile */
@media(max-width:760px){
  .topbar__inner{flex-direction:column; align-items:flex-start; gap:.35rem; padding-block:.55rem}
  .topbar__right{margin-left:0; width:100%; justify-content:space-between}
  .topbar__pill{display:none}
  .topbar__left{width:100%}
  .topbar__note{font-size:.76rem; line-height:1.4}
}
/* Brand — prevent overflow on 320px */
.brand__name{white-space:nowrap}
.brand__tag{white-space:nowrap}
@media(max-width:360px){
  .brand{gap:.55rem}
  .brand__mark{width:38px; height:38px}
  .brand__name{font-size:1.02rem}
  .brand__tag{font-size:.60rem; letter-spacing:.10em}
  .header__inner{gap:.5rem}
}
/* Container — tighter on very small screens */
@media(max-width:380px){
  .container{width:min(var(--container),100% - 1.25rem)}
}
/* Hero — stack buttons, allow wrap */
@media(max-width:480px){
  .hero__eyebrow{font-size:.70rem; padding:.35rem .6rem .35rem .45rem}
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{width:100%; justify-content:center}
  .hero__trust{gap:.7rem 1rem; font-size:.82rem}
  .hero__bottombar-inner{font-size:.76rem; text-align:center; line-height:1.4}
  .hero__bottombar strong{font-size:.80rem}
}
/* Stats — keep 2 cols but tighten */
@media(max-width:380px){
  .stats__inner{gap:1rem .5rem}
  .stat__num{font-size:1.6rem}
  .stat__label{font-size:.86rem}
  .stat__sub{font-size:.70rem}
}
/* Section head flex row — stack on mobile */
@media(max-width:760px){
  #vehicles .section-head[style]{flex-direction:column; align-items:stretch !important}
  #vehicles .section-head[style] > div:last-child{width:100%}
  #vehicles .section-head[style] .btn{flex:1 1 auto}
}
/* Vehicle grid — ensure no overflow */
.vehicles-grid, .why-grid, .services-grid, .steps, .contact-cards, .about-pillars, .about-values{min-width:0}
.vehicle-card__specs{gap:.4rem .6rem; padding:.65rem}
@media(max-width:380px){
  .vehicle-card__specs{grid-template-columns:1fr 1fr; gap:.35rem .5rem}
  .vehicle-card__spec{font-size:.78rem}
  .vehicle-card__actions-row{grid-template-columns:1fr; gap:.45rem}
  .vehicle-card__actions-row .btn{padding:.6rem .8rem; font-size:.84rem}
  .vehicle-card__price-tag{font-size:.82rem; padding:.32rem .55rem; bottom:8px; right:8px}
  .badge{font-size:.62rem; padding:.22rem .45rem}
}
/* Form — stack mini contact, tighten fieldset */
@media(max-width:560px){
  .form-contact-mini{flex-direction:column; align-items:stretch; gap:.6rem; text-align:left}
  .form-contact-mini__badge{align-self:flex-start}
  .form-fieldset{padding:.85rem .75rem .7rem}
  .form-fieldset legend{font-size:.78rem}
  .field input,.field select,.field textarea{padding:.72rem .8rem; font-size:.92rem}
}
@media(max-width:380px){
  .form-card{padding:1.1rem .85rem}
}
/* About — reposition badges on mobile to avoid overflow */
@media(max-width:520px){
  .about-badge{right:8px; bottom:-8px; padding:.7rem .85rem; min-width:0; gap:.6rem}
  .about-badge strong{font-size:1.4rem}
  .about-badge span{font-size:.80rem}
  .about-badge small{font-size:.66rem}
  .about-markets{top:10px; left:10px; padding:.45rem .6rem; max-width:calc(100% - 20px)}
  .about-markets__flags{gap:.25rem}
  .flag{font-size:.68rem; padding:.15rem .35rem}
  .about-pillars{gap:.5rem}
  .about-pillar{padding:.7rem .5rem}
  .about-pillar strong{font-size:.82rem}
  .about-pillar span{font-size:.72rem}
  .about-stats-row{padding:.85rem .5rem; gap:.7rem .5rem}
  .about-stats-row strong{font-size:1.2rem}
}
/* Contact — map height responsive */
@media(max-width:760px){
  .map-wrap{min-height:300px}
  .map-wrap iframe{min-height:300px}
  .contact-layout{gap:1.4rem}
}
/* CTA band — buttons wrap nicely */
@media(max-width:480px){
  .cta-band__actions{flex-direction:column; align-items:stretch}
  .cta-band__actions .btn{width:100%}
}
/* Footer — prevent overflow */
.site-footer .container, .footer-main, .footer-bottom{max-width:100%; min-width:0}
@media(max-width:380px){
  .footer-bottom{flex-direction:column; align-items:flex-start}
}
/* Modal — full width on mobile with safe padding */
@media(max-width:520px){
  .modal{padding:.5rem}
  .modal__card{width:100%; max-height:calc(100vh - 1rem); border-radius:16px}
  .modal__media{aspect-ratio:16/10}
  .modal__body{padding:1rem .9rem 1.1rem}
  .modal__specs{grid-template-columns:1fr; gap:0}
  .modal__actions{flex-direction:column}
  .modal__actions .btn{width:100%}
}
/* Header mobile nav — prevent body scroll bleed and ensure fit */
.mobile-nav{max-width:100vw; box-sizing:border-box; left:0; right:0}
.mobile-nav a{overflow-wrap:break-word}
/* Ensure no element forces horizontal scroll */
html, body{max-width:100%; overflow-x:clip}
section, .container, .header__inner, .hero__inner, .form-layout, .about-grid, .contact-layout{max-width:100%; min-width:0}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation:none !important; transition:none !important} .reveal{opacity:1; transform:none}}
@media print{.header,.site-footer,.wa-float,.call-float,.hero__bottombar{display:none !important}}