/* Uniekaiconsultancy — ontwerpsysteem v3 ("de film is het merk").
   Navy podium, blauwe panelen, witte UI-kaarten, grote kapitalen en de glimlach
   uit het logo als handtekening. Brief: build/ontwerp-v3.md.
   Lettertypen staan op de eigen site (assets/fonts, variabel, Latijnse tekenset); de head
   laadt ze vooraf met <link rel="preload"> (build/_bouw.py). Geen Google Fonts.
   Pagina-eigen stijl hoort in assets/pagina-<stam>.css, gescoped onder .pagina-<stam>. */

@font-face{font-family:"Archivo";src:url("/assets/fonts/archivo.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;}
@font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap;}

:root{
  /* palet: deze 8 kleuren plus alfa-varianten, verder niets */
  --nacht:#07142A; --navy:#0B1C3D; --blauw:#2563EB; --lucht:#7EA6F7; --ijs:#BAD1FC; --grijs:#D8DEE8; --wolk:#F2F5F9; --wit:#FFFFFF;
  /* tekst en lijnen (--fout alleen voor formulierfouten) */
  --tekst:#0B1C3D; --tekst-zacht:rgba(11,28,61,.74); --tekst-licht:#D8DEE8; --tekst-licht-zacht:rgba(216,222,232,.72); --lijn:#D8DEE8; --lijn-donker:rgba(255,255,255,.12); --fout:#B3261E;
  /* letters */
  --f-display:"Archivo",system-ui,sans-serif;
  --f-tekst:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* maten en rondingen */
  --max:1200px; --gutter:clamp(20px,4vw,40px); --sectie:clamp(80px,10vw,136px); --r-s:10px; --r-m:18px; --r-l:28px; --r-xl:32px; --r-pil:999px;
  /* beweging */
  --ease:cubic-bezier(.22,.8,.3,1); --t-snel:160ms; --t-ui:240ms; --t-reveal:600ms;
  /* schaduwen en gloed */
  --schaduw-kaart:0 1px 0 rgba(11,28,61,.04),0 18px 40px -24px rgba(11,28,61,.28);
  --schaduw-zweef:0 30px 80px -30px rgba(7,20,42,.55);
  --schaduw-toast:0 14px 30px -12px rgba(7,20,42,.45);
  --schaduw-tegel:0 28px 36px rgba(0,0,0,.45);
  --glas-rand:inset 0 1px 0 rgba(255,255,255,.35);
  --gloed-tekst:0 0 10px rgba(255,255,255,.45),0 0 32px rgba(186,209,252,.55),0 0 64px rgba(126,166,247,.35);
  --gloed-blauw:0 0 0 1px rgba(126,166,247,.35),0 0 40px rgba(37,99,235,.45);
  /* korrel: statische achtergrondlaag op donker en blauw */
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.06'/%3E%3C/svg%3E");
  --korrel-sterk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.09'/%3E%3C/svg%3E");
  /* de glimlach uit het logo: maskers (kleur via background) en voorgekleurd */
  --glimlach:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 48 69 54'%3E%3Cpath d='M32 55C32 82 46 96 60 96C74 96 88 82 88 55' fill='none' stroke='%23000' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='55' r='5'/%3E%3C/svg%3E");
  --glimlach-link:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 2C2 8 20 10.5 50 10.5C80 10.5 98 8 98 2' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  --glimlach-boog:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 48 69 54'%3E%3Cpath d='M32 55C32 82 46 96 60 96C74 96 88 82 88 55' fill='none' stroke='%23000' stroke-width='.14' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='55' r='.3'/%3E%3C/svg%3E");
  --glimlach-lucht:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 48 69 54'%3E%3Cpath d='M32 55C32 82 46 96 60 96C74 96 88 82 88 55' fill='none' stroke='%237EA6F7' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='55' r='5' fill='%237EA6F7'/%3E%3C/svg%3E");
  --glimlach-blauw:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 48 69 54'%3E%3Cpath d='M32 55C32 82 46 96 60 96C74 96 88 82 88 55' fill='none' stroke='%232563EB' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='55' r='5' fill='%232563EB'/%3E%3C/svg%3E");
  --glimlach-wit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='26 48 69 54'%3E%3Cpath d='M32 55C32 82 46 96 60 96C74 96 88 82 88 55' fill='none' stroke='%23fff' stroke-width='8' stroke-linecap='round'/%3E%3Ccircle cx='88' cy='55' r='5' fill='%23fff'/%3E%3C/svg%3E");
  --pijl-navy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1C3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --pijl-wit:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  /* focusring (licht vlak: blauw) */
  --focus:var(--ijs);
}

/* ---- basis ---- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:96px;}
html,body{overflow-x:clip;}
body{margin:0;background:var(--nacht);color:var(--tekst-licht);font:400 17px/1.65 var(--f-tekst);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
@media (max-width:640px){body{font-size:16px;}}
h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0;}
img,video{display:block;max-width:100%;height:auto;}
svg{max-width:100%;}
a{color:inherit;}
b,strong{font-weight:600;}
button{font:inherit;color:inherit;}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px;}
main:focus{outline:none;}
::selection{background:var(--blauw);color:var(--wit);}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.icoon{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.overslaan{position:fixed;top:12px;left:-9999px;z-index:100;padding:12px 18px;border-radius:var(--r-s);background:var(--wit);color:var(--navy);font-weight:600;text-decoration:none;}
.overslaan:focus{left:12px;}
@view-transition{navigation:auto;}
::view-transition-old(root),::view-transition-new(root){animation-duration:220ms;}

/* ---- typografie ---- */
h1,h2{font-family:var(--f-display);text-transform:uppercase;text-wrap:balance;}
h1{font-weight:900;font-size:clamp(38px,6vw,84px);line-height:.92;letter-spacing:-.015em;color:var(--wit);}
h2{font-weight:800;font-size:clamp(30px,3.8vw,52px);line-height:.98;letter-spacing:-.01em;max-width:18ch;}
h3{font:700 22px/1.2 var(--f-display);letter-spacing:-.01em;}
@media (max-width:640px){h3{font-size:20px;}}
.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;max-width:56ch;text-wrap:pretty;}
.tint{color:var(--lucht);}
.noot{margin-top:36px;text-align:center;font-size:16px;color:var(--tekst-zacht);}
.noot strong{color:var(--navy);}

