/* ============================================================================
   Mejan Ontruimingen ads-lander
   Skelet: pro-landers (VS24/Draagkracht video-hero patroon), huisstijl
   mejanontruimingen.nl: logo-groen #008B23, kit-groen #0D6A05 (knoppen),
   antraciet #1F2122, RECHTE knoppen (kit radius 0), kaarten 8px,
   Roboto + Roboto Slab, u-vorm, ingetogen en piëteitsvol.
   Alle a11y/perf-lessen uit de SpeedyService-QA zitten er vanaf het begin in.
   ========================================================================== */

/* Fonts staan lokaal in plaats van via fonts.googleapis.com. Die stylesheet was
   render-blokkerend: een extra DNS, TLS en round-trip voordat er ook maar iets op
   het scherm kwam (Lighthouse mobiel: 804ms). Het zijn variabele fonts, dus een
   bestand per familie dekt alle gewichten. */
@font-face{
  font-family:"Roboto";font-style:normal;font-weight:100 900;font-stretch:100%;
  font-display:swap;src:url(../fonts/roboto.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Roboto Slab";font-style:normal;font-weight:100 900;
  font-display:swap;src:url(../fonts/roboto-slab.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  --groen:#008B23;        /* logo-groen: accenten, markers, iconen */
  --groen-knop:#0D6A05;   /* kit-groen: knoppen met witte tekst (AA) */
  --groen-donker:#0A5504; /* hover van groene knoppen */
  --groen-licht:#7FD494;  /* leesbaar groen op zwart/antraciet (AA) */
  --groen-soft:#EAF5EC;   /* zachte tint: chips, pins */
  --ink:#1F2122;          /* antraciet: tekst, donkere vlakken */
  --zwart:#000000;        /* header/footer/overlay, kit-secondary */
  --paper:#FFFFFF;
  --paper-2:#F5F7F5;      /* rustige sectietint met een vleug groen */
  --line:#E3E6E3;
  --muted:#4C5250;        /* alinea-tekst op wit, AA */
  --wa:#188841;           /* WhatsApp-groen, donker genoeg voor wit (4,5:1) */
  --wa-deep:#147237;
  --gold:#9A6600;         /* sterren op wit (4,9:1) */
  --radius:18px;          /* ronder, naar het Feitsma-patroon (was 8px) */
  --btn-r:999px;          /* knoppen als pill, naar het Feitsma-patroon (was recht) */
  --shadow-sm:0 2px 10px rgba(0,0,0,.05);
  --shadow:0 10px 24px 0 rgba(0,0,0,.08);
  --shadow-lg:0 24px 60px -18px rgba(0,0,0,.35);
  --maxw:1140px;          /* kit containerbreedte */
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:"Roboto",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(15.5px,.4vw + 14.5px,17px);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Roboto Slab",Georgia,serif;font-weight:700;line-height:1.15;letter-spacing:-.01em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
picture{display:contents}
/* Dubbele focusring: groen binnen, donker buiten, zichtbaar op wit, groen en zwart. */
:focus-visible{outline:3px solid var(--groen);outline-offset:2px;box-shadow:0 0 0 6px rgba(0,0,0,.85);border-radius:4px}
.wrap{
  width:min(100% - 2.4rem,var(--maxw));margin-inline:auto;
  padding-left:max(0px,env(safe-area-inset-left));
  padding-right:max(0px,env(safe-area-inset-right));
}
.eyebrow{
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.8rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  color:var(--groen-knop);
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--groen);flex:none}
.op-donker .eyebrow,.eyebrow.op-donker{color:var(--groen-licht)}
.op-donker .eyebrow::before,.eyebrow.op-donker::before{background:var(--groen)}

/* ---------------- Knoppen: pill, kit-groen, hover donkerder ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.9rem 1.6rem;border-radius:var(--btn-r);border:0;cursor:pointer;
  font-family:"Roboto",sans-serif;font-weight:600;font-size:.9rem;line-height:1;
  text-transform:uppercase;letter-spacing:.05em;
  transition:background .2s,transform .25s var(--ease);
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn svg{width:17px;height:17px;flex:none}
.btn--groen{background:var(--groen-knop);color:#fff}
.btn--groen:hover{background:var(--groen-donker)}
.btn--ink{background:var(--ink);color:#fff}
.btn--ink:hover{background:var(--zwart)}
.btn--wa{background:var(--wa);color:#fff}
.btn--wa:hover{background:var(--wa-deep)}
.btn--lg{padding:1.05rem 1.9rem;font-size:.95rem}
.btn--ghost{background:transparent;border:1.5px solid currentColor;color:var(--ink)}
.btn--ghost:hover{background:rgba(0,0,0,.06)}

/* ---------------- Topbar: zwart zoals hun header ---------------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;isolation:isolate;
  padding:max(.8rem,env(safe-area-inset-top)) 0 .8rem;
  background:rgba(0,0,0,.55);
  transition:background .25s ease,box-shadow .25s ease,padding .25s ease;
}
.topbar__in{display:flex;align-items:center;gap:1rem}
.topbar__logo{display:inline-flex;align-items:center;gap:.6rem}
.topbar__logo img{height:50px;width:auto;transition:height .25s ease}
.topbar__naam{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:1.34rem;color:#fff;line-height:1;white-space:nowrap}
.topbar__naam small{display:block;font-family:"Roboto",sans-serif;font-weight:600;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-top:.2rem}
.topbar__spacer{flex:1}
.topbar__tel{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#fff;font-size:.98rem}
.topbar__tel svg{width:17px;height:17px}
.topbar .btn{padding:.75rem 1.15rem;font-size:.82rem}
.topbar.is-stuck{background:rgba(0,0,0,.92);box-shadow:var(--shadow-sm);padding:max(.5rem,env(safe-area-inset-top)) 0 .5rem}
.topbar.is-stuck .topbar__logo img{height:42px}

/* ---------------- Hero: hun eigen video, zwarte overlay (site: 63%) ---------------- */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,760px);display:grid;align-items:center;
  background:#0c0f0d url("../video/hero-poster.webp") center/cover no-repeat;
  color:#fff;
}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero__veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.58) 55%,rgba(0,0,0,.8) 100%)}
/* Watermerk: alleen de driehoek, wit. Staat boven de veil maar onder de tekst.
   Bron is het witte logo van hun eigen site op 1563px, dus altijd verkleinen en nooit
   opschalen: daardoor blijven de randen scherp. Groter en met meer dekking dan de eerste
   opzet, zodat het merk echt meedoet in plaats van dat je het moet zoeken. */
