/*
Theme Name: Blom Ambacht
Theme URI: https://blomschildersambacht.nl/
Author: Blom Schilders Ambacht
Description: Maatwerkthema voor Blom Schilders Ambacht. Concept "Van eerste streek tot perfect eindresultaat". Scroll gestuurde homepage, houtrot doorsnede, voor en na vergelijking en een offertewizard in zeven stappen. Geen pagebuilder, geen framework.
Version: 2.2.6
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blom-ambacht
Tags: custom-menu, custom-logo, translation-ready
*/

/* ================================================================
   BLOM SCHILDERS AMBACHT: thema "Van eerste streek"
   Deliberate single visual world: a wet-lacquer dark environment
   that becomes a finished, light surface as you descend.
   Every colour is painted explicitly; no theme inversion.
   ================================================================ */
:root{
  --lak:#171D19;          /* basis: donker, maar niet zwart */
  --vernis:#202722;       /* verhoogd vlak */
  --vernis-2:#29312B;
  --groen:#013421;        /* logogroen */
  --groen-licht:#0A5334;
  --bordeaux:#7D0F1E;     /* logobordeaux, het accent */
  --bordeaux-licht:#B41C31;
  --accentlijn:#D96E7F;   /* leesbare variant van het bordeaux voor kleine tekst op donker */
  --groenvlak:#12271D;    /* logogroen als sectievlak */
  --groenvlak-2:#0E2018;
  --cremevlak:#2A2419;    /* warme cremezweem als sectievlak */
  --creme:#FBE3B5;        /* logocreme */
  --kalk:#F4F0E6;         /* krijtwit */
  --kalk-2:#E4DBC9;
  --grijs:#B0B4A9;        /* lopende tekst op donker */
  --grijs-donker:#8D9188; /* bijschriften op donker */
  --lijn:rgba(251,227,181,.20);
  --lijn-licht:rgba(23,29,25,.16);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;

  --mx:clamp(20px,5vw,88px);
  --maxw:1500px;
}
:root{--grondlaag:#B9AE97;}

*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:clamp(84px,9vw,116px);}
body{
  margin:0;background:var(--lak);color:var(--kalk);
  font-family:var(--sans);font-size:17px;line-height:1.6;
  font-weight:350;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
img{max-width:100%;display:block;}
a{color:inherit;}
button{font:inherit;color:inherit;}
::selection{background:var(--bordeaux);color:var(--creme);}
:focus-visible{outline:2px solid var(--creme);outline-offset:3px;}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx);}

/* ---- typeschaal ---- */
.display{
  font-family:var(--serif);font-optical-sizing:auto;
  font-weight:600;line-height:.94;letter-spacing:-.02em;
  text-wrap:balance;margin:0;
  font-variation-settings:"SOFT" 0,"WONK" 1;
}
.d1{font-size:clamp(2.6rem,7.6vw,6.6rem);}
.d2{font-size:clamp(2.2rem,6.2vw,5.4rem);}
.d3{font-size:clamp(1.7rem,3.4vw,3rem);line-height:1.02;}
.lead{font-size:clamp(1.02rem,1.5vw,1.32rem);line-height:1.55;color:var(--grondlaag);max-width:42ch;}
.eyebrow{
  font-size:.7rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--accentlijn);margin:0 0 1.6rem;display:flex;align-items:center;gap:.9rem;
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;flex:none;}
.on-light .eyebrow{color:var(--bordeaux);}
p{margin:0 0 1.1em;}

/* ---- the master stroke: one path, scrubbed by the whole document ---- */
.stroke-rail{
  position:fixed;left:calc(var(--mx) * .42);top:0;height:100vh;width:26px;
  z-index:40;pointer-events:none;
}
.stroke-rail svg{height:100%;width:100%;overflow:visible;}
.stroke-rail path{
  fill:none;stroke:var(--bordeaux);stroke-width:9;stroke-linecap:round;
  stroke-dasharray:var(--len);stroke-dashoffset:var(--len);
  opacity:.9;
}
.rail-cap{
  position:fixed;left:calc(var(--mx) * .42);width:26px;z-index:41;pointer-events:none;
  top:0;opacity:0;transition:opacity .4s;
}
@media (max-width:1100px){
  .stroke-rail,.rail-cap{display:none;}
  .topbar-progress{position:fixed;top:0;left:0;height:3px;background:var(--bordeaux);z-index:60;width:0;}
}
@media (min-width:1101px){ .topbar-progress{display:none;} }

/* ---- persistent nav ---- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--mx);
  transition:background .18s ease,backdrop-filter .18s ease,padding .4s ease,box-shadow .18s ease;
}
.nav.stuck{
  background:var(--lak);
  padding-block:12px;border-bottom:1px solid var(--lijn);
  box-shadow:0 10px 34px rgba(0,0,0,.45);
}
/* op een lichte sectie blijft de balk donker en leesbaar, dat is bewust */
.nav-logo img{height:clamp(34px,3.6vw,46px);width:auto;}
.nav-right{display:flex;align-items:center;gap:clamp(14px,2vw,32px);}
.nav-links{display:flex;gap:clamp(14px,1.8vw,30px);}
.nav-links a{
  text-decoration:none;font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:500;color:var(--kalk);position:relative;padding-block:6px;
}
.nav-links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--bordeaux-licht);transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.22,1,.36,1);
  border-radius:2px 40% 2px 40%/2px 2px 2px 2px;
}
.nav-links a:hover::after{transform:scaleX(1);}
@media (max-width:980px){.nav-links{display:none;}}
/* op mobiel doet de vaste balk onderin het werk: geen dubbele CTA in de header */
@media (max-width:900px){
  .nav .btn{display:none;}
  .nav{padding-block:12px;}
  body{padding-bottom:74px;}
  .hero-foot .scroll-hint{display:none;}
}

/* ---- buttons: fill like wet paint ---- */
.btn{
  --fill:var(--bordeaux);
  position:relative;display:inline-flex;align-items:center;gap:.75rem;
  padding:1.05rem 2.1rem;border:1px solid var(--fill);background:transparent;
  color:var(--creme);text-decoration:none;cursor:pointer;overflow:hidden;
  font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;font-weight:600;
  border-radius:2px;isolation:isolate;
}
.btn::before{
  content:"";position:absolute;inset:-2px -2px auto -2px;height:calc(100% + 4px);
  background:var(--fill);transform:scaleY(0);transform-origin:bottom;z-index:-1;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
  border-radius:60% 40% 0 0 / 14px 10px 0 0;
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleY(1);}
.btn--solid{background:var(--bordeaux);--fill:var(--bordeaux-licht);}
.btn--ghost{--fill:var(--creme);border-color:var(--lijn);color:var(--creme);}
.btn--ghost:hover{color:var(--lak);}
.btn .arw{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.btn:hover .arw{transform:translateX(5px);}
.on-light .btn{color:var(--kalk);}
.on-light .btn--ghost{--fill:var(--groen);border-color:var(--lijn-licht);color:var(--groen);}
.on-light .btn--ghost:hover{color:var(--kalk);}

/* ---- reveal system ---- */
.rv{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1);}
.rv.in{opacity:1;transform:none;}
.rv-d1{transition-delay:.05s;} .rv-d2{transition-delay:.1s;} .rv-d3{transition-delay:.15s;}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none;}}

