/* =====================================================================
   WAINUT site-v3, gedeelde vormtaal (v2: licht als basis, blauw als sterke kleur)
   Maatstaf: signatuur-v2/3-combinatie (homepage, goedgekeurd 6 nov 2026)
   Kleur: besluit Luciano 6 nov 2026. De wereld onder de hero is licht; WAINUT Blue
   is het vlak waar een pagina mee opent, waar het signatuurmoment op staat en waar
   ze mee sluit. De donkere eerste versie staat in _v1-donker/.
   Lees VORMTAAL.md voordat je hier iets aan toevoegt.
   ===================================================================== */

/* ---------- 1. tokens ---------- */
:root{
  /* merk: de twee kleuren uit het logo */
  --blue:#2B40F5;          /* WAINUT Blue: het vlak, de knop op licht, accenten */
  --blue-deep:#1F31D9;     /* rand van het vlak, footer, menupaneel */
  --blue-hot:#3B50FF;      /* lichtkern in het vlak */
  --lift:#6E7BFF;          /* gloed van een verlichte draad */
  --white:#FFFFFF;         /* het wit uit het logo: kaarten, invoer, tekst op blauw */

  /* de lichte wereld: wit met een zweem van het blauw, nooit wit-wit als vlak */
  --paper:#F6F7FD;         /* basis onder de hero */
  --mist:#EBEEFD;          /* tweede vlak, voor een band die zich moet onderscheiden */
  --haze:#D5DBFA;          /* rand van invoer en chips op licht */

  /* tekst op licht */
  --text:#0F1233;          /* diep blauw-zwart, 17:1 op paper */
  --text-2:#4A5179;        /* rustig blauwgrijs, 7:1 op paper, 6,4:1 op mist */

  /* signalen */
  --green:#00D4AA;         /* "werkt": alleen vinkjes en verbonden-status */
  --err:#B42318;           /* foutmelding op licht */

  /* nacht: hooguit een blok per pagina, lichter en blauwer dan de live site */
  --night:#141B6E;
  --night-2:#1C2585;

  /* maat */
  --pad:clamp(16px,4.4vw,64px);   /* zijmarge, 16px op 390 */
  --wrap:1160px;                  /* leesbreedte van een sectie */
  --wrap-wide:1312px;             /* beeldbreedte (heroes, galerijen) */
  --r:24px;                       /* de enige paneelradius; al het andere is rond (999px) */
  --r-sheet:clamp(28px,3.4vw,52px);  /* alleen het lichte blad, gelijk aan de homepage (49px op 1440) */
  --gap:clamp(24px,3vw,44px);
  --sec:clamp(72px,10vw,136px);   /* ruimte boven een sectie */

  /* type */
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-display:clamp(50px,min(8.85vw,19vh),140px);
  --fs-display-2:clamp(32px,3.9vw,54px); /* gelijk aan de sectiekop */
  --fs-h2:clamp(32px,3.9vw,54px);
  /* de typeschaal: elke rol heeft op elke pagina dezelfde maat */
  --fs-close:clamp(42px,6.41vw,97px);   /* slotkop onderaan */
  --fs-word:clamp(50px,7vw,106px);      /* een woord als kop: Trainen, Adoptie, Walnoot */
  --fs-stat:clamp(48px,6.09vw,92px);    /* groot cijfer: 1000+, 50+ */
  --fs-sub:clamp(28px,2.65vw,40px);     /* subkop */
  --fs-h4:clamp(22px,1.86vw,28px);      /* kaarttitel */
  --fs-h5:clamp(19px,1.46vw,22px);      /* kleine titel */
  --fs-h3:clamp(22px,1.86vw,28px);   /* standaard h3 = kaarttitel, gelijk aan --fs-h4 */
  --fs-lead:clamp(19px,1.6vw,23px);
  --fs-body:17.5px;
  --fs-small:15px;

  /* diepte op licht: studiolicht van boven, schaduw met een blauwe ondertoon */
  --shadow-lift:0 34px 70px -30px rgba(20,30,130,.34), 0 3px 10px rgba(20,30,130,.06);
  --shadow-sheet:0 -28px 70px -24px rgba(8,14,96,.42);

  /* beweging */
  --ease:cubic-bezier(.22,1,.36,1);
  --rise-d:.7s;
  --rise-y:24px;
  --stagger:60ms;

  /* contexttokens: standaard de lichte wereld. Blauwe vlakken zetten ze om (zie 2b). */
  --fg:var(--text);
  --fg-2:var(--text-2);
  --accent:var(--blue);
  --line:rgba(43,64,245,.14);
  --line-2:var(--haze);
  --card:var(--white);
  --focus:var(--blue);
  --btn-bg:var(--blue);
  --btn-fg:#fff;
  --btn-ring:rgba(43,64,245,.18);
}