/* ---- lay-out ---- */
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter);}
.sectie{position:relative;isolation:isolate;overflow:clip;padding-block:var(--sectie);}
.sectie--nacht{background:var(--korrel),radial-gradient(70% 60% at 50% 0%,rgba(37,99,235,.22),transparent 70%),var(--nacht);color:var(--tekst-licht);}
.sectie--blauw{background:var(--korrel-sterk),radial-gradient(80% 60% at 50% 25%,rgba(126,166,247,.35),transparent 70%),radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(7,20,42,.28)),var(--blauw);color:var(--wit);}
.sectie--licht{background:var(--wolk);color:var(--tekst);--focus:var(--blauw);}
.sectie--wit{background:var(--wit);color:var(--tekst);--focus:var(--blauw);}
/* naad: bij een toonwissel schuift de volgende scène met ronde hoeken over de vorige, als een filmcut.
   Lichte secties (licht/wit) die op elkaar volgen liggen vlak tegen elkaar.
   Ritme: navy hero, dan licht (wolk en wit om en om); een nacht-scène alleen als laatste sectie
   voor de CTA; een blauwe sectie alleen op home (na de film). */
.hero + .sectie,.sectie + .sectie,.sectie + .cta,.hero + .cta{margin-top:calc(var(--r-xl) * -1);border-radius:var(--r-xl) var(--r-xl) 0 0;}
:is(.sectie--licht,.sectie--wit) + :is(.sectie--licht,.sectie--wit){margin-top:0;border-radius:0;}
@media (max-width:640px){.hero + .sectie,.sectie + .sectie,.sectie + .cta,.hero + .cta{margin-top:-24px;border-radius:24px 24px 0 0;}
  :is(.sectie--licht,.sectie--wit) + :is(.sectie--licht,.sectie--wit){margin-top:0;border-radius:0;}}

:is(.sectie--nacht,.sectie--blauw) :is(h2,h3){color:var(--wit);}
:is(.sectie--licht,.sectie--wit) :is(h2,h3){color:var(--navy);}
.sectie--nacht .lead{color:var(--tekst-licht-zacht);}
.sectie--blauw .lead{color:rgba(255,255,255,.92);}
:is(.sectie--licht,.sectie--wit) .lead{color:var(--tekst-zacht);}

.kop{margin-bottom:clamp(36px,5vw,56px);}
.kop .lead{margin-top:20px;}
.kop .knop{margin-top:28px;}
.kop--midden{text-align:center;}
.kop--midden h2,.kop--midden .lead{margin-inline:auto;}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,72px);align-items:start;}
.split__kop{position:sticky;top:120px;margin-bottom:0;}
@media (max-width:900px){.split{grid-template-columns:minmax(0,1fr);}.split__kop{position:static;}}

.rooster{display:grid;gap:20px;}
@media (min-width:760px){.rooster--2{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:640px){.rooster--3,.rooster--4{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:640px) and (max-width:979px){.rooster--3 > :last-child:nth-child(odd){grid-column:1/-1;}} /* tablet: derde kaart over de volle breedte, niet half alleen */
@media (min-width:980px){.rooster--3{grid-template-columns:repeat(3,minmax(0,1fr));}.rooster--4{grid-template-columns:repeat(4,minmax(0,1fr));}}

/* ---- eyebrow met glimlach ---- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;font:700 12.5px/1.2 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--blauw);}
.eyebrow::before{content:"";flex:none;width:18px;height:14px;background:currentColor;mask:var(--glimlach) center/contain no-repeat;}
.hero .eyebrow,.sectie--nacht .eyebrow{color:var(--lucht);}
.sectie--blauw .eyebrow,.cta .eyebrow{color:var(--wit);}
@media (max-width:640px){.eyebrow{font-size:12px;}}

/* ---- knoppen ---- */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 24px;border-radius:var(--r-pil);font:600 16px/1 var(--f-tekst);text-decoration:none;white-space:nowrap;cursor:pointer;border:1px solid transparent;background:none; transition:translate var(--t-snel) var(--ease),background-color var(--t-snel),box-shadow var(--t-ui),border-color var(--t-snel),color var(--t-snel);}
.knop:hover{translate:0 -1px;}
.knop:active{translate:0 1px;scale:.985;}
.knop--pijl{padding-right:6px;}
.knop--pijl::after{content:"";flex:none;width:40px;height:40px;border-radius:50%;background:var(--pijl-navy) center/18px no-repeat,var(--wit);transition:translate var(--t-ui) var(--ease);}
.knop--pijl:hover::after{translate:3px 0;}
.knop--blauw{background:var(--blauw);color:var(--wit);}
.knop--blauw:hover{box-shadow:0 0 0 4px rgba(37,99,235,.25),0 14px 30px -10px rgba(37,99,235,.7);}
.knop--wit{background:var(--wit);color:var(--navy);}
.knop--wit.knop--pijl::after{background:var(--pijl-wit) center/18px no-repeat,var(--nacht);}
.knop--wit:hover{box-shadow:0 0 0 4px rgba(255,255,255,.22),0 14px 30px -12px rgba(7,20,42,.5);}
.knop--glas{color:var(--wit);border-color:rgba(255,255,255,.3);}
.knop--glas:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);}
.knop--lijn{color:var(--navy);border:1.5px solid rgba(11,28,61,.24);}
.knop--lijn:hover{border-color:var(--blauw);color:var(--blauw);}
.knop--lijn .icoon,.knop--glas .icoon{width:18px;height:18px;}
.knop.is-bezig{pointer-events:none;}
.knop.is-bezig::after{content:"";flex:none;width:22px;height:17px;border-radius:0;background:currentColor;mask:var(--glimlach) center/contain no-repeat;animation:laden 1.1s var(--ease) infinite;}
@keyframes laden{0%{clip-path:inset(0 100% 0 0)}50%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 100%)}}

/* ---- kaarten en chips ---- */
.kaart{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border-radius:var(--r-m);background:var(--wit);border:1px solid var(--grijs);box-shadow:var(--schaduw-kaart);color:var(--tekst);--focus:var(--blauw);}
.kaart h3{color:var(--navy);}
.kaart p{color:var(--tekst-zacht);font-size:16px;}
.kaart .chip{margin-bottom:8px;}
@media (max-width:640px){.kaart{padding:24px;}}
.kaart--link{text-decoration:none;transition:translate var(--t-ui) var(--ease),border-color var(--t-ui),box-shadow var(--t-ui);}
.kaart--link:hover{translate:0 -3px;border-color:var(--blauw);box-shadow:0 26px 50px -28px rgba(11,28,61,.45);}
.sectie--blauw .kaart--link{--focus:var(--wit);}
.sectie--blauw .kaart--link:hover{border-color:var(--wit);box-shadow:0 30px 60px -28px rgba(7,20,42,.6);}
.kaart__meer{position:relative;align-self:flex-start;margin-top:auto;padding-top:10px;font-weight:600;font-size:15px;color:var(--blauw);}
.kaart__meer::after{content:"";position:absolute;left:0;right:0;bottom:-.42em;height:.4em;background:currentColor;mask:var(--glimlach-link) 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease);}
.kaart--link:hover .kaart__meer::after,.kaart--link:focus-visible .kaart__meer::after{clip-path:inset(0);}
.kaart--nacht{background:var(--navy);border-color:rgba(126,166,247,.18);color:var(--tekst-licht);box-shadow:var(--schaduw-zweef);--focus:var(--ijs);}
.kaart--nacht h3{color:var(--wit);}
.kaart--nacht p{color:var(--tekst-licht-zacht);}
.kaart--glas{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3);color:var(--wit);box-shadow:var(--glas-rand),var(--schaduw-zweef);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);--focus:var(--ijs);}
.kaart--glas h3{color:var(--wit);}
.kaart--glas p{color:rgba(255,255,255,.92);}
.kaart__voet{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:16px;border-top:1px solid var(--lijn);}
:is(.kaart--nacht,.kaart--glas) .kaart__voet{border-top-color:var(--lijn-donker);}
.prijs{font:800 28px/1 var(--f-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--navy);}
:is(.kaart--nacht,.kaart--glas) .prijs{color:var(--wit);}
.duur{font-size:14px;color:var(--tekst-zacht);}
:is(.kaart--nacht,.kaart--glas) .duur{color:var(--tekst-licht-zacht);}
@media (max-width:640px){.prijs{font-size:24px;}}

