/* ===== spoedenergiecontract.css ===== */
/* =========================================================
   Spoedenergiecontract.nl — sitelaag
   Ligt bovenop leadbooster-fundament.css. Hierin staan uitsluitend
   sectiecomposities en de paar sitespecifieke tokens die het fundament
   niet kent. Alle kleuren, spacing, radii, typografie en beweging komen
   uit het fundament.
   Hoort bij: Leadbooster Design System v1.0
   ========================================================= */

/* ---------- Sitetokens ----------
   Twee toevoegingen op het fundament, beide afgeleid van bestaande tokens:
   --hdr-h  = knophoogte + s6, zodat de sticky header exact één knop plus
              symmetrische lucht hoog is (86 px desktop, 74 px mobiel).
   --hero-h = minimale hoogte van de hero. Gemeten keuze: op 1440 px wordt
              het fotovlak daarmee 691 x 640 px (1,08:1), vrijwel gelijk aan
              de vierkante uitsnede van hero-square, zodat er niets van de
              werkplek wegvalt. */
:root{
  --hdr-h:calc(var(--ctl-h) + var(--s6));
  --hero-h:640px;
}
@media (max-width:600px){
  :root{--hdr-h:calc(var(--ctl-h) + var(--s5))}
}

.dark{background:var(--navy);color:var(--on-dark)}
.dark p{color:var(--on-dark-soft)}

/* ---------- Sectiekop ----------
   Eén ritme voor alle sectiekoppen: kop, dan intro op 58 tekens leesbreedte. */
.sec-head{max-width:22ch;overflow-wrap:break-word}
.sec-head + .sec-intro{margin-top:var(--s6)}
.sec-intro{max-width:58ch}
.sec-body{max-width:62ch}
.nowrap{white-space:nowrap}

/* =========================================================
   Header
   ========================================================= */
/* Zelfde gedrag als de eerste leadbooster: doorschijnende header, haarlijn
   verschijnt pas zodra de pagina is gescrold. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t-move) ease-out}
.site-header.is-stuck{border-bottom-color:var(--line-soft)}
/* Meetpunt bovenaan de pagina; site.js kijkt met een IntersectionObserver of dit
   punt nog in beeld is en zet daarmee .is-stuck op de header. */
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.site-header__inner{display:flex;align-items:center;gap:var(--s5);
  min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{width:148px;height:54px}
.nav{display:flex;align-items:center;gap:var(--s6);margin-left:auto}
.nav__link{font-size:var(--t-small);font-weight:500;text-decoration:none;color:var(--ink);
  padding-block:var(--s2);border-bottom:1.5px solid transparent;
  transition:border-color var(--t-quick) ease-out,color var(--t-quick) ease-out}
.nav__link:hover{border-bottom-color:var(--accent)}
.header__side{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;margin-left:auto}
.header__tel{display:inline-flex;align-items:center;gap:var(--gap-icon);
  font-size:var(--t-small);font-weight:500;text-decoration:none;white-space:nowrap;
  padding-block:var(--s2);transition:color var(--t-quick) ease-out}
.header__tel span{border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.header__tel:hover .icon{color:var(--accent)}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:var(--s3);
  min-height:var(--ctl-h);padding:0 var(--s4);background:transparent;cursor:pointer;
  border:1.5px solid rgba(14,38,59,.22);border-radius:var(--r-ctl);
  font-size:var(--t-small);font-weight:500;
  transition:border-color var(--t-quick) ease-out}
.menu-toggle:hover{border-color:var(--accent)}
/* Menuteken: drie lijnen, opgebouwd in CSS. Geen icoon uit de set, zodat de
   later aangeleverde SVG hier één op één in .menu-toggle__bars past. */
.menu-toggle__bars{position:relative;display:block;width:18px;height:2px;background:var(--ink);
  transition:background-color var(--t-quick) ease-out}
.menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:var(--ink);
  transition:transform var(--t-move) var(--ease)}
.menu-toggle__bars::before{top:-6px}
.menu-toggle__bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--white)}
.mobile-menu[hidden]{display:none}
.mobile-menu__list{display:grid}
.mobile-menu__list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--line-soft)}
.mobile-menu__list .icon{color:var(--ink)}
.mobile-menu__actions{display:grid;gap:var(--s3);padding-block:var(--s5)}

/* Vanaf 1121 px: volledige navigatie, telefoonnummer als tekstlink, primaire
   CTA als knop. De losse beltoets en het menu zijn dan niet nodig. */
.header__call{display:none}

/* 601–1120 px: navigatie in het menu, beltoets en CTA blijven zichtbaar. */
@media (max-width:1120px){
  .nav{display:none}
  .header__tel{display:none}
  .header__call{display:inline-flex}
  .menu-toggle{display:inline-flex}
  .mobile-menu:not([hidden]){display:block}
  /* Op 768 px passen logo, beltoets met nummer, CTA en menuknop niet samen op
     één regel (gemeten: 775 px bij een venster van 768 px). De beltoets wordt
     daarom vierkant; het nummer staat in de toegankelijke naam en verder in de
     hero, het menu en de footer. */
  .header__call{width:var(--ctl-h);padding-inline:0}
  .header__call-label{display:none}
}
/* Tot 600 px is er naast logo en menuknop geen ruimte voor twee knoppen
   zonder horizontale overflow op 320 px. Bellen en de spoedaanvraag staan
   bovenaan in het menu en direct daaronder in de hero. */
@media (max-width:600px){
  .brand img{width:124px;height:45px}
  /* Optische correctie: een icoon van 21 px in een knop met 14 px padding maakt
     de knop 51 px hoog terwijl --ctl-h 50 px is. Met 1 px negatieve marge boven
     en onder bepaalt de min-height de hoogte weer en zijn knop en veld exact
     even hoog. Gemeten in Chromium. */
  .btn .icon{margin-block:-1px}
  .site-header__inner{gap:var(--s3)}
  .header__call,.header__side>.btn:not(.header__call){display:none}
}

/* =========================================================
   Hero — donker hoofdstuk 1
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--navy)}
/* Het fotovlak is absoluut gepositioneerd ten opzichte van .hero, niet ten
   opzichte van de container. Anders stopt de foto op brede schermen bij de
   containerrand van 1440 px en blijft er rechts een navystrook staan. */
.hero__inner{display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-content:center;padding-block:var(--section-sm);min-height:var(--hero-h)}
.hero__text{position:relative;z-index:2;grid-column:1/span 6;display:grid;gap:var(--s6);align-content:center}
.hero h1{max-width:16ch}
.hero__lead{max-width:52ch}
.hero__lead strong{color:var(--on-dark);font-weight:700;display:block;margin-top:var(--s3)}
/* Geen justify-items:start op deze kolom: Chromium meet de containerquery van
   .microcopy-box dan tegen de max-content breedte (design system §6). De
   knoppenrij lijnt daarom zelf uit met justify-self. */
.hero__actions{display:grid;gap:var(--s5)}
.hero__actions>.btn-row{justify-self:start}
.hero__note{display:flex;align-items:flex-start;gap:var(--s4);
  max-width:56ch;padding-left:var(--s5);border-left:1.5px solid var(--teal);
  font-size:var(--t-micro);line-height:1.55;color:var(--on-dark-mute)}
