/* Vosbouw ontwerpvoorstel, Foresttree */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/archivo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/archivo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --blauw:#004b8f;
  --blauw-d:#003a70;
  --navy:#00235a;
  --rood:#c8301a;
  --rood-d:#a82814;
  --ink:#0d1b2e;
  --tekst:#3a4a5e;
  --licht:#f2f5f9;
  --lijn:#dde4ec;
  --wit:#fff;
  --r:14px;
  --max:1200px;
  --schaduw:0 1px 2px rgba(0,35,90,.06),0 8px 24px rgba(0,35,90,.08);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--wit);color:var(--tekst);font:400 17px/1.6 'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--blauw)}
h1,h2,h3{color:var(--ink);line-height:1.08;margin:0 0 .5em;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.6vw,4.4rem);font-weight:900}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-weight:850}
h3{font-size:1.2rem;font-weight:750;letter-spacing:0}
p{margin:0 0 1em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--rood);outline-offset:3px;border-radius:4px}

/* knoppen */
.btn{display:inline-flex;align-items:center;gap:.55em;font:700 1rem/1 'Archivo',sans-serif;padding:17px 26px;border-radius:999px;text-decoration:none;border:2px solid transparent;transition:transform .2s,background .2s,box-shadow .2s;cursor:pointer;white-space:nowrap}
.btn svg{width:18px;height:18px;flex:none}
.btn-rood{background:var(--rood);color:#fff;box-shadow:0 6px 18px rgba(200,48,26,.28)}
.btn-rood:hover{background:var(--rood-d);transform:translateY(-2px)}
.btn-rand{border-color:var(--navy);color:var(--navy);background:#fff}
.btn-rand:hover{background:var(--navy);color:#fff}
.btn-wit{background:#fff;color:var(--navy)}
.btn-wit:hover{transform:translateY(-2px)}

/* topbalk + nav */
.topbalk{background:var(--navy);color:#dfe8f3;font-size:.9rem}
.topbalk .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.topbalk a{color:#fff;text-decoration:none;font-weight:600}
.topbalk span{display:inline-flex;align-items:center;gap:6px}
.topbalk svg{width:15px;height:15px}
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--lijn)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:20px}
.nav-logo{width:150px;height:auto}
.nav-links{display:flex;gap:28px}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem}
.nav-links a:hover{color:var(--blauw)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:13px 20px}
.burger{display:none;background:none;border:0;padding:8px;color:var(--ink);cursor:pointer}
.burger svg{width:28px;height:28px}
.mmenu{display:none}

/* hero */
.hero{position:relative;padding:56px 0 72px;background:linear-gradient(180deg,var(--licht) 0%,#fff 100%)}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero h1 span{color:var(--blauw)}
.hero-lead{font-size:1.2rem;color:var(--tekst);max-width:34em;margin-bottom:1.6em}
.hero-knoppen{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:34px}
.feiten{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--lijn);padding-top:22px;margin:0}
.feiten div{padding-right:14px}
.feiten dt{font-weight:900;font-size:1.7rem;color:var(--navy);line-height:1.1}
.feiten dd{margin:4px 0 0;font-size:.92rem;line-height:1.4}
.hero-beeld{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 24px 60px rgba(0,35,90,.22);aspect-ratio:4/3;background:var(--lijn)}
.hero-beeld img{width:100%;height:100%;object-fit:cover}
.hero-label{position:absolute;left:16px;bottom:16px;right:16px;display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.95);border-radius:12px;padding:12px 16px;font-size:.92rem;color:var(--ink);box-shadow:var(--schaduw)}
.hero-label b{display:block}
.hero-label svg{width:34px;height:34px;flex:none;color:var(--blauw)}

/* kort antwoord (AI-blok) */
.kort{padding:0 0 24px}
.kort-kaart{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;background:var(--navy);color:#dbe6f3;border-radius:22px;padding:36px 40px}
.kort-kaart svg{width:48px;height:48px;color:#fff;opacity:.9}
.kort-kaart h2{color:#fff;font-size:1.5rem;margin-bottom:.4em}
.kort-kaart p{margin:0;font-size:1.08rem;line-height:1.65}
.kort-kaart strong{color:#fff}

/* secties */
.sectie{padding:96px 0}
.sectie-licht{background:var(--licht)}
.kop{max-width:720px;margin-bottom:48px}
.kop p{font-size:1.15rem}
.kop-rij{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;max-width:none}
.kop-rij > div{max-width:680px}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.dienst{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:28px 24px 24px;text-decoration:none;color:var(--tekst);transition:transform .25s,box-shadow .25s,border-color .25s}
.dienst:hover{transform:translateY(-4px);box-shadow:var(--schaduw);border-color:#c4d3e4}
.dienst .ico{width:52px;height:52px;border-radius:14px;background:var(--licht);display:grid;place-items:center;margin-bottom:18px;color:var(--blauw);transition:background .25s,color .25s}
.dienst:hover .ico{background:var(--blauw);color:#fff}
.dienst .ico svg{width:28px;height:28px}
.dienst h3{margin-bottom:.35em}
.dienst p{font-size:.96rem;margin-bottom:1.2em;flex:1}
.dienst .meer{font-weight:700;color:var(--blauw);font-size:.95rem;display:inline-flex;align-items:center;gap:6px}
.dienst .meer svg{width:16px;height:16px;transition:transform .2s}
.dienst:hover .meer svg{transform:translateX(4px)}

/* projecten */
.projecten{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:260px;gap:16px}
.project{position:relative;border-radius:var(--r);overflow:hidden;background:var(--lijn);margin:0}
.project img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.project:hover img{transform:scale(1.04)}
.project figcaption{position:absolute;inset:auto 0 0 0;padding:44px 20px 18px;background:linear-gradient(180deg,rgba(0,20,50,0) 0%,rgba(0,20,50,.82) 100%);color:#fff}
.project figcaption b{display:block;font-size:1.12rem}
.project figcaption span{font-size:.9rem;opacity:.9}
.p1{grid-column:span 7;grid-row:span 2}
.p2{grid-column:span 5}
.p3{grid-column:span 5}
.p4{grid-column:span 4}
.p5{grid-column:span 4}
.p6{grid-column:span 4}

/* onder een dak */
.dak{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.dak-beeld{border-radius:22px;overflow:hidden;aspect-ratio:3/4;max-height:620px;background:var(--lijn)}
.dak-beeld img{width:100%;height:100%;object-fit:cover}
.partners{display:grid;gap:14px;margin:28px 0 32px}
.partner{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:20px}
.partner .ico{width:46px;height:46px;flex:none;border-radius:12px;background:var(--licht);display:grid;place-items:center;color:var(--blauw)}
.partner .ico svg{width:24px;height:24px}
.partner h3{font-size:1.08rem;margin:0 0 .2em}
.partner p{margin:0;font-size:.96rem}

/* werkwijze */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:stap}
.stap{position:relative;background:#fff;border-radius:var(--r);padding:30px 24px;border:1px solid var(--lijn)}
.stap::before{counter-increment:stap;content:counter(stap);display:grid;place-items:center;width:44px;height:44px;border-radius:6px;background:var(--navy);color:#fff;font-weight:800;margin-bottom:18px}
.stap p{margin:0;font-size:.96rem}

/* tijdlijn */
.tijdlijn{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:12px}
.tijdlijn::before{content:"";position:absolute;left:0;right:0;top:27px;height:2px;background:var(--lijn)}
.jaar{position:relative;padding-right:24px}
.jaar b{position:relative;display:inline-block;background:#fff;color:var(--blauw);font-weight:900;font-size:1.9rem;padding-right:12px;line-height:56px}
.jaar h3{font-size:1.05rem;margin:.4em 0 .3em}
.jaar p{font-size:.95rem;margin:0}

/* werkgebied */
.gebied{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.plaatsen{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.plaatsen li{background:#fff;border:1px solid var(--lijn);border-radius:999px;padding:9px 16px;font-weight:600;color:var(--ink);font-size:.95rem}
.plaatsen li.hoofd{background:var(--blauw);border-color:var(--blauw);color:#fff}
.bezoek{border-radius:22px;overflow:hidden;position:relative;aspect-ratio:4/3;background:var(--lijn)}
.bezoek img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}

/* faq */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:start}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:700;color:var(--ink);font-size:1.08rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:22px;height:22px;flex:none;color:var(--blauw);transition:transform .25s}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{margin:0 0 22px;max-width:44em}

/* kennisbank */
.artikelen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.artikel{display:flex;flex-direction:column;justify-content:space-between;min-height:210px;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px;text-decoration:none;color:var(--tekst);transition:transform .25s,box-shadow .25s}
.artikel:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.artikel time{font-size:.88rem;font-weight:600;color:var(--blauw)}
.artikel h3{margin:.5em 0 1em;font-size:1.15rem;line-height:1.3}
.artikel .meer{font-weight:700;color:var(--blauw);font-size:.95rem}

/* offerte */
.offerte{background:var(--navy);color:#dbe6f3;border-radius:28px;padding:64px;display:grid;grid-template-columns:1fr 1fr;gap:56px;position:relative;overflow:hidden}
.offerte h2{color:#fff}
.offerte p{font-size:1.1rem}
.contactlijst{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:16px}
.contactlijst li{display:flex;gap:14px;align-items:center}
.contactlijst .ico{width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.1);display:grid;place-items:center;flex:none}
.contactlijst svg{width:22px;height:22px;color:#fff}
.contactlijst a{color:#fff;font-weight:700;text-decoration:none}
.contactlijst small{display:block;color:#b8c8dc;font-size:.88rem}
.form{position:relative;z-index:1;background:#fff;border-radius:18px;padding:30px;color:var(--tekst)}
.form h3{margin-bottom:.8em}
.veld{display:grid;gap:6px;margin-bottom:14px}
.veld label{font-weight:600;font-size:.92rem;color:var(--ink)}
.veld input,.veld select,.veld textarea{font:inherit;font-size:1rem;padding:13px 14px;border:1.5px solid var(--lijn);border-radius:10px;background:#fff;color:var(--ink);width:100%}
.veld input:focus,.veld select:focus,.veld textarea:focus{border-color:var(--blauw);outline:none;box-shadow:0 0 0 3px rgba(0,75,143,.15)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form-noot{font-size:.85rem;margin:12px 0 0;text-align:center}
.form-ok{display:none;background:var(--licht);border-radius:10px;padding:14px;margin-top:12px;color:var(--ink);font-weight:600}

/* footer */
.footer{background:#071a36;color:#b8c8dc;padding:64px 0 28px;margin-top:96px;font-size:.95rem}
.footer .wrap > .kolommen{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:36px}
.footer h3{color:#fff;font-size:1rem;margin-bottom:1em}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.footer a{color:#dbe6f3;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline}
.footer-logo{background:#fff;border-radius:12px;padding:12px 14px;display:inline-block;margin-bottom:18px}
.footer-logo img{width:150px}
.footer-onder{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid rgba(255,255,255,.12);margin-top:48px;padding-top:24px;font-size:.88rem}

/* mobiele belbalk */
.belbalk{display:none}

/* verschijnen bij scrollen */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* responsief */
@media (max-width:1080px){
  .diensten{grid-template-columns:repeat(2,1fr)}
  .stappen{grid-template-columns:repeat(2,1fr)}
  .nav-links{gap:20px}
}
@media (max-width:900px){
  .nav-links,.nav-cta .btn-rand{display:none}
  .burger{display:block}
  .mmenu{position:fixed;inset:78px 0 auto 0;z-index:49;background:#fff;border-bottom:1px solid var(--lijn);padding:12px 24px 24px;flex-direction:column;box-shadow:var(--schaduw)}
  .mmenu.open{display:flex}
  .mmenu a{padding:14px 0;border-bottom:1px solid var(--lijn);color:var(--ink);font-weight:700;text-decoration:none;font-size:1.1rem}
  .mmenu .btn{margin-top:16px;justify-content:center;border-bottom:0}
  .hero .wrap,.dak,.gebied,.faq,.offerte{grid-template-columns:1fr}
  .hero{padding-top:32px}
  .dak-beeld{aspect-ratio:4/3}
  .kort-kaart{grid-template-columns:1fr;padding:28px}
  .projecten{grid-template-columns:1fr 1fr;grid-auto-rows:220px}
  .p1{grid-column:span 2;grid-row:span 1}
  .p2,.p3,.p4,.p5,.p6{grid-column:span 1}
  .tijdlijn{grid-template-columns:1fr 1fr;row-gap:28px}
  .tijdlijn::before{display:none}
  .artikelen{grid-template-columns:1fr}
  .offerte{padding:36px 24px}
  .footer .wrap > .kolommen{grid-template-columns:1fr 1fr}
  .sectie{padding:72px 0}
}
@media (max-width:600px){
  body{font-size:16px;padding-bottom:calc(88px + env(safe-area-inset-bottom))}
  .wrap{padding:0 16px}
  .topbalk .uren{display:none}
  .nav .wrap{height:68px}
  .mmenu{inset:68px 0 auto 0}
  .nav-logo{width:124px}
  .nav-cta .btn-rood{display:none}
  .feiten dt{font-size:1.35rem}
  .diensten,.stappen{grid-template-columns:1fr}
  .projecten{grid-template-columns:1fr;grid-auto-rows:240px}
  .p1{grid-column:span 1}
  .veld-rij{grid-template-columns:1fr}
  .footer .wrap > .kolommen{grid-template-columns:1fr}
  .belbalk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid var(--lijn);padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
  .belbalk .btn{justify-content:center;padding:14px 6px;font-size:.95rem;gap:.4em}
}

/* werkgebied-kaart */
.bezoek{background:#fff;border:1px solid var(--lijn);display:grid;place-items:center;padding:12px}
.kaart{width:100%;height:100%;font-family:'Archivo',sans-serif}
.kaart .ring{fill:none;stroke:var(--lijn);stroke-width:1.5;stroke-dasharray:4 6}
.kaart .lijn{stroke:#c4d3e4;stroke-width:1.5}
.kaart .punt{fill:#fff;stroke:var(--blauw);stroke-width:3}
.kaart .hoofdpunt{fill:var(--rood);stroke:#fff;stroke-width:4}
.kaart .naam{font-size:15px;font-weight:700;fill:var(--ink)}
.kaart .hoofdnaam{font-size:20px;font-weight:900;fill:var(--navy)}
@media (max-width:900px){
  .hero-beeld{order:0;aspect-ratio:16/10}
  .hero-label{left:10px;right:10px;bottom:10px;padding:10px 12px;font-size:.85rem}
  .hero-label svg{width:26px;height:26px}
}
.kaart .route{fill:none;stroke:var(--blauw);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.25}
.kaart .naam.groot{font-size:18px;font-weight:900;fill:var(--navy)}
.bezoek{aspect-ratio:auto;min-height:420px}
.kaart{max-height:560px}

/* ============ BREED: rand tot rand ============ */
:root{--max:1560px;--pad:clamp(20px,4vw,72px)}
.wrap{padding:0 var(--pad)}
.topbalk .wrap,.nav .wrap{max-width:none}
.kop{max-width:860px}
.kop-rij > div{max-width:820px}

/* hero: twee helften, foto tot de rechterrand */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:stretch;padding:0;min-height:min(calc(100vh - 118px),860px);background:var(--licht)}
.hero-tekst{align-self:center;padding:72px clamp(28px,4vw,80px) 72px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)))}
.hero h1{font-size:clamp(2.6rem,5.4vw,5.6rem)}
.hero-lead{font-size:clamp(1.1rem,1.3vw,1.3rem)}
.hero-beeld{border-radius:0;box-shadow:none;aspect-ratio:auto;height:100%;min-height:520px}
.hero-label{left:auto;right:28px;bottom:28px;max-width:360px}

/* kort-blok als brede band */
.kort{padding:0;background:var(--navy)}
.kort-kaart{border-radius:0;padding-top:48px;padding-bottom:48px;max-width:var(--max)}
.kort-kaart p{font-size:clamp(1.05rem,1.2vw,1.2rem);max-width:none}

/* diensten breder: 4 kolommen, ruimere kaarten */
.dienst{padding:34px 30px 30px}

/* projecten rand tot rand */
.projecten{padding:0 8px;gap:8px;grid-auto-rows:clamp(240px,22vw,380px)}
.project{border-radius:6px}
#projecten{padding-bottom:8px}

/* onder een dak: foto tot de linkerrand */
.sectie-dak{padding:0}
.dak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch}
.dak-beeld{border-radius:0;aspect-ratio:auto;max-height:none;min-height:640px}
.dak-tekst{align-self:center;padding:96px max(var(--pad),calc((100vw - var(--max))/2 + var(--pad))) 96px clamp(32px,5vw,96px)}
.partners{grid-template-columns:1fr 1fr 1fr}
.partner{flex-direction:column}

/* werkgebied en faq breder */
.gebied,.faq{gap:clamp(40px,6vw,120px)}

/* offerte als volle band */
.offerte-band{background:var(--navy);position:relative;overflow:hidden;margin-top:0}
.offerte{background:none;border-radius:0;padding-top:96px;padding-bottom:96px;grid-template-columns:1fr minmax(0,560px);gap:clamp(40px,6vw,120px);overflow:visible}
.footer{margin-top:0}

@media (max-width:1180px){
  .partners{grid-template-columns:1fr}
  .partner{flex-direction:row}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero-tekst{padding:40px var(--pad) 32px}
  .hero-beeld{min-height:0;aspect-ratio:16/10;height:auto}
  .hero-label{left:10px;right:10px;max-width:none}
  .dak{grid-template-columns:1fr}
  .dak-beeld{min-height:0;aspect-ratio:4/3}
  .dak-tekst{padding:56px var(--pad)}
  .offerte{grid-template-columns:1fr;padding-top:64px;padding-bottom:64px}
  .projecten{grid-auto-rows:220px}
}
@media (max-width:600px){
  .projecten{grid-auto-rows:240px}
}
.kop.kop-rij{max-width:none}

/* ============ SUBPAGINA'S ============ */
.nav-links a[aria-current="page"]{color:var(--blauw);box-shadow:inset 0 -3px 0 var(--rood);padding-bottom:6px}
.kruimels{background:#fff;border-bottom:1px solid var(--lijn);font-size:.9rem}
.kruimels .wrap{padding-top:12px;padding-bottom:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:#56657a}
.kruimels a{color:var(--tekst);text-decoration:none}
.kruimels a:hover{color:var(--blauw);text-decoration:underline}
.kruimels [aria-current]{color:var(--ink);font-weight:600}

/* paginakop zonder foto */
.paginakop{background:var(--navy);color:#dbe6f3;padding:clamp(56px,7vw,110px) 0 clamp(48px,6vw,90px);position:relative;overflow:hidden}
.paginakop h1{color:#fff;font-size:clamp(2.4rem,5vw,4.6rem);margin-bottom:.3em;position:relative;z-index:1}
.paginakop p{font-size:clamp(1.05rem,1.4vw,1.3rem);max-width:46em;margin:0;position:relative;z-index:1}
/* dakfoto rechts in de blauwe banden, vaagt naar links weg in het navy zodat de tekst leesbaar blijft */
.bandfoto{position:absolute;top:0;right:0;bottom:0;width:min(58%,880px);pointer-events:none}
.bandfoto img{width:100%;height:100%;object-fit:cover;display:block}
.bandfoto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy) 0%,rgba(0,35,90,.84) 28%,rgba(0,35,90,.45) 65%,rgba(0,35,90,.25) 100%)}
@media (max-width:900px){.bandfoto{width:100%}.bandfoto::after{background:linear-gradient(180deg,rgba(0,35,90,.9) 0%,rgba(0,35,90,.8) 100%)}}

/* hero op dienstpagina's */
.hero-pagina{min-height:min(calc(100vh - 160px),760px)}
.hero-pagina h1{font-size:clamp(2.4rem,4.6vw,4.8rem)}
.vinkjes{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px}
.vinkjes li{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:1.05rem}
.vinkjes svg{width:24px;height:24px;flex:none;padding:4px;border-radius:6px;background:var(--blauw);color:#fff;margin-top:1px}
.impressie{position:absolute;right:16px;top:16px;background:rgba(0,20,50,.62);color:#fff;font-size:.78rem;font-weight:600;padding:5px 10px;border-radius:999px;letter-spacing:.02em;backdrop-filter:blur(6px)}
.hero-beeld{position:relative}

/* blokken met nummer */
.blokken{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
.blok{background:var(--licht);border-radius:var(--r);padding:clamp(28px,3vw,44px)}
.blok .nr{display:block;font-weight:900;font-size:2.6rem;line-height:1;color:var(--blauw);opacity:.22;margin-bottom:18px}
.blok h3{font-size:1.3rem}
.blok p{margin:0}

/* echte foto's */
.fotorij{display:grid;gap:10px;grid-auto-rows:clamp(260px,26vw,440px)}
.fotorij.n1{grid-template-columns:minmax(0,560px)}
.fotorij.n2{grid-template-columns:1fr 1fr}
.fotorij .project{grid-column:auto;grid-row:auto}

/* diensten in drie kolommen */
.diensten.drie{grid-template-columns:repeat(3,1fr)}

/* diensten-overzicht */
.sectie-kaarten{padding-top:clamp(40px,5vw,72px)}
.dkaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}
.dkaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--tekst);transition:transform .25s,box-shadow .25s}
.dkaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.dkaart-beeld{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--lijn)}
.dkaart-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.dkaart:hover .dkaart-beeld img{transform:scale(1.05)}
.dkaart-tekst{display:flex;flex-direction:column;flex:1;padding:24px 24px 26px;position:relative}
.dkaart .ico{position:absolute;top:-26px;left:24px;width:52px;height:52px;border-radius:14px;background:var(--blauw);color:#fff;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,35,90,.25)}
.dkaart .ico svg{width:26px;height:26px}
.dkaart h2{font-size:1.35rem;margin:18px 0 .4em}
.dkaart p{font-size:.96rem;flex:1}
.dkaart .meer{font-weight:700;color:var(--blauw);display:inline-flex;gap:6px;align-items:center}
.dkaart .meer svg{width:16px;height:16px}

/* cta-band */
.cta-band{background:var(--navy);color:#dbe6f3;position:relative;overflow:hidden}
.cta-in{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:clamp(56px,6vw,88px);padding-bottom:clamp(56px,6vw,88px);position:relative;z-index:1}
.cta-in h2{color:#fff;margin-bottom:.3em}
.cta-in p{margin:0;font-size:1.12rem;max-width:40em}
.cta-knoppen{display:flex;gap:12px;flex-wrap:wrap}

/* over ons */
.mensen{display:grid;grid-template-columns:repeat(2,minmax(0,420px));gap:18px}
.mens{display:flex;gap:18px;align-items:center;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:24px}
.avatar{width:64px;height:64px;border-radius:6px;background:var(--blauw);color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.2rem;flex:none}
.avatar svg{width:30px;height:30px}
.mens h3{margin:0 0 .15em}
.mens p{margin:0}
.sectie .partners{grid-template-columns:repeat(3,1fr);margin:0}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,96px);align-items:start}
.contactkaarten{display:grid;gap:14px}
.ckaart{display:flex;gap:18px;align-items:flex-start;background:var(--licht);border-radius:var(--r);padding:24px 26px;text-decoration:none;color:var(--tekst);transition:background .2s}
a.ckaart:hover{background:#e6edf5}
.ckaart .ico{width:50px;height:50px;border-radius:12px;background:var(--blauw);color:#fff;display:grid;place-items:center;flex:none}
.ckaart .ico svg{width:24px;height:24px}
.ckaart small{display:block;font-size:.88rem;margin-bottom:2px}
.ckaart b{display:block;color:var(--ink);font-size:1.12rem;line-height:1.35}
.ckaart em{display:inline-flex;gap:6px;align-items:center;font-style:normal;font-weight:700;color:var(--blauw);margin-top:6px;font-size:.95rem}
.ckaart em svg{width:16px;height:16px}
.ckaart em.stil{color:var(--tekst);font-weight:400}
.form-los{border:1px solid var(--lijn);box-shadow:var(--schaduw);padding:clamp(24px,3vw,40px)}
.form-los h2{font-size:1.6rem}

/* offerte stappen */
.offerte-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:start}
.voortgang{list-style:none;padding:0;margin:0 0 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.voortgang li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:#56657a;padding-top:12px;border-top:4px solid var(--lijn)}
.voortgang li span{width:28px;height:28px;border-radius:6px;display:grid;place-items:center;background:var(--lijn);color:var(--ink);font-weight:800;font-size:.9rem;flex:none}
.voortgang li.actief,.voortgang li.klaar{color:var(--ink);border-top-color:var(--blauw)}
.voortgang li.actief span,.voortgang li.klaar span{background:var(--blauw);color:#fff}
.fstap{border:0;padding:0;margin:0;display:none}
.fstap.actief{display:block}
.js .fstap{display:none}.js .fstap.actief{display:block}
html:not(.js) .fstap{display:block}
.label{font-weight:600;font-size:.92rem;color:var(--ink)}
.keuze{display:flex;gap:10px;flex-wrap:wrap}
.keuze label,.chip{position:relative;cursor:pointer}
.keuze input,.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.keuze span,.chip span{display:inline-flex;align-items:center;gap:8px;padding:12px 18px;border:1.5px solid var(--lijn);border-radius:999px;font-weight:600;color:var(--ink);background:#fff;transition:all .15s}
.keuze input:checked+span,.chip input:checked+span{border-color:var(--blauw);background:var(--blauw);color:#fff}
.keuze input:focus-visible+span,.chip input:focus-visible+span{outline:3px solid var(--rood);outline-offset:2px}
.keuze-blok{display:grid;gap:8px}
.keuze-blok span{width:100%;border-radius:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip svg{width:18px;height:18px}
.upload{display:flex;align-items:center;gap:16px;border:2px dashed #c4d3e4;border-radius:14px;padding:26px;cursor:pointer;background:var(--licht);position:relative}
.upload svg{width:34px;height:34px;color:var(--blauw);flex:none}
.upload input{position:absolute;inset:0;opacity:0;cursor:pointer}
.akkoord{display:flex;gap:10px;align-items:flex-start;margin:6px 0 16px;font-size:.95rem}
.akkoord input{width:20px;height:20px;margin-top:2px;accent-color:var(--blauw)}
.stapknoppen{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.stapknoppen .btn{width:auto;margin:0}
.offerte-zij{display:grid;gap:18px;position:sticky;top:100px}
.zijkaart{background:var(--licht);border-radius:var(--r);padding:30px}
.zijkaart h2{font-size:1.3rem}
.zijkaart-donker{background:var(--navy);color:#dbe6f3}
.zijkaart-donker h2{color:#fff}
.zijkaart-donker .btn{width:100%;justify-content:center}
.na-stappen{list-style:none;padding:0;margin:0;display:grid;gap:18px;counter-reset:na}
.na-stappen li{display:grid;grid-template-columns:36px 1fr;gap:4px 14px}
.na-stappen li::before{counter-increment:na;content:counter(na);grid-row:span 2;width:36px;height:36px;border-radius:6px;background:var(--blauw);color:#fff;display:grid;place-items:center;font-weight:800}
.na-stappen b{color:var(--ink)}
.na-stappen span{font-size:.95rem}

/* blog */
.blog-sectie{padding-top:clamp(40px,5vw,72px)}
.blog-uitgelicht{margin-bottom:clamp(20px,2.4vw,32px)}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.bkaart{display:flex;flex-direction:column;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--tekst);transition:transform .25s,box-shadow .25s}
.bkaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw)}
.bkaart-beeld{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--lijn)}
.bkaart-beeld img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.bkaart:hover .bkaart-beeld img{transform:scale(1.04)}
.bkaart-tekst{display:flex;flex-direction:column;flex:1;padding:22px 24px 24px}
.bkaart time{font-size:.88rem;font-weight:600;color:var(--blauw)}
.bkaart .bkop{font-size:1.15rem;line-height:1.3;margin:.45em 0 1em;flex:1}
.bkaart .meer{font-weight:700;color:var(--blauw);display:inline-flex;gap:6px;align-items:center;font-size:.95rem}
.bkaart .meer svg{width:16px;height:16px}
.bkaart-groot{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.bkaart-groot .bkaart-beeld{aspect-ratio:auto;min-height:380px}
.bkaart-groot .bkaart-tekst{padding:clamp(28px,3.4vw,56px);justify-content:center}
.bkaart-groot .bkop{font-size:clamp(1.5rem,2.3vw,2.2rem);flex:0}
.bkaart-groot p{font-size:1.05rem}

/* artikel */
.artikelkop{background:var(--licht);padding:clamp(40px,5vw,80px) 0 clamp(120px,12vw,200px)}
.artikelkop h1{font-size:clamp(2rem,4vw,3.6rem);max-width:22em}
.meta{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0;color:var(--tekst);font-size:.95rem}
.meta span{display:inline-flex;gap:8px;align-items:center}
.meta svg{width:18px;height:18px;color:var(--blauw)}
.artikel-beeld{margin-top:clamp(-180px,-11vw,-100px)}
.artikel-beeld img{width:100%;max-height:620px;object-fit:cover;border-radius:18px;box-shadow:0 24px 60px rgba(0,35,90,.18)}
.artikel-grid{display:grid;grid-template-columns:minmax(0,780px) minmax(0,360px);justify-content:space-between;gap:clamp(32px,5vw,96px);padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(56px,6vw,96px)}
.artikel-tekst{font-size:1.1rem;line-height:1.75;color:#2c3b4f}
.artikel-tekst h2{font-size:clamp(1.5rem,2.3vw,2rem);margin:1.8em 0 .6em;scroll-margin-top:100px}
.artikel-tekst h3{font-size:1.25rem;margin:1.6em 0 .5em}
.artikel-tekst p{margin:0 0 1.2em}
.artikel-tekst ul,.artikel-tekst ol{padding-left:1.3em;margin:0 0 1.4em}
.artikel-tekst li{margin-bottom:.5em}
.artikel-tekst img{border-radius:14px;margin:1.6em 0;width:100%}
.artikel-tekst figure{margin:1.6em 0}
.artikel-tekst a{color:var(--blauw);font-weight:600}
.artikel-tekst blockquote{margin:1.6em 0;padding:24px 28px;background:var(--licht);border-radius:14px;font-size:1.12rem;color:var(--ink)}
.tabel{overflow-x:auto;margin:1.6em 0;border:1px solid var(--lijn);border-radius:14px}
.tabel table{width:100%;border-collapse:collapse;font-size:.98rem;min-width:520px}
.tabel th{background:var(--navy);color:#fff;text-align:left;padding:14px 16px;font-weight:700}
.tabel td{padding:14px 16px;border-top:1px solid var(--lijn);vertical-align:top}
.tabel tr:nth-child(even) td{background:var(--licht)}
.auteur{display:flex;gap:18px;align-items:flex-start;background:var(--licht);border-radius:16px;padding:26px;margin-top:3em}
.auteur b{color:var(--ink);font-size:1.1rem}
.auteur p{margin:.3em 0 0;font-size:1rem}
.artikel-zij{position:sticky;top:100px;align-self:start;display:grid;gap:18px}
.toc{background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:26px}
.toc h2{font-size:1.05rem;display:flex;gap:10px;align-items:center;margin-bottom:.8em}
.toc h2 svg{width:20px;height:20px;color:var(--blauw)}
.toc ol{margin:0;padding-left:1.2em;display:grid;gap:8px;font-size:.95rem}
.toc a{color:var(--tekst);text-decoration:none}
.toc a:hover,.toc a.nu{color:var(--blauw);font-weight:600}
.zijtel{display:flex;gap:8px;align-items:center;justify-content:center;color:#fff;font-weight:700;text-decoration:none;margin-top:14px}
.zijtel svg{width:18px;height:18px}

/* juridisch */
.proza{max-width:820px;font-size:1.06rem;line-height:1.75}
.proza h2{font-size:1.4rem;margin:1.8em 0 .5em}
.proza .intro{font-size:1.15rem}
.download{display:flex;gap:18px;align-items:center;max-width:620px;background:var(--licht);border-radius:var(--r);padding:26px 28px;text-decoration:none;color:var(--tekst)}
.download:hover{background:#e6edf5}
.download > svg{width:40px;height:40px;color:var(--blauw);flex:none}
.download span{flex:1}
.download b{display:block;color:var(--ink);font-size:1.12rem}
.download span+svg{width:22px;height:22px;color:var(--blauw)}
.proza-noot{margin-top:24px}

@media (max-width:1180px){
  .dkaarten{grid-template-columns:repeat(2,1fr)}
  .artikel-grid{grid-template-columns:minmax(0,1fr) 300px}
}
@media (max-width:900px){
  .blokken,.diensten.drie,.blog-grid,.sectie .partners{grid-template-columns:1fr}
  .fotorij.n2{grid-template-columns:1fr}
  .contact-grid,.offerte-grid,.artikel-grid{grid-template-columns:minmax(0,1fr)}
  .offerte-zij,.artikel-zij{position:static}
  .artikel-zij .toc{display:none}
  .bkaart-groot{grid-template-columns:1fr}
  .bkaart-groot .bkaart-beeld{min-height:0;aspect-ratio:3/2}
  .mensen{grid-template-columns:1fr}
  .hero-pagina{min-height:0}
  .impressie{top:10px;right:10px}
}
@media (max-width:600px){
  .dkaarten{grid-template-columns:1fr}
  .voortgang li{font-size:0;gap:0}
  .voortgang li span{font-size:.9rem}
  .stapknoppen .btn{flex:1;justify-content:center;padding:15px 12px}
  .artikel-tekst{font-size:1.04rem}
}

/* gridkolommen nooit breder dan het scherm door brede inhoud (tabel, lang woord) */
@media (max-width:900px){
  .hero,.hero .wrap,.dak,.gebied,.faq,.offerte,.contact-grid,.offerte-grid,.artikel-grid,.bkaart-groot,
  .blokken,.diensten.drie,.blog-grid,.sectie .partners,.fotorij.n2,.mensen{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:600px){
  .artikelkop h1{font-size:clamp(1.4rem,6.2vw,1.7rem);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

}

/* ---- ST Dakbedekking: eigen kleuren en onderdelen, zelfde systeem als Vosbouw ---- */
:root{--blauw:#103090;--blauw-d:#0c2472;--navy:#0a1a4f;--rood:#c2410c;--rood-d:#9a3412;--licht:#f1f4fa;--lijn:#dce3ef}
.btn-rood{box-shadow:0 6px 18px rgba(194,65,12,.26)}
.nav-merk{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.nav-merk img{width:44px;height:44px;border-radius:8px}
.nav-merk b{display:block;font-weight:900;font-size:1.14rem;line-height:1.05;color:var(--navy);letter-spacing:-.01em}
.nav-merk small{display:block;font-size:.72rem;font-weight:700;color:var(--blauw);letter-spacing:.07em;text-transform:uppercase;margin-top:3px}
.footer-merk{display:inline-flex;align-items:center;gap:12px;margin-bottom:16px}
.footer-merk img{width:44px;height:44px;border-radius:8px;background:#fff}
.footer-merk b{color:#fff;font-size:1.1rem}
.lekband{background:var(--navy);color:#dfe6f5}
.lekband-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding-top:34px;padding-bottom:34px}
.lekband .ico{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.lekband .ico svg{width:30px;height:30px}
.lekband h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .25em}
.lekband p{margin:0}
.lekband .btn-rand{border-color:#fff;color:#fff;background:transparent}
.lekband .btn-rand:hover{background:#fff;color:var(--navy)}
.lekband .cta-knoppen{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:900px){.lekband-in{grid-template-columns:minmax(0,1fr)}}
.dienst-partner{background:var(--licht);border-style:dashed}
.invulblok{border:2px dashed var(--blauw);border-radius:var(--r);padding:24px 26px;background:#f6f8fd;max-width:760px}
.invulblok b{display:block;color:var(--blauw);margin-bottom:6px}
.invulblok p{margin:0}
.projectgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.projectgrid .project{aspect-ratio:3/4}
@media (max-width:900px){.projectgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.blog-twee{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.blog-twee{grid-template-columns:minmax(0,1fr)}}
.artikel-beeld{position:relative}
.artikel-fig{margin:1.6em 0;position:relative}
.artikel-fig figcaption{font-size:.82rem;color:var(--tekst);margin-top:6px}
.dkaart-beeld{position:relative}
.dienst-partner .ico{background:#fff}
main p a,.proza a,.form-noot a{text-decoration:underline;text-underline-offset:2px}
.footer p a{text-decoration:underline;text-underline-offset:2px;color:#fff}
.topbalk .uren a{text-decoration:underline;text-underline-offset:2px}
.footer-onder a{text-decoration:underline;text-underline-offset:2px}

/* WordPress-thema: aanvulling */
.veld-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-fout{display:none;background:#fdecea;border-radius:10px;padding:14px;margin-top:12px;color:#8a1c0e;font-weight:600}
.form .btn[disabled]{opacity:.6;cursor:wait}
.contactlijst .adres{color:#fff;font-weight:700}
.feiten dd a{color:inherit;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(0,0,0,.25)}
.h3{font-size:1.2rem;font-weight:750;margin:0}
.anker{display:block;position:relative;top:-110px;visibility:hidden}
.btn-rand-wit{border-color:rgba(255,255,255,.6);color:#fff;background:transparent;margin-top:10px}
.btn-rand-wit:hover{border-color:#fff}
.zijkaart-donker .btn{width:100%;justify-content:center}
.upload-lijst{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.upload-lijst li{background:var(--licht);border-radius:8px;padding:6px 10px;font-size:.9rem;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ckaart-uren{cursor:default}
.nav-links a[aria-current="page"]{color:var(--rood)}
.ckaart{min-width:0}.ckaart>span:last-child{min-width:0}.ckaart b{overflow-wrap:anywhere}

/* plaatspagina's, werkgebied, kosten */
.woningen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start}
.cijferrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 0}
.cijferrij div{background:var(--licht);border-radius:var(--r);padding:16px}
.cijferrij dt{font-size:1.7rem;font-weight:850;color:var(--navy);line-height:1}
.cijferrij dd{margin:6px 0 0;font-size:.9rem}
.bouwjaren{margin:0;background:#fff;border:1px solid var(--lijn);border-radius:var(--r);padding:24px;box-shadow:var(--schaduw)}
.bouwjaren figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:16px}
.bouwjaren figcaption b{color:var(--ink);font-size:1.05rem}
.bouwjaren figcaption span{font-size:.9rem}
.bouwjaren ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.bouwjaren li{display:grid;grid-template-columns:7.5em minmax(0,1fr) 3em;gap:10px;align-items:center;font-size:.92rem}
.bj-balk{background:var(--licht);border-radius:6px;height:18px;overflow:hidden}
.bj-balk span{display:block;height:100%;background:var(--blauw);border-radius:6px}
.bj-pct{text-align:right;font-weight:700;color:var(--ink)}
.bouwjaren .bron{font-size:.78rem;margin:16px 0 0;color:#5b6b80}
.werkgebied{list-style:none;margin:0 0 20px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.werkgebied a{display:flex;flex-direction:column;gap:2px;background:var(--licht);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--tekst)}
.werkgebied a:hover{background:#e6edf5}
.werkgebied b{color:var(--ink);font-size:1.05rem}
.werkgebied span{font-size:.88rem}
.plaatsen-links a{color:inherit;text-decoration:none}
.vinkjes-los{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.vinkjes-los li{display:flex;gap:10px;align-items:flex-start}
.vinkjes-los svg{width:24px;height:24px;flex:none;color:#fff;background:var(--blauw);border-radius:6px;padding:5px;margin-top:1px;box-sizing:border-box}
.prijsblok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;background:var(--licht);border-radius:18px;padding:clamp(24px,4vw,48px)}
.tabel table{width:100%;border-collapse:collapse}.tabel th,.tabel td{text-align:left;padding:12px;border-bottom:1px solid var(--lijn)}
@media (max-width:900px){.woningen,.prijsblok{grid-template-columns:minmax(0,1fr)}.werkgebied{grid-template-columns:repeat(2,minmax(0,1fr))}.footer .wrap > .kolommen{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cijferrij{grid-template-columns:minmax(0,1fr)}.footer .wrap > .kolommen{grid-template-columns:minmax(0,1fr)}}

.voor-na{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px)}
.nadelen svg{background:#8a94a3;transform:rotate(45deg)}
@media (max-width:900px){.voor-na{grid-template-columns:minmax(0,1fr)}}
.werkgebied-kop{margin:28px 0 12px}
@media (max-width:560px){.werkgebied{grid-template-columns:minmax(0,1fr)}}

/* cookiemelding: navy balk onderaan, op mobiel boven de belbalk */
.cookiemelding{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--navy);color:#dbe6f3;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;box-shadow:0 -8px 24px rgba(0,20,60,.18)}
.cookiemelding[hidden]{display:none}
.cookiemelding p{margin:0;max-width:52em;font-size:.95rem}
.cookiemelding a{color:#fff;text-decoration:underline}
.cookieknoppen{display:flex;gap:10px;flex-wrap:wrap}
.cookieknoppen .btn{padding:10px 22px;margin:0}
@media (max-width:600px){.cookiemelding{bottom:calc(75px + env(safe-area-inset-bottom));padding:14px 16px}.cookiemelding p{font-size:.9rem}}