:root{
  color-scheme: dark;
  --bg:#231F1C; --bg-d:#1A1715; --bg-l:#2F2A26;
  --cream:#F2EBDD; --soft:#D9D1C1; --dim:#A89F93;
  --koper:#C9A45C; --koper-l:#E0C488; --koper-d:#8A6A2C;
  --line:rgba(242,235,221,.16); --line-k:rgba(201,164,92,.45);
  --paper:#FBF8F2; --ink:#231F1C; --ink-m:#62594d; --rule:#DCD2C0;
  --design:#5E1B25; --geo:#1E3A2F; --ai:#1B2442; --fd:#231F1C;
  --warn:#D98B5F; --ok:#8DBF8A;
  --caslon:"Libre Caslon Display","Libre Caslon Text",Georgia,serif;
  --caslon-t:"Libre Caslon Text",Georgia,serif;
  --sans:"Public Sans",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px); --balk:96px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--cream);font-family:var(--sans);font-size:16px;line-height:1.6;padding-inline:var(--gutter);padding-block:0;-webkit-font-smoothing:antialiased}
main{display:block;padding-top:var(--balk)}
/* de scrollanimatie die de hero vervangt schuift onder de doorzichtige menubalk */
main>.scrub:first-child{margin-top:calc(-1 * var(--balk));border-top:0}
/* Korrel over de vlakke kleur (5 okt 2026, naslag scroll-film-craft.md sectie 8). Vaste laag, klikt niet mee. */
body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.08;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") repeat;background-size:220px 220px}
h1,h2,h3,h4{margin:0;font-weight:400;text-wrap:balance}
p,ul,ol{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--koper);outline-offset:3px}
.wrap{max-width:1160px;margin-inline:auto}
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--koper)}
em{font-family:var(--caslon-t);font-style:italic;color:var(--koper)}
.skip{position:absolute;left:-999px;top:8px;background:var(--cream);color:var(--ink);padding:8px 12px;border-radius:3px;z-index:9}
.skip:focus{left:16px}

.wm{display:grid;color:var(--cream);text-decoration:none}
.wm .het{font-family:var(--caslon-t);font-style:italic;font-size:.42em;line-height:1;margin-bottom:-.06em}
.wm .noun{font-family:var(--caslon);font-size:1em;line-height:.95}
.wm .noun b{font-weight:400;color:var(--koper)}

/* Menubalk (13 okt 2026, naar joincellular.com): bovenaan doorzichtig over de volle breedte, 96 px, geen vlak.
   Na 40 px scrollen schuift hij samen tot een zwevende pil in het midden (.pil: bureaukleur op 82 procent met blur,
   ronde hoeken, dunne rand), verdwijnt hij bij verder naar beneden scrollen (.weg) en komt hij terug zodra de
   bezoeker een stukje omhoog scrolt (SCRIPT). Op gsm: hamburger, doorzichtige balk, geen pil, wel .weg. */
/* Overgang balk -> pil (13 okt 2026, naar de gemeten overgang van joincellular.com: één laag die in ±450 ms
   krimpt met een lichte veer): .nav blijft het vaste, doorzichtige element over de volle breedte; .nav-in is de
   schil die morpht via max-width (de pilbreedte meet SCRIPT in --pil-w), hoogte, hoeken, achtergrond, blur en
   positie. Alles in dezelfde easing en duur, zodat er geen sprong tussen twee toestanden is. */
.nav{--ease:cubic-bezier(.3,1.08,.3,1);--duur:.45s;position:fixed;top:0;left:0;right:0;z-index:60;height:var(--balk);padding-inline:var(--gutter);background:transparent;transition:transform var(--duur) var(--ease),height var(--duur) var(--ease)}
.nav-in{--pil-w:720px;max-width:1160px;margin-inline:auto;height:100%;display:flex;align-items:center;justify-content:space-between;gap:28px;border-radius:0;background:rgba(35,31,28,0);-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);border:1px solid rgba(242,235,221,0);padding:0;
  transition:max-width var(--duur) var(--ease),height var(--duur) var(--ease),border-radius var(--duur) var(--ease),background-color var(--duur) var(--ease),border-color var(--duur) var(--ease),padding var(--duur) var(--ease),gap var(--duur) var(--ease),box-shadow var(--duur) var(--ease),-webkit-backdrop-filter var(--duur) var(--ease),backdrop-filter var(--duur) var(--ease)}
.nav .wm{font-size:38px;position:relative;z-index:2;transition:font-size var(--duur) var(--ease)}
.nav .wm .het{transition:opacity .25s ease,max-height var(--duur) var(--ease);max-height:1em;overflow:hidden}
.nav .ov{display:contents}
.nav ul.hoofd{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-family:var(--caslon-t);font-size:17px;line-height:1.2;transition:font-size var(--duur) var(--ease),gap var(--duur) var(--ease)}
.nav ul.hoofd>li>a,.nav .menu-sub{text-decoration:none;color:var(--cream);position:relative;padding-block:6px;transition:color .2s ease;font:inherit;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav ul.hoofd>li>a::after,.nav .menu-sub>span::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--koper);transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav ul.hoofd>li>a:hover::after,.nav ul.hoofd>li>a:focus-visible::after,.nav ul.hoofd>li>a[aria-current]::after,.nav .menu-sub:hover>span::after,.nav .menu-sub[aria-expanded="true"]>span::after{transform:scaleX(1)}
.nav .menu-sub>span{position:relative;padding-block:6px}
.nav .menu-sub svg{width:13px;height:13px;transition:transform .25s ease;color:var(--koper)}
.nav .menu-sub[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav .nav-r{display:flex;align-items:center;gap:26px;transition:gap var(--duur) var(--ease)}
.nav .taal{transition:opacity .25s ease,max-width var(--duur) var(--ease);max-width:80px;overflow:visible}
.nav .cta{display:inline-flex;align-items:center;gap:10px;height:44px;padding-inline:20px;background:var(--koper);color:var(--bg);font-size:15px;font-weight:500;text-decoration:none;border-radius:2px;white-space:nowrap;transition:background var(--duur) var(--ease),color var(--duur) var(--ease),border-color var(--duur) var(--ease),height var(--duur) var(--ease),border-radius var(--duur) var(--ease),padding var(--duur) var(--ease),font-size var(--duur) var(--ease)}
.nav .cta .pijl{display:inline-block;transition:transform .2s ease}
.nav .cta:hover{background:var(--koper-l)}
/* bovenaan (naast de grote knop in de hero) omlijnd en stiller; in de pil gevuld */
.nav:not(.pil):not(.open) .cta{background:transparent;border:1px solid var(--koper);color:var(--koper-l)}
.nav:not(.pil):not(.open) .cta:hover{background:rgba(201,164,92,.14)}
.nav .cta:hover .pijl,.nav .cta:focus-visible .pijl{transform:translateX(3px)}
/* hamburger (gsm) */
.nav .menu{display:none;width:44px;height:44px;background:none;border:0;color:var(--cream);padding:10px;cursor:pointer;position:relative;z-index:2}
.nav .menu span{display:block;height:1.5px;background:currentColor;margin:7px 0;transition:transform .3s ease,opacity .3s ease}
.nav .menu[aria-expanded="true"] span:first-child{transform:translateY(4.25px) rotate(45deg)}
.nav .menu[aria-expanded="true"] span:last-child{transform:translateY(-4.25px) rotate(-45deg)}
/* de pil: .nav schuift 14 px naar beneden en wordt 62 px hoog; .nav-in krimpt tot de gemeten breedte --pil-w */
.nav.pil{height:62px;transform:translateY(14px)}
.nav.pil .nav-in{max-width:var(--pil-w);height:62px;padding:0 11px 0 24px;gap:30px;border-radius:999px;background:rgba(35,31,28,.82);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);border-color:rgba(242,235,221,.22);box-shadow:0 14px 36px rgba(0,0,0,.42),0 1px 0 rgba(242,235,221,.06) inset}
.nav.pil .wm{font-size:26px}
.nav.pil .wm .het{opacity:0;max-height:0}
.nav.pil ul.hoofd{gap:30px;font-size:16px}
.nav.pil .taal{opacity:0;max-width:0;pointer-events:none;overflow:hidden}
.nav.pil .nav-r{gap:0}
.nav.pil .cta{height:40px;padding-inline:16px;border-radius:999px;font-size:14px}
/* meten: de pilbreedte zonder overgang en onzichtbaar (SCRIPT zet .meet één frame) */
.nav.meet,.nav.meet *{transition:none!important;animation:none!important}
.nav.meet .nav-in{max-width:none;width:max-content;visibility:hidden}
/* weg bij naar beneden scrollen, terug bij omhoog: zelfde easing */
.nav.weg{transform:translateY(-130%);pointer-events:none}
.nav.pil.weg{transform:translateY(-160%)}
.nav.open.weg,.nav.sub-open.weg{transform:none;pointer-events:auto}
.nav.pil.sub-open.weg{transform:translateY(14px)}
/* het klapmenu: kaarten met beeld, titel en één regel */
.nav .menu-groep{position:static}
.nav .menu-paneel{position:absolute;top:calc(100% + 8px);left:50%;z-index:5;width:min(760px,calc(100vw - 32px));display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px;
  background:rgba(35,31,28,.94);-webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);border:1px solid rgba(242,235,221,.22);border-radius:22px;box-shadow:0 24px 60px rgba(0,0,0,.4);
  opacity:0;visibility:hidden;transform:translate(-50%,-6px);transition:opacity .22s ease,transform .22s ease,visibility 0s linear .22s}
