/* =========================================================
   BS Install - stijl
   Herontworpen kleursysteem: nachtblauwe held, witte sheet op
   een lichte canvasplaat, energiegroen als actiekleur.
   Designsysteem vastgelegd in /DESIGN.md
   ========================================================= */

/* ---------- Lettertypen, zelf gehost ---------- */

@font-face {
  font-family: "Outfit";
  src: url("../fonts/outfit-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Outfit";
  src: url("../fonts/outfit-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  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: "Figtree";
  src: url("../fonts/figtree-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   Tokens
   ========================================================= */

:root {
  /* Donkerblauw: held, afsluitende CTA en voet. */
  --nacht: #0b132b;      /* het kader: body, held, afsluitende CTA en voet */
  --nacht-2: #101c3a;
  --nacht-3: #16294f;
  --nacht-rand: rgba(255, 255, 255, .14);

  /* Licht: de pagina is zandgeel, de hoofdcontainer is een witte sheet. */
  --canvas: #f9f7f0;     /* het lichte vlak binnen het kader */
  --zand: #f3efe2;
  --zand-licht: #fbf8ee;
  --zand-diep: #ece5d2;
  --wit: #ffffff;

  /* Actiekleur: het energiegroen uit de S van het logo. Drie tinten, elk met
     een eigen rol, want één groen haalt niet overal genoeg contrast. */
  --groen: #7ea82f;           /* vlak met donkere inkt erop: 6,0:1 */
  --groen-hover: #8cbf34;     /* iets feller bij hover: 7,7:1 */
  --groen-inkt: #14210a;      /* de tekst die op dat groen staat */
  /* #527d1b haalde op de groene tint van het verfijnblok en de opgave nog
     maar 4,4:1. Deze tint haalt overal minimaal 4,8:1. */
  --groen-tekst: #4d7619;     /* groene tekst op wit, canvas of groene tint */
  --groen-licht: #9ecb46;     /* groen op het nachtblauwe verloop: 5,7 tot 9,7:1 */
  --groen-diep: #446b16;      /* vlak met witte tekst erop: 6,3:1 */
  --groen-zacht: #eef6df;
  --goud: #e6bb2e;            /* sterren, decoratief; geel, geen oranje */

  /* Pastels voor de categorietags op de foto's. */
  --pas-geel-zacht: #fff2cd;  --pas-geel-zacht-inkt: #6b4c05;
  --pas-groen:  #dcecc9;  --pas-groen-inkt:  #3d5c18;
  --pas-blauw:  #d4e7f4;  --pas-blauw-inkt:  #14506f;
  --pas-geel:   #fbedc2;  --pas-geel-inkt:   #7a5a0c;

  /* Tekst. Alle waarden hieronder halen minimaal 4.5:1 op hun eigen vlak. */
  --inkt: #10202f;
  --inkt-zacht: #46586a;
  /* #5d6e7d haalde 4,3:1 op het diepe zandvlak van de rekentool. Deze
     waarde haalt overal minimaal 4,7:1. */
  --inkt-stil: #576877;
  --op-nacht: #ffffff;
  --op-nacht-zacht: #b6c6d8;

  /* Vulling van kaarten. Wordt per sectie omgezet, zodat een witte kaart nooit
     op een wit vlak belandt en alleen door zijn schaduw bestaat. */
  --kaart: var(--wit);

  --lijn: #e6ded0;
  --lijn-wit: #eceef1;

  /* Vorm. Zacht en app-achtig, zoals de referentie. */
  --r-s: 12px;
  --r-m: 16px;
  --r-l: 20px;
  --r-xl: 24px;
  --r-2xl: 32px;
  --r-canvas: 48px;
  --r-pil: 999px;

  /* Diepte. Twee niveaus, meer niet. */
  /* Neutraal zwart, niet blauwgetint: de pagina heeft nu een donker kader en
     een gekleurde schaduw leest daar als gloed. */
  --hoogte-1: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 16px rgba(0, 0, 0, .06);
  --hoogte-2: 0 2px 4px rgba(0, 0, 0, .05), 0 18px 44px rgba(0, 0, 0, .10);
  --hoogte-3: 0 4px 8px rgba(0, 0, 0, .07), 0 32px 70px rgba(0, 0, 0, .16);

  /* Vier maten voor lopende tekst. Eerder stonden er vijftien bijna gelijke
     waarden in dit bestand; dat leverde geen hiërarchie op, alleen ruis. */
  --t-xs: 0.8125rem;   /* 13px, hoofdletterlabels en kleine lettertjes */
  --t-s:  0.9375rem;   /* 15px, bijschriften en hulptekst */
  --t-b:  1.0625rem;   /* 17px, lopende tekst */
  --t-l:  1.25rem;     /* 20px, inleidende alinea's */

  --omhulsel: 1280px;
  --blad: 1560px;
  --kophoogte: 88px;
  --marge: clamp(20px, 4.4vw, 56px);
  /* De donkerblauwe rand die links en rechts langs het canvas doorloopt.
     Bewust smal: het kader moet een lijst zijn, geen marge. */
  --kader: clamp(6px, 1.2vw, 16px);

  --soepel: cubic-bezier(.22, 1, .36, 1);
}

/* =========================================================
   Basis
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  /* Het kader zelf. Het canvas ligt hier als een losse plaat bovenop, zodat
     het donkerblauw links en rechts van boven tot onder doorloopt. */
  background: var(--nacht);
  color: var(--inkt);
  font-family: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: "Outfit", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.032em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 6.4vw, 4.9rem); }
h2 { font-size: clamp(1.75rem, 4.4vw, 3.6rem); }
h3 { font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.18; letter-spacing: -.026em; }

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

::selection { background: var(--groen); color: var(--groen-inkt); }

:focus-visible {
  /* #7ea82f haalt op wit maar 2,8:1; een focusring moet 3:1 halen. */
  outline: 3px solid var(--groen-tekst);
  outline-offset: 3px;
  border-radius: 6px;
}

.omhulsel {
  width: min(100% - (var(--marge) * 2), var(--omhulsel));
  margin-inline: auto;
}

.visueel-verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.overslaan {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--groen); color: var(--groen-inkt); padding: 10px 16px;
  border-radius: var(--r-s); font-weight: 600; text-decoration: none;
  transition: top .18s var(--soepel);
}
.overslaan:focus { top: 12px; }

.ico { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Onthullen bij scrollen ---------- */

.onthul {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--soepel), transform .7s var(--soepel);
  transition-delay: calc(var(--vertraag, 0) * 90ms);
}
.onthul[data-zichtbaar="ja"] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .onthul { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   Knoppen
   ========================================================= */

/* Effen kleur, nooit een verloop: een kleurovergang op een knop is precies
   waar goedkoop werk aan te herkennen is. */
.knop {
  --knop-vlak: var(--groen);
  --knop-inkt: var(--groen-inkt);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 0;
  border-radius: var(--r-pil);
  background: var(--knop-vlak);
  color: var(--knop-inkt);
  font: inherit;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .22s var(--soepel), background-color .22s ease, box-shadow .22s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}
.knop:hover { background: var(--groen-hover); transform: translateY(-2px); }
.knop:active { transform: translateY(0) scale(.985); }
.knop .ico { transition: transform .22s var(--soepel); }
.knop:hover .ico { transform: translateX(3px); }

.knop--licht {
  --knop-vlak: rgba(255, 255, 255, .1);
  --knop-inkt: #fff;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.knop--licht:hover { background: rgba(255, 255, 255, .18); }

.knop--inkt {
  --knop-vlak: var(--nacht);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .22);
}
.knop--inkt:hover { background: var(--nacht-2); }

.knop--omlijnd {
  --knop-vlak: transparent;
  --knop-inkt: var(--inkt);
  box-shadow: inset 0 0 0 1.5px var(--lijn);
}
.knop--omlijnd:hover { background: var(--wit); box-shadow: inset 0 0 0 1.5px var(--inkt); }

/* De subpagina's gebruiken nog knop--merk en knop--stil. merk is de gewone
   knop; stil is de secundaire, die zowel op nachtblauw als op wit moet werken.
   Daarom leent hij zijn kleur van de sectie via currentColor. */
.knop--merk { /* gelijk aan de standaardknop */ }
.knop--stil {
  background: transparent;
  color: inherit;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 34%, transparent);
}
.knop--stil:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent);
}

