/* ─────────────────────────────────────────────
   TOKENS
   ───────────────────────────────────────────── */
:root{
  --graphite:#14171A;
  --graphite-2:#0F1215;
  --steel:#1B2025;
  --line:#2B3239;
  --chalk:#ECEFF0;
  --ink:#101315;
  --text:#F2F4F5;
  --mute:#8E989F;
  --mute-dark:#5E686F;

  --signal:#F0871E;
  --go:#5FBF57;
  --warn:#EFB315;
  --stop:#E24B2E;

  /* signaalband: werkplaatsmarkering, gaten zijn transparant */
  --band:repeating-linear-gradient(115deg,var(--signal) 0 8px,transparent 8px 16px);

  --display:'Archivo',system-ui,sans-serif;
  --body:'Barlow',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --pad:clamp(20px,5vw,64px);
  --sec:clamp(72px,10vw,132px);
  --max:1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--graphite);color:var(--text);font-family:var(--body);
  font-size:17px;line-height:1.6;overflow-x:hidden}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.h1,.h2,.h3,.h4{font-family:var(--display);text-transform:uppercase;line-height:.94;letter-spacing:-.005em}
.h2{font-variation-settings:'wdth' 112,'wght' 700;font-size:clamp(1.9rem,4.4vw,3.3rem)}
.h3{font-variation-settings:'wdth' 112,'wght' 700;font-size:clamp(1.25rem,2.2vw,1.6rem)}
.h4{font-variation-settings:'wdth' 112,'wght' 600;font-size:1.02rem;letter-spacing:.01em}

.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--mute);display:flex;align-items:center;gap:12px;margin-bottom:22px}
.eyebrow::before{content:"";width:40px;height:4px;background-image:var(--band);flex:none}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--mute);max-width:56ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.section{padding-block:var(--sec)}
section[id]{scroll-margin-top:112px}

.light{background:var(--chalk);color:var(--ink)}
.light .lead{color:#565F65}
.light .eyebrow{color:#6B747A}

.btn{display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 26px;border:1px solid transparent;background:var(--text);color:var(--ink);
  cursor:pointer;transition:transform .18s ease,background .18s ease,color .18s ease}
.btn:hover{transform:translateY(-2px)}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn--ghost:hover{border-color:var(--text)}
.light .btn{background:var(--ink);color:var(--chalk)}
.light .btn--ghost{background:transparent;color:var(--ink);border-color:#C2C9CD}
.light .btn--ghost:hover{border-color:var(--ink)}
.btn__arrow{display:inline-block;transition:transform .18s ease}
.btn:hover .btn__arrow{transform:translateX(4px)}

/* ─────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────── */
.hdr{position:sticky;top:0;z-index:100}
.hdr__stripe{height:4px;background-color:var(--graphite-2);background-image:var(--band)}

.hdr__util{background:var(--graphite-2);border-bottom:1px solid var(--line);height:36px;overflow:hidden;
  transition:height .32s cubic-bezier(.4,0,.2,1),opacity .22s ease,border-color .3s}
.hdr.stuck .hdr__util{height:0;opacity:0;border-bottom-color:transparent}
.hdr__util-in{display:flex;align-items:stretch;height:36px}
.util{display:flex;align-items:center;gap:9px;height:36px;padding:0 20px;white-space:nowrap;
  border-left:1px solid var(--line);font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;color:var(--mute-dark)}
.util:first-child{padding-left:0;border-left:0}
.util--right{margin-left:auto}
.util--open{color:var(--go)}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none;animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,191,87,.45)}70%{box-shadow:0 0 0 7px rgba(95,191,87,0)}100%{box-shadow:0 0 0 0 rgba(95,191,87,0)}}

.hdr__main{background:rgba(20,23,26,.84);backdrop-filter:blur(16px);
  border-bottom:1px solid transparent;transition:background .3s,border-color .3s}
.hdr.stuck .hdr__main{background:rgba(15,18,21,.97);border-bottom-color:var(--line)}
.hdr__in{display:flex;align-items:stretch;height:90px;transition:height .32s cubic-bezier(.4,0,.2,1)}
.hdr.stuck .hdr__in{height:66px}

