/* =====================================================================
   PACK & PARCEL — "REGISTER"
   Art direction: drukkersregister. Snijtekens, meetrail, halftoonrasters,
   uitvergrote index-cijfers. Eén motief, consequent doorgevoerd.
   ---------------------------------------------------------------------
   1. Tokens          5. Hero            9.  Proces      13. FAQ
   2. Reset/basis     6. Positionering   10. Werk        14. Slot
   3. Componenten     7. Diensten        11. Vertrouwen  15. Footer
   4. Header/nav      8. Probleem/stat   12. Mensen      16. Responsive
   ===================================================================== */

/* ============================ 1. TOKENS ============================= */
:root{
  /* kleur — logo-accent + briefing-ink */
  --accent:#e6392c;
  --accent-700:#c42c20;
  --accent-200:rgba(230,57,44,.16);

  --ink-900:#15181b;
  --ink-800:#1f2327;        /* briefing */
  --ink-700:#2a2f34;
  --ink-600:#363c42;

  --paper:#ffffff;
  --paper-2:#f4f3f0;
  --paper-3:#eceae5;

  /* tekst */
  --op-sterk:#f6f6f5;       /* op donker */
  --op-zacht:#a8aeb4;
  --in-sterk:#1f2327;       /* op licht */
  --in-zacht:#5d646b;

  /* lijnen */
  --rule:rgba(255,255,255,.17);
  --rule-licht:rgba(31,35,39,.16);

  /* typografie */
  --f-disp:"Manrope","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-body:"Helvetica Neue",Helvetica,Arial,"Segoe UI",sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;

  --t-d1:clamp(2.3rem,4.7vw,5.1rem);
  --t-d2:clamp(2.1rem,4.9vw,4.6rem);
  --t-d3:clamp(1.55rem,2.5vw,2.35rem);
  --t-h3:clamp(1.08rem,1.3vw,1.3rem);
  --t-body:clamp(1rem,.42vw + .92rem,1.14rem);
  --t-lead:clamp(1.08rem,.6vw + .96rem,1.32rem);
  --t-mono:clamp(.66rem,.3vw + .6rem,.76rem);

  /* ritme — 8px basis */
  --s1:.5rem;  --s2:1rem;   --s3:1.5rem; --s4:2rem;
  --s5:3rem;   --s6:4rem;   --s7:6rem;   --s8:8rem;
  --s9:10rem;
  --sec:clamp(4.5rem,9vw,9.5rem);     /* sectie-padding verticaal */
  --gut:clamp(1.25rem,4vw,3.5rem);    /* paginamarge */
  --max:1440px;
  --rail:clamp(56px,5vw,88px);

  /* vorm */
  --r-btn:4px;
  --r-card:6px;

  /* motion */
  --e-uit:cubic-bezier(.22,1,.36,1);
  --e-in-uit:cubic-bezier(.65,0,.35,1);
  --d-snel:.24s;
  --d-mid:.42s;
  --d-reveal:.72s;
}

/* ============================ 2. RESET ============================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ink-900);
  color:var(--op-sterk);
  font:400 var(--t-body)/1.62 var(--f-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
/* thema's richten zich op het type-attribuut, dat specifieker is dan de
   tag. Zonder deze regel krijgt elke <button type="button"> een rand van
   het thema: 2 px per knop, en dat telt in accordeons flink op. */
[type="button"],[type="submit"],[type="reset"]{border:0;border-radius:0}
input{font:inherit}
address{font-style:normal}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}
.sr{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip{
  position:absolute;left:var(--gut);top:-100px;z-index:200;
  background:var(--accent);color:#fff;padding:.75rem 1.15rem;
  border-radius:var(--r-btn);font:600 .9rem/1 var(--f-disp);
  transition:top var(--d-snel);
}
.skip:focus{top:1rem}

/* ===================== 2b. ELEMENTOR-BASIS ==========================
   Staat bewust VOOR de componenten. pp.css laadt na Elementor, dus deze
   regels winnen van de bouwer; en omdat ze hier staan, winnen de secties
   hieronder er op hun beurt weer van. Stond dit achteraan, dan wiste het
   de marges en breedtes van het ontwerp zelf uit.
   ===================================================================== */
.e-con,.e-con-inner{
  --container-default-padding-top:0;--container-default-padding-right:0;
  --container-default-padding-bottom:0;--container-default-padding-left:0;
  --padding-top:0;--padding-right:0;--padding-bottom:0;--padding-left:0;
  --gap:0px;
  /* width:auto i.p.v. 100%: een container die als flex- of grid-item
     dient moet naar zijn inhoud kunnen krimpen. Met 100% eist elk item
     de volle regel op en valt een horizontale rij uit elkaar. */
  display:block;width:auto;min-width:0;max-width:none;padding:0;margin:0;
}
.elementor-element{margin:0}

/* Native widgets laten erven wat het ontwerp bepaalt. Een Heading-widget
   rendert <h2 class="elementor-heading-title"> binnen twee wrappers, met
   eigen typografie van Elementor. Terugzetten op "erven" maakt de klasse
   op de wrapper (pos__h2, mens__h2, ...) weer bepalend. Staat bewust hier
   en niet achteraan, anders overschrijft het de componenten zelf. */
.elementor-widget-heading .elementor-heading-title{
  /* Elementor zet hier font-family, font-weight en color uit zijn eigen
     globals. Die zetten we terug op de ontwerpwaarden i.p.v. op 'inherit',
     anders verliest h1,h2,h3{font-weight:800} het van deze regel. */
  font-family:var(--f-disp);font-weight:800;letter-spacing:-.032em;
  color:inherit;font-size:inherit;line-height:inherit;
}
.elementor-widget-text-editor{color:inherit;font-size:inherit;line-height:inherit}

/* ========================= 3. COMPONENTEN =========================== */

/* -- mono-label / register-opschrift -- */
.mono{
  font:500 var(--t-mono)/1.3 var(--f-mono);
  letter-spacing:.13em;
  text-transform:uppercase;
}
.dim{color:var(--op-zacht)}
.label{
  display:flex;align-items:center;gap:.6rem;
  font:500 var(--t-mono)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--s3);
}
.label--dim{color:var(--in-zacht)}
.label__punt{
  width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px var(--accent-200);
}

/* -- snijtekens: HET motief -- */
.marks{
  position:absolute;inset:-11px;pointer-events:none;z-index:2;
  --m:14px;
  background:
    linear-gradient(var(--rule),var(--rule)) left 0 top 0/var(--m) 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) left 0 top 0/1px var(--m) no-repeat,
    linear-gradient(var(--rule),var(--rule)) right 0 top 0/var(--m) 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) right 0 top 0/1px var(--m) no-repeat,
    linear-gradient(var(--rule),var(--rule)) left 0 bottom 0/var(--m) 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) left 0 bottom 0/1px var(--m) no-repeat,
    linear-gradient(var(--rule),var(--rule)) right 0 bottom 0/var(--m) 1px no-repeat,
    linear-gradient(var(--rule),var(--rule)) right 0 bottom 0/1px var(--m) no-repeat;
}

/* -- knoppen -- */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:.7rem;
  padding:1.02rem 1.6rem;border-radius:var(--r-btn);
  font:700 .95rem/1 var(--f-disp);letter-spacing:-.005em;
  border:1px solid transparent;
  transition:background var(--d-snel) var(--e-in-uit),
             border-color var(--d-snel),color var(--d-snel),
             transform var(--d-snel) var(--e-uit);
  will-change:transform;
}
.btn--sm{padding:.72rem 1.1rem;font-size:.85rem}
.btn--lg{padding:1.2rem 1.9rem;font-size:1.02rem}
.btn--accent{background:var(--accent);color:#fff}
.btn--accent:hover{background:var(--accent-700)}
.btn--lijn{border-color:var(--rule);color:var(--op-sterk)}
.btn--lijn:hover{border-color:currentColor;background:rgba(255,255,255,.05)}
.btn:active{transform:translateY(1px)}
.pijl{width:22px;height:10px;flex:none;transition:transform var(--d-mid) var(--e-uit)}
.btn:hover .pijl,.link:hover .pijl{transform:translateX(5px)}

/* lichte secties */
.licht .btn--lijn{border-color:var(--rule-licht);color:var(--in-sterk)}
.licht .btn--lijn:hover{background:rgba(31,35,39,.05)}

/* -- tekstlink met animerende onderstreping -- */
.link{
  display:inline-flex;align-items:center;gap:.55rem;
  font:700 .95rem/1 var(--f-disp);color:var(--accent);
  padding-bottom:3px;background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--d-mid) var(--e-uit);
}
.link:hover{background-size:100% 1px}
.link--inline{color:var(--accent);font-weight:600;font-family:inherit;font-size:inherit;background-size:100% 1px}
.link--inline:hover{background-size:0% 1px}

/* -- reveal-basis (JS zet .in) -- */
[data-reveal]{
  opacity:0;transform:translateY(22px);
  transition:opacity var(--d-reveal) var(--e-uit),transform var(--d-reveal) var(--e-uit);
}
[data-reveal].in{opacity:1;transform:none}
[data-delay="1"]{transition-delay:.09s}
[data-delay="2"]{transition-delay:.17s}
[data-delay="3"]{transition-delay:.25s}

/* -- gesplitste kop: per regel onthullen via masker -- */
[data-split] .rg{display:block;overflow:hidden}
[data-split] .rg > span{
  display:block;
  transform:translateY(105%);
  opacity:.001;
  transition:transform .8s var(--e-uit),opacity .8s var(--e-uit);
}
[data-split].in .rg > span{transform:none;opacity:1}
[data-split].in .rg:nth-child(2) > span{transition-delay:.055s}
[data-split].in .rg:nth-child(3) > span{transition-delay:.11s}
[data-split].in .rg:nth-child(4) > span{transition-delay:.165s}