.knop--breed { width: 100%; }
.knop--klein { min-height: 44px; padding: 0 20px; font-size: var(--t-s); }

/* ---------- Pil-badge ---------- */

.pil {
  display: inline-flex;
  align-items: center;
  /* Op smal scherm valt de staartzin weg en kromp de pil onder de 44px. */
  min-height: 44px;
  gap: 10px;
  padding: 8px 18px 8px 10px;
  border-radius: var(--r-pil);
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px var(--nacht-rand);
  color: var(--op-nacht);
  font-size: var(--t-s);
  font-weight: 550;
  text-decoration: none;
  transition: background-color .22s ease, transform .22s var(--soepel);
}
.pil:hover { background: rgba(255, 255, 255, .15); transform: translateY(-1px); }
.pil__punt {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--groen); color: var(--groen-inkt);
}
.pil__punt .ico { width: 16px; height: 16px; }
.pil b { font-weight: 700; }
.pil span { color: var(--op-nacht-zacht); }

/* Bovenschrift boven een sectiekop. Klein, in hoofdletters, ruim gespatieerd
   en zonder vlak: een pil boven elke sectie werd te luid. */
/* Hoger gewogen dan .sectie__kop p, anders wint de maat van de inleiding. */
.oogje,
.sectie__kop .oogje {
  margin: 0 0 16px;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--inkt-stil);
}
.sectie__kop--midden .oogje { text-align: center; }

/* ---------- Tags op foto's ---------- */

.tag {
  position: absolute;
  inset-block-start: 16px;
  inset-inline-start: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border-radius: var(--r-pil);
  font-family: "Outfit", sans-serif;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: -.01em;
  background: #7cc4ec;
  color: #0b3049;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
}
.tag .ico { width: 15px; height: 15px; }
/* Fel in plaats van pastel, met donkere inkt erop: alle vier halen meer dan
   7:1, en de badge blijft op een foto goed leesbaar. Geen oranje of rood. */