/* ---- sections ---- */
section{position:relative;}
section[id],header[id]{scroll-margin-top:86px;}
.pad{padding-block:clamp(58px,7.5vw,116px);}
.on-light{
  background:var(--kalk);color:#1B211C;
  --accentlijn:var(--bordeaux);
  --grijs:#4E5349;
  --grijs-donker:#5A5F56;
  --lijn:rgba(23,29,25,.16);
}
.on-light .lead{color:#5C6259;}
.on-light .display{color:#101613;}

/* ---- HERO ---- */
/* padding-top houdt ruimte vrij voor de vaste balk, zodat de kop er
   nooit onder verdwijnt hoe groot het scherm ook is */
.hero{
  min-height:100svh;display:flex;align-items:flex-end;position:relative;overflow:hidden;
  padding-top:clamp(132px,15vh,190px);
  padding-bottom:clamp(48px,7vw,90px);
}
.hero-bg{position:absolute;inset:0;z-index:0;}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:58% 42%;
  filter:saturate(.72) contrast(1.06) brightness(.52);transform:scale(1.08);}
.hero-veil{position:absolute;inset:0;
  background:
    radial-gradient(120% 85% at 12% 96%, rgba(23,29,25,.96) 0%, rgba(23,29,25,.60) 46%, rgba(23,29,25,.16) 100%),
    linear-gradient(180deg, rgba(23,29,25,.82) 0%, rgba(23,29,25,0) 34%, rgba(23,29,25,.88) 100%);}
.hero-inner{position:relative;z-index:2;width:100%;}
.hero h1{margin-bottom:1.6rem;}
.hero h1 .ln{display:block;overflow:hidden;}
.hero h1 .ln span{display:block;transform:translateY(105%);transition:transform 1.15s cubic-bezier(.19,1,.22,1);}
.hero.lit h1 .ln span{transform:none;}
.hero h1 .ln:nth-child(2) span{transition-delay:.13s;}
.hero-sub{max-width:34ch;font-size:clamp(1rem,1.35vw,1.2rem);color:var(--kalk-2);opacity:0;transition:opacity 1s .5s;}
.hero.lit .hero-sub{opacity:1;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.6rem;opacity:0;transform:translateY(14px);
  transition:opacity .9s .68s,transform .9s .68s;}
.hero.lit .hero-cta{opacity:1;transform:none;}
.hero-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:clamp(38px,6vw,72px);
  border-top:1px solid var(--lijn);padding-top:18px;font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--grijs);}
.scroll-hint{display:flex;align-items:center;gap:10px;}
.scroll-hint i{display:block;width:1px;height:34px;background:linear-gradient(var(--bordeaux-licht),transparent);animation:drip 2.4s infinite;}
@keyframes drip{0%{transform:scaleY(.2);opacity:0}30%{opacity:1}100%{transform:scaleY(1);opacity:0}}
@media (prefers-reduced-motion:reduce){.scroll-hint i{animation:none;}
  .hero h1 .ln span{transform:none;} .hero-sub,.hero-cta{opacity:1;transform:none;}}

/* ---- SECTION 2 : het verschil ---- */
.swap{height:170vh;position:relative;}
.swap-sticky{position:sticky;top:0;height:100svh;}
.swap-stage{position:relative;height:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--mx);}
.swap-line{position:absolute;left:var(--mx);right:var(--mx);top:50%;max-width:1180px;
  transform:translateY(-50%);
  transition:opacity .7s ease,transform .9s cubic-bezier(.22,1,.36,1);}
.swap-line.out-up{opacity:0;transform:translateY(calc(-50% - 36px));pointer-events:none;}
.swap-line.out-down{opacity:0;transform:translateY(calc(-50% + 36px));pointer-events:none;}
.prep-list{display:grid;gap:0;margin-top:clamp(40px,6vw,80px);max-width:640px;}
.prep-list li{list-style:none;display:flex;align-items:baseline;gap:1.4rem;
  padding:1.05rem 0;border-bottom:1px solid var(--lijn);font-family:var(--serif);
  font-size:clamp(1.35rem,2.6vw,2.1rem);font-weight:500;}
.prep-list li b{font-family:var(--sans);font-size:.7rem;letter-spacing:.2em;color:var(--bordeaux-licht);font-weight:600;flex:none;width:2.2em;}

/* ---- SECTION 3 : houtrot cross-section ---- */
.rot{background:linear-gradient(180deg,var(--groenvlak-2),var(--groenvlak));}
.rot-stage{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(30px,5vw,72px);align-items:center;}
@media (max-width:900px){.rot-stage{grid-template-columns:1fr;}}
.xsec{position:relative;border:1px solid var(--lijn);background:#0B0D0C;border-radius:3px;overflow:hidden;}
.xsec svg{display:block;width:100%;height:auto;}
.xsec-legend{display:grid;gap:.1rem;margin-top:1.4rem;}
.xsec-legend div{display:flex;gap:.9rem;align-items:center;padding:.6rem 0;border-top:1px solid var(--lijn);
  font-size:.82rem;letter-spacing:.04em;color:var(--grijs);opacity:.3;transition:opacity .5s,color .5s;}
.xsec-legend div.on{opacity:1;color:var(--kalk);}
.xsec-legend i{width:14px;height:14px;border-radius:2px;flex:none;}
.xsec-scrub{margin-top:1.6rem;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs-donker);}

/* ---- SERVICES ---- */
.svc{border-top:1px solid var(--lijn);}
.svc a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(14px,3vw,40px);
  padding:clamp(20px,3.1vw,38px) 0;border-bottom:1px solid var(--lijn);text-decoration:none;
  position:relative;transition:padding-left .6s cubic-bezier(.22,1,.36,1);
}
.svc a:hover{padding-left:clamp(8px,1.6vw,26px);}
.svc-no{font-size:.7rem;letter-spacing:.16em;color:var(--grijs-donker);font-variant-numeric:tabular-nums;}
.svc-name{font-family:var(--serif);font-size:clamp(1.5rem,3.6vw,3rem);font-weight:500;line-height:1;
  transition:color .5s;letter-spacing:-.015em;}
