/* =====================================================================
   RijnCon, design system
   1. Tokens
   2. Reset & base
   3. Typography
   4. Layout primitives
   5. Buttons & links
   6. Header & navigation
   7. Hero
   8. Sections
   9. Components
   10. Footer
   11. Motion
   12. Responsive
   ===================================================================== */

/* ------------------------------ 1. Tokens ------------------------------ */
:root{
  /* colour */
  --brand:      #1C2449;   /* primair diepblauw uit het brandboek */
  --ink:        #131A3A;   /* donkerste vlak, afgeleide van het brandboekblauw */
  --navy:       #1C2449;   /* het brandboekblauw zelf, voor de CTA-band */
  --navy-line:  #333B63;   /* haarlijnen op donker */
  /* De rand van een invoerveld moet 3:1 halen tegen de sectie eromheen, en
     --navy-line gaf 1,39. Dit is de eerste waarde op dezelfde tint die het
     wel haalt (3,35). Lichter dan de gewone haarlijn, en dat hoort ook:
     een veld moet je kunnen vinden, een scheidslijn niet. */
  --veld-rand:  #6372BF;
  --accent:     #9CC8F5;   /* secundair lichtblauw uit het brandboek */
  --accent-deep:#2F6FA8;   /* donkerder afgeleide, nodig voor contrast op wit */
  --paper:      #FFFFFF;
  --bone:       #F3F1EC;   /* warm off-white */
  --bone-deep:  #E7E3DB;
  --text:       #131734;
  --text-soft:  #545B75;
  --text-faint: #696D7D;   /* WCAG AA: 5,14 op wit, 4,56 op bone */
  --line:       #DDD9D1;   /* hairline on light */
  --line-soft:  #EBE8E2;

  /* typography */
  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;

  --fs-display: clamp(2.75rem, 6.4vw, 5.75rem);
  --fs-h2:      clamp(2.1rem, 4.6vw, 4rem);
  --fs-h3:      clamp(1.4rem, 2.2vw, 2rem);
  --fs-lead:    clamp(1.06rem, 1.35vw, 1.3rem);
  --fs-body:    clamp(1rem, 1.05vw, 1.075rem);
  --fs-micro:   0.75rem;

  /* space */
  --shell: 1340px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  /* Ritmeschaal. Eén set maten voor de hele site, zodat blokken elkaar
     herkennen. Alles schaalt met de BREEDTE (vw), nooit met de hoogte (vh):
     anders verandert het verticale ritme als je je venster hoger maakt. */
  --sp-1: .5rem;                          /* binnen een regel                */
  --sp-2: .875rem;                        /* label naar inhoud, lijstregels  */
  --sp-3: clamp(1rem,    1.6vw, 1.5rem);  /* binnen een blok                 */
  --sp-4: clamp(1.5rem,  2.6vw, 2.5rem);  /* padding van componenten         */
  --sp-5: clamp(2.25rem, 4vw,   3.5rem);  /* tussen blokken                  */
  --sp-6: clamp(3rem,    5.5vw, 5rem);    /* kop naar inhoud, kolomafstand   */
  --sp-7: clamp(4.5rem,  8vw,   7.5rem);  /* tussen secties                  */

  --section-y: var(--sp-7);

  /* statuskleuren van het verbeterportfolio. Op :root omdat ze zowel in de demo
     op software.html als in de glimp op de homepage worden gebruikt. */
  /* Nagemeten op 02-09: oranje gaf 4,23 op wit en 3,75 op off-white, groen
     4,43 op off-white. De norm is 4,5. Beide een tikje dieper gezet; op
     dezelfde tint en verzadiging, dus het oogt hetzelfde. Verander je ze,
     reken dan opnieuw na tegen zowel #FFFFFF als #F3F1EC. */
  --st-groen:  #2D7A59;
  --st-oranje: #9E5E14;
  --st-rood:   #C0392F;
  --st-af:     #4A5270;

  /* beweging. Vijf tijden, zoals er --sp-1 t/m --sp-7 zijn voor ruimte. Kies de
     dichtstbijzijnde, verzin er geen tussenin.
       --t-1  antwoord op aanwijzen of indrukken. Onder 150ms voelt direct aan
       --t-2  kleine toestandswissel
       --t-3  iets dat open- of dichtgaat
       --t-4  de balk bovenaan, en binnenkomen bij het scrollen
       --t-5  een lijn die zich tekent
     Twee curves met elk een eigen taak. --ease vertraagt sterk aan het eind en
     hoort bij binnenkomen: snel weg, zacht aan. --ease-kort is bijna
     symmetrisch en hoort bij alles wat heen en weer gaat, want daar is een
     trage staart juist hinderlijk: hover, focus, open en dicht. */
  --t-1: 120ms;
  --t-2: 180ms;
  --t-3: 260ms;
  --t-4: 400ms;
  --t-5: 560ms;
  --ease:      cubic-bezier(.16,.72,.24,1);
  --ease-kort: cubic-bezier(.33,0,.2,1);
}

/* --------------------------- 2. Reset & base --------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.nav-open{ overflow:hidden; }
img,svg{ display:block; max-width:100%; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1.1em; }
/* Let op: dit is een element+pseudo-selector (specificiteit 0-1-1) en wint
   dus van een losse klasse. Wil een klasse hier onderuit, geef die dan twee
   niveaus, bijvoorbeeld `.hero-foot .proof-label`. */
p:last-child{ margin-bottom:0; }
a{ color:inherit; }
hr{ border:0; border-top:1px solid var(--line); margin:var(--sp-4) 0; }
/* Wel voor een schermlezer, niet op het scherm. Gebruikt waar een vorm de
   betekenis draagt, zoals het blokje in de vergelijking bij De kern. */
