@import url("/Stijl/merk-tokens.css");
/* home.css - stijl van de vernieuwde homepage (1-op-1 uit Figma Website,
   frames Homepage Desktop 1440 v4.78 8257:11892 / Tablet 768 v5.79
   8257:11903 / Mobiel 390 v5.82 8257:11914 [live]). Tokens komen uit de
   Figma-collecties (naam in commentaar). Juridische pagina's en 404
   gebruiken dit bestand plus document.css waar nodig.

   Kleuren komen uit Merk/Tokens/tokens.css. De server geeft dat bestand
   op /Stijl/merk-tokens.css. Een kleur wijzigen doe je in Merk.
   Deze namen wijzen alleen door. */

/* Self-hosted (OFL, latin). Fraunces 600 voor grote koppen, Fraunces Tekst 600 voor H4 t/m H6, Public Sans voor tekst. */
@font-face{font-family:'Public Sans';src:url('../assets/fonts/public-sans-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url('../assets/fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces Tekst';src:url('../assets/fonts/fraunces-600-tekst.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

:root{
  /* Kleuren uit Merk/Tokens/tokens.css. Geen eigen hex. */
  --vlak-pagina:var(--vlak--pagina);
  --vlak-kaart:var(--vlak--kaart);
  --vlak-gedempt:var(--vlak--gedempt);
  --vlak-primair:var(--vlak--primair);
  --vlak-primair-hover:var(--vlak--primair-hover);
  --vlak-primair-zacht:var(--vlak--primair-zacht);
  --vlak-omgekeerd:var(--vlak--omgekeerd);
  --vlak-omgekeerd-overlay:color-mix(in srgb, var(--vlak-omgekeerd) 88%, transparent);
  --vlak-secundair:var(--vlak--secundair);
  --vlak-secundair-hover:var(--vlak--secundair-hover);
  --vlak-informatie-zacht:var(--vlak--informatie-zacht);
  --icoon-secundair:var(--icoon--secundair);
  --tekst-standaard:var(--tekst--standaard);
  --tekst-gedempt:var(--tekst--gedempt);
  --tekst-placeholder:var(--tekst--placeholder);
  --tekst-omgekeerd:var(--tekst--omgekeerd);
  --tekst-op-omgekeerd:var(--tekst--op-omgekeerd);
  --neutraal-400:var(--rand--standaard);
  --tekst-primair:var(--tekst--primair);
  --tekst-uitgeschakeld:var(--tekst--uitgeschakeld);
  --tekst-fout:var(--tekst--fout);
  --tekst-succes:var(--tekst--succes);
  --vlak-succes-zacht:var(--vlak--succes-zacht);
  --icoon-succes:var(--icoon--succes);
  --icoon-primair:var(--icoon--primair);
  --icoon-standaard:var(--icoon--standaard);
  --icoon-gedempt:var(--icoon--gedempt);
  --rand-standaard:var(--rand--standaard);
  --rand-hover:var(--rand--hover);
  --rand-focus:var(--rand--focus);
  --rand-fout:var(--rand--fout);
  --primair-100:var(--vlak--primair-zacht);
  --primair-600:var(--vlak--primair);
  /* Maten uit Merk. De binnenradius is één lijn binnen de kaartradius. */
  --knop-radius:var(--maat-knop-radius);
  --kaart-radius:var(--maat-kaart-radius);
  --kaart-radius-binnen:calc(var(--maat-kaart-radius) - var(--maat-lijn-1));
  /* Vaste Kaartvorm-snede (Figma 21 x 31.5). Nooit een percentage van de
     kaart: hoek en beenlengte blijven gelijk als een kaart breder of hoger wordt. */
  --kaart-snede-x:21px;
  --kaart-snede-y:31.5px;
  /* Een clip voor alle snijkaarten: 14px-afschuining + vaste snede. Hoogte
     zit alleen in 100%; hug/height wist de radius niet. shape() hieronder
     zet dezelfde maten om in echte bogen. */
  --kaart-clip:polygon(var(--kaart-radius) 0,calc(100% - var(--kaart-radius)) 0,100% var(--kaart-radius),100% calc(100% - var(--kaart-snede-y)),calc(100% - var(--kaart-snede-x)) 100%,var(--kaart-radius) 100%,0 calc(100% - var(--kaart-radius)),0 var(--kaart-radius));
  --kaart-clip-binnen:polygon(var(--kaart-radius-binnen) 0,calc(100% - var(--kaart-radius-binnen)) 0,100% var(--kaart-radius-binnen),100% calc(100% - var(--kaart-snede-y)),calc(100% - var(--kaart-snede-x)) 100%,var(--kaart-radius-binnen) 100%,0 calc(100% - var(--kaart-radius-binnen)),0 var(--kaart-radius-binnen));
  --marge:var(--maat-pagina-marge);
  /* Schaduwen uit Merk. Het filter is dezelfde schaduw, voor clip-path. */
  --schaduw-vlak:var(--stijl-schaduw-vlak);
  --schaduw-vlak-filter:drop-shadow(0 0 3px var(--schaduw-4)) drop-shadow(0 0 2px var(--schaduw-6));
  --schaduw-zweef:var(--stijl-schaduw-zweef);
  --schaduw-zweef-filter:drop-shadow(0 0 6px var(--schaduw-4)) drop-shadow(0 0 12px var(--schaduw-10));
  --schaduw-modal:var(--stijl-schaduw-modal);
  /* Fonts en tekstschaal uit Merk. */
  --font-kop:var(--font);
  --font-kop-klein:var(--font-klein);
  --font-cijfer:var(--font);
  --font-tekst:var(--font-2);
  --gewicht-h1:var(--font-gewicht-hero);
  --gewicht-kop:var(--font-gewicht-kop);
  --gewicht-tekst:var(--font-gewicht);
  --hero-grootte:var(--schaal-hero);
  --hero-regelafstand:var(--schaal-hero-regel);
  --hero-tracking:var(--schaal-hero-tracking);
  --h1-grootte:var(--schaal-h1);
  --h1-regelafstand:var(--schaal-h1-regel);
  --h1-tracking:var(--schaal-h1-tracking);
  --h3-grootte:var(--schaal-h3);
  --h3-regelafstand:var(--schaal-h3-regel);
  --h3-tracking:var(--schaal-h3-tracking);
  --h4-grootte:var(--schaal-h4);
  --h4-regelafstand:var(--schaal-h4-regel);
  --h5-grootte:var(--schaal-h5);
  --h5-regelafstand:var(--schaal-h5-regel);
  --h6-grootte:var(--schaal-h6);
  --h6-regelafstand:var(--schaal-h6-regel);
  --pg-md-grootte:var(--schaal-pg-md);
  --pg-md-regelafstand:var(--schaal-pg-md-regel);
  --pg-sm-grootte:var(--schaal-pg-sm);
  --pg-sm-regelafstand:var(--schaal-pg-sm-regel);
  --label-md-grootte:var(--schaal-label-md);
  --label-md-regelafstand:var(--schaal-label-md-regel);
}

*{box-sizing:border-box;margin:0;padding:0}
/* Anker-scroll loopt via site-nav.js (850ms, ease-in-out kubiek). Geen
   html{scroll-behavior:smooth}: die is te snel en niet stuurbaar. */
/* Ankerdoelen (#pakketten = .prijzen, #aanvraag = .formulier): 96px balk +
   24px lucht. De balk is sticky, anders landt #pakketten eronder. */
#pakketten,#aanvraag{scroll-margin-top:120px}
body{font-family:var(--font-tekst);color:var(--tekst-standaard);background:var(--vlak-kaart);line-height:1.5}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-kop);font-weight:var(--gewicht-kop);line-height:1.2}
h4{font-family:var(--font-kop-klein);font-weight:var(--gewicht-kop);line-height:1.2}
h1{font-weight:var(--gewicht-h1)}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--marge);padding-right:var(--marge)}
.punt{color:var(--primair-600)}
.ico{width:16px;height:16px;flex:0 0 auto}

/* Knoppen (component Knop, Soort=Primair, Maat=Standaard 40) */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;
  background:var(--vlak-primair);color:var(--tekst-omgekeerd);
  font:var(--gewicht-tekst) var(--label-md-grootte)/var(--label-md-regelafstand) var(--font-tekst);
  border:0;border-radius:var(--knop-radius);cursor:pointer;transition:background .15s}
.knop:hover{background-color:var(--vlak-primair-hover)}
.knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
/* Langzame lichte baan over de Begin-knop, links naar rechts. */
.nav .wrap>.knop,.zijmenu .knop,.formulier .knop,.flow-stap .knop{
  background-image:linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--tekst-omgekeerd) 42%, transparent) 50%, transparent 70%);
  background-size:220% 100%;
  background-repeat:no-repeat;
  animation:knop-flow 4.5s ease-in-out infinite}
@keyframes knop-flow{
  0%{background-position:130% 0}
  100%{background-position:-30% 0}}
@media(prefers-reduced-motion:reduce){
  .nav .wrap>.knop,.zijmenu .knop,.formulier .knop,.flow-stap .knop{animation:none;background-image:none}}
/* Knop Soort=Secundair: witte omrande knop (Figma-component: .knop.omlijnd) */
.knop.omlijnd{background:var(--vlak-kaart);color:var(--tekst-standaard);border:1px solid var(--rand-standaard);font-weight:400;font-size:16px}
.knop.omlijnd:hover{background:var(--vlak-pagina)}

/* Merkstreepje + eyebrow (signatuur) */
.streepje{width:40px;height:3px;flex:0 0 auto;border-radius:2px;background:var(--vlak-primair)}
.eyebrow{font:var(--gewicht-kop) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-primair);text-transform:uppercase}

/* ===== Navigatie ===== */
/* Hide-on-scroll-down / show-on-scroll-up: sticky houdt de plek in de flow
   (geen layout-sprong in de hero). Class .nav-weg schuift hem omhoog weg. */
.nav{position:sticky;top:0;z-index:50;background:var(--vlak-kaart);border-bottom:1px solid var(--rand-standaard);
  transition:transform .25s ease}
.nav.nav-weg{transform:translateY(-100%)}
@media(prefers-reduced-motion:reduce){.nav{transition:none}}
.nav .wrap{display:flex;align-items:center;gap:24px;height:96px}
/* Logo niet laten knijpen: globale img{max-width:100%} + flex-shrink
   zou het 147x28-beeld platdrukken zodra de balk krap wordt. */
.nav .logo{height:28px;width:auto;flex-shrink:0;object-fit:contain;max-width:none}
.nav-logo{margin-right:auto;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:28px;flex-shrink:0}
/* Desk-CTA blijft één regel en krimpt niet mee (Compact zet daarna 240).
   Mob ≤640 wisselt naar .cta-label-kort «Begin (gratis)». */
