/* Stijl van kennismaatschap.nl. De vormgeving zelf (kleuren, letters, maten) staat als variabelen in
   tokens.css; hier staat hoe de pagina is opgebouwd. Het beeldmerk is de rode draad: een raster van
   blokjes met hoeken van 6 procent, en één blauw blokje dat 11,8 graden gekanteld op zijn plek valt. */

/* ---------- basis ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* De hoogte van de vaste kop. Een sprong naar een sectie (een link in het menu) houdt daar rekening mee. */
:root { --kop-hoogte: 76px; }
@media (max-width: 899px) { :root { --kop-hoogte: 66px; } }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--kop-hoogte);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 var(--t-basis)/1.62 var(--f-tekst);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  overflow-x: clip;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-kop);
  font-optical-sizing: auto;
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h3 { overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--km-groen-zacht); color: var(--km-inkt); }

.binnen { width: min(100% - 2 * var(--rand), var(--breed)); margin-inline: auto; }

.overslaan {
  position: fixed;
  z-index: 100;
  left: 12px;
  top: -80px;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--km-inkt);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s var(--ease);
}
.overslaan:focus { top: 12px; }

/* Het kleine gekantelde blokje voor elk label, zoals het blauwe blokje in het logo. */
.label-blok {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  background: var(--km-blauw);
  transform: rotate(var(--kanteling));
}

.label,
.sectie-label {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font: 650 0.8125rem/1.2 var(--f-tekst);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-2);
}

/* ---------- knoppen ---------- */

.knop {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  background: var(--km-blauw);
  color: #fff;
  font: 650 1rem/1.1 var(--f-tekst);
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 12px 26px -16px rgba(14, 108, 167, 0.9);
  transition: background 0.2s, transform 0.25s var(--ease), box-shadow 0.25s;
}
.knop::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.25s var(--ease);
}
.knop:hover { background: var(--km-blauw-diep); transform: translateY(-1px); box-shadow: 0 16px 30px -16px rgba(14, 108, 167, 0.95); text-decoration: none; }
.knop:hover::after { transform: translateX(3px); }
.knop:active { transform: translateY(0); }

.knop-licht { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--lijn-2); }
.knop-licht:hover { background: var(--vlak); box-shadow: inset 0 0 0 1.5px var(--fg); }
.knop-wit { background: #fff; color: var(--km-blauw); box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.6); }
.knop-wit:hover { background: var(--km-groen-licht); color: var(--km-blauw-diep); }
.knop-klein { min-height: 42px; padding: 0 18px; font-size: 0.9375rem; box-shadow: none; }
.knop-klein::after { width: 12px; height: 12px; }
.knop-klein-tekst { font-weight: 500; font-size: 0.875rem; opacity: 0.78; }
.knop-klein-tekst::before { content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px 0; border-radius: 1px; background: currentColor; opacity: 0.6; vertical-align: middle; }

/* ---------- kop en menu ---------- */

.kop {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  transition: background-color 0.3s, box-shadow 0.3s;
}
.kop.vast {
  background: var(--kop-bg);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
  box-shadow: 0 1px 0 var(--lijn);
}
.kop-binnen {
  width: min(100% - 2 * var(--rand), var(--breed));
  height: var(--kop-hoogte);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 24px;
}
.kop-merk { position: relative; z-index: 2; display: block; border-radius: 6px; }
.kop-merk svg { width: clamp(150px, 13vw, 190px); height: auto; aspect-ratio: 603.8 / 119.4; }

.menu { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.menu ul { list-style: none; display: flex; align-items: center; gap: 2px; }
.menu a:not(.knop) {
  display: block;
  padding: 10px 14px;
  border-radius: 999px;
  color: var(--fg);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.menu a:not(.knop):hover { background: var(--bg-2); }
.menu a[aria-current="true"] { color: var(--blauw-tekst); }
.menu-contact { margin-left: 10px; }

/* De keuze voor de weergave: licht (standaard), donker of automatisch. Gewone radioknoppen, zodat de
   pijltjestoetsen werken; thema.js zet de keuze en onthoudt hem. Zonder script verschijnt hij niet. */
.thema { display: inline-flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--lijn); }
html:not([data-theme]) .thema { display: none; }
.thema-keuze { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px; color: var(--fg-3); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.thema-keuze input { position: absolute; inset: 0; margin: 0; border-radius: inherit; opacity: 0; cursor: pointer; }
.thema-keuze svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.thema-keuze:hover { color: var(--fg); }
.thema-keuze:has(input:checked) { background: var(--vlak); color: var(--fg); box-shadow: 0 1px 3px rgba(14, 29, 41, 0.14), inset 0 0 0 1px var(--lijn); }
.thema-keuze:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }

.menuknop {
  position: relative;
  z-index: 2;
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--vlak);
  box-shadow: inset 0 0 0 1px var(--lijn-2);
  color: var(--fg);
  font: 650 0.9375rem/1 var(--f-tekst);
  cursor: pointer;
}
.menuknop-streepjes { position: relative; width: 18px; height: 12px; }
.menuknop-streepjes i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.3s var(--ease); }
.menuknop-streepjes i:first-child { top: 1px; }
.menuknop-streepjes i:last-child { bottom: 1px; }
.menuknop[aria-expanded="true"] .menuknop-streepjes i:first-child { transform: translateY(4px) rotate(45deg); }
.menuknop[aria-expanded="true"] .menuknop-streepjes i:last-child { transform: translateY(-4px) rotate(-45deg); }


