/* De Stratenmaker · v2
   Eén familie (Host Grotesk), papierwit dominant, zwart voor diepte, rood als enig accent.
   Structuur en motion-werkwijze overgenomen van AK Toekomst Energie (reveal + sticky scrollscene),
   merk is eigen: rood op papierwit met zwart, geen koper, geen beige. */

:root{
  --papier:#FFFFFF; --vlak:#F4F4F2; --vlak-sterk:#E9E8E4; --inkt:#141414; --zwart:#0B0B0B;
  --rood:#CF1F2E; --rood-diep:#9E121F; --rood-licht:#FF6F66; --grijs:#5B5B58;
  --grijs-licht:#9B9B96;
  --lijn:rgba(20,20,20,.14); --lijn-sterk:rgba(20,20,20,.28); --lijn-donker:rgba(255,255,255,.16);
  --r-mark:3px; --r-chip:4px; --r-1:12px; --r-2:18px; --r-3:24px; --r-pil:999px;
  --schaduw-1:0 24px 48px -24px rgba(20,20,20,.22);
  --schaduw-2:0 40px 90px -40px rgba(20,20,20,.3);
  --schaduw-donker:0 40px 90px -40px rgba(0,0,0,.55);
  --rand:20px; --max:1240px;
  --t-body:17px; --t-klein:15px; --t-label:14px;
  --t-h1:clamp(29px, 2.6vw + 19px, 58px);
  --t-h2:clamp(27px, 1.7vw + 19px, 44px);
  --t-h3:clamp(20px, .45vw + 17.5px, 24px);
  --t-lead:clamp(18px, .35vw + 16.5px, 21px);
  --uit:cubic-bezier(.23,1,.32,1);
  --in-uit:cubic-bezier(.77,0,.175,1);
  --header-h:112px;
}
@media (min-width:760px){ :root{ --rand:32px; } }
@media (min-width:1100px){ :root{ --rand:40px; } }

/* ── font: Host Grotesk, zelfde familie als AK Toekomst Energie ──────────── */
@font-face{
  font-family:'Host Grotesk'; font-style:normal; font-weight:300 800; font-display:swap;
  src:url('../fonts/host-grotesk.woff2') format('woff2');
}

/* ── basis ─────────────────────────────────────────────────────────────── */
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top:calc(var(--header-h) + 16px); }
body{ margin:0; font-family:'Host Grotesk', system-ui, -apple-system, sans-serif; font-size:17px; line-height:1.6;
  font-weight:400; color:var(--inkt); background:var(--papier); -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums; text-rendering:optimizeLegibility; }
