/* =====================================================================
   KPH Infra — site.css
   Systeem: BYQ Foster & Reeves-structuur × KPH-groen (#00A178), wit palet,
   afgeronde hoeken (bijsturing Milan 1 okt 2026). Zie DESIGN.md.
   Schaal: Osmo scaling (alles in em op .kph-page).
   ===================================================================== */

@font-face{font-family:'Aspekta';src:url('../fonts/AspektaVF.woff2') format('woff2');font-weight:50 1000;font-style:normal;font-display:swap}

:root{
  /* Osmo scaling */
  --size-unit:16; --size-artboard:1440; --size-min:992px; --size-max:1920px;
  --size-container:clamp(var(--size-min),100vw,var(--size-max));
  --size-font:calc(var(--size-container) / var(--size-artboard) * var(--size-unit));

  /* Kleur — Foster & Reeves */
  /* palet "wit" (gekozen door Milan) */
  --bone:#FFFFFF; --bone-rgb:255,255,255; --sand:#EEF1EF; --sand-soft:#F4F6F5;
  --charcoal:#5B635C; --ink:#111A0D; --ink-soft:#3A403B; --footer:#17211C; --on-dark-mute:#CDD4D0;
  /* afronding */
  --r-xs:.375em; --r-sm:.625em; --r-btn:.875em; --r-card:1.25em; --r-xl:1.75em;
  /* Kleur — KPH (alleen als vulling; tekst-groen = green-ink) */
  --green:#00A178; --green-hover:#00B386; --green-ink:#00785A;
  --rust:#C9372D;
  --line:rgba(17,26,13,.14); --line-strong:rgba(17,26,13,.32);
  --line-light:rgba(var(--bone-rgb),.18);

  --font:'Aspekta',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-osmo:cubic-bezier(.625,.05,0,1);

  --pad:2em;            /* pagina-binnenrand */
  --gap:1em;            /* kolomgoot */
  --sec:7.5em;          /* sectie-ritme (120 @1440) */
  --sec-l:10em;         /* hero/proces (160) */
  --maxw:90em;          /* 1440 → 1920 */
  --nav-h:4.25em;
}
@media (max-width:991px){:root{--size-artboard:834;--size-min:768px;--size-max:991px}}
@media (max-width:767px){:root{--size-artboard:390;--size-min:390px;--size-max:767px;--pad:1.25em;--sec:4.5em;--sec-l:5.5em}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6em}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bone);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
::selection{background:var(--green);color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--bone)}

.kph-page{font-size:var(--size-font);font-weight:420;line-height:1.5;letter-spacing:.005em;overflow-x:clip}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:1em;top:-4em;z-index:200;background:var(--ink);color:var(--bone);padding:.75em 1em;text-decoration:none;font-weight:600}
.skip:focus{top:1em}

