/* ============ SKIN A - NAVY (default) ============ */
:root{
  --bg:#FFFFFF; --bg-alt:#F4F6FA; --surface:#FFFFFF; --border:#E3E9F1;
  --fg-strong:#153560; --fg:#3D4A5A; --fg-muted:#71808F;
  --accent:#F98282; --accent-strong:#E4655F; --accent-soft:#FDECEA;
  --band-bg:#153560; --band-fg:#EAF1FA; --band-muted:#A8BCD6;
  --foot-bg:#F98282; --foot-fg:#FFFFFF;
  --sh:21,53,96;
  --radius:16px; --maxw:1140px;
}
/* ============ SKIN B - BEIGE ============ */
:root[data-skin="beige"]{
  --bg:#FAF6EF; --bg-alt:#F2EADF; --surface:#FFFDF9; --border:#E5DACA;
  --fg-strong:#153560; --fg:#48566B; --fg-muted:#7B8798;
  --accent:#F98282; --accent-strong:#D65A52; --accent-soft:#FAEAE3;
  --band-bg:#153560; --band-fg:#EAF1FA; --band-muted:#A8BCD6;
  --foot-bg:#F98282; --foot-fg:#FFFFFF;
  --sh:40,44,58;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
  font-family:"Figtree","Segoe UI",Helvetica,Arial,sans-serif;font-size:17px;line-height:1.68;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease}
h1,h2,h3,h4{font-family:"Poppins","Segoe UI",Helvetica,Arial,sans-serif;color:var(--fg-strong);text-wrap:balance;margin:0}
p{margin:0} img{max-width:100%;height:auto;display:block} a{color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px}
.eyebrow{font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-strong);display:flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--accent);border-radius:2px;flex:none}
.hl{color:var(--accent-strong)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}

/* ---------- header / footer ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--border)}
.head-inner{display:flex;align-items:center;gap:28px;height:74px}
.brand{display:flex;align-items:center;gap:10px;font-family:"Poppins",sans-serif;font-weight:600;font-size:21px;
  color:#332E2C;text-decoration:none;letter-spacing:-.012em}
.brand .mk{flex:none}
.nav{display:flex;align-items:center;gap:26px;margin-left:auto}
.nav a{font-size:15px;font-weight:500;text-decoration:none;color:var(--fg);padding:6px 0;position:relative;cursor:pointer}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.nav a[aria-current]{color:var(--accent-strong)}
.head-actions{display:flex;align-items:center;gap:16px;padding-left:22px;border-left:1px solid var(--border)}
/* ---------- mobiele navigatie ---------- */
/* De knop en de twee paneel-only acties bestaan alleen onder 960px; boven die
   breedte draagt .nav zelf de navigatie en .head-actions de twee acties. */
.navtoggle{display:none;align-items:center;gap:9px;min-height:44px;padding:9px 12px;
  margin-left:auto;background:none;border:0;border-radius:10px;cursor:pointer;
  font-family:"Poppins",sans-serif;font-size:14px;font-weight:600;color:var(--fg-strong)}
.navtoggle-bars{display:grid;gap:4px;width:20px}
.navtoggle-bars span{display:block;height:2px;background:currentColor;border-radius:2px}
/* Twee klassen, want .btn zet display:inline-flex met dezelfde
   specificiteit en staat verderop: een kale .nav-extra zou boven 960px van
   .btn verliezen en "Lid worden" een tweede keer in de balk zetten. */
