/* ============================================================================
   MaryJay test5 — site.css
   Laag boven starter.css. Gebruikt UITSLUITEND de tokens uit starter.css §1
   (geen nieuwe kleuren, lettertypen of afrondingen — zie CONTRIBUTING.md §2).
   Doel: de teksten/structuur van test4 renderen in het MaryJay-ontwerpsysteem.
   ========================================================================== */

/* ---- 0. basis-aanvullingen ------------------------------------------------ */
.wrap--wide{max-width:1400px}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.container--narrow{max-width:820px}
main{display:block;padding-top:var(--header-h)}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap{font-size:var(--fs-meta);color:var(--ink-soft);margin-top:var(--sp-3)}
mark.verify{background:var(--accent-soft);color:var(--ink);padding:1px 6px;border-radius:var(--r-sm);font-size:.9em}
a{color:var(--primary)}
.sec-head{max-width:62ch;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .eyebrow{margin-bottom:var(--sp-2)}
.sec-head h2+p{margin-top:var(--sp-3)}
.section__head{max-width:62ch;margin-bottom:clamp(28px,4vw,48px)}
.section--tight{padding-block:clamp(40px,6vw,72px)}
.tag{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500;
  color:var(--primary);background:var(--primary-tint);border-radius:var(--r-pill);padding:4px 12px;align-self:flex-start}
.tag--soon,.tag.soon{color:var(--ink-soft);background:var(--ground-2);border:1px solid var(--line)}
.more{font-size:var(--fs-meta);font-weight:500;color:var(--primary);margin-top:auto}

/* ---- 1. header met 10 menu-items (zonder Home) --------------------------- */
.site-header .wrap{gap:clamp(12px,1.6vw,28px)}
.brand{flex:none}
.brand__sub{display:none}
@media (min-width:1560px){.brand__sub{display:inline}}
.main-nav{flex:1 1 auto;justify-content:flex-end;gap:0}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:clamp(12px,1.25vw,24px)}
.main-nav ul a{font-size:.86rem;white-space:nowrap;text-decoration:none;color:var(--ink);padding:8px 0}
.main-nav .has-mega{position:relative;display:flex;align-items:center;gap:2px}
.menu-btn{background:none;border:0;color:var(--ink-soft);cursor:pointer;padding:6px 4px;line-height:1;font-size:.8rem}
.menu-btn svg{width:14px;height:14px;transition:transform var(--dur) var(--ease-out)}
.has-mega.is-open .menu-btn svg{transform:rotate(180deg)}
.mega{display:none;position:absolute;top:calc(100% + 14px);left:-24px;z-index:110;width:max-content;max-width:min(720px,92vw);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md);padding:26px 30px}
.has-mega.is-open .mega{display:block}
@media (hover:hover) and (min-width:1241px){.has-mega:hover .mega{display:block}}
.mega__cols{display:grid;grid-template-columns:repeat(3,minmax(170px,1fr));gap:28px}
.mega h3{font-size:1.15rem;margin-bottom:10px;color:var(--primary-d)}
.mega ul{display:block}
.mega li{margin:0}
.mega ul a{display:block;padding:6px 0;font-size:.9rem;white-space:normal;color:var(--ink)}
.mega ul a small{display:block;color:var(--ink-soft);font-size:.78rem}
.mega ul a:hover{color:var(--primary)}
.mega__all{display:inline-block;margin-top:18px;padding-top:14px;border-top:1px solid var(--line);font-weight:500;font-size:.9rem;width:100%}
/* "Afspraak maken" is een gewone menulink (zelfde stijl als de rest), alleen vetgedrukt */
.main-nav li.nav-cta a{font-weight:600}

@media (max-width:1240px){
  .main-nav{position:fixed;inset:0 0 0 auto;width:min(88vw,380px);background:var(--ground);flex-direction:column;align-items:stretch;
    justify-content:flex-start;padding:calc(var(--header-h) + 20px) 26px 40px;transform:translateX(100%);
    transition:transform var(--dur-slow) var(--ease-out);box-shadow:var(--shadow-md);overflow-y:auto;z-index:99}
  .main-nav.is-open{transform:none}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .main-nav ul>li>a{font-family:var(--font-display);font-size:1.3rem;padding:13px 0;border-bottom:1px solid var(--line);display:block}
  .main-nav .has-mega{flex-wrap:wrap}
  .main-nav .has-mega>a{flex:1}
  .menu-btn{padding:12px}
  .mega{position:static;display:none;width:100%;max-width:none;border:0;box-shadow:none;padding:6px 0 14px 12px;background:transparent}
  .mega__cols{grid-template-columns:1fr;gap:6px}
  .mega h3{font-size:1rem;margin:10px 0 2px}
  .has-mega{flex-direction:row}
  .has-mega .mega{flex-basis:100%}
  .nav-toggle{display:inline-flex}
}
.nav-scrim{position:fixed;inset:0;background:rgba(24,49,41,.35);z-index:98;opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease-out)}
.nav-scrim.is-open{opacity:1;visibility:visible}

/* ---- 2. hero (home + pagina-hero) ----------------------------------------- */
.hero{padding-block:clamp(40px,6vw,88px) clamp(48px,6vw,96px)}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,80px);align-items:center}
.hero__copy h1{margin:var(--sp-3) 0}
.hero__copy h1 em{font-style:italic;color:var(--primary)}
.hero__lead{max-width:54ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:var(--sp-4)}
.hero__trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:var(--sp-4);padding:0;list-style:none;font-size:var(--fs-meta);color:var(--ink-soft)}
.hero__trust li{display:inline-flex;align-items:center;gap:8px}
.hero__trust li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.badge-lime{display:inline-block;font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;font-weight:500;
  background:var(--accent);color:var(--on-accent);padding:6px 14px;border-radius:var(--r-pill);margin-bottom:var(--sp-2)}
.hero__media{position:relative}
.photo-slot{aspect-ratio:4/5;border-radius:var(--r-md);background:var(--primary-tint);border:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;
  color:var(--ink-soft);box-shadow:var(--shadow-md);overflow:hidden;position:relative}
.photo-slot svg{width:34px;height:34px;color:var(--primary);opacity:.7}
.photo-slot small{font-size:.8rem;letter-spacing:.04em}
.photo-slot strong{font-family:var(--font-display);font-weight:500;font-size:1.35rem;color:var(--primary-d)}
.hero__badge{position:absolute;left:clamp(-24px,-2vw,-12px);bottom:clamp(20px,4vw,40px);display:flex;gap:14px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 20px;box-shadow:var(--shadow-sm);max-width:290px}
.hero__badge .num{font-family:var(--font-display);font-size:1.9rem;color:var(--primary);line-height:1}
.hero__badge .cap{margin:0;font-size:.82rem;line-height:1.35}
.hero--page{padding-block:clamp(36px,5vw,72px) clamp(32px,4vw,56px);background:var(--ground-2);border-bottom:1px solid var(--line)}
.hero--page h1{font-size:var(--fs-h2);max-width:24ch;margin:var(--sp-2) 0 var(--sp-3)}
.hero--page .lead{max-width:56ch}
.breadcrumb{margin-bottom:var(--sp-3)}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;font-size:var(--fs-meta);color:var(--ink-soft)}
.breadcrumb li+li::before{content:"›";margin-right:8px;color:var(--accent)}
.breadcrumb a{color:var(--ink-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--primary)}
@media (max-width:1024px){.hero__grid{grid-template-columns:1fr}.hero__media{max-width:520px}.hero__badge{left:12px}}

/* ---- 3. vertrouwensstrook + logo-tegels ----------------------------------- */
.trust{border-block:1px solid var(--line);background:var(--surface)}
.trust .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;padding-block:22px}
.trust ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:14px 36px}
.trust li{display:flex;align-items:center;gap:12px;font-size:.9rem;line-height:1.3;color:var(--ink-soft)}
.trust li b{display:block;font-weight:500;color:var(--primary-d)}
.trust li i{font-style:normal;width:34px;height:34px;border-radius:50%;background:var(--primary-tint);color:var(--primary);display:grid;place-items:center;font-size:.95rem}
.affil-strip{display:flex;align-items:center;gap:12px}
.affil-strip small{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:var(--ink-soft)}
.tile{display:inline-flex;align-items:center;justify-content:center;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 14px;text-decoration:none;transition:box-shadow var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.tile:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}
.tile img{width:auto;max-width:100%;object-fit:contain}
.tile.sm img{height:38px}
.tile.xs img{height:30px}
.tile.md{padding:14px 22px;margin-bottom:var(--sp-3)}
.tile.md img{height:64px}
.logos-inline{display:flex;gap:10px;flex-wrap:wrap;margin:var(--sp-3) 0}

/* ---- 4. over ons / feiten --------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.split--wide-left{grid-template-columns:1.25fr .75fr}
.about .split,.split.about{grid-template-columns:1.1fr .9fr}
.about p{margin-top:var(--sp-2);max-width:62ch}
.about p.lead{max-width:56ch}
.about .btn{margin:var(--sp-2) 10px 0 0}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.facts li{padding:24px 4px;border-bottom:1px solid var(--line)}
.facts b{display:block;font-family:var(--font-display);font-weight:500;font-size:1.45rem;line-height:1.2;color:var(--primary-d)}
.facts span{display:block;margin-top:6px;color:var(--ink-soft)}
@media (max-width:900px){.split,.split--wide-left,.about .split,.split.about{grid-template-columns:1fr}}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--primary);background:var(--primary-tint)}
.btn--secondary{background:transparent;color:var(--primary);border-color:var(--line)}
.btn--secondary:hover{border-color:var(--primary);background:var(--primary-tint)}
.btn--clinical{background:var(--action);color:var(--on-action)}
.btn--clinical:hover{background:var(--action-hover);color:var(--on-action);transform:translateY(-1px)}
.btn--sm{min-height:42px;padding:0 20px;font-size:.88rem}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-2)}
.btn-primary{background:var(--action);color:var(--on-action)}
.btn-primary:hover{background:var(--action-hover);color:var(--on-action)}

/* ---- 5. behandelingen (groepen + kaarten) ---------------------------------- */
.group+.group{margin-top:clamp(40px,5vw,64px)}
.group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 20px;margin-bottom:var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line)}
.group-head h3{font-size:var(--fs-h3);color:var(--primary-d)}
.group-head p{color:var(--ink-soft);margin:0}
.pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media (max-width:900px){.pgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.pgrid{grid-template-columns:1fr}}
.pcard{display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 14px 22px;text-decoration:none;color:var(--ink);position:relative;
  transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.pcard .code{position:absolute;top:26px;left:26px;z-index:1;font-size:.68rem;letter-spacing:.14em;background:var(--surface);color:var(--primary);padding:3px 10px;border-radius:var(--r-pill);font-weight:500}
.pimg{aspect-ratio:4/3;border-radius:var(--r-sm);background:var(--primary-tint);display:grid;place-items:center;color:var(--ink-soft);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase}
.pcard h3{font-size:1.4rem;padding:0 8px;color:var(--primary-d)}
.pcard .meta{display:flex;justify-content:space-between;padding:0 8px;margin-top:auto;font-size:var(--fs-meta);color:var(--ink-soft)}
.pcard .meta span:last-child{color:var(--primary);font-weight:500}

/* ---- 6. tarieven ------------------------------------------------------------- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;align-items:start}
.card{padding:clamp(22px,2.4vw,32px)}
.card:hover{transform:none;box-shadow:var(--shadow-sm);border-color:var(--line)}
a.card:hover,.cards a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.card h3{color:var(--primary-d);margin-bottom:var(--sp-2)}
.card p{color:var(--ink-soft)}
.card p+p{margin-top:var(--sp-1)}
a.card{text-decoration:none;color:var(--ink)}
.card .price-list{margin:0}
.card .price-list li{gap:16px;padding:16px 2px;align-items:baseline}
.card .price-list li:first-child{padding-top:6px}
.card .price-list li:last-child{border-bottom:0}
.pl-name{flex:1;font-size:.98rem}
.pl-name a{color:var(--ink);text-decoration:none}
.pl-name a:hover{color:var(--primary)}
.pl-desc{display:block;color:var(--ink-soft);font-size:.88rem}
.pl-price{font-family:var(--font-display);font-size:1.15rem;color:var(--primary);white-space:nowrap}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:22px}
.cards .card{gap:10px}
.cards .card h3{font-size:1.4rem;margin:2px 0 0}
.alt{background:var(--ground-2)}
@media (max-width:1024px){.price-grid{grid-template-columns:1fr}}

/* ---- 7. afspraak (invert-grond) ------------------------------------------- */
.appt{width:calc(100% - 2*clamp(20px,5vw,40px));max-width:calc(var(--container) - 2*clamp(20px,5vw,40px));display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,72px);align-items:start;
  background:var(--invert);color:var(--on-invert);border-radius:var(--r-md);padding:clamp(28px,5vw,64px);box-shadow:var(--shadow-md)}
