@font-face{
  font-family:"Jost";
  src:url("../assets/fonts/jost.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#fbfbf6;
  --ink:#1e2a18;
  --muted:#46543e;
  --deep:#183a10;
  --lime:#50af31;
  --on-lime:#10290a;
  --tint:#eef6e4;
  --geel:#dedc00;
  --paars:#580f82;
  --olijf:#707d1c;
  --lijn:#cfd9c4;
  --wit:#ffffff;
  --r:28px;
  --gut:clamp(16px,4vw,48px);
  --font:"Jost","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:110px;-webkit-tap-highlight-color:rgba(80,175,49,.25)}
a,button,select,summary{touch-action:manipulation}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font);
  font-size:1.0625rem;
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4,h5{text-wrap:balance;margin:0;color:var(--deep);font-weight:400;line-height:1.1;letter-spacing:-.015em;hyphens:manual}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--deep);color:#fff;padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-inline:var(--gut)}

/* knoppen */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:.65em 1.6em;
  border-radius:999px;border:2px solid transparent;
  font:inherit;font-weight:500;font-size:1rem;line-height:1.2;text-decoration:none;text-align:center;
  cursor:pointer;
  transition:background-color .2s,color .2s,border-color .2s;
}
.btn--lime{background-color:var(--lime);color:var(--on-lime);border-color:var(--lime)}
.btn--lime:hover{background-color:#5cc039;border-color:#5cc039}
.btn--deep{background-color:var(--deep);color:#fff;border-color:var(--deep)}
.btn--deep:hover{background-color:#235019;border-color:#235019}
.btn--lijn{background-color:transparent;color:var(--deep);border-color:var(--deep)}
.btn--lijn:hover{background-color:var(--deep);color:#fff}
.btn--paars{background-color:var(--paars);color:#fff;border-color:var(--paars)}
.btn--paars:hover{background-color:#6f1a9a;border-color:#6f1a9a}
.btn--lijn-paars{background-color:transparent;color:var(--paars);border-color:var(--paars)}
.btn--lijn-paars:hover{background-color:var(--paars);color:#fff}
.knoppen{display:flex;flex-wrap:wrap;gap:12px}
.tekstlink{font-weight:500;color:var(--deep);text-underline-offset:4px;text-decoration-thickness:2px}
.tekstlink:hover{text-decoration-color:var(--lime)}

/* strook */
.strook{background:var(--lime);color:var(--on-lime);text-align:center;font-size:.875rem;font-weight:500;line-height:1.35;padding:9px var(--gut)}
.strook p{margin:0}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--lijn)}
.header-in{max-width:1440px;margin-inline:auto;padding:8px var(--gut);display:flex;align-items:center;gap:24px;min-height:88px}
.logo{display:block;flex:none;line-height:0}
.logo img{width:72px;height:auto}
.nav{margin-left:auto}
.nav ul{display:flex;gap:6px}
.nav a{display:block;padding:.5em .9em;border-radius:999px;text-decoration:none;font-weight:500;color:var(--deep)}
.nav a:hover{background:var(--tint)}
.menu-knop{display:none}

/* hero */
.hero{padding:12px var(--gut) 0;max-width:1440px;margin-inline:auto}
.mozaiek{
  display:grid;gap:12px;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:1fr 1fr;
  height:clamp(560px,calc(100svh - 150px),760px);
}
.tegel{margin:0;border-radius:var(--r);overflow:hidden;position:relative}
.tegel img{width:100%;height:100%;object-fit:cover}
.tegel--tekst{
  grid-column:1/6;grid-row:1/3;
  background:var(--lime);color:var(--on-lime);
  padding:clamp(24px,3.4vw,52px);
  display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
}
.tegel--tekst h1{color:var(--on-lime);font-size:clamp(2.5rem,4.5vw,4.6rem);font-weight:400;letter-spacing:-.02em;line-height:1.02}
.tegel--tekst p{font-size:1.2rem;max-width:30em;margin:0}
.tegel--tekst .knoppen{margin-top:.6rem}
.tegel--tekst .btn--lijn{color:var(--on-lime);border-color:var(--on-lime)}
.tegel--tekst .btn--lijn:hover{background-color:var(--on-lime);color:#fff}
.tegel--a{grid-column:6/9;grid-row:1/3}
.tegel--b{grid-column:9/13;grid-row:1/2}
.tegel--b img{object-position:50% 30%}
.tegel--c{grid-column:9/13;grid-row:2/3}
.tegel--c img{object-position:80% 50%}
.anim .tegel:not(.tegel--tekst){clip-path:inset(100% 0 0 0)}

/* feiten */
.feiten{max-width:1440px;margin:48px auto 0;padding-inline:var(--gut)}
.feiten ul{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--lijn)}
.feiten li{padding:22px 20px;font-size:1.2rem;line-height:1.3;color:var(--deep);font-weight:500;border-left:1px solid var(--lijn)}
.feiten li:first-child{border-left:0;padding-left:0}

/* secties */
.sectie{padding-block:clamp(64px,9vw,120px)}
.sectie h2{font-size:clamp(2.1rem,4.2vw,3.5rem);margin-bottom:.5em}
.lead{font-size:1.25rem;line-height:1.5}
section[id],h2[id]{scroll-margin-top:100px}
.paneel[id]{scroll-margin-top:110px}

/* categoriekaarten */
.kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:2rem}
.kaart{border:2px solid var(--c);border-radius:var(--r);overflow:hidden;background:var(--wit)}
.kaart-link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.kaart-link img{width:100%;aspect-ratio:4/5;object-fit:cover}
.kaart-link img.kaart-wide{object-position:45% 50%}
.kaart-tekst{padding:20px 22px 24px;display:flex;flex-direction:column;gap:.6rem;flex:1}
.kaart-tekst h3{font-size:1.65rem;font-weight:500}
.kaart-tekst p{margin:0;color:var(--muted);font-size:1rem;line-height:1.5}
.kaart-meer{margin-top:auto;padding-top:.6rem;font-weight:500;color:var(--deep);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;text-decoration-color:var(--c)}
.kaart-link:hover .kaart-meer{text-decoration-color:var(--deep)}

/* tarieven */
.tarieven{background:var(--wit);border-block:1px solid var(--lijn)}
.tablist{display:flex;flex-wrap:wrap;gap:8px;margin:1.6rem 0 2.2rem}
.tablist button{
  font:inherit;font-weight:500;font-size:1rem;
  min-height:46px;padding:.5em 1.3em;border-radius:999px;
  background-color:var(--wit);color:var(--deep);
  border:2px solid var(--c);cursor:pointer;
  transition:background-color .2s,color .2s;
}
.tablist button:hover{background-color:var(--tint)}
.tablist button[aria-selected="true"]{background-color:var(--c);color:var(--ci)}
.tablist{display:none}
.js .tablist{display:flex}
.js .paneel[hidden]{display:none}
.paneel{padding-top:0;border-top:6px solid var(--c);padding-top:1.6rem;margin-top:2.5rem}
.js .paneel{margin-top:0}
.paneel-kop{font-size:1.6rem;font-weight:500;margin-bottom:.8rem}
.paneel-kop--2{margin-top:2.4rem}
.prijslijst{border-top:1px solid var(--lijn)}
.rij{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,18rem);gap:8px 32px;padding:20px 0;border-bottom:1px dashed var(--lijn);align-items:start}
.rij .naam strong{display:block;font-size:1.3rem;font-weight:600;color:var(--deep);line-height:1.2}
.rij .naam p{margin:.25em 0 0;color:var(--muted);font-size:1rem;line-height:1.5;max-width:42em}
.opties li{display:flex;justify-content:space-between;gap:16px;padding:2px 0;line-height:1.5}
.opties span{color:var(--muted)}
.opties b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--deep);white-space:nowrap;margin-left:auto}
.opties li:only-child{justify-content:flex-end}
.opties li:only-child span{margin-right:auto}
.noot{margin:1.4rem 0 0;color:var(--muted);max-width:44em}
.extras{margin-top:2.4rem;background:var(--tint);border-radius:var(--r);padding:clamp(20px,3vw,36px)}
.extras h4{font-size:1.4rem;font-weight:500;margin-bottom:1rem}
.extras h5{font-size:1rem;font-weight:600;margin-bottom:.4rem;letter-spacing:0;color:var(--deep)}
.extras-in{display:grid;grid-template-columns:1fr 1fr;gap:12px 48px}
.extras li{display:flex;justify-content:space-between;gap:16px;padding:6px 0;border-bottom:1px dashed #b9c9a8;line-height:1.4}
.extras b{font-variant-numeric:tabular-nums;font-weight:600;color:var(--deep);white-space:nowrap}
.tarief-noot{margin:2rem 0 0;font-weight:500;color:var(--deep)}

/* huidverbetering */
.huidverbetering{background:var(--tint)}
.hv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:start}
.hv-tekst{position:sticky;top:120px}
.belangrijk{margin:1.4rem 0 0;padding:16px 22px;background:var(--wit);border-radius:20px;font-size:1.05rem}
.hv-tweede{display:flex;gap:20px;align-items:flex-start;margin-top:2.4rem;padding-top:1.6rem;border-top:1px solid #b9c9a8}
.hv-tweede img{width:160px;aspect-ratio:1;object-fit:cover;border-radius:50%;flex:none}
.hv-tweede h3{font-size:1.35rem;font-weight:500;margin-bottom:.4rem}
.hv-tweede p{color:var(--muted);margin-bottom:.6rem}
.hv-pad{position:relative;padding-left:110px;min-height:760px}
.hv-lijn{position:absolute;left:0;top:0;width:80px;height:100%;overflow:visible}
.hv-lijn path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.hv-spoor{stroke:#c9dcb5;stroke-width:3}
.hv-lijn-pad{stroke:var(--lime);stroke-width:6}
.hv-stappen{position:absolute;inset:0}
.hv-stap{position:absolute;left:110px;right:0;transform:translateY(-50%);background:var(--wit);border-radius:var(--r);padding:22px 26px;max-width:30rem}
.hv-stap:nth-child(1){top:25%}
.hv-stap:nth-child(2){top:50%}
.hv-stap:nth-child(3){top:75%}
.hv-stap h3{font-size:1.35rem;font-weight:500;margin-bottom:.35rem;line-height:1.2}
.hv-stap p{margin:0;color:var(--muted)}
.hv-stip{position:absolute;left:-94px;top:50%;width:48px;height:48px;margin-top:-24px;border-radius:50%;background:var(--lime);color:var(--on-lime);display:grid;place-items:center;font-weight:600;font-size:1.15rem}
.anim .hv-lijn-pad{stroke-dasharray:1;stroke-dashoffset:1}
.anim .hv-stap{opacity:.28}
.anim .hv-stip{transform:scale(.6)}
.anim .hv-stap.is-aan{opacity:1}
.anim .hv-stap.is-aan .hv-stip{transform:scale(1)}
.hv-stap,.hv-stip{transition:opacity .35s,transform .35s}

/* zwanger */
.zw-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.zw-fotos{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.zw-fotos img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.zw-b{margin-top:56px}
.zwanger h2{color:var(--paars)}
.zwanger .lead{color:var(--ink)}
.vinklijst{margin:1.4rem 0}
.vinklijst li{position:relative;padding:.35em 0 .35em 2rem;line-height:1.45}
.vinklijst li::before{content:"";position:absolute;left:0;top:.72em;width:.9rem;height:.9rem;border-radius:50%;background:var(--lime)}
.zwanger .vinklijst li::before{background:var(--paars)}
.zw-samen{padding:16px 22px;background:#f3ecf8;border-radius:20px;margin:1.4rem 0 1.6rem}
.zw-samen a{color:var(--paars);font-weight:500;text-underline-offset:4px}

/* duo */
.duo{background:var(--lime);color:var(--on-lime)}
.duo h2{color:var(--on-lime)}
.duo-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,80px);align-items:center}
.duo-tekst p{font-size:1.2rem;max-width:30em}
.duo-foto{margin:0;border-radius:var(--r);overflow:hidden}
.duo-foto img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* over */
.over-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,6vw,96px);align-items:center}
.over-foto{width:100%;max-width:440px;aspect-ratio:1;object-fit:cover;border-radius:50%;justify-self:center}
.over-tekst a{font-weight:500;text-underline-offset:4px}

/* nouvital */
.nouvital{background:var(--tint)}
.schulp{
  --s:34px;--b:11px;
  --m:
    linear-gradient(#000 0 0) 50% 50%/calc(100% - 2 * var(--b)) calc(100% - 2 * var(--b)) no-repeat,
    radial-gradient(circle var(--b) at 50% var(--b),#000 98%,#0000) 50% 0/var(--s) calc(2 * var(--b)) repeat-x,
    radial-gradient(circle var(--b) at 50% var(--b),#000 98%,#0000) 50% 100%/var(--s) calc(2 * var(--b)) repeat-x,
    radial-gradient(circle var(--b) at var(--b) 50%,#000 98%,#0000) 0 50%/calc(2 * var(--b)) var(--s) repeat-y,
    radial-gradient(circle var(--b) at var(--b) 50%,#000 98%,#0000) 100% 50%/calc(2 * var(--b)) var(--s) repeat-y;
  background:var(--wit);
  padding:calc(var(--b) + clamp(28px,5vw,64px));
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;
  -webkit-mask:var(--m);
  mask:var(--m);
}
.nv-beeld{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.nv-beeld img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:20px}
.nv-proef{margin:0;font-size:1.1rem}

/* contact */
.contact{background:var(--bg)}
.ct-lead{max-width:36em}
.routes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:2rem 0 3.5rem}
.route{display:flex;flex-direction:column;gap:2px;padding:clamp(22px,3vw,36px);border-radius:var(--r);text-decoration:none;border:2px solid var(--deep);min-height:140px;justify-content:center;transition:background-color .2s,color .2s}
.route-naam{font-size:clamp(1.8rem,3vw,2.6rem);font-weight:500;line-height:1.1}
.route-sub{font-size:1.05rem}
.route--wa{background-color:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.route--wa:hover{background-color:#5cc039;border-color:#5cc039}
.route--tel{background-color:var(--deep);color:#fff}
.route--tel:hover{background-color:#235019}
.route--mail{background-color:transparent;color:var(--deep)}
.route--mail:hover{background-color:var(--tint)}
.ct-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:clamp(32px,6vw,96px);align-items:start}
.formulier{background:var(--wit);border:1px solid var(--lijn);border-radius:var(--r);padding:clamp(22px,3.5vw,44px)}
.formulier h3,.gegevens h3{font-size:1.5rem;font-weight:500;margin-bottom:.8rem}
.gegevens h3{font-size:1.25rem;font-weight:600;margin:1.6rem 0 .3rem}
.gegevens h3:first-child{margin-top:0}
.gegevens p{margin-bottom:.4em}
.klein{font-size:.95rem;color:var(--muted)}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.veld{margin-bottom:16px}
.veld label{display:block;font-weight:500;margin-bottom:6px;color:var(--deep)}
.veld input,.veld select,.veld textarea{
  width:100%;font:inherit;color:var(--ink);background-color:var(--bg);
  border:2px solid #9fb08f;border-radius:16px;padding:.7em 1em;min-height:48px;
}
.veld textarea{resize:vertical}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:3px solid var(--deep);outline-offset:2px;border-color:var(--deep)}
.form-melding{margin:16px 0 0;font-weight:500;color:var(--deep)}
.form-melding:empty{display:none}
.form-melding.is-fout{color:#8a1c1c}
.form-melding.is-ok{background:var(--tint);padding:14px 18px;border-radius:16px}

/* footer */
.site-footer{background:var(--deep);color:#e6f0da;padding-top:56px}
.site-footer a{color:#fff;text-underline-offset:4px}
.site-footer :focus-visible{outline-color:#fff}
.foot-grid{display:grid;grid-template-columns:auto repeat(3,1fr);gap:32px 48px;align-items:start}
.foot-grid p{margin:0 0 .8em;line-height:1.5}
.copy{margin:48px 0 0;padding:20px var(--gut);border-top:1px solid #35592b;text-align:center;font-size:.95rem}

/* vaste balk mobiel */
.vaste-balk{display:none}

/* tablet */
@media (max-width:1100px){
  .kaarten{grid-template-columns:repeat(2,1fr)}
  .feiten ul{grid-template-columns:repeat(2,1fr)}
  .feiten li:nth-child(3){border-left:0;padding-left:0}
  .feiten li:nth-child(n+3){border-top:1px solid var(--lijn)}
  .hv-grid{grid-template-columns:1fr}
  .hv-tekst{position:static}
}

@media (max-width:900px){
  .header-in{gap:12px;min-height:72px}
  .logo img{width:56px}
  .header-cta{margin-left:auto;min-height:44px;padding:.5em 1.1em}
  .nav{margin-left:0}
  .js .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--lijn);padding:12px var(--gut) 20px}
  .js .nav.is-open{display:block}
  .js .nav ul{flex-direction:column;gap:0}
  .js .nav a{padding:.8em .4em;font-size:1.2rem;border-radius:12px}
  .nav ul{flex-wrap:wrap}
  .menu-knop{
    display:none;flex:none;width:48px;height:48px;border-radius:50%;
    background-color:var(--tint);border:2px solid var(--deep);cursor:pointer;
    flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0;
  }
  .js .menu-knop{display:flex}
  .menu-knop span{display:block;width:20px;height:2px;background:var(--deep);border-radius:2px;transition:transform .2s,opacity .2s}
  .menu-knop[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .menu-knop[aria-expanded="true"] span:nth-child(2){opacity:0}
  .menu-knop[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html:not(.js) .header-in{flex-wrap:wrap}
  html:not(.js) .nav{width:100%;order:3}

  .mozaiek{height:auto;display:flex;flex-direction:column}
  .tegel--tekst{padding:28px 22px 30px}
  .tegel--a{aspect-ratio:16/10}
  .tegel--b,.tegel--c{display:none}
  .tegel--a img{object-position:50% 40%}
  .knoppen .btn{padding:.6em 1.1em;font-size:.95rem}

  .zw-grid,.duo-grid,.over-grid{grid-template-columns:1fr}
  .zw-fotos{order:2}
  .duo-foto{order:2}
  .schulp{grid-template-columns:1fr}
  .routes{grid-template-columns:1fr}
  .route{min-height:0}
  .ct-grid{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-logo{grid-column:1/-1}

  .vaste-balk{
    display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:60;
    padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));
    background:var(--bg);border-top:1px solid var(--lijn);
    transform:translateY(110%);transition:transform .3s;
  }
  .vaste-balk .btn{flex:1}
  .vaste-balk.is-zichtbaar{transform:none}
  body{padding-bottom:0}
  .site-footer{padding-bottom:72px}
}

@media (max-width:640px){
  body{font-size:1rem}
  .strook{font-size:.8125rem}
  .kaarten{grid-template-columns:1fr}
  .kaart-link img{aspect-ratio:16/11}
  .rij{grid-template-columns:1fr;gap:10px}
  .opties li:only-child{justify-content:space-between}
  .extras-in{grid-template-columns:1fr}
  .veld-rij{grid-template-columns:1fr}
  .tablist button{padding:.45em 1.05em;min-height:44px}
  .feiten li{font-size:1.05rem;padding:18px 12px}
  .hv-pad{padding-left:84px}
  .hv-lijn{width:60px}
  .hv-stap{left:84px}
  .hv-stip{left:-78px}
  .hv-tweede{flex-direction:column}
  .zw-b{margin-top:32px}
  .foot-grid{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}