/* Padexis LP2 (/hal-businesscase) — overgenomen uit created/landing-pages/design/2026-09-21-lp2-hal-businesscase-design.html.
   Bron is het design-bestand in de workspace; pas daar aan en zet opnieuw over. */
/* ==========================================================================
   PADEXIS — DESIGNSYSTEEM, richting: architectuur-monografie
   Tokens en regels komen uit context/design-system.md. Wijkt dit bestand daarvan
   af, dan wint design-system.md. Klassen zijn ongewijzigd overgenomen uit de
   wireframe, zodat de structuur van fase 1 en de ACF-blokken van fase 3 blijven
   aansluiten.
   ========================================================================== */

:root{
  /* neutralen — blauwgetint, familie van de merk-navy */
  --n-0:#ffffff;
  --n-25:#fbfcfd;
  --n-50:#f5f7f9;
  --n-100:#eaeef2;
  --n-200:#e2e8ee;
  --n-300:#c2cad4;
  --line-field:#7c8798;  /* 3,6:1 op wit — veld- en keuzeranden, WCAG 1.4.11 */
  --n-400:#7c8798;   /* nooit bodytekst — 3.6:1 */
  --n-600:#566173;   /* captions — 6.3:1 */
  --n-800:#1e293f;   /* body — 14.5:1 */
  --n-900:#021126;   /* koppen — 18.9:1 */

  /* merk */
  --brand:#021126;
  --brand-ink:#ffffff;
  --brand-ink-quiet:#aab6c6;
  --accent:#d8ea58;
  --accent-ink:#021126;
  --accent-hover:#c8dc3e;
  /* hero-verloop: twee lichtere navy's boven --brand */
  --brand-gloed:#16355f;   /* de gloed rechtsboven in de hero */
  --brand-boven:#08203f;   /* bovenkant van het verticale verloop */
  --line-ink:rgba(255,255,255,.16);

  --err:#b3261e;  --err-bg:#fdf3f2;
  --ok:#1a7f4b;      /* 5.1:1 op wit — vinkje in de vergelijking */
  --nok:#b3261e;     /* 6.5:1 op wit — kruisje in de vergelijking */
  --deels:#b45309;
  /* op navy halen --nok en --deels maar 2,8:1; dit zijn de lichtere varianten */
  --nok-ink:#ff9e93;       /* 9,2:1 op navy */
  --deels-ink:#f0b429;     /* 9,9:1 op navy */   /* 5.0:1 op wit — streepje: wel iets, maar niet volledig.
                        Amber en geen oranjerood, anders staat hij te dicht op --nok */
  --focus:#021126;
  --focus-on-ink:#d8ea58;

  /* spacing — basis 4px, ongewijzigd */
  --s-3xs:4px; --s-2xs:8px; --s-xs:12px; --s-s:16px; --s-m:24px;
  --s-l:32px;  --s-xl:48px; --s-2xl:64px; --s-3xl:96px; --s-4xl:128px;

  /* ritme — ruimer dan de wireframe */
  --r-tight:clamp(40px, 6vw, 64px);
  --r-base:clamp(64px, 9vw, 104px);
  --r-loose:clamp(88px, 12vw, 152px);

  /* typografie */
  --font:"Raleway","Helvetica Neue",Arial,sans-serif;
  --t-caption:13px;
  --t-xs:13px;              /* alias, wireframe gebruikt deze naam */
  --t-s:15px;
  --t-base:18px;
  --t-lead:21px;
  --t-h3:21px;
  --t-h2:clamp(28px, 1.1rem + 2.1vw, 40px);
  --t-h1:clamp(34px, 1.3rem + 3.1vw, 56px);
  --t-display:clamp(40px, 1.5rem + 4.4vw, 76px);
  --t-stat:clamp(32px, 1.2rem + 2.6vw, 44px);

  /* breedtes — smalle tekstkolom */
  --w-narrow:680px;
  --w-base:1100px;
  --w-wide:1400px;

  /* vorm */
  --radius-s:2px;
  --radius-m:4px;
  --radius-l:8px;
  --radius:4px;             /* alias */
  --shadow-sticky:0 -1px 0 var(--n-200), 0 -8px 24px rgba(2,17,38,.06);

  /* motion */
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur-hover:160ms;
  --dur-reveal:520ms;
  --gutter:var(--s-l);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
body{
  margin:0;
  font-family:var(--font);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.65;
  color:var(--n-800);
  background:var(--n-0);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* --------------------------------------------------------------------------
   TYPOGRAFIE
   -------------------------------------------------------------------------- */
h1,h2,h3{margin:0;color:var(--n-900);text-wrap:balance;font-weight:600}
h1{font-size:var(--t-h1);font-weight:700;line-height:1.06;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:1.12;letter-spacing:-.015em}
h3{font-size:var(--t-h3);line-height:1.25;letter-spacing:-.005em}
p{margin:0;text-wrap:pretty}
/* Grootste waarde op de pagina, maximaal één keer. Voor het cijfer of het woord dat de
   bezoeker komt halen — nooit voor een kop en niet voor de hero. Zie design-system.md §3. */
.display{font-size:var(--t-display);font-weight:700;line-height:1.02;letter-spacing:-.025em}

/* De eyebrow krijgt een korte streep erboven. Dat is het monografie-signaal:
   een sectie kondigt zichzelf aan met een liniaal, niet met een kleurvlak. */
.eyebrow{
  font-size:var(--t-caption);font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n-600);
}
.eyebrow::before{
  content:"";display:block;width:32px;height:2px;
  background:var(--n-900);margin-bottom:var(--s-s);
}
.lead{font-size:var(--t-lead);line-height:1.5;color:var(--n-800);font-weight:400}
.small{font-size:var(--t-s)}
.caption{font-size:var(--t-caption);line-height:1.45;color:var(--n-600);max-width:62ch}
.muted{color:var(--n-800)}
.measure{max-width:34em}

.wrap a:not(.btn){
  color:inherit;text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--n-300);
  transition:text-decoration-color var(--dur-hover) var(--ease);
}
.wrap a:not(.btn):hover{text-decoration-color:currentColor}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-s);
}
.block--ink a:focus-visible,.block--ink button:focus-visible{outline-color:var(--focus-on-ink)}

/* --------------------------------------------------------------------------
   SECTIES
   -------------------------------------------------------------------------- */
.block{padding-block:var(--r-base)}
.block--tight{padding-block:var(--r-tight)}
.block--loose{padding-block:var(--r-loose)}

.block--n0{background:var(--n-0)}
.block--n50{background:var(--n-50)}
.block--n100{background:var(--n-100);border-block:1px solid var(--n-200)}  /* echt een derde tint; stond op --n-50 en was dus niet van block--n50 te onderscheiden */
.block--ink{background:var(--brand);color:var(--brand-ink-quiet)}
.block--ink h1,.block--ink h2,.block--ink h3,.block--ink .display{color:var(--brand-ink)}
.block--ink .eyebrow{color:var(--brand-ink-quiet)}
.block--ink .eyebrow::before{background:var(--accent)}
.block--ink .caption{color:var(--brand-ink-quiet)}
.block--ink .lead,.block--ink .muted{color:var(--brand-ink)}