.appt .eyebrow{color:var(--accent-soft)}
.appt h2{color:var(--on-invert)}
.appt .lead{color:rgba(255,255,255,.82);margin-top:var(--sp-2)}
.appt a{color:var(--on-invert)}
.loc-pick{display:grid;gap:12px;margin:var(--sp-3) 0}
.loc{display:flex;align-items:center;gap:14px;padding:16px 20px;border:1px solid rgba(255,255,255,.28);border-radius:var(--r-md);
  transition:background var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.loc:hover{background:rgba(255,255,255,.08);border-color:var(--accent)}
.loc b{display:block;font-weight:500;font-size:1.05rem}
.loc small{color:rgba(255,255,255,.76);font-size:.86rem}
.appt .btn--primary,.appt .btn--lime{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.appt .btn--primary:hover{background:var(--surface);color:var(--primary)}
.appt .btn--ghost{color:var(--on-invert);border-color:rgba(255,255,255,.4)}
.appt .btn--ghost:hover{background:rgba(255,255,255,.1);border-color:var(--on-invert)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.appt .cap{color:rgba(255,255,255,.76)}
.prep{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-md);padding:clamp(22px,3vw,34px)}
.prep h3{color:var(--on-invert);margin-bottom:var(--sp-2)}
.prep ul{margin:0;padding-left:20px;display:grid;gap:10px;color:rgba(255,255,255,.88)}
@media (max-width:900px){.appt{grid-template-columns:1fr}}

/* ---- 8. aangesloten bij ------------------------------------------------------ */
.affil{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.src{font-size:.82rem;color:var(--ink-soft);margin-top:var(--sp-2)}
.mean{margin-top:var(--sp-5);padding:clamp(22px,3vw,36px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.mean ul{margin:var(--sp-2) 0 0;padding-left:20px;display:grid;gap:8px;color:var(--ink-soft)}
@media (max-width:900px){.affil{grid-template-columns:1fr}}

/* ---- 9. galerij-teaser + voor/na-schuif ------------------------------------- */
.ba-wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.three{display:flex;flex-wrap:wrap;gap:8px;margin:var(--sp-3) 0}
.three span{font-size:.82rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 14px;color:var(--primary-d)}
.ba-card{margin:0}
.ba{position:relative;aspect-ratio:4/3;border-radius:var(--r-md);overflow:hidden;background:var(--primary-tint);border:1px solid var(--line);--pos:50%;box-shadow:var(--shadow-sm)}
.ba .layer{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:var(--ink-soft);font-size:.82rem;letter-spacing:.06em}
.ba .layer.before{background:var(--ground-2)}
.ba .layer.after{background:var(--primary-tint);clip-path:inset(0 0 0 var(--pos))}
.ba .lbl{position:absolute;top:12px;font-size:.68rem;text-transform:uppercase;letter-spacing:.14em;background:var(--surface);color:var(--primary);padding:4px 12px;border-radius:var(--r-pill);font-weight:500}
.ba .l1{left:12px}.ba .l2{right:12px}
.ba .handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:var(--surface);transform:translateX(-1px);box-shadow:0 0 0 1px rgba(24,49,41,.12)}
.ba .handle::after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--surface);color:var(--primary);display:grid;place-items:center;box-shadow:var(--shadow-sm);font-size:1rem}
.ba__range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba-card figcaption{font-size:var(--fs-meta);color:var(--ink-soft);margin-top:var(--sp-2)}
@media (max-width:900px){.ba-wrap{grid-template-columns:1fr}}

/* ---- 10. FAQ + CTA -------------------------------------------------------------- */
.faq{display:grid;gap:12px;max-width:860px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color var(--dur) var(--ease-out)}
.faq details[open]{border-color:var(--primary)}
.faq summary{cursor:pointer;list-style:none;padding:20px 56px 20px 24px;font-family:var(--font-display);font-size:1.3rem;font-weight:500;color:var(--primary-d);position:relative;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);font-family:var(--font-body);font-size:1.5rem;font-weight:300;color:var(--primary)}
.faq details[open] summary::after{content:"–"}
.faq__a{padding:0 24px 22px;color:var(--ink-soft)}
.cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px;background:var(--invert);color:var(--on-invert);border-radius:var(--r-md);padding:clamp(28px,5vw,56px)}
.cta h2{color:var(--on-invert);margin:0}
.cta .btn{background:var(--accent);color:var(--on-accent)}
.cta .btn:hover{background:var(--surface);color:var(--primary)}

/* ---- 11. contact-kaarten, locaties, kaarten ------------------------------------ */
.grid{display:grid;gap:22px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--2,.grid--3{grid-template-columns:1fr}}
.location-card address{font-style:normal;margin:var(--sp-1) 0 var(--sp-2);line-height:1.6}
.hours{width:100%;border-collapse:collapse;margin:var(--sp-2) 0;border-top:1px solid var(--line)}
.hours td{padding:11px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
.hours td:last-child{text-align:right;color:var(--ink-soft);font-variant-numeric:tabular-nums}
.maps-sec{background:var(--ground-2)}
.maps{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.map{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.map__frame{position:relative;aspect-ratio:4/3;background:var(--primary-tint)}
.map__frame svg,.map__frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map .info{display:flex;flex-wrap:wrap;gap:12px 20px;justify-content:space-between;align-items:center;padding:20px 24px}
.map .info h3{font-size:1.4rem}
.map address{font-style:normal;color:var(--ink-soft);font-size:.92rem;margin-top:4px}
.map .open{font-weight:500;text-decoration:none;font-size:.92rem;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;color:var(--primary)}
.map .open:hover{background:var(--primary-tint);border-color:var(--primary)}
@media (max-width:900px){.maps{grid-template-columns:1fr}}

/* ---- 12. afspraak-pagina: keuzes, kaders, stappen ----------------------------- */
.split--wide-left h2{margin:var(--sp-5) 0 var(--sp-2)}
.split--wide-left>div>h2:first-child{margin-top:0}
.eyebrow+h1,.eyebrow+h2{margin-top:var(--sp-2)}
.about h2{margin-bottom:var(--sp-3)}
fieldset{border:0;padding:0;margin:0 0 var(--sp-3);display:grid;gap:12px}
.choice{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:18px 20px;cursor:pointer;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.choice:hover{border-color:var(--ink-soft)}
.choice:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 3px var(--focus-ring)}
.choice input{margin-top:5px;accent-color:var(--primary)}
.card--clinical{background:var(--primary-tint);border-color:transparent}
.card--clinical ul{margin:0;padding-left:20px;display:grid;gap:10px;color:var(--ink-soft)}
.step-card{display:flex;gap:16px}
.callout{border-left:3px solid var(--accent);background:var(--surface);border-radius:var(--r-sm);padding:18px 22px;margin:var(--sp-3) 0}
.callout--alert{border-left-color:var(--danger);background:var(--danger-bg)}
.callout__title{font-weight:500;color:var(--primary-d);margin-bottom:4px}

/* ---- 13. formulier-aanvullingen (Analyse-, Behandel- en Adviesplan) ------------ */
.dossier{max-width:1000px;margin-inline:auto}
.dossier .form{box-shadow:var(--shadow-md);padding:clamp(26px,4vw,48px)}
.form-section{margin-bottom:clamp(36px,5vw,52px)}
.form-section:last-of-type{margin-bottom:var(--sp-4)}
.form-section>h3{margin:0 0 var(--sp-3);padding-bottom:var(--sp-2);border-bottom:1px solid var(--line);color:var(--primary-d)}
.form-section h4{font-size:1rem;color:var(--primary-d);margin:0 0 var(--sp-2)}
.form__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:0 24px}
.medical-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,40px);background:var(--ground-2);padding:clamp(18px,3vw,28px);border-radius:var(--r-md);margin-bottom:var(--sp-3)}
.check-group{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.check-group--grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px}
.field>.check-label,.check-label{display:flex;align-items:flex-start;gap:10px;font-size:.95rem;font-weight:300;cursor:pointer;letter-spacing:0}
.check-label input{margin-top:3px;width:auto;accent-color:var(--primary);flex:none}
.field .grp-label{font-size:var(--fs-meta);font-weight:500;letter-spacing:.02em;color:var(--primary-d)}
.field select{appearance:auto}
.form__status{margin-top:var(--sp-3);padding:14px 18px;border-radius:var(--r-sm);background:var(--primary-tint);color:var(--primary-d);font-size:.95rem}
.form__status[hidden]{display:none}
@media (max-width:760px){.medical-grid,.check-group--grid{grid-template-columns:1fr}}

/* ---- 14. footer (invert-deep) ---------------------------------------------------- */
.site-footer{background:var(--invert-deep);color:var(--on-invert);padding-block:clamp(48px,6vw,80px) 28px}
.site-footer h2{font-size:1.05rem;font-family:var(--font-body);font-weight:500;text-transform:uppercase;letter-spacing:.16em;color:var(--on-invert);margin-bottom:14px}
.site-footer p,.site-footer li{color:rgba(255,255,255,.82);font-size:.94rem}
.site-footer a{color:rgba(255,255,255,.82);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.3)}
.site-footer a:hover{color:var(--on-invert);text-decoration-color:var(--on-invert)}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer p+p{margin-top:12px}
.site-footer .muted{color:rgba(255,255,255,.66)}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.footer__brand{font-family:var(--font-display)!important;text-transform:none!important;letter-spacing:.01em!important;font-size:1.5rem!important;line-height:1.2}
.site-footer .tile{background:#fff}
.footer-disclaimer{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid rgba(255,255,255,.16);font-size:.84rem!important;color:rgba(255,255,255,.7)!important;max-width:100ch}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;margin-top:var(--sp-3);font-size:.82rem;color:rgba(255,255,255,.66)}
@media (max-width:1024px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (max-width:720px){.footer__grid{grid-template-columns:1fr}}

/* ---- 15. mobiele vaste actiebalk ---------------------------------------------------- */
.sticky{display:none}
@media (max-width:720px){
  .sticky{display:grid;grid-template-columns:1fr auto;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:95;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:var(--header-bg-strong);backdrop-filter:blur(12px);border-top:1px solid var(--line)}
  .sticky .btn{min-height:46px}
  .to-top{bottom:78px}
  body{padding-bottom:70px}
}

/* ---- 16. preview-only (wordt niet in de ZIP opgenomen) -------------------------------- */
.pv-note{position:fixed;left:50%;bottom:20px;transform:translate(-50%,20px);z-index:300;background:var(--invert-deep);color:var(--on-invert);
  padding:12px 20px;border-radius:var(--r-pill);font-size:.9rem;opacity:0;visibility:hidden;transition:all var(--dur) var(--ease-out);max-width:92vw;text-align:center}
.pv-note.is-on{opacity:1;visibility:visible;transform:translate(-50%,0)}
[data-view]{display:none}
[data-view].is-current{display:block}

/* ---- 17. aanvullingen na eerste render ------------------------------------------------ */
.btn--lime{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn--lime:hover{background:var(--surface);color:var(--primary)}
.field input[type=checkbox],.field input[type=radio]{padding:0;border:0;background:none;box-shadow:none;width:18px;height:18px;min-height:0;flex:none;appearance:auto}
.hero__badge--top{left:auto;right:clamp(-24px,-2vw,-12px);top:clamp(20px,4vw,40px);bottom:auto}
.hero__badge .ico{width:26px;height:26px;color:var(--primary)}
.brand__mark{white-space:nowrap}
@media (max-width:1024px){.hero__badge--top{right:12px}}

/* ---- 18. afspraak-pagina: ritme ---------------------------------------------------- */
.split--wide-left h2{font-size:clamp(1.55rem,1.2vw + 1.1rem,2.05rem);line-height:1.15}
.split--wide-left p{max-width:62ch}
.split--wide-left p+.btn,.split--wide-left .card p+.btn{margin-top:var(--sp-2)}
.card .btn{align-self:flex-start;margin-top:var(--sp-2)}
.card--clinical h3,.split--wide-left aside h3{font-size:1.4rem}

/* ---- 19. header-glas via pseudo-element -------------------------------------------------
   backdrop-filter op de header zelf maakt van de header het containing block voor
   position:fixed-kinderen, waardoor het mobiele menu tot 66px werd afgekapt. */
.site-header,.site-header.is-scrolled{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--header-bg);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px);
  transition:background var(--dur) var(--ease-out)}