/* koppen */
h1,h2,h3{font-family:var(--f-disp);font-weight:800;letter-spacing:-.032em}
/* nooit op overerving leunen: een thema vult zo'n gat met zijn eigen waarde */
h3{line-height:1.62}
h1 em,h2 em{font-style:normal;color:var(--accent)}
.licht h1 em,.licht h2 em{color:var(--accent)}

/* ========================= 4. MEETRAIL ============================= */
.rail{
  position:fixed;left:calc(var(--gut) / 1.6);top:50%;transform:translateY(-50%);
  z-index:90;display:none;
  width:var(--rail);
  transition:opacity .35s var(--e-in-uit);
}
/* tijdens het horizontale werkspoor schuift de inhoud eronderdoor */
.rail.weg{opacity:0}
.rail__line{
  position:relative;width:1px;height:34vh;margin-left:10px;
  background:
    repeating-linear-gradient(var(--rule) 0 1px,transparent 1px 100%) left 0 top 0/9px 11px repeat-y,
    linear-gradient(var(--rule),var(--rule));
  background-repeat:repeat-y,no-repeat;
}
.rail__fill{
  position:absolute;left:0;top:0;width:1px;height:0%;
  background:var(--accent);
  box-shadow:0 0 0 2px var(--accent-200);
  transition:height .12s linear;
}
.rail__index{
  display:block;margin-top:1rem;
  font:700 1.02rem/1 var(--f-mono);color:var(--accent);
  letter-spacing:.06em;
}
.rail__label{
  display:block;margin-top:.4rem;max-width:var(--rail);
  overflow-wrap:anywhere;
  font:500 .62rem/1.3 var(--f-mono);letter-spacing:.11em;
  text-transform:uppercase;color:var(--op-zacht);
}

/* ========================== 5. HEADER ============================== */
.kop{
  position:fixed;inset:0 0 auto;z-index:100;
  transition:background var(--d-mid) var(--e-in-uit),
             backdrop-filter var(--d-mid),border-color var(--d-mid);
  border-bottom:1px solid transparent;
}
.kop__in{
  max-width:var(--max);margin:0 auto;
  padding:clamp(.9rem,1.6vw,1.5rem) var(--gut);
  display:flex;align-items:center;gap:var(--s3);
  transition:padding var(--d-mid) var(--e-in-uit);
}
.kop.compact{
  background:rgba(21,24,27,.9);
  backdrop-filter:blur(14px) saturate(140%);
  border-bottom-color:var(--rule);
}
.kop.compact .kop__in{padding-top:.55rem;padding-bottom:.55rem}
.kop.compact .kop__logo{height:42px}

.kop__merk{flex:none;display:block}
.kop__logo{
  width:auto;height:clamp(44px,4.1vw,56px);
  transition:height var(--d-mid) var(--e-in-uit);
}

.kop__nav{margin-left:auto}
.kop__nav ul{display:flex;gap:clamp(1rem,2.1vw,2.1rem)}
.kop__nav a{
  position:relative;display:block;padding:.4rem 0;
  font:600 .92rem/1 var(--f-disp);color:var(--op-sterk);
  transition:color var(--d-snel);
}
.kop__nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--accent);transition:width var(--d-mid) var(--e-uit);
}
.kop__nav a:hover{color:#fff}
.kop__nav a:hover::after,.kop__nav a.actief::after{width:100%}
.kop__nav a.actief{color:var(--accent)}

.kop__acties{display:flex;align-items:center;gap:var(--s2);margin-left:var(--s3)}

/* burger */
.burger{display:none;width:42px;height:42px;position:relative;border:1px solid var(--rule);border-radius:var(--r-btn)}
.burger__lijn{
  position:absolute;left:11px;width:20px;height:1.5px;background:var(--op-sterk);
  transition:transform var(--d-mid) var(--e-uit),opacity var(--d-snel);
}
.burger__lijn:nth-child(1){top:17px}
.burger__lijn:nth-child(2){top:23px}
.burger[aria-expanded="true"] .burger__lijn:nth-child(1){transform:translateY(3px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__lijn:nth-child(2){transform:translateY(-3px) rotate(-45deg)}

/* mobiel paneel */
.mob{
  position:fixed;inset:0;z-index:95;
  background:var(--ink-900);
  padding:clamp(5.5rem,16vw,7rem) var(--gut) var(--s4);
  display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;transform:translateY(-10px);pointer-events:none;
  transition:opacity var(--d-mid) var(--e-uit),transform var(--d-mid) var(--e-uit);
  overflow-y:auto;
}
.mob.open{opacity:1;transform:none;pointer-events:auto}
.mob li{
  display:flex;align-items:baseline;gap:1rem;
  border-top:1px solid var(--rule);
}
.mob li .mono{color:var(--accent);flex:none}
.mob a{
  display:block;padding:1.05rem 0;flex:1;
  font:800 clamp(1.5rem,7vw,2.1rem)/1.1 var(--f-disp);letter-spacing:-.03em;
}
.mob__voet{display:grid;gap:var(--s2);padding-top:var(--s4)}
.mob__voet .btn{justify-content:center}
.mob__tel{color:var(--op-zacht);text-align:center}

/* ============================ 6. HERO ============================== */
.hero{
  position:relative;overflow:hidden;
  padding:clamp(6.5rem,11vw,9rem) 0 clamp(3.5rem,6vw,6rem);
  background:
    radial-gradient(90% 70% at 88% 4%,rgba(230,57,44,.13),transparent 62%),
    var(--ink-900);
}
.hero__raster{
  position:absolute;inset:0;color:rgba(255,255,255,.038);
  mask-image:linear-gradient(170deg,#000 0 42%,transparent 78%);
  -webkit-mask-image:linear-gradient(170deg,#000 0 42%,transparent 78%);
  pointer-events:none;
}
.hero__plaat{
  position:absolute;right:-11vw;top:-7vw;width:44vw;height:44vw;
  max-width:600px;max-height:600px;
  border:1px solid var(--accent);opacity:.22;border-radius:var(--r-card);
  transform:rotate(-7deg);pointer-events:none;
}
.hero__in{
  position:relative;z-index:1;
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.14fr) minmax(0,.86fr);
  gap:clamp(2rem,4vw,4rem);align-items:center;
}
.hero__h1{
  font-size:var(--t-d1);line-height:.96;
  margin-bottom:var(--s3);
  max-width:16ch;
}
/* het masker mag verticaal knippen, nooit horizontaal */
[data-split] .rg{padding-bottom:.06em}
.hero__sub{
  font-size:var(--t-lead);line-height:1.52;color:var(--op-zacht);
  max-width:46ch;margin-bottom:var(--s4);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s2);margin-bottom:var(--s5)}

.trust{
  display:flex;flex-wrap:wrap;gap:clamp(1.25rem,3vw,2.5rem);
  padding-top:var(--s3);border-top:1px solid var(--rule);
}
.trust > div{display:flex;align-items:baseline;gap:.55rem}
.trust__n{
  font:800 clamp(1.45rem,2.1vw,1.95rem)/1 var(--f-disp);
  letter-spacing:-.04em;color:var(--accent);
}
.trust dd{font:500 .84rem/1.35 var(--f-body);color:var(--op-zacht);max-width:15ch}

/* -- de werkbon -- */
.hero__media{position:relative;min-width:0}
.hero__halftoon{
  position:absolute;right:-5%;bottom:-7%;width:42%;height:38%;
  color:var(--accent);opacity:.3;z-index:0;pointer-events:none;
}
.bon{
  position:relative;z-index:1;
  background:linear-gradient(168deg,var(--ink-700),var(--ink-800) 62%);
  border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(1.1rem,2vw,1.7rem);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
.bon__kop{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding-bottom:.85rem;margin-bottom:.35rem;
  border-bottom:1px solid var(--rule);
}
.bon__kop .mono{color:var(--op-zacht)}
.bon__st{
  color:var(--accent)!important;display:inline-flex;align-items:center;gap:.4rem;
}
.bon__st::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:puls 2.6s var(--e-in-uit) infinite;
}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}

.bon__rij{
  display:grid;grid-template-columns:2.6rem 1fr auto;align-items:center;
  gap:.75rem;padding:.62rem 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.bon__rij .mono{color:var(--op-zacht)}
.bon__t{font:600 .95rem/1.25 var(--f-disp);letter-spacing:-.01em}
.vink{
  width:19px;height:19px;flex:none;border-radius:50%;
  border:1px solid var(--rule);position:relative;
  transition:background var(--d-mid) var(--e-uit),border-color var(--d-mid);
}
.vink::after{
  content:"";position:absolute;left:5px;top:8px;width:7px;height:3.5px;
  border-left:1.6px solid #fff;border-bottom:1.6px solid #fff;
  transform:rotate(-45deg) scale(0);transform-origin:left bottom;
  transition:transform .3s var(--e-uit);
}
.bon__rij.af .vink{background:var(--accent);border-color:var(--accent)}
.bon__rij.af .vink::after{transform:rotate(-45deg) scale(1)}

.bon__voet{
  display:flex;align-items:center;gap:1rem;padding-top:1rem;margin-top:.5rem;
  border-top:1px solid var(--rule);
}
.bon__reg{width:30px;height:30px;flex:none;color:var(--accent);opacity:.9}
.bon__voet p{font-size:.86rem;line-height:1.45;color:var(--op-zacht)}

.hero__scroll{
  position:absolute;left:var(--gut);bottom:var(--s3);
  display:flex;align-items:center;gap:.7rem;color:var(--op-zacht);
}
.hero__scrollLijn{
  display:block;width:46px;height:1px;background:var(--rule);position:relative;overflow:hidden;
}
.hero__scrollLijn::after{
  content:"";position:absolute;inset:0;background:var(--accent);
  animation:sleep 2.4s var(--e-in-uit) infinite;
}
@keyframes sleep{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}

/* ======================= 7. POSITIONERING ========================== */
.pos{
  background:var(--paper-2);color:var(--in-sterk);
  padding:var(--sec) 0;
}
.pos,.proc,.trst,.tst,.faq{--rule:var(--rule-licht)}
.pos__in,.proc__in,.verh__in,.stat__in,.trst__in,.tst__in,.mens__in,.faq__in,.slot__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
}
.pos__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(2rem,6vw,6rem)}
.pos__vast{position:sticky;top:clamp(6rem,12vh,9rem);align-self:start}
.pos__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s3)}
.pos__tekst{
  font-size:var(--t-lead);line-height:1.56;color:var(--in-zacht);
  max-width:40ch;margin-bottom:var(--s3);
}
.pos__lijst{display:grid;gap:clamp(1.5rem,3vw,2.5rem)}
.pos__item{
  position:relative;padding:clamp(1.3rem,2.4vw,1.9rem) 0 clamp(1.3rem,2.4vw,1.9rem) clamp(3.6rem,6vw,5.4rem);
  border-top:1px solid var(--rule-licht);
}
.pos__item:last-child{border-bottom:1px solid var(--rule-licht)}
.pos__nr{
  position:absolute;left:0;top:clamp(1.3rem,2.4vw,1.9rem);
  font:700 clamp(1.5rem,2.6vw,2.1rem)/1 var(--f-mono);
  letter-spacing:0;color:transparent;
  -webkit-text-stroke:1px var(--accent);
}
.pos__item h3{font-size:var(--t-h3);margin-bottom:.5rem}
.pos__item p{color:var(--in-zacht);max-width:48ch}