.svc a:hover .svc-name{color:var(--creme);}
.svc-meta{font-size:.76rem;color:var(--grijs);letter-spacing:.04em;text-align:right;max-width:22ch;}
.svc-peek{
  position:fixed;width:290px;height:370px;pointer-events:none;z-index:45;
  opacity:0;transform:translate(-50%,-50%) scale(.94);transition:opacity .45s,transform .6s cubic-bezier(.22,1,.36,1);
  border-radius:2px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.svc-peek img{width:100%;height:100%;object-fit:cover;}
.svc-peek.on{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media (hover:none),(max-width:900px){.svc-peek{display:none;}}

/* ---- PERFECTIE horizontal ---- */
.hscroll{position:relative;}
.hscroll-sticky{position:sticky;top:0;height:100svh;display:flex;align-items:center;overflow:hidden;}
.htrack{display:flex;gap:clamp(30px,5vw,90px);padding-inline:var(--mx);will-change:transform;}
.hcard{flex:none;width:min(78vw,430px);border-top:2px solid var(--bordeaux);padding-top:1.3rem;}
.htrack::after{content:"";flex:none;width:var(--mx);}
.hcard .n{font-family:var(--serif);font-size:clamp(3.4rem,9vw,7rem);line-height:.85;color:var(--groen-licht);
  font-variant-numeric:tabular-nums;font-weight:700;}
.hcard h3{font-family:var(--serif);font-size:clamp(1.5rem,3vw,2.3rem);font-weight:500;margin:.4rem 0 .7rem;letter-spacing:-.01em;}
.hcard p{color:var(--grondlaag);font-size:.96rem;max-width:34ch;}

/* ---- BEFORE / AFTER brush wipe ---- */
.ba{height:190vh;position:relative;}
.ba-sticky{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--groenvlak-2);}
.ba-img{position:absolute;inset:0;}
.ba-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.ba-after{clip-path:polygon(var(--edge));will-change:clip-path;}
.ba-wet{position:absolute;top:0;bottom:0;width:3px;background:linear-gradient(180deg,rgba(251,227,181,0),rgba(251,227,181,.85),rgba(251,227,181,0));
  filter:blur(1px);left:0;transform:translateX(var(--wet,0px));will-change:transform;opacity:.9;}
.ba-tag{position:absolute;top:clamp(80px,11vh,130px);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  padding:.5rem .9rem;background:rgba(7,9,8,.7);backdrop-filter:blur(6px);border:1px solid var(--lijn);}
.ba-tag.l{left:var(--mx);} .ba-tag.r{right:var(--mx);color:var(--creme);border-color:rgba(251,227,181,.4);}
.ba-meta{position:absolute;left:var(--mx);right:var(--mx);bottom:clamp(28px,5vh,58px);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 30px;
  background:linear-gradient(0deg,rgba(7,9,8,.9),rgba(7,9,8,0));padding-top:40px;}
.ba-meta dt{font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs-donker);margin-bottom:.35rem;}
.ba-meta dd{margin:0;font-family:var(--serif);font-size:clamp(.98rem,1.5vw,1.22rem);color:var(--kalk);}

/* ---- projects ---- */
.proj{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(16px,2.4vw,34px);}
.pcard{position:relative;overflow:hidden;background:var(--vernis);border-radius:2px;}
.pcard .ph{aspect-ratio:4/5;overflow:hidden;}
.pcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.5s cubic-bezier(.22,1,.36,1),filter 1.2s;
  filter:saturate(.78) brightness(.86);}
.pcard:hover img{transform:scale(1.055);filter:saturate(1) brightness(1);}
.pcard .cap{padding:1.1rem 1.2rem 1.3rem;}
.pcard .cap b{display:block;font-family:var(--serif);font-size:1.28rem;font-weight:500;margin-bottom:.2rem;}
.pcard .cap span{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);}
.loupe{position:fixed;width:118px;height:118px;border-radius:50%;pointer-events:none;z-index:46;
  border:1px solid rgba(251,227,181,.55);backdrop-filter:brightness(1.5) saturate(1.35) contrast(1.05);
  transform:translate(-50%,-50%) scale(.5);opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1);
  box-shadow:inset 0 0 24px rgba(0,0,0,.35);}
.loupe.on{opacity:1;transform:translate(-50%,-50%) scale(1);}
@media (hover:none){.loupe{display:none;}}

/* ---- craftsman ---- */
.crafts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,80px);align-items:center;}
@media (max-width:860px){.crafts{grid-template-columns:1fr;}}
.portrait-slot{aspect-ratio:4/5;max-height:70vh;border:1px dashed rgba(251,227,181,.28);display:grid;place-items:center;
  text-align:center;padding:2rem;background:
    repeating-linear-gradient(45deg,rgba(251,227,181,.028) 0 12px,transparent 12px 24px),var(--vernis);}
.portrait-slot p{color:var(--grijs);font-size:.86rem;max-width:26ch;margin:0;}
.portrait-slot em{display:block;font-family:var(--serif);font-style:normal;font-size:1.15rem;color:var(--creme);margin-bottom:.7rem;}

/* ---- reviews ---- */
.quote{max-width:24ch;font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,2.05rem);font-weight:400;line-height:1.24;letter-spacing:-.012em;}
.quote-src{margin-top:1.2rem;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);}
.stars{color:var(--bordeaux-licht);letter-spacing:.22em;font-size:.9rem;}
.empty-note{border:1px dashed var(--lijn);padding:1.4rem 1.5rem;color:var(--grijs);font-size:.88rem;max-width:52ch;}

/* ---- werkwijze ---- */
.steps{counter-reset:s;display:grid;gap:0;}
.steps li{list-style:none;counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:clamp(16px,3vw,44px);
  padding:clamp(18px,2.6vw,30px) 0;border-bottom:1px solid var(--lijn-licht);align-items:baseline;}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-weight:600;
  font-size:clamp(1.1rem,1.7vw,1.5rem);color:var(--bordeaux);font-variant-numeric:tabular-nums;}
