@font-face{font-family:"Newsreader";src:url("../assets/fonts/newsreader.woff2") format("woff2");font-weight:300 500;font-style:normal;font-display:swap}
@font-face{font-family:"Newsreader";src:url("../assets/fonts/newsreader-italic.woff2") format("woff2");font-weight:300 500;font-style:italic;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("../assets/fonts/hanken-grotesk.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --creme:#F6F1E9;
  --zand:#EDE6D9;
  --tint:#E3E6D8;
  --wit:#FFFFFF;
  --inkt:#23281F;
  --zacht:#4A5142;
  --salie:#57614D;
  --diep:#3E4636;
  --oranje:#EA6F0F;
  --lijn:rgba(35,40,31,.22);
  --kop:"Newsreader",Georgia,"Times New Roman",serif;
  --tekst:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --rand:clamp(1.25rem,5vw,3rem);
  --max:72rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:4.5rem}
body{margin:0;background:var(--creme);color:var(--inkt);font-family:var(--tekst);font-size:1.0625rem;line-height:1.6;font-kerning:normal;text-rendering:optimizeLegibility}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{font-family:var(--kop);font-weight:300;font-optical-sizing:auto;font-kerning:normal;margin:0;letter-spacing:-.01em;color:var(--inkt)}
h2{font-size:clamp(2rem,6.2vw,3.7rem);line-height:1.06}
h3{font-size:1.5rem;line-height:1.2;font-weight:400}
em{font-style:italic}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--inkt);outline-offset:3px;border-radius:2px}
.on-dark :focus-visible,.contact :focus-visible,.footer :focus-visible{outline-color:var(--creme)}
.skip{position:absolute;left:1rem;top:-4rem;background:var(--inkt);color:var(--creme);padding:.7rem 1rem;z-index:100;border-radius:4px}
.skip:focus{top:1rem}
.wrap{width:100%;max-width:calc(var(--max) + 2 * var(--rand));margin-inline:auto;padding-inline:var(--rand)}
.sec{padding-block:clamp(4rem,9vw,8rem)}
.bg-wit{background:var(--wit)}
.bg-tint{background:var(--tint)}

/* knoppen */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;font:inherit;font-weight:600;font-size:1rem;line-height:1.2;text-decoration:none;border:1.5px solid var(--inkt);border-radius:999px;padding:.85rem 1.5rem;background:transparent;color:var(--inkt);cursor:pointer;transition:background-color .25s,color .25s}
.btn:hover{background:var(--inkt);color:var(--creme)}
.btn .pijl{transition:transform .25s}
.btn:hover .pijl{transform:translateX(3px)}
.btn-oranje{background:var(--oranje);border-color:var(--oranje);color:var(--inkt)}
.btn-oranje:hover{background:var(--inkt);border-color:var(--inkt);color:var(--creme)}
.btn-licht{border-color:var(--creme);color:var(--creme)}
.btn-licht:hover{background:var(--creme);color:var(--inkt)}
.rond{width:7rem;height:7rem;padding:.5rem;text-align:center;flex:none;font-size:.95rem;flex-direction:column;gap:.2rem}
.rond:hover{transform:rotate(-4deg)}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--creme);border-bottom:1px solid transparent;transition:border-color .3s}
.nav.is-scrolled{border-bottom-color:var(--lijn)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.25rem}
.logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--inkt)}
.logo-fig{width:2.9rem;height:auto;flex:none}
.logo-naam{display:flex;flex-direction:column;font-family:var(--kop);line-height:1.05;font-weight:400}
.logo-naam small{font-size:.8rem;letter-spacing:.02em;font-weight:400;color:var(--zacht)}
.logo-naam strong{font-size:1.3rem;font-weight:500;letter-spacing:-.01em}
.menu{display:none;gap:2rem;align-items:center}
.menu a:not(.btn){text-decoration:none;font-weight:500;font-size:.98rem;padding:.4rem 0;border-bottom:1.5px solid transparent;transition:border-color .2s}
.menu a:not(.btn):hover{border-bottom-color:var(--inkt)}
.nav-bel{display:none;padding:.55rem 1.2rem}
.menu-knop{font:inherit;font-weight:600;background:none;border:1.5px solid var(--inkt);border-radius:999px;padding:.55rem 1.1rem;color:var(--inkt);cursor:pointer}
.nav.open .menu{display:flex;flex-direction:column;align-items:flex-start;gap:0;position:absolute;left:0;right:0;top:100%;background:var(--creme);padding:.5rem var(--rand) 1.5rem;border-bottom:1px solid var(--lijn)}
.nav.open .menu a:not(.btn){font-size:1.25rem;padding:.8rem 0;width:100%;border-bottom:1px solid var(--lijn)}
.nav.open .menu a.menu-bel{border-bottom:0;margin-top:.6rem}