.hero__note .icon{color:var(--teal);margin-top:1px}

/* Scheidingsteken in de microcopy: op 3 px rondde de browser de vorm naar een
   vierkantje af. Met 4 px en een volledige radius blijft het een rondje. */
.microcopy span:nth-child(2)::before,
.microcopy span:nth-child(3)::before{width:4px;height:4px;border-radius:100px}
.hero__note strong{color:var(--on-dark-soft);font-weight:500}

/* Fotokolom: loopt vanaf de halve breedte door tot de rechterrand van het
   venster en lost aan de linkerkant op in het navyvlak. */
.hero__media{position:absolute;inset:0 0 0 51%;z-index:1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:52% 44%}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(14,38,59,.92) 14%,rgba(14,38,59,0) 46%)}

/* Stopwatch-S als groot, stil grafisch element. Geen glow, geen beweging. */
.hero__mark{position:absolute;z-index:0;left:calc(-1 * var(--s9));bottom:calc(-1 * var(--s9));
  width:clamp(280px,30vw,460px);height:auto;opacity:.07;pointer-events:none}

@media (max-width:1120px){
  .hero__text{grid-column:1/span 7}
  .hero__media{inset:0 0 0 58%}
  .hero__media::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(14,38,59,.9) 18%,rgba(14,38,59,0) 62%)}
}
@media (max-width:980px){
  .hero__inner{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));min-height:0;
    padding-bottom:0;gap:var(--s8)}
  .hero__text{grid-column:1/-1}
  /* Onder 980 px staat de foto onder de tekst, over de volle vensterbreedte. */
  .hero__media{position:relative;inset:auto;grid-column:1/-1;
    margin-inline:calc(-1 * var(--gutter));aspect-ratio:16/9}
  .hero__media::after{background:linear-gradient(180deg,rgba(14,38,59,.34) 0%,rgba(14,38,59,0) 38%)}
  .hero__mark{width:clamp(220px,42vw,320px);opacity:.06;left:auto;right:calc(-1 * var(--s8));
    bottom:auto;top:calc(-1 * var(--s7))}
}
@media (max-width:600px){
  .hero__mark{display:none}
  /* Knoppen die op desktop naast elkaar staan, worden mobiel exact even breed
     (design system §6). justify-self:start zou ze laten krimpen. */
  .hero__actions>.btn-row{justify-self:stretch}
}

/* =========================================================
   Vertrouwensbalk — sluit aan op de hero, zelfde donker hoofdstuk
   ========================================================= */
.trust{background:var(--navy);border-top:1px solid var(--line-dark-soft)}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust__item{display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s7) var(--s5) var(--s7) 0;text-decoration:none;min-width:0}
.trust__item + .trust__item{border-left:1px solid var(--line-dark-soft);padding-left:var(--s5)}
.trust__item .icon{color:var(--on-dark);margin-top:-1px}
.trust__value{display:block;font-weight:700;font-size:var(--t-body);line-height:1.25;
  letter-spacing:-.018em;color:var(--on-dark)}
.trust__label{display:block;margin-top:var(--s1);font-size:var(--t-micro);
  color:var(--on-dark-mute);line-height:1.45}
/* Alleen item 4 is aanklikbaar; de andere drie krijgen daarom geen hoverstaat. */
a.trust__item{transition:background-color var(--t-move) ease-out}
a.trust__item:hover{background:rgba(255,255,255,.045)}
a.trust__item:hover .trust__value{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--teal)}
a.trust__item:hover .icon{color:var(--teal)}
.trust__ext{margin-left:auto;align-self:center;opacity:.55}

@media (max-width:980px){
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__item{padding:var(--s6) var(--s5) var(--s6) 0}
  .trust__item:nth-child(odd){border-left:0;padding-left:0}
  .trust__item:nth-child(even){padding-left:var(--s5)}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line-dark-soft)}
}
@media (max-width:600px){
  .trust__grid{grid-template-columns:minmax(0,1fr)}
  .trust__item{border-left:0!important;padding:var(--s5) 0!important}
  .trust__item + .trust__item{border-top:1px solid var(--line-dark-soft)}
}

/* =========================================================
   Sectie 2 — Wie wij zijn (wit, redactioneel)
   ========================================================= */
.about__text{grid-column:1/span 6}
.about__text .sec-head{max-width:20ch}
.about__text .sec-body{margin-top:var(--s5)}
.about__claim{margin-top:var(--s6);font-size:var(--t-lead);font-weight:700;line-height:1.35;
  max-width:46ch}
.about__cases{margin-top:var(--s5);display:grid;gap:var(--s3)}
.about__cases li{display:flex;align-items:flex-start;gap:var(--s3);
  color:var(--ink-soft);font-size:var(--t-small)}
.about__reasons{grid-column:8/span 5;
  /* Optische correctie: de H2 links en de eerste regel rechts liggen zonder
     deze 4 px niet op dezelfde baseline (gemeten op 1440 px). */
  padding-top:4px}
.reasons{display:grid}
.reasons > div{padding-block:var(--s5);border-top:1px solid var(--line)}
.reasons > div:last-child{border-bottom:1px solid var(--line)}
.reasons dt{font-weight:700;font-size:var(--t-body)}
.reasons dd{margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-soft);max-width:44ch}
.endorse-line{grid-column:1/-1;margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s5);font-size:var(--t-small)}
.endorse-line a{color:var(--ink);text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:500;
  display:inline-flex;align-items:center;gap:var(--s2)}
@media (max-width:980px){
  .about__text{grid-column:1/span 6}
  .about__reasons{grid-column:1/span 6;padding-top:0;margin-top:var(--s7)}
}

/* =========================================================
   Sectie 3 — Zo regelen we jouw spoedaanvraag (surface)
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:var(--s5) var(--s8);margin-top:var(--s9)}
.step{grid-row:1/span 3;display:grid;grid-template-rows:subgrid;gap:var(--s4);
  padding-top:var(--s5);border-top:1.5px solid var(--navy)}
.step__num{color:var(--ink-mute)}
.step p{font-size:var(--t-small);color:var(--ink-soft);max-width:38ch}
.steps__note{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--t-lead);font-weight:700;max-width:52ch;line-height:1.4}
@media (max-width:820px){
  .steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s6)}
  .step{grid-row:auto;grid-template-rows:none}
}

/* =========================================================
   Sectie 5 — Herken je jouw situatie? (wit, redactionele rijen)
   ========================================================= */
.cases{margin-top:var(--s9)}
.case{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5) var(--col-gap);
  align-items:start;padding-block:var(--s6);border-top:1px solid var(--line)}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case h3{max-width:18ch}
/* Optische correctie: de H3 links en de eerste tekstregel rechts staan zonder
   deze 3 px zichtbaar scheef (H3 24 px versus tekst 15 px, gemeten op 1440 px). */