.wrap{width:100%;max-width:var(--w-base);margin-inline:auto;padding-inline:var(--s-m)}
.wrap--narrow{max-width:var(--w-narrow)}
.wrap--wide{max-width:var(--w-wide)}
.wrap--full{max-width:none;padding-inline:0}

/* --------------------------------------------------------------------------
   LAYOUT-PRIMITIEVEN — ongewijzigd overgenomen
   -------------------------------------------------------------------------- */
.stack{display:flex;flex-direction:column;gap:var(--s-m)}
.stack--tight{gap:var(--s-s)}
.stack--loose{gap:var(--s-xl)}

.split{display:grid;gap:clamp(var(--s-l),5vw,var(--s-3xl));align-items:center}
.split--5050{grid-template-columns:1fr 1fr}
.split--6040{grid-template-columns:6fr 4fr}
.split--4060{grid-template-columns:4fr 6fr}
.split--5545{grid-template-columns:55fr 45fr}
.split--top{align-items:start}
.split--flip > :first-child{order:2}
.split > *,.grid > *{min-width:0}

.grid{display:grid;gap:var(--gutter)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:860px){.grid--3{grid-template-columns:1fr}}
.grid--4{grid-template-columns:repeat(4,1fr)}

.rail{display:flex;gap:var(--s-xl);align-items:flex-start;flex-wrap:wrap}
.rail > *{flex:1 1 0;min-width:min(100%,14rem)}
/* Onder 1088px past een rij van vier niet meer: hij brak naar 3 + 1, met een
   hairline over de volle breedte onder de eenzame vierde. Twee bij twee. */
/* --------------------------------------------------------------------------
   STICKY CONVERSIEBALK — design-system.md §4
   Wit met --shadow-sticky, alleen onder 900px, verschijnt na 40% scrolldiepte.
   Toevoeging op de spec: hij verdwijnt zodra een conversieblok in beeld staat.
   Zonder dat dekt hij op een telefoon precies de knop af die hij aanprijst.
   -------------------------------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--n-0);box-shadow:var(--shadow-sticky);
  padding:var(--s-2xs) var(--gutter);
  padding-bottom:calc(var(--s-2xs) + env(safe-area-inset-bottom, 0px));
}
.sticky-cta[hidden]{display:none}
.sticky-cta__wrap{
  display:flex;align-items:center;gap:var(--s-s);
  max-width:var(--w-base);margin-inline:auto;
}
.sticky-cta__tekst{
  flex:1 1 auto;min-width:0;margin:0;
  font-size:var(--t-s);font-weight:600;line-height:1.25;color:var(--n-900);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sticky-cta .btn{flex:0 0 auto;white-space:nowrap}
@media (min-width:901px){.sticky-cta{display:none}}
/* Onder 560px is er geen ruimte meer voor label en knop naast elkaar: het label
   viel over drie regels uiteen en maakte de balk twee keer zo hoog. Knop alleen. */
@media (max-width:560px){
  .sticky-cta__tekst{display:none}
  .sticky-cta .btn{flex:1 1 auto;text-align:center}
}

@media (max-width:1088px){
  .rail{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-l) var(--s-xl)}
  .rail > *{min-width:0}
}
@media (max-width:520px){.rail{grid-template-columns:1fr}}
.bleed{width:100%}
.sticky{position:sticky;top:var(--s-m)}

/* --------------------------------------------------------------------------
   KNOPPEN
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:fit-content;padding:16px 28px;
  background:var(--accent);color:var(--accent-ink);
  font-family:inherit;font-size:var(--t-base);font-weight:600;line-height:1.2;
  letter-spacing:-.005em;
  border:0;border-radius:var(--radius-m);text-decoration:none;cursor:pointer;
  transition:background var(--dur-hover) var(--ease),transform var(--dur-hover) var(--ease);
}
.btn:hover{background:var(--accent-hover);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;color:var(--n-900);
  box-shadow:inset 0 0 0 1px var(--line-field);
}
.btn--ghost:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--n-900);transform:translateY(-1px)}
.btn--block{width:100%}
.block--ink .btn{background:var(--accent);color:var(--accent-ink)}
.block--ink .btn--ghost{background:transparent;color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--line-ink)}
.btn-note{display:block;font-size:var(--t-caption);line-height:1.45;color:var(--n-600);margin-top:var(--s-2xs)}
/* In een formulierkader staat de knop over de volle breedte; de regels eronder staan dan gecentreerd onder de knop. */
.form .btn-note{text-align:center}
.btn-note a{color:var(--n-800)}
/* Op navy zakt --n-600 naar 3.0:1. Microcopy onder een CTA is klein en moet leesbaar
   blijven, dus die volgt hier de tekstkleur van de donkere grond. */
.block--ink .btn-note{color:var(--brand-ink-quiet)}
.block--ink .btn-note a{color:var(--brand-ink)}

/* --------------------------------------------------------------------------
   KAART — geen doos. Een tekstblok met een liniaal erboven.
   -------------------------------------------------------------------------- */
.card{
  background:none;border:0;border-top:1px solid var(--n-300);
  border-radius:0;padding:var(--s-m) 0 0;
  display:flex;flex-direction:column;gap:var(--s-2xs);
}
.block--n0 .card{background:none}
.card h3{letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   BEELDVLAKKEN — placeholder tot de shoot van 11 september
   -------------------------------------------------------------------------- */
.ph{
  position:relative;display:flex;align-items:flex-end;
  aspect-ratio:var(--ph-ratio,3/2);
  padding:var(--s-m);
  background:var(--n-100);
  border-radius:var(--radius-l);
  overflow:hidden;
  font-size:var(--t-caption);line-height:1.4;font-weight:500;
  letter-spacing:.04em;text-transform:uppercase;color:var(--n-600);
}
.ph::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(135deg,transparent 49.6%,var(--n-200) 49.6%,var(--n-200) 50.4%,transparent 50.4%);
  opacity:.85;
}
.ph::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(2,17,38,.06);
}
.ph > *{position:relative}
.ph--1x1{--ph-ratio:1/1}
.ph--4x3{--ph-ratio:4/3}
.ph--3x2{--ph-ratio:3/2}
.ph--16x9{--ph-ratio:16/9}
.ph--21x9{--ph-ratio:21/9}
.ph--portret{--ph-ratio:3/4}
.ph--vrij{aspect-ratio:auto;min-height:220px}

/* --------------------------------------------------------------------------
   HERO — het enige beeld dat de volle breedte pakt
   -------------------------------------------------------------------------- */
/* Geen navigatie op deze pagina, wel de balk waar die hoort: het logo staat
   bovenin, uitgelijnd op dezelfde marge als de kop eronder. Absoluut, zodat het
   boven de ruime hero-padding uit komt in plaats van erin mee te schuiven. */