.chip{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;background:var(--blauw);color:var(--wit);box-shadow:inset 0 1px 0 rgba(255,255,255,.25);}
.chip .icoon{width:22px;height:22px;}
.chip--s{width:34px;height:34px;}
.chip--s .icoon{width:16px;height:16px;}
.chip--zacht{background:var(--wolk);color:var(--blauw);box-shadow:none;}
.chip--glas{background:rgba(255,255,255,.1);color:var(--ijs);border:1px solid rgba(255,255,255,.18);box-shadow:none;}

.pil{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:var(--r-pil);font:600 12.5px/1.2 var(--f-tekst);background:rgba(37,99,235,.1);color:var(--blauw);white-space:nowrap;}
.pil .icoon{width:14px;height:14px;}

/* ---- glas, tegels, VOORBEELD ---- */
.glas{position:relative;border-radius:var(--r-l);padding:24px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);color:var(--wit);-webkit-backdrop-filter:blur(18px) saturate(140%);backdrop-filter:blur(18px) saturate(140%);box-shadow:var(--glas-rand),var(--schaduw-zweef);}
.sectie--nacht .glas{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);}
.glas__kop{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.2);}
.glas__kop p{display:flex;flex-direction:column;gap:2px;}
.glas__kop b{font:800 22px/1.15 var(--f-display);color:var(--wit);letter-spacing:-.01em;}
.glas__kop small{font-size:13px;color:var(--ijs);}
.voorbeeld + .glas__kop{margin-top:26px;}
.tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.tegel{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px 12px;border-radius:18px;background:var(--wit);color:var(--navy);font:600 15px/1.2 var(--f-tekst);text-align:center;box-shadow:0 14px 30px -18px rgba(7,20,42,.6);}
.tegel .chip{width:44px;height:44px;}
.voorbeeld{position:absolute;top:14px;left:14px;z-index:2;padding:6px 9px;border-radius:6px;font:800 10.5px/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--ijs);background:rgba(7,20,42,.55);border:1px solid rgba(255,255,255,.18);}
@media (min-width:901px){.hero__beeld .glas{transform:perspective(1400px) rotateY(-10deg) rotateX(4deg);}}

/* ---- toasts ---- */
.toasts{list-style:none;margin:0;padding:0;display:grid;gap:14px;justify-items:start;}
.toast{position:relative;display:flex;align-items:center;gap:12px;padding:12px 40px 12px 12px;border-radius:14px;background:var(--wit);color:var(--navy);box-shadow:var(--schaduw-toast);min-width:230px;}
.toast p{display:flex;flex-direction:column;line-height:1.25;}
.toast b{font-size:15px;font-weight:600;}
.toast small{font-size:12.5px;color:var(--tekst-zacht);}
.toast::after{content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--blauw);}

/* ---- zoekpil (de film: "Wat heeft jouw bedrijf nodig?"): de cursor knippert drie keer en verdwijnt ---- */
.zoekpil{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 6px 0 18px;border-radius:var(--r-pil);background:var(--wit);color:var(--navy);text-decoration:none;box-shadow:var(--schaduw-zweef),0 0 0 6px rgba(255,255,255,.12);max-width:100%;}
.zoekpil > .icoon{width:16px;height:16px;color:var(--blauw);}
.zoekpil__tekst{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid transparent;padding-right:2px;width:auto;max-width:var(--zoek-w,14.1em);font:500 15px/1.4 var(--f-tekst);animation:knipper 1.1s steps(1) 3 backwards;}
.zoekpil__knop{display:grid;place-items:center;flex:none;width:40px;height:40px;margin-left:auto;border-radius:50%;background:var(--blauw);color:var(--wit);}
.zoekpil__knop .icoon{width:16px;height:16px;}
@keyframes typen{from{max-width:0}to{max-width:var(--zoek-w,14.1em)}}
@keyframes knipper{0%{border-right-color:var(--blauw)}50%{border-right-color:transparent}}
@media (max-width:640px){.zoekpil{height:48px;padding-left:14px;gap:8px;}.zoekpil__tekst{font-size:14px;}.zoekpil__knop{width:36px;height:36px;}}

/* ---- HUD-haken (alleen analysemomenten) ---- */
.hud{--hud-c:var(--lucht);--hud-l:22px;--hud-t:2px;position:relative;}
.hud::before{content:"";position:absolute;inset:-14px;z-index:1;pointer-events:none; background:linear-gradient(var(--hud-c) 0 0) 0 0/var(--hud-l) var(--hud-t),linear-gradient(var(--hud-c) 0 0) 0 0/var(--hud-t) var(--hud-l),
    linear-gradient(var(--hud-c) 0 0) 100% 0/var(--hud-l) var(--hud-t),linear-gradient(var(--hud-c) 0 0) 100% 0/var(--hud-t) var(--hud-l),
    linear-gradient(var(--hud-c) 0 0) 0 100%/var(--hud-l) var(--hud-t),linear-gradient(var(--hud-c) 0 0) 0 100%/var(--hud-t) var(--hud-l),
    linear-gradient(var(--hud-c) 0 0) 100% 100%/var(--hud-l) var(--hud-t),linear-gradient(var(--hud-c) 0 0) 100% 100%/var(--hud-t) var(--hud-l); background-repeat:no-repeat;filter:drop-shadow(0 0 6px rgba(37,99,235,.8));transition:inset .45s var(--ease),opacity .3s;}
.js .reveal:not(.in) .hud::before,.js .hud.reveal:not(.in)::before{inset:-34px;opacity:0;}
.sectie--licht .hud,.sectie--wit .hud{--hud-c:var(--blauw);}
.hud__label{position:absolute;top:-14px;left:18px;z-index:3;display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:8px;font:800 12px/1 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--wit);background:var(--blauw);box-shadow:0 8px 20px -8px rgba(37,99,235,.8);transition:opacity var(--t-ui);}
.hud__label .icoon{width:14px;height:14px;}
@media (max-width:640px){.hud::before{inset:-8px;}.hud__label{font-size:11px;}}

