/* ============================================================================
   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}
/* Open menu: de balk moet dicht, anders schijnt de hero door het paneel heen. */
.topbar:has(.topnav.is-open){background:rgba(0,0,0,.96)}

/* ---------------- Topnavigatie ---------------- */
/* De nav hangt precies tussen het logo en het telefoonnummer. Dat lukt niet met de
   spacer: die heeft flex:1 en zit ALLEEN rechts van de nav, dus alle vrije ruimte kwam
   daar terecht en de nav plakte tegen het logo (16px links, 63px rechts op 1440).
   Auto-marges verdelen de vrije ruimte wel gelijk over beide kanten, maar krijgen niets
   zolang een buur flex-grow heeft. Vandaar dat de spacer hier uit de flow gaat.
   Alleen boven 1080px, want daaronder is de nav een hamburger en duwt de spacer de
   knoppen naar rechts. */
@media (min-width:1081px){
  .topbar__spacer{display:none}
  .topnav{margin-inline:auto}
}
.topnav__list{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.topnav__item{position:relative}
.topnav__link{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.62rem .82rem;border-radius:var(--btn-r);
  color:#fff;font-weight:600;font-size:.9rem;white-space:nowrap;
  transition:background .2s ease,color .2s ease;
}
.topnav__link:hover{background:rgba(255,255,255,.16)}
.topnav__link[aria-current="page"]{color:var(--groen-licht)}
/* De items zitten op desktop in een eigen pil, zodat de balk als een geheel leest
   in plaats van als vijf losse links. Mobiel niet: daar IS de lijst het
   uitklappaneel en zou een pil eromheen nergens op slaan. */
@media (min-width:1081px){
  .topnav__list{
    background:rgba(255,255,255,.09);
    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;
    padding:.22rem;
  }
  .topnav__link[aria-current="page"]{background:rgba(255,255,255,.2)}
  /* Op de dichtgeplakte balk mag de pil iets meer contrast hebben, anders
     verdwijnt hij in het zwart. */
  .topbar.is-stuck .topnav__list{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.18)}
}
.topnav__caret{width:10px;height:10px;flex:none;transition:transform .2s ease}
.topnav__item:hover .topnav__caret,
.topnav__item:focus-within .topnav__caret{transform:rotate(180deg)}

/* Uitklapmenu: puur CSS op hover en focus-within, dus geen JS en toetsenbord werkt. */
.topnav__sub{
  position:absolute;top:calc(100% + .78rem);left:0;min-width:278px;
  list-style:none;margin:0;padding:.45rem;
  background:var(--paper);border-radius:14px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s;
}
/* Onzichtbare brug over de tussenruimte, anders valt hover weg tussen knop en menu. */
.topnav__sub::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.78rem}
.topnav__item:hover .topnav__sub,
.topnav__item:focus-within .topnav__sub{opacity:1;visibility:visible;transform:none}
.topnav__sublink{
  display:block;padding:.6rem .8rem;border-radius:10px;
  color:var(--ink);font-weight:600;font-size:.88rem;
  transition:background .16s ease,color .16s ease;
}
.topnav__sublink:hover{background:var(--groen-soft);color:var(--groen-knop)}
.topnav__sublink[aria-current="page"]{color:var(--groen-knop);background:var(--groen-soft)}

/* Hamburger, alleen zichtbaar zodra de balk te vol wordt. */
.topnav__toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;padding:0;border:0;border-radius:999px;
  background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
}
.topnav__toggle:hover{background:rgba(255,255,255,.2)}
.topnav__toggle span{display:block;width:19px;height:2px;background:currentColor;border-radius:2px;position:relative;transition:background .2s ease}
.topnav__toggle span::before,.topnav__toggle span::after{
  content:"";position:absolute;left:0;width:19px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .22s var(--ease),top .22s var(--ease);
}
.topnav__toggle span::before{top:-6px}
.topnav__toggle span::after{top:6px}
.topnav.is-open .topnav__toggle span{background:transparent}
.topnav.is-open .topnav__toggle span::before{top:0;transform:rotate(45deg)}
.topnav.is-open .topnav__toggle span::after{top:0;transform:rotate(-45deg)}