.hero-nav{
  position:absolute;top:0;left:0;right:0;z-index:2;
  padding:var(--s-s) var(--s-m);
}
.hero-logo{margin:0;width:fit-content}
.hero-logo img{width:clamp(130px,14vw,168px);height:auto}
.hero-bleed{position:relative;isolation:isolate;overflow:hidden}
.hero-bleed .wrap{position:relative}
.hero-bleed .ph{
  position:absolute;inset:0;z-index:-1;border-radius:0;padding:0;
  background:
    /* rgba(22,53,95,0) is --brand-gloed op alpha 0; een var kan die alpha-variant niet
       dragen zonder color-mix, en dat is het hier niet waard. Waarde meeveranderen. */
    radial-gradient(120% 90% at 72% 18%, var(--brand-gloed) 0%, rgba(22,53,95,0) 62%),
    linear-gradient(180deg,var(--brand-boven) 0%,var(--brand) 78%);
}
.hero-bleed .ph::before{
  background:linear-gradient(90deg,rgba(2,17,38,.72) 0%,rgba(2,17,38,.34) 62%,rgba(2,17,38,.55) 100%);
  opacity:1;
}
.hero-bleed .ph::after{box-shadow:none}

/* --------------------------------------------------------------------------
   FORMULIER — de enige component die wél een omranding krijgt
   -------------------------------------------------------------------------- */
.form{
  display:flex;flex-direction:column;gap:var(--s-s);
  background:var(--n-0);border:1px solid var(--n-200);
  border-radius:var(--radius-l);padding:clamp(var(--s-m),3vw,var(--s-l));
}
.block--n0 .form{background:var(--n-0)}
.field{display:flex;flex-direction:column;gap:var(--s-3xs)}
.field label{font-size:var(--t-s);font-weight:600;color:var(--n-900);letter-spacing:0}
.field input,.field textarea,.field select{
  font-family:inherit;font-size:var(--t-base);color:var(--n-900);
  height:48px;padding:0 var(--s-s);max-width:100%;
  background:var(--n-0);
  border:1px solid var(--line-field);border-radius:var(--radius-m);
  transition:border-color var(--dur-hover) var(--ease);
}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--n-600) 50%),
                   linear-gradient(135deg,var(--n-600) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
  padding-right:44px;
}
.field textarea{min-height:110px;height:auto;padding:var(--s-xs) var(--s-s);resize:vertical}
.field input:not([type="range"]):hover,.field select:hover,.field textarea:hover{border-color:var(--n-600)}
.field input:not([type="range"]):focus,.field select:focus,.field textarea:focus{border-color:var(--n-900)}
.field--err input,.field--err select{border-color:var(--err);background:var(--err-bg)}
.field__err{font-size:var(--t-s);color:var(--err)}

/* --------------------------------------------------------------------------
   LIJSTEN
   -------------------------------------------------------------------------- */
.ticks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s-s)}
.ticks li{position:relative;padding-left:36px}
/* Het vinkje is een merkteken: een lime schijf met een navy haakje erin. De lime
   draagt de huisstijl, het haakje draagt de informatie. Lime als kaal lijntje kan
   niet - #d8ea58 op wit is 1.3:1 en dus onzichtbaar; navy op lime is 13.9:1.
   Dezelfde schijf werkt ongewijzigd op de navy secties. */
/* Schijf en haakje zijn één element: de lime schijf is de achtergrondkleur, het
   haakje een SVG in de achtergrond met background-position:center. Daarmee kan het
   haakje niet meer uit het midden lopen - het IS de achtergrond van de schijf. Als
   twee losse pseudo-elementen liep het per rij een fractie uit elkaar, en dat zag je.
   Het haakje staat in de SVG een halve eenheid boven het meetkundig midden: de lange
   arm loopt naar rechtsboven, dus optisch valt het anders te laag uit.
   De kleur #021126 is --accent-ink; een CSS-variabele kan niet in een data-URI. */
.ticks li::before{
  content:"";position:absolute;left:0;top:calc(.82em - 11px);
  width:22px;height:22px;border-radius:50%;
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 5.7 5 8.2 9.4 3.4' fill='none' stroke='%23021126' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:15px 15px;
}

/* Het vinkje betekende vier dingen tegelijk: een voordeel, een probleem en een taak van de
   lezer. Twee varianten erbij, met een vormverschil zodat het ook zonder kleurwaarneming
   werkt — hetzelfde principe als de vergelijkingslijst. Deze staan bewust NA de basisregel:
   bij gelijke specificiteit wint de laatste, en ervoor deden ze niets. */
.ticks--feit li::before{
  background-color:transparent;background-image:none;
  top:calc(.82em - 2px);left:2px;width:18px;height:3px;border-radius:0;
  background:var(--n-400);
}
.ticks--taak li::before{
  background-color:transparent;background-image:none;
  box-shadow:inset 0 0 0 2px var(--n-600);
}
.ticks li strong{color:var(--n-900);font-weight:600}
.block--ink .ticks li strong{color:var(--brand-ink)}

/* De hero-opsomming: compacter dan de lijsten in de body, want hij staat onder
   een H1 en een lead en mag de knop niet wegduwen. */
.hero-usp{display:flex;flex-direction:column;gap:var(--s-2xs)}
.hero-usp__kop{margin:0;font-size:var(--t-s);font-weight:700;letter-spacing:.01em;color:var(--brand-ink)}
.ticks--compact{gap:var(--s-2xs)}
.block--ink .hero-usp .ticks li{color:var(--brand-ink)}

.step-no{
  display:flex;align-items:center;justify-content:center;width:38px;height:38px;
  border:1px solid var(--n-300);border-radius:50%;
  font-size:var(--t-s);font-weight:600;color:var(--n-900);
}
.block--ink .step-no{border-color:var(--line-ink);color:var(--brand-ink)}

/* --------------------------------------------------------------------------
   CIJFERS
   -------------------------------------------------------------------------- */
.stat{display:flex;flex-direction:column;gap:var(--s-2xs);
  padding-top:var(--s-m);border-top:1px solid var(--line-ink)}
.stat__value{
  font-size:var(--t-stat);font-weight:700;line-height:1;letter-spacing:-.025em;
  color:var(--n-900);
}
.block--ink .stat__value{color:var(--brand-ink)}
.stat__label{font-size:var(--t-s);line-height:1.4;color:var(--n-600)}
.block--ink .stat__label{color:var(--brand-ink-quiet)}

/* --------------------------------------------------------------------------
   QUOTE — geen kaart, een liniaal links
   -------------------------------------------------------------------------- */