.nav .nav-extra{display:none}
.link-quiet{font-size:15px;font-weight:500;text-decoration:none;color:var(--fg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:"Poppins",sans-serif;
  font-size:14px;font-weight:600;letter-spacing:.03em;text-decoration:none;border:2px solid transparent;
  padding:13px 24px;border-radius:999px;cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease,border-color .2s ease}
.btn svg{flex:none;transition:transform .2s ease}
.btn-primary{background:var(--accent);color:#fff;box-shadow:0 12px 26px -14px rgba(var(--sh),.75)}
.btn-primary:hover{background:var(--accent-strong);transform:translateY(-2px)}
.btn-primary:hover svg{transform:translateX(4px)}
.btn-ghost{border-color:var(--border);color:var(--fg-strong);background:transparent}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent-strong);transform:translateY(-2px)}
.btn-sm{padding:10px 20px;font-size:13px}
.btn-light{background:#fff;color:var(--accent-strong)}
.btn-outline-light{border-color:rgba(255,255,255,.55);color:#fff}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.12)}

.site-foot{background:var(--foot-bg);color:var(--foot-fg);padding:56px 0 26px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.foot-brand{display:flex;align-items:center;gap:11px;font-family:"Poppins",sans-serif;font-weight:600;font-size:21px;color:#fff;line-height:1}
.site-foot p:not(.foot-h){font-size:15px;line-height:1.65;color:rgba(255,255,255,.92);margin-top:18px;max-width:32em}
.foot-brand{min-height:30px}
.foot-h{font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.85);margin:0 0 18px;
  min-height:30px;display:flex;align-items:center}
.foot-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:15px}
.foot-list li{display:flex;gap:11px;align-items:flex-start}
.foot-list svg{flex:none;margin-top:4px;opacity:.9}
.foot-list a{text-decoration:none}
.foot-list .sub{display:block;font-size:13px;color:rgba(255,255,255,.8)}
.foot-bottom{margin-top:44px;padding-top:20px;border-top:1px solid rgba(255,255,255,.28);
  display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;font-size:13.5px;color:rgba(255,255,255,.9)}
.foot-bottom nav{margin-left:auto;display:flex;gap:24px}
.foot-bottom a{text-decoration:none}

/* ---------- shared page rhythm ---------- */
.rg-page > section:first-of-type,
.rg-page > .wrap:first-of-type{--pad-top:80px}
.rg-page h1{font-size:clamp(2.1rem,4vw,2.9rem);line-height:1.14;font-weight:700;
  letter-spacing:-.028em;margin-top:18px;max-width:22ch;text-wrap:pretty}
/* section headings: identical everywhere */
.rg-page h2{font-size:clamp(1.65rem,2.9vw,2.15rem);line-height:1.22;font-weight:700;
  letter-spacing:-.022em;margin-top:14px;margin-bottom:0}
/* card / block headings: identical everywhere */
.rg-page h3{font-size:1.06rem;line-height:1.4;font-weight:600;letter-spacing:-.01em;
  margin-top:0;margin-bottom:9px}

/* ---------- HOME ---------- */
.hero{position:relative;overflow:hidden;padding:80px 0 88px}
.hero::before{content:"";position:absolute;inset:auto auto -220px -260px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-soft) 0%,transparent 68%);pointer-events:none}
.hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(2.25rem,4vw,3.05rem);line-height:1.12;margin:18px 0 0}
.hero-lead{font-size:1.125rem;margin-top:24px;max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-note{margin-top:14px;font-size:14px;color:var(--fg-muted)}
.hero-note strong{color:var(--fg-strong);font-weight:600}
.trust{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:16px 32px;margin:18px 0 0;
  padding:26px 0 0;border-top:1px solid var(--border);list-style:none}
.trust li{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:500;color:var(--fg-strong)}
.trust svg{flex:none;color:var(--accent)}
.hero-media{position:relative;align-self:center}
.frame{position:relative}
.frame::after{content:"";position:absolute;inset:24px -22px -24px 24px;border-radius:20px;background:var(--accent);opacity:.16}
.videocard img{width:100%;height:auto}
.videocard{position:relative;z-index:1;display:block;width:100%;padding:0;cursor:pointer;border:4px solid var(--accent);
  border-radius:18px;overflow:hidden;background:var(--surface);box-shadow:0 18px 44px -24px rgba(var(--sh),.3);transition:transform .28s ease}
.videocard:hover{transform:translateY(-4px)}
.playdot{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;
  padding:9px 16px 9px 12px;border-radius:999px;background:rgba(255,255,255,.94);color:#153560;
  font-family:"Poppins",sans-serif;font-size:12.5px;font-weight:600;white-space:nowrap;box-shadow:0 10px 24px -14px rgba(0,0,0,.6)}
.playdot .ico{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff}
.media-cap{margin-top:26px;font-size:13.5px;color:var(--fg-muted);text-align:center}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:82px}
.why .value-grid:last-child{margin-bottom:0}
.vcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px 26px 30px;
  box-shadow:0 8px 22px -16px rgba(var(--sh),.35);transition:transform .24s ease,border-color .24s ease}
.vcard:hover{transform:translateY(-4px);border-color:var(--accent)}
.chip{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--accent-soft);
  color:var(--accent-strong);margin-bottom:18px}

.vcard p{font-size:15.5px;line-height:1.62;color:var(--fg-muted)}
.why{background:var(--bg-alt);padding:84px 0}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.why h2{margin-bottom:18px}
.why p{max-width:36em}
.checks{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.checks li{display:flex;gap:14px;align-items:flex-start}
.checks .tick{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:var(--accent);color:#fff;margin-top:2px}
.checks strong{display:block;font-family:"Poppins",sans-serif;font-weight:600;font-size:15.5px;color:var(--fg-strong)}
.checks span.t{font-size:15.5px;color:var(--fg-muted);line-height:1.6}
.why-media img{width:100%}
.quotes{padding:90px 0}
.quotes-head{text-align:center;max-width:42em;margin:0 auto 46px}
.quotes-head .eyebrow{justify-content:center}

.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.quote{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:22px;padding:46px 36px 34px;box-shadow:0 18px 44px -24px rgba(var(--sh),.3);
  display:flex;flex-direction:column}
.quote blockquote{flex:1}
.quote blockquote{margin:0}
.quote .mark{position:absolute;top:-20px;left:32px;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--accent);color:#fff;font-family:"Poppins",sans-serif;font-size:26px;font-weight:700;padding-top:8px}
.quote p{font-size:.99rem;line-height:1.72}
.quote p+p{margin-top:14px}
.byline{margin-top:30px;padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;gap:14px}
.avatar{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--accent-soft);
  color:var(--accent-strong);font-family:"Poppins",sans-serif;font-weight:600;font-size:15px}
.byline .n{display:block;font-family:"Poppins",sans-serif;font-weight:600;font-size:15px;color:var(--fg-strong);line-height:1.35}
.byline .r{display:block;font-size:13px;color:var(--fg-muted);line-height:1.45;margin-top:2px}
.band{position:relative;background:var(--band-bg);color:var(--band-fg);padding:78px 0 0;overflow:hidden}
.band-inner{text-align:center;max-width:640px;margin:0 auto}
.band h2{color:var(--band-fg);margin-top:0}
.band p{color:var(--band-muted);margin-top:16px;font-size:1.05rem}
.band .btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:32px}
.band-building{display:block;width:min(360px,66vw);margin:40px auto 0;filter:drop-shadow(0 16px 28px rgba(0,0,0,.34))}

