@font-face{font-family:"Syne";src:url(fonts/syne-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Manrope";src:url(fonts/manrope-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --papier:#F7F2EC;
  --inkt:#2B2522;
  --lila:#C7B8F5;
  --diep-lila:#7B62D9;
  --wit:#FFFCF8;
  --zand:#EFE5D9;
  --grijs:#665D58;
  --lijn:#E8DFD6;
  --max:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--inkt);font-family:"Manrope",system-ui,sans-serif;font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}

/* koppen */
h1,h2,h3,.logo{font-family:"Syne",sans-serif;font-weight:500;letter-spacing:-.02em;line-height:1}
h1{font-size:clamp(48px,9vw,112px)}
h2{font-size:clamp(34px,5vw,56px)}
h3{font-size:22px;line-height:1.15}
.punt{color:var(--diep-lila)}
.label{font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--grijs);margin-bottom:20px;display:block}

/* knoppen */
.knop{display:inline-flex;align-items:center;gap:8px;padding:14px 26px;border-radius:999px;font-weight:500;font-size:16px;text-decoration:none;border:1px solid var(--inkt);transition:transform .15s,background .15s}
.knop:hover{transform:translateY(-2px)}
.knop-lila{background:var(--lila);border-color:var(--lila)}
.knop-lila:hover{background:#B9A6F2}
.knop-lijn{background:transparent}
.knop-lijn:hover{background:var(--wit)}

/* navigatie */
.nav{position:sticky;top:0;z-index:10;background:rgba(247,242,236,.92);backdrop-filter:saturate(1.4) blur(8px);-webkit-backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--lijn)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.logo{font-size:24px;text-decoration:none;white-space:nowrap}
.nav ul{display:flex;gap:32px;list-style:none;font-size:15px}
.nav ul a{text-decoration:none}
.nav ul a:hover{color:var(--diep-lila)}
.nav .knop{padding:10px 20px;font-size:14px;white-space:nowrap}
@media(max-width:820px){.nav ul{display:none}}
@media(max-width:400px){.nav .wrap{gap:12px;padding:0 16px}.logo{font-size:20px}.nav .knop{padding:8px 14px;font-size:13px}}
@media(max-width:330px){.nav .knop{display:none}}

/* hero */
.hero{padding:96px 0 104px}
.hero h1{max-width:12ch}
.hero p.intro{font-size:20px;max-width:34em;margin:32px 0 40px;color:var(--grijs)}
.hero .knoppen{display:flex;flex-wrap:wrap;gap:12px}
.hero .lila-vlak{display:inline-block;background:var(--lila);padding:0 .18em;border-radius:.12em}

/* secties */
section{padding:104px 0;border-top:1px solid var(--lijn)}
.kop{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.kop p{max-width:30em;color:var(--grijs)}

/* diensten */
.diensten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:16px}
.dienst{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:14px}
.dienst .nr{font-family:"Syne",sans-serif;font-size:14px;color:var(--diep-lila)}
.dienst p{color:var(--grijs);font-size:16px}

.dienst-lila{background:var(--lila);border-color:var(--lila)}
.dienst-lila p{color:#3D3456}
.tekstlink{margin-top:auto;font-weight:500;font-size:15px;text-decoration:none;border-bottom:1px solid currentColor;align-self:flex-start}

/* herken je dit */
.herken{padding:88px 0}
.herken .groot{font-family:"Syne",sans-serif;font-weight:500;font-size:clamp(24px,3.2vw,38px);line-height:1.3;letter-spacing:-.01em;max-width:24em}
.herken .zacht{font-size:20px;color:var(--grijs);margin-top:28px}

/* pakketten */
.pakketten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px}
.pakket{background:var(--wit);border:1px solid var(--lijn);border-radius:20px;padding:32px 28px;display:flex;flex-direction:column;gap:12px}
.pakket .uren{font-family:"Syne",sans-serif;font-size:64px;line-height:1;display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.pakket .uren small{font-family:"Manrope",sans-serif;font-size:15px;color:var(--grijs)}
.pakket p{color:var(--grijs);font-size:16px}
.pakket .prijs{margin-top:auto;padding-top:16px;border-top:1px solid var(--lijn);font-size:14px;font-weight:500}
.pakket-lila{background:var(--lila);border-color:var(--lila)}
.pakket-lila p,.pakket-lila .uren small{color:#3D3456}
.pakket-lila .prijs{border-color:#A894E8}

/* waarom */
.waarom{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.reden{border-top:2px solid var(--inkt);padding-top:24px;display:flex;flex-direction:column;gap:12px}
.reden p{color:var(--grijs);font-size:16px}
.reden-groot{grid-column:1/-1;background:var(--lila);border:0;border-radius:20px;padding:40px 36px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;align-items:center;margin-bottom:24px}
.reden-groot h3{font-size:clamp(26px,3.2vw,38px);line-height:1.1}
.reden-groot p{color:#3D3456;font-size:17px}
@media(max-width:820px){.waarom{grid-template-columns:1fr}.reden-groot{grid-template-columns:1fr;padding:32px 24px;gap:16px}}

/* voilà-start */
.start{background:var(--inkt);color:var(--papier);border-radius:24px;padding:40px 36px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:center;margin-bottom:24px}
.start .label{color:var(--lila);margin-bottom:12px}
.start .punt{color:var(--lila)}
.start .knop-lila{color:var(--inkt)}
.start h3{font-size:clamp(30px,4vw,48px);line-height:1}
.start p{color:#C9BFB5;margin-top:16px}
.start ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.start li{padding-left:28px;position:relative}
.start li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;border-radius:50%;background:var(--lila)}
.start .prijsregel{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:28px}
.start .prijsregel span{font-size:14px;color:#C9BFB5}
@media(max-width:820px){.start{grid-template-columns:1fr;padding:32px 24px;gap:28px}}

/* werkwijze */
.donker{background:var(--inkt);color:var(--papier);border-top:0}
.donker .label,.donker .kop p{color:#C9BFB5}
.donker .punt{color:var(--lila)}
.stappen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:40px;counter-reset:stap}
.stap{border-top:1px solid #3E3633;padding-top:28px}
.stap .cijfer{font-family:"Syne",sans-serif;font-size:56px;line-height:1;color:var(--lila);margin-bottom:20px;display:block}
.stap p{color:#C9BFB5;font-size:16px;margin-top:12px}

/* over */
.over{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:64px;align-items:center}
.over .foto{position:relative;margin:0 0 20px 20px}
.over .foto::before{content:"";position:absolute;left:-20px;bottom:-20px;width:100%;height:100%;border-radius:24px;background:var(--lila)}
.over .foto img{position:relative;z-index:1;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 30%;border-radius:24px}
.over p{color:var(--grijs);margin-top:20px}
@media(max-width:820px){.over{grid-template-columns:1fr;gap:40px}.over .foto{max-width:420px}}

/* vragen */
.vragen{max-width:820px}
details{border-bottom:1px solid var(--lijn);padding:24px 0}
summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;font-weight:500;font-size:19px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Syne",sans-serif;font-size:26px;line-height:1;color:var(--diep-lila);transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--grijs);margin-top:14px;max-width:40em}

/* contact */
.contact{background:var(--lila);border-top:0}
.contact .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px}
.contact .label{color:#3D3456}
.contact p.sub{margin-top:24px;max-width:26em}
form{display:flex;flex-direction:column;gap:14px}
label{font-size:14px;font-weight:500;display:flex;flex-direction:column;gap:6px}
input,textarea{font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--inkt);background:var(--papier);color:var(--inkt)}
input:focus,textarea:focus{outline:2px solid var(--inkt);outline-offset:2px}
textarea{min-height:140px;resize:vertical}
form .knop{font-family:inherit;align-self:flex-start;background:var(--inkt);color:var(--papier);cursor:pointer;margin-top:6px}
.formnoot{font-size:13px;color:#3D3456}
.formnoot a{text-underline-offset:3px}
.verborgen{position:absolute;left:-9999px}
@media(max-width:820px){.contact .grid{grid-template-columns:1fr;gap:40px}}

/* footer */
footer{padding:40px 0;font-size:14px;color:var(--grijs)}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* tekstpagina (privacy) */
.tekstpagina{padding:88px 0 104px}
.tekstpagina .wrap{max-width:760px}
.tekstpagina h1{font-size:clamp(44px,7vw,80px)}
.tekstpagina .intro{font-size:20px;color:var(--grijs);margin:24px 0 56px}
.tekstpagina h2{font-size:24px;line-height:1.2;margin:40px 0 12px}
.tekstpagina p{color:var(--grijs)}
.tekstpagina a{color:var(--inkt);text-decoration-color:var(--diep-lila);text-underline-offset:3px}
.tekstpagina .klein{font-size:14px;margin-top:56px}
footer a{text-underline-offset:3px}

/* losse pagina's */
.los{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:64px 0}
.los p{font-size:20px;color:var(--grijs);margin:28px 0 40px;max-width:30em}

/* rustiger lila: lila alleen op de belangrijkste momenten */
.tekstlink{color:var(--diep-lila)}
.pakket-uitgelicht{border:2px solid var(--inkt);position:relative}
.badge{position:absolute;top:-13px;left:24px;background:var(--lila);color:var(--inkt);font-size:12px;font-weight:500;padding:4px 12px;border-radius:999px}
.licht{background:var(--wit)}
.licht .stap{border-top-color:var(--lijn)}
.licht .stap .cijfer{color:var(--diep-lila)}
.licht .stap p{color:var(--grijs)}
.over .foto::before{background:transparent;border:2px solid var(--lila)}

/* over mij: cijfers en tools */
.cijfers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:32px;padding-top:24px;border-top:1px solid var(--lijn)}
.cijfers dt{font-family:"Syne",sans-serif;font-size:clamp(28px,3.4vw,40px);line-height:1;color:var(--inkt)}
.cijfers dd{margin-top:8px;font-size:14px;line-height:1.4;color:var(--grijs)}
.over p.tools{font-size:14px;margin-top:24px}
.over p.tools span{display:block;font-weight:500;color:var(--inkt);margin-bottom:4px}

/* prijzen */
.bedrag{font-family:"Syne",sans-serif;font-weight:500;font-size:22px;letter-spacing:-.01em;margin-right:4px}
.pakket .prijs{font-weight:400;color:var(--grijs);display:flex;align-items:baseline;flex-wrap:wrap;gap:4px}
.pakket .prijs .bedrag{color:var(--inkt)}
.start .prijsregel .bedrag{color:var(--papier);font-size:26px}
.na-pakketten{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.na-pakketten span{color:var(--grijs);font-size:15px}

/* introductieaanbod */
.intro-label{display:inline-block;background:var(--lila);color:var(--inkt);font-size:12px;font-weight:500;letter-spacing:.04em;padding:5px 12px;border-radius:999px;margin-bottom:16px}
.start .oud{color:#9A8F87;font-size:18px;margin-right:4px}
.start .review-noot{font-size:14px;margin-top:20px}

/* strippenkaart */
.strippenkaart{margin-top:16px;background:var(--wit);border:1px dashed var(--diep-lila);border-radius:20px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap}
.strippenkaart > div{min-width:0;flex:1 1 320px}
.strippenkaart h3{font-size:20px}
.strippenkaart p{color:var(--grijs);font-size:16px;margin-top:6px}
.strippenkaart .prijs{color:var(--grijs);font-size:14px;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px}
.strippenkaart .bedrag{color:var(--inkt)}

/* goed om te weten, uren per week, locatie */
.goed-om-te-weten{margin-top:56px;padding-top:32px;border-top:1px solid var(--lijn)}
.goed-om-te-weten h3{margin-bottom:20px}
.goed-om-te-weten ul{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 40px}
.goed-om-te-weten li{color:var(--grijs);font-size:16px}
.goed-om-te-weten strong{display:block;color:var(--inkt);font-weight:500;margin-bottom:4px}
@media(max-width:820px){.goed-om-te-weten ul{grid-template-columns:1fr}}
.perweek{font-size:14px;color:var(--diep-lila);font-weight:500;margin-top:-8px}
.locatie{margin-top:16px;font-size:15px;color:#3D3456}

.na-pakketten span a{color:var(--inkt);text-underline-offset:3px}

.over p a{color:var(--inkt);text-underline-offset:3px;text-decoration-color:var(--diep-lila)}

/* ronde foto */
.over .foto{max-width:440px;margin:0 auto 0 0}
.over .foto::before{left:auto;right:-14px;bottom:-14px;width:100%;height:auto;aspect-ratio:1/1;border-radius:50%;background:var(--lila);border:0}
.over .foto img{aspect-ratio:1/1;border-radius:50%;object-position:center 28%}
@media(max-width:820px){.over .foto{max-width:300px;margin:0 auto 0 0}}

/* taalwissel */
.nav-rechts{display:flex;align-items:center;gap:16px}
.taal{font-size:14px;font-weight:500;text-decoration:none;color:var(--grijs);letter-spacing:.06em}
.taal:hover{color:var(--diep-lila)}
@media(max-width:400px){.nav-rechts{gap:10px}}

/* warme tint */
.herken{background:var(--zand);border-top:0}

.contact .mail{margin-top:8px;font-size:15px;color:#3D3456}
.contact .mail a{color:var(--inkt);font-weight:500;text-underline-offset:3px}