/* ========================== 8. DIENSTEN ============================ */
.dnst{
  background:var(--ink-900);padding:var(--sec) 0;position:relative;
}
.dnst__hd,.werk__hd{
  max-width:var(--max);margin:0 auto var(--s5);padding:0 var(--gut);
}
.dnst__h2,.werk__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s2)}
.dnst__intro,.werk__intro{color:var(--op-zacht);max-width:44ch;font-size:var(--t-lead)}

.dnst__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  gap:clamp(2rem,4vw,4rem);align-items:start;
}
.dnst__plaat{position:sticky;top:clamp(7rem,14vh,10rem)}
.plaat{
  position:relative;aspect-ratio:4/5;overflow:hidden;
  border-radius:var(--r-card);
  background:linear-gradient(150deg,var(--accent),var(--accent-700));
  display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(1.1rem,2vw,1.6rem);
  transition:background var(--d-mid) var(--e-in-uit);
}
.plaat--alt{background:linear-gradient(150deg,var(--ink-700),var(--ink-900))}
.plaat__halftoon{
  position:absolute;inset:0;color:rgba(255,255,255,.26);mix-blend-mode:overlay;
}
.plaat__nr{
  position:relative;z-index:1;
  font:800 clamp(3.2rem,7vw,5.2rem)/1 var(--f-mono);letter-spacing:-.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.72);
  transition:opacity var(--d-snel);
}
.plaat__t{
  position:relative;z-index:1;
  font:800 clamp(1.25rem,2vw,1.7rem)/1.1 var(--f-disp);letter-spacing:-.03em;
  color:#fff;max-width:14ch;
}
.plaat__reg{
  position:absolute;right:clamp(1.1rem,2vw,1.6rem);top:clamp(1.1rem,2vw,1.6rem);
  width:34px;height:34px;color:rgba(255,255,255,.75);
  animation:draai 22s linear infinite;
}
@keyframes draai{to{transform:rotate(360deg)}}

/* index-rijen */
.idx__rij{border-top:1px solid var(--rule)}
.idx__rij:last-child{border-bottom:1px solid var(--rule)}
.idx__btn{
  width:100%;display:grid;
  grid-template-columns:3.2rem minmax(0,1fr) minmax(0,.9fr) 2rem;
  align-items:center;gap:1rem;
  padding:clamp(1.15rem,2.1vw,1.6rem) 0;text-align:left;
  transition:padding-left var(--d-mid) var(--e-uit);
}
.idx__btn:hover{padding-left:.6rem}
.idx__nr{color:var(--op-zacht);transition:color var(--d-snel)}
.idx__btn:hover .idx__nr,.idx__rij.open .idx__nr{color:var(--accent)}
.idx__t{
  font:800 clamp(1.14rem,1.9vw,1.6rem)/1.15 var(--f-disp);letter-spacing:-.03em;
}
.idx__kort{font-size:.88rem;color:var(--op-zacht);line-height:1.4}
.idx__plus{
  justify-self:end;position:relative;width:16px;height:16px;flex:none;
}
.idx__plus::before,.idx__plus::after{
  content:"";position:absolute;background:var(--op-zacht);
  transition:transform var(--d-mid) var(--e-uit),background var(--d-snel);
}
.idx__plus::before{left:0;top:7.5px;width:16px;height:1.5px}
.idx__plus::after{left:7.5px;top:0;width:1.5px;height:16px}
.idx__rij.open .idx__plus::after{transform:scaleY(0)}
.idx__rij.open .idx__plus::before{background:var(--accent)}

.idx__paneel{overflow:hidden}
.idx__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2.25rem);
  padding:0 0 clamp(1.5rem,2.6vw,2.2rem) 3.2rem;
}
.idx__grid .mono{color:var(--accent);margin-bottom:.45rem;display:block}
.idx__grid p:last-child{color:var(--op-zacht);font-size:.95rem;line-height:1.56}

.idx__rij--slot{border-top:1px solid var(--rule)}
.idx__slot{
  display:grid;grid-template-columns:3.2rem minmax(0,1fr) auto;
  gap:1rem;align-items:center;padding:clamp(1.4rem,2.6vw,2rem) 0;
}
.idx__slot .idx__nr{color:var(--accent)}
.idx__slotT{font-size:var(--t-h3);margin-bottom:.35rem}
.idx__slot p{color:var(--op-zacht);max-width:52ch;font-size:.95rem}

/* ===================== 9. PROBLEEM → OPLOSSING ===================== */
.verh{background:var(--ink-800);padding:var(--sec) 0}
.verh__in{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}
.verh__vast{position:sticky;top:clamp(6rem,12vh,8.5rem);align-self:start}
.verh__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s3)}
.verh__tekst{color:var(--op-zacht);font-size:var(--t-lead);max-width:38ch;margin-bottom:var(--s4)}

.keten{display:grid;gap:.1rem;margin-bottom:var(--s2)}
.keten__st{
  display:grid;grid-template-columns:2.5rem 1fr;gap:.8rem;align-items:center;
  padding:.52rem 0;opacity:.32;
  transition:opacity var(--d-mid) var(--e-uit),transform var(--d-mid) var(--e-uit);
}
.keten__st .mono{color:var(--op-zacht);transition:color var(--d-snel)}
.keten__st span:last-child{font:600 .99rem/1.3 var(--f-disp);letter-spacing:-.015em}
.keten__st.aan{opacity:1;transform:translateX(6px)}
.keten__st.aan .mono{color:var(--accent)}
.keten__balk{height:2px;background:var(--rule);position:relative;border-radius:2px;overflow:hidden}
.keten__balk span{
  position:absolute;inset:0 auto 0 0;width:0%;background:var(--accent);
  transition:width .2s linear;
}

.prob{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.prob__item{
  position:relative;
  background:var(--ink-700);border:1px solid var(--rule);border-radius:var(--r-card);
  padding:clamp(1.3rem,2.6vw,2.1rem);
}
.prob__k{color:var(--accent);margin-bottom:.7rem;display:block}
.prob__item h3{font-size:var(--t-h3);line-height:1.25;margin-bottom:.6rem;max-width:30ch}
.prob__item p{color:var(--op-zacht);max-width:52ch}
.prob__item strong{color:var(--op-sterk);font-weight:600}
.prob__item--uit{
  background:linear-gradient(150deg,var(--accent),var(--accent-700));
  border-color:transparent;
}
.prob__item--uit .prob__k{color:rgba(255,255,255,.82)}
.prob__item--uit p{color:rgba(255,255,255,.92)}
.prob__item--uit .btn--accent{background:#fff;color:var(--accent);margin-top:var(--s2)}
.prob__item--uit .btn--accent:hover{background:var(--ink-900);color:#fff}

/* ========================= 10. STATISTIEK ========================== */
.stat{
  background:var(--ink-900);padding:var(--sec) 0;
  border-top:1px solid var(--rule);
}
.stat__hd{max-width:var(--max);margin-bottom:var(--s5)}
.stat__h2{font-size:var(--t-d2);line-height:1.02}
.stat__lijst{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--rule);
}
.stat__item{
  padding:clamp(1.5rem,3vw,2.5rem) clamp(1rem,2vw,2rem) clamp(1.5rem,3vw,2.5rem) 0;
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
}
.stat__item:nth-child(3n){border-right:0;padding-right:0}
.stat__n{
  display:flex;align-items:flex-start;
  font:800 clamp(3rem,7.6vw,6.6rem)/.9 var(--f-disp);letter-spacing:-.055em;
}
.stat__n em{
  font-style:normal;font-size:.36em;color:var(--accent);
  margin-top:.22em;margin-left:.06em;letter-spacing:-.02em;
}
.stat__l{
  display:block;margin-top:.5rem;
  font:600 .99rem/1.3 var(--f-disp);letter-spacing:-.015em;
}
.stat__meet{
  display:block;height:3px;margin:1rem 0 .85rem;
  background:
    repeating-linear-gradient(90deg,var(--rule) 0 1px,transparent 1px 9px);
  position:relative;
}
.stat__meet i{
  position:absolute;left:0;top:0;height:3px;width:0;
  background:var(--accent);
  transition:width 1.1s var(--e-uit) .15s;
}
.stat__item.in .stat__meet i{width:var(--v)}
.stat__u{font-size:.85rem;color:var(--op-zacht);max-width:34ch}
.stat__item--vb .stat__n{color:var(--op-zacht)}
.stat__item--vb .stat__u{color:#8a9096}
.stat__noot{
  margin-top:var(--s4);padding-left:1rem;
  border-left:2px solid var(--accent);
  color:var(--op-zacht);max-width:64ch;letter-spacing:.07em;line-height:1.7;
  text-transform:none;
}

/* =========================== 11. PROCES ============================ */
.proc{background:var(--paper);color:var(--in-sterk);padding:var(--sec) 0}
.proc__in{display:grid;gap:clamp(2.5rem,5vw,4.5rem)}
.proc__hd{max-width:52ch}
.proc__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s2)}
.proc__hd p{color:var(--in-zacht);font-size:var(--t-lead)}
.tl{
  position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1.25rem,2.5vw,2.25rem);padding-top:var(--s4);
}
.tl__lijn{
  position:absolute;left:0;right:0;top:0;height:1px;background:var(--rule-licht);
}
.tl__lijn i{
  position:absolute;inset:0 auto 0 0;width:0%;background:var(--accent);
  transition:width 1.2s var(--e-uit);
}
.tl__st{position:relative;padding-top:var(--s3)}
.tl__st::before{
  content:"";position:absolute;left:0;top:-4px;width:9px;height:9px;
  border-radius:50%;background:var(--paper);border:1.5px solid var(--accent);
}
.tl__nr{
  display:block;color:var(--accent);margin-bottom:.8rem;
  font:700 1.1rem/1 var(--f-mono);letter-spacing:.04em;
}
.tl__st h3{font-size:var(--t-h3);margin-bottom:.55rem}
.tl__st p{color:var(--in-zacht);font-size:.95rem}
.tl__d{display:block;margin-top:.9rem;color:var(--in-zacht);opacity:.75}