.tag--zon      { background: #ffd166; color: #4a3300; }
.tag--batterij { background: #7fd4a8; color: #0f3a26; }
.tag--airco    { background: #7cc4ec; color: #0b3049; }
.tag--laadpaal { background: #c3b5f5; color: #2e1f63; }

/* =========================================================
   Header
   ========================================================= */

.kop {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--kophoogte);
  display: flex;
  align-items: center;
  transition: background-color .3s ease, box-shadow .3s ease;
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  width: min(100% - (var(--marge) * 2), var(--blad));
  margin-inline: auto;
}

.kop__merk { flex: none; display: block; text-decoration: none; }
.kop__logo { width: 104px; height: auto; }
.kop__logo--donker { display: none; }

/* Op de nachtblauwe held staat de balk transparant met het lichte logo.
   Zodra je eronder scrolt wisselt hij naar wit. De omschakeling zit in
   site.js op data-opdonker. */
.kop[data-opdonker="ja"] { background: transparent; backdrop-filter: none; box-shadow: none; }
.kop[data-opdonker="ja"] .kop__logo--licht { display: none; }
.kop[data-opdonker="ja"] .kop__logo--donker { display: block; }
.kop[data-opdonker="ja"] .kop__nav a { color: var(--op-nacht); }
.kop[data-opdonker="ja"] .kop__stil { color: var(--op-nacht-zacht); }
.kop[data-opdonker="ja"] .kop__scheiding { background: var(--nacht-rand); }
.kop[data-opdonker="ja"] .kop__streepjes i { background: #fff; }

/* De balk blijft altijd donker: hij staat op het kader, niet op het canvas.
   Een lichte balk zou een streep dwars door de donkerblauwe rand trekken.
   Bovenop de held is hij transparant, daaronder krijgt hij een vulling. */
.kop,
.kop[data-opdonker="nee"] {
  background: rgba(11, 19, 43, .82);
  backdrop-filter: blur(16px);
  box-shadow: none;
}
.kop .kop__logo--licht { display: none; }
.kop .kop__logo--donker { display: block; }
.kop .kop__nav a { color: var(--op-nacht); }
.kop .kop__stil { color: var(--op-nacht-zacht); }
.kop .kop__scheiding { background: var(--nacht-rand); }
.kop .kop__streepjes i { background: #fff; }
.kop .kop__nav a:hover { background: rgba(255, 255, 255, .12); }
.kop .kop__schakelaar { background: rgba(255, 255, 255, .12); }

.kop__nav { flex: 1; }
.kop__nav ul {
  display: flex;
  align-items: center;
  gap: clamp(6px, 1.4vw, 14px);
  margin: 0; padding: 0; list-style: none;
}
.kop__nav a {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-pil);
  color: var(--inkt);
  font-weight: 550;
  font-size: var(--t-s);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.kop__nav a:hover { background: rgba(16, 32, 47, .07); }
.kop[data-opdonker="ja"] .kop__nav a:hover { background: rgba(255, 255, 255, .12); }

.kop__nav a[aria-current] {
  background: var(--groen);
  color: var(--groen-inkt);
}
.kop[data-opdonker="ja"] .kop__nav a[aria-current] { color: var(--groen-inkt); }

.kop__acties { display: flex; align-items: center; gap: 14px; flex: none; }
.kop__stil {
  /* 25px hoog was net boven de ondergrens van 24px. Met wat padding wordt het
     aanraakvlak ruim genoeg zonder dat de balk verandert. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 4px;
  color: var(--inkt-zacht);
  font-size: var(--t-s);
  font-weight: 550;
  text-decoration: none;
  transition: color .2s ease;
}
.kop__stil:hover { color: var(--groen-tekst); }
.kop__stil[aria-current] { color: var(--groen-tekst); }
.kop__scheiding { width: 1px; height: 22px; background: var(--lijn); }
.kop__cta { min-height: 46px; padding: 0 22px; font-size: var(--t-s); }

.kop__schakelaar {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-m);
  background: rgba(16, 32, 47, .06);
  cursor: pointer;
}
.kop[data-opdonker="ja"] .kop__schakelaar { background: rgba(255, 255, 255, .12); }
.kop__streepjes { display: grid; gap: 5px; width: 20px; }
.kop__streepjes i {
  display: block; height: 2px; border-radius: 2px;
  background: var(--inkt);
  transition: transform .26s var(--soepel), background-color .3s ease;
}
.kop__schakelaar[aria-expanded="true"] .kop__streepjes i:first-child { transform: translateY(3.5px) rotate(45deg); }
.kop__schakelaar[aria-expanded="true"] .kop__streepjes i:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.kop__mobiel {
  position: absolute;
  inset-inline: var(--marge);
  top: calc(var(--kophoogte) - 6px);
  padding: 12px;
  border-radius: var(--r-xl);
  background: var(--wit);
  box-shadow: var(--hoogte-3);
}
.kop__mobiel[hidden] { display: none; }
.kop__mobiel ul { margin: 0; padding: 0; list-style: none; }
.kop__mobiel a {
  display: block;
  padding: 13px 16px;
  border-radius: var(--r-m);
  color: var(--inkt);
  font-weight: 600;
  text-decoration: none;
}
.kop__mobiel a:hover { background: var(--zand-licht); }

@media (max-width: 1080px) {
  .kop__nav, .kop__stil, .kop__scheiding { display: none; }
  .kop__schakelaar { display: flex; }
  .kop__binnen { justify-content: space-between; }
  .kop__acties { margin-inline-start: auto; }
}
@media (max-width: 520px) {
  .kop__cta { display: none; }
}

/* =========================================================
   Held
   ========================================================= */

.held {
  position: relative;
  /* Geleidelijk van kader naar luchtblauw en weer terug, zodat de lucht in de
     foto er zonder harde rand uit komt rollen. */
  background: linear-gradient(to bottom,
    #0b132b 0%, #101a38 18%, #16234a 34%, #1c2a4a 46%,
    #22355e 56%, #2a3c66 64%, #1d2c4d 78%, #101a37 90%, #0b132b 100%);
  color: var(--op-nacht);
  /* De balk staat vóór main in de flow; zonder deze negatieve marge blijft er
     een strook boven het nachtblauw staan. */
  margin-top: calc(var(--kophoogte) * -1);
  padding-top: calc(var(--kophoogte) + clamp(30px, 6vw, 72px));
  /* Geen padding onder de foto: het canvas sluit er direct op aan. Een
     donkerblauwe strook tussen beeld en container hoort er niet te zijn. */
  padding-bottom: 0;
  overflow: clip;
}

/* Zachte gloed achter de kop, zodat het vlak niet plat blijft. */
.held::before {
  content: "";
  position: absolute;
  inset-inline: -20%;
  top: -30%;
  height: 80%;
  background: radial-gradient(58% 62% at 50% 46%, rgba(255, 107, 53, .13), transparent 72%);
  pointer-events: none;
}
.held__inhoud {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 980px;
}

/* De h1 draagt twee regels: eerst de regio, dan de diensten. Allebei staan ze
   in dezelfde h1, zodat ze samen één kop vormen voor zoekmachines, terwijl de
   dienstenregel visueel het zwaarst weegt. */
.held h1 { margin: 0; display: grid; gap: 14px; }
.held__kopklein {
  display: block;
  font-family: "Figtree", sans-serif;
  font-size: clamp(var(--t-b), 1.5vw, 1.3rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .015em;
  color: #cfe0f0;
}
.held__kopgroot {
  display: block;
  max-width: 18ch;
  margin-inline: auto;
  font-size: clamp(2rem, 8vw, 4.9rem);
  line-height: 1.02;
  letter-spacing: -.032em;
}
.held__kopgroot em {
  font-style: normal;
  color: var(--groen-licht);
}
.held__onder {
  margin: 22px auto 0;
  max-width: 720px;
  font-size: clamp(var(--t-b), 1.4vw, var(--t-l));
  color: var(--op-nacht-zacht);
}
.held__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 34px;
}

/* Telefoonnummer als donkere pil naast de primaire knop: alleen het icoon en
   het nummer, verder niets. */
.belpil {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 54px;
  padding: 0 24px;
  border-radius: var(--r-pil);
  background: rgba(6, 11, 26, .55);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3);
  color: #fff;
  font-weight: 650;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background-color .22s ease, box-shadow .22s ease, transform .22s var(--soepel);
}
.belpil:hover {
  background: rgba(6, 11, 26, .78);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55);
  transform: translateY(-2px);
}
.belpil .ico { width: 18px; height: 18px; color: var(--groen-licht); }

/* Social proof onder de knoppen. */
.proef {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 14px;
  margin-top: 26px;
}
.proef__gezichten {
  display: flex;
  margin: 0; padding: 0; list-style: none;
}
.proef__gezichten li {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #263a5e;
  box-shadow: 0 0 0 2px #0e1730;
  color: #7d93b5;
}
.proef__gezichten li + li { margin-inline-start: -12px; }
.proef__gezichten .ico { width: 19px; height: 19px; }

.proef__score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px 7px 8px;
  border-radius: var(--r-pil);
  background: rgba(255, 255, 255, .94);
  color: #1a2436;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: -.01em;
}
.proef__score .ico { width: 15px; height: 15px; color: var(--goud); }
.proef__g {
  display: grid; place-items: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #1a2436;
  color: #fff;
  font-family: "Outfit", sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.proef__tekst { font-size: var(--t-s); color: var(--op-nacht-zacht); }

@media (max-width: 560px) {
  .held__knoppen { flex-direction: column; align-items: stretch; }
  .belpil { justify-content: center; }
  .proef { gap: 10px; }
  .proef__tekst { flex-basis: 100%; text-align: center; }
}

/* De foto zit in hetzelfde vlak als de kop: de lucht bovenaan lost op in het
   nachtblauw, zodat tekst en beeld één geheel worden. */
/* De foto loopt van rand tot rand, net als in de referentie. De lucht lost
   bovenaan op in het kader, zodat kop en beeld één vlak vormen. */
.held__beeld {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: clamp(30px, 4vw, 56px) 0 0;
}
.held__beeld::after {
  content: "";
  position: absolute;
  inset-inline: 0; bottom: 0;
  height: 46%;
  background: linear-gradient(to top, rgba(6, 11, 26, .88), rgba(6, 11, 26, .56) 44%, rgba(6, 11, 26, .18) 76%, transparent);
  pointer-events: none;
}
.held__beeld img {
  width: 100%;
  aspect-ratio: 16 / 7.4;
  object-fit: cover;
  object-position: center 44%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 28%);
}

/* Geen blok: de cijfers staan rechtstreeks op de foto. Leesbaarheid komt van
   de waas onderaan het beeld plus een lichte schaduw onder de letters. */
.statbalk {
  position: absolute;
  left: 50%;
  bottom: clamp(34px, 4vw, 58px);
  transform: translateX(-50%);
  z-index: 2;
  width: min(100% - (var(--marge) * 2), calc(var(--blad) - 60px));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 0; padding: 0; list-style: none;
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.statbalk li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 clamp(10px, 1.6vw, 24px);
  text-align: center;
}
.statbalk li + li { border-inline-start: 1px solid rgba(255, 255, 255, .2); }
.statbalk strong {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  color: #fff;
  text-shadow: 0 2px 14px rgba(4, 9, 22, .72), 0 1px 3px rgba(4, 9, 22, .6);
}
/* Een plaatsnaam is geen cijfer: op 48px brak "Noord-Holland" over twee regels
   en liep de hele rij uit het lood. Deze maat past op één regel en de labels
   blijven onderling uitgelijnd omdat de kolommen naar onderen uitlijnen. */
/* Het werkgebied is een woord, geen getal. Op de displaymaat van de cijfers
   breekt het over twee regels en loopt de hele rij uit de pas; een eigen,
   kleinere maat houdt het op één regel naast de drie cijfers. */
.stat--plaats strong {
  font-size: clamp(1.15rem, 1.9vw, 1.85rem);
  white-space: nowrap;
}

.statbalk span {
  display: block;
  margin-top: 7px;
  font-size: var(--t-xs);
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .84);
  text-shadow: 0 1px 10px rgba(4, 9, 22, .85);
}

/* Het cijfer brak over twee regels met de ruime regelafstand van de kop;
   dichter op elkaar leest dat als één label in plaats van twee. */
.statbalk strong { line-height: 1.08; }

@media (max-width: 900px) {
  .held__beeld img { aspect-ratio: 4 / 3.2; }
  .statbalk {
    width: calc(100% - (var(--marge) * 2));
    bottom: clamp(30px, 4vw, 44px);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 18px;
  }
  .statbalk li:nth-child(-n+2) { padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .2); }
  .statbalk li:nth-child(3) { border-inline-start: 0; }
  /* Op smal scherm beslaan de vier cijfers meer dan de helft van de foto en
     staan ze over de installateur heen. Een diepere waas en een hoger
     uitgesneden beeld houden ze leesbaar. */
  .held__beeld img { object-position: center 34%; }
  .held__beeld::after {
    height: 74%;
    background: linear-gradient(to top,
      rgba(6, 11, 26, .94), rgba(6, 11, 26, .74) 42%, rgba(6, 11, 26, .3) 74%, transparent);
  }
}

/* =========================================================
   Het witte blad: hoofdcontainer op de zandgele pagina
   ========================================================= */

/* Het canvas: één lichte plaat die van de diensten tot en met het
   offerteformulier alles draagt. Hij ligt ingesprongen op het donkerblauwe
   kader, zodat dat kader links en rechts van boven tot onder doorloopt. */
.canvas {
  position: relative;
  z-index: 3;
  width: calc(100% - (var(--kader) * 2));
  max-width: var(--blad);
  /* Kleine overlap in plaats van een gat: de ronde bovenhoeken liggen op de
     foto, precies zoals in de referentie. */
  margin: -20px auto 0;
  background: var(--canvas);
  border-radius: var(--r-canvas);
  overflow: clip;
}

/* Ruime verticale ademruimte; de referentie is editorial, niet compact. */
.sectie { padding-block: clamp(72px, 8.5vw, 128px); }
.sectie--wit { background: var(--wit); --kaart: var(--canvas); }
.sectie--zand { background: transparent; }
.sectie--zanddiep { background: transparent; }

.sectie__kop { max-width: 720px; margin-bottom: clamp(32px, 4vw, 52px); }
.sectie__kop--midden { margin-inline: auto; text-align: center; }
.sectie__kop p {
  margin-top: 16px;
  font-size: clamp(var(--t-b), 1.3vw, var(--t-l));
  color: var(--inkt-zacht);
}


.sectie__hoofd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.sectie__hoofd .sectie__kop { margin-bottom: 0; }

/* =========================================================
   Bento: de vier diensten
   ========================================================= */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
}

.dienst {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--kaart);
  border-radius: var(--r-xl);
  box-shadow: var(--hoogte-1);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--soepel), box-shadow .35s var(--soepel);
}
.dienst:hover { transform: translateY(-6px); box-shadow: var(--hoogte-2); }