/* hero */
.hero{padding-top:clamp(1rem,3vw,2rem);padding-bottom:2rem;position:relative}
.stage{position:relative;max-width:68.75rem;margin-inline:auto;padding-inline:var(--rand)}
.hero-woord{position:relative;z-index:0;display:block;font-family:var(--kop);font-weight:300;font-size:min(20vw,13rem);line-height:.82;letter-spacing:-.025em;color:var(--salie);margin:0 0 -.18em -.03em;white-space:nowrap;user-select:none}
.hero-fig{position:absolute;z-index:1;right:var(--rand);top:.2rem;width:clamp(3.4rem,15vw,12.5rem);height:auto}
.frame{position:relative;z-index:1;border-radius:6px;overflow:hidden;background:var(--zand)}
.frame img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:46% 50%}
.hero-blok{position:relative;z-index:2;background:var(--creme);padding:1.6rem 0 0;margin-top:-3rem}
.hero-blok h1{font-size:clamp(2.1rem,7.4vw,3.15rem);line-height:1.05}
.hero-blok p{margin:1rem 0 1.4rem;max-width:30rem}
.acties{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem}

/* over */
.over{display:grid;gap:2.5rem}
.over-tekst p{max-width:36rem}
.over h2{margin-bottom:1.5rem}
.over .foto{border-radius:6px;overflow:hidden}
.over .foto img{width:100%;aspect-ratio:1100/655;object-fit:cover}
.feiten{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--lijn);font-family:var(--kop);font-size:clamp(1.2rem,3.6vw,1.6rem);font-weight:300;display:flex;flex-wrap:wrap;gap:.2rem .7rem}
.feiten li:not(:last-child)::after{content:"\00B7";margin-left:.7rem}
.feiten em{font-style:italic}

/* klachten */
.klachten{display:grid;gap:2.5rem}
.rij{border-top:1px solid var(--lijn)}
.rij li{padding:1rem 0;border-bottom:1px solid var(--lijn);font-family:var(--kop);font-size:clamp(1.3rem,4.4vw,1.9rem);font-weight:300;line-height:1.2}
.klachten-noot{margin-top:1.5rem;max-width:30rem;color:var(--zacht)}

/* massages */
.m-kop{display:grid;gap:2rem;align-items:end;margin-bottom:3rem}
.vormen{font-family:var(--kop);font-style:italic;font-weight:300;font-size:clamp(1.55rem,5.6vw,2.45rem);line-height:1.22;margin-top:1.5rem}
.vormen span{white-space:normal}
.vormen i{display:inline}
.vormen i{font-style:normal;color:var(--oranje);padding-inline:.25em}
.m-foto{border-radius:6px;overflow:hidden}
.m-foto img{width:100%;aspect-ratio:4/3;object-fit:cover}
.rooster{display:grid;gap:1px;background:var(--lijn);border:1px solid var(--lijn)}
.vorm{background:var(--zand);padding:1.75rem 1.5rem}
.vorm h3{margin-bottom:.6rem}
.vorm p{margin:0;color:var(--zacht);max-width:34rem}
.vorm .klein{font-size:.9rem;margin-top:.7rem}
.vorm.met-foto{display:grid;grid-template-columns:1fr auto;gap:1.25rem;align-items:start}
.vorm.met-foto img{width:6.5rem;height:auto;border-radius:4px}
.vorm.huis{background:var(--tint)}
details{margin-top:.9rem}
summary{cursor:pointer;font-weight:600;font-size:.95rem;text-decoration:underline;text-underline-offset:3px}
details p{margin-top:.7rem;font-size:.97rem}

/* tarieven */
.t-kop{max-width:40rem;margin-bottom:3rem}
.t-kop p{margin:1rem 0 0;color:var(--zacht)}
.ladder{display:grid;gap:1.1rem;margin:0 0 3.5rem;padding:0;list-style:none}
.stap{display:grid;grid-template-columns:1fr;gap:.25rem}
.stap-min{font-family:var(--kop);font-size:1.15rem;font-weight:400}
.spoor{display:block;white-space:nowrap;min-width:0}
.balk{display:inline-block;vertical-align:middle;height:2.4rem;background:var(--salie);border-radius:999px;position:relative;width:calc(var(--f) * (100% - 7.2rem))}
.balk::after{content:"";position:absolute;right:.5rem;top:50%;width:.7rem;height:.7rem;margin-top:-.35rem;border-radius:50%;background:var(--oranje)}
.stap-prijs{display:inline-block;vertical-align:middle;margin-left:.8rem;font-family:var(--kop);font-size:1.5rem;font-weight:400;white-space:nowrap}
.extra{display:grid;gap:2rem;border-top:1px solid var(--lijn);padding-top:2rem}
.extra h3{font-size:1.3rem;margin-bottom:.5rem}
.extra p{margin:0;color:var(--zacht)}
.extra .bedrag{font-family:var(--kop);font-size:1.6rem;color:var(--inkt);display:block;margin-top:.3rem}
.regel{margin-top:2.5rem;max-width:42rem;color:var(--zacht);font-size:.97rem}