.nav .wrap > .knop{white-space:nowrap;flex-shrink:0}
.cta-label-kort{display:none}
.nav-links a{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.nav-links a:hover{color:var(--tekst-primair)}
/* Twee keer hetzelfde secundaire recept (wit vlak, rand, radius): de
   portal-inlogknop met tekst (component Knop, Soort=Secundair) op desktop, en
   de portaal-icoonknop (kit-component Icoonknop, Maat=Standaard) vanaf tablet.
   Het gedeelde deel staat daarom een keer; daaronder alleen de verschillen. */
a.nav-portal,.nav-portaal-ico{align-items:center;justify-content:center;
  background:var(--vlak-kaart);border:1px solid var(--rand-standaard);border-radius:var(--knop-radius);
  color:var(--tekst-gedempt)}
a.nav-portal:hover,.nav-portaal-ico:hover{background:var(--vlak-pagina)}
a.nav-portal:hover .ico,.nav-portaal-ico:hover .ico{color:var(--tekst-primair)}
a.nav-portal:focus-visible,.nav-portaal-ico:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
a.nav-portal{display:inline-flex;gap:8px;height:40px;padding:0 20px;
  font:var(--gewicht-tekst) var(--label-md-grootte)/var(--label-md-regelafstand) var(--font-tekst)}
.nav-portal .ico,.nav-portaal-ico .ico{color:var(--icoon-gedempt)}
.nav-portal .ico{width:18px;height:18px}
/* de icoonknop is vierkant zonder tekst en verschijnt pas als de navlinks
   wijken; op desktop staat de tekstknop hierboven er al */
.nav-portaal-ico{display:none;width:40px;height:40px}
.nav-portaal-ico .ico{width:16px;height:16px}
/* Contact-uitklapper: knop met drie directe acties (WhatsApp, bellen, mailen).
   Zelfde kaartrecept als de andere witte vlakken: Kleur/Vlak/Kaart, Rand/
   Standaard, Radius/Klein en de zweefschaduw. */
.contact-uitklap{position:relative;display:flex}
.contact-knop{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;
  cursor:pointer;font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.contact-knop:hover{color:var(--tekst-primair)}
.contact-knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:4px;border-radius:2px}
.nav .pijltje,.nav .pijltje-nest{color:var(--icoon-gedempt)}
.nav .diensten-knop:hover .pijltje,.nav .diensten-nestknop:hover .pijltje-nest,
.nav .contact-knop:hover .pijltje{color:var(--tekst-primair)}
.contact-knop .pijltje{width:14px;height:14px;transition:transform .15s}
.contact-knop[aria-expanded="true"] .pijltje{transform:rotate(180deg)}
.contact-menu{position:absolute;top:calc(100% + 16px);left:0;z-index:90;
  min-width:236px;padding:8px;display:flex;flex-direction:column;
  background:var(--vlak-kaart);border:1px solid var(--rand-standaard);
  border-radius:var(--kaart-radius);box-shadow:var(--schaduw-zweef)}
.contact-menu[hidden]{display:none}
/* Zelfde rij als Diensten: 12/20, gedempt, hover merk. Het icoon en de
   tweede regel blijven, want Contact toont een nummer of adres. */
.contact-menu a{display:grid;grid-template-columns:16px 1fr;column-gap:8px;row-gap:0;
  align-content:center;padding:8px;
  font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.contact-menu a:hover{background:var(--vlak-pagina);color:var(--tekst-primair)}
.contact-menu a:hover .ico{color:var(--tekst-primair)}
.contact-menu a:focus-visible{outline:2px solid var(--primair-600);outline-offset:-2px}
.contact-menu .ico{width:16px;height:16px;grid-row:span 2;align-self:center;color:var(--icoon-gedempt)}
.contact-menu .detail{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
@media(prefers-reduced-motion:reduce){.contact-knop .pijltje{transition:none}}

/* Diensten-uitklapper (Figma 5917:5337 + flyout 5917:5342). Zelfde knoprecept
   als Contact; het nest Boekhouding -> ZZP/VOF/BV staat op desktop altijd
   open, in het zijmenu als accordeon. */
.diensten-uitklap{position:relative;display:flex}
.diensten-knop,.diensten-nestknop{display:inline-flex;align-items:center;gap:4px;padding:0;border:0;background:none;
  cursor:pointer;font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.diensten-knop:hover,.diensten-nestknop:hover{color:var(--tekst-primair)}
.diensten-knop:focus-visible,.diensten-nestknop:focus-visible{outline:2px solid var(--primair-600);outline-offset:4px;border-radius:2px}
.diensten-knop .pijltje,.diensten-nestknop .pijltje-nest{width:14px;height:14px;transition:transform .15s}
.diensten-knop[aria-expanded="true"] .pijltje{transform:rotate(180deg)}
/* Nest-chevron blijft omlaag (Figma 5917:5342 / 5918:88, icoon chevron-omlaag). */
.diensten-menu{position:absolute;top:calc(100% + 16px);left:0;z-index:90;
  min-width:188px;padding:8px;display:flex;flex-direction:column;
  background:var(--vlak-kaart);border:1px solid var(--rand-standaard);
  border-radius:var(--kaart-radius);box-shadow:var(--schaduw-zweef)}
.diensten-menu[hidden]{display:none}
.diensten-menu a,.diensten-nestknop{display:flex;align-items:center;width:100%;
  padding:8px;font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);text-align:left}
.diensten-menu a:hover,.diensten-nestknop:hover{background:var(--vlak-pagina);color:var(--tekst-primair)}
.diensten-menu a:focus-visible{outline:2px solid var(--primair-600);outline-offset:-2px}
.diensten-menu a[aria-disabled="true"]{cursor:default}
.diensten-nestlijst{display:flex;flex-direction:column}
.diensten-nestlijst a{padding:6px 8px 6px 24px}
.diensten-nestknop{gap:4px}
@media(prefers-reduced-motion:reduce){
  .diensten-knop .pijltje,.diensten-nestknop .pijltje-nest{transition:none}
}

/* In het donkere zijmenu klapt dezelfde uitklapper INLINE open: geen zwevend
   kaartje in een smal paneel, maar een ingesprongen lijstje. */
.zijmenu .diensten-uitklap,.zijmenu .contact-uitklap{display:block}
.zijmenu .diensten-knop,.zijmenu .diensten-nestknop{width:100%;height:48px;justify-content:flex-start;gap:6px;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd);padding:0 8px}
.zijmenu .diensten-knop:hover,.zijmenu .diensten-nestknop:hover{color:var(--tekst-omgekeerd);background:none}
.zijmenu .diensten-menu{position:static;transform:none;min-width:0;padding:0 0 8px 8px;
  background:none;border:0;border-radius:0;box-shadow:none}
.zijmenu .diensten-menu a,.zijmenu .diensten-nestknop{min-height:40px;height:40px;padding:0 8px;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu .diensten-nestlijst a{height:36px;min-height:36px;padding:0 8px 0 24px}
.zijmenu .diensten-menu a:hover,.zijmenu .diensten-nestknop:hover{background:rgba(255,255,255,.08)}
.zijmenu .contact-knop{width:100%;height:48px;justify-content:flex-start;gap:6px;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-knop:hover{color:var(--tekst-omgekeerd)}
.zijmenu .contact-menu{position:static;transform:none;min-width:0;padding:0 0 8px 8px;
  background:none;border:0;border-radius:0;box-shadow:none}
.zijmenu .contact-menu a{min-height:52px;padding:0 8px;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-menu a:hover{background:rgba(255,255,255,.08)}
.zijmenu .contact-menu .ico{color:var(--tekst-op-omgekeerd)}
.zijmenu .contact-menu .detail{color:var(--neutraal-400)}

/* hamburger: pas zichtbaar zodra de tekstlinks verdwijnen.
   Compact/Mob (Figma 6315:17593 / 6315:18038): icoon MIN-links in 40x40,
   pad 0, zodat abs X = content-left (Tab 48 / Mob 20). Geen +8 van center.
   Desk blijft display:none. */
.menu-knop{display:none;align-items:center;justify-content:flex-start;padding:0;width:40px;height:40px;
  border:0;background:none;cursor:pointer;color:var(--icoon-gedempt);border-radius:var(--knop-radius)}
.menu-knop .ico{width:24px;height:24px;color:var(--icoon-gedempt)}
.menu-knop:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}

/* ===== Zijmenu (tablet/mobiel): donker paneel, schermhoog, vanaf links ===== */
.zijmenu-overlay{position:fixed;inset:0;z-index:100;background:color-mix(in srgb, var(--vlak-omgekeerd) 55%, transparent);
  opacity:0;transition:opacity .3s ease}
.zijmenu-overlay.open{opacity:1}
.zijmenu-overlay[hidden]{display:none}
.zijmenu{position:absolute;left:0;top:0;bottom:0;width:320px;max-width:85vw;
  background:var(--vlak-omgekeerd);padding:20px 24px 32px;display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .35s cubic-bezier(.25,.6,.3,1)}
.zijmenu-overlay.open .zijmenu{transform:none}
/* Koprij 2255:84: h-68, items-center. Logo tablet = gesloten header 147x28. */
.zijmenu-kop{display:flex;align-items:center;justify-content:space-between;height:68px;flex-shrink:0;margin-bottom:8px}
.zijmenu-kop img{width:147px;height:28px}
.zijmenu-sluit{border:0;background:none;cursor:pointer;width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--tekst-op-omgekeerd);border-radius:var(--knop-radius)}
.zijmenu-sluit .ico{width:20px;height:20px}
.zijmenu-sluit:focus-visible,.zijmenu a:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
.zijmenu>a:not(.knop):not(.zijmenu-portaal){display:flex;align-items:center;height:48px;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.zijmenu>a:not(.knop):not(.zijmenu-portaal):hover{color:var(--tekst-omgekeerd)}
.zijmenu-lijn{height:1px;background:var(--tekst-gedempt);margin:12px 0 20px} /* Neutraal/800 */
.zijmenu .knop{width:100%}
.zijmenu-portaal{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;
  margin-top:10px;background:var(--vlak-kaart);color:var(--tekst-standaard);
  font:var(--gewicht-tekst) var(--label-md-grootte)/var(--label-md-regelafstand) var(--font-tekst);
  border-radius:var(--knop-radius)}
.zijmenu-portaal .ico{width:18px;height:18px}
.zijmenu-portaal:hover{background:var(--vlak-pagina)}
/* watermerk linksonder (zoals de versieregel in de portal-zijbalk) */
.zijmenu-watermerk{margin-top:auto;font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:color-mix(in srgb, var(--tekst-op-omgekeerd) 45%, transparent)}
@media(prefers-reduced-motion:reduce){
  .zijmenu-overlay,.zijmenu{transition:none}
}

/* ===== Lichte hero met offerteformulier ===== */
.hero{position:relative;background:var(--vlak-pagina)}
.hero .wrap{display:flex;align-items:stretch;justify-content:space-between;gap:56px;padding-top:72px;padding-bottom:72px;min-height:0}
.hero-tekst{flex:1 1 auto;max-width:none;min-width:0;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;justify-content:space-between;gap:20px}
/* Herotekst 8481:7452: een kolom, gap 20 desk / 14 tab+mob. Bullets horen
   bij diezelfde stapel (geen extra chip, icoon 16 Icoon/Standaard). */
.hero-tekst h1{font-size:var(--hero-grootte);line-height:var(--hero-regelafstand);letter-spacing:var(--hero-tracking);color:var(--tekst-standaard)}
/* Desktop breekt voor "Op tijd." Tablet en mobiel laten de titel doorlopen. */
.hero-tekst h1 br{display:inline}
.hero-tekst .sub{margin:0;font:var(--gewicht-tekst) var(--schaal-pg-lg)/var(--schaal-pg-lg-regel) var(--font-tekst);color:var(--tekst-standaard)}
.hero-punten{list-style:none;display:flex;flex-direction:column;align-items:flex-start;gap:var(--maat-stapel-standaard);width:100%;margin:0;padding:0}
.hero-punten li{list-style:none;display:flex;flex-direction:row;align-items:center;gap:var(--maat-stapel-klein);width:100%;font:var(--gewicht-tekst) var(--schaal-pg-lg)/var(--schaal-pg-lg-regel) var(--font-tekst);color:var(--tekst-standaard)}
.hero-punten li::marker{content:none}
.hero-punten .icoon{order:0;width:var(--maat-icoon-32);height:var(--maat-icoon-32);flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--maat-radius-pill);background:var(--vlak-primair-zacht);color:var(--tekst-primair)}
.hero-punten .icoon img{width:var(--maat-icoon-20);height:var(--maat-icoon-20)}

/* het formulier: Kaartvorm kit 5763:79 als absolute achtergrond
   (snede 21x31.5 vast, radius 8 LB/LO/RB). Inhoud hugt per type-groep.
   Desk default 6011:2476 = 400x558. Tab/mob 586 (kenmerken gestapeld). */
.formulier{width:480px;min-height:0;flex:0 0 auto;align-self:flex-start;box-shadow:none;border-radius:var(--kaart-radius);overflow:visible;position:relative;isolation:isolate}
.formulier-vlak{position:relative;z-index:1;min-height:0;padding:28px;display:flex;flex-direction:column;gap:14px;color:var(--tekst-standaard);background:transparent}
/* Fout-hints maken de kaart hoger (Desk leeg 5836:6259 = 646). Hug. */
.formulier:has(.veld-hint:not([hidden])),
.formulier:has(.veld-hint:not([hidden])) .formulier-vlak{min-height:0;height:auto}
/* Start-knoppen focussen #aanvraag (tabindex=-1). Geen omtrek om de hele
   kaart: focus en fout horen op de velden en de knop. */
.formulier:focus,.formulier:focus-visible{outline:none}
#offerteformulier:focus,#offerteformulier:focus-visible,
#offerteformulier:invalid,#offerteformulier:user-invalid{outline:none}
/* Eén zachte puls na een Start-klik (Figma knop 5163:1503 -> Proefformulier
   5163:1519). Scale blijft klein zodat de kaart op zijn plek blijft. */
@keyframes formulier-pulse{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.04)}
}
/* Scale op de binnenlagen, niet op .formulier: de wizard meet die wrapper
   via getBoundingClientRect en mag niet meeschalen. */
.formulier.formulier-pulse>.kaartvorm,
.formulier.formulier-pulse>.formulier-vlak{
  transform-origin:center center;
  animation:formulier-pulse .6s ease-in-out;
}
@media(prefers-reduced-motion:reduce){
  .formulier.formulier-pulse>.kaartvorm,
  .formulier.formulier-pulse>.formulier-vlak{animation:none}
}
.formulier-kop{display:flex;align-items:center;justify-content:space-between;gap:var(--maat-stapel-klein)}
.formulier h2{font-family:var(--font-kop);font-size:var(--h3-grootte);line-height:var(--h3-regelafstand)}
.pakketten-link{flex:0 0 auto;color:var(--tekst-primair);font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);text-decoration:none;white-space:nowrap}
.pakketten-link:hover{text-decoration:underline}
@media(max-width:1180px){
  .formulier-kop{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--maat-stapel-krap)}
  .formulier-kop h2{flex:1 1 auto;min-width:0}
  .pakketten-link{display:inline;margin-left:0;align-self:flex-end}
  #offerteformulier .veld{position:relative}
  #offerteformulier .veld>label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
}
@media(min-width:400px) and (max-width:640px){
  .formulier-kop{align-items:center}
  .pakketten-link{align-self:center}
}
.form-kenmerken{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;align-items:center;width:100%}
.form-kenmerk{display:flex;align-items:center;gap:8px;margin:0;
  font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-standaard);white-space:nowrap}