.site-header.is-scrolled::before{background:var(--header-bg-strong)}

.header-actions{position:relative;z-index:101}
.nav-toggle .ico-close{display:none}
.nav-toggle[aria-expanded="true"] .ico-close{display:block}
.nav-toggle[aria-expanded="true"] .ico:not(.ico-close){display:none}

/* ---- 20. LICHT palet (referentie: Analyse-, Behandel- en Adviesplan) -----------------------
   Grote vlakken zijn licht (ground / ground-2 / primary-tint / surface). Diep groen
   (--primary) is alleen nog voor tekst, knoppen en accenten. */
.appt{background:var(--primary-tint);color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.appt .eyebrow{color:var(--primary)}
.appt h2,.prep h3{color:var(--primary-d)}
.appt .lead{color:var(--ink-soft)}
.appt a{color:var(--primary)}
.loc{background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.loc:hover{border-color:var(--primary);background:var(--surface)}
.loc small,.appt .cap{color:var(--ink-soft)}
.appt .btn--primary,.appt .btn--lime{background:var(--action);color:var(--on-action);border-color:var(--action)}
.appt .btn--primary:hover{background:var(--action-hover);color:var(--on-action)}
.appt .btn--ghost{color:var(--primary);border-color:var(--line);background:var(--surface)}
.appt .btn--ghost:hover{border-color:var(--primary);background:var(--primary-tint)}
.prep{background:var(--surface);border:1px solid var(--line)}
.prep ul{color:var(--ink-soft)}
.cta{background:var(--primary-tint);color:var(--ink);border:1px solid var(--line)}
.cta h2{color:var(--primary-d)}
.cta .btn{background:var(--action);color:var(--on-action)}
.cta .btn:hover{background:var(--action-hover);color:var(--on-action)}
.site-footer{background:var(--ground-2);color:var(--ink);border-top:1px solid var(--line)}
.site-footer h2{color:var(--primary)}
.footer__brand{color:var(--primary-d)!important}
.site-footer p,.site-footer li{color:var(--ink-soft)}
.site-footer a{color:var(--primary);text-decoration-color:var(--line)}
.site-footer a:hover{color:var(--primary-d);text-decoration-color:var(--primary)}
.site-footer .muted,.legal{color:var(--ink-soft)}
.footer-disclaimer{border-top:1px solid var(--line);color:var(--ink-soft)!important}
.site-footer .tile{background:var(--surface)}
.nav-scrim{background:rgba(24,49,41,.18)}
.badge-lime{background:var(--accent-soft);color:var(--primary-d)}

/* ---- 21. Hero-achtergrond: crossfade body-profile / hand-on-knee --------------------------
   Beweging 1:1 overgenomen uit gemini-code-1791839310995.html (16s, cubic-bezier(.45,0,.25,1),
   Ken Burns-schaal 1 -> 1.035 -> 1.05). Alleen de achtergrondlagen; geen overlay, tekst of voortgangsbalk.
   De foto's komen uit img/; zolang die ontbreken tonen de lichte kleurvlakken eronder. */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.crossfade-layer{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;will-change:opacity,transform}
.layer-1{background-image:url('../img/body-profile-4k.webp'),radial-gradient(circle at 72% 38%,rgba(255,255,255,.75),transparent 46%),linear-gradient(135deg,var(--ground-2),var(--primary-tint));
  animation:crossfadeCycle1 16s cubic-bezier(.45,0,.25,1) infinite}
.layer-2{background-image:url('../img/hand-on-knee-4k.webp'),radial-gradient(circle at 28% 62%,rgba(255,255,255,.75),transparent 46%),linear-gradient(135deg,var(--accent-soft),var(--ground-2));
  animation:crossfadeCycle2 16s cubic-bezier(.45,0,.25,1) infinite}
@keyframes crossfadeCycle1{0%{opacity:1;transform:scale(1)}42%{opacity:1;transform:scale(1.035)}50%{opacity:0;transform:scale(1.05)}92%{opacity:0;transform:scale(1)}100%{opacity:1;transform:scale(1)}}
@keyframes crossfadeCycle2{0%{opacity:0;transform:scale(1.05)}42%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1)}92%{opacity:1;transform:scale(1.035)}100%{opacity:0;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.crossfade-layer{animation:none!important}.layer-2{display:none}}

/* ---- 22. hero: foto-plaatshouder verwijderd; de twee chips staan nu los onderaan rechts ---- */
.hero__media{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;gap:14px;align-self:end}
.hero__badge,.hero__badge--top{position:static;left:auto;right:auto;top:auto;bottom:auto;width:min(100%,320px);max-width:none}
@media (max-width:1024px){.hero__media{align-items:flex-start;max-width:none}}

/* ---- 23. Eerste scherm past precies in het venster ------------------------------------------
   De hero vult het zichtbare scherm (venster minus vaste header, op mobiel ook minus de vaste
   actiebalk) en eindigt dus onderaan het scherm; de vertrouwensstrook is het volgende blok.
   min-height i.p.v. height: bij extreem lage schermen groeit de hero mee i.p.v. tekst af te knippen. */
.hero:not(.hero--page){
  min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));
  display:flex;align-items:center;padding-block:clamp(24px,5vh,88px)}
.hero:not(.hero--page)>.wrap{width:100%}
.hero__copy h1{font-size:clamp(2.2rem,min(4.4vw + 1rem,9.5vh),4.6rem)}
.hero__lead{font-size:clamp(1rem,min(.5vw + .95rem,2.4vh + .45rem),1.375rem)}
@media (max-width:1024px){.hero__grid{gap:clamp(16px,3vh,32px)}}
@media (max-width:720px){
  .hero:not(.hero--page){min-height:calc(100vh - var(--header-h) - 70px);min-height:calc(100svh - var(--header-h) - 70px)}
  .hero__media{flex-direction:row;flex-wrap:wrap;align-items:stretch;gap:10px}
  .hero__badge,.hero__badge--top{flex:1 1 150px;width:auto;padding:10px 14px;gap:10px}
  .hero__badge .cap{display:none}
  .hero__cta{margin-top:var(--sp-3)}
}
@media (max-height:700px){
  .hero__media,.badge-lime{display:none}
  .hero__copy h1{margin:var(--sp-2) 0}
  .hero__cta{margin-top:var(--sp-2)}
}

/* ============================================================================
   24. SCHERMKADER — elke pagina is één scherm breed en minstens één scherm hoog
   Menubalk blijft bovenaan staan (sticky), de slanke voetbalk blijft onderaan staan (sticky);
   ertussen scrolt de pagina NATIEF (muis, touch, toetsenbord werken in elke browser).
   De landingspagina vult precies één scherm (hero + strookje onderaan) en scrolt dus niet.
   Elke pagina is een eigen weergave: er loopt nooit een pagina in een volgende over.
   ========================================================================== */
html{font-size:clamp(16px,.5vw + 8px,26px);scroll-padding-top:var(--header-h)}   /* tv/4K: alles schaalt mee */
:root{--header-h:4.75rem;--container:75rem}
@media (max-width:720px){:root{--header-h:4.125rem}}
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
body{padding-bottom:0}                      /* geen ruimte meer voor de verwijderde vaste mobiele balk */
.site-header{position:sticky;inset:auto;top:0;height:var(--header-h);flex:none;z-index:100;border-bottom:1px solid var(--line)}
.site-header,.site-header.is-scrolled{box-shadow:none}
.site-header::before{background:var(--header-bg-strong)}
.to-top,.sticky{display:none!important}
.scroll-progress{z-index:3}   /* voortgangslijn onder de menubalk */
main.stage{padding-top:0;flex:1 0 auto;display:flex;flex-direction:column;min-width:0}
[data-view]{display:none}
[data-view].is-current{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}
.pg__body{flex:1 0 auto;min-width:0;position:relative}
.foot-slim{position:sticky;bottom:0;z-index:50;flex:none;display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 24px;
  padding:.65rem clamp(20px,5vw,40px);background:var(--ground-2);border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-soft)}
.foot-slim a{color:var(--primary)}
@media (max-width:720px),(max-height:600px){.foot-slim{position:static}}

/* landing: hero vult het scherm onder de menubalk, strookje staat onderaan het scherm */
.pg--home .pg__body{display:flex;flex-direction:column}
.pg--home .hero:not(.hero--page){flex:1 0 auto;display:flex;align-items:center;padding-block:clamp(16px,4vh,72px);min-height:0}
.pg--home .hero:not(.hero--page)>.wrap{width:100%}
.pg--home .trust{flex:none;border-top:1px solid var(--line);border-bottom:0}
.pg--home .trust .wrap{padding-block:clamp(10px,1.6vh,22px);max-width:var(--container)}
.hero__copy h1{font-size:clamp(2rem,min(4.4vw + 1rem,9vh),4.6rem)}
@media (max-width:720px){
  .pg--home .trust .wrap{gap:10px 16px;padding-block:10px}
  .pg--home .trust ul{gap:6px 14px}
  .pg--home .trust li{font-size:0;gap:8px}                 /* toelichting verborgen, kop blijft */
  .pg--home .trust li b{font-size:.78rem}
  .pg--home .trust li i{width:26px;height:26px;font-size:.8rem}
  .pg--home .affil-strip small{display:none}
  .pg--home .tile.sm img{height:28px}
  .hero__media{display:none}
  .pg--home .hero:not(.hero--page){padding-block:12px}
  .hero__lead{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
}
@media (max-height:700px){
  .badge-lime,.hero__media,.hero__lead{display:none}
  .pg--home .trust li{font-size:0}.pg--home .trust li b{font-size:.75rem}
  .pg--home .trust li i{display:none}
}
@media (max-width:1024px) and (max-height:820px){.hero__media{display:none}}
.pg__body .hero--page{padding-block:clamp(20px,3vh,48px)}

/* ---- 25. contactpagina ------------------------------------------------------------------------ */
.praktijk-info{max-width:100ch;display:grid;gap:10px;font-size:.88rem}
.maps-sec{padding-block:clamp(32px,5vw,64px)}

/* ============================================================================
   26. LANDING = scrollende reeks schermen
   Elk blok is minstens één schermhoogte onder de menubalk en eindigt onderaan het scherm;
   past de inhoud niet (kleine telefoon), dan groeit het blok mee en scrolt de pagina gewoon door.
   Zachte uitlijning (proximity) laat blokken netjes onder de menubalk landen zonder te "vangen".
   ========================================================================== */
html:has([data-view=home].is-current){scroll-snap-type:y proximity}
.pg--home .screen{min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));scroll-snap-align:start;scroll-margin-top:var(--header-h)}
.pg--home section.screen{display:flex;flex-direction:column;justify-content:center;padding-block:clamp(20px,4.5vh,64px)}
.pg--home section.screen>.wrap,.pg--home section.screen>.container{width:100%}
.pg--home .screen--hero{display:flex;flex-direction:column;padding:0}
.pg--home .screen--hero .hero:not(.hero--page){flex:1 0 auto}
.pg--home .foot-slim{position:static}
.pg--home .sec-head{margin-bottom:clamp(16px,3.2vh,40px)}