.case p{font-size:var(--t-small);color:var(--ink-soft);max-width:56ch;padding-top:3px}
@media (max-width:900px){
  .case{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .case p{padding-top:0}
}

/* Stil CTA-register: kop, tekst, knop en microcopy op een haarlijn. */
.cta-quiet{margin-top:var(--s9);padding-top:var(--s6);border-top:1.5px solid var(--navy);
  display:grid;grid-template-columns:1fr auto;gap:var(--s5) var(--s8);align-items:center}
.cta-quiet p{font-size:var(--t-lead);font-weight:700;max-width:34ch;line-height:1.35}
@media (max-width:820px){
  .cta-quiet{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   Sectie 6 — Geen loze 24-uursgarantie (surface, statement)
   ========================================================= */
.promise__text{grid-column:1/span 6}
.promise__text .sec-head{max-width:18ch}
.promise__claim{margin-top:var(--s7);padding-top:var(--s5);border-top:1.5px solid var(--navy)}
.promise__claim strong{display:block;font-size:var(--t-h3);font-weight:700;max-width:34ch}
.promise__claim span{display:block;margin-top:var(--s3);font-size:var(--t-small);
  color:var(--ink-soft);max-width:52ch}
/* Optisch gecentreerd tegenover de tekstkolom: bovenaan uitlijnen liet de lijst
   los boven de kop zweven. */
.promise__factors{grid-column:8/span 5;align-self:center}
.promise__factors h3{font-size:var(--t-small);font-weight:700;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.factors{display:grid}
.factors li{padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:var(--t-small);
  color:var(--ink-soft)}
@media (max-width:980px){
  .promise__text,.promise__factors{grid-column:1/span 6}
  .promise__factors{padding-top:0;margin-top:var(--s7)}
}

/* =========================================================
   Sectie 7 — Voor thuis en zakelijk (wit, twee open helften)
   ========================================================= */
/* Subgrid over vijf rijen: kop, lead, inleiding, lijst en link staan links en
   rechts op exact dezelfde hoogte, ook als de teksten verschillend lang zijn. */
.audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(5,auto);margin-top:var(--s9)}
.audience__half{grid-row:1/span 5;display:grid;grid-template-rows:subgrid;gap:var(--s5);
  align-content:start;padding-right:var(--s8);padding-block:var(--s2)}
.audience__half + .audience__half{border-left:1px solid var(--line);
  padding-left:var(--s8);padding-right:0}
.audience__half h3{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.032em;max-width:14ch}
.audience__half .lead{max-width:24ch}
.audience__half p:not(.lead){font-size:var(--t-small);color:var(--ink-soft);max-width:46ch}
.audience__list{display:grid;gap:var(--s3);align-content:start}
.audience__list li{display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--t-small);color:var(--ink-soft)}
.audience__half .link-arrow{justify-self:start;margin-top:var(--s3)}
@media (max-width:820px){
  .audience{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s8)}
  .audience__half{grid-row:auto;grid-template-rows:none;padding-right:0}
  .audience__half + .audience__half{border-left:0;border-top:1px solid var(--line);
    padding-left:0;padding-top:var(--s8)}
}

/* =========================================================
   Sectie 8 — Wat kun je klaarleggen? (surface, meelopende kop)
   ========================================================= */
.prep__head{grid-column:1/span 5;align-self:start;position:sticky;
  top:calc(var(--hdr-h) + var(--s6))}
.prep__head .lead{margin-top:var(--s5);max-width:34ch}
.prep__list{grid-column:7/span 6;display:grid}
.prep__list > div{padding-block:var(--s5);border-top:1px solid var(--line)}
.prep__list > div:last-of-type{border-bottom:1px solid var(--line)}
.prep__list dt{display:flex;align-items:center;gap:var(--gap-icon);font-weight:700}
.prep__list .icon{color:var(--ink)}
/* Het icoon staat in de kop; de omschrijving lijnt eronder uit op dezelfde
   tekstkolom, zodat de lijst één rustige linkerlijn houdt. */
.prep__list dd{margin-top:var(--s2);padding-left:calc(20px + var(--gap-icon));
  font-size:var(--t-small);color:var(--ink-soft);max-width:48ch}
/* Geen kaart maar een afsluitende regel: een derde kaartvorm in deze sectie
   zou het blok onrustig maken. */
.prep__note{grid-column:7/span 6;margin-top:var(--s6)}
.prep__note strong{display:flex;align-items:center;gap:var(--gap-icon);
  font-size:var(--t-body);font-weight:700}
.prep__note .icon{color:var(--accent)}
.prep__note span{display:block;margin-top:var(--s2);padding-left:calc(20px + var(--gap-icon));
  font-size:var(--t-small);color:var(--ink-soft);max-width:48ch}
@media (max-width:980px){
  .prep__head{grid-column:1/-1;position:static}
  .prep__list,.prep__note{grid-column:1/-1}
  .prep__list{margin-top:var(--s7)}
}

/* =========================================================
   Sectie 9 — Endorsement SPOT Energie
   Eén blok: tekstpaneel op surface links, teamfoto rechts. Dezelfde radius als
   de formulierkaart, geen schaduw.
   ========================================================= */
.endorse{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.endorse__text{padding:clamp(32px,4vw,72px);align-self:center}
.endorse__logo{width:132px;height:85px;margin-bottom:var(--s5)}
/* Compacte kop, uitsluitend voor dit endorsementblok: het is een sectie op
   --section-sm en een kop op volle H2-maat weegt hier zwaarder dan de inhoud.
   Zelfde clamp-vorm als het typesysteem, ongeveer 34 px op 1440 px. */
.endorse__text h2{max-width:none;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);
  line-height:1.12;letter-spacing:-.026em}
.endorse__text p{margin-top:var(--s5);font-size:var(--t-small);color:var(--ink-soft);max-width:52ch}
.endorse__text .link-arrow{margin-top:var(--s6)}
/* De foto vult het vlak absoluut. Met height:100% op een rij van automatische
   hoogte bleef er onderaan een strook over. */
.endorse__beeld{position:relative}
.endorse__beeld picture{position:absolute;inset:0;display:block}
.endorse__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
@media (max-width:900px){
  .endorse{grid-template-columns:minmax(0,1fr)}
  .endorse__beeld{order:-1;aspect-ratio:3/2}
  .endorse__beeld picture{position:relative;inset:auto;height:100%}
}

/* =========================================================
   Sectie 10 — Veelgestelde vragen (surface, accordion)
   ========================================================= */
.faq__head{grid-column:1/span 4}
.faq__list{grid-column:6/span 7}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;font-weight:700;font-size:var(--t-h3);
  line-height:1.3;letter-spacing:-.014em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
/* Chevron: dezelfde vorm die het fundament al gebruikt voor .field select.
   Wordt later vervangen door het chevron-icoon uit de aangeleverde set. */
.qa__chev{flex:0 0 auto;width:20px;height:20px;margin-top:3px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E263B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:center;
  transition:transform var(--t-move) var(--ease)}
.qa[open] .qa__chev{transform:rotate(180deg)}
.qa__answer{padding-bottom:var(--s6);max-width:60ch}
.qa__answer p{font-size:var(--t-small);color:var(--ink-soft)}
.faq__foot{grid-column:6/span 7;margin-top:var(--s7);font-size:var(--t-small)}
.faq__foot a{font-weight:500;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:3px;padding-block:4px}
@media (max-width:1120px){
  .faq__head{grid-column:1/-1}
  .faq__list,.faq__foot{grid-column:1/-1}
  .faq__list{margin-top:var(--s7)}
}

/* =========================================================
   Slothoofdstuk — finale CTA, juridische transparantie en footer
   ========================================================= */
.close{position:relative;overflow:hidden;background:var(--navy)}
.close > *{position:relative;z-index:2}
.close__mark{position:absolute;z-index:1;right:calc(-1 * var(--s8));top:calc(-1 * var(--s7));
  width:clamp(300px,34vw,560px);height:auto;opacity:.06;pointer-events:none}
.legal{border-top:1px solid var(--line-dark-soft);padding-block:var(--section-sm)}
.legal__head{grid-column:1/span 4}
.legal__head h2{display:flex;align-items:center;gap:var(--gap-icon);font-size:var(--t-h3)}
.legal__head .icon{color:var(--teal)}
.legal__body{grid-column:6/span 7}
.legal__body p{font-size:var(--t-small);color:var(--on-dark-mute)}
.legal__body strong{color:var(--on-dark-soft);font-weight:500}
@media (max-width:980px){
  .legal__head{grid-column:1/-1}
  .legal__body{grid-column:1/-1;margin-top:var(--s6)}
}

.footer{border-top:1px solid var(--line-dark-soft);padding-block:var(--s8) var(--s7)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s8) var(--col-gap)}
.footer__brand img{width:160px;height:58px}
.footer__endorse{margin-top:var(--s5);font-size:var(--t-small);color:var(--on-dark-soft)}
.footer__endorse a{font-weight:500;color:var(--on-dark);text-decoration-color:var(--teal);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:var(--s2)}
.footer h3{font-size:var(--t-small);font-weight:700;margin-bottom:var(--s4)}
.footer__links a,.footer__contact a{display:inline-block;padding-block:var(--s2);
  font-size:var(--t-small);color:var(--on-dark-soft);text-decoration:none;
  transition:color var(--t-quick) ease-out}
