/* Layout: one 1120px grid on 12 columns, running text at 680px reading width,
   section intros centered, content left aligned, one line weight and one radius everywhere.
   Palette from the design presentation, slides 1 to 3. Single light theme by choice, matching the live site. */
:root{
  --groen:#2E493A;      /* deep green: headings, bands */
  --groen-2:#3B5B46;    /* hover, secondary green */
  --groen-3:#577D64;    /* muted green: labels */
  --klei:#C6724E;       /* terracotta: Doe mee, accents */
  --klei-2:#AE5F3D;     /* terracotta hover */
  --papier:#F2EEE3;     /* cream background */
  --wit:#FEFEFE;        /* white sections, cards */
  --inkt:#1F2B24;       /* body text */
  --inkt-2:#4C5A51;     /* secondary text */
  --lijn:#D9D3C4;       /* all lines and frames */
  --op-groen:#F2EEE3;   /* text on green */
  --op-groen-2:#C9D4C9; /* secondary text on green */
  --ph:#B4542C;         /* placeholder marking */
  --ph-bg:#FBEDE4;

  --kop:"Zilla Slab", Rockwell, "Roboto Slab", Georgia, serif;
  --tekst:"Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --max:1120px;
  --lees:680px;
  --gat:clamp(16px, 2.5vw, 28px);
  --sectie:clamp(64px, 9vw, 112px);
  --r:4px;
  --rand:1px solid var(--lijn);

  --t-xs:.8125rem; --t-s:.9375rem; --t-m:1.0625rem; --t-l:1.25rem;
  --t-xl:clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
  --t-xxl:clamp(2.1rem, 1.4rem + 3vw, 3.6rem);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0; background:var(--papier); color:var(--inkt); font-family:var(--tekst); font-size:var(--t-m); line-height:1.6; -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:10; background:var(--papier)}
h1,h2,h3{font-family:var(--kop); color:var(--groen); line-height:1.15; text-wrap:balance; margin:0; font-weight:600}
h1{font-size:var(--t-xxl); font-weight:700; letter-spacing:-.01em}
h2{font-size:var(--t-xl)}
h3{font-size:var(--t-l)}
p{margin:0}
a{color:var(--groen)}
:focus-visible{outline:3px solid var(--klei); outline-offset:2px}

.wrap{max-width:var(--max); margin-inline:auto; padding-left:max(var(--gat), env(safe-area-inset-left, 0px)); padding-right:max(var(--gat), env(safe-area-inset-right, 0px))}
.lees{max-width:var(--lees)}
.sectie{padding-block:var(--sectie)}
.sectie.wit{background:var(--wit)}
.sectie.groen{background:var(--groen); color:var(--op-groen)}
.sectie.groen h2,.sectie.groen h3{color:var(--op-groen)}
.stapel{display:grid; gap:1rem}