.steps b{font-family:var(--serif);font-weight:500;font-size:clamp(1.15rem,2vw,1.6rem);display:block;margin-bottom:.25rem;}
.steps span{color:#5C6259;font-size:.94rem;}

/* ---- WIZARD ---- */
.wiz{background:var(--vernis);border:1px solid var(--lijn);border-radius:3px;overflow:hidden;max-width:840px;margin-inline:auto;}
.wiz-head{padding:clamp(20px,3vw,30px) clamp(20px,3.4vw,38px) 0;}
.wiz-bar{height:3px;background:rgba(251,227,181,.12);border-radius:3px;overflow:hidden;margin-top:14px;}
.wiz-bar i{display:block;height:100%;width:14%;background:var(--bordeaux);
  border-radius:0 40% 40% 0/0 2px 2px 0;transition:width .7s cubic-bezier(.65,0,.35,1);}
.wiz-step{padding:clamp(22px,3.4vw,40px) clamp(20px,3.4vw,38px) clamp(24px,3.4vw,38px);display:none;}
.wiz-step.on{display:block;animation:wstep .55s cubic-bezier(.22,1,.36,1);}
@keyframes wstep{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.wiz-step.on{animation:none;}}
.wiz-q{font-family:var(--serif);font-size:clamp(1.4rem,2.8vw,2.15rem);font-weight:500;margin:.2rem 0 .4rem;line-height:1.08;}
.wiz-help{color:var(--grijs);font-size:.9rem;margin-bottom:1.5rem;}
.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{border:1px solid var(--lijn);background:transparent;padding:.72rem 1.05rem;border-radius:2px;cursor:pointer;
  font-size:.88rem;transition:background .35s,border-color .35s,color .35s;color:var(--kalk);}
.chip:hover{border-color:rgba(251,227,181,.42);}
.chip[aria-pressed="true"]{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--creme);}
.f-grid{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr));}
.f-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:560px){.f-grid,.f-grid-3{grid-template-columns:minmax(0,1fr);}}
label.fl{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);margin-bottom:.5rem;}
label.fl .req{color:var(--accentlijn);margin-left:.25em;}
.veld{display:flex;flex-direction:column;}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;background:#141A16;border:1px solid var(--lijn);color:var(--kalk);
  padding:.95rem 1rem;border-radius:2px;font-family:var(--sans);font-size:1rem;line-height:1.4;
  transition:border-color .2s,background .2s,box-shadow .2s;
  -webkit-appearance:none;appearance:none;
}
input::placeholder,textarea::placeholder{color:#6E736A;}
input:hover,select:hover,textarea:hover{border-color:rgba(251,227,181,.34);}
input:focus,select:focus,textarea:focus{
  border-color:var(--creme);outline:none;background:#11160F;
  box-shadow:0 0 0 3px rgba(251,227,181,.16);
}
textarea{min-height:120px;resize:vertical;}
select{
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FBE3B5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;background-size:12px 8px;padding-right:2.6rem;cursor:pointer;
}
select option{background:#141A16;color:var(--kalk);}

/* ---- foutstaat per veld ---- */
.veld-fout input,.veld-fout select,.veld-fout textarea{border-color:#E06A7D;background:rgba(224,106,125,.06);}
.veldfout{display:block;font-size:.82rem;color:#F0879A;margin-top:.42rem;}
.veldfout:empty{display:none;}

/* ---- gelukt ---- */
input:not(:placeholder-shown):valid[data-check]{border-color:rgba(10,83,52,.9);}
.slots{display:grid;gap:12px;}
.slot{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;}
.wiz-nav{display:flex;justify-content:space-between;gap:12px;margin-top:1.9rem;align-items:center;}
.linkbtn{background:none;border:0;cursor:pointer;color:var(--grijs);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.6rem 0;}
.linkbtn:hover{color:var(--kalk);}
.uploader{border:1px dashed var(--lijn);padding:1.6rem;text-align:center;border-radius:2px;cursor:pointer;transition:border-color .4s,background .4s;}
.uploader:hover{border-color:rgba(251,227,181,.4);background:rgba(251,227,181,.03);}
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.thumbs img{width:66px;height:66px;object-fit:cover;border-radius:2px;border:1px solid var(--lijn);}
.wiz-done{text-align:center;padding:clamp(34px,6vw,72px) clamp(20px,4vw,44px);display:none;}
.wiz-done.on{display:block;}
.wiz-done svg{margin:0 auto 1.6rem;display:block;}
.wiz-done path{stroke:var(--bordeaux);stroke-width:11;fill:none;stroke-linecap:round;
  stroke-dasharray:420;stroke-dashoffset:420;animation:paint 1.15s .15s cubic-bezier(.65,0,.35,1) forwards;}
@keyframes paint{to{stroke-dashoffset:0}}
.note{font-size:.8rem;color:var(--grijs-donker);margin-top:1.1rem;}

/* ---- sticky mobile CTA ---- */
.mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:55;display:none;}
.mcta .btn{width:100%;justify-content:center;background:var(--bordeaux);border-color:var(--bordeaux);
  box-shadow:0 14px 40px rgba(0,0,0,.55);}
@media (max-width:900px){.mcta{display:block;}
  /* ruimte onder de pagina zodat de vaste knop niets afdekt */
  body{padding-bottom:76px;}
  .hero-foot{padding-bottom:8px;}
  footer .f-bot{padding-bottom:10px;}}

/* ---- final moment ---- */
.finale{min-height:88svh;display:grid;place-items:center;text-align:center;position:relative;overflow:hidden;background:var(--groenvlak-2);}
.finale-bg{position:absolute;inset:0;}
.finale-bg img{width:100%;height:100%;object-fit:cover;filter:brightness(.34) saturate(.7);transform:scale(1.05);}
.finale::after{content:"";position:absolute;inset:0;background:radial-gradient(60% 50% at 50% 50%,rgba(7,9,8,.2),rgba(7,9,8,.94));}
.finale .wrap{position:relative;z-index:2;}
.sheen{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(251,227,181,.11) 47%,rgba(255,255,255,.16) 50%,rgba(251,227,181,.11) 53%,transparent 62%);
  transform:translateX(-40%);}

/* ---- footer ---- */
footer{background:#070908;border-top:1px solid var(--lijn);padding-block:clamp(40px,6vw,72px) 34px;font-size:.86rem;color:var(--grijs);}
.f-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(24px,3vw,44px);}
@media (max-width:900px){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.f-cols{grid-template-columns:minmax(0,1fr);gap:26px;}}
footer a{color:var(--grondlaag);text-decoration:none;}
footer a:hover{color:var(--creme);}
footer h4{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs-donker);margin:0 0 .9rem;font-weight:600;}
.f-bot{margin-top:34px;padding-top:20px;border-top:1px solid var(--lijn);display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:.76rem;color:var(--grijs-donker);}
.ph-flag{color:var(--bordeaux-licht);}

/* ================================================================
   WORDPRESS INTEGRATIE
   Aanvullingen die alleen in WordPress nodig zijn: adminbalk,
   editorinhoud van gewone pagina's, bijschriften en uitlijning.
   ================================================================ */
.admin-bar .nav{top:32px;}
@media (max-width:782px){.admin-bar .nav{top:46px;}}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip-link:focus{position:fixed;left:16px;top:16px;z-index:9999;background:var(--creme);color:var(--lak);padding:12px 18px;border-radius:2px;clip:auto;width:auto;height:auto;}

/* ---- kop van een gewone pagina ---- */
.page-head{padding:calc(clamp(84px,8vw,116px) + clamp(26px,3vw,44px)) 0 clamp(30px,4vw,52px);border-bottom:1px solid var(--lijn);}
.page-head .display{max-width:20ch;}
.page-head .lead{max-width:52ch;margin-top:1.4rem;}
.crumbs{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--grijs-donker);margin:0 0 1.4rem;}
.crumbs a{text-decoration:none;color:var(--grijs);}
.crumbs a:hover{color:var(--creme);}