/* ---- 27. landing: compacte indelingen zodat elk blok in één scherm past -------------------------- */
.pg--home section.screen h2{font-size:clamp(1.7rem,min(2.6vw + 1rem,5.2vh),3.05rem)}
.pg--home section.screen .lead{font-size:clamp(1rem,2.4vh,1.25rem)}
.pg--home section.screen .card{padding:clamp(14px,2.4vh,26px)}
.pg--home section.screen .card h3{font-size:clamp(1.15rem,2.8vh,1.4rem);margin-bottom:6px}
.pg--home .facts li{padding-block:clamp(10px,2vh,22px)}
/* behandelingen: drie kolommen met compacte rijen i.p.v. 11 grote kaarten */
.pg--home #behandelingen>.wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,36px);align-items:start}
.pg--home #behandelingen .sec-head{grid-column:1/-1;margin-bottom:0}
.pg--home #behandelingen .group+.group{margin-top:0}
.pg--home #behandelingen .group-head{margin-bottom:10px;padding-bottom:8px}
.pg--home #behandelingen .group-head p{font-size:.88rem}
.pg--home #behandelingen .pgrid{grid-template-columns:1fr;gap:8px}
.pg--home #behandelingen .pcard{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:8px 14px 8px 8px}
.pg--home #behandelingen .pcard:hover{transform:translateY(-2px)}
.pg--home #behandelingen .pimg{width:clamp(40px,5vh,54px);aspect-ratio:1;font-size:.52rem;letter-spacing:.04em}
.pg--home #behandelingen .pcard h3{font-size:1.08rem;padding:0;margin:0}
.pg--home #behandelingen .pcard .code{display:none}
.pg--home #behandelingen .pcard .meta{padding:0;margin:0}
.pg--home #behandelingen .pcard .meta span:first-child{display:none}
@media (max-width:1100px){
  .pg--home #behandelingen>.wrap{grid-template-columns:1fr 1fr}
  .pg--home #behandelingen #medisch{grid-row:span 2}
}
@media (max-width:720px){.pg--home #behandelingen>.wrap{grid-template-columns:1fr}.pg--home #behandelingen #medisch{grid-row:auto}}
/* tarieven */
.pg--home #tarieven .card .price-list li{padding:clamp(6px,1.2vh,13px) 2px}
.pg--home #tarieven .pl-name{font-size:.92rem}
.pg--home #tarieven .cap{margin-top:var(--sp-2)}
/* aangesloten bij: twee organisatiekaarten + uitleg naast elkaar */
@media (min-width:1101px){
  .pg--home #aangesloten>.wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,28px);align-items:start}
  .pg--home #aangesloten .sec-head,.pg--home #aangesloten>.wrap>p{grid-column:1/-1;margin-bottom:0}
  .pg--home #aangesloten .affil{grid-column:1/3;gap:clamp(14px,2vw,28px)}
  .pg--home #aangesloten .mean{grid-column:3;margin-top:0}
  .pg--home #aangesloten .tile.md{margin-bottom:var(--sp-2);padding:10px 18px}
  .pg--home #aangesloten .tile.md img{height:clamp(40px,6vh,60px)}
  .pg--home #aangesloten .card p{font-size:.92rem;line-height:1.5}
}
@media (max-height:820px) and (min-width:721px){
  .pg--home section.screen{padding-block:14px}
  .pg--home .sec-head{margin-bottom:12px}
  .pg--home section.screen .lead{font-size:1rem;line-height:1.45}
}
.pg--home .sec-head{max-width:none}
.pg--home .sec-head h2{max-width:none}
.pg--home .sec-head .lead{max-width:72ch}
.pg--home .sec-head h2+p{margin-top:var(--sp-1)}
.pg--home #aangesloten>.wrap>p,.pg--home #tarieven>.wrap>p{margin-top:var(--sp-2)!important}
.pg--home .mean{padding:clamp(14px,2.4vh,26px)}
.pg--home .mean ul{gap:4px;font-size:.92rem;line-height:1.45;margin-top:var(--sp-1)}
.pg--home .mean h3{font-size:1.25rem}
.pg--home #aangesloten .card p{font-size:.88rem;line-height:1.45}
.pg--home #aangesloten .tile.md img{height:clamp(34px,5vh,52px)}
@media (max-height:780px) and (min-width:1101px){
  .pg--home #behandelingen .pcard{padding:5px 12px 5px 6px;gap:10px}
  .pg--home #behandelingen .pimg{width:34px}
  .pg--home #behandelingen .pgrid{gap:6px}
  .pg--home .appt{padding:clamp(16px,3vh,28px) clamp(20px,3vw,40px);gap:24px}
  .pg--home .appt .loc{padding:9px 16px}
  .pg--home .appt .lead{margin-top:6px}
  .pg--home .prep ul{gap:5px;font-size:.92rem}
  .pg--home #aangesloten .card p{font-size:.82rem;line-height:1.4}
  .pg--home #aangesloten .tile.md{margin-bottom:8px}
  .pg--home .mean ul{font-size:.86rem}
}
@media (max-height:780px) and (min-width:1101px){.pg--home #aangesloten{padding-block:8px}}
/* de menubalk-compensatie zit al in html{scroll-padding-top}; niet nogmaals per sectie */
.pg--home .screen,.pg--home section[id]{scroll-margin-top:0}
.pg--home .sec-head .lead{max-width:90ch}

/* ---- 28. staart van de landing: FAQ, banner, kaarten, voet ------------------------------------------
   FAQ en banner zijn zo hoog als hun inhoud (eerder: elk een heel scherm met alles gecentreerd,
   waardoor er veel leegte voor en na de banner stond). */
.pg--home .tail{min-height:0;display:block;scroll-snap-align:none}
.pg--home .tail--faq{padding-block:clamp(36px,6vh,72px) clamp(20px,3vh,36px)}
.pg--home .tail--faq .btn{margin-top:0}
.pg--home .tail--cta{padding-block:0 clamp(36px,6vh,72px)}
.pg--home .tail--cta .cta{margin:0}
/* kaarten: kleiner, maar goed leesbaar (plattere verhouding), twee naast elkaar */
.pg--home .maps-sec{padding-block:clamp(36px,6vh,72px);background:var(--ground)}
.pg--home .maps-sec .sec-head{margin-bottom:clamp(16px,3vh,32px)}
.pg--home .maps-sec .map__frame{aspect-ratio:16/10}
.pg--home .maps-sec .map .info{padding:16px 22px}
.pg--home .maps-sec .map .info h3{font-size:1.3rem}
.pg--home .site-footer{margin-top:0}
.pg--home .maps-sec{padding-block:clamp(24px,4vh,56px)}
.pg--home .maps-sec .map__frame{aspect-ratio:2/1}
.pg--home .maps-sec .map .info{padding:14px 22px}

/* ---- 29. kaartenblok = bovenste deel van de voet ------------------------------------------------------ */
.footer__maps{padding-bottom:clamp(28px,4.5vh,52px);margin-bottom:clamp(28px,4.5vh,52px);border-bottom:1px solid var(--line)}
.footer__maps .sec-head{max-width:none;margin-bottom:clamp(14px,2.6vh,28px)}
.site-footer .footer__maps h2{font-family:var(--font-display);font-size:clamp(1.7rem,min(2.6vw + 1rem,5.2vh),3.05rem);font-weight:500;
  text-transform:none;letter-spacing:.005em;line-height:1.12;color:var(--ink);margin:0}
.site-footer .footer__maps .lead{font-size:clamp(1rem,2.4vh,1.25rem);color:var(--ink-soft);margin-top:var(--sp-1);max-width:90ch}
.footer__maps .maps{gap:clamp(14px,2vw,24px)}
.footer__maps .map__frame{aspect-ratio:2/1}
.footer__maps .map .info{padding:14px 22px}
.site-footer .footer__maps .map address,.site-footer .footer__maps .map .info p{color:var(--ink-soft);font-size:.92rem}
.site-footer .footer__maps a.open{text-decoration:none;color:var(--primary)}
.site-footer .footer__maps .cap{margin-top:var(--sp-2);color:var(--ink-soft);font-size:var(--fs-meta)}
.main-nav .nav-cta,.main-nav li.nav-cta{margin-top:0;width:auto}
@media (max-width:1240px){.main-nav li.nav-cta{width:100%}}

/* ============================================================================
   30. Overige pagina-onderdelen (test4-inhoud in het MaryJay-ontwerp; alleen tokens uit starter.css)
   ========================================================================== */
.pg{display:flex;flex-direction:column;flex:1 0 auto;min-width:0}
.container--narrow{max-width:50rem}
.banner{font-size:.9rem;padding:.55rem 0;background:var(--primary-tint)}
.banner .container{display:flex;gap:.3rem 1rem;align-items:center;justify-content:center;flex-wrap:wrap;text-align:center}
.banner--alert{background:var(--danger-bg);color:var(--danger-ink)}
.section--clinical{background:var(--primary-tint)}
.ph{display:grid;place-items:center;text-align:center;padding:1rem;width:100%;height:100%;min-height:8rem;background:var(--primary-tint);
  color:var(--ink-soft);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
/* behandelkaarten (services-overzicht) */
.service-card{padding:0;overflow:hidden}
.service-card__media{aspect-ratio:4/3;overflow:hidden;background:var(--primary-tint)}
.service-card__body{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1;gap:8px}
.service-card__body h3{margin:0}
.service-card__body p{color:var(--ink-soft);font-size:.95rem}
.service-card__link{margin-top:auto;padding-top:10px;font-weight:500;color:var(--primary)}
.service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
/* galerij */
.gal-nav{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.gal-nav a{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--primary);text-decoration:none;background:var(--surface)}
.gal-nav a:hover{border-color:var(--primary);background:var(--primary-tint)}
.ba-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr))}
.ba .layer .phx{position:absolute;top:0;bottom:0;display:grid;place-items:center;text-align:center;padding:1rem;width:50%;font-size:.85rem;color:var(--ink-soft)}
.ba .before .phx{left:0}.ba .after .phx{right:0}
.ba .layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* formulieren (contact + oude intakevragenlijst) */
.input,.select,.textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 14px;width:100%;
  transition:border-color var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
.textarea{resize:vertical;min-height:7.5rem}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--primary);background:var(--surface);box-shadow:0 0 0 3px var(--focus-ring)}
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"]{border-color:var(--danger);background:var(--danger-bg)}
.error-msg{color:var(--danger-ink);font-size:.85rem;margin-top:2px;display:none}
[aria-invalid="true"]~.error-msg,.field.has-error .error-msg,fieldset.has-error .error-msg{display:block}
.field .hint{display:block;font-size:.85rem;font-weight:300;color:var(--ink-soft)}
.field legend{font-size:var(--fs-meta);font-weight:500;color:var(--primary-d);padding:0;margin-bottom:6px}
.req{color:var(--danger)}
.grid-form{display:grid;gap:0 24px}
.grid-form--2{grid-template-columns:1fr 1fr}
@media (max-width:760px){.grid-form--2{grid-template-columns:1fr}}
.honeypot{position:absolute;left:-9999px}
.form{max-width:none}
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;list-style:none;padding:0;margin:0 0 var(--sp-4)}
.stepper li{min-width:0;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--ink-soft);border-top:3px solid var(--line);padding-top:8px}
.stepper li.is-active,.stepper li.is-done{color:var(--primary);border-color:var(--primary)}
.stepper .step-label{display:none}
.stepper .step-n::after{content:". "}
@media (min-width:760px){.stepper .step-label{display:inline}}
.step[hidden],.conditional[hidden]{display:none}
.form-nav{display:flex;justify-content:space-between;gap:12px;margin-top:var(--sp-4);flex-wrap:wrap}
/* kaders, tabellen, tekst */
.callout>:last-child{margin-bottom:0}
.callout strong.callout__title{display:block;font-family:var(--font-display);font-weight:500;font-size:1.3rem;margin-bottom:4px;color:var(--primary-d)}
.callout--warm{background:var(--ground-2);border-left-color:var(--accent)}
.callout--ok{background:var(--primary-tint);border-left-color:var(--primary)}
.table-wrap{overflow-x:auto;max-width:100%;margin:0 0 var(--sp-3);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.table-wrap table{width:100%;border-collapse:collapse;font-size:.95rem}
.table-wrap th,.table-wrap td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.table-wrap th{font-weight:500;color:var(--primary-d);background:var(--ground-2)}
.table-wrap tr:last-child td{border-bottom:0}
.prose{max-width:46rem}
.toc{background:var(--ground-2);border-radius:var(--r-md);padding:16px 22px;margin-bottom:var(--sp-4)}
.toc ol{margin:0;padding-left:1.2rem}
.author-box{display:flex;gap:16px;align-items:center;border-top:1px solid var(--line);padding-top:var(--sp-3);margin-top:var(--sp-5)}
.author-box .ph{width:4.5rem;height:4.5rem;min-height:0;border-radius:50%;flex:none}
.steps{list-style:none;counter-reset:s;padding:0;display:grid;gap:var(--sp-3)}
.steps li{counter-increment:s;position:relative;padding-left:3.4rem;margin:0}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0;font-family:var(--font-display);font-size:1.2rem;color:var(--primary);
  border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 12px;background:var(--surface)}