/* ---- hero (gedeeld) ---- */
.hero{position:relative;isolation:isolate;overflow:clip;color:var(--tekst-licht);background:var(--korrel),var(--nacht); padding:calc(60px + 12px + clamp(48px,7vw,96px)) 0 clamp(64px,8vw,112px);}
.hero::before{content:"";position:absolute;left:0;right:0;top:-10%;height:120%;z-index:-2;pointer-events:none; background:radial-gradient(60% 55% at 50% 0%,rgba(37,99,235,.38),rgba(37,99,235,.10) 45%,transparent 75%); transform:translate3d(0,calc(var(--sy,0) * .25px),0);}
.hero__lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--tekst-licht-zacht);max-width:54ch;margin-top:26px;text-wrap:pretty;animation:opdoemen .5s var(--ease) .5s both;}
.hero__acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;animation:opdoemen .5s var(--ease) .6s both;}
.hero .eyebrow{animation:opdoemen .5s var(--ease) both;}
.hero .persoon{margin-top:40px;animation:opdoemen .5s var(--ease) .68s both;}
@keyframes opdoemen{from{opacity:0;filter:blur(6px);translate:0 8px}}
@media (max-width:480px){.hero__acties{flex-direction:column;align-items:stretch;}.hero__acties .knop{width:100%;}}

/* home: navy, gecentreerd, kinetisch */
/* de film piept onder de vouw op een laptop (1440x900): de hero is dus niet hoger dan nodig */
.hero--home{display:flex;align-items:center;min-height:min(84svh,900px);text-align:center;padding:calc(72px + clamp(36px,4.6vw,72px)) 0 clamp(52px,5vw,76px); background:var(--korrel),radial-gradient(640px 300px at 50% 100%,rgba(37,99,235,.3),transparent 70%),var(--nacht);}
.hero--home .hero__in{position:relative;z-index:1;max-width:1080px;width:100%;}
.hero--home h1{font-size:clamp(46px,7.2vw,106px);line-height:.9;letter-spacing:-.02em;padding-bottom:.46em;}
.hero--home h1 > .tint{display:block;} /* 'Op maat' en 'opgelost.' altijd op twee regels, zoals in de film */
.hero__boven{display:block;margin-bottom:.5em;font-weight:800;font-size:clamp(16px,1.9vw,27px);line-height:1.1;letter-spacing:.01em;color:var(--ijs);}
.hero--home .hero__lead{margin-inline:auto;margin-top:clamp(30px,3vw,40px);}
.hero--home .hero__acties{justify-content:center;margin-top:30px;}
.hero--home .persoon{justify-content:center;text-align:left;margin-top:32px;}
@media (max-width:640px){.hero--home h1{font-size:min(13.4vw,56px);}}

/* subpagina's: tekst links, beeld rechts */
.hero--pagina{background:var(--korrel),radial-gradient(45% 55% at 78% 45%,rgba(37,99,235,.45),transparent 70%),var(--nacht);}
.hero--pagina::before{opacity:.5;}
.hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center;min-height:min(78svh,780px);}
.hero__tekst .hero__lead{max-width:46ch;}
.hero__beeld{position:relative;animation:inzweven .9s var(--ease) .35s both;}
.hero__beeld .tegel,.hero__beeld .toast{animation:plop .45s var(--ease) both;animation-delay:calc(700ms + var(--k,0) * 120ms);}
.hero__beeld :nth-child(2){--k:1}.hero__beeld :nth-child(3){--k:2}.hero__beeld :nth-child(4){--k:3}.hero__beeld :nth-child(5){--k:4}
@keyframes inzweven{from{opacity:0;translate:0 24px;scale:.98}}
@keyframes plop{from{opacity:0;translate:0 12px;scale:.96}}
@media (max-width:900px){.hero__grid{grid-template-columns:minmax(0,1fr);min-height:0;}
  .hero--pagina{background:var(--korrel),radial-gradient(80% 38% at 50% 82%,rgba(37,99,235,.5),transparent 70%),var(--nacht);}}
@media (max-width:480px){.tegels{gap:8px;}.tegel{padding:16px 6px;font-size:13.5px;}}

/* ---- kinetische kop + glimlach-onderstreping ---- */
.kinetisch{padding-bottom:.28em;}
.kinetisch .w{display:inline-block;vertical-align:top;clip-path:inset(-.6em -.6em 0 -.6em);animation:ontmasker 0s linear forwards;animation-delay:calc(var(--i) * 60ms + 950ms);}
.kinetisch .w > span{display:inline-block;animation:opkomen .8s var(--ease) both;animation-delay:calc(var(--i) * 60ms + 100ms);}
@keyframes opkomen{from{transform:translateY(110%) rotate(4deg)}62%{transform:translateY(-4%) rotate(var(--rot,0deg))}to{transform:translateY(var(--dy,0)) rotate(var(--rot,0deg))}}
@keyframes ontmasker{to{clip-path:none}}
.kinetisch--los .w:nth-of-type(3n+1) > span{--rot:-1.5deg;--dy:-.03em;}
.kinetisch--los .w:nth-of-type(3n+2) > span{--rot:1deg;--dy:.02em;}
.onderstreept{position:relative;display:inline-block;color:var(--wit);text-shadow:var(--gloed-tekst);}
.glimlach-streep{position:absolute;left:-3%;top:86%;width:106%;height:auto;overflow:visible;pointer-events:none;filter:drop-shadow(0 0 10px rgba(37,99,235,.75));}
.glimlach-streep path{fill:none;stroke:var(--blauw);stroke-width:6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tekenen .7s var(--ease) forwards;animation-delay:calc(var(--n,4) * 60ms + 380ms);}
.glimlach-streep circle{fill:var(--blauw);transform-box:fill-box;transform-origin:center;scale:0;animation:punt .28s var(--ease) forwards;animation-delay:calc(var(--n,4) * 60ms + 960ms);}
@keyframes tekenen{to{stroke-dashoffset:0}}
@keyframes punt{to{scale:1}}

/* ---- glimlach als icoon ---- */
.glimlach{display:block;width:40px;height:31px;flex:none;color:var(--lucht);}
.glimlach--s{width:18px;height:14px;}
.glimlach--l{width:120px;height:94px;}
.glimlach--teken{stroke-dasharray:1;stroke-dashoffset:1;fill-opacity:0;transition:stroke-dashoffset .8s var(--ease),fill-opacity .2s .7s;}
.in .glimlach--teken,.glimlach--teken.in,:root:not(.js) .glimlach--teken{stroke-dashoffset:0;fill-opacity:1;}