/* ---------- type ---------- */
.t-display{font-weight:530;font-size:5.5em;line-height:.93;letter-spacing:-.04em;text-wrap:balance}
.t-h2{font-weight:530;font-size:3.5em;line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.t-h3{font-weight:560;font-size:1.5em;line-height:1.15;letter-spacing:-.02em}
.t-lead{font-size:1.25em;line-height:1.45;letter-spacing:0}
.t-body{font-size:1em;line-height:1.55}
.t-small{font-size:.875em;line-height:1.45}
.t-num{font-variant-numeric:tabular-nums}
.muted{color:var(--charcoal)}
@media (max-width:767px){
  .t-display{font-size:2.875em;line-height:.96}
  .t-h2{font-size:2.25em;line-height:1}
  .t-lead{font-size:1.125em}
  .t-h3{font-size:1.3125em}
}

/* masked heading reveal: alleen verbergen als de animatielaag draait */
.is-anim [data-split="heading"]{visibility:hidden}
.split-line{padding-bottom:.12em;margin-bottom:-.12em}

/* ---------- knoppen (Osmo directional hover, Foster-hoeken) ---------- */
/* De achtergrond zit op de knop zelf (werkt zonder JS); JS voegt alleen .btn__circle-wrap toe. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.625em;min-height:3.25em;padding:.6em 1.25em;font:600 1em/1.1 var(--font);letter-spacing:0;text-decoration:none;cursor:pointer;background-color:var(--green);border:1px solid rgba(17,26,13,.16);color:var(--ink);isolation:isolate;white-space:nowrap;overflow:hidden;-webkit-tap-highlight-color:transparent;transition:color .7s var(--ease-osmo),background-color .3s}
.btn__circle-wrap{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.btn__circle{position:absolute;top:50%;left:50%;width:100%;border-radius:50%;background:var(--ink);transform:translate(-50%,-50%) scale(0) rotate(.001deg);transition:transform .7s var(--ease-osmo),background-color .4s var(--ease-osmo)}
.btn__circle::before{content:'';display:block;padding-top:100%}
.btn svg{width:1em;height:1em;flex:none;transition:transform .5s var(--ease)}
@media (hover:hover){
  .btn.has-circle:hover .btn__circle{transform:translate(-50%,-50%) scale(1) rotate(.001deg)}
  .btn:hover svg.arrow{transform:translateX(.2em)}
  .btn[data-theme="primary"]:not(.has-circle):hover{background-color:var(--green-hover);color:var(--ink)}
}
/* primair: groen → vult obsidiaan, tekst bot */
.btn.has-circle[data-theme="primary"]:hover{color:var(--bone)}
/* secundair: lijn → vult obsidiaan */
.btn[data-theme="line"]{background-color:rgba(var(--bone-rgb),.55);border-color:var(--line-strong);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.btn.has-circle[data-theme="line"]:hover{color:var(--bone)}
.btn[data-theme="line"]:not(.has-circle):hover{background-color:var(--sand-soft)}
/* donker: obsidiaan → vult groen */
.btn[data-theme="dark"]{background-color:var(--ink);border-color:var(--ink);color:var(--bone)}
.btn[data-theme="dark"] .btn__circle{background:var(--green)}
.btn.has-circle[data-theme="dark"]:hover{color:var(--ink)}
.btn[data-theme="dark"]:not(.has-circle):hover{background-color:#26301f;color:var(--bone)}
/* op donker: lijn in bot */
.btn[data-theme="line-light"]{background-color:transparent;border-color:rgba(var(--bone-rgb),.4);color:var(--bone)}
.btn[data-theme="line-light"] .btn__circle{background:var(--bone)}
.btn.has-circle[data-theme="line-light"]:hover{color:var(--ink)}
.btn[data-theme="line-light"]:not(.has-circle):hover{background-color:rgba(var(--bone-rgb),.12);color:var(--bone)}
/* zand */
.btn[data-theme="sand"]{background-color:var(--sand);border-color:transparent}
.btn.has-circle[data-theme="sand"]:hover{color:var(--bone)}
.btn--sm{height:2.625em;padding:0 1em;font-size:.875em}
.btn--block{width:100%}

.tlink{color:var(--green-ink);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.3em;transition:text-decoration-color .3s}
.tlink:hover{text-decoration-color:transparent}
.on-dark .tlink{color:var(--green)}

/* ---------- [BEVESTIGEN]-placeholder (site-sales-layer) ---------- */
.bev{font:500 max(.8em,13px)/1.3 ui-monospace,Consolas,monospace;border:1px dashed color-mix(in srgb,currentColor 40%,transparent);padding:.1em .4em;opacity:.8}

/* =====================================================================
   NAV — Osmo two-step scaling navigation, KPH-versie
   ===================================================================== */
[data-twostep-nav]{--cubic-default:cubic-bezier(.625,.05,0,1);--dur:.5s;--dur-long:.75s;--anim:var(--dur) var(--cubic-default);--anim-long:var(--dur-long) var(--cubic-default)}
.twostep-nav{position:fixed;inset:0;z-index:100;pointer-events:none;font-size:var(--size-font)}
.twostep-nav__bg{position:absolute;inset:0;background:rgba(17,26,13,.38);opacity:0;visibility:hidden;pointer-events:auto;transition:opacity var(--anim),visibility var(--anim)}
[data-nav-status="active"] .twostep-nav__bg{opacity:1;visibility:visible}
.twostep-nav__wrap{position:absolute;top:0;left:0;width:100%;display:flex;justify-content:center}
.twostep-nav__width{width:100%;max-width:62em;padding:1.25em 1.25em 0;display:flex;flex-direction:column;align-items:center}
.twostep-nav__bar{position:relative;width:100%;max-width:34em;pointer-events:auto;color:var(--ink);transition:max-width var(--anim-long) .2s}
[data-nav-status="active"] .twostep-nav__bar{max-width:100%;transition:max-width var(--anim) 0s}
.twostep-nav__back{position:absolute;inset:0;z-index:0;transition:all var(--anim)}
[data-nav-status="active"] .twostep-nav__back{inset:-.25em}
.twostep-nav__back-bg{position:absolute;inset:0;background:rgba(var(--bone-rgb),.94);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:background-color .2s ease}
[data-nav-status="active"] .twostep-nav__back-bg{background:var(--bone)}
.twostep-nav__top{position:relative;z-index:1;display:flex;align-items:center;gap:.75em;height:var(--nav-h);padding:0 .625em 0 1em}
.twostep-nav__logo{display:flex;align-items:center;height:100%;padding:.55em 0;margin-right:auto}
.twostep-nav__logo img{height:100%;width:auto}
.twostep-nav__top-line{position:absolute;left:.5em;right:.5em;bottom:0;height:1px;background:var(--line);opacity:0;transition:all var(--anim) 0s}
[data-nav-status="active"] .twostep-nav__top-line{opacity:1;transition:all var(--anim) .1s}
.twostep-nav__toggle{position:relative;display:flex;align-items:center;justify-content:center;gap:.6em;height:2.75em;padding:0 .75em;border:1px solid var(--line-strong);background:transparent;cursor:pointer;font:600 .875em/1 var(--font)}
.twostep-nav__toggle-bars{position:relative;width:1.25em;height:.75em}
.twostep-nav__toggle-bar{position:absolute;left:0;right:0;top:50%;height:.125em;background:currentColor;transition:transform var(--anim);transform:translateY(-.28em) rotate(.001deg)}
.twostep-nav__toggle-bar:nth-child(2){transform:translateY(.18em) rotate(.001deg)}
@media (hover:hover){
  .twostep-nav__toggle:hover .twostep-nav__toggle-bar{transform:translateY(.18em) rotate(.001deg)}
  .twostep-nav__toggle:hover .twostep-nav__toggle-bar:nth-child(2){transform:translateY(-.28em) rotate(.001deg)}
}
[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar{transform:translateY(0) rotate(45deg)}
[data-nav-status="active"] .twostep-nav__toggle .twostep-nav__toggle-bar:nth-child(2){transform:translateY(0) rotate(-45deg)}
.twostep-nav__toggle-label{min-width:3.6em;text-align:left}
.twostep-nav__bottom{position:relative;display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows var(--anim) 0s}
[data-nav-status="active"] .twostep-nav__bottom{grid-template-rows:1fr;transition:grid-template-rows var(--anim-long) .25s}
.twostep-nav__bottom-overflow{overflow:hidden;min-height:0}
.twostep-nav__bottom-inner{padding:1.75em 1.5em 1.5em}
.twostep-nav__bottom-row{display:grid;grid-template-columns:1.25fr 1fr;gap:2em}
.twostep-nav__bottom-row>*{opacity:0;transform:translateY(2em);transition:all var(--anim) 0s}
.twostep-nav__bottom-row>*:nth-child(2){transition-delay:.075s}
[data-nav-status="active"] .twostep-nav__bottom-row>*{opacity:1;transform:none;transition:all var(--anim-long) .5s}
[data-nav-status="active"] .twostep-nav__bottom-row>*:nth-child(2){transition-delay:.575s}
.twostep-nav__ul{display:flex;flex-direction:column}
.twostep-nav__link{display:flex;align-items:baseline;justify-content:space-between;gap:1em;padding:.4em 0;border-bottom:1px solid var(--line);text-decoration:none}
.twostep-nav__link-span{font-weight:520;font-size:2em;line-height:1.05;letter-spacing:-.04em;transition:transform .5s var(--ease),color .3s}
.twostep-nav__link small{font-size:.8125em;color:var(--charcoal);white-space:nowrap}
.twostep-nav__link[aria-current="page"] .twostep-nav__link-span{color:var(--green-ink)}
@media (hover:hover){.twostep-nav__link:hover .twostep-nav__link-span{transform:translateX(.25em)}}
.twostep-nav__ul.is--small{flex-direction:row;flex-wrap:wrap;gap:.25em 1.25em;margin-top:1.25em}
.twostep-nav__ul.is--small a{display:inline-flex;align-items:center;min-height:2.75em;font-size:.9375em;font-weight:500;text-decoration:none;padding:.25em 0}
.twostep-nav__ul.is--small a:hover{text-decoration:underline;text-underline-offset:.3em}
.twostep-nav__side{display:flex;flex-direction:column;gap:1em}
.twostep-nav__visual{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.twostep-nav__visual img{width:100%;height:100%;object-fit:cover}
.twostep-nav__doors{display:grid;grid-template-columns:1fr 1fr;gap:.5em}
.twostep-nav__doors .btn{width:100%}
.twostep-nav__meta{font-size:.875em;color:var(--charcoal)}
@media (max-width:767px){
  .twostep-nav__width{padding:.75em .75em 0}
  .twostep-nav__bar{max-width:100%}
  .twostep-nav__top{padding:0 .5em 0 .75em}
  .twostep-nav__top .btn{display:none}
  .twostep-nav__bottom{transform:translateY(-.625em);transition:grid-template-rows var(--anim) 0s,transform var(--anim) 0s}
  [data-nav-status="active"] .twostep-nav__bottom{transform:none;transition:grid-template-rows var(--anim-long) .25s,transform var(--anim) .25s}
  .twostep-nav__bottom-inner{padding:1em .75em 1.25em}
  .twostep-nav__bottom-row{grid-template-columns:1fr;gap:1.25em}
  .twostep-nav__visual{display:none}
  .twostep-nav__link-span{font-size:1.75em}
}
/* nav-tone (Osmo scroll-driven header styling): achtergrond pas na 4em scrollen */
@supports (animation-timeline:scroll()){
  .twostep-nav__back-bg{animation:kph-nav-scrolled 1ms linear both;animation-timeline:scroll(root);animation-range:0 4em}
  @keyframes kph-nav-scrolled{from{background-color:rgba(var(--bone-rgb),.35);border-color:rgba(17,26,13,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}
  [data-nav-status="active"] .twostep-nav__back-bg{animation:none}
}
/* boven een donkere band: donkere balk */
[data-nav-tone="dark"]:not([data-nav-status="active"]) .twostep-nav__back-bg{background:rgba(17,26,13,.86);border-color:rgba(var(--bone-rgb),.12);animation:none}
[data-nav-tone="dark"]:not([data-nav-status="active"]) .twostep-nav__bar{color:var(--bone)}
[data-nav-tone="dark"]:not([data-nav-status="active"]) .twostep-nav__logo img{filter:brightness(0) invert(1)}
[data-nav-tone="dark"]:not([data-nav-status="active"]) .twostep-nav__toggle{border-color:rgba(var(--bone-rgb),.4)}
.twostep-nav__bar{transition:max-width var(--anim-long) .2s,color .3s}

/* ---------- situatie-band (micro-commitment) ---------- */
.pick{background:var(--sand);padding:1.75em 0}
.pick__row{display:flex;align-items:center;gap:1.5em;flex-wrap:wrap}
.pick__q{font-weight:560;font-size:1.25em;letter-spacing:-.02em;margin-right:auto}
.pick__chips{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line-strong);background:var(--bone)}
.pick__chip{display:inline-flex;align-items:center;gap:.5em;padding:.875em 1.125em;font-weight:500;font-size:.9375em;text-decoration:none;border-right:1px solid var(--line);transition:background-color .35s,color .35s}
.pick__chip:last-child{border-right:0}
.pick__chip:hover{background:var(--ink);color:var(--bone)}
.pick__chip svg{width:.875em;height:.875em}
@media (max-width:767px){
  .pick{padding:1.5em 0}
  .pick__q{font-size:1.125em;width:100%}
  .pick__chips{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .pick__chip{border-bottom:1px solid var(--line);justify-content:space-between}
  .pick__chip:nth-child(2n){border-right:0}
}

/* ---------- sectiekop ---------- */
.sec{padding:var(--sec) 0}
.sec--l{padding:var(--sec-l) 0}
.sec-head{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:end;margin-bottom:3.5em}
.sec-head__title{grid-column:1/8}
.sec-head__aside{grid-column:9/13;color:var(--ink-soft)}
@media (max-width:991px){.sec-head__title,.sec-head__aside{grid-column:1/-1}.sec-head{margin-bottom:2.25em}}

/* =====================================================================
   DIENSTEN — Osmo directional list hover
   ===================================================================== */
.dlist{border-bottom:1px solid var(--ink)}
.dlist__head{display:grid;grid-template-columns:4fr 4fr 2fr 2.5fr 3em;gap:var(--gap);padding:0 1.5em .875em;font-size:.8125em;font-weight:500;color:var(--charcoal)}
.dlist__item{position:relative;display:grid;grid-template-columns:4fr 4fr 2fr 2.5fr 3em;gap:var(--gap);align-items:center;padding:2em 1.5em;border-top:1px solid var(--ink);text-decoration:none;overflow:hidden;isolation:isolate}
.dlist__tile{position:absolute;inset:0;z-index:-1;background:var(--green);transform:translateY(-101%);transition:transform .5s var(--ease);will-change:transform}
.dlist__name{font-weight:530;font-size:2.5em;line-height:1;letter-spacing:-.04em}
.dlist__desc{font-size:.9375em;color:var(--ink-soft);max-width:28em;transition:color .3s}
.dlist__who{display:flex;flex-wrap:wrap;gap:.35em}
.dlist__who span{font-size:.8125em;font-weight:500;padding:.35em .55em;background:var(--sand-soft);transition:background-color .3s}
.dlist__price{font-weight:560;font-size:1.0625em;letter-spacing:-.01em}
.dlist__price small{display:block;font-weight:420;font-size:.8125em;color:var(--charcoal);letter-spacing:0;transition:color .3s}
.dlist__arrow{width:2.75em;height:2.75em;display:grid;place-items:center;background:var(--ink);color:var(--bone);justify-self:end;transition:background-color .3s,color .3s}
.dlist__arrow svg{width:1em;height:1em}
.dlist__item:hover .dlist__desc,.dlist__item:hover .dlist__price small{color:var(--ink)}
.dlist__item:hover .dlist__who span{background:rgba(var(--bone-rgb),.55)}
.dlist__item:focus-visible{outline-offset:-3px}
@media (max-width:991px){
  .dlist__head{display:none}
  .dlist__item{grid-template-columns:1fr auto;gap:.5em 1em;padding:1.5em 0}
  .dlist__name{font-size:1.875em;grid-column:1/2}
  .dlist__arrow{grid-column:2;grid-row:1;width:2.5em;height:2.5em}
  .dlist__desc,.dlist__who,.dlist__price{grid-column:1/-1}
  .dlist__price{margin-top:.25em}
}

/* =====================================================================
   VOOR/NA — Osmo before/after split slider
   ===================================================================== */
.vn{background:var(--ink);color:var(--bone)}
.vn__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.vn__text{grid-column:1/5;position:sticky;top:7em}
.vn__text .t-lead{margin-top:1.25em;color:var(--on-dark-mute)}
.vn__hint{display:inline-flex;align-items:center;gap:.6em;margin-top:2em;font-size:.875em;color:var(--on-dark-mute)}
.vn__hint svg{width:1.5em;height:1.5em}
.vn__pairs{grid-column:5/13;display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
.vn__pair figcaption{display:flex;justify-content:space-between;gap:1em;padding-top:.875em;border-top:1px solid var(--line-light);margin-top:.875em;font-size:.9375em}
.vn__pair figcaption b{font-weight:560}
.vn__pair figcaption span{color:var(--on-dark-mute)}
.splitter{position:relative;aspect-ratio:4/5;overflow:hidden;background:#1d2619;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.splitter__content{position:absolute;inset:0}
.splitter__content img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.splitter__content.is--after{clip-path:inset(0 0 0 50%)}
.splitter__label{position:absolute;bottom:0;z-index:1;font-size:.8125em;font-weight:600;padding:.55em .75em}
.splitter__label--voor{left:0;background:var(--bone);color:var(--ink)}
.splitter__label--na{right:0;background:var(--green);color:var(--ink)}
.splitter__handle{position:absolute;top:0;bottom:0;left:50%;z-index:2;width:2px;margin-left:-1px;background:var(--bone);cursor:ew-resize;display:flex;align-items:center;justify-content:center}
.splitter__knob{flex:none;width:3em;height:3em;background:var(--bone);color:var(--ink);display:grid;place-items:center;border:0;padding:0;cursor:ew-resize}
.splitter__knob svg{width:1.4em;height:1.4em}
.splitter__knob::after{content:'';position:absolute;width:3em;height:3em;border:1px solid var(--bone);transition:all .4s cubic-bezier(.35,1,.6,1)}
.splitter__handle:hover .splitter__knob::after{width:3.9em;height:3.9em;opacity:.5}
.splitter img::selection{background:none}
@media (max-width:991px){
  .vn__text{grid-column:1/-1;position:static}
  .vn__pairs{grid-column:1/-1;margin-top:2em}
}
@media (max-width:767px){.vn__pairs{grid-template-columns:1fr;gap:2.25em}}

/* =====================================================================
   PRIJZEN — grootboek + odometer + rekenhulp
   ===================================================================== */
.prices__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.prices__side{grid-column:1/5;position:sticky;top:7em}
.prices__side .t-lead{margin-top:1.25em;color:var(--ink-soft)}
.prices__main{grid-column:6/13;display:flex;flex-direction:column;gap:3.5em}
.calc{margin-top:2.5em;background:var(--sand);padding:1.5em}
.calc__label{display:flex;justify-content:space-between;align-items:baseline;gap:1em;font-weight:560;font-size:1.0625em}
.calc__label output{font-variant-numeric:tabular-nums}
.calc__range{width:100%;margin:1.25em 0 .5em;accent-color:var(--ink);height:2em;cursor:pointer}
.calc__scale{display:flex;justify-content:space-between;font-size:.8125em;color:var(--ink-soft)}
.calc__out{margin-top:1.25em;padding-top:1.25em;border-top:1px solid var(--line-strong)}
.calc__amount{font-weight:530;font-size:3em;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.calc__note{font-size:.875em;color:var(--ink-soft);margin-top:.625em}
.calc .btn{margin-top:1.25em}
.ledger__title{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding-bottom:.75em;border-bottom:1px solid var(--ink)}
.ledger__title h3{font-weight:560;font-size:1.5em;letter-spacing:-.02em}
.ledger__title span{font-size:.8125em;color:var(--charcoal)}
.lrow{position:relative;display:grid;grid-template-columns:1fr auto 5.5em;gap:1.25em;align-items:baseline;padding:1.125em .75em;border-bottom:1px solid var(--line);overflow:hidden;isolation:isolate}
.lrow__tile{position:absolute;inset:0;z-index:-1;background:var(--sand-soft);transform:translateY(-101%);transition:transform .5s var(--ease)}
.lrow b{font-weight:540;font-size:1.125em;letter-spacing:-.015em}
.lrow small{display:block;font-size:.8125em;color:var(--charcoal);margin-top:.2em}
.lrow__n{font-weight:520;font-size:2em;line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.lrow__u{font-size:.8125em;color:var(--charcoal);line-height:1.3}
.ledger--compact{display:grid;grid-template-columns:1fr 1fr;column-gap:2em}
.ledger--compact .ledger__title{grid-column:1/-1}
.ledger--compact .lrow{grid-template-columns:1fr auto;padding:.875em .5em}
.ledger--compact .lrow__n{font-size:1.25em}
.ledger--compact .lrow__u{display:none}
.prices__foot{font-size:.875em;color:var(--charcoal)}
/* odometer (Osmo) */
[data-odometer-element]{display:inline-flex;align-items:center;font-variant-numeric:tabular-nums}
[data-odometer-part="mask"],[data-odometer-part="static"]{display:inline-block;overflow:clip;padding:.05em;margin:-.05em}
[data-odometer-part="roller"]{display:block;white-space:pre;text-align:center;will-change:transform}
@media (max-width:991px){
  .prices__side{grid-column:1/-1;position:static}
  .prices__main{grid-column:1/-1;margin-top:2.5em}
}
@media (max-width:767px){
  .lrow{grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:1em;row-gap:.15em;padding:1em .25em}
  .lrow>div,.lrow>b{grid-row:1/span 2;align-self:center}
  .lrow__n{grid-column:2;grid-row:1}
  .lrow__u{grid-column:2;grid-row:2;text-align:right}
  .lrow__n{font-size:1.625em}
  .ledger--compact{grid-template-columns:1fr}
  .calc__amount{font-size:2.5em}
}

/* =====================================================================
   WERKWIJZE
   ===================================================================== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);counter-reset:s}
.step{border-top:1px solid var(--ink);padding-top:1.25em;display:flex;flex-direction:column;gap:.75em}
.step__n{font-weight:520;font-size:1em;font-variant-numeric:tabular-nums;color:var(--charcoal)}
.step h3{font-weight:560;font-size:1.5em;letter-spacing:-.02em;line-height:1.1}
.step p{color:var(--ink-soft);font-size:.9375em;max-width:22em}
.step__time{margin-top:auto;padding-top:.75em;font-size:.8125em;font-weight:600;display:inline-flex;align-items:center;gap:.5em}
.step__time::before{content:'';width:.5em;height:.5em;background:var(--green)}
@media (max-width:991px){.steps{grid-template-columns:1fr 1fr;row-gap:2.5em}}
@media (max-width:767px){.steps{grid-template-columns:1fr;row-gap:2em}}

/* =====================================================================
   PROJECTEN — Osmo image preview cursor follower
   ===================================================================== */
.plist__head{display:grid;grid-template-columns:6fr 5fr 3em;gap:var(--gap);padding:0 0 .875em;font-size:.8125em;font-weight:500;color:var(--charcoal)}
.plist__item{border-top:1px solid var(--ink);transition:opacity .2s}
.plist__item:last-child{border-bottom:1px solid var(--ink)}
.plist__inner{display:grid;grid-template-columns:6fr 5fr 3em;gap:var(--gap);align-items:center;padding:1.75em 0;text-decoration:none}
.plist__name{font-weight:530;font-size:2.5em;line-height:1;letter-spacing:-.04em}
.plist__what{color:var(--ink-soft)}
.plist__type{font-size:.875em;font-weight:500}
.plist__arrow{justify-self:end;width:1.25em;height:1.25em}
.plist__visual{display:none}
.plist__thumb{display:none}
.follower{position:fixed;top:0;left:0;z-index:90;width:20em;aspect-ratio:1/1.2;pointer-events:none;overflow:hidden}
.follower__inner{position:relative;width:100%;height:100%;opacity:0;transform:scale(0);transition:opacity .1s ease,transform .6s cubic-bezier(.65,.1,0,1)}
.follower [data-follower-visual]{position:absolute;inset:0;display:block}
.follower [data-follower-visual] img{width:100%;height:100%;object-fit:cover}
.follower__label{position:absolute;z-index:2;left:0;bottom:0;background:var(--green);color:var(--ink);font-weight:600;font-size:.875em;padding:.6em .8em;opacity:0;transform:translateY(100%);transition:opacity .1s ease,transform .6s cubic-bezier(.65,.1,0,1)}
@media (hover:hover) and (min-width:992px){
  body:has([data-follower-collection]:hover) .follower__inner{opacity:1;transform:scale(1)}
  body:has([data-follower-collection]:hover) .follower__label{opacity:1;transform:none}
  body:has(.plist__item:hover) .plist__item:not(:hover){opacity:.45}
}
@media (max-width:991px), (hover:none){
  .follower{display:none}
  .plist__head{display:none}
  .plist__inner{grid-template-columns:7em 1fr;gap:.25em 1em;padding:1.25em 0}
  .plist__thumb{display:block;grid-row:1/4;aspect-ratio:1;overflow:hidden;background:var(--sand)}
  .plist__thumb img{width:100%;height:100%;object-fit:cover}
  .plist__name{font-size:1.5em}
  .plist__arrow{display:none}
}
.projects__more{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:2em;flex-wrap:wrap}

/* =====================================================================
   ZAKELIJK — obsidiaan band
   ===================================================================== */
.biz{background:var(--ink);color:var(--bone)}
.biz .sec-head__aside{color:var(--on-dark-mute)}
.biz__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.biz__col{border-top:1px solid rgba(var(--bone-rgb),.4);padding-top:1.25em;display:flex;flex-direction:column;gap:.875em}
.biz__col h3{font-weight:560;font-size:1.5em;letter-spacing:-.02em;line-height:1.1}
.biz__col p,.biz__col li{color:var(--on-dark-mute);font-size:.9375em}
.biz__col ul{display:flex;flex-direction:column;gap:.35em}
.biz__col li{display:flex;gap:.6em}
.biz__col li::before{content:'';width:.4em;height:.4em;background:var(--green);margin-top:.55em;flex:none}
.biz__rates{margin-top:auto;padding-top:1em;display:flex;flex-direction:column}
.biz__rate{display:flex;justify-content:space-between;gap:1em;padding:.6em 0;border-top:1px solid var(--line-light);font-size:.9375em}
.biz__rate b{font-weight:560;font-variant-numeric:tabular-nums;white-space:nowrap}
.biz__cta{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;margin-top:3.5em;padding-top:2em;border-top:1px solid var(--line-light)}
.biz__cta p{margin-right:auto;color:var(--on-dark-mute);max-width:34em}
@media (max-width:991px){.biz__cols{grid-template-columns:1fr;row-gap:2.5em}}

/* =====================================================================
   FAQ — Osmo accordion (knoppen voor toetsenbord)
   ===================================================================== */
.faq__grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap)}
.faq__side{grid-column:1/5}
.faq__side p{margin-top:1.25em;color:var(--ink-soft);max-width:22em}
.faq__side .btn{margin-top:1.5em}
.accordion{grid-column:6/13;border-bottom:1px solid var(--ink)}
.accordion__item{border-top:1px solid var(--ink)}
.accordion__top{display:flex;justify-content:space-between;align-items:center;gap:1.5em;width:100%;padding:1.375em 0;border:0;background:none;cursor:pointer;text-align:left}
.accordion__q{font-weight:540;font-size:1.25em;letter-spacing:-.015em;line-height:1.32}
.accordion__icon{flex:none;width:2.25em;height:2.25em;display:grid;place-items:center;background:var(--sand-soft);transform:rotate(180deg);transition:transform .6s var(--ease-osmo),background-color .3s}
.accordion__icon svg{width:1em;height:1em}
.accordion__item[data-accordion-status="active"] .accordion__icon{transform:rotate(.001deg);background:var(--green)}
.accordion__bottom{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease-osmo)}
.accordion__item[data-accordion-status="active"] .accordion__bottom{grid-template-rows:1fr}
.accordion__bottom-wrap{overflow:hidden;min-height:0}
.accordion__a{padding:0 3.5em 1.5em 0;color:var(--ink-soft);max-width:38em}
.accordion__a p+p{margin-top:.75em}
@media (hover:hover){.accordion__top:hover .accordion__icon{background:var(--sand)}}
@media (max-width:991px){.faq__side,.accordion{grid-column:1/-1}.accordion{margin-top:2em}}
@media (max-width:767px){.accordion__q{font-size:1.0625em}.accordion__a{padding-right:0}}

/* =====================================================================
   OFFERTE — meerstaps + Osmo live validatie
   ===================================================================== */
.quote-sec{background:var(--bone)}
.qgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);align-items:start}
.qside{grid-column:1/5}
.qside .t-lead{margin-top:1.25em;color:var(--ink-soft)}
.qdoors{display:flex;flex-direction:column;gap:.5em;margin-top:2em}
.qdoors .btn{justify-content:space-between;width:100%}
.qdoors small{font-size:.8125em;color:var(--charcoal);margin-top:.25em}
.qform{grid-column:6/13;background:var(--sand);padding:2.5em}
.qprog{display:grid;grid-template-columns:repeat(3,1fr);gap:.375em;margin-bottom:2em}
.qprog__step{font-size:.8125em;font-weight:600;padding-top:.6em;border-top:3px solid rgba(17,26,13,.18);color:var(--ink-soft);transition:border-color .4s,color .4s}
.qprog__step.is-on{border-top-color:var(--ink);color:var(--ink)}
.qstep{display:none;flex-direction:column;gap:1.5em}
.qstep.is-on{display:flex}
.qstep__title{font-weight:560;font-size:1.75em;letter-spacing:-.03em;line-height:1.1;padding:0 0 .75em}
.field{display:flex;flex-direction:column;gap:.5em;position:relative}
.field__label{font-weight:560;font-size:.9375em}
.field__label small{font-weight:420;color:var(--ink-soft);margin-left:.35em}
.field__hint{font-size:.8125em;color:var(--ink-soft)}
.field__input{width:100%;min-width:0;font:420 1em/1.4 var(--font);padding:.875em 1em;border:1px solid var(--line-strong);border-radius:0;background:var(--bone);color:var(--ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.field__input::placeholder{color:#7A817C}
.field__input:focus{outline:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
textarea.field__input{min-height:7em;resize:vertical}
select.field__input{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23111A0D' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1em center;background-size:1em;padding-right:2.75em}
.field__error{display:none;font-size:.8125em;font-weight:500;color:var(--rust)}
.field.is--error .field__input{border-color:var(--rust);box-shadow:inset 0 0 0 1px var(--rust)}
.field.is--error .field__error{display:block}
.field.is--success .field__input{border-color:var(--green-ink)}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--line-strong);background:var(--bone)}
.choices--3{grid-template-columns:repeat(3,1fr)}
.choice{position:relative;display:flex}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{flex:1;display:flex;align-items:center;gap:.6em;padding:1em;font-weight:500;font-size:.9375em;cursor:pointer;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background-color .25s,color .25s}
.choice span::before{content:'';width:1em;height:1em;border:1px solid var(--line-strong);flex:none;transition:background-color .25s,border-color .25s,box-shadow .25s}
.choice input:checked+span{background:var(--ink);color:var(--bone)}
.choice input:checked+span::before{background:var(--green);border-color:var(--bone);box-shadow:inset 0 0 0 .2em var(--ink)}
.choice input:focus-visible+span{outline:2px solid var(--ink);outline-offset:-3px}
.choices .choice:nth-child(2n) span{border-right:0}
.choices--3 .choice span{border-right:1px solid var(--line)}
.choices--3 .choice:nth-child(3n) span{border-right:0}
.field.is--error .choices{border-color:var(--rust)}
.qrow{display:grid;grid-template-columns:1fr 1fr;gap:1em}
.qnav{display:flex;justify-content:space-between;align-items:center;gap:1em;margin-top:.5em}
.qback{background:none;border:0;padding:.5em 0;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:.3em}
.qback[hidden]{display:none}
.qnote{font-size:.8125em;color:var(--ink-soft)}
.qform__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qmsg{font-size:.875em;font-weight:500;color:var(--rust)}
.qdone{display:none;flex-direction:column;gap:1.25em}
.qform.is-done .qdone{display:flex}
.qform.is-done form,.qform.is-done .qprog{display:none}
.qdone__title{font-weight:540;font-size:2em;letter-spacing:-.035em;line-height:1.05}
.qdone ol{border-top:1px solid var(--ink)}
.qdone li{display:grid;grid-template-columns:2em 1fr;gap:.5em;padding:.875em 0;border-bottom:1px solid var(--line-strong)}
.qdone li span{font-weight:600;color:var(--ink-soft)}
@media (max-width:991px){.qside,.qform{grid-column:1/-1}.qform{margin-top:2.5em}}
@media (max-width:767px){
  .qform{padding:1.5em 1.125em;margin-left:calc(-1 * var(--pad));margin-right:calc(-1 * var(--pad))}
  .qrow{grid-template-columns:1fr}
  .choices--3{grid-template-columns:1fr}
  .choices--3 .choice span{border-right:0}
  .qstep__title{font-size:1.5em}
}

/* =====================================================================
   FOOTER — Osmo footer parallax
   ===================================================================== */
.footer-wrap{position:relative;overflow:hidden;background:var(--bone)}
.footer{position:relative;background:var(--footer);color:var(--bone);padding:5em 0 2em;border-radius:var(--r-xl) var(--r-xl) 0 0}
.footer__dark{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none}
.footer__top{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gap);padding-bottom:3.5em;border-bottom:1px solid var(--line-light)}
.footer__claim{grid-column:1/7}
.footer__claim p{font-weight:530;font-size:2.5em;line-height:1;letter-spacing:-.04em;max-width:13em}
.footer__claim .btn{margin-top:1.75em}
.footer__col{grid-column:span 2;display:flex;flex-direction:column;gap:.5em}
.footer__col h2{font-size:.8125em;font-weight:600;color:var(--on-dark-mute);margin-bottom:.35em}
.footer__col a,.footer__col p{font-size:.9375em;color:var(--bone);text-decoration:none}
.footer__col a{padding:.35em 0;min-height:2.75em;display:flex;align-items:center}
.footer__col a:hover{text-decoration:underline;text-underline-offset:.3em}
.footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.75em 2em;padding-top:1.5em;font-size:.8125em;color:var(--on-dark-mute)}
.footer__bottom a{color:inherit}
.footer__logo{height:2.5em;width:auto;background:var(--bone);padding:.35em .5em}
@media (max-width:991px){.footer__claim{grid-column:1/-1;margin-bottom:1.5em}.footer__col{grid-column:span 4}}
@media (max-width:767px){.footer{padding-top:3.5em}.footer__claim p{font-size:1.875em}.footer__col{grid-column:span 6}}

/* =====================================================================
   WHATSAPP-MODAL (Osmo, QR) + MOBIELE ACTIEBALK
   ===================================================================== */
.wa-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--size-font)}
.wa-modal__dark{position:absolute;inset:0;background:rgba(17,26,13,.45);opacity:0;visibility:hidden;pointer-events:auto;transition:all .6s var(--ease-osmo)}
.wa-modal__card{position:relative;pointer-events:auto;width:22em;background:var(--bone);padding:3.5em 2em 2em;display:flex;flex-direction:column;align-items:center;gap:1.25em;text-align:center;transform:translateY(25%) rotate(.001deg);opacity:0;visibility:hidden;transition:all .6s var(--ease-osmo)}
.wa-modal[data-status="active"] .wa-modal__dark,.wa-modal[data-status="active"] .wa-modal__card{opacity:1;visibility:visible;transform:none}
.wa-modal__qr{width:10em;height:10em;background:var(--sand-soft)}
.wa-modal__qr svg{width:100%;height:100%}
.wa-modal__card h2{font-weight:540;font-size:1.75em;letter-spacing:-.03em;line-height:1}
.wa-modal__card p{color:var(--ink-soft);font-size:.9375em}
.wa-modal__close{position:absolute;top:.75em;right:.75em;width:2.75em;height:2.75em;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.wa-modal__close i{position:absolute;width:1.4em;height:.1em;background:var(--ink);transform:rotate(45deg)}
.wa-modal__close i+i{transform:rotate(-45deg)}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;grid-template-columns:1fr 1fr 1.6fr;gap:1px;background:var(--line-strong);border-top:1px solid var(--line-strong);transform:translateY(110%);transition:transform .5s var(--ease);padding-bottom:env(safe-area-inset-bottom);font-size:var(--size-font)}
.mbar.is-on{transform:none}
.mbar a{display:flex;align-items:center;justify-content:center;gap:.5em;min-height:3.5em;background:var(--bone);font-weight:600;font-size:.9375em;text-decoration:none}
.mbar a.is-primary{background:var(--green);color:var(--ink)}
.mbar svg{width:1.125em;height:1.125em}
@media (max-width:767px){.mbar{display:grid}body.has-mbar{padding-bottom:calc(3.5em + env(safe-area-inset-bottom))}}
body[data-nav-open] .mbar{transform:translateY(110%)}

/* =====================================================================
   REVEALS (alleen met animatielaag; zonder JS/reduced motion alles zichtbaar)
   ===================================================================== */
.is-anim [data-reveal]{opacity:0;transform:translateY(1.75em);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-anim [data-reveal].is-vis{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .is-anim [data-reveal],.is-anim .hero__fade,.is-anim .hero__visual{opacity:1!important;transform:none!important;transition:none!important}
  .is-anim [data-split="heading"]{visibility:visible!important}
  *{scroll-behavior:auto!important}
}
/* SplitText-masker: ademruimte zodat descenders niet worden afgeknipt */
.split-line-mask{padding-bottom:.14em;margin-bottom:-.14em}
[hidden]{display:none!important}
/* contrast: groene tekstlinks op zand worden inkt */
.qform .tlink,.calc .tlink{color:var(--ink)}
/* tap-doelen ≥ 44px */
.twostep-nav__toggle{height:2.875em}
.calc__range{height:2.875em}
.projects__more .tlink{display:inline-flex;align-items:center;min-height:2.875em}
.footer__col a{min-height:2.875em}
.footer__bottom a{display:inline-block;padding:.75em 0;margin:-.75em 0}
.projects__note{margin-top:1.25em;font-size:.875em;color:var(--ink-soft)}
.biz__cert{font-size:.875em}
.qwho{margin-top:2em;padding-top:1.25em;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:.75em;font-size:.9375em;color:var(--ink-soft)}
.qwho b{color:var(--ink);font-weight:600}
/* review-fix: 3-koloms keuzes houden hun scheidingslijnen */
.choices.choices--3 .choice span{border-right:1px solid var(--line)}
.choices.choices--3 .choice:nth-child(3n) span{border-right:0}
@media (max-width:767px){.choices.choices--3 .choice span{border-right:0}}
/* review-fix: grootboeknotitie i.p.v. citaat */
.lnote{border-top:1px solid var(--ink);padding-top:1.25em}
.lnote p{font-size:1.0625em;line-height:1.5;color:var(--ink-soft);max-width:36em}
.lnote b{color:var(--ink);font-weight:600}

/* review-fix: keuze-indicator als ruit (enkele keuze, past bij radius 0) */
.choice span::before{width:.7em;height:.7em;transform:rotate(45deg);margin:0 .15em}
.choice input:checked+span::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 .14em var(--ink)}
/* mobiel: navbalk strak bovenaan, geen open strook waar inhoud doorheen schemert */
@media (max-width:767px){
  .twostep-nav__width{padding:0}
  .twostep-nav__back-bg{border-width:0 0 1px 0}
  [data-nav-status="active"] .twostep-nav__back{inset:0}
}

/* =====================================================================
   v2 — PALETVARIANTEN (preview via ?palette=wit|koel|mint)
   ===================================================================== */
body{background:var(--bone)}

/* =====================================================================
   v2 — AFRONDING (Milan, 1 okt: "rondingen maken het af")
   ===================================================================== */
.btn{border-radius:var(--r-btn)}
.btn--sm{border-radius:var(--r-sm)}
.twostep-nav__back-bg{border-radius:1.125em}
.twostep-nav__toggle{border-radius:var(--r-sm)}
.twostep-nav__visual{border-radius:var(--r-card)}
@media (max-width:767px){.twostep-nav__back-bg{border-radius:0 0 1.125em 1.125em}}
/* situatie-chips als losse pillen */
.pick__chips{border:0;background:none;gap:.5em}
.pick__chip{border:1px solid var(--line-strong);border-radius:999px;background:var(--bone);padding:.75em 1.125em}
.pick__chip:last-child{border-right:1px solid var(--line-strong)}
@media (max-width:767px){.pick__chips{display:grid;grid-template-columns:1fr 1fr;gap:.5em}.pick__chip{border-bottom:1px solid var(--line-strong)}.pick__chip:nth-child(2n){border-right:1px solid var(--line-strong)}}
/* dienstenlijst */
.dlist__who span{border-radius:999px;padding:.35em .7em}
.dlist__arrow{border-radius:var(--r-sm)}
.dlist__tile{inset:.375em 0;border-radius:var(--r-card)}
/* donkere banden als afgeronde panelen */
.vn,.biz{margin:0 .75em;border-radius:var(--r-xl)}
@media (max-width:767px){.vn,.biz{margin:0 .5em;border-radius:var(--r-card)}}
/* voor/na */
.splitter{border-radius:var(--r-card)}
.splitter__label{border-radius:var(--r-xs);bottom:.75em}
.splitter__label--voor{left:.75em}.splitter__label--na{right:.75em}
.splitter__knob,.splitter__knob::after{border-radius:50%}
/* prijzen */
.calc{border-radius:var(--r-xl)}
.lrow__tile{inset:.25em 0;border-radius:var(--r-sm)}
/* projecten */
.plist__thumb{border-radius:var(--r-sm)}
.follower{border-radius:var(--r-card)}
.follower__label{border-radius:var(--r-xs);left:.75em;bottom:.75em}
/* faq */
.accordion__icon{border-radius:50%}
/* formulier */
.qform{border-radius:var(--r-xl)}
.field__input{border-radius:var(--r-sm)}
.choices{border-radius:var(--r-btn);overflow:hidden}
.choice span::before{width:1.05em;height:1.05em;transform:none;margin:0;border-radius:50%}
.choice input:checked+span::before{background:var(--green);border-color:var(--green);box-shadow:inset 0 0 0 .2em var(--ink)}
.qprog__step{border-radius:0}
/* whatsapp-modal */
.wa-modal__card{border-radius:var(--r-xl)}
.wa-modal__qr{border-radius:var(--r-sm);overflow:hidden}
.bev{border-radius:4px}
.footer__dark{border-radius:var(--r-xl) var(--r-xl) 0 0}



/* =====================================================================
   HERO — beeldkader (Milan, 1 okt: variant A, op wit)
   Afgeronde fotokaart met de kop in wit; prijsplaatje rechtsboven.
   ===================================================================== */
.hero{position:relative;padding:calc(var(--nav-h) + 2em) 0 2.5em}
.hero__grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:0 var(--gap);align-items:end;width:calc(100% - 1.5em);max-width:none;margin:0 .75em;min-height:calc(100svh - var(--nav-h) - 4.5em);padding:3.5em 3em;border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:var(--ink)}
.hero__visual{position:absolute;inset:0;z-index:-1}
.hero__visual img{width:100%;height:100%;object-fit:cover}
.hero__visual::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(17,26,13,.88) 0%,rgba(17,26,13,.5) 40%,rgba(17,26,13,.06) 72%),linear-gradient(to right,rgba(17,26,13,.5),rgba(17,26,13,0) 62%)}
.hero__text{grid-column:1/9;position:relative;color:#fff}
.hero__title{font-size:5em;max-width:11em}
.hero__lead{max-width:30em;margin-top:1.25em;color:rgba(255,255,255,.9)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:.5em;margin-top:2em}
.hero__risk{margin-top:.875em;font-size:.875em;color:rgba(255,255,255,.82)}
.hero__facts{display:flex;flex-direction:column;gap:.625em;margin-top:2.25em;padding-top:1.25em;border-top:1px solid rgba(255,255,255,.28);max-width:34em}
.fact{display:inline-flex;align-items:center;gap:.6em;font-size:.9375em;font-weight:500}
.fact::before,.step__time::before,.biz__col li::before{border-radius:50%}
.fact::before{content:'';width:.5em;height:.5em;background:var(--green);flex:none}
.hero .btn[data-theme="line"]{background-color:rgba(255,255,255,.1);border-color:rgba(255,255,255,.55);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.hero .btn[data-theme="line"] .btn__circle{background:#fff}
.hero .btn.has-circle[data-theme="line"]:hover{color:var(--ink)}
.hv-tag{position:absolute;z-index:1;top:1.25em;right:1.25em;display:flex;flex-direction:column;gap:.15em;background:var(--bone);color:var(--ink);border-radius:var(--r-sm);padding:.7em .875em;text-decoration:none}
.hv-tag b{font-weight:560;font-size:1em;letter-spacing:-.01em;white-space:nowrap}
.hv-tag span{font-size:.8125em;color:var(--ink-soft)}
/* intro (alleen met animatielaag) */
.is-anim .hero__visual{transform:scale(1.04);transition:transform 1.6s var(--ease)}
.is-anim .hero.is-in .hero__visual{transform:none}
.is-anim .hero__fade{opacity:0;transform:translateY(1.25em);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-anim .hero.is-in .hero__fade{opacity:1;transform:none}
.is-anim .hero__fade.d1{transition-delay:.25s}.is-anim .hero__fade.d2{transition-delay:.4s}.is-anim .hero__fade.d3{transition-delay:.55s}
.is-anim .hv-tag{opacity:0;transition:opacity .8s var(--ease) .8s}
.is-anim .hero.is-in .hv-tag{opacity:1}
@media (max-width:991px){.hero__text{grid-column:1/-1}}
@media (max-width:767px){
  .hero{padding:calc(var(--nav-h) + .75em) 0 2em}
  .hero__grid{margin:0 .5em;width:calc(100% - 1em);padding:6em 1.25em 1.5em;min-height:calc(100svh - var(--nav-h) - 1.5em);border-radius:var(--r-card)}
  .hero__title{font-size:2.75em}
  .hero__ctas .btn{flex:1 1 auto}
  .hero__facts{margin-top:1.5em}
  .hv-tag{right:.75em;top:.75em;font-size:.875em}
}
@media (max-width:767px){.hv-tag{font-size:1em;padding:.55em .75em}.hv-tag b{font-size:.9375em}.hv-tag span{font-size:.8125em}}
.hero .btn[data-theme="line"]:not(.has-circle):hover{background-color:rgba(255,255,255,.22);color:#fff}
/* review v2-fixes */
.dlist__tile{transform:translateY(calc(-100% - .6em))}
.lrow__tile{transform:translateY(calc(-100% - .6em))}
.hero__visual img{object-position:50% 85%}
.qnav{margin-top:1.5em}
.qnote{margin-top:1em}
.hv-tag{gap:.1em;padding:.8em 1em .85em}
.hv-tag__k{font-size:.8125em;font-weight:500;color:var(--ink-soft)}
.hv-tag b{font-size:2em;font-weight:560;line-height:1.05;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
@media (max-width:767px){.hv-tag b{font-size:1.5em}}
@media (hover:none),(max-width:991px){.hover-only{display:none}}
@media (max-width:767px){.hero__grid{padding-top:8.5em}}
@media (max-width:767px){.hero__facts{margin-top:1.125em;padding-top:.875em;gap:.5em}}

/* =====================================================================
   ZWEVENDE WHATSAPP-KNOP (Milan, 1 okt) — verschijnt na de hero
   Desktop: QR-modal; touch: direct WhatsApp. Mobiel zweeft hij boven de actiebalk.
   ===================================================================== */
.wa-float{position:fixed;right:1.25em;bottom:1.25em;z-index:85;display:flex;align-items:center;gap:0;height:3.5em;min-width:3.5em;padding:0 1em;border-radius:999px;background:var(--green);color:var(--ink);text-decoration:none;font-size:var(--size-font);box-shadow:0 .75em 1.75em -.5em rgba(17,26,13,.35),0 0 0 1px rgba(17,26,13,.08);transform:translateY(160%);opacity:0;transition:transform .6s var(--ease),opacity .4s var(--ease),gap .4s var(--ease),background-color .3s}
.wa-float.is-on{transform:none;opacity:1}
.wa-float svg{width:1.5em;height:1.5em;flex:none}
.wa-float__label{max-width:0;overflow:hidden;white-space:nowrap;font-weight:600;font-size:.9375em;transition:max-width .45s var(--ease)}
@media (hover:hover){.wa-float:hover{gap:.6em;background:var(--green-hover)}.wa-float:hover .wa-float__label{max-width:7em}}
.wa-float:focus-visible{outline:2px solid var(--ink);outline-offset:3px;gap:.6em}
.wa-float:focus-visible .wa-float__label{max-width:7em}
body[data-nav-open] .wa-float{transform:translateY(160%);opacity:0}
/* mobiele actiebalk: twee knoppen, WhatsApp zit in de zwevende knop */
.mbar{grid-template-columns:1fr 1.6fr}
@media (max-width:767px){.wa-float{right:.75em;bottom:calc(3.5em + env(safe-area-inset-bottom) + .75em);height:3.25em;min-width:3.25em;padding:0 .875em}}
@media (prefers-reduced-motion:reduce){.wa-float{transition:none}}
.qdemo{font-size:.875em;font-weight:600;background:var(--bone);border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:.6em .8em}

/* =====================================================================
   SUBPAGINA'S (5 okt): paginahero, dienstblokken, CTA-band, kruimelpad,
   projectraster, juridische tekst
   ===================================================================== */
.hero--page .hero__grid{min-height:min(38em,calc(100svh - var(--nav-h) - 4.5em))}
.hero--page .hero__title{font-size:4.25em;max-width:12em}
.hero--dark .hero__grid{background:var(--ink)}
.hero--dark .hero__grid::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 100% 0%,rgba(0,161,120,.16),rgba(0,161,120,0) 55%)}
.pfact{grid-column:9/13;align-self:end;justify-self:end;text-align:right;color:#fff;position:relative}
.pfact b{display:block;font-weight:530;font-size:4.5em;line-height:.95;letter-spacing:-.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.pfact span{display:block;margin:.75em 0 0 auto;font-size:.9375em;line-height:1.45;color:var(--on-dark-mute);max-width:19em}
@media (max-width:991px){.pfact{grid-column:1/-1;justify-self:start;text-align:left;margin-top:2.25em}.pfact span{margin-left:0}}
@media (max-width:767px){
  .hero--page .hero__grid{min-height:0;padding-top:2.5em}
  .hero--page:not(.hero--dark) .hero__grid{padding-top:8.5em}
  .hero--page .hero__title{font-size:2.5em}
  .pfact b{font-size:3em}
}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5em;padding-top:1.25em;font-size:.875em;color:var(--charcoal)}
.crumbs a{color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;min-height:2.75em}
.crumbs a:hover{text-decoration:underline;text-underline-offset:.3em}
.crumbs + .sec{padding-top:calc(var(--sec) - 2em)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:2.5em 3em}
.svc{border-top:1px solid var(--ink);padding-top:1.25em;display:flex;flex-direction:column;gap:.875em}
.svc p{color:var(--ink-soft);max-width:34em}
.dots{display:flex;flex-direction:column;gap:.45em}
.dots li{display:flex;gap:.65em;align-items:baseline}
.dots li::before{content:'';width:.45em;height:.45em;border-radius:50%;background:var(--green);flex:none;transform:translateY(-.1em)}
.svc .tlink{margin-top:.25em;align-self:flex-start}
@media (max-width:767px){.cols2{grid-template-columns:1fr;gap:2em}}
.ctaband{display:grid;grid-template-columns:repeat(12,1fr);gap:1.5em var(--gap);align-items:end;background:var(--sand);border-radius:var(--r-xl);padding:3em}
.ctaband__text{grid-column:1/8}
.ctaband__text .t-lead{margin-top:1em;color:var(--ink-soft)}
.ctaband__btns{grid-column:8/13;display:flex;flex-direction:column;gap:.5em}
.ctaband__btns .btn{width:100%;justify-content:space-between}
.ctaband__rel{grid-column:1/-1;padding-top:1.25em;border-top:1px solid var(--line-strong);font-size:.9375em;color:var(--ink-soft)}
@media (max-width:991px){.ctaband__text,.ctaband__btns{grid-column:1/-1}}
@media (max-width:767px){.ctaband{padding:1.75em 1.25em;border-radius:var(--r-card)}}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}
.pcard{margin:0;display:flex;flex-direction:column;gap:.875em}
.pcard__img{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--sand)}
.pcard__img img{width:100%;height:100%;object-fit:cover}
.pcard figcaption{display:flex;justify-content:space-between;gap:1em;flex-wrap:wrap;padding-top:.75em;border-top:1px solid var(--line)}
.pcard figcaption b{font-weight:560;font-size:1.25em;letter-spacing:-.02em}
.pcard figcaption span{color:var(--ink-soft)}
@media (max-width:767px){.pgrid{grid-template-columns:1fr;gap:2em}}
.phead{padding:calc(var(--nav-h) + 4.5em) 0 1em}
.phead p{margin-top:1em;color:var(--charcoal)}
.legal{max-width:46em}
.legal h2{font-weight:560;font-size:1.375em;letter-spacing:-.02em;margin:2em 0 .6em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-soft)}
.legal p+p{margin-top:.75em}
.legal ul{display:flex;flex-direction:column;gap:.35em;margin-top:.6em}
.legal ul li{display:flex;gap:.65em;align-items:baseline}
.legal ul li::before{content:'';width:.4em;height:.4em;border-radius:50%;background:var(--charcoal);flex:none;transform:translateY(-.15em)}
.legal .bev{display:inline-block;margin-bottom:1.5em}

/* =====================================================================
   SAMENWERKEN (5 okt, verzoek Koen): aanmelding zzp'ers en uitleenbedrijven
   Radio's blijven het segmentblok (één antwoord); vinkjes worden pillen (meerdere).
   ===================================================================== */
.jlist{grid-column:9/13;align-self:end;position:relative;color:#fff}
.jlist__k{font-size:.8125em;font-weight:600;color:var(--on-dark-mute);padding-bottom:.75em}
.jlist ul{border-top:1px solid rgba(var(--bone-rgb),.4)}
.jlist li{display:flex;justify-content:space-between;align-items:baseline;gap:1em;padding:.8em 0;border-bottom:1px solid var(--line-light)}
.jlist b{font-weight:560;font-size:1.25em;letter-spacing:-.02em}
.jlist span{font-size:.9375em;color:var(--on-dark-mute);text-align:right}
@media (max-width:991px){.jlist{grid-column:1/-1;margin-top:2.25em}}
.sstep{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:1.5em}
.sstep+.sstep{margin-top:2.5em}
.sstep+.sstep>.qstep__title{width:100%;padding-top:1.25em;border-top:1px solid var(--line-strong)}
.sform .qnav{margin-top:2em}
.sform .qnote{margin-top:1em}
.picks{display:flex;flex-wrap:wrap;gap:.5em}
.picks .choice span{flex:none;min-height:3em;padding:.7em 1.1em;background:var(--bone);border:1px solid var(--line-strong);border-radius:999px}
.picks .choice span::before{border-radius:.3em}
.picks .choice input:checked+span{border-color:var(--ink)}
.picks .choice input:checked+span::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23111A0D' stroke-width='2'/%3E%3C/svg%3E") center/80% no-repeat;border-color:var(--green);box-shadow:none}
.picks .choice input:focus-visible+span{outline-offset:2px}
.field.is--error .picks .choice span{border-color:var(--rust)}
@media (hover:hover){.picks .choice input:not(:checked)+span:hover{border-color:var(--ink)}}
/* ingang op de home (zakelijk-blok) */
.biz__join{display:flex;flex-wrap:wrap;align-items:center;gap:1em 1.5em;margin-top:1.5em;padding:1.25em 1.5em;border:1px solid var(--line-light);border-radius:var(--r-card)}
.biz__join p{margin-right:auto;max-width:36em;color:var(--on-dark-mute)}
.biz__join b{color:var(--bone);font-weight:560}
@media (max-width:767px){.biz__join{padding:1.125em}.biz__join .btn{width:100%;justify-content:space-between}}
/* "optioneel"/"meerdere mogelijk" bleef 12,5 px (small = kleiner dan het label); vloer 13 px, ook in het offerteformulier */
.field__label small{font-size:max(13px,.875em)}

/* =====================================================================
   PROJECTVERHAAL (5 okt): achtertuin Almere, ca. 75 m², in zes stappen
   Desktop: raster van 3; mobiel: veegstrook met snap, zodat de pagina kort blijft.
   ===================================================================== */
.pstory__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5em var(--gap);counter-reset:none}
.pstory__step{display:flex;flex-direction:column;gap:1em}
.pstory__img{aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--sand)}
.pstory__img img{width:100%;height:100%;object-fit:cover}
.pstory__cap{display:grid;grid-template-columns:auto 1fr;gap:.25em .75em;align-items:baseline;padding-top:.875em;border-top:1px solid var(--line)}
.pstory__n{grid-row:span 2;font-size:.875em;font-weight:600;color:var(--green-ink);font-variant-numeric:tabular-nums}
.pstory__cap b{font-weight:560;font-size:1.25em;letter-spacing:-.02em;line-height:1.15}
.pstory__cap p{color:var(--ink-soft);font-size:.9375em}
.pstory__facts{display:grid;grid-template-columns:repeat(4,auto);justify-content:start;gap:1em 3em;margin-top:3em;padding-top:1.25em;border-top:1px solid var(--ink)}
.pstory__facts dt{font-size:.8125em;font-weight:600;color:var(--charcoal)}
.pstory__facts dd{margin:.2em 0 0;font-weight:560;font-size:1.125em;letter-spacing:-.01em}
@media (max-width:991px){.pstory__steps{grid-template-columns:repeat(2,1fr)}.pstory__facts{grid-template-columns:repeat(2,auto)}}
@media (max-width:767px){
  .pstory__steps{display:flex;gap:.875em;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1 * var(--pad));padding:0 var(--pad) .5em;scroll-padding:0 var(--pad);scrollbar-width:none;overscroll-behavior-x:contain}
  .pstory__steps::-webkit-scrollbar{display:none}
  .pstory__step{flex:0 0 80%;scroll-snap-align:start}
  .pstory__facts{grid-template-columns:1fr 1fr;gap:1em 1.5em;margin-top:2em}
}

/* =====================================================================
   GEEN VERSPRINGERS NA HET INLADEN (5 okt)
   1. Terugvalletter met Aspekta-maten: tot Aspekta binnen is staat de tekst in Arial (Android: Roboto),
      geschaald en met dezelfde ascent/descent (gemeten: Aspekta 1,10/0,33, normale regelhoogte 1,43).
      Daardoor verschuift er bijna niets meer op het moment dat de echte letter binnenkomt.
   2. Odometer: geen horizontale padding/marge meer (border-box maakte de rolstand 0,1em lager dan de eindstand);
      breedtes zet de JS per teken, cijfers mogen tijdens het rollen zijwaarts uitsteken.
   3. Voor/na-greep schuift met transform (geen layout-verschuiving bij het automatisch schuiven).
   ===================================================================== */
/* breedteverhouding Aspekta/Arial gemeten per gewicht (420 100,4% · 500 102,5% · 560 104,1% · 600 105,2%); drie banden
   scoorden over alle pagina's beter dan vijf (koppen die net anders afbreken wegen zwaarder dan de exacte factor) */
@font-face{font-family:'Aspekta Fallback';src:local('Arial'),local('ArialMT');font-weight:100 459;size-adjust:100.4%;ascent-override:109.56%;descent-override:32.87%;line-gap-override:0%}
@font-face{font-family:'Aspekta Fallback';src:local('Arial'),local('ArialMT');font-weight:460 529;size-adjust:102.8%;ascent-override:107.00%;descent-override:32.10%;line-gap-override:0%}
@font-face{font-family:'Aspekta Fallback';src:local('Arial'),local('ArialMT');font-weight:530 1000;size-adjust:104.3%;ascent-override:105.47%;descent-override:31.64%;line-gap-override:0%}
@font-face{font-family:'Aspekta Fallback Roboto';src:local('Roboto'),local('Roboto-Regular');font-weight:100 459;size-adjust:101.2%;ascent-override:108.70%;descent-override:32.61%;line-gap-override:0%}
@font-face{font-family:'Aspekta Fallback Roboto';src:local('Roboto Medium'),local('Roboto-Medium'),local('Roboto');font-weight:460 1000;size-adjust:103%;ascent-override:106.80%;descent-override:32.04%;line-gap-override:0%}
:root{--font:'Aspekta','Aspekta Fallback','Aspekta Fallback Roboto',Arial,sans-serif}
[data-odometer-part="mask"],[data-odometer-part="static"]{padding:0;margin:0;overflow-x:visible;overflow-y:clip}
.splitter{container-type:inline-size}
.splitter.has-cq .splitter__handle{left:0}

/* =====================================================================
   INLAAD-STARTSTAND ZONDER TERUGVAL (5 okt, ronde 2)
   De animatiestand (is-anim) staat nu al vóór de eerste paint op <html> (inline script in <head>).
   Overgangen lopen alleen nog richting zichtbaar: komt is-anim toch later binnen, dan springt de
   startstand stil in plaats van dat tekst wegvaagt/zakt en de heldfoto inzoomt (de "verspringer").
   ===================================================================== */
.is-anim [data-reveal]{transition:none}
.is-anim [data-reveal].is-vis{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-anim .hero__visual{transition:none}
.is-anim .hero.is-in .hero__visual{transition:transform 1.6s var(--ease)}
.is-anim .hero__fade{transition:none}
.is-anim .hero.is-in .hero__fade{transition:opacity .9s var(--ease),transform .9s var(--ease)}
.is-anim .hero.is-in .hero__fade.d1{transition-delay:.25s}
.is-anim .hero.is-in .hero__fade.d2{transition-delay:.4s}
.is-anim .hero.is-in .hero__fade.d3{transition-delay:.55s}
.is-anim .hv-tag{transition:none}
.is-anim .hero.is-in .hv-tag{transition:opacity .8s var(--ease) .8s}
/* toegankelijkheid (sweep 5 okt): veegstrook is focusbaar voor toetsenbordgebruikers */
.pstory__steps:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:var(--r-card)}
/* kop die het inline intro-script zonder SplitText toont (GSAP te laat): simpele fade i.p.v. blijven wachten */
.is-anim [data-split="heading"][data-split-skip]{visibility:visible;animation:kph-kop-in .7s var(--ease) both}
@keyframes kph-kop-in{from{opacity:0;transform:translateY(.25em)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.is-anim [data-split="heading"][data-split-skip]{animation:none}}
/* gesplitste kop: de negatieve marge van het laatste regelmasker bleef niet binnen de kop, waardoor de kop 0,14em
   hoger was zolang hij gesplitst is en na revert() kromp; flow-root houdt hem binnen (hoogte gesplitst = hoogte tekst) */
[data-split="heading"]{display:flow-root}
/* veegstrook mobiel: kaarten buiten beeld niet los laten opkomen tijdens het vegen */
@media (max-width:767px){.is-anim .pstory__step[data-reveal]{opacity:1;transform:none}}
/* tikdoelen >= 44 px (premium-audit 5 okt): menuknop 40 px, menulinks 41-43 px */
.twostep-nav__toggle{min-height:44px}
.twostep-nav__link{padding:.5em 0}
.twostep-nav__ul.is--small a{display:inline-flex;align-items:center;min-height:44px}
.footer__col a{min-height:44px}
.calc__range{min-height:44px}