/* ============================ 12. WERK ============================= */
.werk{background:var(--ink-900);padding:var(--sec) 0 0}
/* standaard (en mobiel, en zonder JS): veegbare rij met scroll-snap */
.werk__pin{
  position:relative;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.werk__pin::-webkit-scrollbar{display:none}
/* met JS op desktop: sectie wordt vastgezet, spoor schuift zijwaarts */
.werk__pin.pinned{overflow:visible;scroll-snap-type:none}
.werk__vast{
  position:sticky;top:0;min-height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
}
.werk__spoor{
  display:flex;gap:clamp(1rem,2vw,1.75rem);
  padding:0 var(--gut);
  will-change:transform;
}
.case{scroll-snap-align:center}
.case .marks{inset:10px}
.case{
  position:relative;flex:none;width:min(86vw,560px);
  background:var(--ink-800);border:1px solid var(--rule);
  border-radius:var(--r-card);overflow:hidden;
  display:flex;flex-direction:column;
}
.case__beeld{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  display:flex;align-items:flex-end;padding:clamp(1rem,2vw,1.5rem);
}
.case__beeld--a{background:linear-gradient(135deg,var(--accent),#8e1b12)}
.case__beeld--b{background:linear-gradient(135deg,var(--ink-600),var(--ink-900))}
.case__beeld--c{background:linear-gradient(135deg,#3a2520,var(--accent-700))}
.case__halftoon{position:absolute;inset:0;color:rgba(255,255,255,.2);mix-blend-mode:overlay}
.case__type{
  position:relative;z-index:1;color:rgba(255,255,255,.88);
}
.case__groot{
  position:absolute;right:-.04em;bottom:-.22em;z-index:0;
  font:800 clamp(4.5rem,13vw,9rem)/1 var(--f-disp);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.3);
  transition:transform .9s var(--e-uit);
}
.case:hover .case__groot{transform:translateX(-10px)}
.case__tekst{padding:clamp(1.2rem,2vw,1.7rem);flex:1;display:flex;flex-direction:column}
.case__tekst h3{font-size:clamp(1.3rem,2vw,1.8rem);margin-bottom:var(--s2)}
.case__dl{display:grid;gap:.8rem 1.6rem;margin-bottom:var(--s2)}
.case__dl dt{color:var(--accent);margin-bottom:.22rem}
.case__dl dd{color:var(--op-zacht);font-size:.9rem;line-height:1.52}
.kpi{margin-top:auto}

/* desktop: brede redactionele kaart, beeldband en twee tekstkolommen */
@media (min-width:1025px){
  .case{width:min(78vw,880px)}
  .case__beeld{aspect-ratio:3/1}
  .case__dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .case--eind{width:min(42vw,440px)}
  .werk__vast{padding:clamp(72px,9vh,98px) 0 var(--s3)}
  .werk__vast .werk__voort{margin-top:var(--s3)}
}
.kpi{
  display:flex;flex-wrap:wrap;gap:.5rem;
  padding-top:var(--s2);border-top:1px solid var(--rule);
}
.kpi li{
  display:flex;flex-direction:column;gap:.15rem;
  padding:.6rem .85rem;background:rgba(255,255,255,.045);
  border:1px solid var(--rule);border-radius:var(--r-btn);
}
.kpi strong{font:800 1.05rem/1 var(--f-disp);letter-spacing:-.03em;color:var(--accent)}
.kpi span{font:500 .67rem/1.2 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--op-zacht)}

.case--eind{
  background:linear-gradient(160deg,var(--accent),var(--accent-700));
  border-color:transparent;justify-content:center;
  padding:clamp(1.8rem,3.5vw,3rem);width:min(70vw,460px);
}
.case--eind h3{font-size:clamp(1.6rem,3vw,2.4rem);line-height:1.04;margin-bottom:var(--s2)}
.case--eind p{color:rgba(255,255,255,.9);margin-bottom:var(--s3)}
.case--eind .btn--accent{background:#fff;color:var(--accent)}
.case--eind .btn--accent:hover{background:var(--ink-900);color:#fff}

.werk__voort{
  max-width:var(--max);margin:var(--s4) auto 0;padding:0 var(--gut);
}
.werk__voort span{
  display:block;height:2px;background:var(--rule);position:relative;border-radius:2px;
}
.werk__voort span::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:var(--p,8%);
  background:var(--accent);border-radius:2px;transition:width .12s linear;
}
.werk__noot{
  max-width:var(--max);margin:var(--s3) auto 0;padding:0 var(--gut) var(--sec);
  color:var(--op-zacht);text-transform:none;letter-spacing:.07em;line-height:1.7;
}

/* ========================= 13. VERTROUWEN ========================== */
.trst{background:var(--paper-2);color:var(--in-sterk);padding:var(--sec) 0}
.trst__hd{margin-bottom:var(--s4)}
.trst__h2{font-size:var(--t-d3);line-height:1.08;max-width:24ch}
.logos{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  border:1px solid var(--rule-licht);border-radius:var(--r-card);overflow:hidden;
}
.logos__v{
  display:grid;place-items:center;min-height:clamp(74px,8vw,104px);
  padding:1rem .5rem;text-align:center;
  border-right:1px solid var(--rule-licht);
  color:var(--in-zacht);
  transition:background var(--d-snel),color var(--d-snel);
}
.logos__v:last-child{border-right:0}
.logos__v:hover{background:var(--paper);color:var(--in-sterk)}
.trst__noot{margin-top:var(--s2);color:var(--in-zacht);text-transform:none;letter-spacing:.07em}
.trst__rij{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.5rem,3vw,3rem);margin-top:var(--s5);
  padding-top:var(--s4);border-top:1px solid var(--rule-licht);
}
.trst__rij .mono{display:block;margin-bottom:.6rem;color:var(--accent)}
.trst__rij p:last-child{color:var(--in-zacht);font-size:.95rem}

/* ======================== 14. TESTIMONIALS ========================= */
.tst{background:var(--paper-3);color:var(--in-sterk);padding:var(--sec) 0}
.tst__lijst{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.75rem);
}
.tst__item{
  position:relative;background:var(--paper);border-radius:var(--r-card);
  padding:clamp(1.5rem,2.8vw,2.3rem);
  display:flex;flex-direction:column;gap:var(--s2);
  border:1px solid rgba(31,35,39,.07);
}
/* middelste kaart springt eruit: ritme i.p.v. drie identieke blokken */
.tst__item:nth-child(2){background:var(--ink-800);color:var(--op-sterk)}
.tst__item:nth-child(2) .tst__naam{color:#fff}
.tst__item:nth-child(2) .dim{color:var(--op-zacht)}
.tst__item:nth-child(2) .tst__kpi{background:var(--accent);color:#fff;border-color:transparent}
.tst__reg{width:28px;height:28px;color:var(--accent);opacity:.85}
.tst__item blockquote p{
  font:700 clamp(1.08rem,1.5vw,1.3rem)/1.44 var(--f-disp);letter-spacing:-.022em;
}
.tst__item footer{display:flex;flex-direction:column;gap:.2rem;margin-top:auto}
.tst__naam{font:600 .95rem/1.3 var(--f-disp)}
.tst__kpi{
  align-self:flex-start;padding:.42rem .72rem;border-radius:var(--r-btn);
  background:var(--paper-2);border:1px solid var(--rule-licht);
  color:var(--in-sterk);text-transform:none;letter-spacing:.08em;
}
.tst__noot{
  margin-top:var(--s4);padding-left:1rem;border-left:2px solid var(--accent);
  color:var(--in-zacht);max-width:66ch;text-transform:none;letter-spacing:.07em;line-height:1.7;
}

/* =========================== 15. MENSEN ============================ */
.mens{background:var(--ink-900);padding:var(--sec) 0;overflow:hidden}
.mens__in{
  display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);align-items:center;
}
.mens__beeld{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-card);
  background:linear-gradient(155deg,var(--ink-700),var(--ink-900) 70%);
  border:1px solid var(--rule);
  display:grid;place-items:center;overflow:hidden;
}
.mens__halftoon{position:absolute;inset:0;color:var(--accent);opacity:.2}
.mens__merk{width:46%;height:auto;opacity:.92;position:relative;z-index:1}
.mens__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:.8rem 1rem;background:rgba(21,24,27,.72);
  color:var(--op-zacht);text-transform:none;letter-spacing:.07em;line-height:1.5;
}
.mens__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s3)}
.mens__quote{
  padding-left:clamp(1rem,2vw,1.5rem);border-left:2px solid var(--accent);
  margin-bottom:var(--s4);
}
.mens__quote p{
  font:700 clamp(1.1rem,1.7vw,1.44rem)/1.45 var(--f-disp);letter-spacing:-.024em;
  margin-bottom:var(--s2);
}
.mens__quote footer{display:flex;flex-wrap:wrap;gap:.1rem .7rem;align-items:baseline}
.mens__naam{font:600 .95rem/1.3 var(--f-disp)}
.princ{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.2vw,1.75rem)}
.princ li{
  display:grid;grid-template-columns:2.2rem 1fr;gap:.75rem;
  padding-top:var(--s2);border-top:1px solid var(--rule);
}
.princ .mono{color:var(--accent)}
.princ h3{font-size:1rem;margin-bottom:.3rem}
.princ p{font-size:.9rem;color:var(--op-zacht)}