/* Tussenmaat: de WhatsApp-knop valt als eerste af, tel en offerte zijn belangrijker. */
@media (max-width:1180px){
  .topbar .btn--wa{display:none}
}
/* Uitklappaneel onder de balk. Geen zijlade: minder JS en niets om in te sluiten. */
@media (max-width:1080px){
  .topnav__toggle{display:inline-flex}
  .topnav__list{
    position:absolute;left:0;right:0;top:100%;
    display:none;flex-direction:column;align-items:stretch;gap:.1rem;
    background:#0B0D0C;border-top:1px solid rgba(255,255,255,.12);
    padding:.7rem 1.2rem 1.3rem;
    max-height:calc(100dvh - 100%);overflow-y:auto;
    box-shadow:var(--shadow-lg);
  }
  .topnav.is-open .topnav__list{display:flex}
  .topnav__link{padding:.8rem .9rem;font-size:1rem}
  .topnav__caret{display:none}
  /* In het paneel staat het submenu gewoon open: niets om nog eens open te klikken. */
  .topnav__sub{
    position:static;opacity:1;visibility:visible;transform:none;
    background:transparent;box-shadow:none;min-width:0;
    padding:0 0 .4rem .9rem;
  }
  .topnav__sub::before{display:none}
  .topnav__sublink{color:rgba(255,255,255,.8);font-weight:500;padding:.62rem .8rem}
  .topnav__sublink:hover,.topnav__sublink[aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
}

/* ---------------- Pagina-kop: compacte zwarte band voor subpagina's ----------------
   Geen video: die hoort bij de homepage. De bovenmarge houdt de kop vrij van de
   fixed topbar (76px, 60px als hij vastgeplakt zit). */
.pagehero{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:#fff;
  padding:clamp(7rem,13vw,9.5rem) 0 clamp(2.8rem,6vw,4.2rem)}
.pagehero::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:rgba(255,255,255,.12)}
/* height:auto is hier geen detail: het img-attribuut height="588" telt als opmaakhint,
   dus zonder deze regel blijft de hoogte op 588 staan terwijl de breedte naar 430 knijpt.
   Het brede logo-merk werd zo een smalle, uitgerekte A. Zie ook .hero__mark, die dit al had. */
.pagehero__mark{position:absolute;right:-3%;top:18%;width:min(40%,430px);height:auto;opacity:.055;z-index:-1;pointer-events:none}
.pagehero__kruimels{font-size:.84rem;color:rgba(255,255,255,.58);margin-bottom:.9rem}
.pagehero__kruimels a{color:rgba(255,255,255,.78)}
.pagehero__kruimels a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.pagehero h1{font-size:clamp(1.9rem,4vw,3rem);max-width:20ch;margin-top:.6rem}
.pagehero h1 em{font-style:normal;color:var(--groen-licht)}
.pagehero p{margin-top:.9rem;color:rgba(255,255,255,.82);max-width:58ch}
.pagehero__cta{margin-top:1.5rem;display:flex;gap:.7rem;flex-wrap:wrap}

/* Op pagina's met de offerte-balk schuift .of-wrap tot 96px over de sectie erboven
   (zie de clamp bij .of-wrap). De compacte pagehero is te laag om dat te absorberen,
   dus daar spiegelt de onderpadding die overlap, anders vallen de CTA-knoppen erachter. */
.pagehero:has(+ .offerte-overlay){padding-bottom:clamp(6.5rem,13vw,10.5rem)}

/* Pagina-kop met foto: zelfde band, beeld over de volle breedte met het onderwerp
   rechts (de foto's zijn daarop gecomponeerd) en een veil die links dekt zodat de
   tekst leesbaar blijft. Het watermerk vecht met de foto en gaat in deze variant uit. */
.pagehero--foto .pagehero__bg{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;object-position:68% 40%}
.pagehero--foto .pagehero__veil{position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(12,15,13,.93) 0%,rgba(12,15,13,.8) 34%,rgba(12,15,13,.42) 66%,rgba(12,15,13,.18) 100%)}
.pagehero--foto .pagehero__mark{display:none}
@media (max-width:768px){
  .pagehero--foto .pagehero__veil{background:linear-gradient(90deg,rgba(12,15,13,.94) 0%,rgba(12,15,13,.78) 48%,rgba(12,15,13,.5) 100%)}
}

