/* ==========================================================================
   Lettertypen — zelf gehost (§23)
   Plaats de bestanden in /assets/fonts/. Ontbreken ze, dan valt de site terug
   op Segoe UI / system-ui zonder fouten; de opmaak blijft bruikbaar.

   Benodigde bestanden:
     /assets/fonts/manrope-variable.woff2      (wght 400-800, subset latin)
     /assets/fonts/ibm-plex-mono-400.woff2
     /assets/fonts/ibm-plex-mono-500.woff2

   Manrope: github.com/sharanda/manrope  ·  IBM Plex Mono: github.com/IBM/plex
   ========================================================================== */
@font-face{
  font-family:'Manrope';
  src:url('/assets/fonts/manrope-variable.woff2') format('woff2-variations'),
      url('/assets/fonts/manrope-variable.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}

/* ==========================================================================
   Flow29 — assets/css/style.css
   Gebouwd op de goedgekeurde tokens. Waarden zijn niet afgerond of
   geïnterpreteerd: kleuren, typeschaal, spacing en radii komen één op één
   uit het merksysteem.
   ========================================================================== */

:root{
  /* Navy */
  --navy-900:#071B33; --navy-800:#0B2340; --navy-700:#0F2D52; --navy-600:#1B4478;
  --navy-500:#2C5F9E; --navy-300:#7FA3C9; --navy-100:#D6E2F0; --navy-50:#EEF3F9;
  /* Teal */
  --teal-800:#064F4D; --teal-700:#07706D; --teal-600:#0A9A96; --teal-500:#12C7C2;
  --teal-300:#7EE0DD; --teal-100:#D2F5F4; --teal-50:#EDFBFA;
  /* Slate */
  --slate-900:#151C24; --slate-700:#3A4653; --slate-600:#55636F; --slate-500:#6E7C89;
  --slate-400:#9AA6B2; --slate-300:#C4CCD4; --slate-200:#E1E6EB; --slate-100:#EFF2F5;
  --slate-50:#F7F9FB;
  --white:#FFFFFF;

  /* Status */
  --success:#0E7A52; --success-bg:#E7F4EE;
  --warning:#A45B06; --warning-bg:#FDF2E3;
  --critical:#B02418; --critical-bg:#FBEBE9;
  --info:#1B4478;    --info-bg:#EEF3F9;

  /* Spacing — uitsluitend deze waarden */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* Radii */
  --r-0:0; --r-sm:3px; --r-md:6px; --r-lg:10px; --r-full:999px;

  --font:'Manrope','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --plex:'IBM Plex Sans','Segoe UI',sans-serif;

  --max:1200px;
  --prose:68ch;
  --lead-w:62ch;
  --hdr-h:84px;
}

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

/* Het hidden-attribuut moet elke display-waarde verslaan. Zonder deze regel
   overschrijft .nav{display:flex} het attribuut en blijven beide taalversies
   van de navigatie zichtbaar. Dat was de oorzaak van de taalfout. */
[hidden]{display:none !important}

/* Tweede vangnet: inhoud van de niet-actieve taal wordt nooit getoond,
   ook niet als JavaScript uitvalt. */
html[lang="nl"] [data-lang="en"]{display:none !important}
html[lang="en"] [data-lang="nl"]{display:none !important}

html{-webkit-text-size-adjust:100%;hyphens:none;overflow-x:hidden}
body{
  margin:0;min-width:320px;overflow-x:hidden;background:var(--white);color:var(--slate-900);
  font:400 16px/1.63 var(--font);
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img,svg{max-width:100%;display:block}
a{color:var(--navy-700)}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;color:var(--navy-700);hyphens:none}
p{margin:0}
strong{font-weight:600}

/* ------------------------------------------------------------ typografie --- */
.hero-title{font-size:clamp(38px,5.4vw,64px);line-height:1.04;font-weight:800;
  letter-spacing:-.035em}
h1,.h1{font-size:clamp(32px,4vw,44px);line-height:1.09;font-weight:800;letter-spacing:-.030em}
h2,.h2{font-size:clamp(26px,3vw,34px);line-height:1.15;font-weight:700;letter-spacing:-.022em}
h3,.h3{font-size:21px;line-height:1.25;font-weight:700;letter-spacing:-.012em}
h4,.h4{font-size:16px;line-height:1.40;font-weight:600}
.body-lg{font-size:19px;line-height:1.58}
.small{font-size:13.5px;line-height:1.55}
.label{font-size:12.5px;line-height:1.44;font-weight:600;color:var(--slate-600)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.prose{max-width:var(--prose)}
.lead{font-size:19px;line-height:1.58;color:var(--slate-700);max-width:var(--lead-w)}

/* ---------------------------------------------------------------- layout --- */
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--s5)}
@media (min-width:640px){.wrap{padding-inline:var(--s7)}}
@media (min-width:1200px){.wrap{padding-inline:var(--s9)}}

.section{padding-block:var(--s9)}
.section-sm{padding-block:var(--s8)}
.section-alt{background:var(--slate-50);border-block:1px solid var(--slate-200)}
.section-navy{background:var(--navy-700);color:var(--white)}
.section-navy h2,.section-navy h3,.section-navy h4{color:var(--white)}
.section-navy p{color:var(--navy-100)}

.stack > * + *{margin-top:var(--s4)}
.stack-lg > * + *{margin-top:var(--s6)}
.sec-head{margin-bottom:var(--s7);max-width:var(--prose)}
.sec-head .label{margin-bottom:var(--s3)}
.sec-head p{margin-top:var(--s4);color:var(--slate-700);max-width:var(--lead-w)}
.section-navy .sec-head p{color:var(--navy-100)}

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

/* ------------------------------------------------------------ skip/focus --- */
.skip{position:absolute;left:-9999px;background:var(--navy-700);color:#fff;
  padding:var(--s3) var(--s5);z-index:100;font-weight:600}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--teal-700);outline-offset:2px}