.dienst__foto { position: relative; overflow: hidden; }
.dienst__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--soepel);
}
.dienst:hover .dienst__foto img { transform: scale(1.055); }

.dienst__tekst {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: clamp(20px, 2.2vw, 30px);
  flex: 1;
}
.dienst__tekst p { color: var(--inkt-zacht); font-size: var(--t-s); }
.dienst__meer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  font-weight: 650;
  color: var(--groen-tekst);
}
.dienst__meer .ico { transition: transform .25s var(--soepel); }
.dienst:hover .dienst__meer .ico { transform: translate(3px, -3px); }

.dienst__prijs {
  font-family: "Outfit", sans-serif;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--inkt-stil);
}

/* De foto speelt de hoofdrol: hij groeit mee met de rijhoogte en pakt zo
   ruim zestig procent van elke kaart. De asymmetrie zit in de kolombreedtes
   en in de beeldverhoudingen, niet meer in de fotopositie. */
/* Elke dienst heeft een eigen zachte tint die bij zijn badge hoort. Zo is het
   raster speels, en staat er nooit een witte kaart op een wit vlak. */
.dienst--a { grid-column: span 7; background: #fff8e6; }
.dienst--b { grid-column: span 5; background: #eaf6ef; }
.dienst--c { grid-column: span 5; background: #eaf3fa; }
.dienst--d { grid-column: span 7; background: #f0ecfd; }

.dienst__foto { flex: 1 1 auto; }
.dienst__tekst { flex: 0 0 auto; }
.dienst--a .dienst__foto { min-height: clamp(230px, 24vw, 330px); }
.dienst--b .dienst__foto { min-height: clamp(230px, 24vw, 330px); }
.dienst--c .dienst__foto { min-height: clamp(220px, 22vw, 300px); }
.dienst--d .dienst__foto { min-height: clamp(220px, 22vw, 300px); }

@media (max-width: 900px) {
  .dienst--a, .dienst--b, .dienst--c, .dienst--d { grid-column: span 12; }
  .dienst__foto { aspect-ratio: 16 / 10; min-height: 0; }
}

/* =========================================================
   Werkwijze: genummerde stappen met foto bovenaan
   ========================================================= */

.stappen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin: 0; padding: 0; list-style: none;
  counter-reset: stap;
}
/* Elke stap heeft een eigen kleurpaar: --tint voor de kaart, --sterk voor het
   cijfer en het icoonvakje. Het grote cijfer staat achter de foto, die er met
   zijn bovenrand overheen schuift. */
.stap { position: relative; display: flex; }
.stap__kaart {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(14px, 1.4vw, 20px);
  background: var(--tint, var(--kaart));
  border-radius: var(--r-xl);
  transition: transform .35s var(--soepel), box-shadow .35s var(--soepel);
}
.stap:hover .stap__kaart { transform: translateY(-5px); box-shadow: var(--hoogte-2); }

.stap__nummer {
  position: absolute;
  top: clamp(2px, .6vw, 8px);
  left: clamp(18px, 2vw, 28px);
  z-index: 0;
  font-family: "Outfit", sans-serif;
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.05em;
  color: var(--sterk, var(--groen));
  opacity: .62;
}
.stap__icoon {
  position: absolute;
  top: clamp(14px, 1.4vw, 20px);
  right: clamp(14px, 1.4vw, 20px);
  z-index: 3;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 11px;
  background: var(--sterk, var(--groen-diep));
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.stap__icoon .ico { width: 20px; height: 20px; }

.stap__foto {
  position: relative;
  z-index: 1;
  margin-top: clamp(38px, 4vw, 54px);
  aspect-ratio: 16 / 11;
  border-radius: var(--r-m);
  overflow: hidden;
}
.stap__foto img { width: 100%; height: 100%; object-fit: cover; }
.stap__tekst { position: relative; z-index: 2; padding: 18px 6px 8px; }
.stap__tekst h3 { margin-bottom: 8px; }
.stap__tekst p { color: var(--inkt-zacht); font-size: var(--t-s); }

/* Tijdlijn onder de kaarten. */
.tijdlijn {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(28px, 3vw, 42px);
}
.tijdlijn__label {
  display: block;
  margin-bottom: 10px;
  padding-inline-start: 10px;
  font-size: var(--t-s);
  color: var(--inkt-zacht);
}
.tijdlijn__schaal {
  display: block;
  height: 20px;
  border-inline-start: 3px solid var(--sterk);
  /* Een getekend streepje dat zich herhaalt: een liniaal, geen decoratief
     streeppatroon. */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2226%22%20height%3D%2211%22%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%221%22%20height%3D%228%22%20fill%3D%22rgba%2816%2C32%2C47%2C0.28%29%22%2F%3E%3C%2Fsvg%3E");
  background-position: 10px bottom;
  background-repeat: repeat-x;
}

@media (max-width: 860px) {
  .stappen { grid-template-columns: 1fr; }
  /* De tijdlijn is een horizontale liniaal onder drie kolommen. Zodra de
     stappen stapelen, staan er drie losse strepen onder elkaar die niets meer
     aanwijzen. Op tablet en mobiel dus weg; de stapkaarten dragen de volgorde
     daar zelf al met hun nummers. */
  .tijdlijn { display: none; }
}

/* =========================================================
   Rekentool
   ========================================================= */

.tool {
  background: var(--kaart);
  border-radius: var(--r-2xl);
  box-shadow: var(--hoogte-3);
  overflow: hidden;
}

.tool__tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 10px;
  background: var(--zand-diep);
}
.tool__tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 12px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-weight: 600;
  font-size: var(--t-s);
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, box-shadow .22s ease;
}
.tool__tab:hover { background: rgba(255, 255, 255, .6); color: var(--inkt); }
.tool__tab[aria-selected="true"] {
  background: var(--wit);
  color: var(--inkt);
  box-shadow: var(--hoogte-1);
}
.tool__tab[aria-selected="true"] .ico { color: var(--groen-tekst); }

.tool__lijf {
  display: grid;
  grid-template-columns: 1fr 380px;
  align-items: stretch;
}
.tool__invoer { padding: clamp(24px, 3vw, 40px); }
.tool__paneel[hidden] { display: none; }

.tool__uitkomst {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 3vw, 40px);
  background: var(--nacht);
  color: var(--op-nacht);
}
.tool__label {
  margin: 0 0 6px;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--op-nacht-zacht);
}
.tool__bedrag {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 16px;
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: #fff;
}
.tool__tot { font-size: var(--t-s); font-weight: 500; color: var(--op-nacht-zacht); font-family: "Figtree", sans-serif; }

/* "vanaf" hoort bij het bedrag maar mag het niet overstemmen. */
.tool__vanaf {
  font-family: "Figtree", sans-serif;
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--op-nacht-zacht);
}
.tool__bedrag[hidden] { display: none; }

/* Geen richtprijs beschikbaar: liever een uitnodiging dan een verzonnen getal. */
.tool__geen {
  margin: 0 0 16px;
  font-size: var(--t-b);
  line-height: 1.55;
  color: #fff;
}
.tool__geen[hidden] { display: none; }
.marge-uitleg[hidden] { display: none; }

/* Korte toelichting boven een invoerveld, waar geen keuze meer te maken is. */
.veld__intro {
  margin: 0 0 20px;
  font-size: var(--t-s);
  color: var(--inkt-zacht);
}
.tool__disclaimer { font-size: var(--t-s); line-height: 1.55; color: var(--op-nacht-zacht); }
.tool__cta { margin-top: 20px; }

