:root{
  --navy:#002B5C;
  --navy-deep:#001A3D;
  --blue:#0B3D73;
  --link:#00458C;
  --teal:#00693F;
  --green:#007A33;
  --bg:#FFFFFF;
  --bg-soft:#F5F7FA;
  --bg-navy:#002B5C;
  --ink:#101427;
  --ink-soft:#4B5468;
  --ink-on-navy:#C9D6E4;
  --line:#E4E8EE;
  --radius-lg:24px;
  --radius:20px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(0,43,92,0.04);
  --shadow-md:0 12px 28px -18px rgba(0,43,92,0.18);
  --shadow-lg:0 20px 44px -22px rgba(0,43,92,0.22);
  --grad-brand:var(--navy);
  --grad-button:var(--navy);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; overflow-x:hidden;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:'Inter',sans-serif; font-size:16px; line-height:1.62;
  -webkit-font-smoothing:antialiased; max-width:100vw;
}
h1,h2,h3{ font-family:'Plus Jakarta Sans', sans-serif; margin:0; font-weight:700; letter-spacing:-0.015em; word-break:normal; overflow-wrap:normal; hyphens:none;}
h4{font-family:'Inter',sans-serif; font-weight:700; margin:0;}
em{font-style:italic;}
a{color:inherit;}
img,svg{max-width:100%; display:block;}
/* Basisformaat voor alle icoon-svg's: voorkomt dat een icoon "gigantisch"
   wordt weergegeven (browser-default ~300x150px) wanneer een specifieke
   contextuele selector ontbreekt. Meer specifieke regels (bijv. .usp
   .icon-circle svg) overschrijven dit gewoon via hogere specificiteit. */
svg.icon{width:24px; height:24px;}
ul{margin:0; padding:0;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px; margin:0 auto; padding:0 24px;}
.eyebrow{font-size:12.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--link);}
:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px;}
.grad-text{background:var(--grad-brand); -webkit-background-clip:text; background-clip:text; color:transparent;}

/* Skip-link voor toetsenbordgebruikers */
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:300; background:var(--navy); color:#fff;
  padding:12px 18px; border-radius:10px; text-decoration:none; font-size:14px; font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{top:12px;}

/* Zichtbare focus-status op het hamburgermenu (checkbox zelf is onzichtbaar maar focusbaar) */
.menu-checkbox:focus-visible + .site-header .menu-toggle{outline:2.5px solid var(--blue); outline-offset:2px;}

/* Sticky mobiele actiebalk onderaan het scherm */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -8px 24px rgba(0,43,92,0.10);
  padding:10px 14px; gap:10px;
}
.mobile-cta-bar a{flex:1;}
@media(max-width:899px){.mobile-cta-bar{display:flex;} body{padding-bottom:72px;}}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:13px 24px; border-radius:100px; font-weight:600; font-size:14.5px; font-family:'Inter',sans-serif;
  text-decoration:none; border:1.5px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--grad-button); color:#fff; box-shadow:0 10px 22px -10px rgba(0,43,92,0.45); transition:background .2s ease, transform .2s ease, box-shadow .2s ease;}