.eyebrow{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--klei)}
.groen .eyebrow{color:#E3A486}
.intro{display:grid; gap:.9rem; justify-items:center; text-align:center; max-width:var(--lees); margin:0 auto clamp(36px,5vw,56px)}
.intro p{color:var(--inkt-2)}
.groen .intro p{color:var(--op-groen-2)}

/* Buttons */
.knop{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--tekst); font-weight:700; font-size:var(--t-m); background:var(--klei); color:#fff; text-decoration:none; padding:.8rem 1.4rem; border-radius:var(--r); border:0; cursor:pointer; transition:background .15s}
.knop:hover{background:var(--klei-2)}
.knop svg{width:18px; height:18px}
.knop-rij{display:flex; justify-content:center; margin-top:clamp(32px,4vw,48px)}

/* Placeholders */
.ph{background:var(--ph-bg); color:var(--ph); border:1px dashed var(--ph); border-radius:3px; padding:0 .3em; font-weight:600; font-style:normal; white-space:normal}
.ph-beeld{position:relative; display:grid; place-items:center; text-align:center; padding:1.25rem; border:1px dashed var(--ph); border-radius:var(--r); color:var(--ph); font-weight:600; font-size:var(--t-s); line-height:1.4;
  background:repeating-linear-gradient(135deg, var(--ph-bg) 0 12px, #F7E3D6 12px 24px); max-width:100%}
.ph-beeld span{background:var(--wit); padding:.4rem .7rem; border-radius:3px; max-width:28ch}

/* Nav */
.balk{position:sticky; top:env(safe-area-inset-top, 0px); z-index:20; background:color-mix(in srgb, var(--papier) 94%, transparent); backdrop-filter:blur(8px); border-bottom:var(--rand)}
.balk .wrap{display:flex; align-items:center; gap:1.5rem; min-height:68px}
.merk{font-family:var(--kop); font-weight:700; font-size:1.2rem; color:var(--groen); text-decoration:none; white-space:nowrap}
.menu{display:flex; gap:1.4rem; margin-left:auto; list-style:none; padding:0; margin-block:0}
.menu a{text-decoration:none; color:var(--inkt-2); font-size:var(--t-s); font-weight:600}
.menu a:hover{color:var(--groen)}
.balk .knop{padding:.55rem 1.1rem; font-size:var(--t-s)}
@media (max-width: 920px){ .menu{display:none} .balk .knop{margin-left:auto} }

/* Hero */
.hero{padding-block:clamp(40px,7vw,88px) clamp(48px,7vw,96px)}
.hero .wrap{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); align-items:center}
.hero-tekst{grid-column:1 / span 7; display:grid; gap:1.4rem; min-width:0}
.hero-tekst .lead{font-size:var(--t-l); color:var(--inkt-2); max-width:56ch}
.hero-actie{display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.5rem; margin-top:.4rem}
.deadline{font-size:var(--t-s); color:var(--inkt-2)}
.deadline strong{color:var(--groen)}
.hero .ph-beeld{grid-column:8 / span 5; aspect-ratio:4 / 5}
@media (max-width: 860px){ .hero-tekst,.hero .ph-beeld{grid-column:1 / -1} .hero .ph-beeld{aspect-ratio:3 / 2} }

/* Key figures */
.cijfers{border-block:var(--rand); background:var(--wit)}
.cijfers ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr))}
.cijfers li{padding:1.5rem var(--gat); border-left:var(--rand); display:grid; gap:.15rem}
.cijfers li:first-child{border-left:0; padding-left:0}
.cijfers b{font-family:var(--kop); font-size:clamp(1.8rem,1.3rem + 1.8vw,2.6rem); color:var(--groen); line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums}
.cijfers span{font-size:var(--t-s); color:var(--inkt-2)}
@media (max-width: 720px){
  .cijfers ul{grid-template-columns:repeat(2, minmax(0,1fr))}
  .cijfers li{padding:1.1rem 1rem}
  .cijfers li:nth-child(odd){border-left:0; padding-left:0}
  .cijfers li:nth-child(n+3){border-top:var(--rand)}
}

/* Why */
.waarom .wrap{display:grid; justify-items:center}
.waarom .lees{display:grid; gap:1.1rem}
.waarom h2{text-align:center; margin-bottom:.6rem}
.waarom .nadruk{font-family:var(--kop); font-size:var(--t-l); color:var(--groen); font-weight:600}

/* Benefits grid */
.raster{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:var(--rand); border-left:var(--rand)}
.kaart{padding:clamp(20px,2.5vw,32px); border-right:var(--rand); border-bottom:var(--rand); display:grid; align-content:start; gap:.7rem; min-width:0; background:var(--wit)}
.ico{width:44px; height:44px; display:grid; place-items:center; border:var(--rand); border-radius:var(--r); color:var(--groen); background:var(--papier)}
.ico svg{width:24px; height:24px}
.kaart p{color:var(--inkt-2); font-size:var(--t-s)}
@media (max-width: 900px){ .raster{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width: 600px){ .raster{grid-template-columns:minmax(0,1fr)} }

.bemoei{margin-top:var(--gat); display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); padding:clamp(24px,3vw,40px); border:var(--rand); border-radius:var(--r); background:var(--papier)}
.bemoei h3{grid-column:1 / span 4}
.bemoei p{grid-column:5 / span 8; color:var(--inkt-2)}
@media (max-width: 760px){ .bemoei h3,.bemoei p{grid-column:1 / -1} }

.gratis{margin-top:var(--gat); background:var(--groen); color:var(--op-groen); border-radius:var(--r); padding:clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; gap:1.5rem 3rem; align-items:center; justify-content:space-between}
.gratis div{display:grid; gap:.4rem; max-width:52ch}
.gratis h3{color:var(--op-groen); font-size:var(--t-xl)}
.gratis p{color:var(--op-groen-2)}