.nav .menu-groep.open .menu-paneel{opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s}
.nav .menu-paneel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav .menu-kaart{display:flex;flex-direction:column;gap:10px;padding:8px;border-radius:16px;text-decoration:none;color:var(--cream);transition:background .2s ease;font-family:var(--sans)}
.nav .menu-kaart:hover,.nav .menu-kaart:focus-visible{background:rgba(242,235,221,.07)}
.nav .menu-kaart img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block}
.nav .menu-kaart .menu-kaart-tekst{display:flex;flex-direction:column;gap:3px;padding:0 4px 4px}
.nav .menu-kaart b{font-family:var(--caslon);font-weight:400;font-size:17px;line-height:1.15}
.nav .menu-kaart small{font-size:13px;line-height:1.45;color:var(--soft)}
/* de scankaart weegt iets zwaarder dan de andere drie */
.nav .menu-kaart[data-slug="scan"] b{color:var(--koper-l);font-size:18px}
.nav .menu-kaart[data-slug="scan"] img{box-shadow:0 0 0 1px var(--koper-d)}
.nav .menu-kaart:hover b{color:var(--koper-l)}
#klapmenu-bureaus{grid-template-columns:repeat(3,1fr);width:min(720px,calc(100vw - 32px))}
.nav .menu-kaart .wm{font-size:22px;line-height:1}
.nav .menu-kaart.b-design img{box-shadow:0 0 0 2px var(--design)}.nav .menu-kaart.b-geo img{box-shadow:0 0 0 2px var(--geo)}.nav .menu-kaart.b-ai img{box-shadow:0 0 0 2px var(--ai)}
.nav .menu-kaart.b-design,.nav .menu-kaart.b-geo,.nav .menu-kaart.b-ai{background:transparent}
/* taalkeuze: één klein NL dat een lijstje met de talen voluit opent */
.taal details{position:relative}
.taal summary{list-style:none;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--soft);padding:8px 4px;transition:color .2s ease}
.taal summary::-webkit-details-marker{display:none}
.vlag{display:inline-block;vertical-align:-1px;margin-right:6px;border-radius:2px;box-shadow:0 0 0 1px rgba(242,235,221,.25);flex:none}
.taal summary,.taal li a,footer .voet-taal a{display:inline-flex;align-items:center}
.taal li a .vlag{margin-right:9px}
.taal summary:hover,.taal details[open] summary{color:var(--cream)}
.taal ul{position:absolute;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px 0;min-width:160px;background:var(--bg-d);border:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.4);z-index:5}
.taal li a{display:block;padding:8px 16px;font-size:14px;color:var(--soft);text-decoration:none;white-space:nowrap;transition:color .2s ease,background .2s ease}
.taal li a:hover{color:var(--cream);background:var(--bg-l)}
.taal li a[aria-current]{color:var(--koper-l)}
@media (max-width:960px){
  .nav .wm{font-size:30px}
  .nav .menu{display:inline-block}
  .nav.pil{height:64px;transform:none;background:rgba(35,31,28,.72);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform var(--duur) var(--ease),height var(--duur) var(--ease),background-color var(--duur) var(--ease),-webkit-backdrop-filter var(--duur) var(--ease),backdrop-filter var(--duur) var(--ease)}
  /* 17 okt 2026: elke backdrop-filter (ook blur(0)) maakt van .nav-in het kader voor het vaste overlay, waardoor
     het gsm-menu in de balk van 96 px opgesloten zat en niet zichtbaar werd. Op gsm dus nergens een filter op .nav-in. */
  .nav .nav-in{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav.pil .nav-in{max-width:none;padding:0;border-radius:0;background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;height:100%}
  .nav.pil .wm{font-size:28px}
  .nav.pil .wm .het{opacity:1;max-height:1em}
  .nav.pil .taal{opacity:1;max-width:none;pointer-events:auto;overflow:visible}
  .nav.pil.weg{transform:translateY(-110%)}
  /* open: geen backdrop-filter, want die maakt de balk het referentiekader van het vaste overlay (.ov) */
  .nav.open,.nav.open.pil{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav .ov{display:none;position:fixed;inset:0;z-index:1;background:var(--bg);padding:calc(var(--balk) + 8px) var(--gutter) 36px;flex-direction:column;justify-content:space-between;gap:40px;overflow:auto}
  .nav.open .ov{display:flex}
  .nav ul.hoofd,.nav.pil ul.hoofd{flex-direction:column;align-items:flex-start;gap:0;font-family:var(--caslon);font-size:34px;line-height:1.1}
  .nav ul.hoofd>li>a{display:inline-block;padding-block:8px}
  .nav ul.hoofd>li>a::after{display:none}
  /* de kaarten van het klapmenu staan op gsm gewoon in de lijst: geen knop, geen paneel, geen beelden */
  .nav .menu-sub{display:none}
  .nav .menu-groep{display:contents}
  .nav .menu-paneel{position:static;width:auto;display:contents;opacity:1;visibility:visible;transform:none;background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav .menu-paneel::before{content:none}
  .nav .menu-kaart{padding:0;gap:0;border-radius:0;background:none;display:block;padding-block:8px}
  .nav .menu-kaart img,.nav .menu-kaart small{display:none}
  .nav .menu-kaart .menu-kaart-tekst{padding:0}
  .nav .menu-kaart b{font-family:var(--caslon);font-size:34px;color:var(--soft)}
  .nav .menu-kaart .wm{font-size:34px;color:var(--soft)}
  .nav .nav-r{flex-direction:column-reverse;align-items:flex-start;gap:28px}
  .nav.pil .nav-r{gap:28px}
  .taal details{width:100%}
  .taal summary{display:none}
  .taal ul{position:static;background:none;border:0;box-shadow:none;padding:0;min-width:0;display:flex;gap:22px;flex-wrap:wrap}
  .taal li a{padding:4px 0;font-family:var(--mono);font-size:13px;letter-spacing:.06em}
  html.menu-open{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){.nav,.nav *{transition:none!important;animation:none!important}.nav.weg{transform:none}.nav.pil.weg{transform:translateY(14px)}}
@media (prefers-reduced-motion:reduce) and (max-width:960px){.nav.pil.weg{transform:none}}

.hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,72px);padding-block:clamp(40px,7vw,88px) clamp(48px,7vw,88px);align-items:center}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
.hero h1{font-family:var(--caslon);font-size:clamp(38px,5.6vw,68px);line-height:1.03;letter-spacing:-.01em;margin-top:14px}
.hero .lead{margin-top:22px;font-size:18px;max-width:48ch;color:var(--soft)}
.hero .where{margin-top:26px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.hero.solo{grid-template-columns:minmax(0,1fr);padding-block:clamp(36px,6vw,72px) clamp(28px,4vw,48px)}
.hero.solo .lead{max-width:60ch}

.card{background:var(--paper);color:var(--ink);border-radius:4px;padding:28px 26px 24px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.card h2{font-family:var(--caslon);font-size:27px;line-height:1.1}
.card .sub{font-size:14.5px;color:var(--ink-m);margin-top:8px}
.card ul.inc{list-style:none;padding:0;margin-top:16px;display:grid;gap:8px;font-size:14px;color:#3f3932}
.card ul.inc li{display:grid;grid-template-columns:14px 1fr;gap:8px}
.card ul.inc li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--koper);margin-top:.6em}
form{display:grid;gap:12px;margin-top:20px}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.frow{grid-template-columns:minmax(0,1fr)}}
form label{display:grid;gap:5px;font-size:12.5px;font-weight:500;color:var(--ink-m)}
form input,form select,form textarea{font:inherit;font-size:15px;background:#fff;border:1px solid var(--rule);color:var(--ink);border-radius:3px;padding:11px 13px;width:100%;max-width:100%;min-width:0}
form textarea{min-height:92px;resize:vertical}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--koper-d);box-shadow:0 0 0 3px rgba(201,164,92,.25)}
form input:user-invalid{border-color:#B8643E}
.hp{position:absolute;left:-9999px;top:-9999px;height:0;overflow:hidden}
.consent{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start;font-size:13px;color:var(--ink-m);font-weight:400}
.consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--koper-d)}
.consent a{color:var(--ink)}
/* Schuivende vulling (5 okt 2026, naslag scroll-film-craft.md sectie 8): de hoverkleur schuift er van onder in. */
.btn{--vul:var(--bg-l);--vul:color-mix(in srgb,var(--bg) 72%,var(--cream));position:relative;overflow:hidden;isolation:isolate;font:inherit;font-size:15px;font-weight:600;background:var(--bg);color:var(--cream);border:0;border-radius:3px;padding:14px 20px;cursor:pointer;display:inline-flex;justify-content:center;gap:10px;text-decoration:none;transition:transform .2s ease}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--vul);transform:translateY(101%);transition:transform .35s cubic-bezier(.25,.46,.45,.94)}
.btn:hover::before,.btn:focus-visible::before{transform:none}
@media (prefers-reduced-motion:reduce){.btn::before{transition:none}}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.6;cursor:wait}
.btn.light{background:var(--cream);color:var(--bg)}
.btn.light{--vul:#fff}
.fine{font-size:12.5px;color:var(--ink-m)}
.fout{font-size:14px;color:#8A3A22;border-left:2px solid #B8643E;padding-left:12px}
.card.dark{background:var(--bg-d);color:var(--cream);box-shadow:none;border:1px solid var(--line)}
.card.dark h2{color:var(--cream)}
.card.dark .sub,.card.dark .fine,.card.dark label,.card.dark .consent{color:var(--dim)}
.card.dark .consent a{color:var(--cream)}
.card.dark input,.card.dark select,.card.dark textarea{background:var(--bg);border-color:var(--line);color:var(--cream)}
.card.dark .btn{background:var(--cream);color:var(--bg)}
.card.dark .btn{--vul:#fff}

section{padding-block:clamp(48px,7vw,88px);border-top:1px solid var(--line)}
section.first{border-top:0;padding-top:clamp(20px,3vw,32px)}
/* dienstblokken met voorbeeldbeeld */
.blokken{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:22px}
.blok{display:flex;flex-direction:column;text-decoration:none;border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--bg-d);transition:border-color .2s ease,transform .2s ease}
.blok:hover{border-color:var(--line-k);transform:translateY(-2px)}
.blok img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.blok>div{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.blok h3{font-family:var(--caslon);font-size:24px;line-height:1.12}
.blok ul{list-style:none;padding:0;margin:12px 0 16px;display:grid;gap:6px;font-size:15px;color:var(--soft)}
.blok li{padding-left:16px;position:relative}
.blok li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--koper-l)}
.blok .more{margin-top:auto;font-family:var(--mono);font-size:12.5px;color:var(--koper-l)}
figure.vb{margin:26px 0 0}
figure.vb img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line)}
figure.vb figcaption{font-size:13.5px;color:var(--dim);margin-top:10px}
figure.vb figcaption a{color:var(--koper-l)}
details.hoe{margin-top:28px;border-top:1px solid var(--line);padding-top:16px}
details.hoe summary{cursor:pointer;font-family:var(--caslon);font-size:24px;list-style:none}
details.hoe summary::after{content:" +";color:var(--koper)}
details.hoe[open] summary::after{content:" −"}
details.hoe p{margin-top:14px}
p.voetnoot{margin-top:36px;font-size:13px;color:var(--dim)}
p.voetnoot a{color:var(--dim)}
.voorna{margin-top:34px}
.voorna h3{font-family:var(--caslon);font-size:24px;margin:26px 0 12px}
.vn{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vn figure{margin:0}
.vn img{display:block;width:100%;height:auto;border-radius:4px;border:1px solid var(--line)}
.vn figcaption{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--koper-l);margin-top:8px}
/* scrollanimatie: zonder JS een stilstaand beeld met de tekst eronder */
html{overflow-x:clip}
.scrub-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:4px;background:var(--bg-d)}
.scrub-stage img,.scrub-stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scrub-stage canvas{opacity:0;transition:opacity .4s ease}
.scrub-kop{font-family:var(--caslon);font-size:clamp(28px,3.6vw,44px);line-height:1.08;margin-top:28px}
.scrub-regels{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px;max-width:56ch;color:var(--soft);font-size:17px}
.scrub--aan{padding-block:0;height:340vh;margin-inline:calc(50% - 50vw)}
.scrub--kort.scrub--aan{height:260vh}
.scrub-link{margin-top:18px}
.scrub--aan .scrub-link{opacity:0;visibility:hidden;margin-top:20px}
.scrub--aan .scrub-regels{min-height:4.6em}
.scrub--aan .scrub-stage{position:sticky;top:0;height:100vh;height:100svh;aspect-ratio:auto;border-radius:0}
.scrub--klaar canvas{opacity:1}
.scrub--aan .scrub-tekst{position:absolute;left:max(clamp(16px,6vw,96px),calc(50% - 580px));right:clamp(16px,6vw,96px);bottom:clamp(28px,9vh,96px);max-width:640px}
.scrub--aan .scrub-stage::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(to top,var(--bg) 0%,rgba(0,0,0,0) 100%);pointer-events:none}
.scrub--aan .scrub-tekst{z-index:1}
.scrub--aan .scrub-kop{margin-top:0}
.scrub--aan .scrub-regels{position:relative;min-height:3.4em;display:block}
.scrub--aan .scrub-regels li{position:absolute;inset:0 auto auto 0;opacity:0;text-wrap:pretty;color:var(--cream);font-size:clamp(17px,1.6vw,21px)}
.scrub-pins{display:none}
.scrub--aan .scrub-pins{display:block;list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;pointer-events:none}
.scrub-pins li{position:absolute;left:0;top:0;opacity:0;visibility:hidden;white-space:nowrap;pointer-events:auto}
.scrub-pins a{display:block;transform:translate(-50%,-50%);font-family:var(--caslon-t);font-style:italic;font-size:clamp(18px,1.7vw,26px);color:var(--cream);text-decoration:none;padding:4px 10px;border-bottom:1px solid var(--koper-d);transition:color .2s ease,border-color .2s ease;text-shadow:0 1px 12px rgba(0,0,0,.6)}
.scrub-pins a:hover,.scrub-pins a:focus-visible{color:var(--koper-l);border-bottom-color:var(--koper)}
.scrub-pins .kort{display:none}
@media (max-width:767px){.scrub-pins a{font-size:15px;padding:2px 6px}.scrub-pins .lang{display:none}.scrub-pins .kort{display:inline}}
@media (max-width:767px){.scrub--aan .scrub-stage::after{display:none}.scrub--aan .scrub-tekst{top:calc(12svh + 75vw + 28px);bottom:auto}.scrub--aan .scrub-kop{font-size:28px}
/* rechtopstaande clip op telefoon: beeldvullend, tekst onderaan over het verloop zoals op desktop */
.scrub--staand.scrub--aan .scrub-stage::after{display:block;height:55%}.scrub--staand.scrub--aan .scrub-tekst{top:auto;bottom:clamp(24px,7svh,64px)}}
.sh{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 56px;align-items:end;margin-bottom:40px}
@media (max-width:820px){.sh{grid-template-columns:minmax(0,1fr)}}
.sh h1,.sh h2{font-family:var(--caslon);font-size:clamp(30px,4vw,50px);line-height:1.04}
.sh p{color:var(--soft);max-width:52ch}
.sh.one{grid-template-columns:minmax(0,1fr)}