.footer__links a:hover,.footer__contact a:hover{color:var(--white)}
.footer__contact{font-size:var(--t-small);color:var(--on-dark-soft);display:grid;gap:var(--s3)}
.footer__row{display:flex;align-items:flex-start;gap:var(--s4)}
.footer__row .icon{color:var(--teal);margin-top:3px}
.footer__contact strong{color:var(--on-dark);font-weight:500}
.footer__bar{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line-dark-soft);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between}
.footer__bar p{font-size:var(--t-micro);color:var(--on-dark-mute);max-width:78ch}
@media (max-width:980px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}

/* ---------- Correctie op het fundament ----------
   Gemeten in Chromium: onder 600 px werd een veld 51 px hoog en een knop
   50 px, doordat 13 px padding plus 22,5 px regelhoogte plus 3 px rand boven
   de min-height uitkomt. Met 12 px padding valt de berekende hoogte onder
   --ctl-h en bepaalt de min-height de hoogte weer, precies als bij de knop.
   Deze correctie hoort op termijn in leadbooster-fundament.css. */
@media (max-width:600px){
  .field input,.field select{padding-block:12px}
}/* =========================================================
   Spoedenergiecontract.nl — sitelaag
   Ligt bovenop leadbooster-fundament.css. Hierin staan uitsluitend
   sectiecomposities en de paar sitespecifieke tokens die het fundament
   niet kent. Alle kleuren, spacing, radii, typografie en beweging komen
   uit het fundament.
   Hoort bij: Leadbooster Design System v1.0
   ========================================================= */

/* ---------- Sitetokens ----------
   Twee toevoegingen op het fundament, beide afgeleid van bestaande tokens:
   --hdr-h  = knophoogte + s6, zodat de sticky header exact één knop plus
              symmetrische lucht hoog is (86 px desktop, 74 px mobiel).
   --hero-h = minimale hoogte van de hero. Gemeten keuze: op 1440 px wordt
              het fotovlak daarmee 691 x 640 px (1,08:1), vrijwel gelijk aan
              de vierkante uitsnede van hero-square, zodat er niets van de
              werkplek wegvalt. */
:root{
  --hdr-h:calc(var(--ctl-h) + var(--s6));
  --hero-h:640px;
}
@media (max-width:600px){
  :root{--hdr-h:calc(var(--ctl-h) + var(--s5))}
}

.dark{background:var(--navy);color:var(--on-dark)}
.dark p{color:var(--on-dark-soft)}

/* ---------- Sectiekop ----------
   Eén ritme voor alle sectiekoppen: kop, dan intro op 58 tekens leesbreedte. */
.sec-head{max-width:22ch;overflow-wrap:break-word}
.sec-head + .sec-intro{margin-top:var(--s6)}
.sec-intro{max-width:58ch}
.sec-body{max-width:62ch}
.nowrap{white-space:nowrap}

/* =========================================================
   Header
   ========================================================= */
/* Zelfde gedrag als de eerste leadbooster: doorschijnende header, haarlijn
   verschijnt pas zodra de pagina is gescrold. */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(170%) blur(14px);-webkit-backdrop-filter:saturate(170%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t-move) ease-out}
.site-header.is-stuck{border-bottom-color:var(--line-soft)}
/* Meetpunt bovenaan de pagina; site.js kijkt met een IntersectionObserver of dit
   punt nog in beeld is en zet daarmee .is-stuck op de header. */
.scroll-sentinel{position:absolute;top:0;left:0;width:1px;height:1px}
.site-header__inner{display:flex;align-items:center;gap:var(--s5);
  min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.brand img{width:148px;height:54px}
.nav{display:flex;align-items:center;gap:var(--s6);margin-left:auto}
.nav__link{font-size:var(--t-small);font-weight:500;text-decoration:none;color:var(--ink);
  padding-block:var(--s2);border-bottom:1.5px solid transparent;
  transition:border-color var(--t-quick) ease-out,color var(--t-quick) ease-out}
.nav__link:hover{border-bottom-color:var(--accent)}
.header__side{display:flex;align-items:center;gap:var(--s3);flex:0 0 auto;margin-left:auto}
.header__tel{display:inline-flex;align-items:center;gap:var(--gap-icon);
  font-size:var(--t-small);font-weight:500;text-decoration:none;white-space:nowrap;
  padding-block:var(--s2);transition:color var(--t-quick) ease-out}
.header__tel span{border-bottom:1.5px solid var(--accent);padding-bottom:2px}
.header__tel:hover .icon{color:var(--accent)}
.menu-toggle{display:none;align-items:center;justify-content:center;gap:var(--s3);
  min-height:var(--ctl-h);padding:0 var(--s4);background:transparent;cursor:pointer;
  border:1.5px solid rgba(14,38,59,.22);border-radius:var(--r-ctl);
  font-size:var(--t-small);font-weight:500;
  transition:border-color var(--t-quick) ease-out}
.menu-toggle:hover{border-color:var(--accent)}
/* Menuteken: drie lijnen, opgebouwd in CSS. Geen icoon uit de set, zodat de
   later aangeleverde SVG hier één op één in .menu-toggle__bars past. */
.menu-toggle__bars{position:relative;display:block;width:18px;height:2px;background:var(--ink);
  transition:background-color var(--t-quick) ease-out}
.menu-toggle__bars::before,.menu-toggle__bars::after{content:"";position:absolute;left:0;
  width:18px;height:2px;background:var(--ink);
  transition:transform var(--t-move) var(--ease)}
.menu-toggle__bars::before{top:-6px}
.menu-toggle__bars::after{top:6px}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars{background:transparent}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after{transform:translateY(-6px) rotate(-45deg)}

.mobile-menu{display:none;border-top:1px solid var(--line);background:var(--white)}
.mobile-menu[hidden]{display:none}
.mobile-menu__list{display:grid}
.mobile-menu__list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding-block:var(--s4);font-weight:500;text-decoration:none;
  border-bottom:1px solid var(--line-soft)}
