/* De Heelmeester, v2. Varianten staan als klassen op het html-element. */

:root{
  --bg:#faf7f1;
  --paneel:#fffdf8;
  --ink:#453e35;
  --body:#605a51;
  --muted:#a49c8f;
  --lijn:#e8e1d4;
  --accent:#b8935a;
  --accent-dk:#96743f;
  --vlak:#f3ebdc;
  --schaduw:0 1px 2px rgba(70,60,40,.04);
}

.kleur-groen{
  --bg:#f7f7f2;
  --paneel:#fffefa;
  --ink:#3f453c;
  --body:#5c6058;
  --muted:#9ba396;
  --lijn:#e4e6de;
  --accent:#7d8c74;
  --accent-dk:#63705b;
  --vlak:#ecefe6;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--body);
  font-family:'Inter',system-ui,sans-serif;
  font-size:16px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3,.serif{font-family:'Marcellus',serif;color:var(--ink);font-weight:400;letter-spacing:.005em}
.wrap{max-width:1060px;margin:0 auto;padding:0 34px}
.smal{max-width:680px;margin:0 auto;padding:0 34px}
.label{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:var(--accent-dk);
}

/* Knoppen */
.btn{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;padding:14px 26px;border-radius:8px;
  transition:background .2s,border-color .2s,color .2s;
}
.btn.vol{background:var(--accent);color:#fff}
.btn.vol:hover{background:var(--accent-dk)}
.btn.rand{border:1px solid var(--lijn);color:var(--ink);background:var(--paneel)}
.btn.rand:hover{border-color:var(--accent)}
.tekstlink{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14.5px;font-weight:500;color:var(--accent-dk);
}
.tekstlink .pijl{transition:transform .2s}
.tekstlink:hover .pijl{transform:translateX(3px)}
.naast{margin-top:14px;font-size:15px;color:var(--body)}
.naast a{color:var(--accent-dk);text-decoration:underline;text-decoration-color:var(--lijn);text-underline-offset:3px}
.naast a:hover{text-decoration-color:var(--accent)}

/* Navigatie */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--lijn);
  transition:transform .28s ease,padding .22s ease;
}
.nav .in{
  max-width:1060px;margin:0 auto;padding:20px 34px;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  transition:padding .22s ease;
}
.nav.krimp .in{padding-top:12px;padding-bottom:12px}
.nav-slim .nav.weg{transform:translateY(-100%)}

.merk{display:flex;flex-direction:column;line-height:1.05}
.merk .naam{
  font-family:'Marcellus',serif;color:var(--ink);
  font-size:30px;letter-spacing:.04em;
  transition:font-size .22s ease;
}
.merk .onderregel{
  display:none;margin-top:7px;
  font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);
}
.merk-stapel .merk .naam{font-size:26px}
.merk-stapel .merk .onderregel{display:block}
.nav.krimp .merk .naam{font-size:25px}
.nav.krimp .merk .onderregel{display:none}

.navr{display:flex;align-items:center;gap:26px}
.navr a.lnk{font-size:14.5px;color:var(--body)}
.navr a.lnk:hover{color:var(--ink)}
.navr a.lnk.hier{color:var(--ink)}
.navcta{
  font-size:13.5px;font-weight:500;color:var(--ink);
  border:1px solid var(--lijn);border-radius:8px;padding:9px 18px;background:var(--paneel);
}
.navcta:hover{border-color:var(--accent)}

