/* ==========================================================================
 * Casanis — de hele site in de huisstijl van laplagecasanis.com
 * ==========================================================================
 *
 * Vorm en typografie komen van laplagecasanis.com, bemonsterd op de bron zelf.
 * De kleurverdeling niet: die is van studioname.
 *
 *   pagina        #FFFFFF  wit          de hoofdkleur, body-achtergrond
 *   onderscheid   #F6F5F0  crème        twee secties, meer niet
 *   donker vlak   #0F0F0F  zwart        hero, #voorbeelden, footer
 *   inkt          #0F2858  navy         tekst op licht
 *   accent        #1863DC  helderblauw  op wit en crème
 *                 #4D8DEA               op zwart — #1863DC zakt daar weg
 *
 *   knoppen       rechthoekig (radius 0), 1px rand, UPPERCASE Montserrat met
 *                 1,2px tracking, geen schaduw. Twee smaken: gevuld navy, of
 *                 alleen een rand. Bij hover wisselen vulling en tekst om.
 *
 * De regel die dit bestand bij elkaar houdt: **navy en accentblauw dragen geen
 * vlakken.** Ze zitten in tekst, knoppen, labels en lijnen. Wat een oppervlak
 * is, is wit, crème of zwart. Vandaar ook geen navy hero en geen navy footer
 * meer — die zijn zwart, zodat de pagina begint en eindigt op hetzelfde vlak.
 *
 * Let op bij zwart naast navy: die twee halen onderling 1,34:1. Ze mogen dus
 * nooit tekst-op-elkaar zijn, alleen aangrenzende vlakken met een harde rand.
 *
 * Dit bestand staat als laatste in de <head>, ná site.css, studioname.css en
 * huisstijl.css. Eén bestand is dus het hele thema: de <link> eruit halen zet
 * de site terug op 187n's oorspronkelijke schema.
 */

:root {
  --cas-cream: #f6f5f0;
  --cas-white: #ffffff;
  --cas-navy: #0f2858;
  --cas-navy-2: #0b1f47;
  --cas-blue: #1863dc;
  --cas-black: #0f0f0f;
  --cas-black-2: #080808;

  --paper: #ffffff;
  --warm: #f6f5f0;

  /* Inkt is navy, niet zwart. Dat is het verschil dat je het eerst ziet. */
  --on-light: #0f2858;
  --on-light-mut: #55658a;
  --line-light: #0f28581f;
  --line-light-2: #0f285833;

  --accent: #1863dc;
  --accent-soft: #4d8dea;

  /* Zwart is terug als eigen vlak — het is niet langer een alias voor navy. */
  --black: #0f0f0f;
  --ink-dark: #0f0f0f;
  --ink-dark-2: #080808;
}

/* Wit is de hoofdkleur van de pagina; crème is de uitzondering, niet de regel. */
html, body { background: var(--paper); }

/* `--header-h` wordt nergens gezet, dus de hero viel terug op 115px — de hoogte
   van nav plus de mededelingenbalk die er niet meer is. De nav meet 71px. */
:root { --header-h: 71px; }

/* --------------------------------------------------------------------------
 * 1. Hero en footer op wit
 * --------------------------------------------------------------------------
 * Er is geen donker vlak meer op de site. Hero en footer waren de laatste twee
 * en gaan hier mee naar wit. Ze zijn in 187n's systeem gebouwd op de
 * `--on-dark`-tokens — die draaien we óm in plaats van elke regel los te
 * overschrijven, precies zoals de secties dat verderop doen.
 */
.hero,
.footer {
  --on-dark: #0f2858;
  --on-dark-mut: #55658a;
  --on-dark-dim: #7c89a4;
  --line-dark: #0f28581c;
  --line-dark-2: #0f285830;
  --ink-dark: #ffffff;
  --ink-dark-2: #ffffff;
  --accent: #1863dc;
  --accent-soft: #4d8dea;
  background: var(--paper);
  color: #0f2858;
}

.footer {
  background-color: var(--paper);
  background-image: none;
  border-top: 1px solid var(--line-light);
}

/* Het lijnenveld wordt een navy haarlijn, net als op de slot-CTA. De hero staat
   hier niet bij: die krijgt het floating-paths-veld en niet de topografie. */
.footer-topo .topo-lines path { stroke: #0f2858; stroke-opacity: .12; }

/* De blauwe gloeden waren er om een donker vlak te dragen. Op wit hebben ze
   niets te doen — ze zouden het wit vervuilen met een blauwe waas. */
.hero .topo-wash,
.hero .topo-sweep,
.footer .topo-wash,
.footer .topo-sweep,
.hero-grain,
.footer-topo-overlay { display: none; }

/* Eén witte sluier midden in de hero. De bogen lopen eronderdoor, maar waar de
   kop en de knoppen staan wint het wit — anders leest de tekst over de lijnen
   heen. Deze laag lag er al (`hero-silk-overlay`), hij was alleen donker. */
.hero-silk-overlay {
  background: radial-gradient(56% 54% at 50% 48%,
    #ffffffef 0%, #ffffffe0 38%, #ffffff9e 66%, #ffffff00 100%);
}

/* --------------------------------------------------------------------------
 * Geen rondjes
 * --------------------------------------------------------------------------
 * Casanis zet rechthoeken tegen elkaar; knoppen stonden al op `border-radius: 0`.
 * Alles wat nog rond of pilvormig was volgt nu diezelfde regel — de stippen in
 * de mocks, de stapnummers, de labels en de zoekbalk.
 */
.he-dot,
.ov-dot,
.wfm-dot,
.tl-num,
.ov-live i,
.fl-pulse,
.wfm-verdict-ic,
.btn-ripple,
.hero-promises li + li::before,
.hero .he-eyebrow,
.ov-src,
.tl-when,
.ov-more,
.ig-search input,
.skip-link,
.wfm-verdict .wfm-verdict-bad,
.wfm-verdict .wfm-verdict-ok,
.back-to-top,
.bk-card .sn,
.wf-foot-pill,
.lpill,
.tbadge { border-radius: 0; }

/* Deze verloren van een langere selector in site.css (`.tier .tbadge` slaat
   `.tbadge`). Zelfde regel, zwaar genoeg opgeschreven. */
body .wf-run,
body .wf-run-dot,
body .va-ck,
body .sec-dot-row,
body .sec-chk,
body .mc-dot,
body .ov-live i,
body .va-rec i,
body .int-live i,
body .anim-dash .live i,
body .tier .tbadge { border-radius: 0; }

/* De knop terug naar boven was een bijna-zwarte schijf uit het oude schema.
   Dat is nu het enige donkere rondje op een verder witte pagina. */
.back-to-top {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border-color: var(--cas-navy);
}

.back-to-top:hover {
  color: var(--cas-cream);
  background: var(--cas-blue);
  border-color: var(--cas-blue);
}

/* `huisstijl.css` schuift het accent naar #4E9BE8 op alles wat donker wás — de
   nav, de hero, de footer, de panelen, de contactkaart. Die zijn nu allemaal
   licht, dus daar hoort het diepere accentblauw. */
.section-dark,
.hero,
.closing,
.footer,
.nav,
.nd-panel,
.nav-mobile-panel,
.bk-card,
.cookie-root {
  --accent: #1863dc;
  --accent-soft: #4d8dea;
}


/* Zonder laadscherm mag de hero meteen beginnen: de reveal-trap start nu vrijwel
   direct in plaats van te wachten tot het laadscherm optilde. */
.hero .he-reveal-d0 { animation-delay: .06s; }
.hero .he-reveal-d1 { animation-delay: .16s; }
.hero .he-reveal-d2 { animation-delay: .26s; }
.hero .he-reveal-d3 { animation-delay: .38s; }
.hero .he-reveal-d4 { animation-delay: .48s; }
.hero .he-reveal-d5 { animation-delay: .58s; }
.hero .he-reveal-d6 { animation-delay: .70s; }

/* --------------------------------------------------------------------------
 * 1a. Het floating-paths-veld in de hero
 * --------------------------------------------------------------------------
 * Lange bogen die traag door de hero lopen, in accentblauw op wit. De SVG komt
 * uit `paintFloatingPaths()` in main.js; hier staat alleen hoe hij eruitziet en
 * beweegt. Elk pad heeft `pathLength="1"`, dus de streepjesmaat rekent in een
 * genormaliseerde schaal: streep .3, gat 1, periode 1.3.
 */
/* Het veld hoort niet in de hero opgesloten te zitten. Het loopt door tot ver
   onder de vouw en dooft daar uit, zodat de lijnen de eerste sectie in stromen
   in plaats van tegen een rand te stoppen. Daarvoor moet de hero z'n
   `overflow: hidden` loslaten en boven de witte achtergrond van `#probleem`
   liggen. */
.hero {
  position: relative;
  z-index: 1;
  overflow: visible;
}

.hero-topo.is-fp {
  position: absolute;
  inset: -10% 0 -62% 0;
  overflow: visible;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 52%, #0000 96%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 52%, #0000 96%);
}

/* De bundel zat laag in beeld. Omhoog geschoven, iets vergroot en verticaal
   platgedrukt: de bogen bewegen daardoor meer zijwaarts door het beeld dan
   naar beneden. */
.hero-topo.is-fp .fp-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translateY(-18%) scaleX(1.12) scaleY(0.82);
}

/* Op een smal, hoog scherm schaalt de viewBox op de hoogte, waardoor de bundel
   ver onder de vouw belandt. Daar moet hij verder omhoog. */
@media (max-width: 720px) {
  .hero-topo.is-fp .fp-layer { transform: translateY(-30%) scale(1.25); }
}

.is-fp .fp-lines path {
  fill: none;
  stroke: var(--accent);
  stroke-dasharray: .3 1;
  stroke-dashoffset: 0;
}

.is-fp.is-animated .fp-lines path {
  animation: fpFlow var(--dur, 14s) linear infinite;
  will-change: stroke-dashoffset;
}

.is-fp[data-paused="true"] .fp-lines path {
  animation-play-state: paused;
}

@keyframes fpFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1.3; }
}

@media (prefers-reduced-motion: reduce) {
  .is-fp .fp-lines path { animation: none; }
}

/* --- de slot-CTA: hetzelfde veld, gespiegeld — de pagina sluit in tegenfase
   met hoe hij opende. Het veld groeit omhoog de FAQ in en dooft daar uit,
   zoals de hero omlaag `#probleem` in loopt. Let op: de host staat op
   `scaleY(-1)`, dus wat in het masker 'bottom' heet is op het scherm de
   bovenkant. */