.quote{
  margin:0;display:flex;flex-direction:column;gap:var(--s-2xs);
  border:0;border-left:2px solid var(--n-900);border-radius:0;
  padding:var(--s-3xs) 0 var(--s-3xs) var(--s-m);background:none;
}
.quote__text{font-size:var(--t-lead);line-height:1.45;color:var(--n-900);font-weight:500}
.quote figcaption,.quote .caption{color:var(--n-600)}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.faq{border-top:1px solid var(--n-200)}
.faq__item{border-bottom:1px solid var(--n-200)}
.faq__q{
  position:relative;display:block;cursor:pointer;list-style:none;
  padding:var(--s-m) var(--s-2xl) var(--s-m) 0;
  font-size:var(--t-h3);font-weight:600;color:var(--n-900);
  letter-spacing:-.005em;line-height:1.3;
  transition:color var(--dur-hover) var(--ease);
}
/* Hover: een onderstreping onder de vraag en een pijltje dat een stukje zakt. Geen vlak
   achter de rij: de vraag begint zonder binnenruimte, dus de tekst plakte dan tegen de
   rand van het vlak, en op een lichtgrijze sectie werd dat een los wit blok. */
.faq__q:hover{text-decoration:underline;text-decoration-color:var(--n-300);text-decoration-thickness:1px;text-underline-offset:5px}
.faq__item:not([open]) > .faq__q:hover::after{transform:translateY(3px) rotate(45deg)}
.faq__q::-webkit-details-marker{display:none}
.faq__q::after{
  content:"";position:absolute;right:var(--s-2xs);top:calc(var(--s-m) + .45em);
  width:10px;height:10px;
  border-right:2px solid var(--n-900);border-bottom:2px solid var(--n-900);
  transform:rotate(45deg);
  transition:transform 240ms var(--ease);
}
.faq__item[open] > .faq__q::after{transform:rotate(-135deg)}
.faq__item[open] > .faq__q{padding-bottom:var(--s-2xs)}
.faq__item > :not(.faq__q){max-width:60ch}
.faq__item > :not(.faq__q):last-child{padding-bottom:var(--s-l)}
.faq__item[open] > :not(.faq__q){animation:faq-in 240ms var(--ease) both}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* --------------------------------------------------------------------------
   MOTION — één observer, geen bibliotheek
   -------------------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(16px)}
[data-reveal].is-in{
  opacity:1;transform:none;
  transition:opacity var(--dur-reveal) var(--ease),transform var(--dur-reveal) var(--ease);
  transition-delay:var(--reveal-delay,0ms);
}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none}
}

/* --------------------------------------------------------------------------
   VIDEOSLOTS
   Een loop-video speelt zichzelf af, zonder geluid. Dat toont de beweging in
   plaats van hem te beschrijven, en vraagt niets van de bezoeker. Bij
   prefers-reduced-motion haalt het script autoplay weg en blijft de poster staan.
   -------------------------------------------------------------------------- */
.ph--video > video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;background:var(--n-100);
}
.ph--speler > video{object-fit:contain;background:var(--n-900)}
.ph--4x5{--ph-ratio:4/5}
.ph--in-cel{border-radius:var(--radius-m)}

/* --------------------------------------------------------------------------
   BENTO — zes kenmerken, twee groot met beeld
   Patroon: "Features 8" / "featuresgrid" (21st.dev, Features). Zes gelijke
   cellen lezen als een lijst; ongelijke cellen geven de twee sterkste
   kenmerken het gewicht dat ze in het gesprek ook hebben.
   -------------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s-l) var(--s-xl)}
.bento__cel{
  border-top:1px solid var(--n-300);padding-top:var(--s-m);
  display:flex;flex-direction:column;gap:var(--s-2xs);align-content:start;
}
.bento__cel--groot{
  grid-column:span 2;
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);
  gap:var(--s-m);align-items:start;
}
.bento__tekst{display:flex;flex-direction:column;gap:var(--s-2xs)}

/* --------------------------------------------------------------------------
   SHOWCASE — tekst in een smalle kolom, beeld tot de paginarand
   Patroon: "Feature Showcase" (21st.dev, Features). Lost op dat een 3:2 in een
   kolom van 40% te klein is voor de tekst ernaast en wit onder zich laat.
   -------------------------------------------------------------------------- */
.sectie--bleed-rechts{overflow:clip}
.showcase{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(var(--s-xl),5vw,var(--s-3xl));align-items:center;
  padding-left:max(var(--s-m), calc((100% - var(--w-base)) / 2 + var(--s-m)));
}
.showcase > .stack{max-width:34em}
.beeld--bleed .ph{border-radius:var(--radius-l) 0 0 var(--radius-l)}

/* --------------------------------------------------------------------------
   VERGELIJKING — eerst drie kolomkaarten, dan pas de tabel
   Patroon: "Pricing Section with Comparison" + "Us vs Them" (21st.dev,
   Comparisons). Een tabel als opening dwingt tot lezen; drie beelden naast
   elkaar laten het verschil zien voordat iemand een rij hoeft te vergelijken.
   -------------------------------------------------------------------------- */
.vgl{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-xl)}
/* De strook wordt onder 1200px een horizontale scroller en bevat geen enkel focusbaar
   element. Zonder tabindex is hij met het toetsenbord niet te verschuiven (WCAG 2.1.1).
   Met tabindex hoort er ook een zichtbare focusring bij. */
.vgl:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
/* De padding onderaan is bij kaart 1 en 2 onzichtbaar (ze hebben geen grond), maar wel nodig:
   .vgl__voet staat op margin-top:auto en zakt dus naar de onderkant van de kaart. Zonder deze
   ruimte zou de voet van de navy kaart 24px hoger staan dan die van de andere twee. */
.vgl__kaart{
  display:flex;flex-direction:column;gap:var(--s-xs);height:100%;
  border-top:1px solid var(--n-300);padding:var(--s-s) 0 var(--s-m);
}
/* De kolom "wat wij bouwen" staat op een eigen navy grond, zodat de keuze te zien is
   voordat je een regel gelezen hebt. Navy en niet lime: op lime zakt het groene vinkje naar
   3,3:1 en zou het navy moeten worden, terwijl juist dat blok van zes groene vinkjes het
   argument van deze kolom is. Op navy worden ze lime - binnen de huisstijl, en 13,9:1.

   Alleen deze kaart krijgt binnenruimte, de andere twee niet. Bij hen is die onzichtbaar
   (geen grond) en kost hij wel tekstbreedte: met 24px links en rechts op alle drie liep
   "Voldoende speelhoogte, mits ontworpen" om en stond de rij 30px uit het lood.
   Zijn eigen tekstkolom wordt daarmee 306px in plaats van 354px. Nagemeten op 1205px, de
   krapste driekoloms-breedte: alle zes zijn regels passen daar nog op één regel. Een negatieve
   marge om die 48px terug te pakken is geprobeerd en weer weggehaald - dan raakt de kaart op
   1205px de rechter schermrand.
   Verticaal komt hij wel precies uit op kaart 1 en 2: die hebben 1px rand plus 16px padding. */