.rows{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px minmax(0,1fr) minmax(0,1.2fr);gap:12px 32px;padding-block:28px;border-bottom:1px solid var(--line)}
@media (max-width:820px){.row{grid-template-columns:48px 1fr}.row ul{grid-column:2}}
.row .n{font-family:var(--caslon);font-size:40px;line-height:1;color:var(--koper)}
.row h3{font-family:var(--caslon);font-size:27px;line-height:1.1}
.row h3 a{text-decoration:none;transition:color .2s ease}
.row h3 a:hover{color:var(--koper-l)}
.row p{font-size:15px;color:var(--soft);margin-top:8px;max-width:40ch}
.row ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;align-content:start}
.row li{font-size:13.5px;border:1px solid var(--line);border-radius:2px;padding:6px 10px;color:var(--soft)}
.row .more{font-family:var(--mono);font-size:12.5px;color:var(--koper-l);margin-top:12px;display:inline-block}
p.ref,.ref{font-size:13.5px;color:var(--dim);margin-top:12px;padding-left:12px;border-left:1px solid var(--koper)}
.ref a,.scan a,.prose a{color:var(--koper-l);text-decoration:underline;text-underline-offset:3px}

.xs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:820px){.xs{grid-template-columns:minmax(0,1fr)}}
.xb{display:grid;gap:12px;align-content:start;padding:28px 26px 24px;border-radius:4px;border:1px solid var(--line);text-decoration:none;transition:transform .25s ease,border-color .25s ease;color:var(--cream)}
.xb:hover{transform:translateY(-3px);border-color:var(--line-k)}
.xb .wm{font-size:34px;margin-bottom:6px}
.xb h3{font-family:var(--caslon);font-size:24px;line-height:1.15}
.xb p{font-size:15px;color:var(--soft);max-width:44ch}
.xb .go{font-family:var(--mono);font-size:12.5px;color:var(--koper-l);margin-top:6px}
.scan{margin-top:22px;font-size:15px;color:var(--soft)}
.b-design{background:var(--design)}.b-geo{background:var(--geo)}.b-ai{background:var(--ai)}.b-fd{background:var(--fd)}

