:root{
  --paper:#F3F0EA; --paper-2:#EBE7DF;
  --ink:#1A1917; --zink:#4A4F55; --krijt:#DEDAD2;
  --oxide:#F5890A;       /* logo-oranje: accent voor iconen, knoppen, stippen, marquee */
  --oxide-deep:#C0560F;  /* diepere tint: alleen waar witte tekst op een oranje vlak staat */
  --ink-60:rgba(26,25,23,.60); --ink-40:rgba(26,25,23,.40); --hair:rgba(26,25,23,.14);
  --pap-60:rgba(243,240,234,.62); --pap-30:rgba(243,240,234,.26);
  --display:"Cabinet Grotesk","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:"Azeret Mono",ui-monospace,monospace;
  --max:1800px; --gut:clamp(20px,4vw,72px);
  --kop-h:86px;   /* headerhoogte: mega menu en scroll-offset hangen hieraan */
  --goud:#E9A227; /* alleen voor beoordelingssterren, niet als accentkleur */
  --e-out:cubic-bezier(.16,1,.3,1);
  --cut:34px;
}
*,*::before,*::after{box-sizing:border-box}
/* overflow-x:clip vangt de mobiele lade op, die op translateX(100%) rechts
   buiten beeld staat en anders de scrollbreedte oprekt. clip breekt, anders
   dan hidden, geen position:sticky (de inhoudsopgave). */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E")}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}

h1,h2,h3,h4{font-family:var(--display);font-weight:800;margin:0;letter-spacing:-.03em;line-height:.94}
.d1{font-size:clamp(2.5rem,5.6vw,6rem)}
.d2{font-size:clamp(2rem,4.6vw,4.6rem)}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.03rem,1.3vw,1.3rem);line-height:1.55;color:var(--ink-60);max-width:62ch}
.mono{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--zink)}

/* ---------- HEADER ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:70;transition:background .45s var(--e-out),border-color .45s;
  border-bottom:1px solid transparent}
.top .row{display:flex;align-items:center;gap:clamp(14px,2.4vw,40px);height:var(--kop-h)}
/* Het logo heeft witte letters, dus het kan alleen op een donkere ondergrond.
   Daarom wordt de vaste header inkt in plaats van papier. */
.mark{display:flex;align-items:center;flex:0 0 auto;text-decoration:none;color:var(--paper)}
.mark img{height:46px;width:auto;display:block}
@media(max-width:767px){.mark img{height:38px}}
.hoofdnav{display:none;gap:26px;margin-left:auto;height:100%;align-items:center}
.hoofdnav > li{list-style:none;height:100%;display:flex;align-items:center}
.hoofdnav a,.hoofdnav button{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--pap-60);text-decoration:none;background:0;border:0;cursor:pointer;
  padding:0;display:inline-flex;align-items:center;gap:6px;transition:color .25s;font-family:var(--mono)}
.hoofdnav a:hover,.hoofdnav button:hover,.hoofdnav [aria-expanded="true"]{color:var(--oxide)}
.hoofdnav button i{font-size:.85rem;transition:transform .4s var(--e-out)}
.hoofdnav [aria-expanded="true"] i{transform:rotate(180deg)}
.top .tel{margin-left:auto;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.76rem;
  color:var(--paper);text-decoration:none;white-space:nowrap;transition:color .45s}
.top .tel i{color:var(--oxide);font-size:1.05rem}
.top.vast,.top.open{background:rgba(26,25,23,.93);backdrop-filter:blur(14px);
  border-bottom-color:rgba(243,240,234,.16)}
@media(min-width:1080px){.hoofdnav{display:flex}.top .tel{margin-left:0}}
/* telefoonnummer weg uit de mobiele header; in het menu staat de spoedknop */
@media(max-width:1079px){.top .tel{display:none}}

/* ---------- MEGA MENU ---------- */
.mega{position:fixed;top:var(--kop-h);left:0;right:0;z-index:65;background:var(--paper);border-bottom:1px solid var(--hair);
  opacity:0;visibility:hidden;transform:translateY(-12px);pointer-events:none;
  transition:opacity .38s var(--e-out),transform .45s var(--e-out),visibility .38s}
.mega.aan{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.mega-in{display:grid;gap:34px;padding-block:clamp(30px,3.4vw,52px)}
@media(min-width:1080px){.mega-in{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.85fr);gap:44px}}
.mega h4{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--oxide);margin-bottom:16px}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a{display:flex;align-items:baseline;gap:10px;padding:7px 10px 7px 0;text-decoration:none;color:var(--ink);
  font-size:1rem;transition:color .25s,padding-left .4s var(--e-out)}
.mega ul a:hover{color:var(--oxide);padding-left:9px}
.mega ul a b{font-weight:500}
.mega ul a em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--ink-40);letter-spacing:.08em}
.mega-promo{background:var(--ink);color:var(--paper);padding:0;display:flex;flex-direction:column;text-decoration:none;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.mega-promo img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;filter:saturate(.72)}
.mega-promo .p{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1}
.mega-promo strong{font-family:var(--display);font-weight:700;font-size:1.2rem;letter-spacing:-.02em;line-height:1.12}
.mega-promo p{margin:0;font-size:.92rem;color:var(--pap-60);line-height:1.5}
.mega-promo .lk{margin-top:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--oxide);display:flex;align-items:center;gap:7px}

/* ---------- knop ---------- */
.btn{display:inline-flex;align-items:center;gap:13px;padding:7px 7px 7px 24px;border:1px solid var(--ink);
  border-radius:999px;background:var(--paper);color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;
  cursor:pointer;transition:background .4s var(--e-out),color .4s var(--e-out),border-color .4s var(--e-out)}
.btn i{width:36px;height:36px;flex:0 0 36px;border-radius:50%;background:var(--oxide);display:grid;place-items:center;
  color:var(--paper);font-size:1.05rem;transition:transform .5s var(--e-out),background .4s var(--e-out),color .4s var(--e-out)}
.btn:hover{background:var(--oxide-deep);color:var(--paper);border-color:var(--oxide-deep)}
.btn:hover i{transform:rotate(135deg);background:var(--paper);color:var(--oxide)}
.btn--licht{background:transparent;border-color:var(--pap-30);color:var(--paper)}
.btn--licht i{background:var(--paper);color:var(--ink)}
.btn--licht:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--licht:hover i{background:var(--oxide);color:var(--paper)}

/* ---------- VIDEO HERO ---------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero .film{position:absolute;inset:-6% 0;z-index:0;will-change:transform}
.hero video{width:100%;height:100%;object-fit:cover}
.hero .sluier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,25,23,.72) 0%,rgba(26,25,23,.30) 32%,rgba(26,25,23,.55) 68%,rgba(26,25,23,.92) 100%)}
.hero .inhoud{position:relative;z-index:2;width:100%;padding-block:150px clamp(36px,5vw,64px);color:var(--paper)}
.hero h1{max-width:min(100%,1180px);margin-bottom:26px}
.hero h1 em{font-style:normal;color:var(--oxide)}
.hero .lead{color:var(--pap-60);max-width:56ch}
.hero .acties{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.hero .mono{color:var(--pap-60);margin-bottom:clamp(20px,3vw,34px)}
.hero-voet{display:flex;flex-wrap:wrap;gap:22px 40px;align-items:center;justify-content:space-between;
  margin-top:clamp(38px,5vw,66px);padding-top:22px;border-top:1px solid var(--pap-30)}
.hero-voet dl{display:flex;flex-wrap:wrap;gap:10px 38px;margin:0}
.hero-voet div{display:flex;flex-direction:column;gap:2px}
.hero-voet dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(243,240,234,.42)}
.hero-voet dd{margin:0;font-family:var(--mono);font-size:.82rem;color:var(--paper)}
/* ---------- BEOORDELINGSBALK ---------- */
.bewijs{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;margin-top:clamp(26px,3vw,38px)}
.bewijs-item{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--paper)}
.bewijs-item > .teken{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center}
.bewijs-item > .teken img{width:100%;height:100%}
.bewijs-item > .teken i{font-size:1.55rem;color:var(--oxide)}
.bewijs-tekst{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
.bewijs-top{display:flex;align-items:center;gap:10px}
.bewijs-top b{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
/* Sterren volgen het cijfer: een grijze rij met daarover een gouden rij
   die op breedte wordt afgeknipt. Zo kan de score nooit uit de pas lopen
   met wat de sterren laten zien. */
.sterren{position:relative;display:inline-flex;gap:2px;font-size:.84rem;line-height:1;
  color:rgba(243,240,234,.26)}
.sterren .vol{position:absolute;inset:0 auto 0 0;display:inline-flex;gap:2px;
  color:var(--goud);overflow:hidden;white-space:nowrap;width:0}
.bewijs-sub{font-size:.82rem;color:var(--pap-60);border-bottom:1px solid rgba(243,240,234,.32);
  padding-bottom:2px;transition:color .3s,border-color .3s}
.bewijs-item:hover .bewijs-sub{color:var(--paper);border-color:var(--oxide)}

.scroll-cue{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:.63rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--pap-60);text-decoration:none}
.scroll-cue i{font-size:1.1rem;color:var(--oxide);animation:bob 2.2s var(--e-out) infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

section{padding-block:clamp(64px,8vw,130px)}
.sec-kop{display:flex;flex-wrap:wrap;gap:18px;align-items:baseline;justify-content:space-between;
  border-top:1px solid var(--ink);padding-top:20px;margin-bottom:clamp(32px,4.5vw,60px)}

/* ---------- LOPENDE BAND ---------- */
.band{background:var(--ink);color:var(--paper);overflow:hidden;padding-block:clamp(14px,1.6vw,22px)}
.band-spoor{display:flex;width:max-content;animation:bandloop 42s linear infinite}
.band-spoor span{display:inline-flex;align-items:center;gap:clamp(18px,2.4vw,34px);white-space:nowrap;
  font-family:var(--display);font-weight:700;letter-spacing:-.022em;
  font-size:clamp(1.05rem,2vw,1.9rem);padding-inline:clamp(9px,1.2vw,17px)}
.band-spoor i{color:var(--oxide);font-size:.52em}
@keyframes bandloop{to{transform:translateX(-50%)}}
.band:hover .band-spoor{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.band-spoor{animation:none}}

/* ---------- DIENSTEN: fototegels ---------- */
.diensten-grid{position:relative;display:grid;gap:clamp(9px,1.1vw,17px);grid-template-columns:repeat(2,minmax(0,1fr))}
/* WebGL-doek ligt onder de tegels; de tegels houden hun verloop en tekst erboven */
.wgl-doek{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.wgl .dienst{background:transparent}
.wgl .dienst img{opacity:0}
@media(min-width:780px){.diensten-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1180px){.diensten-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.dienst{position:relative;z-index:2;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--zink);
  color:var(--paper);text-decoration:none;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
/* 12% overmaat in de hoogte zodat de parallax nooit een kier onder of boven trekt */
.dienst img{position:absolute;left:0;right:0;top:-6%;width:100%;height:112%;object-fit:cover;
  filter:saturate(.78) contrast(1.03);transition:transform 1.1s var(--e-out)}
.dienst:hover img{transform:scale(1.06)}
.dienst::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,25,23,.10) 32%,rgba(26,25,23,.86))}
.dienst .tekst{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:clamp(15px,1.5vw,22px);display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.dienst .titel{font-family:var(--display);font-weight:700;line-height:1.1;letter-spacing:-.022em;
  font-size:clamp(.98rem,1.2vw,1.28rem);max-width:10ch}
.dienst .pijl{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(243,240,234,.16);border:1px solid rgba(243,240,234,.24);font-size:.95rem;
  transition:background .4s var(--e-out),transform .55s var(--e-out),border-color .4s}
.dienst:hover .pijl{background:var(--oxide);border-color:var(--oxide);transform:rotate(45deg)}
.diensten-slot{display:flex;flex-wrap:wrap;gap:16px 26px;align-items:center;justify-content:space-between;
  margin-top:clamp(26px,3vw,44px);padding-top:22px;border-top:1px solid var(--hair)}
.diensten-slot p{margin:0;color:var(--ink-60);font-size:.98rem;max-width:52ch}

/* ---------- PROJECTEN: carrousel ---------- */
.sec-kop .kop-link{font-family:var(--body);font-weight:600;font-size:.95rem;color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--oxide);padding-bottom:3px;transition:color .3s}
.sec-kop .kop-link:hover{color:var(--oxide)}
.spoor{display:flex;gap:clamp(12px,1.4vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.spoor::-webkit-scrollbar{display:none}
.pkaart{position:relative;flex:0 0 84%;scroll-snap-align:start;aspect-ratio:4/3;overflow:hidden;
  background:var(--zink);color:var(--paper);text-decoration:none;display:block;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
@media(min-width:700px){.pkaart{flex-basis:calc((100% - 22px)/2)}}
@media(min-width:1100px){.pkaart{flex-basis:calc((100% - 44px)/3)}}
.pkaart img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.8) contrast(1.03);transition:transform 1.1s var(--e-out)}
.pkaart:hover img{transform:scale(1.05)}
.pkaart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(26,25,23,.42) 0 18%,rgba(26,25,23,.06) 42%,rgba(26,25,23,.88))}
.pkaart .labels{position:absolute;top:16px;left:18px;z-index:3;display:flex;flex-wrap:wrap;gap:7px}
.pkaart .labels span{background:rgba(26,25,23,.62);backdrop-filter:blur(7px);border:1px solid rgba(243,240,234,.2);
  padding:5px 12px;border-radius:999px;font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--paper)}
