/* ---------- huisstijlletter ----------
   Onest, zelf gehost onder de SIL Open Font License. 600 is de letter van het
   woordmerk; 400 en 500 dragen de lopende tekst. Geen Google Fonts, dus geen
   derde partij die bezoekers ziet. */
@font-face{font-family:"Onest";src:url("fonts/onest-latin-400-normal.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("fonts/onest-latin-500-normal.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Onest";src:url("fonts/onest-latin-600-normal.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

/* Nubez — site.css
   Gedeelde stijl voor alle pagina's. */

:root{
  --nacht:#070B1C;
  --nacht-2:#0C1226;
  --nacht-3:#131A33;
  --inkt:#0B1020;
  --wit:#FFFFFF;
  --papier:#F4F7FC;
  --lijn:rgba(11,16,32,.14);
  --lijn-d:rgba(255,255,255,.16);
  --grijs:#59607A;
  --grijs-d:rgba(255,255,255,.74);
  --merk:#1B6FF0;
  --merk-d:#1B4DE4;
  --r-groot:44px; --r-kaart:18px; --r-beeld:14px;
  --font:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --display:"Onest",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --gutter:clamp(18px,4vw,56px);
  --max:1400px;
  --ease-out:cubic-bezier(0.23,1,0.32,1);
  --ease-in-out:cubic-bezier(0.77,0,0.175,1);
  --ease-drawer:cubic-bezier(0.32,0.72,0,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--wit);color:var(--inkt);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;font-size:17px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--merk);outline-offset:3px;border-radius:4px}
.black :focus-visible,.donker :focus-visible,.end :focus-visible{outline-color:#8FBBFF}
.skip{position:absolute;left:-9999px;top:0;background:var(--inkt);color:#fff;
  padding:12px 20px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}

/* ---------- nav ---------- */
header.sitehead{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  color:var(--inkt);
  transition:transform .45s var(--ease-out),background .3s var(--ease-out),color .3s var(--ease-out)}
header.sitehead.dark{background:rgba(7,11,28,.94);color:#fff}
header.sitehead.-weg{transform:translateY(-102%)}
/* balk kleurt mee met het open mobiele menu */
header.sitehead.menu-open{background:var(--nacht);color:#fff;transform:none}
header.sitehead.menu-open .menu a.pill{display:none}
.nav{max-width:var(--max);margin:0 auto;padding:15px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center}
.brand .woordmerk{height:20px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:clamp(8px,1.6vw,22px)}
.menu>a,.menu .mtop{font-size:15px;opacity:.82;padding:9px 5px;transition:opacity .2s;
  background:none;border:0;font-family:inherit;color:inherit;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px}
.menu>a:hover,.menu .mtop:hover{opacity:1}
.menu>a[aria-current="page"]{opacity:1;border-bottom:1px solid currentColor}
.menu a.pill{background:var(--inkt);color:#fff;opacity:1;padding:12px 25px;
  border-radius:999px;font-weight:500;white-space:nowrap;
  transition:background .25s,transform .35s var(--ease-out)}
header.sitehead.dark .menu a.pill{background:#fff;color:var(--inkt)}
.menu a.pill:hover{background:var(--merk-d);color:#fff}
.mtop .chev{display:inline-block;width:8px;height:8px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translateY(-3px);transition:transform .25s var(--ease-out)}
.mwrap{position:relative}
.mwrap.open .chev{transform:rotate(225deg) translateY(-1px)}

/* uitklapmenu Diensten */
.mega{position:absolute;left:50%;top:calc(100% + 14px);transform:translateX(-42%) scale(.97);
  transform-origin:22% top;width:min(760px,92vw);background:#fff;color:var(--inkt);
  border-radius:var(--r-kaart);box-shadow:0 30px 80px rgba(7,11,28,.22),0 0 0 1px var(--lijn);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .22s var(--ease-out),transform .22s var(--ease-out),visibility 0s linear .22s}
.mwrap.open .mega{opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-42%) scale(1);transition-delay:0s}
.mega-grid{display:grid;grid-template-columns:1fr 218px}
.mega-links{padding:18px 10px 12px 18px;display:grid;gap:2px}
.mega-item{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center;
  padding:11px 12px;border-radius:12px;transition:background .2s}
.mega-item:hover{background:var(--papier)}
.mega-item .mi{width:44px;height:44px;border-radius:12px;background:var(--papier);
  display:grid;place-items:center;color:var(--merk-d)}
.mega-item:hover .mi{background:#E7EFFD}
.mega-item .mi svg{width:24px;height:24px;display:block}
.mega-item b{display:block;font-weight:500;font-size:15.5px}
.mega-item span{display:block;font-size:13.5px;color:var(--grijs);margin-top:2px;line-height:1.35}
.mega-rechts{background:var(--papier);border-radius:0 var(--r-kaart) 0 0;
  padding:24px 22px;display:flex;flex-direction:column;gap:13px;font-size:14.5px}
.mega-rechts a{color:var(--grijs);width:fit-content;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s}
.mega-rechts a:hover{color:var(--inkt);border-bottom-color:var(--lijn)}
.mega-rechts .scheiding{border-top:1px solid var(--lijn);margin:auto 0 2px}
/* De rechterkolom van het uitklapmenu helpt de twijfelaar in plaats van nog een
   keer dezelfde links te tonen die al in de balk erboven staan. */
.mega-rechts .mr-kop{font-family:var(--display);font-weight:500;font-size:16px;
  letter-spacing:-.025em;line-height:1.25;color:var(--inkt)}
.mega-rechts .mr-tekst{margin-top:-4px;font-size:13.5px;line-height:1.5;color:var(--grijs)}
.mega-rechts a.mr-knop{width:100%;text-align:center;background:var(--inkt);color:#fff;
  padding:11px 10px;border-radius:999px;font-weight:500;font-size:13.5px;
  border-bottom:0;transition:background .25s var(--ease-out)}
.mega-rechts a.mr-knop:hover{background:var(--merk-d);color:#fff;border-bottom:0}
.mega-rechts a.alle{color:var(--merk-d);font-weight:500}
.mega-rechts a.alle:hover{border-bottom-color:var(--merk-d)}
.mega-strip{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;
  gap:18px;margin:0 18px 18px;padding:16px 20px;border-radius:14px;
  background:linear-gradient(135deg,var(--merk) 0%,var(--merk-d) 100%);color:#fff}
.mega-btw{grid-column:1 / -1;margin:-6px 20px 16px;text-align:right;
  font-size:12px;color:var(--grijs)}
.mega-strip b{font-weight:500;font-size:15px;display:block}
.mega-strip span{font-size:13.5px;color:rgba(255,255,255,.85)}
.mega-strip .pijl{flex:none;font-size:18px}
@media(max-width:880px){ .mwrap{display:none} }

/* mobiel menu */
.hamburger{display:none;background:none;border:0;cursor:pointer;padding:10px;color:inherit}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;
  transition:transform .25s var(--ease-out),opacity .2s}
.hamburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger[aria-expanded="true"] span:nth-child(2){opacity:0}
.hamburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobielmenu{display:none;position:fixed;inset:0;top:0;z-index:55;background:var(--nacht);color:#fff;
  padding:96px var(--gutter) 40px;overflow:auto}
.mobielmenu.open{display:block}
.mobielmenu nav{display:grid;gap:4px;font-size:20px;font-family:var(--display);font-weight:500}
.mobielmenu nav>a{padding:13px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.mobielmenu details{border-bottom:1px solid rgba(255,255,255,.12)}
.mobielmenu summary{list-style:none;cursor:pointer;padding:13px 0;display:flex;
  justify-content:space-between;align-items:center}
.mobielmenu summary::-webkit-details-marker{display:none}
.mobielmenu summary::after{content:"+";font-weight:400;font-size:22px;color:rgba(255,255,255,.6)}
.mobielmenu details[open] summary::after{content:"\2212"}
.mobielmenu .sub{display:grid;gap:2px;padding:0 0 14px;font-family:var(--font);font-weight:400;font-size:16px}
.mobielmenu .sub a{padding:9px 0;color:rgba(255,255,255,.82)}
.mobielmenu .sub a:last-child{color:#9DC2FF}
.mobielmenu .mm-cta{margin-top:26px;display:inline-block;background:var(--merk);color:#fff;
  font-family:var(--display);font-weight:500;font-size:17px;padding:15px 30px;border-radius:999px}
@media(max-width:880px){
  .menu>a:not(.pill){display:none}
  .hamburger{display:block}
}

/* ---------- hero (home) ---------- */
.hero{padding:clamp(54px,9vw,116px) var(--gutter) clamp(30px,3.6vw,50px);text-align:center}
h1{font-family:var(--display);font-size:clamp(38px,6.2vw,96px);font-weight:600;letter-spacing:-.042em;
   line-height:1.05;max-width:19ch;margin:0 auto}
.hero>p{margin:24px auto 0;max-width:58ch;font-size:clamp(15.5px,1.2vw,18px);
  line-height:1.55;color:var(--grijs)}
/* Kicker boven de kop, de twee knoppen eronder en de bewijsregel onderaan de
   hero. Ze zijn allemaal een direct kind van .hero, dus ze moeten de regel
   hierboven overschrijven. */
.hero>p.kicker{margin:0 auto 18px;font-size:12px}
.hero-knoppen{margin-top:clamp(26px,3vw,38px);display:flex;flex-wrap:wrap;
  gap:12px;justify-content:center}
.hero>p.bewijs{margin-top:clamp(20px,2.4vw,30px);max-width:56ch;
  font-size:14px;line-height:1.6}
.showcase{border-radius:var(--r-groot);overflow:hidden;aspect-ratio:16/9;
  background:var(--papier);box-shadow:inset 0 0 0 1px var(--lijn)}
.showcase img,.showcase video{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:700px){ .showcase{aspect-ratio:4/3} }
/* Een brede tekening blijft ook op een telefoon 16 bij 9: bij 4 bij 3 zou er
   links en rechts te veel van de tekening wegvallen. */
@media(max-width:700px){ .showcase--breed{aspect-ratio:16/9} }

/* Het filmvenster op de homepage. De papierkleur van de film zelf, zodat er
   voor en tijdens het laden geen kleurverschil te zien is, en de hele film in
   beeld in plaats van bijgesneden. */
.showcase--film{background:#EBE5D8}
.showcase--film video{object-fit:contain}
@media(max-width:700px){ .showcase--film{aspect-ratio:16/9} }

/* ---------- paginakop (subpagina's) ---------- */
/* Een enkel lang woord in een kop past op een smalle telefoon soms niet op één
   regel. Dan mag het als laatste redmiddel breken, in plaats van buiten het
   scherm te steken. Op bredere schermen verandert er niets. */
h1,h2,h3,.lede,.pagekop .lead{overflow-wrap:break-word}

.pagekop{padding:clamp(48px,7vw,96px) var(--gutter) clamp(10px,2vw,24px)}
.pagekop h1{margin:0;max-width:22ch;text-align:left;font-size:clamp(34px,5.4vw,84px)}
.pagekop .lead{margin-top:22px;max-width:62ch;font-size:clamp(16px,1.3vw,19px);
  line-height:1.6;color:var(--grijs)}
.pagekop .kicker{margin-bottom:18px}

/* ---------- secties ---------- */
section{padding:clamp(70px,9vw,150px) 0}
section.compact{padding:clamp(44px,6vw,90px) 0}
.kicker{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs)}
.split-top .kicker{padding-top:.5em}
@media(max-width:820px){ .split-top .kicker{padding-top:0} }
h2{font-family:var(--display);font-size:clamp(34px,5.6vw,88px);font-weight:600;letter-spacing:-.042em;line-height:1.02}
.lede{font-family:var(--display);font-weight:600;
  font-size:clamp(22px,3vw,44px);line-height:1.14;max-width:26em;
  letter-spacing:-.032em}
.split-top{display:grid;grid-template-columns:minmax(0,.24fr) minmax(0,1fr);
  gap:clamp(16px,3vw,40px);align-items:start;
  border-top:1px solid var(--lijn);padding-top:clamp(20px,2.2vw,32px)}
.black .split-top,.donker .split-top{border-top-color:var(--lijn-d)}
@media(max-width:820px){ .split-top{grid-template-columns:1fr;gap:14px} }
.split-top h2{font-size:clamp(28px,4vw,60px);line-height:1.05}
.intro{margin-top:18px;max-width:62ch;font-size:clamp(15.5px,1.15vw,17.5px);
  line-height:1.6;color:var(--grijs)}
.black .intro,.donker .intro{color:rgba(255,255,255,.72)}
.ondernoot{margin-top:clamp(24px,3vw,40px);max-width:70ch;
  font-size:14.5px;line-height:1.6;color:var(--grijs)}
.black .ondernoot,.donker .ondernoot{color:rgba(255,255,255,.62)}
.doorlink{display:inline-block;margin-left:6px;color:#fff;border-bottom:1px solid rgba(255,255,255,.4);
  transition:border-color .2s var(--ease-out)}
.doorlink:hover{border-bottom-color:#fff}
.doorlink.licht{color:var(--merk-d);border-bottom-color:rgba(27,77,228,.35)}
.doorlink.licht:hover{border-bottom-color:var(--merk-d)}
h3.tussenkop{font-family:var(--display);font-size:clamp(20px,2vw,28px);font-weight:500;
  letter-spacing:-.03em;margin-top:clamp(38px,5vw,64px)}
h3.tussenkop+p, .blok p{margin-top:14px;max-width:66ch;line-height:1.62;color:var(--grijs);font-size:16px}

/* ---------- diensten: gestapelde kaarten ---------- */
.stack{margin-top:clamp(46px,6vw,90px);max-width:1040px;margin-left:auto;margin-right:auto}
.sc{position:sticky;border-radius:var(--r-kaart);padding:clamp(26px,2.8vw,40px);
  min-height:clamp(250px,24vw,330px);display:flex;flex-direction:column;
  justify-content:flex-start;margin-bottom:10px;overflow:hidden;
  background:var(--nacht);color:#fff;will-change:transform;
  box-shadow:0 -22px 54px rgba(7,11,28,.38), inset 0 1px 0 rgba(255,255,255,.07)}
.sc .no{position:absolute;right:-.06em;top:-.14em;font-family:var(--display);
  font-size:clamp(78px,9vw,150px);font-weight:500;letter-spacing:-.05em;line-height:1;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.30);pointer-events:none}
.sc.blauw .no{-webkit-text-stroke-color:rgba(255,255,255,.45)}
.sc h2,.sc h3{font-family:var(--display);font-size:clamp(22px,2.6vw,37px);font-weight:500;letter-spacing:-.034em;line-height:1.06}
.sc p{margin-top:16px;max-width:44ch;line-height:1.52;font-size:clamp(14.5px,1.05vw,16px);color:rgba(255,255,255,.68)}
.sc svg.motif{position:absolute;right:0;top:0;height:100%;width:56%;opacity:1;pointer-events:none}
.sc .prijs{margin-top:auto;padding-top:22px;font-family:var(--display);font-weight:500;
  font-size:clamp(15px,1.2vw,17px);letter-spacing:-.015em;color:#fff;max-width:none}
.sc .meer{margin-top:10px;font-size:14.5px;color:rgba(255,255,255,.7);width:fit-content;
  border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.sc .meer:hover{color:#fff;border-bottom-color:#fff}
.sc.d1{top:86px}
.sc.d2{top:96px}
.sc.d3{top:106px}
.sc.d4{top:116px}
.sc.d5{top:126px}
.sc.blauw{background:linear-gradient(135deg,var(--merk) 0%,var(--merk-d) 100%);
  box-shadow:0 -22px 54px rgba(27,77,228,.30), inset 0 1px 0 rgba(255,255,255,.16)}
.sc.blauw p{color:rgba(255,255,255,.86)}
.sc.blauw .meer{color:rgba(255,255,255,.88);border-bottom-color:rgba(255,255,255,.45)}
.sc>i.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;
  border-radius:inherit;will-change:opacity}

/* ---------- werk: zwart vlak met verspringende kaarten ---------- */
.black{background:var(--nacht);color:#fff;border-radius:var(--r-groot);margin:0 var(--gutter);
  padding:clamp(60px,8vw,130px) 0}
.black .inner{max-width:calc(var(--max) - 2*var(--gutter));margin:0 auto;padding:0 clamp(18px,4vw,64px)}
.black h2{color:#fff}
.stagger{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,3vw,54px);
  margin-top:clamp(44px,6vw,86px)}
.work{display:block}
.work .ph{border-radius:var(--r-beeld);overflow:hidden;background:#101733;position:relative}
.work:nth-child(odd) .ph{aspect-ratio:3/4}
.work:nth-child(even) .ph{aspect-ratio:3/4;margin-top:clamp(40px,7vw,120px)}
.work img,.work svg.cover{transition:transform .9s var(--ease-out);width:100%;height:100%;display:block;object-fit:cover}
.work .ttl{margin-top:20px;padding-right:34px;position:relative;font-size:clamp(15.5px,1.35vw,19px);line-height:1.4;
  max-width:34ch;letter-spacing:-.012em}
.work .meta{margin-top:8px;font-size:13px;color:var(--grijs-d)}
.work .ttl::after{content:"\2192";position:absolute;right:0;top:0;opacity:.55;
  transition:transform .4s var(--ease-out),opacity .3s}
.work .badge{position:absolute;left:14px;top:14px;background:rgba(7,11,28,.78);color:#fff;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
@media(max-width:700px){
  .stagger{grid-template-columns:1fr}
  .work:nth-child(even) .ph{margin-top:0}
}

/* ---------- cijfers ---------- */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,2vw,30px);
  margin-top:clamp(40px,5vw,74px)}
.stats.vier{grid-template-columns:repeat(4,1fr)}
.stat{border-top:1px solid var(--lijn);padding-top:22px}
.stat .n{font-family:var(--display);font-size:clamp(30px,3.6vw,54px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--merk-d)}
.stat .l{margin-top:10px;font-size:13.5px;color:var(--grijs);line-height:1.45}
@media(max-width:900px){ .stats,.stats.vier{grid-template-columns:repeat(2,1fr)} }

/* ---------- pakketkaarten ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(11px,1.1vw,16px);
  margin-top:clamp(40px,5vw,74px)}
.cards.twee{grid-template-columns:repeat(2,1fr);max-width:920px}
.card{background:var(--papier);border-radius:var(--r-kaart);padding:clamp(24px,2.4vw,38px);
  display:flex;flex-direction:column;min-height:320px;
  transition:transform .35s var(--ease-out),box-shadow .35s}
.card h2,.card h3{font-family:var(--display);font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.03em}
.card .voor{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--grijs)}
.card h2 .omvang,.card h3 .omvang{font-family:var(--font);font-weight:400;font-size:15px;letter-spacing:0;
  color:var(--grijs);margin-left:6px}
.card ul{list-style:none;margin-top:20px;display:grid;gap:10px}
.card li{font-size:14.5px;color:var(--grijs);padding-left:19px;position:relative;line-height:1.45}
.card li::before{content:"";position:absolute;left:0;top:.56em;width:6px;height:6px;
  border-radius:50%;background:var(--merk)}
.card .p{font-family:var(--display);font-size:clamp(32px,3.4vw,50px);font-weight:500;letter-spacing:-.045em;margin-top:auto;padding-top:24px}
.card .p small{font-family:var(--font);font-weight:400;font-size:15px;letter-spacing:0;color:var(--grijs)}
.card .sub{font-size:13.5px;color:var(--grijs);margin-top:8px;line-height:1.5}
.card .kaartlink{margin-top:16px;font-size:14.5px;width:fit-content;
  border-bottom:1px solid var(--lijn);padding-bottom:2px;
  transition:border-color .2s var(--ease-out),color .2s var(--ease-out)}
.card .kaartlink:hover{color:var(--merk-d);border-bottom-color:var(--merk-d)}
.card.top{background:var(--nacht);color:#fff;position:relative}
.card.top h2,.card.top h3,.card.top .p{color:#fff}
.card.top .voor{color:rgba(255,255,255,.72)}
.card.top h2 .omvang,.card.top h3 .omvang{color:rgba(255,255,255,.66)}
.card.top li{color:rgba(255,255,255,.80)}
.card.top li::before{background:#7FB0FF}
.card.top .sub,.card.top .p small{color:rgba(255,255,255,.68)}
.card.top .tag{position:absolute;right:clamp(20px,2vw,30px);top:clamp(20px,2vw,30px);
  background:var(--merk-d);color:#fff;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;padding:6px 12px;border-radius:999px}
.card.top .kaartlink{border-bottom-color:rgba(255,255,255,.35)}
.card.top .kaartlink:hover{color:#9DC2FF;border-bottom-color:#9DC2FF}
.onder{margin-top:clamp(20px,2.4vw,32px);font-size:15px;line-height:1.55;
  color:var(--grijs);max-width:62ch}
.onder strong{color:var(--inkt);font-weight:500}
@media(max-width:900px){ .cards,.cards.twee{grid-template-columns:1fr} }

/* ---------- vergelijkings- en prijstabellen ---------- */
.tabelrol{margin-top:clamp(34px,4vw,56px);overflow-x:auto;-webkit-overflow-scrolling:touch}
table.vgl{width:100%;border-collapse:collapse;min-width:640px;font-size:14.5px}
table.vgl th,table.vgl td{padding:13px 16px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--lijn);line-height:1.45}
table.vgl thead th{font-family:var(--display);font-weight:500;font-size:15.5px;letter-spacing:-.01em;
  border-bottom:2px solid var(--inkt)}
table.vgl td{color:var(--grijs)}
table.vgl td:first-child{color:var(--inkt)}
table.vgl .ja{color:var(--merk-d);font-weight:500}
table.vgl .prijsrij td{font-family:var(--display);font-weight:500;font-size:19px;color:var(--inkt)}
table.vgl tbody tr:last-child th,table.vgl tbody tr:last-child td{border-bottom:0}
.black table.vgl th,.donker table.vgl th{color:#fff;border-bottom-color:rgba(255,255,255,.5)}
.black table.vgl td,.donker table.vgl td{color:rgba(255,255,255,.72);border-bottom-color:rgba(255,255,255,.14)}
.black table.vgl td:first-child,.donker table.vgl td:first-child{color:#fff}
.black table.vgl .ja,.donker table.vgl .ja{color:#8FBBFF}

/* ---------- opsommingen op subpagina's ---------- */
.vinklijst{margin-top:clamp(26px,3vw,42px);display:grid;grid-template-columns:repeat(2,1fr);
  gap:14px 40px;list-style:none;max-width:960px}
.vinklijst li{position:relative;padding-left:30px;font-size:15.5px;line-height:1.5;color:var(--grijs)}
.vinklijst li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;
  border-radius:50%;background:#E7EFFD}
.vinklijst li::after{content:"";position:absolute;left:4.5px;top:.52em;width:7px;height:4px;
  border-left:2px solid var(--merk-d);border-bottom:2px solid var(--merk-d);transform:rotate(-45deg)}
.vinklijst li strong{color:var(--inkt);font-weight:500}
@media(max-width:760px){ .vinklijst{grid-template-columns:1fr} }

/* uitgelicht kader */
.kader{margin-top:clamp(30px,4vw,50px);background:var(--papier);border-radius:var(--r-kaart);
  padding:clamp(22px,2.6vw,36px);max-width:860px}
.kader h3{font-family:var(--display);font-weight:500;font-size:clamp(18px,1.7vw,23px);letter-spacing:-.02em}
.kader p{margin-top:12px;color:var(--grijs);line-height:1.6;font-size:15.5px;max-width:66ch}
.kader.blauw{background:linear-gradient(135deg,var(--merk) 0%,var(--merk-d) 100%);color:#fff}
.kader.blauw p{color:rgba(255,255,255,.88)}
.kader .doorlink.licht{margin-left:0;margin-top:14px}
.kader.blauw a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5)}

/* ---------- werkwijze-stappen ---------- */
.stappen{margin-top:clamp(40px,5vw,72px);display:grid;gap:0;max-width:960px}
.stap{display:grid;grid-template-columns:76px 1fr;gap:clamp(16px,3vw,40px);
  padding:clamp(24px,3vw,40px) 0;border-top:1px solid var(--lijn)}
.stap .nr{font-family:var(--display);font-size:clamp(26px,3vw,40px);font-weight:500;
  letter-spacing:-.04em;color:var(--merk-d);line-height:1}
.stap h2,.stap h3{font-family:var(--display);font-size:clamp(19px,2vw,26px);font-weight:500;letter-spacing:-.025em}
.stap h2 small,.stap h3 small{font-family:var(--font);font-weight:400;font-size:14.5px;color:var(--grijs);
  letter-spacing:0;margin-left:10px;white-space:nowrap}
.stap p{margin-top:12px;max-width:64ch;color:var(--grijs);line-height:1.62;font-size:15.5px}
@media(max-width:640px){ .stap{grid-template-columns:1fr;gap:10px} }

/* ---------- faq ---------- */
.faq{margin-top:clamp(40px,5vw,74px);border-top:1px solid var(--lijn)}
.faq details{border-bottom:1px solid var(--lijn)}
.faq summary{list-style:none;cursor:pointer;padding:26px 0;display:flex;gap:20px;
  align-items:baseline;justify-content:space-between;font-size:clamp(16.5px,1.5vw,21px)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--grijs);line-height:1;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details .a{padding:0 0 26px;color:var(--grijs);line-height:1.62;max-width:64ch}

/* ---------- donker slotblok ---------- */
.donker{background:var(--nacht);color:#fff;overflow:hidden;
  border-top-left-radius:clamp(26px,3.2vw,46px);border-top-right-radius:clamp(26px,3.2vw,46px)}
.donker h2{color:#fff}
.donker .faq{border-top-color:rgba(255,255,255,.15)}
.donker .faq details{border-bottom-color:rgba(255,255,255,.15)}
.donker .faq summary{color:#fff}
.donker .faq summary::after{color:rgba(255,255,255,.55)}
.donker .faq details .a{color:rgba(255,255,255,.66)}
.end{background:transparent;color:#fff;padding:0}
.end .big{min-height:clamp(340px,44vw,560px);display:grid;place-items:center;text-align:center;
  padding:clamp(50px,7vw,90px) var(--gutter);
  background:radial-gradient(110% 85% at 50% 128%,rgba(27,111,240,.30) 0%,rgba(27,111,240,0) 64%)}
.end.kort .big{min-height:clamp(280px,32vw,420px)}
.endwrap{max-width:min(980px,92vw);margin:0 auto}
.endkick{font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grijs-d);margin-bottom:26px;max-width:none}
.cta-btn{display:inline-block;margin-top:34px;background:var(--merk);color:#fff;
  font-family:var(--display);font-size:clamp(15.5px,1.3vw,18px);font-weight:500;
  letter-spacing:-.01em;padding:18px 38px;border-radius:999px;white-space:nowrap;
  transition:background .25s,transform .3s var(--ease-out),box-shadow .3s;
  box-shadow:0 10px 30px rgba(27,111,240,.30)}
.cta-btn:hover{background:#3C86FF;transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(27,111,240,.42)}
@media(max-width:520px){ .cta-btn{white-space:normal;padding:16px 26px} }
.endtekst{margin:24px auto 0;max-width:56ch;font-size:15.5px;line-height:1.62;
  color:rgba(255,255,255,.74)}
.endsub{margin-top:26px;font-size:15px;line-height:1.6;color:var(--grijs-d)}
.endsub .tel{border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:2px}
.endsub .tel:hover{color:#8FBBFF;border-color:#8FBBFF}
.end .big h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.2vw,60px);color:#fff;
  line-height:1.1;max-width:24ch;margin:0 auto;letter-spacing:-.04em}

/* ---------- footer ---------- */
.fgrid{display:grid;grid-template-columns:auto auto 1fr;gap:clamp(20px,4vw,60px);
  align-items:start;padding:clamp(44px,5.5vw,80px) 0 clamp(44px,5vw,80px)}
.btn-out{display:inline-block;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  padding:13px 26px;font-size:15px;
  transition:background .25s,color .25s,transform .35s var(--ease-out)}
.btn-out:hover{background:#fff;color:var(--inkt)}
.office{margin-top:16px;font-size:14px;line-height:1.5;color:rgba(255,255,255,.82)}
.office span{color:rgba(255,255,255,.5);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;display:block;margin-bottom:5px}
.flinks{display:grid;grid-template-columns:repeat(2,auto);gap:11px clamp(30px,4vw,70px);
  justify-content:end;text-align:left;font-size:15px}
.fkol{display:grid;gap:11px;align-content:start}
.fkol>span{color:rgba(255,255,255,.5);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:3px}
.flinks a{color:rgba(255,255,255,.82);border-bottom:1px solid transparent;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.flinks a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
.fbalk{display:flex;justify-content:space-between;align-items:center;gap:24px;
  flex-wrap:wrap;padding:clamp(20px,2.4vw,28px) 0;
  border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12)}
.fjuridisch{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13.5px}
.fjuridisch a{color:rgba(255,255,255,.7);border-bottom:1px solid transparent;
  transition:color .2s var(--ease-out),border-color .2s var(--ease-out)}
.fjuridisch a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
.fgegevens{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  flex-wrap:wrap;padding:clamp(22px,2.6vw,32px) 0 clamp(30px,4vw,50px);
  font-size:13px;line-height:1.6;color:rgba(255,255,255,.6)}
.fgegevens strong{font-weight:500;color:rgba(255,255,255,.85)}
.ontbreekt{border-bottom:1px dashed rgba(255,255,255,.4)}
main .ontbreekt{border-bottom:1px dashed rgba(11,16,32,.4)}
.soc{width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);font-size:12.5px;color:rgba(255,255,255,.8);
  transition:background .25s var(--ease-out),color .25s,border-color .25s}
.soc:hover{background:#fff;color:var(--inkt);border-color:#fff}
.fsoc{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.frecensie{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;line-height:1;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.22);border-radius:40px;
  padding:10px 17px;white-space:nowrap;
  transition:background .25s var(--ease-out),color .25s,border-color .25s}
.frecensie:hover{background:#fff;color:var(--inkt);border-color:#fff}
.frecensie svg{width:15px;height:15px;flex:none;display:block}
@media(max-width:860px){
  .fgrid{grid-template-columns:1fr;gap:30px}
  .flinks{justify-content:start;text-align:left}
}

/* ---------- juridische en tekstpagina's ---------- */
.tekstpagina{max-width:760px;padding-bottom:clamp(70px,9vw,140px)}
.tekstpagina h2{font-size:clamp(21px,2.2vw,30px);margin-top:clamp(38px,5vw,60px)}
.tekstpagina p,.tekstpagina li{margin-top:14px;line-height:1.68;color:var(--grijs);font-size:16px}
.tekstpagina ul,.tekstpagina ol{margin-top:6px;padding-left:22px}
.tekstpagina li{margin-top:8px}
.tekstpagina strong{color:var(--inkt);font-weight:500}
.tekstpagina a{color:var(--merk-d);border-bottom:1px solid rgba(27,77,228,.3)}
.tekstpagina a:hover{border-bottom-color:var(--merk-d)}
.tekstpagina .bijgewerkt{margin-top:10px;font-size:13.5px;color:var(--grijs)}
.tekstpagina table.vgl{min-width:0}

/* ---------- formulieren ---------- */
.formulier{margin-top:clamp(30px,4vw,50px);display:grid;gap:20px;max-width:640px}
.veld{display:grid;gap:8px}
.veld label{font-size:14.5px;font-weight:500}
.veld input,.veld textarea,.veld select{font-family:inherit;font-size:16px;color:var(--inkt);
  background:var(--papier);border:1px solid var(--lijn);border-radius:12px;padding:14px 16px;width:100%}
.veld input:focus,.veld textarea:focus,.veld select:focus{outline:3px solid var(--merk);outline-offset:1px}
.veld .hulp,.formulier .hulp{font-size:13.5px;color:var(--grijs)}
.formulier .verstuur{justify-self:start;background:var(--merk-d);color:#fff;border:0;cursor:pointer;
  font-family:var(--display);font-weight:500;font-size:16.5px;padding:16px 34px;border-radius:999px;
  transition:background .25s,transform .3s var(--ease-out);box-shadow:0 10px 30px rgba(27,111,240,.25)}
.formulier .verstuur:hover{background:#3C86FF;transform:translateY(-2px)}

/* ---------- 404 ---------- */
.foutblok{min-height:62vh;display:grid;place-items:center;text-align:center;
  padding:clamp(60px,9vw,120px) var(--gutter)}
.foutblok .lucht{max-width:520px;margin:0 auto 34px}
.foutblok .lucht img,.foutblok .lucht svg{width:100%;height:auto}
.foutblok h1{font-size:clamp(30px,4.4vw,58px)}
.foutblok p{margin:18px auto 0;max-width:48ch;color:var(--grijs);line-height:1.6}
.foutknoppen{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.knop{display:inline-block;font-family:var(--display);font-weight:500;font-size:16px;
  padding:15px 30px;border-radius:999px;transition:background .25s,color .25s,transform .3s var(--ease-out)}
.knop.vol{background:var(--merk);color:#fff}
.knop.vol:hover{background:var(--merk-d)}
.knop.lijn{border:1px solid var(--lijn)}
.knop.lijn:hover{border-color:var(--inkt)}

/* ---------- beweging ---------- */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rise.on{opacity:1;transform:none}
/* woord voor woord onder een masker vandaan:
   120% naar boven, 0,95 s per woord, 150 ms ertussen */
.wd{display:inline-block;overflow:clip;vertical-align:bottom;
  padding:0 .04em .16em;margin:0 -.04em -.16em}
.wi{display:inline-block;transform:translateY(120%);
  transition:transform .95s var(--ease-out)}
.split.on .wi{transform:none}
.split.klaar .wd{overflow:visible}
.split.klaar .wi{transition:none}
.reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.05s var(--ease-out)}
.reveal.on{clip-path:inset(0 0 0 0)}
.reveal.klaar{clip-path:none;transition:none}
.work .ph img,.work .ph svg.cover{will-change:transform;transform:scale(1.14)}
.showcase img,.showcase video{will-change:transform}
.showcase img{transform:scale(1.12)}
.cta-btn:active,.btn-out:active,.menu a.pill:active,.work:active,.formulier .verstuur:active{
  transform:scale(.98);transition-duration:.12s}
@media (hover:hover) and (pointer:fine){
  .work:hover img,.work:hover svg.cover{transform:scale(1.04)}
  .work:hover .ttl::after{transform:translateX(6px);opacity:1}
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(11,11,13,.07)}
  .btn-out:hover,.menu a.pill:hover{transform:translateY(-2px)}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .sc{position:relative;top:auto!important}
  .work img,.work svg.cover{transition:none;transform:none}
  .showcase img{transform:none}
  .wi{transform:none;transition:none}
  .reveal{clip-path:none;transition:none}
  header.sitehead{transition:background .3s,color .3s}
  header.sitehead.-weg{transform:none}
  .mega{transition:opacity .2s}
}

/* ---------- afsluiter ---------- */
.end .big .vertel{display:inline-block;color:rgba(255,255,255,.66);
  border-bottom:2px solid rgba(255,255,255,.45);padding-bottom:.06em;
  transition:color .3s var(--ease-out),border-color .3s var(--ease-out)}
.end .big a:hover .vertel{color:#fff;border-bottom-color:#fff}
.knop-lijn{display:inline-block;margin-top:clamp(30px,4vw,54px);
  border:1px solid rgba(255,255,255,.35);border-radius:999px;color:#fff;
  font-family:var(--display);font-weight:500;font-size:16px;padding:16px 34px;
  transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease-out)}
.knop-lijn:hover{background:#fff;color:var(--inkt);border-color:#fff}
.midden{text-align:center}

/* ---------- projectcase: één groot blok ----------
   Voor de projectenpagina en de homepage, zolang er weinig projecten zijn.
   Bewust geen .work-klasse, zodat de parallax dit logo niet oprekt. */
.pcase{display:block;margin-top:clamp(34px,4.5vw,60px)}
.pcase .beeld{border-radius:var(--r-beeld);overflow:hidden;position:relative;
  aspect-ratio:16/9;background:#0E1630;display:grid;place-items:center;
  padding:clamp(34px,6vw,92px)}
.pcase .beeld img{width:auto;max-width:min(520px,78%);height:auto;display:block;
  transition:transform .6s var(--ease-out)}
.pcase .badge{position:absolute;left:16px;top:16px;background:rgba(7,11,28,.80);
  color:#fff;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:6px 12px;border-radius:999px}
.pcase .ttl{margin-top:22px;position:relative;padding-right:34px;max-width:42ch;
  font-size:clamp(17px,1.5vw,22px);line-height:1.35;letter-spacing:-.012em}
.pcase .ttl::after{content:"\2192";position:absolute;right:0;top:0;opacity:.55;
  transition:transform .4s var(--ease-out),opacity .3s}
.pcase .meta{margin-top:8px;font-size:13.5px;color:var(--grijs)}
.black .pcase .meta,.donker .pcase .meta{color:var(--grijs-d)}
@media (hover:hover) and (pointer:fine){
  .pcase:hover .beeld img{transform:scale(1.04)}
  .pcase:hover .ttl::after{transform:translateX(6px);opacity:1}
}
@media (prefers-reduced-motion: reduce){ .pcase .beeld img{transition:none} }

/* ---------- projectpagina ---------- */
.caseblok{max-width:760px}
.caseblok h2{font-size:clamp(24px,2.6vw,38px);margin-top:clamp(44px,5.5vw,76px)}
.caseblok p{margin-top:16px;line-height:1.66;color:var(--grijs);font-size:16.5px;max-width:66ch}
.caseblok strong{color:var(--inkt);font-weight:500}
.caseblok ol{margin-top:18px;padding-left:20px;color:var(--grijs)}
.caseblok ol li{margin-top:9px;line-height:1.55;font-size:16px}
.caseblok ol li strong{color:var(--inkt)}
.figuur{margin-top:clamp(26px,3vw,42px);background:var(--papier);
  border-radius:var(--r-kaart);padding:clamp(22px,3vw,44px)}
.figuur img{width:100%;height:auto;display:block}
.figuur figcaption{margin-top:16px;font-size:13.5px;color:var(--grijs);line-height:1.5}
.kleurstalen{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.staal{display:flex;align-items:center;gap:11px;font-size:14px;color:var(--grijs)}
.staal i{width:34px;height:34px;border-radius:9px;display:block;
  box-shadow:inset 0 0 0 1px rgba(11,16,32,.1)}

/* ---------- projectcase in twee kolommen ----------
   Beeld links, tekst rechts. */
.pcase.duo{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);
  gap:clamp(22px,4vw,58px);align-items:center}
.pcase.duo .beeld{aspect-ratio:3/4;padding:0;background:#EDF6F1}
.pcase.duo .beeld img{width:100%;max-width:none;height:100%;object-fit:cover}
.pcase.duo .ttl{margin-top:0;font-size:clamp(20px,2.1vw,30px);line-height:1.25;max-width:26ch}
.pcase.duo .meta{margin-top:12px}
.pcase.duo .kort{margin-top:16px;max-width:44ch;line-height:1.6;font-size:16px;color:var(--grijs)}
.black .pcase.duo .kort,.donker .pcase.duo .kort{color:var(--grijs-d)}
@media(max-width:760px){
  .pcase.duo{grid-template-columns:1fr;gap:20px}
  /* De cover is staand ontworpen: boven het logo, onder het werk. Op een telefoon
     houden we die verhouding aan, anders snijdt de onderste helft eraf. */
  .pcase.duo .beeld{aspect-ratio:3/4}
}

/* ---------- hele kaart klikbaar ----------
   De link onderin de kaart wordt over het hele vlak uitgerekt. Zo staat er
   precies één link in de voorleesvolgorde, maar kun je overal op de kaart
   klikken. Kaarten zonder link (hosting, contact) blijven ongemoeid. */
.sc:has(.meer),.card:has(.kaartlink){cursor:pointer}
.card{position:relative}
.sc .meer::after,.card .kaartlink::after{content:"";position:absolute;inset:0;z-index:2}
.sc:has(.meer:focus-visible),.card:has(.kaartlink:focus-visible){
  outline:3px solid var(--merk);outline-offset:4px;border-radius:var(--r-kaart)}
.sc:has(.meer:focus-visible){outline-color:#8FBBFF}
.sc .meer:focus-visible,.card .kaartlink:focus-visible{outline:none}
@media (hover:hover) and (pointer:fine){
  .sc:hover .meer{color:#fff;border-bottom-color:#fff}
  .card:hover .kaartlink{color:var(--merk-d);border-bottom-color:var(--merk-d)}
  .card.top:hover .kaartlink{color:#9DC2FF;border-bottom-color:#9DC2FF}
}

/* ---------- keuzevakjes in het formulier ----------
   Aanvinkbare pillen in plaats van vinkjes: groter aanklikvlak, en op een
   telefoon makkelijker te raken. Het echte vinkje blijft eronder staan voor
   toetsenbord en voorleessoftware. */
.keuzeveld{border:0;padding:0;margin:0;display:grid;gap:10px}
.keuzeveld legend{padding:0;font-size:14.5px;font-weight:500;margin-bottom:2px}
.keuzes{display:flex;flex-wrap:wrap;gap:10px}
.keuze{position:relative;display:inline-flex}
.keuze input{position:absolute;opacity:0;width:0;height:0}
.keuze span{display:inline-block;padding:11px 19px;border-radius:999px;
  border:1px solid var(--lijn);background:var(--papier);font-size:15px;cursor:pointer;
  transition:background .2s var(--ease-out),border-color .2s,color .2s}
.keuze input:checked + span{background:var(--merk);border-color:var(--merk);color:#fff}
.keuze input:focus-visible + span{outline:3px solid var(--merk);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .keuze:hover span{border-color:var(--inkt)}
  .keuze input:checked:hover + span{border-color:var(--merk-d);background:var(--merk-d)}
}

/* alleen voor schermlezers */
.verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* scrollbare tabel is met het toetsenbord te bereiken */
.tabelrol:focus-visible{outline:3px solid var(--merk);outline-offset:3px;border-radius:8px}

/* aanraakvlakken minstens 24px hoog (WCAG 2.2, 2.5.8) */
.meer,.kaartlink,.doorlink,.mega-rechts a,.fkol a,.fjuridisch a,.endsub .tel{
  min-height:24px;display:inline-flex;align-items:center}
.brand{min-height:24px}

/* het onzichtbare veld tegen robots: weg van het scherm, niet uit de opmaak */
.valstrik{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formmelding{margin-top:14px;font-size:15px;line-height:1.5;color:var(--grijs)}
.formmelding.fout{color:#B4232A}
.formmelding:empty{display:none}
.formulier .verstuur[aria-busy="true"]{opacity:.65;cursor:progress}

/* ---------- brede tabellen als uitklapbare blokken op een telefoon ---------- */
.vglkaarten{display:none}
@media(max-width:720px){
  .tabelrol.heeft-kaarten{display:none}
  /* Een tabel van twee kolommen wordt geen blok; die laten we gewoon meebuigen
     met het scherm, dan hoeft er ook daar niet geschoven te worden. */
  .tabelrol:not(.heeft-kaarten){overflow-x:visible}
  .tabelrol:not(.heeft-kaarten) table.vgl{min-width:0;table-layout:fixed}
  .tabelrol:not(.heeft-kaarten) table.vgl th,
  .tabelrol:not(.heeft-kaarten) table.vgl td{padding:12px 10px 12px 0;overflow-wrap:anywhere}
  .tabelrol:not(.heeft-kaarten) table.vgl td:last-child,
  .tabelrol:not(.heeft-kaarten) table.vgl th:last-child{padding-right:0}

  .vglkaarten{display:grid;gap:10px;margin-top:22px}
  .vglkaart{border:1px solid var(--lijn);border-radius:var(--r-kaart);
    background:var(--papier);overflow:hidden}
  .vglkaart summary{list-style:none;cursor:pointer;padding:17px 18px;
    display:flex;justify-content:space-between;align-items:baseline;gap:14px}
  .vglkaart summary::-webkit-details-marker{display:none}
  .vglkaart summary .naam{font-family:var(--display);font-size:19px;font-weight:500;
    letter-spacing:-.02em}
  .vglkaart summary .bedrag{font-family:var(--display);font-size:19px;font-weight:500;
    color:var(--merk-d);white-space:nowrap;margin-left:auto}
  .vglkaart summary::after{content:"+";font-size:20px;color:var(--grijs);
    line-height:1;flex:none;width:14px;text-align:right}
  .vglkaart[open] summary::after{content:"\2212"}
  .vglkaart dl{display:grid;gap:9px;font-size:15px;padding:0 18px 18px;
    border-top:1px solid var(--lijn);padding-top:15px}
  /* elke regel bepaalt zijn eigen verdeling: een lang label duwt de waarde niet
     naar een smalle kolom, zoals in een gedeeld raster wel zou gebeuren */
  .vglkaart .rij{display:flex;justify-content:space-between;gap:18px;align-items:baseline}
  .vglkaart dt{color:var(--grijs);line-height:1.4;flex:1 1 auto;min-width:0}
  .vglkaart dd{text-align:right;font-weight:500;line-height:1.4;flex:0 1 auto;min-width:0}

  .black .vglkaart,.donker .vglkaart{background:var(--nacht-3);border-color:var(--lijn-d)}
  .black .vglkaart summary .naam,.donker .vglkaart summary .naam{color:#fff}
  .black .vglkaart summary .bedrag,.donker .vglkaart summary .bedrag{color:#9DC2FF}
  .black .vglkaart summary::after,.donker .vglkaart summary::after{color:rgba(255,255,255,.6)}
  .black .vglkaart dl,.donker .vglkaart dl{border-top-color:var(--lijn-d)}
  .black .vglkaart dt,.donker .vglkaart dt{color:var(--grijs-d)}
  .black .vglkaart dd,.donker .vglkaart dd{color:#fff}
}

/* ---------- filter op de projectenpagina ---------- */
[hidden]{display:none !important}
.filters{display:flex;flex-wrap:wrap;gap:10px;margin:clamp(28px,3.5vw,44px) 0 0}
.filter{appearance:none;border:1px solid var(--lijn);background:transparent;color:var(--grijs);
  font:inherit;font-size:14.5px;line-height:1;padding:11px 18px;border-radius:999px;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;
  transition:background .25s,color .25s,border-color .25s}
.filter .aantal{font-size:12px;color:var(--grijs);opacity:.8}
.filter[aria-pressed="true"]{background:var(--inkt);border-color:var(--inkt);color:#fff}
.filter[aria-pressed="true"] .aantal{color:rgba(255,255,255,.7)}
@media (hover:hover) and (pointer:fine){
  .filter:not([aria-pressed="true"]):hover{border-color:var(--inkt);color:var(--inkt)}
}
.filter:active{transform:scale(.98)}
.geenwerk{margin:clamp(30px,4vw,50px) 0 0;color:var(--grijs)}
@media (prefers-reduced-motion: reduce){ .filter{transition:none} }