.mark{display:flex;flex-direction:column;justify-content:center;margin-right:auto;padding-right:30px}
.mark__name{display:block;font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:1.14rem;letter-spacing:.015em;line-height:1}
.mark__rule{display:block;height:4px;background-image:var(--band);margin:7px 0 6px;
  transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.mark:hover .mark__rule{transform:scaleX(1.14)}
.mark__sub{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.19em;
  text-transform:uppercase;color:var(--mute)}

.hdr__nav{display:flex;align-items:stretch;border-left:1px solid var(--line);padding-left:8px}
.hdr__nav a{position:relative;display:flex;align-items:center;padding:0 17px;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);transition:color .2s}
.hdr__nav a::after{content:"";position:absolute;left:17px;right:17px;bottom:0;height:3px;background:var(--signal);
  transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.hdr__nav a:hover,.hdr__nav a.active{color:var(--text)}
.hdr__nav a:hover::after,.hdr__nav a.active::after{transform:scaleX(1)}

.hdr__tel{display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 24px;
  border-left:1px solid var(--line);transition:background .22s}
.hdr__tel:hover{background:rgba(255,255,255,.04)}
.hdr__tel b{font-family:var(--mono);font-size:.94rem;font-weight:500;letter-spacing:.02em;line-height:1}
.hdr__tel span{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--mute-dark)}

.hdr__cta{position:relative;display:flex;align-items:center;gap:10px;padding:0 30px;
  background:var(--text);color:var(--ink);
  font-family:var(--mono);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase}
.hdr__cta::before{content:"";position:absolute;left:100%;top:0;bottom:0;width:60vw;background:var(--text)}
.hdr__cta::after{content:"";position:absolute;left:0;right:-60vw;bottom:0;height:5px;
  background-color:var(--ink);background-image:var(--band);
  transform:scaleY(0);transform-origin:bottom;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.hdr__cta:hover::after{transform:scaleY(1)}
.hdr__cta .btn__arrow{transition:transform .2s}
.hdr__cta:hover .btn__arrow{transform:translateX(4px)}

.hdr__toggle{display:none;position:relative;width:64px;border:0;border-left:1px solid var(--line);
  background:none;cursor:pointer;flex:none}
.hdr__toggle i{position:absolute;left:22px;width:20px;height:1.5px;background:var(--text);transition:.3s cubic-bezier(.2,.7,.2,1)}
.hdr__toggle i:nth-child(1){top:calc(50% - 5px)}
.hdr__toggle i:nth-child(2){top:calc(50% + 5px);width:13px}
.hdr__toggle[aria-expanded="true"] i:nth-child(1){top:50%;transform:rotate(45deg)}
.hdr__toggle[aria-expanded="true"] i:nth-child(2){top:50%;width:20px;transform:rotate(-45deg)}

.sheet{position:fixed;inset:0;z-index:99;background:var(--graphite-2);
  display:flex;flex-direction:column;justify-content:center;padding:130px var(--pad) 40px;
  transform:translateY(-101%);transition:transform .5s cubic-bezier(.72,0,.16,1);overflow-y:auto}
.sheet.open{transform:none}
.sheet__link{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line);
  font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;text-transform:uppercase;
  font-size:clamp(1.5rem,7vw,2.1rem);line-height:1;
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s ease}
.sheet.open .sheet__link{opacity:1;transform:none}
.sheet__link em{font-family:var(--mono);font-size:.63rem;font-style:normal;letter-spacing:.14em;color:var(--mute-dark)}
.sheet__foot{margin-top:36px;display:grid;gap:14px;opacity:0;transition:opacity .4s ease .3s}
.sheet.open .sheet__foot{opacity:1}
.sheet__foot p{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;color:var(--mute-dark);line-height:1.9}
body.locked{overflow:hidden}

/* ─────────────────────────────────────────────
   HERO
   ───────────────────────────────────────────── */
.hero{background:#000;position:relative;padding-block:clamp(54px,7vw,100px)}
.hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,78px);align-items:center}

