:root{
  --surface-page:#f7f5f0; --surface-raised:#ffffff; --surface-sunken:#efece3;
  --deep:#11272f; --deep-2:#0b1a20; --deep-3:#1b3842;
  --ink:#191e20; --ink-muted:#5e6563; --ink-on-deep:#f3efe6; --ink-on-gold:#11272f;
  --hairline:#ded8cb;
  --gold:#c8923c; --gold-text:#8f6220; --gold-light:#e3b468; --gold-tint:#f4e7d2;
  --signal-ok:#2f7d52;
  --fd:"Cormorant Garamond","Iowan Old Style",Georgia,serif;
  --fb:"Source Sans 3",-apple-system,"Segoe UI",Roboto,sans-serif;
  --fm:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;
  --r-sm:3px; --r-md:6px; --r-lg:14px; --r-pill:999px;
  --shadow-kaart:0 1px 2px rgba(25,30,32,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --surface-page:#101314; --surface-raised:#1a1e1f; --surface-sunken:#0c0f10;
    --ink:#f0ece4; --ink-muted:#a3a9a6; --hairline:#333937;
    --gold:#d9a04a; --gold-text:#e9bd7b; --gold-tint:#2a2318;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --surface-page:#101314; --surface-raised:#1a1e1f; --surface-sunken:#0c0f10;
  --ink:#f0ece4; --ink-muted:#a3a9a6; --hairline:#333937;
  --gold:#d9a04a; --gold-text:#e9bd7b; --gold-tint:#2a2318;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--ink);font-family:var(--fb);font-size:17px;line-height:1.6}
img,svg{display:block;max-width:100%}
a{color:var(--gold-text)}
.shell{max-width:70rem;margin:0 auto;padding-left:var(--s4);padding-right:var(--s4)}
.narrow{max-width:46rem}

/* kop */
.top{background:var(--deep)}
.top .shell{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  flex-wrap:wrap;padding-block:var(--s3)}
.brand{display:flex;align-items:flex-end;gap:10px;text-decoration:none}
.brand svg{width:104px;height:auto}
.brand .wm{font-family:var(--fd);font-weight:400;font-size:17px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-on-deep);line-height:1;padding-bottom:2px}
nav.main{display:flex;gap:var(--s5);flex-wrap:wrap;font-size:15px}
nav.main a{color:#cfd8da;text-decoration:none}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--gold-light)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--fb);
  font-weight:600;font-size:16px;line-height:1;border:1px solid transparent;border-radius:var(--r-md);
  padding:0 var(--s4);height:46px;cursor:pointer;text-decoration:none}
.btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.btn-primair{background:var(--gold);color:var(--ink-on-gold)}
.btn-secundair{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-op-deep{background:transparent;color:var(--ink-on-deep);border-color:var(--ink-on-deep)}
.btn-groot{height:54px;font-size:17px;padding:0 var(--s5)}

/* hero */
.hero{background:var(--deep);color:var(--ink-on-deep);position:relative;overflow:hidden}
.hero .shell{padding-block:var(--s8);position:relative;z-index:1}
.hero h1{font-family:var(--fd);font-weight:400;font-size:clamp(38px,6.4vw,62px);line-height:1.04;
  margin:0 0 var(--s4);max-width:16ch;text-wrap:balance}
.hero p{color:#a8bbc0;font-size:19px;max-width:46ch;margin:0 0 var(--s5)}
.hero .art{position:absolute;right:-60px;bottom:-30px;width:min(620px,78%);opacity:.26;z-index:0}
.eyebrow{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--gold-light);margin:0 0 var(--s3)}

/* secties */
section{padding-block:var(--s8)}
section.sunken{background:var(--surface-sunken)}
section.deep{background:var(--deep);color:var(--ink-on-deep)}
section.deep .lead,section.deep p{color:#a8bbc0}
h2{font-family:var(--fd);font-weight:500;font-size:clamp(28px,4vw,38px);line-height:1.15;
  margin:0 0 var(--s3);text-wrap:balance}
section.deep h2{color:var(--ink-on-deep)}
h3{font-family:var(--fd);font-weight:500;font-size:25px;line-height:1.25;margin:0 0 var(--s2)}
.lead{font-size:19px;color:var(--ink-muted);max-width:56ch;margin:0 0 var(--s6)}
p{margin:0 0 var(--s4);max-width:64ch}
.label{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted)}

/* kaarten */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(265px,1fr));gap:var(--s5)}
.kaart{background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-md);
  padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);box-shadow:var(--shadow-kaart);min-width:0}
