/* Lokale fonts, gesubset per script. Geen externe CDN. */
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/manrope-300-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:300;font-display:swap;src:url('/fonts/manrope-300-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:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/manrope-400-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:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/manrope-500-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:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/manrope-600-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:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/manrope-700-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:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-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}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/manrope-800-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:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-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:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-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:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-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}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-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}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--blue:#185EA2;--blue-dark:#0D1B2E;--blue-mid:#12365C;--blue-light:#EBF2FA;--blue-50:#F5F8FC;--orange:#FF7233;--orange-btn:#FF7233;--orange-h:#E5601E;--orange-text:#FF7233;--g900:#0F1419;--g800:#1A1F26;--g700:#2D3440;--g600:#4A5568;--g500:#647285;--g400:#637896;--g300:#CBD5E1;--g200:#E2E8F0;--g100:#F1F5F9;--g50:#F8FAFC;--white:#FFF;--display:'Manrope',sans-serif;--body:'Inter',sans-serif}
html{scroll-behavior:smooth}body{font-family:var(--body);color:var(--g600);background:var(--white);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{max-width:100%;display:block;height:auto}a{text-decoration:none;color:inherit}button{font-family:inherit;cursor:pointer}.w{max-width:1200px;margin:0 auto;padding:0 32px}
h1,h2,h3,h4{font-family:var(--display);color:var(--blue-dark);line-height:1.12;letter-spacing:-.03em}h1{font-size:clamp(2.5rem,5.5vw,3.6rem);font-weight:800}h2{font-size:clamp(1.8rem,3.5vw,2.5rem);font-weight:700;color:var(--blue)}h3{font-size:1.25rem;font-weight:700;color:var(--blue-dark)}
.h-sec{font-size:1.25rem;font-weight:700;color:var(--blue-dark)}
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600;font-size:.9rem;padding:14px 28px;border-radius:12px;border:none;transition:all .25s ease}.btn-o{background:var(--orange-btn);color:var(--white);box-shadow:0 4px 14px rgba(255,114,51,.25)}.btn-o:hover{background:var(--orange-h);transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,114,51,.3)}.btn-w{background:rgba(255,255,255,.15);color:var(--white);border:1.5px solid rgba(255,255,255,.25);backdrop-filter:blur(8px)}.btn-w:hover{background:rgba(255,255,255,.25);border-color:rgba(255,255,255,.4)}.btn-outline{background:var(--white);color:var(--blue);border:1.5px solid var(--g200)}.btn-outline:hover{border-color:var(--blue);background:var(--blue-50)}.btn-lg{padding:16px 36px;font-size:1rem}
nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:all .3s ease}nav.scrolled{background:rgba(255,255,255,.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--g200);box-shadow:0 1px 8px rgba(0,0,0,.04)}.nav-in{display:flex;align-items:center;justify-content:space-between;height:72px;max-width:1200px;margin:0 auto;padding:0 32px}.nav-logo{display:flex;align-items:center;height:100%}.nav-logo img{height:64px;width:auto;transition:height .3s ease}nav.scrolled .nav-logo img{height:42px}.nav-logo .logo-white{display:none}nav.on-hero .nav-logo .logo-blue{display:none}nav.on-hero .nav-logo .logo-white{display:block}.nav-lk{display:flex;gap:4px;list-style:none}.nav-lk a{font-family:var(--display);font-size:.85rem;font-weight:500;color:var(--g600);padding:8px 14px;border-radius:8px;transition:all .2s;cursor:pointer}.nav-lk a:hover,.nav-lk a.on{color:var(--blue)}nav.on-hero .nav-lk a{color:rgba(255,255,255,.7)}nav.on-hero .nav-lk a:hover,nav.on-hero .nav-lk a.on{color:var(--white)}nav.scrolled .nav-lk a{color:var(--g600)}nav.scrolled .nav-lk a:hover,nav.scrolled .nav-lk a.on{color:var(--blue);background:var(--blue-light)}.nav-r{display:flex;align-items:center;gap:10px}.btn-portal{font-family:var(--display);font-size:.84rem;font-weight:600;color:var(--white);background:var(--blue);padding:9px 20px;border-radius:8px;border:none;transition:all .2s}.btn-portal:hover{background:var(--orange-btn);box-shadow:0 4px 12px rgba(255,114,51,.3)}nav.on-hero .btn-portal{background:var(--orange-btn);box-shadow:0 2px 8px rgba(255,114,51,.2)}nav.on-hero .btn-portal:hover{background:var(--orange-h)}nav.scrolled .btn-portal{color:var(--white);background:var(--blue)}nav.scrolled .btn-portal:hover{background:var(--orange-btn)}@media(max-width:900px){.nav-lk{display:none}}
/* .pg-schakelaar vervallen: elke pagina is nu een eigen document. */
.hero{position:relative;padding:0;overflow:hidden;background:linear-gradient(165deg,var(--blue-dark) 0%,#0F2847 40%,var(--blue) 100%);min-height:100vh}.hero-bg{position:absolute;inset:0;overflow:hidden}.hero-bg svg{position:absolute;width:100%;height:100%;opacity:.08}.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr;padding:160px 0 0}.hero-text{text-align:center;padding:0 32px}.hero h1{color:var(--white);margin-bottom:20px;max-width:700px;margin-left:auto;margin-right:auto}.hero h1 em{font-style:normal;color:var(--orange)}.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.95);max-width:540px;margin:0 auto 36px;line-height:1.75}.hero-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:64px}.hero-screen{position:relative;max-width:1100px;margin:0 auto;padding:0 24px}.hero-frame{background:var(--blue-dark);border-radius:16px 16px 0 0;box-shadow:0 -8px 60px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.08);overflow:hidden;border:1px solid rgba(255,255,255,.1);border-bottom:none}.hero-frame-bar{display:flex;align-items:center;gap:6px;padding:12px 16px;background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}.frame-dot{width:8px;height:8px;border-radius:50%}.frame-dot-r{background:#FF5F56}.frame-dot-y{background:#FFBD2E}.frame-dot-g{background:#27C93F}.frame-url{margin-left:12px;font-size:.7rem;color:rgba(255,255,255,.3);background:rgba(255,255,255,.06);padding:4px 14px;border-radius:6px}.hero-frame img{width:100%}.hero-fade{position:absolute;bottom:0;left:0;right:0;height:40px;background:linear-gradient(to bottom,transparent,var(--white));z-index:3}@media(max-width:768px){.hero{min-height:auto}.hero-grid{padding:120px 0 0}}
.sec{padding:72px 0}.sec-sm{padding:32px 0}.sec-hd{text-align:center;margin-bottom:36px}.sec-hd h2{margin-bottom:12px}.sec-hd p{font-size:1.05rem;color:var(--g500);max-width:520px;margin:0 auto;line-height:1.7}.bg-blue-light{background:var(--blue-50)}.bg-blue-grad{background:linear-gradient(180deg,var(--blue-50) 0%,var(--white) 100%)}.lbl{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-text)}
/* Minder lucht rond het model op de homepage: dichter op de introtekst,
   en een kortere overgang naar de sectie eronder. */
section.sec-model{padding-top:76px;padding-bottom:44px}
.sec-model .sec-hd{margin-bottom:40px}
.sec-na-model .sec-hd .divider{margin-bottom:20px}
section.sec-na-model{padding-top:44px}
@media(max-width:900px){section.sec-model{padding-top:52px;padding-bottom:32px}.sec-model .sec-hd{margin-bottom:30px}section.sec-na-model{padding-top:36px}}
/* Op brede schermen stond het model als een klein vlak in een container van
   1200 px, met 250 px leegte aan weerszijden. Breder laten meelopen vult dat
   op en maakt de labels in de tekening beter leesbaar. */
@media(min-width:1200px){div.model-clip{max-width:860px}}
/* De animatie heeft zelf een lege rand van 40 px boven en 33 px onder op
   1080 px breed. Die snijden we hier weg in plaats van het bestand opnieuw
   te coderen; de marges zijn procenten van de breedte, dus het schaalt mee. */
.model-clip{max-width:700px;margin:0 auto;overflow:hidden;border-radius:8px}
.model-clip video{display:block;width:100%;height:auto;margin:-3.33% 0 -2.69%}
.prob-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.prob{position:relative;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:36px 28px;transition:all .3s;overflow:hidden}.prob::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);transform:scaleX(0);transition:transform .3s}.prob:hover{border-color:var(--blue);box-shadow:0 8px 32px rgba(24,94,162,.08);transform:translateY(-2px)}.prob:hover::before{transform:scaleX(1)}.prob-icon{width:44px;height:44px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px}.prob-icon svg{color:var(--blue)}.prob h3{margin-bottom:8px;font-size:1.1rem}.prob p{font-size:.9rem;color:var(--g500);line-height:1.7}@media(max-width:768px){.prob-g{grid-template-columns:1fr}}
.flow-row{display:flex;align-items:flex-start;justify-content:center;gap:0;flex-wrap:wrap;margin-top:40px}.flow-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 28px}.flow-num{width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--white);font-family:var(--display);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}.flow-label{font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--blue-dark)}.flow-desc{font-size:.78rem;color:var(--g500);text-align:center;max-width:120px}.flow-arrow{color:var(--g300);font-size:1.4rem;margin:0 -8px;padding-top:28px}
.show{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}.show.rv{direction:rtl}.show.rv>*{direction:ltr}.show-t .lbl{margin-bottom:10px;display:block}.show-t h2{margin-bottom:10px;font-size:1.6rem}.show-t p{font-size:.92rem;color:var(--g500);line-height:1.75;margin-bottom:20px}.feat{list-style:none;margin-bottom:24px}.feat li{display:flex;align-items:flex-start;gap:10px;padding:6px 0;font-size:.88rem;color:var(--g600)}.ck{width:20px;height:20px;border-radius:50%;background:var(--blue-light);border:1.5px solid var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}.show-vis{border-radius:16px;overflow:hidden;box-shadow:0 4px 6px rgba(0,0,0,.03),0 20px 50px rgba(24,94,162,.1),0 0 0 1px var(--g200);transition:all .4s}.show-vis:hover{box-shadow:0 8px 12px rgba(0,0,0,.04),0 32px 64px rgba(24,94,162,.12),0 0 0 1px var(--blue);transform:translateY(-4px)}.show-vis img{width:100%}@media(max-width:900px){.show,.show.rv{grid-template-columns:1fr;direction:ltr;gap:32px}}
.res-g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.res{background:var(--white);border:1px solid var(--g200);border-radius:16px;overflow:hidden;transition:all .3s;position:relative}.res::after{content:'';position:absolute;inset:0;border-radius:16px;box-shadow:inset 0 0 0 1px transparent;transition:all .3s;pointer-events:none}.res:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(24,94,162,.1)}.res:hover::after{box-shadow:inset 0 0 0 2px var(--blue)}.res-top{padding:32px 24px 28px}.res-metric{font-family:var(--display);font-size:2.2rem;font-weight:800;color:var(--blue)}.res-metric span{color:var(--orange-text)}.res-top h3{margin:6px 0;font-size:1.05rem}.res-top p{font-size:.85rem;color:var(--g500);line-height:1.65}@media(max-width:768px){.res-g{grid-template-columns:1fr}}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--blue-dark),var(--blue));box-shadow:0 16px 48px rgba(24,94,162,.2)}.stat{padding:40px 24px;text-align:center;border-right:1px solid rgba(255,255,255,.1)}.stat:last-child{border:none}.stat-v{font-family:var(--display);font-size:2.4rem;font-weight:800;color:var(--white)}.stat-l{font-size:.82rem;color:rgba(255,255,255,.5);margin-top:4px}@media(max-width:600px){.stats{grid-template-columns:1fr 1fr}.stat{border-bottom:1px solid rgba(255,255,255,.1)}}
.cta{background:linear-gradient(135deg,var(--blue-dark),var(--blue));border-radius:24px;padding:72px 48px;text-align:center;position:relative;overflow:hidden;box-shadow:0 16px 48px rgba(24,94,162,.15)}.cta::before{content:'';position:absolute;top:-100px;right:-100px;width:400px;height:400px;background:radial-gradient(circle,rgba(255,114,51,.1),transparent 70%);border-radius:50%}.cta h2{color:var(--white);margin-bottom:12px}.cta p{color:rgba(255,255,255,.55);margin-bottom:32px;font-size:1.05rem}.cta .btn,.cta-sub{position:relative;z-index:1}.cta-sub{display:block;margin-top:14px;font-size:.8rem;color:rgba(255,255,255,.35)}
.seg-g{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.seg{padding:32px;background:var(--white);border:1px solid var(--g200);border-radius:16px;transition:all .3s;overflow:hidden;position:relative}.seg::before{content:'';position:absolute;top:0;left:0;width:4px;height:100%;background:var(--blue);transform:scaleY(0);transition:transform .3s}.seg:hover{border-color:var(--blue);box-shadow:0 8px 28px rgba(24,94,162,.08)}.seg:hover::before{transform:scaleY(1)}.seg h3{font-size:1rem;margin-bottom:6px;color:var(--blue)}.seg p{font-size:.88rem;color:var(--g500);line-height:1.7}@media(max-width:600px){.seg-g{grid-template-columns:1fr}}
.pilot-g{display:grid;grid-template-columns:repeat(3,1fr);border-radius:20px;overflow:hidden;border:1px solid var(--g200)}.pilot{background:var(--white);padding:36px 28px;border-right:1px solid var(--g200)}.pilot:last-child{border:none}.pilot-n{width:32px;height:32px;border-radius:50%;background:var(--blue);color:var(--white);font-family:var(--display);font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;margin-bottom:14px}.pilot h4{margin-bottom:6px;color:var(--blue-dark)}.pilot p{font-size:.85rem;color:var(--g500);line-height:1.7}@media(max-width:768px){.pilot-g{grid-template-columns:1fr}.pilot{border-right:none;border-bottom:1px solid var(--g200)}}
.case-g{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.case{padding:28px;border:1px solid var(--g200);border-radius:16px;transition:all .3s;overflow:hidden;position:relative}.case::before{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange));transform:scaleX(0);transition:transform .3s}.case:hover{box-shadow:0 8px 28px rgba(24,94,162,.08);transform:translateY(-2px)}.case:hover::before{transform:scaleX(1)}.case-type{font-family:var(--display);font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);margin-bottom:8px}.case h4,.case h3{margin-bottom:8px;font-size:1rem;color:var(--blue-dark);line-height:1.35}.case p{font-size:.85rem;color:var(--g500);line-height:1.65;margin-bottom:14px}.case-stat{font-family:var(--display);font-size:1.2rem;font-weight:800;color:var(--orange-text)}@media(max-width:768px){.case-g{grid-template-columns:1fr}}
.ct-g{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start}.ct-f{background:var(--white);border:1px solid var(--g200);border-radius:20px;padding:40px;box-shadow:0 4px 24px rgba(0,0,0,.04)}.ct-f h2{font-size:1.25rem;margin-bottom:4px;color:var(--blue)}.ct-f>p{color:var(--g500);margin-bottom:24px;font-size:.9rem}.fn{font-size:.72rem;color:var(--g400);margin-top:10px}.ct-actions{display:flex;flex-wrap:wrap;gap:12px}
.ct-actions .btn{flex:1 1 220px;justify-content:center}
.ct-resp{font-size:.8rem;font-weight:600;color:var(--blue);margin-top:16px;text-align:center}
.ct-side{display:flex;flex-direction:column;gap:12px}.ct-c{border:1px solid var(--g200);border-radius:12px;padding:20px;transition:all .2s}.ct-c:hover{border-color:var(--blue);background:var(--blue-50)}.ct-c h3{margin-bottom:2px;font-size:.9rem;color:var(--blue-dark)}.ct-c p{font-size:.82rem;color:var(--g500);margin-bottom:4px}.ct-c a{font-family:var(--display);font-size:.9rem;font-weight:700;color:var(--blue)}.trust{background:var(--blue-50);border:1px solid var(--blue-light);border-radius:12px;padding:20px}.trust div{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--g600);padding:4px 0}.trust div svg,.trust div span.trust-icon{display:inline-flex;width:20px;justify-content:center;flex-shrink:0}@media(max-width:768px){.ct-g{grid-template-columns:1fr}}
.faq-l{max-width:700px;margin:0 auto}.faq-i{border-bottom:1px solid var(--g200)}.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;padding:20px 0;background:none;border:none;font-family:var(--display);font-size:.95rem;font-weight:600;color:var(--blue-dark);text-align:left;transition:color .2s}.faq-q:hover{color:var(--blue)}.faq-ic{color:var(--g300);transition:all .25s;flex-shrink:0;font-size:1.1rem}.faq-a{max-height:0;overflow:hidden;transition:max-height .4s ease}.faq-a p{padding:0 0 20px;font-size:.88rem;color:var(--g500);line-height:1.75}.faq-i.open .faq-ic{transform:rotate(45deg);color:var(--orange-text)}.faq-i.open .faq-a{max-height:300px}
.ft{border-top:1px solid var(--g200);padding:40px 0 20px;margin-top:48px}.ft-g{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px}.ft-brand img{height:48px;width:auto;margin-bottom:10px}.ft-brand p{font-size:.82rem;color:var(--g400);line-height:1.7;max-width:230px}.ft .ft-h{font-family:var(--display);font-size:.65rem;font-weight:700;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}.ft-lk{list-style:none}.ft-lk li{margin-bottom:7px}.ft-lk a{font-size:.84rem;color:var(--g500);transition:color .15s;cursor:pointer}.ft-lk a:hover{color:var(--orange-text)}.ft-bot{padding-top:18px;border-top:1px solid var(--g100);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}.ft-bot span{font-size:.72rem;color:var(--g400);display:inline-flex;align-items:center;gap:4px}@media(max-width:768px){.ft-g{grid-template-columns:1fr 1fr}}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}.rv.v{opacity:1;transform:translateY(0)}.rv-d1{transition-delay:.1s}.rv-d2{transition-delay:.2s}
.tp{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}.tp span{font-family:var(--display);font-size:.72rem;font-weight:600;color:var(--blue);background:var(--blue-50);border:1px solid var(--blue-light);padding:5px 14px;border-radius:100px}
.ph{position:relative;overflow:hidden;padding:140px 0 96px;text-align:center;background:linear-gradient(165deg,var(--blue-dark) 0%,#0F2847 40%,var(--blue) 100%)}.ph::after{content:'';position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(to bottom,rgba(255,255,255,0),var(--ph-fade,var(--white)));pointer-events:none}.ph>.w{position:relative;z-index:1}.ph h1{margin-top:10px;color:var(--white);text-wrap:balance}.ph p{font-size:1.05rem;color:rgba(255,255,255,.88);max-width:560px;margin:14px auto 0;line-height:1.75}
.divider{width:60px;height:3px;background:linear-gradient(90deg,var(--blue),var(--orange));border-radius:3px;margin:0 auto 20px}

/* ══ MOBILE MENU ══ */
.nav-toggle{display:none;background:none;border:none;padding:10px;cursor:pointer;z-index:201;position:relative;width:40px;height:40px}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--g600);position:absolute;left:10px;transition:all .3s ease}
.nav-toggle span:nth-child(1){top:12px}
.nav-toggle span:nth-child(2){top:19px}
.nav-toggle span:nth-child(3){top:26px}
.nav-toggle.active span:nth-child(1){top:19px;transform:rotate(45deg)}
.nav-toggle.active span:nth-child(2){opacity:0;transform:translateX(-8px)}
.nav-toggle.active span:nth-child(3){top:19px;transform:rotate(-45deg)}
nav.on-hero .nav-toggle span{background:var(--white)}
nav.scrolled .nav-toggle span,.nav-toggle.active span{background:var(--g600)}
.mobile-overlay{position:fixed;inset:0;background:var(--white);z-index:200;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:all .3s ease}
.mobile-overlay.open{opacity:1;visibility:visible}
.mobile-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;height:60px;border-bottom:1px solid var(--g100)}
.mobile-overlay-header img{height:32px;width:auto}
.mobile-overlay-close{background:none;border:none;padding:10px;cursor:pointer;width:40px;height:40px;position:relative}
.mobile-overlay-close span{display:block;width:20px;height:2px;background:var(--g600);position:absolute;left:10px;top:19px}
.mobile-overlay-close span:first-child{transform:rotate(45deg)}
.mobile-overlay-close span:last-child{transform:rotate(-45deg)}
.mobile-overlay-body{flex:1;display:flex;flex-direction:column;padding:32px 24px}
.mobile-overlay-links{list-style:none;flex:1}
.mobile-overlay-links li{border-bottom:1px solid var(--g100)}
.mobile-overlay-links a{display:block;padding:18px 0;font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--g700);transition:color .2s}
.mobile-overlay-links a.on{color:var(--blue)}
.mobile-overlay-links a:active{color:var(--blue)}
.mobile-overlay-footer{padding:24px 0;border-top:1px solid var(--g100);display:flex;flex-direction:column;gap:12px}
.mobile-overlay-footer .btn{width:100%;justify-content:center}
.mobile-overlay-contact{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.mobile-overlay-contact a{font-size:.85rem;color:var(--g500);display:flex;align-items:center;gap:8px}

/* ══ TABLET (768-1024) ══ */
@media(max-width:1024px){
  .w{padding:0 24px}
  .sec{padding:90px 0}.sec-sm{padding:60px 0}
  .hero-grid{padding:140px 0 0}
  .hero-btns .btn-lg{padding:14px 28px;font-size:.9rem}
  .show{gap:40px}
  .show-t h2{font-size:1.4rem}
  .stats .stat-v{font-size:2rem}
  .cta{padding:56px 36px}
  .ph{padding:130px 0 90px}
  .ft-g{gap:28px}
}

/* ══ MOBILE (max 768) ══ */
@media(max-width:768px){
  .nav-toggle{display:block}
@media(max-width:900px){
  .nav-in{padding:0 16px}
  .nav-r{order:3}
  .nav-toggle{order:2;margin:0 auto}
  .nav-logo{order:1}
  .btn-portal{font-size:.78rem;padding:7px 14px}
}

  .nav-lk{display:none}
  .nav-in{height:60px;padding:0 16px}
  .nav-logo img{height:32px}
  .w{padding:0 16px}
  h1{font-size:2rem!important}
  h2{font-size:1.5rem!important}
  .sec{padding:48px 0}.sec-sm{padding:32px 0}
  .sec-hd{margin-bottom:36px}
  .sec-hd p{font-size:.92rem}
  .hero{min-height:auto}
  .hero-grid{padding:100px 0 0}
  .hero-text{padding:0 16px}
  .hero h1{font-size:2rem!important;margin-bottom:16px}
  .hero-sub{font-size:.95rem;margin-bottom:24px}
  .hero-btns{flex-direction:column;align-items:center;margin-bottom:40px}
  .hero-btns .btn{width:100%;justify-content:center;max-width:300px}
  .hero-screen{padding:0 12px}
  .hero-fade{height:80px}
  .prob-g{grid-template-columns:1fr;gap:12px}
  .prob{padding:28px 20px}
  .flow-row{flex-direction:column;gap:0;align-items:center}
  .flow-item{padding:12px 20px}
  .flow-arrow{transform:rotate(90deg);padding:0;margin:0}
  .show,.show.rv{grid-template-columns:1fr;direction:ltr;gap:24px}
  .show-t h2{font-size:1.3rem!important}
  .show-t p{font-size:.88rem}
  .show-vis{border-radius:12px}
  .res-g{grid-template-columns:1fr;gap:12px}
  .stats{grid-template-columns:1fr 1fr;border-radius:14px}
  .stat{padding:28px 16px}
  .stat-v{font-size:1.8rem}
  .cta{border-radius:16px;padding:40px 24px}
  .cta h2{font-size:1.4rem!important}
  .seg-g{grid-template-columns:1fr;gap:12px}
  .seg{padding:24px 20px}
  .pilot-g{grid-template-columns:1fr}
  .pilot{border-right:none;border-bottom:1px solid var(--g200);padding:28px 20px}
  .pilot:last-child{border:none}
  .case-g{grid-template-columns:1fr;gap:12px}
  .case{padding:24px 20px}
  .ct-g{grid-template-columns:1fr;gap:20px}
  .ct-f{padding:28px 20px;border-radius:14px}
  
  
  .ft{padding:40px 0 20px;margin-top:48px}
  .ft-g{grid-template-columns:1fr 1fr;gap:24px}
  .ft-bot{flex-direction:column;text-align:center;gap:4px}
  .ph{padding:110px 0 76px}
  .ph p{font-size:.92rem}
  .tp{gap:6px;margin-top:14px}
  .tp span{font-size:.65rem;padding:4px 10px}
  .btn-lg{padding:14px 24px;font-size:.9rem}
  .divider{margin-bottom:14px}
  .faq-q{font-size:.88rem;padding:16px 0}
}

/* ══ SMALL MOBILE (max 400) ══ */
@media(max-width:400px){
  h1{font-size:1.7rem!important}
  .hero h1{font-size:1.7rem!important}
  .stat-v{font-size:1.5rem}
  .res-metric{font-size:1.8rem}
  .flow-label{font-size:.78rem}
}

/* ══ ANIMATED CTA PATHS ══ */
.cta{position:relative;overflow:hidden}
.cta-paths{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cta-paths svg{width:100%;height:100%;position:absolute;inset:0}
.cta-paths path{animation:pathFlow 20s linear infinite}
.cta-paths .set2 path{animation:pathFlow 25s linear infinite reverse}
@keyframes pathFlow{
  0%{stroke-dashoffset:1000}
  100%{stroke-dashoffset:0}
}


/* ══ EXTRA BACKGROUNDS ══ */
.bg-blue-dark{background:linear-gradient(135deg,var(--blue-dark),var(--blue));color:var(--white)}
.bg-blue-dark h2,.bg-blue-dark h3,.bg-blue-dark h4{color:var(--white)}
.bg-blue-dark p,.bg-blue-dark li{color:rgba(255,255,255,.75)}
.bg-blue-dark .lbl{color:var(--orange)}
.{background:#FAFAF7}
.bg-blue-light{background:var(--g50)}
.hero-stats{display:flex;gap:32px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.hero-stat{display:flex;align-items:center;gap:6px;font-family:var(--display);font-size:.82rem;color:rgba(255,255,255,.6)}
.hero-stat strong{color:var(--white);font-weight:700;font-size:.95rem}
.timeline{display:flex;justify-content:space-between;position:relative;max-width:980px;margin:0 auto 36px;padding:0 16px}
.timeline::before{content:'';position:absolute;top:21px;left:58px;right:58px;height:2px;background:var(--g200)}
.timeline-step{display:flex;flex-direction:column;align-items:center;gap:12px;position:relative;z-index:1}
.timeline-dot{width:42px;height:42px;border-radius:50%;background:var(--blue);color:var(--white);font-family:var(--display);font-size:.85rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.timeline-dot.active{background:var(--orange)}
.timeline-label{font-family:var(--display);font-size:1.15rem;font-weight:600;color:var(--blue-dark);text-align:center;max-width:160px}
.timeline-time{font-size:.8rem;color:var(--g400)}.tn-strip{padding:30px 0;background:var(--g50)}.tn-strip-in{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap}.tn-strip-in img{width:150px;height:auto;display:block}.tn-strip-in p{margin:0;font-size:.95rem;font-weight:500;color:var(--g500)}.tn-footer-logo{width:140px;height:auto;display:block;margin-top:22px}
.quote{border-left:3px solid var(--orange);padding:12px 20px;margin-top:12px;font-style:italic;font-size:.85rem;color:var(--g500);background:var(--g50);border-radius:0 8px 8px 0}
.expect-steps{display:flex;align-items:center;gap:0;justify-content:center;flex-wrap:wrap;margin:24px 0}
.expect-step{text-align:center;padding:12px 20px}
.expect-step strong{display:block;font-family:var(--display);font-size:.85rem;color:var(--blue-dark)}
.expect-step span{font-size:.75rem;color:var(--g500)}
.expect-arrow{color:var(--g300);font-size:1.2rem}
@media(max-width:768px){.hero-stats{gap:16px}.timeline{flex-wrap:wrap;gap:18px;justify-content:center}.timeline::before{display:none}.expect-steps{flex-direction:column;gap:4px}.expect-arrow{transform:rotate(90deg)}}


/* ══ SPLASH SCREEN ══ */
.splash{position:fixed;inset:0;z-index:9999;background:linear-gradient(165deg,#0D1B2E 0%,#0F2847 40%,#185EA2 100%);display:flex;align-items:center;justify-content:center;animation:splashOut .6s cubic-bezier(.4,0,.2,1) .6s forwards}
@keyframes splashOut{to{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none}}
.splash-logo{opacity:0;transform:scale(0.7);animation:splashIn .5s ease forwards .05s}
.splash-logo img{height:200px;width:auto}
@keyframes splashIn{0%{opacity:0;transform:scale(0.7)}60%{opacity:1;transform:scale(1.04)}100%{opacity:1;transform:scale(1)}}
.values{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.value{flex:0 0 calc(33.333% - 16px);max-width:360px;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:28px 26px;text-align:left;transition:all .3s}.value:hover{border-color:var(--blue);box-shadow:0 8px 32px rgba(24,94,162,.08);transform:translateY(-2px)}
.value-num{width:40px;height:40px;border-radius:10px;background:var(--blue-50);color:var(--blue);font-family:var(--display);font-weight:800;font-size:1rem;display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.value h3{font-size:1.1rem;line-height:1.3}
.tm-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:28px}
.tm-card{flex:0 0 calc(33.333% - 19px);max-width:340px;margin:0;text-align:center}
.tm-photo{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:var(--blue-light)}
.tm-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.tm-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:800;font-size:2.4rem;letter-spacing:.03em;color:var(--blue);background:linear-gradient(135deg,var(--blue-light),var(--blue-50))}
.tm-name{display:block;font-family:var(--display);font-weight:700;color:var(--blue-dark);font-size:1.05rem;margin-top:16px}
.tm-role{display:block;color:var(--g500);font-size:.9rem;margin-top:3px;line-height:1.5}.value p{margin-top:10px;color:var(--g500);font-size:.92rem;line-height:1.6}.about-lead{font-size:1.15rem;line-height:1.75;color:var(--g600);max-width:780px;margin:0 auto;text-align:center}.mv-grid{display:flex;flex-wrap:wrap;gap:20px;max-width:900px;margin:8px auto 0}.mv{flex:1 1 340px;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:26px 30px}.mv .lbl{margin-bottom:8px}.mv p{color:var(--g600);line-height:1.7}.mv-icon{width:44px;height:44px;border-radius:12px;background:var(--blue-light);display:flex;align-items:center;justify-content:center;margin-bottom:16px;color:var(--blue)}.tn-band{display:flex;align-items:center;justify-content:center;gap:28px;max-width:760px;margin:0 auto;flex-wrap:wrap}.tn-band img{width:180px;height:auto;flex-shrink:0}#pg-over-ons .tn-band img{width:220px}.value h3{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--blue);line-height:1.12;letter-spacing:-.03em;margin-bottom:6px}.tn-band p{margin:0;color:var(--g600);line-height:1.7;max-width:440px}.timeline-desc{font-size:.95rem;color:var(--g500);line-height:1.55;max-width:190px;margin-top:6px;text-align:center}.pilot-live{margin:36px auto 0;max-width:760px;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:26px 32px;text-align:center}.pilot-live .lbl{margin-bottom:8px;display:block}.pilot-live p{color:var(--g600);line-height:1.7;margin:0}.ft-logos{display:flex;align-items:center;gap:16px;margin-bottom:10px}.ft-logos img{margin:0}.ft-tn-inline{height:48px;width:auto;display:block}.ft-logo-div{width:1px;height:34px;background:var(--g200);flex-shrink:0}.tn-about{text-align:center;max-width:640px;margin:0 auto}.tn-about img{width:150px;height:auto;display:block;margin:0 auto 18px}.tn-about p{color:var(--g600);line-height:1.7}.about-cta{text-align:center;padding:4px 0}.about-cta p{color:var(--g600);margin-bottom:18px}.ft-tn{border-top:1px solid var(--g200);padding:28px 0;display:flex;justify-content:center}.ft-tn img{width:140px;height:auto;display:block}
@media(max-width:900px){.value{flex:0 0 calc(50% - 12px)}.tm-card{flex:0 0 calc(50% - 14px)}}
@media(max-width:600px){.value{flex:0 0 100%}.tm-card{flex:0 0 100%;max-width:320px}}

/* Splash: alleen bij het eerste bezoek van een sessie. De klasse wordt in de
   <head> gezet voordat er iets geschilderd wordt, zodat er geen flits ontstaat. */
html.no-splash .splash{display:none}

/* Scroll-reveals zichtbaar houden zonder JavaScript. */
.no-js .rv{opacity:1;transform:none}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .splash{display:none}
  .rv{opacity:1;transform:none;transition:none}
  .cta-paths svg path{animation:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

/* Doorverwijzing vanaf de homepage naar een subpagina. */
.more{text-align:center;margin-top:28px}

/* ══ LOPENDE TEKST ══
   Eén typografie voor alles wat lang is: de artikelen in het kenniscentrum en
   de juridische pagina's. Vervangt de inline margin-bottom die daar per alinea
   stond. Alle maten en kleuren komen uit de tokens bovenin dit bestand.
   .prose-juridisch houdt het strakkere ritme dat /privacy en /voorwaarden al
   hadden: bepalingen dicht op elkaar, ruimte alleen boven een kop. */
.w.smal{max-width:800px}
.prose{color:var(--g600)}
.prose>:first-child{margin-top:0}
.prose>:last-child{margin-bottom:0}
.prose p{margin-bottom:20px;line-height:1.8}
.prose h2{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--blue-dark);line-height:1.3;letter-spacing:-.02em;margin:34px 0 8px}
.prose h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--blue-dark);line-height:1.35;letter-spacing:-.02em;margin:26px 0 6px}
.prose ul,.prose ol{margin:0 0 20px 22px;padding-left:0}
.prose li{margin-bottom:8px;line-height:1.75}
.prose li>ul,.prose li>ol{margin:8px 0 0 20px}
.prose a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.prose a:hover{color:var(--orange-text)}
.prose strong{color:var(--g700);font-weight:600}
.prose blockquote{border-left:3px solid var(--orange);background:var(--g50);border-radius:0 8px 8px 0;padding:12px 20px;margin:0 0 20px;color:var(--g500);font-style:italic}
.prose blockquote p:last-child{margin-bottom:0}
.prose code{font-size:.9em;background:var(--g100);border-radius:4px;padding:2px 5px}
.prose hr{border:none;border-top:1px solid var(--g200);margin:32px 0}
/* Een brede tabel schuift in zijn eigen kader, nooit de pagina zelf. */
.tabel{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 20px}
.prose table{width:100%;border-collapse:collapse;font-size:.9rem;margin:0}
.prose thead th{font-family:var(--display);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue);text-align:left;white-space:nowrap;border-bottom:2px solid var(--g200);padding:0 18px 10px 0}
.prose tbody td{border-bottom:1px solid var(--g100);padding:11px 18px 11px 0;color:var(--g600);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:none}
.prose th:last-child,.prose td:last-child{padding-right:0}
.prose-juridisch p{margin-bottom:6px;line-height:1.65}
.prose-juridisch h2{margin:24px 0 8px}
.prose-juridisch ul,.prose-juridisch ol{margin:0 0 6px 20px}
.prose-juridisch li{margin-bottom:0}

/* ══ KENNISCENTRUM ══ */
/* position:static is nodig: de broodkruimel is een <nav>, en de kale
   nav-selector bovenin dit bestand zet elke <nav> vast bovenaan het scherm. */
.kruimel{position:static;font-family:var(--display);font-size:.78rem;font-weight:600;color:rgba(255,255,255,.55);margin-bottom:12px}
.kruimel a{color:rgba(255,255,255,.88);transition:color .2s}
.kruimel a:hover{color:var(--orange-text)}
/* Het filter in een kolom links van de vragen: een lijst met rechts het aantal,
   de actieve regel op --blue-50. Op een breed scherm schuift de kolom mee met
   de pagina; 96 px is de navigatiebalk plus lucht. */
.kc-raster{display:grid;grid-template-columns:230px minmax(0,1fr);gap:40px;align-items:start}
.filterkol{position:sticky;top:96px}
.filterkol>summary{display:none}
.fk-groep+.fk-groep{margin-top:24px}
.fk-kop{display:block;font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin:0 0 6px 12px}
.fk-groep ul{list-style:none;margin:0;padding:0}
.fk-groep a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:7px 12px;border-radius:8px;font-size:.9rem;color:var(--g600);transition:background .2s,color .2s}
.fk-groep a:hover{background:var(--blue-50);color:var(--blue)}
.fk-groep a.aan{background:var(--blue-50);color:var(--blue-dark);font-weight:600}
.fk-aantal{font-size:.75rem;font-weight:500;color:var(--g400);font-variant-numeric:tabular-nums}
.fk-groep a.aan .fk-aantal{color:var(--blue)}
.vraag-g{grid-template-columns:repeat(2,1fr)}
.groep+.groep{margin-top:44px}
.groep-kop{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--blue-dark);letter-spacing:-.02em;line-height:1.3;margin-bottom:16px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.groep-aantal{font-family:var(--body);font-size:.78rem;font-weight:400;color:var(--g400)}
.groep-kop a{transition:color .2s}
.groep-kop a:hover{color:var(--blue)}
.case{display:block}
/* Een vraagkaart: onderwerp, de vraag, en onderaan op een vaste plek het thema
   en de link. Een kolom met flex, zodat die voet in elke kaart van een rij op
   dezelfde hoogte staat, hoe lang de vraag ook is. */
.case.vraag{display:flex;flex-direction:column}
.vraag h3{margin-bottom:18px}
.vraag-voet{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--g100)}
.vraag-thema{font-size:.76rem;color:var(--g400);line-height:1.5}
.vraag-voet .case-lees{margin-left:auto;white-space:nowrap}
.case-lees{font-family:var(--display);font-size:.8rem;font-weight:600;color:var(--blue);transition:color .3s}
.case:hover .case-lees{color:var(--orange-text)}

/* Het antwoordblok is het deel dat anderen overnemen, dus het mag opvallen.
   Het volgt de vorm van .quote: lichte achtergrond, gekleurde linkerrand. */
.antwoord{border-left:4px solid var(--orange);background:var(--g50);border-radius:0 12px 12px 0;padding:20px 26px;margin-bottom:22px}
.antwoord p{font-size:1.05rem;line-height:1.75;color:var(--g700);margin:0}
/* De kernpunten onder het antwoord. Compact en ondergeschikt aan het
   antwoordblok: geen kader, geen tweede gekleurde rand, alleen een klein grijs
   bolletje als teken. */
.kernpunten{list-style:none;margin:0 0 24px;padding:0}
.kernpunten li{position:relative;padding-left:20px;margin-bottom:7px;font-size:.92rem;line-height:1.65;color:var(--g500)}
.kernpunten li:last-child{margin-bottom:0}
.kernpunten li::before{content:'';position:absolute;left:3px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--g300)}
.art-meta{font-size:.8rem;color:var(--g400);margin-bottom:30px;padding-bottom:18px;border-bottom:1px solid var(--g200)}
.art-meta a{color:var(--blue);font-weight:500;transition:color .2s}
.art-meta a:hover{color:var(--orange-text)}
.slot{background:#19324A;border:1px solid var(--orange);border-radius:12px;padding:26px 30px;margin:34px 0 30px}
.slot .lbl{display:block;margin-bottom:6px}
.slot p{color:rgba(255,255,255,.82);line-height:1.75;margin:0}
.slot a{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:4px;transition:color .2s}
.slot a:hover{color:var(--orange-text)}
.art-kop{font-family:var(--display);font-size:1.25rem;font-weight:700;color:var(--blue-dark);letter-spacing:-.02em;line-height:1.3;margin-bottom:12px}
.bronnen{margin:0 0 0 20px;padding-left:0}
.bronnen li{font-size:.88rem;color:var(--g500);line-height:1.7;margin-bottom:10px}
.bronnen a{color:var(--blue);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.bronnen a:hover{color:var(--orange-text)}

/* ══ BEDRIJFSGEGEVENS IN DE FOOTER ══
   In de onderbalk, waar al ruimte over was, zodat de footer niet groeit. */
.ft-bot .ft-id{text-align:center}

/* Onder 900 px staat het filter boven de vragen en is het één regel die
   openklapt. src/main.js klapt hem dicht bij het laden; zonder JavaScript
   blijft hij open. */
@media(max-width:900px){
  .kc-raster{grid-template-columns:1fr;gap:20px}
  .filterkol{position:static;border:1px solid var(--g200);border-radius:12px;background:var(--white)}
  .filterkol>summary{display:flex;align-items:center;gap:10px;padding:13px 16px;cursor:pointer;list-style:none;font-family:var(--display);font-size:.88rem;font-weight:600;color:var(--blue-dark)}
  .filterkol>summary::-webkit-details-marker{display:none}
  .filterkol>summary::after{content:'';margin-left:auto;width:7px;height:7px;border-right:2px solid var(--g400);border-bottom:2px solid var(--g400);transform:rotate(45deg);transition:transform .2s}
  .filterkol[open]>summary::after{transform:rotate(-135deg)}
  .filterkol-keuze{font-family:var(--body);font-weight:400;font-size:.82rem;color:var(--g500)}
  .filterkol-in{padding:8px 6px 12px;border-top:1px solid var(--g100)}
}
@media(max-width:768px){.vraag-g{grid-template-columns:1fr}}
@media(max-width:768px){
  .antwoord{padding:16px 18px;border-radius:0 10px 10px 0}
  .antwoord p{font-size:.98rem}
  .slot{padding:18px 20px;border-radius:12px}
  .art-meta{font-size:.76rem}
  .groep+.groep{margin-top:34px}
  .prose p{line-height:1.75}
  .prose h2{margin-top:28px}
}

/* ══ KERNCIJFER, BRONREGEL EN FIGUUR ══ */
/* Het kerncijfer: één getal uit het artikel, groot, met de bron eronder. */
.kerncijfer{background:#19324A;border:1px solid var(--orange);border-radius:12px;padding:26px 28px;margin:28px 0}
.kerncijfer-v{font-family:var(--display);font-size:3rem;font-weight:800;line-height:1;color:var(--white);letter-spacing:-.03em}
.kerncijfer-u{margin:10px 0 0;font-size:1rem;line-height:1.7;color:rgba(255,255,255,.8)}
.kerncijfer .bronregel{margin-top:12px;color:rgba(255,255,255,.55)}

.bronregel{font-size:.75rem;line-height:1.6;color:var(--g400)}
.tabel-blok{margin:0 0 24px}
.tabel-blok .tabel{margin-bottom:8px}
.figuur{margin:26px 0}
.figuur img{width:100%;border-radius:16px;border:1px solid var(--g200)}
.figuur .bronregel{margin-top:10px}
.figuur-tekst{display:block;font-size:.85rem;color:var(--g500);line-height:1.7;margin-bottom:2px}
.figuur-bron{display:block}

@media(max-width:768px){
  .kerncijfer{padding:20px 20px;border-radius:12px}
  .kerncijfer-v{font-size:2.4rem}
  .kerncijfer-u{font-size:.94rem}
}

/* ══ THEMA'S ══
   De sectie is .sec met .bg-blue-light, dezelfde lichtgrijze achtergrond als
   "Zes manieren waarop u wordt ontzorgd" op de homepage, en de kop erboven een
   gewone .sec-hd met het streepje.

   In rust is een themakaart een witte kaart, zoals de vraagkaarten eronder:
   dunne grijze rand, donkerblauwe titel, grijze tekst, pictogram en pijl in
   blauw. Bij hover of toetsenbordfocus wordt hij de kaart in presentatiestijl:
   een navy vlak (#19324A) met een oranje rand, witte tekst, pictogram en pijl in
   oranje en het aantal in wit. Alleen kleuren wisselen, geen maten, zodat er
   niets verspringt. */
.thema-g{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.thema-kaart{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:30px 28px 24px;transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.thema-kaart:hover,.thema-kaart:focus-visible{background:#19324A;border-color:var(--orange);box-shadow:0 10px 28px rgba(14,40,65,.18);transform:translateY(-3px)}
.thema-kaart:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.thema-ic{display:block;color:var(--blue);line-height:0;margin-bottom:22px;transition:color .25s}
.thema-kaart h3{font-size:1.12rem;line-height:1.3;color:var(--blue-dark);margin-bottom:12px;transition:color .25s}
.thema-kaart p{font-size:.9rem;color:var(--g500);line-height:1.7;margin:0 0 24px;transition:color .25s}
.thema-kaart .thema-aantal{margin-top:auto;padding-top:18px;border-top:1px solid var(--g100);display:flex;align-items:baseline;gap:8px;font-family:var(--body);font-size:.88rem;color:var(--g400);transition:color .25s,border-color .25s}
.thema-aantal b{font-family:var(--display);font-size:2.1rem;font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--blue-dark);transition:color .25s}
.thema-pijl{margin-left:auto;color:var(--blue);font-size:1.1rem;transition:color .25s,transform .2s}
.thema-kaart:hover .thema-ic,.thema-kaart:focus-visible .thema-ic,.thema-kaart:hover .thema-pijl,.thema-kaart:focus-visible .thema-pijl{color:var(--orange)}
.thema-kaart:hover h3,.thema-kaart:focus-visible h3,.thema-kaart:hover .thema-aantal b,.thema-kaart:focus-visible .thema-aantal b{color:var(--white)}
.thema-kaart:hover p,.thema-kaart:focus-visible p{color:rgba(255,255,255,.72)}
.thema-kaart:hover .thema-aantal,.thema-kaart:focus-visible .thema-aantal{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.12)}
.thema-kaart:hover .thema-pijl,.thema-kaart:focus-visible .thema-pijl{transform:translateX(4px)}
@media(max-width:1024px){.thema-g{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.thema-g{grid-template-columns:1fr}}

/* De artikelen binnen een thema staan in leesvolgorde, niet op datum. Een
   genummerde lijst maakt dat zichtbaar; kaarten in een raster zouden die
   volgorde juist verbergen. */
.thema-lijst{list-style:none;counter-reset:thema;margin:0 0 4px;padding:0}
.thema-lijst li{counter-increment:thema;position:relative;padding-left:40px;margin-bottom:20px}
.thema-lijst li:last-child{margin-bottom:0}
.thema-lijst li::before{content:counter(thema);position:absolute;left:0;top:0;width:27px;height:27px;border-radius:50%;background:var(--blue-50);border:1px solid var(--blue-light);color:var(--blue);font-family:var(--display);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.thema-lijst a{display:block;font-family:var(--display);font-size:1rem;font-weight:700;color:var(--blue-dark);line-height:1.35;letter-spacing:-.01em;transition:color .2s}
.thema-lijst a:hover{color:var(--blue)}
.thema-lijst span{display:block;margin-top:4px;font-size:.88rem;color:var(--g500);line-height:1.65}

@media(max-width:768px){
  .thema-kaart{padding:24px 22px 20px}
  .thema-lijst li{padding-left:34px;margin-bottom:16px}
  .thema-lijst li::before{width:24px;height:24px;font-size:.7rem}
}


/* Een zijdeur naar het hele kenniscentrum als één bestand. Discreet: wie dit
   zoekt vindt het, wie het niet zoekt wordt er niet door afgeleid. */
.naslag-lk{margin-top:44px;padding-top:20px;border-top:1px solid var(--g200);font-size:.82rem;color:var(--g400);text-align:center}
.naslag-lk a{color:var(--g400);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.naslag-lk a:hover{color:var(--blue)}

/* ══ CASES ══
   Een case gebruikt de bestaande onderdelen van een artikel: .antwoord,
   .kernpunten, .art-meta, .prose en .slot. Alleen de kerngegevens en het
   citaat zijn nieuw, want die kent een artikel niet. */
.case-feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 20px;background:var(--white);border:1px solid var(--g200);border-radius:12px;padding:20px 24px;margin-bottom:22px}
.case-feiten dt{font-family:var(--display);font-size:.65rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g400);margin-bottom:4px}
.case-feiten dd{margin:0;font-size:.88rem;line-height:1.55;color:var(--g600)}

/* Het citaat is geen kader maar een uitspraak: grotere letter, een oranje
   streep ernaast en de naam eronder. Zo verschilt het van .antwoord en .slot,
   die op dezelfde pagina allebei wel een vlak zijn. */
.case-citaat{margin:34px 0 30px;padding-left:24px;border-left:3px solid var(--orange)}
.case-citaat blockquote{margin:0}
.case-citaat p{font-family:var(--display);font-size:1.15rem;font-weight:600;line-height:1.55;letter-spacing:-.01em;color:var(--blue-dark);margin:0}
.case-citaat figcaption{margin-top:12px;font-size:.82rem;font-weight:600;color:var(--g600)}
.case-citaat figcaption span{display:block;font-weight:400;color:var(--g400)}

/* De band bij een case die nog op concept staat. Die pagina wordt alleen op
   een preview gebouwd, dus dit is nooit op de site te zien; het is er zodat
   niemand een preview voor de echte pagina aanziet.

   Onderaan vastgezet en niet bovenaan: de navigatiebalk staat al vast aan de
   bovenkant en zou de band bedekken. Zo blijft hij bovendien in beeld terwijl
   je de pagina doorleest. */
.conceptband{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--blue-dark);color:var(--white);padding:10px 0;font-size:.82rem;line-height:1.6;box-shadow:0 -4px 20px rgba(13,27,46,.25)}
.conceptband strong{color:var(--orange);text-transform:uppercase;letter-spacing:.08em;font-family:var(--display);font-size:.7rem;margin-right:8px}
.conceptband code{background:rgba(255,255,255,.12);border-radius:4px;padding:1px 5px;font-size:.9em}

@media(max-width:768px){
  .case-feiten{padding:16px 18px;border-radius:10px;gap:12px 16px}
  .case-citaat{margin:28px 0 24px;padding-left:18px}
  .case-citaat p{font-size:1.05rem}
}

/* ══ DONKERE KOP ══
   Sinds september 2026 opent elke pagina met dezelfde kop als de homepage:
   het verloop van donkerblauw naar blauw, schuin van linksboven naar
   rechtsonder, met onderaan een vervaging van 40 px naar de achtergrond van de
   sectie eronder. De basis staat bij .ph bovenin dit bestand. Drie vormen:
   .ph gecentreerd voor de gewone pagina's, .ph-lees links uitgelijnd voor
   thema's, artikelen en cases, en .ph-laag voor de juridische pagina's. */
.ph:has(+ .bg-blue-light){--ph-fade:var(--g50)}
.ph .tp span{color:var(--white);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2)}
.ph .kruimel a:hover{color:var(--orange-text)}

.ph-lees{text-align:left;padding:128px 0 150px}
.ph-lees>.w{max-width:960px}
.ph-lees .kruimel{margin-bottom:22px}
.ph-lees .lbl{display:block}
.ph-lees h1{font-size:clamp(2.1rem,4.2vw,3rem);line-height:1.12;max-width:840px}
.ph-lees p{margin-left:0;max-width:640px}
.ph-lees .kop-meta{font-size:.86rem;color:rgba(255,255,255,.66);margin-top:18px;max-width:none}
.kop-meta span{color:var(--orange-text);margin:0 6px}

.ph-laag{padding:118px 0 70px}
.ph-laag h1{font-size:clamp(2rem,3.6vw,2.5rem)}
.ph-laag p{font-size:.95rem;margin-top:8px}

/* Het korte antwoord en de kernpunten in een witte kaart die over de onderrand
   van de kop valt, op thema's en artikelen. */
.kop-kaart-w{position:relative;z-index:2;max-width:960px}
.kop-kaart{margin-top:-110px;background:var(--white);border-radius:20px;box-shadow:0 22px 56px rgba(14,40,65,.16);padding:32px 44px 30px}
.kop-kaart .lbl{display:block}
.kop-kaart-tekst{font-size:1.08rem;line-height:1.75;color:var(--g700);margin:10px 0 20px}
.kp{list-style:none;margin:0;padding:18px 0 0;border-top:1px solid var(--g100);display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.kp li{position:relative;padding-left:30px;font-size:.9rem;line-height:1.55;color:var(--g600)}
.kp li::before{content:'';position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--blue-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23185EA2' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.na-kop-kaart{padding-top:48px}

/* De bronnen van een artikel in een kaart, boven de gerelateerde vragen. */
.bron-kaart{max-width:800px;margin:0 auto 56px;background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:26px 30px 16px}
.bron-kaart:last-child{margin-bottom:0}

@media(max-width:768px){
  .ph-lees{padding:104px 0 120px}
  .ph-laag{padding:100px 0 56px}
  .kop-kaart{margin-top:-84px;padding:22px 20px;border-radius:16px}
  .kop-kaart-tekst{font-size:.98rem}
  .kp{grid-template-columns:1fr;gap:10px}
  .na-kop-kaart{padding-top:36px}
  .bron-kaart{padding:20px 20px 10px;margin-bottom:40px}
}

/* ══ BEHOUDEN UIT DE ONTWERPRONDES, SEPTEMBER 2026 ══
   Na het terugzetten naar de donkere koppen koos Merlijn deze onderdelen terug:
   A1 navigatie, C2 Zes manieren, J3 veelgestelde vragen, K1 teamfoto's,
   N1 Drie meetbare resultaten en de opmaak van de footer uit L1. */

/* C2 Zes manieren: links de punten, rechts het gekozen punt met een
   schermafbeelding. Zonder JavaScript staan de zes punten onder elkaar;
   src/main.js zet .js op het blok en maakt er tabbladen van. */
.zes-lijst{display:none}
.zes-paneel{background:var(--white);border:1px solid var(--g200);border-radius:20px;padding:30px 30px 0;overflow:hidden;margin-bottom:16px}
.zes-paneel>.prob-icon{margin-bottom:0}
.zes-paneel h3{font-size:1.35rem;margin:14px 0 8px;color:var(--blue-dark)}
.zes-paneel p{color:var(--g500);line-height:1.7;max-width:560px}
.zes-paneel img{display:block;width:100%;height:auto;margin-top:24px;border-radius:12px 12px 0 0;border:1px solid var(--g200);border-bottom:0}
.zes.js{display:grid;grid-template-columns:330px minmax(0,1fr);gap:28px;align-items:start}
.zes.js .zes-lijst{display:grid;gap:6px}
.zes.js .zes-paneel{display:none;margin:0;box-shadow:0 12px 36px rgba(14,40,65,.06)}
.zes.js .zes-paneel.aan{display:block}
.zes-knop{display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;border-radius:12px;border:1px solid transparent;background:transparent;font-family:var(--display);font-weight:600;font-size:.95rem;color:var(--g600);text-align:left;cursor:pointer;transition:background .2s,box-shadow .2s,color .2s}
.zes-knop .prob-icon{width:36px;height:36px;border-radius:10px;margin:0;flex:none}
.zes-knop .prob-icon svg{width:18px;height:18px}
.zes-knop:hover{background:rgba(255,255,255,.7);color:var(--blue-dark)}
.zes-knop[aria-selected="true"]{background:var(--white);color:var(--blue-dark);border-color:var(--g200);box-shadow:0 8px 24px rgba(14,40,65,.08)}
.zes-pijl{margin-left:auto;color:var(--orange);opacity:0;flex:none;transition:opacity .2s}
.zes-knop[aria-selected="true"] .zes-pijl{opacity:1}
@media(max-width:900px){
  .zes.js{grid-template-columns:1fr}
  .zes.js .zes-lijst{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .zes.js .zes-lijst{grid-template-columns:1fr}
  .zes-paneel{padding:22px 20px 0}
}

/* K1 Het team: naam en functie onderin de foto, op een navy overgang. */
.tm-card{position:relative}
.tm-card .show-vis:hover{transform:none}
.tm-photo::after{content:'';position:absolute;left:0;right:0;bottom:0;height:52%;background:linear-gradient(to top,rgba(14,40,65,.94),rgba(14,40,65,0));pointer-events:none;z-index:1}
.tm-card figcaption{position:absolute;left:20px;right:20px;bottom:18px;z-index:2;text-align:left}
.tm-card figcaption::before{content:'';display:block;width:26px;height:2px;background:var(--orange);margin-bottom:10px}
.tm-card .tm-name{color:var(--white);margin-top:0}
.tm-card .tm-role{color:rgba(255,255,255,.8);font-size:.86rem}

/* J3 Veelgestelde vragen per onderwerp. De vragen zelf houden hun markup,
   want build.mjs leest daaruit de FAQPage-markup. */
.faq-cat{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start}
.faq-groep{background:var(--white);border:1px solid var(--g200);border-radius:16px;padding:26px 24px 6px}
.faq-groep>.prob-icon{margin-bottom:14px}
.faq-groep h3{font-size:1.1rem;color:var(--blue-dark);margin-bottom:6px}
.faq-groep .faq-i{border-bottom:0;border-top:1px solid var(--g100)}
.faq-groep .faq-q{padding:14px 0;font-size:.9rem;gap:12px}

@media(max-width:1024px){
  .faq-cat{grid-template-columns:1fr;max-width:720px;margin:0 auto}
}

/* N1 Drie resultaten: drie woorden, geen kaarten. */
.drie-w{display:grid;grid-template-columns:repeat(3,1fr)}
.drie-w-i{padding:6px 40px}
.drie-w-i+.drie-w-i{border-left:1px solid var(--g300)}
.drie-w-i .lbl{display:block;margin-bottom:12px}
.drie-w-woord{font-family:var(--display);font-size:clamp(2.2rem,3.6vw,3.1rem);font-weight:800;color:var(--blue-dark);letter-spacing:-.045em;line-height:1;margin:0}
.drie-w-woord span{color:var(--orange)}
.drie-w-i p+p{margin-top:18px;font-size:.95rem;color:var(--g500);line-height:1.7}
@media(max-width:1024px){
  .drie-w-i{padding:6px 24px}
}
@media(max-width:768px){
  .drie-w{grid-template-columns:1fr}
  .drie-w-i{padding:22px 0}
  .drie-w-i+.drie-w-i{border-left:0;border-top:1px solid var(--g300)}
}

/* ══ NAVIGATIE (A1) ══
   Boven een donkere kop blijft de balk transparant over de volle breedte.
   Zodra er gescrold is, wordt hij een zwevende balk met ronde hoeken, iets onder
   de bovenrand; het actieve item krijgt een oranje stip. */
.nav-in{transition:all .3s ease}
nav.scrolled{top:12px;left:24px;right:24px;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;box-shadow:none}
nav.scrolled .nav-in{max-width:1120px;height:62px;padding:0 10px 0 22px;border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--g200);box-shadow:0 12px 32px rgba(14,40,65,.10)}
nav.scrolled .nav-lk a.on{background:transparent;color:var(--blue-dark);font-weight:600;position:relative}
nav.scrolled .nav-lk a.on::after{content:'';position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--orange)}
nav.scrolled .btn-portal{border-radius:12px}

/* Footer (L1): donkerblauw, met dezelfde inhoud als voorheen. */
.ft{background:#0E2841;border-top:0;margin-top:0;padding:48px 0 20px}
.ft .ft-brand p{color:rgba(255,255,255,.6)}
.ft .ft-logo-div{background:rgba(255,255,255,.2)}
.ft .ft-h{color:var(--orange-text)}
.ft .ft-lk a{color:rgba(255,255,255,.8)}
.ft .ft-lk a:hover{color:var(--white)}
.ft .ft-bot{border-top-color:rgba(255,255,255,.1)}
.ft .ft-bot span{color:rgba(255,255,255,.5)}

@media(max-width:900px){
  nav.scrolled{left:12px;right:12px;top:8px}
  nav.scrolled .nav-in{height:56px;padding:0 6px 0 14px;border-radius:16px}
}

/* ══ KEURMERK, MODEL EN AANSLUITING, SEPTEMBER 2026 ══
   Gekozen uit "Keurmerk, model en aansluiting": T2 zonder de link naar Over ons,
   M1 met het model zo groot mogelijk, en de aansluiting zoals hij eerder live
   stond (E2 uit de eerste ronde). */

/* T2 Homepage: het logo van Techniek Nederland op een witte kaart, uitleg ernaast. */
.keurmerk{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:56px;align-items:center;max-width:1000px;margin:0 auto}
.keurmerk-logo{display:flex;align-items:center;justify-content:center}
.keurmerk-logo img{width:260px;max-width:100%;height:auto}
.keurmerk-tekst .lbl{display:block;margin-bottom:8px}
.keurmerk-tekst h2{font-size:clamp(1.35rem,2.4vw,1.6rem);color:var(--blue);margin-bottom:12px}
.keurmerk-tekst p{color:var(--g600);line-height:1.75;max-width:540px;margin:0}

/* M1 Homepage: het model zo groot mogelijk rechts, links de kop en drie korte
   stappen. De sectie mag hier breder dan de gewone .w, zodat het model niet
   kleiner wordt dan toen het alleen in het midden stond. */
.sec-model .w{max-width:1380px}
.model-g{display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-areas:"kop model" "stappen model";column-gap:48px;row-gap:28px;align-items:center;align-content:center}
.model-kop{grid-area:kop;align-self:end}
.model-kop .lbl{display:block;margin-bottom:10px}
.model-kop h2{margin-bottom:12px}
.model-kop p{color:var(--g500);font-size:1.02rem;line-height:1.7;margin:0}
.model-g .model-clip{grid-area:model;max-width:none;margin:0}
.model-stappen{grid-area:stappen;align-self:start;list-style:none;margin:0;padding:0;display:grid;gap:18px}
.model-stappen li{display:grid;grid-template-columns:32px 1fr;gap:14px}
.model-nr{width:32px;height:32px;border-radius:9px;background:var(--blue-50);color:var(--blue);font-family:var(--display);font-weight:800;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.model-stappen h3{font-size:1rem;margin:5px 0 4px;color:var(--blue-dark)}
.model-stappen p{font-size:.9rem;color:var(--g500);line-height:1.65;margin:0}

/* E2 De aansluiting als doorlopende balk van blauw naar oranje. Eén verloop
   over vier stukken: background-size 400% met per stuk een eigen positie. */
.traject{max-width:1100px;margin:0 auto}
.traject-balk{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-bottom:26px}
.traject-balk span{height:8px;background:linear-gradient(90deg,var(--blue) 0%,var(--blue) 45%,var(--orange) 100%);background-size:400% 100%}
.traject-balk span:nth-child(1){background-position:0% 0;border-radius:8px 0 0 8px}
.traject-balk span:nth-child(2){background-position:33.333% 0}
.traject-balk span:nth-child(3){background-position:66.667% 0}
.traject-balk span:nth-child(4){background-position:100% 0;border-radius:0 8px 8px 0}
.traject-stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.traject-tijd{display:inline-block;font-family:var(--display);font-size:.72rem;font-weight:700;color:var(--blue);background:var(--white);border:1px solid var(--blue-light);border-radius:100px;padding:3px 10px;margin-bottom:12px}
.traject-stappen h3{font-size:1.05rem;margin-bottom:8px;color:var(--blue-dark)}
.traject-stappen p{font-size:.9rem;color:var(--g500);line-height:1.65}

@media(max-width:1320px){
  .model-g{grid-template-columns:300px minmax(0,1fr);column-gap:40px}
}
@media(max-width:1100px){
  .model-g{grid-template-columns:270px minmax(0,1fr);column-gap:32px}
}
@media(max-width:900px){
  .keurmerk{grid-template-columns:1fr;gap:24px;max-width:560px}
  .keurmerk-logo img{width:190px}
  .model-g{grid-template-columns:1fr;grid-template-areas:"kop" "model" "stappen";row-gap:24px}
}
@media(max-width:768px){
  .traject-balk{display:none}
  .traject-stappen{grid-template-columns:1fr 1fr;gap:22px}
}
@media(max-width:480px){
  .traject-stappen{grid-template-columns:1fr}
}

/* ══ IN BALANS, SEPTEMBER 2026 ══
   Gekozen uit "Ontwerpkeuzes in balans": B3, P3, Q1, F1, S1, O1, U2, I2 en V3. */

/* B3 Home: vier uitdagingen op een rij, compacter. */
.prob-g4{grid-template-columns:repeat(4,1fr);gap:16px}
.prob-g4 .prob{padding:26px 22px}
.prob-g4 .prob-icon{margin-bottom:14px}
.prob-g4 .prob h3{font-size:1rem}
.prob-g4 .prob p{font-size:.86rem;line-height:1.65}

/* P3 Home: platform en adviezen als twee rijen in één sectie, met tekstlinks. */
.tlink{font-family:var(--display);font-weight:600;font-size:.92rem;color:var(--blue);text-decoration:none;transition:color .2s}
.tlink:hover{color:var(--blue-dark)}
.twee-rij .show-t p{margin-bottom:18px}
.twee-rij.om{grid-template-columns:1.15fr .85fr}
.twee-rij-lijn{height:1px;background:var(--g200);margin:56px 0}

/* Q1 Regieomgeving: de vier schermen als tabbladen, zelfde vorm als Zes manieren. */
.zes-regie.js{background:var(--g50);border-radius:20px;padding:24px}
.zes-knop-t{display:block;flex:1}
.zes-knop-t em{display:block;font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g400);margin-bottom:3px}
.zes-regie .zes-knop[aria-selected="true"] .zes-knop-t em{color:var(--orange-text)}
.zes-regie .zes-knop{padding:14px 16px}
.zes-regie .zes-paneel>.lbl{display:block}
.zes-regie .zes-paneel .feat{margin:14px 0 0}
.zes-regie.js .zes-paneel>.lbl,.zes-regie.js .zes-paneel>h3{display:none}

/* F1 Sectoren: sectorkaarten met een vaste opbouw en de uitkomst onderaan. */
.seg-vast{display:flex;flex-direction:column;padding:28px 28px 22px}
.seg-vast::before{display:none}
.seg-vast h3{font-size:1.1rem;color:var(--blue-dark);margin-bottom:14px}
.seg-vast .lbl{display:block;font-size:.66rem;margin-bottom:4px}
.seg-vast p{font-size:.9rem;color:var(--g600);line-height:1.6;margin-bottom:14px}
.seg-uit{display:flex;gap:10px;align-items:center;margin-top:auto;padding-top:14px;border-top:1px solid var(--g100);font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--blue-dark)}
.seg-uit .ck{margin-top:0}

/* S1 Sectoren: pilotstappen in de vorm van de aansluiting. */
.traject-3 .traject-balk,.traject-3 .traject-stappen{grid-template-columns:repeat(3,1fr)}
.traject-3{max-width:1000px}
.traject-3 .traject-balk span{background-size:300% 100%}
.traject-3 .traject-balk span:nth-child(2){background-position:50% 0}
.traject-3 .traject-balk span:nth-child(3){background-position:100% 0;border-radius:0 8px 8px 0}

/* O1 Over ons: verhaal, missie en visie in één witte sectie. */
.verhaal{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.verhaal .divider{margin:0 0 18px}
.verhaal h2{margin:0}
.verhaal>p{font-size:1.1rem;line-height:1.75;color:var(--g600);margin:0}
.mv-rij{display:grid;grid-template-columns:1fr 1fr;gap:64px;margin-top:48px;padding-top:32px;border-top:1px solid var(--g200)}
.mv-rij h3.lbl{display:block;font-size:.72rem;letter-spacing:.1em;margin:0 0 10px;color:var(--orange-text)}
.mv-rij p{font-size:1rem;line-height:1.75;color:var(--g600);margin:0}

/* U2 Over ons: een pictogram in plaats van een nummer bij de kernwaarden. */
.value-ic svg{width:20px;height:20px}

/* I2 Contact: lijnpictogrammen in plaats van emoji. */
.ct-resp{display:flex;align-items:center;justify-content:center;gap:8px}
.ct-resp svg,.trust div svg{width:16px;height:16px;flex:none;color:var(--blue)}
.ct-c-ic{display:flex;gap:14px;align-items:flex-start}
.ct-c-ic>svg{width:20px;height:20px;flex:none;color:var(--blue);margin-top:2px}

/* V1 Mobiel menu: het verloop van de koppen, grote links, oranje stip. */
.mobile-overlay{background:linear-gradient(165deg,var(--blue-dark) 0%,#0F2847 45%,var(--blue) 100%);overflow:hidden}
.mobile-overlay-header{position:relative;border-bottom-color:rgba(255,255,255,.1)}
.mobile-overlay-close span{background:var(--white)}
.mobile-overlay-body{position:relative;padding:24px 28px;overflow-y:auto}
.mobile-overlay-links{display:grid;gap:2px;align-content:start}
.mobile-overlay-links li{border-bottom:0}
.mobile-overlay-links a{position:relative;padding:8px 0 8px 22px;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;color:rgba(255,255,255,.66)}
.mobile-overlay-links a.on,.mobile-overlay-links a:active{color:var(--white)}
.mobile-overlay-links a.on::before{content:'';position:absolute;left:0;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--orange)}
.mobile-overlay-footer{border-top:0;gap:10px;padding:24px 0 0}
.mobile-overlay-contact{flex-direction:row;justify-content:center;gap:32px;margin-top:8px}
.mobile-overlay-contact a{color:rgba(255,255,255,.85);font-family:var(--display);font-weight:600;font-size:.9rem;padding:6px 0}
.mobile-overlay-contact svg{width:16px;height:16px;color:var(--orange);flex:none}

@media(max-width:1024px){
  .prob-g4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .twee-rij.om{grid-template-columns:1fr}
  .twee-rij.om .show-vis{order:2}
  .twee-rij-lijn{margin:40px 0}
  .zes-regie.js{padding:16px}
  .verhaal{grid-template-columns:1fr;gap:18px}
  .mv-rij{grid-template-columns:1fr;gap:28px;margin-top:36px}
}
@media(max-width:768px){
  .traject-3 .traject-balk{display:none}
  .traject-3 .traject-stappen{grid-template-columns:1fr;gap:22px}
}
@media(max-width:600px){
  .prob-g4{grid-template-columns:1fr}
}

/* Footer op een smal scherm: het merkblok met de twee logo's over de volle
   breedte, zodat het logo van Techniek Nederland niet onder de kop van de
   volgende kolom schuift. De logo's mogen daarbij afbreken. */
.ft-logos{flex-wrap:wrap}
.ft-logos img{max-width:100%}
@media(max-width:900px){
  .ft-g{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ft-brand{grid-column:1 / -1}
  .ft-brand p{max-width:42ch}
}

/* De koppen in de footer en in het kenniscentrum zijn h2-elementen, en op een
   smal scherm zette de algemene regel h2{font-size:1.5rem!important} ze veel te
   groot: in de footer liepen "REGIEOMGEVING" en "BEDRIJF" daardoor over elkaar
   heen. Hier krijgen ze hun eigen maat terug. */
@media(max-width:900px){
  .ft-h{font-size:.65rem!important}
  .art-kop,.groep-kop{font-size:1.15rem!important}
}

/* Twee kolommen, op een smal scherm één (Voor installateurs). */
.prob-g-twee{grid-template-columns:repeat(2,1fr)}
@media(max-width:599px){.prob-g-twee{grid-template-columns:1fr}}