.cta {
  position: relative;
  z-index: 1;
}

.cta-panel { overflow: visible; }

.cta-topo.is-fp {
  position: absolute;
  inset: -48% 0 -125% 0;
  overflow: visible;
  pointer-events: none;
  transform: scaleY(-1);
  /* Eén lange, gelijkmatige verloop-baan zonder plateau-randen: omhoog dunt
     het veld traploos uit tot in de FAQ, omlaag loopt het door tot in de
     footer en dooft daar. (Host staat op scaleY(-1): 'bottom' in dit masker is
     op het scherm de bovenkant, 0% is de onderkant in de footer.) */
  -webkit-mask-image: linear-gradient(to bottom,
    #0000 1%, #00000073 8%, #000 20%, #000 52%,
    #000000a6 68%, #00000066 80%, #00000033 90%, #0000 99%);
  mask-image: linear-gradient(to bottom,
    #0000 1%, #00000073 8%, #000 20%, #000 52%,
    #000000a6 68%, #00000066 80%, #00000033 90%, #0000 99%);
}

.cta-topo.is-fp .fp-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --- de footer: de rustigste uitvoering, boven open zodat hij visueel oppakt
   wat er uit de CTA komt. */
.footer-topo.is-fp {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 78%, #0000 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 78%, #0000 100%);
}

.footer-topo.is-fp .fp-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* --------------------------------------------------------------------------
 * 1b. Het merkteken
 * --------------------------------------------------------------------------
 * Het accent zit op de ónderste chevron, net als in het medaillon rechtsonder
 * (besluit Atse 12-08 — het teken stond omgedraaid: ruit boven was blauw).
 * De ruit bovenaan is een navy omtrek, de onderste chevron accentblauw.
 * `studioname.css` vulde de ruit nog (`fill: currentColor`) en liet de
 * chevrons wegvagen op .55 en .3 — allebei hoort bij de vorige versie.
 */
.logo-mark .lm-1 {
  color: currentColor;
  fill: none;
  stroke: currentColor;
}

.logo-mark .lm-2,
.logo-mark .lm-3 { opacity: 1; }

.logo-mark .lm-3 { color: var(--accent); }

/* Het woordmerk stond in Montserrat — hetzelfde lettertype als elke lopende
   zin. Het merk hoort in de displayletter: Fraunces, net als de koppen. */
.brand {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -.02em;
  font-optical-sizing: auto;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
}

/* Op de witte hero zou de oude randverduistering een grijze waas zijn. */
.hero-silk-overlay { background: none; }

/* --------------------------------------------------------------------------
 * 2. Van zwart naar licht
 * --------------------------------------------------------------------------
 * De secties houden hun klassen (`.section-dark` enzovoort) — die zitten in
 * 187n's systeem en zijn niet los te trekken. In plaats daarvan draaien de
 * tokens óm binnen die secties: `--on-dark` wordt navy, `--line-dark` een
 * donkere haarlijn, `--ink-dark` wit. Alles wat op tokens is gebouwd klapt
 * daarmee in één keer mee; wat hardgecodeerd wit was, staat verderop apart.
 */
#probleem,
#voorbeelden,
#fases,
.cta {
  --on-dark: #0f2858;
  --on-dark-mut: #48587a;
  --on-dark-dim: #606f8d;
  --line-dark: #0f28581c;
  --line-dark-2: #0f285830;
  --ink-dark: #ffffff;
  --ink-dark-2: #ffffff;
  --accent: #1863dc;
  --accent-soft: #4d8dea;
  color: #0f2858;
}

/* Wit draagt de pagina; crème onderscheidt `#stack` en `#pakketten`. De staart
   van de pagina — FAQ, CTA, footer — is één witte baan waar het lijnenveld van
   de slot-CTA doorheen loopt. */
#probleem { background: var(--paper); }
#voorbeelden { background: var(--warm); }
#pijlers { background: var(--paper); }
#stack { background: var(--warm); }
#fases { background: var(--paper); }
#pakketten { background: var(--warm); }
#faq { background: var(--paper); }
.cta { background: var(--paper); }

/* De haarlijn die twee gelijke vlakken toch uit elkaar houdt. `#probleem` staat
   er bewust niet bij: daar moet het lijnenveld van de hero doorheen lopen, en
   een streep eroverheen maakt daar weer een rand van. */
#voorbeelden { border-top: 1px solid var(--line-light); }

/* --------------------------------------------------------------------------
 * 2a. De twee donkere secties
 * --------------------------------------------------------------------------
 * `#pijlers` en `#fases` zijn in 187n's systeem lichte secties. Inverteren doe
 * je daarom niet met een achtergrond alleen: de licht-tokens moeten óm, want
 * daar hangt alles binnen die secties aan. `--paper` en `--warm` gaan mee,
 * anders blijven de kaarten binnen de sectie wit steken.
 */
/* Let op het verschil tussen de twee: `#pijlers` is in 187n's systeem een
 * lichte sectie en hangt aan de `--on-light`-familie, `#fases` is een donkere
 * sectie en hangt aan `--on-dark`. `#fases` stond alleen in de maak-licht-lijst
 * hierboven; die staat er nu uit en daarmee heeft hij z'n eigen tokens terug.
 */

/* Hoe het aan de achterkant in elkaar zit — navy, geïnverteerd. */
#pijlers {
  --on-light: #f6f5f0;
  --on-light-mut: #9fb0cf;
  --line-light: #f6f5f01f;
  --line-light-2: #f6f5f038;
  --paper: #16305f;
  --warm: #112a55;
  --accent: #7db2ea;
  --accent-soft: #9dc4f2;
  background: var(--cas-navy);
  color: #f6f5f0;
}

/* De sprite-iconen in de bronnenrijen: één kleur, crème op navy. */
#pijlers .int-ico svg { width: 18px; height: 18px; fill: #f6f5f0; }

/* Hoe een traject verloopt — wit vlak, navy instrument. De sectie zelf staat in
   de maak-licht-lijst hierboven; hier krijgt alleen de tijdlijn zijn navy. */
#fases { background: var(--paper); }

/* De tijdlijnblokken vertellen de voortgang: nog niet bereikt is wit met een
   navy rand en blauwe cijfers; zodra de vullijn passeert (`is-done`) klapt het
   blok om naar navy met witte cijfers. */
#fases .tl-num {
  color: var(--cas-navy);
  background: #ffffff;
  border-color: var(--cas-navy);
  box-shadow: none;
  /* Iets groter, en de cijfers in de displayletter van de site (Fraunces) in
     plaats van de mono — de vierkantjes horen bij de typografie van de kop. */
  width: 44px;
  height: 44px;
  flex: none;
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
}

/* Mobiel rekent de stap-kolom en de verticale lijn op 34px-vierkantjes;
   die schuiven mee met de nieuwe maat (lijn op het midden: 44/2 = 22px). */
@media (max-width: 900px) {
  #fases .tl-step { grid-template-columns: 44px minmax(0, 1fr); }
  #fases .tl-node { width: 44px; }
  #fases .tl-track { left: 22px; }
}

/* De basis-track (81px) hoorde bij de oude blokmaat; met 44px-blokken ligt
   het midden op 86px — anders hangt de lijn boven het centrum. Mobiel meet
   initTimelineTrack() de lijn zelf en overschrijft dit inline. */
#fases .tl-track { top: 86px; }

#fases .tl-step.is-done .tl-num {
  color: #ffffff;
  background: var(--cas-navy);
  border-color: var(--cas-navy);
  box-shadow: none;
}

#fases .tl-track { background: #0f285833; }

#fases .tl-fill {
  /* Effen navy (besluit Atse 12-08): het gradient-eind kleurde de lijn tussen
     fase 4 en 5 nog accentblauw. */
  background: var(--cas-navy);
  box-shadow: none;
}

#fases .tl-when {
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid #0f285840;
}

#fases .tl-step-card {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#fases h3 { color: var(--cas-navy); }

/* De labels onder de mocks hadden een hardgecodeerd wit vlak met `--on-dark` as
   tekst. Dat werkte toen de sectie licht was; op een donkere sectie is het wit
   op wit. */
#pijlers .lpill {
  color: var(--on-light);
  background: #f6f5f014;
  border-color: var(--line-light-2);
}

/* De gedempte tweede kopregel stond nog in het warme grijs van het oude zwarte
   schema — op navy leest dat olijf en haalt het 2,7. Koel pigment. */
#pijlers .htitle .mut { color: #9fb0cf; }

/* --------------------------------------------------------------------------
 * Security-pagina (sq-*)
 * --------------------------------------------------------------------------
 * 187n's /security, vertaald naar onze taal: wit vlak, haarlijn-grids, mono
 * labels, vierkante badges — geen cirkels, geen gloed. De pijler-cellen
 * hergebruiken .feat-grid, maar dan in de lichte uitvoering.
 */
.sq-page { background: var(--paper); }

.sq-sec { padding: 34px 0 58px; }

.sq-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.sq-badge {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 16px;
  border: 1px solid var(--line-light-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cas-navy);
}

.sq-badge i {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #55658a;
}

/* De pijlers hergebruiken .feat-grid; op de lichte pagina zijn de cellen lucht
   in een haarlijnkader, zoals overal. */
.sq-grid { border: 1px solid var(--line-light); }
.sq-grid .feat-card { border-color: var(--line-light); min-height: 0; padding: 34px 36px 38px; }
.sq-grid .fnum {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: var(--cas-blue);
}

/* Drie cijfers, één haarlijnstrook — hetzelfde ritme als de pakketten. */
.sq-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 1px solid var(--line-light);
}

.sq-stat {
  padding: 34px 36px 38px;
  border-right: 1px solid var(--line-light);
}

.sq-stat:last-child { border-right: 0; }

.sq-num {
  font-family: var(--serif);
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 500;
  color: var(--cas-navy);
  margin-bottom: 8px;
}

.sq-stat p { font-size: 14.5px; color: #55658a; max-width: 30ch; }

/* Standaarden: vier kaarten met een mono statuslabel. */
.sq-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}

.sq-card { background: var(--paper); padding: 30px 32px 34px; }

.sq-tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cas-navy);
  border: 1px solid var(--line-light-2);
}