/* tekstlinks: de rechte streep maakt plaats voor een glimlach */
main p a:not(.knop),.voet__fijn a{position:relative;display:inline-block;color:inherit;text-decoration:underline 1px;text-underline-offset:.28em;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);transition:text-decoration-color var(--t-snel);}
main p a:not(.knop)::after{content:"";position:absolute;left:0;right:0;bottom:-.34em;height:.36em;background:currentColor;mask:var(--glimlach-link) 0 0/100% 100% no-repeat;clip-path:inset(0 100% 0 0);transition:clip-path .3s var(--ease);}
main p a:not(.knop):is(:hover,:focus-visible){text-decoration-color:transparent;}
main p a:not(.knop):is(:hover,:focus-visible)::after{clip-path:inset(0);}
:is(.sectie--licht,.sectie--wit,.kaart) p a:not(.knop){color:var(--blauw);}
.sectie--nacht p a:not(.knop),.hero p a:not(.knop){color:var(--lucht);}

/* ---- film ---- */
.sectie--film{z-index:1;overflow:visible;background:linear-gradient(to bottom,transparent 52%,var(--wolk) 52%),radial-gradient(640px 300px at 50% 0,rgba(37,99,235,.3),transparent 70%),var(--korrel),var(--nacht);padding-block:8px clamp(40px,4.4vw,64px);}
.hero + .sectie--film{margin-top:0;border-radius:0;}
.sectie--film + .sectie{padding-top:clamp(56px,7vw,96px);}
.film{position:relative;max-width:1040px;margin-inline:auto;}
.film__kader{position:relative;}
.film__video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:var(--r-l);background:var(--blauw);box-shadow:0 50px 120px -40px rgba(37,99,235,.55),0 30px 60px -30px rgba(0,0,0,.6);}
.film__speel{display:none;}
.js .film__speel{position:absolute;left:24px;top:auto;bottom:24px;z-index:2;display:inline-flex;align-items:center;gap:12px;width:auto;height:56px;margin:0;padding:0 22px 0 8px;border:0;border-radius:var(--r-pil);cursor:pointer;background:var(--wit);color:var(--navy);font:600 16px/1 var(--f-tekst);box-shadow:var(--schaduw-zweef);transition:scale var(--t-ui) var(--ease),background-color var(--t-ui);}
.js .film__speel:hover{scale:1.03;background:var(--wit);}
.film__rond{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--blauw);color:var(--wit);transition:translate var(--t-ui) var(--ease);}
.js .film__speel:hover .film__rond{translate:2px 0;}
.film__speel .icoon{width:18px;height:18px;margin-left:2px;stroke:none;}
/* laden na de klik: de glimlach tekent zich in een lus (zelfde lader als de verzendknop); uniek.js zet het element erin */
.film__laden{position:absolute;left:50%;top:50%;z-index:2;display:grid;place-items:center;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;pointer-events:none;
  background:var(--wit);box-shadow:var(--schaduw-zweef),0 0 0 8px rgba(255,255,255,.16);}
.film__laden::after{content:"";width:40px;height:31px;margin-top:6px;background:var(--blauw);mask:var(--glimlach) center/contain no-repeat;animation:laden 1.1s var(--ease) infinite;}
.film__onder{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:28px;text-align:center;font-size:15px;color:var(--tekst-zacht);text-wrap:balance;}
@media (max-width:640px){.js .film__speel{left:50%;bottom:-22px;translate:-50% 0;height:44px;gap:8px;padding:0 16px 0 6px;font-size:14.5px;}.film__onder{display:block;margin-top:40px;}.film__rond{width:32px;height:32px;}.film__speel .icoon{width:14px;height:14px;}.film__video{border-radius:18px;}}

/* ---- logotegel (3D, uit de film; staat stil, één keer op de site: het portret op home) ---- */
.logotegel{position:absolute;z-index:3;width:var(--maat,96px);aspect-ratio:1;pointer-events:none; transform:perspective(900px) rotateY(-16deg) rotateX(8deg) rotate(-5deg);filter:drop-shadow(0 28px 36px rgba(0,0,0,.45));}
.logotegel::before{content:"";position:absolute;inset:8.33%;z-index:-1;border-radius:20%;background:linear-gradient(140deg,var(--blauw),var(--navy) 70%);transform:translate(4%,5%);}
.logotegel svg{position:relative;display:block;width:100%;height:100%;}
.logotegel--portret{--maat:96px;bottom:-28px;right:-28px;}
@media (max-width:640px){.logotegel--portret{--maat:72px;right:-10px;bottom:-22px;}}

/* ---- stappen: rail met glimlach-knopen ---- */
.stappen{position:relative;list-style:none;margin:0;padding:0;display:grid;gap:24px;}
.stappen::before{content:"";position:absolute;left:20px;top:28px;bottom:28px;border-left:2px dashed rgba(126,166,247,.35);transform-origin:top;transition:transform .9s var(--ease);}
.js .stappen.reveal:not(.in)::before{transform:scaleY(0);}
.stap{position:relative;margin-left:60px;padding:28px;border-radius:24px;background:var(--navy);border:1px solid rgba(126,166,247,.18);color:var(--tekst-licht);}
.stap h3{color:var(--wit);}
.stap p{margin-top:8px;color:var(--tekst-licht-zacht);max-width:52ch;}
.stap .chip{margin-bottom:16px;}
.stap::after{content:"";position:absolute;left:-60px;top:24px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(126,166,247,.45);background:var(--glimlach-lucht) center/20px 15px no-repeat,var(--navy);transition:scale .3s var(--ease),opacity .3s;}
.stap--uit{border-color:var(--blauw);box-shadow:none;}
:is(.sectie--licht,.sectie--wit,.kaart) .stappen::before{border-left-color:rgba(37,99,235,.3);}
:is(.sectie--licht,.sectie--wit,.kaart) .stap{background:var(--wit);border-color:var(--grijs);box-shadow:var(--schaduw-kaart);color:var(--tekst);}
:is(.sectie--licht,.sectie--wit,.kaart) .stap h3{color:var(--navy);}
:is(.sectie--licht,.sectie--wit,.kaart) .stap p{color:var(--tekst-zacht);}
:is(.sectie--licht,.sectie--wit,.kaart) .stap::after{border-color:rgba(37,99,235,.35);background:var(--glimlach-blauw) center/20px 15px no-repeat,var(--wit);}
:is(.sectie--licht,.sectie--wit) .stap--uit{border-color:var(--blauw);box-shadow:var(--schaduw-kaart);}
.js .stappen.reveal .stap{opacity:0;translate:0 14px;transition:opacity .5s var(--ease),translate .5s var(--ease);}
.js .stappen.reveal .stap::after{scale:.6;opacity:0;}
.js .stappen.reveal.in .stap{opacity:1;translate:0 0;}
.js .stappen.reveal.in .stap::after{scale:1;opacity:1;}
.stappen .stap:nth-child(2),.stappen .stap:nth-child(2)::after{transition-delay:120ms;}
.stappen .stap:nth-child(3),.stappen .stap:nth-child(3)::after{transition-delay:240ms;}
.stappen .stap:nth-child(4),.stappen .stap:nth-child(4)::after{transition-delay:360ms;}
.stappen--compact{gap:14px;}
.stappen--compact::before{left:15px;top:22px;bottom:22px;}
.stappen--compact .stap{margin-left:46px;padding:18px 20px;border-radius:16px;}
.stappen--compact .stap::after{left:-46px;top:16px;width:32px;height:32px;background-size:16px 12px,auto;}
.stappen--compact .stap h3{font-size:17px;}
.stappen--compact .stap p{font-size:15px;margin-top:4px;}
@media (max-width:640px){.stap{margin-left:52px;padding:24px;}.stap::after{left:-52px;width:36px;height:36px;}.stappen::before{left:18px;}}