.vgl__kaart--uit{
  border-top:0;
  padding:calc(var(--s-s) + 1px) var(--s-m) var(--s-m);
  background:var(--brand);border-radius:var(--radius-m);
}
.vgl__kaart--uit h3,
.vgl__kaart--uit .muted,
.vgl__kaart--uit .vgl__lijst li,
.vgl__kaart--uit .vgl__feit-waarde{color:var(--brand-ink)}
.vgl__kaart--uit .vgl__label{color:var(--accent)}
/* Het beeld loopt door tot de rand van de kaart. Zou het binnen de padding blijven, dan is
   het hier 48px smaller dan in de andere twee kolommen, en omdat de hoogte uit de breedte
   volgt (4:3) komt alles eronder 36px hoger te staan. Precies dat zette de rijen uit het lood.
   De tekst houdt wel zijn padding: die is 306px breed en alle zes regels passen daarop. */
.vgl__kaart--uit > .ph{margin-inline:calc(var(--s-m) * -1);border-radius:0}
.vgl__kaart--uit .vgl__feit-label{color:var(--brand-ink-quiet)}
.vgl__kaart--uit .vgl__lijst li + li,
.vgl__kaart--uit .vgl__voet{border-color:var(--line-ink)}
.vgl__kaart--uit .vgl__lijst li::before{border-color:var(--accent)}
/* Deze kolom is overal positief, dus een kruisje of streep hoort er niet te staan. Belandt er
   ooit toch een: --nok haalt op navy maar 2,8:1 en --deels nog minder. Vandaar lichtere
   varianten, 9,2:1 en 9,9:1. */
.vgl__kaart--uit .vgl__lijst li.nee::before{
  background:
    linear-gradient(45deg,transparent 43%,var(--nok-ink) 43%,var(--nok-ink) 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--nok-ink) 43%,var(--nok-ink) 57%,transparent 57%);
}
.vgl__kaart--uit .vgl__lijst li.deels::before{background:var(--deels-ink)}
.vgl__label{
  font-size:var(--t-caption);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--n-900);
}
.vgl__label--stil{color:var(--n-600);font-weight:500}
.vgl__kaart h3{margin-top:var(--s-2xs)}

/* De kenmerken hangen onder hun eigen kolom, zonder labelkolom ernaast. Elke regel
   moet daarom op zichzelf te lezen zijn. Het teken vooraan doet het vergelijken:
   een vinkje voor wat deze optie kan, een streep voor wat ze niet kan. */
.vgl__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
/* Elke regel blijft op één regel staan: zo lopen de zes punten over de drie
   kolommen gelijk op en is horizontaal te vergelijken. Vandaar de korte formulering
   en de breakpoint op 1200px — daaronder past drie naast elkaar niet meer.
   Het lijntje tussen twee punten geeft het oog iets om langs te lopen: de rijen
   liggen in alle drie de kolommen op dezelfde hoogte. */
.vgl__lijst li{
  position:relative;padding:var(--s-xs) 0 var(--s-xs) var(--s-m);
  font-size:var(--t-s);line-height:1.45;color:var(--n-800);
}
.vgl__lijst li + li{border-top:1px solid var(--n-200)}
.vgl__lijst li::before{
  content:"";position:absolute;left:1px;top:calc(var(--s-xs) + .38em);
  width:13px;height:7px;
  border-left:2.75px solid var(--ok);border-bottom:2.75px solid var(--ok);
  transform:rotate(-45deg);
}
/* Kruisje: twee diagonalen. Vorm én kleur verschillen, zodat het ook zonder
   kleurwaarneming te lezen is. */
.vgl__lijst li.nee::before{
  top:calc(var(--s-xs) + .24em);width:14px;height:14px;
  border:0;transform:none;
  background:
    linear-gradient(45deg,transparent 43%,var(--nok) 43%,var(--nok) 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,var(--nok) 43%,var(--nok) 57%,transparent 57%);
}

/* Derde stand: wel iets, maar niet volledig. Een horizontale balk, want vinkje en
   kruisje zijn allebei diagonaal - zo verschilt ook deze in vorm en niet alleen in
   kleur, en blijft de rij leesbaar zonder kleurwaarneming. Meetkundig gecentreerd op
   het midden van de eerste regel; een balk heeft geen optische correctie nodig. */
.vgl__lijst li.deels::before{
  top:calc(var(--s-xs) + .7em - 1.4px);left:1px;
  width:14px;height:2.75px;
  border:0;transform:none;
  background:var(--deels);
}

/* De mockup van het Startdossier staat er om het aanbod tastbaar te maken, niet als
   hoofdbeeld. Hij is liggend (21:9) en wordt op kolombreedte niet hoger dan het
   formulier ernaast; daarom geen eigen maximum meer (was 380px bij de 3:2-versie). */
.beeld--mockup{margin-top:var(--s-s)}
/* De mockup is een productfoto op een witte grond, geen bijgesneden beeld. Het vlak eromheen
   krijgt daarom geen grond en geen ronding: anders zweeft er een lichte doos met ronde hoeken
   in een witte sectie. En contain in plaats van cover, zodat er nooit iets van de boekjes
   wegvalt als de verhouding ooit net afwijkt. */
.ph[data-slot="startdossier-mockup"],
.ph[data-slot="startdossier-mockup"]::after{
  background:transparent;border-radius:0;
  box-shadow:none;          /* .ph::after zet standaard een haarlijn van 1px als inset-schaduw */
}
.ph[data-slot="startdossier-mockup"] > img{object-fit:contain}

/* Doorlooptijd en investering staan apart: daar wint een alternatief juist,
   en dat moet even zichtbaar zijn als de rest. */
.vgl__voet{
  display:flex;gap:var(--s-l);flex-wrap:wrap;margin-top:auto;
  padding-top:var(--s-s);border-top:1px solid var(--n-200);
}
.vgl__feit{display:flex;flex-direction:column;gap:2px}
.vgl__feit-waarde{
  font-size:var(--t-h3);font-weight:700;line-height:1.1;
  letter-spacing:-.02em;color:var(--n-900);
}
.vgl__feit-label{font-size:var(--t-caption);line-height:1.3;color:var(--n-600)}