.pkaart .pvoet{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(16px,1.6vw,24px);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px}
.pkaart .ptitel{font-family:var(--display);font-weight:700;font-size:clamp(1.08rem,1.4vw,1.45rem);
  letter-spacing:-.022em;line-height:1.12;display:block;margin-bottom:5px}
.pkaart .pplaats{display:flex;align-items:center;gap:6px;font-size:.88rem;color:var(--pap-60)}
.pkaart .pplaats i{color:var(--oxide);font-size:.95rem}
.pkaart .ppijl{width:40px;height:40px;flex:0 0 40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(243,240,234,.16);border:1px solid rgba(243,240,234,.24);font-size:1rem;
  transition:background .4s var(--e-out),transform .55s var(--e-out),border-color .4s}
.pkaart:hover .ppijl{background:var(--oxide);border-color:var(--oxide);transform:rotate(45deg)}
.stuur{display:flex;align-items:center;gap:24px;margin-top:clamp(22px,2.6vw,36px)}
.stuur .baan{flex:1;height:2px;background:var(--hair);position:relative;overflow:hidden}
.stuur .duim{position:absolute;top:0;bottom:0;left:0;background:var(--oxide);transition:transform .3s var(--e-out)}
.stuur .knoppen{display:flex;gap:9px}
.stuur button{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair);background:transparent;
  color:var(--ink);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;
  transition:background .35s,color .35s,border-color .35s}
.stuur button:hover:not(:disabled){background:var(--oxide);border-color:var(--oxide);color:var(--paper)}
.stuur button:disabled{opacity:.32;cursor:default}

/* Watermerk: de twee haakse pijlpunten uit het logo, diagonaal verschoven.
   Loopt bewust de hoek uit en wordt door de overflow van .oo afgesneden. */
/* Selector met .oo-tekst ervoor, anders wint `.oo-tekst > *` (gelijke
   specificiteit, later in het bestand) en valt het merk terug in de flow. */
.oo-tekst > .oo-merk{position:absolute;right:-8%;bottom:-18%;width:min(48%,340px);height:auto;z-index:0;
  fill:none;stroke:var(--paper);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;
  opacity:.08;pointer-events:none;z-index:0}
/* ---------- OVER ONS: diagonale splitsing ---------- */
.oo{position:relative;background:var(--ink);color:var(--paper);display:grid;overflow:hidden}
.oo-beeld{margin:0;position:relative;min-height:280px}
.oo-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8) contrast(1.03)}
.oo-tekst{position:relative;padding:clamp(28px,3.4vw,58px);display:flex;flex-direction:column;gap:clamp(18px,2vw,26px)}
.oo-tekst > *{position:relative;z-index:1}
.oo-tekst h2{font-size:clamp(1.6rem,2.7vw,2.9rem);letter-spacing:-.028em;line-height:1.04;max-width:20ch}
.oo-tekst > p{margin:0;color:var(--pap-60);font-size:1rem;line-height:1.6;max-width:52ch}
.pijlers{display:grid;gap:22px 30px}
@media(min-width:560px){.pijlers{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pijler{display:grid;grid-template-columns:auto 1fr;gap:15px;align-items:start;padding-top:14px;border-top:1px solid var(--stroke,#c8cbd2)}
.pijler-n{font-family:var(--mono,monospace);font-size:.82rem;font-weight:500;color:var(--oxide);letter-spacing:.04em;padding-top:4px}
.pijler b{display:block;font-family:var(--display);font-weight:700;font-size:1.04rem;letter-spacing:-.02em;margin-bottom:3px}
.pijler span{font-size:.9rem;color:var(--pap-60);line-height:1.45}
.oo-tekst .btn{align-self:flex-start}
@media(min-width:1000px){
  .oo{grid-template-columns:1.12fr 1fr}
  /* de foto loopt met een schuine snede het donkere vlak in */
  .oo-beeld{clip-path:polygon(0 0,100% 0,calc(100% - 150px) 100%,0 100%)}
}

/* ---------- WERKRIJEN: afwisselend beeld en tekst ---------- */
.werkrijen{position:relative;overflow:hidden}
.blauwdruk{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  color:var(--ink);opacity:.04}
.wrij{position:relative;z-index:2;display:grid;gap:clamp(26px,3.4vw,60px);align-items:center;
  margin-top:clamp(40px,5vw,86px)}
@media(min-width:900px){
  .wrij{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(40px,5vw,90px)}
  .wrij.gedraaid .wbeeld{order:2}
}
.wbeeld{position:relative;margin:0 0 0 18px}
/* het verschoven accentvlak achter de foto */
.wbeeld::before{content:"";position:absolute;left:-18px;top:-18px;width:62%;height:34%;
  background:var(--oxide);z-index:0}
.wrij.gedraaid .wbeeld::before{left:auto;right:-18px}
/* height:auto is nodig: de width/height-attributen op de img geven een
   presentatie-hint mee, en zonder dit wint die hint van aspect-ratio. */
.wbeeld img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  filter:saturate(.82) contrast(1.03);display:block}
.wtekst h3,.wtekst h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.75rem,3vw,2.9rem);max-width:20ch;margin-bottom:26px;color:var(--ink)}
.wtekst p{color:var(--ink-60);max-width:54ch}
.wtekst p + p{margin-top:1.1em}

/* ---------- KEURMERKEN ----------
   Logo's zijn full colour en horen op wit, dus een lichte plaat eronder.
   Ontbreekt een bestand, dan haalt de onerror de hele plaat weg zodat er
   nooit een kapot-afbeeldingsicoon op de site van een klant staat. */
.keurmerken{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.keurmerk{background:var(--paper);height:56px;padding:9px 15px;display:grid;place-items:center;flex:0 0 auto}
.keurmerk img{height:100%;width:auto;max-width:150px;object-fit:contain;display:block}
.keurmerk-nr{font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;
  color:rgba(243,240,234,.45);align-self:center}

/* ---------- SIGNALEN ---------- */
.signalen{border-top:1px solid var(--ink);display:grid}
@media(min-width:820px){.signalen{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(30px,4vw,72px)}}
.signalen div{display:grid;gap:7px;padding:20px 0;border-bottom:1px solid var(--hair)}
.signalen h3{font-family:var(--display);font-weight:700;font-size:1.12rem;letter-spacing:-.018em;line-height:1.2}
.signalen p{margin:0;font-size:.95rem;color:var(--ink-60);line-height:1.5}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:16px;
  align-items:center;padding:24px 0;font-family:var(--display);font-weight:700;
  font-size:clamp(1.08rem,1.6vw,1.4rem);letter-spacing:-.02em;line-height:1.25;
  transition:color .3s,padding-left .45s var(--e-out)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--oxide);padding-left:10px}
.faq summary .tk{width:34px;height:34px;border:1px solid var(--hair);border-radius:50%;display:grid;place-items:center;
  color:var(--oxide);font-size:1rem;transition:transform .45s var(--e-out),border-color .3s}