.btn-primary:hover{background:var(--green); transform:translateY(-2px); box-shadow:0 14px 26px -10px rgba(0,43,92,0.45);}
.btn:active{transform:translateY(0) scale(0.98);}
.btn-outline{background:#fff; color:var(--navy); border-color:var(--line);}
.btn-ghost-light{background:rgba(255,255,255,0.10); color:#fff; border-color:rgba(255,255,255,0.5); backdrop-filter:blur(6px);}
.btn-ghost-light:hover{background:rgba(255,255,255,0.20); transform:translateY(-1px);}
.btn-outline:hover{border-color:var(--navy); transform:translateY(-1px);}
.btn-sm{padding:10px 18px; font-size:13.5px;}

/* ---------- HEADER / NAV (simple, per brief) ---------- */
header.site-header{position:sticky; top:0; z-index:100; background:rgba(255,255,255,0.92); backdrop-filter:blur(12px); border-bottom:1px solid var(--line);}
/* Homepage: header zweeft transparant/semi-transparant over de volledig
   beeldvullende hero-foto (zelfde blur/achtergrond als altijd, alleen de
   positionering wijzigt). main krijgt compenserende padding-top zodat de
   overige homepage-secties niet alsnog onder de header verdwijnen; de hero
   zelf trekt zichzelf met een negatieve margin weer omhoog tot de bovenkant
   van de pagina. */
body.home-hero header.site-header{position:fixed; top:0; left:0; right:0; width:100%; border-bottom:1px solid transparent;}
body.home-hero main{padding-top:76px;}
body.home-hero .hero-full-home{margin-top:-76px;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:14px 0; gap:20px;}
.logo{flex-shrink:0;}
.logo img{height:28px; width:auto; object-fit:contain;}
/* Mobiele header: ~16px veilige ruimte links/rechts (i.p.v. de sitebrede
   24px van .wrap), logo iets kleiner en compactere gaps/CTA-tekst, zodat
   logo + "Offerte"-knop + hamburgermenu altijd naast elkaar passen zonder
   dat het logo (via flexbox-krimp i.c.m. de sitewide img{max-width:100%}
   -regel) buiten proportie samengedrukt raakt — flex-shrink:0 hierboven
   voorkomt dat sowieso al helemaal, dit is puur voor een comfortabele
   pasvorm. Uitsluitend van toepassing op de mobiele header; .wrap zelf
   (elders op de site) blijft ongewijzigd op 24px.
   Geen absolute positionering en geen negatieve margins — puur flex +
   compacte, expliciete waarden. */
@media(max-width:480px){
  header.site-header .wrap{padding-left:16px; padding-right:16px;}
  .logo img{height:21px;}
  .nav{gap:8px;}
}
.cta-full-text{display:inline;}
nav.links{display:none; align-items:center; gap:20px; font-size:14px; font-weight:500;}
nav.links > a{text-decoration:none; color:var(--ink-soft); transition:color .15s; padding:8px 0;}
nav.links > a:hover, nav.links > a.active{color:var(--navy);}
@media(min-width:900px){nav.links{display:flex;}}
.nav-actions{display:flex; align-items:center; gap:10px;}
.phone-link{display:none; font-size:14px; font-weight:600; text-decoration:none; color:var(--navy);}
@media(min-width:640px){.phone-link{display:inline;}}
/* Compactere CTA op mobiel: alleen "Offerte" i.p.v. "Offerte aanvragen"
   (bespaart aanzienlijk breedte), plus krappere padding — zodat logo + knop
   + hamburgermenu ruim binnen het scherm blijven passen op alle geteste
   breedtes (320\u2013430px), zonder de knop te hoeven verbergen. */
@media(max-width:480px){
  .cta-full-text{display:none;}
  .nav-actions .btn-sm{padding:8px 12px; font-size:12.5px;}
  .nav-actions{gap:8px;}
}
/* Uitsluitend nog als allerlaatste redmiddel op zeer smalle/oude toestellen
   (kleiner dan 340px, bijv. sommige oudere 320px-schermen) waar zelfs de
   verkorte knop niet meer past: de knop staat ook al prominent in het
   mobiele menu zelf. Vanaf 340px blijft de knop overal zichtbaar. */
@media(max-width:340px){.nav-actions > a.btn{display:none;}}
.menu-toggle{display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer; flex-shrink:0;}
@media(min-width:900px){.menu-toggle{display:none;}}
.menu-toggle svg{width:20px; height:20px;}

/* Pure-CSS sidebar (checkbox hack) — geen JavaScript nodig */
.menu-checkbox{position:absolute; opacity:0; pointer-events:none;}
.menu-overlay{
  position:fixed; inset:0; background:rgba(10,22,64,0.45); z-index:150;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
}
.mobile-sidebar{
  position:fixed; top:0; right:0; bottom:0; width:84%; max-width:340px; background:#fff; z-index:200;
  transform:translateX(100%); transition:transform .3s ease; box-shadow:-16px 0 40px rgba(0,43,92,0.18);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.menu-checkbox:checked ~ .menu-overlay{opacity:1; visibility:visible;}
.menu-checkbox:checked ~ .mobile-sidebar{transform:translateX(0);}
@media(min-width:900px){.menu-toggle, .mobile-sidebar, .menu-overlay{display:none !important;}}
.mobile-menu-top{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--line);}
.mobile-menu-top img{height:26px;}
.mobile-menu-close{display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:#fff; cursor:pointer;}
.mobile-menu-close svg{width:17px; height:17px;}
.mobile-menu-links{padding:8px 20px 4px;}
.mobile-sidebar a{display:block; padding:15px 4px; font-size:16.5px; font-weight:600; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line);}
.mobile-phone-link{color:var(--link) !important; border-bottom:none !important;}
.mobile-menu-cta-wrap{padding:20px; border-top:1px solid var(--line); margin-top:8px;}
.mobile-menu-cta-wrap .mobile-cta{margin:0; width:100%; text-align:center; padding-top:15px; padding-bottom:15px; color:#fff !important;}

/* Volledig beeldvullende hero (foto-achtergrond, tekst erover) */
.hero-full{position:relative; min-height:640px; display:flex; align-items:flex-end; overflow:hidden;}
.hero-full-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center;}
.hero-full-overlay{
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(10,22,64,0.94) 0%, rgba(10,22,64,0.68) 45%, rgba(10,22,64,0.32) 100%);
}
.hero-full-content{position:relative; z-index:1; padding:64px 0 56px; color:#fff;}
/* Compacte hero-variant voor dienst-detailpagina's: de bezoeker heeft al op
   een specifieke dienst geklikt en hoeft niet eerst een bijna-volledig-scherm
   foto+titel te zien voordat de inhoud begint. Alleen gebruikt op
   dienst-detailpagina's — de homepage-hero blijft ongewijzigd. */
.hero-full.hero-full-compact{min-height:280px;}
.hero-full-compact .hero-full-content{padding:30px 0 26px;}
.hero-full-compact .lead{font-size:15px;}
@media(max-width:640px){
  .hero-full.hero-full-compact{min-height:200px;}
  .hero-full-compact .hero-full-content{padding:18px 0 16px;}
}
/* Twee grote, gelijkwaardige doelgroepknoppen: dit is de hoofdkeuze in de
   hero (Bedrijven vs. Particulieren). Elk in een eigen merkkleur zodat het
   verschil in één oogopslag duidelijk is: navy voor zakelijk, groen voor
   particulier. Platte tekstknoppen, geen iconen. */
/* Zakelijk is de primaire keuze (~80% van de doelgroep): stevige, gevulde
   navy knop. Particulier blijft volwaardig aanwezig, als lichte/witte
   secundaire knop met duidelijke navy tekst/rand \u2014 zo blijft het verschil
   in \u00e9\u00e9n oogopslag duidelijk (primair vs. secundair) zonder dat particulier
   moeilijk leesbaar wordt. */
.hero-audience-choice{display:flex; gap:14px; margin-top:26px; flex-wrap:wrap;}
.btn-audience-lg{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; flex:1 1 auto; min-width:160px;
  padding:16px 26px; border-radius:100px; font-weight:700; font-size:15.5px; text-align:center;
  color:#fff; text-decoration:none; border:1.5px solid transparent;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
  box-shadow:0 10px 24px -10px rgba(0,0,0,0.4);
}
.btn-audience-lg:hover{transform:translateY(-2px);}
.btn-audience-business{background:var(--navy);}
.btn-audience-business:hover{background:var(--navy-deep);}
.btn-audience-particulier{background:#fff; color:var(--navy); border-color:#fff; box-shadow:none;}
.btn-audience-particulier:hover{background:#EAF1FA; border-color:#EAF1FA;}
.hero-full-content h1{color:#fff; font-size:clamp(36px,6vw,64px); line-height:1.05; margin-top:14px;}
@media(min-width:760px){.hero-full{min-height:74vh;} .hero-full-content{padding:72px 0 72px;}}
@media(max-width:640px){.hero-full{min-height:480px;}}
.hero-full-compact{min-height:560px;}
@media(min-width:760px){.hero-full-compact{min-height:64vh;} .hero-full-compact .hero-full-content{padding:56px 0 56px;}}
@media(max-width:640px){.hero-full-compact{min-height:420px;}}
.hero-full-inner{min-height:400px;}
@media(min-width:760px){.hero-full-inner{min-height:52vh;}}

/* ---------- Homepage hero (volledig beeldvullend, header eroverheen) ---------- */
.hero-full-home{min-height:520px; align-items:center;}
@media(max-width:640px){.hero-full-home{min-height:0;}}
@media(min-width:640px){.hero-full-home{min-height:78vh;}}
@media(min-width:900px){.hero-full-home{min-height:70vh;}}
@media(min-width:640px) and (max-height:820px){.hero-full-home{min-height:640px;}}
/* Liggende stand op telefoon/tablet: viewport-hoogte is dan erg beperkt.
   Val terug op een hoogte die zich naar de inhoud voegt in plaats van een
   vast vh-percentage, anders duwt de hero de knoppen achter de vaste
   onderbalk. */
@media(max-height:480px){
  .hero-full-home{min-height:0;}
  .hero-full-content-home{padding-top:84px; padding-bottom:84px;}
}
/* Lokale, horizontale overlay: donker genoeg voor leesbare tekst links,
   loopt uit naar transparant rechts zodat de bus/het logo rechts zichtbaar
   blijft — geen zware laag over de hele foto. */
/* Lichte, uniforme verduistering over de hele foto (voor algeheel contrast),
   gecombineerd met een eigen semi-transparant tekstvlak achter de content
   (zie .hero-full-content-home). Dat vlak schaalt mee met de tekst zelf in
   plaats van met de volledige breedte van de hero, dus het blijft op elke
   schermbreedte een vaste, voorspelbare afstand van de bus/het logo houden. */
.hero-full-overlay-home{
  background:linear-gradient(180deg, rgba(0,20,42,0.32) 0%, rgba(0,20,42,0.20) 40%, rgba(0,20,42,0.38) 100%);
}
@media(max-width:640px){
  .hero-full-overlay-home{
    background:linear-gradient(180deg,
      rgba(0,20,42,0.55) 0%,
      rgba(0,20,42,0.72) 45%,
      rgba(0,20,42,0.88) 100%);
  }
}
.hero-full-content-home{max-width:600px; padding:96px 0 64px;}
@media(max-width:899px){.hero-full-content-home{padding-bottom:80px;}}
@media(max-width:640px){.hero-full-content-home{padding-top:80px;}}
@media(max-width:480px){
  .hero-full-content-home .hero-actions{margin-top:18px;}
}
.hero-text-panel{
  display:inline-block; background:rgba(0,17,36,0.50); backdrop-filter:blur(3px);
  border-radius:20px; padding:28px 32px;
}
@media(max-width:640px){.hero-text-panel{padding:22px 20px; display:block;}}
.hero-full-content-home .lead{font-size:17.5px; max-width:420px; margin-top:14px;}
@media(max-width:640px){.hero-full-content-home .lead{max-width:none;}}
.hero-slogan-dark{font-size:15.5px; font-weight:700; color:#8FE0C1; margin-top:10px; letter-spacing:-0.005em;}
/* Compactere mobiele hero (\u2264640px), toegepast N\u00c1 alle bovenstaande
   basisregels zodat deze overrides ook echt winnen: de belangrijkste actie
   \u2014 Voor bedrijven / Voor particulieren \u2014 moet zo snel mogelijk zichtbaar
   zijn, zonder scrollen. Kleinere verticale paddings/gaps, geen
   100vh-hoogte (die staat al content-gestuurd via .hero-full-home
   hierboven), en de slogan-regel vervalt op mobiel (staat wel nog op
   desktop). */
@media(max-width:640px){
  .hero-full-content-home{padding-top:64px; padding-bottom:32px;}
  .hero-text-panel{padding:18px 18px;}
  .hero-slogan-dark{display:none;}
  .hero-full-content-home h1{margin-top:8px;}
  .hero-full-content-home .lead{margin-top:8px; font-size:16px;}
  .hero-audience-choice{margin-top:14px; gap:10px;}
  .btn-audience-lg{padding:13px 20px; font-size:14.5px;}
}
/* Lange samengestelde woorden (zoals "schoonmaakpartner") mogen nooit
   halverwege afbreken: normale woordafbreking, geen geforceerde
   letter-voor-letter afbreking en geen afbreekstreepjes. De kolombreedte,
   font-size en line-height hieronder zijn juist zo gekozen dat het langste
   woord in de H1 op elke geteste breedte gewoon past. */
.hero-full-content-home h1{
  color:#fff; font-size:clamp(28px,4.6vw,56px); line-height:1.14; margin-top:14px;
  word-break:normal; overflow-wrap:normal; hyphens:none;
}
/* CSS Grid-items krijgen standaard min-width:auto, waardoor een lang woord
   de kolom breder kan duwen dan de beschikbare ruimte en zo voor
   net-niet-zichtbare horizontale overflow kan zorgen op smalle schermen. */
.grid-3 > *, .grid-4 > *, .usp-grid > *, .contact-grid > *, .two-col > *{min-width:0;}
.hero-actions{display:flex; gap:14px; margin-top:30px; flex-wrap:wrap;}

/* Illustratiepanelen. Wil je later een echte foto tonen in plaats van de illustratie?
   Voeg dan `background-image:url('../images/jouw-foto.jpg'); background-size:cover;
   background-position:center;` toe aan .illustration-panel en verwijder de SVG uit de HTML. */
/* ---------- REVIEWS (compacte strook direct onder de hero, echte Trustindex-widget) ---------- */
.reviews-strip{padding:22px 0;}
.reviews-compact{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;}
.reviews-compact-label{
  display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:0.04em;
}
.trustindex-widget-wrap{width:100%; min-height:1px;}

/* ---------- PRIJSCALCULATOR ---------- */
.calc-cta-band{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
  padding:36px 28px;
}
@media(min-width:760px){.calc-cta-band{flex-direction:row; text-align:left; padding:32px 40px;}}
.calc-cta-icon{
  width:52px; height:52px; border-radius:14px; background:var(--bg-soft); display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
}
.calc-cta-icon svg{width:26px; height:26px; color:var(--link);}
.calc-cta-text{flex-grow:1;}
.calc-cta-text h2{font-size:22px; margin-bottom:4px;}
.calc-cta-text p{color:var(--ink-soft); font-size:14.5px;}
.calc-cta-btn{flex-shrink:0; white-space:nowrap;}

.calc-grid{display:grid; grid-template-columns:1fr; gap:28px; align-items:start;}
@media(min-width:960px){.calc-grid{grid-template-columns:1.5fr 1fr;}}

.calc-form{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:18px;}
@media(min-width:480px){.calc-form{padding:28px;}}
.calc-block{padding:22px 0; border-bottom:1px solid var(--line);}
.calc-block:first-child{padding-top:0;}
.calc-block:last-child{border-bottom:none; padding-bottom:0;}
.calc-block h3{font-family:'Inter',sans-serif; font-size:15px; font-weight:700; color:var(--ink); margin-bottom:14px;}
.calc-optional{font-weight:400; color:var(--ink-soft); font-size:13px;}

.calc-jobtype-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
@media(min-width:640px){.calc-jobtype-grid{grid-template-columns:repeat(4,1fr);}}
.calc-jobtype-grid .calc-card{padding:16px 10px;}
.calc-emoji{font-size:26px; line-height:1;}

.calc-type-grid, .calc-freq-grid, .calc-time-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px;}
@media(min-width:520px){.calc-type-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:640px){.calc-freq-grid, .calc-time-grid{grid-template-columns:repeat(3,1fr);}}
@media(min-width:820px){.calc-time-grid{grid-template-columns:repeat(5,1fr);}}

.calc-card{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  background:var(--bg-soft); border:1.5px solid var(--line); border-radius:12px; padding:14px 10px;
  cursor:pointer; font-family:'Inter',sans-serif; text-align:center; transition:border-color .15s ease, background .15s ease, transform .15s ease;
  min-width:0;
}
.calc-card:hover{border-color:var(--link); transform:translateY(-2px);}
.calc-card.active{background:#EAF4FF; border-color:var(--link); box-shadow:0 0 0 1px var(--link) inset;}
.calc-card svg{width:22px; height:22px; color:var(--link);}
.calc-card span{font-size:13.5px; font-weight:700; color:var(--ink); overflow-wrap:break-word; word-break:break-word; hyphens:auto;}
.calc-card small{font-size:11px; color:var(--ink-soft);}
.calc-badge{position:absolute; top:-9px; left:50%; transform:translateX(-50%); background:var(--teal); color:#fff; font-size:9.5px; font-weight:700; padding:2px 8px; border-radius:20px; white-space:nowrap;}

.calc-slider-row{display:flex; align-items:center; gap:14px;}
.calc-slider-row input[type="range"]{flex-grow:1; accent-color:var(--link); height:6px;}
.calc-slider-row input[type="number"]{width:100px; text-align:center; font-weight:700;}
.calc-slider-labels{display:flex; justify-content:space-between; font-size:11.5px; color:var(--ink-soft); margin-top:6px;}

.calc-extra-grid{display:grid; grid-template-columns:1fr; gap:10px;}
@media(min-width:520px){.calc-extra-grid{grid-template-columns:1fr 1fr;}}
.calc-check{
  display:flex; align-items:center; gap:10px; background:var(--bg-soft); border:1.5px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; font-size:13.5px; font-weight:600; color:var(--ink); transition:border-color .15s ease;
}
.calc-check:has(input:checked){border-color:var(--link); background:#EAF4FF;}
.calc-check input{display:none;}
.calc-check span{width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff;}
.calc-check span svg{width:13px; height:13px; color:#fff; opacity:0; transition:opacity .12s ease;}
.calc-check input:checked + span{background:var(--link); border-color:var(--link);}
.calc-check input:checked + span svg{opacity:1;}

#calcPlaats{cursor:pointer;}
.calc-note{display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-soft); margin-top:10px;}
.calc-note-warning{color:#B5680A;}
.calc-note-warning svg{color:#B5680A !important;}

.calc-autocomplete{position:relative;}
.calc-autocomplete-list{
  position:absolute; top:calc(100% + 4px); left:0; right:0; z-index:20; background:#fff;
  border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow-md); max-height:240px;
  overflow-y:auto; margin:0; padding:6px; list-style:none;
}
.calc-autocomplete-list li{padding:9px 12px; border-radius:7px; font-size:14px; cursor:pointer; transition:background .1s ease;}
.calc-autocomplete-list li:hover, .calc-autocomplete-list li.active{background:var(--bg-soft); color:var(--link);}
.calc-note svg{width:14px; height:14px; color:var(--teal); flex-shrink:0;}

.calc-price-wrap{position:relative;}
.calc-price-card{
  position:sticky; top:90px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:26px; transition:box-shadow .3s ease;
}
.calc-price-flash{box-shadow:0 0 0 3px rgba(0,104,184,0.25), var(--shadow-md);}
.calc-price-header{font-family:'Inter',sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--link);}
.calc-price-range{font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:46px; color:var(--navy); margin-top:10px; line-height:1;}
.calc-price-sub{font-size:13px; color:var(--ink-soft); margin-top:6px;}
.calc-price-disclaimer{font-size:12px; color:var(--ink-soft); margin-top:14px; line-height:1.5;}
.calc-price-includes{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:9px;}
.calc-price-includes li{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--ink);}
.calc-price-includes svg{width:15px; height:15px; color:var(--teal); flex-shrink:0;}
.calc-price-hours{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; padding-top:20px; border-top:1px solid var(--line);}
.calc-price-hours div{background:var(--bg-soft); border-radius:10px; padding:10px 12px; text-align:center;}
.calc-price-hours span{display:block; font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:20px; color:var(--navy);}
.calc-price-hours small{font-size:11px; color:var(--ink-soft);}
.calc-check-separate{border-style:dashed;}
.calc-check-separate em{font-style:normal; font-size:11px; color:var(--ink-soft); margin-left:4px;}

.calc-summary{background:var(--bg-soft); border-radius:12px; padding:14px 16px; margin-top:18px;}
.calc-summary-title{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--ink-soft); margin-bottom:9px;}
.calc-summary-grid{display:grid; grid-template-columns:1fr 1fr; gap:8px 12px;}
.calc-summary-grid span{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--ink); overflow:hidden;}
.calc-summary-grid svg{width:13px; height:13px; color:var(--link); flex-shrink:0;}
.calc-summary-grid b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.calc-summary-extras{font-size:11.5px; color:var(--ink-soft); margin-top:8px; padding-top:8px; border-top:1px solid var(--line); display:none;}
.calc-summary-extras:not(:empty){display:block;}
.calc-price-inzet svg{width:15px; height:15px; color:var(--ink-soft); flex-shrink:0;}
.calc-price-cta{width:100%; justify-content:center; margin-top:18px;}
.calc-price-footnote{display:flex; align-items:center; gap:6px; justify-content:center; font-size:12px; color:var(--ink-soft); margin-top:10px;}
.calc-price-footnote svg{width:13px; height:13px; color:var(--teal);}

.calc-mobile-bar{display:none;}
@media(max-width:959px){
  .calc-mobile-bar{
    display:flex; align-items:center; justify-content:space-between; position:sticky; bottom:0; left:0; right:0;
    background:#fff; border-top:1px solid var(--line); box-shadow:0 -6px 16px -6px rgba(0,43,92,0.12);
    padding:12px 20px; margin-top:20px; z-index:5;
  }
  .calc-mobile-bar span{font-family:'Inter',sans-serif; font-weight:700; font-size:14px; color:var(--navy);}
  .calc-mobile-bar button{
    display:flex; align-items:center; gap:6px; background:var(--grad-button); color:#fff; border:none;
    border-radius:100px; padding:10px 18px; font-weight:700; font-size:13.5px; cursor:pointer;
  }
  .calc-mobile-bar svg{width:14px; height:14px;}
  .calc-price-wrap{position:static;}
  .calc-price-card{position:static;}
}

/* ---------- OFFERTE-MODAL ---------- */
.calc-modal-overlay{
  position:fixed; inset:0; background:rgba(0,43,92,0.55); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center; padding:20px; z-index:200;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.calc-modal-overlay.open{opacity:1; pointer-events:auto;}
.calc-modal{
  background:#fff; border-radius:var(--radius-lg); max-width:520px; width:100%;
  max-height:88vh; position:relative; box-shadow:0 30px 60px -12px rgba(0,43,92,0.35);
  transform:translateY(16px) scale(0.98); transition:transform .25s ease;
  display:flex; flex-direction:column; overflow:hidden;
}
.calc-modal-overlay.open .calc-modal{transform:translateY(0) scale(1);}
.calc-modal-form{display:contents;}
.calc-modal-header{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:26px 28px 18px; border-bottom:1px solid var(--line); flex-shrink:0;
}
.calc-modal-close{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  background:var(--bg-soft); display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.calc-modal-close svg{width:16px; height:16px; color:var(--ink-soft);}
.calc-modal h3{font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:22px; color:var(--navy);}
.calc-modal-sub{font-size:13.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}
.calc-modal-sub strong{color:var(--link);}
.calc-modal-body{
  display:grid; gap:11px; padding:20px 28px; overflow-y:auto; flex-grow:1;
  scrollbar-gutter:stable;
}
.calc-modal-row{display:grid; grid-template-columns:1fr 1fr; gap:11px;}
@media(max-width:480px){.calc-modal-row{grid-template-columns:1fr;}}
.calc-modal-body input[type="text"], .calc-modal-body input[type="email"], .calc-modal-body input[type="tel"], .calc-modal-body textarea{
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; width:100%;
}
.calc-modal-block{margin-top:4px;}
.calc-modal-label{display:block; font-size:13px; font-weight:700; color:var(--ink); margin-bottom:8px;}
.calc-modal-upload{
  display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--line); border-radius:10px;
  padding:14px; cursor:pointer; font-size:13.5px; color:var(--ink-soft); transition:border-color .15s ease;
}
.calc-modal-upload:has(input:not(:placeholder-shown)), .calc-modal-upload:hover{border-color:var(--link);}
.calc-modal-upload svg{width:16px; height:16px; color:var(--link);}
.calc-modal-upload input{display:none;}
.calc-modal-upload em{font-style:normal; color:var(--ink-soft);}
.calc-modal-footer{
  flex-shrink:0; padding:16px 28px 22px; border-top:1px solid var(--line); background:#fff;
}
.calc-modal-submit{width:100%; justify-content:center; margin-top:6px;}

/* ---------- WERKGEBIEDKAART ---------- */
.wg-map-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:24px;}
.wg-map-panel-lg{padding:20px;}
@media(min-width:760px){.wg-map-panel-lg{padding:28px;}}
.wg-map-wrap{position:relative; width:100%;}
.wg-map{width:100%; height:auto; display:block; overflow:visible;}

.wg-shape{cursor:pointer;}
.wg-shape path{
  fill:var(--bg-soft); stroke:#fff; stroke-width:1;
  transition:fill .25s ease, stroke .25s ease;
}
.wg-shape:hover path{fill:var(--link); opacity:0.35;}
.wg-shape-active path{fill:#BFE0FF; opacity:0.9; stroke:var(--link); stroke-width:1.6;}

.wg-tooltip-fo{overflow:visible; pointer-events:none;}
.wg-tooltip{
  display:inline-flex; background:#002B5C; color:#fff; font-family:'Inter',sans-serif;
  font-size:11px; font-weight:600; white-space:nowrap; padding:5px 10px; border-radius:7px;
  box-shadow:0 6px 16px -4px rgba(0,43,92,0.35); opacity:0; transform:translateY(3px); transition:opacity .2s ease, transform .2s ease;
}
.wg-shape:hover .wg-tooltip{opacity:1; transform:translateY(0);}

.wg-callout-line{stroke:#00458C; stroke-width:1;}
.wg-callout-dot{fill:#00458C;}
.wg-callout-label{
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; color:#002B5C;
  white-space:nowrap; background:#fff; padding:3px 9px; border-radius:6px; border:1px solid #E4E8F2;
  box-shadow:0 4px 10px -3px rgba(0,43,92,0.18);
}

.illustration-panel{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:4/3.4; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-md);
}
.illustration-panel svg{width:62%; height:62%;}
.illustration-panel.sm{aspect-ratio:1/1; border-radius:var(--radius);}
.illustration-panel.sm svg{width:56%; height:56%;}

/* ---------- TRUST STRIP (honest, modest) ---------- */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-soft);}
.trust-inner{display:flex; flex-wrap:wrap; justify-content:center; gap:14px 40px; padding:20px 24px; font-size:13.5px; color:var(--ink-soft); font-weight:600;}
.trust-inner span{display:flex; align-items:center; gap:8px;}
.trust-inner svg{width:16px; height:16px; color:var(--blue); flex-shrink:0;}

/* ---------- SECTIONS ---------- */
section{padding:96px 0;}
.section-tight{padding:48px 0;}
@media(max-width:640px){
  section{padding:52px 0;}
  .section-tight{padding:36px 0;}
  .page-hero{padding:32px 0 8px;}
  .hero{padding:40px 0 24px;}
}
.sec-head{text-align:center; max-width:600px; margin:0 auto 48px;}
.sec-head h2{font-size:clamp(28px,3.6vw,38px); margin-top:10px;}
.sec-head p{color:var(--ink-soft); font-size:16px; margin-top:12px;}
.sec-foot{text-align:center; margin-top:40px;}

/* ---------- VOOR/NA SLEEPBALK ---------- */
.grid-3{display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:680px){.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.grid-3{grid-template-columns:repeat(3,1fr);}}
.grid-2{display:grid; grid-template-columns:1fr; gap:22px;}
@media(min-width:680px){.grid-2{grid-template-columns:repeat(2,1fr);}}
.grid-4{display:grid; grid-template-columns:1fr; gap:20px;}
.wg-card{
  display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease;
}
.wg-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.wg-card .wg-icon{
  width:44px; height:44px; border-radius:12px; background:var(--bg-soft); display:flex;
  align-items:center; justify-content:center; margin-bottom:16px; flex-shrink:0;
}
.wg-card .wg-icon svg{width:22px; height:22px; color:var(--link);}
.wg-card h3{font-family:'Inter',sans-serif; font-size:16px; font-weight:700; color:var(--ink);}
.wg-card p{color:var(--ink-soft); font-size:13.5px; margin-top:8px; line-height:1.55; flex-grow:1;}
.wg-card .wg-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:13.5px; font-weight:600;
  color:var(--link); text-decoration:none;
}
.wg-card .wg-btn svg{width:15px; height:15px; transition:transform .18s ease;}
.wg-card:hover .wg-btn svg{transform:translateX(3px);}
@media(min-width:680px){.grid-4{grid-template-columns:repeat(2,1fr);}}
@media(min-width:980px){.grid-4{grid-template-columns:repeat(4,1fr);}}

/* ---------- WERKWIJZE ---------- */
.steps{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr); gap:24px;}}
.steps-wide{display:grid; grid-template-columns:1fr; gap:0;}
@media(min-width:640px){.steps-wide{grid-template-columns:repeat(2,1fr); gap:22px;} .steps-wide .step{border-top:none; padding:0;}}
@media(min-width:1000px){.steps-wide{grid-template-columns:repeat(5,1fr); gap:20px;}}
.step{padding:26px 0; border-top:1px solid var(--line); position:relative;}
@media(min-width:820px){.step{border-top:none; padding:0;}}
.step .stepnum{font-family:'Plus Jakarta Sans', sans-serif; font-weight:700; font-size:32px; color:var(--link); line-height:1; display:flex; align-items:center; gap:10px;}
.step .stepnum svg{width:22px; height:22px; color:var(--navy); flex-shrink:0;}
.step h3{font-family:'Inter',sans-serif; font-weight:700; font-size:16px; margin-top:10px;}
.step p{color:var(--ink-soft); font-size:14px; margin-top:6px;}

.service-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.service-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--link);}
.service-card:focus-visible{outline:2.5px solid var(--blue); outline-offset:3px; transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--link);}
.service-card .thumb{aspect-ratio:3/1.7; display:flex; align-items:center; justify-content:center; overflow:hidden;}
.service-card .thumb svg{width:40%; height:40%;}
.service-card .thumb img{transition:transform .35s ease, filter .35s ease; filter:brightness(1.07);}
.service-card:hover .thumb img{transform:scale(1.06);}
.service-card .body{padding:16px 20px 18px; display:flex; flex-direction:column; flex-grow:1;}
.service-card h3{font-family:'Inter',sans-serif; font-weight:800; font-size:16.5px; letter-spacing:-0.01em;}
.service-card p{
  color:var(--ink-soft); font-size:13.5px; margin-top:6px; line-height:1.5;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.service-card .sc-link{
  display:inline-flex; align-items:center; gap:5px; margin-top:auto; padding-top:12px;
  font-size:13px; font-weight:600; color:var(--link); transition:color .2s ease;
  text-decoration:none;
}
.service-card .sc-link svg{width:13px; height:13px; flex-shrink:0; transition:transform .2s ease;}
.service-card .sc-link:hover, .service-card .sc-link:focus-visible{color:var(--navy);}
.service-card .sc-link:hover svg, .service-card .sc-link:focus-visible svg{transform:translateX(3px);}

/* ---------- Pakketkeuze-blokken (particuliere detailpagina's) ---------- */
.pakket-grid{display:grid; grid-template-columns:1fr; gap:20px; align-items:start;}
/* Regio-overzicht op werkgebied.html: 2x2 op grotere schermen (bewust geen
   3-koloms grid, dat zou bij 4 regio's een ongelijke 3+1-verdeling geven). */
.regio-grid{display:grid; grid-template-columns:1fr; gap:18px; align-items:start;}
@media(min-width:700px){.regio-grid{grid-template-columns:repeat(2,1fr);}}
.regio-grid .pakket-card p a:hover{color:var(--navy);}
@media(min-width:640px){.pakket-grid{grid-template-columns:repeat(2,1fr);}}
@media(min-width:960px){.pakket-grid{grid-template-columns:repeat(3,1fr);}}
.pakket-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 24px 24px; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
}
.pakket-title{font-family:'Inter',sans-serif; font-weight:800; font-size:17px; color:var(--ink);}
.pakket-description{color:var(--ink-soft); font-size:14px; margin-top:8px; line-height:1.55;}
.pakket-price{font-size:20px; font-weight:800; color:var(--navy); margin-top:12px;}
.pakket-price-unit{font-size:12.5px; font-weight:600; color:var(--ink-soft);}
.pakket-price-staffel{font-size:12px; color:var(--ink-soft); margin-top:1px;}
.pakket-prijstabel{width:100%; border-collapse:collapse; font-size:13px; margin-top:2px;}
.pakket-prijstabel td{padding:6px 0; border-bottom:1px solid var(--line); color:var(--ink);}
.pakket-prijstabel td:last-child{text-align:right; font-weight:700;}
.pakket-prijstabel tr:last-child td{border-bottom:none;}
.pakket-card-featured{border:1.5px solid var(--green); box-shadow:0 12px 26px -18px rgba(0,122,51,0.35);}
.pakket-badge{
  position:absolute; top:-11px; right:20px; background:var(--green); color:#fff;
  font-size:10.5px; font-weight:700; padding:4px 12px; border-radius:100px; letter-spacing:0.03em; text-transform:uppercase;
}
.pakket-details{margin-top:16px; padding-top:16px; border-top:1px solid var(--line);}
.pakket-details[hidden]{display:none;}
.pakket-details-label{font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em; margin-bottom:8px;}
.pakket-items{list-style:none; margin:0; padding:0;}
.pakket-items li{position:relative; font-size:13.5px; color:var(--ink); padding:4px 0 4px 22px; line-height:1.4;}
.pakket-items li::before{
  content:"\2713"; position:absolute; left:0; top:4px; font-size:13px; line-height:1.4;
  color:var(--green); font-weight:700;
}
.pakket-actions{display:flex; flex-direction:column; align-items:stretch; gap:12px; margin-top:18px;}
.pakket-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:6px; align-self:flex-start;
  background:var(--bg-soft); border:none; border-radius:var(--radius-sm); padding:9px 15px; margin:0;
  color:var(--navy); font-size:13.5px; font-weight:600; cursor:pointer; transition:background .15s ease;
}
.pakket-toggle:hover, .pakket-toggle:focus-visible{background:#E9EEF5;}
.pakket-toggle-arrow{font-size:12px; line-height:1;}
.pakket-cta{
  text-align:center; width:100%; min-width:0; max-width:100%;
  white-space:normal; word-break:normal; overflow-wrap:break-word;
}

/* ---------- Prijstabel (particuliere detailpagina's) ---------- */
.prijstabel-wrap{margin-top:22px; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius-sm);}
.prijstabel{width:100%; border-collapse:collapse; min-width:480px; font-size:13.5px;}
.prijstabel th, .prijstabel td{padding:11px 14px; text-align:left; white-space:nowrap;}
.prijstabel thead th{background:var(--bg-soft); font-weight:700; color:var(--ink); border-bottom:1.5px solid var(--line);}
.prijstabel tbody td:first-child{font-weight:600; color:var(--ink-soft); white-space:normal;}
.prijstabel tbody tr{border-bottom:1px solid var(--line);}
.prijstabel tbody tr:last-child{border-bottom:none;}
.prijstabel tbody td{color:var(--ink);}
.prijstabel-eenheid{font-size:11px; font-weight:500; color:var(--ink-soft);}