/* ============================= 16. FAQ ============================= */
.faq{background:var(--paper);color:var(--in-sterk);padding:var(--sec) 0}
.faq__in{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem)}
.faq__hd{position:sticky;top:clamp(6rem,12vh,8.5rem);align-self:start}
.faq__h2{font-size:var(--t-d3);line-height:1.06;margin-bottom:var(--s2)}
.faq__hd p{color:var(--in-zacht)}
.acc__it{border-top:1px solid var(--rule-licht)}
.acc__it:last-child{border-bottom:1px solid var(--rule-licht)}
.acc__btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  padding:clamp(1.05rem,2vw,1.35rem) 0;text-align:left;
  font:700 clamp(1rem,1.3vw,1.16rem)/1.35 var(--f-disp);letter-spacing:-.02em;
  transition:color var(--d-snel);
}
.acc__btn:hover{color:var(--accent)}
.acc__plus{position:relative;width:15px;height:15px;flex:none}
.acc__plus::before,.acc__plus::after{
  content:"";position:absolute;background:var(--in-zacht);
  transition:transform var(--d-mid) var(--e-uit),background var(--d-snel);
}
.acc__plus::before{left:0;top:7px;width:15px;height:1.5px}
.acc__plus::after{left:7px;top:0;width:1.5px;height:15px}
.acc__it.open .acc__plus::after{transform:scaleY(0)}
.acc__it.open .acc__plus::before{background:var(--accent)}
.acc__p{overflow:hidden}
.acc__p p{
  padding:0 clamp(2rem,4vw,4rem) clamp(1.1rem,2vw,1.5rem) 0;
  color:var(--in-zacht);max-width:62ch;
}

/* ============================ 17. SLOT ============================= */
.slot{
  position:relative;overflow:hidden;
  background:
    radial-gradient(80% 80% at 14% 100%,rgba(230,57,44,.18),transparent 60%),
    var(--ink-800);
  padding:clamp(5rem,11vw,10rem) 0;
  text-align:center;
}
.slot__raster{
  position:absolute;inset:0;color:rgba(255,255,255,.06);pointer-events:none;
  mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 50%,#000,transparent);
}
.slot__plaat{
  position:absolute;left:50%;top:50%;width:min(62vw,760px);aspect-ratio:1;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid var(--accent);opacity:.2;pointer-events:none;
}
.slot__in{position:relative;z-index:1;display:grid;justify-items:center}
.slot .label{justify-content:center}
.slot__h2{font-size:var(--t-d2);line-height:1.02;margin-bottom:var(--s3);max-width:22ch}
.slot__sub{color:var(--op-zacht);font-size:var(--t-lead);max-width:52ch;margin-bottom:var(--s4)}
.slot__cta{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;margin-bottom:var(--s3)}
.slot__weg{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;
  margin-bottom:var(--s6);
}
.slot__weg li{
  display:flex;align-items:center;gap:.5rem;
  font-size:.88rem;color:var(--op-zacht);
}
.slot__weg li::before{
  content:"";width:14px;height:7px;flex:none;
  border-left:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(-45deg) translateY(-2px);
}
.slot__dir{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2.5rem);width:100%;max-width:880px;
  padding-top:var(--s4);border-top:1px solid var(--rule);text-align:left;
}
.dir{display:grid;gap:.4rem;align-content:start}
.dir .mono{color:var(--op-zacht)}
.dir__w{
  font:700 clamp(1rem,1.3vw,1.16rem)/1.4 var(--f-disp);letter-spacing:-.02em;
}
a.dir:hover .dir__w{color:var(--accent)}

/* =========================== 18. FOOTER ============================ */
.voet{background:var(--ink-900);border-top:1px solid var(--rule);padding:var(--s6) 0 var(--s3)}
.voet__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:1.4fr .8fr 1fr 1.1fr 1.2fr;
  gap:clamp(1.5rem,3vw,3rem);
}
.voet__merk{display:grid;gap:var(--s2);align-content:start}
.voet__logo{width:clamp(110px,10vw,148px);height:auto}
.voet__belofte{color:var(--op-zacht);font-size:.95rem;max-width:30ch}
.voet__reg{width:40px;height:40px;color:var(--accent);opacity:.8;transition:transform 1.2s var(--e-uit)}
.voet__reg:hover{transform:rotate(90deg) scale(1.08)}
.voet__kol .mono{display:block;margin-bottom:var(--s2);color:var(--op-zacht)}
.voet__kol ul{display:grid;gap:.52rem}
.voet__kol a,.voet__kol address{font-size:.93rem;color:var(--op-zacht);line-height:1.65}
.voet__kol a{transition:color var(--d-snel)}
.voet__kol a:hover{color:#fff}
.voet__uren{margin-top:.8rem;color:var(--op-zacht);text-transform:none;letter-spacing:.08em}
.voet__soc{display:flex!important;flex-wrap:wrap;gap:.75rem;margin-top:var(--s2)}
.voet__soc a{position:relative;padding-bottom:2px}
.voet__soc a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--accent);
  transition:width var(--d-mid) var(--e-uit);
}
.voet__soc a:hover::after{width:100%}