.faq details[open] summary .tk{transform:rotate(45deg);border-color:var(--oxide)}
.faq .antwoord{padding:0 0 26px;margin:0;max-width:70ch;color:var(--ink-60);font-size:1rem;line-height:1.65}
@media(min-width:820px){.faq .antwoord{padding-left:44px}}

/* ---------- DONKER: foto met overlay ---------- */
.donker{position:relative;background:var(--ink);color:var(--paper);isolation:isolate;overflow:hidden}
.donker .achtergrond{position:absolute;inset:0;z-index:-2}
.donker .achtergrond img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) contrast(1.05)}
.donker .overlay{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(26,25,23,.97) 0%,rgba(26,25,23,.93) 42%,rgba(26,25,23,.72) 74%,rgba(26,25,23,.86) 100%)}
.donker .sec-kop{border-color:var(--pap-30)}
.donker .mono{color:var(--pap-60)}
.twee{display:grid;gap:clamp(30px,3.6vw,58px);align-items:start}
@media(min-width:900px){.twee{grid-template-columns:minmax(0,1fr) minmax(0,.78fr)}}
/* het formulier als paneel, anders zweeft het los op de foto */
.paneel{background:rgba(20,19,17,.78);backdrop-filter:blur(10px);border:1px solid var(--pap-30);
  padding:clamp(24px,2.6vw,40px);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.paneel .veld:last-of-type{margin-bottom:26px}
.vink{list-style:none;padding:0;margin:0;display:grid;gap:14px}
/* Standaard donkere tekst zodat de vinklijst leesbaar is op lichte secties
   (o.a. de dienstenpagina). Op .donker-secties wordt hij weer licht. */
.vink li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;font-size:1rem;color:var(--ink)}
.donker .vink li{color:var(--paper)}
.vink i{color:var(--oxide);font-size:1.15rem;line-height:1.45}
.veld{display:block;margin-bottom:20px}
.veld span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(243,240,234,.45);margin-bottom:8px}
.veld input,.veld select{width:100%;padding:13px 0;border:0;border-bottom:1px solid var(--pap-30);background:transparent;
  font-family:var(--body);font-size:1.02rem;color:var(--paper);border-radius:0;transition:border-color .3s}
.veld input:focus,.veld select:focus{outline:0;border-bottom-color:var(--oxide)}
.veld input::placeholder{color:rgba(243,240,234,.34)}
.veld select option{background:var(--ink);color:var(--paper)}

/* ---------- SILHOUET-BAND ---------- */
.silhouet{display:block;width:100%;height:auto;margin-bottom:-2px;background:var(--paper-2)}
.silhouet svg{display:block;width:100%;height:auto}

/* ---------- FOOTER ---------- */
.voet{background:var(--ink);color:var(--paper);padding-top:clamp(40px,5vw,72px)}
.voet a{color:inherit;text-decoration:none}
.voet-boven{display:grid;gap:34px;border-bottom:1px solid var(--pap-30);padding-bottom:clamp(34px,4vw,56px)}
@media(min-width:900px){.voet-boven{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.25fr);gap:40px}}
.kolom h4{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--oxide);margin-bottom:18px}
.kolom ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.kolom ul a{font-size:.97rem;color:var(--pap-60);transition:color .28s,padding-left .4s var(--e-out);display:inline-block}
.kolom ul a:hover{color:var(--paper);padding-left:7px}
.nieuws p{font-size:.95rem;color:var(--pap-60);margin-bottom:16px}
.nieuws form{display:flex;border-bottom:1px solid var(--pap-30);margin-bottom:26px}
.nieuws input{flex:1;padding:12px 0;border:0;background:transparent;color:var(--paper);font-family:var(--body);font-size:.98rem}
.nieuws input:focus{outline:0}
.nieuws input::placeholder{color:rgba(243,240,234,.34)}
.nieuws button{border:0;background:transparent;color:var(--oxide);font-family:var(--mono);font-size:.64rem;
  letter-spacing:.11em;text-transform:uppercase;cursor:pointer;padding:0 0 0 14px}
.sociaal{display:flex;flex-wrap:wrap;gap:9px}
.sociaal a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--pap-30);
  color:var(--pap-60);font-size:1.1rem;transition:background .35s,color .35s,border-color .35s}
.sociaal a:hover{background:var(--oxide);border-color:var(--oxide);color:var(--paper)}
.voet-contact{display:grid;border-bottom:1px solid var(--pap-30)}
@media(min-width:700px){.voet-contact{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.voet-contact{grid-template-columns:repeat(4,minmax(0,1fr))}}
.voet-contact > div{padding:26px 28px;border-right:1px solid var(--pap-30)}
.voet-contact > div:last-child{border-right:0}
.voet-contact h4{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--oxide);margin-bottom:13px}
.voet-contact p,.voet-contact a{margin:0 0 5px;font-size:.98rem;color:var(--pap-60);display:block}
.voet-contact a:hover{color:var(--paper)}
.woordmerk{padding-block:clamp(30px,4vw,54px);display:grid;gap:20px;container-type:inline-size}
.woordmerk .slogan{justify-self:start;font-size:.97rem;color:var(--pap-60);max-width:min(34ch,100%);margin:0}
@media(min-width:1000px){.woordmerk .slogan{justify-self:end;text-align:right}}
.woordmerk .groot{font-family:var(--display);font-weight:800;letter-spacing:-.045em;line-height:.82;
  font-size:9.6cqi;color:var(--paper);white-space:nowrap;max-width:100%}
.woordmerk .groot span{color:var(--oxide)}
.voet-onder{border-top:1px solid var(--pap-30);padding-block:22px;display:flex;flex-wrap:wrap;gap:14px 28px;
  align-items:center;justify-content:space-between;font-size:.87rem;color:rgba(243,240,234,.42)}
.voet-onder nav{display:flex;flex-wrap:wrap;gap:22px}
.voet-onder a:hover{color:var(--paper)}

/* mobiel gecentreerd */
@media(max-width:767px){
  .wrap,.sec-kop,.hero .inhoud,.kolom,.nieuws,.voet-contact > div,.woordmerk,.voet-onder{text-align:center}
  .sec-kop,.hero .acties,.hero-voet,.hero-voet dl,.sociaal,.voet-onder,.voet-onder nav,.bewijs{justify-content:center}
  .bewijs{gap:14px 26px}
  .bewijs-tekst{text-align:left}
  .hero h1,.lead,.woordmerk .slogan{margin-inline:auto}
  .kolom ul{justify-items:center}
  .voet-contact h4{justify-content:center}
  /* Kaartvoetjes blijven links. De titel is een blok en centreerde mee met de
     container, maar de plaatsregel is een flexbox en deed dat niet, dus stonden
     die twee niet op één lijn. Zelfde geldt voor de dienstentegels. */
  .pkaart .pvoet,.pkaart .ptitel,.pkaart .labels{text-align:left}
  .pkaart .pplaats{justify-content:flex-start}
  .dienst .tekst,.dienst .titel{text-align:left}
  /* Vinkjes blijven links met de tekst ernaast: gecentreerd las als losse regels
     met een zwevend rondje erboven. */
  /* Icon-lijst als blok gecentreerd: vinkjes op één kolom, tekst links leesbaar,
     het geheel netjes in het midden i.p.v. tegen de linkerrand. */
  .vink{width:fit-content;max-width:100%;margin-inline:auto}
  .vink li{grid-template-columns:auto 1fr;justify-items:start;text-align:left;gap:11px}
  .vink i{margin-top:1px}
  .oo-tekst{align-items:center;text-align:center}
  .oo-tekst h2,.oo-tekst > p{margin-inline:auto}
  .oo-tekst .btn{align-self:center}
  .pijler{grid-template-columns:1fr;justify-items:center;gap:7px}
  /* Dienst-hero: op mobiel alles gecentreerd. Flex-onderdelen (kruimels, knoppen,
     usps, review) staan standaard links, dus die expliciet centreren. Het
     formulier zelf houdt links uitgelijnde velden. */
  .pkop .kruimels,.pkop .acties,.pkop-usps,.pkop-review{justify-content:center}
  .pkop-usps{justify-items:center}
  .pkop-usps li{justify-content:center}
  .pkop h1,.pkop-tekst{margin-inline:auto}
  .pkop-form{text-align:left}
  .pkop-form h2,.pkop-form .sub{text-align:left}
  /* verwant-kaarten: op mobiel de 'Bekijk dienst'-link mee centreren */
  .verwant-in{align-items:center}
  .verwant .ga{justify-content:center}
  .wtekst{text-align:center}
  .wtekst h3,.wtekst h2,.wtekst p{margin-inline:auto}
  /* het accentvlak schuift op mobiel naar binnen, anders raakt het de schermrand */
  .wbeeld{margin-left:12px;margin-right:12px}
  .wbeeld::before{left:-12px;top:-12px}
  .wrij.gedraaid .wbeeld::before{right:-12px}
  .keurmerken{justify-content:center}
  .keurmerk{height:48px;padding:8px 12px}
  .signalen div{grid-template-columns:1fr;justify-items:center;text-align:center}
  .signalen p{grid-column:1}
  /* FAQ blijft één regel: nummer, vraag, plusknop. Gestapeld en gecentreerd
     viel de vraag los van zijn eigen knop en werd onduidelijk wat bij wat hoorde. */
  .faq summary{grid-template-columns:1fr auto;justify-items:start;text-align:left;gap:12px;align-items:center}
  .faq summary:hover{padding-left:0}
  .faq .antwoord{text-align:left;margin-inline:0;padding-left:0}
  .diensten-slot{justify-content:center;text-align:center}
  .diensten-slot p{margin-inline:auto}

  /* minder druk: kleiner snijvlak, strakkere ritmes, minder witruimte-versnippering */
  :root{--cut:22px}
  section{padding-block:52px}
  .sec-kop{gap:10px;margin-bottom:26px;padding-top:16px}
  .lead{font-size:1rem;line-height:1.55}
  .hero .inhoud{padding-block:118px 30px}
  .hero .lead{font-size:.98rem}
  .hero .acties{gap:10px;margin-top:22px}
  .hero-voet{margin-top:26px;padding-top:16px}
  .diensten-grid{gap:8px}
  .dienst{aspect-ratio:1/1}
  .dienst .tekst{padding:13px}
  .dienst .titel{font-size:.92rem;max-width:12ch}
  .dienst .pijl{width:31px;height:31px;flex-basis:31px;font-size:.82rem}
  .signalen div{padding:16px 0;gap:5px}
  .signalen h3{font-size:1.05rem}
  .signalen p{font-size:.92rem}
  .faq summary{padding:19px 0;font-size:1.02rem}
  .faq .antwoord{padding-bottom:20px;font-size:.95rem}
  .voet-boven{gap:26px;padding-bottom:28px}
  .voet-contact > div{padding:20px 18px}
  .kolom ul{gap:8px}
  .voet-contact > div{border-right:0;border-bottom:1px solid var(--pap-30)}
  .woordmerk{justify-items:center}
  .woordmerk .slogan{justify-self:center}
}

