:root{
  --paper:#F5F4F1; --ink:#1A1712; --muted:#5A5246; --heading:#1A1712;
  --red:#E03327; --red-ink:#C42A1F; --red-deep:#A8231A; --yellow:#FAD646; --yellow-soft:#FCE790; --green:#3F910A; --navy:#092F6B;
  --pin-b:#E03327; --line:rgba(26,23,18,.16); --dot:rgba(26,23,18,.13); --card:#FFFFFF; --shadow:rgba(20,20,30,.18);
  --grain:.24; --footer-bg:#092F6B; --footer-ink:#F2F4F8; --footer-muted:#B9C6DD;
  --wb-bg:#FDFEFF; --wb-ink:#16243D; --wb-frame:#C9CCD1;
  --f-display:"Lexend",system-ui,sans-serif; --f-body:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",system-ui,sans-serif;
  --f-hand:"Kalam","Comic Neue",cursive; --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --s-1:.875rem; --s0:1.125rem; --s1:1.375rem; --s3:2.6rem; --s4:clamp(2.3rem,4.6vw,3.9rem);
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#131416; --ink:#F3EEE2; --muted:#BDB3A0; --heading:#F6F1E4; --red-ink:#FF6E61;
  --line:rgba(255,255,255,.15); --dot:rgba(255,255,255,.09); --card:#1E2024; --shadow:rgba(0,0,0,.5);
  --grain:.3; --footer-bg:#0A2350; --footer-ink:#F2F4F8; --footer-muted:#B9C6DD; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#131416; --ink:#F3EEE2; --muted:#BDB3A0; --heading:#F6F1E4; --red-ink:#FF6E61;
  --line:rgba(255,255,255,.15); --dot:rgba(255,255,255,.09); --card:#1E2024; --shadow:rgba(0,0,0,.5);
  --grain:.3; --footer-bg:#0A2350; --footer-ink:#F2F4F8; --footer-muted:#B9C6DD; color-scheme:dark}

*{box-sizing:border-box}
html,body{overflow-x:clip}
body{margin:0;background-color:var(--paper);color:var(--ink);font:400 var(--s0)/1.7 var(--f-body);
  background-image:radial-gradient(var(--dot) 1.3px,transparent 1.7px);background-size:24px 24px;position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
body>*{position:relative;z-index:1}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--red);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);color:var(--heading);text-wrap:balance;margin:0;letter-spacing:-.01em}
h2{font-size:var(--s3);line-height:1.1;font-weight:800}
h3{font-size:var(--s1);line-height:1.25;font-weight:700}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.measure{max-width:62ch}
.eyebrow{font:500 var(--s-1)/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--red-ink)}
.hand{font-family:var(--f-hand);font-weight:700;color:var(--red-ink);line-height:1.15}
section{padding-block:clamp(44px,6.5vw,84px)}


