:root{
  --nacht:#131C2E;--nacht2:#1A2539;--inkt:#151A24;--papier:#F5F2EC;--papier2:#ECE7DE;--kaart:#FBF9F5;
  --grijs:#565D6B;--lijn:rgba(21,26,36,.13);--warm:#C8925C;--warm-d:#8E5A2A;--warm-l:#E3C3A0;--opdonker:#EDE8DF;
  --eng:#2E7562;--eng-l:#E3EFEA;--eng-h:#7FD1B6;
  --kop:'Newsreader',Georgia,'Times New Roman',serif;--tekst:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
  --maxw:1180px;--pad:clamp(20px,4.2vw,44px);--balk:48px;--r:3px;--uit:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--balk) + 80px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--papier);color:var(--inkt);font:400 17px/1.62 var(--tekst);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--warm);outline-offset:3px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
h1,h2,h3{font-family:var(--kop);font-weight:400;letter-spacing:-.012em;margin:0}
h2{font-size:clamp(32px,4.4vw,52px);line-height:1.06}
h2 em,h1 em{font-style:italic;font-weight:300;color:var(--warm-d)}
.donker h2 em,.donker h1 em{color:var(--warm)}
.boven{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--warm-d);margin:0 0 18px}
.boven::before{content:"";width:28px;height:1px;background:currentColor}
.donker .boven{color:var(--warm)}
.lead{font-size:clamp(17px,1.5vw,19px);color:var(--grijs);max-width:640px;margin:20px 0 0}
.donker .lead{color:rgba(237,232,223,.78)}
section{padding:clamp(70px,9vw,120px) 0}
.donker{background:var(--nacht);color:var(--opdonker)}
.btn{display:inline-flex;align-items:center;gap:10px;border:0;border-radius:var(--r);padding:15px 22px;font-weight:600;font-size:16px;text-decoration:none;transition:transform .18s var(--uit),background .18s,box-shadow .18s}
.btn svg{width:16px;height:16px;transition:transform .2s var(--uit)}
.btn:hover svg{transform:translateX(3px)}
.btn-warm{background:var(--warm);color:#14100B}
.btn-warm:hover{background:#D29D69}
.btn-lijn{background:transparent;box-shadow:inset 0 0 0 1px currentColor}
.btn-lijn:hover{background:rgba(200,146,92,.12)}
.btn-nacht{background:var(--nacht);color:var(--opdonker)}
.btn-nacht:hover{background:#0B1220}
.btn:active{transform:translateY(1px)}

/* demobalk */
#demobalk{position:sticky;top:0;z-index:90;background:#0A0F1A;color:#E6E1D7;font-size:13.5px;border-bottom:1px solid rgba(200,146,92,.45)}
#demobalk .in{max-width:var(--maxw);margin:0 auto;padding:8px var(--pad);display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:48px}
#demobalk .tag{border:1px solid var(--warm);color:var(--warm);font-weight:700;letter-spacing:.18em;font-size:11px;padding:3px 9px;border-radius:2px;text-transform:uppercase}
#demobalk .nt{color:rgba(230,225,215,.74)}
#demobalk .rt{margin-left:auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.schak{display:inline-flex;align-items:center;gap:9px;font-weight:700}
.sw{position:relative;width:46px;height:26px;border-radius:99px;border:0;background:#3A4150;transition:background .22s var(--uit);padding:0}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .22s var(--uit)}
.sw[aria-checked="true"]{background:var(--eng)}
.sw[aria-checked="true"]::after{transform:translateX(20px)}
.schak .st{min-width:22px;color:rgba(230,225,215,.7);font-weight:600}
#ptbtn{display:inline-flex;align-items:center;gap:8px;background:transparent;color:#fff;border:0;font-weight:700;font-size:13.5px;padding:7px 12px;border-radius:var(--r);box-shadow:inset 0 0 0 1.5px var(--warm)}
#ptbtn:hover{background:rgba(200,146,92,.16)}
#ptbtn .cnt{background:var(--warm);color:#14100B;font-size:11px;min-width:20px;height:20px;border-radius:99px;display:inline-grid;place-items:center;padding:0 6px}
#ptbtn.on{background:var(--opdonker);color:var(--inkt)}
#ptbtn .sm{display:none}
#demobalk a.vs{color:#fff;text-decoration:none;font-weight:700;padding:7px 13px;border-radius:var(--r);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
#demobalk a.vs:hover{background:rgba(255,255,255,.08)}

/* uitleg */
.puntlabel{display:none;align-items:flex-start;gap:12px;max-width:740px;margin:0 0 28px;background:#FFFDF8;color:var(--inkt);font:500 14.5px/1.55 var(--tekst);padding:13px 16px;border-radius:var(--r);border:1.5px solid var(--warm-d);box-shadow:0 18px 40px -24px rgba(10,15,26,.55);text-align:left;letter-spacing:0;text-transform:none;position:relative;z-index:3}
.puntlabel b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--warm-d);color:#fff;font:600 14px/1 var(--tekst)}
.puntlabel i{font-style:normal;display:inline-block;background:var(--eng);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:2px;margin-right:7px;vertical-align:1px}
body.punten .puntlabel{display:flex}
.puntwrap{padding-top:18px}
body:not(.punten) .puntwrap{display:none}
.puntwrap .puntlabel{margin-bottom:0}

/* kop */
header.site{position:sticky;top:var(--balk);z-index:70;background:rgba(19,28,46,.97);color:var(--opdonker);border-bottom:1px solid rgba(237,232,223,.08);backdrop-filter:blur(6px)}
header.site .in{max-width:var(--maxw);margin:0 auto;padding:14px var(--pad);display:flex;align-items:center;gap:28px}
.merk{text-decoration:none;line-height:1.05}
.merk b{display:block;font:400 25px/1 var(--kop);letter-spacing:-.01em}
.merk small{display:block;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(237,232,223,.6);margin-top:5px}
nav.hoofd{display:flex;gap:26px;margin-left:auto}
nav.hoofd a{text-decoration:none;font-size:15px;color:rgba(237,232,223,.82);position:relative;padding:4px 0}
nav.hoofd a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--warm);transition:right .25s var(--uit)}
nav.hoofd a:hover{color:#fff}
nav.hoofd a:hover::after{right:0}
.kopknop{padding:11px 16px;font-size:14.5px}
.menuknop{display:none;background:transparent;border:0;color:var(--opdonker);padding:8px;margin-left:auto}
.menuknop svg{width:26px;height:26px}
#mobmenu{display:none}
#mobmenu.open{display:flex;flex-direction:column;padding:6px var(--pad) 18px;border-top:1px solid rgba(237,232,223,.08)}
#mobmenu a{padding:13px 0;text-decoration:none;font:400 22px/1.2 var(--kop);border-bottom:1px solid rgba(237,232,223,.08)}

/* hero */
#begin{padding:0 0 clamp(60px,8vw,100px);background:var(--nacht);color:var(--opdonker);position:relative;overflow:hidden}
#begin::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 85% 10%,rgba(200,146,92,.13),transparent 60%);pointer-events:none}
.held{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(30px,5vw,70px);align-items:start;padding-top:clamp(46px,7vw,90px);position:relative}
.held h1{font-size:clamp(40px,5.6vw,72px);line-height:1.02}
.held h1 em{display:block}
.held .wie{margin:28px 0 0;font-weight:600;font-size:16px}
.held .wie span{display:block;font:italic 300 19px/1.4 var(--kop);color:var(--warm);margin-top:2px}
.held .acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.held .acties .btn-lijn{color:var(--opdonker)}
.snel{background:var(--kaart);color:var(--inkt);border-radius:var(--r);padding:26px 24px 22px;box-shadow:0 40px 80px -40px rgba(0,0,0,.6);position:relative}
.snel .foto{display:flex;align-items:center;gap:14px;margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--lijn)}
.snel .foto img{width:64px;height:64px;border-radius:50%;object-fit:cover;object-position:50% 22%}
.snel .foto b{display:block;font:400 22px/1.15 var(--kop)}
.snel .foto span{font-size:14px;color:var(--grijs)}
.snel h3{font:600 15px/1.4 var(--tekst);margin:0 0 12px}
.veld{margin:0 0 12px}
.veld label{display:block;font-size:13.5px;font-weight:600;margin:0 0 5px}
.veld label small{font-weight:400;color:var(--grijs)}
.veld input,.veld select,.veld textarea{width:100%;border:1px solid rgba(21,26,36,.22);background:#fff;border-radius:var(--r);padding:12px 13px;font-size:16px;transition:border-color .15s,box-shadow .15s}
.veld textarea{min-height:96px;resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-color:var(--warm-d);box-shadow:0 0 0 3px rgba(200,146,92,.25)}
.veld .fout{display:none;font-size:13px;color:#A3341F;margin-top:5px;font-weight:600}
.veld.isfout input,.veld.isfout select{border-color:#A3341F}
.veld.isfout .fout{display:block}
.snel .btn{width:100%;justify-content:center;margin-top:4px}
.snel .klein{font-size:13px;color:var(--grijs);margin:12px 0 0;line-height:1.5}
.klaar{display:none;text-align:left}
.klaar.aan{display:block;animation:op .4s var(--uit)}
.klaar h3{font:400 26px/1.15 var(--kop);margin:0 0 8px}
.klaar p{margin:0 0 10px;color:var(--grijs);font-size:15.5px}
.slots{display:none;margin-top:14px}
body.engine .slots{display:block}
.slots p{font-size:13.5px;font-weight:700;color:var(--eng);margin:0 0 8px;letter-spacing:.02em}
.slots .rij{display:flex;flex-wrap:wrap;gap:8px}
.slots button{border:1px solid rgba(46,117,98,.4);background:var(--eng-l);color:#1B4D40;border-radius:var(--r);padding:9px 12px;font-size:14px;font-weight:600}
.slots button:hover{background:#D3E7DF}
.slots button.gekozen{background:var(--eng);color:#fff;border-color:var(--eng)}

.engnoot{display:none;margin-top:26px;padding:14px 16px;border-left:3px solid var(--eng-h);background:rgba(127,209,182,.09);color:var(--opdonker);font-size:15.5px;border-radius:0 var(--r) var(--r) 0;max-width:580px}
body.engine .engnoot{display:block}
.engmerk{display:inline-block;background:var(--eng);color:#fff;font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:2px 8px;border-radius:2px;margin-right:6px;vertical-align:2px}
.licht .engnoot{background:var(--eng-l);color:var(--inkt);border-left-color:var(--eng)}

/* herkenning */
.herk{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,80px);align-items:start}
.zinnen{display:grid;gap:10px}
.zin{display:flex;align-items:center;gap:16px;width:100%;text-align:left;background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:17px 18px;font:400 clamp(19px,1.8vw,22px)/1.3 var(--kop);transition:border-color .2s,transform .2s var(--uit),background .2s}
.zin span{flex:1}
.zin svg{width:18px;height:18px;flex:none;color:var(--warm-d);opacity:.5;transition:opacity .2s,transform .2s var(--uit)}
.zin:hover{border-color:var(--warm-d);transform:translateX(4px)}
.zin:hover svg{opacity:1;transform:translateX(3px)}
.zin.gekozen{background:#fff;border-color:var(--warm-d);box-shadow:inset 3px 0 0 var(--warm-d)}
.herk .tip{font-size:14.5px;color:var(--grijs);margin:14px 0 0}

/* rol */
.rol{background:var(--papier2)}
.rol .kol{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start}
.rol p.tx{margin:20px 0 0;max-width:520px}
table.vgl{width:100%;border-collapse:collapse;background:var(--kaart);border-radius:var(--r);overflow:hidden;font-size:16px}
table.vgl th{font:600 12.5px/1.3 var(--tekst);letter-spacing:.14em;text-transform:uppercase;text-align:left;padding:16px 18px;border-bottom:1px solid var(--lijn)}
table.vgl th:first-child{color:var(--grijs)}
table.vgl th:last-child{color:var(--warm-d)}
table.vgl td{padding:15px 18px;border-bottom:1px solid var(--lijn);vertical-align:top;width:50%}
table.vgl td:first-child{color:var(--grijs)}
table.vgl td:last-child{font-weight:600}
table.vgl tr:last-child td{border-bottom:0}

/* groeimodel */
.model .kop2{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.model .kop2 .lead{max-width:470px}
.gebieden{display:grid;grid-template-columns:320px 1fr;gap:0;margin-top:48px;border-top:1px solid rgba(237,232,223,.16)}
.tabs{display:flex;flex-direction:column;border-right:1px solid rgba(237,232,223,.16)}
.tab{display:flex;align-items:baseline;gap:14px;background:transparent;border:0;border-bottom:1px solid rgba(237,232,223,.1);text-align:left;padding:15px 18px 15px 0;color:rgba(237,232,223,.68);font:400 20px/1.25 var(--kop);transition:color .2s,padding .25s var(--uit)}
.tab small{font:600 12px/1 var(--tekst);letter-spacing:.1em;color:rgba(237,232,223,.42);width:22px}
.tab:hover{color:#fff}
.tab[aria-selected="true"]{color:#fff;padding-left:10px}
.tab[aria-selected="true"] small{color:var(--warm)}
.paneel{padding:clamp(24px,4vw,46px) 0 clamp(24px,4vw,46px) clamp(24px,4vw,56px)}
.paneel .nr{font:italic 300 90px/1 var(--kop);color:rgba(200,146,92,.35)}
.paneel h3{font-size:clamp(28px,3vw,38px);line-height:1.12;margin:6px 0 18px;max-width:560px}
.paneel p{color:rgba(237,232,223,.8);max-width:560px;margin:0}
.paneel.wissel{animation:op .38s var(--uit)}
.model .noot{margin:40px 0 0;font-size:15px;color:rgba(237,232,223,.62);max-width:640px}

/* werkwijze */
.stappen{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:52px;border-top:1px solid var(--lijn)}
.stap{padding:26px 22px 4px 0;border-right:1px solid var(--lijn);position:relative}
.stap+.stap{padding-left:22px}
.stap:last-child{border-right:0}
.stap .n{font:italic 300 46px/1 var(--kop);color:var(--warm-d)}
.stap h3{font-size:24px;line-height:1.15;margin:14px 0 10px}
.stap p{font-size:15.5px;color:var(--grijs);margin:0 0 14px}
.stap .prijs{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warm-d);border:1px solid rgba(142,90,42,.35);padding:4px 9px;border-radius:2px}
.stap .heeft{font-size:14.5px;margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--lijn)}
.stap .heeft b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);margin-bottom:4px}
.stappen-noot{margin:30px 0 0;font:italic 400 21px/1.4 var(--kop)}
.scanregel{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:28px}

/* voor wie */
.wie2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:46px}
.lijst{background:var(--kaart);border-radius:var(--r);padding:28px 28px 22px;border:1px solid var(--lijn)}
.lijst h3{font-size:26px;margin:0 0 16px}
.lijst ul{list-style:none;margin:0;padding:0}
.lijst li{display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--lijn);font-size:16px}
.lijst li svg{width:18px;height:18px;flex:none;margin-top:4px}
.lijst.ja li svg{color:var(--eng)}
.lijst.nee{background:transparent}
.lijst.nee li{color:var(--grijs)}
.lijst.nee li svg{color:#9A3B2A}
.citaten{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:22px}
.citaat{font:italic 300 22px/1.35 var(--kop);padding:18px 22px;border-left:2px solid var(--lijn)}
.citaat b{display:block;font:600 12px/1 var(--tekst);font-style:normal;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}
.citaat.n b{color:#9A3B2A}.citaat.j b{color:var(--eng)}
.citaat.j{border-left-color:var(--eng)}

/* over */
.over .kol{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px);align-items:start}
.over figure{margin:0;position:relative}
.over figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);filter:saturate(.9)}
.over figcaption{font-size:13.5px;color:rgba(237,232,223,.6);margin-top:10px}
.rollen{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 0}
.rollen span{border:1px solid rgba(237,232,223,.25);border-radius:99px;padding:7px 14px;font-size:14.5px}
.rollen span.laatst{border-color:var(--warm);color:var(--warm)}
.over .tx p{color:rgba(237,232,223,.82);max-width:560px}
.over blockquote{margin:30px 0 0;font:italic 300 clamp(24px,2.6vw,32px)/1.25 var(--kop);color:#fff;max-width:600px}
.niet{margin:30px 0 0;font-size:15px;color:rgba(237,232,223,.66)}
.niet s{text-decoration-color:rgba(200,146,92,.8);margin-right:10px;white-space:nowrap}

/* resultaat */
.res .kol{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,6vw,80px)}
.inhanden{list-style:none;margin:0;padding:0;counter-reset:h}
.inhanden li{counter-increment:h;display:grid;grid-template-columns:54px 1fr;gap:4px 16px;padding:20px 0;border-top:1px solid var(--lijn)}
.inhanden li::before{content:counter(h,decimal-leading-zero);font:italic 300 30px/1 var(--kop);color:var(--warm-d);grid-row:span 2}
.inhanden b{font:400 23px/1.2 var(--kop)}
.inhanden span{font-size:15.5px;color:var(--grijs)}
.casevak{margin-top:26px;border:1px dashed rgba(142,90,42,.5);border-radius:var(--r);padding:18px 20px;font-size:15px;color:var(--grijs)}
.casevak b{color:var(--inkt)}

/* ai */
.ai{display:none;background:var(--eng-l)}
body.engine .ai{display:block}
.ai table{width:100%;border-collapse:collapse;margin-top:34px;background:#fff;border-radius:var(--r);overflow:hidden;font-size:15.5px}
.ai th{text-align:left;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--grijs);padding:14px 16px;border-bottom:1px solid var(--lijn)}
.ai td{padding:14px 16px;border-bottom:1px solid var(--lijn);vertical-align:top}
.ai tr:last-child td{border-bottom:0}
.ai .q{font:italic 400 18px/1.35 var(--kop)}
.ai .nee{color:#9A3B2A;font-weight:700;white-space:nowrap}
.ai .ja{color:var(--eng);font-weight:700;white-space:nowrap}
.ai .wie{color:var(--grijs)}
.ai .bron{font-size:13.5px;color:var(--grijs);margin:14px 0 0}

/* vragen */
.vragen .kol{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(30px,6vw,80px)}
details{border-top:1px solid var(--lijn)}
details:last-child{border-bottom:1px solid var(--lijn)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:20px 0;font:400 clamp(20px,1.9vw,23px)/1.3 var(--kop)}
summary::-webkit-details-marker{display:none}
summary i{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--lijn);display:grid;place-items:center;transition:transform .25s var(--uit),background .2s;font-style:normal;margin-top:2px}
summary i svg{width:12px;height:12px}
details[open] summary i{transform:rotate(45deg);background:var(--warm);border-color:var(--warm)}
details .a{padding:0 0 22px;color:var(--grijs);max-width:640px}
details .a p{margin:0 0 10px}
details .a em{font-style:normal;font-weight:600;color:var(--inkt)}

/* kennis */
.kennis .kop2{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.telling{display:flex;gap:40px}
.telling div b{display:block;font:300 64px/1 var(--kop);color:var(--warm)}
.telling div span{font-size:13.5px;color:rgba(237,232,223,.65)}
.ingang{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:46px}
.ingang a{display:block;text-decoration:none;padding:24px 22px;border:1px solid rgba(237,232,223,.16);border-radius:var(--r);transition:border-color .2s,transform .25s var(--uit)}
.ingang a:hover{border-color:var(--warm);transform:translateY(-3px)}
.ingang small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--warm)}
.ingang h3{font-size:24px;line-height:1.2;margin:10px 0 10px}
.ingang p{font-size:15px;color:rgba(237,232,223,.72);margin:0}
.vraagbak{display:none;margin-top:40px;background:#0E1626;border:1px solid rgba(127,209,182,.35);border-radius:6px;overflow:hidden}
body.engine .vraagbak{display:block}
.vraagbak .vk{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid rgba(237,232,223,.08)}
.vraagbak .vk b{font:400 21px/1.2 var(--kop)}
.vraagbak .vk span{font-size:13.5px;color:rgba(237,232,223,.6)}
#gesprek{padding:18px 20px;display:flex;flex-direction:column;gap:12px;max-height:380px;overflow:auto}
.bel{max-width:88%;padding:12px 14px;border-radius:12px;font-size:15.5px;line-height:1.5}
.bel.jij{align-self:flex-end;background:var(--warm);color:#14100B;border-bottom-right-radius:3px}
.bel.hij{align-self:flex-start;background:#1C2638;border-bottom-left-radius:3px}
.bel.hij .br{display:block;margin-top:8px;font-size:12.5px;color:var(--eng-h)}
.bel.hij button{margin-top:10px;background:transparent;border:1px solid var(--warm);color:var(--warm);border-radius:var(--r);padding:7px 11px;font-size:13.5px;font-weight:600}
.voorzet{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px 14px}
.voorzet button{background:transparent;border:1px solid rgba(237,232,223,.22);color:rgba(237,232,223,.86);border-radius:99px;padding:7px 12px;font-size:13.5px}
.voorzet button:hover{border-color:var(--eng-h);color:#fff}
#vraagform{display:flex;gap:8px;padding:14px 20px 18px;border-top:1px solid rgba(237,232,223,.08)}
#vraagform input{flex:1;min-width:0;background:#1C2638;border:1px solid rgba(237,232,223,.16);color:#fff;border-radius:var(--r);padding:12px 13px;font-size:16px}
#vraagform input::placeholder{color:rgba(237,232,223,.45)}
#vraagform button{background:var(--eng);border:0;color:#fff;border-radius:var(--r);padding:0 16px;font-weight:600}

/* contact */
.contact .kol{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start}
.contact .verwacht{list-style:none;margin:28px 0 0;padding:0}
.contact .verwacht li{padding:14px 0;border-top:1px solid var(--lijn);display:grid;grid-template-columns:34px 1fr;gap:2px 12px}
.contact .verwacht li span{font:italic 300 22px/1 var(--kop);color:var(--warm-d);grid-row:span 2}
.contact .verwacht li b{font-weight:600}
.contact .verwacht li em{font-style:normal;color:var(--grijs);font-size:15.5px}
.formkaart{background:var(--kaart);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(22px,3vw,34px)}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.formkaart .btn{margin-top:6px}
.formkaart .klein{font-size:13.5px;color:var(--grijs);margin:14px 0 0}
.direct{margin-top:22px;font-size:15px;color:var(--grijs)}
.direct b{color:var(--inkt)}

footer.voet{background:#0B1220;color:rgba(237,232,223,.7);padding:60px 0 40px;font-size:15px}
footer .kol{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px}
footer .merk b{color:#fff}
footer h4{font:600 12px/1 var(--tekst);letter-spacing:.16em;text-transform:uppercase;color:rgba(237,232,223,.5);margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:0 0 8px}
footer a{text-decoration:none}
footer a:hover{color:#fff}
footer .onder{margin-top:44px;padding-top:20px;border-top:1px solid rgba(237,232,223,.08);font-size:13.5px;color:rgba(237,232,223,.5)}
body.engine footer.voet{padding-bottom:150px}

/* pipeline-paneel */
#pijp{display:none;position:fixed;left:22px;bottom:22px;z-index:60;width:340px;max-width:calc(100vw - 24px);background:#0B111D;color:#fff;border-radius:10px;box-shadow:0 30px 70px -20px rgba(0,0,0,.7);border:1px solid rgba(127,209,182,.3);flex-direction:column;overflow:hidden}
body.engine #pijp{display:flex}
#pijp .tk{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#fff;padding:12px 14px;text-align:left;width:100%}
#pijp .pt{width:9px;height:9px;border-radius:50%;background:var(--eng-h);flex:none;box-shadow:0 0 0 4px rgba(127,209,182,.18)}
#pijp .tk b{display:block;font:400 18px/1.15 var(--kop)}
#pijp .tk b em{font:600 13px/1 var(--tekst);font-style:normal;color:var(--eng-h);margin-left:6px}
#pijp .tk small{display:block;font-size:12px;color:rgba(255,255,255,.55);margin-top:2px}
#pijp .tk svg{width:18px;height:18px;margin-left:auto;transition:transform .22s var(--uit);flex:none}
#pijp.dicht .tk svg{transform:rotate(180deg)}
#pijp .tb{padding:0 10px 10px;display:flex;flex-direction:column;gap:10px}
#pijp.dicht .tb{display:none}
.tel4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tel4 div{background:#151E2E;border-radius:6px;padding:9px 4px;text-align:center}
.tel4 b{display:block;font:300 26px/1 var(--kop)}
.tel4 span{display:block;font-size:10.5px;color:rgba(255,255,255,.62);line-height:1.2;margin-top:4px}
#meldingen{display:flex;flex-direction:column;gap:8px;max-height:260px;overflow:auto}
#meldingen .leeg{font-size:13.5px;color:rgba(255,255,255,.6);margin:4px 4px 2px;line-height:1.5}
.mld{background:#172133;border-radius:6px;padding:9px 11px;font-size:13.3px;line-height:1.45;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;border-left:2px solid var(--eng-h)}
.mld i{font-style:normal;font-weight:700;font-size:11px;color:var(--eng-h);text-transform:uppercase;letter-spacing:.08em}
.mld time{font-size:11.5px;color:rgba(255,255,255,.45);justify-self:end}
.mld span{grid-column:1/-1}
.mld.nieuw{animation:binnen .4s var(--uit)}
#pijp .pt.flits{animation:flits .9s 2}

dialog{border:0;padding:0;border-radius:6px;max-width:min(560px,calc(100vw - 24px));width:100%;background:var(--kaart);color:var(--inkt);box-shadow:0 40px 90px -30px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(10,15,26,.6)}
.dl{padding:26px 26px 24px;max-height:calc(100vh - 60px);overflow:auto}
.dtop{display:flex;justify-content:space-between;gap:16px;align-items:start}
.dtop h2{font-size:30px;line-height:1.1}
.sluit{background:transparent;border:0;padding:6px;margin:-4px -6px 0 0}
.sluit svg{width:20px;height:20px}
.dl .s{color:var(--grijs);margin:10px 0 18px;font-size:15.5px}

#toast{position:fixed;left:50%;top:calc(var(--balk) + 84px);transform:translate(-50%,-10px);background:#0B111D;color:#fff;padding:12px 18px;border-radius:var(--r);font-size:15px;font-weight:500;z-index:120;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--uit);max-width:calc(100vw - 30px);box-shadow:0 18px 40px -16px rgba(0,0,0,.6);border-left:3px solid var(--warm)}
#toast.aan{opacity:1;transform:translate(-50%,0)}

.verschijn{opacity:0;transform:translateY(18px);transition:opacity .7s var(--uit),transform .7s var(--uit)}
.verschijn.in{opacity:1;transform:none}
@keyframes op{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes binnen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes flits{50%{box-shadow:0 0 0 9px rgba(127,209,182,.4)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.verschijn{opacity:1;transform:none}}

@media (max-width:1020px){
  nav.hoofd{display:none}
  .menuknop{display:block}
  .kopknop{display:none}
  .held,.herk,.rol .kol,.over .kol,.res .kol,.vragen .kol,.contact .kol{grid-template-columns:1fr}
  .stappen{grid-template-columns:1fr 1fr}
  .stap:nth-child(2){border-right:0}
  .stap:nth-child(3){padding-left:0}
  .stap:nth-child(n+3){border-top:1px solid var(--lijn)}
  .gebieden{grid-template-columns:1fr}
  .tabs{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid rgba(237,232,223,.16);scrollbar-width:none}
  .tab{white-space:nowrap;padding:14px 16px 14px 0;border-bottom:0;font-size:18px}
  .tab[aria-selected="true"]{padding-left:0;box-shadow:inset 0 -2px 0 var(--warm)}
  .paneel{padding:28px 0 0}
  .over figure{max-width:380px}
  .ingang{grid-template-columns:1fr}
  footer .kol{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:16.5px}
  #demobalk .nt,#demobalk .tag{display:none}
  #demobalk .rt{margin-left:0;width:100%;justify-content:space-between;gap:8px}
  #ptbtn .lg{display:none}
  #ptbtn .sm{display:inline}
  #demobalk a.vs .lang{display:none}
  .stappen{grid-template-columns:1fr}
  .stap,.stap+.stap{padding-left:0;border-right:0;border-top:1px solid var(--lijn)}
  .stap:first-child{border-top:0}
  .wie2,.citaten,.twee{grid-template-columns:1fr}
  .telling{gap:26px}
  .telling div b{font-size:50px}
  table.vgl{font-size:15px}
  table.vgl th,table.vgl td{padding:12px 12px}
  .ai table,.ai thead,.ai tbody,.ai tr,.ai td{display:block}
  .ai thead{display:none}
  .ai tr{border-bottom:1px solid var(--lijn);padding:10px 4px}
  .ai td{border:0;padding:4px 12px}
  footer .kol{grid-template-columns:1fr}
  #pijp{left:12px;bottom:12px;width:calc(100vw - 24px)}
  #pijp.dicht{width:auto}
  #pijp.dicht .tk small{display:none}
  .puntlabel{font-size:13.5px;padding:12px 13px}
  #demobalk .in{padding:8px 12px;gap:8px}
  #demobalk .rt{gap:6px}
  .schak{gap:6px}
  #ptbtn{padding:7px 9px}
  #demobalk a.vs{padding:7px 10px}
  #toast{left:12px;right:12px;transform:translateY(-10px);max-width:none}
  #toast.aan{transform:none}
  body.engine footer.voet{padding-bottom:110px}
}

/* ---------- meerdere pagina's ---------- */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ext{display:inline-block;width:.62em;height:.62em;margin-left:.28em;vertical-align:.12em;opacity:.65}
nav.hoofd a[aria-current="page"]{color:#fff}
nav.hoofd a[aria-current="page"]::after{right:0}
#mobmenu a[aria-current="page"]{color:var(--warm)}
.tel4.tel3{grid-template-columns:repeat(3,1fr)}
.verder{display:inline-flex;align-items:center;gap:9px;margin-top:26px;font-weight:600;font-size:15.5px;color:var(--warm-d);text-decoration:none;border-bottom:1px solid rgba(142,90,42,.35);padding-bottom:3px;transition:border-color .2s,gap .25s var(--uit)}
.verder svg{width:15px;height:15px}
.verder:hover{border-color:var(--warm-d);gap:13px}
.donker .verder{color:var(--warm);border-bottom-color:rgba(200,146,92,.4)}
.donker .verder:hover{border-color:var(--warm)}

/* paginakop */
.phero{background:var(--nacht);color:var(--opdonker);position:relative;overflow:hidden;padding:clamp(56px,8vw,104px) 0 clamp(60px,8vw,100px)}
.phero::before{content:"";position:absolute;inset:0;background:radial-gradient(900px 500px at 85% 10%,rgba(200,146,92,.13),transparent 60%);pointer-events:none}
.phero .wrap{position:relative}
.phero h1{font-size:clamp(40px,5.6vw,72px);line-height:1.03;max-width:900px}
.phero h1 em{display:block}
.phero .lead{max-width:660px}
.phero .acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.phero .acties .btn-lijn{color:var(--opdonker)}
.phero.metfoto .wrap{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(30px,6vw,80px);align-items:end}
.phero figure{margin:0}
.phero figure img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r);filter:saturate(.9)}
.phero figcaption{font-size:13.5px;color:rgba(237,232,223,.6);margin-top:10px}
.phero figcaption b{display:block;font:400 22px/1.2 var(--kop);color:#fff}

/* tekst naast kop */
.zij{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,6vw,80px);align-items:start}
.zij .kopkol{position:sticky;top:calc(var(--balk) + 96px)}
.proza p{margin:0 0 18px;max-width:640px}
.proza p:last-child{margin-bottom:0}
.proza p.groot{font:400 clamp(23px,2.3vw,29px)/1.35 var(--kop);color:var(--inkt);margin-bottom:24px}
.donker .proza p{color:rgba(237,232,223,.82)}
.donker .proza p.groot{color:#fff}
.slotzin{margin:34px 0 0;font:italic 400 clamp(20px,2vw,24px)/1.4 var(--kop);max-width:760px}

/* vijf kolommen: waar de rol over gaat */
.vijf{display:grid;grid-template-columns:repeat(5,1fr);margin-top:48px;border-top:1px solid var(--lijn)}
.vijf div{padding:24px 20px 6px 0;border-right:1px solid var(--lijn)}
.vijf div+div{padding-left:20px}
.vijf div:last-child{border-right:0}
.vijf h3{font-size:25px;margin:0 0 14px}
.vijf h3 small{display:block;font:600 12px/1 var(--tekst);letter-spacing:.14em;color:var(--warm-d);margin-bottom:12px}
.vijf ul{list-style:none;margin:0;padding:0}
.vijf li{font-size:15.5px;padding:7px 0;border-top:1px dashed var(--lijn)}

/* zeven stappen */
.zeven{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);position:relative}
.zeven::before{content:"";position:absolute;left:0;right:0;top:23px;height:1px;background:rgba(237,232,223,.2)}
.zeven li{position:relative;padding:0 14px 0 0}
.zeven .n{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--nacht);border:1px solid rgba(200,146,92,.55);font:italic 300 20px/1 var(--kop);color:var(--warm);position:relative}
.zeven h3{font-size:22px;margin:18px 0 8px}
.zeven p{font-size:15px;color:rgba(237,232,223,.74);margin:0}

/* verantwoordelijkheid */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.chips span{border:1px solid var(--lijn);background:var(--kaart);border-radius:99px;padding:8px 15px;font-size:15px}
.chips span.slot{background:var(--nacht);color:var(--opdonker);border-color:var(--nacht)}
.donker .chips span{border-color:rgba(237,232,223,.25);background:transparent}
.donker .chips span.laatst{border-color:var(--warm);color:var(--warm)}

/* wanneer het past */
.past{display:grid;gap:10px}
.past a.zin{text-decoration:none;color:inherit}
.criterium{margin:26px 0 0;padding:18px 20px;border-left:2px solid var(--warm-d);background:var(--kaart);font-size:16.5px;max-width:640px}

/* uitgelicht vak */
.vak{background:var(--nacht);color:var(--opdonker);border-radius:var(--r);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,48px);align-items:start}
.vak .boven{margin-bottom:0;white-space:nowrap}
.vak h3{font-size:clamp(26px,2.6vw,34px);line-height:1.15;margin:0 0 14px}
.vak p{margin:0;color:rgba(237,232,223,.8);max-width:680px}

/* slot-cta */
.cta{background:var(--papier2);text-align:left}
.cta .cin{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,6vw,80px);align-items:end}
.cta .acties{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-start}
.cta .lead{margin-top:16px}

/* groeimodel: de acht gebieden */
.acht{margin-top:52px;border-top:1px solid var(--lijn)}
.gebied{display:grid;grid-template-columns:70px 1.05fr 1fr;gap:10px clamp(20px,4vw,52px);padding:30px 0;border-bottom:1px solid var(--lijn)}
.gebied .nr{font:italic 300 40px/1 var(--kop);color:var(--warm-d)}
.gebied h3{font-size:clamp(26px,2.4vw,32px);line-height:1.12}
.gebied .q{font:italic 400 19px/1.4 var(--kop);color:var(--warm-d);margin:8px 0 12px}
.gebied .uitl{font-size:15.5px;color:var(--grijs);margin:0;max-width:520px}
.gebied .wo{font:600 12px/1 var(--tekst);letter-spacing:.14em;text-transform:uppercase;color:var(--grijs);margin:6px 0 12px}
.labels{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.labels li{font-size:14px;padding:5px 11px;border-radius:99px;background:var(--kaart);border:1px solid var(--lijn)}

/* wat, hoe, wat nu */
.drie{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:48px;border-top:1px solid rgba(237,232,223,.16)}
.drie>div{padding:28px 26px 8px 0;border-right:1px solid rgba(237,232,223,.16)}
.drie>div+div{padding-left:26px}
.drie>div:last-child{border-right:0}
.drie .w{font:italic 300 44px/1 var(--kop);color:var(--warm)}
.drie h3{font-size:25px;margin:16px 0 10px;color:#fff}
.drie p{font-size:15.5px;color:rgba(237,232,223,.76);margin:0 0 12px}
.drie ol{margin:6px 0 0;padding:0;list-style:none;counter-reset:l}
.drie ol li{counter-increment:l;font-size:15px;padding:6px 0;border-top:1px solid rgba(237,232,223,.1);display:flex;gap:10px;color:rgba(237,232,223,.86)}
.drie ol li::before{content:counter(l,decimal-leading-zero);font-size:12px;font-weight:600;color:var(--warm);padding-top:3px}

/* over sven */
.nietwel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);margin-top:44px}
.nietwel .lijst h3{font-size:24px}
.nietwel .lijst.nee li s{text-decoration-color:rgba(154,59,42,.7)}
.welzin{font:italic 300 clamp(24px,2.5vw,31px)/1.3 var(--kop);color:var(--inkt);align-self:center;padding:10px 0 10px 26px;border-left:2px solid var(--eng);margin:0}
.welzin b{display:block;font:600 12px/1 var(--tekst);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--eng);margin-bottom:12px}
.stappen.vier4 .stap h3{font-size:23px}

@media (max-width:1020px){
  .zij,.phero.metfoto .wrap,.cta .cin,.nietwel{grid-template-columns:1fr}
  .zij .kopkol{position:static}
  .phero figure{max-width:340px}
  .vijf{grid-template-columns:1fr 1fr 1fr}
  .vijf div:nth-child(3){border-right:0}
  .vijf div:nth-child(4){padding-left:0}
  .vijf div:nth-child(n+4){border-top:1px solid var(--lijn)}
  .zeven{grid-template-columns:1fr;gap:0}
  .zeven::before{left:23px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .zeven li{display:grid;grid-template-columns:46px 1fr;gap:0 18px;padding:0 0 22px}
  .zeven .n{grid-row:span 2}
  .zeven h3{margin:10px 0 4px}
  .gebied{grid-template-columns:56px 1fr}
  .gebied>div:last-child{grid-column:2}
  .drie{grid-template-columns:1fr}
  .drie>div,.drie>div+div{padding:26px 0 14px;border-right:0;border-bottom:1px solid rgba(237,232,223,.16)}
  .drie>div:last-child{border-bottom:0}
  .vak{grid-template-columns:1fr}
}
@media (max-width:760px){
  .vijf{grid-template-columns:1fr 1fr}
  .vijf div,.vijf div+div{padding:20px 14px 6px 0;border-right:0;border-top:1px solid var(--lijn)}
  .vijf div:nth-child(even){padding-left:14px;border-left:1px solid var(--lijn)}
  .gebied{grid-template-columns:1fr;gap:6px}
  .gebied>div:last-child{grid-column:auto;margin-top:10px}
  .gebied .nr{font-size:30px}
  .phero.metfoto figure{max-width:230px}
}

/* live: geen demobalk */
:root{--balk:0px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formfout{margin:4px 0 12px;padding:10px 12px;border-left:3px solid #A3341F;background:#FBEDEA;color:#7A2717;font-size:14.5px;line-height:1.5;border-radius:0 var(--r) var(--r) 0}
.formfout a{color:inherit;font-weight:600}
.bijlage{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin:4px 0 14px;padding:11px 13px;background:#F4EEE4;border-radius:var(--r);font-size:14.5px;line-height:1.5}
.bijlage button{flex:none;background:none;border:0;color:var(--warm-d);font-weight:600;font-size:14px;cursor:pointer;padding:0;text-decoration:underline}
.agenda{margin-top:16px}
.bijlage[hidden],.formfout[hidden],.direct[hidden]{display:none}
button[type=submit][disabled]{opacity:.7;cursor:progress}

/* scan 4-11 */
.over .eerder{margin:22px 0 4px;padding:14px 16px;border-left:2px solid var(--warm, #C8925C);background:rgba(255,255,255,.04);font-size:15.5px;line-height:1.55;max-width:560px}
.over .eerder b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;opacity:.75;font-weight:600}
.over .eerder a{color:inherit;text-underline-offset:3px;white-space:nowrap}
.privacy h2{font-size:clamp(24px,2.6vw,30px);margin:42px 0 12px}
.privacy h2:first-child{margin-top:0}
.privacy h3{font-size:18px;margin:24px 0 6px}
.voet .onder a{color:inherit;text-underline-offset:3px}
.kopbel{white-space:nowrap;font-weight:600;font-size:15px;color:inherit;text-decoration:none;margin-right:14px}
.kopbel:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:900px){.kopbel{display:none}}
.ingang404{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.ingang404 a{display:block;padding:22px;border:1px solid rgba(19,28,46,.14);border-radius:var(--r);color:inherit;text-decoration:none;transition:border-color .2s ease,transform .2s ease}
.ingang404 a:hover{border-color:currentColor;transform:translateY(-2px)}
.ingang404 small{font-size:12px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.ingang404 h3{margin:6px 0 6px}
.ingang404 p{margin:0;font-size:15px;line-height:1.5}
@media (prefers-reduced-motion:reduce){.ingang404 a{transition:none}.ingang404 a:hover{transform:none}}

/* 10-11: zes menu-items; onder 1180px het compacte menu */
@media (max-width:1180px){nav.hoofd{gap:20px}nav.hoofd a{font-size:14.5px}}
@media (max-width:1140px){nav.hoofd{display:none}.menuknop{display:block}.kopknop{display:none}}