/* Poppins — huisstijl-fontfamilie (Brand Manual 2024, "Typografie online").
   Lokaal gehost: geen externe fontverzoeken vanaf de bezoeker. */
@font-face{font-family:Poppins;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/poppins-400.woff2) format("woff2")}
@font-face{font-family:Poppins;font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format("woff2")}
:root{
/* Kleurpalet exact uit het merkhandboek */
--deep-blue:#0F1E29;--ocean-blue:#0C587C;--sea-green:#1A9595;--accent-pink:#D30B55;
--purple-berry:#9B1948;--warm-white:#F7F5F4;--beige-base:#E0DED8;
/* Afgeleide tinten: niet in het handboek gespecificeerd, opgebouwd uit Deep blue / Warm white */
--surface:#17303D;--surface-hi:#1E3D4D;--footer:#0A161E;
--mist:#9FB4BC;--ink-70:#46606C;--ink-55:#5B7480;--ink-40:#566C76;
--map-fill:#14303F;--map-stroke:#1E4E68;
/* Aliassen zodat bestaande opmaak in de HTML blijft werken */
--ink:var(--deep-blue);--ink2:var(--surface);--sky:var(--sea-green);--teal:var(--sea-green);
--blue:var(--ocean-blue);--mag:var(--accent-pink);--berry:var(--purple-berry);
--paper:var(--warm-white);--white:#fff;
--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;background:var(--ink);color:#fff;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
b,strong{font-weight:800}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
header.nav{position:sticky;top:0;z-index:50;background:rgba(15,30,41,.90);backdrop-filter:blur(10px);border-bottom:1px solid rgba(159,180,188,.17)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:66px}
/* Logo: officiele full colour diapositief-versie, conform "Logo do's" (alleen op donkere achtergrond). */
.logo{display:inline-flex;align-items:center;gap:11px;text-decoration:none}
.logo img{height:30px;width:auto;display:block}
.logo span{font-weight:800;letter-spacing:.2em;font-size:13px;text-transform:uppercase;color:#fff}
nav.links{display:flex;gap:26px;align-items:center}
nav.links a{text-decoration:none;font-size:14px;color:var(--mist)}
nav.links a:hover,nav.links a.on{color:#fff}
.btn{display:inline-block;border-radius:var(--radius);background:var(--mag);color:#fff;text-decoration:none;font-weight:800;padding:12px 22px;border:0;font-size:15px;cursor:pointer;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(211,11,85,.35)}
.btn.ghost{background:transparent;border:1.5px solid var(--sky);color:var(--sky)}
.btn.sm{padding:9px 16px;font-size:13.5px}
.bar{height:5px;background:linear-gradient(90deg,var(--ocean-blue) 0 25%,var(--sea-green) 25% 50%,var(--purple-berry) 50% 75%,var(--accent-pink) 75%)}
.hero{padding:96px 0 84px;background:radial-gradient(900px 400px at 85% -10%,rgba(211,11,85,.22),transparent 60%),radial-gradient(700px 400px at 0% 100%,rgba(26,149,149,.14),transparent 60%)}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--sky)}
h1{font-size:clamp(34px,6vw,64px);line-height:1.05;letter-spacing:-.02em;margin:18px 0 22px;font-weight:800}
h1 em{font-style:normal;color:var(--mag)}
.lead{font-size:clamp(17px,2vw,20px);color:var(--mist);max-width:680px}
.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.tag{margin-top:34px;font-style:italic;color:var(--sky)}
section.s{padding:76px 0}
section.light{background:var(--paper);color:var(--ink)}
section.light .lead,section.light p.mut{color:var(--ink-70)}
h2{font-weight:800;font-size:clamp(26px,3.6vw,38px);letter-spacing:-.015em;margin:10px 0 14px;line-height:1.12}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.card{border-radius:var(--radius);overflow:hidden;background:#fff;color:var(--ink);padding:24px;border-top:5px solid var(--c,var(--sky))}
.dark .card,.card.d{background:var(--ink2);color:#fff}
.card .lab{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c)}
.card h3{font-weight:800;font-size:20px;margin:8px 0 8px}
.card p{font-size:15px;opacity:.85}
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:30px}
.step{border-radius:var(--radius);background:var(--ink2);padding:18px;border-left:3px solid var(--sky)}
.step i{font-style:normal;font-weight:800;color:var(--sky);font-size:12px;letter-spacing:.12em;display:block;margin-bottom:6px}
.step p{font-size:14px;color:var(--mist)}
.kader{border-radius:var(--radius);background:rgba(26,149,149,.12);border-left:4px solid var(--sky);padding:20px 24px;margin-top:30px;max-width:820px}
.dl{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
.dl a{border-radius:var(--radius);display:block;background:#fff;color:var(--ink);text-decoration:none;padding:18px 20px;border-left:5px solid var(--c);transition:transform .15s}
.dl a:hover{transform:translateY(-3px)}
.dl small{display:block;color:var(--ink-55);margin-top:2px}
footer{background:var(--footer);padding:44px 0;color:var(--mist);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
.concept{display:inline-block;margin-top:10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--mag);color:var(--mag);padding:3px 9px}
table.t{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px}
table.t th{background:var(--ink);color:#fff;text-align:left;padding:12px 14px}
table.t td{padding:12px 14px;color:var(--ink)}
table.t tr:nth-child(even) td{background:var(--beige-base)}
form{border-radius:var(--radius);display:grid;gap:14px;background:var(--ink2);padding:28px}
label{font-size:13px;color:var(--mist);display:grid;gap:6px}
input,select,textarea{border-radius:8px;background:var(--deep-blue);border:1px solid rgba(159,180,188,.34);color:#fff;padding:12px;font:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--sky)}
/* map */
.mapwrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr);gap:32px;align-items:start}.map{position:sticky;top:84px}.list{max-height:calc(100vh - 110px);overflow:auto;padding-right:6px}
.map{position:relative;background:radial-gradient(500px 500px at 50% 50%,rgba(26,149,149,.12),transparent 70%)}
.map svg{width:100%;height:auto;display:block;max-height:86vh}
.prov{fill:var(--map-fill);stroke:var(--map-stroke);stroke-width:1}
.link{fill:none;stroke:var(--mag);stroke-width:1.6;stroke-linecap:round;opacity:.9;filter:url(#glow);stroke-dasharray:5 7;animation:flow 2.4s linear infinite}
.link.base{stroke-dasharray:none;opacity:.35;animation:none;stroke-width:1}
@keyframes flow{to{stroke-dashoffset:-24}}
.ring{fill:rgba(211,11,85,.08);stroke:rgba(211,11,85,.35);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:pulse 3.6s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
.pin{cursor:pointer}
.pin circle.dot{fill:#fff;stroke:var(--mag);stroke-width:3;transition:r .15s}
.pin:hover circle.dot,.pin.on circle.dot{fill:var(--mag);stroke:#fff}
.pin text{font-size:13px;fill:#fff;font-weight:800;paint-order:stroke;stroke:var(--deep-blue);stroke-width:3px;pointer-events:none}
.list{display:grid;gap:10px}
.item{border-radius:var(--radius);background:var(--ink2);padding:16px 18px;border-left:4px solid var(--mag);cursor:pointer;transition:background .15s,transform .15s}
.item:hover,.item.on{background:var(--surface-hi);transform:translateX(4px)}
.item b{font-size:16px}
.item span{display:block;color:var(--mist);font-size:13.5px}
.item a{color:var(--sky);font-size:13.5px}
.stats{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap}
.stats b{display:block;font-size:44px;color:var(--mag);line-height:1}
.stats span{color:var(--mist);font-size:14px}
@media(max-width:900px){.map{position:static}.list{max-height:none}.grid4,.grid3,.dl,.steps{grid-template-columns:1fr 1fr}.mapwrap,.grid2{grid-template-columns:1fr}nav.links a:not(.btn){display:none}}
@media(max-width:560px){.grid4,.grid3,.dl,.steps{grid-template-columns:1fr}.hero{padding:64px 0}/* De driekoloms prijstabel past niet op telefoonbreedte: laat de tabel scrollen in plaats van de pagina. */table.t{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.ph1{border-radius:var(--radius);overflow:hidden;background:var(--ink2);border-top:5px solid var(--c);padding:22px}
.ph1 i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--c);display:block}
.ph1 b{display:block;font-size:20px;margin:6px 0}
.ph1 p{color:var(--mist);font-size:15px}
.journey{background:var(--ink);padding:10px 0 0}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:8px}
.st .n{font-size:11px;letter-spacing:.16em;font-weight:800;text-transform:uppercase}
.st h3{font-weight:800;font-size:22px;margin:4px 0 2px}
.st .sub{color:var(--mist);font-size:14px;margin-bottom:12px;font-style:italic}
.st ul{list-style:none;font-size:15px}
.st li{padding:7px 0 7px 14px;position:relative;border-top:1px solid rgba(159,180,188,.18)}
.st li:before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--c)}
.st .first{margin-top:12px;background:var(--ink2);border-left:3px solid var(--c);padding:10px 12px;font-size:14px;color:var(--mist)}
.st .first b{color:#fff}
.grip{margin-top:30px;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--mist)}
.grip b{color:var(--mag);letter-spacing:.14em;text-transform:uppercase;font-size:11px;white-space:nowrap}
.grip i{flex:1;height:2px;background:linear-gradient(90deg,var(--mag),rgba(211,11,85,.15))}
.near{margin-top:16px;font-size:14px;color:var(--mist);border-top:1px dashed rgba(211,11,85,.5);padding-top:14px}
.near a{color:var(--mag);font-weight:800;text-decoration:none}
.case{border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:.9fr 1.3fr;background:#fff;color:var(--ink);margin-top:28px;position:relative}
.case .mock{position:absolute;top:12px;right:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--mag);color:var(--mag);padding:3px 9px;background:#fff}
.case .cl{background:var(--ink);color:#fff;padding:34px 30px}
.case .pill{display:inline-block;font-size:10.5px;letter-spacing:.14em;font-weight:800;text-transform:uppercase;padding:3px 9px;color:var(--ink);margin:0 6px 0 0}
.case h3{font-weight:800;font-size:26px;margin:20px 0 10px;line-height:1.15}
.case .cl p{color:var(--mist);font-size:15px}
.case .facts{margin-top:22px;font-size:14px;color:var(--mist)}
.case .facts div{padding:8px 0;border-top:1px solid rgba(159,180,188,.20)}
.case .facts b{display:block;color:#fff;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase}
.case .cr{padding:34px 34px 28px}
.blk{margin-bottom:16px}
.blk h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ocean-blue);margin-bottom:4px}
.blk p{font-size:15px;color:var(--ink-70)}
.phd{background:var(--beige-base);color:var(--deep-blue);padding:0 4px}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:6px 0 16px}
.kpis div{border-radius:calc(var(--radius) - 4px);background:var(--paper);padding:12px;border-top:4px solid var(--c)}
.kpis b{font-size:24px;display:inline-block;line-height:1.2;margin-bottom:4px}
.kpis span{display:block;font-size:12.5px;color:var(--ink-70)}
.quote{border-left:4px solid var(--mag);padding:6px 0 6px 14px;font-size:15px;font-style:italic;color:var(--ink-70)}
.quote small{display:block;font-style:normal;font-size:13px;color:var(--ink-55);margin-top:4px}
.note{font-size:11.5px;color:var(--ink-40);margin-top:14px}
@media(max-width:900px){.phases,.cols3,.case{grid-template-columns:1fr}}