/* ============================================================
   Rebecca Van Laeke — gedeelde stijl
   Warm, organisch, redactioneel. Geen koude grids.
   ============================================================ */
:root{
  --cream:#fbf7ef;
  --paper:#fffdf8;
  --ink:#2a1d19;
  --muted:#776761;
  --rose:#F2E0E0;
  --rose-deep:#E8C8C8;
  --rose-mid:#D4A8A8;
  --purple:#7A5298;
  --purple-light:#9B72BB;
  --purple-pale:#EDE6F4;
  --green:#E2EED8;
  --green-deep:#8AAE6A;
  --green-mid:#C8DDB4;
  --terracotta:#b8664d;
  --gold:#c59a55;
  --line:#eadfd2;
  --shadow:0 22px 60px rgba(74,44,31,.13);
  --radius:28px;
  --max:1140px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:'Mulish',Inter,system-ui,sans-serif;line-height:1.65;font-size:17px}
img{max-width:100%;display:block}
a{color:inherit}

/* NAV */
.wrap{max-width:var(--max);margin:auto;padding:0 28px}
.nav{position:sticky;top:0;z-index:40;background:rgba(251,247,239,.93);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.navin{height:74px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{text-decoration:none;font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);font-style:italic;flex-shrink:0}
.brand span{display:block;font-size:11px;color:var(--purple);font-weight:600;letter-spacing:.12em;text-transform:uppercase;font-style:normal;font-family:'Mulish',sans-serif;margin-top:1px}
.menu{display:flex;align-items:center;gap:20px;font-size:13px;font-weight:600;letter-spacing:.02em}
.menu a{text-decoration:none;color:var(--muted);transition:color .18s}
.menu a:hover,.menu a.active{color:var(--purple)}

/* TAALKNOP */
.lang{display:inline-flex;border:1.5px solid var(--rose-mid);border-radius:8px;overflow:hidden;font-family:'Mulish',sans-serif}
.lang button{background:transparent;border:0;padding:7px 11px;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:all .16s}
.lang button.on{background:var(--purple);color:#fff}
.lang button:not(.on):hover{color:var(--purple)}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:11px 22px;text-decoration:none;font-weight:700;font-size:14px;font-family:'Mulish',sans-serif;transition:all .18s;cursor:pointer;border:1.5px solid transparent}
.btn-ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn-ink:hover{background:#3d2a24}
.btn-purple{background:var(--purple);color:#fff;border-color:var(--purple)}
.btn-purple:hover{background:var(--purple-light)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--rose-mid)}
.btn-outline:hover{border-color:var(--purple);color:var(--purple)}
.btn-rose{background:var(--rose);color:var(--ink);border-color:var(--rose-deep)}
.btn-rose:hover{background:var(--rose-deep)}
.btn-sm{padding:8px 15px;font-size:13px}
.mobile{display:none}

/* LAYOUT */
.grid2{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.section{padding:88px 0}
.section.tight{padding:56px 0}
.center{text-align:center}
.center .lead,.center .body{max-width:760px;margin-left:auto;margin-right:auto}

/* TYPO */
h1,h2,h3,.serif{font-family:'Fraunces',Georgia,serif}
h1{font-size:clamp(40px,6vw,74px);line-height:.99;letter-spacing:-.04em;margin:0 0 24px;font-weight:500}
h2{font-size:clamp(30px,4vw,50px);line-height:1.05;letter-spacing:-.035em;margin:0 0 20px;font-weight:500}
h3{font-size:23px;line-height:1.15;margin:0 0 10px;font-weight:500}
.eyebrow{display:inline-block;color:var(--purple);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:11px;margin-bottom:16px;font-family:'Mulish',sans-serif}
.lead{font-size:clamp(18px,2vw,22px);line-height:1.5;color:#3a2a25;margin:0 0 18px;font-weight:300}
.body{font-size:17px;color:var(--muted);line-height:1.75;font-weight:300}
em.purple{font-style:italic;color:var(--purple)}
.muted{color:var(--muted)}

/* PLACEHOLDER BEELD (alcohol inkt sfeer) */
.ink{border-radius:32px;position:relative;overflow:hidden;box-shadow:var(--shadow);min-height:420px;
  background:
    radial-gradient(60% 55% at 25% 30%, rgba(122,82,152,.55), transparent 60%),
    radial-gradient(55% 50% at 78% 22%, rgba(212,168,168,.65), transparent 62%),
    radial-gradient(70% 60% at 65% 80%, rgba(138,174,106,.45), transparent 60%),
    radial-gradient(50% 45% at 15% 85%, rgba(197,154,85,.4), transparent 60%),
    var(--rose)}
.ink::after{content:'';position:absolute;left:16px;bottom:14px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(42,29,25,.4);font-weight:700;z-index:1}
.ink.labeled::after{content:'alcohol inkt · beeld volgt'}
.ink>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.ink.tall{min-height:560px}
.ink.short{min-height:300px}
.ink.round{border-radius:50%}
.badge{position:absolute;left:20px;right:20px;bottom:20px;background:rgba(255,253,248,.9);backdrop-filter:blur(10px);padding:16px 20px;border-radius:18px;border:1px solid rgba(255,255,255,.7);font-weight:600;font-size:14px;color:var(--ink);z-index:3}
.product .thumb.ink::after{font-size:9px}

/* HERO */
.hero{padding:80px 0 64px;position:relative;overflow:hidden;background:var(--rose)}
.hero::before{content:'';position:absolute;right:-180px;top:-180px;width:560px;height:560px;border-radius:50%;background:radial-gradient(circle,var(--rose-deep),rgba(232,200,200,0) 68%);opacity:.6}
.hero::after{content:'';position:absolute;left:-100px;bottom:-100px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,var(--green),rgba(226,238,216,0) 70%);opacity:.5}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.creds{display:flex;gap:32px;flex-wrap:wrap;padding-top:36px;margin-top:36px;border-top:1px solid var(--rose-deep)}
.cred{font-size:13px;color:var(--muted);font-weight:400}
.cred strong{display:block;color:var(--ink);font-weight:700;margin-bottom:1px}

/* PAGE HEADER (binnenpagina's) */
.pagehead{padding:60px 0 44px;background:var(--rose);position:relative;overflow:hidden}
.pagehead::before{content:'';position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,var(--purple-pale),transparent 68%);opacity:.7}
.pagehead .lead{max-width:640px}

/* STORY */
.story{max-width:820px;margin:auto}
.story p{font-family:'Fraunces',Georgia,serif;font-size:clamp(20px,2.5vw,28px);line-height:1.5;color:#3a2a25;font-weight:400;margin-bottom:20px}
.story p:last-child{margin-bottom:0}

/* BEWEGING */
.beweging{background:var(--purple);border-radius:var(--radius);padding:52px;margin:40px 0}
.beweging h2{color:#fff}
.beweging p{color:rgba(255,255,255,.7)}
.beweging-stappen{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:36px;position:relative}
.beweging-stappen::before{content:'';position:absolute;top:20px;left:10%;right:10%;height:1px;background:rgba(255,255,255,.15);z-index:0}
.bstap{text-align:center;position:relative;z-index:1;padding:0 6px}
.bstap-dot{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-family:'Fraunces',serif;font-size:18px;color:#fff;font-weight:500}
.bstap strong{display:block;color:#fff;font-size:13px;font-weight:700;margin-bottom:5px;letter-spacing:.03em}
.bstap p{color:rgba(255,255,255,.55);font-size:12px;margin:0;line-height:1.5}

/* CARDS */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px}
@media(max-width:860px){.cards{grid-template-columns:1fr}}
.card{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px;
  box-shadow:0 8px 28px rgba(74,44,31,.07);position:relative;
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease}

/* Recht op een rij. Kom je erboven, dan komt de kaart naar voren en wordt hij groter. */
.cards .card:hover,.cards .card:focus-within{
  transform:translateY(-10px) scale(1.045);
  box-shadow:0 26px 56px rgba(74,44,31,.18);
  z-index:3}
/* Wie beweging vervelend vindt (of er misselijk van wordt) krijgt enkel de schaduw. */
@media(prefers-reduced-motion:reduce){
  .cards .card,.cards .card:hover,.cards .card:focus-within{transform:none;transition:box-shadow .2s}
}
.card-icon{font-size:30px;margin-bottom:14px}
.card p{color:var(--muted);margin:8px 0 16px;font-size:15px;font-weight:300;line-height:1.6}

/* INSTRUMENTEN */
.instr-wrap{background:var(--green);border-radius:var(--radius);padding:52px}
.instr-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.instr{background:rgba(255,255,255,.7);border-radius:18px;padding:28px;
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, background .3s ease}

/* Kom je erboven, dan komt het blokje naar voren. Zelfde beweging als de kaarten
   op de homepage. Dekt "Hoe ik kijk" (over.html) en "Zo verloopt een sessie"
   (9d-breathwork.html) in één keer: allebei .instr. */
.instr:hover,.instr:focus-within{
  transform:translateY(-6px) scale(1.03);
  background:rgba(255,255,255,.95);
  box-shadow:0 18px 40px rgba(74,44,31,.14)}

/* Op een telefoon bestaat hover niet, dus daar komen ze na elkaar aandrijven
   zodra je ze in beeld scrolt. Zo blijft het ook zonder muis leven. */
.instr-grid .instr{opacity:0;transform:translateY(14px)}
.instr-wrap.in .instr{opacity:1;transform:none;
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, background .3s ease}
.instr-wrap.in .instr:nth-child(1){transition-delay:.08s}
.instr-wrap.in .instr:nth-child(2){transition-delay:.20s}
.instr-wrap.in .instr:nth-child(3){transition-delay:.32s}
.instr-wrap.in .instr:hover,.instr-wrap.in .instr:focus-within{transition-delay:0s}

@media(prefers-reduced-motion:reduce){
  .instr-grid .instr,.instr-wrap.in .instr{opacity:1;transform:none;transition:box-shadow .2s}
  .instr:hover,.instr:focus-within{transform:none}
}
.instr h3{font-size:21px}
.instr p{font-size:14px;color:var(--muted);margin:8px 0 0;font-weight:300;line-height:1.65}

/* ============ WINKELTJE ============ */
.shopbar{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:20px 22px;margin-bottom:32px;box-shadow:0 8px 28px rgba(74,44,31,.06)}
.shopbar-row{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-end}
.filtergroup{display:flex;flex-direction:column;gap:7px}
.filtergroup label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-family:'Mulish',sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1.5px solid var(--line);background:var(--cream);border-radius:999px;padding:7px 14px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .15s;font-family:'Mulish',sans-serif}
.chip:hover{border-color:var(--rose-mid)}
.chip.on{background:var(--purple);border-color:var(--purple);color:#fff}
.selectwrap select{border:1.5px solid var(--line);background:var(--cream);border-radius:10px;padding:9px 14px;font:600 13px/1.4 'Mulish',sans-serif;color:var(--ink);cursor:pointer;outline:none}
.selectwrap select:focus{border-color:var(--purple)}
.shopbar .reset{margin-left:auto;font-size:12px;font-weight:700;color:var(--purple);background:none;border:0;cursor:pointer;text-decoration:underline;font-family:'Mulish',sans-serif}
.shopcount{font-size:13px;color:var(--muted);margin:0 0 18px;font-weight:600}

.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.product{background:var(--paper);border:1px solid var(--line);border-radius:22px;overflow:hidden;
  box-shadow:0 8px 28px rgba(74,44,31,.06);display:flex;flex-direction:column;position:relative;
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease}
/* Kom je erboven, dan licht de kaart op en komt hij naar voren. Bewust kleiner gehouden
   dan op de homepage: hier staan er veertien naast elkaar, dus te veel beweging stoort. */
.product:hover,.product:focus-within{
  transform:translateY(-8px) scale(1.025);
  box-shadow:0 24px 50px rgba(74,44,31,.16);
  z-index:3}
@media(prefers-reduced-motion:reduce){
  .product,.product:hover,.product:focus-within{transform:none;transition:box-shadow .2s}
}
.product .thumb{min-height:150px;position:relative}
.product-body{padding:22px;display:flex;flex-direction:column;flex:1}
.product .tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ptag{font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:6px;font-family:'Mulish',sans-serif;background:var(--purple-pale);color:var(--purple)}
.ptag.gratis{background:var(--green);color:#3a6a1a}
.ptag.leeftijd{background:var(--rose);color:#7a3a3a}
.product h3{font-size:19px;margin-bottom:8px}
.product p{font-size:14px;color:var(--muted);font-weight:300;line-height:1.6;margin:0 0 16px}
.product-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:8px}
.product .prijs{font-family:'Fraunces',serif;font-size:22px;color:var(--purple);font-weight:500;white-space:nowrap}
.product .prijs small{font-size:12px;color:var(--muted);font-weight:400;font-family:'Mulish',sans-serif;display:block;line-height:1}
.empty{grid-column:1/-1;text-align:center;padding:60px 20px;color:var(--muted)}

/* ============ 9D BREATHWORK ============ */
.bw-hero{background:linear-gradient(135deg,#2a1d19 0%,#3d2058 100%);border-radius:var(--radius);padding:52px;color:#fff}
.bw-hero h2{color:#fff}
.bw-hero p{color:rgba(255,255,255,.68);font-weight:300}
.bw-prijzen{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:28px}
.bw-prijs{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:24px}
.bw-prijs h4{color:#fff;font-size:17px;margin-bottom:6px;font-family:'Fraunces',serif;font-weight:500}
.bw-prijs p{color:rgba(255,255,255,.55);font-size:13px;margin:0 0 12px;font-weight:300}
.bw-prijs .prijs{font-family:'Fraunces',serif;font-size:24px;color:var(--green-mid);font-weight:500;margin:0 0 14px}
.bw-note{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:18px;font-size:13px;color:rgba(255,255,255,.55);margin-top:24px;line-height:1.7}

/* RECENSIES */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
@media(max-width:860px){.reviews{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.reviews{grid-template-columns:1fr}}
.review{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:0 8px 28px rgba(74,44,31,.06)}
.review .stars{color:var(--gold);font-size:14px;letter-spacing:3px;margin-bottom:10px}
.review p{font-family:'Fraunces',serif;font-size:16px;line-height:1.55;color:#3a2a25;font-style:italic;margin:0 0 12px}
.review cite{font-style:normal;font-size:13px;color:var(--muted);font-weight:600}

/* 9D LOGO (klein badge, wit op donker; wisselt naar echt bestand indien aanwezig) */
.logo9d{display:inline-flex;align-items:center;justify-content:center;width:92px;height:92px;background:#1a120d;border-radius:20px;padding:14px;margin-bottom:20px;box-shadow:0 10px 26px rgba(74,44,31,.2)}
.logo9d img{max-width:100%;max-height:100%;display:block}
.logo9d-fallback{display:none;width:100%;height:100%}

/* 9 LAGEN BIJ DE FOTO */
.lcollage{position:relative;max-width:900px;margin:34px auto 0;min-height:660px}
.lcollage-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:270px;max-width:38%;border-radius:24px;box-shadow:var(--shadow);z-index:1}
.lnote{position:absolute;z-index:3;font-family:'Caveat',cursive;color:var(--terracotta);font-weight:700;font-size:22px;line-height:1.06;max-width:160px;text-shadow:0 1px 2px rgba(255,253,248,.98),0 0 8px rgba(255,253,248,.96),0 0 3px rgba(255,253,248,.96)}
.lnote svg{width:50px;height:38px;stroke:var(--terracotta);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;vertical-align:middle;filter:drop-shadow(0 1px 1.5px rgba(255,253,248,.9))}
.lnote .num{color:var(--purple);font-size:1.05em}

/* Kom je boven een van de negen woorden, dan schuift de uitleg eronder tevoorschijn.
   Enkel op desktop: onder 820px verdwijnt de collage en toont de mobiele lijst,
   die de uitleg gewoon altijd laat zien. Hoveren bestaat daar toch niet. */
.lnote{cursor:default;transition:color .2s}
.lnote:hover,.lnote:focus-within{color:#8f4a34;z-index:9}
.lnote-uit{
  display:block;font-family:'Mulish',sans-serif;font-weight:400;font-size:12.5px;
  line-height:1.5;color:var(--ink);background:var(--paper);text-align:left;
  border:1px solid var(--rose-deep);border-radius:12px;
  padding:8px 11px;margin-top:7px;width:max-content;max-width:172px;
  box-shadow:0 10px 26px rgba(74,44,31,.16);
  opacity:0;transform:translateY(-5px);pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.75,.3,1)}
.lnote:hover .lnote-uit,.lnote:focus-within .lnote-uit{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .lnote-uit{transition:opacity .15s;transform:none}
  .lnote:hover .lnote-uit{transform:none}
}
.ln1{top:4%;left:3%;text-align:right}
.ln2{top:34%;left:0;text-align:right}
.ln3{top:63%;left:3%;text-align:right}
.ln4{top:4%;right:3%;text-align:left}
.ln5{top:34%;right:0;text-align:left}
.ln6{top:63%;right:3%;text-align:left}
.ln7{top:-2%;left:41%;text-align:center}
.ln8{bottom:2%;left:19%;text-align:center}
.ln9{bottom:2%;right:19%;text-align:center}
@media(max-width:820px){.lcollage{display:none}}

/* 9 LAGEN (lijst, mobiel) */
.lagen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media(max-width:620px){.lagen{grid-template-columns:1fr}}
.laag{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:18px 20px;display:flex;gap:14px;align-items:flex-start}
.laag .num{font-family:'Fraunces',serif;font-size:22px;color:var(--purple);font-weight:500;line-height:1;flex-shrink:0}
.laag b{display:block;font-size:15px;color:var(--ink);margin-bottom:2px}
.laag span{font-size:13px;color:var(--muted);line-height:1.5;font-weight:300}

/* AGENDA */
.event{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px 28px;margin-bottom:14px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.event h4{font-family:'Fraunces',serif;font-size:20px;font-weight:500;margin:0 0 5px}
.event p{font-size:14px;color:var(--muted);margin:0;font-weight:300}
.event .prijs{font-family:'Fraunces',serif;font-size:22px;color:var(--purple);font-weight:500}
.agenda-empty{background:var(--purple-pale);border:1px dashed var(--purple-light);border-radius:20px;padding:40px 32px;text-align:center}
.agenda-empty h3{color:var(--purple)}
.note{border-left:3px solid var(--purple);padding:14px 18px;background:var(--purple-pale);border-radius:0 12px 12px 0;color:var(--ink);font-size:14px;line-height:1.7;margin:20px 0}

/* ============ FORMULIEREN ============ */
.form-wrap{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:40px;box-shadow:var(--shadow)}
.form-wrap input,.form-wrap textarea,.form-wrap select{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px 16px;font:300 16px/1.5 'Mulish',sans-serif;background:var(--cream);color:var(--ink);outline:none;transition:border-color .18s;margin-bottom:14px}
.form-wrap input:focus,.form-wrap textarea:focus,.form-wrap select:focus{border-color:var(--purple)}
.form-wrap textarea{min-height:130px;resize:vertical}
.form-wrap label{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-family:'Mulish',sans-serif}
.field{margin-bottom:6px}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:6px 0 18px}
.consent input[type=checkbox]{width:20px;height:20px;flex-shrink:0;margin:2px 0 0;accent-color:var(--purple)}
.consent label{text-transform:none;letter-spacing:0;font-weight:400;font-size:14px;color:var(--ink);margin:0;line-height:1.55}
.health{background:var(--rose);border:1px solid var(--rose-deep);border-radius:16px;padding:22px 24px;margin:18px 0}
.health h4{font-family:'Fraunces',serif;font-size:18px;margin:0 0 8px;font-weight:500}
.health p{font-size:14px;color:#5a453f;line-height:1.65;margin:0 0 10px;font-weight:400}
.health ul{margin:6px 0 0;padding-left:20px;font-size:14px;color:#5a453f;line-height:1.7}

/* GEZONDHEID: twee niveaus. Stop = absolute contra-indicatie, overleg = relatieve. */
.gez{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.gez-blok{border-radius:20px;padding:26px 28px;border:1px solid}
.gez-blok.stop{background:#fdf0ec;border-color:rgba(184,102,77,.35)}
.gez-blok.overleg{background:var(--purple-pale);border-color:rgba(122,82,152,.28)}
.gez-kop{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.gez-blok h3{font-family:'Fraunces',serif;font-size:20px;font-weight:500;margin:0;color:var(--ink)}
.gez-blok.stop h3{color:var(--terracotta)}
.gez-blok.overleg h3{color:var(--purple)}
.gez-blok .gez-sub{font-size:13.5px;line-height:1.6;color:var(--muted);font-weight:300;margin:0 0 14px}
.gez-blok ul{list-style:none;margin:0;padding:0}
.gez-blok li{font-size:14px;line-height:1.55;color:var(--ink);font-weight:400;
  padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed rgba(122,82,152,.15)}
.gez-blok li:last-child{border-bottom:none}
.gez-blok li::before{position:absolute;left:0;top:8px;font-weight:700}
.gez-blok.stop li::before{content:'×';color:var(--terracotta);font-size:16px;top:6px}
.gez-blok.overleg li::before{content:'?';color:var(--purple);font-size:14px}
.gez-blok li span{display:block;font-size:12.5px;color:var(--muted);font-weight:300;margin-top:2px}
@media(max-width:820px){.gez{grid-template-columns:1fr}}
.formnote{font-size:12px;color:var(--muted);margin-top:10px;line-height:1.6}

/* KWALIFICATIES / OVER */
.over-quote{font-family:'Fraunces',Georgia,serif;font-size:clamp(24px,3.5vw,40px);line-height:1.25;color:var(--ink);font-style:italic;font-weight:400;max-width:720px}
.kwalificaties{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:32px}
.kwal{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 22px;font-size:14px;color:var(--muted);font-weight:300}
.kwal strong{display:block;color:var(--ink);font-weight:700;margin-bottom:2px}

/* WACHTLIJST / HIGH TICKET */
.ht-hero{background:linear-gradient(135deg,#3d2058 0%,#7A5298 100%);border-radius:var(--radius);padding:56px;color:#fff}
.ht-hero h2{color:#fff}
.ht-hero p{color:rgba(255,255,255,.7)}
.soonpill{display:inline-block;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);color:#fff;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:6px 14px;border-radius:999px;margin-bottom:18px}
.ht-lijst{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}

/* Binnen de paarse hero: licht op donker. */
.ht-hero .ht-blok{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:24px}
.ht-hero .ht-blok h4{font-family:'Fraunces',serif;color:#fff;font-size:18px;margin:0 0 8px;font-weight:500}
.ht-hero .ht-blok p{font-size:14px;color:rgba(255,255,255,.62);margin:0;font-weight:300;line-height:1.6}

/* Buiten de hero (op crème, onder de reis): donker op licht. Zonder dit stonden
   deze blokken wit op wit en waren ze onzichtbaar. */
.ht-blok{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px;
  box-shadow:0 8px 24px rgba(74,44,31,.07);
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease}
.ht-blok h4{font-family:'Fraunces',serif;color:var(--ink);font-size:18px;margin:0 0 8px;font-weight:500}
.ht-blok p{font-size:14px;color:var(--muted);margin:0;font-weight:300;line-height:1.6}
.hoe-blok .ht-blok:hover{transform:translateY(-6px) scale(1.03);
  box-shadow:0 20px 42px rgba(74,44,31,.16)}
@media(prefers-reduced-motion:reduce){
  .ht-blok,.hoe-blok .ht-blok:hover{transform:none;transition:box-shadow .2s}
}

/* FAQ */
.faq{max-width:760px;margin:auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:6px 22px;margin-bottom:12px}
.faq summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:'+';color:var(--purple);font-weight:700;margin-right:12px}
.faq details[open] summary::before{content:'–'}
.faq p{font-size:15px;color:var(--muted);font-weight:300;line-height:1.7;margin:0 0 18px}

/* KASSA: verwijst naar Rebecca's eigen verhaal — als kind speelde ze het liefst
   winkeltje (zie over.html). Verving de handgetekende SVG-versie.
   Kom je erover, dan wipt de kassa op en verschijnt "pling!". Meer niet.
   De oude stond op display:none onder 1000px; op telefoon zag dus niemand hem.
   Deze zakt daar netjes in de tekst mee. */
/* Hangt aan de rechterrand van de tekstkolom (--max), niet aan de vensterrand.
   Met een vaste right: dreef hij op een breed scherm weg van de tekst. */
.kassa{position:absolute;right:calc(max(0px, (100% - var(--max))/2) + 28px);
  bottom:26px;width:210px;z-index:2}
.kassa img{width:100%;height:auto;display:block;border-radius:16px;
  box-shadow:0 12px 32px rgba(74,44,31,.16);
  transition:transform .34s cubic-bezier(.34,1.4,.5,1), box-shadow .3s ease}
.kassa:hover img,.kassa:focus-within img{
  transform:translateY(-7px) rotate(-1.6deg) scale(1.04);
  box-shadow:0 22px 48px rgba(74,44,31,.24)}
.k-pling{position:absolute;top:-14px;right:-6px;
  font-family:'Caveat',cursive;font-size:26px;font-weight:700;color:var(--terracotta);
  opacity:0;transform:translateY(8px) rotate(-6deg);
  transition:opacity .3s ease, transform .34s cubic-bezier(.34,1.4,.5,1);
  pointer-events:none;text-shadow:0 1px 3px rgba(255,253,248,.9)}
.kassa:hover .k-pling,.kassa:focus-within .k-pling{opacity:1;transform:translateY(0) rotate(-6deg)}
@media(prefers-reduced-motion:reduce){
  .kassa img,.kassa:hover img,.kassa:focus-within img{transform:none;transition:box-shadow .2s}
  .k-pling{transition:opacity .2s}
  .kassa:hover .k-pling,.kassa:focus-within .k-pling{transform:translateY(0) rotate(-6deg)}
}
/* Op telefoon geen hover en geen ruimte rechtsonder: hij zakt mee in de tekst.
   De pling laten we daar weg. Zonder muis kan je hem niet oproepen, en dan is het
   geen beloning meer maar een woord dat zomaar boven de kassa hangt. */
@media(max-width:1000px){
  .kassa{position:static;width:150px;margin:22px auto 0;padding:0 20px}
  .k-pling{display:none}
}

/* STEMMEN: waar mag Rebecca aan werken. Hergebruikt de chip-vorm van de filters,
   maar met echte checkboxes eronder zodat het met toetsenbord en screenreader werkt. */
.stem{max-width:760px;margin:0 auto}
.stem-opts{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 4px}
.stem-opt{position:relative}
.stem-opt input{position:absolute;opacity:0;width:0;height:0}
.stem-opt span{display:inline-block;border:1.5px solid var(--line);background:var(--paper);
  border-radius:999px;padding:10px 17px;font-size:14px;font-weight:600;color:var(--muted);
  cursor:pointer;transition:all .18s;font-family:'Mulish',sans-serif;line-height:1.35}
.stem-opt span:hover{border-color:var(--rose-mid);transform:translateY(-1px)}
.stem-opt input:checked + span{background:var(--purple);border-color:var(--purple);color:#fff}
.stem-opt input:checked + span::before{content:'✓ ';font-weight:700}
.stem-opt input:focus-visible + span{outline:2px solid var(--purple);outline-offset:2px}
.stem-eigen{margin-top:18px}
.stem-eigen label,.stem-mail label{display:block;font-family:'Mulish',sans-serif;font-size:12.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:7px}
.stem input[type=text],.stem input[type=email]{width:100%;box-sizing:border-box;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:13px 16px;font-family:'Mulish',sans-serif;
  font-size:15px;font-weight:300;color:var(--ink);transition:border-color .18s}
.stem input[type=text]:focus,.stem input[type=email]:focus{outline:none;border-color:var(--purple)}
.stem input::placeholder{color:#b3a49c}
.stem-mail{margin-top:16px}
.stem-mail .note{margin:0 0 10px}
.stem-fout{color:var(--terracotta);font-size:13.5px;font-weight:600;margin:12px 0 0;display:none}
.stem-fout.aan{display:block}
@media(prefers-reduced-motion:reduce){.stem-opt span:hover{transform:none}}

/* BINNENKORT: product bestaat wel, is nog niet te koop */
.product.binnenkort .thumb{opacity:.62}
.binnenkort-tag{display:inline-block;background:var(--rose-deep);color:var(--ink);
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:6px 13px;border-radius:999px;white-space:nowrap}

/* NIEUWSBRIEF: eigen opmaak over het MailerLite-formulier heen.
   Hun HTML-structuur en hun webforms.min.js blijven, hun 600 regels CSS niet.
   De klassenamen (ml-*) moeten blijven staan: daar haakt hun script op in. */
.nieuwsbrief{max-width:560px;margin:0 auto}
.nieuwsbrief .ml-form-embedContainer{width:100%}
.nieuwsbrief .ml-form-embedBody,.nieuwsbrief .ml-form-successBody{padding:0}
.nieuwsbrief .ml-form-embedContent{margin:0 0 22px}
.nieuwsbrief .ml-form-embedContent h4,.nieuwsbrief .ml-form-successContent h4{
  font-family:'Fraunces',serif;font-size:clamp(26px,3.2vw,34px);font-weight:500;
  color:var(--ink);margin:0 0 10px;line-height:1.2}
.nieuwsbrief .ml-form-embedContent p,.nieuwsbrief .ml-form-successContent p,
.nieuwsbrief .ml-form-embedContent pre,.nieuwsbrief .ml-form-successContent pre{
  font-family:'Mulish',sans-serif;font-size:16px;font-weight:300;color:var(--muted);
  line-height:1.75;margin:0;white-space:normal;background:none;border:0;padding:0}
.nieuwsbrief .ml-form-embedContent code,.nieuwsbrief .ml-form-successContent code{
  font-family:'Mulish',sans-serif;font-size:16px;font-weight:300;color:var(--muted);
  background:none;padding:0;white-space:pre-line}
.nieuwsbrief .ml-form-fieldRow{margin:0 0 12px}
.nieuwsbrief input[type=email],.nieuwsbrief input[type=text]{
  width:100%;box-sizing:border-box;background:var(--paper);
  border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  font-family:'Mulish',sans-serif;font-size:15px;font-weight:300;color:var(--ink);
  transition:border-color .18s}
.nieuwsbrief input[type=email]:focus,.nieuwsbrief input[type=text]:focus{
  outline:none;border-color:var(--purple)}
.nieuwsbrief input::placeholder{color:#b3a49c}
.nieuwsbrief .ml-form-checkboxRow{margin:4px 0 18px;float:none}
.nieuwsbrief .ml-form-checkboxRow label{display:flex;gap:10px;align-items:flex-start;
  cursor:pointer;padding:0;min-height:0}
.nieuwsbrief .ml-form-checkboxRow input[type=checkbox]{
  position:static;opacity:1;z-index:auto;width:17px;height:17px;margin:2px 0 0;
  accent-color:var(--purple);flex-shrink:0}
.nieuwsbrief .ml-form-checkboxRow .label-description p{font-size:13px;line-height:1.6;margin:0}
.nieuwsbrief .ml-form-embedSubmit{margin:0;float:none;width:100%}
.nieuwsbrief .ml-form-embedSubmit button.primary{
  width:100%;background:var(--purple);color:#fff;border:0;border-radius:999px;
  padding:14px 22px;font-family:'Mulish',sans-serif;font-size:15px;font-weight:700;
  cursor:pointer;transition:background .18s}
.nieuwsbrief .ml-form-embedSubmit button.primary:hover{background:var(--purple-light)}
.nieuwsbrief .ml-error input{border-color:var(--terracotta)}
.nieuwsbrief .ml-error .label-description p{color:var(--terracotta)}

/* STEEKKAART: ludiek notitieblaadje met Rebecca's eigen profiel (Over mij) */
.steekkaart{
  position:relative;max-width:540px;
  background:var(--paper);
  /* stippenraster zoals een bullet journal: vergevingsgezind, lijnt niet fout uit met de tekst */
  background-image:radial-gradient(circle, rgba(122,82,152,.14) 1px, transparent 1px);
  background-size:19px 19px;
  border:1px solid var(--line);border-radius:3px;
  padding:30px 30px 26px;
  box-shadow:0 16px 36px rgba(74,44,31,.16);
  transform:rotate(-1.3deg);
}
/* plakbandje bovenaan */
.steekkaart::before{
  content:'';position:absolute;top:-10px;left:50%;
  transform:translateX(-50%) rotate(-1.8deg);
  width:104px;height:21px;
  background:rgba(242,224,224,.9);border:1px solid rgba(212,168,168,.5);
}
.sk-titel{font-family:'Caveat',cursive;font-weight:700;font-size:27px;color:var(--purple);transform:rotate(-.8deg);margin:0 0 14px}
.sk-rij{display:grid;grid-template-columns:168px 1fr;gap:14px;padding:9px 0;align-items:baseline}
.sk-label{font-family:'Mulish',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sk-waarde{font-family:'Caveat',cursive;font-size:25px;font-weight:700;color:var(--ink);line-height:1.2}
@media(max-width:620px){
  .steekkaart{padding:26px 22px 22px;transform:rotate(-.7deg)}
  .sk-rij{grid-template-columns:1fr;gap:0;padding:8px 0}
}

/* LEGAL (algemene voorwaarden, privacybeleid) */
.legal{max-width:740px;margin:auto}
.legal-intro{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:26px 30px;margin-bottom:40px}
.legal-intro p{font-size:16px;color:var(--muted);line-height:1.75;font-weight:300;margin:0 0 10px}
.legal-intro p:last-child{margin-bottom:0}
.legal-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:44px}
.legal-toc a{font-size:12.5px;font-weight:600;color:var(--purple);background:var(--purple-pale);border-radius:20px;padding:6px 14px;text-decoration:none;transition:background .18s}
.legal-toc a:hover{background:var(--rose-deep);color:var(--ink)}
.legal h2{font-family:'Fraunces',serif;font-size:23px;font-weight:500;color:var(--ink);margin:44px 0 14px;scroll-margin-top:90px}
.legal h2:first-of-type{margin-top:0}
.legal h2 .artnr{color:var(--purple);font-style:italic;margin-right:8px}
.legal p{font-size:15.5px;color:var(--muted);line-height:1.8;font-weight:300;margin:0 0 14px}
.legal ul{margin:0 0 16px;padding-left:22px}
.legal li{font-size:15.5px;color:var(--muted);line-height:1.8;font-weight:300;margin-bottom:6px}
.legal .art{display:block;margin-bottom:14px}
.legal .art b{color:var(--ink);font-weight:600;font-family:'Mulish',sans-serif;font-size:14px;margin-right:4px}
.legal-updated{margin-top:52px;padding-top:22px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted);font-weight:300}

/* WETTELIJKE VOETREGEL. In Belgie verplicht op elke pagina voor wie online verkoopt
   (WER boek XII, art. XII.6): naam, ondernemingsnummer, btw-nummer, adres, telefoon, e-mail.
   De Economische Inspectie raadt onderaan elke pagina aan. */
.footlegal{border-top:1px solid rgba(255,255,255,.13);margin-top:38px;padding-top:22px}
.footlegal p{font-size:12px;line-height:1.75;color:rgba(255,255,255,.42);margin:0}
.footlegal a{color:rgba(255,255,255,.42);text-decoration:underline}
.footlegal a:hover{color:#fff}
.footlegal .fl-scheiding{margin:0 7px;opacity:.5}

/* NOTICE (taal placeholder) */
.notice{display:none;background:var(--purple);color:#fff;text-align:center;padding:11px 20px;font-size:13.5px;font-weight:600}
.notice a{color:#fff;text-decoration:underline}
html.en .notice{display:block}

/* FOOTER */
.footer{background:#1e1510;color:#fff;padding:52px 0}
.footer a{color:rgba(255,255,255,.5);text-decoration:none;transition:color .18s}
.footer a:hover{color:#fff}
.footgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.footer h4{font-family:'Fraunces',serif;font-size:17px;font-weight:500;color:#fff;margin:0 0 14px;font-style:italic}
.footer p{color:rgba(255,255,255,.4);font-size:13px;font-weight:300;margin:0 0 6px;line-height:1.7}
.footer .sub{color:rgba(255,255,255,.22);font-size:12px;margin-top:20px}

/* 2-KOLOMS RASTER (o.a. vier richtingen, twee ingangen) */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:32px}

/* KEUZEBLOK (ik kijk zelf rond / help mij kiezen) */
.keuze{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:30px;box-shadow:0 8px 28px rgba(74,44,31,.07);display:flex;flex-direction:column}
.keuze h3{font-size:22px}
.keuze p{color:var(--muted);font-weight:300;line-height:1.7;margin:8px 0 20px;font-size:15px}
.keuze .btn{margin-top:auto;align-self:flex-start}

/* RICHTING-KAART */
.richting{background:var(--paper);border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:0 8px 28px rgba(74,44,31,.06);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}
.richting:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(74,44,31,.12)}
.richting h3{font-size:20px}
.richting p{color:var(--muted);font-weight:300;line-height:1.65;margin:8px 0 18px;font-size:15px}
.richting a{margin-top:auto;align-self:flex-start;font-weight:700;font-size:14px;color:var(--purple);text-decoration:none}
.richting a:hover{text-decoration:underline}

/* WACHTLIJST-BAND (bewust ouderschap teaser) */
.teaser{background:var(--purple-pale);border:1px solid var(--purple-light);border-radius:var(--radius);padding:32px 36px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px}
.teaser div{max-width:640px}
.teaser .soonpill{background:var(--purple);color:#fff;border:0}
.teaser h3{margin:0;font-size:24px}

/* REVEAL */
.r{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.r.in{opacity:1;transform:none}

/* HANDGESCHREVEN NOTITIE + PIJL (speels, in inktlijn) */
.annotated{position:relative}
.annotate{position:absolute;z-index:5;font-family:'Caveat','Comic Sans MS',cursive;font-size:25px;line-height:1.05;color:var(--terracotta);font-weight:700;pointer-events:none;max-width:185px;text-shadow:0 1px 2px rgba(255,253,248,.98),0 0 8px rgba(255,253,248,.95),0 0 3px rgba(255,253,248,.95)}
.annotate .arrow{position:absolute;stroke:var(--terracotta);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(255,253,248,.9))}
.annotate.tl{top:-34px;left:-8px;text-align:right}
.annotate.tl .arrow{width:90px;height:70px;top:36px;left:70px}
.annotate.tr{top:14px;right:-24px;text-align:left}
.annotate.tr .arrow{width:90px;height:70px;top:34px;right:60px}
.annotate.br{bottom:-26px;right:6px;text-align:left}
.annotate.br .arrow{width:82px;height:64px;bottom:30px;right:58px;transform:scaleY(-1)}
.annotate.bl{bottom:-26px;left:-8px;text-align:right}
.annotate.bl .arrow{width:82px;height:64px;bottom:30px;left:64px;transform:scaleY(-1)}
.doodle{font-family:'Caveat',cursive;color:var(--terracotta);font-weight:700;font-size:1.12em;white-space:nowrap}
.fullcircle{border-top:2px dashed rgba(122,82,152,.35);padding-top:20px}
.over-fc-note{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;font-size:28px;line-height:1.15;transform:rotate(-1.5deg);margin:10px 0 0}
.funfacts p{font-size:18px;line-height:1.85;color:#3a2a25;margin:0 0 9px;font-weight:400}
.funfacts p::before{content:'✦';color:var(--terracotta);margin-right:10px;font-size:.8em}
.kidfacts{max-width:640px}
.kidfacts p{font-size:20px;line-height:1.65;color:#3a2a25;margin:0 0 13px;font-weight:400}
.kidfacts p::before{content:'★';color:var(--terracotta);margin-right:11px;font-size:.72em;vertical-align:2px}

/* FOTO-SCRAPBOOK (over mij) */
.mobile-only{display:none}
.collage{position:relative;max-width:880px;margin:30px auto 0;min-height:440px}
.collage-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:280px;max-width:42%;border-radius:24px;box-shadow:var(--shadow);z-index:1}
.cnote{position:absolute;z-index:3;font-family:'Caveat',cursive;color:var(--terracotta);font-weight:700;font-size:24px;line-height:1.08;max-width:180px;text-shadow:0 1px 2px rgba(255,253,248,.98),0 0 8px rgba(255,253,248,.96),0 0 3px rgba(255,253,248,.96)}
.cnote svg{width:56px;height:42px;stroke:var(--terracotta);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;vertical-align:middle;filter:drop-shadow(0 1px 1.5px rgba(255,253,248,.9))}
.cn1{top:24px;left:7%;text-align:right}
.cn2{top:24px;right:7%;text-align:left}
.cn3{top:46%;left:1%;text-align:right}
.cn4{top:46%;right:1%;text-align:left}
.cn5{bottom:18px;left:10%;text-align:right}
.cn6{bottom:18px;right:10%;text-align:left}
@media(max-width:820px){.collage{display:none}.mobile-only{display:block}}
@media(max-width:720px){.annotate{display:none}}

/* HERO subline (omgekeerde klemtoon) */
.hero-sub{display:inline-block;font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-size:clamp(19px,2.3vw,28px);line-height:1.2;color:var(--purple);margin:0 0 22px;transform:rotate(-1.6deg)}

/* HANDGESCHREVEN KLEMTONEN in lopende tekst */
/* preserveAspectRatio='none' is nodig: zonder dat schaalt de streep op hoogte en wordt hij
   relatief korter naarmate de zin langer is (viel bij losse woorden niet op). */
.mark-underline{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 55 3 145 13 197 6' fill='none' stroke='%23b8664d' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 100%;background-size:100% .34em;padding-bottom:.12em}
/* omcirkeling OM het woord: ellips groter dan de tekst, tekst blijft leesbaar */
.mark-circle{white-space:nowrap;display:inline-block;line-height:1.55;padding:.2em .55em .24em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 90' preserveAspectRatio='none'%3E%3Cpath d='M28 20 C 90 7 160 8 214 17 C 231 34 230 60 216 76 C 158 88 74 89 22 76 C 6 60 6 33 30 17 C 60 11 130 10 200 16' fill='none' stroke='%23b8664d' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}
/* handgetekend kader OM het woord */
.mark-box{white-space:nowrap;display:inline-block;line-height:1.55;padding:.18em .5em .22em;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 80' preserveAspectRatio='none'%3E%3Cpath d='M8 10 C 70 5 150 6 212 9 C 215 30 215 52 210 71 C 150 75 70 74 9 70 C 5 50 5 28 8 10' fill='none' stroke='%23b8664d' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat center/100% 100%}
/* een woord iets groter/handgeschreven accent */
.big{font-size:1.22em;font-weight:600;letter-spacing:-.01em}

/* MARGE-NOTITIES: getekende kanttekeningen aan de zijkant */
.annot{position:relative}
.sidenote{position:absolute;z-index:4;font-family:'Caveat',cursive;color:var(--terracotta);font-weight:700;font-size:22px;line-height:1.1;text-shadow:0 1px 2px rgba(255,253,248,.96),0 0 7px rgba(255,253,248,.92)}
.sidenote svg{position:absolute;stroke:var(--terracotta);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible;width:74px;height:52px;filter:drop-shadow(0 1px 1.5px rgba(255,253,248,.9))}
.sidenote.right{right:-188px;top:2px;width:150px;text-align:left}
.sidenote.right svg{left:-66px;top:6px}
.sidenote.left{left:-188px;top:2px;width:150px;text-align:right}
.sidenote.left svg{right:-64px;top:6px;transform:scaleX(-1)}
.marginline{position:absolute;left:-42px;top:-4px;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--terracotta)}
.marginline .bang{font-family:'Caveat',cursive;font-weight:700;font-size:28px;line-height:1}
.marginline svg{width:16px;height:74px;stroke:var(--terracotta);fill:none;stroke-width:2.6;stroke-linecap:round}
@media(max-width:980px){.sidenote,.marginline{display:none}}

/* LEESTEKST (kleiner dan .story) */
.leestekst{max-width:660px}
.leestekst p{font-size:18px;line-height:1.72;color:#3a2a25;margin:0 0 15px;font-weight:400}
.leestekst p:last-child{margin-bottom:0}

/* DRIE OFFERTE-KAARTEN */
.card{display:flex;flex-direction:column}
.card .btn{margin-top:auto}
.card-thumb{min-height:150px;border-radius:16px;margin-bottom:18px}
.card.feature{background:var(--purple);border-color:var(--purple)}
.card.feature h3{color:#fff}
.card.feature p{color:rgba(255,255,255,.82)}
.card.feature .btn-outline{border-color:rgba(255,255,255,.55);color:#fff}
.card.feature .btn-outline:hover{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

/* KIESHULP (Help mij kiezen) */
.starthint{font-family:'Caveat',cursive;color:var(--terracotta);font-size:27px;font-weight:700;line-height:1;transform:rotate(-2deg);margin:0 0 2px}
.starthint-arrow{display:block;width:52px;height:46px;stroke:var(--terracotta);fill:none;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;margin:2px 0 0 40px}
.modeswitch{display:flex;gap:12px;flex-wrap:wrap;margin:2px 0 28px}
.shopbar input[type=range]{accent-color:var(--purple);cursor:pointer;width:100%}
.pricelabel{text-transform:none;letter-spacing:0;color:var(--purple);font-weight:700}
.quiz-wrap{max-width:720px}
.quiz-step{display:none}
.quiz-step.active{display:block;animation:quizfade .4s ease}
@keyframes quizfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quiz-progress{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);margin-bottom:10px}
.quiz-step h3{font-size:26px;margin-bottom:4px}
.quiz-opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.quiz-opt{text-align:left;background:var(--paper);border:1.5px solid var(--line);border-radius:16px;padding:17px 20px;font:600 16px/1.35 'Mulish',sans-serif;color:var(--ink);cursor:pointer;transition:all .16s}
.quiz-opt:hover{border-color:var(--purple)}
.quiz-opt.on{border-color:var(--purple);background:var(--purple-pale)}
.quiz-opt span{display:block;font-weight:400;font-size:14px;color:var(--muted);margin-top:4px}
.quiz-back{background:none;border:0;color:var(--muted);font-weight:700;font-size:13px;cursor:pointer;margin-top:18px;font-family:'Mulish',sans-serif}
.quiz-back:hover{color:var(--purple)}
#quiz-result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:24px 0}

/* RESPONSIVE */
@media(max-width:920px){
  .grid2,.footgrid,.bw-prijzen,.kwalificaties{grid-template-columns:1fr}
  .cards,.instr-grid,.shop-grid,.ht-lijst{grid-template-columns:1fr}
  .beweging-stappen{grid-template-columns:1fr 1fr;gap:14px}
  .beweging-stappen::before{display:none}
  .menu{display:none;position:absolute;left:18px;right:18px;top:74px;background:var(--cream);border:1px solid var(--line);border-radius:18px;padding:20px;box-shadow:var(--shadow);flex-direction:column;align-items:flex-start;gap:14px}
  .menu.open{display:flex}
  .mobile{display:inline-flex}
  .wrap{padding:0 20px}
  .beweging,.instr-wrap,.bw-hero,.ht-hero,.form-wrap{padding:34px 24px}
  .event{grid-template-columns:1fr}
  .shopbar{position:static}
  .shop-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){.shop-grid{grid-template-columns:1fr}}

/* ── VOLGEND SPELEN: stil sfeerbeeld in een lus (homepage) ──────────────────
   Bewust klein en zonder uitleg: het is een sfeerbeeld, geen les. Vaste max-breedte,
   anders groeit hij mee op een breed scherm en gaat hij de pagina domineren. */
.volgblok{display:flex;justify-content:center}
.volgblok-beeld{margin:0;position:relative;max-width:380px;width:100%}
.volgvideo{width:100%;height:auto;display:block;border-radius:20px;
  box-shadow:0 14px 40px rgba(74,44,31,.14);background:var(--cream)}
/* Alleen zichtbaar als het script hem niet mag afspelen (zie site.js):
   dan kan je zelf op play duwen in plaats van dat het je overkomt. */
.volgvideo[controls]{background:#000}
.volgblok-note{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;
  font-size:20px;line-height:1.25;transform:rotate(-1.2deg);
  margin:14px 0 0;display:flex;align-items:flex-end;gap:9px}
.volgblok-note svg{width:44px;height:30px;flex:none;stroke:var(--terracotta);
  fill:none;stroke-width:2.4;stroke-linecap:round;transform:scaleX(-1)}
@media(max-width:860px){
  .volgblok-note{font-size:18px}
}

/* ── PLAKBOEK: de Bosschaert-tekeningen op Over mij ─────────────────────────
   Ingeplakt in een album: scheef, met plakbandjes. Ze komen na elkaar aandrijven
   zodra je ze in beeld scrolt (werkt ook zonder muis) en gaan recht staan als je
   erover komt. Potlood op wit, dus de tekening is zelf al het papier. */
.plakboek{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:30px}
.plak{margin:0;position:relative;background:#fff;padding:5px 5px 7px;
  border-radius:2px;box-shadow:0 5px 14px rgba(74,44,31,.16);
  opacity:0;transition:opacity .55s ease, transform .5s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease}
.plak img{width:100%;height:auto;display:block;border-radius:2px}

/* Elk blaadje hangt net iets anders scheef. */
.plak:nth-child(1){transform:rotate(-2.4deg) translateY(16px)}
.plak:nth-child(2){transform:rotate(1.8deg)  translateY(16px)}
.plak:nth-child(3){transform:rotate(1.4deg)  translateY(16px)}
.plak:nth-child(4){transform:rotate(-1.9deg) translateY(16px)}

.plakboek.in .plak{opacity:1}
.plakboek.in .plak:nth-child(1){transform:rotate(-2.4deg);transition-delay:.05s}
.plakboek.in .plak:nth-child(2){transform:rotate(1.8deg); transition-delay:.17s}
.plakboek.in .plak:nth-child(3){transform:rotate(1.4deg); transition-delay:.29s}
.plakboek.in .plak:nth-child(4){transform:rotate(-1.9deg);transition-delay:.41s}

/* Kom je erover: recht staan en naar voren komen. */
.plakboek.in .plak:hover,.plakboek.in .plak:focus-within{
  transform:rotate(0deg) translateY(-6px) scale(1.04);
  box-shadow:0 22px 46px rgba(74,44,31,.26);
  transition-delay:0s;z-index:3}

/* Plakbandje: een doorschijnend strookje over de bovenhoek. */
.plak::before{content:'';position:absolute;top:-6px;left:50%;width:34px;height:12px;
  transform:translateX(-50%) rotate(-2deg);
  background:rgba(197,154,85,.28);border:1px solid rgba(197,154,85,.22);
  border-radius:1px}
.plak:nth-child(2)::before{transform:translateX(-50%) rotate(3deg);width:28px}
.plak:nth-child(3)::before{transform:translateX(-50%) rotate(-4deg);width:31px}
.plak:nth-child(4)::before{transform:translateX(-50%) rotate(2deg);width:32px}

.plak-note{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;
  font-size:26px;line-height:1.2;transform:rotate(-1.5deg);
  margin:22px 0 0;display:flex;align-items:flex-end;gap:10px;justify-content:flex-end}
.plak-note svg{width:52px;height:36px;flex:none;stroke:var(--terracotta);
  fill:none;stroke-width:2.4;stroke-linecap:round}

@media(max-width:620px){
  .plakboek{grid-template-columns:1fr 1fr;gap:12px}
  .plak-note{font-size:20px;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .plak,.plakboek.in .plak{opacity:1;transition:box-shadow .2s;transition-delay:0s}
  .plakboek.in .plak:hover,.plakboek.in .plak:focus-within{transform:rotate(0deg)}
}

/* ── VRAAGBAAK: drie thema's ────────────────────────────────────────────────
   Was negen losse vinkjes op een hoop. Nu drie <details>, net als de FAQ:
   werkt zonder JavaScript, toegankelijk uit zichzelf, en je leest pas wat je
   opengeklapt hebt. */
.stem-themas{margin:26px 0 4px;display:grid;gap:12px}
.stem-thema{background:rgba(255,255,255,.6);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;transition:box-shadow .25s ease, background .25s ease}
.stem-thema[open]{background:rgba(255,255,255,.9);box-shadow:0 8px 24px rgba(74,44,31,.09)}
.stem-thema summary{cursor:pointer;list-style:none;padding:16px 20px;
  font-family:'Fraunces',Georgia,serif;font-size:20px;font-weight:500;color:var(--ink);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.stem-thema summary::-webkit-details-marker{display:none}
.stem-thema summary::after{content:'+';font-family:'Mulish',sans-serif;font-weight:700;
  font-size:22px;color:var(--purple);line-height:1;transition:transform .25s ease}
.stem-thema[open] summary::after{content:'–';transform:rotate(180deg)}
.stem-thema summary:hover{color:var(--purple)}
.stem-thema .stem-opts{margin:0;padding:0 20px}
.stem-thema .stem-eigen{padding:0 20px 20px;margin-top:16px}
@media(prefers-reduced-motion:reduce){
  .stem-thema,.stem-thema summary::after{transition:none}
  .stem-thema[open] summary::after{transform:none}
}

/* ── ANNOTATIES OP GSM ──────────────────────────────────────────────────────
   Onder 720px verdwijnen de pijltjes rond het beeld: daar is geen ruimte en ze
   botsen tegen de prent. Maar "gedrag is taal, triggers ook" IS de boodschap,
   geen versiering — die mag niet zomaar weg op het toestel waarop de meesten
   kijken. Dus daar komen ze eronder te staan, als handgeschreven regeltjes. */
.annotate-gsm{display:none}
@media(max-width:720px){
  .annotate-gsm{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:18px;
    justify-content:center}
  .annotate-gsm span{font-family:'Caveat','Comic Sans MS',cursive;font-size:22px;
    line-height:1.1;color:var(--terracotta);font-weight:700;white-space:nowrap}
  .annotate-gsm span:nth-child(odd){transform:rotate(-1.4deg)}
  .annotate-gsm span:nth-child(even){transform:rotate(1.2deg)}
}

/* ── PRIKBORD: thema's van het conscious parenting traject ──────────────────
   Kernwoorden uit het werkboek, als briefjes op een prikbord. Bewust GEEN weken,
   maanden of beloftes over calls: het traject is nog in de maak en dan leg je je
   niet vast op een pagina met een wachtlijst. */
.prikbord{display:flex;flex-wrap:wrap;gap:14px 12px;margin-top:34px;justify-content:center}
.prik{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:4px;padding:12px 18px 13px;
  font-family:'Caveat',cursive;font-size:23px;font-weight:700;color:var(--ink);
  box-shadow:0 5px 16px rgba(74,44,31,.13);
  transition:transform .28s cubic-bezier(.34,1.3,.5,1), box-shadow .28s ease}

/* Elk briefje hangt net iets anders scheef. */
.prik:nth-child(4n+1){transform:rotate(-1.8deg)}
.prik:nth-child(4n+2){transform:rotate(1.4deg)}
.prik:nth-child(4n+3){transform:rotate(-.7deg)}
.prik:nth-child(4n+4){transform:rotate(2deg)}

/* Punaise. */
.prik::before{content:'';position:absolute;top:-5px;left:50%;width:9px;height:9px;
  transform:translateX(-50%);border-radius:50%;
  background:var(--terracotta);box-shadow:0 1px 3px rgba(74,44,31,.4)}
.prik:nth-child(3n+2)::before{background:var(--purple)}
.prik:nth-child(3n+3)::before{background:var(--green-deep)}

/* Afwisselende papierkleuren, zodat het geen lijstje wordt. */
.prik:nth-child(5n+2){background:var(--rose)}
.prik:nth-child(5n+4){background:var(--green)}
.prik:nth-child(7n+3){background:var(--purple-pale)}

.prik:hover,.prik:focus-within{
  transform:rotate(0deg) translateY(-5px) scale(1.06);
  box-shadow:0 16px 34px rgba(74,44,31,.22);z-index:2}

@media(max-width:620px){
  .prikbord{gap:11px 9px}
  .prik{font-size:19px;padding:9px 14px 10px}
}
@media(prefers-reduced-motion:reduce){
  .prik{transition:box-shadow .2s}
  .prik:hover,.prik:focus-within{transform:none}
}

/* Terugkoppeling bij de wachtlijst (zie site.js: gaat naar Web3Forms + MailerLite) */
.formstatus{font-size:14px;font-weight:600;margin:12px 0 0;display:none}
.formstatus.ok,.formstatus.fout{display:block}
.formstatus.ok{color:var(--purple)}
.formstatus.fout{color:var(--terracotta)}

/* ── VRAAGBAAK: kop en intro ────────────────────────────────────────────────
   Geen los vraagteken meer bovenop de kop: die eindigt zelf al op "?" en dan
   staat er "??". */
.stem-titel{margin-bottom:18px}
.stem-intro{max-width:620px;position:relative}
.stem-benieuwd{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;
  font-size:27px;line-height:1.2;transform:rotate(-1.4deg);
  margin:22px 0 0;display:flex;align-items:flex-end;gap:10px}
.stem-benieuwd svg{width:48px;height:43px;flex:none;stroke:var(--terracotta);
  fill:none;stroke-width:2.6;stroke-linecap:round;transform:scaleX(-1)}
@media(max-width:620px){
  .stem-benieuwd{font-size:22px}
  .stem-benieuwd svg{width:38px;height:34px}
}

/* ── VAN WAAR NAAR WAAR ─────────────────────────────────────────────────────
   Elk pijnpunt wijst naar zijn eigen bestemming. Kom je over een rij (of tab je
   erheen), dan verschijnt de pijl en schuift het "straks" binnen.

   De bestemmingen komen uit kennis/missie-en-visie.md: aanwezig blijven bij je
   kind, ook op de moeilijke momenten. Bewust GEEN rustiger kind beloven.

   Waarom niet twee kolommen naast elkaar: dat leest als een tabel. Zo is het
   vier keer dezelfde beweging, en die maak je zelf. */
.reis{margin-top:30px;display:grid;gap:10px}
.reis-hint{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;font-size:20px;
  transform:rotate(-1.4deg);margin:0 0 4px;display:flex;align-items:flex-end;gap:8px}
.reis-hint svg{width:40px;height:28px;flex:none;stroke:var(--terracotta);fill:none;
  stroke-width:2.4;stroke-linecap:round}

.reisrij{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;
  padding:16px 22px;cursor:default;outline:none;
  transition:box-shadow .3s ease, transform .3s cubic-bezier(.2,.75,.3,1), border-color .3s ease}
.reisrij:hover,.reisrij:focus-visible{
  border-color:var(--green-mid);
  box-shadow:0 14px 34px rgba(74,44,31,.14);
  transform:translateY(-3px)}

.reis-nu{font-size:15.5px;color:var(--muted);font-weight:300;line-height:1.6;
  display:flex;align-items:flex-start;gap:11px}
.reis-nu i{color:var(--terracotta);font-style:normal;font-weight:700;font-size:12px;
  line-height:1.9;flex:none}

.reis-pijl svg{width:78px;height:22px;stroke:var(--purple);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translateX(-10px);
  transition:opacity .34s ease, transform .34s cubic-bezier(.2,.75,.3,1)}
.reisrij:hover .reis-pijl svg,.reisrij:focus-visible .reis-pijl svg{opacity:1;transform:none}

.reis-straks{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--purple);
  line-height:1.25;transform:rotate(-1deg) translateX(-8px);opacity:0;
  transition:opacity .34s ease .06s, transform .34s cubic-bezier(.2,.75,.3,1) .06s}
.reisrij:hover .reis-straks,.reisrij:focus-visible .reis-straks{
  opacity:1;transform:rotate(-1deg)}

/* Zonder muis bestaat hover niet. Dan zou de helft van de inhoud onbereikbaar
   zijn, dus daar staat alles gewoon open. Zelfde bij "minder beweging". */
@media(hover:none),(prefers-reduced-motion:reduce){
  .reis-hint{display:none}
  .reis-pijl svg,.reis-straks{opacity:1;transform:none}
  .reis-straks{transform:rotate(-1deg)}
  .reisrij:hover,.reisrij:focus-visible{transform:none}
}
@media(max-width:820px){
  .reisrij{grid-template-columns:1fr;gap:8px;padding:16px 20px}
  .reis-pijl{justify-self:start}
  .reis-pijl svg{transform:rotate(90deg) !important;width:44px;height:16px;margin-left:6px}
  .reis-straks{font-size:20px}
}

/* Het HOE: hoort onder de reis, niet los in de hero. Eerst waar je staat en
   waar je heen gaat, dan pas waarmee. */
.hoe-blok{margin-top:38px;padding-top:30px;border-top:2px dashed rgba(122,82,152,.28)}
.hoe-kopje{font-family:'Caveat',cursive;color:var(--terracotta);font-weight:700;
  font-size:23px;transform:rotate(-1deg);margin:0 0 16px}

/* ── DE VIJF STAPPEN, aan een getekende draad ───────────────────────────────
   Dit is DRAAD, maar zonder de letters: het acroniem is een ezelsbruggetje voor
   wie het werk al doet, niet voor wie nog moet beslissen. De draad zelf is de
   knipoog — het concept zit erin zonder dat het uitgelegd hoeft te worden.
   Volgorde en tekst uit het werkboek. */
.draad{position:relative;padding-left:66px;margin-top:24px;display:grid;gap:12px}

/* De draad: een slingerend lijntje dat zich verticaal herhaalt. */
.draad::before{content:'';position:absolute;left:12px;top:6px;bottom:6px;width:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='70' viewBox='0 0 16 70'%3E%3Cpath d='M8 0 C 1 14, 15 26, 8 38 C 2 48, 13 58, 8 70' fill='none' stroke='%23b8664d' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y;
  background-size:16px 70px;opacity:.75}

.draadstap{position:relative;
  background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:20px 24px;
  transition:transform .3s cubic-bezier(.2,.75,.3,1), box-shadow .3s ease, border-color .3s ease}
.draadstap:hover{transform:translateX(6px);border-color:var(--purple-pale);
  box-shadow:0 14px 34px rgba(74,44,31,.13)}

/* De kraaltjes aan de draad. Lichte onregelmatigheid, alsof ze getekend zijn. */
.draad-nr{position:absolute;left:-66px;top:18px;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:#fff;
  background:var(--purple);border:2.5px solid var(--paper);
  border-radius:50% 48% 52% 50%;
  box-shadow:0 3px 10px rgba(74,44,31,.22);z-index:2;
  transition:transform .3s cubic-bezier(.34,1.4,.5,1)}
.draadstap:nth-child(even) .draad-nr{border-radius:48% 52% 50% 50%;transform:rotate(-4deg)}
.draadstap:nth-child(odd) .draad-nr{transform:rotate(3deg)}
.draadstap:hover .draad-nr{transform:rotate(0deg) scale(1.12);background:var(--terracotta)}

.draad-tekst h4{font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:500;
  margin:0 0 5px;color:var(--ink)}
.draad-tekst p{font-size:14.5px;color:var(--muted);font-weight:300;line-height:1.65;margin:0 0 9px}
.draad-tag{font-family:'Caveat',cursive;font-size:18px;font-weight:700;color:var(--terracotta);
  transform:rotate(-1deg);display:inline-block}

@media(max-width:620px){
  .draad{padding-left:48px}
  .draad::before{left:6px;width:12px;background-size:12px 54px}
  .draadstap{padding:18px 18px 18px 20px}
  .draad-nr{left:-48px;top:16px;width:32px;height:32px;font-size:19px}
}
@media(prefers-reduced-motion:reduce){
  .draadstap,.draadstap:hover{transform:none;transition:box-shadow .2s}
  .draadstap:hover .draad-nr{transform:none}
}

/* ── WAT DIT ANDERS MAAKT ───────────────────────────────────────────────────
   Rebecca's eigen woorden, bijna letterlijk. Dit is haar scherpste onderscheid
   en het stond nergens op de site: ze gelooft niet in rustig blijven vanbuiten
   terwijl je vanbinnen stormt. Meteen ook een filter — wie een techniek zoekt,
   weet hier dat hij verkeerd zit. */
.anders{max-width:680px}
.anders h2{margin-bottom:22px}
.anders .body{margin:0 0 16px}
.anders-quote{font-family:'Fraunces',Georgia,serif;font-size:clamp(19px,2.2vw,24px);
  line-height:1.5;color:var(--purple);font-style:italic;font-weight:400;
  margin:28px 0 0;padding:22px 0 0;border-top:2px dashed rgba(122,82,152,.3)}

/* ── WISSELBEELD: echte foto's uit een 9D-sessie ────────────────────────────
   Eén beeld tegelijk, wisselt vanzelf (site.js). Klein gehouden: het gaat om
   een indruk, niet om een fotogalerij. Staat stil bij "minder beweging". */
.wissel{position:relative;max-width:300px;margin:32px auto 0;aspect-ratio:4/3;
  border-radius:16px;overflow:hidden;box-shadow:0 12px 32px rgba(74,44,31,.16);
  background:var(--cream)}
.wissel-beeld{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s ease}
.wissel-beeld.aan{opacity:1}
.wissel-bolletjes{position:absolute;left:0;right:0;bottom:9px;display:flex;
  justify-content:center;gap:6px;z-index:2}
.wissel-bolletjes i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);
  transition:background .4s ease, transform .4s ease}
.wissel-bolletjes i.aan{background:#fff;transform:scale(1.35)}
.wissel-note{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;
  font-size:19px;transform:rotate(-1.4deg);margin:12px 0 0;
  display:flex;align-items:flex-end;gap:8px;justify-content:center}
.wissel-note svg{width:40px;height:28px;flex:none;stroke:var(--terracotta);
  fill:none;stroke-width:2.4;stroke-linecap:round;transform:scaleX(-1)}
@media(max-width:620px){
  .wissel{max-width:230px;margin-top:26px}
  .wissel-note{font-size:17px}
}
@media(prefers-reduced-motion:reduce){
  .wissel-beeld{transition:none}
  .wissel-bolletjes{display:none}
}

/* ── REBECCA MET DE KOPTELEFOON (9D-hero) ───────────────────────────────────
   Rond fotootje dat linksonder over de inktprent valt. Niet uitgeknipt: ze vult
   het beeld bijna helemaal, dus er is geen achtergrond om weg te halen zonder
   rafelige randen. */
.ikfoto{position:absolute;left:-18px;bottom:-26px;width:168px;margin:0;z-index:6}
.ikfoto img{width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover;
  border-radius:50%;border:5px solid var(--paper);
  box-shadow:0 14px 34px rgba(74,44,31,.28);
  transition:transform .3s cubic-bezier(.2,.75,.3,1)}
.ikfoto:hover img{transform:scale(1.05) rotate(-2deg)}
.ikfoto figcaption{font-family:'Caveat',cursive;font-size:18px;font-weight:700;
  color:var(--purple);text-align:center;margin-top:8px;transform:rotate(-2deg);
  line-height:1.15;text-shadow:0 1px 2px rgba(255,253,248,.95)}
/* Op smallere schermen geen ruimte om te overlappen: hij zakt onder de prent. */
@media(max-width:900px){
  .ikfoto{position:static;width:120px;margin:20px auto 0}
  .ikfoto figcaption{font-size:16px}
}
@media(max-width:620px){
  .ikfoto{width:100px}
}
@media(prefers-reduced-motion:reduce){
  .ikfoto img,.ikfoto:hover img{transform:none;transition:none}
}

/* Badge van het Dr. Shefali-instituut. Bewust NIET in de hero: een certificaat
   bovenaan is "kijk wat ik behaald heb" in plaats van "dit is wat het voor jou
   is". Hij staat onder het manifest — als je net gelezen hebt waarom ze zo
   werkt, mag je zien waar dat vandaan komt. En bij de kwalificaties op Over mij,
   waar badges thuishoren. Klein: het is een bewijsstuk, geen uithangbord. */
.shefali-badge{width:150px;height:auto;display:block;margin:26px 0 0;opacity:.85;
  transition:opacity .3s ease}
.shefali-badge:hover{opacity:1}
.kwal-badge{position:relative}
.kwal-badge img{width:118px;height:auto;display:block;margin:12px 0 0;opacity:.8}
@media(max-width:620px){
  .shefali-badge{width:130px;margin-top:22px}
  .kwal-badge img{width:104px}
}
@media(prefers-reduced-motion:reduce){.shefali-badge{transition:none}}

/* ── ROND FOTOOTJE NAAST DE STEEKKAART (Over mij) ───────────────────────────
   De steekkaart was een notitieblaadje zonder gezicht. Nu staat er iemand naast. */
.sk-wrap{display:grid;grid-template-columns:auto 1fr;gap:38px;align-items:center}
.sk-foto{margin:0;flex:none}
.sk-foto img{width:190px;height:190px;object-fit:cover;border-radius:50%;
  border:6px solid var(--paper);box-shadow:0 16px 38px rgba(74,44,31,.22);
  transition:transform .35s cubic-bezier(.2,.75,.3,1)}
.sk-foto:hover img{transform:scale(1.05) rotate(-2.5deg)}
.sk-foto figcaption{font-family:'Caveat',cursive;font-size:23px;font-weight:700;
  color:var(--purple);transform:rotate(-2deg);margin-top:12px;line-height:1.15;
  display:flex;align-items:flex-end;gap:6px;justify-content:center}
.sk-foto figcaption svg{width:34px;height:24px;flex:none;stroke:var(--terracotta);
  fill:none;stroke-width:2.4;stroke-linecap:round;transform:scaleX(-1)}
@media(max-width:760px){
  .sk-wrap{grid-template-columns:1fr;gap:24px;justify-items:center}
  .sk-foto img{width:140px;height:140px;border-width:5px}
  .sk-foto figcaption{font-size:20px}
}
@media(prefers-reduced-motion:reduce){
  .sk-foto img,.sk-foto:hover img{transform:none;transition:none}
}

/* Ronde badge (Breath of Gold) — smaller dan de liggende certificaten,
   anders domineert hij het lijstje. */
.kwal-badge img.badge-rond{width:86px}
@media(max-width:620px){.kwal-badge img.badge-rond{width:76px}}

/* ── LINKS-PAGINA (vervangt Linktree) ───────────────────────────────────────
   Eén kolom, duim-breed, gemaakt voor een telefoon. Dezelfde drie deuren als de
   homepage: bewust geen vierde indeling erbij, want dan weet je niet meer waar
   te beginnen. */
.linkspagina{background:var(--rose);position:relative;overflow-x:hidden}
.linkspagina::before{content:'';position:fixed;right:-160px;top:-160px;width:460px;height:460px;
  border-radius:50%;background:radial-gradient(circle,var(--purple-pale),transparent 68%);
  opacity:.5;pointer-events:none}
.linkspagina::after{content:'';position:fixed;left:-140px;bottom:-140px;width:380px;height:380px;
  border-radius:50%;background:radial-gradient(circle,var(--green),transparent 70%);
  opacity:.45;pointer-events:none}
.linkswrap{max-width:520px;margin:0 auto;padding:44px 20px 56px;position:relative;z-index:1}

/* WIE EN WAT */
.lk-kop{text-align:center;margin-bottom:26px}
.lk-foto{width:106px;height:106px;object-fit:cover;border-radius:50%;
  border:5px solid var(--paper);box-shadow:0 14px 34px rgba(74,44,31,.24);margin:0 auto 15px}
.lk-kop h1{font-size:clamp(28px,7vw,36px);margin:0 0 3px;letter-spacing:-.03em}
.lk-sub{font-family:'Caveat',cursive;font-size:22px;font-weight:700;color:var(--purple);
  transform:rotate(-1.2deg);margin:0 0 14px}
.lk-bio{font-size:14.5px;line-height:1.65;color:var(--muted);font-weight:300;margin:0 0 14px}
.lk-taal{display:flex;flex-wrap:wrap;gap:5px 14px;justify-content:center;margin:0;
  padding-top:12px;border-top:2px dashed rgba(122,82,152,.28)}
.lk-taal span{font-family:'Caveat',cursive;font-size:19px;font-weight:700;color:var(--terracotta);
  white-space:nowrap}
.lk-taal span:nth-child(odd){transform:rotate(-1.6deg)}
.lk-taal span:nth-child(even){transform:rotate(1.3deg)}

/* DE DRIE DEUREN — hetzelfde trio als op de homepage. */
.lk-deuren{display:grid;gap:11px}
.lk-deur{display:flex;align-items:center;gap:15px;text-decoration:none;color:var(--ink);
  background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:13px;
  box-shadow:0 8px 24px rgba(74,44,31,.10);position:relative;
  transition:transform .28s cubic-bezier(.2,.75,.3,1), box-shadow .28s ease, border-color .28s ease}
.lk-deur::after{content:'→';position:absolute;right:16px;bottom:13px;font-size:17px;opacity:.3;
  transition:transform .28s cubic-bezier(.2,.75,.3,1), opacity .28s}
.lk-deur:hover{transform:translateY(-4px);border-color:var(--purple-pale);
  box-shadow:0 20px 42px rgba(74,44,31,.18)}
.lk-deur:hover::after{transform:translateX(4px);opacity:.7}
.lkd-beeld{width:78px;height:78px;border-radius:14px;overflow:hidden;flex:none;
  background:var(--rose-deep)}
.lkd-beeld img{width:100%;height:100%;object-fit:cover}
.lkd-tekst{display:block;padding-right:18px}
.lkd-titel{display:block;font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500}
.lkd-sub{display:block;font-size:12.5px;color:var(--muted);font-weight:300;line-height:1.5;
  margin-top:3px}

/* De meest gevraagde gratis tool: eigen plek, groen, met een pijltje. */
.lk-uitgelicht{display:block;text-decoration:none;color:var(--ink);position:relative;
  background:var(--green);border:1.5px solid var(--green-mid);border-radius:16px;
  padding:16px 20px;margin-top:20px;
  box-shadow:0 10px 26px rgba(138,174,106,.24);
  transition:transform .28s cubic-bezier(.2,.75,.3,1), box-shadow .28s ease}
.lk-uitgelicht:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(138,174,106,.34)}
.lku-label{display:block;font-family:'Caveat',cursive;font-size:18px;font-weight:700;
  color:var(--green-deep);transform:rotate(-1deg);margin-bottom:2px}
.lku-titel{display:block;font-family:'Fraunces',Georgia,serif;font-size:18px;font-weight:500;
  padding-right:44px}
.lku-doodle{position:absolute;right:14px;bottom:12px;line-height:0}
.lku-doodle svg{width:38px;height:27px;stroke:var(--terracotta);fill:none;stroke-width:2.4;
  stroke-linecap:round}

/* Kieshulp */
.lk-hoofd{display:block;text-decoration:none;background:var(--purple);color:#fff;
  border-radius:18px;padding:17px 24px;text-align:center;
  box-shadow:0 14px 34px rgba(122,82,152,.32);
  transition:transform .28s cubic-bezier(.2,.75,.3,1), box-shadow .28s ease}
.lk-hoofd:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(122,82,152,.44)}
.lk-hoofd-titel{display:block;font-family:'Fraunces',Georgia,serif;font-size:19px;font-weight:500}
.lk-hoofd-sub{display:block;font-size:12.5px;color:rgba(255,255,255,.72);margin-top:3px;font-weight:300}

/* De rest, klein. */
.lk-groep{margin-top:28px}
.lk-groep h2{font-family:'Caveat',cursive;font-size:24px;font-weight:700;color:var(--ink);
  transform:rotate(-.8deg);margin:0 0 11px;letter-spacing:0;padding-left:4px}
.lk{display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-decoration:none;color:var(--ink);
  background:rgba(255,253,248,.75);border:1px solid var(--line);border-radius:13px;
  padding:13px 17px;margin-bottom:8px;
  transition:transform .24s cubic-bezier(.2,.75,.3,1), background .24s ease}
.lk:hover{transform:translateX(4px);background:var(--paper)}
.lk-titel{font-size:14.5px;line-height:1.4;font-weight:600}
.lk-tag{font-family:'Mulish',sans-serif;font-size:11px;font-weight:700;letter-spacing:.05em;
  color:var(--muted);background:var(--cream);border:1px solid var(--line);
  border-radius:999px;padding:3px 9px;flex:none;white-space:nowrap}

.lk-doodle{font-family:'Caveat',cursive;color:var(--purple);font-weight:700;font-size:20px;
  transform:rotate(-1.4deg);margin:24px 0 10px;
  display:flex;align-items:flex-end;gap:8px;justify-content:center}
.lk-doodle svg{width:36px;height:32px;flex:none;stroke:var(--terracotta);fill:none;
  stroke-width:2.6;stroke-linecap:round}
.lk-slot{justify-content:center;margin:28px 0 0;color:var(--terracotta)}

.lk-voet{margin-top:32px;padding-top:18px;border-top:1px solid var(--rose-deep);text-align:center}
.lk-voet p{font-size:11.5px;line-height:1.7;color:rgba(42,29,25,.42);margin:0 0 4px}
.lk-voet a{color:rgba(42,29,25,.42)}

@media(prefers-reduced-motion:reduce){
  .lk,.lk:hover,.lk-hoofd,.lk-hoofd:hover,.lk-deur,.lk-deur:hover,
  .lk-uitgelicht,.lk-uitgelicht:hover{transform:none;transition:background .2s, box-shadow .2s}
  .lk-deur:hover::after{transform:none}
}




/* ============================================================
   HUISSTIJL "VONK" — kleuren, koppen, curves, doodles.
   Detail en uitleg: kennis/huisstijl.md
   Fuchsia regeert de grote vlakken en het handschrift, salie draagt
   de kleine speelse details. Goud is NOOIT tekst (haalt 2.68:1),
   alleen lijn en sieraad. Tekstkleuren zijn neutraal warm grijs:
   kleur zit in de omgeving, niet in de leestekst.
   ============================================================ */
.nav{background:var(--navbg,rgba(251,247,239,.93))}
.footer{background:var(--footbg,#1e1510)}
.lead,.story p,.review p,.funfacts p,.kidfacts p,.leestekst p{color:var(--ink2,#3a2a25)}
.bw-hero{background:linear-gradient(135deg,var(--ink) 0%,var(--gradpurple,#3d2058) 100%)}
.ht-hero{background:linear-gradient(135deg,var(--gradpurple,#3d2058) 0%,var(--purple) 100%)}
.btn-ink:hover{background:var(--ink2,#3d2a24)}
.health p,.health ul{color:var(--muted)}

/* Het volledige Vonk-palet, in een override-blok bovenop de basis. */
:root{
  --cream:#EDE8D6; --paper:#F8F5E9; --ink:#2A2622; --ink2:#3A342E; --muted:#565049;
  --rose:#DDE5DA; --rose-deep:#C3D3BE; --rose-mid:#9DB58F;
  --purple:#C9256E; --purple-light:#DB5490; --purple-pale:#DDE5DA;
  --green:#DDE5CF; --green-deep:#3F5A48; --green-mid:#9DB58F;
  --terracotta:#C9256E; --gold:#C9A227; --line:#DCD5BC;
  --navbg:rgba(237,232,214,.94); --footbg:#33422F; --gradpurple:#2F4438;
  --shadow:0 22px 60px rgba(50,55,35,.16);
  /* fuchsia-familie: gewoon, diep, bleek, rand */
  --fx:#C9256E; --fx-diep:#8E1149; --fx-bleek:#F7DFEA; --fx-rand:#E8A9C6;
  /* salie voor de speelse details */
  --salie:#4E6B5B; --salie-bleek:#DDE5DA; --salie-diep:#3F5A48;
  --kop:#B8CDB0;
}
.beweging{background:var(--fx)}
.teaser{background:var(--fx-bleek);border-color:var(--fx-rand)}
.btn-purple:hover{background:var(--fx-diep);border-color:var(--fx-diep)}
.bw-hero{background:var(--ink)}
.ht-hero{background:var(--fx-diep)}
/* de cijfers aan de draad blijven salie; bij hover springen ze naar fuchsia */
.draad-nr{background:var(--salie)}
.draadstap:hover .draad-nr{background:var(--fx)}
/* het prikbord houdt zijn groen */
.prik:nth-child(3n+2)::before{background:var(--salie)}
.prik:nth-child(7n+3){background:var(--salie-bleek)}
.chip:hover{border-color:var(--salie-diep);color:var(--salie-diep)}

/* ---- de schakelaar ---- */
@media(max-width:720px){}



/* ============================================================
   DE CURVE onder elke kop. Vroeger stond de kop op var(--rose) #F4D9E5
   (bleekroze); nu op --kop (salie) met per pagina een andere boog.
   De curve is één gebaar van 240px, geen willekeurige golfjes en geen
   symmetrische Wix-sinus: een boog met richting, meteen in beeld.
   ============================================================ */
.teaser{background:var(--salie-bleek);border-color:var(--rose-deep)}
.prik:nth-child(5n+2){background:#F4D9E5}

/* ---- DE CURVE — een boog van 240px, niet een helling van 110 ----
   Wix zet de divider-hoogte apart (--divider-height__): die hoogte IS
   het verschil tussen een gebaar en een schuine lijn. Een boog per
   pagina, elk een eigen richting, elk met EEN bocht. Geen S-en. */
.hero,
.pagehead,
.linkspagina{position:relative; overflow-x:hidden}
.ht-hero{position:relative; overflow:hidden; padding-bottom:270px}
/* Het kadertje rond conscious parenting wordt een echte header.
   BLIJFT DONKER: er staan zes regels in de basis-CSS die uitgaan van
   een donkere ondergrond (.ht-hero color:#fff, h2 wit, p op .7 wit,
   .ht-blok met witte randen). Dit blok pale maken betekent die zes
   allemaal narekenen. Diep fuchsia houdt ze alle zes kloppend —
   en het is wat Rebecca vroeg: conscious parenting in fuchsia. */
.ht-hero{
  border-radius:0; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-top:72px; padding-bottom:270px; background:var(--fx-diep,#8E1149);
  /* tekst uitlijnen met de content-kolom (1140px), niet met de schermrand */
  padding-left:max(28px,calc(50vw - 570px));
  padding-right:max(28px,calc(50vw - 570px));
}
.ht-hero > *{max-width:1140px}
.hero > .wrap,
.pagehead > .wrap{position:relative; z-index:2}
.hero::after,
.pagehead::after,
.linkspagina::after,
.ht-hero::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:240px;
  background:var(--cream); pointer-events:none; z-index:1;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,14%20%20C380,44%20800,168%201200,196%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,14%20%20C380,44%20800,168%201200,196%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat center/100% 100%;
}
html[data-pagina="index"] .hero::after,
html[data-pagina="index"] .pagehead::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,176%20C430,52%20780,14%201200,6%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,176%20C430,52%20780,14%201200,6%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}
html[data-pagina="9d"] .hero::after,
html[data-pagina="9d"] .pagehead::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,8%20%20%20C420,16%20770,58%201200,182%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,8%20%20%20C420,16%20770,58%201200,182%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}
html[data-pagina="over"] .hero::after,
html[data-pagina="over"] .pagehead::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,150%20C360,26%20840,22%201200,148%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,150%20C360,26%20840,22%201200,148%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}
html[data-pagina="winkeltje"] .hero::after,
html[data-pagina="winkeltje"] .pagehead::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,20%20%20C450,150%20800,190%201200,58%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,20%20%20C450,150%20800,190%201200,58%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}
.ht-hero::after{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,44%20C330,206%20870,206%201200,44%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E"); mask-image:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20240%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,240%20L0,44%20C330,206%20870,206%201200,44%20L1200,240%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E");
}


/* ============================================================
   DE KOP — groter, met de verluchte R en de naam in handschrift.
   Weg van de dunne 74px-balk met backdrop-blur: dat is precies
   de standaardkop die uit elke AI-bouwer rolt.
   ============================================================ */
.nav{position:sticky;top:0;z-index:40;background:var(--kop);
  backdrop-filter:none;border-bottom:0;box-shadow:0 1px 0 rgba(42,38,34,.06)}
.navin{height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.brand::before{content:'';width:58px;height:58px;flex:none;
  background:url('img/merk-r.png') center/contain no-repeat}
.brand-naam{display:flex;flex-direction:column;line-height:1}
.brand-naam b{font-family:'Caveat',cursive;font-size:35px;font-weight:600;
  color:var(--ink);letter-spacing:.01em;line-height:1}
.brand span{font-size:10.5px;color:var(--fx);font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;font-style:normal;font-family:'Mulish',sans-serif;margin-top:3px}
.menu{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600;letter-spacing:0}
.menu a{font-family:'Mulish',sans-serif;color:var(--ink2)}
.menu a:hover,.menu a.active{color:var(--fx)}

/* de kop en de hero zijn nu dezelfde kleur: de curve scheidt ze,
   geen streepje. Daardoor loopt het van boven naar beneden door. */
.hero,.pagehead{padding-top:56px}

/* ---- geen doos in een doos: het inktbeeld krijgt de lijnvorm ---- */
.ink{border-radius:0 0 0 0;box-shadow:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,14%20C30,2%2070,2%20100,12%20L100,128%20C68,140%2032,138%200,126%20Z'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20140'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,14%20C30,2%2070,2%20100,12%20L100,128%20C68,140%2032,138%200,126%20Z'%20fill='%23fff'/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* ============================================================
   DE BOTSING — .hero::after en .linkspagina::after waren AL bezet
   door een decoratieve cirkel (320x320, border-radius:50%).
   Mijn curve erop zetten liet width:320px en de ronding staan:
   de curve werd opgevouwen tot een blob in de hoek. Daarom leek
   het alsof er geen curves waren. Alles expliciet terugzetten.
   ============================================================ */
.hero::after,.pagehead::after,.ht-hero::after{
  position:absolute; left:0; right:0; top:auto; bottom:-1px;
  width:auto; height:240px; border-radius:0; opacity:1;
  background:var(--onder,var(--paper)); z-index:1; pointer-events:none;
}

/* ---- de kop krijgt een eigen kleur, anders is er geen banner ---- */
.nav{background:var(--paper);box-shadow:none;border-bottom:0}
.hero,.pagehead{background:var(--kop)}

/* ---- de R IS je eerste letter, dus geen losse R meer ernaast ---- */
.brand{gap:2px}
.brand::before{width:56px;height:56px;margin-right:-6px}
.brand-naam b{margin-left:-4px}
.brand-naam b{font-size:35px;text-transform:none}
.brand-naam > span{text-transform:uppercase}

/* bewust-ouderschap: het fuchsia blok IS de kop, geen crème strook ervoor */
.ht-kop{background:var(--fx-diep)}
.ht-kop .ht-hero{margin-top:0;padding-top:72px}

/* De kop wisselt van kleur per pagina; overal salie was eentonig.
   Alle vier houden de donkere tekst (>8:1) en fuchsia accent (>3:1). */
.hero,.pagehead{background:var(--kop)}
[data-pagina="index"]     .hero{background:#B8CDB0}   /* salie */
[data-pagina="9d"]        .hero{background:#CFDCC8}   /* bleeksalie */
[data-pagina="over"]      .hero{background:#EAD7DE}   /* roze-mist */
[data-pagina="winkeltje"] .pagehead,
[data-pagina="winkeltje"] .hero{background:#EADFC6}   /* goud-mist */
[data-pagina="rest"]      .pagehead{background:#CFDCC8}

/* Leesbaarheid: de lopende paragraaf was --muted (grijs) op weight 300.
   Dun + licht + gekleurde kop = te zwak. Donkerder en iets steviger.
   --ink2 op salie springt van 4.7 naar 7.3:1. */
.body{color:var(--ink2);font-weight:400}
.lead{font-weight:400}

/* Contact = tweede fuchsia pagina (staat niet naast bewust-ouderschap in het menu) */
[data-pagina="contact"] .pagehead{background:var(--fx-diep)}
[data-pagina="contact"] .pagehead h1{color:#fff}
[data-pagina="contact"] .pagehead .lead{color:rgba(255,255,255,.85)}
[data-pagina="contact"] .pagehead .eyebrow{color:#F4C6DC}

/* de witte vlek: decoratieve cirkels weg op de koppen (curve doet het werk) */
.hero::before,.pagehead::before,.linkspagina::before,.linkspagina::after{display:none}

/* ============================================================
   MOBIEL. Deze query MOET na de Vonk-regels hierboven staan:
   die zetten .menu op display:flex en zouden anders de bestaande
   mobiele query (max-width:920px) overschrijven, waardoor het
   menu op telefoon opengeklapt over de inhoud valt.
   ============================================================ */
@media(max-width:920px){
  /* menu weer dichtklappen; .menu.open zet hem open via de knop */
  .menu{display:none;position:absolute;left:18px;right:18px;top:84px;
    background:var(--paper);border:1px solid var(--line);border-radius:18px;
    padding:20px;box-shadow:var(--shadow);flex-direction:column;
    align-items:flex-start;gap:14px}
  .menu.open{display:flex}
  .mobile{display:inline-flex}

  /* de kop past niet op telefoonbreedte: R en naam kleiner */
  .navin{height:84px;gap:10px}
  .brand::before{width:42px;height:42px;margin-right:-4px}
  .brand-naam b{font-size:26px}
  .brand span{font-size:9px;letter-spacing:.1em}

  /* Het fuchsia blok blijft over de volle breedte lopen, ook op telefoon.
     Zonder dat loopt de curve niet door tot de rand terwijl .ht-kop
     eronder wel volledig fuchsia is: dan blijven er fuchsia pootjes
     links en rechts staan. */
  .ht-hero{padding-left:22px;padding-right:22px;padding-bottom:150px}
  .ht-hero::after{height:150px}
  .hero,.pagehead{padding-bottom:170px}
  .hero::after,.pagehead::after{height:150px}
}


/* ============================================================
   LINKS-PAGINA in dezelfde stijl als de site.
   Was: de hele body salie (mijn .linkspagina-regel), dus geen kop
   die zich onderscheidt en geen curve. Nu: perkament pagina met
   een salie kopband, het R-wordmerk en een boog eronder.
   ============================================================ */
.linkspagina{background:var(--cream)}
.linkspagina::after{display:none}          /* geen curve over de hele pagina */

/* de kolom heeft opvulling bovenaan; die zetten we hier uit, anders
   blijft er een strook pagina-achtergrond boven de kopband staan */
.linkspagina .linkswrap{padding-top:0}
.lk-kop{
  background:var(--kop); position:relative; overflow:hidden;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  margin-bottom:30px;
  padding:46px 20px 206px;
}
.lk-kop > *{max-width:520px;margin-left:auto;margin-right:auto;position:relative;z-index:2}
.lk-kop::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:190px;
  background:var(--cream); z-index:1; pointer-events:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20190%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,190%20L0,150%20C340,26%20820,22%201200,148%20L1200,190%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat center/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201200%20190%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M0,190%20L0,150%20C340,26%20820,22%201200,148%20L1200,190%20Z%22%20fill=%22%23fff%22/%3E%3C/svg%3E") no-repeat center/100% 100%;
}

/* het wordmerk: de verluchte R is de eerste letter, net als in de nav */
.lk-kop h1{display:flex;align-items:center;justify-content:center;gap:0;margin:0 0 2px}
.lk-r{width:50px;height:50px;flex:none;margin-right:-6px;
  background:url('img/merk-r.png') center/contain no-repeat}
.lk-naam{font-family:'Caveat',cursive;font-weight:600;color:var(--ink);
  font-size:clamp(30px,8vw,40px);line-height:1;margin-left:-3px;letter-spacing:.01em}

@media(max-width:920px){
  .lk-kop{padding-bottom:150px}
  .lk-kop::after{height:150px}
}