.mobile-menu__list .icon{color:var(--ink)}
.mobile-menu__actions{display:grid;gap:var(--s3);padding-block:var(--s5)}

/* Vanaf 1121 px: volledige navigatie, telefoonnummer als tekstlink, primaire
   CTA als knop. De losse beltoets en het menu zijn dan niet nodig. */
.header__call{display:none}

/* 601–1120 px: navigatie in het menu, beltoets en CTA blijven zichtbaar. */
@media (max-width:1120px){
  .nav{display:none}
  .header__tel{display:none}
  .header__call{display:inline-flex}
  .menu-toggle{display:inline-flex}
  .mobile-menu:not([hidden]){display:block}
  /* Op 768 px passen logo, beltoets met nummer, CTA en menuknop niet samen op
     één regel (gemeten: 775 px bij een venster van 768 px). De beltoets wordt
     daarom vierkant; het nummer staat in de toegankelijke naam en verder in de
     hero, het menu en de footer. */
  .header__call{width:var(--ctl-h);padding-inline:0}
  .header__call-label{display:none}
}
/* Tot 600 px is er naast logo en menuknop geen ruimte voor twee knoppen
   zonder horizontale overflow op 320 px. Bellen en de spoedaanvraag staan
   bovenaan in het menu en direct daaronder in de hero. */
@media (max-width:600px){
  .brand img{width:124px;height:45px}
  /* Optische correctie: een icoon van 21 px in een knop met 14 px padding maakt
     de knop 51 px hoog terwijl --ctl-h 50 px is. Met 1 px negatieve marge boven
     en onder bepaalt de min-height de hoogte weer en zijn knop en veld exact
     even hoog. Gemeten in Chromium. */
  .btn .icon{margin-block:-1px}
  .site-header__inner{gap:var(--s3)}
  .header__call,.header__side>.btn:not(.header__call){display:none}
}

/* =========================================================
   Hero — donker hoofdstuk 1
   ========================================================= */
.hero{position:relative;overflow:hidden;background:var(--navy)}
/* Het fotovlak is absoluut gepositioneerd ten opzichte van .hero, niet ten
   opzichte van de container. Anders stopt de foto op brede schermen bij de
   containerrand van 1440 px en blijft er rechts een navystrook staan. */
.hero__inner{display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--col-gap);
  align-content:center;padding-block:var(--section-sm);min-height:var(--hero-h)}
.hero__text{position:relative;z-index:2;grid-column:1/span 6;display:grid;gap:var(--s6);align-content:center}
.hero h1{max-width:16ch}
.hero__lead{max-width:52ch}
.hero__lead strong{color:var(--on-dark);font-weight:700;display:block;margin-top:var(--s3)}
/* Geen justify-items:start op deze kolom: Chromium meet de containerquery van
   .microcopy-box dan tegen de max-content breedte (design system §6). De
   knoppenrij lijnt daarom zelf uit met justify-self. */
.hero__actions{display:grid;gap:var(--s5)}
.hero__actions>.btn-row{justify-self:start}
.hero__note{display:flex;align-items:flex-start;gap:var(--s4);
  max-width:56ch;padding-left:var(--s5);border-left:1.5px solid var(--teal);
  font-size:var(--t-micro);line-height:1.55;color:var(--on-dark-mute)}
.hero__note .icon{color:var(--teal);margin-top:1px}

/* Scheidingsteken in de microcopy: op 3 px rondde de browser de vorm naar een
   vierkantje af. Met 4 px en een volledige radius blijft het een rondje. */
.microcopy span:nth-child(2)::before,
.microcopy span:nth-child(3)::before{width:4px;height:4px;border-radius:100px}
.hero__note strong{color:var(--on-dark-soft);font-weight:500}

/* Fotokolom: loopt vanaf de halve breedte door tot de rechterrand van het
   venster en lost aan de linkerkant op in het navyvlak. */
.hero__media{position:absolute;inset:0 0 0 51%;z-index:1}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:52% 44%}
.hero__media::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--navy) 0%,rgba(14,38,59,.92) 14%,rgba(14,38,59,0) 46%)}

/* Stopwatch-S als groot, stil grafisch element. Geen glow, geen beweging. */
.hero__mark{position:absolute;z-index:0;left:calc(-1 * var(--s9));bottom:calc(-1 * var(--s9));
  width:clamp(280px,30vw,460px);height:auto;opacity:.07;pointer-events:none}

@media (max-width:1120px){
  .hero__text{grid-column:1/span 7}
  .hero__media{inset:0 0 0 58%}
  .hero__media::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(14,38,59,.9) 18%,rgba(14,38,59,0) 62%)}
}
@media (max-width:980px){
  .hero__inner{position:relative;grid-template-columns:repeat(6,minmax(0,1fr));min-height:0;
    padding-bottom:0;gap:var(--s8)}
  .hero__text{grid-column:1/-1}
  /* Onder 980 px staat de foto onder de tekst, over de volle vensterbreedte. */
  .hero__media{position:relative;inset:auto;grid-column:1/-1;
    margin-inline:calc(-1 * var(--gutter));aspect-ratio:16/9}
  .hero__media::after{background:linear-gradient(180deg,rgba(14,38,59,.34) 0%,rgba(14,38,59,0) 38%)}
  .hero__mark{width:clamp(220px,42vw,320px);opacity:.06;left:auto;right:calc(-1 * var(--s8));
    bottom:auto;top:calc(-1 * var(--s7))}
}
@media (max-width:600px){
  .hero__mark{display:none}
  /* Knoppen die op desktop naast elkaar staan, worden mobiel exact even breed
     (design system §6). justify-self:start zou ze laten krimpen. */
  .hero__actions>.btn-row{justify-self:stretch}
}

/* =========================================================
   Vertrouwensbalk — sluit aan op de hero, zelfde donker hoofdstuk
   ========================================================= */
.trust{background:var(--navy);border-top:1px solid var(--line-dark-soft)}
.trust__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.trust__item{display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s7) var(--s5) var(--s7) 0;text-decoration:none;min-width:0}
.trust__item + .trust__item{border-left:1px solid var(--line-dark-soft);padding-left:var(--s5)}
.trust__item .icon{color:var(--on-dark);margin-top:-1px}
.trust__value{display:block;font-weight:700;font-size:var(--t-body);line-height:1.25;
  letter-spacing:-.018em;color:var(--on-dark)}