.sq-card h3 { margin-bottom: 10px; color: var(--cas-navy); }
.sq-card p { font-size: 14.5px; color: #55658a; }

/* Bewaking: drie lijstjes met groene vinkjes — groen betekent iets. */
.sq-mons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-light);
  border: 1px solid var(--line-light);
}

.sq-mon { background: var(--paper); padding: 30px 32px 34px; }
.sq-mon h3 { margin-bottom: 14px; color: var(--cas-navy); }
.sq-mon ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sq-mon li { display: flex; gap: 10px; font-size: 14px; color: #55658a; }
.sq-ck { color: #2c7a4b; flex: none; }

/* Subverwerkers: de tabel is het verhaal. */
.sq-tablebox { overflow-x: auto; border: 1px solid var(--line-light); }
.sq-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14.5px; }
.sq-table th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 500;
  color: #55658a;
  border-bottom: 1px solid var(--line-light-2);
}
.sq-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-light);
  color: var(--cas-navy);
  vertical-align: top;
}
.sq-table td:nth-child(2),
.sq-table td:nth-child(3) { color: #55658a; }
.sq-table tbody tr:last-child td { border-bottom: 0; }

.sq-note { margin-top: 16px; font-size: 13.5px; font-style: italic; color: #55658a; }

@media (max-width: 900px) {
  .sq-stats, .sq-cards, .sq-mons { grid-template-columns: 1fr; }
  .sq-stat { border-right: 0; border-bottom: 1px solid var(--line-light); }
  .sq-stat:last-child { border-bottom: 0; }
}

/* --------------------------------------------------------------------------
 * 2c-1. Werkregels — de eerste pijler
 * --------------------------------------------------------------------------
 * Geen waveform (dat was 187n's stem-metafoor) maar het eerlijke mechanisme:
 * werkregels die samen worden vastgelegd en waar de agent zich aan houdt. De
 * regels verschijnen één voor één; de vierde wordt 'nu' vastgelegd — die
 * schrijft zichzelf uit en krijgt als laatste zijn vinkje.
 */
.anim-rules { display: flex; flex-direction: column; gap: 10px; }

.rul-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.rul-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #7db2ea;
}

.rul-live i {
  width: 7px;
  height: 7px;
  background: #7db2ea;
  animation: rulPulse 2.2s ease-in-out infinite;
}

.rul-hlabel {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-light-mut);
}

.rul-list { display: flex; flex-direction: column; gap: 8px; }

.rul-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #16305f;
  border: 1px solid #f6f5f01f;
  opacity: 0;
  transform: translateY(8px);
}

.rul-num {
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #7db2ea;
}

.rul-txt { font-size: 14px; color: #f6f5f0; }

.rul-ck {
  font-size: 13px;
  color: #7ecfa4;
  opacity: 0;
  transform: scale(.7);
}

.rul-foot {
  font-size: 12.5px;
  font-style: italic;
  color: var(--on-light-mut);
}

/* Verschijnen zodra de sectie in beeld komt (`.play` komt van main.js). */
.anim-rules.play .rul-row { animation: rulIn .5s var(--ease-out, ease-out) forwards; }
.anim-rules.play .rul-row:nth-child(1) { animation-delay: .1s; }
.anim-rules.play .rul-row:nth-child(2) { animation-delay: .35s; }
.anim-rules.play .rul-row:nth-child(3) { animation-delay: .6s; }
.anim-rules.play .rul-row:nth-child(4) { animation-delay: 1.05s; }

.anim-rules.play .rul-ck { animation: rulCk .35s ease-out forwards; }
.anim-rules.play .rul-row:nth-child(1) .rul-ck { animation-delay: .45s; }
.anim-rules.play .rul-row:nth-child(2) .rul-ck { animation-delay: .7s; }
.anim-rules.play .rul-row:nth-child(3) .rul-ck { animation-delay: .95s; }
.anim-rules.play .rul-row:nth-child(4) .rul-ck { animation-delay: 2.5s; }

/* De vierde regel schrijft zichzelf uit. */
.rul-row--new .rul-txt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}

.anim-rules.play .rul-row--new .rul-txt {
  animation: rulType 1.2s steps(26, end) 1.2s both;
}

@keyframes rulIn {
  to { opacity: 1; transform: none; }
}

@keyframes rulCk {
  to { opacity: 1; transform: none; }
}

@keyframes rulType {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes rulPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .rul-row, .rul-ck { opacity: 1; transform: none; }
  .anim-rules.play .rul-row,
  .anim-rules.play .rul-ck,
  .anim-rules.play .rul-row--new .rul-txt { animation: none; opacity: 1; clip-path: none; }
  .rul-live i { animation: none; }
}

/* --------------------------------------------------------------------------
 * 2c. Pijlers — zwart, maar van ons
 * --------------------------------------------------------------------------
 * Wat de sectie 187n maakte: hun 2×2 met hun groene datavisualisatie. Twee
 * ingrepen halen dat eruit. Eén: alle decoratieve datavisualisatie — waveform,
 * voortgangsbalken, bronnen, scanner — kleurt in de accentblauw-familie; groen
 * blijft alleen waar het ✓ betekent. Twee: mono-nummers 01–04 per pijler, het
 * ritme dat de fases en de pakketten ook hebben.
 */
#pijlers .fnum {
  margin-bottom: 14px;
  font-family: var(--mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  color: var(--accent);
}

/* De cellen zijn lucht in een haarlijn-grid — geen eigen vlakken. */
#pijlers .feat-grid {
  background: transparent;
  border-color: var(--line-light);
  border-radius: 0;
}

#pijlers .feat-card {
  background: transparent;
  border-color: var(--line-light);
}

/* Waveform, balken en bronnenrijen: blauw. */
#pijlers .anim-voice .va-wave span {
  background: linear-gradient(180deg, #4d8dea, #9dc4f2);
}

#pijlers .va-fill,
#pijlers .int-fill,
#pijlers .sec-mfill {
  background: linear-gradient(90deg, #4d8dea, #7db2ea);
}

#pijlers .int-live,
#pijlers .va-rec { color: #7db2ea; border-color: #7db2ea66; }
#pijlers .int-live i,
#pijlers .va-rec i { background: #7db2ea; }

#pijlers .sec-scan { background: #4d8dea; box-shadow: 0 0 14px #4d8dea99; }

/* ✓ betekent gelukt — dat blijft groen, in het lichte pigment voor op donker.
   Het vinkje zelf wordt navy: wit op licht groen haalt maar 1,85. */
#pijlers .va-ck,
#pijlers .sec-chk,
#pijlers .sec-dot-row { background: #7ecfa4; color: #0f2858; }
#pijlers .sec-clear { color: #7ecfa4; border-color: #7ecfa466; }

/* --------------------------------------------------------------------------
 * 2d. Pakketten — drie witte tiers, de middelste met een blauwe lijn
 * --------------------------------------------------------------------------
 * Alle drie de tiers zijn wit; de middelste onderscheidt zich met een
 * accentblauwe lijn langs de bovenrand en het badge "Meest gekozen".
 */
.tier.featured {
  background: #ffffff;
  box-shadow: inset 0 3px 0 var(--cas-navy);
}

.tier.featured .tbadge {
  color: #ffffff;
  background: var(--cas-navy);
}

/* 'Bespreek dit' is een uitnodiging binnen een kaart, geen paginaknop —
   compacter dus, en de pijl schuift bij hover mee zoals bij de slot-CTA. */
.tier .tier-go {
  padding: 11px 18px;
  font-size: 11px;
  align-self: flex-start;
}

.tier .tier-go svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.tier .tier-go:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
 * 2b. De voorbeeldkaarten — het 187n-concept, in onze taal
 * --------------------------------------------------------------------------
 * Drie kolommen in één haarlijn-gridbox. De mock is geen paneel maar lucht:
 * de componenten erbínnen — taakkaarten, flowstappen, het dashboard — zijn de
 * navy vlakjes, en die zweven los op het wit. Onderin deelt elke kolom
 * dezelfde tekstzone. Precies zoals 187n het bouwt, maar dan navy-op-wit in
 * plaats van componenten-op-zwart.
 */
/* Vier voorbeelden op één rij (besluit Atse 12-08): 1-2-3-4 naast elkaar.
   De haarlijnen tussen de kolommen komen van de border-right op .work-card
   hieronder. Onder 1080px vallen ze terug op 2×2. */
.work-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1080px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid .work-card:nth-child(n+3) { border-top: 1px solid var(--line-dark); }
}

@media (max-width: 720px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .work-grid .work-card + .work-card { border-top: 1px solid var(--line-dark); }
}

/* Op één rij zijn de kolommen smal: de kopregel van een mock mag wikkelen en
   de tellers en KPI-labels een maat kleiner, anders knippen ze af. */
@media (min-width: 1081px) {
  .work-card .wfm-head { flex-wrap: wrap; row-gap: 6px; }
  .work-card .wfm-count { font-size: 11.5px; }
  .work-card .ov-kpi span { font-size: 9.5px; hyphens: auto; }
}

/* De kolommen scheiden zichzelf met één haarlijn; de gridbox eromheen levert
   het kader. Binnen `#voorbeelden` is `--line-dark` al een navy haarlijn. */
#voorbeelden .gridbox {
  background: transparent;
  border-radius: 0;
}

.work-card { border-right: 1px solid var(--line-dark); }
.work-card:last-child { border-right: 0; }

/* De mock zelf is transparant — de componenten dragen het navy. */
.work-card .wf-mock { background: transparent; }

/* De statusregel (pill + kerngetal) staat direct op het wit en leest dus in
   navy; het accent is het diepe blauw van de lichte ondergrond. */