/* JS-reveals: alleen verbergen als JS draait, anders blijft alles zichtbaar */
.js .rv{opacity:0}
@media(prefers-reduced-motion:reduce){.js .rv{opacity:1!important;transform:none!important}}

/* =====================================================================
   SUBPAGINA'S — gedeeld door diensten, over-ons, vragen, contact, offerte
   ===================================================================== */

/* toegankelijkheid: sla naar de inhoud */
.skip{position:absolute;left:-999px;top:0;z-index:200;background:var(--ink);color:var(--paper);
  padding:12px 20px;font-family:var(--mono);font-size:.78rem;text-decoration:none}
.skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2px solid var(--oxide);outline-offset:3px;border-radius:2px}

/* ---------- MOBIEL MENU ---------- */
.ham{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  margin-left:auto;border:0;background:transparent;cursor:pointer;padding:10px}
.ham span{display:block;height:2px;width:100%;background:var(--paper);transition:transform .4s var(--e-out),opacity .3s}
.ham[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ham[aria-expanded="true"] span:nth-child(2){opacity:0}
.ham[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(min-width:1080px){.ham{display:none}}

/* gedimde achtergrond achter het paneel */
.la-waas{position:fixed;inset:0;z-index:79;background:rgba(26,25,23,.5);backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;transition:opacity .45s var(--e-out),visibility .45s}
.la-waas.aan{opacity:1;visibility:visible}

/* het paneel schuift vanaf rechts in */
.la{position:fixed;top:0;right:0;bottom:0;width:min(90vw,430px);z-index:80;
  background:var(--ink);color:var(--paper);display:flex;flex-direction:column;overflow-y:auto;
  transform:translateX(100%);transition:transform .55s var(--e-out);visibility:hidden;
  box-shadow:-30px 0 80px rgba(0,0,0,.4)}
.la.aan{transform:none;visibility:visible}
.la::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;
  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='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

.la-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);border-bottom:1px solid var(--pap-30)}
.la-logo img{height:32px;width:auto;display:block}
.la-sluit{width:44px;height:44px;border-radius:50%;border:1px solid var(--pap-30);background:transparent;
  color:var(--paper);font-size:1.2rem;cursor:pointer;display:grid;place-items:center;
  transition:background .3s,border-color .3s,transform .5s var(--e-out)}
.la-sluit:hover{background:var(--oxide);border-color:var(--oxide);transform:rotate(90deg)}

.la-links{position:relative;z-index:1;padding:14px var(--gut) 6px;display:flex;flex-direction:column}
.la-links a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 0;
  border-bottom:1px solid var(--pap-30);color:var(--paper);text-decoration:none;
  font-family:var(--display);font-weight:700;font-size:1.55rem;letter-spacing:-.022em;
  transition:color .25s,padding-left .35s var(--e-out)}
.la-links a i{color:var(--oxide);font-size:1rem;transition:transform .4s var(--e-out)}
.la-links a:hover,.la-links a[aria-current="page"]{color:var(--oxide);padding-left:8px}
.la-links a:hover i{transform:translateX(4px)}

.la-groep{position:relative;z-index:1;font-family:var(--mono);font-size:.62rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--oxide);padding:clamp(28px,5vw,40px) var(--gut) 14px}
.la-chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:9px;
  padding:0 var(--gut) clamp(26px,6vw,44px)}
.la-chips a{padding:9px 15px;border:1px solid var(--pap-30);border-radius:999px;color:var(--pap-60);
  text-decoration:none;font-size:.9rem;transition:background .3s,color .3s,border-color .3s}
.la-chips a:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

.la-voet{position:sticky;bottom:0;z-index:2;margin-top:auto;
  padding:18px var(--gut) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--pap-30);display:grid;gap:11px;background:var(--ink)}
.la-spoed{display:flex;align-items:center;justify-content:center;gap:10px;background:var(--oxide);
  color:var(--paper);padding:15px;border-radius:999px;text-decoration:none;font-weight:600;font-size:1rem;
  transition:filter .3s}
.la-spoed:hover{filter:brightness(1.08)}
.la-spoed i{font-size:1.15rem}
.la-voet .btn{width:100%;justify-content:space-between}
.la-contact{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:2px;
  font-family:var(--mono);font-size:.72rem;color:var(--pap-60)}
.la-contact a{color:var(--pap-60);text-decoration:none}

/* gestaffelde binnenkomst van de onderdelen */
.la-links a,.la-groep,.la-chips,.la-voet{opacity:0;transform:translateX(26px);
  transition:opacity .5s var(--e-out),transform .5s var(--e-out)}
.la.aan .la-links a,.la.aan .la-groep,.la.aan .la-chips,.la.aan .la-voet{opacity:1;transform:none}
.la.aan .la-links a:nth-child(1){transition-delay:.10s}
.la.aan .la-links a:nth-child(2){transition-delay:.15s}
.la.aan .la-links a:nth-child(3){transition-delay:.20s}
.la.aan .la-links a:nth-child(4){transition-delay:.25s}
.la.aan .la-links a:nth-child(5){transition-delay:.30s}
.la.aan .la-links a:nth-child(6){transition-delay:.35s}
.la.aan .la-groep{transition-delay:.38s}
.la.aan .la-chips{transition-delay:.42s}
.la.aan .la-voet{transition-delay:.46s}
@media(prefers-reduced-motion:reduce){
  .la,.la-links a,.la-groep,.la-chips,.la-voet{transition-duration:.01ms}
  .la-links a,.la-groep,.la-chips,.la-voet{opacity:1;transform:none}
}
@media(min-width:1080px){.la,.la-waas{display:none}}

.hoofdnav a[aria-current="page"]{color:var(--oxide)}
.la a[aria-current="page"]{color:var(--oxide)}

/* ---------- PAGINAKOP (vervangt de hero op subpagina's) ---------- */
.pkop{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;
  padding:calc(var(--kop-h) + clamp(40px,6vw,86px)) 0 clamp(40px,5vw,72px)}
.pkop.met-beeld::before{content:"";position:absolute;inset:0;z-index:0;opacity:.42;
  background-size:cover;background-position:center;background-image:var(--kopbeeld)}
.pkop.met-beeld::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(180deg,rgba(26,25,23,.58),rgba(26,25,23,.88))}
.pkop .wrap{position:relative;z-index:1}
.kruimels{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-family:var(--mono);
  font-size:.66rem;letter-spacing:.09em;text-transform:uppercase;color:var(--pap-60);margin-bottom:22px}
.kruimels a{color:var(--pap-60);text-decoration:none;transition:color .25s}
.kruimels a:hover{color:var(--oxide)}
.kruimels span[aria-current]{color:var(--paper)}
.kruimels i{font-size:.8rem;color:var(--pap-30)}
.pkop h1{font-family:var(--display);font-weight:800;letter-spacing:-.032em;line-height:.96;
  font-size:clamp(2.3rem,5vw,4.6rem);max-width:20ch;margin:0 0 22px}
.pkop h1 em{font-style:normal;color:var(--oxide)}
.pkop-tekst{font-size:clamp(1.02rem,1.3vw,1.28rem);line-height:1.55;color:var(--pap-60);max-width:60ch;margin:0}
.pkop .acties{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}
.pkop-stat{display:flex;flex-wrap:wrap;gap:14px 40px;margin-top:clamp(30px,4vw,48px);
  padding-top:22px;border-top:1px solid var(--pap-30)}