/* Boven de werkwijze, contact en de voet krijgt de kop de kleur van wat eronder ligt. */
body:not(.menu-open) .kop[data-op] { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); }
body:not(.menu-open) .kop[data-op="nacht"] { --kop-bg: rgba(8, 44, 69, 0.84); --logo-blauw: #3D97D6; --logo-groen: #9DCB5E; }
body:not(.menu-open) .kop[data-op="blauw"] { --kop-bg: rgba(14, 108, 167, 0.9); --logo-blauw: #FFFFFF; --logo-groen: #B7DB86; }
body:not(.menu-open) .kop[data-op] .menu a:not(.knop) { color: #EAF1F6; }
body:not(.menu-open) .kop[data-op] .menu a:not(.knop):hover { background: rgba(255, 255, 255, 0.1); }
body:not(.menu-open) .kop[data-op] .menu a[aria-current="true"] { color: #B7DB86; }
body:not(.menu-open) .kop[data-op="blauw"] .menu-contact .knop { background: #fff; color: var(--km-blauw); }
body:not(.menu-open) .kop[data-op] .thema { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); }
body:not(.menu-open) .kop[data-op] .thema-keuze { color: rgba(234, 241, 246, 0.72); }
body:not(.menu-open) .kop[data-op] .thema-keuze:hover { color: #fff; }
body:not(.menu-open) .kop[data-op] .thema-keuze:has(input:checked) { background: rgba(255, 255, 255, 0.22); color: #fff; box-shadow: none; }
body:not(.menu-open) .kop[data-op] .menuknop { background: rgba(255, 255, 255, 0.12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28); }

@media (max-width: 899px) {
  .menuknop { display: inline-flex; }
  .menu {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    margin: 0;
    padding: calc(96px + env(safe-area-inset-top, 0px)) var(--rand) calc(32px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s linear 0.35s;
  }
  .menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s var(--ease), transform 0.35s var(--ease), visibility 0s; }
  .menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .menu a:not(.knop) {
    padding: 16px 2px;
    border-radius: 0;
    border-bottom: 1px solid var(--lijn);
    font: 700 clamp(1.75rem, 1.4rem + 2vw, 2.25rem)/1.15 var(--f-kop);
    letter-spacing: -0.02em;
  }
  .menu a:not(.knop):hover { background: none; color: var(--blauw-tekst); }
  .menu-contact { margin: 32px 0 0; }
  .menu-contact .knop { width: 100%; justify-content: center; min-height: 56px; font-size: 1.0625rem; }
  .menu .thema { display: inline-flex; margin-top: 28px; }
  html:not([data-theme]) .menu .thema { display: none; }
  .menu .thema-keuze { width: 44px; height: 44px; }
  .menu .thema-keuze svg { width: 18px; height: 18px; }
  body.menu-open { overflow: hidden; }
}

/* ---------- held ---------- */

.held {
  position: relative;
  padding: calc(76px + clamp(40px, 8vh, 104px)) 0 var(--sectie);
  overflow-x: clip;
  isolation: isolate;
}
.held::before,
.held::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}
.held::before {
  top: -18vw;
  right: -14vw;
  width: 64vw;
  height: 64vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--km-blauw) 13%, transparent), transparent);
}
.held::after {
  bottom: -26vw;
  left: -18vw;
  width: 56vw;
  height: 56vw;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--km-groen) 16%, transparent), transparent);
}