.vh{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
address{ font-style:normal; }
::selection{ background:var(--accent); color:var(--ink); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:#fff; padding:.75rem 1.25rem; font-size:.85rem;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:3px; }
.section-ink :focus-visible,.section-cta :focus-visible,.site-footer :focus-visible,.hero :focus-visible{
  outline-color:var(--accent);
}

/* --------------------------- 3. Typography ----------------------------- */
h1,h2,h3,h4{
  margin:0;
  font-weight:400;
  letter-spacing:-0.032em;
  line-height:1.02;
  text-wrap:balance;
}
em{ font-family:var(--serif); font-style:italic; font-weight:300; letter-spacing:-0.01em; }

/* De regelval van de koppen komt van text-wrap:balance binnen deze maat,
   niet van handmatige <br>'s. Zo klopt hij op elke schermbreedte. */
.h-display{ font-size:var(--fs-h2); max-width:26ch; }
.h-display.light{ color:#fff; }
.h-display em{ color:var(--accent-deep); }
.h-display.light em{ color:var(--accent); }

.eyebrow{
  font-size:var(--fs-micro); letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500; display:flex; align-items:center; gap:.75rem;
}

/* Kruimelpad boven de paginakop. Zelfde maat en spatiëring als .eyebrow, maar
   gedempt: het is oriëntatie, geen inhoud. */
.kruimels{ margin-bottom:var(--sp-3); }
.kruimels ol{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase;
}
.kruimels li{ display:flex; align-items:center; gap:.5rem; color:rgba(255,255,255,.45); }
.kruimels li + li::before{ content:'/'; color:rgba(255,255,255,.28); }
.kruimels a{
  color:rgba(255,255,255,.6); text-decoration:none;
  border-bottom:1px solid transparent; transition:color var(--t-1) var(--ease-kort),border-color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .kruimels a:hover{ color:#fff; border-bottom-color:rgba(255,255,255,.4); } }
.kruimels [aria-current="page"]{ color:rgba(255,255,255,.45); }

.micro-label{
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; margin-bottom:var(--sp-3);
}
.micro-label.light{ color:rgba(255,255,255,.5); }

.section-index{
  display:flex; align-items:baseline; gap:1rem;
  font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-deep); font-weight:500; margin:0 0 var(--sp-4);
  padding-bottom:var(--sp-2); border-bottom:1px solid var(--line);
}
.section-index span{ color:var(--text-faint); }
.section-index.light{ color:var(--accent); border-color:var(--navy-line); }
.section-index.light span{ color:rgba(255,255,255,.5); }

.section-intro{
  font-size:var(--fs-lead); color:var(--text-soft); max-width:68ch; margin-top:var(--sp-4);
  line-height:1.55;
}
.section-ink .section-intro{ color:rgba(255,255,255,.66); }

/* ------------------------ 4. Layout primitives ------------------------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:var(--section-y); position:relative; }
section[id]{ scroll-margin-top:5.5rem; }
.section-paper{ background:var(--paper); }
.section-bone{ background:var(--bone); }
.section-ink{ background:var(--ink); color:rgba(255,255,255,.78); }
.section-head{ margin-bottom:var(--sp-6); }

/* ------------------------- 5. Buttons & links -------------------------- */
.btn{
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:1.05rem 1.9rem;
  font-size:.9rem; font-weight:500; letter-spacing:.01em;
  text-decoration:none; border:1px solid transparent; border-radius:2px;
  transition:background var(--t-1) var(--ease-kort), color var(--t-1) var(--ease-kort), border-color var(--t-1) var(--ease-kort), transform var(--t-1) var(--ease-kort);
  white-space:nowrap;
}
/* Indrukgevoel. Een knop die niets doet als je hem aanraakt voelt kapot, ook
   als hij daarna gewoon werkt. Klein houden: meer dan een paar procent oogt
   speels, en dat past niet bij deze toon. */
.btn:active{ transform:scale(.985); }
.btn-sm{ padding:.72rem 1.3rem; font-size:.82rem; }
.btn-primary{ background:var(--ink); color:#fff; }
@media (hover:hover){ .btn-primary:hover{ background:var(--accent-deep); } }
.hero .btn-primary,.header-cta,.section-ink .btn-primary,.section-cta .btn-primary,.mobile-nav .btn-primary{
  background:var(--accent); color:var(--ink);
}
@media (hover:hover){ .hero .btn-primary:hover,.header-cta:hover,.section-ink .btn-primary:hover,.section-cta .btn-primary:hover,.mobile-nav .btn-primary:hover{
  background:#fff;
} }
.btn-ghost{ border-color:currentColor; color:inherit; opacity:.85; }
.hero .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.35); }
@media (hover:hover){ .btn-ghost:hover{ opacity:1; background:rgba(255,255,255,.06); } }
.section-cta .btn-ghost{ color:#fff; border-color:rgba(255,255,255,.32); }

/* ---------------------- 6. Header & navigation ------------------------- */
/* De balk krimpt zodra je scrolt. Dat gebeurt met transform en clip-path, niet
   met padding en height: die laatste twee dwingen de browser tot een nieuwe
   indeling terwijl de blur eromheen opnieuw getekend wordt.

   De maten horen bij elkaar en moeten samen veranderen. De hoogte wordt bepaald
   door de knop rechts, niet door het logo: 47,3px inhoud met 21,6px lucht boven
   en onder, samen 90,5px. Gekrompen is die lucht 13,6px, samen 74,5px. Dat
   verschil van 16px is --krimp; de inhoud schuift de helft daarvan omhoog en
   blijft zo gecentreerd. Gemeten in de browser, niet geschat. */
/* De doos zelf houdt nu altijd de volle hoogte, ook in de gekrompen stand. Zo
   blijft de indeling gelijk, maar zou de balk onder de zichtbare rand klikken
   opvangen die eigenlijk de pagina horen te bereiken. Vandaar pointer-events:
   alleen de zichtbare achtergrond en de inhoud vangen klikken op, de lege
   strook eronder niet. De weggeknipte helft van de achtergrond telt niet mee,
   want clip-path knipt ook het klikgebied weg. */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  padding-block:1.35rem;
  pointer-events:none;
  --krimp:16px;
}
.site-header::before,
.site-header::after,
.header-inner{ pointer-events:auto; }
/* De achtergrond is een eigen laag, zodat hij korter kan worden zonder dat de
   inhoud erin meebeweegt. */
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:rgba(19,26,58,.94);
  backdrop-filter:saturate(150%) blur(10px);
  opacity:0; clip-path:inset(0);
  transition:opacity var(--t-4) var(--ease), clip-path var(--t-4) var(--ease);
}
.site-header.is-stuck::before{
  opacity:1; clip-path:inset(0 0 var(--krimp) 0);
}
/* De haarlijn onderaan schuift met de onderrand mee omhoog. De 1px erbij zet
   hem net onder de ingekorte achtergrond, precies waar de border stond. */
.site-header::after{
  content:''; position:absolute; inset:auto 0 0 0; height:1px;
  background:var(--navy-line); opacity:0;
  transition:opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease);
}
.site-header.is-stuck::after{
  opacity:1; transform:translateY(calc(1px - var(--krimp)));
}
.header-inner{
  display:flex; align-items:center; gap:2.5rem;
  transition:transform var(--t-4) var(--ease);
}
.site-header.is-stuck .header-inner{ transform:translateY(calc(var(--krimp) / -2)); }

.brand{
  display:inline-flex; align-items:center; gap:.65rem;
  text-decoration:none; color:#fff; flex:0 0 auto;
}
/* 26 van 30 is .8667. Schaalt vanaf links, zodat het logo op zijn plek blijft. */
.brand img{
  height:30px; width:auto;
  transform-origin:left center;
  transition:transform var(--t-4) var(--ease);
}
.site-header.is-stuck .brand img{ transform:scale(.8667); }
.brand-footer img{ height:34px; }

.site-nav{ display:flex; gap:2.1rem; margin-left:auto; }
.site-nav a{
  position:relative; text-decoration:none; font-size:.86rem; font-weight:400;
  color:rgba(255,255,255,.72); transition:color var(--t-1) var(--ease-kort); padding-block:.25rem;
}
.site-nav a::after{
  content:''; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-2) var(--ease-kort);
}
.site-nav a.is-active{ color:#fff; }

@media (hover:hover){ .site-nav a:hover{ color:#fff; } }
.site-nav a.is-active::after{ transform:scaleX(1); }

@media (hover:hover){ .site-nav a:hover::after{ transform:scaleX(1); } }
.header-cta{ flex:0 0 auto; }

.nav-toggle{
  display:none; width:44px; height:44px; margin-left:auto; background:none; border:0;
  cursor:pointer; padding:0; align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.nav-toggle span{ display:block; width:22px; height:1px; background:#fff; transition:transform var(--t-3) var(--ease-kort), opacity var(--t-2); }
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-3.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:99; background:var(--ink);
  padding:7rem var(--gutter) 3rem; display:flex; flex-direction:column; justify-content:space-between;
  opacity:0; transition:opacity var(--t-3) var(--ease);
}
/* Zonder deze regel overschrijft display:flex het hidden-attribuut en ligt er
   een onzichtbare laag over de hele pagina die alle klikken opvangt. */
.mobile-nav[hidden]{ display:none; }
.mobile-nav.is-open{ opacity:1; }
/* De laag zelf vervaagt alleen; de inhoud komt van onderen. De laag zelf
   verschuiven kan niet, want die staat op inset:0 en zou een kier laten. */
.mobile-nav > *{
  transform:translateY(12px);
  transition:transform var(--t-3) var(--ease), opacity var(--t-3) var(--ease);
}
.mobile-nav.is-open > *{ transform:none; }
.mobile-nav.is-open > * + *{ transition-delay:60ms; }
.mobile-nav nav{ display:flex; flex-direction:column; border-top:1px solid var(--navy-line); }
.mobile-nav a{
  display:flex; align-items:baseline; gap:1.25rem; padding:1.35rem 0;
  border-bottom:1px solid var(--navy-line);
  text-decoration:none; color:#fff; font-size:1.5rem; letter-spacing:-0.02em;
}
.mobile-nav .btn{ margin-top:var(--sp-4); }

/* ------------------------------ 7. Hero -------------------------------- */
.hero{
  position:relative; background:var(--ink); color:#fff; overflow:hidden;
  padding-top:clamp(9rem,13vw,13rem);
  display:flex; flex-direction:column; min-height:min(100svh,980px);
}
.hero-field{ position:absolute; inset:0; pointer-events:none; }
.rule-grid{
  position:absolute; inset:0;
  background-image:linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size:calc(100% / 6) 100%;
  max-width:var(--shell); margin-inline:auto; left:0; right:0;
  padding-inline:var(--gutter);
}
.hero-lines{ position:absolute; inset:0; width:100%; height:100%; opacity:.85; }
.hl-path{
  fill:none; stroke:var(--accent); stroke-width:1; opacity:.55;
  stroke-dasharray:1600; stroke-dashoffset:1600;
  animation:draw 2.6s var(--ease) .35s forwards;
}
.hl-path-2{ opacity:.28; animation-delay:.55s; }
.hl-path-3{ opacity:.16; animation-delay:.75s; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.hero-inner{ position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:var(--sp-6); }
.hero-title{
  font-size:var(--fs-display); margin:var(--sp-4) 0 0; max-width:16ch;
  letter-spacing:-0.042em; line-height:.99;
}
.hero-body{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-6); margin-top:var(--sp-5);
  max-width:1060px;
}
.hero-title em{ color:var(--accent); }
.hero-body p{ color:rgba(255,255,255,.62); max-width:44ch; font-size:var(--fs-lead); line-height:1.5; }
.hero-accent{ color:rgba(255,255,255,.95); }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.85rem; margin-top:var(--sp-1); grid-column:1 / -1; }

.hero-foot{ position:relative; border-top:1px solid var(--navy-line); padding-block:var(--sp-5); }
/* Twee niveaus, anders wint `p:last-child` en plakken de logo's tegen het label. */
.hero-foot .proof-label{
  font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin:0 0 var(--sp-6);
}
.marquee{
  position:relative; width:100%; overflow:hidden;
  display:flex; gap:var(--sp-5);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-row{
  display:flex; align-items:center; gap:var(--sp-5);
  flex:0 0 auto; animation:marquee 60s linear infinite;
}
@media (hover:hover){ .marquee:hover .marquee-row{ animation-play-state:paused; } }
.marquee img{
  height:52px; width:auto; max-width:none; opacity:.88;
  transition:opacity var(--t-2) var(--ease-kort);
}
@media (hover:hover){ .marquee li:hover img{ opacity:1; } }

/* Optische correctie. Bij één vaste hoogte ogen brede woordmerken veel zwaarder
   dan compacte logo's: Primaned is bij 52px hoog 311px breed, ROCO 36px. Deze
   uitzonderingen brengen de visuele massa in balans. Geldt automatisch voor
   beide marquee-rijen. */
.marquee img[src*="primaned"]      { height:38px; }
.marquee img[src*="jan-de-nul"]    { height:40px; }
.marquee img[src*="vsh-offshore"]  { height:40px; }
.marquee img[src*="willemen-bouw"] { height:40px; }
.marquee img[src*="willemen-infra"]{ height:40px; }
.marquee img[src*="besix-infra"]   { height:40px; }
.marquee img[src*="cordeel"]       { height:42px; }
.marquee img[src*="deme"]          { height:44px; }
.marquee img[src*="feadship"]      { height:46px; }
.marquee img[src*="van-laere"]     { height:46px; }
.marquee img[src*="denys"]         { height:46px; }
/* besix-infra staat hierboven al; deze regel geldt alleen voor besix zelf */
.marquee img[src*="besix-wit"]     { height:46px; }
/* De verschuiving moet exact gelijk zijn aan de gap, anders hapert de lus. */
@keyframes marquee{
  from{ transform:translateX(0); }
  to{ transform:translateX(calc(-100% - var(--sp-5))); }
}

/* --------------------------- 8/9. Components ---------------------------- */

/* split: problem */
.split{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.split-lead p{ font-size:var(--fs-lead); color:var(--text-soft); line-height:1.55; max-width:54ch; }

.quote{ margin:var(--sp-5) 0 0; padding-left:var(--sp-4); border-left:1px solid var(--accent-deep); }
.quote blockquote{
  margin:0; font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.35rem,2.3vw,1.9rem); line-height:1.34; letter-spacing:-0.015em; color:var(--text);
}
.quote figcaption{ margin-top:var(--sp-3); font-size:.82rem; color:var(--text-faint); letter-spacing:.02em; }

/* Citaat op een donkere sectie. De standaardkleuren gaan uit van een lichte
   achtergrond; zonder deze regels valt het citaat weg in het navy. */
.section-ink .quote{ border-left-color:var(--accent); }
.section-ink .quote blockquote{ color:#fff; }
.section-ink .quote figcaption{ color:rgba(255,255,255,.55); }

/* Geen nummers meer: dit zijn vijf gelijkwaardige symptomen, geen stappen. Een
   nummer suggereerde een volgorde die er niet is, en de pagina had er zes van
   die elkaar tegenspraken. Nu hetzelfde streepje dat elders een opsomming
   markeert. */
.symptoms{ border-top:1px solid var(--line); }
.symptoms li{
  position:relative; padding:var(--sp-2) 0 var(--sp-2) 1.9rem;
  border-bottom:1px solid var(--line-soft); font-size:1rem; color:var(--text);
}
.symptoms li::before{
  content:''; position:absolute; left:0; top:calc(var(--sp-2) + .72rem);
  width:9px; height:1px; background:var(--accent-deep);
}

.statement-band{ margin-top:var(--sp-7); padding-top:var(--sp-6); border-top:1px solid var(--line); }
/* Kleiner dan de sectiekop, en dat is het hele punt. Dit stond op
   clamp(1.9rem,4.4vw,3.6rem) tegenover --fs-h2 clamp(2.1rem,4.6vw,4rem): op
   1440 scheelde dat 0,6 pixel. Je zag dan twee koppen in één sectie en wist
   niet welke telde. Dit is geen tweede titel maar de conclusie van de
   symptomenlijst erboven, dus hoort hij ondergeschikt te zijn. */
.statement{
  /* Ruimere regelafstand dan de 1,06 van vroeger: die hoorde bij displaygrootte.
     Bij 24px op mobiel is dit gewone leestekst over twee regels. */
  font-size:clamp(1.5rem,2.9vw,2.4rem); line-height:1.3; letter-spacing:-0.03em;
  color:var(--text); max-width:26ch; margin-bottom:var(--sp-4);
}
.statement span{ color:var(--text-faint); }
.statement-note{ max-width:60ch; color:var(--text-soft); font-size:var(--fs-lead); line-height:1.55; }

/* villain: de rapportenla */
.villain{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr); gap:var(--sp-6); align-items:start; }
.villain-copy p{ font-size:var(--fs-lead); color:var(--text-soft); line-height:1.55; max-width:56ch; }
/* De vergelijking die het betoog van de sectie draagt. Bewust een echte tabel:
   het is er een, en zo leest een schermlezer de rij- en kolomkoppen mee. Het
   blokje markeert wat de operatie heeft; waar verbeteren staat blijft de cel
   leeg, want dat is precies wat er gezegd wordt. */
.ordening{ margin:0; }
.ordening table{ width:100%; border-collapse:collapse; }
.ordening caption{
  text-align:left; font-size:var(--fs-micro); letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-faint);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--line);
}
.ordening th,.ordening td{
  padding:var(--sp-3) 0; text-align:left; font-weight:400;
  border-bottom:1px solid var(--line-soft);
}
.ordening thead th{
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); text-align:center;
}
.ordening tbody th{ color:var(--text); font-size:.98rem; }
.ordening thead th,.ordening tbody td{ width:5.75rem; text-align:center; }
/* Een vinkje, geen blokje: een blokje zegt "hier staat iets", een vinkje zegt
   "dit is geregeld". Zelfde constructie als het vinkje in de zelftoets: twee
   randen van een leeg vakje, een kwartslag gedraaid. De verschuiving corrigeert
   dat de draaiing het optische midden verlegt. */
.ord-wel{
  display:inline-block; width:11px; height:6px;
  border-left:1.5px solid var(--accent-deep);
  border-bottom:1.5px solid var(--accent-deep);
  transform:translateY(-2px) rotate(-45deg);
}

/* De vergelijking bewijst zichzelf. De rijen komen één voor één binnen en het
   vinkje landt een tel na zijn rij, aan de kant van de operatie. Aan de kant
   van verbeteren gebeurt er niets: die streepjes staan er vanaf het begin en
   bewegen nooit mee. Die stilte is het argument van de hele sectie, dus die
   mag je niet wegpoetsen met een animatie.

   De container zelf beweegt niet meer; .reveal blijft er alleen op staan omdat
   main.js daarop observeert en er is-visible op zet. */
.js .ordening.reveal{ opacity:1; transform:none; }
.js .ordening tbody tr{
  opacity:0; transform:translateY(6px);
  transition:opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
}
.js .ordening.is-visible tbody tr{ opacity:1; transform:none; }
.js .ordening tbody tr:nth-child(2){ transition-delay:90ms; }
.js .ordening tbody tr:nth-child(3){ transition-delay:180ms; }

.js .ord-wel{
  opacity:0;
  transform:translateY(-2px) rotate(-45deg) scale(.6);
  transition:opacity var(--t-3) var(--ease), transform var(--t-3) var(--ease);
  transition-delay:120ms;
}
.js .ordening.is-visible .ord-wel{
  opacity:1; transform:translateY(-2px) rotate(-45deg) scale(1);
}
.js .ordening tbody tr:nth-child(2) .ord-wel{ transition-delay:210ms; }
.js .ordening tbody tr:nth-child(3) .ord-wel{ transition-delay:300ms; }
/* Het afwezige krijgt bewust een eigen teken. Een volledig lege kolom leest
   als een fout in plaats van als een boodschap; een dunne streep leest als
   "hier staat niets, en dat is de bedoeling". */
.ord-niet{
  display:inline-block; width:9px; height:1px;
  background:var(--text-faint); opacity:.55;
}
.quote-strong{ margin-top:var(--sp-5); border-left-color:var(--accent-deep); }
.quote-strong blockquote{ font-size:clamp(1.5rem,2.6vw,2.15rem); color:var(--text); }


/* beloften */
.promises{ border-top:1px solid var(--navy-line); }
/* Nummers eraf, zelfde reden als bij de symptomen: vijf gelijkwaardige
   afspraken. De kolom die het cijfer droeg is daarmee ook weg; op zijn plek
   staat nu de belofte links en de toelichting rechts, hetzelfde idioom als
   sectie 04 en de expertiselijst. */
.promises li{
  display:grid; grid-template-columns:minmax(0,.5fr) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-5); align-items:baseline; padding:var(--sp-4) 0;
  border-bottom:1px solid var(--navy-line);
  transition:background var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .promises li:hover{ background:rgba(255,255,255,.025); } }