/* Periodieke schoonmaak: op mobiel 3 kaarten (\u00e9\u00e9n per frequentie) i.p.v. de
   tabel, zodat niemand horizontaal hoeft te scrollen en de
   woonoppervlakte-kolom nooit buiten beeld valt. Desktop houdt de
   overzichtelijke tabel. */
.prijstabel-mobile-only{display:block;}
.prijstabel-desktop-only{display:none;}
@media(min-width:700px){
  .prijstabel-mobile-only{display:none;}
  .prijstabel-desktop-only{display:block;}
}
.periodiek-kaarten-wrap{display:flex; flex-direction:column; gap:14px; margin-top:22px;}
.periodiek-kaart{border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:16px 18px;}
.periodiek-kaart-titel{font-size:16px; font-weight:800; color:var(--navy);}
.periodiek-kaart-sub{font-size:12.5px; font-weight:600; color:var(--green); margin-top:2px;}
.periodiek-kaart-rij{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;}
.periodiek-kaart-rij:last-child{border-bottom:none;}
.periodiek-kaart-rij span:first-child{color:var(--ink-soft); font-weight:600;}
.periodiek-kaart-rij span:last-child{color:var(--ink); font-weight:700; text-align:right; white-space:nowrap;}

/* ---------- "Bekijk alle werkzaamheden" uitklapper (particuliere detailpagina's) ---------- */
.onderdelen-more{margin-top:12px;}
.onderdelen-more summary{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; list-style:none;
  color:var(--link); font-size:13.5px; font-weight:600;
}
.onderdelen-more summary::-webkit-details-marker{display:none;}
.onderdelen-more summary:hover, .onderdelen-more summary:focus-visible{color:var(--navy);}
.onderdelen-more summary .chev{display:flex; transition:transform .2s ease; flex-shrink:0;}
.onderdelen-more summary .chev svg{width:15px; height:15px;}
.onderdelen-more[open] summary .chev{transform:rotate(180deg);}

