/* iCAUR Helderberg — site styles
   Faithful replica of the iCAUR South Africa brand site for the
   authorised iCAUR Helderberg dealership. */

:root {
  --black: #0a0a0a;
  --near-black: #111113;
  --panel: #18181b;
  --panel-2: #1f1f23;
  --white: #ffffff;
  --grey: #b5b5ba;
  --grey-2: #8a8a90;
  --line: #2a2a2e;
  --accent: #ff5b1a;     /* iCAUR orange */
  --accent-2: #ff7a3c;
  --radius: 14px;
  --maxw: 1280px;
  --header-h: 72px;
  --font: "Helvetica Neue", "Inter", Arial, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--black);
  color: var(--white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.08; font-weight: 800; letter-spacing: -0.02em; }
h1 { font-size: clamp(2.2rem, 6vw, 4.6rem); }
h2 { font-size: clamp(1.7rem, 4vw, 3rem); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.7rem); }
p { margin: 0 0 1rem; color: var(--grey); }

.container { width: min(100% - 48px, var(--maxw)); margin-inline: auto; }
.section { padding: clamp(48px, 8vw, 110px) 0; }
.muted { color: var(--grey-2); }
.center { text-align: center; }
.eyebrow { text-transform: uppercase; letter-spacing: .28em; font-size: .72rem; color: var(--accent); font-weight: 700; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.6rem; border-radius: 100px; font-weight: 700;
  font-size: .9rem; letter-spacing: .02em; cursor: pointer; border: 1px solid transparent;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { border-color: rgba(255,255,255,.4); color: #fff; background: transparent; }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-dark { background: #fff; color: #000; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(10,10,10,.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { display: inline-flex; flex-direction: column; gap: 3px; font-size: 1.5rem; font-weight: 900; letter-spacing: .04em; }
.brand span { color: var(--accent); }
.brand-logo { height: 22px; width: auto; display: block; }
.brand small { display:block; font-size:.5rem; letter-spacing:.34em; color: var(--grey-2); font-weight:600; padding-left:1px; }
.site-footer .brand-logo { height: 24px; }

.nav { display: flex; align-items: center; gap: 1.6rem; }
.nav-list { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.nav-list > li > a, .nav-trigger {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; background: none; border: none; cursor: pointer; font-family: inherit; padding: .4rem 0;
}
.nav-list > li > a:hover, .nav-trigger:hover { color: var(--accent); }

.has-menu { position: relative; }
.dropdown {
  position: absolute; top: 130%; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: .5rem; min-width: 180px; opacity: 0; visibility: hidden; transition: .18s ease;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.has-menu:hover .dropdown, .has-menu:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.dropdown a { display: block; padding: .55rem .8rem; border-radius: 8px; font-size: .85rem; letter-spacing: .04em; color: var(--grey); }
.dropdown a:hover { background: var(--panel-2); color: #fff; }

.nav-cta { display: inline-flex; padding: .55rem 1.15rem; font-size: .8rem; }
.menu-toggle { display: none; background: none; border: none; color: #fff; font-size: 1.6rem; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 86vh; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media, .hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.05) 40%, rgba(10,10,10,.85) 100%); }
.hero-inner { position: relative; z-index: 2; padding-bottom: clamp(40px, 8vw, 90px); }
.hero h1 { max-width: 16ch; }
.hero p { max-width: 52ch; font-size: 1.05rem; color: #e9e9ec; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; }

.page-hero { min-height: 64vh; }
.page-hero.short { min-height: 42vh; }
.hero-model-logo { height: clamp(30px, 4.5vw, 52px); width: auto; display: block; margin-bottom: .7rem; }

/* ---------- Hero video carousel ---------- */
.hero-carousel { padding: 0; min-height: 90vh; }
.hero-carousel::after { display: none; }
.hero-track { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 38%, rgba(10,10,10,.7) 100%); }
.hero-slide-inner { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: clamp(48px, 5vw, 72px); }
.hero-side { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.hero-nav { display: flex; gap: .6rem; }
.hero-thumb { display: flex; flex-direction: column; align-items: flex-start; gap: .2rem; }
.hero-thumb img { width: clamp(120px, 14vw, 190px); height: auto; filter: drop-shadow(0 14px 30px rgba(0,0,0,.55)); }
.hero-model { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 900; letter-spacing: .06em; line-height: 1; }
.hero-wordmark { height: clamp(34px, 5vw, 60px); width: auto; display: block; }
.hero-caption { max-width: 340px; }
.hero-caption p { color: #fff; font-size: 1.15rem; font-weight: 500; margin: 0 0 .5rem; }
.hero-discover { display: inline-flex; align-items: center; gap: .55rem; background: var(--accent); color: #fff; font-size: 1.02rem; font-weight: 700; padding: .85rem 1.8rem; border-radius: 100px; transition: transform .15s ease, background .2s ease; }
.hero-discover:hover { background: var(--accent-2); transform: translateY(-2px); }
.hero-discover .arr { color: #fff; transition: transform .2s ease; }
.hero-discover:hover .arr { transform: translateX(5px); }
.hero-arrow { z-index: 4; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.25); color: #fff; font-size: 1.4rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s ease; padding: 0; }
.hero-arrow:hover { background: var(--accent); border-color: var(--accent); }
.hero-dots { position: absolute; bottom: clamp(48px, 5vw, 72px); left: 50%; transform: translateX(-50%); z-index: 4; display: flex; gap: .5rem; }
.hero-dots .dot { width: 32px; height: 4px; border-radius: 2px; border: none; background: rgba(255,255,255,.35); cursor: pointer; padding: 0; }
.hero-dots .dot.is-active { background: var(--accent); }
@media (max-width: 700px) {
  .hero-carousel { min-height: 84vh; }
  .hero-slide-inner { flex-direction: column; align-items: flex-start; gap: 1rem; padding-bottom: 64px; }
  .hero-thumb img { width: 104px; }
  .hero-model { font-size: 2.3rem; }
  .hero-caption { max-width: 100%; }
  .hero-caption p { font-size: 1rem; }
  .hero-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
  .hero-dots { bottom: 22px; }
}

/* ---------- Model picker ---------- */
.model-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.model-card {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; background: linear-gradient(180deg, var(--panel) 0%, var(--near-black) 100%);
  display: flex; flex-direction: column; gap: .4rem; min-height: 260px; overflow: hidden;
  transition: border-color .2s ease, transform .2s ease;
}
.model-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.model-card-img { width: 100%; max-width: 420px; height: auto; align-self: center; margin-bottom: .6rem; transition: transform .3s ease; }
.model-card:hover .model-card-img { transform: scale(1.03); }
.model-card .price { color: var(--accent); font-weight: 700; font-size: .95rem; }
.model-card h3 { font-size: 1.8rem; margin: .2rem 0; }
.model-card .spacer { flex: 1; }

/* ---------- Lifestyle grid ---------- */
.feature-block { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 420px; display: flex; align-items: flex-end; }
.feature-block img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.feature-block::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85)); }
.feature-block .caption { position: relative; z-index: 2; padding: 2rem; }
.feature-block .caption p { color: #e4e4e7; max-width: 46ch; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ---------- Overview intro (headline left, copy right) ---------- */
.overview-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.overview-intro .oi-head h2 { margin: 0; }
.overview-intro .oi-body { padding-top: .4rem; }
@media (max-width: 900px){ .overview-intro { grid-template-columns: 1fr; gap: 1.2rem; } }

/* ---------- Stats / overview ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel);
  display: flex; flex-direction: column;
}
.stat img { height: 220px; object-fit: cover; width: 100%; }
.stat .body { padding: 1.4rem; }
.stat .big { font-size: 2.2rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.stat .label { color: var(--grey-2); font-size: .9rem; }

/* ---------- Model section tabs ---------- */
.model-subnav {
  position: sticky; top: var(--header-h); z-index: 40; background: rgba(17,17,19,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.model-subnav .container { display: flex; align-items: center; gap: 1.6rem; height: 56px; overflow-x: auto; }
.model-subnav a { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey); white-space: nowrap; }
.model-subnav a:hover, .model-subnav a.active { color: #fff; }
.model-subnav .price-pill { margin-left: auto; color: var(--accent); font-weight: 700; white-space: nowrap; }

/* ---------- Colour swatches ---------- */
.colour-stage { position: relative; border-radius: var(--radius); overflow: hidden; }
.colour-stage img { width: 100%; aspect-ratio: 16/8; object-fit: cover; }
.swatches { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.swatch { display:flex; flex-direction:column; align-items:center; gap:.4rem; font-size:.75rem; color: var(--grey); cursor: pointer; background:none; border:none; font-family:inherit; padding:0; }
.swatch .dot { width: 34px; height: 34px; border-radius: 9px; border: 2px solid var(--line); transition:.18s ease; }
.swatch:hover .dot { border-color: var(--grey); }
.swatch.active .dot { border-color: #fff; box-shadow:0 0 0 2px rgba(255,255,255,.25); }
.swatch.active { color: #fff; }
.swatch .swl { max-width:8ch; line-height:1.2; }

/* ---------- Colour changer (model pages) ---------- */
.colour-changer { display:grid; grid-template-columns: 1.12fr 1fr; gap:34px; align-items:start; margin:1.4rem 0 1rem; }
.colour-main { border-radius: var(--radius); overflow:hidden; background: var(--panel); }
.colour-main img { width:100%; aspect-ratio:16/11; object-fit:cover; display:block; transition:opacity .35s ease; }
.colour-detail h2 { margin-top:0; }
.colour-detail .colour-current { color: var(--accent); font-weight:700; letter-spacing:.04em; margin:.2rem 0 1.2rem; }
.colour-gallery { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:1.2rem; }
.colour-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:12px; transition:opacity .35s ease; }
.colour-fade { opacity:0 !important; }
@media (max-width:900px){ .colour-changer { grid-template-columns:1fr; } }

/* ---------- Interior hotspot stage ---------- */
.hotspot-stage { position: relative; width: 100%; line-height: 0; }
.hotspot-bg { width: 100%; height: auto; display: block; }
.hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 3; background: none; border: 0; padding: 0; cursor: pointer; }
.hs-dot { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: var(--hs, var(--accent)); transform: rotate(45deg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--hs, var(--accent)) 24%, transparent); transition: transform .2s ease, box-shadow .2s ease; animation: hs-pulse 2.4s ease-in-out infinite; }
.hs-dot b { transform: rotate(-45deg); color: #fff; font-weight: 800; font-style: italic; font-family: Georgia, serif; font-size: 1rem; line-height: 1; }
.hotspot:hover .hs-dot, .hotspot.open .hs-dot { transform: rotate(45deg) scale(1.14); }
@keyframes hs-pulse { 0%,100%{ box-shadow:0 0 0 6px color-mix(in srgb, var(--hs, var(--accent)) 22%, transparent);} 50%{ box-shadow:0 0 0 12px color-mix(in srgb, var(--hs, var(--accent)) 5%, transparent);} }
.hs-card { position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translateX(-50%) translateY(6px); width: 300px; background: #111113; border: 1px solid var(--line); border-radius: 16px; padding: 16px; box-shadow: 0 24px 60px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: .22s ease; z-index: 5; line-height: 1.5; text-align: left; pointer-events: none; }
.hotspot:hover .hs-card, .hotspot:focus-within .hs-card, .hotspot.open .hs-card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hs-card img, .hs-thumb { width: 100%; height: 152px; object-fit: cover; display: block; border-radius: 11px; margin-bottom: 14px; }
.hs-thumb { background-size: 250%; background-repeat: no-repeat; background-color: #0c0c0d; }
.hs-card .hs-body { padding: 0; }
.hs-card strong { display: block; color: #fff; font-size: 1.05rem; margin-bottom: .5rem; }
.hs-card .hs-body span { color: var(--grey); font-size: .86rem; }
.hotspot.flip-down .hs-card { bottom: auto; top: calc(100% + 14px); }
@media (max-width: 600px){ .hs-card { width: 210px; } .hs-dot { width: 30px; height: 30px; } }

/* ---------- Gallery ---------- */
.gallery { display: grid; gap: 20px; }
.gallery.cols-2 { grid-template-columns: 1fr 1fr; }
.gallery.cols-3 { grid-template-columns: repeat(3,1fr); }
.gallery img { border-radius: var(--radius); width: 100%; height: 100%; object-fit: cover; }
.gallery .span-2 { grid-column: span 2; }
.tall { aspect-ratio: 3/4; } .wide { aspect-ratio: 16/9; }

/* ---------- Offers ---------- */
.offers-toolbar { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; }
.offers-toolbar select { background: var(--panel); border: 1px solid var(--line); color:#fff; padding:.7rem 1rem; border-radius: 10px; font-family:inherit; }
.offer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; }
.offer-card { background:#fff; color:#141414; border:1px solid #e8e8e8; border-radius:22px; padding:1.6rem 1.6rem 1.8rem; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; box-shadow:0 12px 32px rgba(0,0,0,.28); }
.offer-card:hover { transform: translateY(-4px); box-shadow:0 20px 46px rgba(0,0,0,.4); }
.offer-photo { position:relative; text-align:center; padding-top:.2rem; min-height:170px; display:flex; align-items:center; justify-content:center; }
.offer-photo img { width:86%; max-width:330px; height:auto; }
.offer-logo { position:absolute; top:0; left:0; font-size:2rem; font-weight:900; letter-spacing:-.04em; color:#141414; line-height:1; }
.offer-head { text-align:center; margin:.6rem 0 1.2rem; }
.offer-head .model-name { font-size:1.7rem; font-weight:800; color:#141414; }
.offer-head .offer-model-logo { height:24px; width:auto; display:block; margin:0 auto; filter: brightness(0); }
.offer-head .drive { color:#a0a0a0; letter-spacing:.18em; font-size:.82rem; margin:.25rem 0 .6rem; text-transform:uppercase; }
.offer-head .pm { font-size:1.9rem; font-weight:800; color:#141414; }
.offer-head .pm .from { font-size:1rem; font-weight:500; color:#a0a0a0; margin-right:.2rem; }
.offer-head .pm small { font-size:.82rem; color:#a0a0a0; font-weight:500; }
.chips { display:flex; flex-wrap:wrap; gap:12px; }
.chip { background:#fbe7d6; padding:.6rem .85rem; flex:1 1 calc(33.33% - 8px); min-width:calc(33.33% - 8px); clip-path: polygon(0 0, 100% 0, 100% 64%, calc(100% - 13px) 100%, 0 100%); }
.chip .k { display:block; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#a08b79; font-weight:700; }
.chip .v { display:block; font-weight:800; color:#1a1a1a; font-size:1rem; margin-top:.15rem; white-space:nowrap; }
.offer-cta { margin-top:1.5rem; display:inline-flex; align-items:center; gap:.5rem; font-weight:800; color:#141414; font-size:.95rem; }
.offer-cta .arr { color:var(--accent); transition:transform .2s ease; }
.offer-card:hover .offer-cta .arr { transform:translateX(6px); }
@media (max-width:480px){ .chip { flex-basis:calc(50% - 6px); min-width:calc(50% - 6px); } }

/* ---------- Aftersales ---------- */
.warranty-stats { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; margin-top:2.4rem; }
.warranty-stats .item { border:1px solid var(--line); border-radius: var(--radius); padding:2rem; text-align:center; background: var(--panel); }
.warranty-stats .item .num { font-size: 2rem; font-weight:800; color:#fff; }
.warranty-stats .item .cap { color: var(--accent); font-weight:700; letter-spacing:.1em; text-transform:uppercase; font-size:.78rem; margin-top:.4rem; }
.do-grid { display:grid; grid-template-columns:1fr 1fr; gap: 24px; margin-top:2rem; }
.do-card { border:1px solid var(--line); border-radius: var(--radius); padding:2rem; background: var(--panel); }
.do-card ul { padding-left: 1.1rem; margin:0; }
.do-card li { color: var(--grey); margin:.6rem 0; }

/* ---------- Forms ---------- */
.form-wrap { max-width: 680px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap: 1.1rem; }
.field { display:flex; flex-direction:column; gap:.4rem; }
.field.full { grid-column: 1 / -1; }
.field label { font-size:.8rem; letter-spacing:.06em; color: var(--grey); font-weight:600; }
.field input, .field select, .field textarea {
  background: var(--panel); border:1px solid var(--line); border-radius:10px; color:#fff;
  padding:.85rem 1rem; font-family:inherit; font-size:.95rem;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--accent); }
.consent { font-size:.8rem; color: var(--grey-2); margin:1.2rem 0; }

/* Centered form page (test drive) */
.form-page { max-width: 680px; margin: 0 auto; text-align: center; }
.form-page .eyebrow { display: block; }
.form-page .form-intro { color: var(--grey); margin: 0 auto; max-width: 56ch; }
.form-page .form-wrap { text-align: left; margin: 2.2rem auto 0; width: 100%; }
.check { display: flex; align-items: flex-start; gap: .6rem; text-align: left; color: var(--grey); font-size: .9rem; margin: .7rem 0; cursor: pointer; }
.check input { margin-top: .15rem; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }

/* ---------- Contact ---------- */
.contact-h1 { display:flex; align-items:center; flex-wrap:wrap; gap:.55rem; margin:0 0 .4em; }
.contact-h1 img { height: clamp(30px, 5vw, 54px); width:auto; display:block; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.info-card { border:1px solid var(--line); border-radius: var(--radius); padding:1.4rem 1.6rem; background: var(--panel); margin-bottom:1rem; }
.info-card .k { font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--accent); font-weight:700; }
.info-card .v { font-size:1.05rem; color:#fff; margin-top:.2rem; }
.info-card.has-cta { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.dir-btn { display:inline-flex; align-items:center; gap:.4rem; border:1px solid rgba(255,255,255,.45); color:#fff; padding:.5rem 1.1rem; border-radius:100px; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; transition:background .2s ease, border-color .2s ease; }
.dir-btn:hover { background:var(--accent); border-color:var(--accent); }
.dir-btn svg { width:14px; height:14px; fill:currentColor; }
.map-embed { border:0; width:100%; height:100%; min-height:320px; border-radius: var(--radius); filter: grayscale(.2) invert(.92) hue-rotate(180deg); }
.tag { display:inline-block; background: rgba(255,91,26,.15); color: var(--accent); padding:.2rem .6rem; border-radius:6px; font-size:.7rem; font-weight:700; }

/* ---------- News / social ---------- */
.news-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.news-card { border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; background: var(--panel); transition:.2s; }
.news-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.news-card img { height: 180px; object-fit: cover; width:100%; }
.news-card .body { padding:1.2rem; }
.news-card .date { font-size:.75rem; color: var(--grey-2); }
.news-card h4 { font-size:1.02rem; margin:.4rem 0; line-height:1.25; }
.news-card p { font-size:.85rem; }

/* ---------- Footer ---------- */
.site-footer { border-top:1px solid var(--line); background: var(--near-black); padding: 60px 0 30px; }
.footer-top { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer-social { display:flex; gap:1rem; }
.footer-social a { width:40px; height:40px; border:1px solid var(--line); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; transition: background .2s ease, border-color .2s ease; }
.footer-social a:hover { border-color: var(--accent); background: var(--accent); }
.footer-social a svg { width:17px; height:17px; fill: currentColor; display:block; }
.footer-cols { display:grid; grid-template-columns: repeat(5,1fr); gap:2rem; margin:2.6rem 0; }
.footer-cols h5 { font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); margin:0 0 1rem; }
.footer-cols a { display:block; color: var(--grey); font-size:.9rem; margin:.5rem 0; }
.footer-cols a:hover { color:#fff; }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:1.6rem; font-size:.82rem; color: var(--grey-2); }
.footer-bottom a { color: var(--grey-2); margin-left:1rem; }
.care a { color:#fff; }

.back-to-top { text-align:center; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--grey-2); padding:1.4rem 0; }

.dealer-banner { background: var(--accent); color:#fff; font-size:.82rem; font-weight:600; padding:.4rem 0; }
.dealer-banner .db-row { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; }
.dealer-banner .db-social { display:flex; gap:.55rem; justify-self:start; }
.dealer-banner .db-social a { display:flex; color:#fff; opacity:.92; transition:opacity .2s ease; }
.dealer-banner .db-social a:hover { opacity:1; }
.dealer-banner .db-social svg { width:15px; height:15px; fill:currentColor; display:block; }
.dealer-banner .db-center { justify-self:center; text-align:center; letter-spacing:.02em; }
.dealer-banner .db-phone { justify-self:end; color:#fff; display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; }
.dealer-banner .db-phone:hover { text-decoration:underline; }
.dealer-banner .db-phone svg { width:14px; height:14px; fill:currentColor; }
@media (max-width:640px){ .dealer-banner .db-center { display:none; } .dealer-banner .db-row { grid-template-columns:1fr auto; } }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nav-list, .nav-cta { display: none; }
  .nav.open .nav-list { display: flex; position: absolute; top: var(--header-h); left:0; right:0; flex-direction: column; align-items: flex-start; background: var(--panel); padding: 1rem 24px; border-bottom:1px solid var(--line); gap:.6rem; }
  .nav.open .dropdown { position: static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:transparent; padding-left:1rem; min-width:auto; }
  .menu-toggle { display:block; }
  .model-cards, .grid-2, .grid-3, .stat-grid, .gallery.cols-2, .gallery.cols-3, .do-grid, .warranty-stats, .contact-grid, .form-grid, .news-grid { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
  .gallery .span-2 { grid-column: auto; }
}