.trust__label{display:block;margin-top:var(--s1);font-size:var(--t-micro);
  color:var(--on-dark-mute);line-height:1.45}
/* Alleen item 4 is aanklikbaar; de andere drie krijgen daarom geen hoverstaat. */
a.trust__item{transition:background-color var(--t-move) ease-out}
a.trust__item:hover{background:rgba(255,255,255,.045)}
a.trust__item:hover .trust__value{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1.5px;text-decoration-color:var(--teal)}
a.trust__item:hover .icon{color:var(--teal)}
.trust__ext{margin-left:auto;align-self:center;opacity:.55}

@media (max-width:980px){
  .trust__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust__item{padding:var(--s6) var(--s5) var(--s6) 0}
  .trust__item:nth-child(odd){border-left:0;padding-left:0}
  .trust__item:nth-child(even){padding-left:var(--s5)}
  .trust__item:nth-child(n+3){border-top:1px solid var(--line-dark-soft)}
}
@media (max-width:600px){
  .trust__grid{grid-template-columns:minmax(0,1fr)}
  .trust__item{border-left:0!important;padding:var(--s5) 0!important}
  .trust__item + .trust__item{border-top:1px solid var(--line-dark-soft)}
}

/* =========================================================
   Sectie 2 — Wie wij zijn (wit, redactioneel)
   ========================================================= */
.about__text{grid-column:1/span 6}
.about__text .sec-head{max-width:20ch}
.about__text .sec-body{margin-top:var(--s5)}
.about__claim{margin-top:var(--s6);font-size:var(--t-lead);font-weight:700;line-height:1.35;
  max-width:46ch}
.about__cases{margin-top:var(--s5);display:grid;gap:var(--s3)}
.about__cases li{display:flex;align-items:flex-start;gap:var(--s3);
  color:var(--ink-soft);font-size:var(--t-small)}
.about__reasons{grid-column:8/span 5;
  /* Optische correctie: de H2 links en de eerste regel rechts liggen zonder
     deze 4 px niet op dezelfde baseline (gemeten op 1440 px). */
  padding-top:4px}
.reasons{display:grid}
.reasons > div{padding-block:var(--s5);border-top:1px solid var(--line)}
.reasons > div:last-child{border-bottom:1px solid var(--line)}
.reasons dt{font-weight:700;font-size:var(--t-body)}
.reasons dd{margin-top:var(--s2);font-size:var(--t-small);color:var(--ink-soft);max-width:44ch}
.endorse-line{grid-column:1/-1;margin-top:var(--s8);padding-top:var(--s5);
  border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--s3) var(--s5);font-size:var(--t-small)}
.endorse-line a{color:var(--ink);text-decoration-color:var(--accent);
  text-decoration-thickness:1.5px;text-underline-offset:3px;font-weight:500;
  display:inline-flex;align-items:center;gap:var(--s2)}
@media (max-width:980px){
  .about__text{grid-column:1/span 6}
  .about__reasons{grid-column:1/span 6;padding-top:0;margin-top:var(--s7)}
}

/* =========================================================
   Sectie 3 — Zo regelen we jouw spoedaanvraag (surface)
   ========================================================= */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:auto auto auto;gap:var(--s5) var(--s8);margin-top:var(--s9)}
.step{grid-row:1/span 3;display:grid;grid-template-rows:subgrid;gap:var(--s4);
  padding-top:var(--s5);border-top:1.5px solid var(--navy)}
.step__num{color:var(--ink-mute)}
.step p{font-size:var(--t-small);color:var(--ink-soft);max-width:38ch}
.steps__note{margin-top:var(--s9);padding-top:var(--s5);border-top:1px solid var(--line);
  font-size:var(--t-lead);font-weight:700;max-width:52ch;line-height:1.4}
@media (max-width:820px){
  .steps{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s6)}
  .step{grid-row:auto;grid-template-rows:none}
}

/* =========================================================
   Sectie 4 — Formulier (donker hoofdstuk 2)
   ========================================================= */

/* =========================================================
   Sectie 5 — Herken je jouw situatie? (wit, redactionele rijen)
   ========================================================= */
.cases{margin-top:var(--s9)}
.case{display:grid;grid-template-columns:5fr 7fr;gap:var(--s5) var(--col-gap);
  align-items:start;padding-block:var(--s6);border-top:1px solid var(--line)}
.case:last-of-type{border-bottom:1px solid var(--line)}
.case h3{max-width:18ch}
/* Optische correctie: de H3 links en de eerste tekstregel rechts staan zonder
   deze 3 px zichtbaar scheef (H3 24 px versus tekst 15 px, gemeten op 1440 px). */
.case p{font-size:var(--t-small);color:var(--ink-soft);max-width:56ch;padding-top:3px}
@media (max-width:900px){
  .case{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .case p{padding-top:0}
}

/* Stil CTA-register: kop, tekst, knop en microcopy op een haarlijn. */
.cta-quiet{margin-top:var(--s9);padding-top:var(--s6);border-top:1.5px solid var(--navy);
  display:grid;grid-template-columns:1fr auto;gap:var(--s5) var(--s8);align-items:center}
.cta-quiet p{font-size:var(--t-lead);font-weight:700;max-width:34ch;line-height:1.35}
@media (max-width:820px){
  .cta-quiet{grid-template-columns:minmax(0,1fr)}
}

/* =========================================================
   Sectie 6 — Geen loze 24-uursgarantie (surface, statement)
   ========================================================= */
.promise__text{grid-column:1/span 6}
.promise__text .sec-head{max-width:18ch}
.promise__claim{margin-top:var(--s7);padding-top:var(--s5);border-top:1.5px solid var(--navy)}
.promise__claim strong{display:block;font-size:var(--t-h3);font-weight:700;max-width:34ch}
.promise__claim span{display:block;margin-top:var(--s3);font-size:var(--t-small);
  color:var(--ink-soft);max-width:52ch}
/* Optisch gecentreerd tegenover de tekstkolom: bovenaan uitlijnen liet de lijst
   los boven de kop zweven. */
.promise__factors{grid-column:8/span 5;align-self:center}
.promise__factors h3{font-size:var(--t-small);font-weight:700;
  padding-bottom:var(--s3);border-bottom:1px solid var(--line)}
.factors{display:grid}
.factors li{padding-block:var(--s3);border-bottom:1px solid var(--line);font-size:var(--t-small);
  color:var(--ink-soft)}
@media (max-width:980px){
  .promise__text,.promise__factors{grid-column:1/span 6}
  .promise__factors{padding-top:0;margin-top:var(--s7)}
}

/* =========================================================
   Sectie 7 — Voor thuis en zakelijk (wit, twee open helften)
   ========================================================= */
/* Subgrid over vijf rijen: kop, lead, inleiding, lijst en link staan links en
   rechts op exact dezelfde hoogte, ook als de teksten verschillend lang zijn. */
.audience{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(5,auto);margin-top:var(--s9)}
.audience__half{grid-row:1/span 5;display:grid;grid-template-rows:subgrid;gap:var(--s5);
  align-content:start;padding-right:var(--s8);padding-block:var(--s2)}
.audience__half + .audience__half{border-left:1px solid var(--line);
  padding-left:var(--s8);padding-right:0}
.audience__half h3{font-size:var(--t-h2);line-height:1.06;letter-spacing:-.032em;max-width:14ch}
.audience__half .lead{max-width:24ch}
.audience__half p:not(.lead){font-size:var(--t-small);color:var(--ink-soft);max-width:46ch}
.audience__list{display:grid;gap:var(--s3);align-content:start}
.audience__list li{display:flex;align-items:flex-start;gap:var(--s3);
  font-size:var(--t-small);color:var(--ink-soft)}
.audience__half .link-arrow{justify-self:start;margin-top:var(--s3)}
@media (max-width:820px){
  .audience{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s8)}
  .audience__half{grid-row:auto;grid-template-rows:none;padding-right:0}
  .audience__half + .audience__half{border-left:0;border-top:1px solid var(--line);
    padding-left:0;padding-top:var(--s8)}
}