.form-kenmerk img{width:16px;height:16px;flex:0 0 auto;display:block}
.formulier .sub{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.veld{display:flex;flex-direction:column;gap:6px}
.veld label{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.veld .verplicht{color:var(--tekst-fout)}
.veld input,.veld select,.pakket-kies{height:40px;padding:0 12px;border:1px solid var(--rand-standaard);border-radius:var(--knop-radius);
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-standaard);background:var(--vlak-kaart);width:100%}
.veld input::placeholder{color:var(--tekst-placeholder)}
.veld input:focus,.veld select:focus,.pakket-kies:focus{outline:none;border-color:var(--primair-600);box-shadow:0 0 0 2px var(--primair-100)}
.pakket-kies{display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer;appearance:none;-webkit-appearance:none}
.pakket-kies:not([data-gekozen]) #of-pakket-label{color:var(--tekst-placeholder)}
.pakket-kies .ico{width:16px;height:16px;color:var(--icoon-gedempt);flex:0 0 auto}
/* Caption Fout (12/16, Tekst/Fout). Niet Pg-sm of Gedempt. */
.veld-hint{margin:0;font:var(--gewicht-tekst) var(--pg-sm-grootte,12px)/var(--pg-sm-regelafstand,20px) var(--font-tekst);color:var(--tekst-fout)}
.veld-hint[hidden]{display:none}
/* Invoerveld Fout 37:27 / Select Fout 5836:6274: Rand/Fout 1.5px inside.
   Button .pakket-kies krijgt dezelfde rand; geen UA-grijs of :invalid-rood.
   Fout-focus houdt die rand, geen Merk-focusring. */
.veld.fout input,.veld.fout .pakket-kies{border:1.5px solid var(--rand-fout);background:var(--vlak-kaart);box-shadow:none;outline:none}
.veld.fout input:focus,.veld.fout input:focus-visible,.veld.fout input:invalid,.veld.fout input:user-invalid,
.veld.fout .pakket-kies:focus,.veld.fout .pakket-kies:focus-visible{border:1.5px solid var(--rand-fout);box-shadow:none;outline:none}
.formulier .knop{width:100%}
.formulier .privacy{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);text-align:center}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ===== Donkere klantenstrip: Onze [merken] klanten. ===== */
.merkenstrip{background:var(--vlak-omgekeerd);overflow:hidden}
.merkenstrip .wrap{display:flex;align-items:center;justify-content:center;gap:32px;min-height:92px;padding-top:18px;padding-bottom:18px}
.merkenstrip .zin{font-family:var(--font-kop);font-weight:var(--gewicht-kop);
  font-size:var(--h3-grootte);line-height:var(--h3-regelafstand);color:var(--tekst-omgekeerd);flex:0 0 auto}
/* Logo-marquee: labels vast aan de zijkanten, logo's schuiven rechts -> links in een geclipte baan */
.merken-baan{flex:1 1 auto;min-width:0;overflow:hidden}
.merken-spoor{display:flex;width:max-content;animation:merken-schuif 28s linear infinite}
.merkenstrip:hover .merken-spoor{animation-play-state:paused}
.merken-set{display:flex;align-items:center;gap:52px;padding-right:52px;flex:0 0 auto}
/* Figma Logo-track 5163:1534: rij 44 hoog, icoon+tekst gap 10, opacity .6 */
.merk{display:flex;align-items:center;gap:10px;height:44px;flex:0 0 auto;opacity:.6}
.merk img{display:block;flex:0 0 auto}
.merk > img:only-child{height:36px;width:auto}
.merk-ico{height:36px;width:auto}
.merk-tekst{height:12px;width:auto}
.merk-tekst-hoog{height:26px}
@keyframes merken-schuif{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.merken-spoor{animation:none}}

/* ===== Reviews (Figma 6121:5758 desk / 6121:6430 tab / 6138:7425 mob) ===== */
.reviews{background:var(--vlak-pagina);padding:64px 0;overflow-x:clip;overflow-y:visible}
.reviews .wrap{display:flex;align-items:flex-start;gap:48px;overflow:visible}
.reviews .sectie-kop{flex:0 0 auto}
.reviews .google-rij{display:flex;align-items:center;gap:16px;margin-top:10px;flex-wrap:wrap}
.sterren{display:flex;align-items:center;gap:6px}
.sterren img{width:20px;height:20px;display:block}
.reviews-kaarten{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--maat-kaart-gap);
  padding:16px;overflow:visible}
/* start: korte kaart (Finn) bovenaan, Damian eronder. end zette Finn naast
   de onderkant van van de Wiel. stretch rekt de korte kaart uit. */
.reviews-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;align-items:start}
/* Vaste Figma-hoogtes (6100:3235): Finn 184 zodat Damian 16px eronder blijft. */
.reviews-rij:not(.reviews-rij-2){position:relative}
.review-finn{height:184px}
/* Wiel hugt tekst + padB 48. Absolute in de rechterkolom zodat de
   rij-hoogte Finn 184 blijft en Damian 16px eronder blijft. */
/* Twee klassen: wint van later .reviewkaart{position:relative} in @supports. */
.reviewkaart.review-wiel{
  height:auto;position:absolute;top:0;right:0;width:calc((100% - 16px) / 2)}
/* Damian: Desktop 184 = Kaartvorm 6100:3493 (padB 48). */
.review-damian{height:184px}
/* Desktop 6100:3235: rij 2 x=-338 (een kolom+gap naar links), zodat
   Damian.x == Finn.x en Julius onder de kop staat. */
.reviews-rij-2{margin-left:calc(-50% - 8px);margin-top:0}
/* Desktop 6100:3235: Julius 39.5px boven Damian. Alleen de kaart, niet de
   rij - Damian blijft pal onder Finn. */
.review-julius{margin-top:-39.5px}
/* Kaartvorm kit: absolute vlak, radius 14, snede 21x31.5 vast via
   Figma-SVG (nooit %-clip, nooit stretchen). Inhoud y=0 eroverheen.
   Schaduw/Vlak zit op .kaartvorm zodat tekst geen eigen schaduw krijgt. */
.reviewkaart{position:relative;overflow:visible;background:transparent;border:0;padding:0;
  display:flex;flex-direction:column;border-radius:var(--kaart-radius);
  box-shadow:none;filter:none}
.kaartvorm{position:absolute;inset:0;z-index:0;display:flex;flex-direction:column;
  overflow:visible;pointer-events:none;filter:var(--schaduw-vlak-filter)}
.kaartvorm-boven{flex:1 1 auto;min-height:0;background:var(--vlak-kaart);
  border:1px solid var(--rand-standaard);border-bottom:0;
  border-radius:var(--kaart-radius) var(--kaart-radius) 0 0}
/* 1px overlap: tijdens de reveal-transform schijnt anders de foto
   door de naad (snedehoogte 31.5px valt op een halve pixel). */
.kaartvorm-onder{flex:0 0 var(--kaart-snede-y);height:var(--kaart-snede-y);
  display:flex;align-items:stretch;min-width:0;margin-top:-1px}
.kaartvorm-onder-links{flex:1 1 auto;min-width:0;background:var(--vlak-kaart);
  border:1px solid var(--rand-standaard);border-right:0;border-top:0;
  border-radius:0 0 0 var(--kaart-radius)}
.kaartvorm-snede{flex:0 0 var(--kaart-snede-x);width:var(--kaart-snede-x);height:var(--kaart-snede-y);
  display:block;object-fit:fill}
.review-inhoud{position:relative;z-index:1;padding:24px 24px 48px;display:flex;flex-direction:column;gap:8px;
  flex:1 1 auto;min-height:0;height:100%;background:transparent}
.review-kop{display:flex;align-items:center;gap:12px}
/* Foto-avatars (Wiel, Julius, Damian): object-fit alleen op img, nooit op initialen. */
.review-kop .avatar{width:36px;height:36px;border-radius:var(--maat-radius-pill);flex:0 0 auto}
.review-kop img.avatar{object-fit:cover}
/* Finn: kit Avatar Soort=Initialen (Vlak/Gedempt + Tekst/Merk). */
.review-kop .avatar-letter{display:flex;align-items:center;justify-content:center;
  background:var(--vlak-gedempt);color:var(--tekst-primair);font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst)}
.review-kop .wie{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.review-kop .naam{font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-standaard)}
.review-kop .wanneer{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}
.review-kop .google-g{width:20px;height:20px;flex:0 0 auto}
.review-inhoud>p,.review-citaat-scroll p{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);margin:0}
/* Julius: FIXED 223 = Figma 6121:6013 Reviewkaart Google Scroll.
   Onderkant lijnrecht met Damian 184 (margin-top -39.5). Body-scroll
   in .review-citaat-scroll stopt boven padB 48; geen negatieve marge. */
.reviewkaart.lang{height:223px}
.reviewkaart.lang .review-inhoud{flex:1 1 auto;min-height:0;height:100%;overflow:hidden}
.reviewkaart.lang .review-citaat-scroll{flex:1 1 auto;min-height:0;overflow-x:clip;
  overflow-y:auto;display:flex;flex-direction:column;gap:8px;
  scrollbar-width:none;-ms-overflow-style:none}
.reviewkaart.lang .review-citaat-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.review-citaat-scroll:focus{outline:none}
.review-citaat-scroll:focus-visible{outline:2px solid var(--vlak-primair);outline-offset:2px}

/* ===== FAQ (Figma 5617:2505 desktop / 5617:2966 tablet / 5617:3396 mobiel) ===== */
.faq{background:var(--vlak-pagina);padding:64px 0}
.faq-kolommen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;padding-top:24px;width:100%;align-items:start}
.faq-kolom{background:var(--vlak-kaart);border:1px solid var(--rand-standaard);border-radius:8px;padding:16px;
  display:flex;flex-direction:column;gap:16px;min-width:0;box-shadow:var(--schaduw-zweef)}
.faq-kolom h3{font-family:var(--font-kop-klein);font-weight:var(--gewicht-kop);
  font-size:var(--h5-grootte);line-height:var(--h5-regelafstand);color:var(--tekst-standaard)}