/* ---------- AMBTENAREN ---------- */
.dhero{background:var(--band-bg);color:var(--band-fg);padding:80px 0 74px;position:relative;overflow:hidden}
.dhero::after{content:"";position:absolute;right:-160px;top:-160px;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,130,130,.22) 0%,transparent 66%);pointer-events:none}
.dhero-top{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr .9fr;gap:52px;align-items:end}
.dhero .eyebrow{color:var(--accent)} .dhero .eyebrow::before{background:var(--accent)}
.dhero h1{color:var(--band-fg);max-width:none}
.dhero h1 .hl{color:var(--accent)}
.dhero .sub{color:var(--band-muted);font-size:1.08rem;padding-bottom:6px}
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;position:relative;z-index:1}
.plan{background:var(--surface);border-radius:18px;padding:30px 28px 32px;display:flex;flex-direction:column;
  border:2px solid transparent;box-shadow:0 22px 50px -30px rgba(0,0,0,.7)}
.plan.feat{border-color:var(--accent)}
.plan .ptop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.plan h2,.plan h3{font-size:1.16rem;font-weight:600;letter-spacing:-.015em}
.badge{background:var(--accent);color:#fff;font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap}
.plan .desc{font-size:14.5px;color:var(--fg-muted);margin-top:7px;line-height:1.55}
.price{display:flex;align-items:baseline;gap:7px;margin:20px 0 3px}
.price .amt{font-family:"Poppins",sans-serif;font-size:2.35rem;font-weight:700;color:var(--fg-strong);
  letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.price .per{font-size:14.5px;color:var(--fg-muted)}
.plan .terms{font-size:13px;color:var(--fg-muted)}
.plan ul{list-style:none;margin:22px 0 0;padding:22px 0 0;border-top:1px solid var(--border);
  display:flex;flex-direction:column;gap:12px;flex:1}
.plan li{display:flex;gap:11px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--fg)}
.plan li .tick{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--accent-soft);color:var(--accent-strong);margin-top:1px}
.plan .btn{margin-top:26px;width:100%}
.planfoot{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--fg-muted)}
.addon{position:relative;z-index:1;margin-top:22px;text-align:center;font-size:14.5px;color:var(--band-muted)}
.addon strong{color:var(--band-fg);font-weight:600}

/* The shared plans block on a light ground (Lidmaatschap). Off the navy
   .dhero the deep drop shadow has nothing to sit on, so a hairline carries
   the card edge and the shadow only lifts the card off the page. Both cards
   keep the same 1px width, so the featured one still reads as picked out
   without shifting its neighbour by a pixel.
   Contrast, measured on white: the coral button's fill is 2.46:1 against the
   page here against 5.00:1 on navy, under the 3:1 that 1.4.11 asks of a
   control's boundary - the pill shape and the label carry it. The tick in its
   pill is 2.90:1, unchanged by the move, since the card itself is white on
   both pages. The addon line takes --fg rather than --band-muted: 9.03:1
   (6.92:1 on beige), where --fg-muted would have been 4.05:1 at 14.5px. */
.plans.on-light .plan{border-width:1px;border-color:var(--border);
  box-shadow:0 8px 22px -16px rgba(var(--sh),.32)}
.plans.on-light .plan.feat{border-color:var(--accent)}
.plans.on-light+.addon{color:var(--fg)}
.plans.on-light+.addon strong{color:var(--fg-strong)}
.rail{padding:78px 0}
.rail-head{max-width:46ch;margin-bottom:38px}

.rail dl{margin:0;display:grid;grid-template-columns:200px 1fr}
.rail dt{font-family:"Poppins",sans-serif;font-size:1.02rem;font-weight:600;color:var(--fg-strong);
  padding:22px 0;border-top:1px solid var(--border)}
.rail dd{margin:0;padding:22px 0;border-top:1px solid var(--border);color:var(--fg-muted);font-size:15.5px;max-width:74ch}
.rail dt:first-of-type,.rail dd:first-of-type{border-top:2px solid var(--fg-strong)}
.obj{background:var(--bg-alt);padding:74px 0}
.obj-head{max-width:48ch;margin-bottom:34px}