/* De acties in het middendeel van de pagina. Tekstregels op de donkere secties,
   geen knoppen: die blokken horen op hun eigen inhoud te eindigen en niet op een
   verkooppraatje. Tussen de hero en de beloftes zat ruim zeven schermen zonder
   ook maar één zichtbare actie. */
.sectie-actie{
  /* Geen eigen bovenrand: de lijst erboven eindigt al met een haarlijn, en twee
     lijnen onder elkaar ogen per ongeluk. De ruimte doet het werk. */
  margin-top:var(--sp-5);
  color:rgba(255,255,255,.7); font-size:var(--fs-lead); line-height:1.55;
}
.sectie-actie a{
  color:#fff; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid var(--accent);
  transition:border-color var(--t-1) var(--ease-kort);
}
.sectie-actie a span{ display:inline-block; transition:transform var(--t-1) var(--ease-kort); }
@media (hover:hover){
  .sectie-actie a:hover{ border-bottom-color:#fff; }
  .sectie-actie a:hover span{ transform:translateX(3px); }
}
.promises h3{ font-size:clamp(1.1rem,1.6vw,1.35rem); color:#fff; margin:0; line-height:1.3; }
.promises p{ color:rgba(255,255,255,.62); max-width:52ch; margin:0; }

/* zelftoets-band */
.selftest{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-5);
  align-items:center; margin-top:var(--sp-6);
  padding:var(--sp-5); border:1px solid var(--line); background:var(--paper);
}
.selftest h2{ font-size:clamp(1.4rem,2.4vw,2rem); letter-spacing:-0.03em; margin-bottom:var(--sp-2); }
.selftest p{ color:var(--text-soft); max-width:52ch; margin:0; }
.selftest .btn{ white-space:nowrap; }

/* statistieken */
.stats{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--line); margin-top:var(--sp-6);
}
.stats li{ padding:var(--sp-4) 2rem var(--sp-4) 0; border-bottom:1px solid var(--line); }
.stats b{
  display:block; font-size:clamp(2.4rem,4.5vw,3.6rem); font-weight:300;
  letter-spacing:-0.04em; line-height:1; color:var(--ink); margin-bottom:var(--sp-2);
}
.stats span{ display:block; color:var(--text-soft); max-width:26ch; line-height:1.55; }
.stats em{ display:block; margin-top:var(--sp-1); font-family:var(--sans); font-style:normal;
  font-size:.78rem; color:var(--text-faint); }

/* testimonials */
.testimonials{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4);
  margin-top:var(--sp-6);
}
.testimonial{ border-top:1px solid var(--line); padding-top:var(--sp-4); }
.testimonial blockquote{
  margin:0 0 var(--sp-3); font-family:var(--serif); font-style:italic; font-weight:300;
  font-size:clamp(1.1rem,1.6vw,1.3rem); line-height:1.45; color:var(--text);
}
.testimonial figcaption{ font-size:.85rem; color:var(--text-faint); line-height:1.5; }
.testimonial figcaption strong{ display:block; color:var(--text); font-weight:500; }