.menuknop{
  display:none;width:42px;height:42px;border:1px solid var(--lijn);border-radius:9px;
  background:var(--paneel);cursor:pointer;position:relative;
}
.menuknop span{
  position:absolute;left:12px;right:12px;height:1.5px;background:var(--ink);
  transition:transform .22s ease,opacity .18s ease;
}
.menuknop span:nth-child(1){top:15px}
.menuknop span:nth-child(2){top:20px}
.menuknop span:nth-child(3){top:25px}
.menuknop[aria-expanded="true"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.menuknop[aria-expanded="true"] span:nth-child(2){opacity:0}
.menuknop[aria-expanded="true"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.mobielmenu{
  display:none;border-bottom:1px solid var(--lijn);background:var(--bg);
  position:sticky;top:0;z-index:39;
}
.mobielmenu a{
  display:block;padding:15px 34px;border-top:1px solid var(--lijn);
  font-size:16px;color:var(--body);
}
.mobielmenu a:first-child{border-top:none}

@media(max-width:760px){
  .navr{display:none}
  .menuknop{display:block}
  .mobielmenu.open{display:block}
  .merk .naam{font-size:23px}
  .merk-stapel .merk .naam{font-size:21px}
}

/* Hero, variant duo */
.hero{padding:66px 0 20px}
.hero .duo{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(31px,4vw,47px);line-height:1.14;margin-top:16px}
.hero .lede{margin-top:20px;font-size:17.5px;max-width:46ch}
.hero .doen{margin-top:30px}
.hero .beeld{border-radius:16px;overflow:hidden;aspect-ratio:4/4.2;box-shadow:var(--schaduw)}
.hero .beeld img{width:100%;height:100%;object-fit:cover}
@media(max-width:840px){
  .hero .duo{grid-template-columns:1fr;gap:30px}
  .hero .beeld{order:-1;aspect-ratio:16/11}
}

/* Hero, variant band */
.heroband{display:none;position:relative}
.heroband .foto{width:100%;height:clamp(430px,62vh,620px);object-fit:cover}
.heroband .over{
  position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(100deg,rgba(30,22,12,.62) 0%,rgba(30,22,12,.34) 52%,rgba(30,22,12,.12) 100%);
}
.heroband .tekst{max-width:1060px;margin:0 auto;padding:0 34px;width:100%;color:#fdfbf6}
.heroband h1{color:#fdfbf6;font-size:clamp(32px,4.4vw,52px);line-height:1.13;margin-top:16px;max-width:17ch}
.heroband .label{color:#e9d7b4}
.heroband .lede{margin-top:20px;font-size:17.5px;max-width:44ch;color:#f0e8db}
.heroband .doen{margin-top:30px}
.heroband .btn.rand{background:transparent;border-color:rgba(253,251,246,.45);color:#fdfbf6}
.heroband .btn.rand:hover{border-color:#fdfbf6}
.heroband .naast{color:#e6dccb}
.heroband .naast a{color:#fdfbf6;text-decoration-color:rgba(253,251,246,.4)}

.hero-band .hero{display:none}
.hero-band .heroband{display:block}

/* Wisselende zinnen, hoort bij de kop-variant */
.varB{display:none}
.kop-b .varA{display:none}
.kop-b .varB{display:inline}

/* Kern */
.kern{padding:74px 0;border-top:1px solid var(--lijn);margin-top:44px;text-align:center}
.hero-band .kern{margin-top:0;border-top:none}
.kern .label{display:block;margin-bottom:16px}
.kern h2{font-size:clamp(24px,3.2vw,32px);line-height:1.26;max-width:22ch;margin:0 auto}
.kern p{margin:20px auto 0;max-width:58ch;font-size:17px}
.kern .hart{
  font-family:'Marcellus',serif;margin:38px auto 0;
  font-size:clamp(23px,3.1vw,31px);color:var(--ink);line-height:1.3;max-width:24ch;
}
.kern .meer{margin-top:30px}

/* Aanbod */
.aanbod{padding:70px 0;border-top:1px solid var(--lijn)}
.aanbod .top{text-align:center;margin-bottom:32px}
.aanbod h2{font-size:clamp(23px,3vw,30px)}
.kaarten{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;max-width:720px;margin:0 auto}
@media(max-width:760px){.kaarten{grid-template-columns:1fr}}
.dienst{
  border:1px solid var(--lijn);border-radius:14px;padding:24px;
  background:var(--paneel);display:flex;flex-direction:column;
}
.dienst h3{font-size:20px;margin-bottom:8px}
.dienst p{font-size:14.5px;line-height:1.62}
.dienst .prijs{margin-top:auto;padding-top:16px;font-family:'Marcellus',serif;font-size:15px;color:var(--accent-dk)}
.aanbod .voet{text-align:center;margin-top:32px}

/* Ervaringen */
.erv{border-top:1px solid var(--lijn);padding:70px 0}
.erv .top{text-align:center}
.erv h2{font-size:clamp(23px,3vw,30px);margin-top:6px}
.erv .cijfer{margin-top:12px;font-family:'Marcellus',serif;font-size:15px;color:var(--accent-dk);letter-spacing:.04em}
.erv .voet{text-align:center;margin-top:32px}

.raster{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px auto 0}
@media(max-width:860px){.raster{grid-template-columns:1fr;max-width:560px}}
.cit{
  border:1px solid var(--lijn);border-radius:14px;padding:24px;
  background:var(--paneel);display:flex;flex-direction:column;
}
.cit p{font-size:15.5px;line-height:1.74}
.cit .wie{margin-top:auto;padding-top:16px;font-family:'Marcellus',serif;font-size:14px;color:var(--ink)}
.cit .wie span{color:var(--muted)}

.uitgelicht{display:none;max-width:760px;margin:34px auto 0;text-align:center}
.uitgelicht blockquote{
  font-family:'Marcellus',serif;font-size:clamp(21px,2.7vw,27px);
  line-height:1.45;color:var(--ink);
}
.uitgelicht .wie{margin-top:18px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.korte{
  margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  border-top:1px solid var(--lijn);
}
@media(max-width:760px){.korte{grid-template-columns:1fr}}
.korte div{
  padding:22px 20px;border-left:1px solid var(--lijn);
  font-size:14.5px;line-height:1.62;text-align:left;
}
.korte div:first-child{border-left:none}
@media(max-width:760px){
  .korte div{border-left:none;border-top:1px solid var(--lijn)}
  .korte div:first-child{border-top:none}
}
.korte b{display:block;margin-top:10px;font-family:'Marcellus',serif;font-weight:400;font-size:13.5px;color:var(--ink)}

.erv-uitgelicht .raster{display:none}
.erv-uitgelicht .uitgelicht{display:block}

/* Even voorstellen */
.persoon{display:none;border-top:1px solid var(--lijn);padding:70px 0}
.persoon .duo{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:center}
@media(max-width:840px){.persoon .duo{grid-template-columns:1fr;gap:28px}}
.persoon .portret{border-radius:16px;overflow:hidden;aspect-ratio:4/4.6;box-shadow:var(--schaduw)}
.persoon .portret img{width:100%;height:100%;object-fit:cover}
.persoon h2{font-size:clamp(23px,3vw,30px);margin-top:10px}
.persoon p{margin-top:18px;font-size:16.5px}
.persoon .naam{
  margin-top:22px;font-family:'Marcellus',serif;font-size:19px;color:var(--ink);
}
.persoon .meer{margin-top:18px}
.persoon-blok .persoon{display:block}

.ondertekening{display:none;border-top:1px solid var(--lijn);padding:56px 0;text-align:center}
.ondertekening p{max-width:52ch;margin:0 auto;font-size:16.5px}
.ondertekening .naam{
  margin-top:20px;font-family:'Marcellus',serif;font-size:22px;color:var(--ink);
}
.ondertekening .rol{margin-top:4px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.persoon-onder .ondertekening{display:block}

/* Contact */
.contact{border-top:1px solid var(--lijn);padding:70px 0}
.contact .duo{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
@media(max-width:760px){.contact .duo{grid-template-columns:1fr;gap:28px}}
.contact h2{font-size:clamp(24px,3vw,32px)}
.contact .sub{margin-top:12px;font-family:'Marcellus',serif;font-size:18px}
.contact p.klein{margin-top:14px;max-width:46ch;font-size:15.5px}
.contact .doen{margin-top:26px}
.gegevens{font-size:15px;line-height:1.9}
.gegevens .k{font-family:'Marcellus',serif;font-size:13px;letter-spacing:.08em;color:var(--accent-dk)}
.gegevens .k+p{margin-bottom:14px}

/* Formulier, variant cta-form */
.aanmeld{display:none;margin-top:26px;max-width:440px}
.cta-form .aanmeld{display:block}
.cta-form .knop-app{display:none}
.cta-app .knop-form{display:none}
.aanmeld label{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.aanmeld input,.aanmeld textarea{
  width:100%;font-family:inherit;font-size:15.5px;color:var(--ink);
  background:var(--paneel);border:1px solid var(--lijn);border-radius:10px;
  padding:12px 14px;margin-bottom:14px;
}
.aanmeld textarea{min-height:96px;resize:vertical;line-height:1.6}
.aanmeld input:focus,.aanmeld textarea:focus{outline:none;border-color:var(--accent)}
.aanmeld button{
  font-family:inherit;font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:var(--accent);color:#fff;border:none;border-radius:8px;padding:14px 26px;cursor:pointer;
}
.aanmeld button:hover{background:var(--accent-dk)}

/* Losse pagina's */
.kop{padding:74px 0 8px;text-align:center}
.kop h1{font-size:clamp(30px,3.8vw,44px);line-height:1.16;margin-top:14px;max-width:21ch;margin-left:auto;margin-right:auto}
.kop .lede{margin:20px auto 0;font-size:17.5px;max-width:56ch}
.verhaal{max-width:660px;margin:0 auto;padding:52px 34px 10px}
.verhaal p{font-size:17px;line-height:1.95;margin-top:22px}
.verhaal p:first-child{margin-top:0}
.verhaal .pull{
  font-family:'Marcellus',serif;margin:46px 0;
  font-size:clamp(22px,3vw,29px);line-height:1.32;color:var(--ink);text-align:center;
}
.portretmidden{max-width:380px;margin:46px auto 10px;text-align:center}
.portretmidden img{width:100%;border-radius:16px;box-shadow:var(--schaduw)}
.portretmidden figcaption{margin-top:16px;font-family:'Marcellus',serif;font-size:17px;color:var(--ink)}

.blok{border-top:1px solid var(--lijn);margin-top:8px}
.blok .in{max-width:660px;margin:0 auto;padding:52px 34px}
.blok .label{display:block;margin-bottom:16px}
.blok h2{font-size:clamp(22px,2.8vw,28px);line-height:1.28}
.blok p{font-size:17px;line-height:1.95;margin-top:20px}

.band{width:100%;height:clamp(280px,40vw,420px);object-fit:cover}

.werk{padding:64px 0;text-align:center}
.werk .twee{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:26px;text-align:left}
@media(max-width:720px){.werk .twee{grid-template-columns:1fr;gap:28px}}
.werk h3{font-size:20px;margin-bottom:8px}

.voorwie{padding:74px 0;text-align:center}
.voorwie h2{font-size:clamp(24px,3vw,31px);max-width:24ch;margin:0 auto}
.voorwie .intro{margin:18px auto 0;max-width:56ch}
.lijst{margin:28px auto 0;max-width:760px;border:1px solid var(--lijn);border-radius:16px;background:var(--vlak);text-align:left}
.lijst .li{display:flex;gap:14px;padding:16px 24px;border-top:1px solid var(--lijn);font-size:15.5px;line-height:1.5}
.lijst .li:first-child{border-top:none}
.lijst .stip{flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:9px}
.voorwie .zacht{margin:26px auto 0;font-family:'Marcellus',serif;font-size:19px;color:var(--ink)}

.sessies{padding:74px 0;border-top:1px solid var(--lijn);text-align:center}
.sessies h2{font-size:clamp(24px,3vw,31px)}
.feiten{margin:32px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:left}
@media(max-width:640px){.feiten{grid-template-columns:1fr}}
.feit{border:1px solid var(--lijn);border-radius:14px;padding:24px;background:var(--paneel);min-height:172px;display:flex;flex-direction:column}
.feit .k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dk);font-weight:500}
.feit .v{font-family:'Marcellus',serif;font-size:22px;color:var(--ink);margin-top:10px}
.feit .n{font-size:13.5px;margin-top:12px;line-height:1.5}

.slot{border-top:1px solid var(--lijn);padding:66px 0;text-align:center}
.slot h2{font-size:clamp(24px,3vw,31px)}
.slot .sub{margin-top:12px;font-family:'Marcellus',serif;font-size:18px}
.slot .doen{margin-top:26px}
.slot .aanmeld{margin-left:auto;margin-right:auto;text-align:left}

footer{border-top:1px solid var(--lijn);padding:28px 0}
footer .in{
  max-width:1060px;margin:0 auto;padding:0 34px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;
  font-size:13px;color:var(--muted);
}
footer a:hover{color:var(--ink)}