img,svg,video{ display:block; max-width:100%; }
img{ height:auto; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.12; letter-spacing:-.018em; text-wrap:balance; }
h1{ font-size:var(--t-h1); letter-spacing:-.024em; line-height:1.06; }
h2{ font-size:var(--t-h2); }
h3{ font-size:var(--t-h3); line-height:1.3; letter-spacing:-.01em; }
p{ margin:0 0 1em; max-width:68ch; text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
ul,ol{ margin:0; padding:0; }
a{ color:inherit; text-decoration-color:var(--rood); text-underline-offset:3px; text-decoration-thickness:1px; }
strong,b{ font-weight:600; }
button,input,select,textarea{ font:inherit; color:inherit; }
::selection{ background:var(--rood); color:#fff; }
input,textarea{ caret-color:var(--rood); }
*{ scrollbar-color:var(--rood) var(--vlak); scrollbar-width:thin; }
:focus-visible{ outline:3px solid var(--rood); outline-offset:3px; border-radius:var(--r-mark); }
.grond-zwart :focus-visible{ outline-color:var(--rood-licht); }
.sr{ font-size:16px; line-height:1.5; position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip{ position:fixed; left:12px; top:-60px; z-index:100; background:var(--inkt); color:#fff; padding:12px 18px;
  border-radius:var(--r-1); text-decoration:none; font-weight:600; transition:transform .16s var(--uit); }
.skip:focus{ transform:translateY(72px); }

.wrap{ width:min(100% - 2*var(--rand), var(--max)); margin-inline:auto; }
.sec{ padding-block:clamp(64px, 7vw, 112px); position:relative; }
.grond-wit{ background:var(--papier); }
.grond-vlak{ background:var(--vlak); }
.grond-zwart{ background:var(--zwart); color:#F2F2F0; }
.lead{ font-size:var(--t-lead); line-height:1.5; color:var(--inkt); max-width:56ch; }
.klein{ font-size:var(--t-klein); }
.gedempt{ color:var(--grijs); }
.grond-zwart .gedempt{ color:var(--grijs-licht); }
.eyebrow{ display:flex; align-items:center; gap:10px; font-size:var(--t-label); font-weight:600; color:var(--rood);
  margin:0 0 18px; letter-spacing:.01em; }
.eyebrow::before{ content:""; width:9px; height:16px; border-radius:var(--r-mark); background:var(--rood); flex:none; }
.grond-zwart .eyebrow{ color:var(--rood-licht); }
.grond-zwart .eyebrow::before{ background:var(--rood-licht); }
.kop-blok{ max-width:760px; margin-bottom:clamp(32px, 4vw, 56px); }
.kop-blok h2 + p, .kop-blok h2 + .lead{ margin-top:18px; }
h2 + .lead, h2 + p, h1 + .lead{ margin-top:18px; }

/* ── knoppen en links ──────────────────────────────────────────────────── */
.knop{ display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:14px 24px;
  border-radius:var(--r-pil); background:var(--rood); color:#fff; font-weight:600; font-size:16px; line-height:1.2;
  text-decoration:none; border:0; cursor:pointer; transition:background-color .16s ease, transform .16s var(--uit); }
.knop:active{ transform:scale(.97); }
.knop svg{ width:18px; height:18px; flex:none; }
.knop-rustig{ background:transparent; color:var(--inkt); box-shadow:inset 0 0 0 1.5px var(--inkt); }
.grond-zwart .knop-rustig{ color:#F2F2F0; box-shadow:inset 0 0 0 1.5px #F2F2F0; }
.knop-klein{ min-height:44px; padding:10px 18px; font-size:15px; }
.pijl-link{ display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; color:var(--inkt);
  border-bottom:1.5px solid var(--rood); padding-bottom:2px; }
.pijl-link svg{ width:16px; height:16px; transition:transform .16s var(--uit); }
.grond-zwart .pijl-link{ color:#F2F2F0; border-bottom-color:var(--rood-licht); }
@media (hover:hover) and (pointer:fine){
  .knop:hover{ background:var(--rood-diep); }
  .knop-rustig:hover{ background:var(--inkt); color:#fff; }
  .grond-zwart .knop-rustig:hover{ background:#F2F2F0; color:var(--inkt); }
  .pijl-link:hover svg{ transform:translateX(3px); }
  a:hover{ text-decoration-thickness:2px; }
}

/* ── plaatshouders en bronnen ──────────────────────────────────────────── */
.plaatshouder{ display:inline-flex; align-items:center; gap:6px; padding:1px 9px; border:1.5px dashed #9A9A94;
  border-radius:var(--r-chip); color:var(--grijs); font-size:.92em; line-height:1.5; white-space:normal; background:transparent; }
.grond-zwart .plaatshouder{ border-color:#6E6E68; color:var(--grijs-licht); }
.demo-noot{ display:flex; gap:10px; align-items:flex-start; font-size:var(--t-label); color:var(--grijs); background:var(--vlak);
  padding:10px 14px; border-radius:var(--r-1); }
.demo-noot::before{ content:""; flex:none; width:8px; height:14px; border-radius:var(--r-mark); background:var(--rood); margin-top:3px; }
.bijgewerkt{ display:inline-flex; align-items:center; gap:8px; font-size:var(--t-label); font-weight:600; color:var(--grijs);
  padding:6px 12px; border-radius:var(--r-pil); background:var(--vlak); }

/* ── beeldvlak: draagt een echt beeld (img, object-fit:cover), of blijft
   een duidelijk gelabeld placeholder-paneel waar nog geen beeld is ──────── */
.beeld-ph{ position:relative; margin:0; overflow:hidden; background:
    repeating-linear-gradient(135deg, var(--vlak) 0 14px, var(--vlak-sterk) 14px 28px); }
.beeld-ph::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,20,20,0) 55%, rgba(20,20,20,.08) 100%); }
.beeld-ph-label{ position:relative; z-index:1; height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:24px; }
.beeld-ph-label .mark{ width:34px; height:34px; border-radius:50%; background:var(--papier); box-shadow:var(--schaduw-1);
  display:grid; place-items:center; }
.beeld-ph-label .mark svg{ width:16px; height:16px; color:var(--rood); }
.beeld-ph-label p{ margin:0; font-size:var(--t-klein); font-weight:600; color:var(--inkt); max-width:28ch; }
.beeld-ph-label span{ font-size:13px; color:var(--grijs); }
.grond-zwart .beeld-ph{ background:
    repeating-linear-gradient(135deg, #1B1B1B 0 14px, #121212 14px 28px); }
.grond-zwart .beeld-ph-label .mark{ background:#1E1E1E; }
.grond-zwart .beeld-ph-label p{ color:#F2F2F0; }
.grond-zwart .beeld-ph-label span{ color:var(--grijs-licht); }
.beeld-ph img{ position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; }
.beeld-rond{ border-radius:var(--r-3); overflow:hidden; box-shadow:var(--schaduw-2); }

/* ── header en navigatie ───────────────────────────────────────────────── */
.topbar{ background:var(--inkt); color:#F2F2F0; }
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:9px; font-size:14px; }
.topbar .bel{ display:inline-flex; align-items:center; gap:8px; font-weight:600; text-decoration:none; color:#fff; }
.topbar .bel .punt{ width:8px; height:8px; border-radius:50%; background:var(--rood-licht); flex:none; }
.topbar .termijn{ color:#C7C7C2; font-weight:500; }
.kop{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); height:72px;
  box-shadow:0 1px 0 var(--lijn); }
.kop .wrap{ height:100%; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo{ display:inline-flex; align-items:center; gap:2px; text-decoration:none; color:var(--inkt); flex:none;
  font-weight:700; font-size:19px; letter-spacing:-.01em; }
.logo .rood{ color:var(--rood); }
.hoofdnav{ display:none; }
.hoofdnav ul{ list-style:none; display:flex; align-items:center; gap:4px; }
.hoofdnav a{ display:inline-flex; align-items:center; gap:8px; padding:10px 11px; border-radius:var(--r-1);
  text-decoration:none; font-size:15.5px; font-weight:500; color:var(--inkt); white-space:nowrap; }
.hoofdnav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--rood); border-radius:0; }
.kop-acties{ display:flex; align-items:center; gap:10px; }
.kop .knop{ min-height:44px; padding:10px 18px; font-size:15px; }
.menuknop{ display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 14px; border-radius:var(--r-pil);
  border:0; background:var(--vlak); color:var(--inkt); font-weight:600; font-size:15px; cursor:pointer; }
.menuknop .streep{ display:grid; gap:4px; }
.menuknop .streep i{ display:block; width:18px; height:2px; background:currentColor; border-radius:var(--r-mark);
  transition:transform .2s var(--in-uit), opacity .16s ease; }
.menuknop[aria-expanded="true"] .streep i:nth-of-type(1){ transform:translateY(6px) rotate(45deg); }
.menuknop[aria-expanded="true"] .streep i:nth-of-type(2){ opacity:0; }
.menuknop[aria-expanded="true"] .streep i:nth-of-type(3){ transform:translateY(-6px) rotate(-45deg); }
.kop-cta{ display:none; }
@media (min-width:1180px){
  .hoofdnav{ display:block; }
  .menuknop{ display:none; }
  .kop-cta{ display:inline-flex; }
}
@media (hover:hover) and (pointer:fine){
  .hoofdnav a:hover{ background:var(--vlak); }
  .menuknop:hover{ background:var(--vlak-sterk); }
}
.menu{ position:fixed; inset:72px 0 0 0; z-index:49; background:var(--papier); overflow-y:auto;
  overscroll-behavior:contain; padding:24px var(--rand) 40px; display:none; }
.menu.is-open{ display:block; animation:menu-in .22s var(--uit); }
@keyframes menu-in{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
.menu ul{ list-style:none; display:grid; gap:2px; }
.menu li > a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 4px; font-size:21px;
  font-weight:600; text-decoration:none; color:var(--inkt); border-bottom:1px solid var(--lijn); }
.menu li > a[aria-current="page"]{ color:var(--rood); }
.menu .knop{ width:100%; margin-top:24px; }
.menu-contact{ margin-top:28px; display:grid; gap:10px; font-size:var(--t-klein); color:var(--grijs); }

/* ── hero home ─────────────────────────────────────────────────────────── */
.hero{ position:relative; background:var(--papier); }
.hero-beeld{ position:relative; z-index:0; height:min(56svh, 520px); min-height:330px; margin:0; }
.hero-scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,0) 55%, rgba(255,255,255,.88) 88%, #fff 100%); }
.hero-tekst{ position:relative; z-index:2; margin-top:-56px; padding-bottom:48px; }
.hero h1{ max-width:16ch; }
.hero p{ font-size:var(--t-lead); line-height:1.5; max-width:46ch; margin-bottom:28px; }
.hero-cta-rij{ display:flex; flex-wrap:wrap; gap:14px; }
.hero-mini{ display:grid; gap:16px; margin-top:40px; }
.hero-mini div{ display:flex; flex-direction:column; gap:2px; font-size:14px; color:var(--grijs); }
.hero-mini strong{ font-size:17px; color:var(--inkt); font-weight:600; }
@media (min-width:900px){
  .hero{ min-height:min(82svh, 740px); display:grid; align-items:center; }
  .hero-beeld{ position:absolute; inset:0; height:auto; min-height:0; }
  .hero-scrim{ background:linear-gradient(90deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.84) 36%, rgba(255,255,255,0) 60%); }
  .hero-tekst{ margin-block:0; padding-block:96px; }
  .hero-mini{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:28px; max-width:620px; }
}

/* ── diensten als rail (tabs) ──────────────────────────────────────────── */
.diensten{ display:grid; gap:28px; }
.dienstrail ul{ list-style:none; display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:10px; }
.dienstmod{ position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:14px; width:100%;
  min-height:96px; padding:18px 20px; border:0; border-radius:var(--r-2); background:var(--vlak); color:var(--inkt);
  text-align:left; font-weight:600; font-size:18px; line-height:1.3; cursor:pointer;
  transition:background-color .16s ease, color .16s ease; }
.dienstmod .nr{ font-size:13px; font-weight:700; color:var(--rood); letter-spacing:.04em; }
.dienstmod small{ display:block; font-weight:500; font-size:14px; color:var(--grijs); margin-top:6px; }
.dienstmod[aria-selected="true"]{ background:var(--inkt); color:#fff; }
.dienstmod[aria-selected="true"] small{ color:#C7C7C2; }
.dienstmod[aria-selected="true"] .nr{ color:var(--rood-licht); }
.dienstpanelen{ position:relative; }
.dienstpaneel{ display:grid; gap:24px; }
.dienstpaneel + .dienstpaneel{ margin-top:40px; }
html.js .dienstpaneel + .dienstpaneel{ margin-top:0; }
.dienstpaneel[hidden]{ display:none; }
.dienstpaneel.is-actief{ animation:paneel-in .32s var(--uit); }
@keyframes paneel-in{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
.dienstpaneel .beeld-ph{ aspect-ratio:4/5; max-height:560px; border-radius:var(--r-3); }
.dienstpaneel h3{ font-size:var(--t-h2); letter-spacing:-.018em; line-height:1.12; }
.dienstpaneel p{ margin-top:16px; }
.dienstpaneel .pijl-link{ margin-top:22px; }
.dienstpaneel ul.punten{ list-style:none; margin-top:20px; display:grid; gap:10px; }
.punten li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; }
.punten li::before{ content:""; width:8px; height:14px; border-radius:var(--r-mark); background:var(--rood); margin-top:6px; }
@media (min-width:760px){ .dienstrail ul{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px; } }
@media (min-width:900px){ .dienstpaneel{ grid-template-columns:.78fr 1.21fr; gap:56px; align-items:center; } }

/* ── split sectie (beeld + tekst) ─────────────────────────────────────── */
.split{ display:grid; gap:32px; }
.split-beeld{ border-radius:var(--r-3); overflow:hidden; aspect-ratio:4/3; max-height:520px; }
.split.omgedraaid{ direction:rtl; }
.split.omgedraaid > *{ direction:ltr; }
.lijst-check{ list-style:none; display:grid; gap:14px; margin:22px 0; }
.lijst-check li{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; color:var(--inkt); }
.lijst-check li::before{ content:""; width:8px; height:14px; border-radius:var(--r-mark); background:var(--rood); margin-top:6px; flex:none; }
@media (min-width:900px){ .split{ grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } }

/* ── laag voor laag: de ene donkere sectie op de home ────────────────────
   Sticky scrollscene: bij scrollen bouwt een doorsnede van de bestrating
   laag voor laag op (zandbed, fundering, zandinwas, klinkers, voeg). ──── */
.laag-sectie{ padding-top:0; }
.laag-kop{ padding-top:clamp(64px, 7vw, 112px); padding-bottom:40px; }
.laag-kop h2{ max-width:18ch; color:#fff; }
.laag-kop .lead{ color:#D8D8D4; margin-top:18px; }
.laag-label{ display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:8px 14px; border-radius:var(--r-pil);
  background:rgba(255,255,255,.08); color:#fff; font-size:var(--t-label); font-weight:600; }
.laag-label::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rood-licht); }
.laag-scroll{ position:relative; height:280vh; }
html.js .laag-scroll{ display:block; }
.laag-plak{ position:sticky; top:72px; height:calc(100svh - 72px); min-height:540px;
  display:grid; grid-template-rows:1fr auto; gap:20px; padding-block:24px; }
.laag-vis{ position:relative; min-height:0; border-radius:var(--r-3); background:#141414; overflow:hidden; }
.laag-vis svg{ width:100%; height:100%; }
.laag-vis #sm-fundering, .laag-vis #sm-bestrating{ transform-box:fill-box; transform-origin:50% 100%; transform:scaleY(0); }
.laag-vis #sm-afschot, .laag-vis #sm-voeg{ opacity:0; }
.laag-vis #sm-trench{ opacity:1; }
.laag-vis .sm-maaiveld{ stroke:#5A5A55; stroke-width:1.5; stroke-dasharray:6 5; }
.laag-vis .sm-label{ fill:#9B9B96; font-size:12px; font-family:'Host Grotesk',sans-serif; }
.laag-naam{ font-size:clamp(22px,2.6vw,32px); font-weight:600; color:#fff; letter-spacing:-.01em; }
.laag-tekst{ max-width:48ch; color:#D8D8D4; font-size:16px; min-height:3.2em; margin:8px 0 0; }
.laag-nrs{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.laag-nrs span{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:700;
  color:#8A8A85; background:rgba(255,255,255,.06); transition:background-color .2s ease, color .2s ease; }
.laag-nrs span.is-actief{ background:var(--rood); color:#fff; }
.laag-voet{ display:grid; gap:4px; }
.laag-balk{ position:relative; height:6px; border-radius:var(--r-pil); background:rgba(255,255,255,.1); overflow:hidden; }
.laag-vooruitgang{ position:absolute; inset:0 auto 0 0; width:0%; background:var(--rood); border-radius:var(--r-pil); }
.laag-statisch{ margin-top:36px; padding-bottom:clamp(56px,6vw,96px); }
.laag-statisch-raster{ display:grid; gap:16px; }
.laag-statisch-kaart{ background:#171717; border-radius:var(--r-2); padding:20px 22px; }
.laag-statisch-kaart .laag-naam{ font-size:19px; }
.laag-statisch-kaart p{ color:#D8D8D4; margin-top:8px; font-size:15px; }
@media (min-width:900px){
  .laag-plak{ grid-template-columns:1.3fr .8fr; grid-template-rows:1fr; column-gap:40px; }
  .laag-info{ display:flex; flex-direction:column; justify-content:center; }
  .laag-voet{ grid-column:1 / -1; align-self:end; }
  .laag-statisch-raster{ grid-template-columns:repeat(5, minmax(0,1fr)); }
}
@media (prefers-reduced-motion:reduce){
  html.js .laag-scroll{ display:none; }
  html.js .laag-statisch{ display:block; }
}
html.js .laag-statisch{ display:none; }
@media (scripting:none){ .laag-scroll{ display:none; } .laag-statisch{ display:block; } }

/* ── fotolaag naast de schematische doorsnede (donkere sectie) ──────────── */
.laag-foto{ margin-top:40px; }
.laag-foto-beeld{ position:relative; border-radius:var(--r-3); overflow:hidden; aspect-ratio:16/9; max-height:420px; }
.laag-foto-bijschrift{ margin-top:14px; font-size:var(--t-klein); color:var(--grijs-licht); }

/* ── projectstrook ─────────────────────────────────────────────────────── */
.projecten{ display:grid; gap:28px; }
.projectstrook{ display:grid; gap:20px; }
.projectrij{ display:grid; gap:0; text-decoration:none; color:var(--inkt); border-radius:var(--r-3); overflow:hidden;
  background:var(--vlak); transition:transform .2s var(--uit); }
.projectrij .beeld-ph{ aspect-ratio:16/10; }
.projectrij-tekst{ padding:24px clamp(20px,3vw,32px) 28px; }
.projectrij .plaats{ font-size:var(--t-label); font-weight:600; color:var(--rood); margin:0 0 6px; }
.projectrij h3{ font-size:20px; }
.projectrij p{ margin-top:10px; color:var(--grijs); }
@media (hover:hover) and (pointer:fine){ .projectrij:hover{ transform:translateY(-4px); } }
@media (min-width:760px){ .projectstrook{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.vragen{ display:grid; gap:12px; }
.vraag{ background:var(--vlak); border-radius:var(--r-2); }
.vraag summary{ cursor:pointer; list-style:none; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center;
  padding:20px 22px; font-weight:600; font-size:18px; line-height:1.35; }
.vraag summary::-webkit-details-marker{ display:none; }
.vraag summary .plus{ position:relative; width:28px; height:28px; border-radius:50%; background:var(--papier); flex:none; }
.vraag summary .plus::before, .vraag summary .plus::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:2px;
  margin:-1px 0 0 -6px; background:var(--rood); border-radius:var(--r-mark); transition:transform .2s var(--uit); }
.vraag summary .plus::after{ transform:rotate(90deg); }
.vraag[open] summary .plus::after{ transform:rotate(0deg); }
.vraag-antwoord{ padding:0 22px 22px; }
.vraag-antwoord p{ margin:0; color:var(--grijs); }

/* ── richtprijs-tabel ──────────────────────────────────────────────────── */
.prijstabel{ width:100%; border-collapse:collapse; margin:22px 0; font-size:15px; }
.prijstabel th{ text-align:left; font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  color:var(--grijs); border-bottom:2px solid var(--inkt); padding:10px 12px; }
.prijstabel td{ padding:14px 12px; border-bottom:1px solid var(--lijn); vertical-align:top; }
.prijstabel tr:last-child td{ border-bottom:none; }
.disclaimer{ font-size:var(--t-klein); color:var(--grijs); margin-top:12px; }

/* ── procestijdlijn op dienstpagina's (donkere sectie) ───────────────────── */
.proces-sectie{ padding-top:0; }
.proces-kop{ padding-top:clamp(56px,6vw,96px); padding-bottom:32px; }
.proces-kop h2{ color:#fff; max-width:18ch; }
.proces-kop .lead{ color:#D8D8D4; margin-top:16px; }
.proces{ list-style:none; position:relative; display:grid; gap:0; padding-bottom:clamp(56px,6vw,96px); }
.proces::before{ content:""; position:absolute; left:13px; top:8px; bottom:8px; width:2px; background:rgba(255,255,255,.14); }
.proces li{ position:relative; display:grid; gap:6px; padding:0 0 28px 46px; }
.proces li::before{ content:attr(data-nr); position:absolute; left:0; top:-2px; width:28px; height:28px; border-radius:50%;
  background:var(--rood); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; }
.proces li:last-child{ padding-bottom:0; }
.proces h3{ font-size:18px; color:#fff; }
.proces p{ margin:0; color:#D8D8D4; font-size:15.5px; }
@media (min-width:900px){ .proces{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px 48px; } }

/* ── subpagina-kop (pkop) ─────────────────────────────────────────────── */
.pkop-band{ position:relative; margin:0; height:clamp(260px, 38vw, 480px); }
.pkop-band::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.72) 84%, #fff 100%); }
.pkop-tekst{ position:relative; z-index:2; margin-top:-96px; padding-bottom:clamp(40px, 5vw, 72px); }
.pkop-tekst h1{ max-width:20ch; }
.pkop-tekst .lead{ margin-top:18px; }
.kruimel{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; font-size:var(--t-label); color:var(--grijs); margin-bottom:16px; }
.kruimel li{ display:inline-flex; align-items:center; gap:6px; }
.kruimel li + li::before{ content:"/"; color:var(--grijs-licht); }
.kruimel a{ color:inherit; }

/* ── formulieren ───────────────────────────────────────────────────────── */
.form-kaart{ background:var(--vlak); border-radius:var(--r-3); padding:clamp(22px, 3vw, 36px); }
.form-grid{ display:grid; grid-template-columns:repeat(1, minmax(0,1fr)); gap:16px; }
.form-veld{ display:grid; gap:7px; }
.form-veld.volledig{ grid-column:1 / -1; }
.form-veld label{ font-weight:600; font-size:var(--t-klein); }
.form-veld input, .form-veld select, .form-veld textarea{
  width:100%; min-height:52px; padding:12px 14px; border-radius:var(--r-1); border:1.5px solid var(--lijn-sterk);
  background:var(--papier); font-size:17px; transition:border-color .16s ease, box-shadow .16s ease; }
.form-veld textarea{ min-height:120px; resize:vertical; line-height:1.5; }
.form-veld input:focus, .form-veld select:focus, .form-veld textarea:focus{ border-color:var(--rood); box-shadow:0 0 0 3px rgba(207,31,46,.16); outline:none; }
.submit{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:14px 28px; margin-top:20px;
  border-radius:var(--r-pil); background:var(--rood); color:#fff; font-weight:600; font-size:16px; border:0; cursor:pointer;
  transition:background-color .16s ease; }
@media (hover:hover) and (pointer:fine){ .submit:hover{ background:var(--rood-diep); } }
.form-note{ margin-top:14px; font-size:13.5px; color:var(--grijs); }
@media (min-width:640px){ .form-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ── cta-band (licht op home, donker op subpagina's) ─────────────────────── */
.cta-band{ text-align:center; }
.cta-band.grond-zwart h2{ color:#fff; }
.cta-band.grond-zwart p{ color:#D8D8D4; }
.cta-band h2{ max-width:20ch; margin-inline:auto; }
.cta-band p{ margin-top:14px; color:var(--grijs); }
.cta-band .knop{ margin-top:26px; }

/* ── werkgebied-raster ─────────────────────────────────────────────────── */
.plaatsen-raster{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:24px; }
.plaatsen-raster a, .plaatsen-raster .todo-plek{ display:flex; align-items:center; justify-content:center; text-align:center;
  min-height:72px; padding:16px 18px; border-radius:var(--r-1); background:var(--vlak); text-decoration:none; color:var(--inkt);
  font-weight:600; transition:background-color .16s ease; }
.plaatsen-raster .todo-plek{ color:var(--grijs); font-weight:500; border:1.5px dashed #B9B9B3; background:transparent; }
@media (hover:hover) and (pointer:fine){ .plaatsen-raster a:hover{ background:var(--vlak-sterk); } }
@media (min-width:760px){ .plaatsen-raster{ grid-template-columns:repeat(4, minmax(0,1fr)); } }

.melding-balk{ background:#2A1313; color:#FFD9D6; text-align:center; padding:12px 20px; font-size:14px; font-weight:600; }

/* ── gegevenslijst (kaart) ────────────────────────────────────────────── */
.gegevens{ display:grid; gap:1px; background:var(--lijn); border-radius:var(--r-2); overflow:hidden; margin:0; }
.gegevens div{ background:var(--vlak); padding:16px 18px; display:grid; gap:4px; }
.gegevens dt{ font-size:var(--t-label); color:var(--grijs); font-weight:600; }
.gegevens dd{ margin:0; font-weight:500; }
@media (min-width:640px){ .gegevens{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ── footer ────────────────────────────────────────────────────────────── */
.voet{ background:var(--vlak); padding:48px 0 28px; }
.voet-raster{ display:grid; gap:32px; }
.voet-kop{ font-size:16px; font-weight:600; margin:0 0 12px; }
.voet ul{ list-style:none; display:grid; gap:6px; }
.voet a{ text-decoration:none; }
.voet-merk p{ font-size:var(--t-klein); color:var(--grijs); margin-top:14px; max-width:40ch; }
.voet-merk .logo{ font-size:20px; }
.voet-gegevens{ margin:0; display:grid; gap:8px; font-size:var(--t-klein); color:var(--grijs); }
.voet-onder{ margin-top:40px; padding-top:20px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
  font-size:var(--t-label); color:var(--grijs); box-shadow:0 -1px 0 var(--lijn-sterk); }
@media (hover:hover) and (pointer:fine){ .voet a:hover{ text-decoration:underline; } }
@media (min-width:760px){ .voet-raster{ grid-template-columns:1.3fr .8fr .8fr 1.2fr; gap:40px; } }

/* ── reveal: standaard zichtbaar, alleen verborgen als het script draait ─ */
html.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s var(--uit), transform .6s var(--uit); }
html.js .reveal.is-in{ opacity:1; transform:none; }
@media (scripting:none){ .reveal{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  html.js .reveal{ opacity:1; transform:none; transition:none; }
  *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* ── T.LAAN Bestrating, 12 okt 2026 ─────────────────────────────────────── */
.logo{ gap:10px; }
.logo-beeld{ height:34px; width:auto; }
.voet .logo-beeld{ height:40px; }
.hero-split .hero-beeld img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){
  .hero-split .hero-beeld{ left:52%; }
  .hero-split .hero-scrim{ display:none; }
  .hero-split .hero-tekst{ max-width:var(--max, 1240px); }
  .hero-split .hero-tekst > *{ max-width:44%; }
  .hero-split .hero-mini{ max-width:44%; }
}
.dienstrail-zes ul{ grid-template-columns:repeat(2, minmax(0,1fr)); }
@media (min-width:760px){ .dienstrail-zes ul{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.dienstpaneel .beeld-ph img, .projectrij .beeld-ph img, .dienstblok-beeld img{ width:100%; height:100%; object-fit:cover; }
.split-beeld-staand{ aspect-ratio:4/5; max-height:620px; }
.split-beeld-staand img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){ .projectstrook-drie{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.projectstrook-drie .beeld-ph{ aspect-ratio:4/3; }
figure.projectrij{ margin:0; }
.pkop-zonder-band{ margin-top:0; padding-top:56px; }
.dienstlijst{ display:grid; gap:20px; }
.dienstblok{ display:grid; gap:24px; padding:28px; border-radius:var(--r-3); background:var(--vlak); scroll-margin-top:110px; }
.dienstblok .nr{ font-size:13px; font-weight:700; color:var(--rood); letter-spacing:.04em; }
.dienstblok h2{ margin:6px 0 12px; }
.dienstblok-beeld{ border-radius:var(--r-3); overflow:hidden; aspect-ratio:4/3; }
@media (min-width:900px){ .dienstblok{ grid-template-columns:1.25fr .75fr; gap:48px; align-items:center; padding:40px; } }
.filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.filter button{ border:1.5px solid var(--vlak-sterk); background:var(--papier); border-radius:var(--r-pil); padding:9px 16px; font:inherit; font-size:15px; cursor:pointer; min-height:44px; }
.filter button[aria-pressed="true"]{ border-color:var(--rood); color:var(--rood); font-weight:600; }
.materiaallijst{ list-style:none; margin:0; padding:0; border-top:1px solid var(--vlak-sterk); }
.materiaal{ display:grid; gap:12px; padding:20px 0; border-bottom:1px solid var(--vlak-sterk); }
.materiaal h2{ font-size:18px; margin:0 0 4px; }
.materiaal p{ margin:0; color:var(--grijs); font-size:15px; }
.materiaal-rechts{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.materiaal .prijs{ font-weight:700; }
.materiaal .voorraad{ font-size:13px; color:var(--grijs); }
.materiaal.is-uit .prijs{ text-decoration:line-through; color:var(--grijs); }
.knop-klein{ min-height:40px; padding:0 18px; font-size:14px; }
@media (min-width:760px){ .materiaal{ grid-template-columns:1fr auto; align-items:center; gap:32px; } .materiaal-rechts{ justify-content:flex-end; } }
.plaatsen-raster{ list-style:none; margin:0; padding:0; }
.plaatsen-raster li span{ display:block; padding:12px 14px; border-radius:var(--r-2, 10px); background:var(--vlak); font-weight:500; }
.menu-contact a{ display:block; }
.hero-split h1{ margin-bottom:16px; }
@media (max-width:899px){ .hero-split .hero-tekst{ margin-top:0; padding-top:28px; } .hero-split .hero-beeld{ height:min(36svh, 330px); min-height:200px; } }
@media (max-width:639px){ .topbar .termijn{ display:none; } }
@media (max-width:899px) and (max-height:620px){ .hero-split .hero-beeld{ display:none; } .pkop-zonder-band{ padding-top:20px; } }
.topbar .bel{ white-space:nowrap; }
.dienstrail-zes .dienstmod{ overflow-wrap:anywhere; hyphens:auto; }
@media (max-width:420px){ .dienstrail-zes .dienstmod{ font-size:15px; } }
.projectrij h2{ font-size:20px; }
.pkop-split{ display:grid; gap:28px; padding-bottom:clamp(32px,4vw,56px); }
.pkop-foto{ border-radius:var(--r-3); overflow:hidden; aspect-ratio:4/3; }
.pkop-foto img{ width:100%; height:100%; object-fit:cover; }
@media (min-width:900px){ .pkop-split{ grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; } .pkop-foto{ aspect-ratio:5/4; max-height:440px; } }

/* ── minishovel huren (13-10-2026) ─────────────────────────────────────── */
.huur-acties{ display:flex; flex-wrap:wrap; gap:12px; }
.huur-subkop{ font-size:18px; margin:0 0 6px; }
.huur-raster{ display:grid; gap:40px; }
@media (min-width:900px){ .huur-raster{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:56px; align-items:start; } }
.prijstabel td.bedrag{ text-align:right; font-weight:700; white-space:nowrap; }
.prijstabel thead th:last-child{ text-align:right; }
.lijst-licht li{ color:#F2F2F0; }
.lijst-licht li::before{ background:var(--rood-licht); }
.machinist-tarief{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:1px; margin:28px 0 14px; background:rgba(255,255,255,.14); border-radius:var(--r-2); overflow:hidden; }
.machinist-tarief div{ background:var(--zwart); padding:14px 14px 12px; display:grid; gap:4px; }
.machinist-tarief dt{ font-size:13px; color:var(--grijs-licht); }
.machinist-tarief dd{ margin:0; font-weight:700; font-size:18px; color:#fff; }
.reserveer{ list-style:none; counter-reset:r; margin:0; padding:0; display:grid; gap:1px; background:var(--lijn); border-radius:var(--r-2); overflow:hidden; }
.reserveer li{ counter-increment:r; background:var(--papier); padding:18px 20px 18px 64px; position:relative; display:grid; gap:2px; }
.reserveer li::before{ content:counter(r); position:absolute; left:20px; top:18px; width:28px; height:28px; border-radius:50%; background:var(--rood); color:#fff; font-size:13px; font-weight:700; display:grid; place-items:center; }
.reserveer span{ color:var(--grijs); font-size:15.5px; }
@media (min-width:900px){ .reserveer{ grid-template-columns:repeat(5, minmax(0,1fr)); } .reserveer li{ padding:64px 18px 20px; } .reserveer li::before{ top:20px; left:18px; } }
.pkop-cta{ margin-top:24px; }
@media (max-width:899px){ .pkop-zonder-band{ padding-top:32px; } }
.form-veld input:focus-visible, .form-veld select:focus-visible, .form-veld textarea:focus-visible,
.form-veld input:focus, .form-veld select:focus, .form-veld textarea:focus{ border-color:var(--rood); box-shadow:0 0 0 3px rgba(207,31,46,.32); outline:2px solid var(--rood); outline-offset:1px; }