/* ---- redactionele inhoud uit de editor ---- */
.entry{max-width:70ch;font-size:1.02rem;}
.entry>*+*{margin-top:1.25em;}
.entry h2{font-family:var(--serif);font-weight:600;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.12;letter-spacing:-.015em;margin-top:2.4em;color:var(--kalk);}
.entry h3{font-family:var(--serif);font-weight:600;font-size:clamp(1.22rem,2vw,1.5rem);line-height:1.2;margin-top:2em;color:var(--kalk);}
.entry h4{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:.02em;margin-top:1.9em;color:var(--creme);}
.entry p,.entry li{color:var(--grijs);}
.entry strong{color:var(--kalk);font-weight:500;}
.entry a{color:var(--creme);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;text-decoration-color:rgba(251,227,181,.4);}
.entry a:hover{text-decoration-color:var(--creme);}
.entry ul,.entry ol{padding-left:1.3em;}
.entry li+li{margin-top:.5em;}
.entry ul{list-style:none;padding-left:0;}
.entry ul li{position:relative;padding-left:1.5em;}
.entry ul li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px;background:var(--bordeaux-licht);}
.entry ol li::marker{color:var(--creme);font-variant-numeric:tabular-nums;}
.entry blockquote{margin:2em 0;padding-left:1.4em;border-left:2px solid var(--bordeaux);font-family:var(--serif);font-size:1.22rem;line-height:1.4;color:var(--kalk);}
.entry table{width:100%;border-collapse:collapse;font-size:.94rem;}
.entry table th,.entry table td{text-align:left;padding:.7em .9em;border-bottom:1px solid var(--lijn);}
.entry table th{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--creme);font-weight:500;}
.entry td{font-variant-numeric:tabular-nums;}
.entry-wide{max-width:none;overflow-x:auto;}
.entry img,.entry .wp-caption img{border-radius:2px;}
.entry figure{margin:2.2em 0;}
.entry figcaption,.wp-caption-text{font-size:.8rem;color:var(--grijs-donker);margin-top:.7em;}
.entry hr,.wp-block-separator{border:0;border-top:1px solid var(--lijn);margin:3em 0;}
.entry code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;background:rgba(251,227,181,.08);padding:.15em .4em;border-radius:2px;}
.alignwide{max-width:1180px;margin-inline:auto;}
.alignfull{max-width:none;}
.alignleft{float:left;margin:.4em 1.6em 1.2em 0;}
.alignright{float:right;margin:.4em 0 1.2em 1.6em;}
.aligncenter{margin-inline:auto;}
.entry .wp-block-image{margin:2.2em 0;}
.on-light .entry p,.on-light .entry li{color:var(--grijs-donker);}
.on-light .entry h2,.on-light .entry h3,.on-light .entry strong{color:var(--lak);}
.on-light .entry a{color:var(--groen);text-decoration-color:rgba(1,52,33,.4);}

/* ---- contactblok ---- */
.contact-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,5vw,64px);align-items:start;}
.contact-card{border:1px solid var(--lijn);padding:clamp(22px,3vw,34px);background:var(--vernis);}
.contact-card h3{font-family:var(--serif);font-size:1.25rem;margin:0 0 1rem;color:var(--kalk);}
.contact-card p{margin:0;line-height:2;color:var(--grijs);}
.contact-card a{color:var(--creme);text-decoration:none;}
.contact-card a:hover{text-decoration:underline;}

/* ---- kaartraster voor diensten en projecten uit de database ---- */
.arch{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);}
@media (max-width:900px){.arch{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.arch{grid-template-columns:minmax(0,1fr);}}
.arch a{text-decoration:none;display:block;border:1px solid var(--lijn);padding:clamp(20px,2.6vw,30px);transition:border-color .35s,transform .35s;}
.arch a:hover{border-color:var(--creme);transform:translateY(-3px);}
.arch h3{font-family:var(--serif);font-size:1.3rem;margin:0 0 .5rem;color:var(--kalk);}
.arch p{margin:0;font-size:.94rem;color:var(--grijs);}

/* ---- 404 ---- */
.nf{min-height:76vh;display:grid;place-items:center;text-align:center;}

/* ---- akkoordverklaring en foutmelding in de wizard ---- */
.akkoord{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.6rem;font-size:.88rem;color:var(--grijs);line-height:1.5;cursor:pointer;}
.akkoord input{appearance:none;flex:0 0 auto;width:20px;height:20px;margin-top:1px;border:1px solid var(--lijn);background:transparent;border-radius:2px;cursor:pointer;transition:background .2s,border-color .2s;}
.akkoord input:checked{background:var(--bordeaux);border-color:var(--bordeaux);}
.akkoord input:checked::after{content:"";display:block;width:5px;height:10px;margin:2px auto 0;border:solid var(--creme);border-width:0 2px 2px 0;transform:rotate(45deg);}
.akkoord a{color:var(--creme);}
.wiz-fout{margin:1.1rem 0 0;font-size:.88rem;color:#F0879A;min-height:1.3em;}
.wiz-fout:empty{margin:0;min-height:0;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.wiz.bezig{opacity:.6;pointer-events:none;}
#wizNext[disabled]{opacity:.5;cursor:progress;}

/* ---- kortere hero voor dienstpagina's ---- */
.hero--dienst{min-height:62svh;padding-top:clamp(126px,14vh,172px);}
.hero--dienst .hero-inner{padding-bottom:clamp(50px,7vw,90px);}
.hero--dienst .eyebrow{margin-bottom:1.1rem;}

/* ---- paginering ---- */
.nav-links .page-numbers,.pagination .page-numbers{display:inline-flex;align-items:center;justify-content:center;min-width:42px;height:42px;padding:0 12px;border:1px solid var(--lijn);margin-right:8px;text-decoration:none;font-variant-numeric:tabular-nums;font-size:.92rem;transition:border-color .3s,color .3s;}
.pagination .page-numbers:hover{border-color:var(--creme);color:var(--creme);}
.pagination .current{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--creme);}
.pagination .screen-reader-text{display:none;}

/* ================================================================
   KWALITEIT IN ELK DETAIL
   ================================================================ */
.detail{background:var(--cremevlak);}
.detail-intro{max-width:64ch;margin-bottom:clamp(40px,6vw,74px);}
.detail-intro .lead+.lead{margin-top:1.2rem;}
.detail-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);}
@media (max-width:960px){.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.detail-grid{grid-template-columns:minmax(0,1fr);}}
.detail-item{background:var(--cremevlak);padding:clamp(24px,3vw,38px);display:flex;flex-direction:column;}
.detail-item b{display:block;font-family:var(--serif);font-weight:600;font-size:1.18rem;line-height:1.2;color:var(--creme);margin-bottom:.7rem;}
.detail-item p{margin:0;font-size:.95rem;color:var(--grijs);}