.held-binnen {
  width: min(100% - 2 * var(--rand), var(--breed));
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 0.68fr);
  grid-template-areas:
    "tekst beeld"
    "verhaal beeld"
    "principes principes";
  column-gap: clamp(32px, 5vw, 88px);
}
.held-tekst { grid-area: tekst; }
.held-verhaal { grid-area: verhaal; padding-top: clamp(96px, 16vh, 200px); }
.principes { grid-area: principes; }

/* De kop schaalt mee met de breedte van zijn kolom: met de optische grootte vast op 96 is
   "(onderwijs)zaken." 7,217 keer de lettergrootte breed. Met 13,4 procent van de kolom past het
   langste woord tussen de haakjes dus altijd op één regel, en verspringt er niets als het wisselt. */
.held-tekst { container-type: inline-size; }
.held-kop {
  margin-top: 26px;
  font-size: min(var(--t-held), 13.4cqi);
  font-variation-settings: 'opsz' 96;
  font-weight: 720;
  line-height: 0.94;
  letter-spacing: -0.032em;
}
.held-kop .regel { display: block; }
.haakje { font-weight: 280; color: var(--groen-kop); letter-spacing: -0.004em; }
.wissel {
  display: inline-grid;
  justify-items: start;
  color: var(--blauw-tekst);
  transition: width 0.55s var(--ease);
}
.wissel .woord {
  grid-area: 1 / 1;
  white-space: nowrap;
  padding-right: 0.02em;
  transition: transform 0.7s var(--ease), opacity 0.45s var(--ease);
}
.js .wissel .woord:not(.is-nu) { opacity: 0; transform: translateY(0.42em); pointer-events: none; }
.js .wissel .woord.is-weg { transform: translateY(-0.42em); }
html:not(.js) .wissel .woord:not(.is-nu) { display: none; }

.held-lead { margin-top: 30px; max-width: 33em; font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 38px; }

.feiten { list-style: none; display: grid; grid-template-columns: repeat(3, max-content); gap: 16px clamp(24px, 3.4vw, 48px); margin-top: 52px; font-size: 0.875rem; line-height: 1.4; color: var(--fg-2); }
.feiten li { position: relative; display: grid; padding-left: 18px; }
.feiten li::before { content: ''; position: absolute; left: 0; top: 0.42em; width: 8px; height: 8px; border-radius: 1.5px; background: var(--logo-groen); }
.feiten strong { color: var(--fg); font-weight: 700; font-size: 0.9375rem; }

/* Het beeldmerk, opgebouwd uit losse blokjes. Maten in de verhouding van het logo: een blokje van
   100 met 20 tussenruimte, vier rijen (de bovenste voor het blauwe blokje). */