/* ---------- 2. basis ---------- */
*{box-sizing:border-box}
html{background:var(--blue-deep);-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--blue-deep);color:var(--fg);font-family:var(--font);font-stretch:100%;font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
a{color:inherit}
img,svg,canvas{display:block}
img{max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
p{margin:0}
h1,h2,h3,h4{margin:0;font-weight:800;font-stretch:100%}
ul,ol{margin:0;padding:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.nb{white-space:nowrap}
.skip{position:absolute;left:var(--pad);top:-80px;z-index:90;background:#fff;color:var(--blue);padding:12px 18px;border-radius:999px;font-weight:700;text-decoration:none;box-shadow:var(--shadow-lift)}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
::selection{background:var(--blue);color:#fff}

/* ---------- 2b. blauwe vlakken: dezelfde componenten, omgekeerde tokens ---------- */
.plane,.band,.close,.foot,.night,.on-blue{
  --fg:#fff;
  --fg-2:#E1E6FF;          /* 5,3:1 op #2B40F5 */
  --accent:#fff;
  --line:rgba(255,255,255,.26);
  --line-2:rgba(255,255,255,.42);
  --card:rgba(255,255,255,.1);
  --focus:#fff;
  --btn-bg:#fff;
  --btn-fg:var(--blue);
  --btn-ring:rgba(255,255,255,.2);
  color:var(--fg);
}
.night{--fg-2:#CDD3FA;--card:rgba(255,255,255,.06)}

/* ---------- 3. header: wit op blauw in de hero, blauw op licht daarna ---------- */
/* Opbouw en maat identiek aan de homepage. Vast bovenin; wainut.js zet:
   .is-solid  (na een stukje scrollen: een glazen balk, iets compacter via transform)
   .is-light  (de balk ligt boven de lichte wereld: blauw logo, inkt-tekst, blauwe knop)
   .is-hidden (naar beneden scrollen: de balk schuift weg; omhoog scrollen haalt hem terug) */
.site-head{position:fixed;left:0;right:0;top:0;z-index:60;--h-fg:#fff;--focus:#fff;--btn-bg:#fff;--btn-fg:var(--blue);--btn-ring:rgba(255,255,255,.2);
  transition:transform .45s var(--ease)}
.site-head::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .3s ease;
  background:rgba(36,54,232,.82);-webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);box-shadow:0 1px 0 rgba(255,255,255,.18)}
.site-head.is-solid{transform:none}   /* v3: de balk is al 68px, net als de homepage; hij krimpt niet meer */
.site-head.is-solid::before{opacity:1}
.site-head.is-hidden{transform:translate3d(0,-110%,0)}
.site-head.is-light{--h-fg:var(--text);--focus:var(--blue);--btn-bg:var(--blue);--btn-fg:#fff;--btn-ring:rgba(43,64,245,.18)}
.site-head.is-light::before{background:rgba(250,251,255,.86);box-shadow:0 1px 0 rgba(43,64,245,.12), 0 10px 30px -18px rgba(20,30,130,.28)}
.nav{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:12px var(--pad);color:var(--h-fg)}   /* 12 + 44 + 12 = 68px, gelijk aan .sh-nav op de homepage */
.nav .logo{display:inline-flex;align-items:center;position:relative;min-height:44px}   /* tikdoel 44px */
.nav .logo img{height:28px;width:auto;transition:opacity .25s ease}
.nav .logo .lb{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.site-head.is-light .nav .logo .lw{opacity:0}
.site-head.is-light .nav .logo .lb{opacity:1}
.nav ul{display:flex;gap:clamp(18px,2.4vw,38px);list-style:none;margin:0;padding:0}
.nav ul a{text-decoration:none;font-weight:500;font-size:16px;letter-spacing:-.005em;padding:6px 0;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .3s}
.nav ul a:hover,.nav ul a[aria-current="page"]{background-size:100% 1.5px}
.menu-btn{display:none;background:none;border:1.5px solid currentColor;color:var(--h-fg);font:600 15px/1 var(--font);border-radius:999px;padding:0 18px;min-height:44px;cursor:pointer}
.menu-panel{display:none}
@media (max-width:1079px){
  .nav ul,.nav > .btn{display:none}
  .menu-btn{display:block}
  .menu-panel{position:absolute;right:var(--pad);top:68px;width:min(360px,calc(100vw - 24px));z-index:70;border-radius:var(--r);padding:10px 18px 18px;
    background:var(--blue-deep);color:#fff;box-shadow:0 20px 50px rgba(9,16,95,.4);--focus:#fff;--btn-bg:#fff;--btn-fg:var(--blue)}
  .site-head.is-light .menu-panel{background:#fff;color:var(--text);box-shadow:0 30px 60px -20px rgba(20,30,130,.35), 0 0 0 1px rgba(43,64,245,.1);--focus:var(--blue);--btn-bg:var(--blue);--btn-fg:#fff}
  .menu-panel.open{display:block}
  .menu-panel a{display:block;text-decoration:none;font-weight:600;font-size:19px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.22)}
  .site-head.is-light .menu-panel a{border-bottom-color:rgba(43,64,245,.12)}
  .menu-panel a[aria-current="page"]{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
  .menu-panel .btn{display:flex;margin-top:16px;padding:15px 20px;border-bottom:0;font-size:16px;text-decoration:none}
}
/* een heromaat op elke pagina; op een telefoon dezelfde maat voor iedere hero */
@media (max-width:759px){:root{--fs-display:clamp(44px,14vw,60px);--fs-close:42px;--fs-word:50px;--fs-stat:clamp(44px,14vw,56px);--fs-h2:32px;--fs-display-2:32px;--fs-sub:28px;--fs-h3:22px;--fs-h4:22px;--fs-h5:19px}}
@media (max-width:759px){
  .nav .logo img{height:22px}
  .site-head.is-solid.is-hidden,.site-head.is-hidden{transform:translate3d(0,-110%,0)}
  .menu-panel{top:70px;left:12px;right:12px;width:auto}
}

/* ---------- 4. de knop (er is er maar een) en de tekstlink ---------- */
/* Op blauw: wit met blauwe tekst (zoals de homepage). Op licht: blauw met witte tekst.
   Dat is dezelfde knop: de context draait de twee merkkleuren om. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--btn-bg);color:var(--btn-fg);text-decoration:none;font-weight:700;border:0;border-radius:999px;white-space:nowrap;cursor:pointer;
  padding:17px 28px;font-size:16.5px;min-height:52px;transition:transform .2s ease-out, box-shadow .2s ease-out}
.btn:hover{transform:translateY(-2px);box-shadow:0 0 0 6px var(--btn-ring)}
.btn:active{transform:none}
.btn{line-height:1.1}                     /* een maat: 52px hoog, zoals .close .btn op de homepage */
.nav .btn{padding:12px 20px;font-size:15px;min-height:44px;line-height:1.3}   /* 44px, zoals de homepage */
.nav .btn:hover{transform:none}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.go{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:16px;color:var(--accent);text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px;text-decoration-color:color-mix(in srgb, currentColor 50%, transparent);transition:text-decoration-color .2s ease-out}
.go:hover{text-decoration-color:currentColor}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* ---------- 5. het blauwe vlak ---------- */
.plane,.band,.close{position:relative;isolation:isolate;
  background:
    radial-gradient(70% 60% at 50% 60%, var(--blue-hot) 0%, rgba(43,64,245,0) 64%),
    radial-gradient(150% 120% at 50% 45%, var(--blue) 42%, #1C2CCB 100%)}
.plane{overflow:hidden}
.band,.close{overflow:hidden}
@supports (overflow:clip){.band{overflow:clip}}   /* clip: sticky scènes in een band blijven werken */
.plane > *,.band > *{position:relative;z-index:3}
.plane > .grain,.plane > .seam,.plane > .plane-fx,.band > .grain,.band > .plane-fx{position:absolute;z-index:1}
.grain{inset:0;pointer-events:none;opacity:.06;background-size:160px 160px}
/* naad: het vlak wordt onderaan iets dieper, zodat het lichte blad er zichtbaar overheen schuift */
.seam{left:0;right:0;bottom:0;height:22%;min-height:110px;pointer-events:none;background:linear-gradient(to bottom, rgba(20,30,170,0) 0%, rgba(20,30,170,.34) 100%)}
.plane-fx{inset:0;pointer-events:none}

/* hero van een subpagina: het vlak met de grote kop. Plakt bovenaan; het lichte blad schuift eroverheen. */
.hero{min-height:min(100svh,1040px);display:grid;align-content:center;padding:clamp(120px,14vh,170px) var(--pad) calc(clamp(96px,13vh,150px) + var(--r))}
.hero.short{min-height:0;padding-bottom:calc(clamp(80px,10vw,128px) + var(--r))}
.page > .hero:first-child{position:sticky;top:var(--stick,0px);z-index:0}
.page > .hero.no-stick{position:relative}
.hero-in{width:100%;max-width:calc(var(--wrap) - 2 * var(--pad));margin:0 auto;will-change:transform}
.hero-in.wide{max-width:var(--wrap-wide)}

/* een blauwe band midden op de pagina: voor het signatuurmoment (een per pagina) */
.band{padding:var(--sec) var(--pad) calc(var(--sec) + var(--r))}
.band.flush{padding:0}

/* ---------- 6. het lichte blad ---------- */
/* De lichte wereld ligt als een blad op het blauw: het schuift over de hero heen (ronde bovenhoeken,
   zachte schaduw op het blauw) en laat aan het eind het blauw weer zien. Tussen twee bladen mag een .band.
   .bloom is de oude naam en werkt hetzelfde. */
.page{position:relative;outline:none;overflow-x:clip}
.sheet,.bloom{position:relative;z-index:2;background:var(--paper);color:var(--fg);border-radius:var(--r-sheet);box-shadow:var(--shadow-sheet);padding-bottom:var(--sec)}
@supports (overflow:clip){.sheet,.bloom{overflow:clip}}
.hero + .sheet,.hero + .bloom,.plane + .sheet,.plane + .bloom,.band + .sheet,.band + .bloom{margin-top:calc(-1 * var(--r))}
.sheet + .band,.bloom + .band,.sheet + .close,.bloom + .close{margin-top:calc(-1 * var(--r));padding-top:calc(var(--sec) + var(--r))}
.sheet > .sec:last-child,.bloom > .sec:last-child{padding-bottom:0}
/* licht wolkje van het blauw achter de eerste sectie, zodat glas iets heeft om door te laten */
.glow{position:relative}
.glow::before{content:"";position:absolute;left:50%;top:-10%;width:1600px;height:900px;margin-left:-800px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side, rgba(110,123,255,.16), rgba(110,123,255,.05) 55%, rgba(110,123,255,0))}
.glow > *{position:relative;z-index:1}
/* tweede lichte vlak, full-bleed binnen het blad */
.mist{background:var(--mist);--card:var(--white)}
.mist > .sec:last-child{padding-bottom:var(--sec)}
.sheet:has(> .mist:last-child),.bloom:has(> .mist:last-child){padding-bottom:0}
.sec{position:relative;max-width:var(--wrap);margin:0 auto;padding:var(--sec) var(--pad) 0}
.sec.wide{max-width:var(--wrap-wide)}
.sec.tight{padding-top:clamp(48px,6vw,80px)}

/* ---------- 7. typografie ---------- */
.display{font-size:var(--fs-display);line-height:.92;font-weight:800;letter-spacing:-.052em;text-wrap:balance}
.display-2{font-size:var(--fs-display-2);line-height:.95;font-weight:800;letter-spacing:-.045em;text-wrap:balance}
.h1-split{display:grid;gap:clamp(14px,1.6vw,24px)}
.h1-split .big{display:block;font-size:var(--fs-display);line-height:.92;letter-spacing:-.052em}
.h1-split .rest{display:block;font-size:clamp(24px,2.6vw,40px);line-height:1.14;font-weight:700;letter-spacing:-.022em;max-width:28ch;text-wrap:balance}
h2,.h2{font-size:var(--fs-h2);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:16ch;text-wrap:balance}
h3,.h3{font-size:var(--fs-h3);line-height:1.1;font-weight:800;letter-spacing:-.025em;text-wrap:balance}
.h4{font-size:19px;line-height:1.25;font-weight:700;letter-spacing:-.012em}
/* een hele kop in WAINUT Blue op licht: een keer per pagina, nooit een los woord */
.h-blue{color:var(--blue)}
/* sectiekop op de schaal van de homepage (.giant, .team h2): een groot idee per scherm.
   Kleurregel: sectiekoppen in --fg (inkt op licht, wit op blauw); hooguit een hele kop per pagina in blauw (.h-blue). */
.h2-display{font-size:var(--fs-h2);line-height:.94;letter-spacing:-.05em;max-width:14ch}
.lead{margin-top:16px;font-size:var(--fs-lead);line-height:1.4;font-weight:500;color:var(--fg-2);max-width:40ch;text-wrap:balance}
.plane .lead,.band .lead,.close .lead{color:var(--fg)}
.body{font-size:var(--fs-body);line-height:1.55;color:var(--fg-2);max-width:60ch;text-wrap:pretty}
.small{font-size:var(--fs-small);line-height:1.5;color:var(--fg-2)}
/* lange, SEO-dragende tekst (Walnoot, NL-GOV-MCP, Playbooks, AI-menukaart) */
.prose{max-width:64ch;font-size:18px;line-height:1.62;color:var(--fg-2)}
.prose > * + *{margin-top:1em}
.prose h3{color:var(--fg);margin-top:1.6em;font-size:clamp(21px,1.8vw,26px)}
.prose strong{color:var(--fg);font-weight:700}
.prose a{color:var(--accent);text-underline-offset:4px;text-decoration-thickness:1.5px}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:.9em;background:var(--mist);padding:1px 7px;border-radius:999px;color:var(--fg)}
.on-blue .prose code,.night .prose code,.band .prose code{background:rgba(255,255,255,.12)}
.center{text-align:center}
.center h2,.center .lead,.center .body{margin-left:auto;margin-right:auto}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}

/* ---------- 8. het vinkje: "dit werkt" ---------- */
.tick{flex:none;width:18px;height:18px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(0,212,170,.16);position:relative;display:inline-block}
.tick::after{content:"";position:absolute;left:5px;top:5.2px;width:7px;height:3.8px;border-left:2px solid var(--text);border-bottom:2px solid var(--text);transform:rotate(-45deg)}
.plane .tick,.band .tick,.night .tick,.on-blue .tick{box-shadow:0 0 0 5px rgba(0,212,170,.14), 0 0 16px rgba(0,212,170,.5)}
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:14px;align-items:start;font-size:var(--fs-body);line-height:1.45;color:var(--fg-2)}
.ticks li .tick{margin-top:3px}
/* een vinkje alleen waar het iets betekent (afgevinkt, vastgelegd, geldt nu); andere opsommingen krijgen een dunne lijn, labels een kale chip */
.ticks.bare li{grid-template-columns:1fr;padding-top:12px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.chipcap.bare{padding-left:16px}
.caption{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--fg);white-space:nowrap}
.caption .tick{width:16px;height:16px}
.caption .tick::after{left:4.5px;top:4.6px;width:6px;height:3.4px;border-width:0 0 1.8px 1.8px}

/* ---------- 9. glas en panelen ---------- */
/* glas op licht: helder, met een blauwe tint, fijne lichtrand en zachte schaduw. Zet het op een .glow
   of over een draad, dan heeft het iets om door te laten. */
.glass,.glass-ink{-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(232,236,255,.56));
  border:1px solid rgba(43,64,245,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.35), var(--shadow-lift)}
/* glas op blauw (labels, kleine kaarten), zoals in de hero van de homepage */
:is(.plane,.band,.close,.on-blue) :is(.glass,.glass-ink){background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.38);box-shadow:0 18px 44px rgba(10,20,102,.24), inset 0 1px 0 rgba(255,255,255,.25)}
.night :is(.glass,.glass-ink){background:rgba(110,123,255,.1);border-color:rgba(205,211,250,.2);box-shadow:0 24px 60px rgba(3,6,40,.45), inset 0 1px 0 rgba(255,255,255,.1)}
/* vast paneel: wit op het blad, zonder schaduw; een hairline geeft de rand */
.panel{background:var(--card);border:1px solid var(--line)}
.lift{box-shadow:var(--shadow-lift)}
.glass,.glass-ink,.panel,.night{border-radius:var(--r)}
.night{background:radial-gradient(120% 90% at 50% 0%, #232FA6 0%, var(--night-2) 38%, var(--night) 100%);color:var(--fg);position:relative;overflow:hidden;isolation:isolate}
.pad{padding:clamp(22px,2.4vw,32px)}
.pad-l{padding:clamp(28px,4vw,56px)}
.pill{border-radius:999px}
.grid-2,.grid-3,.grid-4{display:grid;gap:var(--gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:grid;gap:10px;align-content:start}
.stack > p{color:var(--fg-2);font-size:var(--fs-body);line-height:1.5;max-width:44ch}
.stack .go{justify-self:start;margin-top:auto}
.card{display:flex;flex-direction:column;height:100%;overflow:hidden}
.card figure{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--mist)}
.card figure img{width:100%;height:100%;object-fit:cover}
.card .txt{display:grid;gap:8px;padding:24px 26px 22px;align-content:start;flex:1}
.card .txt p{color:var(--fg-2);max-width:42ch}
.card .txt .go{margin-top:auto;justify-self:start}

/* ---------- 10. vrijstaande objecten met echte schaduw ---------- */
/* <figure class="obj" style="--w:260px"><img class="sh" src="...-sh.webp" alt=""><img class="im" src="....webp" alt="..."></figure>
   -sh.webp is de zachte schaduw die bij het object hoort (marineblauw; op licht leest het als studiolicht).
   Geen -sh-bestand? class="obj drop". Glazen versie (-glas.webp): alleen op blauw of in .night. */
.obj{position:relative;margin:0;width:var(--w,240px);max-width:100%;container-type:inline-size;pointer-events:none}
.obj .im{position:relative;z-index:1;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.obj .sh{position:absolute;z-index:0;left:-10.9cqw;top:-10.9cqw;width:142.7cqw;height:calc(100% + 49cqw);max-width:none;opacity:.4;object-fit:fill}
:is(.plane,.band,.close,.on-blue) .obj .sh{opacity:.55}
.night .obj .sh{opacity:.9;filter:brightness(.2)}
.obj.drop .im{filter:drop-shadow(0 30px 28px rgba(20,30,120,.2)) drop-shadow(0 6px 8px rgba(20,30,120,.12))}
:is(.plane,.band,.close,.on-blue) .obj.drop .im{filter:drop-shadow(0 28px 36px rgba(10,20,102,.45)) drop-shadow(0 6px 10px rgba(10,20,102,.3))}
.night .obj.drop .im{filter:drop-shadow(0 30px 40px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(43,64,245,.3))}
:is(.plane,.band,.close,.night,.on-blue) .obj.is-glass .im{filter:drop-shadow(0 0 24px rgba(110,123,255,.45))}

/* ---------- 11. de draad ---------- */
/* blauw op licht, wit op blauw. Statisch: .thread-svg. Levend: canvas .threads met WAINUT.threads(). */
.thread-svg{position:absolute;overflow:visible;pointer-events:none}
.thread-svg path{fill:none;stroke:var(--accent);stroke-width:1.3;stroke-linecap:round;opacity:.85}
.thread-svg path.halo{stroke-width:5;opacity:.12}
.threads{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.bead{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px color-mix(in srgb, var(--accent) 60%, transparent)}

/* ---------- 12. bewijs: cijfers en namen ---------- */
.stats{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.stats li{display:grid;gap:6px;align-content:start}
.stats b{display:block;font-size:var(--fs-stat);line-height:.92;font-weight:800;letter-spacing:-.055em;font-variant-numeric:tabular-nums;color:var(--accent)}
.stats span{font-size:clamp(17px,1.4vw,20px);font-weight:600;color:var(--fg-2)}
.clients{margin-top:clamp(48px,6vw,84px);padding-top:28px;border-top:1px solid var(--line)}
.clients h3,.clients .h4{margin:0 0 clamp(20px,2.4vw,30px);font-size:var(--fs-sub);line-height:1.1;font-weight:800;color:var(--fg);letter-spacing:-.03em;max-width:24ch}
.names{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px}
.names li{font-size:clamp(18px,1.55vw,22px);line-height:1.3;font-weight:700;letter-spacing:-.015em;white-space:nowrap;color:var(--fg)}

/* ---------- 13. chips (rollen, onderwerpen, filters) ---------- */
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.chips li,.chip{display:inline-flex;align-items:center;min-height:40px;padding:8px 16px;border-radius:999px;border:1px solid var(--line-2);font-size:15.5px;font-weight:600;color:var(--fg);background:var(--card)}
button.chip{min-height:44px;cursor:pointer;transition:background .2s ease-out,border-color .2s ease-out,color .2s ease-out}
button.chip:hover{border-color:var(--accent)}
button.chip[aria-pressed="true"]{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)}

/* ---------- 14. een echte volgorde (alleen als de inhoud een reeks is) ---------- */
.steps{list-style:none;counter-reset:s;display:grid;gap:var(--gap);grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.steps > li{counter-increment:s;display:grid;gap:10px;align-content:start}
.steps > li::before{content:counter(s);font-size:clamp(32px,3.85vw,56px);line-height:1;font-weight:800;letter-spacing:-.05em;color:var(--accent)}
.steps > li[data-k]::before{content:attr(data-k)}
.steps p{color:var(--fg-2);max-width:32ch}

/* ---------- 15. citaat ---------- */
.quote{margin:0;display:grid;gap:18px}
.quote blockquote{margin:0;font-size:clamp(24px,2.5vw,36px);line-height:1.22;font-weight:700;letter-spacing:-.02em;max-width:30ch;text-wrap:pretty;color:var(--fg)}
.quote figcaption{font-size:16px;font-weight:600;color:var(--fg-2)}
.quote figcaption b{color:var(--fg);font-weight:700}

/* ---------- 16. tabel (stapelt op mobiel) ---------- */
.table{width:100%;border-collapse:collapse;font-size:16.5px}
.table th{text-align:left;font-size:15px;font-weight:600;color:var(--fg-2);padding:0 18px 14px 0;border-bottom:1px solid var(--line)}
.table td{padding:18px 18px 18px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--fg-2)}
.table td:first-child{color:var(--fg);font-weight:700}
@media (max-width:759px){
  .table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .table tr{display:grid;gap:4px;padding:16px 0;border-bottom:1px solid var(--line)}
  .table td{display:block;padding:0;border:0}
  .table td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--fg-2)}
}

/* ---------- 17. veelgestelde vragen (antwoorden staan altijd in de HTML) ---------- */
.faq{list-style:none;margin-top:clamp(32px,4vw,48px);border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;font-size:clamp(18px,1.5vw,21px);line-height:1.3;font-weight:700;letter-spacing:-.012em;min-height:44px;color:var(--fg)}
.faq summary::-webkit-details-marker{display:none}
/* plusje zoals de homepage (.pm): een gevulde lichtblauwe cirkel met een blauw kruis; bij hover blauw met wit */
.faq{--pm-bg:var(--mist);--pm-x:var(--blue)}
:is(.plane,.band,.close,.night,.on-blue) .faq{--pm-bg:rgba(255,255,255,.16);--pm-x:#fff}
.faq summary::after{content:"";flex:none;width:34px;height:34px;border-radius:50%;
  background:linear-gradient(var(--pm-x),var(--pm-x)) center/13px 2px no-repeat, linear-gradient(var(--pm-x),var(--pm-x)) center/2px 13px no-repeat, var(--pm-bg);
  transition:transform .35s var(--ease), background-color .2s ease-out}
.faq summary:hover{--pm-bg:var(--blue);--pm-x:#fff}
:is(.plane,.band,.close,.night,.on-blue) .faq summary:hover{--pm-bg:#fff;--pm-x:var(--blue)}
.faq details[open] summary::after{transform:rotate(45deg)}
/* opbouw zoals de homepage: links de kop en hoe je ons bereikt, rechts de vragen.
   Geef de details een gedeelde name="..." zodat er een tegelijk openklapt. */
.faq-grid{display:grid;grid-template-columns:5fr 7fr;gap:40px clamp(40px,6vw,96px);align-items:start}
.faq-side{position:sticky;top:110px}
.faq-side h2{max-width:11ch}
.faq-side p{margin-top:26px;font-size:17px;line-height:1.55;color:var(--fg-2);max-width:34ch}
.faq-side a{color:var(--accent);font-weight:700;text-underline-offset:4px}
.faq-grid .faq{margin-top:0;max-width:none}
@media (max-width:899px){.faq-grid{grid-template-columns:1fr}.faq-side{position:static}.faq-grid .faq{margin-top:8px}}
.faq .a{padding:0 48px 24px 0;color:var(--fg-2);font-size:var(--fs-body);line-height:1.6;max-width:66ch}
.faq .a > * + *{margin-top:.8em}

/* ---------- 18. formulier ---------- */
.form{display:grid;gap:18px}
.field{display:grid;gap:8px}
.field label,.field .label{font-size:15px;font-weight:600;color:var(--fg)}
.field .hint{font-size:14px;color:var(--fg-2)}
.input,.select,.textarea{width:100%;min-height:52px;padding:14px 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--white);color:var(--text);font-size:16.5px;transition:border-color .2s ease-out, box-shadow .2s ease-out}
.textarea{border-radius:var(--r);min-height:132px;resize:vertical;line-height:1.5}
.select{appearance:none;-webkit-appearance:none;padding-right:48px;background-image:linear-gradient(45deg,transparent 50%,var(--blue) 50%),linear-gradient(135deg,var(--blue) 50%,transparent 50%);background-position:calc(100% - 26px) 50%,calc(100% - 20px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.input::placeholder,.textarea::placeholder{color:#656C93}
.input:hover,.select:hover,.textarea:hover{border-color:#AEB8F2}
.input:focus-visible,.select:focus-visible,.textarea:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-color:var(--blue)}
.field.err .input,.field.err .textarea{border-color:var(--err)}
.field .msg{font-size:14px;font-weight:600;color:var(--err)}
/* invoer op blauw of nacht */
:is(.plane,.band,.close,.night,.on-blue) :is(.input,.select,.textarea){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.34);color:#fff}
:is(.plane,.band,.close,.night,.on-blue) .select{background-image:linear-gradient(45deg,transparent 50%,#fff 50%),linear-gradient(135deg,#fff 50%,transparent 50%)}
:is(.plane,.band,.close,.night,.on-blue) .select option{background:var(--blue-deep);color:#fff}
:is(.plane,.band,.close,.night,.on-blue) :is(.input,.textarea)::placeholder{color:#C9D0FF}
:is(.plane,.band,.close,.night,.on-blue) :is(.input,.select,.textarea):focus-visible{outline-color:#fff;border-color:#fff}
:is(.plane,.band,.close,.night,.on-blue) .field .msg{color:#FFD2CC}

/* ---------- 19. slot: het blauwe vlak komt terug, heel ---------- */
.close{text-align:center;padding:clamp(88px,11vw,150px) var(--pad);
  background:
    linear-gradient(to bottom, rgba(31,49,217,0) 62%, var(--blue-deep) 100%),
    radial-gradient(70% 70% at 50% 62%, var(--blue-hot) 0%, rgba(43,64,245,0) 64%),
    radial-gradient(150% 120% at 50% 45%, var(--blue) 42%, #1C2CCB 100%)}
.close h2{margin:0 auto;font-size:var(--fs-close);line-height:.96;font-weight:800;letter-spacing:-.05em;max-width:14ch;text-wrap:balance}
.close p{margin:22px auto 0;font-size:var(--fs-lead);line-height:1.4;font-weight:500;max-width:32ch;text-wrap:balance}
.close .btn{margin-top:34px}
.close .or{margin-top:18px;font-size:16px;font-weight:500;max-width:none}
.close .or a[href^="tel:"]{white-space:nowrap}
.close .or a{font-weight:700;text-underline-offset:4px}

/* ---------- 20. footer: op het diepe blauw, het slot loopt erin door ---------- */
/* v3: zelfde opbouw en maat als de homepage-footer (.foot-in, vijf kolommen). Voor SEO dragen de
   pijlerlinks hun zoekwoord (Trainen AI Training enz.) en staan adres (Maps), SNA-certificering,
   sociale kanalen en The Human Loop erin, zoals in de footer van wainut.ai. */
.foot{background:var(--blue-deep);color:#fff;--fg-2:#D9DEFF}
.foot-in{max-width:var(--wrap);margin:0 auto;padding:clamp(40px,5vw,64px) var(--pad) 36px;display:grid;grid-template-columns:184px repeat(5,auto);justify-content:space-between;gap:32px 24px;font-size:15.5px;line-height:1.5}
.foot .logo{display:inline-flex;align-items:center;min-height:44px}
.foot .logo img{height:26px;width:auto}
.foot h3{margin:0 0 4px;font-size:15.5px;font-weight:800;letter-spacing:-.005em;color:#fff}
.foot ul{list-style:none;margin:0;padding:0}
.foot a{color:var(--fg-2);text-decoration:none}
.foot li a,.foot address a{display:inline-flex;align-items:center;min-height:36px}
.foot .kw{margin-left:.4em;font-weight:400;color:var(--fg-2);white-space:nowrap}
.foot li a .lbl{color:#fff;font-weight:600}
.foot a:hover,.foot a[aria-current="page"]{color:#fff;text-decoration:underline;text-underline-offset:4px}
.foot address{font-style:normal;color:var(--fg-2)}
.foot address a{line-height:1.4}
.foot .social{display:flex;flex-wrap:wrap;margin:14px 0 0 -12px}
.foot .social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;border-radius:999px}
.foot .social a:hover{background:rgba(255,255,255,.12)}
.foot .social svg{width:18px;height:18px;fill:currentColor}
.foot .loop{margin:14px 0 0;font-size:14.5px;line-height:1.45;max-width:32ch}.foot .loop p{margin:0}.foot .loop-k{color:#fff;font-weight:700}.foot .loop-t{color:var(--fg-2)}.foot .loop-a{margin-top:2px}.foot .loop-a a{color:#fff;font-weight:700}
.foot .loop a{display:inline-flex;align-items:center;min-height:36px;line-height:1.35}
.foot .base{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.24);color:var(--fg-2);font-size:14.5px}
.foot .base ul{display:flex;flex-wrap:wrap;gap:0 22px}
/* zes kolommen (AI-enabled werken en Verdieping apart, zoals in het menu): elke kolom neemt haar eigen breedte,
   de ruimte verdeelt zich ertussen. Vanaf 960 px breken de links niet af; tot 1140 px staat het merk erboven. */
@media (min-width:960px){.foot li a,.foot address{white-space:nowrap}}
@media (min-width:960px) and (max-width:1139px){.foot-in{grid-template-columns:repeat(5,auto)}.foot-in > :first-child{grid-column:1 / -1}}

/* ---------- 21. rise: 24px omhoog en fade, 0,7 s, een keer ---------- */
.js .rise{opacity:0;transform:translate3d(0,var(--rise-y),0);transition:opacity var(--rise-d) var(--ease) calc(var(--i,0) * var(--stagger)), transform var(--rise-d) var(--ease) calc(var(--i,0) * var(--stagger))}
.js .rise.in{opacity:1;transform:none}

/* ---------- 22. responsief ---------- */
@media (max-width:959px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-in{grid-template-columns:1fr 1fr 1fr;column-gap:32px}
  .foot-in > :first-child{grid-column:1 / -1}
}
@media (max-width:759px){
  :root{--sec:80px}
  .grid-2,.grid-3,.grid-4,.steps{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:26px}
  .stats li{grid-template-columns:auto 1fr;align-items:baseline;gap:14px}
  .stats b{font-size:var(--fs-stat)}
  .stats span{font-size:17px}
  .names{gap:8px 20px}
  .names li{font-size:17px}
  .card .txt{padding:20px 20px 18px}
  .close h2{max-width:9ch;min-width:min-content}   /* een woord langer dan 9ch: het vak groeit mee, zodat de kop in het midden blijft (min() met min-content is ongeldige CSS en werd genegeerd; final check 11 nov) */
  .close .btn,.hero .btn{width:100%}
  .actions{gap:10px 24px}
  .faq .a{padding-right:0}
  .foot-in{grid-template-columns:1fr 1fr;gap:26px 20px}
  .foot li a,.foot address a,.foot .base ul a,.foot .loop a{min-height:44px}
  .foot .base{flex-direction:column;align-items:flex-start}
  .hero{min-height:0;padding-top:118px;padding-bottom:calc(96px + var(--r))}
  .h1-split .rest{font-size:23px}
}

/* ---------- 23. minder beweging (prefers-reduced-motion of ?motion=reduce) ---------- */
/* De hero plakt nog steeds (dat is geen animatie: het blad schuift onder je eigen scroll), maar
   de kop in de hero beweegt niet mee en de header schuift niet weg. */
@media (prefers-reduced-motion: reduce){
  .js .rise{transform:none;transition:opacity .6s ease}
  *,*::before,*::after{scroll-behavior:auto!important}
  .btn:hover{transform:none}
  .site-head{transition:none}
}
.rm-page .rise{transform:none!important;transition:opacity .6s ease!important}
.rm-page .btn:hover{transform:none}
.rm-page .site-head{transition:none}

/* klantenlijst: de slotregel 'en nog zo'n 30 andere', zoals op de homepage */
ul > li.more.more{font-style:italic;font-weight:600;color:var(--fg-2)}
:is(.on-blue,.band,.plane,.night) ul > li.more.more{color:#fff}