/* ---------------- 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 ---------------- */
/* De gap hoort op .wrap, niet op de sectie: de sectie heeft maar EEN kind (.wrap), dus
   daar viel niets tussen te zetten en stonden de rijen zonder tussenruimte op elkaar.
   Dat is hier zichtbaar, want het gedraaide kader (::before, translate 12px) en de badge
   (bottom:-16px) steken onder hun eigen doos uit en landden op de eyebrow van de rij eronder. */
.story{padding:clamp(3.2rem,7vw,5.5rem) 0}
.story>.wrap{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}
/* Onderste strook naar het OranjeLift-patroon: twee gecentreerde regels,
   colofon met middots boven, juridische links eronder. */
.foot__bottom{
  margin-top:clamp(1.6rem,3vw,2.4rem);border-top:1px solid rgba(255,255,255,.1);
  padding:1.5rem 1rem 0;text-align:center;
  font-size:.8rem;line-height:1.8;color:rgba(255,255,255,.75);
}
.foot__bottom p{margin:0}
.foot__bottom p+p{margin-top:4px}
.foot__bottom .foot__dot{margin:0 6px;opacity:.75}
.foot__bottom a{color:rgba(255,255,255,.7);text-decoration:underline;text-underline-offset:3px}
.foot__bottom a:hover{color:#fff}

/* ---------------- Juridische pagina's ---------------- */
.juridisch{padding:clamp(2.6rem,6vw,4.2rem) 0}
.juridisch .wrap{max-width:880px}
.juridisch h2{
  font-size:clamp(1.2rem,2.4vw,1.5rem);margin-top:clamp(2rem,4.5vw,2.8rem);
  display:flex;align-items:center;gap:.7rem;
}
.juridisch h2::before{content:"";width:26px;height:3px;background:var(--groen);border-radius:2px;flex:none}
.juridisch h2:first-child{margin-top:0}
.juridisch p,.juridisch li{color:var(--muted)}
.juridisch p{margin:.7rem 0 0}
.juridisch ul,.juridisch ol{margin:.7rem 0 0;padding-left:1.2rem}
.juridisch li{margin-top:.35rem}
.juridisch li::marker{color:var(--groen);font-weight:700}
.juridisch a:not(.btn){color:var(--groen-knop);text-decoration:underline;text-underline-offset:3px}
.juridisch a:not(.btn):hover{color:var(--groen-donker)}
.jversie{margin-top:clamp(2rem,4vw,2.6rem);padding-top:1rem;border-top:1px solid var(--line);font-size:.85rem}
.jtabel-scroll{overflow-x:auto;margin-top:.9rem}
.jtabel{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.jtabel th,.jtabel td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
.jtabel th{font-family:"Roboto",sans-serif;font-size:.75rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--groen-knop)}
.jtabel td{color:var(--muted)}
.jcta{
  margin-top:clamp(2.2rem,5vw,3.2rem);background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(1.5rem,3.5vw,2.2rem);text-align:center;
}
.jcta h2{justify-content:center;margin-top:0}
.jcta p{max-width:56ch;margin:.6rem auto 0}
.jcta__knoppen{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem}

/* ---------------- 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}
  .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}
}

/* ---------------- M3-calculator ----------------
   Twee kolommen: links de ruimtes, rechts een meelopende uitkomst. Onder 900px
   zakt de uitkomst mee in de flow en neemt een vaste balk onderin het lopende
   totaal over. Die balk vervangt daar de mcta-balk, twee balken over elkaar is
   precies wat er bij de andere landers misging. */
.calc{padding:clamp(1.8rem,3.5vw,2.6rem) 0 clamp(2rem,4vw,3rem);background:var(--paper)}
.calc__grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(1.5rem,3vw,2.4rem);align-items:start;margin-top:clamp(1rem,2vw,1.4rem)}

