/* Solar Green - advertentie-landingspagina
   Huisstijl overgenomen van solargreen.nl: merkgroen #25955B (logo en Elementor-kit)
   op off-white #FCFCFD met bijna-zwart #101413. Het merkgroen haalt op wit maar 3,8:1,
   dus net als bij de eerdere landers drie varianten in :root: --green alleen voor
   vlakken, iconen en grote cijfers, --green-deep (5,7:1) voor kleine groene tekst op
   wit en --green-fill (5,1:1) voor vlakken waar witte tekst op komt.
   Type: Kanit (koppen) + Poppins (body), dezelfde combinatie als solargreen.nl.
   Layout is de bewezen Feitsma/Draagkracht-DNA, inhoud en huisstijl vervangen. */

:root{
  --green:#25955B;
  --green-deep:#1B7546;
  --green-fill:#1D7E4A;
  --green-soft:#E9F6EF;
  --green-light:#7FD6A4;  /* groen dat leesbaar blijft op de donkere vlakken (8,5:1) */
  --ink:#101413;
  --ink-2:#232A26;
  --paper:#F7F7F7;
  --paper-2:#EFEFEF;
  --line:#E3E3E3;
  --white:#fff;
  --muted:#5F5F5F;
  --radius:18px;
  --radius-sm:12px;
  --shadow-sm:0 2px 10px rgba(20,20,20,.06);
  --shadow:0 18px 50px -22px rgba(20,20,20,.35);
  --shadow-lg:0 40px 90px -40px rgba(20,20,20,.55);
  --maxw:1180px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;touch-action:manipulation;-ms-touch-action:manipulation}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:clamp(15.5px,.4vw + 14.5px,17px);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:"Kanit",system-ui,sans-serif;font-weight:700;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.wrap{width:min(100% - 2.4rem,var(--maxw));margin-inline:auto}
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-deep);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--green);border-radius:2px}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green-fill);--fg:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.85rem 1.4rem;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:.96rem;line-height:1;
  background:var(--bg);color:var(--fg);
  box-shadow:0 12px 26px -12px color-mix(in srgb,var(--bg) 75%,#000);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{--bg:var(--green-fill)}
.btn--primary:hover{background:var(--green-deep)}
/* De witte pil. Heette alleen .btn--bel omdat hij als bel-knop begon, maar hij wordt
   inmiddels overal gebruikt waar een gevulde knop wegvalt tegen een groen vlak.
   .btn--wit is dezelfde knop onder een naam die klopt; beide blijven werken. */
.btn--bel,.btn--wit{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);
}
.btn--bel svg,.btn--wit svg{color:var(--green-deep)}
.btn--bel:hover,.btn--wit:hover{background:#000;color:#fff}
.btn--bel:hover svg,.btn--wit:hover svg{color:var(--green-light)}
.btn--ink{--bg:#101413}
/* Witte pil met WhatsApp-groen glyph, zelfde idioom als de oude bel-knop. Groen
   vullen kon niet: dan staan er twee bijna gelijke groenen naast elkaar in de
   topbalk en verdwijnt de hierarchie met "Gratis scan".
   Het glyph-groen is NIET het merk-#25D366: wit daarop haalt 1,98:1 en zakt door
   WCAG. #188841 geeft 4,53:1, ook bij de omgekeerde hover. */
.btn--wa{
  background:#fff;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px rgba(42,22,13,.14),0 12px 26px -16px rgba(20,20,20,.5);
}
/* Groter dan de standaard 18px: het WhatsApp-bolletje vult zijn viewBox niet,
   dus op 18px is het optisch een stipje naast de vette knoptekst. Op 22px weegt
   het even zwaar. De translateY corrigeert de staart linksonder, die het silhouet
   optisch omlaag trekt. */
.btn.btn--wa svg{color:#188841;width:22px;height:22px;transform:translateY(-.5px);
  margin-block:-2px}  /* negatieve marge: het glyph mag 22px zijn zonder de knop hoger
                         te maken dan zijn buren in de topbalk (bleef anders 49 i.p.v. 45) */
.btn--wa{gap:.6rem}
.btn--wa:hover{background:#188841;color:#fff}
.btn.btn--wa:hover svg{color:#fff}
.btn--lg{padding:1.02rem 1.7rem;font-size:1.02rem}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- Topbar ---------- */
.topbar{
  position:fixed;inset:0 0 auto 0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.9rem 0;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),padding .35s var(--ease);
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:min(100% - 2.4rem,var(--maxw))}
.topbar__logo{position:relative;display:flex;align-items:center;gap:.7rem}
/* Twee logovarianten over elkaar: witte versie boven de video, donkere zodra de
   balk vastplakt. Het groene "Green" blijft in beide standen groen. */
.topbar__logo img{height:56px;width:auto;transition:opacity .35s var(--ease),height .35s var(--ease)}
.topbar__logo img+img{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0}
.topbar.is-stuck .topbar__logo img{opacity:0}
.topbar.is-stuck .topbar__logo img+img{opacity:1}
.topbar__actions{display:flex;align-items:center;gap:.7rem}
.topbar__tel{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:#fff;
  padding:.5rem .4rem;font-size:.95rem;white-space:nowrap;transition:color .35s var(--ease)
}
/* Onder 780px wrapt het nummer naast het brede logo; dan liever weg, de
   bel-knop ernaast dekt de belfunctie. */
@media (max-width:779.98px){.topbar__tel{display:none}}
.topbar__tel svg{width:17px;height:17px}
.topbar.is-stuck{background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(12px);box-shadow:var(--shadow-sm);padding:.55rem 0}
.topbar.is-stuck .topbar__logo img,
.topbar.is-stuck .topbar__logo img+img{height:48px}
.topbar.is-stuck .topbar__tel{color:var(--ink)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:min(92vh,860px);display:grid;align-items:end;overflow:hidden;isolation:isolate;
  background:#0C120F url("../video/hero-poster.webp") center/cover no-repeat}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.hero__veil{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 90% at 70% 18%,rgba(20,20,20,0) 30%,rgba(20,20,20,.55) 100%),
    linear-gradient(180deg,rgba(20,20,20,.55) 0%,rgba(20,20,20,.12) 26%,rgba(20,20,20,.22) 58%,rgba(12,12,12,.92) 100%);
}
.hero__grain{position:absolute;inset:0;z-index:-1;opacity:.05;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* Rechterrand van de figuur ligt vast op de rechterrand van de contentkolom (--maxw),
   niet op een percentage van het venster. Excellent gebruikt left:72,5%, maar dat is
   viewport-relatief en dan wandelt de foto zichtbaar mee bij resizen of zoomen.
   Hoogte in px met een procentuele bovengrens die pas ingrijpt op erg lage vensters,
   zodat ook het formaat niet meebeweegt.
   De onderrand duikt bewust achter de offertebalk: .of-wrap schuift
   clamp(56px,7.5vw,104px) omhoog over de hero heen, en 26px daaronder valt de snede weg. */
.hero__person{position:absolute;z-index:0;left:auto;transform:none;
  right:max(0px,calc((100% - var(--maxw)) / 2));
  bottom:calc(clamp(56px,7.5vw,104px) - 26px);height:min(476px,74%);width:auto;
  pointer-events:none;filter:drop-shadow(0 12px 22px rgba(0,0,0,.30))}
/* Witte tegenhanger van .reasons__mark. Op de donkere video mag hij zwakker staan dan de
   rode in de lichte sectie, anders vecht hij met de kop. */
.hero__mark{position:absolute;z-index:-1;pointer-events:none;
  top:clamp(5rem,9vw,8rem);right:clamp(.5rem,2.5vw,2.5rem);
  width:min(360px,28vw);height:auto;opacity:.135}
@media(max-width:860px){.hero__mark{width:min(230px,34vw);opacity:.105}}
@media(max-width:620px){.hero__mark{display:none}}
/* Onder 1240px past de brede kop niet meer naast de figuur: de titel liep door
   de adviseur heen. Figuur naar de rechterrand en kleiner. */
@media(max-width:1240px){
  .hero__person{right:1.2rem;height:min(340px,60%)}
}
/* Onder 1080px overloopt de titel zijn eigen container, dus naast elkaar botsen ze.
   Daarom klapt de hero hier om, hetzelfde patroon als bij Feitsma, SpeedyService en
   Mejan: tekst boven, figuur eronder in de flow, kleiner, en de offertebalk trekt er
   weer overheen zodat de snede onder de heup achter de balk wegvalt. De figuur blijft
   dus staan op mobiel, hij mag nooit verdwijnen.
   De picture-wrapper is het flex-kind, niet de img, vandaar de order op .hero__pic. */
@media(max-width:1080px){
  /* align-items MOET mee terug naar stretch: de basisregel zet hem op end, en in een
     kolom-flexbox is dat de horizontale as, dus dan schrompelt de figuur naar rechts. */
  .hero{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;
    min-height:min(84vh,760px)}
  .hero .wrap{order:1}
  .hero__pic{order:2;display:block}
  .hero__content{padding-block:6.5rem 1.2rem}
  /* 300px is de mobiele maat van SpeedyService en Excellent; boven ~880px venster mag
     hij meegroeien, anders staat hij verloren in een hero die dan nog 1000px breed is. */
  .hero__person{position:static;right:auto;bottom:auto;display:block;
    height:auto;max-height:clamp(300px,34vw,360px);max-width:86%;margin:0 auto}
}
.hero__content{position:relative;z-index:1;padding-block:6rem clamp(9rem,7rem + 18vh,18rem);max-width:48rem;color:#fff}
/* Groter en met schaduw dan elders: hij staat op bewegend videobeeld dat
   plaatselijk licht is, daar valt de standaardmaat van .eyebrow tegen weg. */
.hero .eyebrow{color:var(--green-light);font-size:.98rem;font-weight:800;letter-spacing:.11em;
  text-shadow:0 2px 12px rgba(0,0,0,.55)}
.hero .eyebrow::before{background:var(--green-light);width:32px;height:3px}
@media(max-width:560px){.hero .eyebrow{font-size:.88rem}}
.hero__title{font-size:clamp(2.5rem,6.2vw,4.5rem);text-shadow:0 4px 30px rgba(0,0,0,.35)}
/* nowrap houdt "zonder aanbetaling" op een regel zolang dat past; onder 430px
   is de markering breder dan het scherm en moet hij gewoon meebreken, anders
   knipt overflow:hidden de kern-USP af. De gradient loopt per regelfragment door. */
.hero__title em{font-style:normal;white-space:nowrap;color:#fff;background:linear-gradient(180deg,transparent 62%,rgba(37,149,91,.95) 62%);padding-inline:.06em}
@media(max-width:429.98px){.hero__title em{white-space:normal}}
.hero__sub{margin-top:1.1rem;font-size:clamp(1.05rem,1.4vw,1.28rem);max-width:34rem;color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.4)}

/* reveal */
[data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
[data-reveal].in{opacity:1;transform:none}
/* Groepen komen element voor element binnen in plaats van als een blok. De
   beginstand staat in CSS, niet in JS, anders flitsen ze eerst zichtbaar voorbij
   voordat het script ze verbergt. */
[data-reveal-groep] > *{opacity:0;transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease)}
[data-reveal-groep] > *.in{opacity:1;transform:none}
.hero [data-reveal]{transition-duration:.85s}

/* ---------- Offerte-balk ---------- */
.offerte-overlay{position:relative;margin-top:0;z-index:6;padding:0 clamp(16px,4vw,40px) 60px;background:var(--paper-2);display:flow-root}
.of-wrap{position:relative;max-width:1280px;margin:clamp(-104px,-7.5vw,-56px) auto 0}
.of-box{position:relative;z-index:2;background:var(--green-fill);color:#fff;border-radius:28px;padding:clamp(28px,3.4vw,44px) clamp(28px,4vw,52px);box-shadow:0 24px 60px -10px rgba(23,102,61,.42)}
.of-trust{position:absolute;top:20px;right:24px;z-index:5}

/* ---------- Keurmerken en merkenchips ----------
   Google en de partnerlogo's (DMEGC, Sigenergy, Enphase, SolarEdge, Daikin)
   zijn merken van derden: hun kleuren mogen niet hertint worden. Daarom staan
   ze altijd op een witte chip, los van het groen en bijna-zwart van Solar
   Green. Per logo een eigen hoogte, want ze verschillen sterk in verhouding
   en moeten optisch even zwaar wegen. */
.keurmerken{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* Alle chips exact even groot. De logo's verschillen sterk in verhouding,
   dus schalen ze met object-fit binnen dezelfde doos. De max-height per logo
   is de optische correctie: zonder dat oogt een breed liggend logo veel
   kleiner dan een staand. */
.keurmerk{width:98px;height:60px;padding:9px;flex:none;
  display:grid;place-items:center;background:#fff;border-radius:10px;
  box-shadow:0 4px 14px -4px rgba(0,0,0,.18);
  transition:transform .2s ease,box-shadow .2s ease}
a.keurmerk:hover{transform:translateY(-1px);box-shadow:0 8px 20px -4px rgba(0,0,0,.25)}
.keurmerk img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}
.keurmerk--google img{max-height:23px}
/* Chips met reviewcijfer: logo boven, cijfer eronder; Klantenvertellen heeft een
   vierkant beeldmerk en krijgt het cijfer ernaast. */
.keurmerk--score{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.keurmerk__cijfer{font-weight:800;font-size:1.02rem;line-height:1;color:var(--ink)}
.keurmerk--score.keurmerk--google img{max-height:19px}
@media(max-width:560px){
  .keurmerken{gap:6px}
  .keurmerk{width:78px;height:48px;padding:6px;border-radius:8px}
  .keurmerk--google img{max-height:17px}
  .keurmerk--score.keurmerk--google img{max-height:14px}
  .keurmerk__cijfer{font-size:.88rem}
}
.of-title{font-family:"Kanit",system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.05;font-size:clamp(24px,2.4vw,34px);margin:0 0 6px;color:#fff}
.of-sub{font-family:"Poppins",sans-serif;font-size:14px;color:#fff;margin:0 0 22px}
.of-form{margin:0}
.of-pill{display:grid;grid-template-columns:1.25fr 1px 1.15fr auto;align-items:stretch;gap:0;background:#fff;border-radius:999px;overflow:hidden;padding:8px;box-shadow:0 8px 24px rgba(20,20,20,.18)}
.of-field{display:flex;flex-direction:column;justify-content:center;padding:8px 18px;min-width:0;cursor:text}
.of-field span{font-family:"Poppins",sans-serif;font-size:11px;font-weight:700;color:var(--ink);letter-spacing:.02em;line-height:1;margin:0 0 4px;text-transform:uppercase;opacity:.78}
.of-field input,.of-field select{border:none;outline:none;background:none;font-family:"Poppins",sans-serif;font-size:16px;color:var(--ink);width:100%;padding:0;line-height:1.4;-webkit-appearance:none;appearance:none}
.of-field input::placeholder{color:#9b9b9b}
.of-field select{cursor:pointer;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23101413' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 0 center;padding-right:18px}
.of-field input[type="date"]{font-family:"Poppins",sans-serif;color:var(--ink)}
.of-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(.15);cursor:pointer;opacity:.7}
.of-divider{background:rgba(20,20,20,.12);width:1px;align-self:center;height:38px}
/* outline:none op de pill-velden schakelt ook :focus-visible uit; hier een
   eigen donkere ring, want de globale groene ring valt weg op de witte pill
   en op de groene kaart eromheen. */
.of-field input:focus-visible,.of-field select:focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:6px}
/* Op de groene vlakken haalt de merkgroene focusring geen 3:1; wit wel (5,1:1). */
.of-box :focus-visible,.leadblock__panel :focus-visible{outline-color:#fff}
.of-cta{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:#fff;border:none;border-radius:999px;padding:14px 24px;font-family:"Poppins",sans-serif;font-weight:700;font-size:15px;letter-spacing:.005em;cursor:pointer;transition:background .2s ease,transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 16px -4px rgba(10,15,12,.45);white-space:nowrap}
.of-cta:hover{background:#000;color:var(--green-light);transform:translateY(-1px);box-shadow:0 10px 22px -4px rgba(10,15,12,.6)}
.of-cta svg{width:16px;height:16px}
@media(max-width:880px){.of-trust{position:static;justify-content:flex-start;flex-wrap:wrap;margin-bottom:14px}}
@media(max-width:760px){
  .offerte-overlay{padding-bottom:48px}
  .of-wrap{margin-top:-48px}
  .of-pill{grid-template-columns:1fr;border-radius:18px;padding:8px;gap:6px}
  .of-divider{display:none}
  .of-field{padding:10px 16px;border-bottom:1px solid rgba(20,20,20,.08)}
  .of-cta{justify-content:center;border-radius:14px;padding:14px 20px}
}

/* ---------- Reviews - trust statement + review marquee ---------- */
.rev{position:relative;background:var(--paper);padding-block:clamp(3rem,6vw,5rem);overflow:hidden}
.rev__orb{position:absolute;z-index:0;right:-12%;top:-12%;width:min(620px,60vw);aspect-ratio:1;
  background:radial-gradient(circle,rgba(37,149,91,.16),transparent 62%);pointer-events:none}
.rev__mark{position:absolute;z-index:0;pointer-events:none;right:2%;top:34%;transform:translateY(-50%);
  width:min(300px,26vw);aspect-ratio:1;opacity:.14;
  background:url("../img/mark-solargreen-green.png") center/contain no-repeat}
.rev__top{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.rev__intro .eyebrow{margin-bottom:.8rem}
.rev__title{font-size:clamp(1.9rem,3.8vw,2.9rem)}
.rev__title em{font-style:normal;color:var(--green)}
.rev__lead{margin-top:1rem;color:var(--muted);max-width:44ch}
.rev__src{margin-top:1.4rem;display:flex;flex-wrap:wrap;gap:.7rem}
.rev__score{position:relative;color:#fff;border-radius:24px;padding:clamp(1.8rem,3vw,2.8rem);text-align:center;overflow:hidden;box-shadow:var(--shadow);background:#101413 url("../img/score-bg.webp") center/cover no-repeat}
.rev__score::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,48,29,.42) 0%,rgba(10,42,26,.72) 52%,rgba(7,32,19,.90) 100%)}
.rev__scoreglow{position:absolute;inset:0;background:none;pointer-events:none}
.rev__num{position:relative;font-family:"Kanit",system-ui,sans-serif;font-weight:700;line-height:.88;font-size:clamp(4.4rem,12vw,7.5rem);letter-spacing:-.03em}
.rev__stars{position:relative;color:#FBBC05;font-size:1.55rem;letter-spacing:.14em;margin-top:.25rem}
.rev__count{position:relative;margin-top:.7rem;color:rgba(255,255,255,.8);font-size:1.04rem}
.rev__count strong{color:#fff;font-weight:800}
.rev__grid{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);
  display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.5rem;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:.75rem;margin:0}
.rcard__stars{color:#FBBC05;font-size:.95rem;letter-spacing:.12em}
.rcard blockquote{margin:0;font-size:1.04rem;line-height:1.5;color:var(--ink)}
.rcard figcaption{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:.86rem;color:var(--muted)}
.rcard figcaption b{color:var(--ink);font-weight:700}
.rcard__src{display:inline-flex;align-items:center;gap:.4rem;font-weight:700}
.rcard__src .dot{width:8px;height:8px;border-radius:50%;background:#1F7A3D}
.rev__cta{position:relative;z-index:1;margin-top:clamp(2rem,4vw,3rem);display:flex;justify-content:center}
@media (max-width:860px){.rev__top{grid-template-columns:1fr}.rev__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.rev__grid{grid-template-columns:1fr}}

/* ---------- Story - fotoblokken met tekst ---------- */
.story{padding-block:clamp(2.6rem,6vw,4.5rem);background:var(--paper)}
/* Zelfde regel als bij .reasons__grid: foto even lang als de tekst ernaast. */
.story__row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.8rem,4.5vw,3.8rem);align-items:stretch}
.story__row + .story__row{margin-top:clamp(2.6rem,5vw,4.5rem)}
.story__row:nth-child(even) .story__media{order:2}
.story__media{position:relative;isolation:isolate}
.story__media::before{content:"";position:absolute;inset:0;background:var(--green);
  border-radius:calc(var(--radius) + 12px);transform:rotate(-4deg) translate(-14px,14px);z-index:-1}
.story__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:320px;box-shadow:var(--shadow);transform:rotate(1deg)}
.story__photo img{width:100%;height:100%;object-fit:cover}
.story__body .eyebrow{margin-bottom:.8rem}
.story__body h2{font-size:clamp(1.6rem,3vw,2.3rem);max-width:18ch}
.story__body p{margin-top:1.1rem;color:var(--muted);font-size:1.05rem;line-height:1.65;max-width:46ch}
.story__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:860px){
  .story__row{grid-template-columns:1fr;gap:1.6rem}
  .story__row:nth-child(even) .story__media{order:0}
  .story__media{max-width:32rem}
  /* Gestapeld staat er geen tekstkolom meer naast, dus is er ook geen hoogte om
     over te nemen. Zonder dit klapt height:100% dicht tot de min-height. */
  .story__photo{aspect-ratio:4/3;height:auto;min-height:0}
}

/* ---------- Geen aanbetaling / voorraad ----------
   Rode kaart met tekst links en de foto rechts vol in de kolom. De foto bloedt
   tot aan de kaartrand, vandaar overflow:hidden op de kaart zelf. */
/* padding-bottom is 0: de calculator sluit er direct op aan en levert de
   onderruimte van het geheel. */
.voorraad{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--paper)}
.voorraad__card{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1.18fr .82fr;
  background:var(--green-fill);color:#fff;border-radius:28px 28px 0 0;box-shadow:var(--shadow)}
/* Merkteken als watermerk, net als in de reasons-sectie. */
.voorraad__card::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:36%;top:50%;transform:translateY(-50%);width:min(300px,24%);aspect-ratio:1;opacity:.07;
  background:url("../img/mark-solargreen-white.png") center/contain no-repeat}
.voorraad__body{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.voorraad__body .eyebrow{color:#fff;margin-bottom:.6rem}
.voorraad__body .eyebrow::before{background:rgba(255,255,255,.75)}
.voorraad__body h2{font-size:clamp(1.45rem,2.5vw,1.95rem);max-width:20ch}
.voorraad__body p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:54ch;font-size:.95rem}
.voorraad__media{position:relative;min-height:100%}
.voorraad__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%}
/* Top-zware foto's: bedieningskop van de unit en het gezicht van de monteur zitten
   allebei bovenin en er zit geen ruimte boven zijn hoofd. Op mobiel is dit blok een
   band van 260px, en dan snijdt 35% net door zijn haar. Bovenlangs uitsnijden dus;
   op desktop verandert er niets, daar loopt de foto over de breedte over. */
.voorraad__media img.is-topzwaar{object-position:center top}
@media (max-width:860px){
  .voorraad__card{grid-template-columns:1fr}
  .voorraad__card::before{right:6%;top:auto;bottom:34%;transform:none;width:min(200px,38%)}
  .voorraad__media{min-height:260px;order:-1}
  .voorraad__media img{position:static;height:260px}
}

/* ---------- Zonnepanelen-calculator ----------
   Zit met margin-top:0 en vierkante bovenhoeken tegen .voorraad__card aan, samen
   vormen ze een blok. Alleen de buitenhoeken zijn rond. */
.calc{padding:0 0 clamp(2.6rem,5vw,4.2rem);background:var(--paper)}
.calc__card{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.6rem);
  display:grid;grid-template-columns:1fr auto;gap:clamp(1.2rem,2.6vw,2.4rem);
  align-items:start;column-gap:clamp(1.4rem,3vw,3rem)}
.calc__intro{grid-column:1}
.calc__intro h3{font-size:clamp(1.1rem,1.7vw,1.35rem)}
.calc__intro p{margin-top:.35rem;color:var(--muted);font-size:.92rem;max-width:56ch}
.calc__velden{grid-column:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}
.calc__veld{display:flex;flex-direction:column;gap:.25rem;position:relative}
.calc__veld>span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.calc__veld input,.calc__veld select{
  font-family:inherit;font-size:1rem;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:12px;padding:.6rem .7rem;width:100%;
  background:var(--paper);-webkit-appearance:none;appearance:none}
.calc__veld input:focus,.calc__veld select:focus{outline:2px solid var(--green);outline-offset:1px}
.calc__veld i{position:absolute;right:.7rem;bottom:.72rem;font-style:normal;font-size:.82rem;color:var(--muted);pointer-events:none}
.calc__veld--sel{position:relative}
.calc__veld--sel select{padding-right:2rem}
.calc__veld--sel::after{content:"";position:absolute;right:.95rem;bottom:1.05rem;width:7px;height:7px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.calc__extras{grid-column:1;border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.calc__extras legend{float:left;width:100%;font-size:.7rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.45rem}
.calc__extras label{display:inline-flex;align-items:center;gap:.45rem;cursor:pointer;
  border:1px solid var(--line);border-radius:999px;padding:.42rem .8rem;font-size:.88rem;font-weight:700;
  transition:border-color .2s ease,background .2s ease}
.calc__extras label:has(input:checked){border-color:var(--green);background:var(--green-soft);color:var(--green-deep)}
.calc__extras input{accent-color:var(--green-fill);width:15px;height:15px;margin:0}
/* Uitkomstpaneel rechts, over alle rijen heen. */
.calc__uit{grid-column:2;grid-row:1 / span 3;align-self:stretch;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.15rem;
  background:var(--ink);color:#fff;border-radius:18px;padding:clamp(1.1rem,2vw,1.6rem);min-width:15rem}
.calc__label{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.calc__getal{font-family:"Kanit",system-ui,sans-serif;font-weight:700;font-size:clamp(2.2rem,4vw,3rem);line-height:1}
.calc__bereik{font-size:.9rem;color:rgba(255,255,255,.75)}
.calc__detail{font-size:.82rem;color:rgba(255,255,255,.6);margin-top:.35rem;max-width:22ch}
.calc__uit .btn{margin-top:.9rem;width:100%}
/* Tweede route naast de offerteknop, bewust een link en geen tweede knop:
   in dit smalle paneel gaan twee knoppen boven elkaar overheersen. */
.calc__bel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.3rem;
  padding-block:.3rem;
  font-size:.82rem;font-weight:700;color:rgba(255,255,255,.72);text-decoration:underline;
  text-underline-offset:3px}
.calc__bel:hover{color:#fff}
.calc__bel svg{width:15px;height:15px;flex:none}
@media (max-width:860px){
  .calc__card{grid-template-columns:1fr}
  .calc__uit{grid-column:1;grid-row:auto;min-width:0}
  .calc__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){.calc__velden{grid-template-columns:1fr}}

/* ---------- 50-GRADENCHECK ----------
   Zelfde plek en dezelfde kaart als de panelencalculator hiernaast, maar de
   uitkomst kan hier niet in een smalle rechterkolom staan. De panelenversie
   toonde een getal van twee woorden; deze geeft een advies van vier tot zes
   zinnen, inclusief kanttekeningen over de VvE en de plek van de buitenunit.
   Daarom liggen de velden boven en gaat de uitkomst over de volle breedte, met
   het advies links en de uitleg rechts. Op mobiel valt dat vanzelf onder elkaar.

   De knop staat TUSSEN het getal en de uitleg en niet eronder: op een telefoon
   zakt hij anders onder vijf zinnen weg en ziet niemand hem meer. */
.wpc__card{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
  padding:clamp(1.2rem,2.6vw,1.9rem) clamp(1.1rem,3vw,2.2rem) clamp(1.4rem,3vw,2rem);
  display:grid;gap:clamp(.9rem,2vw,1.3rem)}
.wpc__intro h3{font-size:clamp(1.1rem,1.7vw,1.35rem);margin:0}
.wpc__intro p{margin:.35rem 0 0;color:var(--muted);font-size:.92rem;max-width:62ch}
.wpc__velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem .8rem}
.wpc__veld{display:flex;flex-direction:column;gap:.25rem;position:relative;min-width:0}
.wpc__veld>span{font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Pijltje als achtergrond OP de select en niet als ::after op de wrapper: twee
   van de vijf velden hebben een hintregel eronder, en een pseudo-element dat op
   de wrapper staat zakt dan onder het veld uit. */
.wpc__veld select{
  appearance:none;-webkit-appearance:none;width:100%;min-width:0;
  padding:.72rem 2.1rem .72rem .8rem;border:1px solid var(--line);border-radius:12px;
  font:inherit;font-size:.94rem;color:var(--ink);cursor:pointer;
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235F5F5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .85rem center;background-size:11px 7px}
.wpc__veld select:focus{outline:2px solid var(--green);outline-offset:1px}
/* Hint onder de select en niet in het label: een dichtgeklapte select kapt een
   lang label af, en juist bij deze twee velden zit de uitleg die het veld
   invulbaar maakt. */
.wpc__hint{margin:.3rem 0 0;font-size:.76rem;line-height:1.4;color:var(--muted)}
.wpc__uit{background:var(--ink);color:#fff;border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.5rem) clamp(1.1rem,2.6vw,1.6rem);
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(.9rem,2.4vw,1.8rem);align-items:start}
.wpc__kop{display:block;font-family:"Kanit",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.9vw,1.28rem);line-height:1.25;color:var(--green-light)}
.wpc__getal{display:block;margin-top:.5rem;font-family:"Kanit",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.35rem,2.6vw,1.85rem);line-height:1.15}
.wpc__sub{display:block;margin-top:.2rem;font-size:.87rem;color:rgba(255,255,255,.75)}
/* Deze knop is volle breedte in een smalle kolom en heeft een lang label. De
   globale .btn staat op white-space:nowrap, dus zonder deze uitzondering loopt
   de tekst op een telefoon buiten de pil. Alleen hier omkeren, met een ruimere
   regelafstand omdat .btn op line-height:1 staat. */
.wpc__uit .btn{margin-top:.9rem;width:100%;white-space:normal;line-height:1.3;text-align:center}
.wpc__detail{margin:0;font-size:.85rem;line-height:1.6;color:rgba(255,255,255,.72)}
.wpc__bel{display:inline-flex;align-items:center;gap:.45rem;margin-top:.6rem;
  color:rgba(255,255,255,.72);font-size:.82rem;font-weight:600;text-decoration:none}
.wpc__bel:hover{color:#fff}
.wpc__bel svg{width:15px;height:15px;flex:none}
.wpc__bron{margin:0;font-size:.76rem;line-height:1.5;color:var(--muted)}
/* Zonder gasaansluiting valt er niets te rekenen. Dan verdwijnt de lege
   getalregel en wordt bellen de eerste actie in plaats van de derde. */
.wpc__card.is-bel .wpc__getal,
.wpc__card.is-bel .wpc__sub{display:none}
.wpc__card.is-bel .wpc__uit .btn{margin-top:.6rem}
@media (max-width:860px){
  .wpc__uit{grid-template-columns:minmax(0,1fr)}
  .wpc__velden{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){.wpc__velden{grid-template-columns:1fr}}

/* ---------- Waarom - split (grote aerial + oranje uitgeknipte iconen) ---------- */
.waarom{background:#101413;color:#fff;padding-block:clamp(3rem,6vw,5rem)}
.waarom__grid{display:grid;grid-template-columns:1.32fr .8fr;gap:clamp(1.4rem,3vw,3rem);align-items:stretch}
.waarom__photo{position:relative;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.7);min-height:clamp(380px,42vw,580px)}
.waarom__photo img{width:100%;height:100%;object-fit:cover;object-position:22% center;display:block}
.waarom__head .eyebrow{color:#7FD6A4}
.waarom__head .eyebrow::before{background:#7FD6A4}
.waarom__head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin-top:.6rem}
.waarom__list{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1.4rem}
/* Bel-knop hier als witte pill (.btn--bel): .btn--ink is #101413 en dat is
   precies de achtergrond van deze sectie, dus die zou onzichtbaar worden. */
.waarom__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
/* Beide knoppen even groot, ook wanneer ze onder elkaar wrappen. */
.waarom__cta .btn{flex:1 1 0;min-width:max-content}
.wmini{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem;transition:transform .3s var(--ease),background .3s,border-color .3s}
.wmini:hover{transform:translateY(-3px);background:rgba(255,255,255,.08);border-color:rgba(127,214,164,.4)}
.wmini h3{font-family:"Kanit",system-ui,sans-serif;font-size:1.05rem;margin:0 0 .25rem;display:flex;align-items:center;gap:.55rem}
.wmini h3 img{width:30px;height:30px;flex:none}
.wmini p{color:rgba(255,255,255,.7);font-size:.9rem;margin:0}
@media(max-width:880px){.waarom__grid{grid-template-columns:1fr}}
@media(max-width:560px){.waarom__list{grid-template-columns:1fr}}

/* ---------- Ons paneel - doorsnede plus specblad ----------
   Groene kopbalk met dakfoto rechts (zelfde patroon als .voorraad__card),
   daaronder vastgeplakt de witte kaart met links de doorsnede en rechts de
   specs. De doorsnede is met CSS-lagen getekend, geen plaatje: schaalt mee en
   kan niet verouderen. Het merkvlak is wit omdat het DMEGC-logo rood op
   donkerblauw is en dat op het merkgroen vloekt. */
.paneel{padding:clamp(2.6rem,5vw,4.2rem) 0 0;background:var(--paper)}
.paneel__kop{position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:1.18fr .82fr;
  background:var(--green-fill);color:#fff;border-radius:28px 28px 0 0;box-shadow:var(--shadow)}
.paneel__kop::before{content:"";position:absolute;z-index:0;pointer-events:none;
  right:36%;top:50%;transform:translateY(-50%);width:min(300px,24%);aspect-ratio:1;opacity:.07;
  background:url("../img/mark-solargreen-white.png") center/contain no-repeat}
.paneel__kopt{position:relative;z-index:1;padding:clamp(1.6rem,2.8vw,2.4rem) clamp(1.6rem,3vw,2.6rem)}
.paneel__kopt .eyebrow{color:#fff;margin-bottom:.6rem}
.paneel__kopt .eyebrow::before{background:rgba(255,255,255,.75)}
.paneel__kopt h2{font-size:clamp(1.45rem,2.5vw,1.95rem);max-width:22ch}
.paneel__kopt p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:54ch;font-size:.95rem}
.paneel__media{position:relative;min-height:100%}
.paneel__media>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
/* Merkbadge op de foto, zelfde plek en gedrag als .reasons__badge. */
.paneel__badge{position:absolute;right:16px;bottom:16px;z-index:1;
  background:#fff;border-radius:14px;padding:.7rem 1rem;box-shadow:var(--shadow-sm);
  display:grid;justify-items:center;gap:.1rem;text-align:center}
.paneel__badge>img{height:22px;width:auto;object-fit:contain;margin-bottom:.35rem}
.paneel__badge b{font-family:"Kanit",system-ui,sans-serif;font-size:1.45rem;line-height:1;color:var(--green-deep)}
.paneel__badge b i{font-style:normal;font-size:.45em;margin-left:.1em}
.paneel__badge>span{font-size:.64rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* Links de doorsnede, rechts het specblad in twee smalle kolommen. De
   verhouding is bewust scheef: de tekening heeft weinig breedte nodig, de
   speclijst juist veel, anders vallen waarden als "1762 x 1134 mm" over twee
   regels. Het blok is expres kort gehouden. */
.paneel__body{background:#fff;border-radius:0 0 28px 28px;box-shadow:var(--shadow);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.6rem,3vw,2.6rem) clamp(1.6rem,3vw,2.4rem);
  display:grid;grid-template-columns:.78fr 1.22fr;gap:clamp(1.4rem,3.4vw,3rem);align-items:start}
.paneel__kolomkop{font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .9rem}
/* Doorsnede: gestapelde lagen in een zwart "frame". */
.paneel__stack{display:grid;gap:6px;border:3px solid #1a1a1a;border-radius:10px;padding:7px;background:#1a1a1a}
.paneel__laag{position:relative;min-width:0;overflow:hidden;border-radius:4px;
  display:flex;align-items:center;padding:0 .8rem;font-size:.76rem;font-weight:700}
.paneel__laag--glas{height:34px;background:linear-gradient(100deg,#dbeaf3 0%,#f4fafd 42%,#cfe3ee 100%);color:#33556a}
.paneel__laag--eva{height:16px;background:#f2f2ef;color:#8a8a82;font-size:.68rem;font-weight:600}
.paneel__laag--cel{height:56px;background:linear-gradient(135deg,#14181c 0%,#232a31 50%,#14181c 100%);color:#cfe3ee}
.paneel__laag--cel::after{content:"";position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent 0 26px,rgba(255,255,255,.07) 26px 27px)}
.paneel__lmaat{margin-left:auto;padding-left:.6rem;font-weight:800;opacity:.75}
.paneel__frame{margin-top:.55rem;font-size:.74rem;color:var(--muted);text-align:center}
/* min-width:0 op dt en dd: zonder dat houdt flex de regels op hun
   min-content-breedte en wordt de kaart op smal scherm breder dan het scherm. */
.paneel__specs{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(1rem,2.4vw,2rem)}
.paneel__specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  padding:.58rem .15rem;border-bottom:1px solid var(--line);font-size:.87rem}
.paneel__specs dt{color:var(--muted);min-width:0}
.paneel__specs dd{margin:0;font-weight:800;text-align:right;min-width:0}
.paneel__voet{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:1rem;
  margin-top:.6rem;padding-top:1.1rem;border-top:1px solid var(--line)}
.paneel__bron{flex:1 1 22rem;color:var(--muted);font-size:.82rem;line-height:1.5;margin:0}
.paneel__voet .btn{flex:none}
@media (max-width:900px){
  .paneel__kop{grid-template-columns:1fr}
  .paneel__kop::before{right:6%;top:auto;bottom:34%;transform:none;width:min(200px,38%)}
  .paneel__media{order:-1;min-height:260px}
  .paneel__media>img{position:static;height:260px}
  .paneel__body{grid-template-columns:minmax(0,1fr)}
  /* Eén kolom, maar label en waarde blijven naast elkaar: de waarden zijn kort
     genoeg en label-boven-waarde maakte het blok op mobiel ruim 300px langer. */
  .paneel__specs{grid-template-columns:minmax(0,1fr)}
  .paneel__laag{font-size:.7rem;padding:0 .55rem}
}

/* ---------- ONZE WARMTEPOMPEN ----------
   Waar de zonnepanelenpagina één paneel toont met een doorsnede ernaast, staan
   hier vier producten. Ze vallen uiteen in twee groepen die de bezoeker eerst
   moet kiezen (hybride naast de ketel, of volledig elektrisch), en pas daarna in
   twee merken. Die volgorde zit in de opmaak: eerst een groepskop over de volle
   breedte, daaronder de twee merken naast elkaar.

   De vier productrenders zijn vrijstaande PNG's van de fabrikanten zelf, dus met
   alpha. Ze zijn allemaal donker (Quatt antraciet met koper, DeWarmte zwart met
   brons), daarom staat er een lichte mintvlak achter in plaats van wit: op wit
   valt een zwarte unit uit elkaar, op mint blijft hij één vorm. */
.wpomp__body{grid-template-columns:minmax(0,1fr);gap:clamp(1.6rem,3vw,2.4rem)}
.wpomp__groep{display:grid;gap:.9rem}
.wpomp__groepkop{display:flex;flex-wrap:wrap;align-items:baseline;gap:.55rem;margin:0}
.wpomp__groepkop b{font-family:"Kanit",system-ui,sans-serif;font-weight:600;
  font-size:clamp(1.05rem,1.8vw,1.3rem);color:var(--ink)}
.wpomp__groepkop span{color:var(--muted);font-size:.86rem}
.wpomp__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.2rem)}
.wpomp{display:flex;flex-direction:column;min-width:0;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.wpomp__beeld{position:relative;aspect-ratio:16/10;display:grid;place-items:center;padding:.9rem;
  background:radial-gradient(120% 100% at 50% 12%,#F2FBF6 0%,var(--green-soft) 100%)}
/* Absoluut, want in de flow bepaalt de intrinsieke maat van de render de rijhoogte en
   doet de aspect-ratio hierboven niets: max-height:100% is dan circulair. De staande
   beelden (678x678, 770x878) duwden de kaart zo 200 px open.
   inset:0 + margin:auto centreert; de max-maten geven elke render dezelfde lucht,
   of hij nu liggend (526x331) of vierkant (678x678) is. Vul je de box wel helemaal,
   dan staat het product juist groter en benauwder dan voor het inkorten. */
.wpomp__beeld img{position:absolute;inset:0;margin:auto;width:auto;height:auto;
  max-width:80%;max-height:74%;object-fit:contain}
/* Woordmerk op de kaart, niet op de foto: de renders hebben het merk er al op
   staan, maar te klein om op kaartformaat te lezen. */
/* z-index moet, anders schildert het absoluut geplaatste beeld hierboven over de
   badge heen: het staat later in de DOM en beide zijn positioned. */
.wpomp__merk{position:absolute;left:12px;top:12px;z-index:1;
  background:#fff;border-radius:9px;padding:.3rem .55rem;box-shadow:var(--shadow-sm);
  font-family:"Kanit",system-ui,sans-serif;font-weight:600;font-size:.76rem;color:var(--ink);line-height:1}
.wpomp__in{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:clamp(.9rem,2vw,1.2rem)}
.wpomp__in h3{margin:0;font-size:1.02rem;line-height:1.3}
.wpomp__in>p{margin:0;color:var(--muted);font-size:.87rem;line-height:1.55}
.wpomp__specs{margin:.15rem 0 0;display:grid}
.wpomp__specs>div{display:flex;justify-content:space-between;align-items:baseline;gap:.7rem;
  padding:.44rem .1rem;border-bottom:1px solid var(--line);font-size:.83rem}
.wpomp__specs>div:last-child{border-bottom:0}
.wpomp__specs dt{color:var(--muted);min-width:0}
.wpomp__specs dd{margin:0;font-weight:800;text-align:right;min-width:0}
/* Blijft onderaan hangen, ook als de ene kaart een specregel minder heeft dan
   de andere. Zonder de auto-marge staan de twee zinnen op verschillende hoogte. */
.wpomp__voor{display:flex;align-items:flex-start;gap:.45rem;margin:auto 0 0;padding-top:.7rem;
  color:var(--green-deep);font-size:.83rem;font-weight:600;line-height:1.45}
.wpomp__voor svg{width:16px;height:16px;flex:none;margin-top:.14rem}
@media (max-width:760px){
  .wpomp__grid{grid-template-columns:minmax(0,1fr)}
}
/* ---------- SigenStor-stapel (alleen thuisbatterij.html) ----------
   Zelfde tekentruc als de paneeldoorsnede hierboven, maar nu staand opgebouwd
   zoals het apparaat zelf: de Energy Controller bovenop, de accumodules eronder.
   De onderste laag is gestippeld en dat is geen versiering: dat is de ruimte die
   vrij blijft voor de modules die er later bij kunnen. Daarmee vertelt de
   tekening het verhaal dat het tekstblok ernaast ook vertelt. */
/* Op de zonnepanelenlander staat hier een dronefoto en die mag links uitgelijnd
   staan (object-position 22%). Op de batterijpagina staan de monteur en de
   omvormer naast elkaar in het kader; met 22% schuift het venster naar links en
   valt de omvormer er rechts af. Vandaar deze modifier, alleen daar. */
.waarom__photo--bat img{object-position:center}
.paneel__stack--accu{border-color:#C7CFCB;background:#C7CFCB;gap:5px}
.paneel__laag--ec{height:46px;color:#DFE9EE;
  background:linear-gradient(135deg,#1E242A 0%,#333C44 55%,#1E242A 100%)}
.paneel__laag--mod{height:38px;color:#4A534F;border-left:3px solid #86D2C9;
  background:linear-gradient(180deg,#FDFDFD 0%,#EFF2F1 100%)}
.paneel__laag--bij{height:32px;background:transparent;border:1px dashed #909D98;
  color:#69756F;font-weight:600;font-size:.68rem;justify-content:center}
/* ---------- FAQ ---------- */
/* Lichtere band tussen story en lead-blok, zodat de FAQ optisch losstaat van het
   formulier eronder. Werkt op native <details>, dus zonder JavaScript. */
.faq{padding-block:clamp(3rem,6vw,5rem);background:var(--paper-2)}
.faq__head{max-width:42rem;margin:0 0 clamp(1.5rem,3vw,2.2rem)}
.faq__head .eyebrow{margin-bottom:.7rem}
.faq__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.faq__list{display:grid;gap:.7rem}
.faq__item{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.faq__item:hover{box-shadow:var(--shadow)}
.faq__item[open]{border-color:var(--green)}
.faq__item summary{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:clamp(1rem,1.8vw,1.25rem) clamp(1.1rem,2.2vw,1.55rem);
  cursor:pointer;list-style:none;
  font-family:"Kanit",system-ui,sans-serif;font-weight:700;
  font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.3;
  transition:color .2s var(--ease);
}
/* Safari toont anders nog een eigen driehoekje naast onze plus. */
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary:hover{color:var(--green-deep)}
.faq__item summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px;border-radius:var(--radius)}
/* Plus die een min wordt: het verticale streepje klapt weg bij open. */
.faq__sign{
  position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;
  background:var(--green-soft);transition:background .25s var(--ease);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--green-deep);border-radius:2px;
}
.faq__sign::before{width:13px;height:2px;transform:translate(-50%,-50%)}
.faq__sign::after{width:2px;height:13px;transform:translate(-50%,-50%);transition:transform .25s var(--ease)}
.faq__item[open] .faq__sign{background:var(--green-fill)}
.faq__item[open] .faq__sign::before,
.faq__item[open] .faq__sign::after{background:#fff}
.faq__item[open] .faq__sign::after{transform:translate(-50%,-50%) scaleY(0)}
.faq__answer{
  padding:0 clamp(1.1rem,2.2vw,1.55rem) clamp(1.1rem,2vw,1.35rem);
  max-width:52rem;color:var(--muted);
}
.faq__answer p+p{margin-top:.7rem}
.faq__answer a{color:var(--green-deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
@media(max-width:620px){
  .faq__item summary{font-size:1rem;gap:.7rem}
  .faq__sign{width:24px;height:24px}
}

/* ---------- Lead-blok: foto + offerteformulier (liggend) ---------- */
.leadblock{padding-block:clamp(3rem,6vw,5rem)}
.leadblock__card{position:relative;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  border-radius:28px;overflow:hidden;box-shadow:var(--shadow);background:#101413}
/* De medewerkster is uitgesneden (transparante webp), dus haar hoogte en positie zijn
   nu vrij te kiezen. Ze hing te laag omdat de oude foto de achtergrond ingebakken had
   en het lege verloop bovenin gewoon meeschaalde. Nu staat ze op de bodem verankerd
   en bepaalt --persoon-h hoe groot ze in het vlak staat. */
/* Achter haar het eigen dronebeeld van een wijk met panelen, met een groene sluier
   eroverheen zodat het merk blijft kloppen en zij er los van blijft staan. Daarvoor
   zat hier een vlak verloop, en dat oogde leeg. */
.leadblock__media{position:relative;min-height:480px;overflow:hidden;
  background:linear-gradient(180deg,rgba(12,40,26,.55),rgba(12,40,26,.9)),
             url("../img/voorraad-dak.webp") center/cover no-repeat}
/* Schalen op de BREEDTE van de kolom, niet op de hoogte van de kaart: het formulier
   ernaast bepaalt die hoogte, en bij een lang formulier liep ze anders links en rechts
   buiten beeld. max-height vangt het omgekeerde geval (korte, brede kolom op mobiel). */
.leadblock__persoon{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;height:auto;max-width:100%;max-height:100%;
  object-fit:contain;object-position:bottom center;z-index:2}
.leadblock__chips{position:absolute;inset:auto auto 0 0;z-index:3;width:100%;
  display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;
  padding:clamp(1rem,2vw,1.4rem)}
.lbchip{display:flex;flex-direction:column;line-height:1.25;
  background:rgba(255,255,255,.94);color:var(--ink);border-radius:14px;
  padding:.5rem .8rem;font-size:.76rem;box-shadow:0 10px 24px -14px rgba(0,0,0,.6);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.lbchip b{font-size:.98rem;font-weight:800;color:var(--green-deep)}

.leadblock__panel{position:relative;color:#fff;padding:clamp(1.8rem,3.4vw,3rem);
  background:linear-gradient(140deg,#27A063 0%,#1D7E4A 55%,#17663D 100%)}
.leadblock__panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 80% at 95% 0%,rgba(255,255,255,.16),transparent 55%)}
.leadblock__panel>*{position:relative}
.leadblock__panel .eyebrow{color:#fff}
.leadblock__panel .eyebrow::before{background:rgba(255,255,255,.75)}
.leadblock__panel h2{font-size:clamp(1.7rem,3vw,2.4rem);margin-top:.55rem}
.leadblock__panel .lead-p{margin-top:.7rem;color:rgba(255,255,255,.92);max-width:46ch}
.lead-google{display:inline-flex;align-items:center;gap:8px;margin-top:1.1rem;background:#fff;color:var(--ink);border-radius:999px;padding:8px 14px;font-family:"Poppins",sans-serif;font-size:13px;font-weight:600;box-shadow:0 6px 16px -6px rgba(0,0,0,.3)}
.lead-google__logo{height:14px;width:auto;flex-shrink:0}
.lead-google__stars{color:#FBBC05;letter-spacing:.05em;font-size:12px;line-height:1}
.lead-google strong{font-weight:800}
.lead-google__cnt{color:var(--muted);font-weight:600}
.lf{margin-top:1.4rem;display:flex;flex-direction:column;gap:.8rem}
/* align-items:start, anders rekken de kolommen mee met de hoogste. Het datumveld
   werd hoger door het vinkje eronder, waardoor de pijl van "Type woning" (die aan
   de onderkant hangt) los onder het invulveld kwam te zweven. */
.lf__row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;align-items:start}
.lf__field{display:flex;flex-direction:column;gap:.32rem;min-width:0}
.lf__field>span{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.92)}
.lf__field input:not([type=checkbox]),.lf__field select{border:0;border-radius:12px;background:#fff;color:var(--ink);
  font-family:inherit;font-size:1rem;font-weight:600;padding:.72rem .85rem;width:100%;-webkit-appearance:none;appearance:none}
.lf__field input:not([type=checkbox])::placeholder{color:#9b9b9b;font-weight:500}
.lf__field--sel{position:relative}
.lf__field--sel::after{content:"";position:absolute;right:.9rem;bottom:1rem;width:8px;height:8px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
.lf__actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:.45rem}
.leadblock .btn--ink{--bg:#101413}
@media(max-width:820px){
  .leadblock__card{grid-template-columns:1fr}
  /* Geen 16/10: dat is te laag voor een staand persoon, zij werd op borsthoogte
     afgesneden en de drie chips vielen over haar heen. Een hogere strook plus de
     chips naast elkaar in plaats van gestapeld. */
  .leadblock__media{min-height:clamp(300px,74vw,380px);aspect-ratio:auto}
  .leadblock__chips{flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:.4rem}
  .lbchip{font-size:.7rem;padding:.4rem .6rem;border-radius:12px}
  .lbchip b{font-size:.86rem}
  .lbchip--wijd{flex-basis:100%}
}
@media(max-width:460px){
  .lf__row{grid-template-columns:1fr}
}

/* ---------- Footer (archieffilm + donkere overlay) ----------
   De poster is de vaste ondergrond: staat er meteen, en blijft staan als de
   video niet laadt, op mobiel, of bij reduced-motion. De donkere laag zit in
   .foot__veil in plaats van in de achtergrond van .foot zelf, want die zou
   onder de video vallen in plaats van erover. */
.foot{position:relative;color:#fff;overflow:hidden;isolation:isolate;
  padding-block:clamp(3rem,6vw,5rem) 0;
  background:#0C120F url("../img/foot-bg.webp") center 40%/cover no-repeat}
.foot__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 40%;z-index:-3;opacity:0;transition:opacity .9s ease}
.foot__video.is-playing{opacity:1}
.foot__veil{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(30,30,30,.86) 0%,rgba(18,18,18,.93) 100%)}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 60% at 12% 0%,rgba(37,149,91,.24),transparent 58%)}
.foot__top{display:grid;grid-template-columns:1.7fr 1fr 1.35fr;gap:clamp(1.6rem,3.4vw,3rem)}
.foot__logo{width:clamp(180px,16vw,224px);height:auto}
.foot__tag{margin-top:1.1rem;color:rgba(255,255,255,.78);font-size:.97rem;line-height:1.6;max-width:42ch}
.foot__trust{margin-top:1.4rem}
.foot__col{display:flex;flex-direction:column;align-items:flex-start;gap:.7rem}
.foot__col h3{font-family:"Kanit",system-ui,sans-serif;font-weight:700;font-size:1.06rem;margin-bottom:.9rem;color:#fff}
.foot__col a{color:rgba(255,255,255,.76);font-size:.96rem;display:inline-flex;align-items:center;gap:.55rem;
  transition:color .2s var(--ease),transform .2s var(--ease)}
.foot__col a:not(.foot__cta):hover{color:var(--green);transform:translateX(3px)}
.foot__col a svg{width:16px;height:16px;flex:none;color:var(--green)}
.foot__cta{margin-bottom:.5rem;background:var(--green);color:#fff;border-radius:999px;padding:.72rem 1.15rem;font-weight:700;
  box-shadow:0 14px 30px -14px rgba(37,149,91,.9);transition:background .2s,transform .2s var(--ease)}
.foot__cta svg{color:#fff}
.foot__cta:hover{background:var(--green-deep);transform:translateY(-2px)}
.foot__area{color:rgba(255,255,255,.58);font-size:.9rem;margin-top:.2rem}
.foot__bottom{margin-top:clamp(2rem,4vw,3.2rem);border-top:1px solid rgba(255,255,255,.14);padding-block:1.4rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.8rem}
.foot__bottom small{color:rgba(255,255,255,.6)}
.foot__legal{display:flex;gap:1.3rem}
.foot__legal a{color:rgba(255,255,255,.6);font-size:.88rem;transition:color .2s var(--ease)}
.foot__legal a:hover{color:var(--green)}
@media (max-width:860px){
  .foot__top{grid-template-columns:1fr 1fr}
  .foot__brand{grid-column:1 / -1}
}
@media (max-width:560px){
  .foot__top{grid-template-columns:1fr}
  .foot__bottom{flex-direction:column;align-items:flex-start}
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
}
@media (max-width:620px){
  /* Alleen de bel-knop wordt icoon-only; "Gratis scan" blijft leesbaar. */
  .topbar .btn--bel span.lbl{display:none}
  .topbar .btn{padding:.7rem .85rem}
  /* Het logo is een brede lockup: op smalle schermen terugbrengen, anders
     duwt het de app- en offerteknop van het scherm af. */
  .topbar__logo img,
  .topbar__logo img+img,
  .topbar.is-stuck .topbar__logo img,
  .topbar.is-stuck .topbar__logo img+img{height:38px}
  /* Liggende video in een staande hero wordt anders een uitvergrote sliver. */
  .hero{min-height:min(76vh,600px)}
  .hero__content{padding-block:6rem 5.5rem}
}
@media (prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
}
/* Bij afdrukken staat er geen scroll, dus alles gewoon tonen. */
@media print{
  [data-reveal],[data-reveal-groep] > *{opacity:1;transform:none;transition:none}
  .hero__video{display:none}
}

/* ---------- Wat we doen - 4 blokken ---------- */
.services{padding-block:clamp(3.4rem,7vw,5.5rem)}
.services__head{max-width:42rem;margin:0 0 2.2rem}
.services__head .eyebrow{margin-bottom:.7rem}
.services__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.services__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.svc{border-radius:var(--radius);padding:1.7rem 1.5rem;color:#fff;display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.svc--ink{background:var(--ink)}
.svc--green{background:var(--green-fill)}
.svc__ic{width:46px;height:46px;margin-bottom:1.1rem}
.svc__ic svg{width:100%;height:100%}
.svc--ink .svc__ic{color:var(--green-light)}
.svc--green .svc__ic{color:#fff}
.svc h3{font-size:1.22rem;margin-bottom:.5rem}
.svc p{font-size:.95rem;line-height:1.55}
.svc--ink p{color:rgba(255,255,255,.74)}
.svc--green p{color:rgba(255,255,255,.92)}

/* ---------- Werkwijze - 4 stappen ---------- */
/* Volle-breedte merkgroene band, tegenhanger van de zwarte .waarom-band. De
   sectie is block-level, dus de achtergrond loopt vanzelf van rand tot rand.
   --green-fill en niet --green: dat is per brandbook de variant die witte tekst
   mag dragen (wit haalt hier 5,08:1, het merkgroen zelf maar 3,8:1). */
.werkwijze{padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--green-fill);color:#fff}
.werkwijze .eyebrow{color:#fff}
.werkwijze .eyebrow::before{background:#fff}
.werkwijze__head h2{color:#fff}
/* Het accent kan hier geen groen zijn, dat verdwijnt in de ondergrond
   (--green-light haalt maar 2,92:1). Bleek mint houdt 4,30:1 en dat volstaat
   voor deze kopgrootte, die ruim boven de grens voor grote tekst zit. */
.werkwijze__head h2 em{font-style:normal;color:#D6F3E3}
.werkwijze__head{max-width:42rem;margin:0 0 2.2rem}
.werkwijze__head .eyebrow{margin-bottom:.7rem}
.werkwijze__head h2{font-size:clamp(1.9rem,3.6vw,2.8rem)}
.werkwijze__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
/* Knoppen onder de kaarten, gecentreerd zoals in de werkwijze-sectie op
   solargreen.nl. --primary kan hier niet: dat is dezelfde groentint als de band
   en zou erin wegvallen. Vandaar --ink (sluit aan op de kaarten) naast de
   bestaande witte bel-knop. */
.werkwijze__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:.8rem;
  margin-top:clamp(1.6rem,3vw,2.3rem)}

/* Knoprijen in de blokken die er nog geen hadden. Zelfde idioom als
   .waarom__cta: links uitgelijnd op de tekstkolom, wrappend op smal. */
.hero__cta,.services__cta,.voorraad__cta,.faq__cta-knoppen{
  display:flex;flex-wrap:wrap;gap:.8rem}
.hero__cta{margin-top:clamp(1.2rem,2.4vw,1.8rem)}
.services__cta{margin-top:clamp(1.6rem,3vw,2.2rem);justify-content:center}
.voorraad__cta{margin-top:1.3rem}
/* De hero-knoppen staan op de video: wit en WhatsApp-groen houden daar hun
   contrast, de donkere --ink zou wegvallen in het beeld. */
.hero__cta .btn--wa{background:#188841;color:#fff;box-shadow:0 12px 26px -14px rgba(0,0,0,.6)}
.hero__cta .btn.btn--wa svg{color:#fff}
.hero__cta .btn--wa:hover{background:#147237}
.faq__cta{margin-top:clamp(1.6rem,3vw,2.2rem);display:flex;flex-wrap:wrap;align-items:center;
  gap:.9rem 1.2rem;justify-content:center;text-align:center}
.faq__cta-tekst{font-weight:600;color:var(--muted)}
/* Stapkaart naar het model van de werkwijze-sectie op solargreen.nl: foto als
   achtergrond, verloop eroverheen zodat de witte tekst leesbaar blijft, groen
   icoonvlak linksboven en een pil met het stapnummer rechtsonder.
   isolation:isolate houdt de z-index van de foto binnen de kaart. */
.stap{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--radius);
  min-height:clamp(15rem,22vw,17.5rem);display:flex;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.stap:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.stap__foto{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
/* Twee stops onderin: de tekst staat op het donkerste deel, de foto blijft
   bovenin herkenbaar. Gemeten op de vier foto's: wit haalt hier ruim AA. */
.stap::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(16,20,19,.30) 0%,rgba(16,20,19,.72) 52%,rgba(16,20,19,.92) 100%)}
/* padding-bottom reserveert de band waar de stap-pil in staat, zodat lange
   tekst er nooit onderdoor loopt. Dat werkt beter dan padding-right: de pil
   staat rechtsonder, maar de tekst loopt over de volle breedte. */
.stap__in{position:relative;display:flex;flex-direction:column;width:100%;
  padding:1.25rem 1.3rem 3.5rem;color:#fff}
.stap__ic{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:var(--green-fill);color:#fff;margin-bottom:auto}
.stap__ic svg{width:21px;height:21px}
.stap h3{font-size:1.14rem;line-height:1.25;margin:1.4rem 0 .4rem}
.stap p{font-size:.9rem;line-height:1.55;color:rgba(255,255,255,.86)}
.stap__no{position:absolute;right:1.3rem;bottom:1.25rem;
  border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:.4rem .85rem;
  font-family:"Poppins",sans-serif;font-weight:700;font-size:.78rem;line-height:1;white-space:nowrap}
.stap:first-child .stap__no{background:var(--green-fill);border-color:transparent}
@media(max-width:1080px){.werkwijze__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.werkwijze__grid{grid-template-columns:1fr}.stap{min-height:13.5rem}}

/* ---------- Waarom - 5 redenen ---------- */
.reasons{position:relative;overflow-x:clip;padding-block:clamp(3.4rem,7vw,5.5rem);background:var(--paper-2)}
/* Merkteken als watermerk rechtsboven. SVG (potrace van het logo), dus scherp
   op elk formaat. De right-waarde lijnt hem uit op de contentkolom zolang die
   smaller is dan het scherm, en valt daarna terug op een marge van 1,2rem. */
.reasons__mark{position:absolute;z-index:0;pointer-events:none;
  top:clamp(.2rem,1vw,1rem);
  right:clamp(.5rem,2.5vw,2.5rem);
  width:min(360px,28vw);height:auto;opacity:.12}
@media (max-width:860px){.reasons__mark{width:min(220px,34vw);opacity:.10}}
/* Onder 720px stapelt de sectie en schuift de fotokaart eroverheen,
   dan blijft er alleen een half afgedekte boog over. Liever weg. */
@media (max-width:720px){.reasons__mark{display:none}}
/* stretch en niet center: de foto moet even lang zijn als de tekstkolom
   ernaast, anders valt het blok visueel uit elkaar. Staande huisregel voor de
   pro-landers. De vaste aspect-ratio op .reasons__photo is daarom weg en komt
   pas terug in de gestapelde breakpoint, want zonder kolom ernaast is er geen
   hoogte om over te nemen en klapt height:100% dicht. */
.reasons__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,4vw,4rem);align-items:stretch}
.reasons__media{position:relative;isolation:isolate}
.reasons__media::before{content:"";position:absolute;inset:0;background:var(--green);
  border-radius:calc(var(--radius) + 14px);transform:rotate(-5deg) translate(-16px,16px);z-index:-1}
.reasons__photo{border-radius:calc(var(--radius) + 4px);overflow:hidden;height:100%;min-height:420px;box-shadow:var(--shadow);transform:rotate(1deg)}
.reasons__photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.reasons__badge{position:absolute;right:-10px;bottom:-20px;background:#101413;color:#fff;
  border-radius:16px;padding:.95rem 1.15rem;box-shadow:var(--shadow);z-index:2}
.reasons__ab{display:block;font-family:"Kanit",system-ui,sans-serif;font-weight:700;font-size:1.5rem;line-height:1;color:var(--green)}
.reasons__abk{display:block;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:.4rem}
.reasons__body .eyebrow{margin-bottom:.8rem}
.reasons__body h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:14ch}
.reasons__list{list-style:none;margin:1.5rem 0 0;padding:0}
.reasons__list li{display:flex;gap:1rem;align-items:flex-start;padding:.8rem 0;border-bottom:1px solid var(--line)}
.reasons__list li:first-child{border-top:1px solid var(--line)}
.reasons__num{min-width:1.7rem;flex:none;margin-top:.1rem}
.reasons__num svg{width:20px;height:20px;color:var(--green)}
.reasons__stats{display:flex;gap:clamp(1.4rem,4vw,2.6rem);margin-top:1.8rem}
.reasons__cta{margin-top:1.6rem;display:flex;flex-wrap:wrap;gap:.7rem}
.reasons__stat b{display:inline-flex;align-items:center;gap:.18em;font-family:"Kanit",system-ui,sans-serif;font-weight:700;font-size:1.7rem;line-height:1}
.reasons__stat small{display:block;margin-top:.3rem;color:var(--muted);font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.reasons__cta{margin-top:1.8rem}

/* Gespiegelde variant: tekst links, foto rechts, blauwe achtergrondkaart */
.reasons--alt{background:var(--paper)}
.reasons--alt .reasons__grid{grid-template-columns:1.05fr 1fr}
.reasons--alt .reasons__media{order:2}
.reasons--alt .reasons__media::before{background:#101413;transform:rotate(5deg) translate(16px,16px)}
.reasons--alt .reasons__photo{transform:rotate(-1deg)}
.reasons--alt .reasons__badge{right:auto;left:-10px;background:var(--green)}
.reasons--alt .reasons__ab{font-size:1.7rem;color:#fff}
@media (max-width:880px){
  .reasons--alt .reasons__grid{grid-template-columns:1fr}
  .reasons--alt .reasons__media{order:0}
}

/* Story: tweede kaart blauw i.p.v. oranje */
.story__row:nth-child(2) .story__media::before{background:#101413}

/* Keurmerk-badge (het element uit de redenen-sectie) herhaald op de overige
   fotoblokken. Op de blauwe story-kaart in het rood; in containers met
   overflow:hidden (waarom, voorraad) niet uitstekend maar op de rand van de foto. */
.story__row:nth-child(2) .reasons__badge{right:auto;left:-10px;background:var(--green)}
.story__row:nth-child(2) .reasons__ab{color:#fff}
.waarom__photo .reasons__badge{right:16px;bottom:16px}
.voorraad__media .reasons__badge{right:16px;bottom:16px}
/* Op smalle schermen dekt de badge te veel van de foto af. */
@media(max-width:760px){.waarom__photo .reasons__badge{display:none}}

@media (max-width:980px){.services__grid{grid-template-columns:1fr 1fr}}
@media (max-width:880px){
  .reasons__grid{grid-template-columns:1fr}
  /* width:100% erbij: zonder die regel is het blok 0x0 zolang de lazy foto nog
     niet binnen is (shrink-to-fit op een lege aspect-ratio-box) en springt de
     hele sectie omhoog zodra hij laadt. */
  .reasons__media{width:100%;max-width:24rem;margin-inline:auto}
  /* Zie de story-breakpoint: gestapeld bepaalt de verhouding de hoogte weer. */
  .reasons__photo{aspect-ratio:4/5;height:auto;min-height:0}
}
@media (max-width:520px){.services__grid{grid-template-columns:1fr}}

.foot__social{display:flex;gap:.6rem;margin-top:1.2rem}.foot__social a{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);color:#fff;transition:background .2s ease,transform .2s ease}.foot__social a:hover{background:var(--green);border-color:var(--green);transform:translateY(-2px)}.foot__social svg{width:18px;height:18px}

/* ---------- Zwevende bel-knop ----------
   1-op-1 van oranjelift.nl: ronde knop rechtsonder met een ring die van 1 naar 1,5
   schaalt terwijl hij vervaagt. Op mobiel staat hij hier wel (op verzoek), maar dan
   als mini-versie. Kan hier ook veilig: deze pagina heeft geen vaste onderbalk waar
   hij overheen zou vallen. */
/* Witte ring is hier geen versiering maar noodzaak: de knop zweeft over de hele
   pagina en botst onder meer op de groene werkwijze-band, waar groen-op-groen
   vrijwel onzichtbaar is. De ring geeft hem op elke ondergrond een eigen rand.
   isolation:isolate houdt de pulsring (z-index:-1) binnen de knop, anders kan
   die achter de pagina-achtergrond zakken. */
.bel-float{
  position:fixed;right:24px;bottom:24px;z-index:998;isolation:isolate;
  width:68px;height:68px;border-radius:50%;
  display:grid;place-items:center;
  background:#188841;color:#fff;
  box-shadow:0 0 0 3px #fff,0 6px 18px rgba(0,0,0,.28);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s ease;
}
.bel-float svg{width:34px;height:34px;fill:currentColor;position:relative;z-index:1}
.bel-float:hover{background:#147237;transform:scale(1.08);box-shadow:0 0 0 3px #fff,0 10px 26px rgba(0,0,0,.34)}
.bel-float:active{transform:scale(.96)}
.bel-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:#188841;z-index:-1;
  animation:bel-puls 2s ease-out infinite;
}
@keyframes bel-puls{
  0%  {transform:scale(1);   opacity:.32}
  100%{transform:scale(1.5); opacity:0}
}
/* Onder 768px kleiner en dichter op de hoek, zodat hij zo min mogelijk content afdekt.
   De env() houdt hem op een iPhone vrij van de home-indicator; die is 0 zolang de
   Safari-onderbalk zichtbaar is, dus dan blijft het gewoon 16px. */
/* Op zeer smalle schermen is de langste knoptekst breder dan het scherm;
   dan liever twee regels dan een afgeknipte pijl. */
@media (max-width:359.98px){.btn{white-space:normal;text-align:center}}
@media (max-width:767.98px){
  .bel-float{right:16px;bottom:max(16px,env(safe-area-inset-bottom));width:50px;height:50px}
  .bel-float svg{width:26px;height:26px}
}
/* De ring is puur decoratief, dus uit bij bewegingsgevoeligheid. */
@media (prefers-reduced-motion:reduce){.bel-float::after{animation:none;opacity:0}}

/* ---------- Dozenschatting in het offerteformulier ----------
   Uitklapper op het rode paneel. <details> doet het open en dicht zelf, dus geen
   extra JS en het werkt ook zonder toetsenbordgedoe. */
.lfcalc{margin-top:.2rem;border:1px solid rgba(255,255,255,.3);border-radius:14px;
  background:rgba(255,255,255,.10);overflow:hidden}
.lfcalc__knop{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;padding:.7rem .9rem;font-size:.88rem;font-weight:800;color:#fff}
.lfcalc__knop::-webkit-details-marker{display:none}
.lfcalc__knop:hover{background:rgba(255,255,255,.06)}
.lfcalc__chev{width:8px;height:8px;flex:none;border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s var(--ease)}
.lfcalc[open] .lfcalc__chev{transform:rotate(225deg) translate(-2px,-2px)}
.lfcalc__paneel{padding:0 .9rem .9rem;display:grid;gap:.8rem}
.lfcalc__velden{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.lfcalc__velden .lf__field>span{font-size:.66rem}
.lfcalc__velden input,.lfcalc__velden select{padding:.6rem .7rem;font-size:.95rem}
.lfcalc__velden .lf__field--sel::after{bottom:.85rem;right:.75rem}
.lfcalc__extras{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lfcalc__extras legend{float:left;width:100%;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.92);margin-bottom:.4rem}
.lfcalc__extras label{display:inline-flex;align-items:center;gap:.4rem;cursor:pointer;
  border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:.32rem .7rem;
  font-size:.82rem;font-weight:700;color:#fff;transition:background .2s ease,border-color .2s ease}
.lfcalc__extras label:has(input:checked){background:#fff;color:var(--green-deep);border-color:#fff}
.lfcalc__extras input{accent-color:#fff;width:14px;height:14px;margin:0}
.lfcalc__uit{font-size:.85rem;line-height:1.5;color:#fff;
  background:rgba(0,0,0,.22);border-radius:10px;padding:.6rem .75rem}
.lfcalc__uit strong{font-weight:800}
@media (max-width:620px){.lfcalc__velden{grid-template-columns:1fr 1fr}}

.lfcalc__acties{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.lfcalc__ok{font-family:inherit;font-weight:800;font-size:.86rem;cursor:pointer;
  border:0;border-radius:999px;padding:.6rem 1.1rem;background:#fff;color:var(--green-deep);
  transition:transform .2s var(--ease),background .2s ease}
.lfcalc__ok:hover{transform:translateY(-1px);background:#F0FAF4}
.lfcalc__wis{font-family:inherit;font-weight:700;font-size:.82rem;cursor:pointer;
  border:0;background:none;color:rgba(255,255,255,.8);text-decoration:underline;text-underline-offset:3px;padding:.5rem .4rem}
.lfcalc__wis:hover{color:#fff}
/* Toegevoegd: de kop krijgt een vinkje en de knop bevestigt dat hij bijgewerkt is. */
.lfcalc.is-toegevoegd{border-color:#fff;background:rgba(255,255,255,.18)}
.lfcalc.is-toegevoegd .lfcalc__titel::before{content:"\2713";margin-right:.45rem;font-weight:800}
.lfcalc.is-toegevoegd .lfcalc__ok{background:rgba(255,255,255,.22);color:#fff;cursor:default}
.lfcalc.is-toegevoegd .lfcalc__ok:hover{transform:none;background:rgba(255,255,255,.22)}

/* ---------- Solar Green-specifiek ----------
   Tekst-chips in de trust-hoek: zelfde witte chip als de keurmerken, maar met
   een cijferclaim van de site zelf (1.000+ klanten, 10+ jaar). */
.keurmerk--txt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.keurmerk--txt b{font-family:"Kanit",system-ui,sans-serif;font-weight:600;font-size:1.05rem;line-height:1;color:var(--green-deep)}
.keurmerk--txt small{font-size:.56rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);text-align:center;line-height:1.15}
@media(max-width:560px){.keurmerk--txt b{font-size:.92rem}.keurmerk--txt small{font-size:.5rem}}

/* Merkenchips (DMEGC, Sigenergy, Enphase, SolarEdge, Daikin): logo's van derden,
   dus nooit hertint, altijd op de witte chip. Wordmerken zijn breed en liggen
   lager dan de reviewlogo's. */
.keurmerk--merk img{max-height:20px}
@media(max-width:560px){.keurmerk--merk img{max-height:16px}}
/* DeWarmte publiceert zijn wordmerk uitsluitend in wit en zet het zelf altijd op
   zwart of op de teal van hun app-icoon. Hertinten mag niet, dus de chip krijgt
   die teal in plaats van wit. Het is bovendien een gestapeld lockup, teken boven
   het woord, en op 20px valt het woord dan weg: vandaar de eigen maat. */
.keurmerk--dewarmte{background:#7AB4A8}
.keurmerk--dewarmte img{max-height:38px}
@media(max-width:560px){.keurmerk--dewarmte img{max-height:30px}}

/* Score-kaart met een woord in plaats van een cijfer: de Google-widget op
   solargreen.nl toont "UITSTEKEND" met vijf sterren, geen los cijfer. */
.rev__num--woord{font-size:clamp(2.3rem,6vw,3.6rem);letter-spacing:.02em;text-transform:uppercase}

/* Iconen in de waarom-minis: inline SVG in plaats van PNG's. */
.wmini h3 svg{width:26px;height:26px;flex:none;color:var(--green-light)}

/* "Uitstekend" is breder dan een cijfer: de score-chip groeit mee met het woord. */
.keurmerk--score{width:auto;min-width:98px;padding-inline:12px}
@media(max-width:560px){
  .keurmerk--score{min-width:78px;padding-inline:9px}
  .keurmerk--score .keurmerk__cijfer{font-size:.8rem}
}

/* Adres-opzoeken: één regel onder de velden. Op de groene scanbalk wit, in het
   witte formulier gedempt. min-height houdt de hoogte stabiel zodat er niets
   verspringt zodra de tekst verschijnt. */
.of-adres{margin:12px 0 0;font-family:"Poppins",sans-serif;font-size:13px;line-height:1.4;
  color:rgba(255,255,255,.82);min-height:1.4em}
.of-adres.is-goed{color:#fff;font-weight:600}
.of-adres.is-bezig{opacity:.7}
.lf__adres{margin:.4rem 0 0;font-family:"Poppins",sans-serif;font-size:13px;line-height:1.4;
  color:var(--muted);min-height:1.4em}
.lf__adres.is-goed{color:var(--green-deep);font-weight:600}
.lf__adres.is-bezig{opacity:.7}