/* Holland Isolatie – basisstijl */
:root{
  --oranje:#FAA636; --oranje-d:#E58E17; --oranje-l:#FFF3E2;
  --navy:#141B2D; --navy-2:#1E2740;
  --tekst:#3D4352; --grijs:#6B7180; --lijn:#E6E8EE; --bg:#F5F6F9; --wit:#fff;
  --r:6px; --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Urbanist',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--tekst);background:#fff;line-height:1.6;font-size:16.5px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
h1,h2,h3{color:var(--navy);line-height:1.15;font-weight:300;overflow-wrap:anywhere}
h1{font-size:clamp(2.1rem,5vw,3.5rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.2rem;font-weight:700}
h1 b,h2 b,.oranje{color:var(--oranje);font-weight:700}
.sub{max-width:640px;color:var(--grijs);margin-top:12px}
.center{text-align:center}.center .sub{margin-left:auto;margin-right:auto}
section{padding:84px 0}
.bg{background:var(--bg)}
.tag{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--oranje-d);margin-bottom:14px}
.tag::before{content:"";width:22px;height:2px;background:var(--oranje)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 22px;border-radius:var(--r);font-weight:700;font-size:1rem;border:1.5px solid transparent;cursor:pointer;transition:.18s;font-family:inherit;line-height:1}
.btn svg{width:18px;height:18px}
.btn-o{background:var(--oranje);color:var(--navy)}
.btn-o:hover{background:var(--oranje-d)}
.btn-l{background:#fff;color:var(--navy);border-color:var(--lijn)}
.btn-l:hover{border-color:var(--navy)}
.btn-n{background:var(--navy);color:#fff}
.btn-n:hover{background:var(--navy-2)}
.btn-wa{background:#25D366;color:#fff}

/* header */
.top{background:var(--navy);color:#cfd3dd;font-size:.88rem}
.top .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.top a{color:#fff;font-weight:600}
.kop{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--lijn)}
.kop .wrap{display:flex;align-items:center;gap:28px;height:78px}
.merk{display:flex;align-items:center;gap:11px;flex-shrink:0}
.merk img{width:58px;height:auto}
.merk span{font-weight:800;font-size:1.22rem;color:var(--navy);letter-spacing:.01em;line-height:1.05}
.merk span em{font-style:normal;color:var(--oranje)}
.nav{display:flex;gap:26px;margin-left:auto;font-weight:600;font-size:.98rem}
.nav a{color:var(--navy);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover,.nav a.actief{color:var(--oranje-d);border-color:var(--oranje)}
.kop .btn{padding:12px 18px}
.burger{display:none;margin-left:auto;width:46px;height:46px;border:1px solid var(--lijn);border-radius:var(--r);background:#fff;cursor:pointer;align-items:center;justify-content:center}
.burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;background:var(--navy);position:relative;transition:.2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded=true] span{background:transparent}
.burger[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

/* hero */
.hero{padding:64px 0 0;background:linear-gradient(180deg,#fff 0%,var(--bg) 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center}
.hero h1{margin-bottom:18px}
.hero p.lead{font-size:1.1rem;max-width:540px;color:var(--tekst)}
.hero .knoppen{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 26px}
.chips{display:flex;flex-wrap:wrap;gap:10px 20px;font-weight:600;color:var(--navy);font-size:.95rem}
.chips li{list-style:none;display:flex;align-items:center;gap:8px}
.chips svg{width:18px;height:18px;color:var(--oranje-d)}
.hero-beeld{position:relative;min-height:420px;display:flex;align-items:flex-end;justify-content:center}
.hero-beeld .vlak{position:absolute;inset:40px 0 0 30px;background:var(--navy);clip-path:polygon(22% 0,100% 0,100% 100%,0 100%)}
.hero-beeld .vlak2{position:absolute;right:0;bottom:0;width:62%;height:46%;background:var(--oranje);clip-path:polygon(100% 0,100% 100%,0 100%)}
.hero-beeld svg.huis{position:relative;width:min(470px,100%);z-index:2;margin-bottom:-1px}
.zwevend{position:absolute;z-index:3;background:#fff;border-radius:var(--r);box-shadow:0 14px 40px rgba(20,27,45,.15);padding:14px 16px;font-size:.88rem;font-weight:600;color:var(--navy);display:flex;align-items:center;gap:10px}
.zwevend b{display:block;font-size:1.15rem;color:var(--oranje-d)}
.zwevend.z1{left:0;top:70px}.zwevend.z2{right:6px;top:10px}
.zwevend .ic{width:38px;height:38px;border-radius:50%;background:var(--oranje-l);display:grid;place-items:center;color:var(--oranje-d)}
.zwevend .ic svg{width:20px;height:20px}

/* categorie-balk */
.cats{position:relative;z-index:4;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:-1px;box-shadow:0 10px 30px rgba(20,27,45,.06)}
.cats a{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid transparent;background:var(--bg);border-radius:4px;font-weight:600;color:var(--navy);font-size:.95rem;transition:.18s}
.cats a:hover{border-color:var(--oranje);color:var(--oranje-d);background:#fff}
.cats svg{width:22px;height:22px;flex-shrink:0;color:var(--oranje-d)}
.cats-label{font-weight:700;color:var(--navy);margin:40px 0 12px;font-size:.95rem}

/* diensten */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:46px}
.kaart{position:relative;background:#fff;border:1px solid var(--lijn);padding:30px 26px;border-radius:4px;transition:.2s;overflow:hidden}
.kaart::before{content:"";position:absolute;top:0;left:0;width:0;height:0;border-style:solid;border-width:38px 38px 0 0;border-color:var(--oranje) transparent transparent transparent;opacity:0;transition:.2s}
.kaart:hover,.kaart.uit{border-color:var(--oranje);box-shadow:0 14px 34px rgba(20,27,45,.07)}
.kaart:hover::before,.kaart.uit::before{opacity:1}
.kaart .ic{width:52px;height:52px;border-radius:50%;background:var(--oranje-l);display:grid;place-items:center;color:var(--oranje-d);margin-bottom:18px}
.kaart .ic svg{width:26px;height:26px}
.kaart h3{margin-bottom:8px}
.kaart.uit h3{color:var(--oranje-d)}
.kaart p{color:var(--grijs);font-size:.97rem}
.kaart .meer{display:inline-flex;margin-top:14px;font-weight:700;color:var(--oranje-d);text-decoration:underline;text-underline-offset:3px;font-size:.95rem}

/* waarom */
.twee{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.diag{position:relative;aspect-ratio:1/1;max-width:500px}
.diag .d1{position:absolute;inset:0;background:var(--navy);clip-path:polygon(0 0,100% 100%,0 100%)}
.diag .d2{position:absolute;inset:0;background:var(--oranje);clip-path:polygon(0 30%,70% 100%,0 100%)}
.diag svg{position:absolute;inset:8% 4% 0 10%;width:86%;z-index:2}
.vinkjes{list-style:none;margin:24px 0 30px;display:grid;gap:14px}
.vinkjes li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--navy)}
.vinkjes li span{display:block;font-weight:400;color:var(--grijs);font-size:.95rem}
.vinkjes .ic{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:var(--oranje);color:var(--navy);display:grid;place-items:center}
.vinkjes .ic svg{width:16px;height:16px}

/* stappen */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:46px;counter-reset:s}
.stap{background:#fff;border:1px solid var(--lijn);padding:28px 22px;border-radius:4px;position:relative}
.stap::before{counter-increment:s;content:"0" counter(s);font-size:2.4rem;font-weight:800;color:var(--oranje);line-height:1;display:block;margin-bottom:12px}
.stap p{color:var(--grijs);font-size:.95rem;margin-top:6px}

/* offerte */
.off-kop{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.offerte{display:grid;grid-template-columns:.75fr 1.6fr;background:var(--bg);border:1px solid var(--lijn);margin-top:40px;position:relative;overflow:hidden}
.offerte::before{content:"";position:absolute;top:0;left:0;border-style:solid;border-width:70px 70px 0 0;border-color:var(--oranje) transparent transparent transparent;z-index:3}
.off-zij{background:var(--navy);color:#cfd3dd;padding:56px 30px 34px;position:relative;overflow:hidden}
.off-zij h3{color:#fff;font-size:1.4rem;font-weight:300;margin-bottom:14px}
.off-zij h3 b{color:var(--oranje)}
.off-zij ul{list-style:none;display:grid;gap:12px;margin:20px 0 28px;font-size:.95rem}
.off-zij li{display:flex;gap:10px}
.off-zij li svg{width:18px;height:18px;color:var(--oranje);flex-shrink:0;margin-top:3px}
.off-zij .bel{display:block;color:#fff;font-weight:800;font-size:1.3rem;margin-top:4px}
.off-zij::after{content:"";position:absolute;right:-40px;bottom:-40px;width:180px;height:180px;background:var(--oranje);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.9}
form.off-form{padding:40px 36px;display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;background:#fff}
.veld{display:flex;flex-direction:column;gap:7px;min-width:0}
.veld.vol{grid-column:1/-1}
.veld label,.veld legend{font-weight:700;color:var(--navy);font-size:.95rem}
.veld input,.veld select,.veld textarea{font-family:inherit;font-size:1rem;padding:13px 14px;border:1px solid var(--lijn);border-radius:4px;background:var(--bg);color:var(--navy);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--oranje);background:#fff}
.veld textarea{min-height:110px;resize:vertical}
fieldset.veld{border:0}
.keuzes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.keuzes label{display:flex;align-items:center;gap:9px;padding:12px;border:1px solid var(--lijn);border-radius:4px;background:var(--bg);font-weight:600;font-size:.93rem;cursor:pointer;color:var(--navy)}
.keuzes input{accent-color:var(--oranje-d);width:17px;height:17px;flex-shrink:0}
.keuzes label:has(input:checked){border-color:var(--oranje);background:var(--oranje-l)}
.hp{position:absolute;left:-9999px;opacity:0}
.klein{font-size:.85rem;color:var(--grijs)}
.off-form .verstuur{grid-column:1/-1;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fout{color:#C0392B;font-weight:600;font-size:.9rem;display:none}

/* faq */
.faq{max-width:880px;margin:40px auto 0;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--lijn);border-radius:4px;position:relative;overflow:hidden}
.faq details[open]{border-color:var(--oranje)}
.faq details[open]::before{content:"";position:absolute;top:0;left:0;border-style:solid;border-width:16px 16px 0 0;border-color:var(--oranje) transparent transparent transparent}
.faq summary{cursor:pointer;padding:18px 52px 18px 22px;font-weight:700;color:var(--navy);list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--oranje-d)}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 22px 20px;color:var(--grijs)}

/* cta */
.cta{background:var(--navy);color:#cfd3dd;position:relative;overflow:hidden;padding:64px 0}
.cta::after{content:"";position:absolute;right:0;bottom:0;width:55%;height:100%;background:var(--oranje);clip-path:polygon(100% 0,100% 100%,0 100%)}
.cta .wrap{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.cta h2{color:#fff}
.cta .knoppen{display:flex;gap:12px;flex-wrap:wrap}

/* footer */
footer{background:#0E1322;color:#a9afbd;padding:64px 0 0;font-size:.95rem}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer h4{color:#fff;font-size:1.05rem;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:9px}
footer a:hover{color:var(--oranje)}
.f-merk{display:inline-flex;align-items:center;gap:10px;background:#fff;padding:10px 14px;border-radius:var(--r);margin-bottom:16px}
.f-merk img{width:48px}
.f-merk span{font-weight:800;color:var(--navy)}
.f-onder{border-top:1px solid #222a3d;margin-top:48px;padding:20px 0;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.87rem}

/* vaste balk mobiel */
.belbalk{display:none}

/* pagina-kop (subpagina's) */
.pkop{background:var(--navy);color:#cfd3dd;padding:64px 0 56px;position:relative;overflow:hidden}
.pkop::after{content:"";position:absolute;right:0;bottom:0;width:38%;height:100%;background:var(--oranje);clip-path:polygon(100% 0,100% 100%,0 100%)}
.pkop .wrap{position:relative;z-index:2}
.pkop h1{color:#fff}
.pkop .krumel{font-size:.9rem;margin-bottom:14px}
.pkop .krumel a{color:var(--oranje)}

/* responsive */
@media (max-width:1020px){
  .nav{position:fixed;inset:0;top:0;height:100dvh;background:#fff;flex-direction:column;gap:0;padding:124px 26px 120px;overflow-y:auto;overscroll-behavior:contain;display:none;z-index:40;font-size:1.15rem}
  .nav a{padding:16px 0;border-bottom:1px solid var(--lijn)}
  .nav.open{display:flex}
  body.menu-open{overflow:hidden}
  .burger{display:flex;position:relative;z-index:60}
  .kop .btn{display:none}
  .merk{position:relative;z-index:60}
  .hero-grid,.twee{grid-template-columns:1fr}
  .hero-beeld{min-height:340px}
  .cats{grid-template-columns:repeat(3,1fr)}
  .grid3{grid-template-columns:1fr 1fr}
  .stappen{grid-template-columns:1fr 1fr}
  .offerte{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .diag{margin:0 auto;width:100%}
}
@media (max-width:640px){
  body{font-size:16px;padding-bottom:70px}
  section{padding:60px 0}
  .top .wrap span.verberg{display:none}
  .top .wrap{justify-content:center}
  .kop .wrap{height:68px}
  .merk img{width:48px}
  .merk span{font-size:1.08rem}
  .cats{grid-template-columns:1fr 1fr;padding:12px;gap:8px}
  .cats a{padding:11px;font-size:.9rem}
  .grid3,.stappen{grid-template-columns:1fr}
  form.off-form{grid-template-columns:1fr;padding:30px 20px}
  .keuzes{grid-template-columns:1fr 1fr}
  .f-grid{grid-template-columns:1fr}
  .zwevend.z1{left:0;top:40px}.zwevend.z2{display:none}
  .cta::after{width:100%;height:30%}
  .belbalk{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:45;background:#fff;padding:9px 10px calc(9px + env(safe-area-inset-bottom));box-shadow:0 -6px 20px rgba(20,27,45,.1)}
  .belbalk .btn{padding:13px 10px;font-size:.95rem}
}

/* subpagina's */
[id]{scroll-margin-top:96px}
.pk-lead{max-width:640px;margin-top:12px;font-size:1.08rem}
.pkop .knoppen{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.twee-top{align-items:start}
.tekst{margin-top:14px;color:var(--tekst)}
.zijkaart{background:var(--bg);border:1px solid var(--lijn);border-top:4px solid var(--oranje);padding:30px 28px;border-radius:4px}
.zijkaart .vinkjes{margin:18px 0 24px}
.zijkaart .vinkjes li{font-weight:600}
.cats5{grid-template-columns:repeat(4,1fr)}
@media (max-width:1020px){.cats5{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cats5{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pkop{padding:48px 0 90px}.pkop::after{width:100%;height:60px;clip-path:polygon(100% 0,100% 100%,0 100%)}}
.btn-wa:hover{background:#1ebe5b}
.wa-zweef{position:fixed;right:22px;bottom:22px;z-index:45;width:60px;height:60px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:.2s}
.wa-zweef:hover{transform:scale(1.07)}
.wa-zweef svg{width:34px;height:34px}
@media (max-width:640px){.wa-zweef{display:none}.belbalk{grid-template-columns:1fr 1.25fr 1fr}.belbalk .btn{padding:13px 6px;font-size:.92rem;gap:6px}}

/* taalschakelaar NL | EN */
.taal{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--lijn);border-radius:999px;padding:3px;flex-shrink:0;position:relative;z-index:60;background:#fff}
.taal a{padding:6px 12px;border-radius:999px;font-weight:700;font-size:.8rem;letter-spacing:.08em;color:var(--grijs);line-height:1;transition:.18s}
.taal a:hover{color:var(--oranje-d)}
.taal a.aan{background:var(--oranje-d);color:#fff}
@media (max-width:1020px){.taal{margin-left:auto}.burger{margin-left:10px}}
@media (max-width:640px){.taal a{padding:6px 10px}}
.keuzes label,.cats a{min-width:0;overflow-wrap:anywhere}
@media (max-width:400px){.cats5{grid-template-columns:1fr}}

/* keuzes met icoon */
.keuzes{grid-template-columns:repeat(3,1fr)}
.keuzes label.keuze{position:relative;display:flex;align-items:center;gap:10px;padding:14px 38px 14px 14px;border:1.5px solid var(--lijn);background:var(--bg);border-radius:4px;cursor:pointer;font-weight:700;color:var(--navy);transition:.15s}
.keuze input{position:absolute;opacity:0;width:1px;height:1px}
.keuze .k-ic{width:24px;height:24px;flex-shrink:0;color:var(--oranje-d)}
.keuze .k-ic svg{width:24px;height:24px}
.keuze .k-tx{min-width:0;overflow-wrap:anywhere}
.keuze .k-v{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1.5px solid var(--lijn);background:#fff;display:grid;place-items:center;color:transparent}
.keuze .k-v svg{width:12px;height:12px;stroke-width:3}
.keuze:hover{border-color:var(--oranje)}
.keuzes label.keuze:has(input:checked){border-color:var(--oranje);background:var(--oranje-l);color:var(--oranje-d)}
.keuze input:checked~.k-v{background:var(--oranje-d);border-color:var(--oranje-d);color:#fff}
.keuze input:focus-visible~.k-tx{outline:2px solid var(--oranje-d);outline-offset:3px}
@media (max-width:640px){.keuzes{grid-template-columns:1fr 1fr}}
@media (max-width:360px){.keuzes{grid-template-columns:1fr}}
/* m2 */
.m2{position:relative}
.m2 input{padding-right:48px}
.m2 span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-weight:700;color:var(--grijs)}
/* foto */
.foto{position:relative;max-width:480px;margin:0 auto;padding:0 0 22px 22px}
.foto::before{content:"";position:absolute;left:0;bottom:0;width:70%;height:70%;background:var(--oranje);clip-path:polygon(0 0,0 100%,100% 100%)}
.foto::after{content:"";position:absolute;right:-14px;top:-14px;width:40%;height:40%;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 100%);z-index:0}
.foto img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:900/1047;object-fit:cover;border-radius:4px;box-shadow:0 18px 40px rgba(20,27,45,.18)}
.twee-top .foto{margin:30px 0 0;max-width:420px}
@media (max-width:640px){.foto::after{right:-6px;top:-6px}}
/* materialen */
.mat-strip{padding:56px 0;background:#fff;border-bottom:1px solid var(--lijn)}
.mat-in{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.mat-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mat-chips a:not(.btn){display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px;border:1.5px solid var(--lijn);border-radius:4px;color:var(--navy);transition:.15s}
.mat-chips a:not(.btn):hover{border-color:var(--oranje)}
.mat-chips a svg{width:26px;height:26px;color:var(--oranje-d)}
.mat-chips .btn{grid-column:1/-1}
.mat-box{margin-top:24px;padding:18px 20px;border-left:4px solid var(--oranje);background:var(--oranje-l);border-radius:0 4px 4px 0}
.mat-box b{color:var(--navy)}.mat-box p{margin:6px 0 8px}
.mat-box a{font-weight:700}
.kaart .spec{margin-top:10px;font-weight:700;color:var(--navy);font-size:.92rem}
.dls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.dl{display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:1.5px solid var(--lijn);border-radius:4px;font-weight:700;color:var(--navy);transition:.15s}
.dl:hover{border-color:var(--oranje)}
.dl span:nth-child(2){flex:1;min-width:0}
.dl svg{width:18px;height:18px;color:var(--oranje-d);flex-shrink:0}
.dl-ic{background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;padding:6px 8px;border-radius:3px;letter-spacing:.05em}
@media (max-width:1020px){.mat-in{grid-template-columns:1fr}}
@media (max-width:640px){.dls{grid-template-columns:1fr}.mat-chips{grid-template-columns:1fr 1fr 1fr;gap:8px}.mat-chips a:not(.btn){padding:12px;font-size:.88rem}}
@media (max-width:380px){.merk img{width:40px}.merk span{font-size:1rem}.taal a{padding:6px 8px;font-size:.74rem}.burger{width:42px;height:42px;margin-left:6px}.kop .wrap{gap:10px;padding-left:16px;padding-right:16px}}
/* particulier / zakelijk */
.klant{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;background:var(--bg);border:1.5px solid var(--lijn);border-radius:999px;max-width:360px;width:100%}
.klant label{cursor:pointer}
.klant input{position:absolute;opacity:0;width:1px;height:1px}
.klant span{display:block;text-align:center;padding:10px 14px;border-radius:999px;font-weight:700;color:var(--grijs);transition:.15s}
.klant input:checked+span{background:var(--oranje-d);color:#fff}
.klant input:focus-visible+span{outline:2px solid var(--navy);outline-offset:2px}
.bedrijf{display:none}
.off-form:has(input[name=klant][value="Zakelijk"]:checked) .bedrijf,.off-form:has(input[name=klant][value="Business"]:checked) .bedrijf{display:flex}
.keuzes label.keuze{padding:16px 14px}
.keuze .k-v{top:7px;right:7px;transform:none;width:18px;height:18px}
.keuze .k-tx{font-size:.95rem;overflow-wrap:normal;word-break:normal;hyphens:auto}
.keuzes label.keuze{padding:16px 12px;gap:8px}
.keuze .k-ic,.keuze .k-ic svg{width:22px;height:22px}
.keuze .k-tx{font-size:.92rem;hyphens:manual}
@media (max-width:640px){.keuze .k-v{width:15px;height:15px;top:4px;right:4px}.keuze .k-v svg{width:9px;height:9px}.keuze .k-tx{font-size:.88rem}.keuzes label.keuze{padding:16px 10px}}
/* werkgebied-kaart */
.kaart-wrap{position:relative;max-width:620px;margin:40px auto 0}
.nl-kaart{width:100%;height:auto;overflow:visible}
.nl-kaart .prov{fill:var(--oranje);stroke:#fff;stroke-width:2;stroke-linejoin:round;transition:fill .2s;cursor:pointer}
.nl-kaart a:nth-child(odd) .prov{fill:#F7B457}
.nl-kaart a:hover .prov,.nl-kaart a:focus .prov{fill:var(--navy)}
.nl-kaart a:focus{outline:none}
.nl-kaart .labels text{font-family:'Urbanist',sans-serif;font-size:15px;font-weight:800;fill:var(--navy);text-anchor:middle;pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.55);stroke-width:3px}
.kaart-badge{position:absolute;left:0;bottom:3%;pointer-events:none;z-index:2;background:var(--navy);color:#cfd3dd;padding:16px 18px;border-radius:6px;text-align:left;box-shadow:0 14px 34px rgba(20,27,45,.2);border-left:4px solid var(--oranje)}
.kaart-badge b{display:block;color:#fff;font-size:1.5rem;font-weight:800;line-height:1.1}
.kaart-badge span{font-size:.88rem}
.kaart-bron{font-size:.72rem;color:var(--grijs);text-align:right;margin-top:6px}
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prov-k{background:#fff;border:1px solid var(--lijn);border-top:4px solid var(--oranje);border-radius:4px;padding:22px 22px 20px;scroll-margin-top:100px}
.prov-k:target{box-shadow:0 0 0 3px var(--oranje)}
.prov-k h3{display:flex;align-items:center;gap:8px;font-size:1.25rem}
.prov-k h3 svg{width:22px;height:22px;color:var(--oranje-d)}
.prov-k .klein{margin:8px 0 10px}
.prov-k ul{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.prov-k li{background:var(--bg);border:1px solid var(--lijn);border-radius:999px;padding:5px 11px;font-size:.88rem;font-weight:600;color:var(--navy)}
.wg-strip{padding:72px 0;background:#fff}
.wg-in{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center}
.wg-kaart{max-width:360px;margin:0 auto;position:relative}
.wg-kaart::before{content:"";position:absolute;inset:12% -6% -4% 18%;background:var(--navy);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);border-radius:6px;z-index:0}
.wg-kaart .nl-kaart{position:relative;z-index:1}
.wg-kaart .prov{cursor:default}
.wg-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 26px}
.wg-chips li{padding:6px 12px;border-radius:999px;background:var(--oranje-l);color:var(--oranje-d);font-weight:700;font-size:.88rem}
@media (max-width:1020px){.prov-grid{grid-template-columns:1fr 1fr}.wg-in{grid-template-columns:1fr}}
@media (max-width:640px){.prov-grid{grid-template-columns:1fr}.nl-kaart .labels text{font-size:19px}.kaart-badge{position:static;margin:0 auto 18px;display:inline-block}.wg-kaart{max-width:280px}}
.dls{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.dl{min-width:0}
.dl span:nth-child(2){overflow-wrap:anywhere}
/* hero met echte foto */
.hero-beeld{align-items:center;padding:20px 0 34px}
.hero-foto{position:relative;z-index:2;width:min(400px,78%);margin:0 0 0 auto}
.hero-foto img{width:100%;height:auto;aspect-ratio:900/1176;object-fit:cover;border-radius:8px;box-shadow:0 24px 50px rgba(20,27,45,.28);border:6px solid #fff}
.hero-beeld .vlak{inset:0 0 0 18%}
.hero-beeld .zwevend.z1{left:0;top:auto;bottom:70px}
.hero-beeld .zwevend.z2{right:auto;left:8%;top:40px}
@media (max-width:1020px){.hero-foto{margin:0 auto}.hero-beeld .vlak{inset:30px 0 0 10%}}
@media (max-width:640px){.hero-foto{width:82%}.hero-beeld .zwevend.z1{left:0;bottom:40px}.hero-beeld{min-height:0}}
@media (max-width:640px){.hero-beeld .zwevend.z1{top:36px;bottom:auto;left:0}}
/* CTA met getekend huis */
.cta{padding:0}
.cta .wrap.cta-in{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:end}
.cta-tekst{padding:70px 0}
.cta-tekst p{margin:10px 0 24px}
.cta-huis{align-self:end;display:flex;justify-content:center;padding-top:36px}
.cta-huis svg.huis{width:min(360px,100%);height:auto;filter:drop-shadow(0 18px 30px rgba(0,0,0,.25));margin-bottom:-1px}
@media (max-width:1020px){.cta .wrap.cta-in{grid-template-columns:1fr}.cta-tekst{padding:56px 0 0}.cta-huis{padding-top:10px}.cta-huis svg.huis{width:260px}}
.cta-huis svg.huis polygon:first-of-type,.cta-huis svg.huis rect:first-of-type{fill:#2E3A57}
/* telefoon-icoonknoppen */
.btn-ic{width:50px;height:50px;padding:0;background:#fff;border:1.5px solid var(--lijn);color:var(--oranje-d);flex-shrink:0}
.btn-ic svg{width:22px;height:22px}
.btn-ic:hover{border-color:var(--oranje-d);background:var(--oranje-l)}
.btn-ic-o{background:var(--oranje);border-color:var(--oranje);color:var(--navy)}
.btn-ic-o:hover{background:var(--oranje-d);border-color:var(--oranje-d);color:var(--navy)}
.knoppen{align-items:center}
.zij-knoppen{display:flex;gap:10px;align-items:center;margin-top:12px;position:relative;z-index:2}
.top-ic{display:flex;gap:8px;align-items:center}
.top-ic a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;transition:.15s}
.top-ic a svg{width:15px;height:15px}
.top-ic .t-bel{background:var(--oranje);color:var(--navy)}
.top-ic .t-wa{background:#25D366;color:#fff}
.top-ic a:hover{transform:scale(1.08)}
.top .wrap{align-items:center;padding-top:6px;padding-bottom:6px}
@media (max-width:640px){.top .wrap{justify-content:space-between}.top span.verberg{display:block;font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}}
.f-ic{display:inline-flex;align-items:center;gap:8px}
.f-ic svg{width:16px;height:16px;color:var(--oranje)}
@media (max-width:640px){.top .wrap{justify-content:flex-end}}
.hero .btn-ic,.pkop .btn-ic{width:58px;height:58px;border-radius:8px;border-width:2px}
.hero .btn-ic svg,.pkop .btn-ic svg{width:27px;height:27px;stroke-width:2}
/* topbalk-knoppen met tekst */
.top-ic{gap:8px}
.top-ic a{width:auto;height:auto;border-radius:999px;display:inline-flex;align-items:center;gap:7px;padding:6px 14px;font-weight:800;font-size:.86rem;line-height:1}
.top-ic a svg{width:15px;height:15px;stroke-width:2.2}
.top-ic .t-bel{background:var(--oranje);color:var(--navy)}
.top-ic .t-bel:hover{background:#fff}
.top-ic .t-wa{background:#25D366;color:#fff}
.top-ic a:hover{transform:none}
@media (max-width:640px){.top .wrap{justify-content:center}.top-ic{width:100%;display:grid;grid-template-columns:1fr 1fr}.top-ic a{justify-content:center;padding:8px 10px}}
/* liggende foto's */
.foto-breed img{aspect-ratio:auto;height:auto}
.twee-top .foto-breed{max-width:560px}
.kaart.met-foto{padding-top:0}
.kaart-foto{margin:0 -26px 18px;overflow:hidden}
.kaart-foto img{width:100%;height:190px;object-fit:cover;display:block}
.kaart.met-foto .ic{margin-top:-44px;position:relative;z-index:2;background:#fff;box-shadow:0 6px 16px rgba(20,27,45,.12)}
/* plaatspagina's */
.stad-sec{margin-top:26px}
.stad-sec h3{font-size:1.15rem;margin-bottom:2px}
.stad-kernen{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px}
.stad-kernen li{background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:5px 11px;font-size:.86rem;font-weight:600;color:var(--navy)}
a.kaart{display:block;color:inherit}
.buren{display:flex;flex-wrap:wrap;gap:10px}
.buren a{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;background:#fff;border:1.5px solid var(--lijn);border-radius:4px;font-weight:700;color:var(--navy)}
.buren a:hover{border-color:var(--oranje)}
.buren svg{width:18px;height:18px;color:var(--oranje-d)}
.prov-k li.link{background:var(--oranje-l);border-color:var(--oranje)}
.prov-k li.link a{color:var(--oranje-d)}
/* Google Bedrijfsprofiel */
.g-logo{width:20px;height:20px;flex-shrink:0}
.btn-g{background:#fff;color:var(--navy);border:1.5px solid #fff}
.btn-g:hover{background:var(--oranje-l)}
.g-rij{margin-top:14px}
.g-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:700;color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.hero-foto.hero-breed{width:min(560px,96%)}
.hero-foto.hero-breed img{aspect-ratio:800/520}
.hero-beeld .vlak{inset:10% 0 6% 14%}
.hero-beeld .zwevend.z2{left:auto;right:-6px;top:20px}
.hero-beeld .zwevend.z1{left:0;bottom:30px;top:auto}
@media (max-width:640px){.hero-foto.hero-breed{width:100%}.hero-beeld .zwevend.z1{left:0;top:auto;bottom:-6px}.hero-beeld{padding-bottom:50px}}
/* v2: rustiger, informatiever */
.top{font-size:.84rem}
.top .wrap{justify-content:center}
.btn-l-d{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.btn-l-d:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px}
.bj-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:44px}
.bj{background:#fff;border:1px solid var(--lijn);border-top:4px solid var(--oranje);border-radius:4px;padding:24px 22px}
.bj-jaar{display:inline-block;font-weight:800;font-size:.85rem;color:var(--oranje-d);background:var(--oranje-l);padding:5px 10px;border-radius:999px;margin-bottom:12px}
.bj h3{margin-bottom:6px}
.bj p{color:var(--grijs);font-size:.95rem}
.bj-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.bj-tags a{font-size:.82rem;font-weight:700;color:var(--navy);border:1px solid var(--lijn);border-radius:999px;padding:4px 10px}
.bj-tags a:hover{border-color:var(--oranje)}
.sub-strip{padding:56px 0}
.sub-in{display:grid;grid-template-columns:auto 1fr auto;gap:28px;align-items:center;background:var(--navy);color:#cfd3dd;border-radius:6px;padding:36px 40px;position:relative;overflow:hidden}
.sub-in h2{color:#fff;font-size:clamp(1.5rem,3vw,2rem)}
.sub-in p{margin-top:8px;max-width:620px}
.sub-in .btn-n{background:var(--oranje);color:var(--navy)}
.sub-ic{width:64px;height:64px;border-radius:50%;background:rgba(250,166,54,.15);display:grid;place-items:center;color:var(--oranje)}
.sub-ic svg{width:32px;height:32px}
.nl-kaart .prov{fill:#F3E3CC}
.nl-kaart a:nth-child(odd) .prov{fill:#EFDCC0}
.nl-kaart .prov.accent,.nl-kaart a:nth-child(odd) .prov.accent{fill:var(--oranje)}
.nl-kaart a:hover .prov{fill:var(--navy)}
.wg-kaart::before{background:var(--navy)}
.wg-chips li.licht{background:#fff;border:1px dashed var(--oranje);}
.prov-k:not(.accent){border-top-color:var(--lijn)}
.prov-k.accent{border-top-color:var(--oranje)}
@media (max-width:1020px){.grid4,.bj-grid{grid-template-columns:1fr 1fr}.sub-in{grid-template-columns:1fr;text-align:left}}
@media (max-width:640px){.grid4,.bj-grid,.grid2{grid-template-columns:1fr}.sub-in{padding:28px 22px}}
@media (max-width:640px){.top span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.76rem}}
@media (max-width:640px){.twee{gap:22px}}
.prov-k li.link2{padding:0;background:var(--bg)}
.prov-k li.link2 a{display:block;padding:5px 11px;color:var(--navy)}
.prov-k li.link2:hover{border-color:var(--oranje)}
.smal{max-width:760px}
.hero-foto img{aspect-ratio:1000/1339}
/* bouwjaar-kaarten leesbaarder */
.bj{display:flex;flex-direction:column}
.bj-jaar{align-self:flex-start;font-size:.8rem;letter-spacing:.02em}
.bj h3{font-size:1.15rem;line-height:1.3}
.bj p{font-size:1rem;line-height:1.65;color:var(--tekst)}
.bj-adv{margin-top:16px;font-weight:700;color:var(--navy)!important;font-size:.92rem!important}
.bj-lijst{list-style:none;display:grid;gap:6px;margin-top:8px}
.bj-lijst a{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--navy);font-size:.95rem}
.bj-lijst a:hover{color:var(--oranje-d)}
.bj-lijst svg{width:16px;height:16px;color:var(--oranje-d);flex-shrink:0}
.foto-vk img{aspect-ratio:1/1}
/* m2 per isolatie */
.m2-blok{gap:10px}
.m2-titel{font-weight:700;color:var(--navy);font-size:.95rem}
.m2-rij{display:grid;grid-template-columns:1fr 200px;gap:12px;align-items:center;background:var(--oranje-l);border:1.5px solid var(--oranje);border-radius:4px;padding:10px 12px}
.m2-rij[hidden],.m2-leeg[hidden],.m2-hint[hidden]{display:none}
.m2-rij label{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--navy);font-size:.95rem}
.m2-rij .k-ic{color:var(--oranje-d);display:inline-flex}
.m2-rij .k-ic svg{width:18px;height:18px}
.m2-rij input{background:#fff}
@media (max-width:640px){.m2-rij{grid-template-columns:1fr}}