.hero__mark{
  position:absolute;z-index:-1;pointer-events:none;
  top:clamp(4rem,8vw,6.5rem);right:clamp(.5rem,2.5vw,2.5rem);
  width:min(460px,34vw);height:auto;opacity:.2;
}
/* Uitgesneden figuur rechts. ROOTCAUSE van het schuiven dat hier eerder zat: de figuur en
   het formulier moeten in HETZELFDE stelsel hangen.
   Het formulier zit in een gecentreerde container met een plafond (.of-wrap, max-width
   1220px, margin auto). De rechterrand daarvan schuift dus met de HELFT van elke extra
   vensterbreedte mee. Een figuur op left:<pct>% schuift mee met dat percentage, dus met
   76% tegen 50% kruipt hij 26px per 100px vensterbreedte naar rechts ten opzichte van het
   formulier. Daarom ankeren we hem net als Feitsma op de containerrand: dezelfde
   gecentreerde berekening, dus de afstand tot het formulier is bij elke breedte gelijk.
   VERTICAAL spiegelt de bottom de negatieve marge van .of-wrap, zodat hij ook verticaal
   niet meebeweegt: zijn voeten staan altijd exact op de bovenrand van het formulier.
   LET OP: wijzigen .of-wrap of --maxw, dan moeten deze twee mee. */