@media (max-width: 900px) {
  .tool__lijf { grid-template-columns: 1fr; }
  .tool__tabs { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Velden ---------- */

.veld { display: block; margin-bottom: 18px; }
.veld__label {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 9px;
  font-weight: 650;
  font-size: var(--t-s);
}
.veld__uitkomst {
  font-family: "Outfit", sans-serif;
  font-size: var(--t-l);
  font-weight: 700;
  color: var(--groen-tekst);
}
.veld__hulp { margin: -6px 0 22px; font-size: var(--t-s); color: var(--inkt-stil); }

.veld input[type="text"],
.veld input[type="tel"],
.veld input[type="email"],
.veld textarea,
.keuze select {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--lijn-wit);
  border-radius: var(--r-m);
  background: var(--wit);
  color: var(--inkt);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.veld textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.veld input:focus, .veld textarea:focus, .keuze select:focus {
  outline: 0;
  border-color: var(--groen);
  box-shadow: 0 0 0 4px rgba(126, 168, 47, .28);
}
.veld[data-fout="ja"] input, .veld[data-fout="ja"] textarea { border-color: #c0341a; }
.veld__fout { display: block; margin-top: 7px; font-size: var(--t-xs); color: #c0341a; }
.veld__fout[hidden] { display: none; }

.keuze { position: relative; display: block; }
.keuze select { appearance: none; padding-inline-end: 46px; cursor: pointer; }
.keuze .ico {
  position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--inkt-stil);
}

.veldrij { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .veldrij { grid-template-columns: 1fr; } }

/* Stepper */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: var(--r-m);
  background: var(--zand-licht);
  box-shadow: inset 0 0 0 1.5px var(--lijn);
}
.stepper__knop {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-s);
  background: var(--wit);
  color: var(--inkt);
  font-size: var(--t-l);
  font-family: "Outfit", sans-serif;
  cursor: pointer;
  box-shadow: var(--hoogte-1);
  transition: background-color .18s ease, transform .18s var(--soepel);
}
.stepper__knop:hover { background: var(--groen); color: var(--groen-inkt); }
.stepper__knop:active { transform: scale(.94); }
.stepper__knop[disabled] { opacity: .35; cursor: not-allowed; background: var(--wit); color: var(--inkt); }
.stepper__waarde {
  width: 62px;
  min-height: 46px;
  border: 0; background: transparent;
  text-align: center;
  font-family: "Outfit", sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--inkt);
  -moz-appearance: textfield;
}
.stepper__waarde::-webkit-outer-spin-button,
.stepper__waarde::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Schuif */
.schuif {
  width: 100%;
  height: 46px;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.schuif::-webkit-slider-runnable-track {
  height: 8px; border-radius: 99px;
  background: var(--zand-diep);
}
.schuif::-webkit-slider-thumb {
  appearance: none;
  width: 34px; height: 34px;
  margin-top: -13px;
  border-radius: 50%;
  background: var(--groen);
  border: 4px solid #fff;
  box-shadow: var(--hoogte-1);
}
.schuif::-moz-range-track { height: 8px; border-radius: 99px; background: var(--zand-diep); }
.schuif::-moz-range-thumb {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--groen); border: 4px solid #fff; box-shadow: var(--hoogte-1);
}

/* Radio */
.veld--radio { border: 0; margin: 0 0 18px; padding: 0; }
.veld--radio .veld__label { display: block; padding: 0; }
.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  margin-inline-end: 10px;
  padding: 0 20px;
  border-radius: var(--r-pil);
  background: var(--zand-licht);
  box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-weight: 600;
  cursor: pointer;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.radio:has(input:checked) {
  background: var(--groen-zacht);
  box-shadow: inset 0 0 0 2px var(--groen);
  color: var(--groen-inkt);
}
.radio input { accent-color: var(--groen); width: 18px; height: 18px; }

/* Inbegrepen-lijst */
.inbegrepen {
  padding: 20px 22px;
  border-radius: var(--r-l);
  background: var(--zand-licht);
}
.inbegrepen__kop {
  margin: 0 0 10px;
  font-family: "Outfit", sans-serif;
  font-weight: 650;
  font-size: var(--t-s);
}
.inbegrepen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.inbegrepen li {
  position: relative;
  padding-inline-start: 26px;
  font-size: var(--t-s);
  color: var(--inkt-zacht);
}
.inbegrepen li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: 14px; height: 8px;
  border-inline-start: 2px solid var(--groen-tekst);
  border-block-end: 2px solid var(--groen-tekst);
  transform: rotate(-45deg) translateY(-2px);
}

/* ---------- Verfijnblok in de rekentool ----------
   Uitklapbaar, zodat het bedrag bij het openen van de pagina meteen zichtbaar
   is. Wie een preciezere schatting wil, klapt het open; de band wordt dan
   smaller. Een stappenformulier zou het getal achter drie klikken verstoppen. */

.fijn {
  margin: 0 0 22px;
  border-radius: var(--r-l);
  /* Alleen een tint, geen rand erbij. Een omlijnd vlak binnen de rekentool
     leest als een kaart in een kaart; de kleur zegt genoeg. */
  background: var(--groen-zacht);
}
.fijn > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 52px;
  padding: 10px 18px;
  list-style: none;
  cursor: pointer;
  font-weight: 650;
  color: var(--groen-tekst);
}
.fijn > summary::-webkit-details-marker { display: none; }
.fijn > summary::after {
  content: "";
  flex: none;
  width: 9px; height: 9px;
  margin-inline-start: -4px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .26s var(--soepel);
}
.fijn[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
.fijn__tel {
  margin-inline-start: auto;
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--inkt-stil);
}

.fijn__lijf {
  display: grid;
  gap: 20px;
  padding: 4px 18px 20px;
}
.fijn__vraag { border: 0; margin: 0; padding: 0; }
.fijn__vraag legend,
.fijn__legenda {
  display: block;
  padding: 0;
  margin-bottom: 9px;
  font-weight: 650;
  font-size: var(--t-s);
}
.fijn__hint {
  margin: -5px 0 9px;
  font-size: var(--t-xs);
  color: var(--inkt-stil);
}
.fijn__keuzes { display: flex; flex-wrap: wrap; gap: 8px; }

.pilkeuze {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  padding: 0 16px;
  border-radius: var(--r-pil);
  background: var(--wit);
  box-shadow: inset 0 0 0 1.5px var(--lijn);
  font-size: var(--t-s);
  cursor: pointer;
  transition: box-shadow .2s ease, background-color .2s ease;
}
.pilkeuze:hover { box-shadow: inset 0 0 0 1.5px var(--groen); }
.pilkeuze:has(input:checked) {
  background: var(--groen);
  color: var(--groen-inkt);
  box-shadow: none;
  font-weight: 650;
}
.pilkeuze input { accent-color: var(--groen-vlak); width: 17px; height: 17px; flex: none; }
.pilkeuze:has(input:checked) input { accent-color: var(--groen-inkt); }

.fijn__meter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fijn__meter input {
  width: 92px;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--lijn);
  border-radius: var(--r-m);
  background: var(--wit);
  color: var(--inkt);
  font: inherit;
  font-family: "Outfit", sans-serif;
  font-size: var(--t-l);
  font-weight: 700;
  text-align: center;
}
.fijn__meter input:focus { outline: 0; border-color: var(--groen); box-shadow: 0 0 0 4px rgba(126, 168, 47, .28); }
.fijn__meter > span { font-size: var(--t-s); color: var(--inkt-zacht); }

/* ---------- Postcode: kom ik bij u? ---------- */

.tool__gebied {
  padding-top: 20px;
  border-top: 1px solid var(--lijn-wit);
}
.postcode { display: block; max-width: 140px; }
.postcode input {
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid var(--lijn-wit);
  border-radius: var(--r-m);
  background: var(--wit);
  color: var(--inkt);
  font-family: "Outfit", sans-serif;
  font-size: var(--t-l);
  font-weight: 700;
  letter-spacing: .06em;
}
.postcode input:focus {
  outline: 0;
  border-color: var(--groen);
  box-shadow: 0 0 0 4px rgba(126, 168, 47, .28);
}
.gebied__uitkomst {
  margin: 10px 0 0;
  font-size: var(--t-s);
  color: var(--inkt-stil);
}
.gebied__uitkomst[data-gebied="thuis"],
.gebied__uitkomst[data-gebied="binnen"] { color: var(--groen-tekst); font-weight: 600; }
.gebied__uitkomst[data-gebied="buiten"] { color: var(--pas-geel-zacht-inkt); font-weight: 600; }

/* Uitleg over de bandbreedte, in het donkere uitkomstpaneel. */
.marge-uitleg {
  margin: -8px 0 16px;
  font-size: var(--t-xs);
  color: var(--op-nacht-zacht);
}
.marge-uitleg[data-klaar="ja"] { color: var(--groen-licht); font-weight: 600; }

@media (max-width: 620px) {
  .fijn__keuzes { display: grid; }
  .pilkeuze { justify-content: flex-start; }
}