/* ---- prijstabel (.tabelwrap is een alias van .tabelkaart) ---- */
:is(.tabelkaart,.tabelwrap){padding:8px 28px;border-radius:var(--r-l);background:var(--wit);box-shadow:var(--schaduw-kaart);color:var(--tekst);--focus:var(--blauw);overflow-x:auto;}
:is(.tabelkaart,.tabelwrap) table{width:100%;border-collapse:collapse;font-size:16px;}
:is(.tabelkaart,.tabelwrap) th{padding:18px 14px;text-align:left;font:700 12px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);border-bottom:2px solid var(--navy);}
:is(.tabelkaart,.tabelwrap) td{padding:18px 14px;vertical-align:top;border-bottom:1px solid var(--grijs);color:var(--tekst-zacht);}
:is(.tabelkaart,.tabelwrap) td strong{color:var(--navy);}
:is(.tabelkaart,.tabelwrap) tr:last-child td{border-bottom:0;}
:is(.tabelkaart,.tabelwrap) tbody tr{transition:background-color var(--t-snel);}
:is(.tabelkaart,.tabelwrap) tbody tr:hover{background:var(--wolk);}
:is(.tabelkaart,.tabelwrap) td.num{text-align:right;white-space:nowrap;font:800 20px/1.2 var(--f-display);font-variant-numeric:tabular-nums;color:var(--navy);}
:is(.tabelkaart,.tabelwrap) th.num{text-align:right;}
tr.is-start{background:rgba(37,99,235,.05);box-shadow:inset 3px 0 0 var(--blauw);}
tr.is-start .pil{margin-left:6px;background:var(--blauw);color:var(--wit);}
@media (max-width:640px){
  :is(.tabelkaart,.tabelwrap){padding:0;background:none;box-shadow:none;overflow:visible;}
  :is(.tabelkaart,.tabelwrap) thead{display:none;}
  :is(.tabelkaart,.tabelwrap) :is(table,tbody,tr,td){display:block;width:100%;}
  :is(.tabelkaart,.tabelwrap) tr{margin-bottom:14px;padding:18px 20px;border-radius:var(--r-m);background:var(--wit);box-shadow:var(--schaduw-kaart);}
  :is(.tabelkaart,.tabelwrap) td{padding:6px 0;border:0;}
  :is(.tabelkaart,.tabelwrap) td[data-label]::before{content:attr(data-label);display:block;font:700 11px/1.4 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);}
  :is(.tabelkaart,.tabelwrap) td.num{text-align:left;font-size:22px;}
}

/* ---- FAQ ---- */
.faq{display:grid;gap:12px;--focus:var(--blauw);}
.faq details{border-radius:var(--r-m);background:var(--wit);border:1px solid var(--grijs);color:var(--tekst);transition:border-color var(--t-ui),box-shadow var(--t-ui);}
.faq details[open]{border-color:var(--blauw);box-shadow:var(--schaduw-kaart);}
.faq summary{position:relative;list-style:none;cursor:pointer;padding:22px 68px 22px 24px;font:600 17.5px/1.4 var(--f-tekst);color:var(--navy);border-radius:var(--r-m);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:32px;height:32px;margin-top:-16px;border-radius:50%; background:linear-gradient(var(--blauw) 0 0) center/12px 2px no-repeat,linear-gradient(var(--blauw) 0 0) center/2px 12px no-repeat,var(--wolk);transition:background-color var(--t-ui);}
.faq details[open] summary::after{background:var(--glimlach-wit) center/16px 12px no-repeat,var(--blauw);}
.faq summary:hover{color:var(--blauw);}
.faq details p{padding:0 24px 22px;color:var(--tekst-zacht);max-width:64ch;}

/* ---- CTA-band (elke pagina behalve contact) ---- */
.cta{position:relative;background:var(--korrel),var(--nacht);padding:clamp(12px,2vw,24px) clamp(12px,2vw,24px) 0;}
.cta__paneel{position:relative;isolation:isolate;overflow:clip;max-width:1400px;margin:auto;border-radius:var(--r-xl);padding:clamp(48px,7vw,96px) clamp(24px,6vw,80px);color:var(--wit); display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center; background:var(--korrel-sterk),radial-gradient(50% 70% at 75% 15%,rgba(186,209,252,.35),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(7,20,42,.25)),var(--blauw);}
.cta h2{color:var(--wit);max-width:14ch;}
.cta .vink{margin-top:28px;}
.cta__kaart{position:relative;padding:32px;border-radius:24px;background:var(--wit);color:var(--tekst);box-shadow:0 30px 80px rgba(7,20,42,.35);--focus:var(--blauw);}
.cta__acties{display:flex;flex-direction:column;gap:10px;margin-top:28px;}
.cta__acties .knop{width:100%;}
/* smal: één kolom, en de ijsgloed schuift naar de hoek zodat hij niet achter de witte tekst valt (contrast ≥ 4,5:1) */
@media (max-width:900px){.cta__paneel{grid-template-columns:minmax(0,1fr);background:var(--korrel-sterk),radial-gradient(45% 30% at 100% 0%,rgba(186,209,252,.3),transparent 70%),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(7,20,42,.25)),var(--blauw);}}
@media (max-width:640px){.cta__paneel{border-radius:24px;}.cta__kaart{padding:24px;}}