.faq-lijn{height:1px;width:100%;background:var(--rand-standaard);flex:0 0 auto}
.faq-item{display:flex;flex-direction:column;gap:8px}
.faq-vraag{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;padding:0;
  font:var(--gewicht-kop) var(--h6-grootte)/var(--h6-regelafstand) var(--font-kop-klein);color:var(--tekst-standaard);text-align:left;cursor:pointer}
.faq-vraag:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px;border-radius:2px}
.faq-vraag span{flex:1 1 auto;min-width:0}
.faq-ico{width:20px;height:20px;flex:0 0 auto;object-fit:contain;object-position:center}
.faq-antwoord{display:none;font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);margin:0}
.faq-item.open .faq-antwoord{display:block}

/* ===== Secties algemeen ===== */
.sectie-kop{display:flex;flex-direction:column;align-items:center;gap:var(--maat-stapel-krap);text-align:center}
.sectie-kop.links{align-items:flex-start;text-align:left}
.sectie-kop h2{font-size:var(--h3-grootte);line-height:var(--h3-regelafstand);letter-spacing:var(--h3-tracking)}
.sectie-kop .intro{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}

/* ===== Diensten ===== */
.diensten{position:relative;background:var(--vlak-kaart);padding:64px 0}
.diensten-rij{display:flex;flex-direction:column;gap:var(--afstand-48);margin-top:var(--afstand-48)}
.dienst-blok{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--afstand-48);align-items:center}
.dienst-blok:nth-child(even) .dienst-beeld{order:2}
.dienst-blok,.dienst-beeld{min-width:0}
.dienst-beeld{position:relative;width:100%;overflow:hidden}
.dienst-beeld img,.dienst-beeld video{width:100%;max-width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;display:block}
.dienst-beeld .tafelpoot{position:absolute;left:34.2%;top:62.5%;width:3%;height:28.9%;max-width:none;aspect-ratio:auto;object-fit:fill;pointer-events:none;z-index:1}
.dienst-tekst{display:flex;flex-direction:column;gap:var(--afstand-12);min-width:0}
.dienst-tekst .knop{align-self:flex-start;max-width:100%;height:auto;min-height:40px;padding-top:8px;padding-bottom:8px;white-space:normal;text-align:center}
.snijkaart{position:relative;border-radius:var(--kaart-radius);overflow:hidden;
  background:var(--rand-standaard);padding:1px;clip-path:var(--kaart-clip);
  box-shadow:none;filter:var(--schaduw-vlak-filter)}
.snijkaart-vlak{position:relative;background:var(--vlak-kaart);height:100%;
  clip-path:var(--kaart-clip);
  padding:20px;display:flex;flex-direction:column;gap:10px}
.dienst-kop{display:flex;align-items:center;gap:12px;width:100%} /* Maat/Stapel/Klein */
.dienst h3{font-family:var(--font-kop-klein);font-size:var(--h4-grootte);line-height:var(--h4-regelafstand);min-width:0}
.dienst p{font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-gedempt)}

/* ===== Zo werkt het (donkere fotoband, opgaande trap van snijkaarten) =====
   Figma Desk 8375:15960 / Tab 8375:16031 / Mob 8375:16102.
   Kit Kaartvorm 8301:2671. py 64, px --marge, kop gap 6, grid pt 22
   gap 24. Trap alleen padding-top 72/36/0. Desk kaarten 384x196,
   cijfer LINKS Fraunces 120 opacity 0.18, inkPad 48, inhoud left 127
   pad T24 R24 B16 gap 8. Geen stap-zones. Tab/Mob-blokken winnen. */
.werkwijze{position:relative;padding:64px 0;background:none}
.werkwijze-foto{position:absolute;inset:0;display:block;pointer-events:none}
.werkwijze-foto img{width:100%;height:100%;max-width:none;object-fit:cover}
.werkwijze-overlay{position:absolute;inset:0;background:var(--vlak-omgekeerd-overlay);pointer-events:none}
.werkwijze .wrap{position:relative;z-index:1}
.werkwijze .sectie-kop{gap:var(--maat-stapel-krap)}
.werkwijze .eyebrow{color:var(--vlak-primair-zacht)}
.werkwijze h2{color:var(--tekst-omgekeerd)}
.werkwijze-grid{display:flex;align-items:flex-start;gap:24px;padding-top:22px;width:100%}
.traphouder{display:flex;flex:1 1 0;flex-direction:column;align-items:stretch;min-width:0;
  container-type:inline-size;container-name:trap}
.traphouder .snijkaart{width:100%;flex:0 0 auto}
.traphouder.trap-1{padding-top:72px;padding-bottom:0}
.traphouder.trap-2{padding-top:36px;padding-bottom:0}
.traphouder.trap-3{padding-top:0;padding-bottom:0}
.werkwijze .snijkaart{overflow:visible;position:relative;
  box-shadow:none;filter:none;clip-path:none;background:transparent;padding:0}
.werkwijze .kaartvorm{display:flex}
/* Kaart vult de kolom, tot de deskmaat 384. Hoogte groeit met de tekst;
   op 384px blijft dat 196 (min-height, inhoud past). Inset 48/127 schaalt
   met de kaartbreedte, zelfde verhouding als Desk 384. */
.werkwijze .stap{position:relative;display:grid;width:100%;max-width:384px;
  grid-template-columns:calc(100% * 127 / 384) minmax(0,1fr);
  height:auto;min-height:196px;max-height:none}
.werkwijze .snijkaart-vlak{display:none}
.stap-nummer{position:absolute;left:calc(100% * 48 / 384);top:16px;z-index:0;
  font-family:var(--font-cijfer);font-weight:600;font-variation-settings:"SOFT" 0,"WONK" 1;
  font-size:120px;line-height:normal;color:var(--primair-600);opacity:.18;
  pointer-events:none;white-space:nowrap;overflow:visible;flex:0 0 auto}
.stap-inhoud{position:relative;grid-column:2;z-index:1;min-width:0;width:auto;height:auto;
  display:flex;flex-direction:column;gap:8px;
  padding:24px 24px 16px 0}
.duur-chip{display:inline-flex;align-self:flex-start;padding:4px 10px;border-radius:var(--maat-radius-pill);
  background:var(--vlak-primair-zacht);font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-primair)}
.stap h3{font-family:var(--font-kop-klein);font-weight:var(--gewicht-kop);
  font-size:var(--h6-grootte);line-height:var(--h6-regelafstand);min-width:0;color:var(--tekst-standaard);
  overflow-wrap:break-word}
.stap-inhoud p{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);min-width:0;
  overflow-wrap:break-word}
/* Onder 1440 schaalt het cijfer met de kolom. Op 384px is 100cqw*120/384 = 120.
   Tab/Mob zetten daarna hun eigen cijfermaat. */
@media(max-width:1439px) and (min-width:861px){
  .werkwijze .stap-nummer{font-size:calc(100cqw * 120 / 384)}
}
/* Marge van de fotoband loopt van 48 (768) naar 120 (1440), zonder de sprong
   op 1180 die de kaarten smaller maakt terwijl het venster breder wordt. */
@media(min-width:769px) and (max-width:1439px){
  .werkwijze .wrap{
    padding-left:clamp(48px, calc(48px + (100vw - 768px) * 72 / 672), 120px);
    padding-right:clamp(48px, calc(48px + (100vw - 768px) * 72 / 672), 120px)}
}

/* ===== Prijzen (vier pakketten: Eenmanszaak rood, VOF inktblauw) ===== */
.prijzen{background:var(--vlak-kaart);padding:64px 0}
.prijzen-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:36px}
.prijskaart{position:relative;border-radius:var(--kaart-radius);box-shadow:none;filter:var(--schaduw-vlak-filter)}
.prijskaart-knip{border-radius:var(--kaart-radius);overflow:hidden;height:100%}
.prijskaart-rand{background:var(--rand-standaard);clip-path:var(--kaart-clip);padding:1px;border-radius:var(--kaart-radius);height:100%}
.prijskaart.uitgelicht .prijskaart-rand{background:var(--primair-600);padding:1px}
.prijskaart.vof.uitgelicht .prijskaart-rand{background:var(--vlak-secundair)}
.prijskaart-vlak{background:var(--vlak-kaart);clip-path:var(--kaart-clip-binnen);
  border-radius:var(--kaart-radius-binnen);padding:20px;height:100%;display:flex;flex-direction:column;gap:8px}
.prijskaart .badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);z-index:1;color:var(--tekst-omgekeerd);
  font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);
  padding:2px 9px;border-radius:var(--maat-radius-pill);background:var(--vlak-primair);white-space:nowrap}
.prijskaart.vof .badge{background:var(--vlak-secundair)}
.prijskaart .naamrij{display:flex;align-items:center;width:100%}
.prijskaart .pilrij{display:flex;align-items:center;width:100%}
/* Kit Statuspil (39:36): stip + label, Succes, niet klikbaar. */
.statuspil{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 12px;
  border-radius:var(--maat-radius-pill);font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);white-space:nowrap}
.statuspil::before{content:"";width:7px;height:7px;border-radius:var(--maat-radius-pill);background:currentColor;flex:0 0 auto}
.statuspil.succes{background:var(--vlak-succes-zacht);color:var(--tekst-succes)}
.statuspil.succes::before{background:var(--icoon-succes)}
/* Tablet/mobiel (Figma 768/390): zelfde ZZP/VOF-copy als desktop. */
.naam-smal{display:none}
.prijzen h2 br{display:none}
@media(max-width:860px){
  .naam-desk{display:none}
  .naam-smal{display:inline}
}
.prijskaart .pakket{font-family:var(--font-kop-klein);font-weight:var(--gewicht-kop);
  font-size:var(--h6-grootte);line-height:var(--h6-regelafstand);color:var(--tekst-gedempt)}
.prijs{font-family:var(--font-kop);font-weight:var(--gewicht-kop);font-size:var(--h3-grootte);line-height:var(--h3-regelafstand)}
.prijs .vanaf,.prijs small{display:inline-block;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);
  color:var(--tekst-gedempt)}
.prijs .vanaf{margin-right:4px}
.prijskaart ul{list-style:none;display:flex;flex-direction:column;gap:6px;margin:4px 0 10px}
.prijskaart li{display:flex;align-items:center;gap:8px;color:var(--tekst-gedempt);
  font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst)}
.prijskaart .ico{width:14px;height:14px;display:block}
.prijskaart .knop{width:100%;margin-top:auto}
.prijskaart.vof .knop{background:var(--vlak-secundair)}
.prijskaart.vof .knop:hover{background:var(--vlak-secundair-hover)}

/* ===== Footer (merk links, linkkolommen rechts, onderbalk) =====
   8145:2655: Vlak/Omgekeerd, Tekst/Op-omgekeerd, kop-naar-links gap 12. */
footer{background:var(--vlak-omgekeerd);color:var(--tekst-op-omgekeerd);border-top:1px solid var(--vlak-kaart)}
footer .wrap{padding-top:var(--maat-pagina-sectie-gap);padding-bottom:var(--maat-stapel-standaard);display:flex;flex-direction:column;gap:var(--maat-stapel-ruim)}
.footer-kolommen{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:var(--maat-pagina-sectie-gap);align-items:start}
.footer-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(280px,1.3fr);gap:var(--maat-stapel-ruim) var(--maat-pagina-sectie-gap);align-items:start}
.footer-kolom{display:flex;flex-direction:column;gap:12px}
.footer-kolom h3{font:var(--gewicht-kop) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);font-family:var(--font-tekst);margin:0;color:var(--tekst-op-omgekeerd);
  text-box-trim:trim-both;text-box-edge:cap alphabetic}
.footer-kolom ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.footer-kolom a,.footer-kolom li{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd)}
.footer-kolom li:not(:has(>a)){opacity:.7}
.footer-kolom a{display:inline-block;opacity:.7}
.footer-kolom a:hover{opacity:1;color:var(--tekst-omgekeerd)}
.footer-merk{order:-1;display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:auto;max-width:36ch}
.footer-merk img{height:26px;width:auto}
.footer-tekst-slot{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd);text-align:left}
.footer-slogan{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd);opacity:.7;text-align:left}
.footer-onderbalk{margin-top:0;padding-top:var(--maat-stapel-standaard);border-top:1px solid color-mix(in srgb, var(--tekst-op-omgekeerd) 22%, transparent)}
.footer-onderbalk p{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-op-omgekeerd);opacity:.7}