/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:24px;padding-block:12px}
.logo img{height:46px;width:auto;border-radius:3px}
nav.main{display:flex;gap:22px;flex-wrap:wrap;font:600 1rem/1 var(--f-body)}
nav.main a{text-decoration:none;padding:6px 0;border-bottom:3px solid transparent}
nav.main a:hover{border-color:var(--red)}
.btn{display:inline-flex;align-items:center;gap:10px;font:700 1rem/1 var(--f-display);text-decoration:none;border-radius:999px;padding:15px 24px;border:2px solid var(--ink);cursor:pointer;transition:transform .15s ease}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 3px 0 var(--red-deep)}
.btn.primary:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--red-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:currentColor}
.btn.ghost:hover{background:var(--yellow);color:#1A1712;border-color:var(--yellow)}
header.top .btn{margin-left:auto;padding:11px 18px}
@media (max-width:900px){header.top .wrap{flex-wrap:wrap;row-gap:4px}nav.main{order:3;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:18px;font-size:.95rem;scrollbar-width:none}nav.main a{white-space:nowrap}}

/* afzetlint, horizontaal */
.tape{height:14px;background:repeating-linear-gradient(-45deg,var(--red) 0 14px,var(--yellow) 14px 28px);box-shadow:0 2px 5px var(--shadow)}

/* hero slider */
.hero{padding-block:clamp(20px,3vw,36px) clamp(32px,4vw,48px)}
.slider{position:relative;background:var(--card);padding:10px;box-shadow:0 18px 36px -16px var(--shadow),0 2px 4px var(--shadow)}
.slider::before{content:"";position:absolute;top:-10px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--red);box-shadow:inset -3px -3px 0 rgba(0,0,0,.22),0 3px 5px rgba(0,0,0,.25);z-index:3}
.hero-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,3vw,40px);align-items:stretch}
.hero .slider{display:flex;flex-direction:column}
.slides{position:relative;flex:1;min-height:clamp(440px,44vw,580px);overflow:hidden;background:#1A1712}
.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.slide.on{opacity:1}
.slide img{width:100%;height:100%;object-fit:cover}
.slide figcaption{position:absolute;right:14px;top:14px;font:500 .78rem/1.3 var(--f-mono);background:rgba(26,23,18,.78);color:#fff;padding:6px 10px;border-radius:999px}
.hero-card{display:flex;flex-direction:column;justify-content:center;background:var(--card);padding:clamp(26px,3.2vw,44px);box-shadow:0 18px 36px -16px var(--shadow),0 2px 4px var(--shadow);border-top:8px solid var(--red)}
.hero h1{font-size:clamp(2.2rem,3.9vw,3.6rem);line-height:1.06;font-weight:800}
.hero h1 em{font-style:normal;color:var(--red-ink)}
.rot{display:grid}
.rot>span{grid-area:1/1;transition:opacity .45s ease,transform .45s ease}
.rot>span:not(.on){opacity:0;transform:translateY(.35em)}
.js .rot>span.out{transform:translateY(-.35em)}
.hero .lead{font-size:1.15rem;margin-top:16px}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.sl-ctrl{position:absolute;right:24px;bottom:24px;z-index:2;display:flex;align-items:center;gap:8px;background:var(--card);border-radius:999px;padding:6px 8px;box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.sl-ctrl button{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:var(--ink);font:700 1.1rem/1 var(--f-display);cursor:pointer}
.sl-ctrl button:hover{background:var(--yellow);color:#1A1712}
.dots{display:flex;gap:6px}
.dots button{width:11px;height:11px;padding:0;border-radius:50%;background:var(--line)}
.dots button[aria-current="true"]{background:var(--red)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.slides{flex:none;min-height:0;aspect-ratio:3/2}}
@media (max-width:760px){
  .slides{height:auto;aspect-ratio:4/3}
  .sl-ctrl{top:calc(10px + 12px);bottom:auto;right:22px}
  .slide figcaption{top:auto;bottom:48px;right:auto;left:12px}}

/* klantenbanner */
.clients .wrap{display:flex;align-items:center;gap:20px;padding-block:22px}
.clients .label{font:700 1rem/1.3 var(--f-display);color:var(--heading);white-space:nowrap}
.ticker{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
.ticker ul{list-style:none;margin:0;padding:0;display:flex;gap:28px;width:max-content}
.ticker li{display:flex;align-items:center;gap:28px;font:700 1.1rem/1.4 var(--f-body);white-space:nowrap}
.ticker li::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:inset -2px -2px 0 rgba(0,0,0,.2)}
.ticker li:nth-child(2n)::after{background:var(--navy)}
@media (max-width:560px){.clients .wrap{flex-direction:column;align-items:flex-start;gap:8px}.ticker{width:100%}}
@media (prefers-reduced-motion:reduce){.ticker ul{flex-wrap:wrap;width:auto;row-gap:6px}.ticker{-webkit-mask-image:none;mask-image:none}}

/* waarom */
.why .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.why .body{display:grid;gap:20px;margin-top:24px}
.quote{border-left:6px solid var(--red);padding:6px 0 6px clamp(18px,3vw,32px);margin:0;align-self:center}
.quote blockquote{margin:0;font:600 clamp(1.4rem,2.6vw,2rem)/1.35 var(--f-display);color:var(--heading)}
.quote cite{display:block;margin-top:16px;font:500 var(--s-1)/1.4 var(--f-mono);color:var(--muted);font-style:normal}
@media (max-width:860px){.why .wrap{grid-template-columns:1fr}}

/* twee momenten: echte objecten */
.uses .head{display:grid;gap:14px;margin-bottom:40px}
.uses .pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
.board,.wboard{position:relative;display:grid;gap:16px;align-content:start;padding:clamp(24px,3.5vw,40px)}
.board{background-color:#0E3B80;color:#F2F5FA;border-radius:6px;transform:rotate(-.6deg);
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 1px,transparent 1px 4px);
  box-shadow:inset 0 0 0 10px rgba(255,255,255,.06),inset 0 0 0 13px #FAD646,0 18px 34px -16px var(--shadow)}
.board h3{color:#fff}
.board .eyebrow{color:#FAD646}
.wboard{background:linear-gradient(118deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.95) 44%,rgba(255,255,255,0) 58%),var(--wb-bg);color:var(--wb-ink);border:10px solid var(--wb-frame);border-radius:4px;transform:rotate(.5deg);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 18px 34px -16px var(--shadow)}
.wboard h3{color:#1A1712}
.wboard .eyebrow{color:#C42A1F}
.wboard::after{content:"";position:absolute;left:18%;right:18%;bottom:-22px;height:12px;background:var(--wb-frame);border-radius:0 0 4px 4px}
.board ul,.wboard ul{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.board li,.wboard li{padding-left:26px;position:relative}
.board li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:#FAD646;box-shadow:inset -2px -2px 0 rgba(0,0,0,.25)}
.wboard li::before{content:"";position:absolute;left:0;top:.62em;width:14px;height:3px;background:#E03327;border-radius:2px;transform:rotate(-8deg)}
.board a,.wboard a{font:700 1rem/1.2 var(--f-display);text-decoration:none;display:inline-flex;gap:8px;margin-top:6px;color:#A8231A}
.board a{color:#FAD646}
.board img,.wboard img{border-radius:3px;aspect-ratio:16/9;object-fit:cover;width:100%}
.wboard .scribble{position:absolute;right:22px;top:20px;font-size:1.15rem;color:#E03327;transform:rotate(4deg)}
@media (max-width:860px){.uses .pair{grid-template-columns:1fr;gap:48px}}

/* fotoframes: overal hetzelfde formaat */
.photo{margin:0;background:var(--card);padding:10px 10px 12px;box-shadow:0 14px 30px -12px var(--shadow),0 2px 4px var(--shadow);position:relative;transform:rotate(var(--r,0deg));transition:transform .35s ease}
.photo img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover}
.photo::before{content:"";position:absolute;top:-9px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;background:var(--m,var(--red));box-shadow:inset -3px -3px 0 rgba(0,0,0,.22),0 3px 5px rgba(0,0,0,.25);z-index:2}

/* projecten: om en om */
.projects .head{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:end;justify-content:space-between;margin-bottom:clamp(36px,5vw,64px)}
.plist{display:grid;gap:clamp(56px,8vw,104px)}
.prow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(28px,5vw,72px);align-items:center}
.prow.flip{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.prow.flip .ptext{order:2}
.ptext{display:grid;gap:14px;justify-items:start}
.ptext .meta{font:500 var(--s-1)/1.3 var(--f-mono);color:var(--red-ink);letter-spacing:.06em;text-transform:uppercase}
.ptext h3{font-size:clamp(1.6rem,2.8vw,2.1rem);line-height:1.15}
.ptext p{max-width:46ch}
.ptext .btn{margin-top:6px}
.prow:hover .photo{transform:rotate(0) translateY(-3px)}
@media (max-width:760px){.prow,.prow.flip{grid-template-columns:1fr}.prow .ptext,.prow.flip .ptext{order:2}}

/* inschuiven bij scrollen (alleen voor wat bij het laden onder de vouw staat) */
.js .slide-in{transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .8s ease}
.js .slide-in.pre-l{transform:translateX(-64px);opacity:.15}
.js .slide-in.pre-r{transform:translateX(64px);opacity:.15}
.js .slide-in.pre-u{transform:translateY(40px);opacity:.15}
.js .photo.slide-in.pre-l{transform:translateX(-64px) rotate(var(--r,0deg))}
.js .photo.slide-in.pre-r{transform:translateX(64px) rotate(var(--r,0deg))}

/* over laurens */
.about .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:center}
.about .body{display:grid;gap:18px;margin-top:20px}
@media (max-width:860px){.about .wrap{grid-template-columns:1fr}}

/* spelroute */
.route .head{display:grid;gap:14px;max-width:62ch}
.track{position:relative;margin-top:48px}
.track svg.path{position:absolute;left:0;top:0;width:100%;height:120px;overflow:visible}
.track svg.path path{fill:none;stroke:var(--red);stroke-width:2.5;stroke-dasharray:2 10;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.7}
.track ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;position:relative}
.track li{display:grid;align-content:start;justify-items:center;text-align:center;gap:10px}
.field{width:60px;height:60px;margin-top:30px;border-radius:50%;display:grid;place-items:center;font:800 1.35rem/1 var(--f-display);color:#fff;background:var(--navy);box-shadow:inset -4px -5px 0 rgba(0,0,0,.18),0 6px 12px -4px var(--shadow)}
.track li:nth-child(odd) .field{background:var(--red);color:#fff}
.track li:nth-child(5) .field{background:var(--green);color:#fff}
.track li h3{font-size:1.1rem}
.track li p{font-size:1rem;line-height:1.55;color:var(--muted);max-width:24ch}
.pawn{position:absolute;left:calc(10% - 78px);top:8px;width:30px}
@media (max-width:860px){
  .track svg.path,.pawn{display:none}
  .track ol{grid-template-columns:1fr;gap:0;border-left:3px dotted var(--line);margin-left:29px}
  .track li{grid-template-columns:auto minmax(0,1fr);justify-items:start;text-align:left;gap:4px 18px;padding-bottom:26px;margin-left:-31px}
  .track li .field{margin-top:0;grid-row:span 2}
  .track li p{max-width:none}}

/* contact */
.contact .card{background:var(--card);border:2px dashed var(--red);border-radius:10px;padding:clamp(28px,5vw,56px);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:center}
.contact h2{font-size:clamp(1.9rem,4vw,2.8rem)}
.contact .lines{display:grid;gap:14px}
.contact .line{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:700 1.15rem/1.3 var(--f-display);color:var(--heading)}
.contact .line a{user-select:all;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.copy{font:500 .78rem/1 var(--f-mono);background:none;border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 10px;cursor:pointer}
@media (max-width:760px){.contact .card{grid-template-columns:1fr}}

/* footer */
footer{background:var(--footer-bg);color:var(--footer-ink);margin-top:clamp(40px,7vw,80px)}
footer .wrap{padding-block:56px 32px;display:grid;grid-template-columns:minmax(0,1.3fr) repeat(5,minmax(0,1fr));gap:28px}
footer h4{font:700 .8rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#FAD646;margin:0 0 12px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:1rem}
footer a{text-decoration:none}footer a:hover{text-decoration:underline;text-decoration-color:var(--red)}
footer .brand img{height:64px;width:auto;border-radius:3px}
footer .brand p{font-size:1rem;margin-top:16px;max-width:30ch;color:var(--footer-muted)}
footer .legal{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.18);padding-top:20px;font:500 .78rem/1.5 var(--f-mono);color:var(--footer-muted);display:flex;flex-wrap:wrap;gap:8px 24px}
@media (max-width:1100px){footer .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}footer .brand{grid-column:1/-1}}@media (max-width:600px){footer .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Subpagina's ===== */
.skip{position:absolute;left:-999px;top:8px;z-index:50;background:var(--card);padding:10px 16px;border-radius:6px}
.skip:focus{left:16px}
nav.main a[aria-current="page"]{border-color:var(--red)}
.crumbs{font:500 var(--s-1)/1.4 var(--f-mono);color:var(--muted);padding-top:18px}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;opacity:.6}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}

/* paginakop: tekstvak naast een foto */
.phero{padding-block:clamp(16px,2.4vw,28px) clamp(36px,5vw,64px)}
.phero .hero-grid{align-items:stretch}
.phero h1{font-size:clamp(2rem,3.6vw,3.2rem);line-height:1.08;font-weight:800}
.phero h1 em{font-style:normal;color:var(--red-ink)}
.phero .lead{font-size:1.15rem;margin-top:16px}
.phero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.phero .photo{align-self:center}
.phero .photo img{aspect-ratio:4/3}
.phero.text-only .hero-card{max-width:820px}

/* labels */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding:0;list-style:none}
.tag{font:500 .78rem/1 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;padding:7px 11px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none;background:var(--card)}
a.tag:hover{border-color:var(--red)}
.tag.t-oefenen{border-color:var(--green)}
.tag.t-crisis{border-color:var(--red)}

/* tekstblokken */
.prose{display:grid;gap:18px;max-width:64ch}
.prose h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-top:18px}
.prose h3{margin-top:8px}
.prose ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(32px,6vw,88px);align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,36px);margin-top:28px}
.steps3>div{background:var(--card);padding:24px;border-top:6px solid var(--red);box-shadow:0 10px 24px -14px var(--shadow)}
.steps3>div:nth-child(2){border-color:var(--navy)}
.steps3>div:nth-child(3){border-color:var(--green)}
.steps3 h3{margin:8px 0 10px}
.steps3 .num{font:500 var(--s-1)/1 var(--f-mono);color:var(--muted)}
@media (max-width:860px){.steps3{grid-template-columns:1fr}}

/* 'wat is er geleverd': whiteboardlijst */
.delivered{align-self:start}
.delivered ul{gap:10px}

/* galerij */
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px);margin-top:28px}
.gallery .photo{cursor:zoom-in}
.gallery .photo:nth-child(3n+1){--r:-.8deg}.gallery .photo:nth-child(3n+2){--r:.6deg;--m:var(--yellow)}.gallery .photo:nth-child(3n){--r:-.4deg;--m:var(--navy)}
.gallery button{all:unset;display:block;cursor:zoom-in}
.gallery button:focus-visible{outline:3px solid var(--red);outline-offset:4px}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
dialog.lb{border:0;padding:10px;background:var(--card);max-width:min(1200px,94vw);box-shadow:0 30px 60px rgba(0,0,0,.5)}
dialog.lb::backdrop{background:rgba(10,12,16,.82)}
dialog.lb img{max-height:82vh;width:auto;margin:0 auto}
dialog.lb p{font:500 .85rem/1.4 var(--f-mono);color:var(--muted);padding:10px 4px 2px}
dialog.lb .x{position:absolute;right:14px;top:14px;width:40px;height:40px;border-radius:50%;border:0;background:var(--card);color:var(--ink);font:700 1.3rem/1 var(--f-display);cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,.3)}

/* projectkaarten en filter */
.filters{display:flex;flex-wrap:wrap;gap:10px 24px;margin:8px 0 32px}
.filters fieldset{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.filters legend{font:500 var(--s-1)/1 var(--f-mono);color:var(--muted);float:left;margin-right:6px;padding:9px 0}
.chip{font:600 .95rem/1 var(--f-body);padding:9px 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3.4vw,44px)}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.pcard{display:grid;gap:12px;align-content:start;text-decoration:none}
.pcard .photo{transition:transform .3s ease}
.pcard:nth-child(3n+1) .photo{--r:-.7deg}.pcard:nth-child(3n+2) .photo{--r:.6deg;--m:var(--yellow)}.pcard:nth-child(3n) .photo{--r:-.3deg;--m:var(--navy)}
.pcard:hover .photo,.pcard:focus-visible .photo{transform:rotate(0) translateY(-3px)}
.pcard .meta{font:500 var(--s-1)/1.3 var(--f-mono);color:var(--red-ink);letter-spacing:.05em;text-transform:uppercase;margin-top:8px}
.pcard h3{font-size:1.35rem}
.pcard p{color:var(--muted);font-size:1.02rem;line-height:1.6}
.pcard[hidden]{display:none}
@media (max-width:900px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.cards,.cards.two{grid-template-columns:1fr}}
.empty{color:var(--muted)}

/* routekaarten (Oefenen / Tijdens een crisis) */
.routes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,48px)}
@media (max-width:860px){.routes{grid-template-columns:1fr}}

/* vragen */
.faq{display:grid;gap:12px;max-width:820px}
.faq details{background:var(--card);border-left:5px solid var(--red);padding:16px 22px;box-shadow:0 8px 20px -14px var(--shadow)}
.faq details:nth-child(2n){border-color:var(--navy)}
.faq summary{font:700 1.1rem/1.4 var(--f-display);color:var(--heading);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;line-height:1;color:var(--red-ink)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px}

/* formulier */
form.demo{display:grid;gap:16px}
form.demo .row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:560px){form.demo .row{grid-template-columns:1fr}}
form.demo label{display:grid;gap:6px;font:600 1rem/1.3 var(--f-body);color:var(--heading)}
form.demo label small{font-weight:400;color:var(--muted)}
form.demo input,form.demo textarea{font:400 1.05rem/1.4 var(--f-body);color:var(--ink);background:var(--paper);border:2px solid var(--line);border-radius:8px;padding:12px 14px;width:100%}
form.demo input:focus,form.demo textarea:focus{outline:none;border-color:var(--red);box-shadow:0 0 0 3px color-mix(in srgb,var(--red) 25%,transparent)}
form.demo textarea{min-height:120px;resize:vertical}
form.demo .hp{position:absolute;left:-9999px}
form.demo .privacy{font-size:.92rem;color:var(--muted)}
.formcard{background:var(--card);padding:clamp(24px,4vw,40px);box-shadow:0 18px 36px -16px var(--shadow);border-top:8px solid var(--red)}

/* contactband onderaan elke pagina */
.contact .card .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}