.kaart.uitgelicht{background:var(--gold-tint);border-color:var(--gold)}
.pill{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:5px var(--s3);align-self:flex-start}
.pill-start{background:var(--gold);color:var(--ink-on-gold)}
.pill-finance{background:var(--gold-tint);color:var(--gold-text)}
.pill-backoffice{background:var(--deep);color:var(--ink-on-deep)}
.prijs{font-family:var(--fm);font-variant-numeric:tabular-nums;font-weight:500;font-size:28px;line-height:1.1}
.prijs small{font-family:var(--fb);font-size:14px;font-weight:400;color:var(--ink-muted)}
.maand{font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:14px;color:var(--ink-muted);
  margin-top:calc(var(--s1) * -1)}
.kaart ul{margin:var(--s2) 0 0;padding-left:1.15em;display:flex;flex-direction:column;gap:var(--s2)}
.kaart li{font-size:15.5px;line-height:1.45}
.kaart li::marker{color:var(--gold)}
.door{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);border-top:1px solid var(--hairline);padding-top:var(--s3);margin-top:auto}
.kaart .btn{margin-top:var(--s2)}

/* stappen */
.stappen{counter-reset:stap;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s5);
  list-style:none;padding:0;margin:0}
.stappen li{counter-increment:stap;min-width:0}
.stappen li::before{content:counter(stap);font-family:var(--fm);font-size:13px;font-weight:600;
  color:var(--gold-text);display:block;margin-bottom:var(--s2)}
.stappen h3{font-size:21px}
.stappen p{font-size:16px;color:var(--ink-muted);margin:0}

/* tabel */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:16px;min-width:30rem}
th{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-muted);text-align:left;padding:var(--s3) var(--s3) var(--s3) 0}
td{padding:var(--s3) var(--s3) var(--s3) 0;border-top:1px solid var(--hairline);vertical-align:top}
td.n,th.n{text-align:right;font-family:var(--fm);font-variant-numeric:tabular-nums;padding-right:0}

/* uitgelicht blok */
.blok{background:var(--gold-tint);border-left:3px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;
  padding:var(--s5);margin:var(--s5) 0}