.pkop-stat div{display:flex;flex-direction:column;gap:3px}
.pkop-stat dt{font-family:var(--mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(243,240,234,.42)}
.pkop-stat dd{margin:0;font-family:var(--display);font-weight:700;font-size:1.4rem;letter-spacing:-.02em}

/* ---------- DIENST-HERO MET OFFERTEFORMULIER ---------- */
.pkop.met-form .wrap{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
@media(min-width:980px){.pkop.met-form .wrap{grid-template-columns:minmax(0,1fr) minmax(370px,420px)}}
.pkop-tekst-col{min-width:0}
.pkop.met-form h1{font-size:clamp(2.1rem,4.2vw,3.7rem);max-width:15ch}
.pkop.met-form .pkop-tekst{max-width:46ch}
.pkop-usps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:12px}
@media(min-width:520px){.pkop-usps{grid-template-columns:1fr 1fr;gap:13px 30px}}
.pkop-usps li{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;color:var(--paper)}
.pkop-usps .tik{width:22px;height:22px;flex:0 0 22px;border-radius:50%;background:var(--oxide);
  color:#fff;display:grid;place-items:center;font-size:.72rem}
.pkop-review{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:26px;font-size:.9rem;color:var(--pap-60)}
.pkop-review img{width:22px;height:22px}
.pkop-review b{color:var(--paper);font-weight:700}
.pkop-review .sterren{color:var(--goud);letter-spacing:2px}

.pkop-form{position:relative;background:var(--paper);color:var(--ink);border-radius:20px;
  padding:clamp(24px,2.3vw,34px);box-shadow:0 42px 90px -42px rgba(0,0,0,.72)}
.pkop-form h2{font-family:var(--display);font-weight:800;letter-spacing:-.02em;font-size:1.55rem;margin:0}
.pkop-form .sub{color:var(--ink-60);font-size:.9rem;margin:7px 0 20px;line-height:1.45}
.pff{display:grid;gap:12px}
.pff-row{display:grid;gap:12px}
@media(min-width:420px){.pff-row{grid-template-columns:1fr 1fr}}
.pff input,.pff textarea{width:100%;font:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:11px;padding:13px 15px}
.pff input::placeholder,.pff textarea::placeholder{color:rgba(26,25,23,.42)}
.pff input:focus,.pff textarea:focus{outline:none;border-color:var(--oxide);box-shadow:0 0 0 3px rgba(245,137,10,.18)}
.pff textarea{resize:vertical;min-height:86px;line-height:1.5}
.pff-akkoord{display:flex;align-items:flex-start;gap:9px;font-size:.8rem;color:var(--ink-60);margin-top:2px}
.pff-akkoord input{width:17px;height:17px;flex:0 0 17px;margin-top:1px;accent-color:var(--oxide)}
.pff-akkoord a{color:var(--oxide);text-decoration:underline}
.pff-knop{width:100%;justify-content:center;margin-top:4px;border:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;background:var(--oxide);color:#fff;
  font-family:var(--body);font-weight:700;font-size:1rem;border-radius:12px;padding:15px 22px;
  transition:background .25s,transform .25s}
.pff-knop:hover{background:var(--ink);transform:translateY(-1px)}
@media(max-width:979px){.pkop.met-form h1{max-width:none}.pkop.met-form .pkop-tekst{max-width:60ch}
  .pkop-form{max-width:560px}}

/* ---------- ARTIKELTEKST (long-form) ---------- */
.artikel{display:grid;gap:clamp(34px,5vw,68px)}
@media(min-width:1000px){.artikel{grid-template-columns:minmax(0,1fr) 300px;align-items:start}}
.prose{max-width:74ch}
.prose h2{font-family:var(--display);font-weight:800;letter-spacing:-.028em;line-height:1.04;
  font-size:clamp(1.6rem,2.7vw,2.5rem);margin:clamp(38px,4vw,58px) 0 16px;scroll-margin-top:calc(var(--kop-h) + 20px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;font-size:clamp(1.2rem,1.7vw,1.5rem);
  margin:30px 0 10px;scroll-margin-top:calc(var(--kop-h) + 20px)}
.prose p{margin:0 0 1.15em;color:var(--ink-60);font-size:1.05rem;line-height:1.68}
.prose p strong{color:var(--ink);font-weight:600}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--oxide);
  text-underline-offset:3px;text-decoration-thickness:1.5px;transition:color .25s}
.prose a:hover{color:var(--oxide)}
/* Inline tekstlinks binnen alinea's (over-ons, FAQ-antwoorden, leads): zonder
   deze regel erven ze de blauwe browser-standaard. Knoppen uitgezonderd.
   Op donkere secties wordt de tekst licht. */
main p a:not(.btn):not(.ckaart){color:var(--ink);text-decoration:underline;
  text-decoration-color:var(--oxide);text-underline-offset:2px;text-decoration-thickness:1.5px;transition:color .25s}
main p a:not(.btn):hover{color:var(--oxide)}
.donker p a:not(.btn){color:var(--paper);text-decoration-color:var(--oxide)}
.donker p a:not(.btn):hover{color:var(--oxide)}
.prose ul,.prose ol{margin:0 0 1.3em;padding:0;list-style:none;display:grid;gap:11px}
.prose ul li{display:grid;grid-template-columns:auto 1fr;gap:12px;color:var(--ink-60);font-size:1.03rem;line-height:1.5}
.prose ul li::before{content:"\2713";color:var(--oxide);font-weight:700}
.prose ol{counter-reset:n}
/* Absolute nummering i.p.v. grid: bij een <li> met <strong> plus tekst worden
   dat twee losse grid-items, wat de kolomplaatsing breekt. */
.prose ol li{position:relative;padding-left:42px;counter-increment:n;color:var(--ink-60);font-size:1.03rem;line-height:1.55}
.prose ol li strong{color:var(--ink)}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;font-family:var(--mono);font-size:.8rem;color:var(--oxide);
  border:1px solid var(--hair);border-radius:50%;width:26px;height:26px;display:grid;place-items:center}
.prose figure{margin:clamp(26px,3vw,42px) 0}
.prose figure img{width:100%;height:auto;display:block}
.prose figcaption{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--ink-40);margin-top:9px}
.prose blockquote{margin:clamp(26px,3vw,40px) 0;padding:4px 0 4px 24px;border-left:2px solid var(--oxide);
  font-family:var(--display);font-weight:500;font-size:clamp(1.2rem,1.8vw,1.55rem);letter-spacing:-.02em;
  line-height:1.3;color:var(--ink)}

.kader{border:1px solid var(--hair);padding:clamp(20px,2.4vw,32px);margin:clamp(26px,3vw,40px) 0;background:var(--paper-2)}
.kader h3{margin-top:0}
.kader p:last-child{margin-bottom:0}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:900px){.contact-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.contact-kaarten{display:grid;gap:14px}
@media(min-width:560px){.contact-kaarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* De kaart is zelf een <a>, dus zonder deze regel erft de tekst de blauwe
   standaard-linkkleur. Kleur en text-decoration expliciet op de kaart zetten. */
.ckaart{border:1px solid var(--hair);padding:24px 22px;display:flex;flex-direction:column;gap:9px;
  background:var(--paper);color:var(--ink);text-decoration:none;transition:border-color .35s}
.ckaart:hover{border-color:var(--ink)}
.ckaart i{color:var(--oxide);font-size:1.55rem}
.ckaart b{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}
.ckaart span,.ckaart p{margin:0;color:var(--ink-60);font-size:1rem;text-decoration:none;line-height:1.5}
a.ckaart:hover b{color:var(--oxide)}
.kaart-embed{border:1px solid var(--hair);overflow:hidden;background:var(--paper-2);min-height:340px;height:100%}
.kaart-embed iframe{width:100%;height:100%;min-height:340px;border:0;display:block;filter:grayscale(.3) contrast(1.05)}

/* ---------- FORMULIER ---------- */
.form-wrap{background:var(--ink);color:var(--paper);padding:clamp(26px,3.4vw,48px);
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
.form-wrap.licht{background:var(--paper-2);color:var(--ink);clip-path:none;border:1px solid var(--hair)}
.form-rij{display:grid;gap:18px 22px}
@media(min-width:600px){.form-rij.twee{grid-template-columns:repeat(2,minmax(0,1fr))}}
.veldgroep{display:block}
.veldgroep > span{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(243,240,234,.5);margin-bottom:8px}
.form-wrap.licht .veldgroep > span{color:var(--ink-40)}
.veldgroep .verplicht{color:var(--oxide)}
.veldgroep input,.veldgroep select,.veldgroep textarea{width:100%;padding:13px 0;border:0;
  border-bottom:1px solid var(--pap-30);background:transparent;color:var(--paper);
  font-family:var(--body);font-size:1.02rem;border-radius:0;transition:border-color .3s}
.form-wrap.licht .veldgroep input,.form-wrap.licht .veldgroep select,.form-wrap.licht .veldgroep textarea{
  border-bottom-color:var(--hair);color:var(--ink)}
.veldgroep textarea{resize:vertical;min-height:96px}
.veldgroep input:focus,.veldgroep select:focus,.veldgroep textarea:focus{outline:0;border-bottom-color:var(--oxide)}
.veldgroep input::placeholder,.veldgroep textarea::placeholder{color:rgba(243,240,234,.34)}
.form-wrap.licht .veldgroep input::placeholder,.form-wrap.licht .veldgroep textarea::placeholder{color:var(--ink-40)}
.veldgroep select option{background:var(--ink);color:var(--paper)}
.form-wrap.licht .veldgroep select option{background:var(--paper);color:var(--ink)}

.keuzerij{display:flex;flex-wrap:wrap;gap:9px}
.keuze{position:relative;cursor:pointer}
.keuze input{position:absolute;opacity:0;width:0;height:0}
.keuze span{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--pap-30);
  border-radius:999px;font-size:.92rem;color:var(--pap-60);transition:border-color .3s,color .3s,background .3s}
.form-wrap.licht .keuze span{border-color:var(--hair);color:var(--ink-60)}
.keuze span i{font-size:1.05rem;color:var(--oxide)}
.keuze input:checked + span{border-color:var(--oxide);color:var(--paper);background:rgba(180,71,31,.16)}
.form-wrap.licht .keuze input:checked + span{color:var(--ink)}
.keuze input:focus-visible + span{outline:2px solid var(--oxide);outline-offset:2px}

.form-stap{display:flex;align-items:center;gap:12px;margin-bottom:22px;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(243,240,234,.5)}
.form-wrap.licht .form-stap{color:var(--ink-40)}
.form-stap b{color:var(--oxide);font-weight:500}
.form-hint{font-family:var(--mono);font-size:.7rem;color:rgba(243,240,234,.5);margin:16px 0 0;display:flex;align-items:center;gap:8px}
.form-hint i{color:var(--oxide)}
.form-wrap.licht .form-hint{color:var(--ink-40)}
fieldset{border:0;margin:0 0 24px;padding:0}
fieldset > legend{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--oxide);margin-bottom:14px;padding:0}

/* ---------- USP-strook ---------- */
.usps{display:grid;gap:2px;background:var(--hair);border-block:1px solid var(--hair)}
@media(min-width:700px){.usps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.usps{grid-template-columns:repeat(4,minmax(0,1fr))}}
.usp{background:var(--paper);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.usp i{color:var(--oxide);font-size:1.7rem}
/* De .usp-kaart is altijd licht, ook op een donkere sectie. Titel dus expliciet
   donker, anders erft hij de witte tekstkleur van de donkere sectie en valt weg. */
.usp b{font-family:var(--display);font-weight:700;font-size:1.1rem;letter-spacing:-.02em;color:var(--ink)}
.usp p{margin:0;color:var(--ink-60);font-size:.94rem;line-height:1.5}

/* ---------- PRIJSINDICATIE-TABEL ---------- */
.tabel-wrap{overflow-x:auto;margin:clamp(26px,3vw,40px) 0}
table.prijs{width:100%;border-collapse:collapse;min-width:520px}
table.prijs caption{text-align:left;font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-40);margin-bottom:12px}
table.prijs th,table.prijs td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--hair);font-size:.98rem}
table.prijs thead th{font-family:var(--mono);font-size:.64rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-40);font-weight:500}
table.prijs td:last-child,table.prijs th:last-child{text-align:right;font-family:var(--mono);white-space:nowrap}
table.prijs tbody tr:hover{background:var(--paper-2)}