/* --------------------------------------------------------------------------
   RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width:1000px){
  /* Een drieluik dat een volgorde is (1-2-3) leest in twee kolommen als twee plus een
     restpost, en de nummers lopen dan niet meer langs één as. In één stap naar één. */
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento__cel--groot{grid-column:span 2}
}
@media (max-width:1200px){
  /* Onder 1200px passen drie kolommen niet meer naast elkaar. Ze onder elkaar zetten maakt
     vergelijken juist onmogelijk, en dat is precies waar dit blok voor bestaat: je moet twee
     opties tegelijk kunnen zien. Dus een horizontale strook waar je doorheen veegt.

     De strook loopt tot de schermrand - negatieve marge plus dezelfde padding er weer in -
     zodat de volgende kolom er zichtbaar half uit steekt. Die glimp is het enige signaal dat
     er meer staat; pijltjes of stipjes zijn dan overbodig.

     scroll-snap zet elke kolom netjes op de linkermarge stil, zodat je nooit halverwege een
     kolom blijft hangen. */
  .vgl{
    display:flex;gap:var(--s-m);
    margin-inline:calc(var(--s-m) * -1);
    padding-inline:var(--s-m);
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;
    scroll-padding-inline:var(--s-m);
    scrollbar-width:none;
  }
  .vgl::-webkit-scrollbar{display:none}
  .vgl__kaart{
    flex:0 0 min(82%, 420px);
    height:auto;
    scroll-snap-align:start;
  }
  .vgl .ph{max-width:none}
  /* In de strook is een kolom 280px breed. Met 24px padding houdt de navy kaart daar maar
     232px tekst over tegen 280px bij de andere twee, en dan lopen er regels om die het op
     desktop niet doen. 16px scheelt genoeg zonder dat de vulling krap oogt. */
  /* In de strook staat onze kolom vooraan. Wie niet veegt ziet er maar een, en dan moet
     dat deze zijn; de glimp rechts zegt "Alternatief" en nodigt uit om verder te kijken.
     Alleen hier, want op desktop staan ze toch alle drie tegelijk in beeld en werkt de
     opbouw alternatief-alternatief-wij beter. Geen gevolg voor toetsenbord of schermlezer:
     de kaarten bevatten niets klikbaars, dus er is geen focusvolgorde die scheef kan lopen. */
  .vgl__kaart--uit{order:-1;padding-inline:var(--s-s)}
  .vgl__kaart--uit > .ph{margin-inline:calc(var(--s-s) * -1)}
}
@media (max-width:860px){
  .split{grid-template-columns:1fr !important;gap:var(--s-xl)}
  .split--flip > :first-child{order:0}
  .hero-bleed .ph{position:absolute}
  /* Bleed vervalt: op smal scherm is er geen kolom om vanaf te bleeden. */
  .showcase{grid-template-columns:1fr;padding-inline:var(--s-m)}
  .beeld--bleed .ph{border-radius:var(--radius-l)}
  .showcase > .stack{max-width:none}
}
@media (max-width:640px){
  :root{--t-base:17px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .btn{width:100%}
  .ph--portret{--ph-ratio:4/3;max-width:none !important}
  .rail > *{min-width:100%}
  .bento{grid-template-columns:1fr}
  .bento__cel--groot{grid-column:span 1;grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   BEELDSLOTS
   Elk vlak heeft een slot-id. Een bestand in de aanleverbak met die id als naam
   belandt hier; ontbreekt het, dan zegt het vlak dat met zoveel woorden. De
   marker `.tijdelijk` in de bestandsnaam zet het label aan — een tijdelijk beeld
   mag nooit voor definitief doorgaan.
   -------------------------------------------------------------------------- */
.beeld{margin:0;display:flex;flex-direction:column;gap:var(--s-xs)}

.ph--gevuld{padding:0;background:var(--n-100)}
.ph--gevuld::before{content:none}
.ph--vimeo > iframe{border:0;display:block}
/* Campagnevideo als sfeerbeeld: speelt zonder geluid in een lus (Vimeo background-modus).
   Klik op de video pauzeert of hervat. De knop rechtsonder zegt in woorden wat hij doet,
   want een los luidsprekericoon lazen bezoekers als "speelt met geluid". */
.vimeo-pauze{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  padding:0;border:0;background:transparent;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
/* Hello Elementor kleurt elke button roze bij :hover en :focus (#c36, uit zijn reset.css).
   Die regel weegt zwaarder dan alleen de klasse, dus de knoppen op de video zetten dat
   hier expliciet terug. Anders ligt er een roze vlak over de hele video. */
.vimeo-pauze:hover,.vimeo-pauze:focus{background:transparent;color:inherit}
.vimeo-pauze:focus-visible{outline:2px solid var(--focus);outline-offset:-4px}
.vimeo-pauze__icoon{
  width:64px;height:64px;border-radius:50%;display:none;align-items:center;justify-content:center;
  background:rgba(2,17,38,.72);color:#fff;
}
.vimeo-pauze__icoon svg{width:26px;height:26px;margin-left:3px}
.ph--vimeo.is-gepauzeerd .vimeo-pauze__icoon{display:flex}
.vimeo-geluid{
  position:absolute;right:var(--s-xs);bottom:var(--s-xs);z-index:2;
  display:inline-flex;align-items:center;gap:var(--s-2xs);
  min-height:40px;padding:0 var(--s-s) 0 var(--s-xs);border:0;border-radius:999px;cursor:pointer;
  background:rgba(2,17,38,.78);color:#fff;
  font-family:inherit;font-size:var(--t-caption);font-weight:600;letter-spacing:.01em;
  transition:background var(--dur-hover) var(--ease);
}
.vimeo-geluid:focus{background:rgba(2,17,38,.78);color:#fff}
.vimeo-geluid:hover{background:rgba(2,17,38,.92);color:#fff}
.vimeo-geluid:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.vimeo-geluid svg{width:20px;height:20px;flex:0 0 20px}
.vimeo-geluid .aan{display:none}
.vimeo-geluid[aria-pressed="true"] .aan{display:inline}
.vimeo-geluid[aria-pressed="true"] .uit{display:none}
.ph--gevuld > img,
.ph--gevuld > video,
.ph--gevuld > iframe{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;border-radius:inherit;
}

.ph--leeg{
  align-items:center;justify-content:center;text-align:center;
  gap:var(--s-3xs);flex-direction:column;
  background:var(--n-100);
  color:var(--n-600);
}
.block--n50 .ph--leeg{background:var(--n-0)}
.ph--leeg::after{box-shadow:inset 0 0 0 1px var(--n-300)}
.ph__ontbreekt{
  font-size:var(--t-s);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--n-800);
}
.ph__wat{
  max-width:26em;margin-block:var(--s-3xs);
  font-size:var(--t-s);line-height:1.4;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--n-800);
}
.ph__meta{
  font-size:var(--t-caption);font-weight:500;letter-spacing:.06em;
  text-transform:none;color:var(--n-600);
}

.ph__tijdelijk{
  position:absolute;z-index:2;top:var(--s-s);right:var(--s-s);
  padding:6px 10px;border-radius:var(--radius-s);
  background:var(--brand);color:var(--accent);
  font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}

/* Hero met beeld: overlay houdt de kop op 18:1, ook als het beeld licht is. */
.hero-bleed .ph--gevuld{background:var(--brand)}
.hero-bleed .ph--gevuld > img,
.hero-bleed .ph--gevuld > video{opacity:.62}
/* Loopvideo's via Vimeo (background-modus) die een vlak moeten vullen zoals object-fit:cover.
   Een iframe kent geen cover, dus het vlak is een size-container en het iframe krijgt de
   grootste van "volle breedte" en "volle hoogte" in de verhouding van de video (--r).
   Tot de video speelt, staat het posterbeeld eronder; het iframe fadet pas in als hij loopt,
   zodat er geen zwart vlak tussendoor flitst. */
.vimeo-cover{position:absolute;inset:0;overflow:hidden;container-type:size;border-radius:inherit;pointer-events:none}
.vimeo-cover iframe{
  position:absolute;top:50%;left:50%;border:0;
  width:max(100cqw, calc(100cqh * var(--r, 1.7778)));
  height:max(100cqh, calc(100cqw / var(--r, 1.7778)));
  transform:translate(-50%,-50%);
  opacity:0;transition:opacity .6s var(--ease);
}
.vimeo-cover.is-speelt iframe{opacity:1}
/* Zodra de video loopt, gaat de poster eronder weg. In de hero staan poster en video
   allebei op .62 dekking, dus anders schemert de poster door de video heen. */
.ph--gevuld > img{transition:opacity .6s var(--ease)}
.ph--gevuld.video-speelt > img{opacity:0}
.hero-bleed .ph--gevuld > .vimeo-cover{opacity:.62}
.hero-bleed .ph--gevuld::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(2,17,38,.78) 0%,rgba(2,17,38,.40) 58%,rgba(2,17,38,.62) 100%);
}
.hero-bleed .ph__tijdelijk{top:auto;bottom:var(--s-s)}

/* --------------------------------------------------------------------------
   AANVULLINGEN OP HET LP3-SYSTEEM
   Twee gevallen die op LP3 niet voorkomen. Verder is dit stijlblok identiek
   aan 2026-09-08-lp3-hal-transparant-design.html, zodat een wijziging aan de
   componenten in één keer over de drie pagina's te rollen is.
   -------------------------------------------------------------------------- */

/* 1. Hero zonder beeld. De drie regels staan rechtsonder, buiten de tekstkolom:
      gecentreerd botsen ze op de H1. Uitzondering uit
      .claude/rules/ontwerp-beeldslots.md voor een bleed-vlak achter tekst.
      De navy grond en het leesverloop blijven staan — `.hero-bleed .ph` wint op
      specificiteit van `.ph--leeg`, dus daar is geen override voor nodig. */
.hero-bleed .ph--leeg{
  align-items:flex-end;justify-content:flex-end;text-align:right;
  padding:var(--s-m);
}
.hero-bleed .ph--leeg .ph__ontbreekt,
.hero-bleed .ph--leeg .ph__wat{color:var(--brand-ink)}
.hero-bleed .ph--leeg .ph__meta{color:var(--brand-ink-quiet)}

/* 2. De cijferrail staat op LP3 alleen op navy, waar de hairline wit is
      (`--line-ink`). Op een lichte grond valt die weg, dus daar kleurt hij mee. */
.block:not(.block--ink) .stat{border-top-color:var(--n-300)}

/* 3. De schuifjes van de bezettingsrekentool. Alleen deze pagina heeft er een.
      Duim en gevulde baan allebei navy. De witte rand van 3px scheidt de duim van de baan
      waar hij overheen ligt; de haarlijn eromheen houdt hem zichtbaar op de lichte helft. */
.field--schuif label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-s)}
.field--schuif output{font-weight:700;color:var(--n-900);font-variant-numeric:tabular-nums}
.schuif__schaal{
  display:flex;justify-content:space-between;margin:var(--s-3xs) 0 0;
  font-size:var(--t-caption);color:var(--n-600);font-variant-numeric:tabular-nums;
}
/* .field input geeft elk veld een kader met binnenruimte. Een schuifje is geen invulveld,
   dus dat moet er hier vanaf - anders zit de baan in een doos. */