.work-card .wfm-head { --accent: #1863dc; }

.work-card .wf-run {
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid #0f285840;
}

/* De zwevende navy componenten: elk z'n eigen donkere tokens, zodat de tekst
   erbínnen licht is terwijl de rest van de kolom op de lichte set draait. */
.work-card .wfm-tk,
.work-card .fl-step,
.work-card .ov-panel {
  --on-dark: #f6f5f0;
  --on-dark-mut: #a9bad8;
  --on-dark-dim: #8194b5;
  --line-dark: #f6f5f01f;
  --line-dark-2: #f6f5f038;
  --accent: #4d8dea;
  --accent-soft: #7db2ea;
  color: #f6f5f0;
  background: var(--cas-navy);
  border-color: #0f285826;
}

.work-card .wfm-tk { box-shadow: 0 10px 24px #0f28581a; }
.work-card .ov-panel { box-shadow: 0 14px 32px #0f285821; border-color: #0f28584d; }

/* De flowlijn en de puls tussen de stappen kleuren mee met het instrument. */
.work-card .fl-line { background: #0f285833; }
.work-card .fl-pulse { background: var(--cas-blue); }

/* De stappen worden geanimeerd door keyframes met hardgecodeerde donkere
   achtergronden (`#ffffff08` → lichtblauwe puls) — die winnen van elke
   background op de stap zelf. Eigen keyframes dus: navy rustend, dieper navy
   met een blauwe rand als de puls passeert. */
#voorbeelden .fl.is-live .fl-step { animation-name: flStepNavy; }

@keyframes flStepNavy {
  0% { background: #0f2858; border-color: #0f285826; transform: none; }
  4% { background: #16305f; border-color: #4d8dea99; transform: translateX(3px); }
  28% { background: #16305f; border-color: #4d8dea99; transform: translateX(3px); }
  36%, 100% { background: #0f2858; border-color: #0f285826; transform: none; }
}

/* De ✓ ín een stap betekent 'draait' — groen, in het lichte pigment omdat hij
   binnen het navy stapblok staat. */
.work-card .fl-step .fl-check { color: #7ecfa4; }

/* Elke kolom een eigen ritme — de lijst hoog, de flow door het midden, het
   dashboard lager. Dat verdeelt het beeld over de sectie in plaats van drie
   gelijke rechthoeken naast elkaar. */
#support .wfm-stage { justify-content: flex-start; }
#email .wfm-stage { justify-content: center; }
#content .wfm-stage { justify-content: center; }
#tools .wfm-stage { justify-content: center; }

/* --- Content, in het nieuwe jasje: een post die langs de merkcheck gaat --- */
.bc-post {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
  background: var(--cas-navy);
  color: #f6f5f0;
  box-shadow: 0 10px 24px #0f28581a;
}

.bc-thumb {
  flex: none;
  width: 44px;
  height: 44px;
  background:
    linear-gradient(135deg, var(--cas-blue) 0%, #4d8dea 55%, #9dc4f2 100%);
}

.bc-cap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bc-cap b { font-size: 13.5px; font-weight: 600; }
.bc-cap i { font-style: normal; font-size: 11.5px; color: #a9bad8; }

.bc-checks { display: flex; gap: 6px; margin-top: 10px; }

.bc-chk {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cas-navy);
  border: 1px solid #0f285833;
}

.bc-chk i { font-style: normal; color: #2c7a4b; }

.bc-verdict {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #2c7a4b;
}

/* --- Interne tools: een klein portaalvenster --- */
.pt-win {
  background: var(--cas-navy);
  color: #f6f5f0;
  box-shadow: 0 14px 32px #0f285821;
}

.pt-bar {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  background: #16305f;
  border-bottom: 1px solid #f6f5f01f;
}

.pt-dots { display: inline-flex; gap: 4px; }
.pt-dots i { width: 7px; height: 7px; background: #f6f5f038; }

.pt-title {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #a9bad8;
}

.pt-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  border-bottom: 1px solid #f6f5f014;
}

.pt-row em { font-style: normal; font-size: 11.5px; color: #a9bad8; }
.pt-row .pt-ok { color: #7ecfa4; }

.pt-btn {
  margin: 10px 12px 12px;
  padding: 8px 12px;
  width: fit-content;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #f6f5f0;
  border: 1px solid #f6f5f04d;
}
#ops .wfm-stage { justify-content: flex-end; padding-bottom: 8px; }

/* Het "Voorbeeld"-label is weg; de kaartgrid rekende op een rij voor dat label
   (`--wf-pill-h`), dus die rij vervalt mee. */
.work-card { grid-template-rows: var(--wf-mock-h) 2em auto; }



/* De merkcontrole-mock (187n's brand gate) stond afgesteld op donker: witte
   asset-randen, licht groen. Op het wit van de kolom krijgt hij navy randen en
   het donkere betekenis-groen. */
#voorbeelden .wf-mock.wf-content .wfm-asset {
  color: var(--cas-navy);
  background: #ffffff;
  border-color: #0f285866;
}

#voorbeelden .wf-mock.wf-content .wfm-gate { border-color: #0f285859; }

#voorbeelden .wf-mock.wf-content .wfm-verdict .wfm-verdict-ok {
  color: #2c7a4b;
  background: #2c7a4b12;
  border-color: #2c7a4b4d;
}

#voorbeelden .wf-mock.wf-content .wfm-verdict .wfm-verdict-ok * { color: #2c7a4b; }

/* De bronnen rond het overzicht: geen vakjes meer om de logo's — het merk-
   teken staat los op de achtergrond, in zijn eigen kleur. */
#voorbeelden .ov-src {
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* De opvolgingsflow mag doorwerken: kortere cyclus, strakkere trap. */
#voorbeelden .fl.is-live .fl-step,
#voorbeelden .fl.is-live .fl-step .fl-num,
#voorbeelden .fl.is-live .fl-step .fl-check { animation-duration: 3s; }
#voorbeelden .fl.is-live .fl-step:nth-of-type(1),
#voorbeelden .fl.is-live .fl-step:nth-of-type(1) .fl-num,
#voorbeelden .fl.is-live .fl-step:nth-of-type(1) .fl-check { animation-delay: 0s; }
#voorbeelden .fl.is-live .fl-step:nth-of-type(2),
#voorbeelden .fl.is-live .fl-step:nth-of-type(2) .fl-num,
#voorbeelden .fl.is-live .fl-step:nth-of-type(2) .fl-check { animation-delay: 1s; }
#voorbeelden .fl.is-live .fl-step:nth-of-type(3),
#voorbeelden .fl.is-live .fl-step:nth-of-type(3) .fl-num,
#voorbeelden .fl.is-live .fl-step:nth-of-type(3) .fl-check { animation-delay: 2s; }

/* --------------------------------------------------------------------------
 * Het bestel-voorbeeld — de WhatsApp-klik-flow, zoals bij Leon gebouwd
 * --------------------------------------------------------------------------
 * Chat-ritme: klant rechts als omlijnde bel, bot links als navy bel met
 * keuzeknoppen. De bellen verschijnen om de beurt zodra de kolom in beeld is.
 */
.wa-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
}

.wa-bub {
  max-width: 88%;
  padding: 10px 13px;
  font-size: 13.5px;
  opacity: 0;
  transform: translateY(6px);
}

.wa-bub--bot {
  align-self: flex-start;
  background: var(--cas-navy);
  color: #f6f5f0;
}

.wa-bub--klant {
  align-self: flex-end;
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid #0f285840;
}

.wa-keuzes { display: flex; gap: 6px; margin-top: 9px; }

.wa-keuzes i {
  font-style: normal;
  font-size: 11.5px;
  padding: 5px 10px;
  color: #f6f5f0;
  border: 1px solid #f6f5f04d;
}

.wa-conf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: #55658a;
  opacity: 0;
}

.wa-ck { color: #2c7a4b; }

.wa-mock.play .wa-bub,
.wa-mock.play .wa-conf { animation: rulIn .45s ease-out forwards; }
.wa-mock.play .wa-bub:nth-child(1) { animation-delay: .15s; }
.wa-mock.play .wa-bub:nth-child(2) { animation-delay: .75s; }
.wa-mock.play .wa-bub:nth-child(3) { animation-delay: 1.5s; }
.wa-mock.play .wa-conf { animation-delay: 2.1s; }

@media (prefers-reduced-motion: reduce) {
  .wa-bub, .wa-conf { opacity: 1; transform: none; }
  .wa-mock.play .wa-bub, .wa-mock.play .wa-conf { animation: none; }
}

/* --------------------------------------------------------------------------
 * 3. Knoppen — het Casanis-systeem
 * --------------------------------------------------------------------------
 * Casanis kent geen pillen en geen glas: een rechthoek, één pixel rand,
 * uppercase Montserrat met tracking, en bij hover wisselen vulling en tekst
 * van plaats. Dat is het hele repertoire, in twee smaken — gevuld en open —
 * en per ondergrond een lichte en een donkere uitvoering.
 *
 * De liquid-glass-knop wordt hier niet verborgen maar leeggehaald: zijn twee
 * pseudo-lagen uit, en dan is het weer een gewone knop die deze regels volgt.
 */
.btn-glass::before,
.btn-glass::after { display: none; }

.btn,
.btn-glass,
.btn-ghost-dark,
.btn-light,
.pill-solid,
.bk-submit,
.tier-go,
.cookie-bar-btn,
.stack-link,
.cta-btn {
  border-radius: 0;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: none;
  transition:
    background-color .3s cubic-bezier(.4, 0, .2, 1),
    color .3s cubic-bezier(.4, 0, .2, 1),
    border-color .3s cubic-bezier(.4, 0, .2, 1),
    transform .12s var(--ease-out);
}

/* --- gevuld: navy vlak, crème letter; bij hover keert hij om ---------------
 * Besluit Atse 11-08: de gevulde CTA's (Plan een gesprek, Bespreek dit, de
 * nav-knop) zijn navy in plaats van zwart. */
.btn-glass,
.pill-solid,
.bk-submit,
.tier-go,
.cta-btn {
  padding: 17px 32px;
  color: var(--cas-cream);
  background: var(--cas-navy);
  border: 1px solid var(--cas-navy);
}

.btn-glass:hover,
.pill-solid:hover,
.bk-submit:hover,
.tier-go:hover,
.cta-btn:hover {
  color: var(--cas-navy);
  background: transparent;
  border-color: var(--cas-navy);
  transform: none;
  filter: none;
  box-shadow: none;
}

/* --- open: alleen een dunne rand ------------------------------------------ */
.stack-link,
.btn-ghost-dark {
  padding: 15px 28px;
  color: var(--on-light);
  background: transparent;
  border: 1px solid var(--line-light-2);
}

.btn-ghost-dark { padding: 17px 30px; }

.stack-link:hover,
.btn-ghost-dark:hover {
  color: var(--cas-cream);
  background: #0f0f0f;
  border-color: #0f0f0f;
}

/* --- hero en footer staan nu op wit: dezelfde twee smaken als de rest ------ */
.footer .btn-light,
.cookie-bar-btn {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border: 1px solid var(--cas-navy);
}

.footer .btn-light:hover,
.cookie-bar-btn:hover {
  color: var(--cas-navy);
  background: transparent;
  border-color: var(--cas-navy);
}

/* De mobiele cookiebalk: het basissysteem geeft Accepteren en Weigeren elk
   een basis van 50%, waardoor de derde knop (Instellen) in de verdrukking
   komt en zijn eigen label afknipt. Natuurlijke breedtes passen ruim; op
   extreem smalle schermen mag de rij wikkelen. */
@media (max-width: 900px) {
  .cookie-bar-actions { flex-wrap: wrap; }
  .cookie-bar-btn.cookie-bar-btn--primary,
  .cookie-bar-btn.cookie-bar-btn--ghost { flex: 0 1 auto; }
}

.btn-ghost-dark {
  padding: 17px 30px;
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid var(--cas-navy);
}

.btn-ghost-dark:hover {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border-color: var(--cas-navy);
}

/* Indrukken mag je voelen; verder blijft het stil. */
.btn:active,
.btn-glass:active,
.btn-ghost-dark:active,
.pill-solid:active,
.bk-submit:active,
.tier-go:active,
.stack-link:active,
.cta-btn:active { transform: translateY(1px); }

.btn-glass:focus-visible,
.pill-solid:focus-visible,
.cta-btn:focus-visible {
  outline: 2px solid var(--cas-blue);
  outline-offset: 3px;
}

/* De pijl blijft, maar hij hoort bij de letter — niet los ernaast. */
.btn-glass > span,
.cta-btn > span { display: inline-flex; align-items: center; gap: 12px; }
.btn-glass svg,
.cta-btn svg { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.btn-glass:hover svg,
.cta-btn:hover svg { transform: translateX(5px); }

/* --------------------------------------------------------------------------
 * 4. De kop
 * --------------------------------------------------------------------------
 * De nav meet de luminantie van wat eronder ligt en zet `is-light`. Nu er geen
 * donker vlak meer op de site staat, is de uitkomst altijd licht — de basis
 * staat daarom óók licht. Dat scheelt een donkere flits tussen het laden van de
 * pagina en het moment dat JS de meting doet. De `is-light`-regels hieronder
 * blijven staan; ze zeggen nu hetzelfde als de basis.
 */
.nav {
  background: #ffffff;
  border-bottom: 1px solid var(--line-light);
  color: var(--cas-navy);
  /* Dekkend wit — de blur uit het basissysteem hoorde bij een doorschijnende
     balk en liet de pagina er nog doorheen schemeren. */
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav .brand,
.nav .nav-brand,
.nav .nd-trigger,
.nav .lang-opt,
.nav .nav-mobile-toggle-label { color: var(--cas-navy); }

.nav .nav-mobile-toggle-icon span { background: var(--cas-navy); }

.nav .nd-trigger:hover { color: var(--cas-blue); }

.nav.is-light {
  background: #ffffff;
  border-bottom: 1px solid var(--line-light);
  color: var(--cas-navy);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.nav.is-light .brand,
.nav.is-light .nav-brand,
.nav.is-light .nd-trigger,
.nav.is-light .lang-opt,
.nav.is-light .nav-mobile-toggle-label { color: var(--cas-navy); }

.nav.is-light .nav-mobile-toggle-icon span { background: var(--cas-navy); }
.nav.is-light .nd-trigger:hover { color: var(--cas-blue); }

/* De knop in de kop is kleiner dan die in de pagina. */
.nav .nav-cta.pill-solid {
  padding: 12px 20px;
  font-size: 11px;
  color: var(--cas-cream);
  background: var(--cas-navy);
  border-color: var(--cas-navy);
}

.nav .nav-cta.pill-solid:hover {
  color: var(--cas-navy);
  background: transparent;
}

.nav.is-light .nav-cta.pill-solid {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border-color: var(--cas-navy);
}

.nav.is-light .nav-cta.pill-solid:hover {
  color: var(--cas-navy);
  background: transparent;
}

/* Het uitklapmenu en het mobiele paneel zijn altijd licht — ze staan over de
   pagina heen, niet over de hero. */
.nd-panel,
.nd-panel.is-light,
.nav-mobile-panel,
.nav-mobile-panel.is-light {
  --on-dark: #0f2858;
  --on-dark-mut: #55658a;
  --on-dark-dim: #7c89a4;
  --line-dark: #0f28581a;
  --line-dark-2: #0f28582b;
  --accent: #1863dc;
  --accent-soft: #4d8dea;
  background: var(--cas-white);
  color: var(--cas-navy);
  border-bottom: 1px solid var(--line-light);
  box-shadow: 0 24px 60px #0f285814;
}

.nd-backdrop,
.nd-backdrop.is-light { background: #00000026; }

/* --------------------------------------------------------------------------
 * 5. Kaarten, randen en het groen van de mocks
 * -------------------------------------------------------------------------- */

/* Wat in de donkere secties vlak-op-vlak was, is nu een witte kaart met een
   haarlijn — anders zweeft er niets meer. */
#probleem .prob-card,
#voorbeelden .build-card {
  background: var(--paper);
  border-color: var(--line-light);
  box-shadow: 0 1px 2px #0f285808, 0 12px 30px #0f28580f;
}

/* De gloed onder de muis was licht-op-donker; op crème moet hij blauw zijn. */
.glow-card { --glow-color: #1863dc1f; }

/*
 * `#9FC0A0` is een pastelgroen dat op zwart werkt en op crème verdwijnt
 * (gemeten contrast 1,8). Zelfde rol, donkerder pigment.
 */
#voorbeelden .tag-ok,
#voorbeelden .wfm-vd,
#voorbeelden .wfm-count b,
#voorbeelden .wfm-count--ok b,
#voorbeelden .wfm-verdict .wfm-verdict-ok { color: #2c7a4b; }

#voorbeelden .tag-ok { background: #2c7a4b14; }

#voorbeelden .wfm-verdict .wfm-verdict-ok {
  background: #2c7a4b12;
  border-color: #2c7a4b4d;
}

#voorbeelden .wfm-ring { stroke: #2c7a4b; }
#voorbeelden .wfm-tk--done { border-color: #2c7a4b4d; }
#voorbeelden .wfm-asset.is-shipped { border-color: #2c7a4b8c; }
#voorbeelden .wf-step-ck::after { border-color: #2c7a4b; }

#voorbeelden .wf-step-ck:not(.wf-step-ck--empty) {
  background: #2c7a4b14;
  border-color: #2c7a4b7a;
}

/* Het lichte groen hoort alleen ín de navy componenten. De tellerregel bovenin
   (`.wfm-count`) staat op het wit en houdt het donkere groen — de mock zelf is
   sinds de 187n-recompositie transparant. */
#voorbeelden .wf-mock .tag-ok,
#voorbeelden .wf-mock .wfm-tk .wfm-vd,
#voorbeelden .wf-mock .wfm-verdict .wfm-verdict-ok { color: #7ecfa4; }

#voorbeelden .wf-mock .wfm-count b,
#voorbeelden .wf-mock .wfm-count--ok b { color: #2c7a4b; }

#voorbeelden .wf-mock .tag-ok { background: #7ecfa41f; }

#voorbeelden .wf-mock .wfm-verdict .wfm-verdict-ok {
  background: #7ecfa41a;
  border-color: #7ecfa459;
}

#voorbeelden .wf-mock .wfm-ring { stroke: #7ecfa4; }
#voorbeelden .wf-mock .wfm-tk--done { border-color: #7ecfa447; }
#voorbeelden .wf-mock .wf-step-ck::after { border-color: #7ecfa4; }

#voorbeelden .wf-mock .wf-step-ck:not(.wf-step-ck--empty) {
  background: #7ecfa41f;
  border-color: #7ecfa47a;
}

/* --------------------------------------------------------------------------
 * 6. De slot-CTA — de grootste typografie van de pagina
 * --------------------------------------------------------------------------
 * De koepel uit de referentie staat er nog, maar omgekeerd: blauw licht dat
 * vanaf de onderrand over crème opkomt in plaats van over zwart. Het
 * lijnenveld uit de hero loopt erdoorheen, zodat de pagina eindigt met
 * hetzelfde beeld waarmee hij begint.
 */
.cta {
  position: relative;
  padding: 0;
  overflow: hidden;
  border-top: 1px solid var(--line-light);
}

.cta-panel {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #f6f5f0 0%, #f5f6f4 42%, #eef2fa 100%);
}

.cta-topo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: paint;
}

.cta-topo .topo-layer {
  position: absolute;
  inset: -6%;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

.cta-topo svg { display: block; width: 100%; height: 100%; }
.cta-topo .topo-lines path { stroke: #0f2858; stroke-opacity: .12; }
.cta-topo .topo-wash { background: none; }
.cta-topo .topo-sweep { display: none; }

.cta-topo.is-animated .topo-layer {
  animation: topoDrift var(--dur, 18s) ease-in-out infinite alternate;
}

.cta-topo[data-paused="true"] .topo-layer { animation-play-state: paused !important; }

.cta-dome {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(122% 84% at 50% 116%,
      #1863dc54 0%,
      #2f7fd43d 16%,
      #6ba3ee29 32%,
      #a8c9f71a 48%,
      #ffffff00 70%),
    radial-gradient(58% 32% at 50% 113%, #ffffffcc 0, #ffffff00 72%);
  transform-origin: 50% 100%;
  will-change: transform;
  animation: ctaBreathe 16s ease-in-out infinite alternate;
}

.cta-shine {
  position: absolute;
  left: 50%;
  bottom: -24%;
  z-index: 1;
  width: 68%;
  height: 66%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, #1863dc21 0, #1863dc00 74%);
  will-change: transform;
  animation: ctaShine 13s ease-in-out infinite alternate;
}

@keyframes ctaBreathe {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); }
  to { transform: translate3d(1.5%, -1.5%, 0) scale(1.06); }
}

@keyframes ctaShine {
  from { transform: translate3d(-70%, 6%, 0) scale(.92); }
  to { transform: translate3d(-30%, -6%, 0) scale(1.12); }
}

.cta[data-paused="true"] .cta-dome,
.cta[data-paused="true"] .cta-shine { animation-play-state: paused; }

.cta-body {
  position: relative;
  z-index: 2;
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(96px, 11vw, 172px) 32px clamp(92px, 10vw, 152px);
  text-align: center;
}

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 30px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--on-light-mut);
}

.cta-eyebrow i {
  /* Zelfde behandeling als het bolletje op de contactpagina: wit met een
     navy rand, stil (besluit Atse 12-08). */
  width: 7px;
  height: 7px;
  background: #ffffff;
  border: 1px solid var(--cas-navy);
  animation: none;
}

.cta-title { margin: 0; }

.cta-title span {
  display: block;
  line-height: 1.04;
  letter-spacing: -.038em;
}

.cta-l1 {
  font-family: var(--serif);
  font-size: clamp(38px, 6.6vw, 86px);
  font-weight: 400;
  color: var(--cas-navy);
}

.cta-l2 {
  margin-top: 2px;
  font-family: var(--serif);
  font-size: clamp(36px, 6.3vw, 82px);
  font-weight: 400;
  letter-spacing: -.032em;
  color: #8894ad;
}

.cta-sub {
  max-width: 50ch;
  margin: 30px auto 0;
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.62;
  color: var(--on-light-mut);
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 30px;
  margin-top: 42px;
}

/* De grootste knop van de site — dit is het enige punt waar dat mag. */
.cta-btn {
  padding: 21px 44px;
  font-size: 13.5px;
}

.cta-mail {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  color: var(--on-light-mut);
  text-decoration: none;
}

.cta-mail b {
  font-weight: 500;
  color: var(--cas-navy);
  border-bottom: 1px solid var(--line-light-2);
  transition: border-color .3s;
}

.cta-mail:hover b { border-color: var(--cas-navy); }

.cta-promises {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 30px;
  max-width: 780px;
  margin: 52px auto 0;
  padding: 30px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}

.cta-promises li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--on-light-mut);
}

.cta-promises svg { flex: none; color: var(--cas-blue); }

/* De inhoud komt gestaffeld binnen zodra de plaat in beeld staat. */
.cta-panel .cta-eyebrow,
.cta-panel .cta-title,
.cta-panel .cta-sub,
.cta-panel .cta-actions,
.cta-panel .cta-promises {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}

.cta-panel.is-in .cta-eyebrow,
.cta-panel.is-in .cta-title,
.cta-panel.is-in .cta-sub,
.cta-panel.is-in .cta-actions,
.cta-panel.is-in .cta-promises {
  opacity: 1;
  transform: none;
}

.cta-panel.is-in .cta-title { transition-delay: .08s; }
.cta-panel.is-in .cta-sub { transition-delay: .16s; }
.cta-panel.is-in .cta-actions { transition-delay: .24s; }
.cta-panel.is-in .cta-promises { transition-delay: .32s; }

@media (max-width: 720px) {
  .cta-body { padding: 76px 22px 72px; }
  .cta-actions { flex-direction: column; gap: 18px; }
  .cta-btn { width: 100%; justify-content: center; }
  .cta-promises { gap: 10px 20px; margin-top: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .cta-dome, .cta-shine { animation: none; }
  .cta-panel .cta-eyebrow,
  .cta-panel .cta-title,
  .cta-panel .cta-sub,
  .cta-panel .cta-actions,
  .cta-panel .cta-promises { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
 * 7. Naslag op wat de eerste ronde opleverde
 * --------------------------------------------------------------------------
 * Gevonden door de pagina na de omslag door een contrastscan te halen en er
 * daarna doorheen te lopen — niet door te gokken.
 */

/*
 * De gedempte tekstkleuren zijn drie keer verhuisd: warme grijzen uit het
 * zwarte schema, daarna lichte blauwgrijzen voor op navy, en nu — met hero en
 * footer op wit — dezelfde gedempte navy als de rest van de lichte pagina.
 */
.hero,
.footer {
  --on-dark-mut: #55658a;
  --on-dark-dim: #7c89a4;
}

/* De koepel was te braaf: op crème verdween het blauw bijna. Nu is hij het
   licht dat de sectie draagt én de overgang naar de navy footer. */
.cta-dome {
  background:
    radial-gradient(126% 88% at 50% 112%,
      #1863dc8f 0%,
      #2f7fd469 14%,
      #5b9aec47 28%,
      #9dc0f22e 44%,
      #d6e4f815 60%,
      #ffffff00 76%),
    radial-gradient(56% 30% at 50% 110%, #ffffffd9 0, #ffffff00 74%);
}

.cta-shine {
  background: radial-gradient(closest-side, #1863dc33 0, #1863dc00 74%);
}

/* Het pakketlabel: een navy vulling zou een blauw vlak zijn, dus het label
   volgt de vormtaal — dunne lijn, geen vulling. */
.tbadge {
  border-radius: 0;
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-light);
  background: transparent;
  border: 1px solid var(--line-light-2);
}

/*
 * De laatste twee uit de scan, allebei displaytekst die net onder de grens
 * bleef: de eerste heldenregel stond op een hardgecodeerd warm grijs (#6F6B64,
 * contrast 2,7 op navy), de tweede CTA-regel op een te licht blauwgrijs (2,8
 * op crème).
 */
/* Beide zijn de gedempte eerste of tweede regel van een groot kopblok. Op wit
   krijgen ze dezelfde waarde, zodat hero en slot-CTA hetzelfde ritme hebben. */
.hero h1 .l1 { color: #78859f; }
.cta-l2 { color: #78859f; }

/*
 * Waarom de koepel bijna niet te zien was: het middelpunt stond op 50% 112% —
 * 273px onder de plaat — met een straal van 754px. Bij de onderrand zat je
 * daardoor al op 36% van het verloop, waar nog maar 18% dekking staat. Het
 * middelpunt ligt nu precies op de onderrand en de straal is kleiner, zodat de
 * verzadigde stops binnen de plaat vallen. Het licht komt daarmee echt uit de
 * onderkant omhoog en loopt door in de navy footer.
 */
.cta-dome {
  background:
    radial-gradient(88% 66% at 50% 100%,
      #1863dca6 0%,
      #2f7fd485 11%,
      #5b9aec5c 24%,
      #9dc0f238 40%,
      #cfe0fa1f 56%,
      #ffffff00 78%),
    radial-gradient(42% 19% at 50% 100%, #ffffffd6 0, #ffffff00 72%);
}

/* Het ademen mag niet omhoog: dan komt de lichtkern van de onderrand af en
   valt er een lichte strook onder de koepel. Alleen zijwaarts en schaal. */
@keyframes ctaBreathe {
  from { transform: translate3d(-1.6%, 0, 0) scale(1); }
  to { transform: translate3d(1.6%, 0, 0) scale(1.07); }
}

/* Ruimer ademen: dit is de laatste sectie, hier mag de pagina uitlopen. */
.cta-body { padding: clamp(110px, 12vw, 196px) 32px clamp(104px, 11vw, 168px); }

@media (max-width: 720px) {
  .cta-body { padding: 84px 22px 78px; }
}

/* --------------------------------------------------------------------------
 * 8. Subpagina's
 * --------------------------------------------------------------------------
 * Dezelfde scan op contact.html: de navy kaart naast het formulier had nog
 * twee kleuren uit het zwarte schema.
 */
/* De contactpagina volgt de hoofdkleur: wit vlak, crème kaart ernaast. Die
   kaart is het enige onderscheid op de pagina, dus crème is genoeg. */
.bk-page { background: var(--paper); }

.bk-card {
  --on-dark: #0f2858;
  --on-dark-mut: #55658a;
  --on-dark-dim: #7c89a4;
  --line-dark: #0f28581c;
  --line-dark-2: #0f285830;
  --ink-dark: #ffffff;
  background: var(--warm);
  border-color: var(--line-light-2);
  color: #0f2858;
}

.bk-card .when { color: #55658a; }

/* De actieve stap stond op wit — leesbaar op de navy kaart, onzichtbaar op de
   crème kaart. Actief is nu juist de donkerste van de drie. */
.bk-step.active h3 { color: var(--cas-navy); }
.bk-step:hover h3 { color: var(--cas-blue); }

.bk-card .bk-step.active .sn {
  color: #4e9be8;
  background: transparent;
  border-color: #4e9be8;
}

/* --------------------------------------------------------------------------
 * 9. Merkcontrole: de oordeelpillen
 * --------------------------------------------------------------------------
 * Op de pillen stond `box-shadow: 0 4px 14px rgba(0,0,0,.28)` plus een
 * `backdrop-filter: blur(6px)` — allebei bedoeld om ze van een zwarte kaart te
 * tillen. Op een witte kaart wordt diezelfde schaduw een grijze waas rondom, en
 * het waas achter glas heeft niets meer om te vervagen. De rand doet het werk
 * nu alleen.
 *
 * Twee dingen die daar nog uit het zwarte schema stonden en die je pas ziet als
 * de mock op dat moment in beeld staat: het icoonrondje had een zwarte vulling
 * (#0F0F0F) en het rood was pastel (#E8A09A — contrast 2,1 op wit).
 */
#voorbeelden .wfm-verdict .wfm-verdict-ok,
#voorbeelden .wfm-verdict .wfm-verdict-bad {
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

#voorbeelden .wfm-verdict-ic {
  background: var(--paper);
  border-color: currentColor;
}

#voorbeelden .wfm-verdict .wfm-verdict-bad {
  color: #b8382c;
  background: #b8382c12;
  border-color: #b8382c4d;
}

#voorbeelden .wfm-verdict .wfm-verdict-ok {
  color: #2c7a4b;
  background: #2c7a4b12;
  border-color: #2c7a4b4d;
}

/* --------------------------------------------------------------------------
 * 10. De slot-CTA zonder gloed
 * --------------------------------------------------------------------------
 * Casanis zet vlakke kleurvlakken tegen elkaar met een harde rand ertussen —
 * geen verlopen, geen gloed, geen licht dat ergens vandaan komt. De blauwe
 * koepel was de laatste rest van de donkere referentie en hoort hier niet: hij
 * maakte er een landingspagina van in plaats van een slotpagina.
 *
 * Wat overblijft draagt het net zo goed: één wit vlak, het lijnenveld dat
 * traag drijft, en een harde overgang naar de zwarte footer. De typografie is
 * groot genoeg om alleen te staan.
 */
.cta-dome,
.cta-shine { display: none; }

/* De plaat zelf ligt óver `.cta` heen — die moet dus mee naar wit, anders
   blijft de sectie crème hoe je `.cta` ook zet. */
.cta-panel { background: var(--paper); }

/* Geen haarlijnen rond de CTA: boven loopt het lijnenveld de FAQ in, onder
   loopt het de footer in — een streep zou beide overgangen doorsnijden. */
.cta { border-top: 0; }

.footer { border-top: 0; }

/* De footer volgt gewoon de wrap-marge van de rest van de pagina. */

/* --------------------------------------------------------------------------
 * 11. Mobiele ronde (11-08): geen hover-restjes, strak menu, nette kaarten
 * --------------------------------------------------------------------------
 * Besluiten Atse: alles wat op hover leunt verdwijnt op aanraakschermen, de
 * gevulde CTA's zijn navy (zie blok knoppen), en het mobiele menu is een
 * dekkend wit vlak in plaats van een strook die over de pagina zweeft.
 */

/* Hover bestaat niet op een aanraakscherm: geen tooltip-bubbels (main.js laat
   ze daar ook niet meer zien; dit is het vangnet). */
@media (hover: none) {
  .tip-bubble { display: none !important; }
}

/* --- mobiel menu: het 187N-model, in onze lichte huisstijl ----------------
 * Frosted paneel over de volle hoogte (de pagina schemert er vaag doorheen,
 * zoals bij 187N in donker), grote sans-titels met mono-kicker, haarlijnen. */
@media (max-width: 900px) {
  .nav-mobile-panel,
  .nav-mobile-panel.is-light {
    height: calc(100dvh - var(--site-header-h, 64px));
    max-height: none;
    background: #ffffffe8;
    -webkit-backdrop-filter: blur(20px) saturate(1.15);
    backdrop-filter: blur(20px) saturate(1.15);
    border-bottom: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
  }

  .nav-mobile-inner {
    flex: 1;
    padding: 6px 24px calc(36px + env(safe-area-inset-bottom, 0px));
  }

  /* De sectiekop zoals bij 187N: grote sans-regel, mono-kicker eronder. */
  .nav-mobile-section-trigger { padding: 24px 0; }
  .nav-mobile-section.is-open .nav-mobile-section-trigger { padding: 24px 0 8px; }

  .nav-mobile-trigger-title {
    font-family: var(--sans);
    font-size: 27px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--cas-navy);
  }

  .nav-mobile-trigger-kicker {
    font-family: var(--mono);
    font-size: 10.5px;
    letter-spacing: .14em;
    color: #7c89a4;
  }

  .nav-mobile-chev { width: 14px; height: 9px; color: #7c89a4; }
  .nav-mobile-section.is-open .nav-mobile-chev { color: var(--cas-blue); }

  /* De kicker onder de sectiekop en het eerste groepslabel zeggen hetzelfde;
     het label vervalt zodat het er niet dubbel staat. */
  .nav-mobile-panel .nav-mobile-group:first-child .nd-col-label { display: none; }

  .nav-mobile-panel .nd-item { padding: 13px 0; }
  .nav-mobile-panel .nd-item-label { font-size: 16.5px; }
  .nav-mobile-panel .nd-item-sub { font-size: 12.5px; }
  .nav-mobile-panel .nd-arr { color: var(--cas-blue); }
}

/* --- pakketten: de Bespreek dit-knop op één lijn ------------------------- */
@media (max-width: 900px) {
  .tier .tier-go {
    align-self: stretch;
    justify-content: center;
    margin-top: 24px;
    padding: 14px 18px;
  }
}

/* --- voorbeelden: de mocks blijven binnen hun kaart ----------------------
 * Op smalle schermen wrappen de rijen hoger dan het vaste podium; het podium
 * groeit hier met de inhoud mee zodat er niets half wordt afgesneden of over
 * de kaarttekst valt. */
@media (max-width: 900px) {
  #voorbeelden .work-card .mock {
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  #voorbeelden .wfm-stage {
    height: auto;
    flex: none;
  }
}

/* --------------------------------------------------------------------------
 * 12. Boekingsflow (contact) + 404
 * --------------------------------------------------------------------------
 * Het 187N-model in onze taal: stap 1 gegevens, stap 2 een vrij moment.
 * Chips zijn rechthoeken (geen rondjes), gekozen = navy vlak.
 */

.bk-form .field-half { display: inline-block; width: calc(50% - 7px); }
.bk-form .field-half + .field-half { margin-left: 14px; }

.bk-form select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: var(--cas-navy);
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237c89a4' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center;
  border: none;
  border-bottom: 1px solid var(--line-light);
  border-radius: 0;
  padding: 12px 22px 12px 0;
}

.bk-form select:invalid { color: #7c89a4; }
.bk-form select:focus { outline: none; border-bottom-color: var(--cas-blue); }

.bk-honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.bk-stap { border: none; margin: 0; padding: 0; min-width: 0; }

.bk-staplabel {
  margin: 22px 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7c89a4;
}

.bk-datums, .bk-slots { display: flex; flex-wrap: wrap; gap: 8px; }

.bk-chip {
  padding: 10px 14px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid var(--line-light);
  border-radius: 0;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s;
}

.bk-chip:hover { border-color: var(--cas-navy); }

.bk-chip.is-actief {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border-color: var(--cas-navy);
}

.bk-slots-leeg, .bk-slots-noot {
  width: 100%;
  margin: 4px 0 0;
  font-size: 13.5px;
  color: #55658a;
}

.bk-slots-noot { font-family: var(--mono); font-size: 11px; }

.bk-acties { display: flex; gap: 12px; align-items: center; margin-top: 26px; }

.bk-terug {
  padding: 17px 24px;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cas-navy);
  background: transparent;
  border: 1px solid var(--cas-navy);
  border-radius: 0;
  cursor: pointer;
}

.bk-submit[disabled] { opacity: .45; cursor: not-allowed; }

.bk-klaar { padding: 26px 0 8px; }

.bk-klaar-vink {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  font-size: 20px;
  color: var(--cas-cream);
  background: var(--cas-navy);
}

.bk-klaar h2 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 400;
  color: var(--cas-navy);
}

.bk-klaar-tekst { margin: 0 0 14px; font-size: 16px; color: #35466b; }

/* --- 404 ------------------------------------------------------------------ */

.nf-hero { padding: 96px 0 120px; }

/* --------------------------------------------------------------------------
 * Foutpagina's met fysica (12-08): de statuscode valt de pagina binnen en is
 * op te pakken en weg te gooien. Wit veld, navy cijfers in de serif — de
 * tekst en de knop zweven bovenaan, de cijfers tuimelen eronderdoor.
 * -------------------------------------------------------------------------- */
.nf-fysiek {
  position: relative;
  height: calc(100svh - var(--header-h, 71px));
  min-height: 480px;
  overflow: hidden;
  background: #ffffff;
}

.nf-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  touch-action: pan-y;
  cursor: grab;
}

.nf-stage.is-grijpt { cursor: grabbing; }

.nf-cijfer {
  position: absolute;
  top: 0;
  left: 0;
  font-family: var(--serif);
  font-weight: 340;
  font-size: clamp(190px, 54vmin, 600px);
  line-height: 1;
  color: var(--cas-navy);
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
  will-change: transform;
}

/* Terugval zonder fysica (reduced motion of Matter niet geladen): dezelfde
   cijfers als stilstaande compositie op de vloer. */
.nf-stage.is-statisch {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .04em;
  padding-bottom: 9vh;
  cursor: default;
}

.nf-stage.is-statisch .nf-cijfer { position: static; }
.nf-stage.is-statisch .nf-cijfer:nth-child(1) { transform: rotate(-7deg); }
.nf-stage.is-statisch .nf-cijfer:nth-child(2) { transform: rotate(3deg) translateY(-2vh); }
.nf-stage.is-statisch .nf-cijfer:nth-child(3) { transform: rotate(9deg); }

/* Klein en rechtsboven, zoals de referentie: de cijfers zijn de pagina,
   de tekst is een bijschrift. */
.nf-boven {
  position: absolute;
  top: clamp(18px, 4.5vh, 44px);
  right: clamp(20px, 4vw, 56px);
  z-index: 2;
  text-align: right;
  pointer-events: none;
}

.nf-boven .nf-h1 { margin: 0; }
.nf-boven .nf-h1 span { display: block; font-size: 17px; line-height: 1.4; }

.nf-boven .nf-acties {
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  margin-top: 14px;
  pointer-events: auto;
}

/* bk-submit is van het boekingsformulier en rekt daar naar volle breedte;
   hier is het een compacte knop. */
.nf-boven .nf-knop { width: auto; padding: 10px 18px; font-size: 12px; }

.nf-code {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .2em;
  color: #7c89a4;
}

.nf-h1 { margin: 0 0 18px; font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.nf-h1 span { display: block; font-size: clamp(34px, 7vw, 64px); line-height: 1.08; }
.nf-h1 .ink { color: var(--cas-navy); }
.nf-h1 .mut { color: #78859f; }

.nf-lede { max-width: 46ch; margin: 0 0 30px; font-size: 16.5px; line-height: 1.6; color: #35466b; }

.nf-acties { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nf-knop { display: inline-block; text-decoration: none; }
.nf-link { font-size: 14px; color: var(--cas-blue); }

/* --------------------------------------------------------------------------
 * 13. Content-mock: de merkcontrole beweegt
 * --------------------------------------------------------------------------
 * De checks vinken één voor één aan; een afgekeurde post kleurt het oordeel
 * (en de foute check) rood. Kleuren volgen de bestaande groen/rood-taal.
 */

#voorbeelden .bc-chk { opacity: .45; transition: opacity .3s; }
#voorbeelden .bc-chk.is-aan, #voorbeelden .bc-chk.is-fout { opacity: 1; }
#voorbeelden .bc-chk.is-fout { border-color: #a03d3659; }
#voorbeelden .bc-chk.is-fout i { color: #a03d36; }
#voorbeelden .bc-chk.is-fout i::before { content: "\00d7"; }
#voorbeelden .bc-chk.is-fout i { font-size: 0; }
#voorbeelden .bc-chk.is-fout i::before { font-size: 10.5px; }

#voorbeelden .bc-verdict { transition: color .3s; }
#voorbeelden .wfm-stage.is-afgewezen .bc-verdict { color: #a03d36; }
#voorbeelden .bc-cap b, #voorbeelden .bc-cap i { transition: opacity .25s; }

/* --------------------------------------------------------------------------
 * 14. Nav altijd in beeld + mobiele ronde 2
 * --------------------------------------------------------------------------
 * 187N houdt zijn navigatie sticky — de onze scrolde weg en daarmee ook het
 * menu. Sticky op elke schermmaat; het mobiele paneel hangt eraan en vult zo
 * altijd precies de rest van het scherm.
 */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
}

@media (max-width: 900px) {
  /* Dicht menu: de drie secties gecentreerd over de vrije hoogte. */
  .nav-mobile-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Tikken voelt direct: geen dubbeltik-zoom, geen grijze tik-flits. */
  a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
}

/* Op aanraakschermen keren de gevulde knoppen niet om bij de tik-hover —
   dat leest als haperen. Ze blijven gewoon navy. */
@media (hover: none) {
  .btn-glass:hover, .pill-solid:hover, .bk-submit:hover, .tier-go:hover, .cta-btn:hover {
    color: var(--cas-cream);
    background: var(--cas-navy);
    border-color: var(--cas-navy);
  }
  .nav .nav-cta.pill-solid:hover, .nav.is-light .nav-cta.pill-solid:hover {
    color: var(--cas-cream);
    background: var(--cas-navy);
  }
}

/* --- pakketten op telefoon: kiezen in plaats van gloeien ------------------ */
@media (max-width: 900px) {
  .tier { transition: box-shadow .25s; cursor: pointer; }
  .tier.featured { box-shadow: none; }
  .tier.is-gekozen { box-shadow: inset 0 3px 0 var(--cas-navy); }
}

/* --- FAQ-kop: lucht tussen de kop en de eerste lijn ----------------------- */
@media (max-width: 620px) {
  .mc-faq .htitle { margin-bottom: 30px; }
}

/* --- footer op telefoon: gecentreerd en met marge ------------------------- */
@media (max-width: 620px) {
  .foot-top { text-align: center; }
  .foot-brand { justify-content: center; }
  .foot-top .cta-btn, .foot-top .pill-solid { margin-left: auto; margin-right: auto; }
  .foot-cols { justify-content: center; }
  .foot-col { text-align: center; }
  .foot-llm, .foot-bottom { text-align: center; }
  .foot-bottom { flex-direction: column; gap: 10px; align-items: center; }
}

/* --------------------------------------------------------------------------
 * 15. Slot-CTA-veld: licht om te tekenen
 * --------------------------------------------------------------------------
 * Het veld beslaat CTA + FAQ-staart + footer; met alle paden geanimeerd werd
 * dat op zwakkere machines een dia-voorstelling. De helft van de lijnen staat
 * stil — het oog mist niets, de GPU wel.
 */
.cta-topo.is-fp .fp-lines path:nth-child(even) { animation: none; }

/* --------------------------------------------------------------------------
 * 16. Design-ronde: signatuur-medaillon, monochrome logowall, hero-woorden
 * --------------------------------------------------------------------------
 * Het medaillon is hét eigen element van de site: de panther in een vierkant
 * kader (rechthoek-discipline), met een blauw systeem-vierkantje dat langs de
 * rand meeloopt met je scrollpositie. Het is tevens de vaste call-CTA.
 */

.medaillon {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 55;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background: #ffffff;
  border: 1px solid var(--cas-navy);
  text-decoration: none;
  transition: background-color .25s;
}

.med-mark { color: var(--cas-navy); transition: color .25s; }
.med-mark .lm-3 { color: var(--cas-blue); }


.med-label {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  padding: 9px 14px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--cas-cream);
  background: var(--cas-navy);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s, transform .22s;
}

@media (hover: hover) {
  .medaillon:hover { background: var(--cas-navy); }
  .medaillon:hover .med-mark { color: var(--cas-cream); }
  .medaillon:hover .med-label { opacity: 1; transform: translateY(-50%); }
}

.medaillon:focus-visible {
  outline: 2px solid var(--cas-blue);
  outline-offset: 3px;
}

@media (max-width: 620px) {
  .medaillon { width: 50px; height: 50px; right: 16px; bottom: 16px; }
  .med-mark { width: 26px; height: 26px; }
  .med-label { display: none; }
}

/* Het oude opduik-knopje bestaat niet meer. */
.back-to-top { display: none !important; }

/* --- logowall en koppelingen: rust in navy, merkkleur pas bij aanraking --- */
.logo-tile { position: relative; color: #55658a; cursor: pointer; transition: color .25s; }

@media (hover: hover) {
  .logo-tile:hover { color: var(--merk, #55658a); }
}

/* Klik/tik toont de merknaam in een chip ónder het icoon (binnen de tegel,
   zodat niets uit de rij klipt); de tegel pakt zolang zijn merkkleur. */
.logo-tile.is-naam { color: var(--merk, #55658a); }
.logo-tile.is-naam svg { opacity: 1; transform: translateY(-6px); }

.lw-naam {
  position: absolute;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%) translateY(4px) scale(.94);
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--cas-navy);
  color: #ffffff;
  font-size: 11px;
  letter-spacing: .02em;
  line-height: 1.5;
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  animation: lwNaamIn .18s cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes lwNaamIn {
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

.logo-row[data-naam-open="true"] .logo-track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .lw-naam { animation: none; opacity: 1; transform: translateX(-50%); }
}

.ig-card { color: #55658a; }
.ig-card svg { transition: color .25s; }

@media (hover: hover) {
  .ig-card:hover, .ig-card:hover svg { color: var(--brand, #55658a); }
}

/* --- hero-woorden: de belofte komt woord voor woord binnen ---------------- */
.hero .hero-tag { margin-top: 34px; }

.hero .hero-tag-word {
  padding: 0 20px;
  font-size: 13.5px;
  letter-spacing: .14em;
  color: #35466b;
  opacity: 0;
  transform: translateY(8px);
  animation: heroWoordIn .5s var(--ease-out) forwards;
}

.hero .hero-tag-word:nth-child(1) { animation-delay: 1.15s; }
.hero .hero-tag-word:nth-child(2) { animation-delay: 1.5s; }
.hero .hero-tag-word:nth-child(3) { animation-delay: 1.85s; }

@keyframes heroWoordIn {
  to { opacity: 1; transform: none; }
}

/* Blauw systeem-vierkantje als scheiding, in plaats van de haarlijn. */
.hero .hero-tag-word + .hero-tag-word::before {
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  background: var(--cas-blue);
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-tag-word { opacity: 1; transform: none; animation: none; }
}

/* --------------------------------------------------------------------------
 * 17. Polish-ronde
 * -------------------------------------------------------------------------- */

/* Dropdown-groepslabels dragen het systeem-vierkantje, net als de eyebrows. */
.nd-panel .nd-col-label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--cas-blue);
}

/* Probleem-kaarten: het vierkantje staat per kaart een slag anders — vier
   keer hetzelfde systeem, vier keer een andere stand. */
.prob-card .bnum::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 9px;
  background: var(--cas-blue);
  vertical-align: 2px;
}

.prob-card:nth-child(2) .bnum::after { transform: rotate(45deg); }
.prob-card:nth-child(3) .bnum::after { transform: rotate(22deg); }
.prob-card:nth-child(4) .bnum::after { transform: rotate(67deg); }

/* Fase-badges zijn labels, geen knoppen. */
.tl-when { padding: 3px 8px; font-size: 10px; letter-spacing: .05em; }

/* De pakketkaart is pas af als zijn uitnodiging er gewoon staat. */
.tier .tier-go { opacity: 1; transform: none; }

/* FAQ-kop: dezelfde lucht boven de eerste lijn als op mobiel. */
.mc-faq .htitle { margin-bottom: 30px; }

/* Contactkaart: navy nummerblokken en een haarlijn geven hem gewicht. */
.bk-card { border: 1px solid var(--line-light); }

.bk-card .sn {
  color: var(--cas-cream);
  background: var(--cas-navy);
  border: none;
  border-radius: 0;
}

/* De verbindingslijn hoort recht onder het midden van het stapvierkant.
   Het basissysteem zet hem op left:16px, maar de stap heeft hier 6px
   padding-left en het vierkant is 34px breed — midden = 6 + 17 = 23px. */
.bk-step::before { left: 23px; }

/* Het accentblauwe bolletje bij de kicker: wit met een navy rand
   (besluit Atse 12-08), zonder gloed of puls. */
.bk-eyebrow .dot {
  background: #ffffff;
  border: 1px solid var(--cas-navy);
  box-shadow: none;
  animation: none;
}

/* --- de security-strip onder de pijlers ----------------------------------- */
.sec-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
  padding: 16px 22px;
  border: 1px solid var(--line-dark);
  text-decoration: none;
  transition: border-color .25s, background-color .25s;
}

.sec-strip-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--on-dark-mut);
}

.sec-strip-items span::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin-right: 7px;
  vertical-align: 1px;
  background: var(--accent);
}

.sec-strip-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-dark);
  white-space: nowrap;
}

.sec-strip:hover { border-color: var(--accent-soft); }
.sec-strip:hover .sec-strip-link { color: var(--accent-soft); }

@media (max-width: 620px) {
  .sec-strip { flex-direction: column; align-items: flex-start; }
}

/* De actieve stap in de contactkaart is een blauw blok, de rest navy —
   zelfde blokkentaal als de rest van de nummers. */
.bk-card .bk-step.active .sn {
  color: #ffffff;
  background: var(--cas-blue);
  border-color: var(--cas-blue);
}

/* Animatielagen (sweeps, velden) mogen de pagina nooit breder maken dan het
   scherm — clip in plaats van hidden, zodat de sticky nav blijft plakken. */
html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
 * 18. Ademruimte (besluit Atse 12-08)
 * --------------------------------------------------------------------------
 * Overal waar tekst of een knop te dicht op het element erboven stond, komt
 * vaste ruimte onder het bovenliggende blok.
 */

/* Hero: de drie beloftes stonden vrijwel tegen de knoppen aan. */
.hero-promises { margin-top: 56px; }

/* Footer: de knop hing aan de slogan, en de slogan aan het merk. */
.foot-brand .fstmt { margin-top: 42px; }
.foot-brand .btn-light { margin-top: 32px; }

/* Fases: de tekst van een stap zat te dicht op het nummer, en de sectie
   erna (pakketten) begon te snel na de tijdlijn. */
#fases .tl-body { padding-top: 30px; }
#fases { padding-bottom: 40px; }
#pakketten .lt-head { padding-top: 24px; }