.nieuws{display:grid;gap:.6rem;align-content:start}
.nieuws .mono{color:var(--op-zacht)}
.nieuws__rij{display:flex;border:1px solid var(--rule);border-radius:var(--r-btn);overflow:hidden}
.nieuws input{
  flex:1;min-width:0;padding:.85rem .9rem;background:transparent;border:0;
  color:var(--op-sterk);font-size:.93rem;
}
.nieuws input::placeholder{color:#6e757c}
.nieuws input:focus{outline:none;background:rgba(255,255,255,.04)}
.nieuws__btn{
  padding:0 1rem;background:var(--accent);color:#fff;display:grid;place-items:center;
  border:0;border-radius:0;     /* Hello zet [type=submit]{border:1px solid #c36} */
  transition:background var(--d-snel);
}
.nieuws__btn:hover{background:var(--accent-700)}
.nieuws__hint{font-size:.78rem;color:#767d84;line-height:1.5}
.nieuws__ok{font-size:.85rem;color:var(--accent);font-weight:600}

.voet__onder{
  max-width:var(--max);margin:var(--s5) auto 0;padding:var(--s3) var(--gut) 0;
  border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
}
.voet__onder .mono,.voet__legal a{color:var(--op-zacht)}
.voet__legal{display:flex;flex-wrap:wrap;gap:1.25rem}
.voet__legal a{
  font:500 var(--t-mono)/1.3 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  transition:color var(--d-snel);
}
.voet__legal a:hover{color:#fff}

/* ========================= 19. RESPONSIVE ========================== */

/* ≥1200px: meetrail en ruimte links */
@media (min-width:1200px){
  .rail{display:block}
  .kop__in,.pos__in,.proc__in,.verh__in,.stat__in,.trst__in,.tst__in,
  .mens__in,.faq__in,.slot__in,.dnst__in,.dnst__hd,.werk__hd,.werk__voort,
  .werk__noot,.voet__in,.voet__onder{padding-left:calc(var(--gut) + var(--rail))}
  .hero__in{padding-left:calc(var(--gut) + var(--rail))}
  .werk__spoor{padding-left:calc(var(--gut) + var(--rail))}
  .hero__scroll{left:calc(var(--gut) + var(--rail))}
}

/* ultrawide: cinematografisch, meer lucht */
@media (min-width:1700px){
  :root{--max:1560px;--t-d1:clamp(5rem,6.4vw,8rem)}
  .hero{padding-top:13rem}
}

/* ≤1100px: kolommen vallen samen */
@media (max-width:1100px){
  .dnst__in{grid-template-columns:1fr}
  .dnst__plaat{display:none}
  .idx__btn{grid-template-columns:2.6rem minmax(0,1fr) 1.6rem}
  .idx__kort{display:none}
  .idx__grid{grid-template-columns:1fr;padding-left:2.6rem;gap:1.1rem}
  .idx__slot{grid-template-columns:2.6rem 1fr}
  .idx__slot .btn{grid-column:2}
  .faq__in{grid-template-columns:1fr}
  .faq__hd{position:static}
  .voet__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .voet__merk{grid-column:1/-1}
  .nieuws{grid-column:1/-1}
}

/* ≤980px: hoofdindeling verticaal, overlappingen vereenvoudigd */
@media (max-width:980px){
  .kop__nav{display:none}
  .burger{display:block}
  .kop__acties{margin-left:auto}

  .hero__in{grid-template-columns:1fr;gap:var(--s5)}
  .hero__h1{max-width:18ch}
  .hero__plaat{width:70vw;height:70vw;right:-22vw;top:-14vw;opacity:.22}
  .hero__scroll{display:none}

  .pos__in,.verh__in,.mens__in{grid-template-columns:1fr}
  .pos__vast,.verh__vast{position:static}
  .mens__beeld{order:2;aspect-ratio:16/11}
  .mens__merk{width:34%}

  .stat__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat__item:nth-child(3n){border-right:1px solid var(--rule);padding-right:clamp(1rem,2vw,2rem)}
  .stat__item:nth-child(2n){border-right:0;padding-right:0}

  .tl{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--s4)}

  .trst__rij,.tst__lijst{grid-template-columns:1fr}
  .logos{grid-template-columns:repeat(3,minmax(0,1fr))}
  .logos__v:nth-child(3n){border-right:0}
  .logos__v:nth-child(-n+3){border-bottom:1px solid var(--rule-licht)}

  .slot__dir{grid-template-columns:1fr;gap:var(--s3)}
  .princ{grid-template-columns:1fr}
}

/* ≤720px: mobiele herindeling, geen horizontale constructies */
@media (max-width:720px){
  .case{width:min(86vw,520px)}
  .case--eind{width:min(86vw,520px)}
  .stat__lijst{grid-template-columns:1fr}
  .stat__item,.stat__item:nth-child(3n),.stat__item:nth-child(2n){
    border-right:0;padding-right:0;
  }
  .tl{grid-template-columns:1fr;padding-top:var(--s2)}
  .tl__lijn{left:4px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .tl__lijn i{inset:0 0 auto 0;width:1px;height:0%}
  .tl__st{padding-left:var(--s4);padding-top:0}
  .tl__st::before{left:0;top:6px}
  /* decoratie dempen: op klein scherm telt alleen leesbaarheid */
  .hero__raster,.slot__raster{opacity:.45}
  .hero__plaat{opacity:.12}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .logos__v:nth-child(2n){border-right:0}
  .logos__v{border-bottom:1px solid var(--rule-licht)}
  .logos__v:nth-last-child(-n+2){border-bottom:0}
  .voet__in{grid-template-columns:1fr}
  .voet__onder{flex-direction:column}
  .trust{gap:var(--s2) var(--s3)}
  .trust dd{max-width:none}
}

/* ≤400px: alles blijft bereikbaar en leesbaar */
@media (max-width:400px){
  :root{--gut:1.1rem}
  .btn{width:100%;justify-content:space-between}
  .btn--sm{width:auto}
  .kop__acties .btn{display:none}
  .hero__cta,.slot__cta{flex-direction:column;align-items:stretch}
  .idx__btn{grid-template-columns:2.2rem minmax(0,1fr) 1.2rem;gap:.6rem}
  .idx__grid{padding-left:0}
  .case{width:84vw}
}

/* ====================== 20. REDUCED MOTION ========================= */
@media (prefers-reduced-motion:reduce){
  html:focus-within{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  [data-reveal],[data-split] .rg > span{opacity:1!important;transform:none!important}
  .werk__spoor{transform:none!important}
  .stat__item .stat__meet i{width:var(--v)!important}
}

/* ========================== 21. PRINT ============================== */
@media print{
  .rail,.kop,.mob,.hero__scroll,.werk__voort{display:none!important}
  body{background:#fff;color:#000}
  .case{page-break-inside:avoid}
}

/* =====================================================================
   22. MEERDERE PAGINA'S — paginakop, teasers, gestapelde cases, contact
   Toegevoegd bij de omzetting van one-pager naar losse pagina's.
   ===================================================================== */

:root{ --kop-h:clamp(74px,8vh,98px); }

/* ----------------------------- 22.1 paginakop ----------------------- */
.pkop{
  position:relative;overflow:hidden;
  background:
    radial-gradient(78% 70% at 86% 0%,rgba(230,57,44,.13),transparent 62%),
    var(--ink-900);
  padding:calc(var(--kop-h) + clamp(2.5rem,6vw,5rem)) 0 clamp(3rem,6vw,5.5rem);
}
.pkop__raster{
  position:absolute;inset:0;color:rgba(255,255,255,.038);pointer-events:none;
  mask-image:linear-gradient(165deg,#000 0 46%,transparent 82%);
  -webkit-mask-image:linear-gradient(165deg,#000 0 46%,transparent 82%);
}
/* het uitvergrote index-cijfer: het motief, nu als paginamarkering */
.pkop__cijfer{
  position:absolute;right:2vw;bottom:-.3em;z-index:0;pointer-events:none;
  font:800 clamp(9rem,24vw,22rem)/.8 var(--f-mono);letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.08);
}
.pkop__in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.kruim{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:var(--s3);color:var(--op-zacht)}
.kruim a{transition:color var(--d-snel)}
.kruim a:hover{color:var(--accent)}
.kruim span[aria-hidden]{opacity:.45}
.kruim > span:last-child{color:var(--accent)}
.pkop__h1{font-size:var(--t-d1);line-height:.98;max-width:15ch;margin-bottom:var(--s3)}
.pkop__intro{font-size:var(--t-lead);line-height:1.52;color:var(--op-zacht);max-width:52ch}
.pkop__cta{margin-top:var(--s4)}

/* ------------- 22.2 de keten als raster (home) ----------------------
   Acht kaarten in een hairline-raster. Hover: een rode lijn loopt over
   de bovenrand en de kaart komt met een zachte schaduw naar voren. */
.flow{background:var(--ink-900);padding:var(--sec) 0;border-top:1px solid var(--rule)}
.flow__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.flow__hd{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);
  column-gap:clamp(1.5rem,4vw,4rem);row-gap:var(--s3);
  align-items:end;margin-bottom:var(--s5);
}
.flow__h2{font-size:var(--t-d2);line-height:1.02;grid-row:2;max-width:14ch}
.flow__hd .label{grid-column:1;grid-row:1;margin-bottom:0}
.flow__intro{color:var(--op-zacht);max-width:48ch;grid-column:2;grid-row:2}
.flow__hd .btn{grid-column:2;grid-row:3;justify-self:start;margin-top:var(--s2)}

/* hairline-raster: de 1px gaten tonen de achtergrond van het raster */
.flow__grid{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);
  border:1px solid var(--rule);
}
.flow__cel{position:relative;display:flex}
.flow__kaart{
  position:relative;z-index:0;flex:1;
  display:grid;grid-template-rows:auto auto 1fr auto;gap:var(--s2);
  padding:clamp(1.2rem,2.1vw,1.85rem);
  background:var(--ink-900);
  transition:background .3s var(--e-in-uit),box-shadow .4s var(--e-uit);
}
.flow__lijn{
  position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .5s var(--e-uit);
}
.flow__top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.flow__nr{color:var(--op-zacht);transition:color var(--d-snel)}
.flow__punt{
  width:11px;height:11px;flex:none;border-radius:50%;
  border:1px solid var(--rule);
  transition:background var(--d-snel),border-color var(--d-snel),box-shadow var(--d-snel);
}
.flow__woord{
  font:800 clamp(1.85rem,3.1vw,2.9rem)/1 var(--f-disp);letter-spacing:-.045em;
  margin-top:clamp(1.5rem,3.5vw,3rem);
}
.flow__tekst{color:var(--op-zacht);font-size:.93rem;line-height:1.55}
.flow__dienst{
  align-self:end;justify-self:start;
  font:600 .86rem/1.3 var(--f-disp);letter-spacing:-.012em;
  padding-bottom:3px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--d-mid) var(--e-uit),color var(--d-snel);
}

/* de hover zelf — minimaal: lijn, lichte kaart, zachte schaduw */
.flow__kaart:hover,.flow__kaart:focus-visible{
  background:var(--ink-800);
  box-shadow:0 22px 46px -22px rgba(0,0,0,.9);
  z-index:2;
}
.flow__kaart:hover .flow__lijn,.flow__kaart:focus-visible .flow__lijn{transform:scaleX(1)}
.flow__kaart:hover .flow__nr,.flow__kaart:focus-visible .flow__nr{color:var(--accent)}
.flow__kaart:hover .flow__punt,.flow__kaart:focus-visible .flow__punt{
  background:var(--accent);border-color:var(--accent);
  box-shadow:0 0 0 4px var(--accent-200);
}
.flow__kaart:hover .flow__dienst,.flow__kaart:focus-visible .flow__dienst{
  background-size:100% 1px;color:var(--accent);
}

/* --------------------------- 22.3 werk-teaser (home) ---------------- */
.wteas{background:var(--ink-800);padding:var(--sec) 0}
.wteas__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wteas__hd{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);margin-bottom:var(--s5);
}
.wteas__h2{font-size:var(--t-d2);line-height:1.02}
.wteas__lijst{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.75rem)}
.wteas__lijst a{display:grid;gap:.5rem}
.wteas__beeld{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-card);margin-bottom:var(--s2);
}
.wteas__beeld--a{background:linear-gradient(135deg,var(--accent),#8e1b12)}
.wteas__beeld--b{background:linear-gradient(135deg,var(--ink-600),var(--ink-900))}
.wteas__beeld--c{background:linear-gradient(135deg,#3a2520,var(--accent-700))}
.wteas__beeld svg{position:absolute;inset:0;color:rgba(255,255,255,.2);mix-blend-mode:overlay}
.wteas__groot{
  position:absolute;right:-.04em;bottom:-.22em;
  font:800 clamp(3rem,6vw,5rem)/1 var(--f-disp);letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1.4px rgba(255,255,255,.32);
  transition:transform .8s var(--e-uit);
}
.wteas__lijst a:hover .wteas__groot{transform:translateX(-8px)}
.wteas__t{font:800 clamp(1.08rem,1.5vw,1.32rem)/1.2 var(--f-disp);letter-spacing:-.028em}
.wteas__r{font-size:.92rem;color:var(--op-zacht);line-height:1.5}

/* ---------------------------- 22.4 cijferstrip ---------------------- */
.strip{background:var(--paper-2);color:var(--in-sterk);padding:clamp(3rem,6vw,5rem) 0;--rule:var(--rule-licht)}
.strip__in{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.strip__lijst{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2.5vw,2.5rem);
  border-top:1px solid var(--rule-licht);padding-top:var(--s3);
}
.strip__lijst li{display:grid;gap:.25rem}
.strip__n{display:flex;align-items:flex-start;font:800 clamp(2.4rem,4.4vw,3.6rem)/.92 var(--f-disp);letter-spacing:-.05em}
.strip__n em{font-style:normal;font-size:.4em;color:var(--accent);margin-top:.2em}
.strip__lijst li > span:last-child{font:600 .92rem/1.35 var(--f-disp);color:var(--in-zacht)}

/* ------------------- 22.5 gestapelde cases (werk.html) --------------
   Elk paneel plakt op top:0 en is schermvullend, dus het volgende
   paneel schuift volledig over het vorige heen: één case in beeld. */
.stapel{position:relative}
/* basis = gewoon onder elkaar; het stapelen komt pas in de query hieronder,
   zodat een kort venster nooit een afgesneden kaart oplevert */
.stapel__item{padding:0 0 var(--s4)}
.stapel__in{position:relative;width:100%}
.stapel__tel{display:block;margin-bottom:var(--s2);color:var(--op-zacht)}

/* stapelen: alleen met genoeg breedte én hoogte */
@media (min-width:981px) and (min-height:720px){
  .stapel__item{
    position:sticky;top:0;min-height:100vh;
    display:grid;place-items:center;
    background:var(--ink-900);
    border-top:1px solid var(--rule);
    padding:calc(var(--kop-h) + var(--s2)) var(--gut) var(--s3);
  }
  /* rustmoment: de case staat eerst stil in beeld, pas daarna schuift
     de volgende eroverheen */
  .stapel__item:not(:last-child){margin-bottom:45vh}
  .stapel__in{
    width:min(100%,1040px);
    transform-origin:50% 30%;will-change:transform,opacity;
  }
  /* beeldband schaalt mee met de vensterhoogte i.p.v. een vaste ratio */
  .stapel .case__beeld{aspect-ratio:auto;height:clamp(150px,24vh,330px)}
  .stapel .case__tekst{padding:clamp(1rem,1.6vw,1.5rem)}
  .stapel .case__dl{gap:.7rem 1.6rem}
}
@supports (min-height:100svh){
  @media (min-width:981px) and (min-height:720px){
    .stapel__item{min-height:100svh}
  }
}
.stapel__tel i{font-style:normal;color:var(--accent);margin:0 .3em}
.stapel .case{width:100%;flex:initial}
.stapel .case--eind{width:100%;max-width:640px;margin:0 auto;text-align:left}
.werk{padding:0}
.werk .werk__noot{padding-top:var(--s5)}

/* ----------------------------- 22.6 contact ------------------------- */
.cont{background:var(--ink-900);padding:var(--sec) 0}
.cont__in{
  max-width:var(--max);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,5vw,5rem);align-items:start;
}
.cont__h2{font-size:var(--t-d3);line-height:1.06;margin-bottom:var(--s2)}
.cont__tekst{color:var(--op-zacht);margin-bottom:var(--s4);max-width:40ch}
.cont__lijst{display:grid;gap:var(--s3);margin-bottom:var(--s4)}
.cont__lijst li{display:grid;gap:.35rem;padding-top:var(--s2);border-top:1px solid var(--rule)}
.cont__w{font:700 clamp(1rem,1.3vw,1.18rem)/1.45 var(--f-disp);letter-spacing:-.02em}
a.cont__w:hover{color:var(--accent)}
.cont__kaart{
  position:relative;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(150deg,var(--ink-700),var(--ink-900));
  border:1px solid var(--rule);display:grid;place-items:center;
}
.cont__halftoon{position:absolute;inset:0;color:var(--accent);opacity:.22}
.cont__reg{width:52px;height:52px;color:var(--accent);position:relative;z-index:1}
.cont__plaats{position:absolute;left:1rem;top:1rem;z-index:1;color:var(--op-sterk)}
.cont__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;padding:.7rem 1rem;
  background:rgba(21,24,27,.74);color:var(--op-zacht);
  text-transform:none;letter-spacing:.07em;line-height:1.5;
}

/* formulier */
.form{
  position:relative;background:var(--ink-800);border:1px solid var(--rule);
  border-radius:var(--r-card);padding:clamp(1.4rem,3vw,2.6rem);
}
.form__kop{color:var(--accent);margin-bottom:.6rem;display:block}
.form__h2{font-size:clamp(1.4rem,2.4vw,2rem);margin-bottom:.5rem}
.form__sub{color:var(--op-zacht);font-size:.92rem;margin-bottom:var(--s3)}
.form abbr{color:var(--accent);text-decoration:none}
.form__rij{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.veld{display:grid;gap:.35rem;margin-bottom:var(--s2)}
.veld label{font:600 .84rem/1.3 var(--f-disp);color:var(--op-zacht)}
.veld input,.veld select,.veld textarea{
  width:100%;padding:.8rem .9rem;border:1px solid var(--rule);border-radius:var(--r-btn);
  background:rgba(255,255,255,.035);color:var(--op-sterk);font-size:.95rem;
  transition:border-color var(--d-snel),background var(--d-snel);
}
.veld textarea{resize:vertical;min-height:120px;font-family:var(--f-body)}
.veld select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--op-zacht) 50%),linear-gradient(135deg,var(--op-zacht) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.veld input:focus,.veld select:focus,.veld textarea:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.06);
}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.veld.fout input,.veld.fout select,.veld.fout textarea{border-color:var(--accent)}
.veld .fout__m{font:500 .78rem/1.3 var(--f-body);color:var(--accent)}
.form__verzend{width:100%;justify-content:space-between;margin-top:var(--s2)}
.form__klein{font-size:.8rem;color:#767d84;margin-top:.8rem;line-height:1.5}
.form__ok{
  margin-top:var(--s2);padding:.9rem 1rem;border-radius:var(--r-btn);
  background:var(--accent);color:#fff;font-weight:600;font-size:.92rem;
}
.form__noot{
  margin-top:var(--s3);padding-top:var(--s2);border-top:1px solid var(--rule);
  color:var(--op-zacht);text-transform:none;letter-spacing:.07em;
}

/* --------------------------- 22.7 responsive ------------------------ */
@media (min-width:1200px){
  .flow__in,.wteas__in,.strip__in,.cont__in,.pkop__in{padding-left:calc(var(--gut) + var(--rail))}
  .stapel__item{padding-left:calc(var(--gut) + var(--rail))}
}
@media (max-width:1100px){
  .flow__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cont__in{grid-template-columns:1fr}
  .cont__formulier{order:-1}
}
@media (max-width:980px){
  .flow__hd{grid-template-columns:1fr;gap:var(--s2)}
  .flow__h2,.flow__intro,.flow__hd .btn{grid-column:1}
  .flow__h2{grid-row:2;max-width:none}
  .flow__intro{grid-row:3}
  .flow__hd .btn{grid-row:4}
  .wteas__lijst{grid-template-columns:1fr}
  .strip__lijst{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
  .pkop__h1{max-width:none}
  .pkop__cijfer{opacity:.6}
}
/* zonder stapeling staat de reeks als gewone sectie op de pagina */
@media (max-width:980px),(max-height:719px){
  .werk{padding:var(--sec) 0 0}
  .stapel{padding:0 var(--gut);display:grid;gap:var(--s3)}
  .stapel__in{transform:none!important;opacity:1!important}
}
@media (max-width:720px){
  .flow__grid{grid-template-columns:1fr}
  .flow__woord{margin-top:var(--s3)}
  .strip__lijst{grid-template-columns:1fr}
  .form__rij{grid-template-columns:1fr;gap:0}
}
@media (prefers-reduced-motion:reduce){
  .stapel__in{transform:none!important;opacity:1!important}
}

/* =====================================================================
   23. HERO-ENTREE VAN DE WERKBON — "in register komen"
   Drie beats: twee kleurplaten komen los binnen en vallen in register,
   de pers gaat één keer over het vel, daarna wordt de bon regel voor
   regel afgetekend. Totaal ±1,3 s.
   Volledig in CSS: start vanzelf bij het laden, geen JS, geen flits.
   `backwards` op de kaart zelf (niet `both`), zodat de parallax de
   transform daarna weer mag overnemen.
   ===================================================================== */

/* inhoud boven de plaatlagen houden */
.bon__kop,.bon__rijen,.bon__voet{position:relative;z-index:2}

/* --- beat 1: twee kleurplaten vallen in register --------------------- */
.bon__plaat{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  border-radius:var(--r-card);
  animation:plaat 1.05s var(--e-uit) .3s both;
}
.bon__plaat--a{background:rgba(230,57,44,.12);border:1px solid var(--accent);
  --dx:32px;--dy:-24px;--dr:1deg}
.bon__plaat--b{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.34);
  --dx:-27px;--dy:20px;--dr:-.8deg;animation-delay:.36s}
@keyframes plaat{
  0%  {transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:0}
  16% {opacity:1}
  42% {transform:translate(var(--dx),var(--dy)) rotate(var(--dr));opacity:1}
  82% {transform:translate(0,0) rotate(0);opacity:1}
  100%{transform:translate(0,0) rotate(0);opacity:0}
}

/* het vel zelf: omhoog, scherp worden */
.bon{animation:bonIn .9s var(--e-uit) .3s backwards}
@keyframes bonIn{
  from{opacity:0;transform:translateY(34px) scale(.975);filter:blur(10px)}
  60% {filter:blur(0)}
  to  {opacity:1;transform:none;filter:none}
}

/* --- beat 2: de pers gaat één keer over het vel ---------------------- */
.bon__pers{
  position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;
  border-radius:var(--r-card);
}
.bon__pers::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    transparent 0 43%,
    rgba(230,57,44,.34) 47%,
    rgba(255,255,255,.72) 50%,
    rgba(230,57,44,.34) 53%,
    transparent 57% 100%);
  animation:pers 1.05s cubic-bezier(.42,0,.25,1) .45s both;
}
@keyframes pers{
  0%  {transform:translateY(-100%);opacity:0}
  14% {opacity:1}
  86% {opacity:1}
  100%{transform:translateY(100%);opacity:0}
}