/* ================================================================
   NETWERK
   ================================================================ */
.netwerk{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(30px,6vw,84px);align-items:start;}
.netwerk .lead+.lead{margin-top:1.1rem;}
.netwerk .btn{margin-top:2rem;}
.netwerk-lijst{border:1px solid var(--lijn);padding:clamp(24px,3vw,36px);background:var(--vernis);}
.netwerk-lijst ul{list-style:none;margin:0;padding:0;}
.netwerk-lijst li{padding:.72rem 0;border-bottom:1px solid var(--lijn);font-size:.98rem;color:var(--kalk);}
.netwerk-lijst li:last-of-type{border-bottom:0;}
@media (max-width:860px){.netwerk{grid-template-columns:1fr;}}

/* ================================================================
   WERKGEBIED
   ================================================================ */
.geo{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(24px,3.4vw,46px);}
@media (max-width:1000px){.geo{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.geo{grid-template-columns:minmax(0,1fr);}}
.geo-kolom h3{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--bordeaux);margin:0 0 1.1rem;padding-bottom:.8rem;border-bottom:1px solid var(--lijn-licht);}
.geo-kolom ul{list-style:none;margin:0;padding:0;}
.geo-kolom li{padding:.34rem 0;font-size:.98rem;color:var(--grijs-donker);}
.on-light .geo-kolom li{color:#4A4F49;}


/* ================================================================
   RUIMTE VOOR DE VASTE BALK
   Secties met een anker krijgen marge, zodat een kop nooit onder
   de balk verdwijnt wanneer er vanuit het menu naartoe gesprongen
   wordt.
   ================================================================ */
section[id],header[id]{scroll-margin-top:clamp(84px,9vw,116px);}

/* ================================================================
   DIRECT CONTACT
   Compacte strook onder de hero: bellen, mailen of meteen offerte.
   ================================================================ */
.snel{background:var(--vernis);border-block:1px solid var(--lijn);}
.snel-in{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:clamp(18px,2.4vw,34px);align-items:center;padding-block:clamp(24px,3vw,40px);}
@media (max-width:980px){.snel-in{grid-template-columns:repeat(2,minmax(0,1fr));}.snel-actie{justify-self:stretch;}.snel-actie .btn{width:100%;justify-content:center;}}
@media (max-width:560px){.snel-in{grid-template-columns:minmax(0,1fr);}}
.snel-item{display:flex;flex-direction:column;gap:.42rem;}
.snel-item .lbl{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--accentlijn);font-weight:600;}
.snel-item .waarde{font-family:var(--serif);font-size:clamp(1rem,1.25vw,1.24rem);line-height:1.2;color:var(--kalk);text-decoration:none;overflow-wrap:break-word;}
a.waarde:hover{color:var(--creme);text-decoration:underline;text-underline-offset:4px;}
.snel-item .sub{font-size:.86rem;color:var(--grijs);}
.snel-actie{justify-self:end;}
@media (max-width:760px){.snel-actie{justify-self:stretch;}.snel-actie .btn{width:100%;justify-content:center;}}

/* ---- terugvallijn onder de wizard ---- */
.wiz-alt{margin-top:1.6rem;text-align:center;font-size:.92rem;color:var(--grijs);}
.wiz-alt a{color:var(--creme);text-decoration:underline;text-underline-offset:3px;}


/* ================================================================
   KEUZE TUSSEN DE WIZARD EN HET KORTE FORMULIER
   ================================================================ */
.form-keuze{display:flex;gap:8px;padding:clamp(20px,3.4vw,38px) clamp(20px,3.4vw,38px) 0;flex-wrap:wrap;}
.form-keuze button{
  flex:1 1 200px;border:1px solid var(--lijn);background:transparent;color:var(--grijs);
  padding:.85rem 1.1rem;border-radius:2px;cursor:pointer;font-size:.8rem;letter-spacing:.1em;
  text-transform:uppercase;font-weight:600;transition:border-color .25s,color .25s,background .25s;
}
.form-keuze button:hover{border-color:rgba(251,227,181,.4);color:var(--kalk);}
.form-keuze button[aria-selected="true"]{background:var(--bordeaux);border-color:var(--bordeaux);color:var(--creme);}

.kort{padding:clamp(22px,3.4vw,40px) clamp(20px,3.4vw,38px) clamp(24px,3.4vw,38px);display:none;}
.kort.on{display:block;}
.kort .f-grid{gap:18px;}
.kort .wiz-q{margin-bottom:.4rem;}
.kort-nav{display:flex;justify-content:flex-end;margin-top:1.8rem;}
@media (max-width:560px){.kort-nav .btn{width:100%;justify-content:center;}}

/* ================================================================
   ARTIKELPAGINA: tekst links, offerteblok rechts
   Zo blijft de leesregel kort en staat de aanvraag altijd in beeld.
   ================================================================ */
.artikel{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px);gap:clamp(30px,5vw,80px);align-items:start;}
.artikel .entry{max-width:none;}
.artikel .entry>p,.artikel .entry>h2,.artikel .entry>h3,.artikel .entry>h4,
.artikel .entry>blockquote,.artikel .entry>ol:not(.stappen),
.artikel .entry>ul:not(.stappen),.artikel .entry>figure{max-width:68ch;}
.zijkaart{position:sticky;top:clamp(94px,10vw,128px);display:flex;flex-direction:column;gap:14px;}
.zijblok{border:1px solid var(--lijn);background:var(--vernis);padding:clamp(22px,2.4vw,30px);}
.zijblok h3{font-family:var(--serif);font-size:1.22rem;margin:0 0 .8rem;color:var(--kalk);line-height:1.15;}
.zijblok p{margin:0 0 1.1rem;font-size:.94rem;color:var(--grijs);}
.zijblok .btn{width:100%;justify-content:center;padding-inline:1.2rem;}
.zijblok-lijst{list-style:none;margin:0;padding:0;}
.zijblok-lijst li{border-bottom:1px solid var(--lijn);}
.zijblok-lijst li:last-child{border-bottom:0;}
.zijblok-lijst a{display:block;padding:.72rem 0;text-decoration:none;font-size:.94rem;color:var(--grijs);transition:color .25s,padding-left .25s;}
.zijblok-lijst a:hover,.zijblok-lijst a[aria-current]{color:var(--creme);padding-left:6px;}
.zijblok-contact{font-size:.95rem;line-height:2;margin:0;}
.zijblok-contact a{color:var(--creme);text-decoration:none;}
.zijblok-contact a:hover{text-decoration:underline;}
@media (max-width:900px){
  .artikel{grid-template-columns:minmax(0,1fr);}
  .zijkaart{position:static;}
}

