:root{
  --papier:#FBFBF8; --vel:#FFFFFF; --inkt:#1C2321; --grijs:#5E6B67;
  --lijn:#D9DED9; --groen:#0E4D45; --groen-d:#0A3832; --oker:#E3A92B;
  --kop:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --tekst:"Public Sans", "Segoe UI", system-ui, sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--inkt);font:17px/1.6 var(--tekst);-webkit-font-smoothing:antialiased}
a{color:var(--groen)}
a:focus-visible,button:focus-visible{outline:3px solid var(--oker);outline-offset:3px;border-radius:4px}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}

/* kop */
.kop{border-bottom:1px solid var(--lijn);background:var(--papier)}
.kop .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.merk{font-family:var(--kop);font-weight:700;font-size:1.2rem;color:var(--inkt);text-decoration:none;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.merk .stempel{width:30px;height:30px;border-radius:50%;background:var(--groen);color:var(--oker);display:grid;place-items:center;font-size:.8rem;font-weight:800}
.kop nav a{color:var(--grijs);text-decoration:none;margin-left:22px;font-size:.95rem}
.kop nav a:hover{color:var(--inkt)}

/* hero */
.hero{text-align:center;padding:72px 0 88px}
.hero h1{font-family:var(--kop);font-weight:700;font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.05;letter-spacing:-.025em;max-width:16ch;margin:0 auto 18px}
.hero .intro{color:var(--grijs);max-width:52ch;margin:0 auto 44px;font-size:1.1rem}

.formulier{max-width:460px;margin:0 auto;background:var(--vel);border:1px solid var(--lijn);border-top:6px solid var(--groen);border-radius:6px;box-shadow:0 22px 50px -28px rgba(14,77,69,.45);text-align:left;overflow:hidden}
.formulier .fkop{display:flex;justify-content:space-between;padding:16px 24px;border-bottom:1px dashed var(--lijn);font-size:.85rem;color:var(--grijs)}
.formulier dl{margin:0;padding:6px 24px}
.formulier .rij{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #EEF1EE}
.formulier dt{color:var(--grijs);font-size:.95rem}
.formulier dd{margin:0;font-weight:600;text-align:right}
.formulier .prijs{display:flex;justify-content:space-between;align-items:baseline;padding:20px 24px 8px}
.formulier .prijs span{color:var(--grijs)}
.formulier .prijs strong{font-family:var(--kop);font-size:2.4rem;letter-spacing:-.02em;color:var(--groen)}
.formulier .btw{padding:0 24px 22px;text-align:right;font-size:.85rem;color:var(--grijs)}

.bestel{display:inline-block;margin-top:36px;background:var(--oker);color:var(--inkt);font-family:var(--kop);font-weight:700;font-size:1.2rem;text-decoration:none;padding:18px 44px;border-radius:999px;box-shadow:0 3px 0 #B98517;transition:transform .12s, box-shadow .12s}
.bestel:hover{transform:translateY(-2px);box-shadow:0 5px 0 #B98517}
.bestel:active{transform:translateY(1px);box-shadow:0 1px 0 #B98517}
.onder-knop{margin-top:14px;font-size:.9rem;color:var(--grijs)}

.juridische-knoppen{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:22px}
.knop-rand{display:inline-block;border:1.5px solid var(--groen);color:var(--groen);background:transparent;text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 22px;border-radius:999px;transition:background .12s,color .12s}
.knop-rand:hover{background:var(--groen);color:#fff}
.juridische-knoppen.licht .knop-rand{border-color:#CFE0DC;color:#fff}
.juridische-knoppen.licht .knop-rand:hover{background:#fff;color:var(--groen)}

.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.beeld{display:block;width:100%;height:auto;border-radius:10px}
.inbegrepen .beeld{margin-top:8px}

/* secties */
section.blok{padding:80px 0;border-top:1px solid var(--lijn)}
h2{font-family:var(--kop);font-weight:700;font-size:clamp(1.6rem,3vw,2.2rem);letter-spacing:-.02em;line-height:1.15;margin:0 0 12px}
.blok .lead{color:var(--grijs);max-width:60ch;margin:0 0 40px}
.stappen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;counter-reset:s}
.stappen li{counter-increment:s;border-top:2px solid var(--groen);padding-top:18px}
.stappen li::before{content:counter(s);font-family:var(--kop);font-weight:700;font-size:2rem;color:var(--groen);display:block;line-height:1;margin-bottom:10px}
.stappen h3{font-family:var(--kop);font-size:1.15rem;margin:0 0 6px}
.stappen p{margin:0;color:var(--grijs)}

.inbegrepen{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.inbegrepen ul{margin:0;padding:0;list-style:none}
.inbegrepen li{padding:12px 0 12px 32px;border-bottom:1px solid var(--lijn);position:relative}
.inbegrepen li::before{content:"";position:absolute;left:4px;top:19px;width:12px;height:7px;border-left:2.5px solid var(--groen);border-bottom:2.5px solid var(--groen);transform:rotate(-45deg)}

.vragen details{border-bottom:1px solid var(--lijn);padding:18px 0}
.vragen summary{cursor:pointer;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:16px}
.vragen summary::-webkit-details-marker{display:none}
.vragen summary::after{content:"+";font-family:var(--kop);font-size:1.4rem;line-height:1;color:var(--groen)}
.vragen details[open] summary::after{content:"–"}
.vragen details p{color:var(--grijs);margin:10px 0 0;max-width:68ch}

.slot{background:var(--groen);color:#fff;text-align:center;padding:80px 0}
.slot h2{color:#fff}
.slot p{color:#CFE0DC;margin:0}

/* voet */
.voet{background:var(--groen-d);color:#B7CCC7;font-size:.92rem;padding:48px 0 32px}
.voet .kol{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px}
.voet strong{color:#fff;font-family:var(--kop)}
.voet a{color:#fff;text-decoration:none}
.voet a:hover{text-decoration:underline}
.voet ul{list-style:none;margin:0;padding:0}
.voet li{margin:4px 0}
.voet .klein{border-top:1px solid rgba(255,255,255,.12);margin-top:36px;padding-top:18px;font-size:.82rem}

/* juridische pagina's */
.juridisch{max-width:760px;padding:56px 24px 88px}
.juridisch h1{font-family:var(--kop);font-size:clamp(1.9rem,4vw,2.6rem);letter-spacing:-.02em;line-height:1.1;margin:0 0 8px}
.juridisch .datum{color:var(--grijs);margin:0 0 40px}
.juridisch h2{font-size:1.25rem;margin:36px 0 8px}
.juridisch p,.juridisch li{max-width:70ch}
.juridisch ol,.juridisch ul{padding-left:1.3em}
.juridisch li{margin:4px 0}
.gegevens{background:var(--vel);border:1px solid var(--lijn);border-left:4px solid var(--groen);padding:16px 20px;border-radius:4px}

@media (max-width:760px){
  .kop nav{display:none}
  .hero{padding:48px 0 64px}
  .stappen,.inbegrepen,.duo,.voet .kol{grid-template-columns:1fr;gap:28px}
  section.blok{padding:56px 0}
  .bestel{width:100%;max-width:460px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* WhatsApp-chat */
.wa{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.wa-knop{width:60px;height:60px;border-radius:50%;border:0;background:#25D366;display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 20px -6px rgba(0,0,0,.35)}
.wa-knop:hover{background:#1EBE5A}
.wa-venster{width:min(340px,calc(100vw - 40px));background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px -15px rgba(0,0,0,.35);border:1px solid var(--lijn)}
.wa-venster[hidden]{display:none}
.wa-kop{display:flex;align-items:center;gap:12px;background:#075E54;color:#fff;padding:14px 16px}
.wa-kop small{display:block;font-size:.78rem;color:#CFE9E3}
.wa-avatar{width:36px;height:36px;border-radius:50%;background:var(--oker);color:var(--inkt);display:grid;place-items:center;font-family:var(--kop);font-weight:800;flex:none}
.wa-sluit{margin-left:auto;background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 4px}
.wa-body{background:#ECE5DD;padding:18px 16px}
.wa-bericht{background:#fff;border-radius:0 10px 10px 10px;padding:10px 12px;margin:0;font-size:.95rem;max-width:90%;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.wa-invoer{padding:12px;display:flex;flex-direction:column;gap:10px}
.wa-invoer textarea{width:100%;resize:none;border:1px solid var(--lijn);border-radius:10px;padding:10px 12px;font:inherit;font-size:.95rem}
.wa-invoer textarea:focus-visible{outline:3px solid var(--oker);outline-offset:1px}
.wa-verstuur{background:#25D366;color:#073B1E;border:0;border-radius:999px;padding:11px 16px;font-weight:700;font-family:var(--tekst);cursor:pointer}
.wa-verstuur:hover{background:#1EBE5A}
.wa-verborgen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}