.hero__eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:26px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:#9AA4AB}
.hero__eyebrow::before{content:"";width:52px;height:5px;background-image:var(--band);flex:none}
.hero h1{font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:clamp(2.1rem,4.3vw,3.5rem);line-height:.94;letter-spacing:-.018em}
.hero h1 em{display:block;font-style:normal;color:#8E999F}
.hero__sub{margin-top:24px;max-width:52ch;color:#AEB7BD;font-size:clamp(1rem,1.4vw,1.14rem)}

.hero__points{list-style:none;margin-top:34px;display:grid;gap:12px}
.hero__points li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:baseline;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.05em;color:#9AA4AB}
.hero__points li::before{content:"✓";color:var(--signal);font-size:.86rem}

.hero__call{margin-top:38px;padding-top:26px;border-top:1px solid #1E242A;display:flex;
  align-items:center;gap:18px;flex-wrap:wrap}
.hero__call span{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#6B747A}
.hero__call a{font-family:var(--mono);font-size:1.32rem;font-weight:500;letter-spacing:.02em;
  border-bottom:2px solid #2A3138;padding-bottom:4px;transition:border-color .2s}
.hero__call a:hover{border-bottom-color:var(--signal)}

.book{position:relative;background:#0B0E10;border:1px solid #232A30;
  padding:clamp(26px,3vw,40px) clamp(24px,2.6vw,38px) clamp(28px,3vw,38px)}
.book::before{content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:5px;
  background-color:#0B0E10;background-image:var(--band)}
.book h2{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;font-size:1.4rem;letter-spacing:.01em}
.book__sub{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:#6B747A;
  margin-top:10px;padding-bottom:22px;border-bottom:1px solid #1E242A}
.book .form{margin-top:22px}
.book .field label{color:#7C868C}
.book .field input,.book .field textarea{background:#121619;border:1px solid #262D34;color:var(--text)}
.book .field input::placeholder,.book .field textarea::placeholder{color:#5A646A}
.book .field input:focus,.book .field textarea:focus{border-color:#6E7A82}
.book .field textarea{min-height:96px}
.book .btn{width:100%;justify-content:center}
.book .form__note{color:#6B747A}

.actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
@keyframes rise{to{opacity:1;transform:none}}
.hero__grid > *{opacity:0;transform:translateY(18px);animation:rise .8s cubic-bezier(.2,.7,.2,1) forwards}
.hero__grid > *:nth-child(2){animation-delay:.14s}

/* ─────────────────────────────────────────────
   STATS
   ───────────────────────────────────────────── */
.stats{background:var(--graphite-2);border-block:1px solid var(--line)}
.stats__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:38px 0 38px 28px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0;padding-left:0}
.stat b{display:block;font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1}
.stat span{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-dark);display:block;margin-top:10px}

/* ─────────────────────────────────────────────
   DIENSTEN
   ───────────────────────────────────────────── */
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;margin-bottom:clamp(38px,5vw,64px)}
.services{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.service{padding:clamp(26px,3vw,38px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .22s}
.service:hover{background:var(--steel)}
.service::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background-color:var(--steel);background-image:var(--band);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.service:hover::before{transform:scaleX(1)}
.service__no{font-family:var(--mono);font-size:.7rem;color:var(--mute-dark);letter-spacing:.14em;display:block;margin-bottom:20px}
.service h3{margin-bottom:12px}
.service p{color:var(--mute);font-size:.95rem}
.service ul{list-style:none;margin-top:18px;display:flex;flex-wrap:wrap;gap:6px}
.service li{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--mute);
  border:1px solid var(--line);padding:5px 9px}

/* ─────────────────────────────────────────────
   KLACHTENINDEX
   ───────────────────────────────────────────── */
.codes{display:flex;flex-wrap:wrap;border:1px solid #C9D0D4;border-right:0;border-bottom:0}
.code{flex:1 1 auto;min-width:150px;padding:16px 14px;background:transparent;border:0;
  border-right:1px solid #C9D0D4;border-bottom:1px solid #C9D0D4;cursor:pointer;text-align:left;
  transition:background .2s;position:relative}
.code:hover{background:#E1E5E7}
.code b{display:block;font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  font-size:.95rem;text-transform:uppercase;line-height:1.15}
.code span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:#6B747A;margin-top:7px}
.code[aria-selected="true"]{background:var(--ink);color:var(--chalk)}
.code[aria-selected="true"] span{color:#98A2A8}
.code[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:4px;
  background-color:var(--ink);background-image:var(--band)}
.codepanel{border:1px solid #C9D0D4;border-top:0;padding:clamp(26px,4vw,44px);
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(26px,4vw,54px)}
.codepanel h3{margin-bottom:14px}
.codepanel .meta{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:#6B747A;margin-bottom:18px}
.codepanel p{color:#4E575D;font-size:.98rem}
.checks{list-style:none;display:grid;gap:1px;background:#C9D0D4;border:1px solid #C9D0D4}
.checks li{background:var(--chalk);padding:15px 18px;display:grid;grid-template-columns:132px 1fr;
  gap:6px 16px;align-items:start;font-size:.94rem}
.checks li b{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#9A5400;padding-top:3px}
.codepanel .fade{animation:fade .35s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ─────────────────────────────────────────────
   DIAGNOSE
   ───────────────────────────────────────────── */
.diag{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.terminal{border:1px solid var(--line);background:var(--graphite-2)}
.terminal__bar{display:flex;align-items:center;gap:10px;padding:13px 18px;border-bottom:1px solid var(--line)}
.terminal__bar i{width:9px;height:9px;background:var(--line);border-radius:50%;display:block}
.terminal__bar span{font-family:var(--mono);font-size:.68rem;color:var(--mute-dark);letter-spacing:.1em;margin-left:6px}
.fault{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:14px 18px;
  border-bottom:1px solid rgba(43,50,57,.55);align-items:baseline}
.fault:last-child{border-bottom:0}
.fault code{font-family:var(--mono);font-size:.8rem;color:var(--signal);letter-spacing:.05em}
.fault p{font-size:.9rem;color:var(--mute)}
.fault p b{color:var(--text);font-weight:500}
.terminal__foot{padding:14px 18px;border-top:1px solid var(--line);font-family:var(--mono);
  font-size:.68rem;color:var(--mute-dark);letter-spacing:.06em}
.diag ul{list-style:none;margin-top:26px;display:grid;gap:14px}
.diag ul li{display:grid;grid-template-columns:auto 1fr;gap:14px;color:var(--mute);font-size:.98rem}
.diag ul li::before{content:"";width:38px;height:4px;background-image:var(--band);margin-top:12px}

/* ─────────────────────────────────────────────
   WERKWIJZE
   ───────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:2px solid var(--ink)}
.step{padding:32px 26px 0 0;position:relative}
.step::before{content:"";position:absolute;top:-4px;left:0;width:0;height:5px;
  background-color:var(--chalk);background-image:var(--band);transition:width .8s ease}
.step.in::before{width:100%}
.step b{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;color:#8B949A;display:block;margin-bottom:16px}
.step h4{margin-bottom:10px}
.step p{font-size:.94rem;color:#565F65}

/* ─────────────────────────────────────────────
   REVIEWS
   ───────────────────────────────────────────── */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.review{background:var(--graphite);padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;gap:20px}
.review__stars{display:flex;gap:4px}
.review__stars i{width:9px;height:9px;background:var(--signal);display:block;
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.review p{font-size:1rem;flex:1}
.review footer{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--mute-dark);
  border-top:1px solid var(--line);padding-top:16px}
.review footer b{color:var(--text);font-weight:400}

/* ─────────────────────────────────────────────
   FAQ + CONTACT
   ───────────────────────────────────────────── */
.faq{border-top:1px solid #C9D0D4}
.faq__item{border-bottom:1px solid #C9D0D4}
.faq__q{width:100%;background:none;border:0;text-align:left;padding:24px 44px 24px 0;cursor:pointer;
  position:relative;font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 600;
  text-transform:uppercase;font-size:1rem;letter-spacing:.01em}
.faq__q::after{content:"";position:absolute;right:6px;top:50%;width:13px;height:2px;background:var(--ink);transform:translateY(-50%)}
.faq__q::before{content:"";position:absolute;right:11.5px;top:50%;width:2px;height:13px;background:var(--ink);
  transform:translateY(-50%);transition:transform .25s}
.faq__item.open .faq__q::before{transform:translateY(-50%) rotate(90deg);opacity:0}
.faq__a{max-height:0;overflow:hidden;transition:max-height .32s ease}
.faq__a p{padding:0 60px 26px 0;color:#565F65;font-size:.98rem}

.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px)}
.info{display:grid;gap:1px;background:#C9D0D4;border:1px solid #C9D0D4;align-content:start}
.info__row{background:var(--chalk);padding:20px 22px}
.info__row b{display:block;font-family:var(--mono);font-size:.67rem;letter-spacing:.16em;
  text-transform:uppercase;color:#6B747A;margin-bottom:8px}
.info__row p,.info__row a{font-size:1rem}
.info__row a{border-bottom:1px solid #C9D0D4}
.info__row a:hover{border-color:var(--ink)}
.hours{display:grid;gap:5px}
.hours div{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);font-size:.78rem}
.hours div span:last-child{color:#565F65}

.form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-family:var(--mono);font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:#6B747A}
.field input,.field textarea{background:#fff;border:1px solid #C9D0D4;padding:14px 15px;font-size:.98rem;
  color:var(--ink);border-radius:0;transition:border-color .18s;width:100%}
.field input:focus,.field textarea:focus{border-color:var(--ink);outline:none}
.field textarea{resize:vertical;min-height:118px}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form__note{font-family:var(--mono);font-size:.68rem;color:#6B747A;letter-spacing:.04em;line-height:1.7}
.form__note:empty{display:none}

/* ─────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────── */
.footer{background:var(--graphite-2);border-top:1px solid var(--line);padding-block:56px 34px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line)}
.footer h5{font-family:var(--mono);font-size:.67rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--mute-dark);margin-bottom:16px}
.footer ul{list-style:none;display:grid;gap:9px}
.footer ul a{font-size:.94rem;color:var(--mute)}
.footer ul a:hover{color:var(--text)}
.footer__bottom{padding-top:26px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer__bottom p{font-family:var(--mono);font-size:.66rem;color:var(--mute-dark);letter-spacing:.04em;
  max-width:70ch;line-height:1.8}

.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* ─────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────── */
@media (max-width:1120px){
  .hdr__nav{display:none}
  .hdr__toggle{display:block}
}
@media (max-width:820px){
  .hdr__cta{display:none}
  .util--hide{display:none}
}
@media (max-width:560px){
  .hdr__tel{display:none}
  .hdr__util-in{justify-content:space-between}
  .util:first-child{display:none}
  .util--right{border-left:0;padding-right:0}
}
@media (max-width:1040px){
  .services{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .step{padding-bottom:26px}
  .reviews{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero__grid,.diag,.contact,.codepanel,.sec-head{grid-template-columns:1fr}
  .sec-head{gap:18px}
  .stats__grid{grid-template-columns:1fr 1fr}
  .stat{padding:26px 0 26px 22px}
  .stat:nth-child(3){border-left:0;padding-left:0}
  .stat:nth-child(1),.stat:nth-child(2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .checks li{grid-template-columns:1fr}
  .services{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .code{min-width:calc(50% - 1px);flex:1 1 calc(50% - 1px)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .step::before{width:100%}
}

/* ─────────────────────────────────────────────
   TOEVOEGINGEN VOOR LOSSE PAGINA'S
   ───────────────────────────────────────────── */

/* kruimelpad */
.crumbs{background:var(--graphite-2);border-bottom:1px solid var(--line)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  padding-block:14px;font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mute-dark)}
.crumbs a{color:var(--mute);transition:color .2s}
.crumbs a:hover{color:var(--text)}
.crumbs li+li::before{content:"/";margin-right:10px;color:var(--line)}
.crumbs [aria-current]{color:var(--text)}

/* paginakop */
.phead{background:#000;padding-block:clamp(48px,6vw,84px)}
.phead__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,70px);align-items:end}
.phead h1{font-family:var(--display);font-variation-settings:'wdth' 118,'wght' 800;
  text-transform:uppercase;font-size:clamp(1.9rem,4vw,3.1rem);line-height:.95;letter-spacing:-.018em}
.phead h1 em{display:block;font-style:normal;color:#8E999F}
.phead__sub{color:#AEB7BD;font-size:clamp(1rem,1.4vw,1.14rem);max-width:54ch}
.phead__meta{display:grid;gap:1px;background:#1E242A;border:1px solid #1E242A}
.phead__meta div{background:#0B0E10;padding:15px 18px;display:flex;justify-content:space-between;
  gap:16px;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em}
.phead__meta b{color:var(--mute-dark);font-weight:400}

/* lopende tekst */
.prose{max-width:70ch}
.prose > *+*{margin-top:20px}
.prose h2{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.02;
  letter-spacing:-.005em;margin-top:52px}
.prose h3{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 600;
  text-transform:uppercase;font-size:1.06rem;margin-top:34px}
.prose p{color:var(--mute)}
.prose strong{color:var(--text);font-weight:500}
.prose a{border-bottom:1px solid var(--line);transition:border-color .2s}
.prose a:hover{border-bottom-color:var(--signal)}
.prose ul,.prose ol{padding-left:0;list-style:none;display:grid;gap:11px}
.prose ul li{display:grid;grid-template-columns:auto 1fr;gap:13px;color:var(--mute)}
.prose ul li::before{content:"";width:26px;height:4px;background-image:var(--band);margin-top:11px}
.prose ol{counter-reset:n}
.prose ol li{display:grid;grid-template-columns:auto 1fr;gap:14px;color:var(--mute);counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);font-family:var(--mono);
  font-size:.74rem;color:var(--signal);padding-top:4px}
.light .prose p,.light .prose ul li,.light .prose ol li{color:#565F65}
.light .prose strong{color:var(--ink)}
.light .prose a{border-bottom-color:#C2C9CD}

/* twee kolommen: tekst + zijkolom */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(34px,5vw,72px);align-items:start}
.aside{display:grid;gap:22px;position:sticky;top:110px}
.card{border:1px solid var(--line);background:var(--graphite-2);padding:24px}
.card h3{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;font-size:1.02rem;margin-bottom:14px}
.card p{color:var(--mute);font-size:.93rem}
.card ul{list-style:none;display:grid;gap:9px;margin-top:14px}
.card ul a{font-size:.93rem;color:var(--mute);display:grid;grid-template-columns:auto 1fr;gap:10px}
.card ul a::before{content:"→";color:var(--signal);font-family:var(--mono);font-size:.8rem}
.card ul a:hover{color:var(--text)}
.card .btn{width:100%;justify-content:center;margin-top:18px}
.card--signal{border-color:#3A3026;background:#15120E}

/* prijstabel */
.tarieven{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:.95rem}
.tarieven th,.tarieven td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tarieven th{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute-dark);font-weight:400}
.tarieven td{color:var(--mute)}
.tarieven td:first-child{color:var(--text)}
.tarieven td:last-child{font-family:var(--mono);white-space:nowrap}
.tarieven tr:last-child td{border-bottom:0}
.tabelwrap{overflow-x:auto}

/* signalering */
.note{border-left:4px solid var(--signal);background:var(--graphite-2);padding:20px 22px}
.note b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal);margin-bottom:9px}
.note p{color:var(--mute);font-size:.95rem}
.note--stop{border-left-color:var(--stop)}
.note--stop b{color:var(--stop)}

/* kaartenraster voor overzichtspagina's */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tile{padding:clamp(24px,2.6vw,34px);border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  position:relative;transition:background .22s;display:flex;flex-direction:column;gap:12px}
.tile:hover{background:var(--steel)}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background-color:var(--steel);background-image:var(--band);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.tile:hover::before{transform:scaleX(1)}
.tile__no{font-family:var(--mono);font-size:.68rem;color:var(--mute-dark);letter-spacing:.14em}
.tile h3{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;font-size:1.14rem;line-height:1.05}
.tile p{color:var(--mute);font-size:.93rem;flex:1}
.tile__go{font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--signal)}
.light .grid3{border-color:#C9D0D4}
.light .tile{border-color:#C9D0D4}
.light .tile:hover{background:#E1E5E7}
.light .tile p{color:#565F65}
.light .tile__no{color:#6B747A}

/* afsluitende oproep */
.cta{background:var(--chalk);color:var(--ink);padding-block:clamp(52px,6vw,86px)}
.cta__in{display:grid;grid-template-columns:1.3fr auto;gap:34px;align-items:center}
.cta h2{font-family:var(--display);font-variation-settings:'wdth' 112,'wght' 700;
  text-transform:uppercase;font-size:clamp(1.6rem,3.2vw,2.4rem);line-height:1}
.cta p{color:#565F65;margin-top:14px;max-width:52ch}
.cta__acts{display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .aside{position:static;grid-template-columns:repeat(2,1fr);display:grid}
  .phead__grid{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .cta__in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .aside{grid-template-columns:1fr}
  .grid3{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────
   TOEVOEGINGEN SEO-VERSIE (17 sep 2026)
   ───────────────────────────────────────────── */
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--signal);color:#000;padding:10px 16px}
.skip:focus{left:12px;top:12px}
.faq__h{font:inherit;margin:0}
.codepane[hidden]{display:none}
.bronnen{margin-top:48px;border-top:1px solid var(--line);padding-top:24px}
.bronnen h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute-dark);margin:0 0 12px}
.bronnen ol{list-style:none;display:grid;gap:8px;padding:0;font-size:.9rem}
.bronnen li::before{display:none}
.bronnen a{color:var(--mute)}
.light .bronnen a{color:#565F65}
.auteur{display:grid;gap:6px;font-size:.9rem}
.auteur b{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.prose table{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:.93rem}
.prose th,.prose td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute-dark);font-weight:400}
.prose td{color:var(--mute)}
.prose .tabelwrap{overflow-x:auto}
.prose .note{margin-top:28px}
.plaatsen{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.plaatsen span{border:1px solid var(--line);padding:5px 10px;font-family:var(--mono);font-size:.7rem;color:var(--mute)}
.light .plaatsen span{border-color:#C9D0D4;color:#565F65}

html,body{overflow-x:clip}
.prose ul li,.prose ol li{display:block;position:relative;padding-left:42px}
.prose ul li::before{position:absolute;left:0;top:0}
.prose ol li::before{position:absolute;left:0;top:0}
.bronnen li{padding-left:0}
.service h3 a{color:inherit}
.service h3 a:hover{color:var(--signal)}

/* ── Hero met witte achtergrond (17 sep 2026) ── */
.hero{background:#fff;color:var(--ink)}
.hero h1{color:var(--ink)}
.hero h1 em{color:#6B747A}
.hero__eyebrow{color:#565F65}
.hero__sub{color:#3F474D}
.hero__points li{color:#3F474D}
.hero__call{border-top-color:#DDE2E5}
.hero__call span{color:#6B747A}
.hero__call a{color:var(--ink);border-bottom-color:#C2C9CD}
.book{background:#F4F6F7;border-color:#DDE2E5}
.book::before{background-color:#F4F6F7}
.book h2{color:var(--ink)}
.book__sub{color:#565F65;border-bottom-color:#DDE2E5}
.book .field label{color:#565F65}
.book .field input,.book .field textarea{background:#fff;border-color:#C9D0D4;color:var(--ink)}
.book .field input::placeholder,.book .field textarea::placeholder{color:#8E989F}
.book .field input:focus,.book .field textarea:focus{border-color:var(--ink)}
.book .btn{background:var(--ink);color:var(--chalk)}
.book .form__note{color:#565F65}

/* ── Afspraakknop in de header zwart (17 sep 2026) ── */
.hdr__cta{background:#000;color:var(--text);border-left:1px solid var(--line)}
.hdr__cta::before{background:#000}

/* ── Alle tekst in de header wit (17 sep 2026) ── */
.hdr .util,.hdr .util--open,.hdr__nav a,.hdr__tel,.hdr__tel b,.hdr__tel span,.hdr .mark__name,.hdr .mark__sub,.hdr__cta{color:#fff}
.util--open .dot{background:var(--go)}

/* ── Zachte overgangen tussen donkere en lichte secties (17 sep 2026) ── */
:root{--fade:clamp(56px,7vw,110px);--fade-s:clamp(36px,4vw,60px)}
/* licht → donker: bovenkant van de donkere sectie loopt uit het licht */
.light + .section:not(.light),
.cta + .section:not(.light){background:linear-gradient(to bottom,var(--chalk) 0,var(--graphite) var(--fade))}
/* donker → licht */
.section:not(.light) + .section.light,
.stats + .section.light{background:linear-gradient(to bottom,var(--graphite) 0,var(--chalk) var(--fade))}
.phead + .section.light{background:linear-gradient(to bottom,#000 0,var(--chalk) var(--fade))}
.section:not(.light) + .cta{background:linear-gradient(to bottom,var(--graphite) 0,var(--chalk) var(--fade-s))}
.phead + .section:not(.light){background:linear-gradient(to bottom,#000 0,var(--graphite) var(--fade))}
/* witte hero loopt onderaan uit in de donkere cijferbalk */
.hero{background:linear-gradient(to bottom,#fff 0,#fff calc(100% - var(--fade-s)),var(--graphite-2) 100%)}
.hero + .stats{border-top-color:transparent}
/* laatste lichte blok loopt uit in de footer */
main:has(> .light:last-child) + .footer,
main:has(> .cta:last-child) + .footer{border-top-color:transparent;background:linear-gradient(to bottom,var(--chalk) 0,var(--graphite-2) var(--fade-s))}