/* praktijk */
.band{display:grid;gap:.5rem}
.band img{width:100%;aspect-ratio:1100/521;object-fit:cover}
.praktijk-tekst{display:grid;gap:1.5rem;padding-top:3rem}
.praktijk-tekst p{max-width:34rem}
.adres{font-style:normal;color:var(--zacht)}

/* bedrijven */
.bedrijf{display:grid;gap:3rem}
.bedrijf h2{margin-bottom:1.5rem}
.bedrijf-tekst p{max-width:36rem}
.voorwaarden{margin:2rem 0;border-top:1px solid var(--lijn)}
.voorwaarden li{display:grid;grid-template-columns:7.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--lijn)}
.voorwaarden strong{font-family:var(--kop);font-weight:400;font-size:1.3rem;line-height:1.2}
.voorwaarden span{color:var(--zacht)}
.b-foto{display:grid;grid-template-columns:1.25fr 1fr;gap:.75rem;align-items:end}
.b-foto img{width:100%;border-radius:6px;object-fit:cover}
.b-foto .b2{aspect-ratio:619/900;margin-bottom:2.5rem}
.b-foto .b1{aspect-ratio:966/1232}

/* coaching */
.coach{display:grid;gap:3.5rem}
.coach h2{margin-bottom:1.5rem}
.zinnen{margin:1.75rem 0;font-family:var(--kop);font-style:italic;font-weight:300;font-size:clamp(1.35rem,4.7vw,1.9rem);line-height:1.28}
.zinnen li{padding:.7rem 0;border-top:1px solid var(--lijn)}
.zinnen li:last-child{border-bottom:1px solid var(--lijn)}
.gratis{font-family:var(--kop);font-size:1.5rem;font-weight:400}
.relatie h3{font-size:clamp(1.6rem,5vw,2.2rem);font-weight:300;margin-bottom:1rem}
.relatie ul{margin:1.2rem 0}
.relatie li{padding:.75rem 0;border-top:1px solid var(--lijn)}
.relatie li:last-child{border-bottom:1px solid var(--lijn)}

/* cursussen */
.c-rijen{border-top:1px solid var(--lijn)}
.c-rij{display:grid;gap:.6rem;padding:1.75rem 0;border-bottom:1px solid var(--lijn)}
.c-rij h3{font-size:clamp(1.5rem,4.6vw,2rem);font-weight:300}
.c-rij p{margin:0;max-width:34rem;color:var(--zacht)}
.c-prijs{font-family:var(--kop);font-size:1.6rem;color:var(--inkt)}
.c-rij a{font-weight:600;text-underline-offset:3px}
.cursus-kop{margin-bottom:2.5rem;max-width:36rem}

/* opleidingen */
.opl{display:grid;gap:2.5rem}
.opl-lijst{border-top:1px solid var(--lijn)}
.opl-lijst div{display:grid;gap:.25rem;padding:1rem 0;border-bottom:1px solid var(--lijn)}
.opl-lijst dt{font-family:var(--kop);font-size:1.3rem;font-weight:400}
.opl-lijst dd{margin:0;color:var(--zacht)}
.opl-lijst{margin:0}
.cat{display:flex;align-items:center;gap:1rem;margin-top:2rem;font-size:.92rem;color:var(--zacht);max-width:22rem}
.cat img{width:5rem;height:auto;flex:none;border-radius:50%}