/* Kaartvorm-canon: 14px (Maat/Kaart/Radius) op LB/LO/RB + vaste snede 21 x 31.5.
   Bogen 'cw' (pad loopt met de klok mee). 'ccw' of weglaten geeft een holle
   boog. Overflow visible zodat de 9-slice-schaduw niet weggeknipt wordt.
   Oudere browsers (o.a. Firefox) houden de polygon-variabelen hierboven. */
@supports (clip-path: shape(from 0 0, line to 100% 100%)){
  :root{
    --kaart-clip:shape(from var(--kaart-radius) 0,
      line to calc(100% - var(--kaart-radius)) 0,arc to 100% var(--kaart-radius) of var(--kaart-radius) cw,
      line to 100% calc(100% - var(--kaart-snede-y)),
      line to calc(100% - var(--kaart-snede-x)) 100%,
      line to var(--kaart-radius) 100%,arc to 0 calc(100% - var(--kaart-radius)) of var(--kaart-radius) cw,
      line to 0 var(--kaart-radius),arc to var(--kaart-radius) 0 of var(--kaart-radius) cw,
      close);
    --kaart-clip-binnen:shape(from var(--kaart-radius-binnen) 0,
      line to calc(100% - var(--kaart-radius-binnen)) 0,arc to 100% var(--kaart-radius-binnen) of var(--kaart-radius-binnen) cw,
      line to 100% calc(100% - var(--kaart-snede-y)),
      line to calc(100% - var(--kaart-snede-x)) 100%,
      line to var(--kaart-radius-binnen) 100%,arc to 0 calc(100% - var(--kaart-radius-binnen)) of var(--kaart-radius-binnen) cw,
      line to 0 var(--kaart-radius-binnen),arc to var(--kaart-radius-binnen) 0 of var(--kaart-radius-binnen) cw,
      close)}
  .snijkaart{overflow:visible;box-shadow:none;filter:var(--schaduw-vlak-filter)}
  .reviewkaart,.kaartvorm{overflow:visible;box-shadow:none}
  .prijskaart{box-shadow:none;filter:var(--schaduw-vlak-filter)}
  .formulier{overflow:visible;box-shadow:none;position:relative}
  /* de flow-modal blijft absolute (JS-positionering op het formulier-kaartje) */
  .flow-modal{overflow:visible;box-shadow:none}

  /* Home-kaarten: Brand Kaartvorm Schaduw/Vlak op de buitenste vorm.
     isolation:isolate houdt de z-index binnen de kaart. */
  .snijkaart,.prijskaart{position:relative;isolation:isolate}
  .reviewkaart{position:relative}
  .formulier,.flow-modal{isolation:isolate}
  .hero,.diensten,.werkwijze,.prijzen{overflow-x:clip}
}

/* ===== Offerte-flow: modal-wizard die vanuit het hero-formulier opengroeit
   (Figma: Proefperiode-flow, vraag per pagina). Kaartvorm kit 5763:79
   als absolute achtergrond. Zonder JS bestaat de flow niet en verstuurt
   het hero-formulier gewoon direct. ===== */
.flow-overlay{position:fixed;inset:0;z-index:100;background:color-mix(in srgb, var(--vlak-omgekeerd) 55%, transparent);
  opacity:0;transition:opacity .3s ease}
.flow-overlay.open{opacity:1;overflow:auto}
.flow-overlay[hidden]{display:none}
.flow-overlay.wb-voorbeeld{position:relative;inset:auto;opacity:1;display:block;height:auto;
  background:var(--vlak-pagina);padding:var(--maat-stapel-ruim) var(--marge)}
/* Vaste hoogte en breedte komen inline van het hero-formulier. Op mobiel
   blijft die breedte 480 en steekt de kaart uit het frame: de snede valt weg.
   Vier antwoorden duwen Terug en Volgende onder de rand. Hier past de kaart. */
.flow-overlay.wb-voorbeeld .flow-modal{position:relative;box-sizing:border-box;margin-inline:auto;
  left:auto !important;top:auto !important;width:min(480px, 100%) !important;max-width:100%;height:auto !important}
.flow-overlay.wb-voorbeeld .flow-vlak{height:auto;overflow:visible}
.flow-overlay.wb-voorbeeld .flow-stap{flex:none;overflow:visible;min-height:auto}

/* Pakket-overlay: clip uit op venster en rij kaarten (Figma overlay v4.1).
   Geen zin onder de titel. Badge mag boven de kaarten uitsteken.
   align-items:flex-start + margin-block:auto op het venster: als het venster
   hoger is dan het scherm (tablet 4899:14559 is 1034px) begint de scroll bij
   de kop; is het lager, dan blijft het gecentreerd. align-items:center
   knipte de kop af zodat je niet naar boven kon. */
.pakket-overlay{position:fixed;inset:0;z-index:110;background:color-mix(in srgb, var(--vlak-omgekeerd) 55%, transparent);
  opacity:0;transition:opacity .3s ease;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:24px;
  overscroll-behavior:contain}
.pakket-overlay.open{opacity:1}
.pakket-overlay[hidden]{display:none}
.pakket-venster{width:min(1224px,100%);max-width:100%;min-width:0;flex:0 1 auto;margin-block:auto;background:var(--vlak-kaart);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:24px;overflow:visible;box-shadow:var(--schaduw-modal)}
@media(min-width:1224px){.pakket-venster{height:577px}}
.pakket-kop{display:flex;align-items:center;gap:16px}
.pakket-kop h2{flex:1 1 auto;font-family:var(--font-kop-klein);font-size:var(--h4-grootte);line-height:var(--h4-regelafstand);margin:0}
.pakket-sluit{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border:0;background:transparent;color:var(--tekst-primair);font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);cursor:pointer;border-radius:var(--knop-radius)}
.pakket-sluit .ico{width:16px;height:16px}
.pakket-sluit:hover{background:var(--vlak-pagina)}
.pakket-sluit:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
.pakket-kaarten{display:flex;flex-wrap:wrap;gap:16px;overflow:visible}
.pakket-kaarten .prijskaart{width:282px;flex:0 0 282px}
@media(max-width:1223px){
  /* Figma tablet overlay 4899:14558: venster 704, pad 32, kaarten 326 in 2x2.
     Tot Desk-BP (~1224): daarboven 4 op een rij. 860 was te laag (3+1 leeg). */
  .pakket-overlay{padding:32px}
  .pakket-venster{width:704px;height:auto;padding:20px;gap:20px}
  .pakket-kaarten{display:grid;grid-template-columns:repeat(2,326px);justify-content:center;gap:12px;width:100%}
  .pakket-kaarten .prijskaart{width:326px;flex:none}
}
@media(max-width:640px){
  /* Figma mobiel overlay 4899:14765: venster 358, pad 16, kaarten 326 gestapeld. */
  .pakket-overlay{padding:16px}
  .pakket-venster{width:358px;padding:16px;gap:20px}
  .pakket-kaarten{display:flex;flex-direction:column;flex-wrap:nowrap;gap:12px}
  .pakket-kaarten .prijskaart{width:100%;flex:1 1 auto}
}
/* de kaart wordt door JS exact op de plek en maat van het formulier-kaartje
   gelegd (left/top/width/height), zodat hij er op elk formaat naadloos
   overheen valt (Figma: PROEF Offerte-flow) */
.flow-modal{position:absolute;box-shadow:none;border:0;outline:none;background:transparent;
  border-radius:var(--kaart-radius);overflow:visible}
.flow-vlak{position:relative;z-index:1;height:auto;padding:36px 40px 48px;display:flex;flex-direction:column;gap:0;overflow:visible;background:transparent;border:0;outline:none}
.flow-vlak:focus,.flow-vlak:focus-visible{outline:none;box-shadow:none}
/* Vraag 4/5, getal 1/5. Het cijfer zelf zit in het midden van het vierkant,
   niet op de letterlijn van het lettertype. */
.flow-vraagrij{display:grid;grid-template-columns:4fr 1fr;align-items:center;height:96px;min-height:96px;flex-shrink:0}
.flow-vraagrij .flow-vraag{min-width:0;margin:0;padding-right:0}
.flow-watermerk{position:relative;top:auto;right:auto;justify-self:center;align-self:center;
  width:min(100%, 96px);aspect-ratio:1;height:auto;margin:0;container-type:size;
  display:flex;align-items:center;justify-content:center;
  background:none;pointer-events:none}
.flow-cijfer{display:block;font-family:var(--font-cijfer);font-weight:600;
  font-variation-settings:"SOFT" 0,"WONK" 1;font-variant-numeric:tabular-nums lining-nums;
  font-size:140.8cqmin;line-height:1;color:var(--primair-600);opacity:.08;text-align:center;
  text-box-trim:trim-both;text-box-edge:cap alphabetic}
.flow-watermerk[hidden]{display:none}
.flow-kop{display:flex;align-items:center;gap:12px;margin-top:8px}
.flow-voortgang{flex:1;height:4px;border-radius:2px;background:var(--vlak-primair-zacht)}
.flow-voortgang b{display:block;height:4px;border-radius:2px;background:var(--vlak-primair);
  transition:width .4s ease}
.flow-stapregel{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);margin-top:12px}
.flow-stapregel:empty{display:none;margin:0}
/* titel bovenaan, balk onderaan: de stap vult de resthoogte, zodat de voet
   (Terug) en daaronder stapregel + balk tegen de onderrand gepind staan */
.flow-stap{flex:none;display:flex;flex-direction:column;min-height:0;overflow:visible;
  scrollbar-width:none;-ms-overflow-style:none;
  transition:opacity .17s ease,transform .17s ease}
.flow-stap::-webkit-scrollbar{display:none}
.flow-stap.wissel{opacity:0;transform:translateX(-10px)}
.flow-stap.wissel.terug{transform:translateX(10px)}
.flow-vraag{font-family:var(--font-kop-klein);font-weight:var(--gewicht-kop);
  font-size:24px;line-height:32px;color:var(--tekst-standaard);padding-right:56px}
/* Figma Invulformulier 8320:10520 / 8218 / 10590: vaste title-slot 96
   (3 x lh 32) + spacer 20. 2- en 3-regel titels starten antwoorden gelijk:
   Desk pad 36+96+20=152, Compact+Mob pad 28+96+20=144. Compact Vraag5
   (8320:10971, 4 regels) groeit: 28+128+20=176. */
.stap-vraag .flow-vraag{box-sizing:border-box;height:96px;min-height:96px;max-height:96px;flex-shrink:0;overflow:hidden}
.flow-sub{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-gedempt);margin-top:6px;padding-right:56px}
.zonder-watermerk .flow-vraag,.zonder-watermerk .flow-sub,
.flow-klaar .flow-vraag,.flow-klaar p{padding-right:0}
/* antwoorden gestapeld op volle breedte, spacer 20 onder de title-slot (Figma) */
.flow-antwoorden{display:flex;flex-direction:column;gap:var(--maat-stapel-standaard);margin-top:var(--maat-stapel-ruim);flex-shrink:0}
.stap-vraag .flow-antwoorden{min-height:calc(4 * 48px + 3 * var(--maat-stapel-standaard))}
.keuzevak{width:100%;height:48px;min-height:48px;display:inline-flex;align-items:center;justify-content:flex-start;
  padding:0 16px;background:var(--vlak-kaart);border:1px solid var(--rand-standaard);
  border-radius:var(--knop-radius);font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-standaard);
  cursor:pointer;transition:border-color .15s,background .15s}
.keuzevak:hover{border-color:var(--primair-600)}
.keuzevak:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
.keuzevak.gekozen{background:var(--vlak-primair-zacht);border:1.5px solid var(--primair-600);
  color:var(--tekst-primair);font-weight:600}