/* Startpunt: typische inboedel per woningtype, zodat niemand bij nul begint. */
.calc__preset{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);padding:.9rem 1rem;margin-bottom:.8rem}
.calc__preset h2{font-size:1.05rem}
.calc__preset p{margin-top:.35rem;color:var(--muted);font-size:.9rem}
.calc__presetrij{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.calc__presetknop{padding:.6rem 1.05rem;border-radius:var(--btn-r);border:1.5px solid var(--line);background:#fff;
  font-family:"Roboto",sans-serif;font-weight:600;font-size:.86rem;color:var(--ink);cursor:pointer;transition:all .18s ease}
.calc__presetknop:hover{border-color:var(--groen-knop);color:var(--groen-knop)}
.calc__presetknop[aria-pressed="true"]{background:var(--groen-knop);border-color:var(--groen-knop);color:#fff}

.calc__ruimte{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:.5rem;overflow:hidden;transition:border-color .2s ease}
.calc__ruimte[open]{border-color:var(--groen-knop)}
.calc__ruimte summary{display:flex;align-items:center;gap:.75rem;padding:.72rem 1rem;cursor:pointer;font-weight:700;font-size:1rem;list-style:none}
.calc__ruimte summary::-webkit-details-marker{display:none}
.calc__ruimte summary::after{content:"";width:9px;height:9px;margin-left:auto;flex:none;
  border-right:2.5px solid var(--muted);border-bottom:2.5px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.calc__ruimte[open] summary::after{transform:rotate(225deg) translateY(-2px)}
.calc__telling{font-weight:700;font-size:.84rem;color:var(--groen-knop);background:var(--groen-soft);border-radius:999px;padding:.2rem .6rem;min-width:62px;text-align:center}
.calc__telling:empty{display:none}

.calc__items{padding:0 1.15rem 1rem}
.calc__item{display:flex;align-items:center;gap:1rem;padding:.5rem 0;border-top:1px solid var(--line)}
.calc__item div{min-width:0;flex:1}
.calc__item b{display:block;font-weight:600;font-size:.94rem}
.calc__item small{color:var(--muted);font-size:.79rem}
.calc__step{display:inline-flex;align-items:center;gap:.1rem;flex:none}
.calc__step button{width:34px;height:34px;flex:none;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--ink);font-size:1.15rem;line-height:1;cursor:pointer;display:grid;place-items:center;transition:all .16s ease}
.calc__step button:hover{border-color:var(--groen-knop);color:var(--groen-knop);background:var(--groen-soft)}
.calc__step input{width:46px;text-align:center;border:0;background:transparent;color:var(--ink);
  font-family:"Roboto",sans-serif;font-weight:700;font-size:1rem;padding:0;-moz-appearance:textfield}
.calc__step input::-webkit-outer-spin-button,.calc__step input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.calc__extras{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1.15rem;margin-top:1.2rem}
.calc__extras h2{font-size:1.05rem;margin-bottom:.2rem}
.calc__extras > p{color:var(--muted);font-size:.9rem}
.calc__extra{display:flex;gap:.75rem;align-items:flex-start;padding:.7rem 0;border-top:1px solid var(--line);cursor:pointer}
.calc__extra:first-of-type{margin-top:.7rem}
.calc__extra input{width:20px;height:20px;flex:none;margin-top:.15rem;accent-color:var(--groen-knop)}
.calc__extra b{display:block;font-weight:600;font-size:.94rem}
.calc__extra small{color:var(--muted);font-size:.82rem}

.calc__uit{position:sticky;top:96px;background:var(--ink);color:#fff;border-radius:calc(var(--radius) + 6px);padding:1.35rem;box-shadow:var(--shadow-lg)}
.calc__uit h2{font-size:.8rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--groen-licht)}
.calc__m3{font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:3rem;line-height:1;margin-top:.5rem}
.calc__m3 span{font-size:1.1rem;color:rgba(255,255,255,.7)}
.calc__prijs{margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.16)}
.calc__prijs b{display:block;font-size:1.5rem;font-weight:700;line-height:1.2}
.calc__prijs small{display:block;margin-top:.35rem;color:rgba(255,255,255,.66);font-size:.79rem;line-height:1.5}
.calc__verdeling{list-style:none;margin:1rem 0 0;padding:1rem 0 0;border-top:1px solid rgba(255,255,255,.16);display:grid;gap:.45rem}
.calc__verdeling li{display:flex;justify-content:space-between;gap:1rem;font-size:.86rem;color:rgba(255,255,255,.82)}
.calc__verdeling li b{color:#fff;font-weight:700}
.calc__uit .btn{width:100%;margin-top:1.15rem}
.calc__leeg{color:rgba(255,255,255,.66);font-size:.88rem;margin-top:.6rem}

/* Vaste balk onderin, alleen mobiel. */
.calc__balk{display:none;position:fixed;left:0;right:0;bottom:0;z-index:45;
  background:var(--ink);color:#fff;padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));
  align-items:center;gap:1rem;box-shadow:0 -6px 24px rgba(0,0,0,.28)}
.calc__balk b{font-family:"Roboto Slab",Georgia,serif;font-size:1.3rem;line-height:1}
.calc__balk small{display:block;color:rgba(255,255,255,.66);font-size:.75rem}
.calc__balk .btn{margin-left:auto;flex:none}

@media (max-width:900px){
  .calc__grid{grid-template-columns:1fr}
  .calc__uit{position:static}
  body.calc-actief .calc__balk{display:flex}
  body.calc-actief .mcta{display:none}
  body.calc-actief{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
}
@media (max-width:420px){
  .calc__item{gap:.5rem}
  .calc__step input{width:38px}
  .calc__balk .btn .lbl{display:none}
}

/* ---------------- Kaart op de contactpagina ----------------
   De iframe staat absoluut in een kader met vaste hoogte: Google levert geen
   intrinsieke verhouding, dus zonder kader klapt hij op mobiel in elkaar. */
.kaart{padding:0 0 clamp(2.8rem,6vw,4.4rem);background:var(--paper)}
.kaart__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(1.4rem,3vw,2.2rem);align-items:stretch}
.kaart__frame{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);
  background:var(--paper-2);min-height:clamp(300px,36vw,420px)}
.kaart__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.kaart__naast{background:var(--paper-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.1rem,2vw,1.5rem);display:flex;flex-direction:column}
.kaart__naast h2{font-size:1.15rem;margin-top:.5rem}
.kaart__naast > p{margin-top:.45rem;color:var(--muted);font-size:.9rem}
.kaart__punten{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.55rem}
.kaart__punten li{display:flex;gap:.65rem;align-items:flex-start;font-size:.91rem;line-height:1.5;color:var(--muted)}
.kaart__punten .zeker__no{width:19px;height:19px;margin-top:.15rem}
.kaart__punten .zeker__no svg{width:10px;height:10px}
.kaart__naast .btn{margin-top:auto;align-self:flex-start}
.kaart__punten + .btn{margin-top:1.2rem}
@media (max-width:820px){
  .kaart__grid{grid-template-columns:1fr}
  .kaart__frame{min-height:290px;order:2}
}

/* ---------------- FAQ-foto op de dienstpagina's ----------------
   Daar staan 5 vragen in plaats van 6, dus de tekstkolom is korter en de foto
   ging in verhouding domineren. Alleen daar smaller en lager; de homepage blijft
   zoals hij was. */
.dienst-pagina .faq__grid{grid-template-columns:1.35fr .65fr}
.dienst-pagina .faq__photo{max-height:440px;align-self:start}
@media (max-width:900px){
  .dienst-pagina .faq__grid{grid-template-columns:1fr}
  .dienst-pagina .faq__photo{max-height:320px}
}

/* ---------------- Zwevende WhatsApp-knop ----------------
   Rechtsonder, met een pulserende halo die uit de knop lijkt te komen. Twee ringen
   met een halve cyclus verschil, zodat er altijd beweging is zonder dat het knippert.
   De halo staat op z-index -1 en dus ACHTER de knop: hij komt eronder vandaan in
   plaats van eroverheen, dat leest rustiger.
   Weg onder 620px: daar staat de mcta-balk met dezelfde WhatsApp-knop erin, en een
   zwevende pill over die balk is dubbelop. Op de calculatorpagina schuift hij boven
   de .calc__balk, want die claimt daar de onderrand. */
.wafab{
  position:fixed;z-index:55;
  right:clamp(16px,2.2vw,26px);
  bottom:calc(clamp(16px,2.2vw,26px) + env(safe-area-inset-bottom));
  width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 28px -8px rgba(20,114,55,.6),0 2px 8px rgba(0,0,0,.16);
  -webkit-tap-highlight-color:transparent;
  transition:transform .22s var(--ease),background .2s ease,box-shadow .22s var(--ease);
  animation:wafab-komt-op .55s var(--ease) .7s both;
}
.wafab::before,.wafab::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:var(--wa);
  animation:wafab-puls 3s var(--ease) infinite;
}
.wafab::after{animation-delay:1.5s}
.wafab__icoon{width:31px;height:31px;position:relative}
.wafab:hover{background:var(--wa-deep);transform:translateY(-3px) scale(1.05);
  box-shadow:0 18px 34px -8px rgba(20,114,55,.62),0 3px 10px rgba(0,0,0,.2)}