.steps strong{display:block;font-weight:500;color:var(--primary-d)}
.testimonial{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:var(--sp-4);margin:0}
.testimonial blockquote{margin:0 0 10px;font-family:var(--font-display);font-size:1.5rem;line-height:1.3;color:var(--primary-d)}
.testimonial figcaption{font-size:var(--fs-meta);color:var(--ink-soft)}
.cta-full{text-align:center}
.cta-full h2{max-width:40rem;margin-inline:auto}
.cta-full .lead{margin-inline:auto}
.cta-full .btn-row{justify-content:center}
.jrow.soon{opacity:.65}
/* ritme voor lopende tekst op losse pagina's (alleen binnen .pg--generic, dus geen invloed op de landing) */
.pg--generic p+p,.pg--generic p+ul,.pg--generic p+ol,.pg--generic ul+p,.pg--generic ol+p{margin-top:.9rem}
.pg--generic :is(ul,ol):not([class]){padding-left:1.3rem;margin-block:.6rem 0}
.pg--generic li{margin-top:.35rem}
.pg--generic :is(h2,h3,h4):not(:first-child){margin-top:var(--sp-4)}
.pg--generic :is(h2,h3,h4)+:is(p,ul,ol){margin-top:.7rem}
.pg--generic .card :is(h2,h3,h4):not(:first-child){margin-top:var(--sp-2)}
.pg--generic .sec-head h2+p,.pg--generic .section__head h2+p{margin-top:var(--sp-2)}
.pg--generic .card p+p{margin-top:.6rem}
.pg--generic .btn+.btn{margin-left:0}
.pg--generic table{width:100%;border-collapse:collapse}
.pg--generic .hero--page h1{margin-top:var(--sp-2)}
.pg--generic section{scroll-margin-top:0}
.pg--generic .section--tight{padding-block:clamp(36px,5vw,64px)}
.pg--generic .split{align-items:start}
.pg--generic .btn-row{margin-top:var(--sp-3)}
.pg--generic .price-list{margin-top:var(--sp-3)}
.pg--generic .price-list li{gap:16px;padding:16px 2px;align-items:baseline}
.pg--generic .pl-name{flex:1;font-size:1rem}
.pg--generic .pl-price{white-space:nowrap}
html:has(main>.pg--home:not([data-view])){scroll-snap-type:y proximity}
/* prijsregels in smalle kaarten: naam + prijs op één regel, toelichting eronder */
.pg--generic .price-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 16px;align-items:baseline;padding:14px 2px}
.pg--generic .price-list .pl-name{min-width:0;font-size:1rem}
.pg--generic .price-list .pl-desc{grid-column:1/-1;font-size:.86rem;line-height:1.45;color:var(--ink-soft)}

/* ============================================================================
   31. TasteCode-verfijning (geldt voor alle pagina's, alleen tokens)
   - lopende tekst in Jost 400 (300 alleen voor grote intro's), beter leesbaar
   - "Afspraak maken" als pil aan het eind van het menu; compacte knop in de mobiele kop
   - kop krijgt hairline + zachte schaduw na 24px scrollen (js/main.js)
   - donkere eucalyptus-voet; tikdoelen minimaal 44px; hover-beweging alleen bij muis
   ========================================================================== */
body{font-weight:400}
.lead{font-weight:300}
.eyebrow{letter-spacing:.16em}
h1 em,h2 em{font-style:italic;font-weight:400}
.site-header{transition:box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.site-header.is-scrolled{box-shadow:var(--shadow-sm)}
.main-nav ul a{display:inline-flex;align-items:center;min-height:44px;padding:0}
.main-nav ul a::after{bottom:10px}
.menu-btn{display:inline-grid;place-items:center;width:44px;height:44px;margin-left:-10px;padding:0;border-radius:var(--r-pill)}
.main-nav li.nav-cta a{padding:0 20px;border-radius:var(--r-pill);background:var(--action);color:var(--on-action);font-weight:500;
  transition:background-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.main-nav li.nav-cta a::after{display:none}
.main-nav li.nav-cta a:hover{background:var(--action-hover);color:var(--on-action)}
.header-book{display:none;min-height:44px;padding:0 18px;font-size:.9rem}
.nav-toggle{width:44px;height:44px}
@media (max-width:1240px){
  .header-book{display:inline-flex}
  .main-nav li.nav-cta{margin-top:var(--sp-3)}
  .main-nav li.nav-cta a{justify-content:center;font-family:var(--font-body);font-size:1rem;min-height:50px;border-bottom:0}
}
@media (max-width:380px){.header-book{padding:0 14px}.brand__mark{font-size:1.4rem}}
.btn{transition:background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),
  border-color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .btn--primary:hover,.main-nav li.nav-cta a:hover{transform:translateY(-2px)}
}
.btn:active,.main-nav li.nav-cta a:active{transform:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px}

/* donkere voet */
.pg--landing .site-footer{background:var(--invert-deep);color:var(--on-invert);border-top:0}
.pg--landing .site-footer h2{color:var(--accent-soft)}
.pg--landing .footer__brand{color:var(--on-invert)!important}
.pg--landing .site-footer p,.pg--landing .site-footer li,.pg--landing .site-footer .muted,.pg--landing .legal{color:rgba(255,255,255,.78)}
.pg--landing .site-footer a{color:var(--on-invert);text-decoration-color:rgba(255,255,255,.35)}
.pg--landing .site-footer a:hover{color:var(--on-invert);text-decoration-color:var(--accent)}
.pg--landing .site-footer ul{gap:0}
.pg--landing .site-footer li a{display:inline-flex;align-items:center;min-height:44px}
.pg--landing .footer-disclaimer{border-top:1px solid rgba(255,255,255,.16);color:rgba(255,255,255,.72)!important}
.pg--landing .site-footer .tile{background:#fff;border-color:transparent}
.pg--landing .site-footer :focus-visible{outline-color:var(--on-invert)}

/* ============================================================================
   32. Landingspagina (index.html, .pg--landing)
   ========================================================================== */
.pg--landing .pg__body h2{font-size:clamp(2.2rem,2.4vw + 1.25rem,3.4rem);font-weight:400;line-height:1.08}
.pg--landing .eyebrow + h2{margin-top:var(--sp-2)}
.pg--landing h2 + .lead{margin-top:var(--sp-3);max-width:52ch}
.lp-sec{padding-block:clamp(72px,10vw,136px)}
.lp-sec--tint{background:var(--ground-2)}
.lp-head{max-width:46rem;margin-bottom:clamp(32px,4vw,56px)}
.lp-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-4)}
.lp-chip{display:inline-flex;align-items:center;font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--primary);background:var(--primary-tint);border-radius:var(--r-pill);padding:4px 12px;line-height:1.5}
.lp-chip--muted{color:var(--ink-soft);background:var(--ground)}
.lp-more{display:inline-flex;align-items:center;gap:6px;font-weight:500;color:var(--primary)}
.lp-arrow{display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.lp-textlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:var(--sp-2);font-weight:500;text-decoration:none;color:var(--primary)}
.lp-call{margin-top:var(--sp-3);color:var(--ink-soft)}
.lp-call a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:1.15rem;text-decoration-color:var(--accent);text-underline-offset:4px}
.lp-checks{list-style:none;margin:var(--sp-4) 0 0;padding:0;display:grid;gap:var(--sp-2)}
.lp-checks li{position:relative;padding-left:28px}
.lp-checks li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.lp-checks b{display:block;font-weight:500;color:var(--primary-d)}
.lp-checks span{color:var(--ink-soft)}
.lp-checks b + *{display:block}
.lp-checks li > span b{color:var(--primary-d)}
.lp-checks--plain span{color:var(--ink)}

/* hero */
.lp-hero{padding-block:clamp(32px,5vw,64px) clamp(48px,6vw,80px)}
.lp-hero__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;
  min-height:calc(100svh - var(--header-h) - clamp(80px,11vw,144px))}
.lp-hero__copy{grid-column:1/7;padding-block:var(--sp-3)}
.lp-hero__media{grid-column:7/13;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ground-2);
  aspect-ratio:4/5;max-height:min(780px,calc(100svh - var(--header-h) - 96px));width:100%;justify-self:end}
.lp-hero__media img{width:100%;height:100%;object-fit:cover;object-position:60% 55%}
.lp-hero__kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:var(--fs-meta);color:var(--ink-soft)}
.lp-pill{display:inline-flex;align-items:center;font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  background:var(--primary-tint);color:var(--primary);border-radius:var(--r-pill);padding:6px 14px}
.lp-hero h1{margin-top:var(--sp-3);font-size:clamp(2.75rem,3.6vw + 1.25rem,5rem);font-weight:400;line-height:1.02;color:var(--primary-d)}
.lp-line{display:block}
.lp-hero__lead{margin-top:var(--sp-3);max-width:46ch;font-size:clamp(1.125rem,.5vw + 1rem,1.3rem)}
.lp-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:var(--sp-4)}
.lp-hero__meta{margin-top:var(--sp-5);padding-top:var(--sp-3);border-top:1px solid var(--line);display:grid;gap:var(--sp-3)}
.lp-facts{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3)}
.lp-facts li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;line-height:1.45;color:var(--ink-soft)}
.lp-facts b{display:block;font-weight:500;color:var(--primary-d)}
.lp-facts .ico{width:24px;height:24px;color:var(--primary);margin-top:2px}
.lp-affil{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.lp-affil__label{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-right:4px}
.lp-affil .tile{min-height:56px;padding:8px 14px}
.lp-affil .tile img{height:40px}
@media (prefers-reduced-motion:no-preference){
  .lp-hero [data-hero]{animation:lpRise var(--dur-enter) var(--ease-enter) backwards;animation-delay:calc(var(--i,0) * var(--stagger))}
  .lp-hero__media img{animation:lpMedia 760ms var(--ease-enter) backwards}
}
@keyframes lpRise{from{opacity:0;transform:translateY(16px)}}
@keyframes lpMedia{from{opacity:0;transform:scale(1.06)}}

/* over ons */
.lp-about__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.lp-about__media{grid-column:1/6}
.lp-about__body{grid-column:7/13}
.lp-frame{position:relative;margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ground-2);aspect-ratio:4/5}
.lp-frame img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
.lp-frame__pill{position:absolute;left:16px;bottom:16px;font-size:.85rem;font-weight:500;color:var(--primary-d);
  background:rgba(255,255,255,.88);border-radius:var(--r-pill);padding:6px 14px}
.lp-about__body > p:not(.lead){margin-top:var(--sp-2);max-width:62ch}
.lp-about__body .lead{max-width:52ch}
.lp-note{border-left:2px solid var(--accent);padding-left:20px;color:var(--ink)}
.lp-about__body .lp-note{margin-top:var(--sp-3)}

/* behandelingen */
.lp-tgroup + .lp-tgroup,.lp-tpair{margin-top:clamp(32px,4vw,48px)}
.lp-tgroup__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;margin-bottom:var(--sp-2)}
.lp-tgroup__head h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:500;color:var(--primary-d)}
.lp-tgroup__head p{color:var(--ink-soft);font-size:.95rem}
.lp-tgrid{display:grid;gap:16px}
.lp-tgrid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.lp-tgrid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.lp-tpair{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px}
.lp-tpair .lp-tgroup + .lp-tgroup{margin-top:0}
.lp-tcard{display:flex;flex-direction:column;gap:var(--sp-2);min-height:200px;padding:28px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lp-tcard--sm{min-height:168px;padding:24px}
.lp-tcard__code{font-size:.75rem;font-weight:500;letter-spacing:.12em;color:var(--ink-soft)}
.lp-tcard h4{font-family:var(--font-display);font-size:1.6rem;font-weight:500;line-height:1.15;color:var(--primary-d)}
.lp-tcard--sm h4{font-size:1.45rem}
.lp-tcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}

/* tarieven */
.lp-price{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.lp-price__head{grid-column:1/6;position:sticky;top:calc(var(--header-h) + 40px)}
.lp-price__list{grid-column:7/13}
.lp-pgroup + .lp-pgroup{margin-top:var(--sp-5)}
.lp-label{font-family:var(--font-body);font-size:.8125rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--primary);
  padding-bottom:var(--sp-1);border-bottom:1px solid var(--line)}
.lp-pgroup ul{list-style:none;margin:0;padding:0}
.lp-pgroup li{border-bottom:1px solid var(--line)}
.lp-pgroup a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:18px 8px;
  text-decoration:none;color:var(--ink);font-size:1.125rem;transition:background-color var(--dur-fast) var(--ease-out)}
