/* ==========================================================================
Je-House — globaal design-systeem (VOF Goldschmitz)
Huisstijl: navy #23366e / navy-diep #152142 · cyaan accent #34bde3 ·
wit + mist · Poppins (koppen) + Inter (tekst).
Tokens → primitieven → componenten → responsief. Alle template-klassen
worden hier gedekt; tokennamen (--cyaan, --cyaan-donker, --inkt-zacht)
blijven ongewijzigd omdat templates ze inline gebruiken.
========================================================================== */
:root{
/* ── kleur ── */
--navy:#23366e; --navy-donker:#1a2a56; --navy-diep:#152142;
--cyaan:#34bde3; --cyaan-donker:#1897bf; --cyaan-licht:#e8f7fc;
--inkt:#1e2733; --inkt-zacht:#586172; --grijs:#8b95a3;
--room:#ffffff; --mist:#f4f7fa; --mist-diep:#eef2f7; --lijn:#e6ebf1;
--wit:#fff;
/* ── typografie-schaal ── */
--f-kop:'Poppins',system-ui,sans-serif;
--f-tekst:'Inter',system-ui,sans-serif;
/* ── spatie-schaal (8-punts ritme) ── */
--sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem;
--sp-6:2rem; --sp-7:2.75rem; --sp-8:3.5rem; --sp-9:4.5rem; --sp-10:6rem;
/* ── radii ── */
--r-sm:10px; --r-md:14px; --r-lg:20px; --r-pil:999px;
/* ── schaduw-schaal ── */
--sch-1:0 1px 2px rgba(21,33,66,.05), 0 2px 6px rgba(21,33,66,.05);
--sch-2:0 10px 24px -12px rgba(35,54,110,.28);
--sch-3:0 20px 50px -26px rgba(35,54,110,.42);
--sch-4:0 34px 70px -30px rgba(21,33,66,.5);
--schaduw:var(--sch-3); /* backwards-compat alias */
/* ── ring (focus) ── */
--ring:0 0 0 3px rgba(52,189,227,.45);
--max:1180px;
--nav-h:92px;
}
/* ── reset ── */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
font-family:var(--f-tekst);color:var(--inkt);background:var(--room);
line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
/* ── typografie ── */
h1,h2,h3,h4{font-family:var(--f-kop);font-weight:700;line-height:1.12;color:var(--navy);letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem)}
h2{font-size:clamp(1.65rem,3.4vw,2.5rem)}
h3{font-size:1.28rem}
h4{font-size:1rem}
p{text-wrap:pretty}
/* ── layout ── */
.container{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:clamp(3.2rem,7vw,5.5rem) 0}
.mist{background:var(--mist)}
/* focus-zichtbaarheid overal (toegankelijkheid) */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
outline:none;box-shadow:var(--ring);border-radius:6px;
}
/* ==========================================================================
NAV
========================================================================== */
.nav{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.9);
backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
border-bottom:1px solid var(--lijn)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:var(--nav-h);padding:16px 24px}
.brand{display:flex;align-items:center;flex:none}
.brand-logo{height:60px;width:auto;display:block;transition:transform .2s}
.brand:hover .brand-logo{transform:scale(1.03)}
.nav-right{display:flex;align-items:center;gap:28px}
.nav-links{display:flex;align-items:center;gap:19px;font-family:var(--f-kop);
font-weight:600;font-size:.89rem;letter-spacing:.01em}
.nav-links a{color:var(--navy);transition:color .15s;position:relative}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:100%;bottom:-7px;
height:2px;background:var(--cyaan);border-radius:2px;transition:right .28s cubic-bezier(.2,.7,.2,1)}
.nav-links a:not(.nav-cta):hover{color:var(--cyaan-donker)}
.nav-links a:not(.nav-cta):hover::after{right:0}
.nav-cta{background:var(--cyaan);color:var(--wit)!important;padding:10px 22px;
border-radius:var(--r-pil);letter-spacing:0;box-shadow:0 10px 22px -12px rgba(52,189,227,.9);
transition:background .16s,transform .12s,box-shadow .16s}
.nav-cta:hover{background:var(--cyaan-donker);transform:translateY(-2px);box-shadow:0 14px 26px -12px rgba(52,189,227,1)}
.nav-socials{display:flex;gap:9px}
.nav-socials a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;
justify-content:center;color:var(--navy);border:1.5px solid var(--lijn);
transition:transform .2s,background .2s,color .2s,border-color .2s}
.nav-socials a:hover{background:var(--cyaan);color:var(--wit);border-color:var(--cyaan);
transform:translateY(-3px) rotate(-6deg)}
.nav-burger{display:none;color:var(--navy);cursor:pointer;background:none;border:none;padding:6px;border-radius:8px}
.nav-burger svg{display:block}
.nav-burger .ico-dicht{display:none}
#navtoggle:checked ~ .nav-burger .ico-open{display:none}
#navtoggle:checked ~ .nav-burger .ico-dicht{display:block}
/* ==========================================================================
BUTTONS
========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
padding:13px 28px;border-radius:var(--r-pil);font-family:var(--f-kop);font-weight:600;
font-size:.96rem;line-height:1;text-align:center;cursor:pointer;border:1.5px solid transparent;
transition:transform .14s cubic-bezier(.2,.7,.2,1),background .16s,box-shadow .16s,color .16s,border-color .16s}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{flex:none}
.btn-primary{background:var(--cyaan);color:var(--wit);box-shadow:0 14px 28px -14px rgba(52,189,227,.85)}
.btn-primary:hover{background:var(--cyaan-donker);transform:translateY(-2px);box-shadow:0 18px 34px -14px rgba(52,189,227,1)}
.btn-navy{background:var(--navy);color:var(--wit);box-shadow:0 14px 28px -16px rgba(35,54,110,.9)}
.btn-navy:hover{background:var(--navy-donker);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--navy);color:var(--navy)}
.btn-outline:hover{background:var(--navy);color:var(--wit);transform:translateY(-2px)}
.btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.6);color:#fff;
backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.btn-ghost:hover{background:#fff;color:var(--navy);border-color:#fff;transform:translateY(-2px)}
/* ==========================================================================
HERO (verfijnd, niet fullscreen — tekst-reveal + slideshow)
========================================================================== */
.hero{position:relative;min-height:min(46vh,420px);display:flex;align-items:flex-end;
overflow:hidden;background:var(--navy-diep)}
.hero-slides{position:absolute;inset:0}
.hero-slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;animation:heroFade 21s infinite;transform:scale(1.05)}
.hero-slides img:nth-child(1){animation-delay:0s}
.hero-slides img:nth-child(2){animation-delay:7s}
.hero-slides img:nth-child(3){animation-delay:14s}
@keyframes heroFade{0%{opacity:0;transform:scale(1.08)}3%{opacity:1}30%{opacity:1}
36%{opacity:0}100%{opacity:0;transform:scale(1.02)}}
.hero::after{content:"";position:absolute;inset:0;background:
linear-gradient(78deg,rgba(21,33,66,.86) 0%,rgba(21,33,66,.55) 44%,rgba(21,33,66,.12) 74%),
linear-gradient(0deg,rgba(21,33,66,.6) 0%,transparent 42%)}
.hero-dash{position:absolute;top:-30%;left:-4%;width:44%;height:170%;
border-top:2px dashed rgba(52,189,227,.5);transform:rotate(-19deg);z-index:1}
.hero-inner{position:relative;z-index:2;padding:0 0 clamp(2.6rem,6vw,4.4rem);max-width:660px}
.hero .kicker{color:var(--cyaan);opacity:0;animation:revealUp .7s .2s forwards}
.hero h1{color:#fff;font-size:clamp(2rem,4.8vw,3.3rem);text-shadow:0 2px 30px rgba(10,18,40,.4);
opacity:0;animation:revealUp .8s .4s forwards}
.hero .lead{font-size:1.18rem;color:#e4eaf5;margin:1.1rem 0 1.9rem;max-width:540px;
opacity:0;animation:revealUp .8s .68s forwards}
.hero-acties{display:flex;gap:14px;flex-wrap:wrap;opacity:0;animation:revealUp .8s .95s forwards}
@keyframes revealUp{from{opacity:0;transform:translateY(38px)}to{opacity:1;transform:none}}
/* ==========================================================================
KICKERS + SECTIEKOPPEN
========================================================================== */
.kicker{display:inline-block;font-family:var(--f-kop);font-size:.78rem;letter-spacing:.16em;
text-transform:uppercase;font-weight:700;color:var(--cyaan-donker);margin-bottom:.85rem}
.sectie-kop{max-width:660px;margin-bottom:2.6rem;border-left:4px solid var(--cyaan);padding-left:20px}
.sectie-kop.center{margin:0 auto 2.6rem;text-align:center;border:none;padding:0}
.sectie-kop.center .kicker::before,.sectie-kop.center .kicker::after{content:"";display:inline-block;
width:24px;height:2px;background:var(--cyaan);vertical-align:middle;margin:0 .6rem}
.sectie-kop h2{margin-bottom:.5rem}
.lead{font-size:1.12rem;color:var(--inkt-zacht);line-height:1.7}
/* ==========================================================================
SUBPAGINA-BANNER (navy, met logo + dashed signatuur)
========================================================================== */
.subbanner{position:relative;background:linear-gradient(100deg,var(--navy-diep),var(--navy));
overflow:hidden;padding:clamp(2.2rem,4.4vw,3.2rem) 0}
.subbanner::before{content:"";position:absolute;top:-40%;left:-6%;width:52%;height:180%;
border-top:2px dashed rgba(52,189,227,.4);transform:rotate(-18deg)}
.subbanner::after{content:"";position:absolute;inset:0;
background:radial-gradient(60% 120% at 85% 20%,rgba(52,189,227,.16),transparent 60%);pointer-events:none}
.subbanner .container{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px}
.subbanner h1{color:#fff;font-size:clamp(1.6rem,3.4vw,2.4rem)}
.subbanner .accent{color:var(--cyaan)}
.subbanner p{color:#c7d2e8;margin-top:.6rem;max-width:640px;font-size:1rem;line-height:1.65}
.subbanner-logo{height:66px;width:auto;opacity:.92;flex:none;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
/* ==========================================================================
TROEVEN
========================================================================== */
.troef-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.troef{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-md);padding:28px;
box-shadow:var(--sch-1);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,border-color .18s}
.troef:hover{transform:translateY(-5px);box-shadow:var(--sch-3);border-color:transparent}
.troef .tico{width:48px;height:48px;border-radius:13px;background:var(--cyaan-licht);
display:flex;align-items:center;justify-content:center;color:var(--cyaan-donker);margin-bottom:16px;
transition:transform .2s}
.troef:hover .tico{transform:scale(1.08) rotate(-4deg)}
.troef h3{font-size:1.1rem;margin-bottom:.4rem}
.troef p{color:var(--inkt-zacht);font-size:.95rem}
/* Herbruikbare bewegende video-achtergrond voor subpagina-hero's (wow-effect overal) */
.vid-hero{position:relative;overflow:hidden}
.vid-hero>*:not(.hero-vid):not(.hero-vid-ov){position:relative;z-index:2}
.hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;border:0;pointer-events:none}
.hero-vid-ov{position:absolute;inset:0;z-index:1;pointer-events:none;
background:linear-gradient(118deg,rgba(21,33,66,.86),rgba(21,33,66,.60) 55%,rgba(35,54,110,.5))}
@media(prefers-reduced-motion:reduce){.hero-vid{display:none}}
/* Cyaan signatuur-accent bovenaan alle kaarten (consistent met .realisaties-kaart) */
.troef{position:relative}
.troef::before,.model-kaart::before{content:"";position:absolute;top:0;left:22px;right:22px;
height:3px;border-radius:0 0 3px 3px;background:linear-gradient(90deg,var(--cyaan),transparent 70%);
opacity:.9;z-index:3;pointer-events:none}
/* ==========================================================================
MODELLEN-GRID (home) — gelijke hoogtes, geen scheve weesrij
========================================================================== */
.model-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:26px}
.model-kaart{position:relative;flex:1 1 300px;max-width:352px;display:flex;flex-direction:column;
background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-md);overflow:hidden;
box-shadow:var(--sch-2);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.model-kaart:hover{transform:translateY(-6px);box-shadow:var(--sch-4)}
.model-kaart .foto{aspect-ratio:4/3;overflow:hidden;background:var(--mist)}
.model-kaart .foto img{width:100%;height:100%;object-fit:cover;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.model-kaart:hover .foto img{transform:scale(1.06)}
.model-kaart .body{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.model-kaart .type{font-family:var(--f-kop);font-size:.72rem;letter-spacing:.1em;
text-transform:uppercase;color:var(--cyaan-donker);font-weight:700}
.model-kaart h3{font-size:1.4rem;margin:.3rem 0}
.model-kaart .maat{color:var(--inkt-zacht);font-size:.9rem;margin-bottom:.7rem}
.model-kaart p{color:var(--inkt-zacht);font-size:.95rem;margin-bottom:1rem}
.model-kaart .meer{margin-top:auto;padding-top:.6rem;color:var(--cyaan-donker);
font-family:var(--f-kop);font-weight:600;font-size:.92rem;display:inline-flex;align-items:center;gap:6px;
transition:gap .2s,color .2s}
.model-kaart:hover .meer{gap:12px;color:var(--cyaan)}
/* cyaan binnen-omranding op hover */
.model-kaart::after{content:"";position:absolute;inset:0;border-radius:var(--r-md);
box-shadow:inset 0 0 0 0 var(--cyaan);transition:box-shadow .2s;pointer-events:none}
.model-kaart:hover::after{box-shadow:inset 0 0 0 2px var(--cyaan)}
/* ==========================================================================
AANBOD — alternerende model-rijen
========================================================================== */
.model-rij{display:grid;grid-template-columns:1.05fr 1fr;gap:52px;align-items:center;
padding:clamp(2rem,5vw,3.4rem) 0;border-bottom:1px solid var(--lijn)}
.model-rij:last-of-type{border-bottom:none}
.model-rij.omgekeerd .rij-media{order:2}
.rij-media{display:block;border-radius:var(--r-md);overflow:hidden;background:var(--mist);
aspect-ratio:4/3;box-shadow:var(--sch-3);position:relative}
.rij-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rij-media:hover img{transform:scale(1.05)}
.model-rij h2{margin-bottom:.5rem}
.model-rij .streep{width:64px;height:3px;background:var(--cyaan);border:none;border-radius:2px;margin:0 0 1.3rem}
.model-rij p{color:var(--inkt-zacht)}
.opties{list-style:none;margin:1rem 0 1.2rem}
.opties li{display:flex;gap:10px;align-items:flex-start;padding:5px 0;color:var(--inkt-zacht)}
.opties li svg{color:var(--cyaan-donker);flex:none;margin-top:4px}
.maat-chip{display:inline-flex;align-items:center;gap:8px;background:var(--navy);color:#fff;
font-family:var(--f-kop);font-weight:600;font-size:.9rem;padding:9px 17px;border-radius:var(--r-pil)}
/* ==========================================================================
MODEL-DETAIL
========================================================================== */
.detail-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:44px;align-items:start}
.detail-hero .hoofdfoto{border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sch-3);aspect-ratio:4/3}
.detail-hero .hoofdfoto img{width:100%;height:100%;object-fit:cover}
.detail-hero .streep{width:64px;height:3px;background:var(--cyaan);border:none;border-radius:2px;margin:.3rem 0 1.2rem}
.specs{display:flex;gap:14px;flex-wrap:wrap;margin:1.3rem 0}
.spec{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-sm);padding:12px 18px;box-shadow:var(--sch-1)}
.spec .l{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--grijs);font-weight:600}
.spec .v{font-family:var(--f-kop);font-weight:700;font-size:1.28rem;color:var(--navy)}
.galerij{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px;margin-top:1.4rem}
.galerij img{aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--mist);
box-shadow:var(--sch-1);transition:transform .3s,box-shadow .3s}
.galerij img:hover{transform:scale(1.03);box-shadow:var(--sch-3)}
.plan-blok{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-md);
padding:26px;box-shadow:var(--sch-1);display:grid;grid-template-columns:1.05fr 1fr;gap:30px;align-items:center;text-align:left}
.plan-media{position:relative;background:#f7f9fc;border:1px solid var(--lijn);border-radius:14px;padding:22px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.plan-media::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--cyaan),var(--cyaan-donker))}
.plan-blok img{margin:0;max-height:290px;width:auto;max-width:100%}
.plan-info h2{margin:.3rem 0 .7rem}
.plan-lead{color:#5a6478;line-height:1.65;margin:0 0 1.2rem}
.plan-specs{display:flex;flex-direction:column;gap:12px;margin-bottom:1.3rem}
.plan-spec{display:flex;gap:12px;align-items:center}
.plan-spec .ps-ic{flex:none;width:40px;height:40px;border-radius:11px;background:rgba(52,189,227,.13);color:var(--cyaan-donker);display:flex;align-items:center;justify-content:center}
.plan-spec .ps-ic svg{width:21px;height:21px;stroke-width:2}
.plan-spec b{display:block;font-family:var(--f-kop);color:var(--navy);font-size:.98rem;line-height:1.15}
.plan-spec span{display:block;color:#8a97a9;font-size:.8rem;margin-top:1px}
.plan-cta{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-kop);font-weight:600;color:var(--cyaan-donker);text-decoration:none}
.plan-cta:hover{gap:9px}
@media(max-width:760px){.plan-blok{grid-template-columns:1fr;gap:20px;padding:20px}}
/* ==========================================================================
REALISATIES
========================================================================== */
.real-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.real-kaart h3{margin-bottom:1rem}
/* ── Herbruikbare foto-slider (model-detail én realisaties): grote foto,
swipe/pijlen/bolletjes, diavoorstelling ── */
.mdl-slider{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--mist);box-shadow:var(--sch-2);aspect-ratio:4/3}
.mdl-track{display:flex;height:100%;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform;touch-action:pan-y}
.mdl-slide{min-width:100%;height:100%}
.mdl-slide img{width:100%;height:100%;object-fit:cover;display:block}
.mdl-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.92);color:var(--navy);display:grid;place-items:center;cursor:pointer;box-shadow:var(--sch-2);transition:background .2s,transform .2s,color .2s;z-index:2}
.mdl-nav:hover{background:var(--cyaan);color:#fff;transform:translateY(-50%) scale(1.07)}
.mdl-nav svg{width:22px;height:22px}
.mdl-nav.prev{left:12px}.mdl-nav.next{right:12px}
.mdl-teller{position:absolute;top:12px;right:12px;z-index:2;background:rgba(21,33,66,.72);backdrop-filter:blur(3px);color:#fff;font-family:var(--f-kop);font-weight:600;font-size:.78rem;padding:5px 11px;border-radius:var(--r-pil)}
.mdl-dots{position:absolute;bottom:12px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:2}
.mdl-dot{width:9px;height:9px;padding:0;border:none;border-radius:50%;cursor:pointer;background:rgba(255,255,255,.65);transition:background .2s,width .2s}
.mdl-dot.actief{background:var(--cyaan);width:22px;border-radius:5px}
@media(prefers-reduced-motion:reduce){.mdl-track{transition:none}}
/* ==========================================================================
CTA-BAND
========================================================================== */
.cta-band{background:linear-gradient(128deg,#12305e 0%,#0b1e40 42%,#081832 76%,#071527 100%);color:#fff;
border-radius:var(--r-lg);padding:clamp(2.2rem,4.6vw,3.4rem);text-align:center;
position:relative;overflow:hidden;border:1px solid rgba(52,189,227,.14);
box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 34px 60px -30px rgba(4,12,27,.55)}
/* kubus-geïnspireerd detail: geroteerd vierkant + dunne diagonaal, amper zichtbaar */
.cta-band::before{content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;
border:1px solid rgba(52,189,227,.11);transform:rotate(45deg);pointer-events:none}
.cta-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:
linear-gradient(115deg,transparent 52%,rgba(52,189,227,.06) 66%,transparent 82%),
radial-gradient(55% 110% at 82% 8%,rgba(52,189,227,.14),transparent 60%),
radial-gradient(42% 60% at 50% 86%,rgba(52,189,227,.12),transparent 72%),
linear-gradient(135deg,transparent calc(50% - 1px),rgba(52,189,227,.09) 50%,transparent calc(50% + 1px))}
.cta-band h2{color:#fff;position:relative;z-index:1}
.cta-band p{color:#c7d2e8;max-width:540px;margin:.8rem auto 1.6rem;position:relative;z-index:1}
.cta-band .btn-primary{position:relative;z-index:1;
box-shadow:0 0 0 1px rgba(52,189,227,.25),0 0 24px rgba(52,189,227,.2),0 14px 30px -14px rgba(52,189,227,.55)}
.cta-band .btn-primary:hover{
box-shadow:0 0 0 1px rgba(52,189,227,.4),0 0 30px rgba(52,189,227,.3),0 18px 36px -14px rgba(52,189,227,.7)}
/* compacte één-rij-variant: voor wanneer er direct nog een groot blok onder volgt */
.cta-band.compact{display:flex;align-items:center;justify-content:space-between;
gap:16px 28px;flex-wrap:wrap;text-align:left;
padding:clamp(1.4rem,2.6vw,1.9rem) clamp(1.5rem,3vw,2.4rem)}
.cta-band.compact h2{font-size:clamp(1.15rem,2vw,1.45rem);margin:0}
.cta-band.compact p{margin:.35rem 0 0;max-width:58ch;font-size:.95rem}
.cta-band.compact .btn{flex:none;position:relative;z-index:1}
.cta-band.compact::before{width:150px;height:150px;right:-50px;top:-60px}
/* laatste sectie (CTA) dichter tegen de footer */
main>section:last-of-type{padding-bottom:clamp(2rem,4vw,3rem)}
/* ==========================================================================
CONTACT + FORMULIER
========================================================================== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.contact-grid form{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r-md);
padding:clamp(1.6rem,3vw,2.2rem);box-shadow:var(--sch-2)}
.veld{margin-bottom:16px}
.veld label{display:block;font-family:var(--f-kop);font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.veld input,.veld textarea,.veld select{width:100%;padding:12px 14px;border:1px solid var(--lijn);
border-radius:var(--r-sm);font:inherit;color:var(--inkt);background:var(--mist);
transition:border-color .15s,box-shadow .15s,background .15s}
.veld input:hover,.veld textarea:hover,.veld select:hover{border-color:#cfd8e4}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:none;border-color:var(--cyaan);
background:var(--wit);box-shadow:var(--ring)}
.veld textarea{resize:vertical;min-height:110px}
.veld select{appearance:none;-webkit-appearance:none;cursor:pointer;
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.hp{position:absolute;left:-9999px}
.melding{background:var(--cyaan-licht);border:1px solid #bce6f2;color:var(--navy);
padding:16px 18px;border-radius:var(--r-sm);margin-bottom:20px;font-weight:500;
display:flex;gap:10px;align-items:center}
.melding::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--cyaan);
background-image:url('data:image/svg+xml;utf8,');
background-repeat:no-repeat;background-position:center}
/* ==========================================================================
FOOTER
========================================================================== */
/* footer draait op Jimmy's footer-achtergrond (gradients/panelen/kubus zitten in het beeld) */
.site-footer{background-color:#081d3b;
background-image:url("../img/footer-bg.jpg");
background-size:cover;background-position:center;background-repeat:no-repeat;
color:#b9c5dc;margin-top:0;position:relative;overflow:hidden}
@supports (background-image:image-set(url("x.avif") type("image/avif"))){
.site-footer{background-image:image-set(
url("../img/footer-bg.avif") type("image/avif"),
url("../img/footer-bg.webp") type("image/webp"),
url("../img/footer-bg.jpg") type("image/jpeg"))}
}
/* dunne cyaan toplijn: links sterk, rechts uitdovend */
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;z-index:2;
background:linear-gradient(90deg,var(--cyaan),rgba(52,189,227,.28) 45%,transparent 82%)}
.site-footer>.container{position:relative;z-index:1}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1.2fr;
column-gap:clamp(30px,4vw,58px);max-width:1280px;padding:55px 24px 38px}
/* achtergrond heeft zelf al lijnen — scheiders amper zichtbaar */
.footer-grid>div+div{border-left:1px solid rgba(255,255,255,.06);
padding-left:clamp(26px,3vw,46px)}
.fbrand{position:relative}
.footer-logo{position:relative;width:clamp(240px,19vw,270px);height:auto;margin-bottom:1.2rem;
filter:drop-shadow(0 0 18px rgba(34,211,238,.12))}
.footer-tag{position:relative;font-size:1.08rem;color:#dbe4f2;max-width:340px;line-height:1.55}
.footer-soc{display:flex;align-items:center;gap:14px;margin-top:20px;position:relative}
/* hoge specificiteit zodat de generieke .footer-grid a-regel (display:block/padding/translateX)
hier gegarandeerd NIET doorwerkt — icoon exact in het geometrische midden */
.site-footer .footer-grid a.footer-social{width:52px;height:52px;min-width:52px;min-height:52px;
display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;
border-radius:50%;box-sizing:border-box;text-align:center;color:#fff;font-size:0;line-height:0;
border:1.5px solid rgba(34,211,238,.8);background:rgba(3,18,40,.45);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease}
.site-footer .footer-grid a.footer-social svg{width:20px;height:20px;display:block;flex:0 0 20px;
margin:0!important;padding:0!important;position:static!important;
left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
transform:none}
.site-footer .footer-grid a.footer-social:hover{background:rgba(34,211,238,.16);
border-color:rgba(34,211,238,1);color:#fff;
transform:translateY(-2px);box-shadow:0 0 20px rgba(34,211,238,.25)}
.site-footer h4{font-family:var(--f-kop);font-size:.95rem;font-weight:700;letter-spacing:.18em;
text-transform:uppercase;color:var(--cyaan);margin-bottom:18px;position:relative;padding-bottom:10px}
.site-footer h4::after{content:"";position:absolute;left:0;bottom:0;width:24px;height:2px;
border-radius:2px;background:var(--cyaan)}
.site-footer .footer-grid a,.site-footer .footer-grid span{display:block;color:#eef3fb;
font-size:1.06rem;padding:7px 0;transition:color .22s,transform .22s}
.site-footer .footer-grid a:hover{color:var(--cyaan);transform:translateX(3px)}
/* aanbod-links met subtiele cyaan chevron */
.f-aanbod a{display:flex;align-items:center;gap:10px}
.f-aanbod a svg{flex:none;color:var(--cyaan);transition:transform .22s}
.f-aanbod a:hover{transform:none;color:#fff}
.f-aanbod a:hover svg{transform:translateX(3px)}
/* contactregels: cyaan lijnicoon in ronde container, exact uitgelijnd */
.footer-grid .fc{display:flex;align-items:center;gap:12px;padding:6px 0}
.footer-grid .fc .fci{flex:none;width:40px;height:40px;border-radius:50%;box-sizing:border-box;
border:1px solid rgba(34,211,238,.35);display:flex;align-items:center;justify-content:center;
color:var(--cyaan)}
.footer-grid .fc .fci svg{width:19px;height:19px;display:block}
.site-footer .footer-grid a.fc:hover{transform:none;color:var(--cyaan)}
.site-footer .footer-grid a.footer-afspraak{color:var(--cyaan);font-weight:700;font-family:var(--f-kop);
font-size:.92rem;letter-spacing:.08em;text-transform:uppercase;
display:inline-flex;align-items:center;gap:9px;margin-top:14px;
position:relative;padding-bottom:7px}
.site-footer .footer-grid a.footer-afspraak::after{content:"";position:absolute;left:0;bottom:0;
width:65%;height:2px;border-radius:2px;background:var(--cyaan);transition:width .25s ease}
.site-footer .footer-grid a.footer-afspraak svg{transition:transform .22s}
.site-footer .footer-grid a.footer-afspraak:hover{color:#fff;transform:none}
.site-footer .footer-grid a.footer-afspraak:hover::after{width:100%}
.site-footer .footer-grid a.footer-afspraak:hover svg{transform:translateX(4px)}
.site-footer .footer-grid a.f-privacy{font-size:.95rem;color:#b7c2d8;margin-top:6px}
/* USP-balk: 4 gelijke kolommen, exact gecentreerd, strakke cyaan bovenrand */
.footer-usps{position:relative;z-index:1;border-top:1px solid rgba(34,211,238,.18)}
.footer-usps-in{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);
gap:16px;padding:26px 24px}
.footer-usp{display:flex;align-items:center;justify-content:center;gap:10px;
color:#e6edf8;font-size:.97rem;font-family:var(--f-kop);font-weight:500;line-height:1.3}
.footer-usp svg{flex:none;width:21px;height:21px;color:var(--cyaan)}
/* aparte donkere copyright-zone */
.footer-bottom-wrap{position:relative;z-index:1;background:rgba(1,10,24,.72)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;
min-height:60px;padding:10px 24px;font-size:.875rem;color:rgba(196,206,224,.75)}
.footer-bottom .agency{color:rgba(196,206,224,.75)}
.footer-bottom .agency:hover{color:var(--cyaan)}
@media(prefers-reduced-motion:reduce){
.site-footer .footer-grid a,.footer-soc a,.footer-afspraak svg{transition:none;transform:none!important}
}
/* ==========================================================================
SCROLL-REVEAL
========================================================================== */
/* Reveal: opacity:0 ENKEL wanneer JS '.pre' zet (op onder-de-vouw-elementen).
Boven de vouw blijft alles meteen zichtbaar → geen uitgestelde LCP (2026-08-26). */
.reveal{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.pre{opacity:0;transform:translateY(30px)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
*{scroll-behavior:auto!important}
.reveal{opacity:1!important;transform:none!important;transition:none!important}
.hero .kicker,.hero h1,.hero .lead,.hero-acties{animation:none;opacity:1}
.hero-slides img{animation:none}
.hero-slides img:first-child{opacity:1}
.btn,.troef,.model-kaart,.nav-socials a,.footer-soc a,.rij-media img,
.model-kaart .foto img,.galerij img{transition:none!important}
}
/* ==========================================================================
RESPONSIEF
========================================================================== */
/* Nav klapt al bij ≤1024px in (iPad) → 8 items + CTA passen anders niet op één rij */
@media(max-width:1024px){
.nav-burger{display:block;margin-left:auto}
.nav-inner{justify-content:flex-start}
.nav-right{gap:0}
.nav-socials{display:none}
.nav-links{position:absolute;top:100%;left:0;right:0;background:var(--wit);
display:none;grid-template-columns:1fr 1fr;column-gap:22px;align-items:stretch;
padding:6px 24px 16px;border-bottom:1px solid var(--lijn);box-shadow:var(--sch-2);z-index:50}
#navtoggle:checked ~ .nav-right .nav-links{display:grid}
.nav-links a{padding:11px 2px;border-bottom:1px solid var(--lijn)}
.nav-links a:not(.nav-cta)::after{display:none}
.nav-cta{grid-column:1 / -1;text-align:center;margin-top:12px;border-bottom:none!important}
}
@media(max-width:900px){
.model-rij,.model-rij.omgekeerd{grid-template-columns:1fr;gap:26px}
.model-rij.omgekeerd .rij-media{order:0}
.detail-hero{grid-template-columns:1fr}
.contact-grid,.real-grid{grid-template-columns:1fr;gap:28px}
.subbanner-logo{height:52px}
.footer-grid{grid-template-columns:1fr 1fr;gap:34px 26px;padding:44px 24px 26px}
.footer-grid>div:first-child{grid-column:1/-1}
.footer-grid>div+div{border-left:none;padding-left:0}
.footer-logo{width:220px}
}
@media(max-width:600px){
.subbanner-logo{display:none}
/* lichtstraal links van het achtergrondbeeld in beeld houden */
.site-footer{background-position:18% center}
.footer-grid{grid-template-columns:1fr;gap:34px;padding:42px 24px 28px}
.footer-grid>div:first-child{text-align:center}
.footer-logo{width:210px;margin-left:auto;margin-right:auto}
.footer-tag{margin:0 auto;font-size:1rem}
.footer-soc{justify-content:center}
.site-footer .footer-grid a.footer-social{width:48px;height:48px;min-width:48px;min-height:48px}
.site-footer .footer-grid a.footer-social svg{width:19px;height:19px;flex:0 0 19px}
.footer-usps-in{grid-template-columns:1fr 1fr;gap:14px 12px;padding:20px 18px}
.footer-usp{justify-content:flex-start;font-size:.9rem}
.footer-bottom{flex-direction:column;justify-content:center;text-align:center;gap:4px;padding:14px 24px}
.hero-acties .btn,.hero-acties{width:100%}
.hero-acties .btn{flex:1 1 auto}
}
/* ==========================================================================
CONTACTBAND (formulier + kaart, sitebreed via _contactband.html)
========================================================================== */
/* contactband: compact formulier + klik-om-te-laden kaart, in cta-band-stijl */
.hc-band{background:linear-gradient(135deg,#10234a 0%,#0b1a38 55%,#08162f 100%);color:#fff;
border-radius:var(--r-lg);border:1px solid rgba(52,189,227,.14);
padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden;
box-shadow:0 34px 64px -32px rgba(8,22,47,.6)}
.hc-band::after{content:"";position:absolute;inset:0;pointer-events:none;background:
radial-gradient(55% 110% at 82% 8%,rgba(52,189,227,.12),transparent 60%)}
.hc-kop{position:relative;z-index:1;max-width:640px;margin-bottom:1.7rem}
.hc-kop h2{color:#fff;margin:.4rem 0 .6rem}
.hc-kop p{color:#c7d2e8}
.hc-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
gap:clamp(20px,3vw,38px);align-items:stretch}
.hc-rij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.hc-form .veld{margin-bottom:13px}
.hc-form .veld label{color:#dbe4f2}
.hc-form input,.hc-form textarea{background:rgba(255,255,255,.07);
border-color:rgba(255,255,255,.16);color:#fff}
.hc-form input::placeholder,.hc-form textarea::placeholder{color:#8d99b4}
.hc-form input:hover,.hc-form textarea:hover{border-color:rgba(255,255,255,.3)}
.hc-form input:focus,.hc-form textarea:focus{background:rgba(255,255,255,.1);
border-color:var(--cyaan);box-shadow:0 0 0 3px rgba(52,189,227,.22)}
.hc-verstuur{width:100%;display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-weight:700;padding:14px 22px;
box-shadow:0 0 22px rgba(52,189,227,.25),0 12px 28px -12px rgba(52,189,227,.6)}
.hc-kaart{display:flex;flex-direction:column;gap:13px}
.hc-nap{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:.92rem}
.hc-nap a,.hc-nap span{display:inline-flex;align-items:center;gap:8px;color:#dbe4f2}
.hc-nap svg{color:var(--cyaan);flex:none}
.hc-nap a:hover{color:var(--cyaan)}
.hc-map{position:relative;flex:1;min-height:280px;border-radius:var(--r-md);overflow:hidden;
border:1px solid rgba(255,255,255,.14);background:rgba(4,12,27,.5)}
.hc-map-laadt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
justify-content:center;gap:8px;color:#8d99b4;font-size:.85rem}
.hc-map-laadt svg{color:var(--cyaan);opacity:.8}
.hc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent}
.hc-route{display:inline-flex;align-items:center;gap:8px;color:var(--cyaan);
font-family:var(--f-kop);font-weight:600;font-size:.92rem}
.hc-route svg{transition:transform .22s}
.hc-route:hover{color:#fff}
.hc-route:hover svg{transform:translateX(4px)}
@media(max-width:980px){
.hc-grid{grid-template-columns:1fr}
.hc-map{min-height:260px}
}
@media(max-width:520px){
.hc-rij{grid-template-columns:1fr}
}
/* AI-ontwerp-band (herbruikbaar, _ai_band.html) — conversietool bovenaan elke pagina */
.aiband-sec{padding:1.6rem 0 0}
@media(max-width:600px){.aiband-sec{padding:10px 0 0}.aiband{padding:12px 14px}}
.aiband{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:space-between;background:linear-gradient(120deg,#eef8fc,#e2f3fb);border:1px solid #bfe6f4;border-radius:16px;padding:16px 22px;text-decoration:none;transition:border-color .16s,box-shadow .16s}
.aiband:hover{border-color:var(--cyaan,#34bde3);box-shadow:0 10px 24px rgba(35,54,110,.10)}
.aiband-l{display:flex;align-items:center;gap:14px}
.aiband-ic{flex:none;width:44px;height:44px;border-radius:12px;background:var(--cyaan,#34bde3);display:inline-flex;align-items:center;justify-content:center}
.aiband-ic svg{width:24px;height:24px}
.aiband b{display:block;font-family:var(--f-kop,'Poppins',sans-serif);color:var(--navy,#23366e);font-size:1.05rem;line-height:1.3}
.aiband-sub{color:#5a6478;font-size:.92rem;line-height:1.4}
.aiband-btn{flex:none;font-family:var(--f-kop,'Poppins',sans-serif);font-weight:600;color:#fff;background:var(--navy,#23366e);border-radius:999px;padding:11px 22px}
@media(max-width:560px){.aiband{padding:14px 16px}.aiband-btn{width:100%;text-align:center}}
/* Hub→gemeente chip-grid (_gemeente_links.html) */
.pg-gem-sec{padding:var(--sp-8,3.5rem) 0;background:#f4f6fb}
.pg-gem-sec h2{font-size:clamp(1.4rem,3vw,1.95rem);margin:0 0 .5rem}
.pg-gem-lead{color:#5a6478;max-width:64ch;line-height:1.7;margin:0 0 var(--sp-5,1.5rem)}
.pg-gem-chips{display:flex;flex-wrap:wrap;gap:8px}
.pg-gem-chips a{background:#fff;border:1px solid #dbe2ee;color:var(--navy,#23366e);border-radius:var(--r-pil,999px);padding:8px 15px;font-size:.85rem;font-weight:600;text-decoration:none;transition:border-color .16s,color .16s,background .16s}
.pg-gem-chips a:hover{border-color:var(--cyaan,#34bde3);color:var(--cyaan-donker,#1897bf);background:var(--cyaan-licht,#e8f7fc)}
/* Diepe product-content (_product_content.html) */
.pc-sec{padding:var(--sp-8,3.5rem) 0;background:#fff}
.pc-sec .container{max-width:820px}
.pc-block{margin-bottom:var(--sp-7,2.75rem)}
.pc-block:last-child{margin-bottom:0}
.pc-block h2{font-size:clamp(1.35rem,2.8vw,1.8rem);margin:0 0 var(--sp-3,.9rem);color:var(--navy,#23366e);line-height:1.2}
.pc-block h2::after{content:"";display:block;width:44px;height:3px;border-radius:3px;background:var(--cyaan,#34bde3);margin-top:.6rem}
.pc-block p{color:#48526a;line-height:1.8;margin:0 0 1rem;font-size:1.02rem}
.pc-block p:last-child{margin-bottom:0}
/* ── Yentl-promo (laatste toonzaalmodel) — premium navy/cyaan, on-brand ── */
.yentl-promo{padding:var(--sp-7,2.75rem) 0}
.yp-card{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;
background:linear-gradient(135deg,var(--navy-diep,#152142) 0%,var(--navy,#23366e) 100%);
border:1px solid rgba(255,255,255,.08);border-radius:var(--r-lg,20px);overflow:hidden;
box-shadow:0 22px 54px rgba(15,20,35,.24)}
.yp-media{position:relative;display:block;background:#1b2949;min-height:360px}
.yp-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.yp-media::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(21,33,66,0) 48%,var(--navy,#23366e) 100%)}
.yp-info{padding:clamp(30px,3.6vw,52px);display:flex;flex-direction:column;justify-content:center}
.yp-eyebrow{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cyaan,#34bde3);font-weight:700;font-family:var(--f-kop,'Poppins',sans-serif)}
.yp-titel{color:#fff;font-family:var(--f-kop,'Poppins',sans-serif);font-weight:700;font-size:clamp(2rem,3.8vw,2.9rem);line-height:1.04;margin:.55rem 0 0}
.yp-titel .yp-sub2{display:block;font-weight:400;font-size:.4em;color:#bcc7e0;letter-spacing:.01em;margin-top:.35rem}
.yp-meta{color:#a6b2ce;font-size:.95rem;margin:1rem 0 0;letter-spacing:.01em}
.yp-prijs{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:1.6rem 0 0}
.yp-oud{color:#78849f;text-decoration:line-through;font-size:1.15rem}
.yp-nu{font-family:var(--f-kop,'Poppins',sans-serif);font-weight:800;font-size:clamp(2.4rem,4.6vw,3.3rem);color:var(--cyaan,#34bde3);line-height:1}
.yp-btw{color:#a6b2ce;font-size:.8rem}
.yp-bespaar{color:#e3e9f6;font-size:.94rem;margin-top:.7rem;font-weight:500;display:flex;align-items:center;gap:10px}
.yp-bespaar::before{content:"";width:18px;height:2px;background:var(--cyaan,#34bde3);border-radius:2px}
.yp-cta{align-self:flex-start;margin-top:1.9rem;background:var(--cyaan,#34bde3);color:#08222e;font-family:var(--f-kop,'Poppins',sans-serif);font-weight:700;padding:14px 30px;border-radius:var(--r-pil,999px);text-decoration:none;transition:transform .16s,background .16s;box-shadow:0 10px 24px rgba(52,189,227,.22)}
.yp-cta:hover{background:#5fd0ef;transform:translateY(-2px)}
@media(max-width:760px){
/* strakker kader op mobiel (wens Jimmy 29/08): minder lucht, compactere typografie */
.yentl-promo{padding:1.6rem 0}
.yp-card{grid-template-columns:1fr;max-width:560px}
.yp-media{min-height:0;aspect-ratio:16/10}
.yp-media::after{background:linear-gradient(180deg,rgba(21,33,66,0) 62%,var(--navy,#23366e) 100%)}
.yp-info{padding:18px 18px 22px;text-align:center;align-items:center}
.yp-titel{font-size:1.6rem}
.yp-titel .yp-sub2{margin-top:.25rem}
.yp-meta{margin:.6rem 0 0;font-size:.88rem}
.yp-prijs{justify-content:center;margin:1rem 0 0;gap:10px}
.yp-nu{font-size:2.2rem}
.yp-bespaar{justify-content:center;margin-top:.5rem;font-size:.88rem}
.yp-cta{align-self:stretch;text-align:center;margin-top:1rem;padding:12px 24px}
}
@media (prefers-reduced-motion:reduce){.yp-cta{transition:none}}
/* ── "Geen bouwmarkt-kastje" — verschil-blok ── */
.verschil{background:linear-gradient(135deg,var(--navy-diep,#152142),var(--navy,#23366e));color:#fff;padding:var(--sp-8,3.5rem) 0}
.verschil .verschil-eyebrow{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cyaan,#34bde3);font-weight:700;font-family:var(--f-kop,'Poppins',sans-serif)}
.verschil h2{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);line-height:1.12;margin:.5rem 0 .7rem;max-width:20ch}
.verschil h2 .hl{color:var(--cyaan,#34bde3)}
.verschil .verschil-lead{color:#dfe7f5;max-width:64ch;font-size:1.08rem;line-height:1.75;margin:0 0 var(--sp-5,1.5rem)}
.verschil .verschil-lijst{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px 24px;margin:0 0 var(--sp-6,2rem);max-width:820px}
.verschil .vl-item{display:flex;align-items:flex-start;gap:11px;color:#eaf1fb;font-weight:500;font-size:1rem;line-height:1.4}
.verschil .vl-ic{flex:none;width:24px;height:24px;border-radius:50%;background:var(--cyaan,#34bde3);color:#0a2230;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.85rem;margin-top:1px}
.verschil .verschil-cta{display:inline-block;background:var(--cyaan,#34bde3);color:#0a2230;font-family:var(--f-kop,'Poppins',sans-serif);font-weight:700;padding:13px 28px;border-radius:var(--r-pil,999px);text-decoration:none;box-shadow:0 8px 22px rgba(52,189,227,.28);transition:transform .16s,background .16s}
.verschil .verschil-cta:hover{background:#5fd0ef;transform:translateY(-2px)}
/* ── Prijs-/keuzeblok: twee nette kaarten (model- én gemeentepagina's) ─────── */
.model-prijs{margin:1rem 0 0}
.model-prijs .pk-grid{display:flex;align-items:stretch;gap:12px}
.model-prijs .pk-opt{flex:1;min-width:0;display:flex;flex-direction:column;
background:#fff;border:1px solid #e0e6ef;border-radius:14px;padding:15px 17px 16px;
box-shadow:0 4px 14px rgba(21,33,66,.05)}
.model-prijs .pk-opt.pk-zelf{border-color:var(--cyaan);box-shadow:0 6px 18px rgba(52,189,227,.14)}
.model-prijs .pk-opt.pk-plaats{background:#f7f9fc}
.model-prijs .pk-eyebrow{font-family:var(--f-kop);font-weight:700;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--cyaan-donker);line-height:1.3;min-height:2.4em;display:flex;align-items:flex-start;margin:0 0 6px}
.model-prijs .pk-plaats .pk-eyebrow{color:#7a8699}
.model-prijs .pk-prijs{font-family:var(--f-kop);color:var(--cyaan-donker);font-weight:800;font-size:1.28rem;line-height:1.1;margin:0}
.model-prijs .pk-prijs .van{font-weight:600;font-size:.8rem;color:#5a6478;letter-spacing:.02em}
.model-prijs .pk-plaats .pk-prijs{color:var(--navy)}
.model-prijs .pk-plaats .pk-prijs .plus{color:var(--cyaan-donker)}
.model-prijs .btw{display:block;color:#8a97a9;font-size:.72rem;font-weight:400;margin-top:2px}
.model-prijs .pk-sub{color:#5a6478;font-size:.8rem;line-height:1.4;margin:auto 0 0;padding-top:8px}
.model-prijs a.pk-opt{text-decoration:none;transition:transform .16s,border-color .16s,box-shadow .16s}
.model-prijs a.pk-plaats:hover{border-color:var(--cyaan);transform:translateY(-2px);box-shadow:0 8px 20px rgba(35,54,110,.1)}
.model-prijs .pk-plaats-titel{font-family:var(--f-kop);font-weight:700;color:var(--navy);font-size:1.02rem;line-height:1.15;margin:0}
.model-prijs .pk-arrow{display:block;color:var(--cyaan-donker);font-weight:600;font-size:.8rem;margin-top:7px}
.btw-noot{color:#8a97a9;font-size:.76rem;line-height:1.45;margin:.55rem 0 0}
/* Google-reviews badge (herbruikbaar) */
.rev-badge{display:inline-flex;align-items:center;gap:8px;text-decoration:none;background:#fff;border:1px solid var(--lijn,#e6ebf1);border-radius:999px;padding:6px 13px;font-size:.85rem;color:var(--navy,#23366e);box-shadow:0 3px 10px rgba(35,54,110,.06);transition:border-color .16s}
.rev-badge:hover{border-color:var(--cyaan,#34bde3)}
.rev-badge .rev-stars{display:inline-flex;gap:1px;color:#f5b301;line-height:0}
.rev-badge .rev-txt b{color:inherit}
.rev-badge.op-hero{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
/* Reviews-badge in hero: normale marge; op mobiel krapper */
.hero-revbadge{margin-top:1.1rem}
/* Mobiel: heroes compacter zodat de AI-band meteen in beeld komt (mobiel primeert) */
@media(max-width:600px){
.gm-hero,.ph-hero,.pl-hero,.pr-hero,.mdl-vidhero{padding-top:1.25rem!important;padding-bottom:1rem!important}
.gm-hero h1,.ph-hero h1,.pr-hero h1,.mdl-vidhero h1{font-size:1.68rem!important;line-height:1.12!important;margin-bottom:.35rem!important}
.gm-hero p,.ph-hero p,.pr-hero p{font-size:.93rem!important;line-height:1.48!important}
.gm-usps{margin-top:.65rem!important;gap:6px!important}
.gm-usp{padding:4px 9px!important;font-size:.73rem!important}
.hero-revbadge{margin-top:.55rem!important}
.ph-hero .acties,.pr-hero .acties,.pl-hero .acties{margin-top:1rem!important}
.pr-usp-badge{display:none!important}
}
/* Zwevend WhatsApp-knopje (rechtsonder, klein & modern) */
.wa-fab{position:fixed;bottom:18px;right:18px;z-index:70;width:54px;height:54px;border-radius:50%;background:#25d366;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:transform .16s}
.wa-fab:hover{transform:scale(1.06)}
@media(max-width:768px){.wa-fab{bottom:16px;right:16px;width:52px;height:52px}}
@media (prefers-reduced-motion:reduce){.wa-fab{transition:none}}
@media (max-width:560px){
.model-prijs .pk-grid{flex-direction:column;gap:10px}
.model-prijs .pk-sub{margin-top:6px}
}
/* ── Cyaan signatuur-streepje boven élke modelfoto (consistent overal) ─────── */
.ph-model .ph-foto,.gm-model .gm-foto,.pr-mfoto,.pr-model .pr-foto,.model-kaart .foto{position:relative}
.ph-model .ph-foto::before,.gm-model .gm-foto::before,.pr-mfoto::before,.pr-model .pr-foto::before,.model-kaart .foto::before{
content:"";position:absolute;top:0;left:18px;right:18px;height:3px;z-index:3;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,var(--cyaan),transparent 70%);opacity:.9;pointer-events:none}
/* ── Home: 'Waarvoor gebruik je een Je-House?' toepassingskaarten ─────────── */
.home-toep{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px;margin-top:var(--sp-5,1.5rem)}
.home-toep-kaart{display:flex;flex-direction:column;gap:5px;background:#fff;border:1px solid var(--lijn);
border-radius:var(--r-md,14px);padding:18px 20px;text-decoration:none;color:var(--navy);
transition:transform .16s,box-shadow .16s,border-color .16s}
.home-toep-kaart:hover{transform:translateY(-3px);border-color:var(--cyaan);box-shadow:0 12px 26px rgba(35,54,110,.12)}
.home-toep-kaart .t{font-family:var(--f-kop);font-weight:700;font-size:1.08rem}
.home-toep-kaart .k{color:var(--inkt-zacht,#586172);font-size:.9rem;line-height:1.5;flex:1}
.home-toep-kaart .go{display:inline-flex;align-items:center;gap:6px;color:var(--cyaan-donker);font-weight:600;font-size:.85rem;margin-top:4px}