.wafab:active{transform:translateY(-1px) scale(.97)}
.wafab:focus-visible{outline:3px solid var(--groen);outline-offset:4px}
/* Bij hover of focus is de aandacht al gepakt; dan hoeft de halo niet meer te tikken. */
.wafab:hover::before,.wafab:hover::after,
.wafab:focus-visible::before,.wafab:focus-visible::after{animation-play-state:paused;opacity:0}

/* Label schuift alleen uit bij een echte muisaanwijzer: op touch is er geen hover-staat
   en zou hij permanent openstaan. */
.wafab__label{
  position:absolute;right:calc(100% + 12px);white-space:nowrap;
  background:var(--ink);color:#fff;font-size:.86rem;font-weight:600;line-height:1;
  padding:.62rem .85rem;border-radius:var(--btn-r);box-shadow:var(--shadow);
  opacity:0;transform:translateX(8px);pointer-events:none;
  transition:opacity .2s ease,transform .2s var(--ease);
}
@media (hover:none){.wafab__label{display:none}}
.wafab:hover .wafab__label,.wafab:focus-visible .wafab__label{opacity:1;transform:none}

@keyframes wafab-puls{
  0%{transform:scale(1);opacity:.5}
  70%{opacity:0}
  100%{transform:scale(1.85);opacity:0}
}
@keyframes wafab-komt-op{
  from{opacity:0;transform:scale(.4)}
  60%{opacity:1;transform:scale(1.08)}
  to{opacity:1;transform:scale(1)}
}