@property --zweef { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --wiebel { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* De baan van het beeldmerk loopt langs de held en het verhaal; binnen die baan blijft het staan.
   Zo schuift het nooit over de uitgangspunten eronder. */
.held-baan { grid-area: beeld; display: flex; flex-direction: column; align-items: flex-end; }
.held-beeld {
  --land: 0;
  position: sticky;
  top: clamp(104px, calc(50vh - 250px), 190px);
  width: min(100%, 420px);
  margin-top: clamp(8px, 3vh, 40px);
  container-type: inline-size;
}
.raster {
  --cel: 29.4118cqi;
  --tussen: 5.8824cqi;
  display: grid;
  grid-template-columns: repeat(3, var(--cel));
  grid-template-rows: repeat(4, var(--cel));
  gap: var(--tussen);
}
.raster .blok {
  display: block;
  grid-row: var(--r);
  grid-column: var(--k);
  border-radius: calc(var(--cel) * 0.06);
  background: var(--logo-groen);
}
.blauw-val { grid-row: 1; grid-column: 2; }
.blauw-val, .blauw-land { display: block; width: 100%; height: 100%; }
.blauw-land { transform: translateY(calc(var(--land) * (var(--cel) + var(--tussen)))); }
.raster .blok.blauw {
  width: 100%;
  height: 100%;
  background: var(--logo-blauw);
  box-shadow: 0 calc(var(--cel) * 0.16 * (1 - var(--land))) calc(var(--cel) * 0.34) calc(var(--cel) * -0.18) rgba(14, 60, 100, 0.45);
  transform: translateY(calc(var(--zweef) * (1 - var(--land)))) rotate(calc((var(--kanteling) + var(--wiebel)) * (1 - var(--land))));
}
.held-beeld.geland .blok.blauw { animation: klik 520ms var(--ease-veer); }

@keyframes zweven {
  0%, 100% { --zweef: calc(var(--b-zweef-hoogte) * -1); --wiebel: -1.4deg; }
  50% { --zweef: var(--b-zweef-hoogte); --wiebel: 1.4deg; }
}
@keyframes opbouw {
  from { opacity: 0; transform: translateY(26%) scale(0.9); }
  to { opacity: 1; transform: none; }
}
@keyframes vallen {
  from { opacity: 0; transform: translateY(-150%) rotate(-26deg); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes klik {
  0% { scale: 1; }
  40% { scale: 1.06; }
  100% { scale: 1; }
}

.js .raster .blok:not(.blauw) { animation: opbouw var(--b-opbouw-duur) var(--ease) both; animation-delay: calc((4 - var(--r)) * 110ms + var(--k) * 45ms); }
.js .blauw-val { animation: vallen var(--b-val-duur) var(--b-val-karakter) 560ms both; }
.js .raster .blok.blauw { animation: zweven var(--b-zweef-duur) var(--ease-in-uit) infinite; }
.js .held-beeld.geland .blok.blauw { animation: klik 520ms var(--ease-veer); }

/* ---------- secties ---------- */

.aanbod,
.werkwijze,
.ervaring,
.maten,
.boekje,
.contact { position: relative; padding: var(--sectie) 0; }

/* Na een sprong naar een sectie staat het label op een vaste afstand onder de kop. Zonder dit bleef de
   hele ruimte boven de sectie staan, met een strook van de vorige sectie onder de kop. Het stuk dat nu
   onder de kop verdwijnt, heeft de kleur van de sectie zelf. */
main > section[id]:not(.held) { scroll-margin-top: calc(clamp(28px, 3.4vw, 48px) - var(--sectie)); }

.sectie-kop h2 { margin-top: 20px; max-width: 15em; font-size: var(--t-h2); letter-spacing: -0.026em; }
.sectie-lead { margin-top: 22px; max-width: 36em; font-size: var(--t-lead); line-height: 1.55; color: var(--fg-2); }

/* Verschijnen bij het scrollen. Zonder script staat alles er gewoon. */
.js [data-in] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.8s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--vertraging, 0ms);
}
.js [data-in].in { opacity: 1; transform: none; }

/* ---------- verhaal ---------- */

.verhaal-tekst {
  margin-top: 28px;
  max-width: 21em;
  font: 520 clamp(1.5rem, 1.1rem + 1.7vw, 2.5rem)/1.24 var(--f-kop);
  letter-spacing: -0.018em;
}
.nadruk-groen { color: var(--groen-tekst); }
.nadruk-blauw { color: var(--blauw-tekst); }

.principes { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); margin-top: clamp(56px, 7vw, 96px); }
.principe { position: relative; padding-top: 26px; border-top: 1.5px solid var(--fg); }
.principe::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 0;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--logo-blauw);
  transform: rotate(var(--kanteling));
}
.principe h3 { font-size: var(--t-h3); }
.principe p { margin-top: 12px; color: var(--fg-2); }

/* ---------- aanbod ---------- */

.aanbod { background: var(--bg-2); }
.kaarten { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(44px, 5vw, 64px); }
.kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  border-radius: var(--r-groot);
  background: var(--vlak);
  box-shadow: var(--schaduw-1);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.kaart:hover { transform: translateY(-3px); box-shadow: var(--schaduw-2); }
.kaart h3 { margin-top: 26px; font-size: var(--t-h3); }
.kaart p { margin-top: 10px; font-size: 1rem; color: var(--fg-2); }