.flow-stap .veld{margin-top:10px}
.flow-veldenrij{display:flex;gap:10px}
.flow-veldenrij .veld{flex:1}
.flow-voet{display:flex;align-items:center;justify-content:space-between;flex:none;margin-top:0;padding-top:var(--maat-stapel-standaard)}
.flow-terug,.flow-volgende{border:0;background:none;cursor:pointer;font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);
  color:var(--tekst-primair);height:40px;padding:0}
.flow-terug:hover,.flow-volgende:hover{text-decoration:underline}
.flow-terug:focus-visible,.flow-volgende:focus-visible{outline:2px solid var(--primair-600);outline-offset:2px}
/* Volgende blijft Link-stijl merk (Figma v1 5001:1932), ook uit. */
.flow-volgende[disabled]{cursor:default}
.flow-volgende[disabled]:hover{text-decoration:none}
.flow-stap .knop:disabled{opacity:.45;cursor:default}
.flow-startblok{margin-top:16px}
.flow-privacy{font:var(--gewicht-tekst) var(--schaal-label-xs)/var(--schaal-label-xs-regel) var(--font-tekst);color:var(--tekst-gedempt);text-align:center;margin-top:var(--afstand-8)}
.flow-melding{font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst);color:var(--tekst-fout);text-align:center;margin-top:var(--afstand-8);display:none}
.flow-melding.zichtbaar{display:block}
/* klaar-kaart = Invulformulier Scherm=Ontvangen (kit 8320:9523).
   Desk ≥1181 8320:9456 / overlay 8320:11663: 400x400, pad 36 40 48, stap 48.
   Tab 641-1180 8320:9489 / overlay 8320:11690: 320x436, pad 28, stap 64.
   Mob ≤640 8320:9522 / overlay 8320:11717: 350x372, pad 28, stap 48.
   Kaartvorm kit 8301:2671 (snede 21x31.5, Schaduw/Vlak). Alleen
   .flow-klaar-modus: form-answerY en Ads-nav blijven ongemoeid. */
.formulier.klaar-verborgen{visibility:hidden}
/* Wrappers: geen doos-rand/omtrek. Alleen Kaartvorm-stroke 1 Rand/Standaard
   volgt de snede. border-radius op de klaar-wrapper maakt een extra rect. */
.flow-modal.flow-klaar-modus,.flow-klaar-modus .flow-vlak,.flow-klaar{
  border:0;outline:none;background:transparent;box-shadow:none;border-radius:0}
.flow-klaar-modus .flow-vlak{overflow:visible}
.flow-klaar-modus .flow-stap{flex:0 0 auto;overflow:visible}
.flow-klaar{flex:none;display:flex;flex-direction:column;align-items:stretch;gap:var(--maat-stapel-standaard);text-align:left}
.flow-klaar-beeld{display:block;width:min(100%, 240px);height:auto;aspect-ratio:4/3;object-fit:contain;margin:0 auto}
.flow-klaar .flow-vraag{margin:0;min-height:0;height:auto;padding-right:0;flex-shrink:0;
  font-size:var(--h4-grootte);line-height:var(--h4-regelafstand);color:var(--tekst-standaard)}
.flow-klaar-stappen{list-style:none;display:flex;flex-direction:column;gap:var(--maat-stapel-standaard);margin:0;overflow:visible}
.flow-klaar-stap{display:flex;align-items:center;gap:var(--maat-stapel-klein);overflow:visible}
.flow-klaar-nr{flex:none;box-sizing:border-box;width:28px;height:28px;border-radius:var(--maat-radius-pill);
  display:inline-flex;align-items:center;justify-content:center;
  font:var(--gewicht-tekst) var(--pg-sm-grootte)/1 var(--font-tekst)}
.flow-klaar-stap.actief .flow-klaar-nr{background:var(--vlak-primair-zacht);border:2px solid var(--primair-600);
  color:var(--tekst-primair)}
.flow-klaar-stap.komend .flow-klaar-nr{background:var(--vlak-gedempt);border:0;color:var(--tekst-uitgeschakeld)}
.flow-klaar-label{flex:1;min-width:0;font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst)}
.flow-klaar-stap.actief .flow-klaar-label{color:var(--tekst-standaard)}
.flow-klaar-stap.komend .flow-klaar-label{color:var(--tekst-uitgeschakeld)}
.flow-klaar-tekst{margin:0;font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-standaard)}
@media(max-width:1180px) and (min-width:641px){
  /* Compact Ontvangen 8320:9489 / overlay 8320:11690: 320x436, pad 28,
     stap FIXED 64. Zelfde tabletband als Start Compact (PR197, ≤1180),
     inclusief hamburger-zone 861-1180. L=R = wrap-marge 48. right:marge
     wint van JS-left, zodat de kaart niet flush-rechts kan. Snede blijft. */
  .flow-modal.flow-klaar-modus{
    box-sizing:border-box;left:auto !important;right:var(--marge);
    width:320px !important;height:auto !important;
    outline:none;border:0;background:transparent;box-shadow:none}
  .flow-modal.flow-klaar-modus:focus,
  .flow-modal.flow-klaar-modus .flow-vlak,
  .flow-modal.flow-klaar-modus .flow-vlak:focus,
  .flow-modal.flow-klaar-modus .flow-vlak:focus-visible{outline:none}
  .flow-klaar-modus .flow-vlak{padding:28px}
}
/* Bedrijfsgegevens: 6px tussen veldgroepen en 10px in een rij zijn de maten
   van het component zelf. Die hangen in Figma niet aan een Stapel-token. */
.stap-bedrijf .veld{margin-top:6px}
.stap-bedrijf .flow-startblok{margin-top:var(--maat-stapel-klein)}
.stap-bedrijf .flow-voet{padding-top:var(--maat-stapel-krap)}
.flow-akkoord{display:flex;flex-direction:column;gap:var(--maat-stapel-klein);margin-top:var(--maat-stapel-klein)}
.flow-vinkje{display:flex;gap:var(--maat-stapel-krap);align-items:flex-start;cursor:pointer;
  font:var(--gewicht-tekst) var(--pg-md-grootte)/var(--pg-md-regelafstand) var(--font-tekst);color:var(--tekst-standaard)}
.flow-vinkje input{-webkit-appearance:none;appearance:none;
  margin:calc((var(--pg-md-regelafstand) - 18px) / 2) 0 0;flex:0 0 auto;width:18px;height:18px;
  border:1px solid var(--rand-standaard);border-radius:5px;background:var(--vlak-kaart);
  display:grid;place-items:center}
.flow-vinkje input:hover{border-color:var(--rand-hover)}
.flow-vinkje input:focus-visible{outline:none;border:2px solid var(--rand-focus)}
.flow-vinkje input:checked{background-color:var(--vlak-primair);border-color:var(--vlak-primair);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.4 6.2 4.8 8.6 9.6 3.6' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:12px 12px}
.flow-vinkje input:checked:hover{background-color:var(--vlak-primair-hover);border-color:var(--vlak-primair-hover)}
.flow-vinkje a{color:var(--tekst-primair);text-decoration:underline}
.flow-vink{width:64px;height:64px;border-radius:var(--maat-radius-pill);background:var(--vlak-primair-zacht);
  display:inline-flex;align-items:center;justify-content:center;color:var(--icoon-primair)}
.flow-vink .ico{width:26px;height:26px}
/* gelukt-popup: de kaart glijdt naar het midden; balk, stapregel en watermerk doen niet mee */
.flow-modal.flow-klaar-modus{transition:left .5s cubic-bezier(.25,.6,.3,1),top .5s cubic-bezier(.25,.6,.3,1),
  width .5s cubic-bezier(.25,.6,.3,1),height .5s cubic-bezier(.25,.6,.3,1)}
.flow-klaar-modus .flow-kop,.flow-klaar-modus .flow-stapregel,.flow-klaar-modus .flow-watermerk{display:none}
@media(prefers-reduced-motion:reduce){
  .flow-overlay,.pakket-overlay,.flow-stap,.flow-voortgang b,.flow-modal.flow-klaar-modus{transition:none}
}
@media(max-width:860px){
  /* tablet en mobiel: kaartpadding 28 rondom (Figma); de Terug-knop staat
     links en blijft zo vrij van de snede rechtsonder. De vrije hoek voor het
     watermerk groeit mee: de kaartpadding is hier 12px smaller dan desktop */
  .flow-vlak{padding:28px}
  .flow-vraagrij .flow-vraag{padding-right:0}
  .zonder-watermerk .flow-vraag,.zonder-watermerk .flow-sub{padding-right:0}
}

/* ===== Responsief (Figma-frames Tablet 768 en Mobiel 390) ===== */
/* Tablet houdt 48 over. De desk-marge van 120 maakt 768 te smal. Mobiel blijft de token. */
@media(max-width:1180px) and (min-width:768px){
  :root{--marge:var(--afstand-48)}
}
@media(max-width:1180px){
  .faq-kolommen{grid-template-columns:1fr;gap:var(--afstand-sectie)}
  .prijzen-grid{grid-template-columns:repeat(2,1fr)}
  /* Compact-header tot Desk-BP 1180 (niet 860): iPad Pro 1024 / landscape
     krijgt hamburger i.p.v. desk-links. Figma Navigatie Compact 6264:3125.
     Desk-nav (logo 147 + links + Inloggen + CTA nowrap + gaps 24 + pad 120)
     heeft min. 1085 nodig; 1180 blijft ruim boven die grens. */
  .nav-links{display:none}
  .menu-knop{display:inline-flex}
  /* de tekstknop "Inloggen" valt met de navlinks weg; de portaal-icoonknop
     neemt hem over, vlak voor "Begin (eerste maand gratis)" */
  .nav-portaal-ico{display:inline-flex}
  /* Figma Homepage Tablet 768 v5.75 6264:3125. Navigatie 6264:3126:
     FRAME pad L/R 48 T/B 14, VERTICAL CENTER. Sticky .nav blijft
     full-bleed. Navigatiebalk Compact 6264:3127: FILL content-kolom
     (flex; Rek grow). Menu+Logo links, Portaal+CTA rechts.
     Compact-W nooit als page/sectie max-width. */
  .nav{padding:14px 48px}
  .nav .wrap{width:100%;height:68px;margin-inline:auto;padding-inline:0;gap:16px}
  .nav .wrap > .knop{width:240px;white-space:nowrap} /* Figma Compact-CTA 240, een regel */
  /* Hero Tab Compact tot Desk-BP 1180 (ook hamburger-zone 861-1180):
     Invul 8481:9237 / kit Compact Start 8307:2812 = 320x586. Wrap L/R
     via --marge 48, gap 24. Herotekst min-width 0 houdt R=48; zonder
     krimp duwt de H1 de kaart tegen de viewport-rand. Desk ≥1181 blijft
     Invul 400. Mob ≤640 wint met width:100%. */
  .hero .wrap{gap:24px}
  .hero-tekst{min-width:0;flex:1 1 auto}
  /* Hero-type Tab vanaf Compact-BP 1180 (zelfde band als form/nav).
     861-1179 had Desk H1 64/72 op Compact-form 320. Desk ≥1181 blijft
     --hero-grootte 64/72. 1440/768/390: geen look-delta. */
  .hero-tekst h1{font-size:var(--h1-grootte);line-height:var(--h1-regelafstand);letter-spacing:var(--h1-tracking)}
  .formulier{width:320px;min-height:0}
  .formulier-vlak{min-height:0}
}
@media(max-width:1180px) and (min-width:641px){
  .hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:24px;row-gap:var(--afstand-24);align-items:start}
  .hero-tekst{display:contents}
  .hero-tekst h1{grid-column:1;grid-row:1}
  .hero-tekst .sub{grid-column:1;grid-row:2}
  .hero-punten{grid-column:1 / -1;grid-row:3;width:100%}
  .formulier{grid-column:2;grid-row:1 / span 2;align-self:start}
}
@media(max-width:767px){
  :root{
    --h1-grootte:var(--schaal-h1-mobiel);
    --h1-regelafstand:var(--schaal-h1-regel-mobiel);
    --h3-grootte:var(--schaal-h3-mobiel);
    --h3-regelafstand:var(--schaal-h3-regel-mobiel);
  }
  .hero-tekst h1{font-size:var(--schaal-hero-mobiel);line-height:var(--schaal-hero-regel-mobiel)}
}
/* Paginamarge springt bij 1181 naar 120. De reviews-opstelling heeft dan
   te weinig breedte. Tot 1320 blijft die sectie op de smallere marge. */