/* --- beat 3: de bon wordt afgetekend --------------------------------- */
@keyframes bonOp{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}

.bon__kop > .mono:first-child{animation:bonOp .5s var(--e-uit) .6s both}
.bon__st{animation:bonOp .5s var(--e-uit) 1.04s both}
/* de statuspuls begint pas als de platen in register liggen */
.bon__st::before{animation-delay:1.04s}

.bon__rij{animation:rijIn .52s var(--e-uit) both}
@keyframes rijIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}

/* het vinkje stempelt af, met een lichte overshoot */
.bon__rij .vink{animation:vinkAan .36s var(--e-uit) both}
.bon__rij .vink::after{animation:stempel .34s cubic-bezier(.34,1.56,.64,1) both}
@keyframes vinkAan{
  from{background:transparent;border-color:var(--rule)}
  to  {background:var(--accent);border-color:var(--accent)}
}
@keyframes stempel{
  from{transform:rotate(-45deg) scale(0)}
  60% {transform:rotate(-45deg) scale(1.24)}
  to  {transform:rotate(-45deg) scale(1)}
}

/* regel + vinkje lopen per rij 45 ms achter elkaar aan */
.bon__rij:nth-child(1){animation-delay:0.620s}
.bon__rij:nth-child(2){animation-delay:0.670s}
.bon__rij:nth-child(3){animation-delay:0.720s}
.bon__rij:nth-child(4){animation-delay:0.770s}
.bon__rij:nth-child(5){animation-delay:0.820s}
.bon__rij:nth-child(6){animation-delay:0.870s}
.bon__rij:nth-child(7){animation-delay:0.920s}
.bon__rij:nth-child(8){animation-delay:0.970s}
.bon__rij:nth-child(1) .vink,.bon__rij:nth-child(1) .vink::after{animation-delay:0.820s}
.bon__rij:nth-child(2) .vink,.bon__rij:nth-child(2) .vink::after{animation-delay:0.870s}
.bon__rij:nth-child(3) .vink,.bon__rij:nth-child(3) .vink::after{animation-delay:0.920s}
.bon__rij:nth-child(4) .vink,.bon__rij:nth-child(4) .vink::after{animation-delay:0.970s}
.bon__rij:nth-child(5) .vink,.bon__rij:nth-child(5) .vink::after{animation-delay:1.020s}
.bon__rij:nth-child(6) .vink,.bon__rij:nth-child(6) .vink::after{animation-delay:1.070s}
.bon__rij:nth-child(7) .vink,.bon__rij:nth-child(7) .vink::after{animation-delay:1.120s}
.bon__rij:nth-child(8) .vink,.bon__rij:nth-child(8) .vink::after{animation-delay:1.170s}