@media (max-width:900px){
  /* De calculatorbalk pakt hier de onderrand; de knop erboven, niet erop. */
  body.calc-actief .wafab{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media (max-width:620px){
  .wafab{display:none} /* mcta-balk heeft al een WhatsApp-knop */
}
@media print{
  .wafab{display:none}
}

/* ---------------- Vanafprijzen (kostenpagina) ----------------
   Donkere kaart naar het patroon van .gebied__card, maar in antraciet zodat hij niet
   vecht met de groene werkgebied-kaart verderop dezelfde pagina. Links de dozenfoto,
   rechts de prijsregels, met het witte logo als watermerk (opacity-truc van
   .pagehero__mark, inclusief de height:auto-regel die daar wordt uitgelegd). */
.prijzen{padding:clamp(2.6rem,5vw,4.2rem) 0}
.prijzen__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:.82fr 1.18fr;
  background:var(--ink);color:#fff;border-radius:calc(var(--radius) + 10px);box-shadow:var(--shadow-lg)}
.prijzen__media{position:relative;min-height:100%}
.prijzen__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.prijzen__badge{position:absolute;z-index:1;left:clamp(.9rem,2vw,1.4rem);bottom:clamp(.9rem,2vw,1.4rem);
  background:#fff;color:var(--ink);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:.7rem .95rem;font-size:.86rem;line-height:1.4;max-width:240px}
.prijzen__badge b{display:block;font-size:1.02rem;color:var(--groen-knop)}
.prijzen__mark{position:absolute;right:-4%;bottom:-7%;width:min(46%,420px);height:auto;opacity:.06;z-index:0;pointer-events:none}
.prijzen__body{position:relative;z-index:1;padding:clamp(1.8rem,3.6vw,3rem)}
.prijzen__body .eyebrow{color:var(--groen-licht)}
.prijzen__body .eyebrow::before{background:var(--groen-licht)}
.prijzen__body h2{font-size:clamp(1.5rem,2.8vw,2.2rem);max-width:26ch;margin-top:.7rem}
.prijzen__body h2 em{font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(0,139,35,.22) 62%);padding-inline:.06em}
.prijzen__body>p{margin-top:.8rem;color:rgba(255,255,255,.92);max-width:60ch}
.prijzen__list{list-style:none;margin:clamp(1.2rem,2.4vw,1.8rem) 0 0;padding:0}
.prijzen__list li{border-top:1px solid rgba(255,255,255,.22)}
.prijzen__list li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.prijzen__rij{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:.72rem 0;color:#fff;text-decoration:none}
.prijzen__dienst b{display:block;font-weight:700;font-size:.98rem}
.prijzen__rij:hover .prijzen__dienst b,.prijzen__rij:focus-visible .prijzen__dienst b{color:var(--groen-licht);text-decoration:underline}
.prijzen__dienst small{display:block;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.82)}
.prijzen__bedrag{flex:none;font-family:"Roboto Slab",Georgia,serif;font-weight:700;font-size:1.18rem;color:var(--groen-licht);white-space:nowrap}
.prijzen__bedrag small{font-family:"Roboto",sans-serif;font-weight:600;font-size:.78rem;color:rgba(255,255,255,.75);margin-right:.2rem}
.prijzen__voet{margin-top:1rem;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.72);max-width:60ch}
/* Zelfde knoprij-gedrag als de gedeelde __cta-regels hierboven, bewust los gehouden. */
.prijzen__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;margin-top:clamp(1.3rem,2.4vw,1.9rem)}
.prijzen__cta>.btn{white-space:normal;text-align:center}
.prijzen .btn--ghost{color:#fff}
.prijzen .btn--ghost:hover{background:rgba(255,255,255,.12)}
@media (max-width:860px){
  .prijzen__card{grid-template-columns:1fr}
  .prijzen__media{min-height:300px;order:-1}
  .prijzen__media img{position:static;height:300px}
}
@media (max-width:620px){
  .prijzen__cta{max-width:23rem}
  .prijzen__cta>.btn{width:100%}
}

/* ---------------- Openingstijden + route (contactpagina) ----------------
   Zelfde donkere-kaart-familie als .prijzen__card op de kostenpagina, zonder
   fotokolom; watermerk-truc en height:auto-regel zoals bij .pagehero__mark. */
.uren{padding:0 0 clamp(2.4rem,4.5vw,3.4rem)}
.uren__card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:1.05fr .95fr;
  gap:clamp(1.6rem,3vw,2.8rem);background:var(--ink);color:#fff;
  border-radius:calc(var(--radius) + 10px);box-shadow:var(--shadow-lg);padding:clamp(1.8rem,3.6vw,3rem)}