/* contact */
.contact{background:var(--salie);color:var(--creme)}
.contact h2,.contact h3{color:var(--creme)}
.c-grid{display:grid;gap:3.5rem}
.uren{margin:2rem 0 1.5rem;border-top:1px solid rgba(246,241,233,.35)}
.uren li{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;padding:.85rem 0;border-bottom:1px solid rgba(246,241,233,.35);font-family:var(--kop);font-size:clamp(1.35rem,5.5vw,2.1rem);font-weight:300;line-height:1.15}
.uren .gesloten{font-style:italic}
.contact p{max-width:34rem}
.gegevens{font-style:normal;margin:1.5rem 0}
.gegevens a{text-underline-offset:3px;overflow-wrap:anywhere}
.contact .acties{margin-top:1.4rem}
.form{display:grid;gap:1.1rem;margin-top:1.5rem}
.veld{display:grid;gap:.35rem}
.velden2{display:grid;gap:1.1rem}
.veld label{font-weight:600;font-size:.95rem}
.veld input,.veld textarea{font:inherit;width:100%;background:var(--creme);color:var(--inkt);border:1.5px solid transparent;border-radius:4px;padding:.8rem .9rem}
.veld textarea{min-height:9rem;resize:vertical}
.veld input:focus-visible,.veld textarea:focus-visible{outline:3px solid var(--creme);outline-offset:2px}
.verplicht{font-size:.9rem}
.melding{margin:0;padding:1rem 1.1rem;border:1.5px solid var(--creme);border-radius:4px;display:none}
.melding.is-aan{display:block}

/* footer */
.footer{background:var(--diep);color:var(--creme);padding-block:3.5rem 6rem}
.footer a{text-underline-offset:3px}
.f-grid{display:grid;gap:2rem}
.footer .logo{color:var(--creme)}
.footer .logo-naam small{color:rgba(246,241,233,.85)}
.footer address{font-style:normal}
.footer p{margin:.2rem 0}

/* mobiele balk */
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:.5rem;padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));background:var(--creme);border-top:1px solid var(--lijn);transform:translateY(110%);transition:transform .35s ease-out;visibility:hidden}
.mbar.is-on{transform:none;visibility:visible}
.mbar a{display:flex;align-items:center;justify-content:center;min-height:2.9rem;border:1.5px solid var(--inkt);border-radius:999px;text-decoration:none;font-weight:600;font-size:.98rem}
.mbar a.m-afspraak{background:var(--oranje);border-color:var(--oranje)}

/* reveal-beginstand wordt door JS gezet; zonder JS alles zichtbaar */

@media (min-width:46rem){
  .stap{grid-template-columns:7rem 1fr;gap:.8rem;align-items:center}
  .hero-blok{position:absolute;right:calc(var(--rand) - 1.5rem);bottom:-5.5rem;width:min(30rem,52%);padding:2rem 2rem 2rem 2rem;margin:0;border-radius:6px}
  .hero{padding-bottom:6.5rem}
  .vormen span{white-space:nowrap}
  .b-foto{position:sticky;top:6rem}
  .frame img{aspect-ratio:1100/580;object-position:50% 40%}
  .m-kop{grid-template-columns:1.1fr .9fr}
  .rooster{grid-template-columns:1fr 1fr}
  .extra{grid-template-columns:repeat(3,1fr)}
  .c-rij{grid-template-columns:1.1fr 1.4fr auto;align-items:baseline;gap:2rem}
  .velden2{grid-template-columns:1fr 1fr}
  .band{grid-template-columns:1fr 1fr;gap:.75rem}
  .band img{aspect-ratio:1100/700}
  .praktijk-tekst{grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
  .opl-lijst div{grid-template-columns:15rem 1fr;gap:2rem;align-items:baseline}
}
@media (min-width:60rem){
  body{font-size:1.125rem}
  .menu{display:flex}
  .nav-bel{display:inline-flex}
  .menu-knop{display:none}
  .over{grid-template-columns:1fr 1fr;gap:4.5rem;align-items:center}
  .klachten{grid-template-columns:1fr 1fr;gap:5rem;align-items:start}
  .bedrijf{grid-template-columns:1.1fr .9fr;gap:5rem;align-items:start}
  .coach{grid-template-columns:1.1fr .9fr;gap:6rem;align-items:start}
  .c-grid{grid-template-columns:1fr 1fr;gap:6rem;align-items:start}
  .opl{grid-template-columns:2fr 1fr;gap:5rem;align-items:start}
  .f-grid{grid-template-columns:1.2fr 1fr 1fr}
  .mbar{display:none}
  .footer{padding-bottom:3.5rem}
  .stap-min{font-size:1.3rem}
  .balk{height:3rem;width:calc(var(--f) * (100% - 8.4rem))}
  .stap-prijs{font-size:1.8rem}
}
@media (max-width:59.99rem){
  .nav-in .nav-bel{display:none}
}
@media (max-width:23rem){
  .logo-naam strong{font-size:1.1rem}
  .rond{width:6.2rem;height:6.2rem;font-size:.88rem}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}