/* Padexis LP3 (/hal-transparant) — overgenomen uit created/landing-pages/design/2026-09-08-lp3-hal-transparant-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:hover,.field select:hover,.field textarea:hover{border-color:var(--n-600)}
.field input: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)}