/* ---------------------------------------------------------------- header --- */
.hdr{position:sticky;top:0;z-index:60;background:var(--white);
  border-bottom:1px solid var(--slate-200)}
.hdr.is-stuck{box-shadow:0 1px 12px rgba(7,27,51,.08)}
.hdr-in{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s6);min-height:var(--hdr-h)}

/* Logo met goedgekeurde vrije ruimte: 1 streekdikte = 8.4% van de merkbreedte. */
.brand{display:inline-flex;align-items:center;gap:var(--s3);
  /* Vrije ruimte = kapitaalhoogte van het woordmerk (23px ExtraBold ≈ 16px). */
  padding:var(--s4);margin:calc(var(--s4) * -1)}
.brand-mark{width:44px;height:26px;flex:none}
.brand-word{font-weight:800;font-size:23px;letter-spacing:-.03em;color:var(--navy-700);
  line-height:1}
.brand-word em{font-style:normal;color:var(--teal-600)}
.mk-form{fill:var(--navy-700)} .mk-line{fill:var(--teal-500)}
.on-navy .mk-form{fill:#fff} .on-navy .brand-word{color:#fff}
.on-navy .brand-word em{color:var(--teal-500)}

.nav{display:flex;align-items:center;gap:var(--s6)}
.nav a{font-weight:500;font-size:15px;color:var(--slate-700);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
  padding-block:var(--s2);border-bottom:2px solid transparent}
.nav a:hover{color:var(--navy-700);border-bottom-color:var(--slate-300)}
.nav a[aria-current="page"]{color:var(--navy-700);font-weight:600;
  border-bottom-color:var(--teal-500)}

.hdr-end{display:flex;align-items:center;gap:var(--s5)}
.lang{display:flex;align-items:center;gap:var(--s2);font-size:13.5px;font-weight:600}
.lang a{color:var(--slate-500);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
.lang a[aria-current="true"]{color:var(--navy-700)}
.lang span{color:var(--slate-300)}

.burger{display:none;width:44px;height:44px;border:1px solid var(--slate-200);
  background:var(--white);border-radius:var(--r-sm);cursor:pointer;
  padding:var(--s3) var(--s3);flex-direction:column;justify-content:space-between}
.burger span{display:block;height:2px;background:var(--navy-700)}

/* ---------------------------------------------------------------- knoppen --- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;
  font:600 14px/1.20 var(--font);padding:var(--s4) var(--s5);
  border-radius:var(--r-sm);border:1px solid transparent;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--navy-700);color:var(--white)}
.btn-primary:hover{background:var(--navy-600)}
/* Eén teal actieknop per taalversie van home en contact. */
.btn-accent{background:var(--teal-500);color:var(--navy-900);font-weight:700}
.btn-accent:hover{background:var(--teal-300)}
.btn-secondary{background:var(--white);color:var(--navy-700);border-color:var(--slate-300)}
.btn-secondary:hover{border-color:var(--navy-700)}
.section-navy .btn-secondary{background:transparent;color:#fff;border-color:var(--navy-500)}
.section-navy .btn-secondary:hover{border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:var(--s3)}

.textlink{color:var(--navy-700);font-weight:600;text-decoration:none;
  border-bottom:2px solid var(--teal-500);padding-bottom:2px}
.textlink:hover{border-bottom-color:var(--navy-700)}
.section-navy .textlink{color:#fff}

/* ------------------------------------------------------------------ hero --- */
.hero{padding-block:var(--s9) var(--s8);border-bottom:1px solid var(--slate-200)}
.hero-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);
  align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s7)}}