@media(max-width:1320px) and (min-width:1181px){
  .reviews .wrap{padding-left:48px;padding-right:48px}
}
/* Tablet 768: masonry. Vanaf 1161 de desk-opstelling.
   Mobiel (max 640) wint hieronder. */
@media(max-width:1160px){
  .reviews .wrap{flex-direction:column;gap:48px}
  .reviews-kaarten{width:100%;display:flex;flex-direction:column;flex-wrap:wrap;
    align-content:flex-start;gap:var(--maat-kaart-gap);height:548px;padding:48px 16px 16px}
  .reviews-rij,.reviews-rij-2{display:contents;margin:0}
  .reviewkaart.review-wiel{order:1;width:calc((100% - 16px) / 2);height:284px;position:relative;right:auto;top:auto;flex:0 0 auto}
  .reviewkaart.review-damian{order:2;width:calc((100% - 16px) / 2);height:184px;margin-top:0;flex:0 0 auto}
  .reviewkaart.review-finn{order:3;width:calc((100% - 16px) / 2);height:184px;position:relative;flex:0 0 auto}
  .reviewkaart.review-julius,.reviewkaart.lang{order:4;width:calc((100% - 16px) / 2);height:284px;margin-top:0;flex:0 0 auto}
}
@media(max-width:860px){
  .dienst-blok{grid-template-columns:minmax(0,1fr);gap:var(--afstand-16)}
  .dienst-blok:nth-child(even) .dienst-beeld{order:0}
  /* Figma tablet 768 (5148:2919): sectie p-48, cijfers 72px in de
     rechterzone (geen absolute left). Rij blijft stretch + trap.
     TAB-ONLY 8375 (L-wrap, H264, inkPad 32) staat in het 641-860-blok
     hieronder; dit blok deelt hero/footer met mobiel tot 640 wint. */
  .werkwijze{padding:48px 0}
  .stap-nummer{font-size:72px;line-height:normal}
  /* tablet: tekst en formulier blijven naast elkaar, formulier smaller (Figma Tablet 768) */
  .hero .wrap{gap:24px;padding-top:56px;padding-bottom:56px;min-height:0}
  .hero-tekst{gap:14px}
  .form-kenmerken{flex-direction:column;align-items:flex-start}
  .merkenstrip .wrap{min-height:80px;gap:24px} /* Figma Tablet 768: strip 80 hoog, zin-gap 24 */
  .merken-set{gap:48px;padding-right:48px} /* Figma Tablet 768: logo-tussenruimte 48 */
  .footer-kolommen{grid-template-columns:1fr;gap:var(--maat-stapel-ruim)}
  .footer-links{grid-template-columns:1fr}
  .footer-merk{max-width:36ch}
}
/* TAB-ONLY Zo-werkt-het 8375:16031 + Stapkaart 8375:16069 / 16080 / 16091.
   Desk- en Mob-blokken blijven voor de andere lanes. Geen 5960-staffel
   (geen spiegel-padding-bottom, geen stretch-tot-gelijke-kolom). Gelijke
   kaart-H 264, inkPad 32, L-wrap (cijfer links, titel ernaast, body
   eronder). Kaartvorm kit 8301:2671 + Schaduw/Vlak, geen snijkaart-vlak. */
@media(max-width:860px) and (min-width:768px){
  .werkwijze{padding:64px 0}
  .werkwijze .sectie-kop{gap:var(--maat-stapel-krap)}
  .werkwijze-grid{align-items:flex-start;padding-top:22px;gap:24px}
  .traphouder{align-items:stretch}
  .traphouder .snijkaart{width:100%;flex:0 0 264px;filter:none;clip-path:none}
  .traphouder.trap-1{padding-top:72px;padding-bottom:0}
  .traphouder.trap-2{padding-top:36px;padding-bottom:0}
  .traphouder.trap-3{padding-top:0;padding-bottom:0}
  .werkwijze .snijkaart-vlak{display:none}
  .werkwijze .kaartvorm{display:flex}
  .werkwijze .stap{display:block;position:relative;width:100%;max-width:none;flex:0 0 264px;
    height:264px;min-height:264px;max-height:264px;grid-template-columns:none}
  .werkwijze .stap-nummer{position:absolute;left:16px;top:0;z-index:1;
    padding-top:12px;padding-right:12px;width:46px;
    font-size:79px;line-height:normal;opacity:.18;flex:none}
  .werkwijze .stap-inhoud{display:block;position:relative;z-index:1;height:100%;
    left:auto;right:auto;top:auto;bottom:auto;grid-column:auto;
    padding:32px 16px;flex:none;max-width:none;gap:0}
  .werkwijze .stap h3{margin-left:68px;width:auto}
  .werkwijze .stap-inhoud p{position:absolute;top:118px;left:16px;right:16px;width:auto}
}
/* Onder 768 passen drie tabletkaarten niet naast elkaar. Zelfde opbouw als
   mobiel (tekst rechts van het cijfer), breedte volgt de kolom. */
@media(max-width:767px) and (min-width:641px){
  .werkwijze{padding:64px 0}
  .werkwijze-grid{flex-direction:column;align-items:stretch;padding-top:22px;gap:16px}
  .traphouder{width:100%;flex:0 0 auto;align-items:stretch}
  .traphouder.trap-1,.traphouder.trap-2,.traphouder.trap-3{padding:0}
  .traphouder .snijkaart{width:100%;max-width:none;flex:0 0 auto;height:auto;filter:none;clip-path:none}
  .werkwijze .stap{display:block;width:100%;max-width:none;grid-template-columns:none;
    height:auto;min-height:220px;max-height:none;flex:0 0 auto;
    box-sizing:border-box;padding:32px 24px 32px 90px}
  .werkwijze .stap-inhoud{position:relative;left:auto;right:auto;top:auto;bottom:auto;
    grid-column:auto;width:auto;height:auto;padding:0;display:flex}
  .werkwijze .stap-nummer{left:30px;top:12px;width:46px;font-size:79px;padding:0}
  .werkwijze .stap h3{margin-left:0;width:auto}
  .werkwijze .stap-inhoud p{position:relative;top:auto;left:auto;right:auto;width:auto}
}
@media(max-width:640px){
  /* Mobiel 6166:8165 / Kaarten 350: Finn, Wiel, Julius, Damian.
     Gap Maat/Kaart/Gap Mob 24 (peer .werkwijze-grid). Julius FIXED 224
     (Reviewkaart Google Scroll: pad 16, Koprij 36, citH 88, padB 48).
     Damian blijft 176. Sectie padL/R 20 via wrap/--marge.
     Kaarten padL/R 0, width 100% van de contentkolom (=350, niet 390).
     PR152-breakout (calc(100%+2*marge) + negatieve marge) verwijderd. */
  .reviews-kaarten{display:flex;flex-direction:column;flex-wrap:nowrap;height:auto;
    gap:var(--maat-kaart-gap);padding:24px 0 12px;align-content:stretch;width:100%;
    margin-left:0;margin-right:0}
  .reviews-rij,.reviews-rij-2{display:contents;margin:0}
  .reviewkaart.review-finn{order:0;height:176px;width:100%;position:relative}
  .reviewkaart.review-wiel{order:0;height:256px;width:100%;position:relative;top:auto;right:auto}
  .reviewkaart.review-julius,.reviewkaart.lang{order:0;height:224px;width:100%;margin-top:0}
  /* Figma Scroll-instantie: Koprij/Citaten x=16 y=16, Koprij H36 (naam
     text-box-trim), Citaten H88, padB 48. Geen negatieve marge. */
  .reviewkaart.lang .review-inhoud{padding:16px 16px 48px}
  .reviewkaart.lang .review-kop{height:36px}
  .reviewkaart.lang .review-kop .naam{text-box-trim:trim-both;text-box-edge:cap alphabetic}
  .reviewkaart.review-damian{order:0;height:176px;width:100%;margin-top:0;position:relative}
  /* Figma Homepage Mobiel 390 v5.78 6277:3548. Navigatie 6277:3549:
     FRAME pad L/R 20 T/B 14. Navigatiebalk Mobiel 6277:3550 FILL, gap 12,
     Offerteknop true, Portaalknop false. Compacte knop «Begin (gratis)»
     H40, nowrap. Logo H22 flex-shrink 0, geen squash.
     Formulierknop blijft H40 en wisselt naar «Begin (1 maand gratis)»,
     anders breekt «eerste maand» over twee regels. */
  .nav{padding:14px var(--marge)}
  .nav .wrap{width:100%;height:68px;padding-inline:0;gap:12px}
  .nav .logo{height:22px;width:auto;flex-shrink:0}
  .nav-portaal-ico{display:none}
  .nav .wrap > .knop{display:inline-flex;width:auto;height:40px;min-width:62px;
    padding:0 14px;white-space:nowrap;flex-shrink:0;
    font:var(--gewicht-tekst) var(--pg-sm-grootte)/var(--pg-sm-regelafstand) var(--font-tekst)}
  .nav .wrap > .knop .cta-label-vol,
  .formulier .knop .cta-label-vol{display:none}
  .nav .wrap > .knop .cta-label-kort,
  .formulier .knop .cta-label-kort{display:inline}
  .formulier .knop{white-space:nowrap}
  .zijmenu{width:300px}
  .zijmenu-kop img{width:115.5px;height:22px} /* Figma 4190:9754 logo/op-donker */
  .hero .wrap{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:48px;padding-top:40px;padding-bottom:40px;min-height:0}
  .hero-tekst{max-width:none;gap:var(--afstand-24)}
  .formulier{width:100%;min-height:0}
  .formulier-vlak{min-height:0}
  /* Figma Mob 8375:16102 / staps 16140 16151 16162. Gestapeld.
     Trap pr40 / px20 / pl40. Stapkaart 310x220, inkPad 32, inhoud
     left 90. Cijfer links Fraunces 79 / opacity 18. Kaartvorm, geen
     5960-staffel (cijfer-rechts + px-clip). */
  .werkwijze{padding:64px 0}
  .werkwijze .wrap{padding-left:20px;padding-right:20px}
  .werkwijze .sectie-kop{gap:var(--maat-stapel-krap)}
  .werkwijze-grid{flex-direction:column;align-items:stretch;padding-top:22px;gap:16px}
  .traphouder{display:flex;width:100%;min-width:0;box-sizing:border-box;flex:0 0 auto}
  .traphouder .snijkaart{width:100%;max-width:none;flex:0 0 auto;height:auto;
    filter:none;clip-path:none}
  .traphouder.trap-1{padding:0 40px 0 0}
  .traphouder.trap-2{padding:0 20px}
  .traphouder.trap-3{padding:0 0 0 40px}
  .werkwijze .snijkaart-vlak{display:none}
  .werkwijze .kaartvorm{display:flex}
  .werkwijze .stap{display:block;flex:0 0 auto;width:100%;max-width:none;grid-template-columns:none;
    height:auto;min-height:220px;max-height:none;
    box-sizing:border-box;padding:32px 24px 32px 90px}
  .werkwijze .stap-inhoud{flex:0 0 auto;width:auto;position:relative;left:auto;right:auto;
    top:auto;bottom:auto;grid-column:auto;z-index:1;padding:0;gap:8px}
  .werkwijze .stap-nummer{position:absolute;left:30px;top:12px;width:46px;
    font-size:79px;line-height:normal;opacity:.18;padding:0;z-index:1}
  .prijzen-grid{grid-template-columns:1fr;gap:24px}
  /* Kit MobielCompact 8443:4189: titleGap/padT 24 (Desk-peer 8399:4136). */
  .prijskaart-vlak{padding-top:24px}
  /* Mob: featurelijst naar CTA ~20 (ul-marge 12 + vlak-gap 8). */
  .prijskaart ul{margin:4px 0 12px}
  .hero-tekst h1{font-size:40px;line-height:48px}
  /* mobiel breekt na "Persoonlijk."; de desk-breuk gaat hier weer uit */
  .hero-tekst h1 br.br-desk,.hero-tekst h1 br.br-mobiel{display:inline}
  /* Figma 5163:2406: kop wrapt in 2 regels, blijft binnen 350. H3 blijft 32/40. */
  .prijzen h2{max-width:350px}
  .prijzen h2 br.br-mobiel{display:inline}
  .merkenstrip .wrap{gap:16px;padding-top:14px;padding-bottom:14px}
  .merken-set{gap:40px;padding-right:40px} /* Figma Mobiel 390: logo-tussenruimte 40 */
  .merk{height:36px;gap:8px}
  .merk > img:only-child{height:29px}
  .merk-ico{height:29px}
  .merk-tekst{height:10px}
  .merk-tekst-hoog{height:21px}
  .footer-links{gap:var(--maat-stapel-standaard)}
  .faq-kolommen{gap:24px;padding-top:16px}
  .faq-kolom{padding:12px}
  /* Figma Mob 8320:9522 / overlay 8320:11717: klaar-kaart 350x372
     op 390. Start is width:100% van de contentkolom; klaar volgt die
     breedte (niet vast 350) zodat @640 ~600=form, niet 350. L=R =
     --marge 20. Hoogte blijft 372. 390 blijft 350x372. */
  .flow-modal.flow-klaar-modus{
    box-sizing:border-box;left:var(--marge) !important;right:var(--marge) !important;
    width:auto !important;max-width:none;height:auto !important;
    margin-left:0;margin-right:0;outline:none;border:0;
    background:transparent;box-shadow:none}
  .flow-modal.flow-klaar-modus:focus,
  .flow-modal.flow-klaar-modus .flow-vlak,
  .flow-modal.flow-klaar-modus .flow-vlak:focus,
  .flow-modal.flow-klaar-modus .flow-vlak:focus-visible{outline:none}
  .flow-klaar-modus .flow-vlak{padding:28px}
}
/* Een brede gestapelde kaart (tussen 390 en 768) volgt de tekst, niet de
   vaste 220px-hoogte van het mobiel-anker. Op 310px blijft de hoogte 220. */