/* ================================================================
   DIENSTENOVERZICHT: alle diensten in één beeld
   ================================================================ */
.dienstraster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.3vw,18px);align-items:stretch;}

@media (max-width:640px){
  /* twee kaarten naast elkaar houdt alle zes in beeld zonder eindeloos scrollen */
  .dienstraster{gap:10px;}
  .dienstkaart{padding:16px 14px;}
  .dienstkaart-tekst h3{font-size:1rem;}
  .dienstkaart-tekst p{font-size:.82rem;line-height:1.4;}
  .dienstkaart-meer{margin-top:.8rem;font-size:.62rem;letter-spacing:.12em;}
}

.dienstkaart{
  position:relative;display:flex;flex-direction:column;gap:.5rem;text-decoration:none;
  border:1px solid var(--lijn);background:var(--vernis);border-radius:2px;
  padding:clamp(20px,2.1vw,30px);min-height:100%;
  transition:border-color .3s cubic-bezier(.22,1,.36,1),transform .3s cubic-bezier(.22,1,.36,1),background .3s;
}
.dienstkaart::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--bordeaux);
  transform:scaleY(0);transform-origin:top;transition:transform .4s cubic-bezier(.22,1,.36,1);
}
.dienstkaart:hover,.dienstkaart:focus-visible{border-color:rgba(251,227,181,.45);transform:translateY(-3px);background:var(--vernis-2);}
.dienstkaart:hover::before,.dienstkaart:focus-visible::before{transform:scaleY(1);}
.dienstkaart-tekst{display:flex;flex-direction:column;gap:.5rem;flex:1;}
.dienstkaart-tekst h3{
  font-family:var(--serif);font-weight:600;font-size:clamp(1.14rem,1.5vw,1.45rem);
  line-height:1.12;margin:0;color:var(--kalk);text-wrap:balance;
}
.dienstkaart-tekst p{margin:0;font-size:.92rem;line-height:1.5;color:var(--grijs);}
.dienstkaart-meer{
  margin-top:1.1rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--accentlijn);display:flex;align-items:center;gap:.45rem;
}
.dienstkaart-meer span{transition:transform .4s cubic-bezier(.22,1,.36,1);}
.dienstkaart:hover .dienstkaart-meer span{transform:translateX(5px);}

/* ---- compacte kop boven een overzicht ---- */
.page-head--kort{padding-top:calc(clamp(84px,8vw,116px) + clamp(14px,1.6vw,24px));padding-bottom:clamp(20px,2.2vw,30px);}
.page-head--kort .kop-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,60px);align-items:end;}
.page-head--kort h1{max-width:18ch;font-size:clamp(1.9rem,4.4vw,3.4rem);}
.page-head--kort .lead{max-width:52ch;margin-top:.9rem;font-size:1rem;}
.page-head--kort .kop-acties{margin-top:0;}
@media (max-width:860px){.page-head--kort .kop-in{grid-template-columns:minmax(0,1fr);align-items:start;}.page-head--kort .kop-acties{margin-top:1.6rem;}}

/* ================================================================
   HOUTROT: echte beelden in plaats van een tekening
   ================================================================ */
.rot-stap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.2vw,18px);}
@media (max-width:760px){
  .rot-stap{grid-template-columns:minmax(0,1fr);gap:12px;}
  .rot-fig img{aspect-ratio:16/9;}
  .rot-fig figcaption{padding:14px;}
}
.rot-fig{margin:0;border:1px solid var(--lijn);background:var(--groenvlak-2);border-radius:2px;overflow:hidden;}
.rot-fig img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.rot-fig figcaption{padding:clamp(14px,1.6vw,20px);}
.rot-fig b{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--creme);margin-bottom:.35rem;}
.rot-fig span{font-size:.88rem;color:var(--grijs);line-height:1.45;}
.rot-stap-nr{font-size:.66rem;letter-spacing:.2em;color:var(--accentlijn);font-weight:600;display:block;margin-bottom:.5rem;}
.illustratie{font-size:.78rem;color:var(--grijs-donker);margin-top:1.1rem;}

/* ---- uitleg onder de houtrotbeelden ---- */
.rot-uitleg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,64px);margin-top:clamp(34px,4vw,60px);align-items:start;}
@media (max-width:760px){.rot-uitleg{grid-template-columns:minmax(0,1fr);}}
.rot-uitleg h3{font-family:var(--serif);font-size:clamp(1.24rem,1.9vw,1.6rem);margin:0 0 1rem;color:var(--kalk);}
.rot-uitleg p{color:var(--grijs);max-width:46ch;}
.rot-uitleg .btn{margin-top:.6rem;}
.vinklijst{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,40px);}
@media (max-width:560px){.vinklijst{grid-template-columns:minmax(0,1fr);}}
.vinklijst li{position:relative;padding:.6rem 0 .6rem 1.7rem;border-bottom:1px solid var(--lijn);color:var(--grijs);font-size:.96rem;}
.vinklijst li:last-child{border-bottom:0;}
.vinklijst li::before{
  content:"";position:absolute;left:0;top:1.05rem;width:8px;height:8px;border-radius:50%;
  background:var(--accentlijn);
}

/* ---- knoppen direct onder een paginakop ---- */
.kop-acties{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(22px,2.6vw,34px);}
@media (max-width:520px){.kop-acties{flex-direction:column;}.kop-acties .btn{width:100%;justify-content:center;}}

/* ---- kop van een sectie met tekst ernaast ---- */
.sectie-kop{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:end;}
@media (max-width:860px){.sectie-kop{grid-template-columns:minmax(0,1fr);align-items:start;gap:1.2rem;}}

/* ================================================================
   HORIZONTALE OPSOMMINGEN
   In één oogopslag te overzien in plaats van onder elkaar.
   ================================================================ */