.blok p:last-child{margin-bottom:0}
.feiten{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s4);margin-top:var(--s6)}
.feit{border-top:2px solid var(--gold);padding-top:var(--s3)}
.feit b{display:block;font-family:var(--fm);font-size:26px;font-weight:500;line-height:1.1;margin-bottom:var(--s1)}
.feit span{font-size:15px;color:var(--ink-muted)}
section.deep .feit span{color:#a8bbc0}

/* cta band */
.cta{background:var(--deep-2);color:var(--ink-on-deep)}
.cta .shell{padding-block:var(--s8);display:flex;flex-wrap:wrap;gap:var(--s5);
  align-items:center;justify-content:space-between}
.cta h2{margin:0 0 var(--s2)}
.cta p{color:#a8bbc0;margin:0;max-width:44ch}

/* voet */
footer.site{background:var(--deep-2);color:#9fb0b4;border-top:1px solid var(--deep-3)}
footer.site .shell{padding-block:var(--s7);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s5)}
footer.site a{color:#cfd8da;text-decoration:none;display:block;padding:3px 0}
footer.site a:hover{color:var(--gold-light)}
footer.site .fijn{font-size:14px;line-height:1.7}
footer.site h4{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:#7f949a;margin:0 0 var(--s2)}
.copy{border-top:1px solid var(--deep-3);font-size:14px}
.copy .shell{padding-block:var(--s4)}

@media (max-width:640px){
  body{font-size:16px}
  .hero .shell{padding-block:var(--s7)}
  section{padding-block:var(--s7)}
  nav.main{gap:var(--s4);font-size:14px}
}

/* formulier */
.form{display:grid;gap:var(--s4);max-width:34rem}
.veld{display:flex;flex-direction:column;gap:6px;min-width:0}
.veld label{font-family:var(--fm);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-muted)}
.veld input,.veld select,.veld textarea{font-family:var(--fb);font-size:16px;color:var(--ink);
  background:var(--surface-raised);border:1px solid var(--hairline);border-radius:var(--r-sm);
  padding:11px 12px;width:100%}
.veld textarea{min-height:120px;resize:vertical}
.veld input:focus-visible,.veld select:focus-visible,.veld textarea:focus-visible{
  outline:2px solid var(--gold-text);outline-offset:1px;border-color:var(--gold-text)}
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4)}
.honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .fijn{font-size:14px;color:var(--ink-muted);margin:0}
.melding{border-left:3px solid var(--gold);background:var(--gold-tint);padding:var(--s4);
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:15.5px}

/* ===== rust en ritme, oktober 2026 ===== */
body{font-size:17px;line-height:1.65}
.shell{max-width:68rem}
section{padding-block:96px}
section.strak{padding-block:72px}
h2{font-size:clamp(30px,4.2vw,42px);line-height:1.12;margin:0 0 var(--s4)}
.lead{font-size:20px;line-height:1.6;max-width:54ch;margin:0 0 var(--s7);color:var(--ink-muted)}
p{max-width:62ch}

/* scheidingsrichel tussen secties */
.richel{display:block;width:100%;height:26px;overflow:hidden;line-height:0}
.richel svg{width:100%;height:26px;display:block}

/* open opsomming zonder kaders */
.lijst{display:grid;gap:0;margin-top:var(--s6)}
.lijst .regel{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr) auto;gap:var(--s5);
  align-items:baseline;padding:var(--s6) 0;border-top:1px solid var(--hairline)}
.lijst .regel:last-child{border-bottom:1px solid var(--hairline)}
.lijst .regel h3{margin:0 0 6px;font-size:27px}
.lijst .regel .omschrijving{margin:0;color:var(--ink-muted);font-size:16.5px;max-width:46ch}
.lijst .regel .rechts{text-align:right;white-space:nowrap}
.lijst .regel .bedrag{font-family:var(--fm);font-variant-numeric:tabular-nums;font-size:22px;
  font-weight:500;display:block}
.lijst .regel .bij{font-family:var(--fm);font-size:12.5px;color:var(--ink-muted);display:block;margin-top:4px}
.lijst .regel a{font-size:15.5px}
@media (max-width:760px){
  .lijst .regel{grid-template-columns:minmax(0,1fr);gap:var(--s3);padding:var(--s5) 0}
  .lijst .regel .rechts{text-align:left}
}

/* uitspraak, rustige onderbreking */
.uitspraak{border-top:2px solid var(--gold);padding-top:var(--s5);margin:0;max-width:30ch;
  font-family:var(--fs);font-weight:400;font-size:clamp(26px,3.4vw,34px);line-height:1.25}
.uitspraak cite{display:block;font-family:var(--fb);font-style:normal;font-size:15px;
  color:var(--ink-muted);margin-top:var(--s4)}
.twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s8) var(--s7);align-items:start}

/* kaarten rustiger */
.kaart{border-radius:var(--r-sm);box-shadow:none;gap:var(--s3);padding:var(--s6) var(--s5)}
.kaart.uitgelicht{background:transparent;border-color:var(--gold);border-width:1px}
.grid{gap:var(--s4)}

/* hero iets rustiger */
.hero .shell{padding-block:110px 96px}
.hero .art{opacity:.2}
.hero p{font-size:20px;color:#b3c3c7}
@media (max-width:640px){
  section{padding-block:64px}
  .hero .shell{padding-block:72px 64px}
  body{font-size:16px}
}

/* toegankelijkheid */
.skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--ink-on-gold);
  padding:12px 18px;z-index:50;font-weight:600;border-radius:0 0 var(--r-md) 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
section.deep :focus-visible,.hero :focus-visible,footer.site :focus-visible{outline-color:var(--gold-light)}