/* mobiel gecentreerd voor de nieuwe blokken */
@media(max-width:767px){
  .pkop h1,.pkop-tekst{margin-inline:auto;text-align:center}
  .kruimels,.pkop .acties,.pkop-stat,.pkop-stat div{justify-content:center;text-align:center}
  .usp{align-items:center;text-align:center}
  .ckaart{align-items:center;text-align:center}
  .contact-kaarten{grid-template-columns:1fr}
}

/* =====================================================================
   RIJKE SUBPAGINA-COMPONENTEN — geven de subpagina's hetzelfde leven als home
   ===================================================================== */

/* ---------- DIENSTKAART (beeld + icoon + titel + tekst + link) ---------- */
.dkaart-grid{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr}
@media(min-width:620px){.dkaart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.dkaart-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dkaart{position:relative;display:flex;flex-direction:column;background:var(--ink);color:var(--paper);
  text-decoration:none;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
  transition:transform .55s var(--e-out)}
.dkaart:hover{transform:translateY(-6px)}
.dkaart .beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--zink)}
.dkaart .beeld img{width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(1.03);
  transition:transform 1.1s var(--e-out)}
.dkaart:hover .beeld img{transform:scale(1.07)}
.dkaart .beeld::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(26,25,23,.72))}
.dkaart .ico{position:absolute;left:16px;bottom:14px;z-index:2;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;background:var(--oxide);color:var(--paper);font-size:1.35rem}
.dkaart .body{padding:22px 22px 26px;display:flex;flex-direction:column;gap:9px;flex:1}
.dkaart .body h3{font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.022em;line-height:1.1;margin:0}
.dkaart .body p{margin:0;font-size:.94rem;color:var(--pap-60);line-height:1.5}
.dkaart .lk{margin-top:auto;padding-top:14px;font-family:var(--mono);font-size:.63rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--pap-30);display:flex;align-items:center;gap:7px;transition:color .35s}
.dkaart:hover .lk{color:var(--oxide)}

/* ---------- CIJFERBAND (grote getallen op donker) ---------- */
.cijfers{background:var(--ink);color:var(--paper)}
.cijfers .rij{display:grid;gap:2px;background:var(--pap-30)}
@media(min-width:640px){.cijfers .rij{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.cijfers .rij{grid-template-columns:repeat(4,minmax(0,1fr))}}
.cijfers .cel{background:var(--ink);padding:clamp(28px,3.4vw,46px) clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:8px}
.cijfers .groot{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:.9;
  font-size:clamp(2.4rem,4.4vw,3.8rem)}
.cijfers .groot span{color:var(--oxide)}
.cijfers .lab{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--pap-60)}
.cijfers .cel p{margin:0;font-size:.92rem;color:var(--pap-60);line-height:1.45}

/* ---------- CTA-BAND (donkere afsluiter met dakrand-accent) ---------- */
.cta-band{position:relative;background:var(--ink);color:var(--paper);overflow:hidden;text-align:center;
  padding-block:clamp(56px,8vw,120px)}
.cta-band .wrap{position:relative;z-index:2}
.cta-band h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1;
  font-size:clamp(2rem,4.6vw,4.2rem);max-width:18ch;margin:0 auto 20px}
.cta-band h2 em{font-style:normal;color:var(--oxide)}
.cta-band p{color:var(--pap-60);max-width:56ch;margin:0 auto 30px;font-size:clamp(1.02rem,1.3vw,1.22rem)}
.cta-band .acties{display:flex;flex-wrap:wrap;gap:13px;justify-content:center}
.cta-band .rand{position:absolute;left:0;right:0;bottom:0;z-index:0;opacity:.5;width:100%;height:auto;display:block}
/* CTA met achtergrondfoto: foto + donkere sluier zodat de tekst leesbaar blijft */
.cta-band .cta-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) contrast(1.02)}
.cta-band .cta-sluier{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(26,25,23,.82),rgba(26,25,23,.9))}

/* ---------- ARTIKEL-LAYOUT met inhoudsopgave ---------- */
.artikel{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:1000px){.artikel{grid-template-columns:330px minmax(0,1fr);align-items:start}}
/* Inhoudsopgave als nette kaart, met diagonale hoek en een oranje accent op
   het actieve item. Zowel op desktop (sticky) als op mobiel een echte box. */
.toc{position:sticky;top:calc(var(--kop-h) + 24px);background:var(--ink);color:var(--paper);
  padding:26px 24px 14px;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.toc-kop{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:500;font-size:.62rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--oxide);margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--pap-30)}
.toc-kop::before{content:"";width:16px;height:16px;flex:0 0 16px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16M4 12h16M4 18h10' stroke='%23000' stroke-width='2.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  background:var(--oxide)}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:t;display:grid;gap:0}
.toc li{counter-increment:t}
.toc a{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:baseline;padding:11px 12px 11px 0;
  border-bottom:1px solid var(--pap-30);text-decoration:none;color:var(--pap-60);font-size:.93rem;line-height:1.35;
  transition:color .25s,background .25s,padding-left .35s var(--e-out)}
.toc li:last-child a{border-bottom:0}
.toc a::before{content:counter(t,decimal-leading-zero);font-family:var(--mono);font-size:.66rem;
  color:var(--oxide);text-align:right}
.toc a:hover{color:var(--paper);padding-left:6px}
.toc a.actief{color:var(--paper);padding-left:14px;position:relative}
.toc a.actief::after{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:4px;height:20px;background:var(--oxide);border-radius:2px}
@media(max-width:999px){.toc{position:static;margin-bottom:8px}}
.artikel-body{min-width:0}
.artikel-body section{padding:0;margin-bottom:clamp(32px,4vw,52px);scroll-margin-top:calc(var(--kop-h) + 20px)}
.artikel-body h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.6rem,2.7vw,2.5rem);margin:0 0 18px;color:var(--ink)}
.artikel-body h3{font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,1.6vw,1.4rem);
  letter-spacing:-.02em;margin:26px 0 10px;color:var(--ink)}
.artikel-body p{margin:0 0 1.15em;color:var(--ink-60);font-size:1.06rem;line-height:1.68}
.artikel-body p strong{color:var(--ink);font-weight:600}
.artikel-body figure{margin:clamp(24px,3vw,38px) 0}
/* kleiner en rustiger: bannerverhouding i.p.v. een grote hoge foto */
.artikel-body figure img{width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;display:block;
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px))}
.artikel-body figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-40);margin-top:10px}
.artikel-body ul.vink{margin:16px 0 1.3em}
.artikel-body .kosten-regel{margin:0 0 1.15em}
.terug-boven{position:fixed;right:22px;bottom:22px;z-index:55;width:48px;height:48px;border-radius:50%;
  background:var(--ink);color:var(--paper);border:0;display:grid;place-items:center;font-size:1.2rem;cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,transform .45s var(--e-out),visibility .35s}
.terug-boven.zichtbaar{opacity:1;visibility:visible;transform:none}
.terug-boven:hover{background:var(--oxide)}

/* verwante diensten onderaan een servicepagina */
.verwant-grid{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr}
@media(min-width:640px){.verwant-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.verwant{display:flex;flex-direction:column;gap:0;padding:0;overflow:hidden;background:var(--paper);text-decoration:none;
  color:var(--ink);border:1px solid var(--hair);transition:border-color .3s,transform .5s var(--e-out)}
.verwant:hover{border-color:var(--ink);transform:translateY(-4px)}
.verwant-beeld{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;transition:transform .6s var(--e-out)}
.verwant:hover .verwant-beeld{transform:scale(1.05)}
.verwant-in{display:flex;flex-direction:column;gap:7px;padding:18px 20px 20px;flex:1}
.verwant .ga i{font-size:.9rem}
.verwant b{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;color:var(--ink)}
.verwant span{font-size:.92rem;color:var(--ink-60);line-height:1.45}
.verwant .ga{margin-top:auto;padding-top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--oxide);display:flex;align-items:center;gap:6px}

/* ---------- SPLIT FAQ (sticky kop links, accordeon rechts) ---------- */
.faq-split{display:grid;gap:clamp(30px,4vw,64px)}
@media(min-width:1000px){.faq-split{grid-template-columns:340px minmax(0,1fr);align-items:start}}
.faq-zij{position:sticky;top:calc(var(--kop-h) + 24px)}
.faq-zij .cat{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.faq-zij .cat a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;
  border-bottom:1px solid var(--hair);text-decoration:none;color:var(--ink-60);font-size:1rem;
  transition:color .25s,padding-left .35s var(--e-out)}
.faq-zij .cat a:hover{color:var(--oxide);padding-left:6px}
.faq-zij .cat a i{color:var(--oxide);font-size:.9rem}
@media(max-width:999px){.faq-zij{position:static}.faq-zij .cat{display:none}}
.faq-hulp{margin-top:26px;border:1px solid var(--hair);padding:22px;background:var(--paper-2)}
.faq-hulp b{font-family:var(--display);font-weight:700;font-size:1.15rem;letter-spacing:-.02em;display:block;margin-bottom:8px}
.faq-hulp p{margin:0 0 14px;font-size:.94rem;color:var(--ink-60);line-height:1.5}

/* ---------- INTRO-SPLIT (grote lead + steuncijfers) ---------- */
.introsplit{display:grid;gap:clamp(24px,3vw,50px);align-items:end}
@media(min-width:900px){.introsplit{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.introsplit .groot-lead{font-family:var(--display);font-weight:500;letter-spacing:-.02em;line-height:1.16;
  font-size:clamp(1.4rem,2.4vw,2.15rem);color:var(--ink);margin:0}
.introsplit .groot-lead b{font-weight:700}
.introsplit .steun{margin:0;color:var(--ink-60);font-size:1.02rem;line-height:1.6}

/* prijsindicatie: gewone zin, geen kader en geen zijstreep */
.kosten-regel{margin:16px 0 0;font-size:.96rem;color:var(--ink-60);line-height:1.55;max-width:52ch}

@media(max-width:767px){
  .cijfers .cel{align-items:center;text-align:center}
  .dkaart .body{align-items:flex-start;text-align:left}
}

/* =====================================================================
   REFERENTIE-SECTIES — nagebouwd in eigen palet
   ===================================================================== */

/* ---------- WERKGEBIED: oranje paneel + NL-kaart ---------- */
.werkgebied{padding-block:clamp(56px,7vw,110px)}
.wg-grid{display:grid;gap:0;align-items:stretch;overflow:hidden;
  clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)))}