.qa{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.qa article{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:24px 24px 26px}

.qa p{font-size:15px;color:var(--fg-muted);line-height:1.62}
.close{border-top:1px solid var(--border);padding:66px 0 78px}
/* Where the cross-link follows, 78px read as a disconnect. Halved to 38px:
   still clearly a separate, secondary destination, not part of the action.
   Scoped to that pairing so Over ons, which has no cross-link, keeps the
   section's normal bottom padding. */
.close:has(+ .xlink){padding-bottom:38px}
.close-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.close h2{max-width:20ch;margin-top:0}
.close p{color:var(--fg-muted);margin-top:10px;max-width:44ch;font-size:15.5px}
/* both actions sit under the copy now; the right of the row stays empty.
   The measure keeps the column to roughly what the heading and paragraph
   already occupy, so the whitespace reads as margin rather than a gap. */
.close-copy{max-width:600px}
.close .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.xlink{padding:0 0 74px}
.xlink p{font-size:15.5px;color:var(--fg-muted)}
.xlink a{color:var(--accent-strong);font-weight:600;text-decoration:none}

/* ---------- GEMEENTEN ---------- */
.stmt{padding:80px 0 70px}

.stmt .lead{font-size:1.14rem;margin-top:24px;max-width:56ch;color:var(--fg)}
.stmt .acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.stages{background:var(--bg-alt);padding:74px 0}
.stage-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;border-top:2px solid var(--fg-strong)}
.stage{padding:28px 30px 30px 0;border-right:1px solid var(--border)}
.stage-grid.four{grid-template-columns:repeat(4,1fr)}
.stage-grid.four .stage:last-child{border-right:0}
.stages .lead{max-width:70ch;margin-top:10px}
.stage-grid.four{grid-template-rows:auto auto}
.stage-grid.four .stage{display:grid;grid-template-rows:subgrid;grid-row:span 2;row-gap:0}
@supports not (grid-template-rows: subgrid){
  .stage-grid.four .stage .num{min-height:2.8em}
}
.stage:last-child{border-right:0;padding-right:0}
.stage:not(:first-child){padding-left:30px}
.stage .num{font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;
  color:var(--accent-strong);display:block;margin-bottom:12px;font-variant-numeric:tabular-nums}

.stage p{font-size:15px;color:var(--fg-muted);line-height:1.62}
.tiers{padding:80px 0 50px}
.tier-note{margin:0;padding:16px 24px;font-size:13.5px;line-height:1.55;color:var(--fg-muted)}
.tw{overflow-x:auto;border:1px solid var(--border);border-radius:16px;background:var(--surface);margin-top:34px}
table{border-collapse:collapse;width:100%;font-size:15.5px;min-width:560px}
th,td{text-align:left;padding:18px 24px;border-bottom:1px solid var(--border)}
th{font-family:"Poppins",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:600;background:var(--bg-alt)}
tr:last-child td{border-bottom:0}
td.team{font-family:"Poppins",sans-serif;font-weight:600;color:var(--fg-strong)}
/* resident band sits under the tier name, so the table keeps three columns
   at 2/3 width beside the Inbegrepen panel instead of gaining a fourth */
.team-cell{display:block}
.team-sub{display:block;margin-top:3px;font-family:"Figtree",sans-serif;font-size:12.5px;
  font-weight:500;line-height:1.35;color:var(--fg-muted);letter-spacing:0;text-transform:none;
  white-space:nowrap}
td.amt{text-align:right;font-family:"Poppins",sans-serif;font-weight:600;color:var(--fg-strong);white-space:nowrap;font-variant-numeric:tabular-nums}
.tw thead th:last-child{text-align:right;padding-right:calc(24px - .1em)}
.fine{margin-top:26px;background:var(--bg-alt);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:22px 26px}
.fine h3{font-size:.8rem;font-family:"Poppins",sans-serif;letter-spacing:.12em;text-transform:uppercase;
  color:var(--fg-muted);font-weight:600;margin-bottom:12px}
.fine ul{margin:0;padding-left:18px;font-size:15px;color:var(--fg);line-height:1.8}
.fine li::marker{color:var(--accent)}

/* ---------- OVER ONS ---------- */
.opener{padding:80px 0 62px}
.opener .lead{font-size:1.14rem;margin-top:24px;max-width:56ch;color:var(--fg)}

.bio{padding:0 0 80px}
.bio-grid{display:grid;grid-template-columns:320px 1fr;gap:60px;align-items:start}
.portrait{margin:0;border-radius:20px;overflow:hidden;background:var(--band-bg);
  box-shadow:0 22px 50px -30px rgba(var(--sh),.55)}
.portrait img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 28%}
.portrait figcaption{padding:18px 22px 20px}
.portrait .nm{color:var(--band-fg);font-family:"Poppins",sans-serif;font-weight:600;font-size:1.05rem;line-height:1.3}
.portrait .rl{color:var(--band-muted);font-size:14px;margin-top:3px}
.bio h2{margin-bottom:18px}
.bio p{max-width:56ch}
.bio p+p{margin-top:14px}
.tl{list-style:none;margin:38px 0 0;padding:0;border-left:2px solid var(--border)}
.tl li{position:relative;padding:0 0 26px 28px}
.tl li:last-child{padding-bottom:0}
.tl li::before{content:"";position:absolute;left:-7px;top:8px;width:12px;height:12px;border-radius:50%;
  background:var(--accent);border:3px solid var(--bg)}
.tl .yr{font-family:"Poppins",sans-serif;font-size:12.5px;font-weight:600;letter-spacing:.1em;
  color:var(--accent-strong);font-variant-numeric:tabular-nums}
.tl .ev{display:block;font-size:15.5px;color:var(--fg);margin-top:2px}
.credo{background:var(--bg-alt);padding:70px 0}
.credo blockquote{margin:0 auto;max-width:800px;text-align:center}
.credo p{font-family:"Poppins",sans-serif;font-size:clamp(1.3rem,2.6vw,1.75rem);font-weight:600;line-height:1.42;
  color:var(--fg-strong);letter-spacing:-.02em}
.credo .src{display:block;margin:0 0 18px;font-family:"Figtree",sans-serif;font-size:14px;font-weight:400;color:var(--fg-muted)}

/* ---------- NIEUWS ---------- */
.nhead{padding:80px 0 44px}