/* guide */
.guide-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); gap:var(--sp-6); align-items:start; }
.guide-copy p{ color:rgba(255,255,255,.7); max-width:58ch; font-size:var(--fs-lead); line-height:1.55; }
.guide-facts{ margin:var(--sp-5) 0 0; display:grid; gap:0; border-top:1px solid var(--navy-line); }
.guide-facts > div{ display:grid; grid-template-columns:minmax(120px,.35fr) 1fr; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--navy-line); }
.guide-facts dt{ font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.guide-facts dd{ margin:0; color:#fff; font-size:.98rem; }

.guide-visual{ margin:0; width:100%; }
.order-diagram{ width:100%; height:auto; display:block; }
.od-chaos circle{ fill:rgba(255,255,255,.42); }
.od-order line{ stroke:var(--navy-line); stroke-width:1; }
.od-order circle{ fill:var(--accent); }
.od-divider{ stroke:var(--navy-line); stroke-width:1; stroke-dasharray:3 5; }
.od-arrow{ stroke:var(--accent); stroke-width:1; fill:none; }
.od-arrow-head{ stroke:var(--accent); stroke-width:1; fill:none; }

/* Het diagram bouwt zichzelf op zodra het in beeld komt: eerst de losse
   stippen, dan de pijl, dan het geordende systeem. Zelfde techniek als de
   hero-lijnen. Aangestuurd door .is-visible van de bestaande observer, dus
   zonder extra JavaScript. */
.js .guide-visual .od-chaos circle,
.js .guide-visual .od-order circle{ opacity:0; }
.js .guide-visual .od-order line,
.js .guide-visual .od-arrow,
.js .guide-visual .od-arrow-head{ stroke-dasharray:300; stroke-dashoffset:300; }
/* De scheidslijn houdt zijn stippelpatroon, dus die kan niet 'getekend'
   worden met stroke-dasharray. Die vervaagt in plaats daarvan. */
.js .guide-visual .od-divider{ opacity:0; }

@keyframes od-verschijn{ to{ opacity:1; } }
@keyframes od-teken{ to{ stroke-dashoffset:0; } }

/* chaos: acht stippen, in rommelige volgorde zodat het niet als een rij leest */
.guide-visual.is-visible .od-chaos circle{ animation:od-verschijn .5s var(--ease) forwards; }
.guide-visual.is-visible .od-chaos circle:nth-child(1){ animation-delay:.05s; }
.guide-visual.is-visible .od-chaos circle:nth-child(2){ animation-delay:.34s; }
.guide-visual.is-visible .od-chaos circle:nth-child(3){ animation-delay:.14s; }
.guide-visual.is-visible .od-chaos circle:nth-child(4){ animation-delay:.48s; }
.guide-visual.is-visible .od-chaos circle:nth-child(5){ animation-delay:.22s; }
.guide-visual.is-visible .od-chaos circle:nth-child(6){ animation-delay:.40s; }
.guide-visual.is-visible .od-chaos circle:nth-child(7){ animation-delay:.10s; }
.guide-visual.is-visible .od-chaos circle:nth-child(8){ animation-delay:.28s; }

/* scheidslijn en pijl */
.guide-visual.is-visible .od-divider  { animation:od-verschijn .6s var(--ease) .40s forwards; }
.guide-visual.is-visible .od-arrow    { animation:od-teken .9s var(--ease) .20s forwards; }
.guide-visual.is-visible .od-arrow-head{ animation:od-teken .3s var(--ease) 1.00s forwards; }

/* het geordende systeem: vier lijnen na elkaar, met de stip erachteraan */
.guide-visual.is-visible .od-order line{ animation:od-teken .7s var(--ease) forwards; }
.guide-visual.is-visible .od-order line:nth-of-type(1){ animation-delay:.90s; }
.guide-visual.is-visible .od-order line:nth-of-type(2){ animation-delay:1.06s; }
.guide-visual.is-visible .od-order line:nth-of-type(3){ animation-delay:1.22s; }
.guide-visual.is-visible .od-order line:nth-of-type(4){ animation-delay:1.38s; }

.guide-visual.is-visible .od-order circle{ animation:od-verschijn .4s var(--ease) forwards; }
.guide-visual.is-visible .od-order circle:nth-of-type(1){ animation-delay:1.15s; }
.guide-visual.is-visible .od-order circle:nth-of-type(2){ animation-delay:1.31s; }
.guide-visual.is-visible .od-order circle:nth-of-type(3){ animation-delay:1.47s; }
.guide-visual.is-visible .od-order circle:nth-of-type(4){ animation-delay:1.63s; }
.guide-visual figcaption{ margin-top:var(--sp-3); font-size:.82rem; color:rgba(255,255,255,.5); letter-spacing:.02em; }

/* verbetersysteem */
.system{ border-top:1px solid var(--line); }
.system-item{
  display:grid; grid-template-columns:minmax(64px,.09fr) minmax(0,1fr);
  gap:var(--sp-5);
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
  transition:background var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .system-item:hover{ background:rgba(255,255,255,.55); } }
.system-num{
  font-size:clamp(1.5rem,2.4vw,2.1rem); font-weight:300; color:var(--accent-deep);
  letter-spacing:-0.02em; font-variant-numeric:tabular-nums; margin:0; line-height:1.1;
}
/* Naam links, zin rechts. Zelfde vorm als de expertiselijst verderop, zodat de
   pagina één idioom heeft voor "een rij met een naam en een toelichting". Stond
   eerder als kop met een opsomming van drie of vier punten eronder; die punten
   herhaalden grotendeels de zin erboven. */
.system-content{
  display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-5); align-items:baseline;
}
.system-content h3{ font-size:var(--fs-h3); }
.system-lead{ color:var(--text-soft); font-size:var(--fs-lead); line-height:1.5; margin:0; max-width:52ch; }
.cap-lijst li{ border-bottom:1px solid var(--line); }
.cap-lijst a{
  display:grid; grid-template-columns:minmax(0,.44fr) minmax(0,1fr);
  gap:var(--sp-2) var(--sp-5); align-items:baseline;
  padding:var(--sp-3) var(--sp-3) var(--sp-3) 0;
  text-decoration:none;
  transition:background var(--t-1) var(--ease-kort);
}
.cap-naam{ color:var(--ink); font-size:1.08rem; letter-spacing:-0.02em; line-height:1.35; }
.cap-uitleg{ color:var(--text-soft); font-size:.95rem; line-height:1.55; max-width:52ch; }
@media (hover:hover){
  .cap-lijst a:hover{ background:var(--bone); }
  .cap-lijst a:hover .cap-naam{ color:var(--accent-deep); }
}
.cap-lijst a:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-2px; }

/* veelgestelde vragen. Uitklapbaar met <details>, dus zonder JavaScript en
   met toetsenbordbediening uit de browser zelf. De inhoud staat altijd in de
   pagina, ook dichtgeklapt, dus Google en AI-tools lezen alles. */
.faq{ border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) 0; cursor:pointer; list-style:none;
  transition:color var(--t-1) var(--ease-kort);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary h3{
  font-size:clamp(1.05rem,1.5vw,1.25rem); letter-spacing:-0.02em; margin:0;
  color:var(--text); font-weight:400;
}
@media (hover:hover){ .faq-item summary:hover h3{ color:var(--accent-deep); } }
/* plusteken van twee haarlijnen, in dezelfde taal als de rest van de site */
.faq-item summary::after{
  content:''; width:14px; height:14px; flex:0 0 auto;
  background:
    linear-gradient(var(--accent-deep),var(--accent-deep)) center/14px 1px no-repeat,
    linear-gradient(var(--accent-deep),var(--accent-deep)) center/1px 14px no-repeat;
  transition:transform var(--t-3) var(--ease-kort);
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item[open] summary h3{ color:var(--accent-deep); }
/* Een <details> laat zijn inhoud niet met een transitie groeien: de browser
   zet hem van display:none naar zichtbaar, en daar valt niets tussen te
   animeren. Een animatie start wél zodra het element verschijnt, dus dat is de
   route. Het opengaan krijgt zo een overgang, het dichtgaan blijft direct —
   dat laatste is ook wat je wilt, want wie sluit is klaar met lezen. */
@keyframes faq-open{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}
.js .faq-item[open] > p{ animation:faq-open var(--t-3) var(--ease) both; }
.faq-item > p{
  margin:0; padding:0 0 var(--sp-4); max-width:70ch;
  color:var(--text-soft); font-size:var(--fs-lead); line-height:1.6;
}

/* transformation */
.shift{ border-top:1px solid var(--navy-line); }
.shift-head{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); padding:var(--sp-3) 0; border-bottom:1px solid var(--navy-line); }
.shift-head p{
  margin:0; font-size:var(--fs-micro); letter-spacing:.16em; text-transform:uppercase;
}
.shift-head p:first-child{ color:rgba(255,255,255,.5); }
.shift-head p:last-child{ color:var(--accent); }
.shift-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); padding:var(--sp-3) 0; border-bottom:1px solid rgba(27,59,87,.6); }
.shift-row p{ margin:0; font-size:1.02rem; }
.shift-row p:first-child{ color:rgba(255,255,255,.5); }
.shift-row p:last-child{ color:#fff; position:relative; }
.promise{
  margin-top:var(--sp-6); font-size:clamp(1.9rem,4.4vw,3.4rem);
  letter-spacing:-0.035em; line-height:1.05; color:#fff;
}
.promise em{ color:var(--accent); }
.promise::after{ content:''; display:block; width:64px; height:1px; background:var(--accent); margin-top:var(--sp-4); }

/* praktijk */
.case-note{ margin-top:var(--sp-5); font-size:.85rem; color:var(--text-faint); }

/* fotoraster */
.photo-grid{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-3); margin-top:var(--sp-5);
}
.photo-grid figure{ margin:0; }
.photo-grid img{ width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.photo-grid figcaption{
  margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px solid var(--line);
  font-size:.85rem; color:var(--text-soft);
}

/* persoon in de contactsectie */
.person{
  display:grid; grid-template-columns:150px minmax(0,1fr); gap:var(--sp-4);
  align-items:start; margin-top:var(--sp-5);
  padding-top:var(--sp-5); border-top:1px solid var(--navy-line);
}
.person > img{ width:100%; height:auto; border-radius:2px; }
.person-name{ font-size:1.25rem; color:#fff; letter-spacing:-0.02em; margin-bottom:.2rem; }
.person-role{ font-size:.9rem; color:rgba(255,255,255,.5); margin-bottom:var(--sp-3); }
.person .cta-details{ margin-top:0; border-top:0; }
.person .cta-details li:first-child{ padding-top:0; }

/* CTA */
.section-cta{ background:var(--navy); color:rgba(255,255,255,.75); }
.cta-inner{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.7fr); gap:var(--sp-6); align-items:start; }
.cta-copy p{ max-width:54ch; color:rgba(255,255,255,.7); font-size:var(--fs-lead); line-height:1.55; }
.cta-copy .h-display{ margin:0 0 var(--sp-4); }

/* Procesplan bij de CTA: drie stappen, zodat de bezoeker weet waar hij ja tegen zegt
   voordat hij op de knop drukt. Bewust kort; de uitwerking staat op werkwijze.html. */
.procesplan{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-4); margin:var(--sp-5) 0;
  padding:var(--sp-4) 0; border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}