/* =========================================================
   Sectie 8 — Wat kun je klaarleggen? (surface, meelopende kop)
   ========================================================= */
.prep__head{grid-column:1/span 5;align-self:start;position:sticky;
  top:calc(var(--hdr-h) + var(--s6))}
.prep__head .lead{margin-top:var(--s5);max-width:34ch}
.prep__list{grid-column:7/span 6;display:grid}
.prep__list > div{padding-block:var(--s5);border-top:1px solid var(--line)}
.prep__list > div:last-of-type{border-bottom:1px solid var(--line)}
.prep__list dt{display:flex;align-items:center;gap:var(--gap-icon);font-weight:700}
.prep__list .icon{color:var(--ink)}
/* Het icoon staat in de kop; de omschrijving lijnt eronder uit op dezelfde
   tekstkolom, zodat de lijst één rustige linkerlijn houdt. */
.prep__list dd{margin-top:var(--s2);padding-left:calc(20px + var(--gap-icon));
  font-size:var(--t-small);color:var(--ink-soft);max-width:48ch}
/* Geen kaart maar een afsluitende regel: een derde kaartvorm in deze sectie
   zou het blok onrustig maken. */
.prep__note{grid-column:7/span 6;margin-top:var(--s6)}
.prep__note strong{display:flex;align-items:center;gap:var(--gap-icon);
  font-size:var(--t-body);font-weight:700}
.prep__note .icon{color:var(--accent)}
.prep__note span{display:block;margin-top:var(--s2);padding-left:calc(20px + var(--gap-icon));
  font-size:var(--t-small);color:var(--ink-soft);max-width:48ch}
@media (max-width:980px){
  .prep__head{grid-column:1/-1;position:static}
  .prep__list,.prep__note{grid-column:1/-1}
  .prep__list{margin-top:var(--s7)}
}

/* =========================================================
   Sectie 9 — Endorsement SPOT Energie
   Eén blok: tekstpaneel op surface links, teamfoto rechts. Dezelfde radius als
   de formulierkaart, geen schaduw.
   ========================================================= */
.endorse{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  border-radius:var(--r-card);overflow:hidden;background:var(--surface)}
.endorse__text{padding:clamp(32px,4vw,72px);align-self:center}
.endorse__logo{width:132px;height:85px;margin-bottom:var(--s5)}
/* Compacte kop, uitsluitend voor dit endorsementblok: het is een sectie op
   --section-sm en een kop op volle H2-maat weegt hier zwaarder dan de inhoud.
   Zelfde clamp-vorm als het typesysteem, ongeveer 34 px op 1440 px. */
.endorse__text h2{max-width:none;font-size:clamp(1.5rem,1.1rem + 1.3vw,2.15rem);
  line-height:1.12;letter-spacing:-.026em}
.endorse__text p{margin-top:var(--s5);font-size:var(--t-small);color:var(--ink-soft);max-width:52ch}
.endorse__text .link-arrow{margin-top:var(--s6)}
/* De foto vult het vlak absoluut. Met height:100% op een rij van automatische
   hoogte bleef er onderaan een strook over. */
.endorse__beeld{position:relative}
.endorse__beeld picture{position:absolute;inset:0;display:block}
.endorse__beeld img{width:100%;height:100%;object-fit:cover;object-position:50% 34%}
@media (max-width:900px){
  .endorse{grid-template-columns:minmax(0,1fr)}
  .endorse__beeld{order:-1;aspect-ratio:3/2}
  .endorse__beeld picture{position:relative;inset:auto;height:100%}
}

/* =========================================================
   Sectie 10 — Veelgestelde vragen (surface, accordion)
   ========================================================= */
.faq__head{grid-column:1/span 4}
.faq__list{grid-column:6/span 7}
.qa{border-top:1px solid var(--line)}
.qa:last-of-type{border-bottom:1px solid var(--line)}
.qa summary{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  padding-block:var(--s5);cursor:pointer;font-weight:700;font-size:var(--t-h3);
  line-height:1.3;letter-spacing:-.014em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
/* Chevron: dezelfde vorm die het fundament al gebruikt voor .field select.
   Wordt later vervangen door het chevron-icoon uit de aangeleverde set. */
.qa__chev{flex:0 0 auto;width:20px;height:20px;margin-top:3px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E263B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:center;
  transition:transform var(--t-move) var(--ease)}
.qa[open] .qa__chev{transform:rotate(180deg)}
.qa__answer{padding-bottom:var(--s6);max-width:60ch}
.qa__answer p{font-size:var(--t-small);color:var(--ink-soft)}
.faq__foot{grid-column:6/span 7;margin-top:var(--s7);font-size:var(--t-small)}
.faq__foot a{font-weight:500;text-decoration-color:var(--accent);text-decoration-thickness:1.5px;
  text-underline-offset:3px;padding-block:4px}
@media (max-width:1120px){
  .faq__head{grid-column:1/-1}
  .faq__list,.faq__foot{grid-column:1/-1}
  .faq__list{margin-top:var(--s7)}
}

/* =========================================================
   Slothoofdstuk — finale CTA, juridische transparantie en footer
   ========================================================= */
.close{position:relative;overflow:hidden;background:var(--navy)}
.close > *{position:relative;z-index:2}
.close__mark{position:absolute;z-index:1;right:calc(-1 * var(--s8));top:calc(-1 * var(--s7));
  width:clamp(300px,34vw,560px);height:auto;opacity:.06;pointer-events:none}
.legal{border-top:1px solid var(--line-dark-soft);padding-block:var(--section-sm)}
.legal__head{grid-column:1/span 4}
.legal__head h2{display:flex;align-items:center;gap:var(--gap-icon);font-size:var(--t-h3)}
.legal__head .icon{color:var(--teal)}
.legal__body{grid-column:6/span 7}
.legal__body p{font-size:var(--t-small);color:var(--on-dark-mute)}
.legal__body strong{color:var(--on-dark-soft);font-weight:500}
@media (max-width:980px){
  .legal__head{grid-column:1/-1}
  .legal__body{grid-column:1/-1;margin-top:var(--s6)}
}

.footer{border-top:1px solid var(--line-dark-soft);padding-block:var(--s8) var(--s7)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s8) var(--col-gap)}
.footer__brand img{width:160px;height:58px}
.footer__endorse{margin-top:var(--s5);font-size:var(--t-small);color:var(--on-dark-soft)}
.footer__endorse a{font-weight:500;color:var(--on-dark);text-decoration-color:var(--teal);
  text-decoration-thickness:1.5px;text-underline-offset:3px;
  display:inline-flex;align-items:center;gap:var(--s2)}