.nhead p:not(.eyebrow){margin-top:24px;max-width:52ch;color:var(--fg-muted)}
.feat-art{display:grid;grid-template-columns:1.25fr .75fr;gap:48px;align-items:center;padding-bottom:56px;
  border-bottom:1px solid var(--border)}
.feat-art h2{margin:14px 0 18px}
.feat-art p{color:var(--fg-muted);max-width:52ch}
.artmeta{font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-strong)}
.readmore{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-family:"Poppins",sans-serif;
  font-size:14px;font-weight:600;color:var(--accent-strong);text-decoration:none}
.readmore:hover{text-decoration:underline}
.feat-thumb{background:var(--band-bg);border-radius:18px;aspect-ratio:5/4;position:relative;overflow:hidden}
.feat-thumb::after{content:"";position:absolute;inset:-40px -40px auto auto;width:300px;height:300px;border-radius:50%;
  background:radial-gradient(circle,rgba(249,130,130,.3) 0%,transparent 66%)}
.feat-thumb span{position:absolute;left:26px;bottom:24px;z-index:1;font-family:"Poppins",sans-serif;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--band-muted)}
.arts{display:grid;grid-template-columns:1fr 1fr;gap:44px;padding:52px 0 90px}
.arts article h3{font-size:1.24rem;line-height:1.3;margin:12px 0 12px}
.arts article p{color:var(--fg-muted);font-size:15.5px}

/* ---------- CONTACT ---------- */
.chead{padding:80px 0 40px}

.chead p:not(.eyebrow){margin-top:24px;color:var(--fg-muted);max-width:44ch}
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:58px;padding-bottom:88px;align-items:start}
.form{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:34px 34px 36px;
  box-shadow:0 18px 44px -24px rgba(var(--sh),.3)}
.form h2{font-size:1.25rem;font-weight:600;letter-spacing:-.018em;margin:0 0 6px}
.form>p{font-size:15px;color:var(--fg-muted);margin-bottom:24px}
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px}
.field label{font-family:"Poppins",sans-serif;font-size:12.5px;font-weight:600;color:var(--fg-strong);letter-spacing:.01em}
.field input,.field select,.field textarea{font-family:"Figtree",sans-serif;font-size:15.5px;color:var(--fg-strong);
  background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;width:100%}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
/* iOS zoomt in op elk veld waarvan de tekst kleiner is dan 16px, en zoomt
   daarna niet terug. 15,5px scheelde een halve pixel en kostte de hele
   paginabreedte. Alleen de velden gaan omhoog; de rest van de typografie
   blijft staan. 768 zit erbij, want daar staat een iPad in portret. */
@media (max-width:768px){
  .field input,.field select,.field textarea{font-size:16px}
}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cinfo{display:flex;flex-direction:column;gap:12px}
.cbox{background:var(--bg-alt);border-radius:14px;padding:24px 26px}
.cbox h3{font-family:"Poppins",sans-serif;font-size:12px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-muted);margin-bottom:14px;line-height:1.4}
.cbox .big{font-family:"Poppins",sans-serif;font-size:1.12rem;font-weight:600;color:var(--fg-strong);text-decoration:none;display:block}
.cbox .sm{font-size:14px;color:var(--fg-muted);margin-top:4px}
.cbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;font-size:14.5px}
.cbox dt{color:var(--fg-muted)} .cbox dd{margin:0;color:var(--fg-strong);font-variant-numeric:tabular-nums}

/* ---------- LIDMAATSCHAP ---------- */
.mhead{background:var(--bg-alt);padding:80px 0 70px}

.mhead .lead{font-size:1.14rem;margin-top:24px;max-width:56ch;color:var(--fg)}
.perks{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:46px;border-top:2px solid var(--fg-strong)}
.perk{padding:24px 24px 26px 0;border-right:1px solid var(--border)}
.perk:last-child{border-right:0;padding-right:0}
.perk:not(:first-child){padding-left:24px}

.perk p{font-size:14.5px;color:var(--fg-muted);line-height:1.6}
.compare{padding:78px 0}
.compare-head{max-width:44ch;margin-bottom:34px}