/* =========================================================
   Reviews
   ========================================================= */

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.review {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--kaart);
  border-radius: var(--r-xl);
  box-shadow: var(--hoogte-1);
}
.review__quote { color: var(--groen-tekst); width: 30px; height: 30px; }
.review__sterren { display: flex; gap: 3px; color: var(--goud); }
.review__sterren .ico { width: 18px; height: 18px; }
.review p { color: var(--inkt-zacht); font-size: var(--t-s); }

.review__persoon {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--lijn-wit);
}
.review__avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  flex: none;
  border-radius: 50%;
  background: var(--zand-diep);
  color: var(--inkt-stil);
  font-family: "Outfit", sans-serif;
  font-weight: 700;
}
.review__naam { display: block; font-weight: 650; font-size: var(--t-s); }
.review__plaats { display: block; font-size: var(--t-xs); color: var(--inkt-stil); }

/* Zolang er geen echte beoordelingen zijn, is een reviewkaart een duidelijk
   gemarkeerde lege plek. Verzonnen citaten staan hier niet. */
.review--leeg {
  background: transparent;
  box-shadow: inset 0 0 0 2px var(--zand-diep);
}
.review--leeg .review__quote { color: var(--zand-diep); }
.review--leeg .review__sterren { color: var(--zand-diep); }
.review--leeg p { color: var(--inkt-stil); font-style: italic; }
.review--leeg .review__persoon { border-top-color: var(--zand-diep); }

.reviewbalk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(24px, 3vw, 36px);
  padding: 20px 26px;
  border-radius: var(--r-l);
  background: var(--kaart);
  box-shadow: var(--hoogte-1);
  font-size: var(--t-s);
  color: var(--inkt-zacht);
}
.reviewbalk .ico { color: var(--groen-tekst); }
.reviewbalk strong { color: var(--inkt); }

@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* =========================================================
   Over mij en veelgestelde vragen
   ========================================================= */

.vragen__raster {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.portret {
  position: relative;
  margin: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--hoogte-2);
}
.portret img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.portret figcaption {
  position: absolute;
  inset-inline: 16px; bottom: 16px;
  padding: 16px 20px;
  border-radius: var(--r-l);
  background: rgba(10, 25, 47, .82);
  backdrop-filter: blur(8px);
  color: #fff;
}
.portret figcaption strong { display: block; font-family: "Outfit", sans-serif; font-size: var(--t-b); }
.portret figcaption span { font-size: var(--t-xs); color: var(--op-nacht-zacht); }

.vraag {
  border-bottom: 1px solid var(--lijn-wit);
}
.vraag > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 4px;
  list-style: none;
  cursor: pointer;
  font-family: "Outfit", sans-serif;
  font-size: clamp(var(--t-b), 1.4vw, var(--t-l));
  font-weight: 650;
  letter-spacing: -.015em;
  transition: color .2s ease;
}
.vraag > summary::-webkit-details-marker { display: none; }
.vraag > summary:hover { color: var(--groen-tekst); }
.vraag__teken {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: var(--zand-licht);
  color: var(--inkt);
  transition: background-color .22s ease, color .22s ease, transform .3s var(--soepel);
}
.vraag[open] .vraag__teken { background: var(--groen); color: var(--groen-inkt); transform: rotate(45deg); }
.vraag__antwoord { padding: 0 4px 24px; color: var(--inkt-zacht); max-width: 62ch; }

@media (max-width: 900px) {
  .vragen__raster { grid-template-columns: 1fr; }
  /* Staande werkfoto: een liggende uitsnede snijdt het gezicht eraf. */
  .portret img { aspect-ratio: 4 / 5; }
}

/* =========================================================
   Contact en offerteformulier
   ========================================================= */

.contact__raster {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: clamp(20px, 2.6vw, 32px);
  align-items: start;
}
.paneel {
  padding: clamp(24px, 3vw, 40px);
  background: var(--kaart);
  border-radius: var(--r-2xl);
  box-shadow: var(--hoogte-2);
}
.paneel--direct {
  background: var(--nacht);
  color: var(--op-nacht);
  display: grid;
  gap: 12px;
  align-content: start;
}
.paneel--direct h3 { margin-bottom: 8px; }

.direct {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border-radius: var(--r-l);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--nacht-rand);
  text-decoration: none;
  transition: background-color .22s ease, transform .22s var(--soepel);
}
.direct:hover { background: rgba(255, 255, 255, .14); transform: translateX(3px); }
.direct .ico { width: 22px; height: 22px; color: var(--groen-licht); }
.direct strong { display: block; font-family: "Outfit", sans-serif; font-size: var(--t-b); }
.direct span span { font-size: var(--t-xs); color: var(--op-nacht-zacht); }
.direct--whatsapp .ico { color: #4ad07d; }

.contact__gebied {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 6px;
  font-size: var(--t-s);
  color: var(--op-nacht-zacht);
}
.contact__gebied .ico { color: var(--groen-licht); margin-top: 2px; }
.contact__klein { margin-top: 14px; font-size: var(--t-xs); color: var(--inkt-stil); }

/* ---------- Opgave uit de rekentool, in het offerteformulier ----------
   Zichtbaar voor de bezoeker, zodat hij weet wat er meegaat en het kan
   corrigeren. Alleen een tint, geen rand: anders leest het als een kaart in
   een kaart. */

.opgave {
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--groen-zacht);
}
.opgave[hidden] { display: none; }

.opgave__kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.opgave__titel {
  margin: 0;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: var(--t-b);
  color: var(--groen-tekst);
}
.opgave__wis {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-pil);
  background: transparent;
  color: var(--inkt-zacht);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.opgave__wis:hover { color: var(--inkt); background: rgba(255, 255, 255, .6); }

.opgave__lijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 7px 18px;
  margin: 0;
  font-size: var(--t-s);
}
.opgave__lijst dt { color: var(--inkt-stil); }
.opgave__lijst dd {
  margin: 0;
  font-weight: 650;
  color: var(--inkt);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Het bedrag staat buiten de lijst. Als losse rij in de dl kreeg hij een
   scheidingslijn die door de kolomruimte in twee stukken uiteenviel. */
.opgave__bedrag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(77, 118, 25, .3);
  font-size: var(--t-s);
}
.opgave__bedrag span { color: var(--inkt-stil); }
.opgave__bedrag strong {
  font-family: "Outfit", sans-serif;
  font-size: var(--t-b);
  font-weight: 700;
  color: var(--groen-tekst);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.opgave__klein {
  margin: 14px 0 0;
  font-size: var(--t-xs);
  color: var(--inkt-stil);
}

@media (max-width: 560px) {
  .opgave__lijst { grid-template-columns: 1fr; gap: 2px; }
  .opgave__lijst dd { text-align: left; margin-bottom: 8px; }
  .opgave__lijst dd:last-of-type { margin-bottom: 0; }
}

/* Lokvak: van het scherm af in plaats van display:none, zodat bots het wel
   vinden en schermlezers het overslaan via aria-hidden. */
.lokvak {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* ---------- Vangnet als het mailprogramma niet opent ---------- */

.terugval {
  margin-top: 18px;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--zand-licht);
}
.terugval[hidden] { display: none; }
.terugval__kop {
  margin: 0 0 6px;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  font-size: var(--t-b);
}
.terugval__uitleg {
  margin: 0 0 14px;
  font-size: var(--t-s);
  color: var(--inkt-zacht);
}
.terugval__tekst {
  max-height: 220px;
  margin: 0 0 14px;
  padding: 14px 16px;
  overflow: auto;
  border-radius: var(--r-m);
  background: var(--wit);
  color: var(--inkt);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--t-xs);
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  -webkit-overflow-scrolling: touch;
}
.terugval__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }

.formulier__melding {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--r-m);
  background: var(--pas-groen);
  color: var(--pas-groen-inkt);
  font-weight: 600;
}
.formulier__melding[hidden] { display: none; }

@media (max-width: 900px) { .contact__raster { grid-template-columns: 1fr; } }

/* =========================================================
   Afsluitende CTA
   ========================================================= */

/* Schermbreed en zonder afronding aan de onderkant: de CTA loopt naadloos
   door in de voet, er blijft geen lichte strook tussen staan. */