.field input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:100%;height:22px;margin:0;padding:0;
  border:0;border-radius:0;box-shadow:none;
  background:transparent;cursor:pointer;
}
.field input[type="range"]::-webkit-slider-runnable-track{
  height:6px;border-radius:999px;
  background:linear-gradient(to right,var(--brand) var(--vul,50%),var(--n-200) var(--vul,50%));
}
.field input[type="range"]::-moz-range-track{height:6px;border-radius:999px;background:var(--n-200)}
.field input[type="range"]::-moz-range-progress{height:6px;border-radius:999px;background:var(--brand)}
.field input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;margin-top:-9px;border-radius:50%;
  background:var(--brand);border:3px solid var(--n-0);
  box-shadow:0 0 0 1px var(--n-300),0 1px 3px rgba(2,17,38,.28);
  transition:transform var(--dur-hover) var(--ease);
}
.field input[type="range"]::-moz-range-thumb{
  width:18px;height:18px;border-radius:50%;
  background:var(--brand);border:3px solid var(--n-0);
  box-shadow:0 0 0 1px var(--n-300),0 1px 3px rgba(2,17,38,.28);
}
.field input[type="range"]:hover::-webkit-slider-thumb{transform:scale(1.12)}
.field input[type="range"]:active::-webkit-slider-thumb{transform:scale(1.04)}
.field input[type="range"]:focus-visible{outline:none}
.field input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--n-0),0 0 0 6px var(--focus)}
.field input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--n-0),0 0 0 6px var(--focus)}
/* Aantal banen is een keuzerij en geen schuif: het zijn vijf discrete waarden, en twee
   verschillende bedieningen naast elkaar maken het blok visueel minder eentonig.
   Echte radio's, zodat pijltjestoetsen en schermlezers vanzelf werken. */
.field--keuze{border:0;margin:0;padding:0;min-width:0}
.field--keuze legend{padding:0;margin-bottom:var(--s-2xs);font-size:var(--t-s);font-weight:600;color:var(--n-900)}
.keuze{display:flex;gap:var(--s-2xs);flex-wrap:wrap}
.keuze__optie{flex:1 1 0;min-width:44px;margin:0}
.keuze__optie input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.keuze__optie span{
  display:flex;align-items:center;justify-content:center;
  height:44px;border-radius:var(--radius-m);cursor:pointer;
  font-size:var(--t-base);font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--n-800);background:var(--n-0);
  box-shadow:inset 0 0 0 1px var(--line-field);
  transition:background var(--dur-hover) var(--ease),color var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease);
}
.keuze__optie:hover span{box-shadow:inset 0 0 0 1px var(--n-600)}
.keuze__optie input:checked + span{
  background:var(--brand);color:var(--brand-ink);box-shadow:inset 0 0 0 1px var(--brand);
}
.keuze__optie input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

/* Het gemiddelde: een bandje onder de baan dat laat zien waar de normale waarden liggen,
   plus een knop met diezelfde waarden waarmee je er in één klik naar terugspringt. Het
   bandje staat ONDER de baan en niet erin, want in de baan valt het weg zodra de vulling
   er overheen loopt - precies op het moment dat je wilt zien hoe ver je bent afgeweken. */
/* De rail loopt over de volle breedte zodat je ziet waar het gemiddelde in het geheel valt,
   maar hij is net zichtbaar: lime is licht, dus een donkerder rail zou het gemarkeerde stuk
   overstemmen. Het onderscheid komt hier vooral van de kleurtoon - geelgroen tegen blauwgrijs -
   en niet van helderheid. Dat mag, want de betekenis staat als tekst eronder ("gemiddeld ...")
   en die regel is ook de knop die terugzet. */