.lp-pval{font-family:var(--font-display);font-size:1.625rem;font-weight:500;line-height:1;color:var(--primary);white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-out)}
.lp-pval small{font-family:var(--font-body);font-size:.875rem;font-weight:400;color:var(--ink-soft);margin-right:4px}
.lp-band{margin-top:var(--sp-4);background:var(--accent-soft);color:var(--ink);border-radius:var(--r-sm);padding:16px 20px}

/* klachten */
.lp-cgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lp-ccard{position:relative;display:flex;flex-direction:column;gap:var(--sp-1);padding:28px 28px 56px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);text-decoration:none;color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lp-ccard h3{font-family:var(--font-body);font-size:1.1875rem;font-weight:500;line-height:1.3;color:var(--primary-d)}
.lp-ccard p{color:var(--ink-soft);font-size:1rem;line-height:1.55}
.lp-ccard > .lp-arrow{position:absolute;right:28px;bottom:22px;color:var(--primary);font-weight:500}
.lp-ccard--risk{box-shadow:inset 0 3px 0 var(--accent)}

/* afspraak */
.lp-book{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.lp-book__main{grid-column:1/8}
.lp-prep{grid-column:9/13;margin-top:0;background:var(--ground-2);border-radius:var(--r-md);padding:32px}
.lp-prep h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:500;color:var(--primary-d)}
.lp-prep .lp-checks{margin-top:var(--sp-2);gap:12px}
.lp-locs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:var(--sp-4)}
.lp-loc{display:flex;flex-direction:column;gap:4px;padding:24px 28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  text-decoration:none;color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lp-loc__name{font-family:var(--font-display);font-size:1.625rem;font-weight:500;line-height:1.15;color:var(--primary-d)}
.lp-loc__addr{color:var(--ink-soft)}
.lp-loc .lp-more{margin-top:var(--sp-2)}
.lp-loc:hover,.lp-loc:focus-visible{border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}

/* aangesloten bij */
.lp-orgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.lp-org{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:32px;display:flex;flex-direction:column;gap:var(--sp-2)}
.lp-org .tile{align-self:flex-start;padding:10px 16px;margin-bottom:var(--sp-1)}
.lp-org .tile img{height:64px}
.lp-org h3{font-size:1.75rem;font-weight:500;color:var(--primary-d)}
.lp-org p{color:var(--ink-soft)}
.lp-src{font-size:.875rem;margin-top:auto}
.lp-src a{display:inline-flex;align-items:center;min-height:44px}
.lp-mean{margin-top:clamp(40px,5vw,64px)}
.lp-mean h3{font-family:var(--font-body);font-size:1.0625rem;font-weight:500;color:var(--primary-d)}
.lp-checks--2{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-2)}

/* galerij */
.lp-gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
.lp-gal__text{grid-column:1/6}
.lp-gal__media{grid-column:7/13}
.lp-chips{list-style:none;padding:0;margin:var(--sp-3) 0 var(--sp-4);display:flex;flex-wrap:wrap;gap:8px}
.lp-chips li{font-size:.9rem;border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:6px 14px;color:var(--primary-d)}
.lp-gal .ba{aspect-ratio:4/3;box-shadow:none}
.lp-gal .ba .handle::after{width:44px;height:44px}

/* tips */
.lp-tips{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
.lp-tip{grid-column:1/8;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  overflow:hidden;text-decoration:none;color:var(--ink);
  transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lp-tip__media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--ground-2)}
.lp-tip__media img{width:100%;height:100%;object-fit:cover;object-position:45% 60%}
.lp-tip__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2);padding:28px 32px 32px}
.lp-tip h3{font-size:1.875rem;font-weight:500;line-height:1.15;color:var(--primary-d)}
.lp-tip p{color:var(--ink-soft)}
.lp-tips__soon{grid-column:8/13;display:grid;gap:24px;align-content:start}
.lp-soon{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-1);padding:24px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--ground)}
.lp-soon h3{font-size:1.5rem;font-weight:500;color:var(--primary-d)}
.lp-soon p{color:var(--ink-soft)}

/* FAQ */
.lp-faq{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start}
.lp-faq__head{grid-column:1/5}
.lp-faq__head .btn{margin-top:var(--sp-4)}
.lp-faq__list{grid-column:6/13;border-top:1px solid var(--line)}
.lp-faq__list details{border-bottom:1px solid var(--line)}
.lp-faq__list summary{position:relative;list-style:none;cursor:pointer;padding:24px 56px 24px 0;font-size:1.1875rem;font-weight:500;line-height:1.4;color:var(--primary-d)}
.lp-faq__list summary::-webkit-details-marker{display:none}
.lp-plus{position:absolute;right:4px;top:50%;width:40px;height:40px;margin-top:-20px;border-radius:50%;
  transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.lp-plus::before,.lp-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;margin:-.75px 0 0 -8px;background:var(--primary)}
.lp-plus::after{transform:rotate(90deg)}
.lp-faq__list details[open] .lp-plus{transform:rotate(45deg)}
.lp-faq__list .faq__a{padding:0 0 24px;max-width:64ch;color:var(--ink-soft)}
@media (prefers-reduced-motion:no-preference){
  .lp-faq__list details[open] .faq__a{animation:lpRise 220ms var(--ease-out)}
}

/* afsluitende oproep: de enige donkere band voor de voet */
.lp-cta{background:var(--invert-deep);color:var(--on-invert);text-align:center;padding-block:clamp(72px,9vw,120px)}
.lp-cta .wrap{max-width:52rem}
.lp-cta h2{color:var(--on-invert)}
.lp-cta p{margin-top:var(--sp-2);font-size:1.1875rem;font-weight:300;color:rgba(255,255,255,.82)}
.lp-cta .lp-actions{justify-content:center}
.lp-btn-light{background:var(--surface);color:var(--primary-d)}
.lp-btn-light:hover{background:var(--accent-soft);color:var(--primary-d)}
.lp-btn-outline{background:transparent;color:var(--on-invert);border-color:rgba(255,255,255,.5)}
.lp-btn-outline:hover{border-color:var(--on-invert);color:var(--on-invert)}
.lp-cta :focus-visible{outline-color:var(--on-invert)}

/* locaties */
.lp-maps .map__frame{aspect-ratio:16/9}
.lp-maps .map .info h3{font-size:1.625rem}
.lp-maps .map .open{display:inline-flex;align-items:center;min-height:44px}

/* hover-beweging alleen met muis; informatie blijft altijd zichtbaar */
@media (hover:hover) and (pointer:fine){
  .lp-tcard:hover,.lp-ccard:hover,.lp-tip:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
  .lp-ccard--risk:hover{box-shadow:inset 0 3px 0 var(--accent),var(--shadow-md)}
  .lp-loc:hover{transform:translateY(-2px)}
  .lp-tcard:hover .lp-arrow,.lp-ccard:hover .lp-arrow,.lp-tip:hover .lp-arrow,.lp-loc:hover .lp-arrow,.lp-textlink:hover .lp-arrow{transform:translateX(4px)}
  .lp-pgroup a:hover{background:var(--primary-tint)}
  .lp-pgroup a:hover .lp-pval{transform:translateX(-2px)}
  .lp-plus:hover,summary:hover .lp-plus{background:var(--primary-tint)}
}
@media (prefers-reduced-motion:reduce){
  .lp-tcard:hover,.lp-ccard:hover,.lp-tip:hover,.lp-loc:hover{transform:none}
  .lp-arrow,.lp-pval{transition:none}
}

/* middelgroot */
@media (max-width:1079px){
  .lp-hero__copy{grid-column:1/8}
  .lp-hero__media{grid-column:8/13;aspect-ratio:3/4}
  .lp-hero__lead{max-width:44ch}
  .lp-facts{grid-template-columns:1fr}
  .lp-about__media{grid-column:1/6;aspect-ratio:3/4}
  .lp-about__body{grid-column:6/13}
  .lp-tgrid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-tpair{grid-template-columns:1fr}
  .lp-price__head,.lp-price__list{grid-column:1/-1;position:static}
  .lp-price__list{margin-top:var(--sp-5)}
  .lp-cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-book__main,.lp-prep{grid-column:1/-1}
  .lp-prep{margin-top:var(--sp-5)}
  .lp-prep .lp-checks{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--sp-4)}
  .lp-gal__text,.lp-gal__media{grid-column:1/-1}
  .lp-gal__media{margin-top:var(--sp-5)}
  .lp-tip,.lp-tips__soon{grid-column:1/-1}
  .lp-tips__soon{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lp-faq__head,.lp-faq__list{grid-column:1/-1}
  .lp-faq__list{margin-top:var(--sp-4)}
}
/* compact */
@media (max-width:719px){
  .lp-hero__grid{min-height:0}
  .lp-hero__copy,.lp-hero__media{grid-column:1/-1}
  .lp-hero__media{aspect-ratio:4/3;max-height:none;margin-top:var(--sp-4)}
  .lp-hero__cta .btn{flex:1 1 100%}
  .lp-affil__label{flex-basis:100%}
  .lp-about__media{grid-column:1/-1;order:2;aspect-ratio:4/3;margin-block:var(--sp-4)}
  .lp-about__body{display:contents}
  .lp-about__body > *{grid-column:1/-1;order:3}
  .lp-about__body > .eyebrow,.lp-about__body > h2{order:1}
  .lp-about__body > .eyebrow{justify-self:start}
  .lp-actions .btn{flex:1 1 100%}
  .lp-tgrid--3,.lp-tgrid--2{grid-template-columns:1fr}
  .lp-tcard,.lp-tcard--sm{min-height:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:18px 20px}
  .lp-tcard__code{grid-column:1/-1}
  .lp-tcard h4{font-size:1.4rem}
  .lp-tcard__foot{margin:0;flex-direction:column;align-items:flex-end;gap:6px}
  .lp-cgrid,.lp-locs,.lp-orgs,.lp-checks--2,.lp-tips__soon{grid-template-columns:1fr}
  .lp-prep .lp-checks{grid-template-columns:1fr}
  .lp-org,.lp-prep{padding:24px}
  .lp-tip__body{padding:24px}
  .lp-cta .lp-actions .btn{flex:1 1 100%}
}
.footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.footer__grid{grid-template-columns:minmax(0,1fr)}}
.brand{min-height:44px;align-items:center}
.site-footer li a{min-width:44px}
.site-footer p > a,.legal a{display:inline-flex;align-items:center;min-height:44px}
.site-footer .footer-disclaimer a{display:inline;min-height:0}

/* ============================================================================
   33. Behandelpagina's (service-*.html): kop met echte foto, kruimelpad, voetbalk
   ========================================================================== */
.hero--media .page-hero__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.page-hero__copy .lead{max-width:46rem}
.page-hero__media{margin:0;border-radius:var(--r-md);overflow:hidden;background:var(--ground);aspect-ratio:4/5;max-height:520px;width:100%}
.page-hero__media img{width:100%;height:100%;object-fit:cover;object-position:45% 50%}
.service-manicure .page-hero__media img,.page-hero__media img[src*="hand-on-knee"]{object-position:60% 55%}
@media (max-width:900px){
  .hero--media .page-hero__grid{grid-template-columns:minmax(0,1fr)}
  .page-hero__media{aspect-ratio:16/9;max-height:none}
}
@media (prefers-reduced-motion:no-preference){
  .page-hero__media img{animation:lpMedia 760ms var(--ease-enter) backwards}
  .page-hero__copy > *{animation:lpRise var(--dur-enter) var(--ease-enter) backwards}
  .page-hero__copy > :nth-child(2){animation-delay:60ms}
  .page-hero__copy > :nth-child(3){animation-delay:120ms}
  .page-hero__copy > :nth-child(n+4){animation-delay:180ms}
}
/* kruimelpad stond ingesprongen door de algemene lijstregel */
.pg--generic .breadcrumb ol{padding-left:0;margin:0}
.pg--generic .breadcrumb li{margin:0}
.breadcrumb a{display:inline-flex;align-items:center;min-height:44px}
/* slanke voetbalk dekte steeds de onderkant van het scherm af */
.foot-slim{position:static}
.foot-slim a{display:inline-flex;align-items:center;min-height:44px}
/* zijdelingse kaarten zonder lege fotovakken */
.service-card .service-card__body{padding-top:28px}
.breadcrumb ol{align-items:center}
.pg--generic .breadcrumb li{display:inline-flex;align-items:center;min-height:44px}
.pg--generic .breadcrumb ol{row-gap:0}
.pg--generic .breadcrumb li[aria-current]{min-height:0}