.payoff{font-weight:500;font-size:15px;color:var(--slate-600);margin-bottom:var(--s5);
  letter-spacing:.01em}
.hero-title{margin-bottom:var(--s5)}
.hero .lead{margin-bottom:var(--s6)}

/* ------------------------------------------------------------- corridor --- */
/* Twee grenzen, een beheerste lijn, discrete controlepunten. Alleen gebruikt
   waar een echte volgorde of relatie wordt getoond. */
.corridor{display:grid;gap:var(--s1)}
.corridor-track{display:flex;align-items:center;gap:0}
.corridor-bound{width:14px;height:56px;border:2px solid var(--navy-700);flex:none}
.corridor-bound.start{border-right:0}
.corridor-bound.end{border-left:0}
.corridor-line{flex:1;height:2px;background:var(--slate-300);position:relative}
.corridor-line .cp{position:absolute;top:50%;width:10px;height:10px;
  background:var(--white);border:2px solid var(--navy-700);transform:translate(-50%,-50%)}
.corridor-line .cp.done{background:var(--teal-500);border-color:var(--teal-700)}

/* Fasen als corridor: genummerde stappen met controlepunten ertussen. */
.phases{display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  border:1px solid var(--slate-200);background:var(--white)}
.phase{padding:var(--s5);border-left:1px solid var(--slate-200);position:relative}
.phase:first-child{border-left:0}
.phase::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--slate-200)}
.phase.is-last::before{background:var(--teal-500)}
.phase .num{font-family:var(--mono);font-size:12.5px;color:var(--teal-700);
  display:block;margin-bottom:var(--s3)}
.phase h3{font-size:16px;font-weight:600;margin-bottom:var(--s2)}
.phase p{font-size:13.5px;line-height:1.55;color:var(--slate-600)}
@media (max-width:900px){.phases{grid-template-columns:1fr}
  .phase{border-left:0;border-top:1px solid var(--slate-200)}
  .phase:first-child{border-top:0}}

/* Systeemstroom. Het diagram gebruikt SVG-presentatieattributen in plaats
   van een eigen <style>-blok: de CSP (style-src 'self', geen unsafe-inline)
   blokkeert anders zijn interne CSS. Hier staat alleen hoe het schaalt. */
.flowmap{width:100%;height:auto;display:block}
@media (min-width:1200px){.hero-grid .flowmap{min-width:520px}}

/* ----------------------------------------------------------------- kaart --- */
.card{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-lg);
  padding:var(--s5)}
.card h3{margin-bottom:var(--s3)}
.card p{color:var(--slate-700);font-size:15px;line-height:1.6}
.card .label{margin-bottom:var(--s3)}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--navy-300);box-shadow:0 2px 10px rgba(7,27,51,.06)}
.card-list{margin-top:var(--s4)}
.card-list li{font-size:14px;color:var(--slate-600);padding-block:var(--s2);
  border-top:1px solid var(--slate-100)}

.pillar{border-top:3px solid var(--slate-200)}
.pillar.is-accent{border-top-color:var(--teal-500)}
.pillar .idx{font-family:var(--mono);font-size:12.5px;color:var(--slate-500);
  display:block;margin-bottom:var(--s3)}

/* ------------------------------------------------------------------ tabel --- */
.table{width:100%;border-collapse:collapse;border-radius:var(--r-0)}
.table th{text-align:left;font-size:12.5px;font-weight:600;color:var(--slate-600);
  padding:var(--s3) var(--s4) var(--s3) 0;border-bottom:2px solid var(--navy-700)}
.table td{padding:var(--s4) var(--s4) var(--s4) 0;
  border-bottom:1px solid var(--slate-200);vertical-align:top;
  font-size:15px;color:var(--slate-700)}
.table td:first-child{color:var(--navy-700);font-weight:600;width:34%}
.table .mono{font-size:13.5px;color:var(--slate-600)}