.footer h3{font-size:var(--t-small);font-weight:700;margin-bottom:var(--s4)}
.footer__links a,.footer__contact a{display:inline-block;padding-block:var(--s2);
  font-size:var(--t-small);color:var(--on-dark-soft);text-decoration:none;
  transition:color var(--t-quick) ease-out}
.footer__links a:hover,.footer__contact a:hover{color:var(--white)}
.footer__contact{font-size:var(--t-small);color:var(--on-dark-soft);display:grid;gap:var(--s3)}
.footer__row{display:flex;align-items:flex-start;gap:var(--s4)}
.footer__row .icon{color:var(--teal);margin-top:3px}
.footer__contact strong{color:var(--on-dark);font-weight:500}
.footer__bar{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--line-dark-soft);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between}
.footer__bar p{font-size:var(--t-micro);color:var(--on-dark-mute);max-width:78ch}
@media (max-width:980px){
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){
  .footer__grid{grid-template-columns:minmax(0,1fr);gap:var(--s7)}
}

/* ---------- Correctie op het fundament ----------
   Gemeten in Chromium: onder 600 px werd een veld 51 px hoog en een knop
   50 px, doordat 13 px padding plus 22,5 px regelhoogte plus 3 px rand boven
   de min-height uitkomt. Met 12 px padding valt de berekende hoogte onder
   --ctl-h en bepaalt de min-height de hoogte weer, precies als bij de knop.
   Deze correctie hoort op termijn in leadbooster-fundament.css. */
@media (max-width:600px){
  .field input,.field select{padding-block:12px}
}

/* ---------- Reveal-vertraging ----------
   Stond eerst als inline style per element. Nu in CSS, zodat de HTML vrij is van
   stijlattributen. De vertraging loopt per kolom op met één stap van 80 ms; de
   waarde zelf komt uit het fundament (var(--d) in [data-reveal]). */
.about__reasons,
.promise__factors,
.prep__list,
.faq__list{--d:80ms}
.steps .step:nth-child(2){--d:80ms}
.steps .step:nth-child(3){--d:160ms}
.audience__half:nth-child(2){--d:80ms}

/* =========================================================
   Contactformulier — zwaarste conversiemoment, in het donkere slothoofdstuk
   Hergebruikt uit het fundament: .formcard, .form-grid, .field, .field--full,
   .field-error, .btn, .btn--wide, .microcopy, .form-foot, .form-status en de
   focus- en motionregels. Hieronder staat alleen wat het fundament niet kent:
   de twee tabs, de intro-kolom en de vertrouwenspunten.
   ========================================================= */
.contact{padding-block:var(--section)}
/* Boven uitlijnen, niet centreren: de kaart wordt hoger zodra "Zakelijk" het
   bedrijfsnaamveld toont, en bij centreren verspringt de kop dan mee. */
.contact__intro{grid-column:1/span 5;align-self:start}
.contact__intro h2{max-width:12ch}
.contact__intro .lead{margin-top:var(--s6);max-width:42ch}
.contact__card{grid-column:7/span 6}

.contact__points{margin-top:var(--s8);display:grid}
.contact__points li{display:flex;align-items:flex-start;gap:var(--s4);
  padding-block:var(--s5);border-top:1px solid var(--line-dark-soft)}
.contact__points li:last-child{border-bottom:1px solid var(--line-dark-soft)}
.contact__points .icon{color:var(--teal);margin-top:2px}
.contact__points strong{display:block;font-weight:700;color:var(--on-dark);
  font-size:var(--t-small)}
.contact__points span span{display:block;margin-top:var(--s1);font-size:var(--t-micro);
  color:var(--on-dark-mute);line-height:1.45}

.contact__bellen{margin-top:var(--s6);font-size:var(--t-small);color:var(--on-dark-mute)}
.contact__bellen a{display:inline-flex;align-items:center;gap:var(--s2);
  color:var(--on-dark);font-weight:500;text-decoration:none;padding-block:var(--s2)}
.contact__bellen a span{border-bottom:1.5px solid var(--teal);padding-bottom:2px}
.contact__bellen .icon{color:var(--teal)}

/* Segmented control. Twee gelijke helften in één spoor, zodat de keuze in één
   oogopslag te lezen is en er geen dropdown opengeklapt hoeft te worden. */
.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1);
  padding:var(--s1);background:var(--surface);border-radius:var(--r-ctl);
  margin-bottom:var(--s6)}
.segmented__btn{min-height:calc(var(--ctl-h) - var(--s2));padding:0 var(--s4);
  border:1.5px solid transparent;border-radius:calc(var(--r-ctl) - 2px);
  background:transparent;color:var(--ink-mute);cursor:pointer;
  font-size:var(--t-small);font-weight:500;line-height:1.2;
  transition:background-color var(--t-quick) ease-out,color var(--t-quick) ease-out,
             border-color var(--t-quick) ease-out}
.segmented__btn:hover{color:var(--ink)}
.segmented__btn.is-active{background:var(--white);color:var(--ink);font-weight:700;
  border-color:var(--accent)}

.contact__panel .form-grid{margin-top:0}
/* De kaart ligt op een donkere sectie. Zonder deze regels erft de tekst in de
   kaart de witte tekstkleur van .dark p en verdwijnt hij op het witte vlak. */
.contact .formcard p{color:var(--ink-soft)}
.contact .formcard label{color:var(--ink)}
/* Akkoordvinkje: hergebruikt .check uit het fundament. Het staat op een eigen
   regel boven de knop, zodat de bezoeker de keuze bewust maakt en de melding
   eronder past zonder de knop te verschuiven. */
.field--akkoord{margin-top:var(--s6)}
.field--akkoord .check a{font-weight:500;display:inline-flex;align-items:baseline;gap:var(--s1)}
.field--akkoord .check .icon{align-self:center}
.field--akkoord.has-error .check input{border-color:#B3261E}
.contact .formcard .form-legal{font-size:var(--t-micro);color:var(--ink-mute);line-height:1.55}
.contact .formcard .form-legal a{color:var(--ink);text-decoration-color:var(--accent);
  text-underline-offset:2px;padding-block:4px}
.contact .formcard .form-legal{display:flex;align-items:flex-start;gap:var(--s3)}
.contact .formcard .form-legal .icon{color:var(--accent);margin-top:1px}
.contact .field textarea{min-height:96px}

@media (max-width:980px){
  .contact__intro,.contact__card{grid-column:1/-1}
  .contact__card{margin-top:var(--s8)}
  .contact__intro h2{max-width:none}
}
@media (max-width:600px){
  /* Tabs blijven naast elkaar staan: samen vormen ze de keuze, en onder elkaar
     leest het als twee losse knoppen. Op 320 px is elke helft nog 130 px breed. */
  .segmented__btn{padding-inline:var(--s3)}
  .contact__points li{padding-block:var(--s4)}
}