/* ---- 34. stockfoto's in fotovakken (img/foto, Unsplash License) ---- */
.pimg--foto{padding:0;overflow:hidden;background:var(--ground-2)}
.pimg--foto img{width:100%;height:100%;object-fit:cover;display:block}
.service-card__media .tip-foto{width:100%;height:100%;object-fit:cover;display:block}

/* ---- 35. Uitklapmenu "Behandelingen": tekst onder elkaar, altijd bereikbaar ----
   De algemene menuregel (inline-flex, 44px) mag niet gelden voor de links in het uitklapmenu. */
.main-nav .mega ul a{display:block;min-height:0;padding:9px 0;white-space:normal;line-height:1.35}
.main-nav .mega ul a::after{display:none}
.main-nav .mega ul a small{display:block;margin-top:3px;line-height:1.4}
.main-nav .mega__all{display:flex;align-items:center;min-height:44px;padding-top:12px}
.main-nav .mega__all::after{display:none}
@media (min-width:1241px){
  /* onzichtbare brug over de ruimte tussen "Behandelingen" en het paneel, zodat de muis het paneel haalt */
  .main-nav .has-mega::after{content:"";position:absolute;left:-24px;right:-24px;top:100%;height:22px}
  /* paneel past altijd op het scherm; is het hoger, dan scrolt het paneel zelf */
  .mega{max-height:calc(100vh - var(--header-h) - 24px);max-height:calc(100dvh - var(--header-h) - 24px);overflow-y:auto;overscroll-behavior:contain}
}

/* ---- 36. Uitklapmenu: kopjes in dezelfde letter als de links (Jost), iets vetter; dunne scheidingslijnen ---- */
.mega h3{font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:.01em;line-height:1.3;color:var(--primary-d);margin-bottom:8px}
@media (min-width:1241px){
  .mega__cols{gap:0}
  .mega__cols > div{padding-inline:28px}
  .mega__cols > div:first-child{padding-left:0}
  .mega__cols > div:last-child{padding-right:0}
  .mega__cols > div + div{border-left:1px solid var(--line)}
}

/* ---- 37. Logo linksboven in de menubalk (img/logo-maryjay.svg = V1 met schaduwrand, 1013 × 225, verhouding ca. 4,5 : 1) ---- */
.brand{flex:none;line-height:0}
.brand__logo{display:block;width:auto;height:52px;max-width:none}
@media (max-width:1240px){.brand__logo{height:44px}}
@media (max-width:720px){.brand__logo{height:38px}}
@media (max-width:380px){.brand__logo{height:32px}}
@media (max-width:340px){.brand__logo{height:27px}.header-book{padding:0 12px}}

/* ============================================================================
   38. Tarievenoverzicht (tarieven.html): drie onderdelen met echte tarieven 2026
   Kop links blijft in beeld tijdens scrollen; prijzen rechts; omschrijving onder de naam.
   ========================================================================== */
.tar-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:var(--sp-3)}
.tar-jump a{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);color:var(--primary-d);font-weight:500;text-decoration:none;
  transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.tar-jump a:hover{background:var(--primary-tint);border-color:var(--primary)}
.tar-cats{display:grid;gap:clamp(24px,3vw,40px)}
.tar-cat{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,4vw,64px);align-items:start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(24px,3.5vw,48px);
  scroll-margin-top:calc(var(--header-h) + 24px)}
.tar-cat__head{position:sticky;top:calc(var(--header-h) + 32px)}
.pg--generic .tar-cat h3{margin:0;font-size:clamp(1.9rem,1.4vw + 1.3rem,2.5rem);font-weight:500;color:var(--primary-d);line-height:1.1}
.pg--generic .tar-cat__head p{margin-top:var(--sp-2);color:var(--ink-soft)}
.tar-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:var(--sp-2);font-weight:500;color:var(--primary);text-decoration:none}
.tar-more:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--accent)}
.pg--generic .tar-group{margin:0 0 var(--sp-1);padding-bottom:var(--sp-1);border-bottom:1px solid var(--line);font-family:var(--font-body);
  font-size:.8125rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--primary)}
.pg--generic .tar-list + .tar-group{margin-top:var(--sp-5)}
.tar-list{list-style:none;margin:0;padding:0}
.pg--generic .tar-list li{margin:0}
.tar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.tar-row:last-child{border-bottom:0}
.tar-row__main{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;min-width:0}
.tar-name{font-size:1.125rem;font-weight:500;color:var(--ink)}
.tar-sub-name{color:var(--ink-soft);font-size:.98rem}
.tar-dur{display:inline-flex;align-items:center;font-size:.8125rem;font-weight:500;letter-spacing:.04em;color:var(--primary);
  background:var(--primary-tint);border-radius:var(--r-pill);padding:2px 10px;white-space:nowrap}
.tar-price{font-family:var(--font-display);font-size:1.6rem;font-weight:500;line-height:1.1;color:var(--primary);text-align:right;white-space:nowrap}
.pg--generic .tar-desc{grid-column:1/-1;margin:2px 0 0;max-width:64ch;font-size:.98rem;line-height:1.6;color:var(--ink-soft)}
.pg--generic .tar-note{margin-top:var(--sp-4);font-size:.95rem;color:var(--ink-soft);max-width:72ch}
@media (max-width:900px){
  .tar-cat{grid-template-columns:minmax(0,1fr)}
  .tar-cat__head{position:static}
}
@media (max-width:560px){
  .tar-row{grid-template-columns:minmax(0,1fr)}
  .tar-price{text-align:left;white-space:normal;font-size:1.45rem}
}
.tar-price small{font-family:var(--font-body);font-size:.875rem;font-weight:400;color:var(--ink-soft);margin-right:4px}

/* ---- 39. Mobiel menu: geen "Afspraak"-knop naast het kruisje; onderste knop compact, tekst exact gecentreerd ---- */
.header-actions:has(.nav-toggle[aria-expanded="true"]) .header-book{display:none}
@media (max-width:1240px){
  .main-nav li.nav-cta{width:auto;margin-top:var(--sp-4)}
  .main-nav ul > li.nav-cta > a{display:inline-flex;align-items:center;justify-content:center;text-align:center;
    width:auto;min-width:200px;height:48px;min-height:48px;padding:0 32px;line-height:1;border-bottom:0;border-radius:var(--r-pill);
    background:var(--action);color:var(--on-action);font-family:var(--font-body);font-size:1rem;font-weight:500;letter-spacing:.02em}
  .main-nav ul > li.nav-cta > a:hover{background:var(--action-hover);color:var(--on-action)}
}

/* ---- 40. Knoppen en mobiel menu (aanpassingen 23-10-2026) ----
   "Afspraak maken" (btn--lime) was roze; nu overal dezelfde groene knop als de hoofdknop. */
.btn--lime,.btn--lime:visited{background:var(--action);color:var(--on-action);border-color:var(--action)}
.btn--lime:hover,.btn--lime:focus-visible,.btn--lime:active{background:var(--action-hover);color:var(--on-action);border-color:var(--action-hover)}
.tar-book{margin-top:var(--sp-3)}
@media (max-width:1240px){
  .main-nav li.nav-cta{display:flex;justify-content:center;width:100%}
}

/* ---- 41. Kleinere afstand tussen de pagina-introductie en het eerste onderdeel (alle pagina's) ---- */
.hero--page + .section{padding-top:clamp(32px,4vw,56px)}

/* ---- 42. Compactere afstanden tussen onderdelen op alle subpagina's (pg--generic) ----
   Was: 120px boven + 120px onder elk onderdeel. Nu: ruim de helft. Startpagina blijft ongewijzigd. */
.pg--generic .section{padding-block:clamp(40px,5vw,72px)}
.pg--generic .hero--page + .section{padding-top:clamp(32px,4vw,56px)}
.pg--generic .sec-head,.pg--generic .section__head{margin-bottom:clamp(24px,3vw,40px)}
.pg--generic .sec-head .eyebrow,.pg--generic .section__head .eyebrow{margin-bottom:0}
.pg--generic .sec-head .eyebrow + h2,.pg--generic .section__head .eyebrow + h2{margin-top:12px}
/* ook voor contact, booking en intakevragenlijst (wrapper zonder pg--generic); startpagina uitgezonderd */
.pg:not(.pg--home) .section{padding-block:clamp(40px,5vw,72px)}
.pg:not(.pg--home) .section--tight{padding-block:clamp(28px,3.5vw,48px)}
.pg:not(.pg--home) .hero--page + .section{padding-top:clamp(32px,4vw,56px)}
.pg:not(.pg--home) .sec-head,.pg:not(.pg--home) .section__head{margin-bottom:clamp(24px,3vw,40px)}
.pg:not(.pg--home) .sec-head .eyebrow,.pg:not(.pg--home) .section__head .eyebrow{margin-bottom:0}
.pg:not(.pg--home) .sec-head .eyebrow + h2,.pg:not(.pg--home) .section__head .eyebrow + h2{margin-top:12px}

/* ---- 43. kleinere tussenruimtes: galerij-chips → Onderdeel 1, FAQ → afspraakblok, contactformulier → kaarten ---- */
.gal-nav-sec{padding-bottom:0 !important}
.gal-nav-sec + .section{padding-top:clamp(24px,3vw,40px)}
.pg .section:has(+ .cta-full),.pg .section:has(+ .maps-sec){padding-bottom:clamp(24px,2.5vw,32px)}
.pg .cta-full,.pg .maps-sec{padding-top:clamp(24px,2.5vw,32px)}
/* specificiteit gelijk aan de algemene .pg:not(.pg--home)-regels, zodat deze winnen */
.pg:not(.pg--home) .gal-nav-sec + .section{padding-top:clamp(24px,3vw,40px)}
.pg:not(.pg--home) .section.cta-full,.pg:not(.pg--home) .section.maps-sec{padding-top:clamp(24px,2.5vw,32px)}
/* twee getinte secties na elkaar (Behandelingen: MA-01-blok → "Twijfelt u…") */
.pg:not(.pg--home) .section.section--tint:has(+ .section--tint){padding-bottom:clamp(24px,2.5vw,32px)}
.pg:not(.pg--home) .section.section--tint + .section.section--tint{padding-top:clamp(24px,2.5vw,32px)}
/* Gallerij: laatste manicurevoorbeeld → "Foto's en uw privacy" */
.pg:not(.pg--home) .section:has(+ .privacy-sec){padding-bottom:clamp(24px,2.5vw,32px)}
.pg:not(.pg--home) .section.privacy-sec{padding-top:0}