@media(min-width:940px){.wg-grid{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.wg-paneel{background:var(--oxide-deep);color:var(--paper);padding:clamp(30px,3.6vw,58px);
  display:flex;flex-direction:column;gap:16px;justify-content:center}
.wg-paneel h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.7rem,2.9vw,2.7rem);max-width:16ch}
.wg-paneel > p{margin:0;color:rgba(243,240,234,.82);font-size:1rem;line-height:1.55;max-width:44ch}
.wg-lijst{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
.wg-lijst li{display:flex;align-items:center;gap:9px;font-size:.98rem;font-weight:500}
.wg-lijst li i{font-size:1.05rem;color:var(--paper);opacity:.85}
.wg-lijst li span{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(243,240,234,.7);border:1px solid rgba(243,240,234,.4);padding:2px 7px;border-radius:999px}
.wg-buiten{margin:4px 0 8px;font-size:.9rem;color:rgba(243,240,234,.72);max-width:42ch}
.wg-kaart{position:relative;background:var(--ink);padding:clamp(22px,2.6vw,40px);display:grid;place-items:center;min-height:340px}
.wg-svg{width:100%;height:auto;max-height:560px;overflow:visible}
.wg-ctx{fill:rgba(243,240,234,.05);stroke:rgba(243,240,234,.12);stroke-width:1;stroke-linejoin:round}
.wg-kern{fill:rgba(243,240,234,.10);stroke:rgba(243,240,234,.28);stroke-width:1.3;stroke-linejoin:round}
.wg-gebied{fill:rgba(180,71,31,.10);stroke:var(--oxide);stroke-width:1.6;stroke-dasharray:4 6;opacity:.7}
.wg-stip{fill:var(--oxide);stroke:var(--ink);stroke-width:1.5}
.wg-label{font-family:var(--mono);font-size:14px;fill:rgba(243,240,234,.82);letter-spacing:.02em;paint-order:stroke;
  stroke:var(--ink);stroke-width:3.5;stroke-linejoin:round}
.wg-label-thuis{fill:var(--paper);font-weight:500}
.wg-inset-bg{fill:rgba(243,240,234,.06);stroke:rgba(243,240,234,.14);stroke-width:1}
.wg-inset-land{fill:rgba(243,240,234,.14);stroke:rgba(243,240,234,.3);stroke-width:1.4;stroke-linejoin:round}
.wg-inset-dot{fill:var(--oxide);stroke:var(--paper);stroke-width:1.5}
.wg-inset-tekst{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:rgba(243,240,234,.5)}
.wg-puls{fill:var(--oxide);transform-origin:center;transform-box:fill-box}
.wg-legenda{position:absolute;left:clamp(20px,3vw,40px);bottom:clamp(16px,2vw,26px);display:flex;flex-wrap:wrap;gap:8px 18px}
.wg-legenda span{display:flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.09em;text-transform:uppercase;color:var(--pap-60)}
.wg-legenda .dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.wg-legenda .dot-thuis{background:var(--paper);border:2px solid var(--oxide)}
.wg-legenda .dot-plaats{background:var(--oxide)}
@media(prefers-reduced-motion:no-preference){
  .wg-puls{animation:wgpuls 2.6s var(--e-out) infinite}
  @keyframes wgpuls{0%{transform:scale(.55);opacity:.7}70%{transform:scale(2.4);opacity:0}100%{opacity:0}}
}
@media(max-width:767px){.wg-lijst{grid-template-columns:1fr}.wg-paneel{text-align:left}}

/* ---------- STAPPEN-PROCES ---------- */
:root{--stapgap:30px}
.stappen{position:relative}
.stap-grid{display:grid;gap:34px var(--stapgap);grid-template-columns:1fr}
@media(min-width:720px){.stap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.stap-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Elke stap gecentreerd in zijn kolom, zodat de rij symmetrisch staat en niet
   naar links wegzakt. Cirkel gecentreerd, kop en tekst eronder gecentreerd. */
.stap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px}
.stap-cirkel{position:relative;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--paper-2);border:1.5px dashed var(--hair);color:var(--ink);font-size:2.1rem}
.stap-cirkel i{color:var(--oxide)}
.stap-nr{position:absolute;top:0;right:0;width:34px;height:34px;border-radius:50%;background:var(--ink);
  color:var(--paper);font-family:var(--mono);font-size:.72rem;display:grid;place-items:center;letter-spacing:.02em}
.stap.af .stap-nr{background:var(--oxide)}
.stap h3{font-family:var(--display);font-weight:700;font-size:1.28rem;letter-spacing:-.022em;line-height:1.1;margin:0}
.stap p{margin:0;font-size:.95rem;color:var(--ink-60);line-height:1.5;max-width:32ch}
/* Verbindingslijn tussen twee gecentreerde cirkels: gestippeld + pijlpunt, op
   cirkelhoogte (48px). Loopt van net rechts van deze cirkel tot net links van de
   volgende. De cirkel staat op 50% van de kolom, dus rekenen vanaf het midden. */
.stap-pijl{display:none}
@media(min-width:1080px){
  .stap:not(:last-child)::after{content:"";position:absolute;top:48px;
    left:calc(50% + 62px);right:calc(-50% - var(--stapgap) + 62px);
    height:0;border-top:2px dashed var(--oxide);opacity:.55;z-index:0}
  .stap:not(:last-child)::before{content:"";position:absolute;top:48px;
    right:calc(-50% - var(--stapgap) + 58px);transform:translateY(-50%);
    width:0;height:0;border-left:8px solid var(--oxide);
    border-top:5px solid transparent;border-bottom:5px solid transparent;opacity:.75;z-index:1}
}

/* ---------- WAAROM KIEZEN (foto links + vinkjes rechts) ---------- */
.waarom{overflow:hidden;padding-block:clamp(40px,4vw,74px)}
.waarom-grid{display:grid;gap:clamp(30px,4vw,72px);align-items:stretch}
@media(min-width:900px){.waarom-grid{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)}}
.waarom-tekst > p{max-width:60ch}
.waarom-beeld{position:relative;margin:0}
.waarom-beeld img{width:100%;height:100%;aspect-ratio:4/5;object-fit:cover;min-height:100%;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
@media(min-width:900px){.waarom-beeld img{position:absolute;inset:0;aspect-ratio:auto;min-height:0}}
.waarom-beeld .badge{position:absolute;right:-14px;bottom:26px;background:var(--ink);color:var(--paper);
  padding:18px 22px;display:flex;flex-direction:column;gap:2px;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px))}
.waarom-beeld .badge b{font-family:var(--display);font-weight:800;font-size:2rem;letter-spacing:-.03em;line-height:1}
.waarom-beeld .badge span{font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pap-60)}
.waarom-tekst h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.9rem,3.4vw,3.1rem);max-width:16ch;margin:0 0 16px}
.waarom-tekst > p{color:var(--ink-60);max-width:52ch;margin:0 0 22px}
.waarom-check{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:13px}
.waarom-check li{display:grid;grid-template-columns:auto 1fr;gap:13px;align-items:start}
.waarom-check .tik{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--oxide);color:var(--paper);
  display:grid;place-items:center;font-size:.85rem;margin-top:1px}
.waarom-check b{font-weight:600;font-size:1.02rem;display:block}
.waarom-check span{color:var(--ink-60);font-size:.92rem}
.waarom .acties{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px}
/* Mobiel: hele "Waarom"-sectie netjes gecentreerd en knoppen meer lucht */
@media(max-width:767px){
  .waarom-tekst{text-align:center}
  .waarom-check{width:fit-content;max-width:100%;margin-inline:auto;text-align:left}
  .waarom .acties{justify-content:center;gap:16px;margin-top:26px}
  .waarom .acties .btn{margin:0}
}

/* ---------- EXPERT-CTA (foto met diagonale hoek + tekst) ---------- */
.expert{overflow:hidden}
.expert-grid{display:grid;gap:clamp(28px,4vw,64px);align-items:center}
@media(min-width:900px){.expert-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.expert-beeld{margin:0;position:relative}
.expert-beeld img{width:100%;aspect-ratio:5/4;object-fit:cover;height:auto;
  clip-path:polygon(0 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%)}
.expert-tekst h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(2rem,3.8vw,3.4rem);max-width:15ch;margin:0 0 18px}
.expert-tekst h2 em{font-style:normal;color:var(--oxide)}
.expert-tekst > p{color:var(--ink-60);max-width:50ch;margin:0 0 26px;font-size:1.05rem;line-height:1.6}

/* =====================================================================
   PROJECT-DETAIL + VLOEIENDE BEELDOVERGANG (View Transitions API)
   ===================================================================== */
/* Cross-document overgang aan; browsers zonder steun doen gewoon een
   normale navigatie (nette fallback, geen JS nodig). */