.hero__person{
  position:absolute;z-index:0;pointer-events:none;
  left:auto;transform:none;
  /* Exact de formule van de rechterrand van .of-wrap: de sectiepadding, of de helft van
     wat er overblijft boven het plafond van 1220px. Geen offset, dus de figuur en het
     formulier eindigen op dezelfde lijn (SpeedyService-patroon). Ankeren op --maxw (1140)
     is NIET goed: tussen 1220 en 1300 zit dan nog een sprong omdat het formulier een
     ander plafond heeft. */
  right:max(clamp(16px,4vw,40px),calc((100% - 1220px) / 2));
  /* De clamp is de bovenrand van het formulier; --fig-zak is hoeveel van de figuur daar
     ACHTER valt, uitgedrukt als deel van zijn eigen hoogte. Zo zakt hij in elke tier even
     diep weg en blijft de ankering op het formulier intact. Eén getal om aan te draaien. */
  bottom:calc(clamp(56px,7vw,96px) - var(--fig-zak));
  /* Vaste px-hoogte, geen percentage: bij Speedy bleek een procenthoogte geen betrouwbare
     basis te hebben en altijd op het maximum uit te komen. Per tier een eigen getal. */
  /* 74vh is een plafond, geen wens: de figuurtop zit op hero - formulierrand - 0,8h, en
     zonder plafond duikt zijn hoofd op een venster van 700px hoog achter de topbar
     (top zou 44px worden, de topbar is 76px). Met dit plafond blijft de top overal boven
     94px. Op een normaal venster (810px en hoger) haalt hij gewoon de volle 598px. */
  --fig-h:min(598px,74vh);
  --fig-zak:calc(var(--fig-h) * .2);
  height:var(--fig-h);width:auto;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.35));
}
.hero__content{
  position:relative;z-index:1;
  padding-block:clamp(7rem,16vh,9rem) clamp(8rem,7rem + 14vh,15rem);max-width:56rem;
  /* links uitlijnen met het wrap-raster in plaats van centreren binnen de hero */
  margin-left:max(1.2rem,calc((100% - var(--maxw)) / 2));margin-right:auto;
}
.hero__title{font-size:clamp(2rem,4.6vw,3.4rem);color:#fff}
.hero__title em{font-style:normal;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(0,139,35,.55) 62%);padding-inline:.06em}
.hero__sub{margin-top:1.1rem;font-size:clamp(1rem,1.4vw,1.2rem);color:#fff;max-width:46rem;text-shadow:0 0 10px rgba(0,0,0,.3)}
.hero__chips{display:flex;gap:.6rem 1.4rem;margin-top:1.5rem;flex-wrap:wrap}
.hero__chips span{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:1rem;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4)}
.hero__chips .vink{width:22px;height:22px;border-radius:50%;background:var(--groen);color:#fff;display:inline-grid;place-items:center;flex:none}
.hero__chips .vink svg{width:12px;height:12px}

/* ---------------- Offerte-balk over de hero ---------------- */
.offerte-overlay{position:relative;z-index:5;padding:0 clamp(16px,4vw,40px) 60px;background:var(--paper-2);display:flow-root}
[id]{scroll-margin-top:96px} /* alle ankers landen onder de fixed topbar */
.of-wrap{position:relative;max-width:1220px;margin:clamp(-96px,-7vw,-56px) auto 0}
.of-box{
  position:relative;z-index:2;background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:clamp(26px,3.2vw,42px) clamp(26px,3.8vw,48px);
  box-shadow:var(--shadow-lg);
}
.of-trust{position:absolute;top:20px;right:24px;display:flex;align-items:center;gap:8px;z-index:5;flex-wrap:wrap;justify-content:flex-end}
.of-trust-badge{
  display:inline-flex;align-items:center;gap:7px;padding:7px 11px;background:#fff;border-radius:6px;
  font-size:12px;font-weight:600;color:var(--ink);box-shadow:0 4px 14px -4px rgba(0,0,0,.35);
}
.of-trust-badge .sterren{color:var(--gold);letter-spacing:.06em;font-size:11px}
.of-title{font-size:clamp(22px,2.3vw,32px);color:#fff}
.of-sub{font-size:14.5px;color:rgba(255,255,255,.78);margin:6px 0 22px}
.of-pill{
  display:grid;grid-template-columns:1.15fr 1px 1fr 1px 1fr auto;align-items:stretch;gap:0;
  background:#fff;border-radius:var(--radius);overflow:hidden;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 16px;min-width:0;cursor:text}
.of-field span{font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.04em;line-height:1;margin:0 0 4px;text-transform:uppercase;opacity:.72}
.of-field input,.of-field select{
  border:none;outline:none;background:none;font-family:inherit;font-size:16px;color:var(--ink);
  width:100%;padding:0;line-height:1.4;min-height:26px;-webkit-appearance:none;appearance:none;
}
.of-field select{background:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%231F2122' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right center;padding-right:16px}
.of-divider{background:rgba(31,33,34,.12);width:1px;align-self:center;height:38px}
.of-cta{
  display:inline-flex;align-items:center;gap:10px;background:var(--groen-knop);color:#fff;border:none;border-radius:var(--btn-r);
  padding:14px 22px;font-family:inherit;font-weight:600;font-size:14px;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;
  transition:background .2s,transform .2s var(--ease);white-space:nowrap;
}
.of-cta:hover{background:var(--groen-donker);transform:translateY(-1px)}
.of-cta svg{width:16px;height:16px}
.of-avail{margin-top:14px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.75)}
.of-avail::before{content:"";display:inline-block;vertical-align:middle;width:8px;height:8px;border-radius:50%;background:var(--groen);margin-right:.5rem}
.of-avail a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* ---------------- Sectie-basis ---------------- */
.sectie--tint{background:var(--paper-2)}
.sectie__kop{max-width:64ch}
.sectie__kop h2,.rev__title{font-size:clamp(1.6rem,2.9vw,2.3rem)}
.sectie__kop h2 em,.rev__title em,.reasons__body h2 em,.story__body h2 em,.waarom__body h2 em{
  font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(0,139,35,.22) 62%);padding-inline:.06em;
}
.sectie__kop p{margin-top:.8rem;color:var(--muted)}

/* ---------------- Reasons ---------------- */
.reasons{padding:clamp(3.2rem,7vw,5.5rem) 0}
.reasons__grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{
  content:"";position:absolute;inset:0;background:var(--groen);
  border-radius:calc(var(--radius) + 8px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1;
}
/* Foto absoluut in het kader: zo bepaalt de TEKSTkolom de rijhoogte en kan een staande
   bron (2:3) de rij nooit hoger duwen dan de tekst (huisregel: foto even hoog als tekst). */
.reasons__photo{position:relative;border-radius:var(--radius);overflow:hidden;height:100%;min-height:24rem;box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reasons__badge{
  position:absolute;right:-10px;bottom:-18px;background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:.8rem 1.05rem;box-shadow:var(--shadow);line-height:1.25;font-size:.92rem;
}
.reasons__badge b{display:block;font-size:1.02rem;color:var(--groen-licht)}
.reasons__body h2{font-size:clamp(1.6rem,2.9vw,2.3rem);margin-top:.7rem}
.reasons__body>p{margin-top:.8rem;color:var(--muted);max-width:54ch}
.reasons__list{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:.85rem}
.reasons__list li{display:flex;gap:.9rem;align-items:baseline;padding-bottom:.85rem;border-bottom:1px solid var(--line)}
.reasons__num{font-family:"Roboto Slab",serif;font-weight:700;font-size:.95rem;color:#fff;background:var(--groen-knop);padding:.15em .5em;flex:none}
.reasons__list b{font-weight:700}
.reasons__list p{color:var(--muted);font-size:.95rem;margin-top:.15rem}
.reasons__stats{display:flex;gap:clamp(1.2rem,3vw,2.6rem);margin-top:1.5rem;flex-wrap:wrap}
.reasons__stat b{font-family:"Roboto Slab",serif;font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;color:var(--groen-knop)}
.reasons__stat span{display:block;font-size:.8rem;color:var(--muted)}
.reasons__cta{margin-top:1.6rem;display:flex;gap:.8rem;flex-wrap:wrap}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:var(--ink);transform:rotate(4deg) translate(14px,14px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--groen-knop)}
.reasons--alt .reasons__badge b{color:#fff}

/* ---------------- Diensten: 6 tegels ---------------- */
.diensten{background:var(--paper-2);padding:clamp(3.2rem,7vw,5.5rem) 0}
.diensten__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.dienst{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--groen);
  border-radius:var(--radius);padding:1.3rem 1.25rem;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:.45rem;
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}
.dienst:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.dienst h3{font-size:1.05rem}
.dienst p{color:var(--muted);font-size:.92rem}
.dienst a{margin-top:auto;padding-top:.6rem;font-weight:600;font-size:.86rem;color:var(--groen-knop);display:inline-flex;align-items:center;gap:.4rem}
.dienst a svg{width:14px;height:14px}
.dienst a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------------- Waarom: donker vlak ---------------- */
.waarom{background:var(--zwart);color:#fff;padding:clamp(3.2rem,7vw,5.5rem) 0}
.waarom__grid{display:grid;grid-template-columns:1.32fr .8fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:stretch}
.waarom__media{position:relative;height:100%}
.waarom__media img{width:100%;height:100%;min-height:clamp(380px,42vw,560px);object-fit:cover;border-radius:var(--radius)}
.waarom__tag{
  position:absolute;left:16px;bottom:16px;background:var(--groen-knop);color:#fff;
  border-radius:var(--radius);padding:.5rem .95rem;font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;
}
.waarom__body h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-top:.7rem;color:#fff}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.4rem;margin-top:1.6rem}
.wmini h3{display:flex;align-items:center;gap:.6rem;font-family:"Roboto",sans-serif;font-size:1rem;font-weight:700;color:#fff}
.wmini h3 svg{width:26px;height:26px;flex:none;color:var(--groen)}
.wmini p{margin-top:.3rem;font-size:.88rem;color:rgba(255,255,255,.68)}

/* ---------------- Galerij: ons werk in beeld ---------------- */
.galerij{padding:clamp(3.2rem,7vw,5.5rem) 0}
.galerij__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.gitem{position:relative;margin:0;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);isolation:isolate}
.gitem img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .4s var(--ease)}
.gitem:hover img{transform:scale(1.035)}
.gitem figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:1.6rem .9rem .7rem;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.85) 100%);
  color:#fff;font-size:.85rem;font-weight:500;
}

/* ---------------- Reviews ---------------- */
.rev{position:relative;background:var(--paper);padding:clamp(3.2rem,7vw,5.5rem) 0;overflow:hidden}
.rev__orb{position:absolute;right:-140px;top:-140px;width:440px;height:440px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,139,35,.16) 0%,transparent 65%);pointer-events:none}
.rev__top{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.4rem);align-items:center;position:relative}
.rev__title{margin-top:.7rem}
.rev__lead{margin-top:.8rem;color:var(--muted);max-width:52ch}
.rev__src{display:flex;gap:.7rem;margin-top:1.3rem;flex-wrap:wrap}
.rev__badge{
  display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);padding:9px 13px;font-size:13px;font-weight:600;box-shadow:var(--shadow-sm);
}
.rev__badge .sterren{color:var(--gold);font-size:12px;letter-spacing:.06em}
.rev__score{
  position:relative;border-radius:var(--radius);overflow:hidden;min-height:320px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;
  background:var(--ink) url("../img/einde-dag.webp") center/cover no-repeat;isolation:isolate;
}
.rev__score::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,.84));z-index:-1}
.rev__score-label{font-size:.8rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--groen-licht)}
.rev__num{font-family:"Roboto Slab",serif;font-weight:700;font-size:clamp(4rem,10vw,6.4rem);line-height:1;color:#fff}
.rev__score .sterren{color:#FFC633;font-size:1.25rem;letter-spacing:.14em;margin-top:.3rem}
.rev__count{margin-top:.45rem;font-size:.95rem;color:rgba(255,255,255,.85)}
.rev__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:clamp(1.8rem,4vw,2.6rem)}
.rcard{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem 1.2rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.rcard blockquote{margin:0;font-size:.95rem;line-height:1.55}
.rcard figcaption{margin-top:auto;padding-top:.8rem;display:flex;justify-content:space-between;gap:.6rem;font-size:.82rem;color:var(--muted)}
.rcard figcaption b{color:var(--ink);font-weight:700}
.rcard__src{display:inline-flex;align-items:center;gap:.35rem}
.rcard__src .dot{width:7px;height:7px;border-radius:50%;background:var(--groen)}
.rev__cta{display:flex;justify-content:center;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3vw,2.2rem);text-align:center}

/* ---------------- Werkwijze ---------------- */
.werkwijze{background:var(--paper-2);padding:clamp(3.2rem,7vw,5.5rem) 0}
.werkwijze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:clamp(1.6rem,3vw,2.4rem)}
.step{position:relative;border-radius:var(--radius);padding:1.5rem 1.3rem 1.3rem;display:flex;flex-direction:column;min-height:230px;overflow:hidden}
.step--ink{background:var(--ink);color:#fff}
.step--groen{background:var(--groen-knop);color:#fff}
.step__no{position:absolute;right:14px;top:8px;font-family:"Roboto Slab",serif;font-weight:700;font-size:2.4rem;opacity:.2;line-height:1}
.step__ic{width:40px;height:40px;margin-bottom:.8rem;color:#fff}
.step--ink .step__ic{color:var(--groen)}
.step h3{font-family:"Roboto",sans-serif;font-size:1.05rem;font-weight:700;padding-right:1.6rem;color:#fff}
.step p{margin-top:.4rem;font-size:.88rem;color:rgba(255,255,255,.78)}
.step__tag{margin-top:auto;padding-top:.9rem;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.step--ink .step__tag{color:var(--groen-licht)}
.step--groen .step__tag{color:#E4F5E8}

/* ---------------- Story ---------------- */
.story{padding:clamp(3.2rem,7vw,5.5rem) 0;display:grid;gap:clamp(2.6rem,6vw,4.4rem)}
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:stretch}
.story__media{position:relative;isolation:isolate}
.story__media::before{
  content:"";position:absolute;inset:0;background:var(--groen);
  border-radius:calc(var(--radius) + 8px);transform:rotate(-3deg) translate(-12px,12px);z-index:-1;
}
.story__row:nth-child(even) .story__media{order:2}
.story__row:nth-child(even) .story__media::before{background:var(--ink);transform:rotate(3deg) translate(12px,12px)}
.story__photo{position:relative;border-radius:var(--radius);overflow:hidden;height:100%;min-height:22rem;box-shadow:var(--shadow);transform:rotate(1deg)}
.story__row:nth-child(even) .story__photo{transform:rotate(-1deg)}
.story__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story__badge{
  position:absolute;right:-10px;bottom:-16px;background:var(--ink);color:#fff;
  border-radius:var(--radius);padding:.7rem 1rem;box-shadow:var(--shadow);
  font-size:.92rem;line-height:1.25;
}
.story__badge b{display:block;font-size:1rem;color:var(--groen-licht)}
.story__row:nth-child(even) .story__badge{right:auto;left:-10px;background:var(--groen-knop)}
.story__row:nth-child(even) .story__badge b{color:#fff}
.story__body h2{font-size:clamp(1.5rem,2.6vw,2.05rem);max-width:22ch;margin-top:.7rem}
.story__body p{margin-top:.8rem;color:var(--muted);max-width:52ch}
.story__cta{margin-top:1.4rem;display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.story__bel{font-weight:600;color:var(--ink)}
.story__bel a{color:var(--groen-knop);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-block;padding-block:4px}

/* ---------------- FAQ ---------------- */
.faq{background:var(--paper-2);padding:clamp(3.2rem,7vw,5.5rem) 0}
.faq__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.8rem,4vw,3rem);margin-top:clamp(1.4rem,3vw,2rem);align-items:stretch}
.faq__list{display:grid;gap:.7rem}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:border-color .2s ease}
.faq__item[open]{border-color:var(--groen-knop)}
.faq__item summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 1.15rem;font-weight:600;font-size:.98rem;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";width:26px;height:26px;flex:none;border-radius:50%;background:var(--groen-soft);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%230D6A05' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;transition:transform .2s var(--ease);
}
.faq__item[open] summary::after{
  background-color:var(--groen-knop);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1 6h10' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}
.faq__item p{padding:0 1.15rem 1.1rem;color:var(--muted);font-size:.94rem}
.faq__photo{border-radius:var(--radius);overflow:hidden;height:100%;box-shadow:var(--shadow-sm)}
.faq__photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%}

/* ---------------- Leadblock ---------------- */
.leadblock{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--paper)}
.leadblock__card{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-lg);
}
.leadblock__media{position:relative;min-height:420px}
.leadblock__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.leadblock__panel{
  position:relative;color:#fff;padding:clamp(1.8rem,3.4vw,3rem);
  background:linear-gradient(150deg,#26302a 0%,#101312 55%,var(--zwart) 100%);isolation:isolate;
}
.leadblock__panel::before{
  content:"";position:absolute;right:-120px;top:-120px;width:380px;height:380px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,139,35,.28) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.leadblock__panel h2{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-top:.7rem;color:#fff}
.lead-p{margin-top:.7rem;color:rgba(255,255,255,.78);font-size:.96rem;max-width:54ch}
.lead-badge{
  display:inline-flex;align-items:center;gap:9px;background:#fff;color:var(--ink);border-radius:var(--radius);
  padding:8px 14px;margin-top:1.1rem;font-size:.85rem;font-weight:600;
}
.lead-badge .sterren{color:var(--gold);font-size:.8rem;letter-spacing:.06em}

.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.lf__field>span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.lf__field input:not([type=checkbox]),.lf__field select,.lf__field textarea{
  border:0;border-radius:6px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:16px;font-weight:500;padding:.72rem .85rem;width:100%;
  -webkit-appearance:none;appearance:none;
}
.lf__field textarea{min-height:5.2rem;resize:vertical}
.lf__field input::placeholder,.lf__field textarea::placeholder{color:#767676;font-weight:400}
.lf__field--sel{position:relative}
.lf__field--sel select{padding-right:2rem}
.lf__field--sel::after{
  content:"";position:absolute;right:.9rem;bottom:1.05rem;width:8px;height:8px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none;
}
.lf .btn{width:100%;padding:1rem 1.5rem;font-size:.95rem}
.lf__privacy{font-size:.78rem;color:rgba(255,255,255,.55)}
.lf__done{padding:1.5rem 1.3rem;background:#122b18;border:1px solid #1d5a2c;border-radius:var(--radius);color:#dcf3e1;line-height:1.55}
.lf__done a{color:#fff;font-weight:700}

/* ---------------- Footer ---------------- */
.foot{
  position:relative;color:#fff;padding:clamp(3rem,6vw,4.5rem) 0 1.6rem;isolation:isolate;
  background:var(--zwart) url("../img/bank-dragen.webp") center 35%/cover no-repeat;
}
.foot::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.9),rgba(0,0,0,.95));z-index:-1}
.foot::after{
  content:"";position:absolute;left:-120px;top:-120px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,139,35,.2) 0%,transparent 65%);z-index:-1;pointer-events:none;
}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1.35fr;gap:clamp(1.6rem,4vw,3rem)}
.foot__brand > img{height:52px;width:auto}
.foot__brand p{margin-top:.9rem;color:rgba(255,255,255,.72);font-size:.92rem;max-width:38ch}
.foot__badges{display:flex;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.foot__badge{display:inline-flex;align-items:center;gap:7px;background:#fff;border-radius:6px;padding:7px 11px;color:var(--ink);font-size:12px;font-weight:600}
.foot__badge .sterren{color:var(--gold);font-size:11px;letter-spacing:.06em}
.foot__col h3{font-family:"Roboto",sans-serif;font-size:.8rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--groen-licht)}
.foot__col nav{display:grid;gap:.55rem;margin-top:1rem}
.foot__col nav a{color:rgba(255,255,255,.82);font-size:.94rem;transition:color .2s,transform .2s var(--ease)}
.foot__col nav a:hover{color:#fff;transform:translateX(3px)}
.foot__contact .btn{margin-bottom:1.1rem}
.foot__contact ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.foot__contact li{display:flex;align-items:flex-start;gap:.6rem;color:rgba(255,255,255,.82);font-size:.94rem}
.foot__contact li svg{width:16px;height:16px;flex:none;color:var(--groen);margin-top:.2rem}
.foot__contact a:hover{color:#fff}
.foot__privacy{margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid rgba(255,255,255,.14);padding-top:1rem}
.foot__privacy summary{cursor:pointer;font-size:.8rem;color:rgba(255,255,255,.6);list-style:none;display:inline-flex;align-items:center;gap:.4rem}
.foot__privacy summary::-webkit-details-marker{display:none}
.foot__privacy summary::after{content:"+";font-weight:700;color:var(--groen-licht)}
.foot__privacy[open] summary::after{content:"-"}
.foot__privacy summary:hover{color:#fff}
.foot__privacy p{margin-top:.7rem;font-size:.8rem;color:rgba(255,255,255,.6);max-width:78ch;line-height:1.6}
.foot__privacy a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.foot__bottom{
  margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.14);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.8rem;color:rgba(255,255,255,.55);
}
.foot__legal{display:flex;gap:1.2rem;flex-wrap:wrap}
.foot__legal a:hover{color:#fff}

/* ---------------- Mobiele sticky CTA-balk ---------------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;gap:8px;
  padding:8px max(8px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  background:#fff;border-top:1px solid var(--line);box-shadow:0 -6px 22px -8px rgba(0,0,0,.3);
}
.mcta a{
  flex:1 1 0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;
  border-radius:6px;font-weight:600;font-size:.9rem;line-height:1;text-transform:uppercase;letter-spacing:.03em;
  -webkit-tap-highlight-color:transparent;
}
.mcta a:active{filter:brightness(.92);transform:scale(.98)}
.mcta a svg{width:17px;height:17px}
.mcta__call{background:var(--ink);color:#fff}
.mcta__wa{background:var(--wa);color:#fff}
.mcta__quote{background:var(--groen-knop);color:#fff}

/* ---------------- Scroll-reveal (alleen met JS actief) ---------------- */
.js [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].is-zichtbaar{opacity:1;transform:none}
/* Boven de vouw nooit op opacity 0. Onzichtbare tekst telt niet als geschilderd, dus de
   LCP schoof op tot de observer en de transitie klaar waren: 3,4s van de 4,6s zat in
   render delay. De verschuiving mag blijven, die schildert wel. */
.js .hero [data-reveal]{opacity:1}

/* ---------------- Breakpoints ---------------- */
/* De figuur BLIJFT staan bij smallere vensters, met een vaste pixelhoogte in plaats van
   een percentage. Zo doen Feitsma en Excellent het ook. Om ruimte te maken krimpt de
   TEKSTKOLOM mee, niet de figuur eruit. */
@media (max-width:1240px){
  .hero__person{--fig-h:min(494px,70vh)}
  .hero__content{max-width:40rem}
  .hero__sub{max-width:32rem}
}
@media (max-width:1040px){
  .hero__person{--fig-h:min(414px,66vh)}
  .hero__content{max-width:34rem}
  .hero__sub{max-width:30rem}
}
@media (max-width:1100px){
  .of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}
}
@media (max-width:980px){
  .waarom__grid{grid-template-columns:1fr}
  .waarom__media{height:auto} /* gestapeld: geen kolom om de hoogte van over te nemen */
  .rev__grid{grid-template-columns:1fr 1fr}
  .diensten__grid{grid-template-columns:1fr 1fr}
  .galerij__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .of-pill{grid-template-columns:1fr;border-radius:var(--radius);padding:8px;gap:6px}
  .of-divider{display:none}
  .of-field{padding:10px 14px;border-bottom:1px solid rgba(31,33,34,.08)}
  .of-field:last-of-type{border-bottom:0}
  .of-cta{justify-content:center;padding:14px 20px}
}
@media (max-width:880px){
  .reasons__grid{grid-template-columns:1fr}
  /* Expliciete breedte: met alleen auto-marges krimpt het grid-item naar zijn inhoud,
     en dat is hier de badge-tekst (de foto staat absoluut). De foto werd zo 256px. */
  .reasons__media{width:100%;max-width:30rem;margin-inline:auto}
  /* gestapeld is er geen kolom om de hoogte van over te nemen: terug naar eigen ratio */
  .reasons__photo{aspect-ratio:4/5;height:auto;min-height:0}
  /* kolombreed hangt het gedraaide kader met translate buiten het venster (zie story) */
  .reasons__media::before{transform:rotate(-3deg)}
  .reasons--alt .reasons__media::before{transform:rotate(3deg)}
  .waarom__list{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .rev__top{grid-template-columns:1fr}
  .hero__mark{width:min(280px,38vw);opacity:.16}
  .story__row{grid-template-columns:1fr}
  .story__photo{aspect-ratio:4/3;height:auto;min-height:0} /* gestapeld terug naar eigen ratio */
  .story__row:nth-child(even) .story__media{order:0}
  /* gestapeld is de media wrap-breed: de horizontale translate stak 2px buiten het venster */
  .story__row:nth-child(even) .story__media::before{transform:rotate(3deg)}
  .story__media::before{transform:rotate(-3deg)}
  .werkwijze__grid{grid-template-columns:1fr 1fr}
  .faq__grid{grid-template-columns:1fr}
  .faq__photo{display:none}
  .foot__top{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .leadblock__card{grid-template-columns:1fr}
  .leadblock__media{min-height:0;aspect-ratio:16/10}
}
@media (max-width:768px){
  /* Hero klapt om (SpeedyService-patroon): tekst boven, figuur eronder in de flow, en het
     formulier trekt er 44px over heen. De figuur verdwijnt dus NIET op mobiel. */
  .hero{min-height:min(72vh,620px);display:flex;flex-direction:column;justify-content:flex-end}
  /* Deze achtergrond is het LCP-element. 1600px breed is op een telefoon dubbelop:
     de smalle versie scheelt de helft van de bytes op precies het kritieke pad. */
  .hero{background-image:url("../video/hero-poster-mobiel.webp")}
  .hero__content{order:1;padding-block:6.5rem 1.4rem;max-width:56rem}
  .hero__sub{max-width:46rem}
  .hero__person{
    position:static;right:auto;bottom:auto;order:2;
    height:auto;max-height:300px;max-width:86%;margin:0 auto;
  }
  .of-wrap{margin-top:-44px}
  .offerte-overlay{padding-bottom:48px}
}
@media (max-width:620px){
  .hero__mark{display:none} /* vecht op deze breedte met de kop */
  .topbar__tel{display:none}
  .topbar .btn .lbl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
  .topbar .btn{padding:.85rem 1rem}
  .mcta{display:flex}
  body:has(.mcta){padding-bottom:calc(65px + env(safe-area-inset-bottom))} /* 8+48+8 + 1px border */
}
@media (max-width:560px){
  .rev__grid{grid-template-columns:1fr}
  .waarom__list{grid-template-columns:1fr}
  .werkwijze__grid{grid-template-columns:1fr}
  .diensten__grid{grid-template-columns:1fr}
  .galerij__grid{grid-template-columns:1fr}
  .foot__top{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column}
  .reasons__stats{gap:1.2rem}
}
@media (max-width:460px){
  .lf__row{grid-template-columns:1fr}
}

/* ---------------- Toegankelijkheid en print ---------------- */
/* ---------------- Symmetrie: knoprijen en badges ---------------- */
/* Elke knoprij is een flexrij: knoppen zijn zo breed als hun eigen label en zakken naar
   de volgende regel zodra ze niet meer naast elkaar passen. Gelijke kolommen (grid) leek
   netter, maar perste lange labels als "Vraag een gratis offerte aan" over twee of drie
   regels; een knop die over de volle kolombreedte uitrekt is bovendien veel te zwaar.
   De component-regels verderop zetten hier geen eigen display op: die staan later in
   het bestand en overrulen deze regel. */
.reasons__cta,.rev__cta,.story__cta,.gebied__cta,.zeker__cta,.galerij__cta,.faq__cta,.dozenb__cta,.waarom__cta{
  display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;
}
.rev__cta,.galerij__cta{margin-inline:auto;justify-content:center}
.reasons__cta>.btn,.rev__cta>.btn,.story__cta>.btn,.gebied__cta>.btn,.zeker__cta>.btn,
.galerij__cta>.btn,.faq__cta>.btn,.dozenb__cta>.btn,.waarom__cta>.btn{
  white-space:normal;text-align:center; /* past het label niet, dan breekt het in plaats van uit te steken */
}
@media (max-width:620px){
  /* Mobiel: alles onder elkaar en even breed. */
  .reasons__cta,.rev__cta,.story__cta,.gebied__cta,.zeker__cta,.galerij__cta,.faq__cta,.dozenb__cta,.waarom__cta{
    max-width:23rem;
  }
  .reasons__cta>.btn,.rev__cta>.btn,.story__cta>.btn,.gebied__cta>.btn,.zeker__cta>.btn,
  .galerij__cta>.btn,.faq__cta>.btn,.dozenb__cta>.btn,.waarom__cta>.btn{width:100%}
  .rev__cta,.galerij__cta{margin-inline:auto}
  .of-cta,.lf__submit{width:100%}
}

/* Badges: op smalle vensters niet meer buiten de foto hangen (ze zweefden los over
   de tekst zodra de rij stapelde) en nooit smaller dan hun eigen tekst. */
@media (max-width:880px){
  /* Gestapeld hangt een absoluut geplaatste badge los over de tekst eronder (de foto is
     dan niet meer de hoge kolom waar hij tegenaan stond). Laat hem gewoon meelopen. */
  .reasons__badge,.story__badge,.reasons--alt .reasons__badge,.story__row:nth-child(even) .story__badge{
    position:static;display:inline-block;right:auto;left:auto;bottom:auto;
    margin-top:.9rem;max-width:100%;
  }
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  .js [data-reveal]{opacity:1;transform:none} /* zelfde specificiteit als de reveal-regel */
  .hero__video{display:none}
}
@media print{
  .topbar,.mcta{display:none}
  .js [data-reveal]{opacity:1;transform:none}
}

/* ---------------- Werkgebied: groene kaart, patroon van de Feitsma-gemeentekaart ----------------
   Eigen media query onderaan dit blok, zodat de bestaande responsive-sectie ongemoeid blijft. */
.gebied{padding:clamp(2.6rem,5vw,4.2rem) 0}
.gebied__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;
  background:var(--groen-donker);color:#fff;border-radius:calc(var(--radius) + 10px);box-shadow:var(--shadow)}
.gebied__body{position:relative;z-index:1;padding:clamp(1.8rem,3.6vw,3rem)}
.gebied__body .eyebrow{color:var(--groen-licht)}
.gebied__body .eyebrow::before{background:var(--groen-licht)}
.gebied__body h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:24ch;margin-top:.7rem}
.gebied__body>p{margin-top:.8rem;color:rgba(255,255,255,.92);max-width:60ch}
.gebied__list{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0}
.gebied__list li{display:flex;gap:.9rem;align-items:flex-start;padding:.72rem 0;border-top:1px solid rgba(255,255,255,.22)}
.gebied__no{flex:none;width:22px;height:22px;border-radius:50%;background:var(--groen);color:#fff;display:inline-grid;place-items:center;margin-top:.15rem}
.gebied__no svg{width:12px;height:12px}
.gebied__list b{display:block;font-weight:700;font-size:.98rem;margin-bottom:.1rem}
.gebied__list li span:last-child{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.88)}
.gebied__wijken{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1.2rem}
.gebied__wijken span{border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:.34rem .8rem;font-size:.85rem;font-weight:700;color:#fff}
.gebied__cta{margin-top:clamp(1.3rem,2.4vw,1.9rem)}
.gebied .btn--ghost{color:#fff}
.gebied .btn--ghost:hover{background:rgba(255,255,255,.12)}
.gebied__media{position:relative;min-height:100%}
.gebied__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gebied__media .waarom__tag{position:absolute;right:16px;bottom:16px}
@media (max-width:860px){
  .gebied__card{grid-template-columns:1fr}
  .gebied__media{min-height:280px;order:-1}
  .gebied__media img{position:static;height:280px}
}

/* ---------------- Zekerheden: witte kaart met dubbele checklijst (patroon van het Feitsma-erkend-blok) ---------------- */
.zeker{padding:clamp(2.6rem,5vw,4.2rem) 0;background:var(--paper-2)}
.zeker__card{background:#fff;border:1px solid var(--line);border-radius:calc(var(--radius) + 10px);
  box-shadow:var(--shadow);padding:clamp(1.8rem,3.6vw,3rem)}
.zeker__card .sectie__kop{max-width:none}
.zeker__list{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(1.5rem,3.5vw,3rem)}
.zeker__list li{display:flex;gap:.9rem;align-items:flex-start;padding:.72rem 0;border-top:1px solid var(--line)}
.zeker__no{flex:none;width:22px;height:22px;border-radius:50%;background:var(--groen);color:#fff;display:inline-grid;place-items:center;margin-top:.15rem}
.zeker__no svg{width:12px;height:12px}
.zeker__list b{display:block;font-weight:700;font-size:.98rem;margin-bottom:.1rem}
.zeker__list li span:last-child{font-size:.92rem;line-height:1.5;color:var(--muted)}
.zeker__cta{margin-top:clamp(1.3rem,2.4vw,1.9rem)}
@media (max-width:720px){
  .zeker__list{grid-template-columns:1fr}
}

/* ---------------- Losse CTA-rijen onder galerij en FAQ ---------------- */
.galerij__cta{margin-top:clamp(1.6rem,3vw,2.2rem)}
.faq__cta{margin-top:1.6rem}

/* ---------------- Dozenblok: lichte kaart met staande foto (patroon van het Feitsma-dozenblok) ---------------- */
/* Volle groene band, zelfde patroon als de zwarte .waarom-sectie: de kleur loopt
   horizontaal door tot de vensterrand, de kaart erbinnen verliest zijn eigen vlak. */
.dozenb{padding:clamp(3.2rem,7vw,5.5rem) 0;background:var(--groen-knop);color:#fff}
.dozenb__card{display:grid;grid-template-columns:1.15fr .85fr;overflow:hidden;
  background:transparent;border:0;border-radius:calc(var(--radius) + 10px);box-shadow:none}
.dozenb .eyebrow{color:#fff}
.dozenb .eyebrow::before{background:#fff}
.dozenb__body{padding-left:0}
.dozenb__body h2{color:#fff}
.dozenb__body p{color:rgba(255,255,255,.92)}
.dozenb__media img{border-radius:var(--radius)}
/* Knoppen: op groen werkt de groene knop niet meer, dus wit met groene tekst. */

.dozenb__body{padding:clamp(1.8rem,3.6vw,3rem);display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.dozenb__body h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:22ch;margin-top:.7rem}
.dozenb__body p{margin-top:.8rem;color:var(--muted);max-width:56ch}
.dozenb__cta{margin-top:clamp(1.3rem,2.4vw,1.9rem)}
.dozenb__media{position:relative;min-height:100%}
.dozenb__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dozenb__media .waarom__tag{position:absolute;left:16px;bottom:16px;right:auto}
/* Tekst en knoppen op de groene band: staat NA de basisregels, anders wint var(--muted). */
.dozenb__body p{color:rgba(255,255,255,.94)}
.dozenb__body h2,.dozenb .eyebrow{color:#fff}
.dozenb .btn--groen{background:#fff;color:var(--groen-knop)}
.dozenb .btn--groen:hover{background:#F1F1F1}
.dozenb .btn--wa{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85)}
.dozenb .btn--wa:hover{background:rgba(255,255,255,.12)}
@media (max-width:860px){
  .dozenb__card{grid-template-columns:1fr}
  .dozenb__media{min-height:300px;order:-1}
  .dozenb__media img{position:static;height:300px}
}