/* ===== site: gedeeld over alle pagina's ===== */
.nav.stuck .in{max-width:940px}
.nav nav a.cur{color:#fff;background:rgba(255,255,255,.08)}
.nav .nb.cur,.mmb .btn.cur{box-shadow:0 0 0 4px rgba(255,255,255,.16)}
.nav .nb.cur:hover,.mmb .btn.cur:hover{box-shadow:0 0 0 4px rgba(255,255,255,.22),0 10px 40px rgba(255,255,255,.14)}
.mt{display:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--line2);position:relative}
.mt i{position:absolute;left:14px;right:14px;height:1.6px;background:#fff;border-radius:2px;transition:transform .45s var(--ease),top .45s var(--ease)}
.mt i:first-child{top:18px}.mt i:last-child{top:25px}
.mm-open .mt i:first-child{top:21.5px;transform:rotate(45deg)}.mm-open .mt i:last-child{top:21.5px;transform:rotate(-45deg)}
.mm{position:fixed;inset:0;z-index:55;background:rgba(8,9,10,.96);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);display:flex;flex-direction:column;justify-content:space-between;padding:120px var(--g) calc(28px + env(safe-area-inset-bottom,0px));opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.mm-open .mm{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.mm nav{display:flex;flex-direction:column;gap:2px}
.mm nav a{font-size:clamp(34px,9vw,52px);font-weight:620;letter-spacing:-.045em;line-height:1.18;color:#9ea2aa;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .7s var(--ease),color .2s}
.mm nav a.cur,.mm nav a:hover{color:#fff}
.mm nav a{display:inline-flex;align-items:center;gap:14px;align-self:flex-start}
.mm nav a.cur::after{content:"";width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(255,255,255,.12)}
.mmb .btn .wai{width:20px;height:20px;flex:none}
.mm-open .mm nav a{opacity:1;transform:none}
.mm-open .mm nav a:nth-child(2){transition-delay:.04s}.mm-open .mm nav a:nth-child(3){transition-delay:.08s}.mm-open .mm nav a:nth-child(4){transition-delay:.12s}.mm-open .mm nav a:nth-child(5){transition-delay:.16s}.mm-open .mm nav a:nth-child(6){transition-delay:.2s}
.mmb{display:flex;flex-direction:column;gap:10px}.mmb .btn{justify-content:center}
@media (max-width:980px){.mt{display:block}.nav .nb{display:none}.nav .in{padding-right:7px}.nav.stuck .in{padding-right:5px;max-width:calc(100% - 28px)}}
@media (min-width:981px){.mm{display:none}}

/* paginakop */
.wrap.ph{padding-top:clamp(150px,17vw,220px)}
.ph h1{font-size:var(--h1);line-height:.98;letter-spacing:-.055em;font-weight:680;max-width:15ch}
.ph h1 .g{color:var(--t3)}
.ph .lead{margin-top:clamp(20px,2.4vw,30px);max-width:54ch;color:#c3c6cc;font-size:clamp(18px,1.6vw,22px);line-height:1.5}
.ph .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.ph .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.ph .acts small{color:var(--t3);font-size:14.5px}
.ready .ph .fade{transition-delay:.35s}
.ready .ph .fade.f2{transition-delay:.5s}
.h2x{font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:-.045em}
.h2x .g,.h2x span.g{color:var(--t3)}
.pl{margin-top:20px;max-width:60ch;color:#c3c6cc;font-size:clamp(17.5px,1.4vw,20px);line-height:1.55}
.pl+.pl{margin-top:14px}
.img-r{position:relative;border-radius:30px;overflow:hidden;background:var(--card)}
.img-r img{width:100%;height:100%;object-fit:cover}
.js .img-r.rv{opacity:1;transform:none;clip-path:inset(12% 8% 12% 8% round 30px);transition:clip-path 1.5s var(--ease)}
.js .img-r.rv.in{clip-path:inset(0 0 0 0 round 30px)}
.js .img-r.rv>img{scale:1.16;transition:scale 2s var(--ease)}
.js .img-r.rv.in>img{scale:1}

/* filters */
.filt{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.filt button{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:0 18px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;color:#c9ccd1;transition:background .25s,color .25s,box-shadow .25s}
.filt button i{font-style:normal;font-size:13px;color:var(--t3)}
.filt button:hover{background:var(--card2);color:#fff}
.filt button.on{background:#f7f8f8;color:#08090a;box-shadow:none}
.filt button.on i{color:#5e626b}

/* case kaarten */
.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(36px,4vw,56px)}
.ccard{display:block;transition:opacity .4s var(--ease)}
.ccard.hide{display:none}
.ccard .im{position:relative;aspect-ratio:4/3;border-radius:26px;overflow:hidden;background:var(--card)}
.ccard .im img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
.ccard:hover .im img{scale:1.04}
.ccard .im .go{position:absolute;right:16px;bottom:16px;display:inline-flex;align-items:center;gap:8px;padding:10px 15px;border-radius:999px;background:rgba(20,21,24,.78);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:14.5px;font-weight:550;opacity:0;transform:translateY(8px);transition:opacity .35s var(--ease),transform .5s var(--ease)}
.ccard:hover .im .go{opacity:1;transform:none}
.ccard .tx{padding:18px 4px 0}
.ccard .tx b{display:block;font-size:15px;font-weight:550;color:var(--t2)}
.ccard .tx h3{margin-top:4px;font-size:clamp(21px,1.9vw,27px);line-height:1.2;letter-spacing:-.03em;max-width:28ch}
.js .ccard.rv .im{clip-path:inset(8% 5% 8% 5% round 26px);transition:clip-path 1.3s var(--ease)}
.js .ccard.rv.in .im{clip-path:inset(0 round 26px)}
@media (hover:none){.ccard .im .go{opacity:1;transform:none}}

/* case pagina */
.chero{padding-top:clamp(140px,15vw,200px)}
.back{display:inline-flex;align-items:center;gap:8px;color:var(--t2);font-size:15.5px;transition:color .2s}
.back:hover{color:#fff}
.back svg{transform:rotate(180deg)}
.chero h1{margin-top:22px;font-size:clamp(40px,6vw,92px);line-height:1;letter-spacing:-.052em;font-weight:680;max-width:17ch}
.chero h1 .g{color:var(--t3)}
.cmeta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:30px}
.cmeta .lg{height:46px;padding:0 18px;border-radius:999px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;align-items:center}
.cmeta .lg img{height:24px;width:auto;max-width:150px;object-fit:contain;filter:brightness(0) invert(1)}
.cimg{margin-top:clamp(40px,5vw,64px);aspect-ratio:16/9}
.cbody{max-width:780px;margin:0 auto;padding-top:clamp(70px,8vw,120px)}
.cbody .ld{font-size:clamp(21px,2vw,28px);line-height:1.45;letter-spacing:-.022em;color:#e6e8eb}
.cbody section{margin-top:clamp(56px,6vw,84px)}
.cbody h2{font-size:clamp(28px,3vw,40px);line-height:1.08;letter-spacing:-.04em}
.cbody p{margin-top:18px;color:#c3c6cc;font-size:clamp(17.5px,1.35vw,19.5px);line-height:1.62}
.cbody section.res{padding:clamp(28px,3.4vw,46px);border-radius:28px;background:radial-gradient(70% 90% at 100% 0,rgba(255,255,255,.08),transparent 70%),var(--card2);box-shadow:inset 0 0 0 1px var(--line2)}
.cbody section.res p{color:#e2e4e7}
.cbody .qt{margin-top:clamp(56px,6vw,84px)}
.nextc{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(18px,2vw,26px);border-radius:32px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s}
.nextc:hover{background:var(--card2)}
.nextc .im{aspect-ratio:16/10;border-radius:22px;overflow:hidden}
.nextc .im img{width:100%;height:100%;object-fit:cover;transition:scale 1s var(--ease)}
.nextc:hover .im img{scale:1.04}
.nextc small{display:block;color:var(--t2);font-size:15px}
.nextc h3{margin-top:8px;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.04em}
.nextc p{margin-top:10px;color:var(--t2);font-size:17px;max-width:34ch}
.nextc .btn{margin-top:22px}
@media (max-width:980px){.cgrid{grid-template-columns:1fr}.nextc{grid-template-columns:1fr}.cimg{aspect-ratio:4/3}}

/* over */
.ohero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:end}
.ohero .img-r{aspect-ratio:4/4.6}
.ohero .img-r img{object-position:50% 30%}
.twoimg{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(30px,5vw,80px);align-items:center}
.twoimg .img-r{aspect-ratio:4/5}
.bigq{font-size:clamp(30px,3.6vw,54px);line-height:1.08;letter-spacing:-.045em;font-weight:620;max-width:20ch}
.bigq .g{color:var(--t3)}
.tl{position:relative;margin-top:clamp(50px,6vw,80px);padding-left:clamp(40px,6vw,96px)}
.tl::before{content:"";position:absolute;left:clamp(8px,1.4vw,22px);top:8px;bottom:8px;width:2px;background:var(--line2);border-radius:2px}
.tl .tlbar{position:absolute;left:clamp(8px,1.4vw,22px);top:8px;width:2px;height:0;background:#fff;border-radius:2px;box-shadow:0 0 18px rgba(255,255,255,.5)}
.tl .it{position:relative;padding-bottom:clamp(40px,5vw,64px)}
.tl .it::before{content:"";position:absolute;left:calc(-1 * clamp(40px,6vw,96px) + clamp(8px,1.4vw,22px) - 6px);top:10px;width:14px;height:14px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--t3);transition:box-shadow .5s,background .5s}
.tl .it.on::before{background:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.tl .yr{font-size:clamp(15px,1.2vw,16.5px);color:var(--t2);font-weight:550}
.tl h3{margin-top:6px;font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.035em}
.tl h3 span{color:var(--t3);font-weight:500}
.tl p{margin-top:12px;max-width:62ch;color:#c3c6cc;font-size:17.5px;line-height:1.6}
.revs{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:clamp(40px,5vw,64px)}
.revs article{display:flex;flex-direction:column;justify-content:space-between;gap:26px;padding:clamp(24px,2.6vw,34px);border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.revs p{font-size:17.5px;line-height:1.55;color:#e2e4e7}
.revs .who3{display:flex;align-items:center;gap:14px}
.revs .who3 img{width:52px;height:52px;border-radius:50%;object-fit:cover;box-shadow:inset 0 0 0 1px var(--line2);background:var(--card2)}
.revs .who3 img.lgo{object-fit:contain;padding:9px;background:#fff}
.revs .who3 b{display:block;font-size:16px;font-weight:600}
.revs .who3 small{display:block;color:var(--t2);font-size:14.5px}
@media (max-width:980px){.ohero,.twoimg{grid-template-columns:1fr}.revs{grid-template-columns:1fr}.ohero .img-r{aspect-ratio:4/4.2}}

/* contact */
.cacts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:clamp(36px,4vw,56px)}
.cact{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:clamp(22px,2.6vw,32px);border-radius:28px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,transform .5s var(--ease)}
.cact:hover{background:var(--card2)}
.cact .l{display:flex;align-items:center;gap:18px}
.cact .ico{width:58px;height:58px;border-radius:18px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);display:grid;place-items:center;flex:none}
.cact .ico img{width:28px;height:28px}
.cact b{display:block;font-size:clamp(20px,1.8vw,24px);letter-spacing:-.025em}
.cact small{display:block;color:var(--t2);font-size:15.5px}
.cact .arr{width:46px;height:46px;border-radius:50%;background:#f7f8f8;color:#08090a;display:grid;place-items:center;flex:none;transition:transform .5s var(--ease)}
.cact:hover .arr{transform:translateX(4px)}
.ctgrid{display:grid;grid-template-columns:1.25fr .75fr;gap:14px;margin-top:14px}
.panel{padding:clamp(24px,3vw,44px);border-radius:30px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.panel h2{font-size:clamp(28px,2.8vw,40px);line-height:1.06;letter-spacing:-.04em;max-width:18ch}
.panel>p{margin-top:12px;color:var(--t2);font-size:17px;max-width:52ch}
.frm{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.frm .full{grid-column:1/-1}
.fld label{display:block;font-size:14.5px;color:#c9ccd1;margin-bottom:7px;font-weight:500}
.fld label em{font-style:normal;color:var(--t3);font-weight:400}
.fld label .req{color:#fff;margin-left:2px}
.fld input,.fld textarea,.fld select{width:100%;min-height:54px;padding:14px 16px;border-radius:16px;border:0;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);color:#fff;font:inherit;font-size:16.5px;transition:box-shadow .25s,background .25s}
.fld textarea{min-height:140px;resize:vertical}
.fld input::placeholder,.fld textarea::placeholder{color:#62666e}
.fld input:focus,.fld textarea:focus{outline:0;background:#212227;box-shadow:inset 0 0 0 1.5px #fff}
.fld.err input,.fld.err textarea{box-shadow:inset 0 0 0 1.5px var(--err)}
.frm .send{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:6px}
.frm .send small{color:var(--t3);font-size:14px}
.ok{display:none;padding:26px;border-radius:22px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line2);margin-top:26px}
.ok b{display:block;font-size:22px;letter-spacing:-.025em}
.ok p{margin-top:6px;color:#c3c6cc}
.sent .frm{display:none}.sent .ok{display:block}
.side2{display:grid;gap:14px;align-content:start}
.addr{border-radius:30px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.addr .map{position:relative;aspect-ratio:16/10;background:var(--card2)}
.addr .map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) invert(.92) contrast(.9)}
.addr .tx{padding:20px 22px}
.addr b{display:block;font-size:18px;letter-spacing:-.02em}
.addr span{display:block;color:var(--t2);font-size:15.5px}
.addr a{display:inline-flex;margin-top:10px;font-size:15px;color:#c9ccd1;gap:6px;align-items:center}
.addr a:hover{color:#fff}
@media (max-width:980px){.cacts,.ctgrid,.frm{grid-template-columns:1fr}}

/* blog */
.bfeat{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:stretch;margin-top:clamp(36px,4vw,56px);padding:clamp(18px,2vw,26px);border-radius:32px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s}
.bfeat:hover{background:var(--card2)}
.bart{position:relative;border-radius:22px;overflow:hidden;min-height:300px;background:#0d0e10;display:flex;align-items:flex-end;padding:26px}
.bart .t{position:relative;z-index:1;font-size:clamp(28px,3.2vw,48px);font-weight:700;line-height:1;letter-spacing:-.05em;color:#fff;max-width:12ch}
.bart::before{content:"";position:absolute;inset:-30%;background:radial-gradient(40% 40% at var(--x,70%) var(--y,30%),rgba(255,255,255,.22),transparent 70%),radial-gradient(50% 50% at 20% 90%,rgba(255,255,255,.08),transparent 70%);transition:transform 1.2s var(--ease)}
.bart::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,#000,transparent)}
.bfeat:hover .bart::before{transform:scale(1.08) rotate(3deg)}
.bfeat .bt{display:flex;flex-direction:column;justify-content:center;padding:10px 6px}
.bmeta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;color:var(--t2);font-size:14.5px}
.bmeta .tag{padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.07);color:#d6d8dc;font-size:13.5px}
.bfeat h2{margin-top:16px;font-size:clamp(28px,2.8vw,42px);line-height:1.06;letter-spacing:-.04em}
.bfeat p{margin-top:14px;color:var(--t2);font-size:17px}
.bfeat .btn{margin-top:24px;align-self:flex-start}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.bcard{display:flex;flex-direction:column;gap:14px;padding:clamp(22px,2.2vw,28px);border-radius:26px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:background .3s,transform .6s var(--ease)}
.bcard:hover{background:var(--card2);transform:translateY(-4px)}
.bcard h3{font-size:clamp(20px,1.6vw,23px);line-height:1.22;letter-spacing:-.025em}
.bcard p{color:var(--t2);font-size:15.5px;line-height:1.55}
.bcard .rd{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-size:15px;color:#c9ccd1}
.bcard.hide,.bfeat.hide{display:none}
@media (max-width:980px){.bfeat{grid-template-columns:1fr}.bgrid{grid-template-columns:1fr}}
@media (min-width:981px) and (max-width:1180px){.bgrid{grid-template-columns:repeat(2,1fr)}}

/* artikel */
.ahero{padding-top:clamp(140px,15vw,200px);max-width:900px}
.ahero h1{margin-top:20px;font-size:clamp(38px,5.4vw,78px);line-height:1.02;letter-spacing:-.05em;font-weight:680}
.ahero .bmeta{margin-top:24px}
.alay{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(30px,5vw,80px);align-items:start;margin-top:clamp(40px,5vw,70px)}
.prose{max-width:720px;font-size:clamp(17.5px,1.3vw,19px);line-height:1.68;color:#c9ccd1}
.prose>p:first-child{font-size:clamp(20px,1.8vw,24px);line-height:1.5;color:#e6e8eb;letter-spacing:-.02em}
.prose h2{margin-top:clamp(48px,5vw,70px);font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.04em;color:#fff}
.prose p{margin-top:16px}
.prose a{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px}
.prose a:hover{text-decoration-color:#fff}
.prose strong{color:#fff;font-weight:600}
.prose ul,.prose ol{margin-top:16px;padding-left:0;list-style:none;display:grid;gap:12px}
.prose ul li,.prose ol li{position:relative;padding:16px 18px 16px 50px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.prose ul li::before{content:"";position:absolute;left:20px;top:25px;width:10px;height:10px;border-radius:50%;background:#fff}
.prose ol{counter-reset:o}
.prose ol li{counter-increment:o}
.prose ol li::before{content:counter(o);position:absolute;left:16px;top:15px;width:24px;height:24px;border-radius:50%;background:#fff;color:#08090a;font-size:13px;font-weight:700;display:grid;place-items:center}
.prose .tw{margin-top:22px;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line2);overflow-x:auto}
.prose table{width:100%;border-collapse:collapse;font-size:16px;min-width:560px}
.prose th{text-align:left;padding:14px 18px;color:#fff;font-weight:600;background:var(--card2)}
.prose td{padding:14px 18px;border-top:1px solid var(--line)}
.prose tr:hover td{background:rgba(255,255,255,.02)}
.prose .faq{margin-top:18px}
.prose .faq summary{font-size:17px;color:#fff}
.aside{position:sticky;top:110px;padding:26px;border-radius:26px;background:radial-gradient(80% 80% at 100% 0,rgba(255,255,255,.08),transparent 70%),var(--card2);box-shadow:inset 0 0 0 1px var(--line2)}
.aside b{display:block;font-size:22px;letter-spacing:-.03em;line-height:1.15}
.aside p{margin-top:10px;color:var(--t2);font-size:15.5px}
.aside .btn{margin-top:18px;width:100%;justify-content:center}
.aside .pr{margin-top:18px;font-size:44px;font-weight:680;letter-spacing:-.05em;line-height:1}
.aside .pr small{display:block;font-size:14px;letter-spacing:0;font-weight:400;color:var(--t2);margin-bottom:4px}
.rprog{position:fixed;left:0;top:0;height:3px;width:0;background:#fff;z-index:80;box-shadow:0 0 12px rgba(255,255,255,.6)}
@media (max-width:980px){.alay{grid-template-columns:1fr}.aside{position:relative;top:auto}}
.errm{display:none;margin-top:6px;font-size:14px;color:var(--err)}
.fld.err .errm{display:block}

/* ===== systeem voor de hele site (BRIEF: Eén systeem) ===== */
:root{
  --sec-pad:clamp(96px,11vw,160px);
  --h1:clamp(48px,8vw,120px);--h1-lh:.98;--h1-ls:-.055em;
  --h2:clamp(36px,5vw,64px);--h2-lh:1.02;--h2-ls:-.03em;
  --h3:clamp(22px,1.9vw,28px);--h3-lh:1.15;
  --body:18px;--body-lh:1.6;--soft:#c3c6cc;
  --sp-text:24px;--sp-btn:40px;--sp-grid:64px;--gap:clamp(24px,2.2vw,32px);
  --head-max:900px;--intro-max:640px;
  --err:#e9a2a2;
}
@media (max-width:640px){:root{--sec-pad:88px;--h1:clamp(44px,12.4vw,64px);--body:17px;--sp-grid:40px;--gap:24px}}
.zsec{padding-top:var(--sec-pad);padding-bottom:var(--sec-pad)}
.zh1{font-size:var(--h1);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);font-weight:680}
.zh2{font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);font-weight:650}
.zh3{font-size:var(--h3);line-height:var(--h3-lh);letter-spacing:-.025em;font-weight:600}
.ztxt{font-size:var(--body);line-height:var(--body-lh);color:var(--soft)}
.ztxt+.ztxt{margin-top:14px}
/* sectiekop: gecentreerd, kop max 900, intro max 640, raster 64 (gsm 40) eronder */
.shead{max-width:var(--head-max);margin:0 auto var(--sp-grid);text-align:center}
.shead h2{font-size:var(--h2);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);font-weight:650;margin:0 auto}
.shead h2 .g{color:var(--t3)}
.shead p{max-width:var(--intro-max);margin:var(--sp-text) auto 0;font-size:var(--body);line-height:var(--body-lh);color:var(--soft)}
.shead p+p{margin-top:14px}
.shead .zacts{justify-content:center}
.shead.l{text-align:left;margin-left:0}.shead.l h2,.shead.l p{margin-left:0}
.shead.flush{margin-bottom:0}
.zacts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:var(--sp-btn)}
.zacts small{color:var(--t2);font-size:14.5px}
.zgrid{display:grid;gap:var(--gap)}
.zgrid.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.zgrid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.zgrid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.zgrid.c3,.zgrid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.zgrid.c2,.zgrid.c3,.zgrid.c4{grid-template-columns:1fr}}
.btn .wai{width:20px;height:20px;flex:none}

/* breadcrumb: Home / Blog / Titel. Markup: <nav class="crumbs" aria-label="Kruimelpad"><a href>Home</a><span aria-hidden="true">/</span>...<span aria-current="page">Titel</span></nav> */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14.5px;line-height:1.4;color:var(--t2)}
.crumbs a{color:var(--t2);border-radius:6px;transition:color .2s}
.crumbs a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.4)}
.crumbs span[aria-hidden]{color:var(--t3)}
.crumbs [aria-current]{color:#fff}

/* footer: identiek op elke pagina */
footer.foot .top{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1.05fr) minmax(0,1.1fr) minmax(0,1.25fr);gap:clamp(24px,3vw,48px)}
footer.foot .top .brand{grid-column:auto}
footer.foot h4{white-space:nowrap}
@media (max-width:1100px){footer.foot h4{white-space:normal}}
footer.foot a.chip{transition:background .25s,box-shadow .25s}
footer.foot a.chip:hover{background:var(--card2);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
footer.foot .wa-btn{white-space:nowrap;transition:background .25s}
footer.foot .wa-btn:hover{background:#25262b}
footer.foot .bot a{color:var(--t2);transition:color .2s}
footer.foot .bot a:hover{color:#fff}
@media (max-width:1100px) and (min-width:981px){footer.foot .top{grid-template-columns:repeat(4,minmax(0,1fr))}footer.foot .top .brand{grid-column:1/-1}}
@media (max-width:980px){footer.foot .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 24px}footer.foot .top .brand{grid-column:1/-1}}
@media (max-width:640px){footer.foot .top>div:nth-child(4),footer.foot .top>div:nth-child(5){grid-column:1/-1}footer.foot .top>div:nth-child(4) ul{display:flex;flex-wrap:wrap;gap:10px 22px}footer.foot .bot{flex-direction:column;gap:14px}}

/* afsluitende CTA voor de hele site: final() in build_site.py */
main section.fz{position:relative;overflow:hidden;isolation:isolate;margin-top:var(--sec-pad);padding:clamp(64px,8vw,124px) clamp(22px,4vw,60px);border-radius:36px;text-align:center;background:radial-gradient(60% 90% at 50% 0%,rgba(255,255,255,.09),transparent 70%),var(--panel);box-shadow:inset 0 0 0 1px var(--line2)}
section.fz::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s;background:radial-gradient(520px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.075),transparent 65%)}
section.fz:hover::before{opacity:1}
section.fz::after{content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:56px 56px;background-position:center top;-webkit-mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%);mask-image:radial-gradient(70% 80% at 50% 0%,#000,transparent 75%)}
main section.fz{box-shadow:inset 0 0 0 1px var(--line2),inset 0 1px 0 rgba(255,255,255,.14),0 40px 120px rgba(0,0,0,.45)}
section.fz h2{font-size:clamp(40px,5.6vw,80px);line-height:1.02;letter-spacing:-.05em;font-weight:680;max-width:20ch;margin:0 auto}
section.fz p.fz-p{max-width:46ch;margin:var(--sp-text) auto 0;color:var(--t2);font-size:clamp(17px,1.35vw,19px);line-height:1.55}
.fz-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:var(--sp-btn)}
.fz-row .btn{min-height:56px;padding:0 26px;font-size:16.5px}
section.fz small.fz-s{display:block;margin-top:22px;color:var(--t3);font-size:14.5px}
@media (max-width:640px){main section.fz{border-radius:28px;padding:64px 20px}section.fz h2{font-size:clamp(34px,9.4vw,42px)}.fz-row .btn{width:100%;justify-content:center}}
/* ===== footer: compacter, logo vervaagt naar onder ===== */
footer.foot .top{grid-template-columns:minmax(220px,300px) repeat(4,max-content);justify-content:space-between;gap:clamp(24px,3vw,44px)}
footer.foot li a,footer.foot li span{white-space:nowrap}
footer.foot h4.fk{margin-top:26px}
footer.foot .top>div ul li span{display:block}
footer.foot .brand .chip{white-space:nowrap}
footer.foot h4{padding-right:6px}
footer.foot .top>div{grid-column:auto!important}
footer.foot .top>div ul{display:grid!important;gap:9px}
footer.foot .brand p{max-width:28ch}
footer.foot .mark{opacity:.12;-webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 95%);mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.55) 45%,transparent 95%);margin-top:clamp(48px,6vw,80px)}
footer.foot .bot{margin-top:6px}
@media (max-width:1180px){
  footer.foot .top{grid-template-columns:repeat(4,max-content);gap:36px 24px}
  footer.foot .top .brand{grid-column:1/-1!important}
}
@media (max-width:640px){
  footer.foot .top{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  footer.foot .top .brand{grid-column:1/-1!important}
  footer.foot .top>div:last-child{grid-column:1/-1!important}
  footer.foot .brand p{font-size:15px}
  footer.foot li a,footer.foot li span{font-size:15px}
  footer.foot .mark{margin-top:36px}
  footer.foot .top>div:nth-child(4){grid-column:1/-1!important}
  footer.foot .top>div:nth-child(4) ul{display:flex!important;flex-wrap:wrap;gap:8px 18px}
  footer.foot li a,footer.foot li span{white-space:normal}
}
/* gsm: geen scrollanimaties, alles staat meteen in beeld */
@media (max-width:980px),(pointer:coarse){
.js .rv,.js .rv.in,.js .w,.js .w.show{opacity:1!important;transform:none!important;transition:none!important}
.wl-sp .wl-w>i{transform:none!important;transition:none!important}
.wl-clip,.js .img-r.rv,.js .ccard.rv .im,.js .online .vis.rv,.js .cs .im.rv,.js .work a.rv .im,.js .hpv.rv{clip-path:none!important;opacity:1!important}
.js .img-r.rv>img,.js .online .vis.rv>img,.wl-clip>img{scale:1!important;transform:none!important}
}

/* gsm: zware effecten uit, zodat niets wegvalt tijdens snel scrollen */
@media (max-width:980px),(pointer:coarse){
.ghost{display:none!important}
*,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.nav.stuck .in{background:rgba(14,15,17,.96)!important}
.mm{background:#08090a!important}
.chip,.hmpath .ptag,.ccard .im .go,.wl-pic .nm,.lh .cap2 .nm,.wl-nt,.online .chip2,.online .chip3,.kt-live,.rw-stat{background:rgba(20,21,24,.94)!important}
.btn,.chatcol .w,.chatcol .typing,.ovhero-im img,.ovbk-r,.cz-frame img,.cz-dimg img{will-change:auto!important}
.cz-scene.on .cz-bg img{filter:none!important}
}

/* gsm: elk element dat met een animatie in beeld kwam, staat nu meteen vast */
@media (max-width:980px),(pointer:coarse){
.js .sp .wd>i,.js .wl-sp .wl-w>i{transform:none!important;transition:none!important}
.js .four .ic,.js .cs li,.js .hpv .chip,.js .hpv .hpc,.js .online .vis .chip2,.js .online .vis .chip3,.wl-nt,.tr b{opacity:1!important;transform:none!important;translate:none!important;transition:none!important}
.js .cz-det.rv,.js .cz-scene .cz-frame,.js .rw-card.rv .rw-im,.js .wl-clip{clip-path:none!important;opacity:1!important}
.js .rw-card.rv,.js .rw-card.rv .rw-im>img,.js .wl-clip>img{transform:none!important;scale:1!important;transition:none!important}
}