.procesplan li{ display:block; }
.procesplan-num{
  margin:0 0 var(--sp-1); font-size:.95rem; font-weight:300; color:var(--accent);
  font-variant-numeric:tabular-nums; letter-spacing:.06em;
}
.procesplan h3{ font-size:1rem; color:#fff; margin:0 0 var(--sp-1); letter-spacing:-0.01em; }
.cta-copy .procesplan p{ margin:0; font-size:.92rem; line-height:1.5; color:rgba(255,255,255,.6); max-width:34ch; }
.procesplan a{ color:var(--accent); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color var(--t-1) var(--ease-kort); }
@media (hover:hover){ .procesplan a:hover{ border-bottom-color:var(--accent); } }
.cta-card{ border:1px solid var(--navy-line); padding:var(--sp-4); background:rgba(255,255,255,.025); }
.cta-details{ margin-top:var(--sp-5); border-top:1px solid var(--navy-line); max-width:34rem; }
.cta-details li{ display:grid; grid-template-columns:minmax(96px,.32fr) 1fr; gap:var(--sp-3); padding:var(--sp-2) 0; font-size:.95rem; color:#fff; border-bottom:1px solid var(--navy-line); }
.cta-details li > span:first-child{ color:rgba(255,255,255,.5); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; padding-top:.2rem; }
.cta-details a{ text-decoration:none; border-bottom:1px solid rgba(110,180,222,.4); transition:border-color var(--t-1) var(--ease-kort); }
@media (hover:hover){ .cta-details a:hover{ border-color:var(--accent); } }

/* formulier */
.field{ margin-bottom:var(--sp-3); }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-3); }
.field label{
  display:block; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:var(--sp-1);
}
.field label span{ color:var(--accent); }
.field input,.field textarea{
  width:100%; font:inherit; font-size:.98rem; color:#fff;
  background:rgba(255,255,255,.04); border:1px solid var(--veld-rand); border-radius:2px;
  padding:.8rem .95rem; transition:border-color var(--t-1) var(--ease-kort), background var(--t-1) var(--ease-kort);
}
.field textarea{ resize:vertical; min-height:110px; }
@media (hover:hover){ .field input:hover,.field textarea:hover{ border-color:#454D77; } }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); background:rgba(255,255,255,.07); }
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{ border-color:#E0705F; }
.honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
/* Turnstile. Met interaction-only is dit vak meestal leeg en nemen we geen ruimte in;
   verschijnt het vinkje wel, dan hoort er lucht omheen. */
.cf-turnstile:not(:empty){ margin:var(--sp-3) 0 var(--sp-2); }

.form-submit{ width:100%; margin-top:var(--sp-1); }
.form-note{ margin-top:var(--sp-3); font-size:.8rem; line-height:1.55; color:rgba(255,255,255,.5); }
.form-note a{ color:rgba(255,255,255,.7); }
.form-status{ margin-top:var(--sp-3); margin-bottom:var(--sp-3); font-size:.9rem; }
.form-status:empty{ display:none; }
.form-status.is-ok{ color:var(--accent); }
.form-status.is-error{ color:#F0907F; }

/* De melding bij een veld. #F0907F geeft 6,44:1 op de sectieachtergrond #1C2449,
   ruim boven de 4,5 die de norm vraagt. Het driehoekje ervoor is er omdat kleur
   nooit het enige signaal mag zijn: wie rood niet onderscheidt, ziet nog steeds
   dat hier iets aan de hand is. */
.veld-fout{
  margin:.45rem 0 0; font-size:.85rem; line-height:1.5; color:#F0907F;
  display:flex; align-items:baseline; gap:.4rem;
}
.veld-fout::before{ content:'▲'; font-size:.7em; flex:none; }
.veld-fout[hidden]{ display:none; }
/* Het formulier verdween abrupt op het moment dat iemand net besloten had
   contact op te nemen: het emotioneel zwaarste moment van de site. Nu ruimen de
   velden zichzelf op en komt de bevestiging van onderen binnen. allow-discrete
   laat display:none meelopen met de overgang in plaats van hem af te kappen;
   browsers die het niet kennen vallen terug op het oude, directe gedrag. */
.form .field,.form .form-submit,.form .form-note{
  transition:opacity var(--t-4) var(--ease-kort),
             transform var(--t-4) var(--ease-kort),
             display var(--t-4) allow-discrete;
}
.form.is-sent .field,.form.is-sent .form-submit,.form.is-sent .form-note{
  opacity:0; transform:translateY(-6px); display:none;
}
.form-status.is-ok{
  transition:opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease);
}
@starting-style{
  .form-status.is-ok{ opacity:0; transform:translateY(8px); }
}

/* -------------------- 9b. Juridische pagina's -------------------------- */
.page-hero{
  background:var(--ink); color:#fff;
  padding-block:clamp(8rem,12vw,11rem) var(--sp-6);
}
.page-hero .eyebrow{ margin:0 0 var(--sp-3); }
.page-hero h1{
  font-size:clamp(2.4rem,5.4vw,4.5rem); letter-spacing:-0.04em; max-width:18ch;
}
.page-hero h1 em{ color:var(--accent); }
.page-lede{
  margin-top:var(--sp-4); max-width:56ch; color:rgba(255,255,255,.7);
  font-size:var(--fs-lead); line-height:1.55;
}
.page-meta{
  display:grid; grid-template-columns:repeat(3,minmax(0,auto)); gap:var(--sp-5);
  margin:var(--sp-5) 0 0; padding-top:var(--sp-4); border-top:1px solid var(--navy-line);
  justify-content:start;
}
.page-meta dt{ font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:.4rem; }
.page-meta dd{ margin:0; color:#fff; font-size:.95rem; }

.legal-shell{ display:grid; grid-template-columns:minmax(200px,.28fr) minmax(0,1fr); gap:var(--sp-6); align-items:start; }
.legal-toc{ position:sticky; top:6.5rem; }
.legal-toc ol{ counter-reset:toc; border-top:1px solid var(--line); }
.legal-toc li{ border-bottom:1px solid var(--line-soft); }
.legal-toc a{
  display:block; padding:.75rem 0; font-size:.88rem; color:var(--text-soft);
  text-decoration:none; transition:color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .legal-toc a:hover{ color:var(--accent-deep); } }

.legal-body{ max-width:72ch; }
.legal-body h2{
  font-size:clamp(1.25rem,1.9vw,1.6rem); letter-spacing:-0.025em;
  margin:var(--sp-5) 0 var(--sp-3); display:flex; gap:1rem; align-items:baseline;
  scroll-margin-top:7rem;
}
.legal-body h2:first-child{ margin-top:0; }
.legal-body h2 span{
  font-size:.78rem; letter-spacing:.12em; color:var(--accent-deep); font-variant-numeric:tabular-nums;
  min-width:1.6rem;
}
.legal-body h3{
  font-size:clamp(1.05rem,1.4vw,1.2rem); letter-spacing:-0.02em; color:var(--text);
  margin:var(--sp-5) 0 var(--sp-3); font-weight:500;
}
.legal-body p{ color:var(--text-soft); line-height:1.7; }
.legal-body ul{ margin:0 0 1.1em; }
.legal-body ul li{
  position:relative; padding:.4rem 0 .4rem 1.5rem; color:var(--text-soft); line-height:1.65;
}
.legal-body ul li::before{
  content:''; position:absolute; left:0; top:1.05rem; width:8px; height:1px; background:var(--accent-deep);
}
.legal-body ul.plain li::before{ display:none; }
.legal-body ul.plain li{ padding-left:0; }
.legal-body strong{ color:var(--text); font-weight:500; }
.legal-body a{ color:var(--accent-deep); }
.legal-foot{ margin-top:var(--sp-6); padding-top:var(--sp-5); border-top:1px solid var(--line); }

.cap-alle{ margin-top:var(--sp-4); text-align:right; }
.cap-alle a{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.92rem; color:var(--accent-deep); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .cap-alle a:hover{ border-bottom-color:var(--accent-deep); } }
.cap-alle a span{ transition:transform var(--t-1) var(--ease-kort); }
@media (hover:hover){ .cap-alle a:hover span{ transform:translateX(3px); } }

/* ------------------------ 9e. Expertise-overzicht ----------------------- */
.exp-lijst{ border-top:1px solid var(--line); }
.exp-lijst li{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:var(--sp-5); padding:var(--sp-5) 0; border-bottom:1px solid var(--line);
  align-items:start;
}
.exp-lijst h2{
  font-size:clamp(1.3rem,2vw,1.7rem); letter-spacing:-0.025em; margin:0;
}
.exp-lijst h2 a{
  text-decoration:none; color:var(--text);
  border-bottom:1px solid var(--line); transition:border-color var(--t-1) var(--ease-kort), color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .exp-lijst h2 a:hover{ color:var(--accent-deep); border-bottom-color:var(--accent-deep); } }
.exp-lijst p{ margin:0; color:var(--text-soft); font-size:var(--fs-lead); line-height:1.55; max-width:52ch; }

/* terug naar het overzicht, onderaan de inhoudsopgave van een expertisepagina */
.lees-verder{ margin:var(--sp-4) 0 0; }
.lees-verder a{
  display:inline-flex; align-items:center; gap:.5rem;
  color:var(--accent-deep); text-decoration:none; font-size:.95rem;
  border-bottom:1px solid transparent; transition:border-color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .lees-verder a:hover{ border-bottom-color:var(--accent-deep); } }
.lees-verder a span{ transition:transform var(--t-1) var(--ease-kort); }
@media (hover:hover){ .lees-verder a:hover span{ transform:translateX(3px); } }

.toc-terug{ margin-top:var(--sp-4); font-size:.88rem; }
.toc-terug a{ color:var(--accent-deep); text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color var(--t-1) var(--ease-kort); }
@media (hover:hover){ .toc-terug a:hover{ border-bottom-color:var(--accent-deep); } }

@media (max-width:860px){
  .exp-lijst li{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
}

/* -------------------------- 9d. Artikelen ------------------------------ */
.artikel-figuur{ margin:clamp(2rem,4vw,3rem) 0; }
.artikel-figuur .driehoek{ width:100%; max-width:600px; height:auto; display:block; }
.artikel-figuur figcaption{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--line);
  font-size:.85rem; color:var(--text-soft); line-height:1.55; max-width:52ch;
}
.dh-rand{ fill:none; stroke:var(--line); stroke-width:1.5; }
.dh-lijn{ stroke:var(--line); stroke-width:1; }
.dh-deel{ stroke:var(--line); stroke-width:1; stroke-dasharray:3 5; }
.dh-basis{ fill:none; stroke:var(--line); stroke-width:1.5; }
.dh-pijl{ stroke:var(--line); stroke-width:1; fill:none; }
.dh-top{ font-family:var(--sans); font-size:16px; font-weight:500; fill:var(--text); }
.dh-laag{ font-family:var(--sans); font-size:12.5px; font-weight:500; fill:var(--text); }
.dh-vak{ font-family:var(--sans); font-size:12.5px; fill:var(--text-soft); }
/* de veranderkant krijgt de accentkleur: dat is waar het artikel over gaat */
.dh-wijzig{ fill:var(--accent-deep); }
.dh-basistekst{ font-family:var(--sans); font-size:12px; fill:var(--text-soft); }
.dh-zij{ font-family:var(--sans); font-size:11px; letter-spacing:.12em;
         text-transform:uppercase; fill:var(--text-faint); }

/* de quote in een artikel staat zonder bijschrift, dus zonder ondermarge-correctie */
.legal-body .quote{ margin:clamp(2rem,4vw,2.75rem) 0; }
.legal-body .quote blockquote{ font-size:clamp(1.2rem,2vw,1.6rem); }

/* ------------------------- 9c. Zelftoets ------------------------------- */
.selftest-shell{ display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.42fr); gap:var(--sp-6); align-items:start; }
.questions{ counter-reset:q; border-top:1px solid var(--line); }
.q{ counter-increment:q; border-bottom:1px solid var(--line); }
.q label{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--sp-3); align-items:start;
  padding:var(--sp-3) 0; cursor:pointer;
}
.q input{
  appearance:none; -webkit-appearance:none; margin:.15rem 0 0; width:22px; height:22px;
  border:1px solid var(--line); border-radius:2px; background:var(--paper);
  cursor:pointer; position:relative; flex:0 0 auto;
  transition:border-color var(--t-2) var(--ease-kort), background var(--t-2) var(--ease-kort);
}
.q input::after{
  content:''; position:absolute; left:6px; top:6px; width:9px; height:5px;
  border-left:1.5px solid #fff; border-bottom:1.5px solid #fff;
  transform:rotate(-45deg) scale(.6); opacity:0;
  transition:opacity var(--t-2) var(--ease-kort), transform var(--t-2) var(--ease-kort);
}
@media (hover:hover){ .q label:hover input{ border-color:var(--accent-deep); } }
.q input:checked{ background:var(--accent-deep); border-color:var(--accent-deep); }
.q input:checked::after{ opacity:1; transform:rotate(-45deg) scale(1); }
.q-text{ color:var(--text); line-height:1.55; }
.q-text em{
  display:block; font-family:var(--sans); font-style:normal; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--text-faint); margin-bottom:.35rem;
}

.score{ margin-top:var(--sp-5); padding-top:var(--sp-4); border-top:1px solid var(--ink); }
.score-count b{ font-size:clamp(2.2rem,4vw,3.2rem); font-weight:300; letter-spacing:-0.04em; }
.score-count{ display:flex; align-items:baseline; gap:.6rem; color:var(--text-faint); font-size:.95rem; margin-bottom:var(--sp-2); }
.score-label{ font-size:clamp(1.2rem,2vw,1.6rem); letter-spacing:-0.025em; color:var(--ink); margin-bottom:var(--sp-2); }
.score-text{ color:var(--text-soft); max-width:52ch; }

.selftest-side{ position:sticky; top:6.5rem; }
.score-key{ margin:0 0 var(--sp-4); border-top:1px solid var(--line); }
.score-key > div{ display:grid; grid-template-columns:minmax(72px,.3fr) 1fr; gap:var(--sp-3); padding:var(--sp-2) 0; border-bottom:1px solid var(--line-soft); }
.score-key dt{ font-size:.8rem; letter-spacing:.06em; color:var(--accent-deep); font-variant-numeric:tabular-nums; }
.score-key dd{ margin:0; font-size:.92rem; color:var(--text-soft); line-height:1.5; }
.selftest-note{ font-size:.9rem; color:var(--text-soft); line-height:1.6; margin-bottom:var(--sp-4); }
.selftest-side .btn{ width:100%; margin-bottom:.6rem; }
.selftest-side .btn-ghost{ color:var(--text); border-color:var(--line); }
@media (hover:hover){ .selftest-side .btn-ghost:hover{ background:var(--bone); } }

/* ----------------------------- 10. Footer ------------------------------ */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.6); padding-block:var(--sp-6) var(--sp-5); font-size:.92rem; }
.footer-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-4); flex-wrap:wrap; padding-bottom:var(--sp-4); border-bottom:1px solid var(--navy-line); }
/* Expliciet op 300. Zonder deze regel erfde de claim gewicht 400 van body, en
   dat was de enige plek op de site die dat gewicht gebruikte. Google levert bij
   één gewicht een vast bestand in plaats van een variabel lettertype: 62 KB in
   plaats van 143. Voeg hier dus geen tweede gewicht toe zonder dat na te meten. */