.why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
@media (max-width:900px){.why{grid-template-columns:minmax(0,1fr)}}
.why div{padding:28px 28px 28px 0;display:grid;gap:10px;align-content:start}
.why div+div{padding-left:28px;border-left:1px solid var(--line)}
@media (max-width:900px){.why div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}}
.why h3{font-family:var(--caslon);font-size:28px;line-height:1.1}
.why p{font-size:15px;color:var(--soft);max-width:40ch}

.flow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
@media (max-width:820px){.flow{grid-template-columns:minmax(0,1fr)}}
.flow blockquote{margin:0;font-family:var(--caslon-t);font-style:italic;font-size:clamp(24px,2.8vw,34px);line-height:1.3;color:var(--cream)}
.flow ol{list-style:none;padding:0;display:grid;gap:22px;counter-reset:s}
.flow li{display:grid;grid-template-columns:40px 1fr;gap:14px;counter-increment:s}
.flow li::before{content:counter(s);font-family:var(--caslon);font-size:30px;line-height:1;color:var(--koper)}
.flow li b{display:block;font-weight:600;color:var(--cream);margin-bottom:2px}
.flow li span{color:var(--soft);font-size:15px}

.tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media (max-width:900px){.tl{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.tl{grid-template-columns:minmax(0,1fr)}}
.tl div{padding:24px 22px;display:grid;gap:8px;align-content:start;border-right:1px solid var(--line)}
.tl div:nth-child(even){background:var(--bg-l)}
.tl div:last-child{border-right:0}
.tl time{font-family:var(--mono);font-size:13px;color:var(--koper-l)}
.tl h3{font-family:var(--caslon);font-size:22px;line-height:1.15}
.tl p{font-size:14.5px;color:var(--soft)}
.note{margin-top:16px;font-family:var(--mono);font-size:11.5px;color:var(--dim)}

.bureaus{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.bureaus{grid-template-columns:minmax(0,1fr)}}
.bureau{display:grid;grid-template-rows:auto 1fr auto;gap:18px;padding:30px 26px 24px;border-radius:4px;text-decoration:none;min-height:300px;border:1px solid var(--line);transition:transform .25s ease,border-color .25s ease;color:var(--cream)}
.bureau:hover{transform:translateY(-3px);border-color:var(--line-k)}
.bureau .wm{font-size:46px}
.bureau p{color:var(--soft);font-size:15px;max-width:34ch}
.bureau .go{font-family:var(--mono);font-size:12.5px;color:var(--koper-l)}

.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:relative}
.path::before{content:"";position:absolute;left:0;right:0;top:22px;height:1px;background:var(--line-k)}
@media (max-width:820px){.path{grid-template-columns:1fr 1fr;gap:28px 0}.path::before{display:none}}
@media (max-width:480px){.path{grid-template-columns:minmax(0,1fr)}}
.path div{padding-right:24px;display:grid;gap:10px;align-content:start;position:relative}
.path .dot{width:44px;height:44px;border-radius:50%;border:1px solid var(--koper);background:var(--bg);display:grid;place-items:center;font-family:var(--caslon);font-size:22px;color:var(--koper)}
.path h3{font-family:var(--caslon);font-size:25px}
.path p{font-size:14.5px;color:var(--soft)}
.path small{font-family:var(--mono);font-size:11.5px;color:var(--koper-l)}
.path small a{text-decoration:none}

.about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:32px 64px}
@media (max-width:820px){.about{grid-template-columns:minmax(0,1fr)}}
.about h1,.about h2{font-family:var(--caslon);font-size:clamp(30px,3.6vw,44px);line-height:1.05}
.about div{display:grid;gap:14px;color:var(--soft);max-width:58ch}

