:root{--red:#ff1023;--ink:#10151b;--muted:#68707a;--bg:#f5f6f7;--line:#e5e7eb}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:white}.pixel-stage{position:relative;width:min(100%,1536px);aspect-ratio:3/2;margin:0 auto;background:#fff;overflow:hidden}.reference{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}.hotspot{position:absolute;z-index:3;display:block;border:0;background:transparent;cursor:pointer;border-radius:6px}.hotspot:hover,.hotspot:focus-visible{outline:2px solid rgba(255,16,35,.85);outline-offset:2px;background:rgba(255,255,255,.035)}
/* percentages derived from 1536x1024 reference */
.home{left:6.3%;top:4.3%;width:14%;height:5.8%}.news{left:53.5%;top:.2%;width:4.2%;height:2.5%}.faq{left:58.1%;top:.2%;width:3.3%;height:2.5%}.jobs{left:61.5%;top:.2%;width:5.6%;height:2.5%}.contact-top{left:67.0%;top:.2%;width:4.6%;height:2.5%}.whatsapp{left:80.0%;top:.1%;width:7.7%;height:2.8%}.models-nav{left:28.5%;top:5.0%;width:6.8%;height:3.9%}.stock-nav{left:35.6%;top:5.0%;width:4.5%;height:3.9%}.care-nav{left:40.4%;top:5.0%;width:7.9%;height:3.9%}.service-nav{left:49.1%;top:5.0%;width:6.1%;height:3.9%}.business-nav{left:55.3%;top:5.0%;width:6.6%;height:3.9%}.about-nav{left:62.0%;top:5.0%;width:7.2%;height:3.9%}.testdrive-top{left:80.7%;top:4.1%;width:12.3%;height:5.0%}.hero-models{left:6.8%;top:37.2%;width:14.5%;height:5.4%}.hero-testdrive{left:21.4%;top:37.2%;width:12.8%;height:5.4%}.care-cta{left:5.9%;top:81.2%;width:14.3%;height:5.2%}.hybrid-cta{left:51.2%;top:81.2%;width:16.8%;height:5.2%}.bottom-models{left:7.8%;top:92.2%;width:13.9%;height:6.2%}.bottom-testdrive{left:28.2%;top:92.2%;width:13.7%;height:6.2%}.bottom-trade{left:51.5%;top:92.2%;width:18.0%;height:6.2%}.bottom-service{left:77.4%;top:92.2%;width:16.3%;height:6.2%}
.real-section{padding:80px 24px;background:#fff;border-top:1px solid var(--line)}.real-section.alt{background:#f7f8f9}.dark-section{background:#101820;color:white}.wrap{width:min(1180px,100%);margin:auto}.eyebrow{display:inline-block;color:var(--red);font-weight:800;letter-spacing:.15em;font-size:12px;margin-bottom:12px}.real-section h2{font-size:clamp(34px,4vw,58px);line-height:1.02;margin:0 0 18px}.real-section p{font-size:18px;line-height:1.6;color:var(--muted);max-width:760px}.dark-section p{color:#cbd3da}.grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:30px}.simple-card{border:1px solid var(--line);border-radius:16px;padding:28px;background:#fff}.simple-card h3{font-size:28px;margin:0 0 10px}.btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:7px;padding:14px 20px;font-weight:800;cursor:pointer;margin-top:10px}.btn.red{background:var(--red);color:#fff}.btn.dark{background:#101820;color:#fff}
.modal{position:fixed;inset:0;z-index:50;display:none}.modal.open{display:block}.backdrop{position:absolute;inset:0;background:rgba(4,9,14,.72);backdrop-filter:blur(6px)}.dialog{position:relative;width:min(560px,calc(100% - 32px));max-height:calc(100vh - 40px);overflow:auto;margin:20px auto;background:white;border-radius:18px;padding:34px;box-shadow:0 30px 80px rgba(0,0,0,.3)}.close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:34px;cursor:pointer}.lead-form{display:grid;gap:14px}.lead-form h2{font-size:36px;line-height:1.05;margin:0}.lead-form p{margin:0 0 8px;color:var(--muted)}.lead-form label{display:grid;gap:6px;font-size:14px;font-weight:700}.lead-form input,.lead-form select,.lead-form textarea{width:100%;border:1px solid #d8dce1;border-radius:8px;padding:13px 12px;font:inherit}.success{padding:28px 4px}.success h2{margin-top:0}
@media(max-width:900px){.pixel-stage{aspect-ratio:3/2}.hotspot{min-width:28px;min-height:24px}.real-section{padding:58px 20px}.grid.two{grid-template-columns:1fr}}
@media(max-width:680px){/* op mobiel tonen we de referentie als visuele hero en daarna echte responsive content */.pixel-stage{aspect-ratio:3/2;width:100%;overflow:hidden}.reference{object-fit:cover;object-position:top center}.hotspot{display:none}.real-section{padding:48px 18px}.real-section h2{font-size:38px}.real-section p{font-size:16px}}

/* ===== Dedicated mobile experience ===== */
.mobile-site{display:none}
@media(max-width:680px){
  body{background:#fff}.pixel-stage{display:none}.mobile-site{display:block;background:#fff}.real-section{display:none}
  .mobile-header{height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);backdrop-filter:blur(12px);border-bottom:1px solid #eceff2}
  .mobile-logo{color:#10151b;text-decoration:none;line-height:.9}.mobile-logo-main{font-size:23px;letter-spacing:.03em;font-weight:500}.mobile-logo-main span{font-weight:900}.mobile-logo small{display:block;font-size:6px;letter-spacing:.25em;margin-top:7px;font-weight:700}
  .mobile-head-actions{display:flex;align-items:center;gap:10px}.mobile-testdrive-mini{border:0;background:#ff1023;color:#fff;font-weight:800;border-radius:6px;padding:10px 13px}.menu-toggle{width:42px;height:42px;border:0;background:#101820;border-radius:7px;padding:10px;display:grid;align-content:center;gap:5px}.menu-toggle span{display:block;height:2px;background:#fff;border-radius:3px;width:100%}
  .mobile-drawer{position:fixed;z-index:29;top:68px;left:0;right:0;background:#101820;color:#fff;padding:12px 18px 20px;display:grid;gap:2px;transform:translateY(-130%);transition:transform .25s ease;box-shadow:0 18px 40px rgba(0,0,0,.25)}.mobile-drawer.open{transform:translateY(0)}.mobile-drawer a,.mobile-drawer button{font:inherit;color:#fff;background:transparent;border:0;text-align:left;padding:14px 4px;text-decoration:none;font-weight:700;border-bottom:1px solid rgba(255,255,255,.1)}
  .mobile-hero{min-height:620px;position:relative;color:#fff;background-image:linear-gradient(180deg,rgba(4,9,14,.28) 0%,rgba(4,9,14,.18) 40%,rgba(4,9,14,.92) 100%),url('assets/mobile-hero.jpg');background-size:cover;background-position:60% center;display:flex;flex-direction:column;justify-content:flex-end;padding:26px 18px 0}.mobile-hero-copy{position:relative;z-index:2;padding-bottom:18px}.mobile-kicker{display:block;font-size:10px;letter-spacing:.18em;font-weight:800;margin-bottom:10px}.mobile-hero h1{font-size:44px;line-height:.92;margin:0 0 14px;letter-spacing:-.035em;max-width:340px}.mobile-hero p{font-size:15px;line-height:1.5;margin:0 0 20px;max-width:340px;color:#f2f4f6;text-shadow:0 1px 5px rgba(0,0,0,.45)}.mobile-hero-buttons{display:flex;gap:10px;flex-wrap:wrap}.m-btn{min-height:46px;padding:13px 15px;border-radius:6px;border:1px solid transparent;text-decoration:none;font:inherit;font-weight:800;display:inline-flex;gap:12px;align-items:center;justify-content:center}.m-btn.red{background:#ff1023;color:#fff}.m-btn.ghost{background:rgba(10,16,22,.45);border-color:rgba(255,255,255,.72);color:#fff}.mobile-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border-top:1px solid rgba(255,255,255,.25);margin:0 -18px;padding:12px 18px;background:rgba(7,13,19,.72);backdrop-filter:blur(8px)}.mobile-benefits span{font-size:11px;padding:8px 10px 8px 0;color:#f4f5f6}
  .mobile-main{padding:42px 18px}.mobile-eyebrow{display:inline-block;color:#ff1023;font-size:10px;font-weight:900;letter-spacing:.16em;margin-bottom:9px}.mobile-main h2,.mobile-feature h2{font-size:33px;line-height:1.03;margin:0 0 20px;letter-spacing:-.025em}.mobile-model-grid{display:grid;gap:12px}.mobile-model-card{min-height:190px;border-radius:10px;padding:20px;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(145deg,#445462,#1f2c37);box-shadow:0 8px 24px rgba(15,23,31,.12)}.mobile-model-card.dark{background:linear-gradient(145deg,#27313a,#0f151b)}.mobile-model-card strong{font-size:25px}.mobile-model-card span{font-size:14px;margin-top:3px;opacity:.9}.mobile-model-card button{margin-top:18px;width:max-content;border:1px solid rgba(255,255,255,.8);background:rgba(0,0,0,.18);color:#fff;border-radius:6px;padding:11px 13px;font-weight:800}
  .mobile-feature{margin:0 12px 18px;border:1px solid #e7eaed;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(20,25,31,.06)}.mobile-feature-copy{padding:28px 22px}.mobile-feature-copy p{font-size:15px;line-height:1.5;color:#69717b;margin:0 0 18px}.mobile-feature-image{height:300px;background-size:cover;background-position:center}.care-img{background-image:url('assets/mobile-care.jpg');background-position:50% center}.hybrid-img{background-image:url('assets/mobile-hybrid.jpg');background-position:58% center}.hybrid-mobile{background:#101820;border-color:#101820;color:#fff}.dark-copy p{color:#d3d8dd}.mobile-checks{display:grid;gap:10px;margin:0 0 22px}.mobile-checks span{font-size:13px;display:flex;align-items:center;gap:8px}.mobile-checks span:before{content:'✓';color:#ff1023;font-weight:900}.mobile-checks.light span:before{color:#fff}
  .mobile-quick{display:grid;background:#f5f6f7;border-top:1px solid #e2e5e8;border-bottom:1px solid #e2e5e8}.mobile-quick a,.mobile-quick button{display:flex;align-items:center;gap:15px;padding:17px 18px;border:0;border-bottom:1px solid #e1e4e7;background:transparent;text-decoration:none;color:#10151b;text-align:left;font:inherit}.mobile-quick b{font-size:25px;width:33px;text-align:center}.mobile-quick span{display:grid;gap:3px;font-size:13px}.mobile-quick em{font-style:normal;color:#ff1023;font-weight:800;font-size:13px}
  .dialog{width:calc(100% - 20px);margin:10px auto;max-height:calc(100dvh - 20px);border-radius:14px;padding:28px 20px}.lead-form h2{font-size:30px}.lead-form input,.lead-form select,.lead-form textarea{font-size:16px;min-height:46px}
}

/* V7: only requested model expansion + CHERY slogan; existing layout preserved */
.grid.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ready-surprise{margin-top:22px;padding:15px 17px;border-left:3px solid #ff1023;font-size:12px;letter-spacing:.16em;color:#111}.ready-surprise b{font-weight:900}
@media(max-width:900px){.grid.three{grid-template-columns:1fr}}
@media(max-width:680px){.mobile-model-card.compact{background:linear-gradient(145deg,#63727d,#26323a)}.ready-surprise{margin-top:18px;font-size:11px}}


/* V8: only model photography added; all other layout/content preserved */
.model-showcase .model-card{display:flex;flex-direction:column;overflow:hidden;padding-bottom:24px}
.model-showcase .model-card p{min-height:86px;margin-bottom:10px}
.model-showcase .model-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;border-radius:10px;display:block;margin:4px 0 16px;background:#f3f5f7}
.model-showcase .model-card .btn{align-self:flex-start;margin-top:auto}
@media(max-width:900px){
  .model-showcase .model-card p{min-height:0}
  .model-showcase .model-card img{aspect-ratio:16/9}
}
@media(max-width:680px){
  .mobile-model-card{min-height:0!important;padding:0!important;display:flex!important;overflow:hidden;background:#fff!important;color:#10151b!important;border:1px solid #e4e7ea;box-shadow:0 8px 24px rgba(15,23,31,.08)}
  .mobile-model-card.dark{background:#fff!important;color:#10151b!important}
  .mobile-model-copy{padding:18px 18px 10px}
  .mobile-model-card strong{font-size:24px;display:block}
  .mobile-model-card span{font-size:14px;color:#68707a;opacity:1;display:block;margin-top:4px}
  .mobile-model-card img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:center;display:block;background:#f3f5f7}
  .mobile-model-card button{margin:0 18px 18px!important;background:#ff1023!important;border:0!important;color:#fff!important;padding:12px 14px!important}
  .mobile-model-card.dark button{background:#101820!important}
}


/* V9 — ONLY model showcase visual update. All other site layout remains unchanged. */
.models-section-v9{background:#fff}
.models-heading-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:28px}
.models-heading-row h2{margin-bottom:6px}
.models-subtitle{margin:0;color:#68717c;font-size:19px;line-height:1.45}
.models-slogan{align-self:center;font-size:14px;font-weight:800;letter-spacing:.22em;white-space:nowrap;color:#182029;padding-right:10px}
.models-slogan span{display:block;width:38px;height:3px;background:#ff1023;margin-top:13px}
.model-showcase-v9{gap:18px}
.model-card-v9{position:relative;min-height:410px;border-radius:10px;overflow:hidden;background-size:cover;background-position:center;box-shadow:0 1px 0 rgba(15,23,31,.08);isolation:isolate}
.model-card-v9::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.72) 22%,rgba(255,255,255,.08) 46%,rgba(0,0,0,.05) 70%,rgba(0,0,0,.12) 100%);z-index:-1}
.model-card-v9.model-4{background-image:url('https://wittebrug.nl/app/uploads/2026/07/chery_img1-960x960.jpg')}
.model-card-v9.model-7{background-image:url('https://wittebrug.nl/app/uploads/2026/07/img5_tiggo7-960x960.webp')}
.model-card-v9.model-8{background-image:url('https://wittebrug.nl/app/uploads/2026/07/img3_tiggo8-960x960.webp')}
.model-card-copy-v9{padding:28px 28px 0;max-width:78%}
.model-card-v9 h3{font-size:28px;line-height:1.05;margin:0 0 10px;color:#12171d}
.model-card-v9 p{font-size:17px;line-height:1.45;color:#66707a;margin:0}
.model-card-v9 .btn{position:absolute;left:22px;bottom:20px;margin:0;z-index:2}
.model-card-v9 .btn span{margin-left:10px}

@media(max-width:900px){
  .models-heading-row{display:block;margin-bottom:20px}
  .models-slogan{margin-top:18px;font-size:12px}
  .model-showcase-v9{grid-template-columns:1fr!important;gap:14px}
  .model-card-v9{min-height:360px;background-position:center 58%}
  .model-card-copy-v9{max-width:86%;padding:22px 22px 0}
  .model-card-v9 h3{font-size:25px}
  .model-card-v9 p{font-size:15px}
}
@media(max-width:680px){
  .models-section-v9{display:none!important}
  .ready-surprise{font-size:12px;font-weight:800;letter-spacing:.17em;color:#111820;text-align:left}
  .ready-surprise::after{content:"";display:block;width:34px;height:3px;background:#ff1023;margin-top:9px}
}