.bon__voet{animation:bonOp .6s var(--e-uit) 1.26s both}
.bon__reg{animation:regDraai .9s var(--e-uit) 1.26s both}
@keyframes regDraai{
  from{transform:rotate(-120deg) scale(.7);opacity:0}
  to  {transform:rotate(0) scale(1);opacity:.9}
}

/* --- rustige variant ------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .bon,.bon *,.bon *::before,.bon *::after{animation:none!important}
  .bon__plaat,.bon__pers{display:none!important}
  .bon,.bon__kop > .mono:first-child,.bon__rij,.bon__voet,.bon__st{
    opacity:1!important;transform:none!important;filter:none!important;
  }
  .bon__rij .vink{background:var(--accent);border-color:var(--accent)}
  .bon__rij .vink::after{transform:rotate(-45deg) scale(1)}
}

/* =====================================================================
   24. KOPREGEL-ENTREE — op elke pagina dezelfde opbouw
   De regels zijn al bij het bouwen opgedeeld, dus dit draait volledig
   in CSS en start bij het laden. Vijf beats, samen ±1,5 s:
   raster → kruimelpad → kopregels → maatlijn → intro, knop en cijfer.
   ===================================================================== */

@keyframes kopOp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* --- de kopregels zelf: per regel uit een masker omhoog --- */
.kopreg .rg{display:block;overflow:hidden;padding-bottom:.08em}
.kopreg .rg > span{
  display:block;
  animation:kopRegel .82s var(--e-uit) both;
}
@keyframes kopRegel{
  from{transform:translateY(106%)}
  to  {transform:translateY(0)}
}
.kopreg .rg:nth-child(1) > span{animation-delay:.22s}
.kopreg .rg:nth-child(2) > span{animation-delay:.30s}
.kopreg .rg:nth-child(3) > span{animation-delay:.38s}
.kopreg .rg:nth-child(4) > span{animation-delay:.46s}

/* de accentregel komt kort uit register binnen en klikt op zijn plek —
   hetzelfde gebaar als de kleurplaten van de werkbon */
.kopreg em{display:inline-block;animation:kopRegister .9s var(--e-uit) both}
.kopreg .rg:nth-child(1) em{animation-delay:.34s}
.kopreg .rg:nth-child(2) em{animation-delay:.42s}
.kopreg .rg:nth-child(3) em{animation-delay:.50s}
.kopreg .rg:nth-child(4) em{animation-delay:.58s}
@keyframes kopRegister{
  0%  {transform:translateX(16px);opacity:.45}
  48% {transform:translateX(16px);opacity:1}
  100%{transform:translateX(0);opacity:1}
}

/* --- de overige lagen van de paginakop --- */
.pkop__raster{animation:rasterIn 1.2s var(--e-uit) both}
@keyframes rasterIn{
  from{opacity:0;transform:translateY(-18px)}
  to  {opacity:1;transform:none}
}

.pkop .kruim{animation:kopOp .55s var(--e-uit) .1s both}

/* maatlijn: een korte rode streep die onder de kop uitloopt */
.pkop__maat{
  display:block;width:clamp(68px,7vw,120px);height:2px;
  background:var(--accent);margin:var(--s1) 0 var(--s3);
  transform-origin:left center;
  animation:maatUit .7s var(--e-uit) .62s both;
}
@keyframes maatUit{from{transform:scaleX(0)}to{transform:scaleX(1)}}

.pkop__intro{animation:kopOp .6s var(--e-uit) .72s both}
.pkop__cta{animation:kopOp .6s var(--e-uit) .86s both}

/* het uitvergrote index-cijfer schuift vanuit de hoek in beeld */
.pkop__cijfer{animation:cijferIn 1.2s var(--e-uit) .5s both}
@keyframes cijferIn{
  from{opacity:0;transform:translate(34px,30px) scale(1.06)}
  to  {opacity:1;transform:none}
}

/* --- rustige variant --- */
@media (prefers-reduced-motion:reduce){
  .kopreg .rg > span,.kopreg em,.pkop__raster,.pkop .kruim,
  .pkop__maat,.pkop__intro,.pkop__cta,.pkop__cijfer{
    animation:none!important;opacity:1!important;transform:none!important;
  }
  .pkop__maat{transform:scaleX(1)!important}
}

/* =====================================================================
   25. ELEMENTOR-BRUG
   Elementor zet om elke widget en container eigen divs met eigen
   padding, breedte en flex-gedrag. Die laag maken we doorzichtig, zodat
   de opmaak hierboven exact hetzelfde rekent als in het statische
   ontwerp. Alleen nodig in WordPress; in het losse bestand doet dit niets.
   ===================================================================== */
/* Op de voorkant verdwijnen de widget-wrappers uit de opmaak, zodat de
   elementen zich precies zo gedragen als in het statische ontwerp: hun
   eigen marges, breedtes en selectors blijven gelden. In de Elementor-
   editor blijven de wrappers staan, anders is een widget niet aan te
   klikken. */
body:not(.elementor-editor-active) :is(.elementor-widget-html,.elementor-widget-text-editor),
body:not(.elementor-editor-active) :is(.elementor-widget-html,.elementor-widget-text-editor) > .elementor-widget-container{
  display:contents;
}
body.elementor-page{background:var(--ink-900)}
/* .elementor img{height:auto} is specifieker dan .kop__logo en won het */
.elementor .kop__logo{width:auto;height:clamp(44px,4.1vw,56px)}
.elementor .kop.compact .kop__logo{height:42px}

/* ---------------------------------------------------------------------
   25c. Lijm voor native Elementor-widgets
   Een Heading-widget rendert de kop twee divs diep. Waar het ontwerp een
   kop aanspreekt via een afstammingsselector (.pos__item h3) raakt die de
   kop wel, maar niet de maat: die moet op de wrapper staan, zodat de kop
   hem erft. Eén regel per plek waar een native kop wordt gebruikt.
   --------------------------------------------------------------------- */
.pos__item > .elementor-widget-heading{font-size:var(--t-h3)}
/* Elementor nult de ondermarge van elke widget in een container met een
   bewust verdubbelde selector (.e-con .elementor-widget.elementor-widget).
   Deze hulpklasse geeft de ritmemarge van het ontwerp terug; zet 'pp-mb'
   op elke widget die in het statische ontwerp een ondermarge heeft. */
.e-con .elementor-widget.elementor-widget.pp-mb{margin-block-end:var(--s3)}