.kaart-vraag { background: var(--km-blauw); color: #fff; box-shadow: 0 22px 50px -26px rgba(14, 108, 167, 0.9); }
.kaart-vraag p { color: rgba(255, 255, 255, 0.92); }
.kaart-link {
  margin-top: auto;
  padding-top: 22px;
  align-self: flex-start;
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.kaart-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.kaart-link:focus-visible { outline: none; }
.kaart-vraag:has(.kaart-link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 4px; }

/* Het icoon van elke dienst: een raster van negen blokjes, met op een eigen plek het blauwe. Over
   alle negen kaarten valt het blauwe blokje precies één keer op elke plek; bij de vraag staat het
   waar het in het logo staat. */
.cellen { display: grid; grid-template-columns: repeat(3, 13px); grid-auto-rows: 13px; gap: 3.5px; width: max-content; }
.cellen i { display: block; border-radius: 2.5px; background: var(--logo-groen); transition: transform var(--b-hop-duur) var(--b-hop-karakter), background 0.3s; }
.cellen[data-cel="1"] i:nth-child(1),
.cellen[data-cel="2"] i:nth-child(2),
.cellen[data-cel="3"] i:nth-child(3),
.cellen[data-cel="4"] i:nth-child(4),
.cellen[data-cel="5"] i:nth-child(5),
.cellen[data-cel="6"] i:nth-child(6),
.cellen[data-cel="7"] i:nth-child(7),
.cellen[data-cel="8"] i:nth-child(8),
.cellen[data-cel="9"] i:nth-child(9) { background: var(--logo-blauw); transform: rotate(var(--kanteling)); }
.cellen[data-cel="2"] i:nth-child(2) { transform: translateY(-115%) rotate(var(--kanteling)); }
/* Over een kaart bewegen, erin tabben of Speel af in het beheer (klasse hop): het blauwe blokje springt recht. */
.kaart:is(:hover, :focus-within, .hop) :is(.cellen[data-cel="1"] i:nth-child(1), .cellen[data-cel="2"] i:nth-child(2), .cellen[data-cel="3"] i:nth-child(3), .cellen[data-cel="4"] i:nth-child(4), .cellen[data-cel="5"] i:nth-child(5), .cellen[data-cel="6"] i:nth-child(6), .cellen[data-cel="7"] i:nth-child(7), .cellen[data-cel="8"] i:nth-child(8), .cellen[data-cel="9"] i:nth-child(9)) { transform: translateY(calc(var(--b-hop-hoogte) * -1)) rotate(0deg); }
.kaart:is(:hover, :focus-within, .hop) .cellen[data-cel="2"] i:nth-child(2) { transform: none; }

.kaart-vraag .cellen i { background: rgba(255, 255, 255, 0.28); }
.kaart-vraag .cellen[data-cel="2"] i:nth-child(2) { background: #fff; }

/* ---------- werkwijze ---------- */

.werkwijze { overflow: clip; background: var(--km-blauw-nacht); color: #EAF1F6; isolation: isolate; }
.werkwijze::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -30%;
  right: -12%;
  width: 60vw;
  height: 60vw;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 108, 167, 0.55), transparent);
  pointer-events: none;
}
.werkwijze .sectie-label { color: #A9C2D4; }
.werkwijze .sectie-lead { color: #B8CBD9; }

.kanten { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 40px; }
.kanten li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  font-weight: 600;
  font-size: 0.9375rem;
}
.kanten li::before { content: ''; width: 8px; height: 8px; border-radius: 1.5px; background: var(--km-groen); }

.stappen { --voortgang: 0%; position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(56px, 7vw, 88px); }
.stappen::before {
  content: '';
  position: absolute;
  top: 23px;
  left: 24px;
  right: 24px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--km-groen) var(--voortgang), rgba(255, 255, 255, 0.14) var(--voortgang));
}
.stap { position: relative; }
.stap-nummer {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 7px;
  background: #0D3756;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.2);
  font: 700 1.125rem/1 var(--f-kop);
  color: #fff;
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease), transform 0.7s var(--ease-veer);
}
.stap.geweest .stap-nummer { background: var(--km-groen); color: var(--km-inkt); box-shadow: none; }
.stap.nu .stap-nummer { background: var(--km-blauw); box-shadow: 0 14px 30px -14px rgba(14, 108, 167, 1); transform: rotate(var(--kanteling)) translateY(-6px); }
.stap h3 { margin-top: 26px; font-size: var(--t-h3); color: #fff; }
.stap p { margin-top: 12px; color: #B8CBD9; }

/* ---------- ervaring ---------- */

.cijfers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(44px, 5vw, 64px); border-block: 1px solid var(--lijn-2); }
.cijfer { padding: 30px 24px 32px 0; }
.cijfer + .cijfer { padding-left: 24px; border-left: 1px solid var(--lijn); }
.cijfer dt { font: 720 clamp(2.75rem, 1.9rem + 3.2vw, 4.75rem)/1 var(--f-kop); letter-spacing: -0.045em; color: var(--blauw-tekst); font-variant-numeric: tabular-nums; }
.cijfer dd { margin-top: 14px; max-width: 17em; font-size: 0.9375rem; color: var(--fg-2); }

.cases { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(40px, 5vw, 56px); }
.case { display: flex; flex-direction: column; padding: 28px; border-radius: var(--r-groot); background: var(--vlak); box-shadow: var(--schaduw-1), inset 0 0 0 1px var(--lijn); }
.case-label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--groen-tekst); }
.case h3 { margin-top: 12px; font-size: var(--t-h3); }
.case > p:not(.case-label) { margin-top: 12px; font-size: 1rem; color: var(--fg-2); }
.resultaat { list-style: none; display: grid; gap: 9px; margin-top: auto; padding-top: 20px; font-size: 0.9375rem; line-height: 1.5; }
.case > p + .resultaat { margin-top: 22px; border-top: 1px solid var(--lijn); }
.resultaat li { display: grid; grid-template-columns: 9px minmax(0, 1fr); gap: 11px; }
.resultaat li::before { content: ''; width: 8px; height: 8px; margin-top: 0.5em; border-radius: 1.5px; background: var(--logo-blauw); }