.gemband{background:var(--band-bg);color:var(--band-fg);border-radius:20px;padding:40px 44px;margin:0 0 88px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:26px}
.gemband h2{color:var(--band-fg);font-size:1.5rem;max-width:20ch;margin-top:0}
.gemband p{color:var(--band-muted);margin-top:10px;max-width:46ch;font-size:15.5px}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero{padding:52px 0 64px} .hero-grid{grid-template-columns:1fr;gap:44px}
  .hero-media{order:-1;margin-top:0} .frame::after{inset:18px -12px -14px 18px} .media-cap{margin-top:32px}
  .trust{grid-template-columns:1fr;gap:14px;margin-top:8px}
  .why-grid{grid-template-columns:1fr;gap:44px} .why-media{order:-1}
  .value-grid{grid-template-columns:1fr;margin-bottom:56px}
  .foot-grid{grid-template-columns:1fr;gap:34px}
  /* .nav is hier geen balk meer maar een paneel onder de header. Het stond op
     display:none zonder dat er iets was om het te openen, waardoor er onder
     960px helemaal geen navigatie overbleef. */
  .navtoggle{display:inline-flex}
  /* De header is hier logo + hamburger, verder niets. De losse knop stond
     naast de hamburger en was op 360px de enige zichtbare actie, terwijl de
     navigatie eronder verborgen zat. Beide acties zitten nu in het paneel. */
  .head-actions{display:none}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:60;
    flex-direction:column;align-items:stretch;gap:0;margin-left:0;
    background:var(--bg);border-bottom:1px solid var(--border);
    padding:6px 0 14px;box-shadow:0 22px 34px -26px rgba(var(--sh),.55)}
  .nav[data-open]{display:flex}
  .nav a{display:flex;align-items:center;min-height:44px;padding:11px 28px;font-size:16px}
  .nav a::after{display:none}
  .nav .nav-extra{display:flex;margin-top:6px;border-top:1px solid var(--border)}
  /* De knop deelt .btn-primary; hier wordt alleen teruggezet wat .nav a hem
     oplegt -- kleur, padding, lettergrootte -- plus de volle paneelbreedte.
     Drie klassen, dus hij wint van .nav a en van .nav a[aria-current]. */
  .nav .btn.nav-extra-cta{margin:12px 22px 2px;padding:13px 24px;min-height:48px;
    font-size:14px;color:#fff;border-top:0}
  .bio-grid,.cgrid,.feat-art{grid-template-columns:1fr;gap:36px}
  .portrait{max-width:360px}
  .arts{grid-template-columns:1fr;gap:36px}
  .stage-grid,.perks{grid-template-columns:1fr;border-top:0}
  .stage-grid.four{grid-template-columns:1fr}
  .stage,.perk{border-right:0;border-top:1px solid var(--border);padding:22px 0 24px}
  .stage:first-child,.perk:first-child{border-top:2px solid var(--fg-strong)}
  .stage:not(:first-child),.perk:not(:first-child){padding-left:0}
}
@media (max-width:900px){
  .dhero-top{grid-template-columns:1fr;gap:18px;align-items:start} .dhero .sub{padding-bottom:0}
  .plans{grid-template-columns:1fr}
  .rail dl{grid-template-columns:1fr}
  .rail dt{padding-bottom:0;border-top:1px solid var(--border)} .rail dd{padding-top:8px;border-top:0}
  .rail dt:first-of-type{border-top:2px solid var(--fg-strong)} .rail dd:first-of-type{border-top:0}
  .qa,.quote-grid{grid-template-columns:1fr} .close-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:600px){
  body{font-size:16px} .wrap{padding:0 20px}
  .dhero{padding:44px 0 54px} .plan{padding:26px 22px 28px}
  .quote{padding:44px 26px 32px} .quote .mark{left:24px}
  .pull blockquote{padding-left:20px} .pull .who{padding-left:23px}
  .form{padding:26px 22px 28px} .two{grid-template-columns:1fr}
  .gemband{padding:30px 26px} .foot-bottom nav{margin-left:0;flex-wrap:wrap;gap:14px}
  .nav a{padding-left:20px;padding-right:20px}
  .nav .btn.nav-extra-cta{margin-left:20px;margin-right:20px}
}

/* featured article image */
.feat-thumb.has-img{background:none}
.feat-thumb.has-img img{width:100%;height:100%;object-fit:cover;border-radius:18px}

/* contact form: honeypot + notices */
.rg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.rg-notice{border-radius:10px;padding:14px 16px;margin-bottom:22px;font-size:15px;line-height:1.55}
.rg-notice.ok{background:#E9F5ED;color:#146C3A;border:1px solid #BFE3CB}
.rg-notice.err{background:var(--accent-soft);color:var(--accent-strong);border:1px solid var(--accent)}
/* confidentiality marking: a third .rg-notice variant, not a new component.
   Tinted ground rather than a coral fill; the accent is carried by the
   "Vertrouwelijk" label and the icon, which are large and bold enough for it.
   The sentence itself stays --fg, which clears AA on both skins - the accent
   on its own ground is 3.07:1 (default) / 3.24:1 (beige), large-text only. */
.rg-notice.confid{background:var(--bg-alt);border:1px solid var(--border);color:var(--fg);
  display:flex;align-items:flex-start;gap:11px}
.rg-notice.confid svg{flex:none;margin-top:2px;color:var(--accent-strong)}
.rg-notice.confid strong{font-family:"Poppins",sans-serif;font-weight:600;color:var(--accent-strong)}


/* ---------- mobile refinements ---------- */
.plan .ptop{flex-wrap:wrap}
@media (max-width:600px){
  /* long product name + badge no longer collide */
  .plan .ptop{flex-direction:column;align-items:flex-start;gap:9px}

  /* uppercase labels stay legible on a phone */

  /* the tariff table becomes stacked rows instead of a sideways scroll */
  .tw{overflow:visible}
  table{min-width:0}
  thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  tbody tr{display:block;padding:6px 0;border-bottom:1px solid var(--border)}
  tbody tr:last-child{border-bottom:0}
  td{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
     border:0;padding:7px 20px;text-align:right}
  td::before{content:attr(data-label);font-family:"Poppins",sans-serif;font-size:11px;
     font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);
     flex:0 1 auto;text-align:left}
  td.team{font-size:1.05rem}
  /* in the stacked layout the cell is narrow, so let the band wrap rather
     than push the row sideways */
  .team-sub{white-space:normal;margin-top:2px}
}