/* Ask */
.vraag .wrap{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); align-items:start}
.vraag .ph-beeld{grid-column:1 / span 5; aspect-ratio:4 / 5}
.vraag .intro{grid-column:1 / -1; margin-bottom:clamp(8px,2vw,24px)}
.vraag-tekst{grid-column:7 / span 6; display:grid; gap:1.4rem; min-width:0}
.vraag-tekst > p{color:var(--inkt-2)}
.drie{list-style:none; margin:0; padding:0; display:grid; border-top:var(--rand)}
.drie li{display:grid; grid-template-columns:2.2rem 1fr; gap:.8rem; padding:1.1rem 0; border-bottom:var(--rand)}
.drie .nr{font-family:var(--kop); font-weight:700; color:var(--klei); font-size:1.15rem; line-height:1.4}
.drie strong{display:block; color:var(--groen); font-family:var(--kop); font-size:1.1rem; font-weight:600}
.drie p{color:var(--inkt-2); font-size:var(--t-s)}
.kader{border:var(--rand); border-radius:var(--r); padding:1.4rem 1.5rem; background:var(--wit); display:grid; gap:.5rem}
.kader h3{font-size:1.15rem}
.kader p{color:var(--inkt-2); font-size:var(--t-s)}
@media (max-width: 860px){ .vraag .ph-beeld,.vraag-tekst{grid-column:1 / -1} .vraag .ph-beeld{aspect-ratio:3 / 2} }

/* Belief */
.geloof .citaat{font-family:var(--kop); font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem); line-height:1.3; font-weight:500; color:var(--op-groen); max-width:30ch; margin:0 auto clamp(40px,5vw,64px); text-align:center; text-wrap:balance}
.geloof .citaat::before{content:""; display:block; width:48px; height:3px; background:var(--klei); margin:0 auto 1.4rem}
.geloof-grid{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); align-items:start}
.geloof-tekst{grid-column:1 / span 7; display:grid; gap:1.1rem; color:var(--op-groen-2); min-width:0}
.geloof-tekst strong{color:var(--op-groen)}
.geloof-beeld{grid-column:9 / span 4; display:grid; gap:var(--gat)}
.geloof-beeld .ph-beeld{aspect-ratio:4 / 3}
@media (max-width: 860px){ .geloof-tekst,.geloof-beeld{grid-column:1 / -1} .geloof-beeld{grid-template-columns:1fr 1fr} }
@media (max-width: 520px){ .geloof-beeld{grid-template-columns:1fr} }

/* Cases */
.cases{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gat)}
.case{background:var(--wit); border:var(--rand); border-radius:var(--r); display:grid; grid-template-rows:auto 1fr; overflow:hidden; min-width:0}
.case .ph-beeld{aspect-ratio:3 / 2; border-radius:0; border-width:0 0 1px 0}
.case-body{padding:clamp(20px,2.5vw,32px); display:grid; gap:1rem; align-content:start}
.case .plaats{font-size:var(--t-s); color:var(--groen-3); font-weight:600}
.case blockquote{margin:0; padding-left:1rem; border-left:3px solid var(--klei); font-style:italic; color:var(--inkt-2)}
.grafiek{border:var(--rand); border-radius:var(--r); padding:1rem 1rem .5rem; background:var(--papier)}
.grafiek h4{margin:0 0 .5rem; font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase; color:var(--inkt-2)}
.grafiek svg{width:100%; height:auto; display:block}
.grafiek .ph-beeld{aspect-ratio:auto; min-height:170px; border-width:1px}
@media (max-width: 820px){ .cases{grid-template-columns:minmax(0,1fr)} }

/* Partners */
.partners{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--gat)}
.partner{display:grid; gap:1rem; align-content:start; min-width:0}
.partner .ph-beeld{height:96px; aspect-ratio:auto}
.partner .rol{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--klei)}
.partner p{color:var(--inkt-2); font-size:var(--t-s)}
.rabo{margin-top:clamp(36px,5vw,56px); padding-top:1.5rem; border-top:var(--rand); display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:1rem 1.5rem; color:var(--inkt-2)}
.rabo .ph-beeld{height:56px; width:180px; padding:.5rem}
@media (max-width: 860px){ .partners{grid-template-columns:minmax(0,1fr)} }