.slot {
  position: relative;
  isolation: isolate;
  margin: clamp(38px, 4.5vw, 64px) 0 0;
  width: 100%;
  padding: clamp(72px, 9vw, 130px) 0;
  background: var(--nacht);
  color: var(--op-nacht);
  overflow: hidden;
  text-align: center;
}
.slot__beeld {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.slot__beeld img { width: 100%; height: 100%; object-fit: cover; }
.slot__beeld::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 19, 43, .56) 0%, rgba(20, 32, 64, .7) 32%,
    rgba(16, 26, 52, .86) 64%, rgba(11, 19, 43, .97) 100%);
}
.slot h2 { max-width: 16ch; margin-inline: auto; }
.slot p { margin: 20px auto 0; max-width: 54ch; color: var(--op-nacht-zacht); font-size: var(--t-b); }
.slot__knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 32px; }

/* =========================================================
   Losse pagina's: bedankt, 404 en privacy
   ========================================================= */

/* Deze drie helden zijn korter dan die van een dienstpagina: er staat geen
   beeld naast, dus de tekst mag de volle aandacht hebben. */
.bedanktheld, .foutheld, .tekstheld { padding-bottom: clamp(48px, 6vw, 88px); }

.bedankt, .fout, .tekstheld__binnen { max-width: 62ch; }

/* Het bovenschrift staat standaard op een lichte sectie en is dan grijsblauw.
   Op de donkere paginaheld haalde dat maar 3,2:1 tegen #0b132b, dus daar de
   lichte variant: 10,6:1. Gemeten, niet geschat. */
.paginaheld .oogje { color: var(--op-nacht-zacht); }

.bedankt__vink {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  margin-bottom: 26px;
  border-radius: 50%;
  background: var(--groen);
  color: var(--groen-inkt);
}
.bedankt__vink .ico { width: 32px; height: 32px; }

.bedankt__knoppen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

/* Een opstelling die zelf een link is: dezelfde kaart, maar hij reageert. */
.opstelling--link {
  text-decoration: none;
  color: inherit;
  transition: transform .25s var(--soepel), box-shadow .25s ease;
}
.opstelling--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--hoogte-2);
}
.opstelling--link h3 { color: var(--inkt); }

/* Lopende tekst op de privacypagina. Eén kolom, ruim gezet, want dit wordt
   gelezen en niet gescand. */
.tekstblok { max-width: 68ch; }
.tekstblok h2 {
  margin-top: 44px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  letter-spacing: -.015em;
}
.tekstblok h2:first-child { margin-top: 0; }
.tekstblok p {
  margin-top: 14px;
  color: var(--inkt-zacht);
  font-size: var(--t-b);
  line-height: 1.72;
}
.tekstblok a { color: var(--groen-tekst); }

@media (prefers-reduced-motion: reduce) {
  .opstelling--link { transition: none; }
  .opstelling--link:hover { transform: none; }
}

/* =========================================================
   Vaste actiebalk op telefoons
   ========================================================= */

/* Op desktop staan bellen en offerte al in de header en blijft die in beeld.
   Op een telefoon verdwijnt de header bij het scrollen, en dan is de enige
   manier om te bellen helemaal terug naar boven. Deze balk lost dat op.
   Standaard weg; hij komt pas onder de breekpunten hieronder. */
.duimbalk { display: none; }

@media (max-width: 760px) {
  .duimbalk {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(11, 19, 43, .94);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, .1);
  }

  .duimbalk a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 48px is de ondergrens voor een doel dat je met een duim raakt. */
    min-height: 48px;
    padding: 0 18px;
    border-radius: var(--r-l);
    font-family: "Outfit", sans-serif;
    font-weight: 650;
    font-size: var(--t-s);
    text-decoration: none;
    transition: background-color .2s ease, transform .15s var(--soepel);
  }
  .duimbalk a:active { transform: translateY(1px); }

  .duimbalk__bel {
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .22);
  }
  .duimbalk__bel .ico { width: 18px; height: 18px; }

  .duimbalk__offerte {
    background: var(--groen);
    color: var(--groen-inkt);
  }

  /* De balk ligt over de pagina heen; de voet krijgt ruimte eronder zodat de
     laatste regel niet onbereikbaar wordt. */
  .voet { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

/* Wie beweging uitzet, krijgt ook hier geen indrukanimatie. */
@media (prefers-reduced-motion: reduce) {
  .duimbalk a { transition: none; }
  .duimbalk a:active { transform: none; }
}

/* =========================================================
   Voet
   ========================================================= */

.voet {
  /* Geen marge: de voet sluit direct aan op de CTA erboven. Het verloop laat
     de overgang vanaf de CTA uitdoven in plaats van hem af te kappen. */
  margin-top: 0;
  padding-top: clamp(48px, 6vw, 72px);
  background: linear-gradient(to bottom, #16233f 0%, #101a37 38%, #0b132b 100%);
  color: var(--op-nacht-zacht);
}
.voet__raster {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
}
.voet__raster--vijf {
  grid-template-columns: 1.5fr repeat(4, 1fr);
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(36px, 4vw, 52px);
}
.voet__merk img { width: 132px; margin-bottom: 18px; }
.voet__merk p { font-size: var(--t-s); max-width: 42ch; }
.voet__kop {
  margin-bottom: 16px;
  font-size: var(--t-xs);
  font-weight: 650;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}
.voet__kolom ul { margin: 0; padding: 0; list-style: none; display: grid; }
.voet__kolom a {
  display: block;
  padding-block: 13px;
  color: var(--op-nacht-zacht);
  text-decoration: none;
  font-size: var(--t-s);
  transition: color .2s ease;
}
/* De hele lijst iets omhoog in plaats van de eerste link kleiner maken:
   zo houdt ook de bovenste link een aanraakvlak van 44px. */
.voet__kolom ul { margin-top: -13px; }
.voet__kolom a:hover { color: var(--groen-licht); }

/* Wie de site gemaakt heeft. Staat los boven de juridische regel: het is een
   ondertekening, geen tweede merk op de pagina van de klant. Gecentreerd,
   klein, en iets ingehouden tot je erover gaat. */
.gemaaktdoor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: clamp(28px, 4vw, 44px);
}
.gemaaktdoor__tekst {
  margin: 0;
  font-size: var(--t-xs);
  color: var(--op-nacht-zacht);
}
.gemaaktdoor__link {
  display: block;
  /* Het beeldmerk is een brede wordmark van ruim 10:1; op 168px blijven de
     letters leesbaar zonder dat het met het logo van BS Install concurreert.
     Die verhouding maakt het raakvlak maar 16px hoog, en dat is met een duim
     niet te raken. De verticale ruimte eromheen telt mee voor het aantikken
     zonder dat het logo groter wordt. */
  width: 168px;
  padding-block: 14px;
  /* Alleen bovenlangs terugtrekken. Deed ik dat ook onderlangs, dan lag het
     klikvlak over de copyrightregel en opende een klik daar de verkeerde site. */
  margin-top: -14px;
  opacity: .72;
  transition: opacity .22s ease;
}
.gemaaktdoor__link img { display: block; width: 100%; height: auto; }
.gemaaktdoor__link:hover,
.gemaaktdoor__link:focus-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gemaaktdoor__link { transition: none; }
}

.voet__slot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 26px;
  padding-block: 22px;
  border-top: 1px solid var(--nacht-rand);
  font-size: var(--t-xs);
}
.voet__slot p { margin: 0; }

@media (max-width: 700px) {
  :root { --r-canvas: 26px; }
}
@media (max-width: 900px) { .voet__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .voet__raster { grid-template-columns: 1fr; } }

/* =========================================================
   Subpagina's
   ========================================================= */

.paginaheld {
  position: relative;
  background: var(--nacht);
  color: var(--op-nacht);
  margin-top: calc(var(--kophoogte) * -1);
  padding-top: calc(var(--kophoogte) + clamp(36px, 5vw, 64px));
  padding-bottom: clamp(52px, 7vw, 96px);
}
/* Op subpagina's draagt het canvas de secties onder de held. */
.canvas .sectie:first-child { padding-top: clamp(64px, 7vw, 104px); }
.paginaheld__raster {
  display: grid;
  grid-template-columns: 1.04fr .96fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
/* Dezelfde tweeledige kop als op de homepage, alleen wat compacter. */
.paginaheld h1 { margin: 0; display: grid; gap: 12px; }
.paginaheld .held__kopgroot {
  max-width: none;
  margin-inline: 0;
  font-size: clamp(1.9rem, 4.4vw, 3.5rem);
}
.paginaheld__onder {
  margin-top: 20px;
  color: var(--op-nacht-zacht);
  font-size: var(--t-b);
  max-width: 54ch;
}
.paginaheld__beeld {
  margin: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--hoogte-3);
}
.paginaheld__beeld img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; }
.paginaheld .held__knoppen { justify-content: flex-start; margin-top: 30px; }