/* ------------------------------------------------------------ twee kolommen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split-col{background:var(--white);border:1px solid var(--slate-200);
  border-radius:var(--r-lg);padding:var(--s5)}
.split-col h3{margin-bottom:var(--s4);padding-bottom:var(--s3);
  border-bottom:2px solid var(--slate-200);font-size:18px}
.split-col.suited h3{border-bottom-color:var(--teal-500)}
.split-col li{font-size:15px;color:var(--slate-700);padding-block:var(--s3);
  border-top:1px solid var(--slate-100)}
.split-col li:first-of-type{border-top:0}

/* ------------------------------------------------------------- situaties --- */
.sit{background:var(--white);border:1px solid var(--slate-200);border-radius:var(--r-lg);
  padding:var(--s5);border-left:3px solid var(--navy-100)}
.sit p{font-size:16px;line-height:1.55;color:var(--navy-700);font-weight:500}

/* --------------------------------------------------------------- notitie --- */
.note{border:1px solid var(--slate-200);border-left:3px solid var(--teal-500);
  border-radius:var(--r-md);padding:var(--s5);background:var(--slate-50)}
.note p{color:var(--slate-700);font-size:15px}
.note p + p{margin-top:var(--s3)}

/* --------------------------------------------------------------- beeldvlak --- */
/* Merkeigen beeldkader (§19). Geen conceptvak met "foto hier": tot de eigen
   fotografie er is, staat hier een rustig navy vlak met het corridormotief.
   De pagina oogt daarmee af, ook zonder beeld. */
.figure{margin:0}
.imgslot{position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:var(--navy-700);display:flex;align-items:center;justify-content:center}
.imgslot::before,.imgslot::after{content:"";position:absolute;top:50%;
  width:18px;height:76px;border:2px solid var(--navy-500);transform:translateY(-50%)}
.imgslot::before{left:14%;border-right:0}
.imgslot::after{right:14%;border-left:0}
.imgslot .rule{position:absolute;top:50%;left:calc(14% + 18px);right:calc(14% + 18px);
  height:2px;background:var(--teal-500);transform:translateY(-50%)}
.imgslot img{width:100%;height:100%;object-fit:cover;display:block}
.imgslot.portrait{aspect-ratio:4/5}
.imgslot.square{aspect-ratio:1/1}
.imgslot.wide{aspect-ratio:16/10}
.figure figcaption{font-size:13.5px;line-height:1.55;color:var(--slate-600);
  margin-top:var(--s3);max-width:44ch}

/* --------------------------------------------------------------- founder --- */
.founder{display:grid;grid-template-columns:240px 1fr;gap:var(--s7);align-items:center}
@media (max-width:900px){.founder{grid-template-columns:1fr}}

/* ------------------------------------------------------------------- faq --- */
.faq details{border-top:1px solid var(--slate-200)}
.faq details:last-of-type{border-bottom:1px solid var(--slate-200)}
.faq summary{cursor:pointer;list-style:none;min-height:44px;padding-block:var(--s5);
  font-weight:700;font-size:18px;color:var(--navy-700);position:relative;padding-right:var(--s8)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:var(--s3);top:50%;width:12px;height:2px;
  background:var(--teal-700);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:calc(var(--s3) + 5px);top:50%;
  width:2px;height:12px;background:var(--teal-700);transform:translateY(-50%)}
.faq details[open] summary::before{display:none}
.faq details p{padding-bottom:var(--s5);color:var(--slate-700);max-width:var(--prose)}

/* ------------------------------------------------------------------ form --- */
.form{border:1px solid var(--slate-200);border-radius:var(--r-lg);padding:var(--s7);
  background:var(--white)}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--navy-700);
  margin-bottom:var(--s2)}
.field input,.field select,.field textarea{width:100%;font:400 16px/1.5 var(--font);
  color:var(--slate-900);padding:var(--s3) var(--s4);border:1px solid var(--slate-300);
  border-radius:var(--r-sm);background:var(--white)}
.field textarea{min-height:132px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;
  border-color:var(--navy-700);box-shadow:0 0 0 3px var(--teal-100)}
