/* ==========================================================================
   BEWEGING — stappen die elkaar opvolgen, tellende cijfers, subtiele hover.
   Gescheiden bestand zodat de animatielaag los te lezen en los uit te zetten is.
   Alles respecteert prefers-reduced-motion: zonder toestemming staat elk
   element meteen in zijn eindstand.
   ========================================================================== */

/* --- genummerde stappen: verschijnen na elkaar --- */
.steps{position:relative}
.steps .step{position:relative;overflow:hidden}

/* verbindingslijn die meegroeit met de stappen (alleen desktop) */
@media(min-width:761px){
  .grid.steps::before{content:"";position:absolute;top:52px;left:9%;right:9%;height:2px;
    background:linear-gradient(90deg,var(--blue-300),var(--line));
    transform:scaleX(1);transform-origin:left;opacity:.6;z-index:0;
    transition:transform 1.2s cubic-bezier(.16,1,.3,1) .1s}
  .js-motion .grid.steps::before{transform:scaleX(0)}
  .js-motion .grid.steps.steps-in::before{transform:scaleX(1)}
  .grid.steps .step{z-index:1}
}

.js-motion .steps .step{opacity:0;transform:translateY(22px)}
.steps.steps-in .step{opacity:1;transform:none;
  transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.steps.steps-in .step:nth-child(1){transition-delay:.05s}
.steps.steps-in .step:nth-child(2){transition-delay:.22s}
.steps.steps-in .step:nth-child(3){transition-delay:.39s}
.steps.steps-in .step:nth-child(4){transition-delay:.56s}

/* het nummer klikt op zijn plek zodra de kaart verschijnt */
.js-motion .steps .step .num{transform:scale(.6);opacity:0}
.steps.steps-in .step .num{transform:none;opacity:1;
  transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.steps.steps-in .step:nth-child(1) .num{transition-delay:.20s}
.steps.steps-in .step:nth-child(2) .num{transition-delay:.37s}
.steps.steps-in .step:nth-child(3) .num{transition-delay:.54s}
.steps.steps-in .step:nth-child(4) .num{transition-delay:.71s}

/* de stap waar je langs scrollt komt naar voren: het nummer wordt massief,
   de kaart licht op en tilt een fractie. Geen streep aan de zijkant. */
.steps .step{transition:border-color .35s ease,box-shadow .35s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.steps .step.step-actief{border-color:var(--blue-300);box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.steps .step .num{transition:background .35s ease,color .35s ease,transform .5s cubic-bezier(.16,1,.3,1),opacity .35s ease}
.steps .step.step-actief .num{background:var(--blue);color:#fff}
.section--ink .steps .step.step-actief{border-color:rgba(143,178,245,.45);transform:translateY(-3px)}
.section--ink .steps .step.step-actief .num{background:var(--blue);color:#fff}

/* --- statband: cijfers tellen op, streepje groeit --- */
.statband .metric{font-variant-numeric:tabular-nums}
.js-motion .statband .sb .tick{transform:scaleX(0);transform-origin:left;transition:transform .6s ease .1s}
.statband.statband-in .sb .tick{transform:scaleX(1)}

/* --- kaarten: levendiger, nooit springerig --- */
.pj-img img{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.pj:hover .pj-img img{transform:scale(1.04)}
.route{position:relative;overflow:hidden}
.route::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--blue);
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.route:hover::after{transform:scaleX(1)}

/* --- rekentool: een nieuw bedrag komt kort omhoog zodat je de verandering ziet --- */
@keyframes bedragOp{from{opacity:.35;transform:translateY(6px)}to{opacity:1;transform:none}}
.sc-bedrag strong.is-nieuw{animation:bedragOp .38s cubic-bezier(.22,.61,.36,1)}

@media (prefers-reduced-motion:reduce){
  .steps .step,.steps .step .num{opacity:1!important;transform:none!important;transition:none!important}
  .grid.steps::before{transform:scaleX(1)!important;transition:none!important}
  .statband .sb .tick{transform:scaleX(1)!important;transition:none!important}
  .steps .step::after,.route::after{transition:none!important}
  .pj:hover .pj-img img{transform:none}
  .sc-bedrag strong.is-nieuw{animation:none!important}
}


/* ==========================================================================
   FEITENRIJ — vervangt de vier identieke metric-tegels. Eén feit domineert,
   de rest staat ondergeschikt op dezelfde basislijn. Cijfers in mono omdat
   dit bedragen-en-aantallen zijn: de logica van een afrekening, niet van een
   dashboard.
   ========================================================================== */
.feiten{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(28px,4vw,44px) 0}
.feiten-hoofd{display:flex;flex-direction:column;gap:.2rem}
.feiten-hoofd b{font-family:var(--ff-head);font-weight:800;font-size:clamp(3.4rem,7.4vw,5.4rem);
  line-height:.9;letter-spacing:-.045em;color:var(--ink);font-variant-numeric:tabular-nums}
.feiten-hoofd span{font-size:.98rem;color:var(--slate);max-width:22ch}
.feiten-rest{display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,44px)}
.feiten-rest div{flex:1 1 150px;min-width:0;padding-left:20px;border-left:1px solid var(--line)}
.feiten-rest b{display:block;font-family:var(--ff-head);font-weight:800;font-size:1.7rem;
  letter-spacing:-.03em;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums}
.feiten-rest span{display:block;font-size:.9rem;color:var(--slate);margin-top:.3rem;line-height:1.45}
@media(max-width:860px){
  .feiten{grid-template-columns:1fr;gap:26px}
  .feiten-rest div{flex:1 1 130px}
}
@media(max-width:520px){
  .feiten-rest{gap:18px}
  .feiten-rest div{flex:1 1 100%;padding-left:16px}
}


/* ==========================================================================
   BEELDBAND — een volle-breedte foto die de sectie ervoor bevestigt.
   De foto schuift traag mee tijdens het scrollen (parallax), zodat de band
   diepte krijgt zonder dat er iets beweegt wat gelezen moet worden.
   ========================================================================== */
.beeldband{position:relative;overflow:hidden;background:var(--ink);
  min-height:clamp(280px,42vw,460px);display:grid;align-items:end;isolation:isolate}
.beeldband img{position:absolute;inset:-8% 0 -8% 0;width:100%;height:116%;object-fit:cover;z-index:-2;
  will-change:transform}
.beeldband::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,21,38,.15) 0%,rgba(12,21,38,.30) 45%,rgba(12,21,38,.86) 100%)}
.beeldband .container{padding-top:64px;padding-bottom:clamp(30px,5vw,52px)}
.beeldband p{margin:0;color:#fff;max-width:34ch;font-size:clamp(1.15rem,2.1vw,1.6rem);
  font-family:var(--ff-head);font-weight:700;letter-spacing:-.02em;line-height:1.25;text-wrap:balance}
.beeldband .bb-bron{display:block;margin-top:.8rem;font-family:var(--ff-mono);font-size:.72rem;
  letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:500}
@media (prefers-reduced-motion:reduce){.beeldband img{transform:none!important}}