/* ---- footer ---- */
.voet{position:relative;overflow:clip;background:var(--korrel),var(--nacht);color:var(--tekst-licht-zacht);font-size:15px;padding:clamp(64px,8vw,120px) 0 32px;}
.voet__reus{position:relative;margin-bottom:clamp(32px,5vw,64px);}
.voet__woord{font:900 clamp(64px,17vw,220px)/.84 var(--f-display);letter-spacing:-.02em;text-transform:uppercase;display:flex;flex-direction:column;align-items:flex-start;}
.voet__woord span{display:block;background:linear-gradient(180deg,rgba(186,209,252,.16),rgba(126,166,247,.03));-webkit-background-clip:text;background-clip:text;color:transparent;}
.voet__woord span + span{font-size:.3635em;letter-spacing:-.005em;margin-top:.12em;}
.voet__in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;}
.voet__kolom > a:not(.merk),.voet__kolom > span{display:block;padding-block:4.5px;color:var(--tekst-licht-zacht);text-decoration:none;transition:color var(--t-snel);}
.voet__kolom a:hover{color:var(--wit);}
.voet__kolom .merk{display:inline-flex;padding:0;margin-bottom:16px;}
.voet__kolom p{max-width:32ch;}
.voet__kop{margin-bottom:10px!important;font:700 12px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--lucht);}
.voet__fijn{margin-top:40px;padding-top:20px;border-top:1px solid var(--lijn-donker);font-size:13.5px;color:var(--tekst-licht-zacht);text-align:center;}
@media (max-width:820px){.voet__in{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.voet__in{grid-template-columns:1fr 1fr;gap:28px 20px;}.voet__kolom:first-child,.voet__kolom:last-child{grid-column:1/-1;}}

/* ---- merk (woordmerk) ---- */
.merk{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--wit);flex:none;}
.merk__logo{width:34px;height:34px;flex:none;filter:drop-shadow(0 0 .5px rgba(186,209,252,.9)) drop-shadow(0 6px 10px rgba(0,0,0,.35));}
.merk b{font:600 17px/1 var(--f-tekst);letter-spacing:-.4px;color:var(--wit);}
.merk b span{color:var(--ijs);}
@media (max-width:640px){.merk b{font-size:16px;}}

/* ---- navigatie: donkere glazen pil ---- */
.navtop{position:absolute;top:0;left:0;width:100%;height:1px;}
.nav{position:fixed;top:12px;left:0;right:0;z-index:60;padding-inline:var(--gutter);pointer-events:none;}
.nav__in{position:relative;pointer-events:auto;max-width:var(--max);margin:auto;height:60px;display:flex;align-items:center;gap:6px;padding:0 8px 0 16px;border-radius:var(--r-pil); background:rgba(7,20,42,.35);border:1px solid rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%);transition:background-color var(--t-ui),border-color var(--t-ui),box-shadow var(--t-ui);}
.nav.los .nav__in{background:rgba(7,20,42,.8);border-color:rgba(255,255,255,.14);box-shadow:var(--glas-rand),0 20px 50px -24px rgba(0,0,0,.7);}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.nav__in{background:rgba(11,28,61,.96);}.glas,.kaart--glas{background:rgba(37,99,235,.55);}}
.nav .merk{margin-right:auto;}
.nav__links{display:flex;align-items:center;gap:2px;}
.nav__links a{position:relative;padding:10px 13px;border-radius:var(--r-pil);font-size:15px;font-weight:500;color:var(--tekst-licht);text-decoration:none;white-space:nowrap;transition:color var(--t-snel),background-color var(--t-snel);}
.nav__links a:hover{color:var(--wit);background:rgba(255,255,255,.06);}
.nav__links a[aria-current="page"]{color:var(--wit);}
.nav__links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-3px;width:16px;height:12px;translate:-50% 0;background:var(--lucht);mask:var(--glimlach) center/contain no-repeat;}
.nav__links a.nav__cta{display:inline-flex;align-items:center;min-height:44px;margin-left:10px;padding:0 20px;color:var(--wit);background:var(--blauw);font-weight:600;}
.nav__links a.nav__cta:hover{background:var(--blauw);}
/* op /contact is de knop zelf de huidige pagina: blauw blijven, met een zachte ring */
.nav__links a.nav__cta[aria-current="page"]{background:var(--blauw);box-shadow:0 0 0 3px rgba(186,209,252,.35);}
.nav__links a.nav__cta[aria-current="page"]::after{content:none;}
.nav__bel,.nav__knop{display:none;}
@media (max-width:1080px){
  .nav__in{padding-right:8px;}
  .nav__bel,.nav__knop{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;}
  .nav__bel{background:var(--blauw);color:var(--wit);}
  .nav__bel .icoon{width:18px;height:18px;}
  .nav__knop{position:relative;padding:0;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);}
  .nav__knop span{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--wit);transition:translate var(--t-ui) var(--ease),rotate var(--t-ui) var(--ease);}
  .nav__knop span:first-child{translate:0 -4px;}
  .nav__knop span:last-child{translate:0 4px;}
  .nav__knop[aria-expanded="true"] span:first-child{translate:0 0;rotate:45deg;}
  .nav__knop[aria-expanded="true"] span:last-child{translate:0 0;rotate:-45deg;}
  .nav__links{position:absolute;top:calc(100% + 8px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:10px;border-radius:24px;background:var(--nacht);border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
    max-height:0;opacity:0;visibility:hidden;overflow:hidden;transition:max-height .35s var(--ease),opacity var(--t-ui),visibility 0s linear .35s;}
  .nav__knop[aria-expanded="true"] ~ .nav__links{max-height:560px;opacity:1;visibility:visible;transition:max-height .35s var(--ease),opacity var(--t-ui);}
  .nav__links a{display:flex;align-items:center;min-height:52px;padding:0 16px;border-radius:14px;font-size:16px;}
  .nav__links a[aria-current="page"]{background:rgba(255,255,255,.06);}
  .nav__links a[aria-current="page"]::after{left:auto;right:16px;bottom:auto;top:50%;translate:0 -50%;}
  .nav__links a.nav__cta{justify-content:center;margin:8px 0 0;min-height:52px;}
}
@media (max-width:380px){.merk b{font-size:15px;}.merk__logo{width:30px;height:30px;}}

/* ---- persoon, portret, vinklijst, cases ---- */
.persoon{display:flex;align-items:center;gap:14px;}
.persoon__foto{position:relative;flex:none;}
.persoon__foto img{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.7);}
.persoon p{display:flex;flex-direction:column;line-height:1.35;}
.persoon b{font-size:16px;font-weight:600;color:var(--wit);}
.persoon span{font-size:14.5px;opacity:.82;}
:is(.persoon--donker,.sectie--licht .persoon,.sectie--wit .persoon,.kaart .persoon){color:var(--tekst);}
:is(.persoon--donker,.sectie--licht .persoon,.sectie--wit .persoon,.kaart .persoon) b{color:var(--navy);}
:is(.persoon--donker,.sectie--licht .persoon,.sectie--wit .persoon,.kaart .persoon) span{opacity:1;color:var(--tekst-zacht);}
:is(.persoon--donker,.sectie--licht .persoon,.sectie--wit .persoon,.kaart .persoon) .persoon__foto img{border-color:var(--grijs);}
.cta__kaart .persoon{align-items:flex-start;}
.cta__kaart .persoon__foto img{width:72px;height:72px;}