.fasen{
  list-style:none;margin:clamp(26px,3vw,44px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:1px;
  background:var(--lijn-licht);border:1px solid var(--lijn-licht);
}
.fasen li{background:var(--kalk);padding:clamp(16px,1.7vw,24px);display:flex;flex-direction:column;gap:.4rem;}
.fasen b{font-family:var(--serif);font-weight:600;font-size:clamp(1rem,1.25vw,1.2rem);line-height:1.12;color:#101613;}
.fasen span{font-size:.86rem;line-height:1.45;color:#5A5F56;}
@media (max-width:1100px){.fasen{grid-template-columns:repeat(3,minmax(0,1fr));}}
@media (max-width:620px){.fasen{grid-template-columns:repeat(2,minmax(0,1fr));}}
.on-light .fasen{background:var(--lijn);border-color:var(--lijn);}

/* ---- twee blokken naast elkaar ---- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--lijn);border:1px solid var(--lijn);}
.duo-blok{background:var(--vernis);padding:clamp(26px,3vw,44px);display:flex;flex-direction:column;align-items:flex-start;}
.duo-blok .lead{margin-bottom:1.6rem;}
.duo-blok .btn{margin-top:auto;}
@media (max-width:860px){.duo{grid-template-columns:minmax(0,1fr);}}

/* ---- horizontale stappen op een dienst- of werkwijzepagina ---- */
.entry .stappen,.stappen{
  list-style:none;margin:2em 0;padding:0;
  display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1px;
  background:var(--lijn);border:1px solid var(--lijn);
}
/* Geen open vlakken: de kolombreedte volgt het aantal items, de laatste rij
   wordt altijd volgemaakt. Basis is gestapeld, breder wordt het opgedeeld. */
:is(.stappen,.proj,.contact-cols,.dienstraster)>*{grid-column:span 12;}
@media (min-width:430px){
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(2))>*{grid-column:span 6;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(3)):not(:has(>*:nth-child(4)))>*:nth-child(3){grid-column:span 12;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(5){grid-column:span 12;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(7)):not(:has(>*:nth-child(8)))>*:nth-child(7){grid-column:span 12;}
}
@media (min-width:760px){
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(3))>*{grid-column:span 4;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(3)):not(:has(>*:nth-child(4)))>*:nth-child(3){grid-column:span 4;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(4)):not(:has(>*:nth-child(5)))>*{grid-column:span 6;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(4),
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(5){grid-column:span 6;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(7)):not(:has(>*:nth-child(8)))>*{grid-column:span 3;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(7)):not(:has(>*:nth-child(8)))>*:nth-child(n+5){grid-column:span 4;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(8)):not(:has(>*:nth-child(9)))>*{grid-column:span 3;}
}
@media (min-width:1000px){
  :is(.proj,.contact-cols,.dienstraster):has(>*:nth-child(4)):not(:has(>*:nth-child(5)))>*{grid-column:span 3;}
}
@media (min-width:1280px){
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(4)):not(:has(>*:nth-child(5)))>*{grid-column:span 3;}
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(1),
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(2),
  :is(.stappen,.proj,.contact-cols,.dienstraster):has(>*:nth-child(5)):not(:has(>*:nth-child(6)))>*:nth-child(3){grid-column:span 4;}
}
.stappen li{background:var(--vernis);padding:clamp(16px,1.8vw,24px);margin:0;}
.stappen li::before{display:none;}
.stappen b{display:block;font-family:var(--serif);font-weight:600;font-size:1.06rem;color:var(--creme);margin-bottom:.4rem;}
.stappen span{font-size:.88rem;color:var(--grijs);line-height:1.45;}

/* ---- horizontale stappen krijgen voorrang op de standaard lijstopmaak ---- */
.entry .stappen{padding-left:0;list-style:none;}
.entry .stappen li{padding:clamp(16px,1.8vw,24px);margin:0;position:static;}
.entry .stappen li::before{display:none;content:none;}
.entry .stappen li::marker{content:none;}
.entry .stappen b{color:var(--creme);}
.entry .stappen span{color:var(--grijs);}
.on-light .stappen li{background:var(--kalk);}
.on-light .stappen b{color:#101613;}
.on-light .stappen span{color:#5A5F56;}

/* ---- gewone opsommingen in twee kolommen, scheelt de helft aan hoogte ---- */
@media (min-width:820px){
  .entry ul:not(.stappen){
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.2rem clamp(20px,2.6vw,44px);
  }
  .entry ul:not(.stappen) li{margin-top:0;}
  .entry ul:not(.stappen) li+li{margin-top:0;}
}

/* ---- verwante diensten onderaan een dienstpagina ---- */
.verwant{margin-top:clamp(30px,4vw,54px);}
.verwant h2{font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.7rem);margin:0 0 1.2rem;color:var(--kalk);}


/* ================================================================
   TOEGANKELIJKHEID EN AFWERKING
   ================================================================ */
/* duidelijke toetsenbordfocus op alles wat aanklikbaar is */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,.dienstkaart:focus-visible{
  outline:3px solid var(--creme);outline-offset:3px;border-radius:2px;
}
.on-light a:focus-visible,.on-light button:focus-visible{outline-color:var(--groen);}

/* aanraakvlakken op mobiel groot genoeg */
@media (max-width:900px){
  .nav-links a,.zijblok-lijst a,.footer a{min-height:44px;display:inline-flex;align-items:center;}
  .chip{min-height:44px;}
  .btn{min-height:48px;}
}

/* voorkom dat lange woorden buiten hun kader lopen */
h1,h2,h3,.display,.dienstkaart-tekst h3{overflow-wrap:break-word;}
.waarde{overflow-wrap:break-word;hyphens:none;}

/* rustiger animatie voor wie daarom vraagt */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}

/* printversie: donkere vlakken kosten alleen maar inkt */
@media print{
  .nav,.mcta,.stroke-rail,.topbar-progress,.wiz,.form-keuze,.snel-actie,.loupe,.svc-peek{display:none!important;}
  body{background:#fff!important;color:#000!important;}
  .display,h1,h2,h3,p,li,dd,dt{color:#000!important;}
  a{color:#000!important;text-decoration:underline;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;}
  section,.pad{padding-block:12px!important;background:#fff!important;}
}


/* ---- links in de voettekst onder elkaar, ook zonder regeleinde ---- */
.f-lijst a,.f-lijst-zakelijk a{display:block;}
.f-lijst a:hover,.f-lijst-zakelijk a:hover{color:var(--creme);}

/* ================================================================
   MOBIEL: minder loze hoogte, sneller door de pagina
   ================================================================ */
@media (max-width:760px){
  /* de voor en na vergelijking hoeft minder scrollruimte */
  .ba{height:135vh;}
  /* projecten twee naast elkaar in plaats van onder elkaar */
  .proj{gap:10px;}
  .proj .cap b{font-size:.98rem;}
  .proj .cap span{font-size:.8rem;}
  /* de zes details compacter */
  .detail-item{padding:18px 16px;}
  .detail-item b{font-size:1.06rem;}
  .detail-item p{font-size:.88rem;}
  /* de hero iets minder hoog, zodat de eerste sectie eerder in beeld komt */
  .hero{min-height:92svh;}
}

/* ---- eerlijke aanduiding bij illustratiebeeld ---- */
.beeldnoot{
  grid-column:1/-1;margin:1rem 0 0;font-size:.8rem;line-height:1.5;
  color:var(--grijs-donker);max-width:70ch;
}

/* ---- eerlijke lege plek voor beoordelingen ---- */
.reviewslot{
  margin-top:clamp(24px,3vw,40px);border:1px dashed var(--lijn);
  padding:clamp(20px,2.4vw,30px);
}
.reviewslot p{margin:0;max-width:88ch;font-size:.95rem;line-height:1.6;color:var(--grijs);}
.reviewslot strong{color:var(--kalk);font-weight:500;}