/* ---------- maten ---------- */

.maten { background: var(--bg-2); }
/* Twee maten naast elkaar zodra elke kaart 520 pixels krijgt, anders onder elkaar. */
.maten-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 16px; margin-top: clamp(44px, 5vw, 64px); }
.maat {
  display: grid;
  grid-template-columns: minmax(120px, 176px) minmax(0, 1fr);
  gap: clamp(22px, 3vw, 32px);
  align-items: start;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--r-groot);
  background: var(--vlak);
  box-shadow: var(--schaduw-1);
}
.maat-foto { position: relative; margin: 0; aspect-ratio: 1; }
.maat-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 6%; background: var(--km-blauw-licht); }
.maat-foto::after {
  content: '';
  position: absolute;
  top: -7%;
  right: -7%;
  width: 26%;
  aspect-ratio: 1;
  border-radius: 6%;
  background: var(--logo-blauw);
  transform: rotate(var(--kanteling));
  box-shadow: 0 10px 22px -12px rgba(14, 60, 100, 0.7);
  transition: transform 0.6s var(--ease-veer);
}
.maat:hover .maat-foto::after { transform: rotate(0deg) translate(-8%, 8%); }
.maat h3 { font-size: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem); letter-spacing: -0.022em; }
.maat-rol { margin-top: 6px; font-weight: 650; color: var(--blauw-tekst); }
.maat-tekst > p:not(.maat-rol):not(.maat-links) { margin-top: 14px; color: var(--fg-2); }
.labels { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.labels li { padding: 6px 12px; border-radius: 999px; background: var(--km-groen-licht); color: var(--groen-tekst); font-size: 0.84rem; font-weight: 650; }
.maat-links { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 20px; font-weight: 650; }

/* Een groot raster van blokjes, bij contact en op de pagina die niet bestaat. */
.cellen-groot { grid-template-columns: repeat(3, 30px); grid-auto-rows: 30px; gap: 7px; padding-top: 34px; }
.cellen-groot i { border-radius: 6%; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.34); }

/* ---------- boekje ---------- */