.kruimel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: var(--t-xs);
  color: var(--op-nacht-zacht);
}
.kruimel a {
  color: var(--op-nacht-zacht);
  text-decoration: none;
  /* 33px was boven de ondergrens maar bleef het kleinste doel op de pagina. */
  padding-block: 11px;
  transition: color .2s ease;
}
.kruimel a:hover { color: var(--groen-licht); }
.kruimel [aria-current] { color: #fff; font-weight: 600; }

/* ---------- Sectie 1: voordelen ---------- */

.voordeel__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}
.voordeel {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--kaart);
  border-radius: var(--r-xl);
  box-shadow: var(--hoogte-1);
}
.voordeel h3 { margin: 16px 0 10px; }
.voordeel p { color: var(--inkt-zacht); font-size: var(--t-s); }
.ico--voordeel {
  width: 34px; height: 34px;
  padding: 6px;
  border-radius: var(--r-s);
  background: var(--groen-zacht);
  color: var(--groen-tekst);
  box-sizing: content-box;
}

/* Het stuk tekst in de ik-vorm onder de kaarten. */
.verhaal {
  max-width: 62ch;
  margin: clamp(32px, 4vw, 48px) auto 0;
  text-align: center;
  color: var(--inkt-zacht);
  font-size: var(--t-b);
}
.verhaal p + p { margin-top: 1em; }

/* Een voordeelkaart die doorlinkt, op de plaatspagina's. */
.voordeel--link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .3s var(--soepel), box-shadow .3s var(--soepel);
}
.voordeel--link:hover { transform: translateY(-4px); box-shadow: var(--hoogte-2); }
.voordeel--link .dienst__meer { display: inline-flex; margin-top: 14px; }

/* Wegwijzers naar de dienstpagina's, op een plaatspagina. */
.wegwijs__raster {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.4vw, 16px);
}
.wegwijs {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--r-l);
  background: var(--kaart);
  box-shadow: var(--hoogte-1);
  text-decoration: none;
  color: inherit;
  transition: transform .28s var(--soepel), box-shadow .28s var(--soepel);
}
.wegwijs:hover { transform: translateY(-3px); box-shadow: var(--hoogte-2); }
.ico--wegwijs { width: 22px; height: 22px; flex: none; color: var(--groen-tekst); }
.wegwijs__naam { flex: 1; font-weight: 650; font-size: var(--t-s); }
.wegwijs__pijl { width: 16px; height: 16px; flex: none; color: var(--inkt-stil); }
.wegwijs:hover .wegwijs__pijl { color: var(--groen-tekst); }

@media (max-width: 760px) {
  .wegwijs__raster { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 440px) {
  .wegwijs__raster { grid-template-columns: 1fr; }
}

/* ---------- Plaatspagina: wat er hier speelt ---------- */

.situatie__raster {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.situatie__lijst { display: grid; gap: 22px; }
.situatie {
  padding-inline-start: 18px;
  /* Was een groene balk van 3px. Eén keer leest dat als een aangehaalde
     passage, maar vier onder elkaar werden vier identieke accentbalkjes en dat
     is precies het sjabloongevoel dat we hier niet willen. Een haarlijn geeft
     dezelfde groepering zonder de herhaling op te dringen; de koppen en de
     witruimte doen het werk. */
  border-inline-start: 1px solid var(--lijn);
}
.situatie h3 { margin-bottom: 7px; }
.situatie p { color: var(--inkt-zacht); font-size: var(--t-s); }

@media (max-width: 900px) {
  .situatie__raster { grid-template-columns: 1fr; }
}

/* ---------- Sectie 3: specificaties en regio ---------- */

.spec__raster {
  display: grid;
  align-items: start;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(20px, 2.4vw, 28px);
}
.spec {
  padding: clamp(24px, 2.6vw, 34px);
  border-radius: var(--r-xl);
  background: var(--groen-zacht);
}
.spec h3 { margin-bottom: 12px; }
.spec p { color: var(--inkt-zacht); }
.spec--regio { background: var(--nacht); color: var(--op-nacht-zacht); }
.spec--regio h3 { color: #fff; }
.spec--regio p { color: var(--op-nacht-zacht); }

.puntenlijst--licht li { color: var(--op-nacht-zacht); }
.omhulsel--smal { width: min(100% - (var(--marge) * 2), 860px); }

@media (max-width: 900px) {
  .voordeel__raster { grid-template-columns: 1fr; }
  .spec__raster { grid-template-columns: 1fr; }
  .paginaheld .held__knoppen { flex-direction: column; align-items: stretch; }
  .paginaheld .belpil { justify-content: center; }
}

.verlooptekst { color: var(--groen-licht); }

.puntenlijst { margin: 26px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.puntenlijst li { display: flex; align-items: flex-start; gap: 11px; color: var(--op-nacht-zacht); }
.puntenlijst .ico { color: var(--groen-licht); margin-top: 3px; }

.opstelling__raster {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 24px);
}

/* Vier diensten in een raster van drie zou er een alleen laten staan. Even
   veel kolommen als kaarten, dus geen gat. Moet na de basisregel staan: beide
   wegen even zwaar, dus de volgorde beslist. */
.opstelling__raster--vier { grid-template-columns: repeat(4, 1fr); }
.opstelling {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--kaart);
  border-radius: var(--r-xl);
  box-shadow: var(--hoogte-1);
}
.opstelling h3 { margin: 16px 0 10px; }
.opstelling p { color: var(--inkt-zacht); font-size: var(--t-s); }
.ico--dienst { width: 30px; height: 30px; color: var(--groen-tekst); }

.waarom__binnen {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.waarom__beeld { margin: 0; border-radius: var(--r-2xl); overflow: hidden; }
.waarom__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.waarom__lood { font-size: var(--t-l); color: var(--inkt); }
.waarom__tekst p { color: var(--inkt-zacht); }

.portretkader {
  display: grid;
  place-items: center;
  gap: 14px;
  aspect-ratio: 4 / 5;
  padding: 32px;
  border-radius: var(--r-2xl);
  background: var(--zand-licht);
  box-shadow: inset 0 0 0 2px var(--zand-diep);
  text-align: center;
}
.portretkader .ico { width: 40px; height: 40px; color: var(--inkt-stil); }
.portretkader strong { display: block; font-family: "Outfit", sans-serif; }
.portretkader span { display: block; margin-top: 6px; font-size: var(--t-s); color: var(--inkt-stil); }

.handtekening { margin-top: 26px; }
.handtekening__naam {
  display: block;
  font-family: "Outfit", sans-serif;
  font-size: var(--t-l);
  font-weight: 700;
}
.handtekening__rol { font-size: var(--t-s); color: var(--inkt-stil); }

.contactheld__tekst { max-width: 640px; }
.contactkaarten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.8vw, 20px);
  margin-top: clamp(32px, 4vw, 48px);
}
.contactkaart {
  display: grid;
  gap: 4px;
  padding: 24px;
  border-radius: var(--r-xl);
  background: rgba(255, 255, 255, .07);
  box-shadow: inset 0 0 0 1px var(--nacht-rand);
  text-decoration: none;
  transition: background-color .22s ease, transform .22s var(--soepel);
}
.contactkaart:hover { background: rgba(255, 255, 255, .14); transform: translateY(-3px); }
.contactkaart .ico { width: 26px; height: 26px; color: var(--groen-licht); margin-bottom: 8px; }
.contactkaart__label { font-size: var(--t-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--op-nacht-zacht); }
.contactkaart__waarde { font-family: "Outfit", sans-serif; font-size: var(--t-l); font-weight: 700; color: #fff; }
.contactkaart__onder { font-size: var(--t-xs); color: var(--op-nacht-zacht); }

@media (max-width: 900px) {
  .paginaheld__raster, .waarom__binnen { grid-template-columns: 1fr; }
  .opstelling__raster, .contactkaarten { grid-template-columns: 1fr; }
  .opstelling__raster--vier { grid-template-columns: repeat(2, 1fr); }
}

/* Restanten van de oude opmaak die nog in de subpagina's staan. */
.vlieg { opacity: 1; transform: none; }