/* ---------- testimonial carousel ---------- */
.qc{position:relative;max-width:920px;margin:0 auto}
.qc-viewport{overflow:hidden}
.qc-track{display:flex;transition:transform .45s cubic-bezier(.22,.7,.3,1)}
.qc-slide{flex:0 0 100%;padding:30px 34px 26px}
.qc-slide > .quote{margin:0;padding:46px 44px 38px;height:100%}
.qc-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--border);
  background:var(--surface);color:var(--fg-strong);cursor:pointer;
  display:grid;place-items:center;transition:.2s;box-shadow:0 8px 22px -14px rgba(var(--sh),.5)}
.qc-nav:hover{border-color:var(--accent);color:var(--accent-strong)}
.qc-nav.prev{left:-58px} .qc-nav.next{right:-58px}
.qc-dots{display:flex;justify-content:center;gap:0;margin-top:14px}
.qc-dots button{width:44px;height:44px;padding:0;border:0;background:none;cursor:pointer;
  display:grid;place-items:center}
.qc-dots button::before{content:"";width:9px;height:9px;border-radius:50%;
  background:var(--border);transition:width .2s ease, background .2s ease}
.qc-dots button[aria-selected="true"]::before{background:var(--accent);width:26px;border-radius:999px}
@media (max-width:1080px){
  .qc-nav.prev{left:-4px} .qc-nav.next{right:-4px}
  .qc-slide{padding:30px 26px 26px}
  .qc-slide > .quote{padding:46px 34px 34px}
}
@media (max-width:600px){
  .qc-slide{padding:28px 14px 22px}
  .qc-slide > .quote{padding:40px 22px 28px}
  .qc-nav{width:44px;height:44px}
}
@media (prefers-reduced-motion: reduce){ .qc-track{transition:none} }

/* tariff table 2/3 alongside the conditions 1/3 */
.tiergrid{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start;margin-top:34px}
.tiergrid > .tw{margin-top:0}
.tiergrid > .tiercol{min-width:0}
.tiercol > .tw{margin-top:0}
.tiergrid > .fine{margin-top:0;height:100%}
@media (max-width:1000px){
  .tiergrid{grid-template-columns:1fr;gap:20px}
}

/* contract documents on the gemeenten page: same beige card as .cbox, laid
   out two across and stacking below 700px */
.docs{padding:0 0 70px}
/* three equal cards; gap matches .tiergrid, the card row directly above */
.doclist{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:26px;align-items:stretch}
.docitem{background:var(--bg-alt);border-radius:14px;padding:22px 24px;text-decoration:none;
  display:flex;flex-direction:column;gap:5px;border:1px solid transparent;transition:.2s}
.docitem:hover{border-color:var(--accent);transform:translateY(-2px)}
.docname{font-family:"Poppins",sans-serif;font-size:1.05rem;font-weight:600;color:var(--fg-strong);line-height:1.35}
.docmeta{font-size:13.5px;color:var(--fg-muted)}
/* card three is the action, not a third document: navy ground carrying the
   coral button, the same treatment as the .band block on the homepage. The
   accent is never used as text on a light ground. */
.docitem-cta{background:var(--band-bg)}
.docitem-cta .docname{color:var(--band-fg)}
.docitem-cta .docname svg{margin-left:7px;vertical-align:-1px}
.docitem-cta .docmeta{color:var(--band-muted)}
@media (max-width:768px){
  .doclist{grid-template-columns:1fr}
}

/* conditions panel: inclusions and contract terms, told apart */
.fine-group + .fine-group{margin-top:20px;padding-top:18px;border-top:1px solid var(--border)}
.fine-group h3{font-size:11px;font-family:"Poppins",sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fg-muted);font-weight:600;margin:0 0 10px}
.fine-group ul{margin:0;padding-left:17px;font-size:14.5px;line-height:1.6;color:var(--fg);
  display:flex;flex-direction:column;gap:7px}
.fine-group li::marker{color:var(--accent)}

