/* designated-2026 · basis: tokens, navigatie, afsluiter, footer.
   Overgenomen uit concepten/2026-10-08-homepage-samengesteld.html. */
/* ===== Gedeeld: tokens uit het stijlblad van 08-10 ===== */
:root {
  /* Eén ontwerppixel. Tot 1440 px breed precies 1px; daarboven groeit de pagina gedempt mee
     (2560 px: 1,calc(31 * var(--u)), vanaf 2880 px: 1,calc(4 * var(--u))). Zie tools/schaal-css.py. */
  --u: clamp(1px, calc(0.6px + 100vw / 3600), 1.4px);
  --navy: #0a1d29; --navy-2: #0f2836;
  --ink: #f4f2ee; --ink-dark: #0a1d29;
  --soft: rgba(244,242,238,.66); --soft-dark: rgba(10,29,41,.64);
  --line: rgba(244,242,238,.2); --line-light: rgba(10,29,41,.12);
  --light: #f3f5f6; --lime: #c8f560;
  --r: calc(22 * var(--u)); --pad: clamp(calc(16 * var(--u)), min(2.4vw, calc(34.56 * var(--u))), calc(36 * var(--u)));
  --rand: max(var(--pad), calc((100vw - 1600 * var(--u)) / 2)); --page: #e7e9ea;
  --ease: cubic-bezier(.16,1,.3,1);
  /* Verticale sectiepadding: de grote waarden (90 ontwerppixels en meer) in de paginabundels staan als
     calc(N * var(--u) * var(--sy-t)) boven en --sy-b onder. Op desktop 1, op mobiel kleiner (hieronder). */
  --sy-t: 1; --sy-b: 1;
}
/* Mobiel (meting 02-11): 130 boven en onder wordt ca. 72 boven en 48 onder; 90-120 schalen mee,
   kleinere waarden (een sectie die op de vorige aansluit) blijven staan. Heroes en afsluiters doen niet mee. */
@media (max-width: 760px) {
  :root { --sy-t: .55; --sy-b: .37; }
}
/* 28-10 (overleg Tim en Nathalie 22-10): smallere container, meer lucht links en rechts. Vanaf 1100 px
   minstens 6vw marge en de inhoud nooit breder dan 1240 ontwerppixels; daaronder blijft --pad. */
@media (min-width: 1100px) {
  :root { --rand: max(6vw, calc((100vw - 1240 * var(--u)) / 2)); }
}
* { box-sizing: border-box; margin: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--navy); color: var(--ink); font-family: "Inter Tight", system-ui, sans-serif; overflow-x: clip; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }

/* =====================================================================
   1. NAVIGATIE + MEGAMENU (megamenu-varianten A, bento), vast bovenaan
   ===================================================================== */
/* Balk zo breed als zijn inhoud, gecentreerd */
#site .nav-wrap { position: fixed; z-index: 100; top: calc(16 * var(--u)); left: 0; right: 0; margin-inline: auto; width: max-content; max-width: calc(100% - 2 * var(--pad)); }
#site .glass { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); }
#site .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft); }
#site .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
#site em.s { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--lime); }
#site .mono { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; color: var(--soft); }
#site .ico { width: calc(16 * var(--u)); height: calc(16 * var(--u)); display: block; flex: none; }
#site .pill { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u)); padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)) calc(20 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--lime); color: var(--navy); white-space: nowrap; }
#site .pill .arr { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--navy); color: var(--lime); display: grid; place-items: center; transition: transform .35s var(--ease); }
#site .pill .arr .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }
#site a:hover > .pill .arr, #site .pill:hover .arr { transform: rotate(-45deg); }
#site .go { width: calc(38 * var(--u)); height: calc(38 * var(--u)); border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.22); color: var(--ink); transition: transform .4s var(--ease), background .3s, color .3s, border-color .3s; flex: none; }
#site .go .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); }

#site .nav { display: flex; align-items: center; gap: calc(40 * var(--u)); padding: calc(8 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u)) calc(24 * var(--u)); border-radius: calc(999 * var(--u)); color: var(--ink); box-shadow: 0 calc(14 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.22); transition: color .4s, background .4s, border-color .4s, box-shadow .4s; }
/* 19-10: op donker een navy getinte glasbalk in plaats van wit glas, zodat witte tekst en logo ook boven een licht videobeeld leesbaar blijven */
#site .nav { background: linear-gradient(135deg, rgba(10,29,41,.45), rgba(10,29,41,.58)); border-color: rgba(255,255,255,.14); }
#site .nav .logo { display: block; width: calc(122 * var(--u)); height: calc(20 * var(--u)); color: var(--ink); transition: color .4s; }
#site .nav .links { display: flex; gap: 2px; }
#site .nav .links a, #site .trig { font: inherit; font-size: calc(14 * var(--u)); font-weight: 500; color: inherit; background: none; border: 0; padding: calc(10 * var(--u)) calc(15 * var(--u)); border-radius: calc(999 * var(--u)); cursor: pointer; transition: background .25s; line-height: 1; }
#site .nav .links a:hover, #site .trig:hover, #site .trig[aria-expanded="true"] { background: rgba(255,255,255,.13); }
#site .trig { display: inline-flex; align-items: center; gap: calc(7 * var(--u)); }
#site .trig .chev { width: calc(12 * var(--u)); height: calc(12 * var(--u)); display: block; transition: transform .4s var(--ease); }
#site .trig[aria-expanded="true"] .chev { transform: rotate(180deg); }
#site .nav .right { display: flex; gap: calc(8 * var(--u)); align-items: center; }
#site .nav .cta { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 700; padding: calc(6 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)) calc(18 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--lime); color: var(--navy); }
#site .nav .cta .arr { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; background: var(--navy); color: var(--lime); display: grid; place-items: center; transition: transform .35s var(--ease); }
#site .nav .cta .arr .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
#site .nav .cta:hover .arr { transform: rotate(-45deg); }
#site .mbtn { display: none; align-items: center; gap: calc(10 * var(--u)); font: inherit; font-size: calc(14 * var(--u)); font-weight: 500; color: var(--ink); cursor: pointer; padding: calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(999 * var(--u)); border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08); line-height: 1; transition: color .4s, background .4s, border-color .4s; }
#site .mbtn i { width: calc(16 * var(--u)); height: calc(8 * var(--u)); position: relative; display: inline-block; }
#site .mbtn i::before, #site .mbtn i::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s ease, top .4s ease; }
#site .mbtn i::before { top: 0; } #site .mbtn i::after { top: calc(6.5 * var(--u)); }
#site.open .mbtn i::before { top: calc(3.25 * var(--u)); transform: rotate(45deg); } #site.open .mbtn i::after { top: calc(3.25 * var(--u)); transform: rotate(-45deg); }

/* Pil leesbaar op lichte secties (zoals .on-light in concept 9) */
body.on-light #site .nav { color: var(--ink-dark); background: rgba(255,255,255,.55); border-color: rgba(10,29,41,.1); box-shadow: 0 calc(14 * var(--u)) calc(50 * var(--u)) rgba(10,29,41,.12); }
body.on-light #site .nav .logo { color: var(--ink-dark); }
body.on-light #site .nav .links a:hover, body.on-light #site .trig:hover, body.on-light #site .trig[aria-expanded="true"] { background: rgba(10,29,41,.07); }
body.on-light #site .mbtn { color: var(--ink-dark); border-color: rgba(10,29,41,.18); background: rgba(10,29,41,.04); }

/* Uitgelichte case (gedeeld door bento en mobiel menu) */
#site .case { position: relative; display: block; overflow: hidden; border-radius: calc(18 * var(--u)); background: #0d2230; color: var(--ink); }
#site .case img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
#site .case::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10,29,41,.75), rgba(10,29,41,0) 65%); }
#site .case:hover img { transform: scale(1.06); }
#site .case .cap { position: absolute; z-index: 1; left: calc(12 * var(--u)); right: calc(12 * var(--u)); bottom: calc(12 * var(--u)); display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
#site .case .cap b { font-size: calc(34 * var(--u)); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
#site .case .cap span { font-size: calc(13 * var(--u)); line-height: 1.35; color: var(--soft); }
#site .case .cap span strong { color: var(--ink); font-weight: 600; }
#site .case .cap .go { margin-left: auto; width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
#site .case:hover .cap .go { transform: rotate(-45deg); background: var(--ink); color: var(--navy); border-color: transparent; }
/* Casebeeld met veel geel (Heffiq-heftrucks): donkerder glas onder het label, zodat de tekst leesbaar blijft (03-11) */
#site .case .cap { background: linear-gradient(135deg, rgba(10,29,41,.62), rgba(10,29,41,.42)); }

/* Bento onder de navigatie (A3, 10-10-2026): groeiscan, drie pijlers met hun diensten, case */
/* Breder dan de balk, gecentreerd eronder: vier kolommen met diensten hebben die ruimte nodig */
#site .bento { position: absolute; top: calc(100% + calc(10 * var(--u))); left: 50%; width: min(calc(1200 * var(--u)), 100vw - 2 * var(--pad)); display: grid; grid-template-columns: 1.15fr 1fr 1fr 1fr; grid-template-rows: auto calc(112 * var(--u)); gap: calc(10 * var(--u)); padding: calc(10 * var(--u)); border-radius: calc(28 * var(--u)); color: var(--ink);
  background: linear-gradient(135deg, rgba(10,29,41,.62), rgba(10,29,41,.48)); box-shadow: 0 calc(40 * var(--u)) calc(100 * var(--u)) rgba(0,0,0,.35);
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(calc(-14 * var(--u))) scale(.985); transform-origin: 50% 0; pointer-events: none;
  transition: opacity .35s ease, transform .6s var(--ease), visibility 0s .6s; }