.uren__mark{position:absolute;right:-4%;bottom:-10%;width:min(38%,360px);height:auto;opacity:.06;z-index:0;pointer-events:none}
.uren__kol{position:relative;z-index:1}
.uren__kol .eyebrow{color:var(--groen-licht)}
.uren__kol .eyebrow::before{background:var(--groen-licht)}
.uren__kol h2{font-size:clamp(1.4rem,2.6vw,2rem);margin-top:.7rem}
.uren__kol h2 em{font-style:normal;background:linear-gradient(180deg,transparent 62%,rgba(0,139,35,.22) 62%);padding-inline:.06em}
.uren__kol h3{font-size:1.15rem;margin-top:.7rem}
.uren__lijst{list-style:none;margin:1.1rem 0 0;padding:0}
.uren__lijst li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.62rem 0;border-top:1px solid rgba(255,255,255,.22);font-size:.95rem}
.uren__lijst li:last-child{border-bottom:1px solid rgba(255,255,255,.22)}
.uren__lijst li>span{color:rgba(255,255,255,.85)}
.uren__lijst b{color:var(--groen-licht);text-align:right}
.uren__voet{margin-top:1rem;font-size:.85rem;line-height:1.5;color:rgba(255,255,255,.72)}
.uren__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:stretch;margin-top:1.1rem}
.uren__cta>.btn{white-space:normal;text-align:center}
.route{padding:0 0 clamp(2.6rem,5vw,4.2rem)}
.route__lijst{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.2rem,2.6vw,2rem);margin:clamp(1.4rem,3vw,2rem) 0 0;padding:0}
.route__lijst li{display:flex;gap:.9rem;align-items:baseline}
.route__lijst b{display:block;font-size:1rem}
.route__lijst p{color:var(--muted);font-size:.95rem;margin-top:.3rem}
@media (max-width:860px){
  .uren__card{grid-template-columns:1fr}
  .route__lijst{grid-template-columns:1fr}
}
@media (max-width:620px){
  .uren__cta{max-width:23rem}
  .uren__cta>.btn{width:100%}
}