@container trap (min-width:400px){
  .werkwijze .stap{min-height:0}
}

/* ===== Scroll/open-animaties (subtiel, per sectie de gekozen variant) =====
   Elementen starten verborgen; zodra hun SECTIE het venster binnenkomt speelt
   de sectie in een golf af (het reveal-script in index.html zet .in op
   de sectie en op de elementen; een diensten-blok wacht tot het zelf in beeld
   is). De sectie-.in ontgrendelt ook de wrap en de klantenstrip-choreografie.
   De hero speelt bij het openen.
   Zonder JS blijft alles gewoon zichtbaar; 'verminderde beweging' zet alles
   direct zichtbaar. De trap-offset van Werkwijze (padding-top op de
   traphouder) blijft staan omdat alleen de kaart (.stap) beweegt. */
@media (prefers-reduced-motion: no-preference){
  /* Vóór het reveal-script onderaan draait zet het kopscript in index.html al
     html.anim: de INHOUD (.wrap) van de animatie-secties staat zo vanaf de
     allereerste verf onzichtbaar klaar - de sectie-achtergronden (zoals de
     donkere klantenstrip-balk en de herofoto) blijven gewoon staan. Anders kan
     de tekst bij trage lading eerst 'gewoon' in beeld springen en dan wegfaden.
     Zonder JS ontbreekt html.anim en blijft alles zichtbaar. */
  html.anim :is(.hero,.merkenstrip,.reviews,.diensten,.werkwijze,.prijzen):not(.in) .wrap{opacity:0}

  /* Binnen de sectie-golf faden de elementen na elkaar in: --i is de
     volgorde en --step het tempo, per sectie klaargezet bij de init. De
     poort ligt op de SECTIE: staat die echt in beeld (de 30%-regel in
     index.html), dan spelen de elementen in een keer af, ook wat nog
     onder de vouw staat. Een diensten-blok wacht tot dat blok zelf
     in beeld staat. */
  .anim-sec .reveal,
  .anim-sec .reveal-item{opacity:0}
  /* De transitie staat op de .in-staat, niet op de startstand: op een lange
     pagina verft de browser de hero al voordat het reveal-script onderaan
     draait, en dan zou de sprong naar opacity 0 zelf traag wegtransitionen
     en de hele golf maskeren. Zo is verbergen instant en animeert alleen
     het onthullen. */
  .anim-sec .reveal.in,
  .anim-sec .reveal-item.in{opacity:1;transform:none;
    transition:opacity 1.008s ease, transform 1.08s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}
  .anim-sec .reveal{transform:translateY(14px)}          /* kop/lead: rustig omhoog */

  /* Hero: van onderen infaden (formulier faadt mee omhoog). De hero-golf loopt
     20% langzamer dan de andere secties; de titel opent hem en staat even alleen
     (volgorde via --i/--step in index.html) zodat de kernzin de nadruk krijgt. */
  .hero .reveal-item{transform:translateY(18px)}
  .hero .reveal-item.in{
    transition:opacity 1.26s ease, transform 1.35s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}

  /* Klantenstrip als gordijn, compositor-vriendelijk: de indeling staat vanaf
     het begin in de EINDstand, er animeert alleen transform en opacity - geen
     gap/max-width meer, dus geen layout+paint per frame tijdens het scrollen.
     'Onze klanten.' faadt gecentreerd in (beide woorden staan met transform
     --schuif naar het midden geschoven; index.html meet die afstand) en
     schuift daarna naar de zijkanten, terwijl twee donkere panelen
     (::before/::after op de baan) als gordijnen van de logo's af schuiven.
     Het paneel loopt 12px voor op het woord en eindigt op de gap (28px),
     dezelfde opening-afstand als de oude gap-animatie.
     De marquee wacht tot de strip in beeld is. */
  .merkenstrip.anim-sec .zin{opacity:0;z-index:2}
  .merkenstrip.anim-sec:not(.in) .zin:first-child{transform:translateX(var(--schuif,0px))}
  .merkenstrip.anim-sec:not(.in) .zin:last-child{transform:translateX(calc(-1*var(--schuif,0px)))}
  /* de transform-transitie staat alleen op de .in-staat: zo schakelt een
     hermeting van --schuif (fonts.ready/resize) in de startstand direct,
     zonder een micro-transitie die de vertraging van de echte reveal opeet */
  .merkenstrip.anim-sec.in .zin{opacity:1;
    transition:opacity .4s ease, transform 1.44s cubic-bezier(.45,.05,.25,1) .4s}
  .merkenstrip.anim-sec .merken-baan{position:relative}
  .merkenstrip.anim-sec .merken-baan::before,
  .merkenstrip.anim-sec .merken-baan::after{content:"";position:absolute;top:0;bottom:0;
    width:calc(50% + 1px);background:var(--vlak-omgekeerd);z-index:1;
    transition:transform 1.44s cubic-bezier(.45,.05,.25,1) .4s}
  .merkenstrip.anim-sec .merken-baan::before{left:0}
  .merkenstrip.anim-sec .merken-baan::after{right:0}
  .merkenstrip.anim-sec.in .merken-baan::before{transform:translateX(-100%)}
  .merkenstrip.anim-sec.in .merken-baan::after{transform:translateX(100%)}

  .merkenstrip:not(.in) .merken-spoor{animation-play-state:paused}

  /* Diensten: zacht omhoog, elk blok pas als het zelf in beeld is */
  .diensten .reveal-item{transform:translateY(14px)}

  /* Werkwijze: van links + heel licht omhoog (alleen de kaart beweegt) */
  .werkwijze .reveal-item{transform:translateX(-18px) translateY(8px)}

  /* Prijzen: zacht omhoog; de 'Meest gekozen'-badge faadt met zijn eigen
     kaart mee (erft --i en --step van de kaart, dus kaart en badge blijven
     synchroon) */
  .prijzen .reveal-item{transform:translateY(16px)}
  .prijzen .prijskaart .badge{opacity:0;transform:translate(-50%,-6px);
    transition:opacity 1.008s ease, transform 1.08s cubic-bezier(.25,.6,.3,1);
    transition-delay:calc(var(--i,0) * var(--step,0ms))}
  .prijzen .prijskaart.in .badge{opacity:1;transform:translateX(-50%)}
}

/* Dienstpagina in onderhoud: een site die nog gebouwd wordt. */
body.zzp-pagina,body.dienstpagina,body.salaris-pagina{background:var(--vlak-pagina)}
.onderhoud{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--maat-pagina-sectie-gap);padding:var(--maat-pagina-sectie-gap) var(--marge)}
.onderhoud-venster{width:100%;max-width:720px;background:var(--vlak-kaart);
  border:var(--maat-lijn-1) solid var(--rand-standaard);border-radius:var(--kaart-radius);
  box-shadow:var(--schaduw-zweef);overflow:hidden}
.onderhoud-venster b,.onderhoud-venster i,.onderhoud-venster span{display:block}
.onderhoud-balk{display:flex;align-items:center;gap:var(--maat-stapel-krap);
  padding:var(--maat-stapel-krap) var(--maat-stapel-klein);background:var(--vlak-gedempt)}
.onderhoud-balk i{width:var(--maat-stapel-krap);height:var(--maat-stapel-krap);
  border-radius:var(--maat-radius-pill);background:var(--vlak-kaart)}
.onderhoud-balk i:first-child{background:var(--vlak-primair)}
.onderhoud-balk b{flex:1;height:var(--maat-icoon-12);border-radius:var(--maat-radius-pill);background:var(--vlak-kaart)}
.onderhoud-blad{display:flex;flex-direction:column;gap:var(--maat-kaart-gap);padding:var(--maat-kaart-padding)}
.onderhoud-nav{display:flex;align-items:center;gap:var(--maat-stapel-krap)}
.onderhoud-nav b{width:3rem;height:var(--maat-stapel-krap);margin-right:auto;
  border-radius:var(--knop-radius);background:var(--vlak-primair)}
.onderhoud-nav span{width:1.5rem;height:var(--maat-stapel-krap);
  border-radius:var(--maat-radius-pill);background:var(--vlak-gedempt)}
.onderhoud-hero{display:flex;flex-direction:column;justify-content:center;gap:var(--maat-stapel-krap);
  min-height:4.5rem;padding:var(--maat-stapel-klein);border-radius:var(--knop-radius);
  background:var(--vlak-primair-zacht)}
.onderhoud-hero b,.onderhoud-kaarten b{width:40%;height:var(--maat-stapel-krap);
  border-radius:var(--knop-radius);background:var(--vlak-primair)}
.onderhoud-hero span,.onderhoud-kaarten span{width:70%;height:var(--maat-stapel-krap);
  border-radius:var(--knop-radius);background:var(--vlak-gedempt)}
.onderhoud-kaarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--maat-kaart-gap)}
.onderhoud-kaarten > div{display:flex;flex-direction:column;gap:var(--maat-stapel-krap);
  min-height:3.5rem;padding:var(--maat-stapel-klein);border-radius:var(--knop-radius);background:var(--vlak-gedempt)}
.onderhoud-kaarten .aanbouw{position:relative;background:transparent;
  border:var(--maat-lijn-1) dashed var(--icoon-primair)}
.onderhoud-kaarten .aanbouw i{position:absolute;left:var(--maat-stapel-klein);
  top:calc(var(--maat-stapel-krap) * -1);width:2rem;height:1.25rem;
  border-radius:var(--knop-radius);background:var(--vlak-primair)}
.onderhoud-voortgang{height:var(--maat-stapel-krap);border-radius:var(--maat-radius-pill);
  background:var(--vlak-gedempt);overflow:hidden}
.onderhoud-voortgang span{width:62%;height:100%;background:var(--vlak-primair)}
@media(min-width:1181px){
  .nav-links .nav-portal{display:none}
  .nav .wrap>.knop{order:1}
  .nav-portaal-ico{display:inline-flex;order:2}
  .werkwijze .stap-nummer{left:0;top:0;width:calc(100% * 127 / 384);height:100%;
    display:flex;align-items:center;justify-content:center}
  .reviewkaart.review-julius{width:calc(100% + var(--afstand-80));margin-left:calc(var(--afstand-80) * -1)}
  .hero-tekst h1 br.br-desk{display:block}
}