/* ---------- Keuze-kaarten: zakelijk / particulier ---------- */
.choice-grid{display:grid; grid-template-columns:1fr; gap:26px;}
@media(min-width:760px){.choice-grid{grid-template-columns:1fr 1fr;}}
.choice-card{
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.choice-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--link);}
.choice-media{aspect-ratio:16/9; overflow:hidden; background:var(--bg-soft);}
.choice-media img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block; transition:transform .35s ease;}
.choice-card:hover .choice-media img{transform:scale(1.05);}
.choice-media-light{display:flex; align-items:center; justify-content:center; background:linear-gradient(150deg,#EAF3FF 0%,#EFFBF3 100%);}
.choice-media-light svg{width:34%; height:34%;}
.choice-body{padding:24px 26px 28px; display:flex; flex-direction:column; flex-grow:1;}
.choice-label{font-size:12px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--link);}
.choice-body h3{font-size:22px; margin-top:8px;}
.choice-body > p{color:var(--ink-soft); font-size:14.5px; margin-top:10px; line-height:1.55;}
.choice-tags{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:1fr; gap:8px 16px;}
@media(min-width:420px){.choice-tags{grid-template-columns:1fr 1fr;}}
.choice-tags li{display:flex; align-items:center; gap:7px; font-size:13px; font-weight:600; color:var(--ink);}
.choice-tags svg{width:15px !important; height:15px !important; color:var(--green); flex-shrink:0;}
.choice-body .btn{margin-top:22px; align-self:flex-start; pointer-events:none;}

/* ---------- Elfsight Google Reviews ---------- */
/* transform (elke waarde, ook 'none' i.c.m. translateZ) maakt dit element
   het containing block voor eventuele position:fixed/sticky-kinderen die de
   ingesloten widget zelf zou injecteren. Zo kan de widget nooit "los" over
   de pagina heen blijven zweven tijdens scrollen, maar blijft hij netjes
   begrensd tot deze sectie, zoals een normaal onderdeel van de pagina. */
.elfsight-wrap{
  max-width:920px; margin:0 auto; overflow:hidden; position:relative;
  transform:translateZ(0); isolation:isolate; min-height:80px;
}
.elfsight-wrap, .elfsight-wrap * { max-width:100%; }
.service-card:hover .sc-link{color:var(--navy);}
.service-card:hover .sc-link svg{transform:translateX(3px);}

/* per-service tint */
.tint-1{background:linear-gradient(150deg,#EAF3FF,#F3F7FF);}
.tint-2{background:linear-gradient(150deg,#E9F6F4,#EFFBF6);}
.tint-3{background:linear-gradient(150deg,#EEF4FF,#EAF9F0);}
.tint-4{background:linear-gradient(150deg,#EAF1FF,#ECFAF1);}
.tint-5{background:linear-gradient(150deg,#EBF6F5,#EEF9F0);}
.tint-6{background:linear-gradient(150deg,#EAF2FF,#EBF8F3);}
.tint-7{background:linear-gradient(150deg,#EDF3FF,#E9F8EE);}

/* ---------- USP (max 4, per brief) ---------- */
.usp-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px 16px;}
@media(max-width:340px){.usp-grid{grid-template-columns:1fr; gap:20px;}}
@media(min-width:980px){.usp-grid{grid-template-columns:repeat(4,1fr);}}
.usp{text-align:center;}
@media(max-width:680px){.usp .icon-circle{width:38px; height:38px;}
  .usp .icon-circle svg{width:18px !important; height:18px !important;}
  .usp h3{font-size:14px;}
  .usp p{font-size:12.5px; line-height:1.4;}
}
.usp .icon-circle{width:48px; height:48px; border-radius:50%; margin:0 auto 16px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center;}
.usp .icon-circle svg{width:22px !important; height:22px !important; color:var(--navy);}
.usp h3{font-family:'Inter',sans-serif; font-weight:700; font-size:16px;}
.usp p{color:var(--ink-soft); font-size:14px; margin-top:6px;}

/* ---------- WERKGEBIED ---------- */
.area-tags{display:flex; flex-wrap:wrap; gap:10px; justify-content:center;}
.area-tag{padding:9px 18px; border-radius:100px; border:1px solid var(--line); background:#fff; font-size:14px; font-weight:500; color:var(--ink-soft);}
.area-tag.primary{border-color:var(--blue); color:var(--navy); background:#F0F8FF; font-weight:600;}

/* ---------- REVIEWS (clean, review-ready, no fake content) ---------- */
.reviews-ready{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--bg-soft);
  padding:48px 36px; text-align:center; max-width:640px; margin:0 auto;
}
.reviews-ready .icon-circle{width:52px; height:52px; border-radius:50%; margin:0 auto 18px; background:#fff; box-shadow:var(--shadow-sm); display:flex; align-items:center; justify-content:center;}
.reviews-ready svg{width:24px; height:24px; color:var(--blue);}
.reviews-ready h3{font-family:'Inter',sans-serif; font-weight:700; font-size:17px;}
.reviews-ready p{color:var(--ink-soft); font-size:14.5px; margin-top:10px; max-width:440px; margin-left:auto; margin-right:auto;}

/* ---------- FAQ ---------- */
.faq{max-width:760px; margin:0 auto; display:grid; gap:12px;}
.faq details{
  border:1px solid var(--line); border-radius:14px; background:#fff; overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.faq details:hover{border-color:var(--line); background:var(--bg-soft); box-shadow:var(--shadow-sm);}
.faq summary{
  cursor:pointer; font-weight:600; font-size:15.5px; list-style:none; padding:18px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{display:flex; transition:transform .25s ease; color:var(--link); flex-shrink:0;}
.faq summary .chev svg{width:18px; height:18px;}
.faq details[open] summary .chev{transform:rotate(180deg);}
.faq-a-wrap{
  display:grid !important; grid-template-rows:0fr; padding:0 22px;
  transition:grid-template-rows .28s ease, padding .28s ease;
}
.faq details[open] .faq-a-wrap{grid-template-rows:1fr; padding:0 22px 20px;}
.faq-a-wrap > .faq-a{overflow:hidden; color:var(--ink-soft); font-size:14.5px; line-height:1.65; margin:0;}
.faq-cta{text-align:center; margin-top:32px;}
.faq-cta p{color:var(--ink-soft); font-size:14.5px; margin-bottom:14px;}

/* ---------- CTA BAND ---------- */
.cta-band{border-radius:var(--radius-lg); background:var(--grad-button); color:#fff; padding:52px 40px; text-align:center;}
.cta-band h2{color:#fff; font-size:clamp(24px,3vw,32px);}
.cta-band p{color:rgba(255,255,255,0.88); margin-top:10px; font-size:15.5px;}
.cta-band .hero-actions{justify-content:center;}
.cta-band .btn-outline{background:transparent; color:#fff; border-color:rgba(255,255,255,0.5);}
.cta-band .btn-outline:hover{background:rgba(255,255,255,0.12); border-color:#fff;}
.cta-band .btn-primary{background:#fff; color:var(--navy); box-shadow:none;}
.cta-band .btn-primary:hover{transform:translateY(-2px); box-shadow:0 14px 28px -12px rgba(0,0,0,0.2);}

/* ---------- CONTACT (no address emphasis) ---------- */
.contact-grid{display:grid; grid-template-columns:1fr; gap:44px;}
@media(min-width:940px){.contact-grid{grid-template-columns:0.85fr 1.15fr;}}
.benefits-strip{
  display:flex; flex-wrap:wrap; justify-content:center; gap:14px 32px; margin-bottom:40px;
  padding:18px 24px; background:var(--bg-soft); border-radius:100px; font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.benefits-strip span{display:flex; align-items:center; gap:8px;}
.benefits-strip svg{width:16px !important; height:16px !important; color:var(--teal);}
@media(max-width:640px){.benefits-strip{border-radius:16px; justify-content:flex-start;}}
.contact-info h2{font-size:32px;}
.contact-info p{color:var(--ink-soft); margin-top:12px; font-size:15.5px;}
.contact-line{display:flex; align-items:center; gap:12px; margin-top:18px;}
.contact-line svg{width:18px !important; height:18px !important; color:var(--blue); flex-shrink:0;}
.contact-line a{font-weight:600; text-decoration:none; font-size:15.5px;}
.contact-line a:hover{color:var(--link);}
.contact-actions{display:flex; gap:10px; margin-top:26px; flex-wrap:wrap;}
.contact-map{margin-top:26px; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-sm);}
.quick-cta-card{background:var(--bg-soft); border-radius:var(--radius-lg); padding:40px 32px; text-align:center; display:flex; flex-direction:column; justify-content:center;}
.quick-cta-card h3{font-family:'Inter',sans-serif; font-weight:700; font-size:22px; color:var(--ink); margin-bottom:10px;}
.quick-cta-card p{color:var(--ink-soft); font-size:15.5px; max-width:420px; margin:0 auto;}
.quick-cta-card .hero-actions{justify-content:center; margin-top:22px;}
form.card-form{display:grid; gap:14px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:32px; box-shadow:var(--shadow-sm);}

/* ---------- OFFERTE-WIZARD ---------- */
.wizard-form{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:32px; box-shadow:var(--shadow-md); scroll-margin-top:90px;
}
.wizard-progress{margin-bottom:12px;}
.wizard-progress-bar{height:5px; background:var(--line); border-radius:100px; overflow:hidden;}
.wizard-progress-fill{height:100%; width:9%; background:var(--grad-button); border-radius:100px; transition:width .3s ease;}

.wizard-preselect{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--bg-soft); border:1px solid var(--line); border-radius:12px; padding:12px 16px; margin-bottom:20px;
}
.wizard-preselect-info{display:flex; flex-direction:column; gap:1px;}
.wizard-preselect-label{font-size:11px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
.wizard-preselect-info strong{font-size:14.5px; color:var(--ink); font-weight:700;}
.wizard-preselect-extra{font-size:13px; color:var(--navy); font-weight:700; margin-top:2px;}
.wizard-preselect-extra:empty{display:none;}
.wizard-preselect-change{
  background:none; border:none; padding:0; color:var(--link); font-size:13px; font-weight:600;
  text-decoration:underline; cursor:pointer; flex-shrink:0;
}
.wizard-preselect-change:hover, .wizard-preselect-change:focus-visible{color:var(--navy);}

.wizard-q{font-family:'Inter',sans-serif; font-weight:700; font-size:19px; color:var(--ink); margin:0;}
.wizard-q:focus-visible{outline:2.5px solid var(--blue); outline-offset:4px; border-radius:4px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}
.wizard-status{min-height:1.2em; margin-top:10px; font-size:13.5px; color:var(--ink-soft);}
.wizard-summary{display:flex; flex-direction:column; gap:0; border:1.5px solid var(--line); border-radius:14px; overflow:hidden;}
.wizard-summary .summary-row{display:grid; grid-template-columns:1fr 1.4fr; gap:12px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:14px;}
.wizard-summary .summary-row:last-child{border-bottom:none;}
.wizard-summary .summary-row:nth-child(even){background:var(--bg-soft);}
.wizard-summary dt{font-weight:600; color:var(--ink-soft);}

/* ---------- Live prijsindicatie (offertewizard, particulier) ---------- */
.prijs-blok{
  margin-top:22px; background:var(--bg-soft); border:1.5px solid var(--line); border-radius:14px;
  padding:18px 20px 16px;
}
.prijs-op-maat-label{font-size:11.5px; font-weight:700; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
.prijs-regel{display:flex; justify-content:space-between; gap:12px; font-size:14px; color:var(--ink); padding:7px 0; border-bottom:1px solid var(--line);}
.prijs-inbegrepen{color:var(--green); font-weight:700; font-size:13px;}
.prijs-totaal{display:flex; justify-content:space-between; gap:12px; font-size:15.5px; font-weight:800; color:var(--navy); padding:11px 0 2px;}
.prijs-op-maat{font-size:19px; font-weight:800; color:var(--navy); margin-top:6px;}
.prijs-disclaimer{font-size:12px; color:var(--ink-soft); line-height:1.5; margin-top:12px;}

.wizard-summary dd{margin:0; color:var(--ink); word-break:break-word;}
.map-placeholder{position:relative; aspect-ratio:16/11; min-height:220px; border-radius:16px; overflow:hidden; background:linear-gradient(135deg,#EAF3FF 0%,#F3F8FD 45%,#EFFBF3 100%);}
.map-placeholder::before{
  content:""; position:absolute; inset:0; opacity:0.7;
  background-image:
    repeating-linear-gradient(115deg, rgba(0,43,92,0.06) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(25deg, rgba(0,43,92,0.05) 0 2px, transparent 2px 64px);
}
.map-placeholder-visual{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding-bottom:15%;}
.map-pin{display:flex; flex-direction:column; align-items:center; gap:8px;}
.map-pin-icon{width:36px !important; height:36px !important; color:var(--navy); filter:drop-shadow(0 6px 10px rgba(0,43,92,0.28));}
.map-pin span{background:#fff; padding:5px 14px; border-radius:100px; font-size:12.5px; font-weight:700; color:var(--navy); box-shadow:var(--shadow-sm); white-space:nowrap;}
.map-placeholder-info{position:absolute; left:0; right:0; bottom:0; padding:18px 20px 20px; text-align:center; background:linear-gradient(to top, rgba(255,255,255,0.95) 60%, rgba(255,255,255,0));}
.map-placeholder-info p{color:var(--ink-soft); font-size:13px; margin-bottom:12px; max-width:420px; margin-left:auto; margin-right:auto;}
@media(max-width:480px){.map-placeholder{aspect-ratio:4/3;}}
.wizard-sub{color:var(--ink-soft); font-size:14px; margin-top:6px; margin-bottom:20px;}
.wizard-step[hidden]{display:none;}

.radio-cards{display:grid; grid-template-columns:1fr; gap:12px;}
.rc-wrap{display:contents;}
.rc-wrap.rc-hidden{display:none;}
@media(min-width:600px){.radio-cards.cols-2{grid-template-columns:repeat(2,1fr);} .radio-cards.cols-3{grid-template-columns:repeat(2,1fr);}}
@media(min-width:860px){.radio-cards.cols-3{grid-template-columns:repeat(3,1fr);}}
.rc-input{position:absolute; opacity:0; pointer-events:none; width:1px; height:1px;}
.rc-card{
  display:flex; flex-direction:column; gap:4px; padding:16px 16px; border:1.5px solid var(--line);
  border-radius:14px; cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .1s ease;
  position:relative;
}
.rc-card:hover{border-color:var(--blue);}
.rc-input:checked + .rc-card{border-color:var(--navy); background:var(--bg-soft); box-shadow:0 0 0 1.5px var(--navy) inset;}
.rc-input:focus-visible + .rc-card{outline:2.5px solid var(--blue); outline-offset:2px;}
.rc-icon{width:34px; height:34px; border-radius:10px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; margin-bottom:4px;}
.rc-input:checked + .rc-card .rc-icon{background:#fff;}
.rc-icon svg{width:18px !important; height:18px !important; color:var(--navy);}
.rc-label{font-weight:700; font-size:14.5px; color:var(--ink);}
.rc-desc{font-size:12.5px; color:var(--ink-soft);}
.rc-badge{
  position:absolute; top:-9px; right:12px; background:var(--grad-button); color:#fff;
  font-size:10px; font-weight:700; padding:3px 10px; border-radius:100px; letter-spacing:0.01em;
}

/* ---------- Checkbox-kaarten (extra werkzaamheden, offertewizard) ---------- */
.checkbox-cards{display:grid; grid-template-columns:1fr; gap:10px;}
@media(min-width:600px){.checkbox-cards{grid-template-columns:repeat(2,1fr);}}
.cb-card{
  display:flex; align-items:center; gap:11px; padding:13px 16px; border:1.5px solid var(--line);
  border-radius:12px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
  font-size:14px; font-weight:600; color:var(--ink);
}
.cb-card:hover{border-color:var(--blue);}
.cb-card input{width:19px; height:19px; accent-color:var(--navy); flex-shrink:0; margin:0;}
.cb-card:has(input:checked), .cb-card.cb-checked{border-color:var(--navy); background:var(--bg-soft);}
.cb-card.cb-hidden{display:none;}

/* ---------- Aantalselector-kaarten ([\u2212] N [+]) voor telbare extra opties ---------- */
.counter-cards{display:flex; flex-direction:column; gap:10px;}
@media(min-width:700px){.counter-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:10px 14px;}}
.counter-card{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 16px;
  border:1.5px solid var(--line); border-radius:12px; transition:border-color .15s ease, background .15s ease;
}
.counter-card.cb-hidden{display:none;}
.counter-info{display:flex; flex-direction:column; gap:2px; min-width:0;}
.counter-label{font-size:14px; font-weight:600; color:var(--ink);}
.counter-included-note{font-size:12.5px; font-weight:600; color:var(--green);}
.counter-price-note{font-size:12.5px; color:var(--ink-soft);}
.counter-controls{display:flex; align-items:center; gap:0; flex-shrink:0; border:1.5px solid var(--line); border-radius:100px; overflow:hidden;}
.counter-btn{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:none; background:var(--bg-soft);
  font-size:18px; font-weight:700; color:var(--navy); cursor:pointer; line-height:1; touch-action:manipulation;
}
.counter-btn:hover, .counter-btn:focus-visible{background:#E9EEF5;}
.counter-btn:active{background:#DCE4EE;}
.counter-value{
  width:34px; text-align:center; border:none; background:#fff; font-size:14.5px; font-weight:700; color:var(--ink);
  padding:0; -moz-appearance:textfield;
}
@media(max-width:599px){
  .counter-card{padding:12px 14px; gap:8px;}
  .counter-label{font-size:13.5px;}
}

/* ---------- Stap-label (vervangt vaste stappenrij, past zich aan het dynamische aantal stappen aan) ---------- */
/* "Stap X van Y: ..." blijft technisch/voor schermlezers bruikbaar, maar is
   niet langer de primaire, visueel dominante voortgangsindicator — dat is nu
   .wizard-phases hieronder. Kleiner en rustiger gemaakt, niet verwijderd. */
.wizard-step-label{font-size:11px; font-weight:600; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em; margin:0 0 14px;}

/* ---------- Klantgerichte fasenvoortgang (Woning \u2192 Extra's \u2192 Gegevens \u2192 Controleren) ---------- */
.wizard-phases{margin-bottom:18px;}
.wizard-phases-track{display:none;}
@media(min-width:760px){
  .wizard-phases-track{display:flex; align-items:center;}
  .wizard-phases-mobile{display:none;}
}
.wizard-phase{display:flex; align-items:center; gap:8px; flex:1; position:relative;}
.wizard-phase:not(:last-child)::after{
  content:''; flex:1; height:1.5px; background:var(--line); margin:0 10px; transition:background .2s ease;
}
.wizard-phase-dot{
  flex-shrink:0; width:22px; height:22px; border-radius:100px; border:1.5px solid var(--line); background:#fff;
  display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:var(--ink-soft);
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.wizard-phase-label{font-size:13px; font-weight:600; color:var(--ink-soft); white-space:nowrap; transition:color .2s ease;}
.wizard-phase.is-done .wizard-phase-dot{background:var(--green); border-color:var(--green); color:#fff;}
.wizard-phase.is-done .wizard-phase-dot::before{content:"\2713";}
.wizard-phase.is-done:not(:last-child)::after{background:var(--green);}
.wizard-phase.is-current .wizard-phase-dot{background:var(--navy); border-color:var(--navy); color:#fff;}
.wizard-phase.is-current .wizard-phase-dot::before{content:"\25cf"; font-size:9px;}
.wizard-phase.is-current .wizard-phase-label{color:var(--navy); font-weight:700;}
.wizard-phase:not(.is-done):not(.is-current) .wizard-phase-dot::before{content:"\25cb"; font-size:9px; color:var(--line);}

.wizard-phases-mobile{display:block;}
.wizard-phases-mobile-top{display:flex; align-items:baseline; justify-content:space-between; gap:10px;}
.wizard-phases-mobile-top strong{font-size:13.5px; font-weight:800; color:var(--navy); text-transform:uppercase; letter-spacing:0.03em;}
.wizard-phases-mobile-top span{font-size:12.5px; color:var(--ink-soft);}
.wizard-phases-mobile-bar{height:4px; background:var(--line); border-radius:100px; overflow:hidden; margin-top:8px;}
.wizard-phases-mobile-fill{height:100%; width:0%; background:var(--grad-button); border-radius:100px; transition:width .25s ease;}


.wizard-nav{
  display:flex; justify-content:space-between; gap:10px; margin-top:28px; padding:16px 0;
  border-top:1px solid var(--line); position:sticky; bottom:0; background:#fff; z-index:20;
  box-shadow:0 -10px 16px -4px rgba(0,43,92,0.06);
}
.wizard-nav [hidden]{display:none !important;}
.wizard-step[hidden]{display:none !important;}
.wizard-nav .wizard-next, .wizard-nav .wizard-submit{margin-left:auto;}

@media(max-width:899px){
  /* Geen fixed/sticky meer op mobiel: de navigatie staat weer gewoon in de
     normale documentflow en scrolt mee met de pagina. Volgende (of de
     verzendknop) wordt een normale, volledig-breedte knop direct onder de
     laatste stapoptie; Terug staat daaronder als subtiele link. DOM-volgorde
     blijft ongewijzigd (back, next, submit) — column-reverse zorgt dat
     Volgende/Verzenden visueel bovenaan komt en Terug eronder, puur via CSS. */
  .wizard-nav{
    position:static; left:auto; right:auto; bottom:auto; margin-top:24px; padding:0;
    border-top:none; background:transparent; z-index:auto; box-shadow:none;
    display:flex; flex-direction:column-reverse; align-items:stretch; gap:12px;
  }
  .wizard-nav .wizard-next, .wizard-nav .wizard-submit{width:100%; flex:none; margin-left:0;}
  .wizard-nav .wizard-back{
    width:auto; flex:none; margin-left:0; align-self:center;
    background:none; border:none; box-shadow:none; color:var(--link); font-weight:600;
    font-size:13.5px; padding:6px 10px;
  }
  .wizard-nav .wizard-back::before{content:"\2190 "; }
  .wizard-nav .wizard-back:hover, .wizard-nav .wizard-back:focus-visible{color:var(--navy);}
}
@media(max-width:599px){
  .wizard-form{padding:20px 16px; border-radius:16px;}
  .wizard-q{font-size:17px;}
  .radio-cards{gap:10px;}
  .rc-card{padding:14px;}
}
.row2{display:grid; grid-template-columns:1fr; gap:14px;}
@media(min-width:560px){.row2{grid-template-columns:1fr 1fr;}}
label{font-size:13px; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:6px;}
input,select,textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:12px 13px; font-family:'Inter',sans-serif; font-size:16px; background:#fff; color:var(--ink);}
textarea{resize:vertical; min-height:90px;}
input:focus,select:focus,textarea:focus{border-color:var(--link);}
.hidden-field{position:absolute; left:-9999px;}

/* ---------- FOOTER ---------- */
footer.site-footer{background:var(--bg-navy); color:var(--ink-on-navy); padding:44px 0 22px;}
.footer-top-3col{display:grid; grid-template-columns:1fr; gap:32px; padding-bottom:26px; border-bottom:1px solid rgba(255,255,255,0.14);}
@media(min-width:860px){.footer-top-3col{grid-template-columns:1.1fr 0.75fr 1.15fr;}}
.footer-brand-col img{height:30px; filter:brightness(0) invert(1);}
.footer-tagline{font-size:13.5px; color:var(--ink-on-navy); margin-top:12px; max-width:320px; line-height:1.55;}
.footer-meta{font-size:11.5px; color:rgba(201,210,238,0.6); margin-top:16px;}
.footer-col h4{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:#fff; margin-bottom:14px;}
.footer-col a{display:block; text-decoration:none; color:var(--ink-on-navy); font-size:14px; margin-bottom:9px; transition:color .15s ease;}
.footer-col a:hover{color:#fff;}

.footer-form-intro{font-size:12.5px; color:rgba(201,210,238,0.8); margin-top:6px; margin-bottom:14px; line-height:1.45;}
.footer-form{display:grid; gap:9px;}
.footer-form-row{display:grid; grid-template-columns:1fr 1fr; gap:9px;}
@media(max-width:480px){.footer-form-row{grid-template-columns:1fr;}}
.footer-form input, .footer-form textarea{
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.18); border-radius:9px;
  padding:9px 12px; font-family:'Inter',sans-serif; font-size:13px; color:#fff; width:100%;
}
.footer-form input::placeholder, .footer-form textarea::placeholder{color:rgba(201,210,238,0.55);}
.footer-form input:focus, .footer-form textarea:focus{border-color:#8FE0C1; outline:none;}
.footer-form textarea{resize:vertical;}
.footer-form-submit{width:100%; margin-top:2px; justify-content:center; padding:10px 20px; font-size:13.5px;}

.footer-bottom{display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; padding-top:22px; font-size:12.5px; color:rgba(201,210,238,0.7);}
.footer-copy{display:flex; flex-direction:column; gap:4px;}
.footer-legal-links{display:flex; gap:18px; flex-wrap:wrap;}
.footer-legal-links a{color:rgba(201,210,238,0.7); text-decoration:none;}
.footer-legal-links a:hover{color:#fff;}

/* Zwevende WhatsApp-knop */
.whatsapp-float{
  position:fixed; right:24px; bottom:24px; z-index:150;
  width:58px; height:58px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 28px -6px rgba(37,211,102,0.55), 0 2px 8px rgba(0,0,0,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float::before{
  content:''; position:absolute; inset:0; border-radius:50%; background:#25D366;
  animation:whatsappPulse 2.6s ease-out infinite; z-index:-1;
}
@keyframes whatsappPulse{
  0%{transform:scale(1); opacity:0.55;}
  100%{transform:scale(1.7); opacity:0;}
}
.whatsapp-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 14px 32px -6px rgba(37,211,102,0.65), 0 4px 10px rgba(0,0,0,0.2);}
.whatsapp-float svg{width:28px; height:28px; color:#fff;}
@media (prefers-reduced-motion: reduce){.whatsapp-float::before{animation:none;}}
.whatsapp-tooltip{
  position:absolute; right:70px; top:50%; transform:translateY(-50%) translateX(6px);
  background:var(--navy); color:#fff; font-size:13px; font-weight:600; white-space:nowrap;
  padding:8px 14px; border-radius:8px; opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.whatsapp-tooltip::after{content:''; position:absolute; left:100%; top:50%; transform:translateY(-50%); border:6px solid transparent; border-left-color:var(--navy);}
.whatsapp-float:hover .whatsapp-tooltip{opacity:1; transform:translateY(-50%) translateX(0);}
@media(max-width:899px){
  .whatsapp-float{right:16px; bottom:92px; width:52px; height:52px; transition:bottom .2s ease;}
  .whatsapp-float svg{width:25px; height:25px;}
  .whatsapp-tooltip{display:none;}
  /* Zolang de offertewizard in beeld is, staat de vaste Volgende/Terug-balk
     onderaan het scherm — de WhatsApp-knop schuift dan omhoog zodat de twee
     elkaar nooit overlappen (zie de IntersectionObserver in main.js). */
  body.wizard-nav-active .whatsapp-float{bottom:128px;}
}

/* ---------- misc ---------- */
.prose{font-size:16px; color:var(--ink-soft); line-height:1.75;}
.prose h2{color:var(--ink); margin-top:36px; margin-bottom:12px; font-size:24px;}
.prose ul{margin-top:14px; padding-left:20px;}
.prose li{margin-bottom:8px;}
.two-col{display:grid; grid-template-columns:1fr; gap:48px; align-items:start;}
@media(min-width:900px){.two-col{grid-template-columns:1.1fr 0.9fr;}}
.breadcrumb{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
.breadcrumb a{text-decoration:none; color:var(--ink-soft);}
.breadcrumb a:hover{color:var(--blue);}
.page-hero{padding:56px 0 20px;}
.page-hero h1{font-size:clamp(32px,4.4vw,46px);}
.page-hero p.lead{font-size:17px; color:var(--ink-soft); max-width:560px; margin-top:16px;}

.reveal{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* ---------- COOKIEBANNER ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:300; background:#fff;
  border-top:1px solid var(--line); box-shadow:0 -8px 24px -8px rgba(0,43,92,0.15);
  padding:18px 20px; animation:cookieSlideUp .3s ease; transform:none;
}
.cookie-banner[hidden]{display:none;}
@keyframes cookieSlideUp{from{transform:translateY(100%);} to{transform:translateY(0);}}
.cookie-banner-inner{
  max-width:1100px; margin:0 auto; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.cookie-banner-inner p{flex:1; min-width:240px; font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin:0;}
.cookie-banner-inner p a{color:var(--link); font-weight:600; text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-shrink:0;}
@media(max-width:560px){
  .cookie-banner-inner{flex-direction:column; align-items:stretch;}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn{flex:1;}
}