@view-transition{navigation:auto}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* fullscreen hero-slider */
.pd-hero{position:relative;height:100svh;min-height:560px;background:var(--ink);overflow:hidden}
.pd-slider{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.pd-slider::-webkit-scrollbar{display:none}
.pd-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;position:relative}
.pd-slide img{width:100%;height:100%;object-fit:cover}
.pd-hero .sluier{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(26,25,23,.55) 0%,rgba(26,25,23,.12) 30%,rgba(26,25,23,.30) 62%,rgba(26,25,23,.92) 100%)}
.pd-hero .inhoud{position:absolute;left:0;right:0;bottom:0;z-index:3;padding-block:0 clamp(34px,5vw,64px);color:var(--paper)}
.pd-hero .kruimels{margin-bottom:auto}
.pd-hero .labels{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.pd-hero .labels span{background:rgba(243,240,234,.14);border:1px solid rgba(243,240,234,.28);backdrop-filter:blur(6px);
  padding:6px 14px;border-radius:999px;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;text-transform:uppercase}
.pd-hero h1{font-family:var(--display);font-weight:800;letter-spacing:-.032em;line-height:.98;
  font-size:clamp(2.3rem,5.4vw,5rem);max-width:16ch;margin:0 0 14px}
.pd-hero .plaats{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.8rem;color:var(--pap-60)}
.pd-hero .plaats i{color:var(--oxide);font-size:1.05rem}
/* de eerste slide morpht vanuit de projectkaart */
.pd-slide.morph img{view-transition-name:var(--vtnaam)}

/* slider-bediening */
.pd-bediening{position:absolute;right:clamp(20px,4vw,72px);bottom:clamp(34px,5vw,64px);z-index:4;
  display:flex;align-items:center;gap:10px}
.pd-bediening button{width:48px;height:48px;border-radius:50%;border:1px solid rgba(243,240,234,.3);
  background:rgba(26,25,23,.35);backdrop-filter:blur(6px);color:var(--paper);font-size:1.1rem;cursor:pointer;
  display:grid;place-items:center;transition:background .35s,border-color .35s}
.pd-bediening button:hover{background:var(--oxide);border-color:var(--oxide)}
.pd-stip{position:absolute;left:clamp(20px,4vw,72px);bottom:calc(clamp(34px,5vw,64px) + 18px);z-index:4;display:flex;gap:7px}
.pd-stip b{width:8px;height:8px;border-radius:50%;background:rgba(243,240,234,.35);transition:background .3s,width .3s}
.pd-stip b.aan{background:var(--oxide);width:22px;border-radius:4px}
@media(max-width:640px){.pd-stip{display:none}}

/* verhaal: voor / aanpak / na als afwisselende blokken */
.pd-story{display:grid;gap:clamp(30px,4vw,60px)}
@media(min-width:900px){.pd-story{grid-template-columns:minmax(0,1fr) 320px;align-items:start}}
.pd-hoofd h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.5rem,2.5vw,2.3rem);margin:0 0 14px}
.pd-hoofd h2:not(:first-child){margin-top:clamp(30px,4vw,48px)}
.pd-hoofd p{margin:0 0 1.15em;color:var(--ink-60);font-size:1.06rem;line-height:1.68}
.pd-hoofd .vink{margin:16px 0 0}
/* specs-kaart */
.pd-specs{position:sticky;top:calc(var(--kop-h) + 24px);background:var(--ink);color:var(--paper);
  padding:28px 26px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,20px 100%,0 calc(100% - 20px))}
.pd-specs h3{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--oxide);margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid var(--pap-30)}
.pd-specs dl{margin:0;display:grid;gap:0}
.pd-specs .rij{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--pap-30)}
.pd-specs .rij:last-of-type{border-bottom:0}
.pd-specs dt{font-size:.9rem;color:var(--pap-60)}
.pd-specs dd{margin:0;font-family:var(--mono);font-size:.84rem;color:var(--paper);text-align:right}
.pd-specs .btn{margin-top:20px;width:100%;justify-content:space-between}
@media(max-width:899px){.pd-specs{position:static}}

/* meer projecten */
.pd-meer{display:grid;gap:clamp(12px,1.4vw,20px);grid-template-columns:1fr}
@media(min-width:640px){.pd-meer{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.pd-meer a:nth-child(n+3){display:none}}

/* projectenoverzicht */
.proj-grid{display:grid;gap:clamp(12px,1.4vw,22px);grid-template-columns:1fr}
@media(min-width:640px){.proj-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1080px){.proj-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =====================================================================
   EXTRA BEWEGING: titelmasker, merken-marquee, scroll-voortgang
   ===================================================================== */
/* SplitText-regels: masker waarachter de woorden omhoog schuiven. Wordt na de
   animatie teruggedraaid (revert), dus dit geldt alleen tijdens het onthullen. */
.split-lijn{overflow:hidden}

/* dunne voortgangsbalk bovenaan */
.voortgang{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;
  background:var(--oxide);z-index:80;pointer-events:none;will-change:transform}

/* merken / materialen waarmee wij werken */
.merken{background:var(--paper-2);border-block:1px solid var(--hair);overflow:hidden;
  padding-block:clamp(30px,3.6vw,52px)}
.merken .kop{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:clamp(20px,2.4vw,32px);
  font-family:var(--mono);font-weight:500;font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--zink)}
.merken .kop::before,.merken .kop::after{content:"";height:1px;width:min(12vw,90px);background:var(--hair)}
.merken-spoor{display:flex;width:max-content;animation:merkloop 34s linear infinite}
.merken:hover .merken-spoor{animation-play-state:paused}
.merken-spoor span{display:inline-flex;align-items:center;gap:clamp(20px,2.6vw,40px);white-space:nowrap;
  font-family:var(--display);font-weight:700;letter-spacing:-.024em;color:var(--ink);opacity:.5;
  font-size:clamp(1.35rem,2.6vw,2.4rem);padding-inline:clamp(10px,1.4vw,20px);transition:opacity .3s}
.merken-spoor i{color:var(--oxide);font-size:.42em;opacity:1}
.merken-spoor span:hover{opacity:1}
@keyframes merkloop{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.merken-spoor{animation:none}}

/* Links op donkere secties: lichte tekst met oranje onderstreping. Zonder dit
   kregen ze donkere tekst op donkere achtergrond en zag je alleen de streep.
   Extra :not(.ckaart) verhoogt de specificiteit boven 'main p a:not(.btn)'. */
main .donker a:not(.btn):not(.ckaart),
main .cta-band a:not(.btn):not(.ckaart),
main .cijfers a:not(.btn):not(.ckaart){
  color:var(--paper);text-decoration:underline;text-decoration-color:var(--oxide);
  text-underline-offset:2px;transition:color .25s}
main .donker a:not(.btn):not(.ckaart):hover,
main .cta-band a:not(.btn):not(.ckaart):hover,
main .cijfers a:not(.btn):not(.ckaart):hover{color:var(--oxide)}

/* ---------- WHATSAPP ZWEEFKNOP ---------- */
.wa-zweef{position:fixed;right:clamp(16px,2.5vw,26px);bottom:clamp(16px,2.5vw,26px);z-index:900;
  display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 15px;border-radius:60px;
  background:#25D366;color:#fff;font-family:var(--body);font-weight:700;font-size:.95rem;text-decoration:none;
  box-shadow:0 14px 34px -10px rgba(37,211,102,.7);
  opacity:0;transform:translateY(18px) scale(.9);pointer-events:none;
  transition:opacity .5s var(--e-out),transform .5s var(--e-out),background .25s}
.wa-zweef.zichtbaar{opacity:1;transform:none;pointer-events:auto}
.wa-zweef i{font-size:1.5rem;line-height:1}
.wa-zweef:hover{background:#1EBE57;transform:translateY(-2px)}
@media(max-width:560px){
  .wa-zweef{padding:14px;gap:0}
  .wa-zweef span{display:none}
  .wa-zweef i{font-size:1.7rem}
}

/* ---------- PROJECT-HERO OP MOBIEL: pijltjes niet meer over de tekst ---------- */
@media(max-width:640px){
  .pd-hero .inhoud{text-align:center;padding-bottom:98px}
  .pd-hero .kruimels{justify-content:center}
  .pd-hero .labels{justify-content:center}
  .pd-hero .plaats{justify-content:center}
  .pd-bediening{left:0;right:0;justify-content:center;bottom:30px}
}

/* ---------- FORMULIER-BEVESTIGING ---------- */
.form-ok{display:flex;gap:14px;align-items:flex-start;padding:22px 24px;border-radius:12px;
  background:rgba(37,211,102,.1);border:1px solid rgba(37,211,102,.4);color:var(--ink)}
.form-ok i{font-size:1.6rem;color:#1EBE57;flex:0 0 auto;margin-top:1px}
.form-ok strong{display:block;font-family:var(--display);font-weight:700;font-size:1.15rem;margin-bottom:4px;letter-spacing:-.02em}
.form-ok span{color:var(--ink-60);font-size:.95rem;line-height:1.5}
.form-ok--fout{background:rgba(218,44,24,.08);border-color:rgba(218,44,24,.4)}
.form-ok--fout i{color:var(--oxide)}

/* ---------- 404-PAGINA ---------- */
.fout404{background:var(--ink);color:var(--paper);min-height:70vh;display:flex;align-items:center;
  padding-block:clamp(80px,12vw,150px);
  background-image:radial-gradient(90% 80% at 80% 0%,rgba(232,93,42,.18),transparent 55%),
    linear-gradient(160deg,#1a1917,#26231f)}
.fout404-in{max-width:720px;text-align:center;margin-inline:auto}
.fout404-cijfer{font-family:var(--display);font-weight:800;font-size:clamp(5rem,18vw,12rem);
  line-height:.9;letter-spacing:-.04em;color:var(--oxide);display:block;margin-bottom:8px}
.fout404 h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:var(--paper);
  font-size:clamp(1.8rem,4vw,2.8rem);margin:0 0 14px}
.fout404 p{color:var(--pap-60);font-size:1.1rem;max-width:52ch;margin:0 auto 30px}
.fout404-acties{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.fout404-links{margin-top:36px;display:flex;gap:8px 18px;justify-content:center;flex-wrap:wrap;
  font-size:.9rem;align-items:center}
.fout404-links span{font-family:var(--mono);font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;color:var(--pap-40)}
.fout404-links a{color:var(--paper);border-bottom:1px solid var(--pap-30);padding-bottom:2px}
.fout404-links a:hover{color:var(--oxide);border-color:var(--oxide)}

/* ---------- BLOG UITGELICHT (homepage) ---------- */
.blog-uit{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media(min-width:820px){.blog-uit{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}}
.blog-uit-kop h2{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.02;
  font-size:clamp(1.9rem,3.4vw,2.7rem);margin:0 0 16px}
.blog-uit-kop p{color:var(--ink-60);max-width:46ch;margin:0 0 26px}
.blog-uit .verwant{max-width:560px}
@media(max-width:819px){.blog-uit-kop{text-align:center}.blog-uit-kop p{margin-inline:auto}.blog-uit .verwant{margin-inline:auto}}