#site.open .bento { opacity: 1; visibility: visible; transform: translateX(-50%); pointer-events: auto; transition: opacity .35s ease, transform .6s var(--ease), visibility 0s; }
/* Op een lichte sectie: dichter glas, anders wordt de bento grijs */
body.on-light #site .bento { background: linear-gradient(135deg, rgba(10,29,41,.9), rgba(10,29,41,.8)); }
#site .tile { position: relative; overflow: hidden; border-radius: calc(20 * var(--u)); padding: calc(20 * var(--u)); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09); display: flex; flex-direction: column; justify-content: space-between; gap: calc(18 * var(--u)); min-height: calc(196 * var(--u));
  opacity: 0; transform: translateY(calc(16 * var(--u))) scale(.97); transition: opacity .4s ease, transform .7s var(--ease), background .3s; }
#site.open .tile { opacity: 1; transform: none; transition-delay: calc(var(--i) * .06s + .08s), calc(var(--i) * .06s + .08s), 0s; }
#site .tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(calc(280 * var(--u)) circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.12), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
#site .tile:hover::before { opacity: 1; }
#site .tile:hover { background: rgba(255,255,255,.1); }
#site .tile.big:hover .go, #site .ph:hover .go, #site .ph:focus-visible .go { transform: rotate(-45deg); background: var(--ink); color: var(--navy); border-color: transparent; }
/* Pijlertegel: kop naar de pijlerpagina, daaronder de diensten. Vaste hoogte, zodat er niets
   verspringt als een regel openklapt (ruimte voor zes diensten plus één open regel). */