.close{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
@media (max-width:820px){.close{grid-template-columns:minmax(0,1fr)}}
.close h2{font-family:var(--caslon);font-size:clamp(32px,4.4vw,56px);line-height:1.02}
.close p{color:var(--soft);margin-top:16px;max-width:46ch}
.addr{display:grid;gap:4px;font-family:var(--mono);font-size:13.5px;color:var(--koper-l);margin-top:20px}
.addr span{user-select:all}
.addr a{text-decoration:none}

/* geobureau */
.report{background:var(--paper);color:var(--ink);border-radius:4px;padding:26px 26px 22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);display:grid;gap:18px}
.report .rh{display:flex;justify-content:space-between;align-items:baseline;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:14px;flex-wrap:wrap}
.report .rh span{font-family:var(--mono);font-size:11px;color:var(--ink-m);letter-spacing:.06em}
.report .rh b{font-family:var(--caslon);font-weight:400;font-size:20px}
.score{display:flex;align-items:baseline;gap:10px}
.score strong{font-family:var(--caslon);font-weight:400;font-size:76px;line-height:.9;color:#9A4A2A;font-variant-numeric:tabular-nums}
.score span{font-family:var(--mono);font-size:13px;color:var(--ink-m)}
.bars{display:grid;gap:10px}
.bar{display:grid;grid-template-columns:minmax(0,1fr) 110px 34px;gap:12px;align-items:center;font-size:13.5px}
.bar .t{height:6px;background:#EDE5D6;border-radius:3px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--geo)}
.bar .t i.lo{background:#B8643E}
.bar em{font-style:normal;font-family:var(--mono);font-size:12px;text-align:right;color:var(--ink-m);font-variant-numeric:tabular-nums}
.report .find{font-size:13.5px;background:#F4ECDD;border-radius:3px;padding:12px 14px;color:#4a4232}
.report .find b{font-weight:600}
.report .ex{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-m)}
.what{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px 64px;align-items:start}
@media (max-width:820px){.what{grid-template-columns:1fr}}
.what .txt{display:grid;gap:16px;color:var(--soft);max-width:56ch}
.what .txt strong{color:var(--cream);font-weight:600}
.vs{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media (max-width:520px){.vs{grid-template-columns:1fr}}
.vs div{padding:22px;display:grid;gap:10px;align-content:start}
.vs div+div{border-left:1px solid var(--line);background:var(--bg-l)}
@media (max-width:520px){.vs div+div{border-left:0;border-top:1px solid var(--line)}}
.vs h3{font-family:var(--caslon);font-size:24px}
.vs p{font-size:14.5px;color:var(--soft)}
.q{font-family:var(--mono);font-size:12.5px;color:var(--koper-l);border-left:2px solid var(--koper);padding-left:12px;margin-top:6px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:900px){.facts{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.facts div{padding:24px 24px 24px 0;display:grid;gap:10px;align-content:start;border-bottom:1px solid var(--line)}
.facts strong{font-family:var(--caslon);font-weight:400;font-size:52px;line-height:1;color:var(--koper);font-variant-numeric:tabular-nums}
.facts p{font-size:14.5px;color:var(--soft)}
.facts cite{font-style:normal;font-family:var(--mono);font-size:11px;color:var(--dim);line-height:1.5}
.facts cite a{color:var(--koper-l);text-decoration:none}
.early{margin-top:28px;font-family:var(--caslon-t);font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.35;max-width:52ch;color:var(--cream)}
.fit{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
@media (max-width:900px){.fit{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.fit{grid-template-columns:1fr}}
.fit div{padding:22px 22px 22px 0;display:grid;gap:8px;align-content:start;border-bottom:1px solid var(--line)}
.fit h3{font-family:var(--caslon);font-size:23px;line-height:1.1}
.fit p{font-size:14.5px;color:var(--soft)}
.fit .mk{font-family:var(--mono);font-size:12px;color:var(--ok)}
.finds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
@media (max-width:900px){.finds{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.finds{grid-template-columns:1fr}}
.finds div{background:var(--bg);padding:26px 24px;display:grid;gap:10px;align-content:start}
.finds code{font-family:var(--mono);font-size:12px;color:var(--koper-l)}
.finds h3{font-family:var(--caslon);font-size:24px;line-height:1.1}
.finds p{font-size:14.5px;color:var(--soft)}
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{display:grid;gap:10px;align-content:start;border-top:2px solid var(--koper);padding-top:18px}
.step .n{font-family:var(--caslon);font-size:52px;line-height:1;color:var(--koper)}
.step h3{font-family:var(--caslon);font-size:26px;line-height:1.1}
.step p{font-size:15px;color:var(--soft)}
.step .dur{font-family:var(--mono);font-size:12px;color:var(--dim)}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.prices.p2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px}
.prices.p1{grid-template-columns:minmax(0,1fr);max-width:430px}
@media (max-width:900px){.prices,.prices.p2,.prices.p1{grid-template-columns:1fr}}
.pk{border:1px solid var(--line);border-radius:4px;padding:28px 26px;display:grid;grid-template-rows:auto auto auto 1fr auto;gap:14px}
.pk.main{background:var(--cream);color:var(--ink);border-color:var(--cream)}
.pk .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--koper)}
.pk.main .tag{color:#8A6A2C}
.pk h3{font-family:var(--caslon);font-size:30px;line-height:1.05}
.pk .amt{font-family:var(--caslon);font-size:34px;line-height:1.1;font-variant-numeric:tabular-nums}
.pk .amt small{font-family:var(--mono);font-size:12px;color:var(--dim);display:block;margin-top:4px;letter-spacing:.02em}
.pk.main .amt small{color:var(--ink-m)}
.pk ul{list-style:none;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--soft);align-content:start}
.pk.main ul{color:#3f3932}
.pk li{display:grid;grid-template-columns:14px 1fr;gap:8px}
.pk li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--koper);margin-top:.6em}
.pk .for{font-size:13.5px;color:var(--dim);border-top:1px solid var(--line);padding-top:12px}
.rk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch}
@media (max-width:820px){.rk{grid-template-columns:minmax(0,1fr)}}
.rk-in{display:grid;gap:18px;align-content:start;border:1px solid var(--line);border-radius:4px;padding:28px 26px}
.rk-in label{display:grid;gap:6px;color:var(--soft);font-size:13.5px;font-weight:500}
.rk-in input{font:inherit;font-size:22px;font-variant-numeric:tabular-nums;background:#fff;border:1px solid var(--rule);color:var(--ink);border-radius:3px;padding:10px 13px;width:100%;max-width:220px}
.rk-in input:focus{outline:none;border-color:var(--koper-d);box-shadow:0 0 0 3px rgba(201,164,92,.25)}
.rk-in .fine{color:var(--dim)}
.rk-uit{background:var(--cream);color:var(--ink);border-radius:4px;padding:28px 26px;display:grid;gap:14px;align-content:start}
.rk-uit .label{color:#8A6A2C}
.rk-bedrag{font-family:var(--caslon);font-size:clamp(44px,6vw,68px);line-height:1;font-variant-numeric:tabular-nums}
.rk-terug{font-size:15.5px;color:#3f3932;max-width:40ch}
.rk-uit .btn{justify-self:start}
.rk-vbs{margin-top:28px;display:grid;gap:10px}
.rk-vbs ul{list-style:none;padding:0;display:grid;gap:10px}
.rk-vbs li{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:baseline;font-size:15px;color:var(--soft)}
.rk-vb{font:inherit;font-family:var(--mono);font-size:13px;background:none;color:var(--koper-l);border:1px solid var(--line-k);border-radius:3px;padding:6px 10px;cursor:pointer}
.rk-vb:hover{background:rgba(201,164,92,.12)}
.pk.main .for{color:var(--ink-m);border-color:var(--rule)}
.pnote{margin-top:18px;color:var(--dim)}
.prijslijst{list-style:none;padding:0;border-top:1px solid var(--line);max-width:860px}
.prijslijst li{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:16px 0;border-bottom:1px solid var(--line)}
.prijslijst b{display:block;font-family:var(--caslon);font-size:22px;font-weight:400}
.prijslijst b a{color:inherit;text-decoration:none}
.prijslijst span{font-size:14px;color:var(--dim)}
.prijslijst strong{font-family:var(--caslon);font-size:22px;font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums}
.month{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line);border-radius:4px;overflow:hidden}
@media (max-width:820px){.month{grid-template-columns:1fr}}
.month div{padding:26px 24px;display:grid;gap:12px;align-content:start;border-right:1px solid var(--line)}
.month div:last-child{border-right:0}
@media (max-width:820px){.month div{border-right:0;border-bottom:1px solid var(--line)}.month div:last-child{border-bottom:0}}
.month .wk{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--koper)}
.month h3{font-family:var(--caslon);font-size:24px}
.month ul{list-style:none;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--soft)}
.month li{padding-left:16px;position:relative}
.month li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:1px;background:var(--koper)}
form.scanform{margin-top:30px;display:grid;gap:10px;max-width:560px}
.scanform label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.scanform input,.scanform select,.scanform textarea{font:inherit;font-size:15px;text-transform:none;letter-spacing:0;background:var(--bg-d);border:1px solid var(--line);color:var(--cream);border-radius:3px;padding:12px 14px;width:100%}
.scanform input::placeholder{color:#7F8C7F}
.scanform input:focus,.scanform select:focus,.scanform textarea:focus{outline:none;border-color:var(--koper);box-shadow:none}
.scanform .btn{background:var(--cream);color:var(--bg)}
.scanform .btn{--vul:#fff}
.scanform .fine,.scanform .consent{color:var(--dim);font-family:var(--sans);text-transform:none;letter-spacing:0}
.scanform .consent a{color:var(--cream)}
.scanform .fout{color:#E8A98A;border-color:#E8A98A}

/* subpagina's */
.crumbs{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:18px;display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--dim);text-decoration:none}
.crumbs a:hover{color:var(--cream)}
.prose{max-width:68ch;color:var(--soft);font-size:17px;display:grid;gap:18px}
.prose h2{font-family:var(--caslon);font-size:clamp(26px,3vw,34px);line-height:1.1;color:var(--cream);margin-top:18px}
.prose h3{font-family:var(--caslon);font-size:23px;line-height:1.15;color:var(--cream);margin-top:8px}
.prose strong{color:var(--cream);font-weight:600}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:8px}
.prose blockquote{margin:0;padding-left:18px;border-left:2px solid var(--koper);font-family:var(--caslon-t);font-style:italic;font-size:20px;color:var(--cream)}
.prose code{font-family:var(--mono);font-size:.9em;color:var(--koper-l)}
.prose pre{margin:0;background:var(--bg-d);border:1px solid var(--line);border-radius:4px;padding:16px 18px;overflow-x:auto;font-size:14px;line-height:1.5;white-space:pre}
.prose pre code{font-size:13.5px;color:var(--cream)}
.prose table{border-collapse:collapse;width:100%;font-size:15px}
.prose th,.prose td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{color:var(--cream);font-weight:600}
.prose ol.onderdelen{list-style:none;padding:0;gap:0;border-top:1px solid var(--line)}
.onderdelen li{display:grid;grid-template-columns:52px 1fr;gap:14px;padding:20px 0;border-bottom:1px solid var(--line)}
.onderdelen .nr{font-family:var(--mono);font-size:13px;color:var(--koper-l);padding-top:6px;letter-spacing:.08em}
.onderdelen h3{margin:0 0 6px;font-size:21px}
.onderdelen p{margin:0}
.wk ul.gebouwd{list-style:none;padding:0;margin:4px 0 14px;display:grid;gap:5px;font-size:14px;color:var(--soft)}
.wk ul.gebouwd li{padding-left:16px;position:relative}
.wk ul.gebouwd li::before{content:'';position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--koper-l)}
.wk ul.gebouwd li.meer{color:var(--koper-l);font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.wk ul.gebouwd li.meer::before{display:none}
.two{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px 64px;align-items:start}
@media (max-width:900px){.two{grid-template-columns:minmax(0,1fr)}}
.side{display:grid;gap:22px;align-content:start;position:sticky;top:24px}
.side .box{border:1px solid var(--line);border-radius:4px;padding:22px 22px 20px;display:grid;gap:10px}
.side h3{font-family:var(--caslon);font-size:22px;line-height:1.15}
.side p,.side li{font-size:14.5px;color:var(--soft)}
.side ul{list-style:none;padding:0;display:grid;gap:6px}
.side a{color:var(--koper-l);text-decoration:underline;text-underline-offset:3px}
.side .btn{width:100%}
.meta{font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.bronnen{margin-top:36px;border-top:1px solid var(--line);padding-top:18px;font-size:14px;color:var(--dim)}
.bronnen h2{font-family:var(--caslon);font-size:22px;color:var(--cream);margin-bottom:8px}
.bronnen ol{padding-left:20px;display:grid;gap:4px}
.bronnen a{color:var(--koper-l)}
.concept{font-family:var(--mono);font-size:11.5px;color:var(--warn);border:1px solid var(--warn);border-radius:2px;padding:4px 8px;display:inline-block}

/* lijsten */
.list{display:grid;gap:0;border-top:1px solid var(--line)}
.item{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:10px 28px;padding-block:24px;border-bottom:1px solid var(--line);text-decoration:none;align-items:baseline;transition:background .2s ease}
.item:hover{background:var(--bg-l)}
@media (max-width:700px){.item{grid-template-columns:minmax(0,1fr)}.item .go{display:none}}
.item time,.item .k{font-family:var(--mono);font-size:12px;color:var(--dim)}
.item h3{font-family:var(--caslon);font-size:25px;line-height:1.15}
.item p{font-size:15px;color:var(--soft);margin-top:6px;max-width:64ch}
.item .go{font-family:var(--mono);font-size:12.5px;color:var(--koper-l)}

.werk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.werk{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.werk{grid-template-columns:minmax(0,1fr)}}
.wk{display:grid;grid-template-rows:auto auto auto 1fr auto;gap:12px;padding:24px 22px 20px;border:1px solid var(--line);border-radius:4px;text-decoration:none;color:var(--cream);transition:transform .25s ease,border-color .25s ease;min-height:240px}
.wk:hover{transform:translateY(-3px);border-color:var(--line-k)}
.wk .logo{height:56px;display:flex;align-items:center}
.wk .logo img{max-height:56px;max-width:170px;width:auto;object-fit:contain}
.wk .logo span{font-family:var(--caslon);font-size:26px;line-height:1}
.wk .klant{font-family:var(--caslon);font-size:22px;line-height:1.1}
.wk .sector{font-family:var(--mono);font-size:11.5px;color:var(--dim)}
.wk p{font-size:14.5px;color:var(--soft)}
.wk .tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.wk .tags li{font-size:12px;border:1px solid var(--line);border-radius:2px;padding:3px 8px;color:var(--soft)}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px;list-style:none;padding:0}
.filter a{font-family:var(--mono);font-size:12.5px;text-decoration:none;border:1px solid var(--line);border-radius:2px;padding:6px 12px;color:var(--soft);transition:border-color .2s ease}
.filter a:hover,.filter a[aria-current]{border-color:var(--koper);color:var(--koper-l)}
/* bureaulabels en legende op fd96 (13 okt 2026): elke kleur is een bureau, AA-contrast op de donkere kaart */
.legende-kop{font-size:14px;color:var(--soft);margin-bottom:12px;max-width:60ch}
.filter a.b-design,.filter a.b-geo,.filter a.b-ai{background:none;padding-left:26px;position:relative}
.filter a.b-design::before,.filter a.b-geo::before,.filter a.b-ai::before,.bureaulabels li::before{content:"";position:absolute;left:10px;top:50%;width:9px;height:9px;border-radius:50%;transform:translateY(-50%)}
.filter a.b-design::before,.bureaulabels li.b-design::before{background:#E7A3AC}.filter a.b-geo::before,.bureaulabels li.b-geo::before{background:#9FD0B5}.filter a.b-ai::before,.bureaulabels li.b-ai::before{background:#A9B8EE}
.bureaulabels{list-style:none;padding:0;margin:0 0 4px;display:flex;flex-wrap:wrap;gap:6px}
.bureaulabels li{position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:4px 10px 4px 24px;border-radius:999px;background:var(--bg-l);color:var(--cream)}
.bureaulabels li.b-design{background:#5E1B25;color:#F6D9DE}.bureaulabels li.b-geo{background:#1E3A2F;color:#D8EFE1}.bureaulabels li.b-ai{background:#1B2442;color:#DCE2F7}
.logo-groot{height:96px;display:flex;align-items:center;margin-bottom:22px}
.logo-groot img{max-height:96px;max-width:280px;object-fit:contain}
.logo-groot span{font-family:var(--caslon);font-size:40px}
dl.feiten{display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:15px;margin:0}
dl.feiten dt{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:3px}
dl.feiten dd{margin:0;color:var(--soft)}
dl.feiten a{color:var(--koper-l)}

.faq{display:grid;gap:0;border-top:1px solid var(--line);max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--caslon);font-size:22px;line-height:1.2;padding-block:20px;display:grid;grid-template-columns:1fr 28px;gap:16px;align-items:center;transition:color .2s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--koper);text-align:center;transition:transform .25s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--koper-l)}
.faq .a{padding-bottom:22px;color:var(--soft);max-width:66ch;display:grid;gap:10px;font-size:15.5px}
.faq .a a{color:var(--koper-l)}

.bedankt{padding-block:clamp(60px,10vw,120px);max-width:60ch}
.bedankt h1{font-family:var(--caslon);font-size:clamp(38px,5vw,64px);line-height:1.03}
.bedankt p{color:var(--soft);margin-top:20px;font-size:18px}
.bedankt .links{display:flex;gap:18px;flex-wrap:wrap;margin-top:28px}
.bedankt .links a{color:var(--koper-l)}

/* Credit onder elke pagina (geheugen credit-op-elke-klantensite, 9 okt 2026): koper plus een lichte tint van de bureaukleur */
.credit{font-size:12.5px;color:var(--soft);white-space:nowrap}.credit a{color:var(--soft)}
:root{--credit-hart-1:var(--koper-l);--credit-hart-2:#F2EBDD}
/* Zwevende hartjes achter "Made with love by hetdesignbureau.be" (zelfde beweging als Trusted by op timondhaeze.com) */
.credit-hartjes{position:relative;display:inline-block;width:50px;height:14px;margin-left:4px;vertical-align:-2px;overflow:visible;pointer-events:none}
.credit-hartjes svg{position:absolute;bottom:0;color:var(--credit-hart-1,#e2506b);opacity:0;animation:creditzweef 3.8s ease-in-out infinite}
.credit-hartjes svg:nth-child(1){left:2px}
.credit-hartjes svg:nth-child(2){left:15px;color:var(--credit-hart-2,currentColor);animation-delay:.95s}
.credit-hartjes svg:nth-child(3){left:26px;animation-delay:1.9s}
.credit-hartjes svg:nth-child(4){left:40px;color:var(--credit-hart-2,currentColor);animation-delay:2.85s}
@keyframes creditzweef{0%{transform:translateY(4px) scale(.6);opacity:0}18%{opacity:.95}100%{transform:translateY(-26px) scale(1.15) rotate(-8deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.credit-hartjes svg{animation:none;opacity:.9}}
/* Voettekst (13 okt 2026, naar joincellular.com): compact. Bovenaan het spookwoordmerk dat zichzelf tekent zodra
   de voettekst in beeld komt (omtrek in koper, daarna een zachte vulling; stil bij prefers-reduced-motion), dan het
   woordmerk met de slotzin links en Gent, adres, e-mail en telefoon rechts, één regel met de zusterbureaus, en de
   slotregel met rechten, juridische links, taalkeuze en de credit. */
footer.voet{margin-inline:calc(-1 * var(--gutter));padding:clamp(40px,6vw,72px) var(--gutter) 0;display:flex;flex-direction:column;color:var(--dim);font-size:14px;overflow:hidden;border-top:1px solid var(--line)}
footer.voet>.wrap{width:100%}
footer .spook{display:block;width:100%;container-type:inline-size;margin-bottom:clamp(20px,3vw,44px);overflow:hidden;pointer-events:none;user-select:none}
footer .spook span{display:block;text-align:center;font-family:var(--caslon);font-size:calc(96cqw / var(--em));line-height:1;letter-spacing:0;white-space:nowrap;color:transparent;-webkit-text-fill-color:transparent;-webkit-text-stroke:1.6px var(--koper);padding-block:.04em .14em;margin-bottom:0;
  clip-path:inset(0 100% 0 0);transition:-webkit-text-fill-color 1.2s ease 1.5s,color 1.2s ease 1.5s}
footer .spook.in-beeld span{animation:spook-teken 2.2s cubic-bezier(.4,0,.2,1) forwards;color:color-mix(in srgb,var(--cream) 9%,var(--bg));-webkit-text-fill-color:color-mix(in srgb,var(--cream) 9%,var(--bg))}
@keyframes spook-teken{to{clip-path:inset(0 0 0 0)}}
footer .spook.vol.in-beeld span{color:color-mix(in srgb,var(--cream) 16%,var(--bg));-webkit-text-fill-color:color-mix(in srgb,var(--cream) 16%,var(--bg))}
footer .spook.vol span{-webkit-text-stroke-width:2px}
@media (max-width:760px){footer .spook{margin-inline:calc(-1 * var(--gutter));width:auto}}
@media (prefers-reduced-motion:reduce){footer .spook span{clip-path:none;animation:none;transition:none;color:color-mix(in srgb,var(--cream) 9%,var(--bg));-webkit-text-fill-color:color-mix(in srgb,var(--cream) 9%,var(--bg))}}
footer .voet-raster{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px 40px;align-items:start}
@media (max-width:900px){footer .voet-raster{grid-template-columns:repeat(2,minmax(0,1fr))}footer .voet-id{grid-column:1 / -1}}
@media (max-width:520px){footer .voet-raster{grid-template-columns:minmax(0,1fr)}}
footer .voet-id{display:grid;gap:6px;justify-items:start;font-size:14px;color:var(--soft);max-width:34ch}
footer .voet-id .naam{font-size:15px;color:var(--soft)}
footer .voet-id .naam b{font-weight:600;color:var(--cream)}
footer .voet-id .ident{font-family:var(--mono);font-size:12.5px;color:var(--soft);line-height:1.7}
footer .voet-id .ident span{white-space:nowrap}
footer .voet-id .contact{margin-top:6px;display:flex;gap:6px 22px;flex-wrap:wrap}
footer .voet-id .contact a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--koper-d);padding-bottom:2px;transition:color .2s ease,border-color .2s ease}
footer .voet-id .contact a:hover{color:var(--koper-l);border-bottom-color:var(--koper-l)}
footer .voet-id .profielen{margin-top:8px;font-size:13px}
footer .voet-id .profielen a{color:var(--soft);text-decoration:none;border-bottom:1px solid var(--line-k)}
footer .voet-kol h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--koper-l);margin-bottom:14px;font-weight:400}
footer .voet-kol ul{list-style:none;padding:0;margin:0;display:grid;gap:9px;font-size:15px}
footer .voet-kol a{color:var(--soft);text-decoration:none;transition:color .2s ease}
footer .voet-kol a:hover{color:var(--cream)}
footer .credit-rij{text-align:center;padding-bottom:26px;margin-top:-6px}
footer .zus{margin-top:clamp(28px,4vw,48px);font-size:14px;color:var(--soft)}
footer .zus a{color:var(--cream);text-decoration:none;border-bottom:1px solid transparent;transition:color .2s ease,border-color .2s ease}
footer .zus a:hover{color:var(--cream);border-bottom-color:var(--koper)}
footer .onder{margin-top:22px;padding-block:18px 14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:12px 32px;flex-wrap:wrap;font-size:13px;color:var(--soft)}
footer .onder .jur{display:flex;gap:4px 18px;flex-wrap:wrap}
footer .onder a,footer .onder button{color:var(--soft);text-decoration:none;font:inherit;background:none;border:0;padding:0;cursor:pointer;transition:color .2s ease}
footer .onder a:hover,footer .onder button:hover{color:var(--cream)}
footer .voet-taal{display:inline-flex;gap:2px;border:1px solid var(--line);border-radius:999px;padding:3px}
footer .voet-taal a{font-family:var(--mono);font-size:12px;letter-spacing:.06em;padding:4px 10px 4px 8px;border-radius:999px;color:var(--soft)}
footer .voet-taal a .vlag{margin-right:7px}
/* taaltip (13 okt 2026, zoals js/taaltip.js op timondhaeze.com): klein, wegklikbaar, nooit een omleiding */
.taaltip{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:70;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);padding:10px 10px 10px 16px;border-radius:999px;background:rgba(35,31,28,.94);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(242,235,221,.22);box-shadow:0 14px 36px rgba(0,0,0,.4);font-size:14px;color:var(--soft)}
.taaltip a{color:var(--cream);text-decoration:none;border-bottom:1px solid var(--koper);white-space:nowrap}
.taaltip button{font:inherit;background:none;border:0;color:var(--dim);cursor:pointer;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.taaltip button:hover{color:var(--cream);background:rgba(242,235,221,.08)}
footer .voet-taal a[aria-current]{background:var(--bg-l);color:var(--cream)}
/* de kale scanpagina (13 okt 2026, naar joincellular.com/nl/performance-score): enkel het woordmerk bovenaan */
header.kaal{display:flex;justify-content:center;align-items:center;position:relative;padding-block:26px 8px}
header.kaal .wm{font-size:30px}
header.kaal .taalplek{position:absolute;right:0;top:26px}
footer.kaal{padding-block:40px 28px;display:flex;justify-content:center;gap:10px 28px;flex-wrap:wrap;font-size:12px;color:var(--dim)}
footer.kaal a{color:var(--dim);text-decoration:none}
footer.kaal a:hover{color:var(--cream)}
body.kaal main{padding-top:0}
.scan-intro{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;min-height:calc(100svh - 160px);padding-block:clamp(20px,4vw,40px)}
@media (max-width:860px){.scan-intro{grid-template-columns:minmax(0,1fr);min-height:0}}
.scan-kaart{background:var(--bg-d);border:1px solid var(--line);border-radius:14px;padding:22px 22px 26px;display:grid;gap:16px;justify-items:start}
.scan-kaart img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:8px;display:block}
.scan-kaart h1{font-family:var(--caslon);font-size:clamp(22px,2vw,27px);line-height:1.15;max-width:24ch}
.scan-kaart h1 em{color:var(--koper)}
.scan-kaart p{color:var(--soft);font-size:15.5px;max-width:44ch}
.scan-badges{display:grid;gap:7px;list-style:none;padding:12px 0 0;margin:4px 0 0;border-top:1px solid var(--line);width:100%;font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--soft)}
.scan-badges li{display:inline-flex;align-items:center;gap:6px}
.scan-badges li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--koper)}
.scan-vraag{display:grid;gap:14px;align-content:center}
.scan-vraag h2{font-family:var(--caslon);font-size:clamp(28px,3.2vw,42px);line-height:1.08}
.scan-vraag .sub{font-size:14.5px;color:var(--soft)}
.scan-vraag form{margin-top:0;gap:14px}
.scan-vraag label{color:var(--soft)}
.scan-vraag input,.scan-vraag textarea{background:var(--bg-d);border-color:rgba(242,235,221,.34);color:var(--cream);font-size:16px;padding:13px 15px;border-radius:8px}
.scan-vraag input::placeholder,.scan-vraag textarea::placeholder{color:color-mix(in srgb,var(--cream) 55%,var(--bg))}
.scan-vraag input:focus,.scan-vraag textarea:focus{border-color:var(--koper);box-shadow:0 0 0 3px rgba(201,164,92,.18)}
.scan-vraag .consent{color:var(--dim)}
.scan-vraag .consent a{color:var(--cream)}
.scan-vraag .btn{background:var(--cream);color:var(--bg);--vul:#fff;justify-self:start;border-radius:999px;padding:14px 24px}
.scan-vraag .fine{color:var(--dim)}
.scan-vraag .fout{color:#E8A98A;border-color:#E8A98A}
.keuzes{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.keuzes label{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-d);cursor:pointer;font-size:15.5px;color:var(--cream);transition:border-color .2s ease,background .2s ease}
.keuzes label:hover{border-color:var(--line-k)}
.keuzes label:has(input:checked){border-color:var(--koper);background:var(--bg-l)}
.keuzes label:has(input:focus-visible){outline:2px solid var(--koper);outline-offset:2px}
.keuzes input{position:absolute;opacity:0;width:1px;height:1px}
.keuzes .lt::before{content:attr(data-lt)}
.scan-intro--weg{grid-template-columns:minmax(0,1fr);align-items:start}
.scan-intro--weg .scan-kaart{display:none}
.keuzes .lt{font-family:var(--mono);font-size:12px;color:var(--koper);border:1px solid var(--line-k);border-radius:6px;width:28px;height:28px;display:grid;place-items:center}
/* de stappen: zonder script staan ze onder elkaar; met script één per scherm */
.stap{border:0;padding:0;margin:0;min-width:0;display:grid;gap:14px}
.stap legend{padding:0}
html.js .stap[hidden]{display:none}
html.js .stap.vol{max-width:620px;margin-inline:auto;width:100%}
html.js .scan-intro--weg .scan-vraag{min-height:calc(100svh - 200px);max-width:620px;margin-inline:auto;width:100%}
.scan-voet{display:flex;align-items:center;gap:16px;margin-top:22px;padding:14px 0 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:12.5px;color:var(--soft)}
html:not(.js) .scan-voet{display:none}
.scan-voet button{font:inherit;background:none;border:0;color:var(--cream);cursor:pointer;padding:8px 0;letter-spacing:.04em;display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--koper-d);transition:color .2s ease}
.scan-voet button:hover{color:var(--koper-l)}
.scan-voet [data-volgende]{font-family:var(--sans);font-size:14.5px;font-weight:600;text-decoration:none;background:var(--koper);color:var(--bg);border-radius:999px;padding:11px 20px;letter-spacing:0;transition:background .2s ease}
.scan-voet [data-volgende]:hover{background:var(--koper-l)}
.scan-voet button[disabled]{opacity:.35;cursor:default;text-decoration:none}
.scan-balk{flex:1;height:3px;background:rgba(242,235,221,.22);border-radius:2px;overflow:hidden}
.scan-balk i{display:block;height:100%;width:0;background:var(--koper);transition:width .35s ease}
.scan-voet .teller{min-width:40px;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:860px){
  .scan-intro{padding-top:8px}
  .scan-kaart{padding:14px 14px 16px;gap:10px}
  .scan-kaart img{max-height:120px;aspect-ratio:auto;object-position:center 60%}
  .scan-kaart h1{font-size:21px}
  .scan-kaart p{font-size:14px}
  .scan-badges{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:11.5px;padding-top:8px}
  .scan-vraag h2{font-size:28px}
  .scan-vraag form{padding-bottom:84px}
  .scan-voet{position:sticky;bottom:0;margin-top:12px;padding:12px 0 14px;background:var(--bg);border-top:1px solid var(--line)}
}

.maatwerk .sh{margin-bottom:22px}
.maatwerk .sh p{max-width:60ch;font-size:17px}
/* reviewmuur (13 okt 2026): drie kolommen, traag verticaal, middelste omgekeerd, vervaging boven en onder */
.reviews{border-top:1px solid var(--line)}
.review-muur{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;height:440px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 18%,#000 82%,transparent)}
@media (max-width:760px){.review-muur{grid-template-columns:repeat(2,minmax(0,1fr));height:380px}.review-kolom:nth-child(3){display:none}}
.review-kolom{overflow:hidden}
.review-spoor{display:grid;gap:14px;animation:review-schuif 48s linear infinite}
.review-kolom.terug .review-spoor{animation-direction:reverse}
.review-muur:hover .review-spoor,.review-muur:focus-within .review-spoor{animation-play-state:paused}
@keyframes review-schuif{to{transform:translateY(calc(-50% - 7px))}}
.reviewkaart{display:grid;gap:10px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg-d)}
.reviewkaart .sterren{font-size:14px;letter-spacing:.12em;color:var(--koper)}
.reviewkaart p{font-size:15px;color:var(--soft)}
.reviewkaart .wie{font-family:var(--mono);font-size:12px;color:var(--dim)}
.reviewkaart.stil{opacity:.55}
.reviewkaart.stil .sterren{color:var(--koper-d)}
.reviewkaart.stil .balk{display:block;height:9px;border-radius:5px;background:var(--bg-l)}
.reviewkaart.stil .balk.wie{margin-top:8px;height:7px}
.review-midden{position:absolute;inset:50% 0 auto 0;transform:translateY(-50%);z-index:2;text-align:center;font-size:15px;color:var(--soft);padding:18px 20px;margin:0 auto;max-width:34ch;
  background:rgba(35,31,28,.92);border:1px solid var(--line-k);border-radius:12px;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.review-midden strong{display:block;font-family:var(--caslon);font-weight:400;font-size:24px;color:var(--cream);margin-bottom:6px}
.review-midden a{color:var(--koper-l)}
@media (prefers-reduced-motion:reduce){.review-spoor{animation:none}}

/* toestemmingspaneel: stijl zit in toestemming.js */
.prose table.cookies td,.prose table.cookies th{font-size:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

body[data-thema="licht"]{--bg:#F3F2EE;--bg-d:#E9E6DE;--bg-l:#FFFFFF;--cream:#17191D;--soft:#3A3D42;--dim:#5B5E63;
  --line:rgba(23,25,29,.14);--line-k:rgba(138,106,44,.45);--koper:#8A6A2C;--koper-l:#7A5A1C;--koper-d:#B8935A;color-scheme:light}
body[data-thema="licht"] .scrub,body[data-thema="licht"] .nav,body[data-thema="licht"] .ov,body[data-thema="licht"] .voet{
  --bg:#231F1C;--bg-d:#1A1715;--bg-l:#2F2A26;--cream:#F2EBDD;--soft:#D9D1C1;--dim:#A89F93;--line:rgba(242,235,221,.16);
  --line-k:rgba(201,164,92,.45);--koper:#C9A45C;--koper-l:#E0C488;--koper-d:#8A6A2C;color:var(--cream)}
body[data-thema="licht"] .scrub{background:var(--bg)}
body[data-thema="licht"] .voet{background:var(--bg);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}