/* video: loads only when someone actually clicks it */
.videocard.is-playing{cursor:default}
.videocard video{width:100%;height:auto;display:block;background:#000}

/* single post */
.rg-hero-img{margin:34px 0 0;border-radius:16px;overflow:hidden;aspect-ratio:16/7}
.rg-hero-img img{display:block;width:100%;height:100%;object-fit:cover}
.rg-article{max-width:72ch;margin:34px 0 0;color:var(--fg);font-size:17px;line-height:1.7}
.rg-article p{margin:0 0 20px}
.rg-article h2{margin:34px 0 12px}
.rg-article h3{margin:28px 0 10px}
/* h4 hoorde hier al te staan: de cookieverklaring van Complianz gebruikt er
   vijftien, voor "Gebruik", "Delen van gegevens" en de dienstnamen. Zonder deze
   regel vielen die terug op de browserstandaard, kleiner dan de alineatekst. */
.rg-article h4{margin:22px 0 8px;font-size:17px}
.rg-article ul,.rg-article ol{margin:0 0 20px 20px}
.rg-article li{margin:0 0 8px}
.rg-article img{max-width:100%;height:auto;border-radius:12px}
.rg-article a{color:var(--accent-strong)}
.rg-back{margin:10px 0 90px}
.rg-single main .wrap{max-width:820px}
.rg-single .nhead h1{font-size:clamp(30px,3.4vw,42px);line-height:1.16;max-width:22ch}
.rg-single .rg-article{max-width:none}
.rg-single .nhead{padding-bottom:0}
.rg-single .rg-hero-img{margin-top:28px}

/* Tekstpagina: zelfde leesbreedte als een nieuwsbericht, en onderaan lucht,
   want dit template heeft geen "terug"-link zoals single.php. */
.rg-tekst main .wrap{max-width:820px}
.rg-tekst .nhead{padding-bottom:0}
.rg-tekst .nhead h1{font-size:clamp(30px,3.4vw,42px);line-height:1.16;max-width:26ch}
.rg-tekst .rg-article{max-width:none;margin-bottom:90px}

/* Zoekresultaten en 404. Beide hadden geen eigen template en kwamen daardoor op
   Astra's header uit; sinds 2026-09-10 staan ze in de eigen schil. */
.rg-404 main .wrap,.rg-zoek main .wrap{max-width:820px}
.rg-404 .nhead,.rg-zoek .nhead{padding-bottom:0}
.rg-404 .nhead h1,.rg-zoek .nhead h1{font-size:clamp(30px,3.4vw,42px);line-height:1.16;max-width:26ch}
.rg-404-links{margin:34px 0 0}
.rg-search{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:34px 0 0}
.rg-search label{flex:0 0 100%;font-size:14px;color:var(--fg-muted)}
.rg-search input[type=search]{flex:1 1 260px;min-width:0;height:48px;padding:0 14px;font-size:16px;
  color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:10px}
.rg-search input[type=search]:focus{outline:none;border-color:var(--accent)}
.rg-search .btn{flex:0 0 auto}
.rg-results{list-style:none;margin:34px 0 90px;padding:0}
.rg-results li{padding:22px 0;border-bottom:1px solid var(--border)}
.rg-results li:first-child{border-top:1px solid var(--border)}
.rg-result-title{display:block;font-family:"Poppins",sans-serif;font-size:19px;font-weight:600;
  color:var(--fg-strong);text-decoration:none}
.rg-result-title:hover{color:var(--accent-strong)}
.rg-results .artmeta{display:block;margin-top:4px}
.rg-results p{margin:8px 0 0;color:var(--fg);line-height:1.7}
.rg-pager{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 90px}
.rg-pager a,.rg-pager span{padding:8px 12px;border:1px solid var(--border);border-radius:8px;
  color:var(--fg);text-decoration:none;font-size:14px}
.rg-pager .current{background:var(--fg-strong);color:#fff;border-color:var(--fg-strong)}
@media (max-width:600px){
  .rg-search input[type=search],.rg-search .btn{flex:1 1 100%}
}

@media (min-width:781px){
.tiergrid{row-gap:0}
.tiergrid > .tiercol{display:contents}
.tiergrid > .tiercol > .tw{grid-column:1;grid-row:1;margin-top:0}
.tiergrid > .tiercol > .tier-note{grid-column:1;grid-row:2}
.tiergrid > .fine{grid-column:2;grid-row:1;align-self:stretch;height:auto}
}


/* illustraties */
.stmt-art,.close-art{line-height:0}
.stmt-art img,.close-art img{display:block;width:100%;height:auto}
.stmt-art{width:500px;max-width:100%;margin:34px auto 0}
.close-art{flex:0 1 auto;min-width:0;width:300px;max-width:100%}
.close-art-wide{width:440px}
@media (min-width:900px){
  .stmt:has(.stmt-art) .wrap{display:flex;flex-wrap:nowrap;align-items:center;gap:48px}
  .stmt-copy{flex:1 1 auto;min-width:0}
  .stmt-art{flex:0 0 42%;width:auto;max-width:500px;margin:0}
  .close-in:has(.close-art) .close-copy{flex:1 1 300px;min-width:0}
}

@media (min-width:900px){
  .stmt:has(.stmt-art) .stmt-art{align-self:flex-end;margin-bottom:-70px}
}
@media (min-width:1600px){
  /* gemeenten (goedgekeurd) */
  .stmt:has(.stmt-art) .wrap{width:auto;max-width:none;padding:0;display:grid;
    grid-template-columns:minmax(0,600px) minmax(0,1fr);column-gap:56px;align-items:center;
    margin-left:calc((100vw - var(--maxw))/2 + 28px);margin-right:240px}
  .stmt:has(.stmt-art) .stmt-art{width:100%;max-width:560px;margin:0 0 -70px auto}
}
@media (min-width:1100px){
  /* professionals: max 280px, krimpt zodat ze altijd 44px rechts van de regel blijft */
  .close-in:has(.close-art:not(.close-art-wide)){position:relative}
  .close-art:not(.close-art-wide){position:absolute;top:50%;bottom:auto;margin:0;max-width:none;transform:translateY(calc(-50% + 32px));
    right:max(-10px, calc((100% - 100vw) / 2 + 8px));
    width:min(280px, calc(100% - 870px - max(-10px, calc((100% - 100vw) / 2 + 8px))))}
}
@media (max-width:1099px){
  .close-art:not(.close-art-wide){display:none}
}

footer{position:relative;z-index:1}

/* video in navy band (homepage) */
.band-media{margin-top:40px}
.band-media .videocard video{display:block;width:100%;height:auto}
@media (min-width:900px){
  .band-inner:has(.band-media){max-width:var(--maxw);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;text-align:left}
  .band-inner:has(.band-media) .btns{justify-content:flex-start}
  .band-media{margin-top:0}
}