.field.invalid input,.field.invalid textarea,.field.invalid select{border-color:#B3261E}
.err{font-size:13.5px;color:#B3261E;margin-top:var(--s2)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
@media (max-width:640px){.field-row{grid-template-columns:1fr}}

/* Toestemming, waarschuwing en honeypot */
.consent{display:flex;gap:var(--s3);align-items:flex-start;margin-bottom:var(--s5)}
.consent input{width:20px;height:20px;min-width:20px;margin-top:2px;accent-color:var(--navy-700)}
.consent label{font-size:14px;line-height:1.55;color:var(--slate-700);font-weight:400}
.warnbox{border:1px solid var(--warning);border-left-width:3px;background:var(--warning-bg);
  border-radius:var(--r-md);padding:var(--s4);margin-bottom:var(--s5)}
.warnbox p{font-size:14px;line-height:1.55;color:#6B3D04;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formstate{border-radius:var(--r-md);padding:var(--s5);margin-top:var(--s4)}
.formstate.ok{border:1px solid var(--success);border-left-width:3px;background:var(--success-bg)}
.formstate.fail{border:1px solid var(--critical);border-left-width:3px;background:var(--critical-bg)}

/* ---------------------------------------------------------------- footer --- */
.ftr{background:var(--navy-900);color:var(--navy-100);padding-block:var(--s8) var(--s6);
  margin-top:0}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:var(--s7);
  padding-bottom:var(--s6);border-bottom:1px solid rgba(255,255,255,.12)}
@media (max-width:900px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ftr-grid{grid-template-columns:1fr}}
.ftr h4{color:#fff;margin-bottom:var(--s4);font-size:12.5px;font-weight:600;
  letter-spacing:.02em}
.ftr a{color:var(--navy-100);text-decoration:none;font-size:15px;display:block;
  padding-block:var(--s2)}
.ftr a:hover{color:#fff}
.ftr-payoff{font-weight:500;font-size:14px;color:var(--teal-300);margin-top:var(--s4)}
.ftr-note{font-size:14px;color:var(--navy-100);margin-top:var(--s3);max-width:40ch}
.ftr-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--s4);
  padding-top:var(--s5);font-size:13.5px}
.ftr-bot p{margin:0}

/* --------------------------------------------------------------- mobiel --- */
@media (max-width:900px){
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:var(--hdr-h);flex-direction:column;
    align-items:stretch;gap:0;background:var(--white);border-bottom:1px solid var(--slate-200);
    padding:var(--s3) var(--s5) var(--s6);box-shadow:0 12px 24px rgba(7,27,51,.1)}
  .nav[hidden]{display:none}
  .nav a{padding-block:var(--s4);border-bottom:1px solid var(--slate-100)}
  .hdr{position:sticky}
  .hdr-in{position:relative}
}

/* Het merksysteem staat één beweging toe: een hero-fade bij eerste laden. */
@keyframes heroIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.hero > .wrap{animation:heroIn 400ms cubic-bezier(.22,.61,.36,1) both}
@media (prefers-reduced-motion:reduce){.hero > .wrap{animation:none}}