.schuif__band{position:relative;height:5px;margin:2px 0 0;border-radius:999px;background:var(--n-50)}
.schuif__gem{
  position:absolute;top:0;bottom:0;border-radius:999px;background:var(--accent);
  left:var(--gem-van,0%);right:calc(100% - var(--gem-tot,100%));
}
.schuif__terug{
  border:0;background:none;cursor:pointer;
  /* 21px hoog haalde de 24px-ondergrens van WCAG 2.5.8 niet, en de onderstreping in
     --n-300 was het enige signaal dat het een knop is. */
  min-height:24px;padding:2px 4px;margin:0 -4px;
  font-family:inherit;font-size:var(--t-caption);color:var(--n-600);
  text-decoration:underline;text-decoration-color:var(--n-600);text-underline-offset:3px;
}
.schuif__terug:hover{color:var(--n-900);text-decoration-color:currentColor}
.schuif__terug:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:2px}
.schuif__schaal{gap:var(--s-2xs)}

/* Tooltip achter het bedrag. Op een aanwijsapparaat opent hij bij hover, overal bij klik
   en bij toetsenbordfocus; Escape en een klik ernaast sluiten hem. */
.uitkomst-rij{display:flex;align-items:flex-start;gap:var(--s-2xs);margin:0}
.uitleg{position:relative;display:inline-flex;margin-top:.55em}
.uitleg__knop{
  width:24px;height:24px;flex:0 0 24px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--n-200);color:var(--n-800);
  font-family:inherit;font-size:13px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--dur-hover) var(--ease);
}
.uitleg__knop:hover,.uitleg__knop[aria-expanded="true"]{background:var(--n-300)}
.uitleg__knop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Onder het vraagteken zou de ballon precies het bedrag afdekken dat hij uitlegt. Op een
   breed scherm staat hij daarom ernaast; pas als daar geen ruimte meer is valt hij terug
   naar onderen. */
.uitleg__ballon{
  position:absolute;top:calc(100% + 10px);left:0;
  z-index:5;width:max-content;max-width:min(320px,calc(100vw - 48px));
  padding:var(--s-s);border-radius:var(--radius-m);
  background:var(--brand);color:var(--brand-ink);
  font-size:var(--t-s);line-height:1.5;font-weight:400;text-align:left;
  box-shadow:0 8px 28px rgba(2,17,38,.22);
}
.uitleg__ballon::before{
  content:"";position:absolute;bottom:100%;left:14px;
  border:7px solid transparent;border-bottom-color:var(--brand);
}
.uitleg__ballon strong{color:var(--brand-ink)}
.uitleg__ballon[hidden]{display:none}
/* Op smal scherm hangt de ballon onder de hele regel en niet onder het vraagteken:
   gecentreerd op dat knopje loopt hij rechts van het scherm af. Het pijltje wijst dan
   naar de rechterkant, waar het vraagteken staat. */
@media (max-width:859.98px){
  /* Alleen de ballon bij het bedrag hangt onder de hele regel; hij is te breed om onder
     het knopje te passen. De andere ballonnen openen gewoon vanaf hun eigen icoon. */
  .uitkomst-rij{position:relative}
  .uitkomst-rij .uitleg{position:static}
  .uitkomst-rij .uitleg__ballon{left:0;right:0;width:auto;max-width:none;transform:none;top:calc(100% + 10px)}
  .uitkomst-rij .uitleg__ballon::before{left:auto;right:14px;transform:none}

}
@media (min-width:860px){
  /* Vanaf het icoon naar beneden, niet erop gecentreerd: een lange ballon zou anders de
     helft van de tabel erboven afdekken. */
  .uitleg__ballon{top:-8px;left:calc(100% + 12px);transform:none;max-width:320px}
  /* Uitzondering voor de ballon bij het bedrag: ernaast stak hij 75px buiten de kaart en
     dekte hij het e-mailveld af plus precies de zin die hij toelicht. Onder de regel dus,
     net als op smal scherm. */
  .uitkomst-rij{position:relative}
  .uitkomst-rij .uitleg{position:static}
  .uitkomst-rij .uitleg__ballon{left:0;right:0;width:auto;max-width:none;top:calc(100% + 10px)}
  .uitkomst-rij .uitleg__ballon::before{
    left:14px;right:auto;top:auto;bottom:100%;
    border-bottom-color:var(--brand);border-right-color:transparent;
  }
  .uitleg__ballon::before{
    bottom:auto;top:16px;left:auto;right:100%;
    border-bottom-color:transparent;border-right-color:var(--brand);
  }
}

.alleen-lezer{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* De uitkomst verspringt bij elke stap; cijfers van gelijke breedte houden hem stil. */
#r-uitkomst{font-variant-numeric:tabular-nums}

/* De rekentool zet twee situaties naast elkaar: links wat de bezoeker nu heeft, rechts
   dezelfde banen in een Padexis-hal. De Padexis-kolom krijgt een navy rand zodat je ziet
   welke kant de uitkomst is. Onder 620px onder elkaar: twee kolommen van 140px breed
   laten een schuifje niet meer nauwkeurig bedienen. */
.reken{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-s)}
.reken__kolom{
  display:flex;flex-direction:column;gap:var(--s-s);min-width:0;
  padding:var(--s-s);border-radius:var(--radius-l);
  background:var(--n-50);box-shadow:inset 0 0 0 1px var(--n-200);
}
.reken__kolom--pdx{background:var(--n-0);box-shadow:inset 0 0 0 2px var(--brand)}
.schuif__band--leeg{visibility:hidden}
/* Tussen de uitkomst en het formulier: een lijn en een eigen kop, zodat de bezoeker ziet
   dat er een nieuwe stap begint en waarom hij die zou zetten. */
.reken__vervolg{margin-top:var(--s-m);padding-top:var(--s-l);border-top:1px solid var(--n-200)}
.reken__kop{margin:0;font-size:var(--t-s);font-weight:700;color:var(--n-900)}
.reken__totaal{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-2xs);
  margin:auto 0 0;padding-top:var(--s-s);border-top:1px solid var(--n-200);
  font-size:var(--t-s);color:var(--n-800);
}
.reken__bedrag{font-size:var(--t-h3);font-weight:700;color:var(--n-900);font-variant-numeric:tabular-nums;white-space:nowrap}
@media (max-width:619.98px){.reken{grid-template-columns:1fr}}

@media (max-width:860px){
  .hero-bleed .ph--leeg{align-items:flex-start;text-align:left}
  /* Smal scherm: de melding krijgt een eigen band onder de tekst in plaats van
     eronder te schuiven. Alleen zolang het vlak leeg is — met het beeld erin
     vervalt deze regel vanzelf. */
  .hero-bleed:has(.ph--leeg){padding-bottom:calc(var(--r-loose) + 3.5rem)}
}