.overmij{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center;}
.overmij h2{margin-bottom:20px;}
.overmij .vink{margin-top:28px;}
.overmij .knop{margin-top:32px;}
.portret{position:relative;border-radius:var(--r-l);aspect-ratio:4/5;background:var(--blauw);box-shadow:0 34px 70px -34px rgba(11,28,61,.45);}
.portret img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-l);}
@media (max-width:860px){.overmij{grid-template-columns:minmax(0,1fr);}.overmij .portret{max-width:420px;}}

.vink{list-style:none;margin:0;padding:0;display:grid;gap:12px;}
.vink li{position:relative;padding-left:30px;}
.vink li::before{content:"";position:absolute;left:0;top:.42em;width:18px;height:14px;background:var(--blauw);mask:var(--glimlach) center/contain no-repeat;}
.vink--wit li::before{background:var(--wit);}
.vink--licht li::before,.sectie--nacht .vink li::before{background:var(--lucht);}
@media (min-width:560px){.vink--2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;}}

.cases{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;}
.case{margin:0;}
.case__venster{border-radius:16px;overflow:hidden;background:var(--navy);box-shadow:var(--schaduw-zweef);}
.case__balk{position:relative;height:28px;border-bottom:1px solid rgba(255,255,255,.18);background:radial-gradient(circle,rgba(255,255,255,.7) 2.5px,transparent 3px) 12px 50%/10px 10px no-repeat,radial-gradient(circle,rgba(255,255,255,.7) 2.5px,transparent 3px) 24px 50%/10px 10px no-repeat,radial-gradient(circle,rgba(255,255,255,.7) 2.5px,transparent 3px) 36px 50%/10px 10px no-repeat;}
.case__venster img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;}
.case figcaption{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
.case figcaption b{font:700 16px/1.3 var(--f-display);}
.case figcaption span{font-size:14px;opacity:.8;}

/* ---- formulier ---- */
.formulier{padding:clamp(24px,4vw,40px);border-radius:var(--r-l);background:var(--wit);box-shadow:var(--schaduw-kaart);color:var(--tekst);--focus:var(--blauw);}
.formulier__kop{font:800 26px/1.15 var(--f-display);text-transform:none;letter-spacing:-.01em;color:var(--navy);max-width:none;margin-bottom:8px;}
.formulier form{display:grid;gap:18px;margin-top:22px;}
.veldrij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
@media (max-width:640px){.veldrij{grid-template-columns:minmax(0,1fr);}}
.veld{display:flex;flex-direction:column;gap:6px;}
.veld label{font-size:14.5px;font-weight:600;color:var(--navy);}
.veld :is(input,select,textarea){width:100%;min-height:52px;padding:14px 16px;border-radius:12px;border:1.5px solid rgba(11,28,61,.5);background:var(--wit);color:var(--navy);font:400 16px/1.4 var(--f-tekst);transition:border-color var(--t-snel),box-shadow var(--t-snel);}
.veld textarea{min-height:130px;resize:vertical;}
.veld select{appearance:none;-webkit-appearance:none;padding-right:44px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B1C3D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 16px center/16px no-repeat,var(--wit);}
/* de rand is het enige dat een wit veld op een witte kaart aanwijst: navy op 50% (3,3:1), hover donkerder, focus blauw met ring */
.veld :is(input,select,textarea):hover{border-color:rgba(11,28,61,.7);}
.veld :is(input,select,textarea):focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 1px var(--blauw),0 0 0 5px rgba(37,99,235,.18);}
.veld [aria-invalid="true"]{border-color:var(--fout);}
.fout{min-height:0;font-size:13.5px;color:var(--fout);}
.fout:empty{display:none;}
.formulier__voet{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:6px;}
.formulier__voet p{font-size:14px;color:var(--tekst-zacht);flex:1 1 220px;}
.melding{border-radius:14px;font-size:15.5px;color:var(--navy);}
/* leeg blijft de statusregio in de toegankelijkheidsboom (anders leest een schermlezer de melding niet voor),
   maar zonder ruimte in te nemen: niet display:none, wel visueel weg en buiten de grid/flex-flow */
.melding:empty{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}
.melding--goed,.melding--fout{display:flex;align-items:center;gap:14px;padding:16px 18px;margin-top:16px;}
.melding--goed{background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.25);}
.melding--goed::before{content:"";flex:none;width:28px;height:21px;background:var(--blauw);mask:var(--glimlach) center/contain no-repeat;animation:melden .7s var(--ease) both;}
.melding--fout{background:rgba(179,38,30,.06);border:1px solid var(--fout);}
@keyframes melden{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}

/* ---- contactblok ---- */
.contactblok{display:grid;gap:10px;margin-top:20px;}
.contactblok a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);color:var(--wit);text-decoration:none;transition:background-color var(--t-snel),border-color var(--t-snel);}
.contactblok a:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);}
.contactblok a > svg:not(.icoon){width:20px;height:20px;flex:none;color:var(--ijs);}
.contactblok span,.contactblok p{display:flex;flex-direction:column;line-height:1.3;font-weight:600;}
.contactblok small{font-size:13.5px;font-weight:400;color:var(--tekst-licht-zacht);}

/* ---- onthulling bij scrollen ---- */
.js .reveal{opacity:0;translate:0 18px;transition:opacity var(--t-reveal) var(--ease),translate var(--t-reveal) var(--ease);}
.js .reveal.in{opacity:1;translate:0 0;}
.rooster > .reveal:nth-child(2),.cases > .reveal:nth-child(2){transition-delay:80ms;}
.rooster > .reveal:nth-child(3),.cases > .reveal:nth-child(3){transition-delay:160ms;}
.rooster > .reveal:nth-child(4),.cases > .reveal:nth-child(4){transition-delay:240ms;}

/* ---- rustige beweging ---- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important;}
  .kinetisch .w,.kinetisch .w > span,.glimlach-streep *{animation:none!important;clip-path:none;}
  .glimlach-streep path{stroke-dashoffset:0;}
  .glimlach-streep circle{scale:1;}
  .js .reveal{opacity:1;translate:none;}
  .zoekpil__tekst{animation:none!important;}
  .hero::before{transform:none;}
  @view-transition{navigation:none;}
}

/* ---------- 'alles op maat': brede afsluiter onder de voorbeeldkaarten ---------- */
.opmaat{margin-top:22px;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px 28px;padding:30px 34px;border-radius:var(--r-l);background:var(--navy);color:var(--wit);box-shadow:0 30px 60px -34px rgba(7,20,42,.55);}
.opmaat h3{color:var(--wit);margin:0 0 6px;}
.opmaat p{color:rgba(255,255,255,.8);max-width:60ch;margin:0;}
@media (max-width:760px){.opmaat{grid-template-columns:minmax(0,1fr);padding:26px 22px;}.opmaat .knop{justify-self:start;}}