@media print{
  .hdr,.ftr,.burger{display:none}
  body{color:#000}
}

/* ==========================================================================
   Weergave van douanegegevens (merksysteem, hoofdstuk 07)
   Deze regels bestaan zodat tooling-, rapportage- en toekomstige casepagina's
   douanegegevens op één manier tonen. Verzin hier geen eigen varianten.

     Goederencode  6204 62 31 00   van links in paren, nooit afbreken
     MRN           26NL8A9K2M4P7Q1R3   aaneen, hoofdletters, monospace
     EORI          NL812345678     landcode altijd tonen
     Douanewaarde  48.210,00 EUR   twee decimalen, ISO-code erachter
     Tarief        12,0 %          één decimaal, vaste spatie voor het teken
     Nettomassa    1.284,500 kg    drie decimalen
     Berichttype   IE515           hoofdletters, geen spatie

   Getalnotatie volgt de taal van de pagina: NL komma als decimaalteken en punt
   als duizendtalscheiding, EN andersom.
   ========================================================================== */
.data{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;
  font-weight:500;letter-spacing:.01em;color:var(--slate-700);white-space:nowrap}
.data-code{letter-spacing:.04em}          /* goederencode, in paren gegroepeerd */
.data-ref{text-transform:uppercase}       /* MRN, EORI, berichttype */
.chip{display:inline-block;font-family:var(--mono);font-size:12.5px;font-weight:500;
  padding:2px var(--s2);border:1px solid var(--slate-200);border-radius:var(--r-sm);
  background:var(--slate-50);color:var(--slate-700);white-space:nowrap}

/* Statuslabels — het enige element dat volledig afgerond mag zijn. */
.statuslist{display:flex;flex-wrap:wrap;gap:var(--s3)}
.status{display:inline-block;font-size:12.5px;line-height:1.44;font-weight:600;
  padding:var(--s2) var(--s4);border-radius:var(--r-full);border:1px solid transparent}
.status-neutral{background:var(--slate-100);color:var(--slate-700);border-color:var(--slate-200)}
.status-info{background:var(--info-bg);color:var(--info);border-color:var(--navy-100)}
.status-success{background:var(--success-bg);color:var(--success);border-color:#BFE3D2}
.status-warning{background:var(--warning-bg);color:var(--warning);border-color:#EFD9AE}
.status-critical{background:var(--critical-bg);color:var(--critical);border-color:#F0C4BF}

/* ------------------------------------------------------------- v2-toevoegingen */
.hero-note{font-size:15px;line-height:1.55;color:var(--slate-600);max-width:56ch;
  margin-top:var(--s4);padding-left:var(--s4);border-left:2px solid var(--teal-500)}
.hero .lead + .hero-note{margin-bottom:var(--s6)}
.hero-grid .lead{max-width:44ch}
.hero-grid .hero-note{max-width:42ch}

/* Korte, herkenbare situaties — geen kaarten met alinea's. */
.problist{display:grid;grid-template-columns:repeat(2,1fr);gap:0 var(--s7)}
.prob{border-top:1px solid var(--slate-200);padding:var(--s4) 0}
.prob p{font-size:17px;line-height:1.5;color:var(--navy-700);font-weight:500;margin:0;
  padding-left:var(--s5);position:relative}
.prob p::before{content:"";position:absolute;left:0;top:11px;width:12px;height:2px;
  background:var(--teal-500)}
@media (max-width:900px){.problist{grid-template-columns:1fr;gap:0}}

/* Compacte processtrook voor de homepage: corridor met vijf controlepunten. */
.corridorline{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.cend{font-size:12.5px;font-weight:600;color:var(--slate-600);white-space:nowrap;
  border-left:2px solid var(--navy-700);padding-left:var(--s3);line-height:1.3}
.cend:last-child{border-left:0;border-right:2px solid var(--navy-700);padding-left:0;
  padding-right:var(--s3);text-align:right}
.csteps{display:flex;flex:1;min-width:280px;align-items:stretch;
  border-top:2px solid var(--slate-200)}
.cstep{flex:1;position:relative;padding:var(--s4) var(--s3) 0 0}
.cstep::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;
  background:var(--white);border:2px solid var(--navy-700);border-radius:var(--r-full)}
.cstep.is-last::before{background:var(--teal-500);border-color:var(--teal-700)}
.cnum{display:block;font-family:var(--mono);font-size:12.5px;color:var(--teal-700);
  margin-bottom:var(--s1)}
.cname{display:block;font-size:15px;font-weight:600;color:var(--navy-700);line-height:1.3}
@media (max-width:900px){
  .csteps{flex-direction:column;border-top:0;border-left:2px solid var(--slate-200);
    padding-left:var(--s5)}
  .cstep{padding:var(--s3) 0}
  .cstep::before{top:var(--s4);left:calc(var(--s5) * -1 - 6px)}
  .cend{border:0;padding:0}
  .cend:last-child{text-align:left}
}

/* Toepassingsgebieden op de Customs Tooling-pagina */
.area-head{display:flex;align-items:baseline;gap:var(--s4)}
.area-letter{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--teal-700);
  border:1px solid var(--slate-200);border-radius:var(--r-sm);padding:var(--s1) var(--s3);
  flex:none}
.ticks li{font-size:15px;line-height:1.5;color:var(--slate-700);padding:var(--s2) 0;
  padding-left:var(--s5);position:relative;border-top:1px solid var(--slate-100)}
.ticks li:first-child{border-top:0}
.ticks li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:2px;
  background:var(--slate-300)}
.card.suited{border-top:3px solid var(--teal-500)}
.card.suited .ticks li::before{background:var(--teal-500)}
.card .h4{font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--slate-600);
  text-transform:none;margin-bottom:var(--s3)}

/* Compacte opsomming van aanvullende mogelijkheden en leveringsvormen */
.chiplist{display:flex;flex-wrap:wrap;gap:var(--s3)}
.chip-lg{font-size:15px;font-weight:500;color:var(--navy-700);background:var(--white);
  border:1px solid var(--slate-200);border-radius:var(--r-sm);padding:var(--s3) var(--s4)}
.section-alt .chip-lg{background:var(--white)}