.footer-claim{ margin:0; font-family:var(--serif); font-style:italic; font-weight:300; font-size:1.15rem; color:rgba(255,255,255,.55); }
.footer-cols{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4); padding-block:var(--sp-5); }
.footer-cols address{ color:rgba(255,255,255,.8); line-height:1.7; }
.footer-meta{ margin-top:var(--sp-3); color:rgba(255,255,255,.5); font-size:.82rem; line-height:1.7; }
.footer-links li{ padding:.65rem 0; }   /* 44,7px tikdoel op mobiel */
.footer-links a{ text-decoration:none; color:rgba(255,255,255,.72); transition:color var(--t-1) var(--ease-kort); }
@media (hover:hover){ .footer-links a:hover{ color:var(--accent); } }
.footer-bottom{ display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap; padding-top:var(--sp-4); border-top:1px solid var(--navy-line); font-size:.82rem; color:rgba(255,255,255,.5); }
.footer-bottom p{ margin:0; }
.footer-bottom ul{ display:flex; gap:1.75rem; }
.footer-bottom a{ text-decoration:none; display:inline-block; padding:.75rem 0; }
@media (hover:hover){ .footer-bottom a:hover{ color:var(--accent); } }

/* ----------------------------- 11. Motion ------------------------------ */
.reveal{ opacity:0; transform:translateY(18px); }
.js .reveal{ transition:opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
html:not(.js) .reveal{ opacity:1; transform:none; }

/* Haarlijnen die zich tekenen.
   Een border kun je niet in breedte animeren, dus wordt de scheidslijn een
   ::after die van scaleX(0) naar scaleX(1) gaat. Zet .rule-draw op een element
   dat nu een border-top heeft; de border zelf wordt hier uitgezet. */
.js .rule-draw{ position:relative; border-top-color:transparent; }
.js .rule-draw::after{
  content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
  background:var(--line); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-5) var(--ease);
}
.js .rule-draw.is-visible::after{ transform:scaleX(1); }
/* op donkere secties een lichtere lijnkleur */
.js .section-ink .rule-draw::after,
.js .section-cta .rule-draw::after{ background:var(--navy-line); }

/* De accentstreep onder "Structureel beter presteren" tekent mee. */
.js .promise::after{ transform:scaleX(0); transform-origin:left; transition:transform var(--t-5) var(--ease) var(--t-2); }
.js .promise.is-visible::after{ transform:scaleX(1); }