/* ---- 44. Startpagina: secties niet meer schermvullend; elke sectie begint zoals FAQ (inhoud bovenaan, vaste ruimte) ---- */
.pg--home section.section.screen:not(#afspraak){min-height:0;display:block;justify-content:flex-start;padding-block:clamp(36px,6vh,72px) clamp(20px,3vh,36px);scroll-snap-align:none}
html:has(.pg--home){scroll-snap-type:none}
.pg--home #galerij .ba-wrap{align-items:start}
/* Afspraak maken: terug naar de schermvullende versie, met meer groene ruimte (#E4EBE6) rond de tekst */
.pg--home #afspraak .wrap.appt{padding:clamp(40px,7vw,104px)}
.pg--home section[tabindex="-1"]:focus{outline:none}

/* Behandelpagina's: "Ook interessant" dichter onder de vragen (FAQ) erboven */
.pg:not(.pg--home) .section:has(+ .related-sec){padding-bottom:clamp(24px,2.5vw,32px)}
.pg:not(.pg--home) .section.related-sec{padding-top:clamp(24px,2.5vw,32px)}

/* ---- 45. Startpagina: tarievenblokken met gekleurde tegels, zelfde hover als de kaarten; behandelgroepen gelijk opgebouwd ---- */
.pg--home #tarieven .tar-card,.pg--home #behandelingen .pcard{transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,border-color .3s}
.pg--home #tarieven .tar-card:hover,.pg--home #behandelingen .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.tar-tiles{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:grid;gap:10px}
.tar-tile{--c:#E5484D;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:8px;text-decoration:none;color:var(--ink);font-size:.95rem;line-height:1.3;
  background:color-mix(in srgb,var(--c) 13%,#fff);border:1px solid color-mix(in srgb,var(--c) 30%,#fff);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,background-color .3s}
.tar-tile::before{content:"";flex:0 0 14px;height:14px;border-radius:3px;background:var(--c)}
.tar-tile:hover,.tar-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md);background:color-mix(in srgb,var(--c) 22%,#fff);color:var(--ink)}
.tar-tile--red{--c:#E5484D}.tar-tile--green{--c:#30A46C}.tar-tile--blue{--c:#0090FF}.tar-tile--orange{--c:#F76B15}
.tar-tile--purple{--c:#8E4EC6}.tar-tile--teal{--c:#12A594}.tar-tile--pink{--c:#D6409F}.tar-tile--amber{--c:#FFB224}
.tar-all{display:inline-flex;gap:6px;margin-top:var(--sp-3);font-weight:600;font-size:1rem;color:var(--primary);text-decoration:none}
.tar-all:hover{text-decoration:underline;text-underline-offset:3px}
.pg--home #behandelingen .group-head{flex-direction:column;align-items:flex-start;gap:4px}

/* ---- 46. Openingstijden per locatie + klein Google-icoon naast de locatienaam ---- */
.loc-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.g-link{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line);flex:0 0 auto;transition:transform .25s,box-shadow .25s,border-color .25s}
.g-link:hover,.g-link:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:transparent}
.map .info > div{flex:1 1 260px;min-width:0}
.hours--compact{margin:12px 0 0;max-width:340px}
.hours--compact td{padding:5px 2px;font-size:.88rem}
.hours td:last-child{white-space:nowrap}
.loc-title{display:block}
.loc-title .g-link{vertical-align:middle;margin-left:8px;position:relative;top:-2px}
.nowrap{white-space:nowrap}
/* Startpagina, Leuke tips: ook de "Binnenkort"-blokken krijgen dezelfde lift + schaduw als het eerste blok */
.pg--home #tips .cards .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}

/* Startpagina, Galerij: de drie knoppen linken naar de onderdelen op gallery.html, zelfde hover als daar */
.three a{display:inline-flex;align-items:center;min-height:44px;padding:8px 20px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--primary);text-decoration:none;transition:border-color .2s,background-color .2s}
.three a:hover,.three a:focus-visible{border-color:var(--primary);background:var(--primary-tint)}
/* Tarieven: "Alle tarieven en voorwaarden →" in hoofdletters, gecentreerd, even breed als de gekleurde tegels */
.tar-card .tar-all{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;margin-top:var(--sp-3);padding:12px 14px;border:1px solid var(--primary);border-radius:8px;
  text-transform:uppercase;letter-spacing:.06em;font-weight:600;font-size:1.06rem;color:var(--primary);text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,background-color .3s}
.tar-card .tar-all:hover,.tar-card .tar-all:focus-visible{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--primary-tint)}
.tar-card .tar-all{font-size:1rem;letter-spacing:.02em;padding:12px 10px;text-align:center;white-space:nowrap;gap:6px}
@media (max-width:1240px) and (min-width:1025px){.tar-card .tar-all{white-space:normal}}

.tar-card .tar-all{letter-spacing:0;gap:6px;padding:12px 8px}
@media (max-width:600px){.tar-card .tar-all{white-space:normal;font-size:.95rem}}
.tar-card .tar-all{display:block;text-align:center}

/* Tarieven: "Alle tarieven en voorwaarden →" als eigen blok onder het eerste tariefblok (rustiger, kleinere hoofdletters) */
.tar-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.tar-col > .tar-all{display:block;width:100%;margin:0;padding:15px 12px;text-align:center;white-space:normal;
  background:var(--surface);border:1px solid var(--primary);border-radius:var(--r-md);
  text-transform:uppercase;letter-spacing:.09em;font-weight:600;font-size:.8rem;line-height:1.4;color:var(--primary);text-decoration:none;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s,background-color .3s}
.tar-col > .tar-all:hover,.tar-col > .tar-all:focus-visible{text-decoration:none;transform:translateY(-4px);box-shadow:var(--shadow-md);background:var(--primary-tint)}

/* Ook interessant: gedeelde rijen (label, titel, tekst, link) over alle 3 blokken */
.related-sec .service-card__link .nowrap{white-space:nowrap}
.related-sec .service-card__link{text-wrap:balance}
@supports (grid-template-rows:subgrid){
  @media (min-width:901px){
    .related-sec .grid--3{row-gap:0}
    .related-sec .service-card{display:grid;grid-row:span 4;grid-template-rows:subgrid}
    .related-sec .service-card__body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:8px;justify-items:start}
    .related-sec .service-card__link{margin-top:0;align-self:start}
  }
}

/* ---- 38. Gestapeld logo (img/logo-maryjay.svg, 401 × 238) met hogere menubalk die krimpt bij scrollen ----
   Bovenaan de pagina: volledige balk met het hele logo. Na ± 100 px scrollen (JS zet .is-compact) krimpt de balk
   naar de oude hoogte en wisselt het logo naar beeldmerk + MARYJAY (img/logo-maryjay-compact.svg).
   De margin-bottom vangt het hoogteverschil op, zodat de inhoud eronder niet verspringt. */
:root{--header-h:7.5rem;--header-h-compact:4.75rem;--logo-h:6.25rem;--logo-h-compact:3.5rem}
@media (max-width:1240px){:root{--header-h:6.5rem;--header-h-compact:4.5rem;--logo-h:5.25rem;--logo-h-compact:3.25rem}}
@media (max-width:720px){:root{--header-h:5.75rem;--header-h-compact:4.125rem;--logo-h:4.875rem;--logo-h-compact:3rem}
  .header-book{display:none}}   /* mobiel: geen Afspraak-knop naast het menu; staat onderaan het uitklapmenu */
.site-header{transition:height .3s var(--ease-out),margin-bottom .3s var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur) var(--ease-out)}
.site-header.is-compact{height:var(--header-h-compact);margin-bottom:calc(var(--header-h) - var(--header-h-compact))}
.brand{position:relative;display:block;width:calc(var(--logo-h) * 1.6835);height:var(--logo-h);transition:height .3s var(--ease-out)}
.brand .brand__logo{position:absolute;left:0;top:50%;transform:translateY(-50%);width:auto;max-width:none;transition:opacity .3s var(--ease-out)}
.brand .brand__logo--full{height:100%}
.brand .brand__logo--compact{height:var(--logo-h-compact);opacity:0}
.site-header.is-compact .brand{height:var(--logo-h-compact)}
.site-header.is-compact .brand__logo--full{opacity:0}
.site-header.is-compact .brand__logo--compact{opacity:1}
@media (prefers-reduced-motion:reduce){.site-header,.brand,.brand .brand__logo{transition:none}}

/* ---- 39. Homepage: contactformulier onder de FAQ/afspraakbanner, boven "Twee locaties" (menu Contact → #contact) ---- */
.pg--home .tail--contact{padding-block:clamp(36px,6vh,72px)}
.pg--home .tail--contact .contact-sub{margin:0 0 var(--sp-3)}

/* ---- 40. Cookietoestemming (js/main.js §8): banner, voorkeurenvenster, cookieknop en kaarten na toestemming ---- */
.cc{position:fixed;z-index:200;left:clamp(12px,2vw,24px);bottom:clamp(12px,2vw,24px);width:min(460px,calc(100% - 24px));
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-md),0 2px 8px rgba(24,49,41,.08);
  padding:clamp(18px,2vw,26px);display:grid;gap:14px}
.cc[hidden],.cc-modal[hidden],.cc-fab[hidden],.cc-toast[hidden]{display:none}
.cc__title{font-size:1.45rem;margin:0}
.cc__text{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.cc__text a{color:var(--primary)}
.cc__actions{display:flex;flex-wrap:wrap;gap:8px}
.cc__actions .btn,.cc-modal__foot .btn{min-height:44px;padding:0 18px;font-size:.88rem;flex:1 1 auto}
.cc-modal{position:fixed;inset:0;z-index:210;display:grid;place-items:center;padding:16px;background:rgba(24,49,41,.38)}
html.cc-open{overflow:hidden}
.cc-modal__panel{width:min(640px,100%);max-height:min(88vh,860px);display:flex;flex-direction:column;background:var(--surface);color:var(--ink);
  border-radius:var(--r-md);box-shadow:var(--shadow-md),0 4px 16px rgba(24,49,41,.12);overflow:hidden}
.cc-modal__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px clamp(18px,3vw,28px);border-bottom:1px solid var(--line)}
.cc-modal__head h2{margin:0;font-size:1.6rem}
.cc-modal__close{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:none;color:var(--ink);cursor:pointer}
.cc-modal__close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.cc-modal__body{overflow:auto;padding:18px clamp(18px,3vw,28px);display:grid;gap:14px}
.cc-modal__foot{display:flex;flex-wrap:wrap;gap:8px;padding:14px clamp(18px,3vw,28px);border-top:1px solid var(--line)}
.cc__gpc{margin:0;padding:10px 14px;border-radius:var(--r-sm);background:var(--primary-tint);font-size:.88rem}
.cc__gpc[hidden]{display:none}
.cc__cat{border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.cc__cat-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.cc__cat h3{margin:0 0 4px;font-family:var(--font-body);font-size:1rem;font-weight:500}
.cc__cat p{margin:0;font-size:.86rem;line-height:1.5;color:var(--ink-soft)}
.cc__always{flex:none;font-size:.78rem;font-weight:500;color:var(--primary);background:var(--primary-tint);padding:4px 10px;border-radius:var(--r-pill);white-space:nowrap}
.cc__switch{position:relative;flex:none;width:48px;height:28px;cursor:pointer}
.cc__switch input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.cc__switch span{position:absolute;inset:0;border-radius:var(--r-pill);background:#b7c0bb;transition:background var(--dur) var(--ease-out)}
.cc__switch span::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform var(--dur) var(--ease-out)}
.cc__switch input:checked+span{background:var(--primary)}
.cc__switch input:checked+span::after{transform:translateX(20px)}
.cc__switch input:focus-visible+span{outline:2px solid var(--primary);outline-offset:3px}
.cc__more{margin-top:8px;font-size:.84rem}
.cc__more summary{cursor:pointer;color:var(--primary);min-height:32px;display:inline-flex;align-items:center}
.cc__cookies{width:100%;border-collapse:collapse;margin-top:6px;font-size:.8rem;display:block;overflow-x:auto}
.cc__cookies th,.cc__cookies td{text-align:left;vertical-align:top;padding:6px 8px;border-bottom:1px solid var(--line)}
.cc__cookies th{font-weight:500;color:var(--ink);white-space:nowrap}
.cc__none{font-style:italic}
.cc__meta{margin:0;font-size:.8rem;color:var(--ink-soft)}
.cc__meta code{font-size:.78rem;word-break:break-all}
.cc-fab{position:fixed;z-index:190;left:16px;bottom:16px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface);color:var(--primary);border:1px solid var(--line);box-shadow:var(--shadow-md),0 2px 6px rgba(24,49,41,.12);cursor:pointer}
.cc-fab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}
.cc-fab:hover{background:var(--primary-tint)}
body:has(.foot-slim) .cc-fab{bottom:72px}   /* boven de slanke voetbalk */
.cc-toast{position:fixed;z-index:220;left:50%;bottom:24px;transform:translateX(-50%);max-width:calc(100% - 32px);padding:12px 18px;border-radius:var(--r-md);
  background:var(--primary);color:var(--on-action, #fff);font-size:.9rem;box-shadow:var(--shadow-md)}
.cc-link{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-link:hover{color:var(--primary)}
@media (max-width:720px){
  .cc{left:12px;right:12px;bottom:12px;width:auto}
  .cc-modal{padding:0;place-items:end stretch}
  .cc-modal__panel{width:100%;max-height:92vh;border-radius:var(--r-md) var(--r-md) 0 0}
  .cc-modal__foot .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.cc__switch span,.cc__switch span::after{transition:none}}
.map__frame iframe:not([src]){display:none}
.map__gate{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;
  background:color-mix(in srgb,var(--surface) 55%,transparent)}
.map__gate p{margin:0;max-width:34ch;font-size:.82rem;color:var(--ink);background:var(--surface);padding:6px 12px;border-radius:var(--r-md)}
.map__gate .btn{min-height:44px;padding:0 20px;font-size:.88rem}
.privacy-table{width:100%;border-collapse:collapse;margin:var(--sp-2) 0 var(--sp-3);font-size:.92rem}
.privacy-table th,.privacy-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.privacy-table th{font-weight:500;background:var(--ground-2)}
@media (max-width:720px){.privacy-table{display:block;overflow-x:auto}}