/* 'informatie volgt': zichtbaar in de testversie, zodat duidelijk is wat nog moet */
.todo{background:var(--yellow);color:#1A1712;font:500 .82rem/1.4 var(--f-mono);padding:2px 8px;border-radius:4px;display:inline-block}

/* landingspagina: compacte bewijsbalk */
.proof{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;font:700 1.05rem/1.4 var(--f-body);color:var(--heading)}
.proof span{display:flex;align-items:center;gap:10px}
.proof span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--red)}
.proof span:nth-child(2n)::before{background:var(--navy)}
.checks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.checks li{padding-left:30px;position:relative}
.checks li::before{content:"";position:absolute;left:2px;top:.35em;width:16px;height:9px;border-left:3px solid var(--green);border-bottom:3px solid var(--green);transform:rotate(-45deg)}

/* ===== Interactief: calamiteit op de kaart ===== */
.mapdemo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,3vw,36px);align-items:start}
@media (max-width:900px){.mapdemo{grid-template-columns:1fr}}
.mapboard{background:#FDFEFF;border:10px solid var(--wb-frame);border-radius:4px;box-shadow:0 18px 34px -16px var(--shadow);position:relative}
.mapboard svg{display:block;width:100%;height:auto;cursor:crosshair;touch-action:manipulation}
.mapboard .hint{position:absolute;left:12px;top:10px;font-family:var(--f-hand);font-weight:700;color:#C42A1F;font-size:1.1rem;transform:rotate(-2deg);pointer-events:none}
.asset circle.dot{fill:#5F6B7A;transition:fill .3s,r .3s}
.asset text{font:600 13px var(--f-body);fill:#16243D}
.asset.hit circle.dot{fill:#E03327}
.asset .ring{fill:none;stroke:#E03327;stroke-width:3;opacity:0}
.asset.hit .ring{opacity:1;animation:pulse 1.4s ease-out infinite}
@keyframes pulse{from{r:9;opacity:1}to{r:22;opacity:0}}
@media (prefers-reduced-motion:reduce){.asset.hit .ring{animation:none}}
.panel{display:grid;gap:16px}
.panel .ctrl{display:flex;flex-wrap:wrap;gap:8px}
.panel h3{font-size:1.15rem}
.panel ul{margin:0;padding-left:1.1em;display:grid;gap:4px}
.panel .out{background:var(--card);padding:18px 20px;border-left:5px solid var(--red);box-shadow:0 8px 20px -14px var(--shadow);min-height:180px}
.panel .out p{color:var(--muted)}

/* ===== Interactief: BOB-bord vullen vanuit de koffer ===== */
.bobdemo{display:grid;gap:22px}
.bobboard{background:#FDFEFF;color:#16243D;border:10px solid var(--wb-frame);border-radius:4px;padding:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;box-shadow:0 18px 34px -16px var(--shadow);min-height:280px}
.bobcol{border-left:2px dashed #C9CCD1;padding-left:10px;display:flex;flex-direction:column;gap:8px}
.bobcol:first-child{border-left:0;padding-left:0}
.bobcol h3{font:800 .95rem/1.2 var(--f-display);background:#1A1712;color:#fff;padding:8px 10px;border-radius:4px;margin-bottom:4px}
.mag{font:700 .9rem/1.2 var(--f-body);border:0;border-radius:4px;padding:9px 10px;text-align:left;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.25);color:#1A1712;background:#FAD646;transition:transform .25s ease}
.mag.c-feit{background:#FAD646}.mag.c-scen{background:#6D7480;color:#fff}.mag.c-adv{background:#3F910A;color:#fff}.mag.c-bes{background:#E03327;color:#fff}.mag.c-proc{background:#092F6B;color:#fff}
.mag:hover{transform:translateY(-2px)}
.mag.placed{cursor:default;transform:none}
.koffer{background:#E8532A;border-radius:14px;padding:16px;box-shadow:inset 0 0 0 6px rgba(0,0,0,.12),0 14px 26px -12px var(--shadow)}
.koffer .tray{background:#1E1F22;border-radius:8px;padding:14px;display:flex;flex-wrap:wrap;gap:10px;min-height:64px}
.koffer .lbl{font:500 .8rem/1 var(--f-mono);color:#fff;letter-spacing:.06em;text-transform:uppercase;margin-bottom:10px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.bobdemo .status{font:700 1.1rem/1.4 var(--f-display);color:var(--heading);min-height:1.5em}
@media (max-width:760px){.bobboard{grid-template-columns:repeat(2,minmax(0,1fr))}.bobcol:nth-child(3){border-left:0;padding-left:0}}

/* verbeteringen na controle */
.btn.primary{background:#D02B20;border-color:#D02B20}
footer h2.fh{font:700 .8rem/1.2 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:#FAD646;margin:0 0 12px}
.koffer{background:#B8401C}
.koffer .reset{font:500 .78rem/1 var(--f-mono);background:none;border:1px solid rgba(255,255,255,.6);color:#fff;border-radius:999px;padding:6px 10px;cursor:pointer}
.mag.c-adv{background:#2F6E06}.mag.c-bes{background:#C42A1F}
#pause{font-size:.8rem}

@media (max-width:600px){.asset text{font-size:24px}.asset circle.dot{r:12px}}
@media (prefers-reduced-motion:reduce){.ticker li{white-space:normal}}
@media (max-width:600px){header.top .wrap{gap:12px}}

/* algemene voorwaarden */
.terms{display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:start}
.terms .toc{position:sticky;top:100px;font-size:.92rem}
.terms .toc ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.terms .toc a{color:inherit}
.terms .prose{max-width:72ch;gap:12px}
.terms section{display:grid;gap:10px;padding:0;scroll-margin-top:100px}
.terms section:first-child h2{margin-top:0}
.terms section h2{font-size:clamp(1.25rem,2.2vw,1.5rem);margin-top:22px}
.terms .lid{font-weight:700;margin-right:.3em}
.terms ol[type=a]{margin:0;padding-left:2.2em;display:grid;gap:6px}
@media (max-width:860px){.terms{grid-template-columns:1fr}.terms .toc{position:static}}

/* klantenbanner: opvallender, als donkerblauwe band */
.clients{background:var(--navy);color:#fff}
.clients .wrap{padding-block:clamp(22px,3vw,34px)}
.clients .label{color:var(--yellow);font-size:clamp(1.05rem,1.6vw,1.3rem)}
.clients .ticker li{color:#fff;font-size:clamp(1.15rem,1.9vw,1.45rem)}
.clients .ticker li:nth-child(2n)::after{background:var(--yellow)}

/* Cookiebanner (alleen als Google Analytics aan staat) */
.cookiebanner{position:fixed;z-index:50;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:520px;margin-left:auto;box-sizing:border-box;background:var(--card);color:var(--ink);border:2px solid var(--navy);border-radius:16px;box-shadow:6px 6px 0 var(--yellow);padding:20px 22px;font-size:1rem;line-height:1.55}
.cookiebanner p{margin:0 0 14px}
.cookiebanner .ctas{display:flex;flex-wrap:wrap;gap:10px}
.cookiebanner .btn{padding:12px 20px}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.linklike:hover{text-decoration:underline;text-decoration-color:var(--red)}
.linklike:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;border-radius:4px}
.cookiebanner .btn.ghost{border-color:var(--navy)}
/* kennispagina met bronnen */
.kennis{max-width:70ch}
.kennis h3{font-size:1.2rem;margin-top:14px}
.bronref{font-size:.8em;vertical-align:super;line-height:0;text-decoration:none;margin-left:1px}
.bronnen{margin:0;padding-left:1.6em;display:grid;gap:10px;font-size:.95rem;overflow-wrap:anywhere}
.bronnen li:target{background:#fff6d1;outline:2px solid var(--yellow,#f5c400)}
.kennis ol:not(.bronnen){padding-left:1.4em}
.tabel{margin:24px 0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--navy);border-radius:12px;background:var(--card)}
.tabel:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.tabel table{border-collapse:collapse;width:100%;min-width:620px;font-size:.95rem;line-height:1.5}
.tabel th,.tabel td{text-align:left;vertical-align:top;padding:12px 14px;border-bottom:1px solid var(--line)}
.tabel thead th{background:var(--navy);color:#fff;font-family:var(--f-display);font-weight:600}
.tabel tbody th{font-weight:700;min-width:9em}
.tabel tbody tr:last-child>*{border-bottom:0}
.tabel tbody tr:nth-child(even){background:color-mix(in srgb,var(--yellow) 10%,transparent)}

/* kennispagina: inhoudsopgave en projectkaarten */
.kennis-grid{display:grid;grid-template-columns:minmax(0,1fr)}
.toc{display:none}
.kennis h2[id],#faq,#bronnen{scroll-margin-top:100px}
.toc-kop{font:500 var(--s-1)/1.3 var(--f-mono);color:var(--red-ink);letter-spacing:.05em;text-transform:uppercase;margin:0 0 12px}
.toc ol,.toc-m ol{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.toc a,.toc-m a{display:block;padding:7px 12px;border-left:3px solid var(--line);color:var(--muted);text-decoration:none;line-height:1.35}
.toc a:hover,.toc-m a:hover{color:var(--ink,inherit);border-left-color:var(--navy)}
.toc a:focus-visible,.toc-m a:focus-visible,.toc-m summary:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}
.toc a[aria-current="true"]{color:var(--red-ink);border-left-color:var(--red-ink,#c62a1f);font-weight:600}
.toc-m{margin:0 0 28px;border:2px solid var(--navy);border-radius:12px;background:var(--card)}
.toc-m summary{cursor:pointer;padding:12px 16px;font-family:var(--f-display);font-weight:600}
.toc-m nav{padding:0 12px 12px}
@media (min-width:1000px){
  .kennis-grid{grid-template-columns:230px minmax(0,70ch);gap:56px;justify-content:start}
  .toc{display:block}
  .toc nav{position:sticky;top:100px;font-size:.92rem;max-height:calc(100vh - 120px);overflow:auto}
  .toc-m{display:none}
}
.kproject{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:20px;align-items:center;margin:30px 0;padding:14px;border:2px solid var(--navy);border-radius:14px;background:var(--card);color:inherit;text-decoration:none;box-shadow:5px 5px 0 var(--yellow);transition:transform .2s ease}
.kproject:hover,.kproject:focus-visible{transform:translateY(-2px)}
.kproject:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
.kproject img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block}
.kp-tekst{display:grid;gap:6px}
.kp-tekst .meta{font:500 var(--s-1)/1.3 var(--f-mono);color:var(--red-ink);letter-spacing:.05em;text-transform:uppercase}
.kp-tekst strong{font-family:var(--f-display);font-size:1.2rem;line-height:1.25}
.kp-tekst span:not(.meta){color:var(--muted);font-size:.98rem;line-height:1.55}
.kp-tekst span.kp-meer{color:var(--red-ink);font-weight:600}
.kfig{margin:30px 0}
.kfig img{width:100%;border-radius:12px;display:block;border:2px solid var(--navy)}
.kfig figcaption{margin-top:8px;color:var(--muted);font-size:.92rem;line-height:1.5}
@media (max-width:560px){.kproject{grid-template-columns:1fr}}
.kennislijst{display:grid;gap:24px;max-width:900px}
.kennislijst .kproject{margin:0}
/* mobiel menu */
.menuknop,.menu-cta,.menu-contact{display:none}
@media (max-width:900px){
  header.top{position:sticky;top:0}
  header.top .wrap{flex-wrap:nowrap;gap:12px;padding-block:10px}
  header.top .kop-cta{display:none}
  .menuknop{display:inline-flex;align-items:center;gap:10px;margin-left:auto;background:var(--navy);color:#fff;border:0;border-radius:999px;padding:10px 16px 10px 14px;font:600 .98rem/1 var(--f-body);cursor:pointer;min-height:44px}
  .menuknop:focus-visible{outline:3px solid #FAD646;outline-offset:2px}
  .hamb{display:grid;gap:4px;width:18px}
  .hamb i{display:block;height:2px;background:currentColor;border-radius:2px;transition:transform .2s,opacity .2s}
  .menuknop[aria-expanded="true"] .hamb i:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .menuknop[aria-expanded="true"] .hamb i:nth-child(2){opacity:0}
  .menuknop[aria-expanded="true"] .hamb i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  html.js nav.main{visibility:hidden;opacity:0;transform:translateY(-10px);clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .32s cubic-bezier(.2,.7,.2,1),opacity .22s ease,transform .32s cubic-bezier(.2,.7,.2,1),visibility 0s linear .32s}
  html.js nav.main.open{visibility:visible;opacity:1;transform:none;clip-path:inset(0 0 -40px 0);pointer-events:auto;transition:clip-path .36s cubic-bezier(.2,.7,.2,1),opacity .2s ease,transform .36s cubic-bezier(.2,.7,.2,1),visibility 0s}
  nav.main,html.js nav.main.open{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;flex-wrap:nowrap;gap:0;overflow:visible;order:0;width:auto;background:var(--paper);border-bottom:4px solid var(--red);box-shadow:0 18px 30px -18px var(--shadow);padding:8px 16px 20px;font:600 1.15rem/1.2 var(--f-display);max-height:calc(100vh - 64px);overflow-y:auto}
  html:not(.js) nav.main{position:static;box-shadow:none;border:0;padding:0}
  nav.main a{padding:14px 4px;border-bottom:1px solid var(--line);white-space:normal}
  nav.main a[aria-current="page"]{color:var(--red-ink);border-bottom-color:var(--line);box-shadow:inset 4px 0 0 var(--red);padding-left:14px}
  nav.main .menu-cta{display:flex;align-self:stretch;justify-content:center;margin:18px 0 0;padding:14px 18px;border-bottom:0;font-family:var(--f-body)}
  nav.main .menu-contact{display:grid;gap:4px;margin:14px 0 0;font:500 .95rem/1.4 var(--f-body)}
  nav.main .menu-contact a{border:0;padding:4px;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){.hamb i,html.js nav.main,html.js nav.main.open{transition:none}}
/* logo: bij een klik schuiven de strepen en kleurt rood naar geel */
.logo{display:inline-block;line-height:0;border-radius:3px;overflow:hidden}
.logo-svg{height:46px;width:auto;display:block}
.lg-bg{transition:fill .35s ease}
.logo.speel .lg-bg{fill:#FAD646}
.logo.speel .lg-str{animation:lg-schuif .8s cubic-bezier(.45,0,.2,1)}
@keyframes lg-schuif{from{transform:translateX(0)}to{transform:translateX(-474.3888px)}}
@media (max-width:600px){.logo-svg{height:40px}}
@media (prefers-reduced-motion:reduce){.logo.speel .lg-str{animation:none}}