/* Voortgangslijn bovenaan. Alleen transform, dus geen herberekening per frame. */
.scroll-progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:120;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  pointer-events:none; will-change:transform;
}
html:not(.js) .scroll-progress{ display:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  /* Minder en zachter, niet niets. Wie deze voorkeur aanzet heeft last van
     dingen die bewegen, niet van kleur die wisselt. Daarom perken we de lijst
     eigenschappen in in plaats van de looptijd op nul te zetten: alles wat
     schuift, schaalt, draait of zich tekent gaat uit, en de bevestiging dat je
     iets aanraakte blijft. Zet je hier transition-duration op nul, dan verdwijnt
     die bevestiging ook, en dat is geen winst voor deze bezoeker. */
  *,*::before,*::after{
    transition-property:color, background-color, border-color, fill, stroke, opacity !important;
    transition-duration:var(--t-1) !important;
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
  .hl-path{ stroke-dashoffset:0; }
  .marquee-row{ animation:none; }
  .marquee-row[aria-hidden="true"]{ display:none; }
  /* De voortgangslijn stond hier op display:none. Onterecht: hij volgt je eigen
     scrollen, net als een schuifbalk, en beweegt niet uit zichzelf. Op een
     pagina van 18.000 pixels is hij juist voor deze bezoeker het nuttigst. */
  .js .rule-draw::after,
  .js .promise::after{ transform:scaleX(1) !important; }
  .js .guide-visual .od-chaos circle,
  .js .guide-visual .od-order circle,
  .js .guide-visual .od-divider{ opacity:1 !important; }
  .js .guide-visual .od-order line,
  .js .guide-visual .od-arrow,
  .js .guide-visual .od-arrow-head{ stroke-dashoffset:0 !important; }
}

/* --------------------------- 12. Responsive ---------------------------- */
@media (max-width:1080px){
  .site-nav{ display:none; }
  .header-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .cta-inner{ grid-template-columns:minmax(0,1fr); }
}

@media (max-width:860px){
  .hero{ min-height:auto; padding-top:8.5rem; }
  .hero-body{ grid-template-columns:minmax(0,1fr); }
  .hero-title{ max-width:none; }
  .split{ grid-template-columns:minmax(0,1fr); }
  .villain{ grid-template-columns:minmax(0,1fr); }
  .stats{ grid-template-columns:minmax(0,1fr); }
  .testimonials{ grid-template-columns:minmax(0,1fr); }
  .photo-grid{ grid-template-columns:minmax(0,1fr); }
  .selftest{ grid-template-columns:minmax(0,1fr); }
  .guide-grid{ grid-template-columns:minmax(0,1fr); }
  .guide-visual{ order:-1; }
  /* Expliciete plaatsing. Met automatische plaatsing belandde .system-content
     in de 64px-kolom en brak de tekst op één woord per regel. */
  .system-item{ grid-template-columns:56px minmax(0,1fr); gap:var(--sp-3); }
  .system-num{ grid-column:1; grid-row:1; font-size:1.05rem; letter-spacing:.1em; }
  .system-content{ grid-column:1 / -1; grid-row:2; grid-template-columns:minmax(0,1fr); gap:var(--sp-2); }
  .promises li{ grid-template-columns:minmax(0,1fr); gap:var(--sp-1); }
  .rule-grid{ background-size:calc(100% / 3) 100%; }
  .legal-shell{ grid-template-columns:minmax(0,1fr); }
  .legal-toc{ position:static; }
  .selftest-shell{ grid-template-columns:minmax(0,1fr); }
  .selftest-side{ position:static; }
  .page-meta{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
}

@media (max-width:620px){
  .cap-lijst a{ grid-template-columns:minmax(0,1fr); gap:.25rem; }
  /* Twee kolommen in plaats van vier onder elkaar. Scheelde 1.429px aan slot
     dat volledig uit administratie bestond. De kolomruimte is bewust ruim: de
     links zijn 18px hoog en halen de tikdoelnorm via tussenruimte, dus die mag
     niet krap worden. Nagemeten op 390. */
  .footer-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); }
  .hero-actions .btn{ width:100%; }
  /* Op mobiel vallen de twee kolommen weg, en daarmee de betekenis van de
     koprij: vanaf de tweede regel weet je niet meer wat 'vandaag' is en wat
     'straks'. Daarom de koprij verbergen en elk paar zijn eigen labels geven. */
  .shift-head{ display:none; }
  .shift-row{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); padding:var(--sp-4) 0; }
  .shift-row p{ padding-left:0; position:static; }
  .shift-row p::before{
    display:block; position:static; width:auto; height:auto; background:none;
    font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
    margin-bottom:.25rem;
  }
  .shift-row p:first-child{ font-size:.95rem; }
  .shift-row p:first-child::before{ content:'Vandaag'; color:rgba(255,255,255,.5); }
  .shift-row p:last-child::before{ content:'Met een verbetersysteem'; color:var(--accent); }
  .procesplan{ grid-template-columns:minmax(0,1fr); gap:var(--sp-3); }
  .cta-details li{ grid-template-columns:minmax(0,1fr); gap:.15rem; }
  .field-row{ grid-template-columns:minmax(0,1fr); gap:0; }
  .person{ grid-template-columns:minmax(0,1fr); }
  .person > img{ max-width:180px; }
  .footer-bottom{ flex-direction:column; gap:.75rem; }
  .footer-bottom ul{ gap:1.25rem; }
}

/* ------------- 12. Verbeterportfolio, het softwarevoorbeeld -----------
   Staat op software.html. Het moet aanvoelen als een applicatie en niet als
   een sitepagina: strakker raster, compactere typografie, eigen omkadering.
   Kleuren blijven uit de huisstijl, alleen de statuskleuren komen erbij. */

.app{
  max-width:100%;
  border:1px solid var(--line); background:var(--paper);
  border-radius:6px; overflow:hidden; margin-top:var(--sp-5);
  box-shadow:0 1px 2px rgba(19,23,52,.04), 0 12px 32px -12px rgba(19,23,52,.14);
}

/* Vensterbalk. Maakt in één oogopslag duidelijk dat je naar software kijkt,
   en draagt de waarschuwing dat het een voorbeeld is. */
.app-chrome{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2) var(--sp-3); flex-wrap:wrap;
  padding:.7rem var(--sp-4); background:var(--ink); color:#fff;
}
.app-titel{ margin:0; font-size:.9rem; font-weight:500; letter-spacing:.02em;
  display:flex; align-items:center; gap:.55rem; }
.app-punt{ width:9px; height:9px; border-radius:50%; background:var(--accent); flex:none; }
.app-waarschuwing{
  margin:0; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:rgba(255,255,255,.62); border:1px solid rgba(255,255,255,.22);
  padding:.2rem .55rem; border-radius:3px; white-space:nowrap;
}

.app-tabs{ display:flex; gap:0; border-bottom:1px solid var(--line); background:var(--bone); }
.app-tab{
  appearance:none; background:none; border:none; cursor:pointer;
  font:inherit; font-size:.88rem; color:var(--text-soft);
  padding:.85rem var(--sp-4); border-bottom:2px solid transparent;
  display:flex; align-items:center; gap:.5rem; transition:color var(--t-1) var(--ease-kort), border-color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .app-tab:hover{ color:var(--text); } }
.app-tab.is-actief{ color:var(--text); border-bottom-color:var(--accent-deep); background:var(--paper); font-weight:500; }
.app-badge{
  font-size:.7rem; font-weight:500; background:var(--st-rood); color:#fff;
  border-radius:999px; padding:.1rem .45rem; min-width:1.3em; text-align:center;
}

.app-paneel{ padding:var(--sp-4); }
.app-uitleg{ margin:0 0 var(--sp-4); font-size:.92rem; color:var(--text-soft); max-width:66ch; }

.app-balk{ display:flex; flex-wrap:wrap; align-items:end; gap:var(--sp-3); margin-bottom:var(--sp-4); }
.app-veld{ display:flex; flex-direction:column; gap:.3rem; }
.app-veld span{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.app-veld select{
  font:inherit; font-size:.9rem; color:var(--text); background:var(--paper);
  border:1px solid var(--line); border-radius:4px; padding:.45rem .6rem; min-width:13rem;
}
.app-telling{ margin:0 0 .1rem auto; font-size:.82rem; color:var(--text-faint); }

/* ---- tabel ---- */
.app-tabel-wrap{ overflow-x:auto; }
.app-tabel{ width:100%; border-collapse:collapse; font-size:.9rem; }
.app-tabel th{
  text-align:left; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500; padding:0 var(--sp-3) .6rem;
  border-bottom:1px solid var(--line);
}
.app-tabel td{ padding:var(--sp-3); border-bottom:1px solid var(--line-soft); vertical-align:top; }
.app-tabel tbody tr{ cursor:pointer; transition:background var(--t-1) var(--ease-kort); }
@media (hover:hover){ .app-tabel tbody tr:hover{ background:var(--bone); } }
.app-tabel tbody tr:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-2px; background:var(--bone); }

.code{ font-variant-numeric:tabular-nums; font-size:.8rem; color:var(--text-faint); letter-spacing:.02em; }
.cel-titel .titel{ display:block; color:var(--text); font-weight:500; max-width:34ch; }
.sub{ display:block; font-size:.78rem; color:var(--text-faint); margin-top:.2rem; }
.sub.laat{ color:var(--st-rood); }
.chip{
  display:inline-block; font-size:.76rem; color:var(--text-soft);
  background:var(--bone); border:1px solid var(--line); border-radius:3px; padding:.15rem .5rem;
}

/* Status: kleur én vorm én woord, zodat hij ook zonder kleur leesbaar is. */
.st{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; font-weight:500; white-space:nowrap; }
.st-vorm{ font-size:.7em; line-height:1; }
.st-groen{ color:var(--st-groen); }
.st-oranje{ color:var(--st-oranje); }
.st-rood{ color:var(--st-rood); }
.st-afgerond{ color:var(--st-af); }
.st-open{ color:var(--text-faint); }

.balk{ display:block; height:3px; background:var(--line-soft); border-radius:2px; margin:.45rem 0 0; max-width:8rem; }
.balk-vul{ display:block; height:100%; background:var(--accent-deep); border-radius:2px; }

/* ---- opvolging ---- */
.app-kaarten{ display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:var(--sp-3); }
/* De statuskleur zit in een haarlijn links, niet in een balk van 3px. Het
   kaartje toont de status al met naam en markering in de kop, dus die balk
   herhaalde alleen wat er al stond, en 3px past niet op een site die verder
   uit haarlijnen bestaat. De kleur blijft wel: over een lijst met twintig
   initiatieven wil je status aan de rand kunnen aflezen.
   Ronding van 4 naar 2px, het maximum uit het brandboek.
   De hover zette border-color op alle vier de randen en wiste daarmee de
   statuskleur zodra je het kaartje aanraakte. Nu blijft die staan. */
.opv-kaart{
  border:1px solid var(--line); border-left:1px solid var(--st-oranje);
  border-radius:2px; padding:var(--sp-3); cursor:pointer; background:var(--paper);
  transition:transform var(--t-1) var(--ease-kort);
}
.opv-kaart.opv-rood{ border-left-color:var(--st-rood); }
@media (hover:hover){ .opv-kaart:hover{ transform:translateY(-1px); } }
.opv-kaart:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:2px; }
.opv-kop{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); margin-bottom:.5rem; }
.opv-kaart h4{ margin:0 0 .5rem; font-size:1rem; line-height:1.35; color:var(--text); }
.opv-reden{ margin:0; font-size:.85rem; line-height:1.55; color:var(--text-soft); }
.opv-voet{
  display:flex; flex-wrap:wrap; gap:.4rem var(--sp-3); margin-top:var(--sp-3);
  padding-top:var(--sp-2); border-top:1px solid var(--line-soft);
  font-size:.76rem; color:var(--text-faint);
}
.opv-voet .laat{ color:var(--st-rood); }