/* Steps */
.stappen{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); position:relative; counter-reset:stap}
.stappen::before{content:""; position:absolute; top:22px; left:10%; right:10%; height:1px; background:var(--lijn)}
.stappen li{display:grid; justify-items:center; text-align:center; gap:.8rem; padding:0 .75rem; position:relative; min-width:0}
.stappen .bol{width:44px; height:44px; border-radius:50%; background:var(--groen); color:var(--op-groen); display:grid; place-items:center; font-family:var(--kop); font-weight:700; font-size:1.1rem}
.stappen p{font-size:var(--t-s); color:var(--inkt-2)}
@media (max-width: 860px){
  .stappen{grid-template-columns:minmax(0,1fr); gap:1.2rem; max-width:var(--lees); margin-inline:auto}
  .stappen::before{top:22px; bottom:22px; left:21px; right:auto; width:1px; height:auto}
  .stappen li{grid-template-columns:44px 1fr; justify-items:start; text-align:left; padding:0; align-items:center; gap:1rem}
}
.sluit{text-align:center; margin-top:clamp(32px,4vw,44px); color:var(--inkt-2)}
.sluit strong{color:var(--groen)}

/* Form */
.aanmeld{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); margin-top:clamp(40px,5vw,64px)}
.formulier{grid-column:1 / span 7; background:var(--wit); border:var(--rand); border-radius:var(--r); padding:clamp(24px,3.5vw,44px); display:grid; gap:1.4rem; min-width:0}
.formulier h3{font-size:var(--t-xl)}
.formulier .uitleg{color:var(--inkt-2)}
.velden{display:grid; gap:1.1rem}
.veld{display:grid; gap:.35rem}
.veld label{font-weight:600; font-size:var(--t-s); color:var(--groen)}
.veld input[type=text],.veld input[type=email],.veld input[type=tel]{font:inherit; color:var(--inkt); background:var(--papier); border:var(--rand); border-radius:var(--r); padding:.75rem .9rem; width:100%}
.veld input:focus{outline:none; border-color:var(--groen); box-shadow:0 0 0 3px color-mix(in srgb, var(--groen) 20%, transparent)}
.vink{display:grid; grid-template-columns:auto 1fr; gap:.7rem; align-items:start; font-size:var(--t-s); color:var(--inkt-2)}
.vink input{width:20px; height:20px; margin-top:.15rem; accent-color:var(--groen)}
.fout{color:#A23B1E; font-size:var(--t-xs); font-weight:600}
.formulier .knop{justify-self:start}
.bedankt{display:grid; gap:.6rem; padding:1.4rem; border-radius:var(--r); background:var(--papier); border:var(--rand)}
.bedankt h4{margin:0; font-family:var(--kop); color:var(--groen); font-size:var(--t-l)}
.bellen{grid-column:9 / span 4; align-self:start; border-top:3px solid var(--klei); padding-top:1.4rem; display:grid; gap:.5rem}
.bellen .eyebrow{margin-bottom:.3rem}
.bellen .naam{font-family:var(--kop); font-size:var(--t-l); color:var(--groen); font-weight:600}
.bellen p{color:var(--inkt-2)}
@media (max-width: 860px){ .formulier,.bellen{grid-column:1 / -1} }

/* FAQ */
.faq{max-width:var(--lees); margin-inline:auto; border-top:var(--rand)}
.faq details{border-bottom:var(--rand)}
.faq summary{cursor:pointer; list-style:none; padding:1.2rem 2.5rem 1.2rem 0; position:relative; font-family:var(--kop); font-size:1.15rem; font-weight:600; color:var(--groen)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; position:absolute; right:.25rem; top:50%; transform:translateY(-50%); font-family:var(--tekst); font-weight:400; font-size:1.6rem; color:var(--klei)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 1.3rem; color:var(--inkt-2)}

/* Footer */
.voet{background:var(--groen); color:var(--op-groen-2); padding-block:clamp(40px,5vw,64px) clamp(28px,3vw,40px); font-size:var(--t-s)}
.voet .wrap{display:grid; gap:2rem}
.logos{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--gat)}
.logos .ph-beeld{height:72px; padding:.5rem; background:repeating-linear-gradient(135deg, #3B5B46 0 12px, #35523F 12px 24px); border-color:#E3A486; color:#F3D3C2}
.logos .ph-beeld span{background:var(--groen)}
.voet-rij{display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; border-top:1px solid #4A6D57; padding-top:1.5rem}
.voet a{color:var(--op-groen)}
.voet .ph{background:#4A3A2E; color:#F3D3C2; border-color:#E3A486}
@media (max-width: 720px){ .logos{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* Photos and logos */
.foto{display:block; width:100%; max-width:100%; height:auto; object-fit:cover; border-radius:var(--r); background:var(--lijn)}
.case .foto{aspect-ratio:3 / 2; border-radius:0; border-bottom:var(--rand)}
.geloof-beeld .foto{aspect-ratio:4 / 3}
.logo-tegel{height:104px; background:#fff; border:var(--rand); border-radius:var(--r); display:grid; place-items:center; padding:14px 20px}
.logo-tegel img{display:block; max-height:64px; max-width:100%; width:auto; height:auto; object-fit:contain}
.logo-tegel.klein img{max-height:56px}
.logo-tegel img.lg-sg{max-height:72px}
.logo-tegel img.lg-fu{max-height:30px}
.logo-tegel.klein img.lg-sg{max-height:60px}
.logo-tegel.klein img.lg-fu{max-height:24px}
.rabo .logo-tegel img{max-height:54px}
[hidden]{display:none!important}
.logo-tegel.klein{height:80px; padding:10px 16px}
.rabo .logo-tegel{height:72px; width:150px; padding:8px 14px}
.voet .logo-tegel{border-color:transparent}

/* Featured benefit */
.uitgelicht{display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gat); padding:clamp(24px,3vw,40px); border:var(--rand); border-radius:var(--r); background:var(--papier); margin-bottom:var(--gat)}
.uitgelicht .kop{grid-column:1 / span 4; display:grid; gap:.9rem; align-content:start; justify-items:start}
.uitgelicht .ico{background:var(--wit)}
.uitgelicht .kop h3{font-size:var(--t-xl)}
.uitgelicht p{grid-column:5 / span 8; color:var(--inkt-2)}
@media (max-width: 760px){ .uitgelicht .kop,.uitgelicht p{grid-column:1 / -1} }

/* Product row */
.product{margin-top:var(--gat); display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gat)}
.product .foto,.product .ph-beeld{aspect-ratio:4 / 3}
@media (max-width: 820px){ .product{grid-template-columns:minmax(0,1fr)} }
.privacy-regel{font-size:var(--t-s); color:var(--inkt-2)}

.verborgen{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ===== Landingspagina ===== */
.knop.licht{background:transparent; color:var(--groen); box-shadow:inset 0 0 0 1.5px var(--groen)}
.knop.licht:hover{background:var(--groen); color:var(--op-groen)}
.knop.binnenkort{background:var(--lijn); color:var(--inkt-2); cursor:default; box-shadow:none}
.knop.binnenkort:hover{background:var(--lijn)}
.hero .foto{grid-column:8 / span 5; aspect-ratio:4 / 5}
@media (max-width: 860px){ .hero .foto{grid-column:1 / -1; aspect-ratio:3 / 2} }

.raster.drie-kol{grid-template-columns:repeat(3, minmax(0,1fr))}
@media (max-width: 900px){ .raster.drie-kol{grid-template-columns:minmax(0,1fr)} }
.kaart .wie{font-size:var(--t-xs); letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--klei)}

.paden{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gat)}
.pad{background:var(--wit); border:var(--rand); border-radius:var(--r); padding:clamp(24px,3.5vw,44px); display:grid; gap:1.1rem; align-content:start; min-width:0}
.pad h3{font-size:var(--t-xl)}
.pad > p{color:var(--inkt-2)}
.pad .contact{border-top:var(--rand); padding-top:1rem; font-size:var(--t-s); color:var(--inkt-2)}
.pad .knop{justify-self:start}
.pad .datum{font-size:var(--t-s); color:var(--inkt-2)}
.pad .datum strong{color:var(--groen)}
@media (max-width: 820px){ .paden{grid-template-columns:minmax(0,1fr)} }
.melding{display:flex; gap:.7rem; align-items:center; margin:0; padding:.8rem 1rem; border:var(--rand); border-radius:var(--r); background:var(--papier); color:var(--groen); font-size:var(--t-s)}
.melding svg{width:20px; height:20px; flex:none; color:var(--klei)}
.melding strong{font-weight:700}