.boekje-binnen { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: center; gap: clamp(48px, 8vw, 120px); }
.boek { display: grid; place-items: center; perspective: 1800px; padding: 12px 24px 24px 0; }
.boek-omslag {
  position: relative;
  width: min(100%, 360px);
  border-radius: 3px 9px 9px 3px;
  background: #fff;
  transform: rotateY(20deg) rotateX(3deg) rotateZ(-1deg);
  transform-origin: left center;
  box-shadow:
    5px 5px 0 -1px #F6F4EE,
    5px 5px 0 0 rgba(14, 29, 41, 0.1),
    10px 10px 0 -1px #F0EDE5,
    10px 10px 0 0 rgba(14, 29, 41, 0.1),
    -24px 40px 70px -34px rgba(14, 29, 41, 0.6);
  transition: transform 0.9s var(--ease);
}
.boek:hover .boek-omslag { transform: rotateY(7deg) rotateX(1deg) rotateZ(0deg); }
.boek-omslag img { width: 100%; border-radius: inherit; }
.boek-omslag::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 1;
  width: 7%;
  border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.18) 40%, rgba(0, 0, 0, 0.05));
}
.boekje-tekst h2 { margin-top: 20px; font-size: var(--t-h2); letter-spacing: -0.026em; }
.boekje-tekst > p:not(.sectie-label):not(.sectie-lead) { margin-top: 18px; max-width: 36em; color: var(--fg-2); }
.boekje-tekst .knop { margin-top: 34px; }

/* ---------- contact ---------- */

.contact { overflow: clip; background: var(--km-blauw); color: #fff; isolation: isolate; }
.contact-binnen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "tekst beeld"
    "wegen wegen";
  align-items: end;
  gap: clamp(40px, 5vw, 72px) clamp(32px, 6vw, 96px);
}
.contact-tekst { grid-area: tekst; }
.contact .sectie-label { color: var(--km-blauw-licht); }
.contact .label-blok { background: var(--km-groen); }
.contact h2 { margin-top: 20px; font-size: clamp(2.6rem, 1.5rem + 4.6vw, 6rem); line-height: 0.96; letter-spacing: -0.034em; color: #fff; }
.contact .sectie-lead { color: #E3EEF6; }
.contact-wegen { grid-area: wegen; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.contact-weg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 24px 28px;
  border-radius: var(--r-groot);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
  color: #fff;
  text-decoration: none;
  transition: background 0.25s, transform 0.3s var(--ease);
}
.contact-weg:hover { background: rgba(255, 255, 255, 0.17); transform: translateY(-2px); }
.contact-soort { font-size: 0.78rem; font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase; color: var(--km-blauw-licht); }
.contact-waarde { font: 650 clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem)/1.25 var(--f-kop); letter-spacing: -0.01em; overflow-wrap: anywhere; }

/* Het beeldmerk als open raster, met het groene blokje boven het gat: hier past jouw vraag. */
.contact-beeld { grid-area: beeld; align-self: center; justify-self: end; padding-right: 4px; }
.cellen-contact { grid-template-columns: repeat(3, clamp(40px, 4.4vw, 64px)); grid-auto-rows: clamp(40px, 4.4vw, 64px); gap: clamp(8px, 0.9vw, 13px); padding-top: clamp(48px, 5.4vw, 80px); }
.cellen-contact i { border-radius: 6%; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.32); }
.contact .cellen-contact[data-cel="2"] i:nth-child(2) { background: var(--km-groen); box-shadow: 0 18px 30px -16px rgba(0, 0, 0, 0.45); transform: translateY(-120%) rotate(var(--kanteling)); transition: transform 0.8s var(--ease-veer); }
.contact:hover .cellen-contact[data-cel="2"] i:nth-child(2) { transform: translateY(-100%) rotate(4deg); }

/* ---------- voet ---------- */