/* ---- kwartaal ---- */
.app-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--sp-3); margin-bottom:var(--sp-5); }
.kpi{ border:1px solid var(--line); border-radius:4px; padding:var(--sp-3); background:var(--bone); }
.kpi-getal{ margin:0; font-size:1.8rem; font-weight:300; letter-spacing:-0.03em; color:var(--text); line-height:1; }
.kpi-label{ margin:.35rem 0 0; font-size:.76rem; color:var(--text-faint); line-height:1.4; }

.app-kwartalen{ display:grid; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); gap:var(--sp-3); }
.kw{ border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.kw-kop{ padding:.6rem var(--sp-3); background:var(--ink); color:#fff; display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
.kw-titel{ margin:0; font-size:.95rem; font-weight:500; }
.kw-aantal{ margin:0; font-size:.72rem; color:rgba(255,255,255,.6); }
.kw-regel{
  appearance:none; background:none; border:none; border-bottom:1px solid var(--line-soft);
  font:inherit; text-align:left; width:100%; cursor:pointer;
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:.6rem; padding:.7rem var(--sp-3);
}
.kw-regel:last-child{ border-bottom:none; }
@media (hover:hover){ .kw-regel:hover{ background:var(--bone); } }
.kw-regel:focus-visible{ outline:2px solid var(--accent-deep); outline-offset:-2px; }
.kw-regel .st-tekst{ display:none; }
.kw-regel-titel{ font-size:.85rem; color:var(--text); line-height:1.35; }
.kw-regel-pct{ font-size:.8rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.kw-leeg{ margin:0; padding:var(--sp-3); font-size:.82rem; color:var(--text-faint); }

/* ---- detail ---- */
.app-detail{ border-top:1px solid var(--line); background:var(--bone); }
.app-detail-kop{
  display:flex; align-items:start; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-4) var(--sp-3);
}
.app-detail-code{ margin:0 0 .25rem; font-size:.78rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.app-detail-kop h3{ margin:0; font-size:1.25rem; line-height:1.3; letter-spacing:-0.02em; max-width:44ch; }
.app-sluit{
  appearance:none; background:none; border:1px solid var(--line); border-radius:4px;
  font:inherit; font-size:.82rem; color:var(--text-soft); cursor:pointer;
  padding:.35rem .8rem; flex:none; transition:border-color var(--t-1) var(--ease-kort), color var(--t-1) var(--ease-kort);
}
@media (hover:hover){ .app-sluit:hover{ color:var(--text); border-color:var(--text-faint); } }

.app-detail-body{
  padding:0 var(--sp-4) var(--sp-4);
  display:grid; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); gap:var(--sp-4);
  align-items:start;
}
.det-blok{ background:var(--paper); border:1px solid var(--line); border-radius:4px; padding:var(--sp-3); }
.det-blok h4{
  margin:0 0 var(--sp-2); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--text-faint); font-weight:500;
}
.det-blok p{ margin:0; font-size:.88rem; line-height:1.6; color:var(--text-soft); }
.det-prob{ grid-column:1 / -1; }
.det-prob p{ color:var(--text); font-size:.95rem; max-width:74ch; }

.det-velden{ margin:0; display:grid; gap:.55rem; }
.det-velden div{ display:grid; grid-template-columns:minmax(0,10rem) minmax(0,1fr); gap:.75rem; }
.det-velden dt{ font-size:.78rem; color:var(--text-faint); }
.det-velden dd{ margin:0; font-size:.85rem; color:var(--text); }

/* De verschuiving in de planning is het signaal waar het om draait. */
.det-planning{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }
.det-datum{ display:flex; flex-direction:column; gap:.15rem; }
.det-datum-label{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-faint); }
.det-datum-waarde{ font-size:1rem; color:var(--text); font-variant-numeric:tabular-nums; }
.det-datum-waarde.laat{ color:var(--st-rood); font-weight:500; }
.det-pijl{ font-size:1.1rem; color:var(--text-faint); }
.det-pijl.laat{ color:var(--st-rood); }
.det-planning-noot{ margin-top:var(--sp-2) !important; font-size:.8rem !important; }
.det-planning-noot.laat{ color:var(--st-rood) !important; }

.dlv{ padding:var(--sp-2) 0; border-bottom:1px solid var(--line-soft); }
.dlv:last-child{ border-bottom:none; padding-bottom:0; }
.dlv-kop{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; margin-bottom:.3rem; }
.dlv-datum{ font-size:.76rem; color:var(--text-faint); margin-left:auto; font-variant-numeric:tabular-nums; }
.dlv-tekst{ font-size:.86rem !important; color:var(--text) !important; }
.dlv-toelichting{ margin-top:.25rem !important; font-size:.8rem !important; font-style:italic; }

.log{ padding:var(--sp-2) 0; border-bottom:1px solid var(--line-soft); }
.log:last-child{ border-bottom:none; padding-bottom:0; }
.log-kop{ display:flex; gap:.75rem; align-items:baseline; margin-bottom:.2rem; }
.log-datum{ font-size:.76rem; color:var(--text-faint); font-variant-numeric:tabular-nums; }
.log-wie{ font-size:.76rem; color:var(--text-soft); font-weight:500; }

.app-noot{ margin-top:var(--sp-3); font-size:.78rem; color:var(--text-faint); text-align:center; }

/* Zonder JavaScript blijft de omkadering met de uitleg staan; dan is duidelijk
   dat er iets hoort te zijn in plaats van dat het scherm leeg blijft. */
.app-paneel:empty::after{ content:'Dit voorbeeld heeft JavaScript nodig.'; color:var(--text-faint); font-size:.9rem; }

@media (max-width:860px){
  /* Zes kolommen passen niet op een telefoon. Elke rij wordt een kaart, met de
     kolomkop als label ervoor, in de geest van .shift-row elders op de site. */
  .app-tabel thead{ display:none; }
  .app-tabel, .app-tabel tbody, .app-tabel tr, .app-tabel td{ display:block; width:100%; }
  .app-tabel tr{
    border:1px solid var(--line); border-radius:4px; margin-bottom:var(--sp-3); padding:var(--sp-3);
  }
  .app-tabel td{ padding:.35rem 0; border-bottom:none; display:grid; grid-template-columns:8rem minmax(0,1fr); gap:.75rem; align-items:baseline; }
  .app-tabel td::before{
    content:attr(data-kop); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--text-faint);
  }
  .cel-titel .titel{ max-width:none; }
  .app-tab{ padding:.75rem var(--sp-3); font-size:.82rem; }
  /* De waarschuwing mag afbreken; met nowrap rekt hij de hele omkadering op
     en loopt de tabel buiten beeld. */
  .app-waarschuwing{ white-space:normal; font-size:.62rem; }
  .app-balk{ flex-direction:column; align-items:stretch; }
  .app-veld select{ min-width:0; width:100%; }
  .app-telling{ margin:0; }
  .app-tabel td{ grid-template-columns:6.5rem minmax(0,1fr); }
  .app-kaarten{ grid-template-columns:minmax(0,1fr); }
  .app-detail-body{ grid-template-columns:minmax(0,1fr); }
  .det-velden div{ grid-template-columns:minmax(0,1fr); gap:.1rem; }
}

/* Glimp van de software op de homepage. Laten zien werkt beter dan vertellen,
   maar hij is bewust statisch: klikken kan alleen op de softwarepagina zelf. */
.sw-glimp{ margin-top:var(--sp-5); max-width:56rem; }
/* Geen slagschaduw en hoogstens 2px ronding: het brandboek staat allebei niet
   toe. De hover volgt daarom het patroon van de rest van de site, een lijn die
   aanzet, en alleen op apparaten met een echte muisaanwijzer. Op een telefoon
   zou het effect na het tikken blijven hangen. */
.sw-glimp-link{
  display:block; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--paper);
  transition:border-color var(--t-1) var(--ease-kort), transform var(--t-1) var(--ease-kort);
}
@media (hover:hover){
  .sw-glimp-link:hover{
    border-color:var(--ink);
    transform:translateY(-2px);
  }
}
.sw-chrome{
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem var(--sp-4); background:var(--ink); color:#fff;
  font-size:.85rem; font-weight:500;
}
.sw-rijen{ list-style:none; margin:0; padding:0; }
.sw-rijen li{
  display:grid; grid-template-columns:5.5rem minmax(0,1fr) auto;
  gap:var(--sp-3); align-items:center;
  padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line-soft);
}
.sw-titel{ font-size:.92rem; color:var(--text); }
.sw-voet{
  margin:0; padding:var(--sp-3) var(--sp-4); background:var(--bone);
  font-size:.88rem; color:var(--accent-deep);
  display:flex; align-items:center; gap:.5rem;
}
@media (hover:hover){ .sw-glimp-link:hover .sw-voet span{ transform:translateX(3px); } }
.sw-voet span{ transition:transform var(--t-1) var(--ease-kort); }

@media (max-width:620px){
  /* Code en titel onder elkaar; drie kolommen worden hier onleesbaar smal. */
  .sw-rijen li{ grid-template-columns:minmax(0,1fr) auto; gap:.3rem var(--sp-2); }
  .sw-rijen .code{ grid-column:1 / -1; }
}

.app-noscript{
  margin:0; padding:var(--sp-3) var(--sp-4); background:#FFF6E5;
  border-bottom:1px solid var(--line); font-size:.88rem; color:var(--text);
}
.app-noscript a{ color:var(--accent-deep); }

/* Legenda. De drie statussen zijn de kern van de werkwijze; kleur alleen legt
   niet uit wat het verschil is tussen risico en besluit nodig. */
.app-legenda{
  display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4);
  padding:var(--sp-3) var(--sp-4); background:var(--bone);
  border-bottom:1px solid var(--line);
}
.app-legenda p{ margin:0; font-size:.8rem; color:var(--text-faint); display:flex; align-items:center; gap:.45rem; }
.app-legenda .st{ font-size:.8rem; }