#site .tile.pil { justify-content: flex-start; gap: 0; padding: calc(18 * var(--u)); min-height: calc(372 * var(--u)); }
#site .ph { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: calc(14 * var(--u)); padding-bottom: calc(14 * var(--u)); margin-bottom: calc(6 * var(--u)); border-bottom: 1px solid rgba(244,242,238,.16); }
#site .ph b { grid-column: 1 / -1; display: block; font-size: calc(28 * var(--u)); font-weight: 700; letter-spacing: -.055em; line-height: 1; }
#site .ph .go { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
#site .sl a { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)); margin: 0 calc(-10 * var(--u)); border-radius: calc(11 * var(--u)); font-size: calc(15 * var(--u)); font-weight: 500; line-height: 1.3; transition: background .25s, color .3s; }
#site .sl a .tx { display: flex; flex-direction: column; min-width: 0; }
#site .sl a > .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); margin-top: calc(3 * var(--u)); opacity: 0; transform: translateX(calc(-6 * var(--u))); transition: opacity .25s, transform .35s var(--ease); }
#site .sl a:hover, #site .sl a:focus-visible { background: rgba(255,255,255,.09); }
#site .sl a:hover > .ico, #site .sl a:focus-visible > .ico { opacity: 1; transform: none; }
/* De regel onder de dienst klapt open bij hover of focus; de andere diensten vallen terug */
#site .sl .ex { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .45s var(--ease), opacity .3s; }
#site .sl .ex > small { overflow: hidden; min-height: 0; display: block; font-size: calc(12.5 * var(--u)); font-weight: 400; color: var(--soft); line-height: 1.3; }
#site .sl a:hover .ex, #site .sl a:focus-visible .ex { grid-template-rows: 1fr; opacity: 1; }
#site .sl:hover a:not(:hover) { color: var(--soft); }
#site .new { display: inline-block; vertical-align: .14em; margin-left: calc(8 * var(--u)); padding: calc(3 * var(--u)) calc(7 * var(--u)) calc(2 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--lime); color: var(--navy); font-family: "Fragment Mono", monospace; font-size: calc(9.5 * var(--u)); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; line-height: 1.2; }
/* Smal desktopvenster en tablet (smallere tegels): pil iets compacter, zodat "Nieuw" naast de naam blijft staan (feedback Tim 03-11) */
@media (min-width: 761px) and (max-width: 1279px) { #site .sl .new { margin-left: calc(6 * var(--u)); padding-inline: calc(5 * var(--u)); letter-spacing: .05em; } }
#site .tile.big { grid-row: 1 / 3; background: radial-gradient(120% 90% at 0% 0%, rgba(200,245,96,.16), transparent 60%), rgba(255,255,255,.06); padding: calc(26 * var(--u)); }
#site .tile.big .tt { font-size: clamp(calc(30 * var(--u)), min(2.7vw, calc(38.88 * var(--u))), calc(42 * var(--u))); font-weight: 700; letter-spacing: -.05em; line-height: .95; }
#site .tile.big .tx { margin-top: calc(14 * var(--u)); color: var(--soft); font-size: calc(15 * var(--u)); line-height: 1.45; max-width: 30ch; }
#site .tile.big .pill { align-self: flex-start; }
#site .tile.case-t { grid-column: 2 / 5; padding: 0; min-height: 0; border: 0; }
#site .tile.case-t .case { position: absolute; inset: 0; border-radius: calc(20 * var(--u)); }
#site .tile.case-t .cap { right: auto; max-width: calc(100% - calc(24 * var(--u))); }
@media (max-width: 1100px) {
  #site .bento { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto calc(120 * var(--u)); }
  #site .tile { min-height: 0; padding: calc(16 * var(--u)); gap: calc(14 * var(--u)); }
  #site .tile b, #site .ph b { font-size: calc(26 * var(--u)); }
  #site .tile.big { grid-row: auto; grid-column: 1 / -1; padding: calc(20 * var(--u)); display: grid; grid-template-columns: 1fr auto; align-items: end; }
  #site .tile.big .lbl { grid-column: 1 / -1; }
  #site .tile.big .tx { display: none; }
  #site .tile.case-t { grid-column: 1 / -1; }
}

/* Mobiel: schermvullend menu achter de knop Menu */
#site .scan { display: block; border-radius: var(--r); padding: calc(24 * var(--u)); }
#site .scan .tt { margin: calc(16 * var(--u)) 0 calc(10 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 700; letter-spacing: -.055em; line-height: .98; }
#site .mob { display: none; }
@media (max-width: 760px) {
  #site .nav-wrap { left: var(--rand); right: var(--rand); width: auto; max-width: none; margin: 0; }
  #site .nav { justify-content: space-between; gap: calc(12 * var(--u)); padding-left: calc(18 * var(--u)); }
  #site .nav .links { display: none; }
  #site .mbtn { display: inline-flex; }
  #site .bento { display: none !important; }
  #site .mob { display: block; position: fixed; inset: 0; z-index: 90; overflow-y: auto; padding: calc(96 * var(--u)) calc(16 * var(--u)) calc(28 * var(--u)); color: var(--ink);
    background: linear-gradient(160deg, rgba(10,29,41,.9), rgba(10,29,41,.8)); backdrop-filter: blur(calc(26 * var(--u))) saturate(140%); -webkit-backdrop-filter: blur(calc(26 * var(--u))) saturate(140%);
    clip-path: circle(0px at var(--ox, 90%) var(--oy, calc(40 * var(--u)))); visibility: hidden; transition: clip-path .8s cubic-bezier(.7,0,.2,1), visibility 0s .8s; }
  #site.open .mob { clip-path: circle(170% at var(--ox, 90%) var(--oy, calc(40 * var(--u)))); visibility: visible; transition: clip-path .9s cubic-bezier(.7,0,.2,1), visibility 0s; }
  /* Beeldmerk valt bewust buiten beeld; de wrapper knipt het af, anders scrolt het menu horizontaal */
  /* Het beeldmerk blijft staan als het menu scrolt of een pijler openklapt (sticky in plaats van absolute, Tim 03-11) */
  #site .mob .bmw { position: sticky; top: calc(-96 * var(--u)); height: 100dvh; margin: calc(-96 * var(--u)) calc(-16 * var(--u)) calc(96 * var(--u) - 100dvh); overflow: hidden; pointer-events: none; z-index: 0; }
  #site .mob .bm { position: absolute; width: calc(520 * var(--u)); height: calc(520 * var(--u)); right: calc(-230 * var(--u)); bottom: calc(-160 * var(--u)); color: rgba(255,255,255,.05); pointer-events: none; }
  #site .mob ul { position: relative; }
  #site .mob .acc { position: relative; }
  #site .mob details { border-top: 1px solid var(--line); }
  #site .mob details:last-child { border-bottom: 1px solid var(--line); }
  #site .mob summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)) 0; cursor: pointer; }
  #site .mob summary::-webkit-details-marker { display: none; }
  #site .mob summary .w { display: block; font-size: calc(44 * var(--u)); font-weight: 700; letter-spacing: -.05em; line-height: .95; }
  #site .mob summary small { display: block; margin-top: calc(4 * var(--u)); font-size: calc(13 * var(--u)); color: var(--soft); }
  #site .mob summary .go { width: calc(40 * var(--u)); height: calc(40 * var(--u)); }
  #site .mob summary .chev { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; transition: transform .4s var(--ease); }
  #site .mob details[open] summary .chev { transform: rotate(180deg); }
  #site .mob details ul { padding-bottom: calc(6 * var(--u)); }
  #site .mob details ul a { display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); padding: calc(11 * var(--u)) 0; font-size: calc(18 * var(--u)); font-weight: 600; border-top: 1px solid rgba(255,255,255,.07); }
  #site .mob details ul a .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); opacity: .5; }
  #site .mob details .all { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); margin: calc(6 * var(--u)) 0 calc(16 * var(--u)); font-size: calc(14 * var(--u)); font-weight: 600; }
  #site .mob details .all .ico { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }
  #site .mob .sec { position: relative; display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); margin: calc(18 * var(--u)) 0; }
  #site .mob .sec a { font-size: calc(15 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); border: 1px solid var(--line); }
  #site .mob .scan { position: relative; margin-bottom: calc(10 * var(--u)); padding: calc(20 * var(--u)); }
  #site .mob .scan .tt { font-size: calc(26 * var(--u)); }
  #site .mob .case { height: calc(170 * var(--u)); }
  /* Open menu ligt over navy: de pil gaat dan terug naar donker glas */
  body.on-light #site.open .nav { color: var(--ink); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); border-color: rgba(255,255,255,.2); }
  body.on-light #site.open .nav .logo { color: var(--ink); }
  body.on-light #site.open .mbtn { color: var(--ink); border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
}
@media (max-width: 420px) { #site .nav .cta { display: none; } }

/* =====================================================================
   7. AFSLUITER (afsluiter-varianten A, grote kop met wit formulier)
   ===================================================================== */
#aanvragen { background: var(--light); color: var(--ink-dark); position: relative; overflow: hidden; padding: calc(150 * var(--u)) calc(var(--rand) + 64 * var(--u)) calc(210 * var(--u)); display: grid; grid-template-columns: 1.15fr .85fr; gap: calc(var(--pad) * 2); align-items: center; }
#aanvragen .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: rgba(10,29,41,.74); }
#aanvragen .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--navy); display: inline-block; }
#aanvragen .h { font-weight: 700; letter-spacing: -.05em; line-height: .88; }
#aanvragen .h em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; color: var(--ink-dark); }
#aanvragen .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
#aanvragen .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
#aanvragen.in .h .ln > span { transform: none; }
#aanvragen .h .ln:nth-child(2) > span { transition-delay: .1s; }
#aanvragen .h .ln:nth-child(3) > span { transition-delay: .2s; }
#aanvragen .rise { opacity: 0; transform: translateY(calc(40 * var(--u))) scale(.98); transition: opacity 1s ease .25s, transform 1.2s cubic-bezier(.16,1,.3,1) .25s; }
#aanvragen.in .rise { opacity: 1; transform: none; }
#aanvragen .form { background: #fff; color: var(--ink-dark); border-radius: var(--r); padding: calc(32 * var(--u)); display: flex; flex-direction: column; gap: calc(12 * var(--u)); box-shadow: 0 calc(24 * var(--u)) calc(60 * var(--u)) rgba(10,29,41,.16); }
#aanvragen .form .ft { font-weight: 700; font-size: calc(30 * var(--u)); letter-spacing: -.045em; line-height: 1.05; }
#aanvragen .form .ft em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }
#aanvragen .form .fs { color: var(--soft-dark); font-size: calc(15 * var(--u)); line-height: 1.45; margin-bottom: calc(8 * var(--u)); }
#aanvragen .two { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); }
#aanvragen .field { font: inherit; width: 100%; font-size: calc(15 * var(--u)); padding: calc(15 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); border: 1px solid var(--line-light); background: #f6f8f9; color: var(--ink-dark); transition: border-color .2s, background .2s, box-shadow .2s; }
#aanvragen .field:focus { outline: none; border-color: var(--navy); background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200,245,96,.45); }
#aanvragen textarea.field { resize: none; min-height: calc(92 * var(--u)); }
/* Keuzes van het contactformulier (websitepagina's): zelfde chips als op /contact/ */
#aanvragen .opts { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
#aanvragen .opts label { position: relative; }
#aanvragen .opts input { position: absolute; opacity: 0; pointer-events: none; }
#aanvragen .opts span { display: inline-block; font-size: calc(14 * var(--u)); padding: calc(10 * var(--u)) calc(14 * var(--u)); border-radius: calc(999 * var(--u)); border: 1px solid var(--line-light); background: #f6f8f9; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
#aanvragen .opts span:hover { border-color: rgba(10,29,41,.3); }
#aanvragen .opts input:checked + span { background: var(--navy); color: #fff; border-color: var(--navy); }
#aanvragen .opts input:focus-visible + span { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200,245,96,.45); }
#aanvragen .hint { display: none; }
#aanvragen .submit { font: inherit; display: flex; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)); font-weight: 700; font-size: calc(16 * var(--u)); padding: calc(17 * var(--u)) calc(20 * var(--u)) calc(17 * var(--u)) calc(24 * var(--u)); border-radius: calc(999 * var(--u)); border: 0; background: var(--navy); color: #fff; cursor: pointer; margin-top: calc(6 * var(--u)); transition: transform .25s; }
#aanvragen .submit .arr { width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; font-size: calc(17 * var(--u)); transition: transform .3s; }
#aanvragen .submit:hover .arr { transform: rotate(-45deg); }
#aanvragen .trust { display: flex; gap: calc(10 * var(--u)); align-items: center; font-size: calc(13 * var(--u)); color: var(--soft-dark); flex-wrap: wrap; }
#aanvragen .trust .g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
#aanvragen .stars { color: #f2b01e; letter-spacing: 1px; font-size: calc(14 * var(--u)); }
#aanvragen .faces { display: flex; }
#aanvragen .who { display: flex; gap: calc(12 * var(--u)); align-items: center; padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: #f3f5f6; font-size: calc(14 * var(--u)); line-height: 1.35; }
#aanvragen .who b { display: block; font-size: calc(15 * var(--u)); }
/* Ingezoomd op het hoofd van de strateeg */
#aanvragen .faces .head { width: calc(58 * var(--u)); height: calc(58 * var(--u)); border-radius: 50%; flex: none; background: #d9d4cc var(--strateeg, url('../img/team/avatar/jorick-dumpel.webp')) center / cover no-repeat; }
#aanvragen .who .live { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #2bc46a; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(43,196,106,.18); flex: none; margin-left: auto; }
/* 19-10: afsluiter als limoen kaart met afgeronde hoeken binnen de witruimte, in plaats van een navy vlak met beeldmerk */
#aanvragen::before { content: ""; position: absolute; z-index: 0; top: calc(60 * var(--u)); bottom: calc(120 * var(--u)); left: var(--rand); right: var(--rand); background: var(--lime); border-radius: calc(var(--r) * 1.6); }
#aanvragen > * { position: relative; z-index: 1; }
#aanvragen .h { font-size: clamp(calc(56 * var(--u)), min(7.4vw, calc(106.56 * var(--u))), calc(138 * var(--u))); margin-top: calc(22 * var(--u)); }
#aanvragen .sub { margin-top: calc(30 * var(--u)); color: rgba(10,29,41,.74); font-size: calc(18 * var(--u)); line-height: 1.5; max-width: 40ch; }
#aanvragen .steps { margin-top: calc(34 * var(--u)); display: grid; grid-template-columns: repeat(3, auto); gap: calc(22 * var(--u)); justify-content: start; }
#aanvragen .steps div { font-size: calc(14 * var(--u)); color: rgba(10,29,41,.74); line-height: 1.4; max-width: 17ch; }
#aanvragen .steps b { display: block; font-family: "Fragment Mono", monospace; font-weight: 400; font-size: calc(11 * var(--u)); color: var(--ink-dark); margin-bottom: calc(6 * var(--u)); letter-spacing: .08em; }
/* 03-11 (Tim): de drie stappen moeten even lang ogen. Op één regel past niet naast het formulier, dus alle drie precies
   twee regels: elke stap even breed, smaller dan de kortste stap op één regel (126) en breed genoeg voor de langste in twee (102).
   Schaalt mee met --u, net als de letter. Alleen de groeiscanvariant: de contactvariant heeft andere teksten. */
@media (min-width: 961px) { #aanvragen[data-soort="groeiscan"] .steps { grid-template-columns: repeat(3, calc(114 * var(--u))); } #aanvragen[data-soort="groeiscan"] .steps div { max-width: none; text-wrap: balance; } }
@media (max-width: 960px) { #aanvragen { grid-template-columns: 1fr; padding-inline: calc(var(--rand) + 24 * var(--u)); } #aanvragen .steps { grid-template-columns: 1fr; } }
/* Mobiel (feedback Tim 03-11): stappen elk op één regel met het nummer ervoor; "Spreek direct met een strateeg"
   zonder groen bolletje en met een kleinere foto, zodat de kop op één regel past */
@media (max-width: 960px) {
  #aanvragen .steps { gap: calc(10 * var(--u)); margin-top: calc(26 * var(--u)); }
  #aanvragen .steps div { display: flex; align-items: baseline; gap: calc(12 * var(--u)); max-width: none; }
  #aanvragen .steps b { display: inline; flex: none; margin: 0; }
}
@media (max-width: 520px) {
  #aanvragen .who { gap: calc(10 * var(--u)); padding: calc(12 * var(--u)); }
  #aanvragen .who .live { display: none; }
  #aanvragen .faces .head { width: calc(42 * var(--u)); height: calc(42 * var(--u)); }
  #aanvragen .who b { font-size: calc(13.5 * var(--u)); white-space: nowrap; letter-spacing: -.01em; }
  #aanvragen .who > div:not(.faces) { text-wrap: balance; font-size: calc(13.5 * var(--u)); }
}
@media (max-width: 379px) { #aanvragen .who b { white-space: normal; text-wrap: balance; } }
@media (max-width: 480px) { #aanvragen .form { padding: calc(22 * var(--u)); } #aanvragen .two { grid-template-columns: 1fr; } }

/* =====================================================================
   8. FOOTER (footer-varianten A, rustig en compleet)
      met de partnerregel uit footer-partnerlogos, weergave 5
   ===================================================================== */
#footer { background: var(--navy); color: var(--ink); padding: 0 var(--rand); }
#footer .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft); }
#footer .rise { opacity: 0; transform: translateY(calc(40 * var(--u))) scale(.98); transition: opacity 1s ease .25s, transform 1.2s cubic-bezier(.16,1,.3,1) .25s; }
#footer.in .rise { opacity: 1; transform: none; }
#footer .glass { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); }
#footer .g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
#footer .stars { color: #f2b01e; letter-spacing: 1px; font-size: calc(14 * var(--u)); }
#footer .logo { display: block; width: calc(150 * var(--u)); height: calc(25 * var(--u)); color: var(--ink); }
#footer .ul a, #footer .bottom a { color: inherit; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 2px; transition: background-size .35s cubic-bezier(.2,.8,.2,1), color .2s; }
#footer .ul a:hover, #footer .bottom a:hover { background-size: 100% 1px; color: var(--ink); }
#footer .ul { display: flex; flex-direction: column; gap: calc(11 * var(--u)); margin-top: calc(18 * var(--u)); font-size: calc(16 * var(--u)); color: var(--soft); }
#footer .ul .sub { padding-left: calc(14 * var(--u)); position: relative; }
#footer .ul .sub::before { content: ""; position: absolute; left: 0; top: .62em; width: calc(7 * var(--u)); height: 1px; background: var(--line); }
#footer .rating { display: inline-flex; align-items: center; gap: calc(10 * var(--u)); font-size: calc(13 * var(--u)); color: var(--soft); flex-wrap: wrap; }
#footer .socials { display: flex; gap: calc(8 * var(--u)); }
#footer .socials a { width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; display: grid; place-items: center; color: var(--ink); transition: background .3s, border-color .3s; }
#footer .socials a:hover { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.4); }
#footer .socials svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); }
#footer .bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: calc(12 * var(--u)) calc(28 * var(--u)); padding: calc(24 * var(--u)) 0 calc(30 * var(--u)); border-top: 1px solid var(--line); font-size: calc(13 * var(--u)); color: var(--soft); }
#footer .bottom .legal { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)) calc(22 * var(--u)); align-items: center; }
#footer .fa-grid { display: grid; grid-template-columns: 1.35fr 1.35fr 1fr 1.3fr; gap: calc(40 * var(--u)); padding: calc(76 * var(--u)) 0 calc(70 * var(--u)); border-top: 1px solid var(--line); }
#footer .claim { margin-top: calc(22 * var(--u)); font-size: calc(17 * var(--u)); line-height: 1.45; color: var(--soft); max-width: 26ch; }
#footer .fa-grid .rating { margin-top: calc(26 * var(--u)); }
#footer .fa-nav { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
#footer .contact { color: var(--ink); }
#footer .fa-grid .socials { margin-top: calc(22 * var(--u)); }
#footer .note { margin-top: calc(18 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.45; color: var(--soft); max-width: 30ch; }
#footer .pill { margin-top: calc(16 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); background: #fff; border-radius: calc(999 * var(--u)); padding: calc(5 * var(--u)) calc(5 * var(--u)) calc(5 * var(--u)) calc(20 * var(--u)); max-width: calc(340 * var(--u)); transition: box-shadow .25s; }
#footer .pill:focus-within { box-shadow: 0 0 0 calc(4 * var(--u)) rgba(200,245,96,.35); }
#footer .pill input { font: inherit; flex: 1; min-width: 0; border: 0; outline: 0; background: none; font-size: calc(15 * var(--u)); color: var(--ink-dark); padding: calc(8 * var(--u)) 0; }
#footer .pill input::placeholder { color: var(--soft-dark); }
#footer .pill button { flex: none; width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; border: 0; background: var(--lime); color: var(--navy); font-size: calc(17 * var(--u)); cursor: pointer; transition: transform .3s; }
#footer .pill button:hover { transform: rotate(-45deg); }
#footer .fa-grid > .rise:nth-child(2) { transition-delay: .32s; } #footer .fa-grid > .rise:nth-child(3) { transition-delay: .39s; } #footer .fa-grid > .rise:nth-child(4) { transition-delay: .46s; }
@media (max-width: 1100px) { #footer .fa-grid { grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)) calc(32 * var(--u)); } }
@media (max-width: 620px) { #footer .fa-grid { grid-template-columns: 1fr; padding: calc(56 * var(--u)) 0 calc(48 * var(--u)); } }

/* Partnerregel: statement met witte chips (footer-partnerlogos, weergave 5) */
#footer .ic { width: calc(22 * var(--u)); height: calc(22 * var(--u)); flex: none; }
#footer .pdl { display: inline-grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: #017737; color: #fff; font-weight: 700; font-size: calc(14 * var(--u)); line-height: 1; padding-bottom: 2px; flex: none; font-style: normal; }
#footer .fdl { display: inline-grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); background: #fff1e5; color: #0a1d29; font-family: "Instrument Serif", serif; font-size: calc(13 * var(--u)); flex: none; font-style: normal; }
#footer .statement { display: grid; grid-template-columns: 1fr auto; gap: calc(30 * var(--u)); align-items: center; padding: calc(34 * var(--u)) 0; border-top: 1px solid var(--line); }
#footer .statement p { font-weight: 700; font-size: clamp(calc(24 * var(--u)), min(2.6vw, calc(37.44 * var(--u))), calc(40 * var(--u))); letter-spacing: -.045em; line-height: 1.1; max-width: 22ch; }
#footer .statement p em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; color: var(--lime); letter-spacing: -.01em; }
#footer .statement .row { display: flex; gap: calc(10 * var(--u)); flex-wrap: wrap; justify-content: flex-end; }
#footer .chip { display: inline-flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(10 * var(--u)) calc(16 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border-radius: calc(999 * var(--u)); background: #fff; color: var(--navy); font-weight: 700; font-size: calc(14 * var(--u)); }
#footer .chip .ic { width: calc(24 * var(--u)); height: calc(24 * var(--u)); }
#footer .chip.todo { background: transparent; color: var(--soft); border: 1.5px dashed var(--line); }
@media (max-width: 900px) { #footer .statement { grid-template-columns: 1fr; } #footer .statement .row { justify-content: flex-start; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01s !important; transition-delay: 0s !important; }
  #aanvragen .rise, #aanvragen .h .ln > span, #footer .rise { opacity: 1 !important; transform: none !important; }
}

/* =====================================================================
   Subpagina's (class .sp): label, kop met tekstmasker, verschijnen
   ===================================================================== */
.sp .lbl { font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); letter-spacing: .1em; text-transform: uppercase; display: inline-flex; gap: calc(9 * var(--u)); align-items: center; color: var(--soft); }
.sp .lbl i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--lime); display: inline-block; }
.sp.lt .lbl { color: var(--soft-dark); }
.sp .h { font-weight: 700; letter-spacing: -.05em; line-height: .88; }
.sp .h em { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; letter-spacing: -.02em; }
.sp .h .ln { display: block; overflow: hidden; padding: 0 .14em .22em .14em; margin: 0 -.14em -.22em -.14em; } /* ruimte links, rechts en onder: cursieve g, j, p en de laatste letter steken buiten de regel, anders knipt het masker ze af */
.sp .h .ln > span { display: inline-block; transform: translateY(135%); transition: transform 1.1s cubic-bezier(.2,.8,.2,1); }
.sp.in .h .ln > span { transform: none; }
.sp .h .ln:nth-child(2) > span { transition-delay: .1s; } .sp .h .ln:nth-child(3) > span { transition-delay: .2s; }
.sp .rise { opacity: 0; transform: translateY(calc(36 * var(--u))); transition: opacity 1s ease, transform 1.2s var(--ease); transition-delay: calc(.15s + var(--i, 0) * .08s); }
.sp.in .rise { opacity: 1; transform: none; }
.sp .glass { border: 1px solid rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)); backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); -webkit-backdrop-filter: blur(calc(22 * var(--u))) saturate(150%); }
.sp .pill { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); font-weight: 700; font-size: calc(15 * var(--u)); padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(7 * var(--u)) calc(20 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--lime); color: var(--navy); white-space: nowrap; }
.sp .pill .arr { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: var(--navy); color: var(--lime); display: grid; place-items: center; transition: transform .35s var(--ease); }
.sp .pill:hover .arr { transform: rotate(-45deg); }
.sp .ico { width: calc(15 * var(--u)); height: calc(15 * var(--u)); display: block; flex: none; }
.sp .g { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; }
.sp .stars { color: #f2b01e; letter-spacing: 1px; font-size: calc(14 * var(--u)); }
.sp .sec-h { font-size: clamp(calc(40 * var(--u)), min(5.2vw, calc(74.88 * var(--u))), calc(92 * var(--u))); margin-top: calc(18 * var(--u)); }

/* ===== Links naar een dienst in de tekst, met tooltip (secties met data-tips, zie base.js) ===== */
[data-tips] p a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(200,245,96,.6); text-underline-offset: calc(4 * var(--u)); text-decoration-thickness: 1px; transition: color .2s, text-decoration-color .2s; }
[data-tips] p a:hover { color: var(--lime); text-decoration-color: var(--lime); }
[data-theme="light"][data-tips] p a { color: var(--ink-dark); text-decoration-color: rgba(10,29,41,.35); }
[data-theme="light"][data-tips] p a:hover { color: var(--ink-dark); text-decoration-color: var(--ink-dark); }
.dsg-tip { position: fixed; z-index: 200; width: calc(260 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); border-radius: calc(14 * var(--u)); background: #fff; color: var(--ink-dark); box-shadow: 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(0,0,0,.3); pointer-events: none; opacity: 0; transform: translateY(calc(6 * var(--u))); transition: opacity .2s, transform .25s var(--ease); }
.dsg-tip.on { opacity: 1; transform: none; }
.dsg-tip .k { display: block; font-family: "Fragment Mono", monospace; font-size: calc(10.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; color: #5d6870; }
.dsg-tip b { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(6 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.03em; }
.dsg-tip b i { font-style: normal; flex: none; width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: var(--lime); color: var(--navy); display: grid; place-items: center; font-size: calc(13 * var(--u)); }
.dsg-tip .d { display: block; margin-top: calc(4 * var(--u)); font-size: calc(13.5 * var(--u)); line-height: 1.4; color: #3b4a54; }

/* =====================================================================
   Tegels "wat we doen" op de dienstpagina's (Tim, 12-10)
   Zes tegels met per onderdeel een weergave van wat we opleveren. De tegels zijn geen link; doorlinken
   gebeurt in de tekst (data-tips). .tegel.aan (base.js: hover, of op touch als hij in beeld is) zet de
   beweging in de weergave aan. Een weergave bestaat uit de bouwstenen hieronder (.wg-*), zodat een
   nieuwe pagina geen eigen CSS nodig heeft. Cijfers en namen in weergaven zijn voorbeelden.
   ===================================================================== */
.tegels { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(16 * var(--u)); }
.tegel { border-radius: var(--r); background: var(--navy-2); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; color: var(--ink); }
.tegel .vlak { height: calc(270 * var(--u)); padding: calc(26 * var(--u)) calc(26 * var(--u)) 0; background: radial-gradient(120% 100% at 50% 0%, #1b3c4b, var(--navy-2) 70%); display: flex; align-items: flex-start; justify-content: center; overflow: hidden; }
.tegel .vlak > .wg { min-height: 100%; }
.tegel .vlak { position: relative; }
.tegel .vlak::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(56 * var(--u)); background: linear-gradient(rgba(15,40,54,0), var(--navy-2)); pointer-events: none; z-index: 2; } /* zachte uitloop: wat onderaan uit beeld loopt, knipt niet midden door een regel (12-10) */
.tegel .tekst { padding: calc(22 * var(--u)) calc(26 * var(--u)) calc(26 * var(--u)); border-top: 1px solid var(--line); }
.tegel .tekst .n { font-family: "Fragment Mono", monospace; font-size: calc(12 * var(--u)); color: var(--lime); }
.tegel .tekst h3 { margin-top: calc(6 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 700; letter-spacing: -.045em; line-height: 1.05; }
.tegel .tekst p { margin-top: calc(8 * var(--u)); font-size: calc(15 * var(--u)); line-height: 1.5; color: var(--soft); }
@media (max-width: 1100px) { .tegels { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .tegels { grid-template-columns: 1fr; } .tegel .vlak { height: calc(240 * var(--u)); padding: calc(20 * var(--u)) calc(20 * var(--u)) 0; } }

/* De kaart */
.wg { width: 100%; border-radius: calc(16 * var(--u)) calc(16 * var(--u)) 0 0; background: #fff; color: var(--ink-dark); padding: calc(20 * var(--u)); font-size: calc(13 * var(--u)); line-height: 1.35; box-shadow: 0 calc(-10 * var(--u)) calc(40 * var(--u)) rgba(0,0,0,.25); }
.wg > * + * { margin-top: calc(12 * var(--u)); }
.wg .mono { font-family: "Fragment Mono", monospace; font-size: calc(10 * var(--u)); letter-spacing: .08em; text-transform: uppercase; }
.wg b { font-weight: 700; }
.wg-kop { display: flex; justify-content: space-between; align-items: center; gap: calc(10 * var(--u)); color: #5d6870; }
.wg-kop + * { margin-top: calc(16 * var(--u)); }
.wg-vb { font-family: "Fragment Mono", monospace; font-size: calc(9.5 * var(--u)); letter-spacing: .08em; text-transform: uppercase; padding: calc(3 * var(--u)) calc(7 * var(--u)); border-radius: calc(999 * var(--u)); background: #eef1f2; color: #5d6870; }
.wg-groot { font-size: calc(40 * var(--u)); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.wg-groot + .wg-klein { margin-top: calc(4 * var(--u)); }
.wg-klein { font-size: calc(12 * var(--u)); color: #5d6870; }
.wg-ic { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: var(--lime); flex: none; transition: background .4s, color .4s, border-color .4s; }
.wg-ic svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); display: block; }
.wg-ic.licht { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
.wg-av { width: calc(26 * var(--u)); height: calc(26 * var(--u)); border-radius: 50%; background: #16323f; color: #fff; display: grid; place-items: center; font-size: calc(10.5 * var(--u)); font-weight: 700; flex: none; }
.wg-av.lime { background: var(--lime); color: var(--navy); }

/* Chips; .kies wordt lime als de tegel aan staat, een voor een */
.wg-chips { display: flex; flex-wrap: wrap; gap: calc(6 * var(--u)); }
.wg-chip { display: inline-block; font-size: calc(11.5 * var(--u)); padding: calc(4 * var(--u)) calc(9 * var(--u)); border-radius: calc(999 * var(--u)); background: #eef1f2; white-space: nowrap; font-weight: 600; transition: background .3s, color .3s; }
.wg-chip.ja { background: var(--lime); }
.wg-chip.nee { background: #fde6e4; color: #8a1c13; }
.wg-chip.donker { background: var(--navy); color: #fff; }
.tegel.aan .wg-chip.kies { background: var(--lime); }
.tegel.aan .wg-chip.kies:nth-child(2) { transition-delay: .15s; } .tegel.aan .wg-chip.kies:nth-child(3) { transition-delay: .3s; } .tegel.aan .wg-chip.kies:nth-child(4) { transition-delay: .45s; } .tegel.aan .wg-chip.kies:nth-child(5) { transition-delay: .6s; } .tegel.aan .wg-chip.kies:nth-child(6) { transition-delay: .75s; }

/* Wissel: twee teksten op dezelfde plek, de tweede komt als de tegel aan staat */
.wg-wissel { display: inline-grid; }
.wg-wissel > * { grid-area: 1 / 1; transition: opacity .3s .8s; }
.wg-wissel > :last-child { opacity: 0; }
.tegel.aan .wg-wissel > :first-child { opacity: 0; }
.tegel.aan .wg-wissel > :last-child { opacity: 1; }

/* Rijen met label, eventueel een balk, en een waarde */
.wg-rijen > * + * { margin-top: 0; }
.wg-rij { display: flex; align-items: center; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) 0; border-top: 1px solid var(--line-light); }
.wg-rijen > .wg-rij:first-child { border-top: 0; padding-top: 0; }
.wg-rij > span:first-child:not(.wg-av):not(.wg-ic):not(.wg-vinkje):not(.wg-chip) { flex: 1; }
.wg-rij > :is(.wg-ic, .wg-av) + span:nth-last-child(2) { flex: 1; }
.wg-rij > .wg-chip:first-child { flex: none; min-width: 64px; text-align: center; }
.wg-rij .wg-meter { flex: 1.2; }
.wg-rij > b, .wg-rij > .waarde { margin-left: auto; font-size: calc(12.5 * var(--u)); text-align: right; white-space: nowrap; }
.wg-meter { display: block; height: calc(8 * var(--u)); border-radius: calc(8 * var(--u)); background: #eef1f2; overflow: hidden; min-width: calc(40 * var(--u)); }
.wg-meter i { display: block; height: 100%; width: var(--w); border-radius: calc(8 * var(--u)); background: var(--navy); transition: width 1s var(--ease), background .4s .4s; }
.wg-meter i.groen { background: #9fd13a; }
.wg-meter i.lime { background: var(--lime); }
.tegel.aan .wg-meter i { width: var(--w2, var(--w)); }
.tegel.aan .wg-meter i.wordt-groen { background: #9fd13a; }

/* Staafjes die golven */
.wg-staven { display: flex; align-items: end; gap: calc(6 * var(--u)); height: calc(74 * var(--u)); }
.wg-staven i { flex: 1; height: var(--h); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 2px 2px; background: #dfe5e8; transform-origin: bottom; }
.wg-staven i.hoog { background: var(--navy); }
.wg-staven i.lime { background: var(--lime); }
.tegel.aan .wg-staven i { animation: wg-golf 1.6s ease-in-out infinite; }
.tegel.aan .wg-staven i:nth-child(2) { animation-delay: .1s; } .tegel.aan .wg-staven i:nth-child(3) { animation-delay: .2s; } .tegel.aan .wg-staven i:nth-child(4) { animation-delay: .3s; } .tegel.aan .wg-staven i:nth-child(5) { animation-delay: .4s; } .tegel.aan .wg-staven i:nth-child(6) { animation-delay: .5s; } .tegel.aan .wg-staven i:nth-child(7) { animation-delay: .6s; } .tegel.aan .wg-staven i:nth-child(8) { animation-delay: .7s; }
@keyframes wg-golf { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.55); } 70% { transform: scaleY(1.08); } }
.wg-dagen { display: flex; gap: calc(6 * var(--u)); margin-top: calc(6 * var(--u)) !important; }
.wg-dagen span { flex: 1; text-align: center; font-family: "Fragment Mono", monospace; font-size: calc(9.5 * var(--u)); color: #8a959c; }

/* Afvinklijst: wat nog niet af is, wordt afgevinkt als de tegel aan staat */
.wg-vink { display: flex; gap: calc(10 * var(--u)); align-items: center; padding: calc(7 * var(--u)) 0; border-top: 1px solid var(--line-light); }
.wg-vink:first-child, .wg-kop + .wg-vink { border-top: 0; }
.wg-vinkje { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: calc(5 * var(--u)); border: 2px solid var(--navy); flex: none; position: relative; transition: background .25s; }
.wg-vinkje::after { content: ""; position: absolute; left: calc(4 * var(--u)); top: 0; width: calc(4 * var(--u)); height: calc(9 * var(--u)); border: solid var(--lime); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .3s var(--ease); }
.wg-vink.af .wg-vinkje, .tegel.aan .wg-vinkje { background: var(--navy); }
.wg-vink.af .wg-vinkje::after, .tegel.aan .wg-vinkje::after { transform: rotate(45deg) scale(1); }
.tegel.aan .wg-vink:not(.af) .wg-vinkje, .tegel.aan .wg-vink:not(.af) .wg-vinkje::after { transition-delay: .25s; }
.tegel.aan .wg-vink:not(.af) ~ .wg-vink:not(.af) .wg-vinkje, .tegel.aan .wg-vink:not(.af) ~ .wg-vink:not(.af) .wg-vinkje::after { transition-delay: .6s; }
.tegel.aan .wg-vink:not(.af) ~ .wg-vink:not(.af) ~ .wg-vink:not(.af) .wg-vinkje, .tegel.aan .wg-vink:not(.af) ~ .wg-vink:not(.af) ~ .wg-vink:not(.af) .wg-vinkje::after { transition-delay: .95s; }
.wg-uit { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(11 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #eef1f2; font-weight: 700; transition: background .3s .9s; }
.tegel.aan .wg-uit { background: var(--lime); }

/* Gesprek in stappen: de laatste stap wordt afgevinkt */
.wg-bel { display: flex; align-items: center; gap: calc(10 * var(--u)); padding-bottom: calc(12 * var(--u)); border-bottom: 1px solid var(--line-light); }
.wg-bel b { font-size: calc(14 * var(--u)); display: block; }
.wg-bel .tijd { margin-left: auto; font-family: "Fragment Mono", monospace; font-size: calc(11 * var(--u)); color: #5d6870; }
.wg-live { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #3cc46a; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(60,196,106,.18); flex: none; }
.tegel.aan .wg-live { animation: wg-puls 1.2s ease-in-out infinite; }
@keyframes wg-puls { 50% { box-shadow: 0 0 0 calc(8 * var(--u)) rgba(60,196,106,0); } }
.wg-stap { display: grid; grid-template-columns: calc(18 * var(--u)) 1fr; gap: calc(10 * var(--u)); }
.wg-stap .bol { width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; border: 2px solid var(--navy); margin-top: 2px; position: relative; transition: background .35s .35s; }
.wg-stap .bol::after { content: ""; position: absolute; left: calc(4 * var(--u)); top: 1px; width: calc(4 * var(--u)); height: calc(8 * var(--u)); border: solid var(--lime); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform .35s var(--ease) .45s; }
.wg-stap.klaar .bol, .tegel.aan .wg-stap.nu .bol { background: var(--navy); }
.wg-stap.klaar .bol::after, .tegel.aan .wg-stap.nu .bol::after { transform: rotate(45deg) scale(1); }
.wg-stap.klaar .bol, .wg-stap.klaar .bol::after { transition: none; }
.wg-bub { background: #f3f5f6; border-radius: calc(4 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(11 * var(--u)); line-height: 1.4; transition: background .4s .35s; }
.wg-bub .mono { display: block; font-size: calc(9.5 * var(--u)); color: #5d6870; margin-bottom: 2px; }
.wg-stap.nu .wg-bub { background: var(--lime); }
.tegel.aan .wg-stap.nu .wg-bub { background: #f3f5f6; }

/* Tijdlijn: het spoor loopt vol en de momenten lichten een voor een op (--n = aantal momenten) */
.wg-tijd { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); }
.wg-tijd .spoor { position: absolute; left: calc(15 * var(--u)); right: calc(100% / var(--n, 4)); top: calc(14 * var(--u)); height: 2px; background: #dfe5e8; }
.wg-tijd .spoor i { display: block; height: 100%; width: 0; background: var(--navy); transition: width 1.2s var(--ease); }
.tegel.aan .wg-tijd .spoor i { width: 100%; }
.wg-tijd .moment { position: relative; display: grid; justify-items: start; align-content: start; gap: calc(7 * var(--u)); padding-right: calc(8 * var(--u)); }
.wg-tijd .moment b { font-family: "Fragment Mono", monospace; font-size: calc(10.5 * var(--u)); font-weight: 400; color: #5d6870; }
.wg-tijd .moment span:last-child { font-size: calc(12 * var(--u)); line-height: 1.3; }
.tegel.aan .wg-tijd .wg-ic.licht { background: var(--navy); color: var(--lime); }
.tegel.aan .wg-tijd .moment:last-child .wg-ic { background: var(--lime); border-color: var(--lime); color: var(--navy); }
.tegel.aan .wg-tijd .moment:nth-child(3) .wg-ic { transition-delay: .3s; } .tegel.aan .wg-tijd .moment:nth-child(4) .wg-ic { transition-delay: .6s; } .tegel.aan .wg-tijd .moment:nth-child(5) .wg-ic { transition-delay: .9s; } .tegel.aan .wg-tijd .moment:nth-child(6) .wg-ic { transition-delay: 1.1s; }

/* Twee blokken met een verbinding: de stippellijn loopt, het vinkje springt */
.wg-paar { display: grid; grid-template-columns: 1fr calc(30 * var(--u)) 1fr; align-items: center; }
.wg-lijn { position: relative; height: 2px; }
.wg-lijn i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--navy) 0 calc(4 * var(--u)), transparent calc(4 * var(--u)) calc(8 * var(--u))); background-size: calc(8 * var(--u)) 2px; }
.tegel.aan .wg-lijn i { animation: wg-loop .6s linear infinite; }
@keyframes wg-loop { to { background-position: calc(8 * var(--u)) 0; } }
.wg-lijn::after { content: "\2713"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--lime); display: grid; place-items: center; font-size: calc(11 * var(--u)); font-weight: 700; }
.tegel.aan .wg-lijn::after { animation: wg-pop .9s var(--ease) infinite; }
@keyframes wg-pop { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 30% { transform: translate(-50%, -50%) scale(1.35); } }
.wg-blok { border-radius: calc(12 * var(--u)); border: 1px solid var(--line-light); padding: calc(10 * var(--u)) calc(11 * var(--u)); font-size: calc(12.5 * var(--u)); line-height: 1.3; }
.wg-blok .mono { display: block; font-size: calc(9 * var(--u)); color: #5d6870; margin-bottom: calc(4 * var(--u)); }
.wg-blok.donker { background: var(--navy); color: #fff; border-color: var(--navy); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); }
.wg-blok.donker .mono { color: var(--lime); }
.wg-blok.beeld { padding: 0; overflow: hidden; }
.wg-blok.beeld::before { content: ""; display: block; height: calc(46 * var(--u)); background: linear-gradient(135deg, #0f2836, #24495a); }
.wg-blok.beeld > * { padding: 0 calc(11 * var(--u)); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .wg-blok.beeld > :first-child { padding-top: calc(9 * var(--u)); } .wg-blok.beeld > :last-child { padding-bottom: calc(10 * var(--u)); }

/* Stroom van knopen: een stip reist langs de verbindingen */
.wg-stroom { display: flex; align-items: center; }
.wg-knoop { display: grid; justify-items: center; gap: calc(6 * var(--u)); text-align: center; font-size: calc(11.5 * var(--u)); line-height: 1.25; flex: none; width: calc(66 * var(--u)); }
.wg-knoop .wg-ic { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
.wg-knoop.eind .wg-ic { background: var(--lime); color: var(--navy); }
.wg-verb { flex: 1; height: 2px; background: #dfe5e8; position: relative; margin-bottom: calc(22 * var(--u)); min-width: calc(14 * var(--u)); }
.wg-verb::after { content: ""; position: absolute; top: calc(-3 * var(--u)); left: 0; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 2px var(--navy); opacity: 0; }
.tegel.aan .wg-verb::after { animation: wg-reis 1.4s ease-in-out infinite; }
.tegel.aan .wg-verb:nth-of-type(2)::after { animation-delay: .35s; } .tegel.aan .wg-verb:nth-of-type(3)::after { animation-delay: .7s; }
@keyframes wg-reis { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - calc(8 * var(--u))); opacity: 0; } }

/* Cijfertegels */
.wg-stats { display: flex; gap: calc(8 * var(--u)); }
.wg-stats > div { flex: 1; padding: calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #f3f5f6; }
.wg-stats b { display: block; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -.04em; }
.wg-stats span { font-size: calc(11 * var(--u)); color: #5d6870; }
.wg-stats .lime { background: var(--lime); }
.wg-stats .lime span { color: var(--navy); }

/* Zoekbalk met een knipperende cursor, en een advertentie of resultaat eronder */
.wg-zoek { display: flex; align-items: center; gap: calc(9 * var(--u)); padding: calc(9 * var(--u)) calc(13 * var(--u)); border-radius: calc(999 * var(--u)); border: 1px solid #dfe5e8; box-shadow: 0 2px calc(8 * var(--u)) rgba(10,29,41,.06); font-size: calc(13 * var(--u)); }
.wg-zoek svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); color: #5d6870; flex: none; }
.wg-zoek .cursor { width: 1.5px; height: calc(15 * var(--u)); background: var(--navy); margin-left: calc(-6 * var(--u)); opacity: 0; }
.tegel.aan .wg-zoek .cursor { animation: wg-knipper 1s steps(1) infinite; }
@keyframes wg-knipper { 50% { opacity: 1; } }
.wg-adv { padding: calc(11 * var(--u)) calc(13 * var(--u)); border-radius: calc(12 * var(--u)); border: 1.5px solid #eef1f2; transition: border-color .4s .2s, box-shadow .4s .2s; }
.tegel.aan .wg-adv { border-color: var(--lime); box-shadow: 0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(10,29,41,.08); }
.wg-adv .spons { font-size: calc(10.5 * var(--u)); font-weight: 700; }
.wg-adv .url { display: block; font-size: calc(11 * var(--u)); color: #5d6870; margin-top: 2px; }
.wg-adv b { display: block; margin-top: calc(4 * var(--u)); font-size: calc(14 * var(--u)); color: #1a4bb5; font-weight: 600; line-height: 1.25; }
.wg-adv p { margin-top: calc(4 * var(--u)); font-size: calc(11.5 * var(--u)); color: #3b4a54; line-height: 1.4; }

/* Post in een tijdlijn (Meta, LinkedIn, YouTube): de video loopt */
.wg-post { border-radius: calc(12 * var(--u)); border: 1px solid var(--line-light); overflow: hidden; }
.wg-post .kop { display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(9 * var(--u)) calc(11 * var(--u)); font-size: calc(12 * var(--u)); }
.wg-post .kop b { display: block; font-size: calc(12.5 * var(--u)); }
.wg-post .kop small { display: block; font-size: calc(10.5 * var(--u)); color: #5d6870; }
.wg-post .media { position: relative; height: calc(92 * var(--u)); background: linear-gradient(135deg, #0f2836, #2a5466 60%, #c8f560 180%); display: grid; place-items: center; }
.wg-post .media .speel { width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; color: var(--navy); transition: transform .4s var(--ease); }
.wg-post .media .speel svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); margin-left: 2px; }
.tegel.aan .wg-post .media .speel { transform: scale(.85); }
.wg-post .media .loop { position: absolute; left: 0; bottom: 0; height: calc(3 * var(--u)); width: 0; background: var(--lime); }
.tegel.aan .wg-post .media .loop { animation: wg-vol 4s linear infinite; }
@keyframes wg-vol { to { width: 100%; } }
.wg-post .media .tekst-op { position: absolute; left: calc(11 * var(--u)); bottom: calc(10 * var(--u)); right: calc(11 * var(--u)); color: #fff; font-weight: 700; font-size: calc(13 * var(--u)); line-height: 1.2; }
.wg-post .actie { display: flex; justify-content: space-between; align-items: center; padding: calc(8 * var(--u)) calc(11 * var(--u)); font-size: calc(11.5 * var(--u)); background: #f3f5f6; }
.wg-post .actie span:last-child { padding: calc(4 * var(--u)) calc(10 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--navy); color: #fff; font-weight: 600; }

/* Een chat: de vraag, een antwoord in regels, en wat eronder komt */
.wg-vraag { margin-left: auto; width: fit-content; max-width: 85%; padding: calc(8 * var(--u)) calc(12 * var(--u)); border-radius: calc(14 * var(--u)) calc(14 * var(--u)) calc(4 * var(--u)) calc(14 * var(--u)); background: #eef1f2; font-size: calc(12.5 * var(--u)); }
.wg-regels { display: grid; gap: calc(5 * var(--u)); }
.wg-regels i { display: block; height: calc(7 * var(--u)); border-radius: calc(4 * var(--u)); width: var(--w, 100%); background: linear-gradient(90deg, #e3e8eb 30%, #f3f5f6 50%, #e3e8eb 70%); background-size: 300% 100%; background-position: 100% 0; }
.tegel.aan .wg-regels i { animation: wg-glans 1.4s linear infinite; }
@keyframes wg-glans { to { background-position: -100% 0; } }

/* Kolommen met kaartjes (pipeline): het gemarkeerde kaartje schuift door naar de volgende kolom */
.wg-kolommen { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: calc(6 * var(--u)); }
.wg-kol { min-width: 0; border-radius: calc(8 * var(--u)); background: #f3f5f6; padding: calc(6 * var(--u)); display: grid; gap: calc(5 * var(--u)); align-content: start; min-height: calc(104 * var(--u)); }
.wg-kol > .mono { font-size: calc(8.5 * var(--u)); color: #5d6870; padding: 2px 2px calc(3 * var(--u)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-deal { border-radius: calc(6 * var(--u)); background: #fff; padding: calc(6 * var(--u)); font-size: calc(10.5 * var(--u)); line-height: 1.25; box-shadow: 0 1px 2px rgba(10,29,41,.08); }
.wg-deal b { display: block; font-size: calc(10.5 * var(--u)); }
.wg-deal.door { position: relative; z-index: 2; background: var(--lime); transition: transform .9s var(--ease) .1s; }
.tegel.aan .wg-deal.door { transform: translateX(calc(100% + calc(18 * var(--u)))); }

/* E-mail */
.wg-mail { border-radius: calc(12 * var(--u)); border: 1px solid var(--line-light); padding: calc(11 * var(--u)) calc(12 * var(--u)); }
.wg-mail .van { display: flex; align-items: center; gap: calc(8 * var(--u)); font-size: calc(11.5 * var(--u)); color: #5d6870; }
.wg-mail .van b { color: var(--ink-dark); }
.wg-mail .van .wg-chip { margin-left: auto; }
.wg-mail .onderwerp { display: block; margin-top: calc(8 * var(--u)); font-weight: 700; font-size: calc(13.5 * var(--u)); }
.wg-mail .wg-regels { margin-top: calc(9 * var(--u)); }

/* Meter in een ring; @property maakt het getal animeerbaar */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }
.wg-ring { --p: var(--p1); width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: 50%; display: grid; place-items: center; flex: none; background: conic-gradient(var(--kleur, #9fd13a) calc(var(--p) * 1%), #eef1f2 0); transition: --p 1.2s var(--ease); position: relative; }
.wg-ring::before { content: ""; position: absolute; inset: calc(8 * var(--u)); border-radius: 50%; background: #fff; }
.wg-ring > * { position: relative; font-size: calc(20 * var(--u)); font-weight: 700; letter-spacing: -.04em; }
.tegel.aan .wg-ring { --p: var(--p2, var(--p1)); }
.wg-naast { display: flex; gap: calc(16 * var(--u)); align-items: center; }
.wg-naast > :last-child { flex: 1; min-width: 0; }

/* Kaart met spelden */
.wg-kaart { position: relative; height: calc(104 * var(--u)); border-radius: calc(12 * var(--u)); overflow: hidden; background: #eef2f0; background-image: linear-gradient(#dfe7e3 1px, transparent 1px), linear-gradient(90deg, #dfe7e3 1px, transparent 1px), radial-gradient(60% 50% at 30% 60%, #d6e7dc, transparent), radial-gradient(40% 40% at 80% 30%, #dce6ee, transparent); background-size: calc(22 * var(--u)) calc(22 * var(--u)), calc(22 * var(--u)) calc(22 * var(--u)), 100% 100%, 100% 100%; }
.wg-kaart .speld { position: absolute; left: var(--x); top: var(--y); width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50% 50% 50% 0; background: var(--navy); transform: translate(-50%, -100%) rotate(-45deg) scale(.0); transition: transform .4s var(--ease); }
.wg-kaart .speld.vast { transform: translate(-50%, -100%) rotate(-45deg) scale(1); }
.wg-kaart .speld.lime { background: var(--lime); box-shadow: 0 0 0 2px var(--navy); }
.tegel.aan .wg-kaart .speld { transform: translate(-50%, -100%) rotate(-45deg) scale(1); }
.tegel.aan .wg-kaart .speld:nth-child(2) { transition-delay: .15s; } .tegel.aan .wg-kaart .speld:nth-child(3) { transition-delay: .3s; } .tegel.aan .wg-kaart .speld:nth-child(4) { transition-delay: .45s; } .tegel.aan .wg-kaart .speld:nth-child(5) { transition-delay: .6s; }

/* Tekst met markeringen die oplichten (een transcript, een klantvraag) */
.wg-citaat { font-size: calc(12.5 * var(--u)); line-height: 1.5; padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u)); background: #f3f5f6; }
.wg-citaat .mono { display: block; font-size: calc(9.5 * var(--u)); color: #5d6870; margin-bottom: calc(4 * var(--u)); }
.wg-citaat mark { background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 100% / 0% 100%; color: inherit; padding: 0 1px; transition: background-size .6s var(--ease); }
.tegel.aan .wg-citaat mark { background-size: 100% 100%; }
.tegel.aan .wg-citaat mark + mark, .tegel.aan .wg-citaat mark ~ mark { transition-delay: .35s; }

/* Twee varianten naast elkaar; de winnaar krijgt zijn label */
.wg-ab { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.wg-ab > div { position: relative; border-radius: calc(12 * var(--u)); border: 1.5px solid #eef1f2; padding: calc(11 * var(--u)); transition: border-color .4s .6s, background .4s .6s; }
.wg-ab .wg-groot { font-size: calc(28 * var(--u)); margin-top: calc(6 * var(--u)); }
.wg-ab .winnaar::after { content: "Winnaar"; position: absolute; top: calc(-9 * var(--u)); right: calc(9 * var(--u)); font-size: calc(10 * var(--u)); font-weight: 700; padding: calc(3 * var(--u)) calc(8 * var(--u)); border-radius: calc(999 * var(--u)); background: var(--navy); color: var(--lime); opacity: 0; transform: translateY(calc(4 * var(--u))); transition: opacity .3s .8s, transform .3s .8s; }
.tegel.aan .wg-ab .winnaar { border-color: var(--lime); background: #fbfef0; }
.tegel.aan .wg-ab .winnaar::after { opacity: 1; transform: none; }

/* Prijskolommen; de aanrader licht op */
.wg-prijzen { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--u)); }
.wg-prijzen > div { border-radius: calc(10 * var(--u)); border: 1.5px solid #eef1f2; padding: calc(9 * var(--u)) calc(8 * var(--u)); text-align: center; font-size: calc(11.5 * var(--u)); transition: border-color .4s .2s, transform .5s var(--ease) .2s, background .4s .2s; }
.wg-prijzen b { display: block; margin-top: calc(4 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 700; letter-spacing: -.03em; }
.wg-prijzen small { display: block; margin-top: calc(3 * var(--u)); font-size: calc(10 * var(--u)); color: #5d6870; }
.tegel.aan .wg-prijzen .aanrader { border-color: var(--navy); background: var(--lime); transform: translateY(calc(-4 * var(--u))); }

/* Producten met rendement */
.wg-producten { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(7 * var(--u)); }
.wg-prod { border-radius: calc(10 * var(--u)); border: 1.5px solid #eef1f2; overflow: hidden; font-size: calc(11 * var(--u)); transition: border-color .4s .3s; }
.wg-prod::before { content: ""; display: block; height: calc(44 * var(--u)); background: var(--bg, linear-gradient(135deg, #dfe5e8, #f3f5f6)); }
.wg-prod > * { display: block; padding: 0 calc(7 * var(--u)); }
.wg-prod b { margin-top: calc(6 * var(--u)); font-size: calc(11.5 * var(--u)); }
.wg-prod > :last-child { padding-bottom: calc(7 * var(--u)); margin-top: calc(5 * var(--u)); }
.tegel.aan .wg-prod.top { border-color: var(--lime); }

@media (prefers-reduced-motion: reduce) {
  .tegel.aan .wg *, .tegel.aan .wg *::after { animation: none !important; }
}

/* =====================================================================
   Hoverronde 12-10 (designated/website/2026-10-12-hover-analyse.md)
   Regel: tekst beweegt nooit bij hover. Wat beweegt is een lijn, een pijl, een beeld binnen
   zijn kader, een kleur of een rand. De lijn zit in een ::after, zodat de eigen transition van
   elementen met .rise (inschuiven bij scrollen) intact blijft.
   ===================================================================== */

/* Tekstlinks met pijl ("Alle cases →"): onderlijn groeit van links, zoals in de footer */
.sec-top > a.link, #inzichten a.all, #art-more .top > a, #cd-next .top > a, #team .links a, .sp a.more,
#cases .scard .panel .row a, #zo-werkt-het span > a { position: relative; }
.sec-top > a.link::after, #inzichten a.all::after, #art-more .top > a::after, #cd-next .top > a::after, #team .links a::after, .sp a.more::after,
#cases .scard .panel .row a::after, #zo-werkt-het span > a::after { content: ""; position: absolute; left: 0; right: 0; bottom: var(--lijn-y, -1px); height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .35s var(--ease); pointer-events: none; }
.sec-top > a.link:hover::after, #inzichten a.all:hover::after, #art-more .top > a:hover::after, #cd-next .top > a:hover::after, #team .links a:hover::after, .sp a.more:hover::after,
#cases .scard .panel .row a:hover::after, #zo-werkt-het span > a:hover::after { transform: scaleX(1); }
/* Zonder eigen lijn: de groeiende lijn iets onder de tekst */
#cases .scard .panel .row a, #zo-werkt-het span > a { --lijn-y: calc(-3 * var(--u)); }

/* Ghostknoppen buiten de hero ("Of bel 085 ..."): rand licht op, zoals de ghost in de hero */
.sp a.ghost { position: relative; }
.sp a.ghost::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; opacity: 0; transition: opacity .3s; pointer-events: none; }
.sp a.ghost:hover::after { opacity: 1; }

/* Losse tekstlinks in lopende tekst (secties zonder data-tips): tekst en onderlijn naar volle kleur.
   :where() houdt de specificiteit laag, zodat eigen hoverregels van een pagina voorgaan. */
:where(.sp:not([data-tips])) p a:where(:not([class])), :where(.sp) a.tl { transition: color .25s, border-color .25s, text-decoration-color .25s; }
:where(.sp:not([data-tips])) p a:where(:not([class])):hover, :where(.sp) a.tl:hover { color: rgb(from currentColor r g b / 1); border-bottom-color: currentColor; text-decoration-color: currentColor; }
/* Telefoon en mail van Tim bij solliciteren: de paginaregel zet de lijn met een ID, dus hier ook */
#sparren.spar a { transition: color .25s, border-color .25s; }
#sparren.spar a:hover { color: var(--lime); border-bottom-color: var(--lime); }
/* FAQ-antwoorden hadden geen enkele onderlijn: herkenbaar maken als link */
:where(.sp:not([data-tips]) .qa .a) p a:where(:not([class])) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: calc(4 * var(--u)); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }

/* Kruimelpad op /insights/ en /over-ons/: zelfde kleurwissel als elders */
#ins-hero .crumb a, #ab-hero .crumb a { transition: color .2s; }
#ins-hero .crumb a:hover, #ab-hero .crumb a:hover { color: var(--ink); }

/* Videoknoppen (glas): vlak licht op */
button.play.glass { transition: background-color .3s, border-color .3s; }
button.play.glass:hover { background-color: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); }

/* "Solliciteer" in de balk: pijlcirkel draait */
.applybar a i { transition: transform .35s var(--ease); }
.applybar a:hover i { transform: rotate(-45deg); }


/* =====================================================================
   Paginaovergangen (assets/js/overgangen.js). A bij de cases: het beeld van
   de kaart groeit door tot de hero van de casepagina. B tussen alle andere
   pagina's: rustig schuiven, bij terug de andere kant op.
   ===================================================================== */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
@keyframes vtUit { to { opacity: 0; } }
@keyframes vtIn { from { opacity: 0; } }
/* 02-11: achter de overgang de lichte achtergrond in plaats van het navy van body. Anders kleurt de pagina
   tijdens het overvloeien grijs, en tekent zich rond de navigatiepil een lichter kader af (het vlak van zijn
   momentopname). Glitch uit het overleg van 28-10. */
html.vt::view-transition { background: var(--light); }
/* De navigatie blijft bij beide overgangen gewoon staan */
html.vt .nav { view-transition-name: dsg-nav; }
/* 02-11: niet laten overvloeien. Oud en nieuw zijn bijna gelijk; bij overvloeien zakte de tekst in de pil even weg */
::view-transition-old(dsg-nav) { animation: none; opacity: 0; }
::view-transition-new(dsg-nav) { animation: none; }
/* 03-11: naar een casepagina wisselt de pil van licht naar donker. Niet meteen bij de klik (dan flitst er een donkere
   pil boven de lichte pagina), maar pas als het beeld bijna de hele hero vult */
@keyframes vtNavUit { from { opacity: 1; } to { opacity: 0; } }
html.vt-case::view-transition-old(dsg-nav) { animation: .2s .25s ease-out both vtNavUit; }
html.vt-case::view-transition-new(dsg-nav) { animation: .2s .25s ease-out both vtIn; }
/* Oude en nieuwe pagina overlappen, zodat er geen moment met een leeg (navy) scherm tussen zit */
html.vt-case::view-transition-old(root) { animation: .45s ease-out both vtUit; }
html.vt-case::view-transition-new(root) { animation: .45s .2s ease-out both vtIn; }
/* Uitlopende curve: het beeld komt direct na de klik in beweging en landt rustig, zonder aanloop */
::view-transition-group(case-beeld) { animation-duration: .7s; animation-timing-function: cubic-bezier(.22, 1, .36, 1); }
::view-transition-old(case-beeld), ::view-transition-new(case-beeld) { width: 100%; height: 100%; object-fit: cover; overflow: clip; }
::view-transition-old(case-beeld) { animation: .35s ease-out both vtUit; }
::view-transition-new(case-beeld) { animation: none; }
/* 03-11: is het nieuwe beeld nog niet geladen, dan blijft het oude (de kaartfoto) staan in plaats van weg te vloeien naar een leeg navy vlak */
html.vt-laadt::view-transition-old(case-beeld) { animation: none; }
/* Naar een casepagina: het beeld krijgt onderweg al de verloopschaduw van de hero (als masker op navy),
   en de tekst van de hero ligt erboven, anders springt hij aan het eind ineens over het beeld heen */
html.vt-hero::view-transition-group(case-beeld) { background: #0a1d29; }
html.vt-hero::view-transition-new(case-beeld) {
  -webkit-mask-image: linear-gradient(0deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.45) 100%), linear-gradient(90deg, rgba(0,0,0,.5), #000 60%);
  mask-image: linear-gradient(0deg, rgba(0,0,0,.03) 0%, rgba(0,0,0,.16) 30%, rgba(0,0,0,.6) 62%, rgba(0,0,0,.45) 100%), linear-gradient(90deg, rgba(0,0,0,.5), #000 60%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
html.vt-hero #cd-hero .crumb { view-transition-name: case-kruim; }
html.vt-hero #cd-hero .tags { view-transition-name: case-tags; }
html.vt-hero #cd-hero .row { view-transition-name: case-rij; }
html.vt-hero #cd-hero .play { view-transition-name: case-knop; }
html.vt-hero::view-transition-new(case-kruim), html.vt-hero::view-transition-new(case-tags),
html.vt-hero::view-transition-new(case-rij), html.vt-hero::view-transition-new(case-knop) { animation: .4s .3s ease-out both vtIn; }

/* B · Rustig schuiven: de oude pagina wijkt, de nieuwe schuift op zijn plek. Bij terug omlaag. */
@keyframes vtUitOp { to { opacity: 0; transform: translateY(-40px); } }
@keyframes vtInOp { from { opacity: 0; transform: translateY(70px); } }
@keyframes vtUitNeer { to { opacity: 0; transform: translateY(40px); } }
@keyframes vtInNeer { from { opacity: 0; transform: translateY(-70px); } }
html.vt-schuif::view-transition-old(root),
html.vt-schuif::view-transition-old(case-beeld) { animation: .4s cubic-bezier(.4, 0, 1, 1) both vtUitOp; }
html.vt-schuif::view-transition-new(root) { animation: .75s .2s cubic-bezier(0, 0, .15, 1) both vtInOp; }
html.vt-schuif.vt-terug::view-transition-old(root),
html.vt-schuif.vt-terug::view-transition-old(case-beeld) { animation-name: vtUitNeer; }
html.vt-schuif.vt-terug::view-transition-new(root) { animation-name: vtInNeer; }

/* SEO-pagina's uit parts/seo-generiek.php: de zwevende kaartjes in de hero onderin de foto, zodat ze
   geen gezichten bedekken (de mensen op de fotoshootbeelden staan bijna altijd in het bovenste deel).
   Alleen desktop en tablet; onder 561px gelden de regels uit de bundel. (03-11-2026) */
@media (min-width: 561px) {
  #sp-hero.sg-hero .fc.q { top: auto; bottom: 20%; }
  #sp-hero.sg-hero .fc.d { top: auto; bottom: 5%; }
}

/* Hero van de dienstpagina's op mobiel (feedback Tim 03-11): de kaartjes liggen niet meer over de foto (ze vielen
   over hoofden en lijnden niet uit), maar staan onder de foto, even breed en netjes onder elkaar.
   Overschrijft de posities per pagina (left/top/bottom/width in de pagina-CSS), vandaar de !important. */
@media (max-width: 560px) {
  #sp-hero .vis { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: calc(10 * var(--u)); }
  #sp-hero .vis .frame { position: relative !important; inset: auto !important; aspect-ratio: 4 / 3.3; clip-path: inset(0 round calc(var(--r) * 1.3)) !important; }
  #sp-hero .vis .fc { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; max-width: none !important; margin: 0; }
  #sp-hero .vis .fc.glass { background: var(--navy); border-color: var(--navy); backdrop-filter: none; -webkit-backdrop-filter: none; }
  /* Rijen met een balkje: vaste kolom rechts, zodat alle balkjes even lang zijn */
  #sp-hero .vis .fc li:has(> i) { grid-template-columns: calc(78 * var(--u)) 1fr calc(76 * var(--u)) !important; }
  #sp-hero .vis .fc li:has(> i) > b { text-align: right; }
}

/* Koppen op mobiel (feedback Tim 03-11): de regels van een kop (.ln) zijn op desktop vaste regels. Op een smal scherm
   mogen regels die samen passen naast elkaar staan, zodat er geen los woord ("Ads.") op een eigen regel valt.
   inline-block houdt het tekstmasker van de onthulling per regel intact. */
@media (max-width: 560px) {
  .h .ln, h1 .ln, h2 .ln { display: inline-block !important; vertical-align: top; }
}