.voet { padding: 64px 0 calc(40px + env(safe-area-inset-bottom, 0px)); background: #05121C; color: #A9BAC7; font-size: 0.9375rem; }
.voet-binnen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 36px 56px; align-items: start; }
.voet-merk { --logo-blauw: #3D97D6; --logo-groen: #9DCB5E; --logo-inkt: #DCE6EE; }
.voet-merk svg { width: min(100%, 250px); height: auto; aspect-ratio: 603.8 / 167.5; }
.voet-menu ul { list-style: none; columns: 2; column-gap: 32px; }
.voet-menu a { display: inline-block; padding: 4px 0; color: #E3EBF1; text-decoration: none; }
.voet-menu a:hover { color: #fff; text-decoration: underline; }
.privacy summary { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: #E3EBF1; font-weight: 650; list-style: none; }
.privacy summary::-webkit-details-marker { display: none; }
.privacy summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--ease); }
.privacy[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.privacy p { margin-top: 12px; max-width: 34em; line-height: 1.55; }
.voet-klein { grid-column: 1 / -1; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0.875rem; color: #8FA3B2; }

/* ---------- smallere schermen ---------- */

@media (max-width: 1099px) {
  .kaarten, .cases { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfer:nth-child(3) { padding-left: 0; border-left: 0; }
  .cijfer:nth-child(n + 3) { border-top: 1px solid var(--lijn); }
  .maten-raster { grid-template-columns: minmax(0, 1fr); }
  .voet-binnen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .voet-merk { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .held { padding-top: calc(66px + 40px); }
  .held-binnen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "beeld" "verhaal" "principes"; }
  .held-baan { align-items: center; }
  .held-beeld { position: relative; top: auto; width: min(58vw, 250px); margin-top: 56px; }
  .held-verhaal { padding-top: clamp(64px, 12vh, 112px); }
  .principes { grid-template-columns: minmax(0, 1fr); }
  .stappen { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-left: 72px; }
  .stappen::before { top: 24px; bottom: 24px; left: 23px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--km-groen) var(--voortgang), rgba(255, 255, 255, 0.14) var(--voortgang)); }
  .stap-nummer { position: absolute; left: -72px; top: 0; }
  .stap h3 { margin-top: 10px; }
  .boekje-binnen { grid-template-columns: minmax(0, 1fr); }
  .contact-binnen { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tekst tekst" "wegen beeld"; align-items: end; }
  .contact-wegen { grid-template-columns: minmax(0, 1fr); }
  .boek { padding-right: 12px; }
  .boek-omslag { width: min(72vw, 300px); }
}

@media (max-width: 639px) {
  .kaarten, .cases { grid-template-columns: minmax(0, 1fr); }
  .cijfers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cijfer, .cijfer + .cijfer { padding: 22px 14px 24px 0; border-left: 0; }
  .cijfer:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--lijn); }
  .cijfer:nth-child(n + 3) { border-top: 1px solid var(--lijn); }
  .cijfer dd { font-size: 0.875rem; }
  .feiten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .contact-binnen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "tekst" "wegen"; }
  .contact-beeld { display: none; }
  .kaart, .case { padding: 24px 22px 26px; }
  .maat { grid-template-columns: minmax(0, 1fr); }
  .maat-foto { width: min(100%, 260px); }
  .knoppen .knop { flex: 1 1 100%; justify-content: center; }
  .knop { white-space: normal; padding-block: 12px; line-height: 1.25; }
  .knop-klein-tekst { white-space: nowrap; }
  .voet-binnen { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .js [data-in] { opacity: 1; transform: none; }
  .js .raster .blok:not(.blauw), .js .blauw-val, .js .raster .blok.blauw, .js .held-beeld.geland .blok.blauw { animation: none; }
  .js .wissel .woord:not(.is-nu) { display: none; }
}

/* ---------- afdrukken ---------- */

@media print {
  .kop, .overslaan, .held-beeld, .contact-beeld, .knoppen, .thema { display: none !important; }
  .held { padding-top: 0; }
  .werkwijze, .contact, .voet { background: none; color: #000; }
  .js [data-in] { opacity: 1; transform: none; }
}

/* ---------- niet gevonden ---------- */

.niet-gevonden { min-height: 100vh; display: grid; place-items: center; }
.nf { padding: 48px 0 64px; }
.nf .kop-merk svg { width: 180px; }
.nf-beeld { margin-top: 64px; }
.nf .cellen-groot i { background: color-mix(in oklab, var(--logo-groen) 20%, transparent); box-shadow: inset 0 0 0 1.5px var(--logo-groen); }
.nf .cellen-groot[data-cel="2"] i:nth-child(2) { background: var(--logo-blauw); box-shadow: none; transform: translate(140%, -160%) rotate(28deg); }
.nf h1 { margin-top: 36px; font-size: var(--t-h2); letter-spacing: -0.035em; }
.nf .knop { margin-top: 32px; }