/* ==========================================================================
   DuduM Esthetica — style.css
   Eén stylesheet voor de hele site (NL, EN, TR). Ingedeeld in genummerde
   secties: eerst lettertypen en basis (tokens, typografie, layout), daarna
   per onderdeel en per paginatype. Zoek de sectie op naam voordat je iets
   toevoegt. Cachebusting: verhoog ?v= in alle HTML-bestanden tegelijk.
   ========================================================================== */

/* ==========================================================================
   1. Lettertypen (lokaal gehost, alleen latin + latin-ext)
   ========================================================================== */

/* fraunces-latin-ext-wght-normal */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/fraunces-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* fraunces-latin-wght-normal */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/fraunces-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* fraunces-latin-ext-wght-italic */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/fraunces-latin-ext-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* fraunces-latin-wght-italic */
@font-face {
  font-family: 'Fraunces Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/fraunces-latin-wght-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* hanken-grotesk-latin-ext-wght-normal */
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
/* hanken-grotesk-latin-wght-normal */
@font-face {
  font-family: 'Hanken Grotesk Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ==========================================================================
   2. Basis: tokens, typografie, layout, knoppen, reveals
   ========================================================================== */

/* ————————————————————————————————————————————————
   DuduM Esthetica — design tokens & basis
   Richting: practitioner-led luxe naar het structurele voorbeeld van
   Clinic Beethovenstrasse (zie research/references/colette-camenisch/):
   edge-to-edge display-typografie, 60px gutters, uniform 80px sectieritme,
   typografische aanbod-rijen, kalme 1.2s reveals — met DuduM's eigen
   palet (porselein/espresso/amber/salie) en Fraunces + Hanken Grotesk.
   ———————————————————————————————————————————————— */

:root {
  /* Kleur — licht roze × beige, met goud als accent (klantkeuze 2026-09).
     Goud in drie lagen i.v.m. leesbaarheid (WCAG AA):
     --gold       licht goud — decoratief (dots, lijnen, chips) en op donkere vlakken
     --gold-word  gekleurde wóórden op groot formaat (≥3:1 op de lichte gronden)
     --gold-text  kleine tekst/links/kickers (≥4.5:1) */
  /* Flyer-palet (klant-asset 2026-09): crème ondergrond, uitgesproken roze
     vlakken, goud op crème. Flyerlogica: goud leest op crème/wit,
     op roze vlakken is de tekst donker. */
  --ground: #fdfaf4;            /* witachtig crème (klantkeuze) */
  --ground-warm: #fffefb;       /* vrijwel wit paneel */
  --rose: #fdebef;              /* ultralicht roze (klantkeuze) — accentvlakken, footer */
  --rose-soft: #fef6f8;         /* bijna-wit roze — voor de zachte roze-overgang */
  --ink: #2a211b;
  --ink-soft: rgba(42, 33, 27, 0.62);
  --ink-faint: rgba(42, 33, 27, 0.4);
  --line: rgba(42, 33, 27, 0.14);
  --line-strong: rgba(42, 33, 27, 0.5);
  --gold: #cda55c;
  --gold-word: #a67f2f;
  --gold-text: #86611f;
  --accent-huid: var(--gold);
  --accent-huid-text: var(--gold-text);
  /* Haar-pijler volgt hetzelfde roze/goud (klantkeuze: geen groen) */
  --accent-haar: var(--gold);
  --accent-haar-text: var(--gold-text);
  --tint-huid: #fdf1f4;         /* ultrazacht roze — fotoslots, videoslot, selectie */
  --tint-haar: var(--tint-huid);
  --ink-mid: rgba(42, 33, 27, 0.78); /* secundaire tekst op roze vlakken */
  --on-ink: #f8f0ea;
  --on-ink-soft: rgba(248, 240, 234, 0.68);

  /* Typografie — schaal naar referentieverhoudingen (144/72/57.6/28.8/16/14) */
  --font-display: 'Fraunces Variable', Georgia, serif;
  --font-body: 'Hanken Grotesk Variable', 'Segoe UI', system-ui, sans-serif;
  --size-display: clamp(3rem, 1rem + 9.6vw, 9rem);        /* hero-titel, 144px @1440 */
  --size-statement: clamp(1.75rem, 1rem + 3.4vw, 4rem);   /* welkomststatement, 64px */
  --size-quote: clamp(1.9rem, 1.1rem + 3.6vw, 4.5rem);    /* quote, 72px */
  --size-h2: clamp(1.9rem, 1.1rem + 2.9vw, 3.6rem);       /* sectiekoppen, 57.6px */
  --size-h3: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  --size-row: clamp(1.5rem, 1rem + 2.6vw, 3.25rem);       /* aanbod-rijen */
  --size-lede: clamp(1.15rem, 1.05rem + 0.55vw, 1.5rem);
  --size-body: 1.0625rem;
  --size-small: 0.9375rem;
  --size-label: 0.8125rem;

  /* Ritme — referentie: uniform 80px, diep 160px, gutter 60px @1440 */
  --space-section: clamp(3.5rem, 2rem + 3.5vw, 5rem);
  --space-deep: clamp(6rem, 4rem + 7vw, 10rem);
  --space-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  --gutter: clamp(1.25rem, 0.5rem + 3.9vw, 3.75rem);
  --measure: 65ch;
  --measure-px: 700px;
  --radius: 8px;
  --radius-media: 16px;
  --bar-h: 5.25rem;

  /* Beweging — traag en kalm (referentie: 1.5s quartOut reveals, 0.2s hovers) */
  --ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-hover: cubic-bezier(0.23, 1, 0.32, 1);
  --dur: 1200ms;
  --dur-med: 800ms;
  --dur-fast: 200ms;
}

/* Basis */
* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: 1.65;
  font-variation-settings: 'wght' 400;
  text-rendering: optimizeLegibility;
  padding-top: var(--bar-h);
}
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--size-display); line-height: 0.92; letter-spacing: -0.04em; font-variation-settings: 'opsz' 144, 'wght' 380; }
h2 { font-size: var(--size-h2); line-height: 1.02; font-variation-settings: 'opsz' 72, 'wght' 400; }
h3 { font-size: var(--size-h3); font-variation-settings: 'opsz' 40, 'wght' 460; }
p { margin: 0 0 1em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-color: var(--accent-huid); text-underline-offset: 3px; transition: color var(--dur-fast) var(--ease-hover); }
a:hover { color: var(--accent-huid-text); }
:focus-visible { outline: 2px solid var(--accent-huid-text); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--tint-huid); }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--on-ink); padding: 0.75rem 1.25rem;
}
.skip-link:focus { left: 0; }

/* Layout — brede opzet met 60px gutters (referentie), tekst gemeten */
.container { max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); position: relative; z-index: 1; }
.section { padding-block: var(--space-section); position: relative; }
.section--deep { padding-block: var(--space-deep); }
/* Kleursecties vloeien altijd via de paginakleur in en uit — zo is élke
   grens tussen secties een zachte overgang, op elke pagina, in elke volgorde. */
.section--warm {
  background: linear-gradient(180deg, var(--ground) 0%, var(--ground-warm) 22%, var(--ground-warm) 78%, var(--ground) 100%);
}
.section--ink {
  background: linear-gradient(180deg, var(--ground) 0%, var(--rose) 38%, var(--rose) 72%, var(--ground) 100%);
  color: var(--ink);
}
.section--ink p { color: var(--ink-mid); }
.section--haar {
  background: linear-gradient(180deg, var(--ground) 0%, var(--tint-haar) 25%, var(--tint-haar) 75%, var(--ground) 100%);
}
.measure { max-width: var(--measure); }

/* Kicker-label */
.kicker {
  display: block;
  font-size: var(--size-label);
  font-variation-settings: 'wght' 640;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-huid-text);
  margin-bottom: 1.25rem;
}
.kicker--haar { color: var(--accent-haar-text); }
.section--ink .kicker { color: var(--ink); }

.lede { font-size: var(--size-lede); line-height: 1.5; color: var(--ink-soft); }
.section--ink .lede { color: var(--ink-mid); }

/* Annotatie-accent — t.z.t. vervangen door Dudu's gescande handschrift */
.annotation {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 30, 'wght' 380;
  font-size: 1.3rem;
  color: var(--accent-huid-text);
}

/* Knoppen — ingetogen (referentie: tekst + pijl boven pill-geweld) */
.btn {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-variation-settings: 'wght' 560;
  line-height: 1;
  padding: 0.95rem 1.7rem;
  border-radius: 99px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--on-ink);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) var(--ease-hover);
}
.btn:hover { background: var(--accent-huid-text); border-color: var(--accent-huid-text); color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn .arrow { transition: transform var(--dur-fast) var(--ease-hover); }
.btn:hover .arrow { transform: translateX(3px); }

/* Tekstlink met pijl (referentie-stijl "Termin ↗") */
.arrow-link {
  display: inline-flex; align-items: baseline; gap: 0.45rem;
  text-decoration: none; font-variation-settings: 'wght' 540;
}
.arrow-link .arrow { transition: transform var(--dur-fast) var(--ease-hover); }
.arrow-link:hover .arrow { transform: translate(2px, -2px); }

/* Typografische rijen — referentieschaal: grote serif-namen, hairlines full-width */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows li { border-bottom: 1px solid var(--line); }
.row-link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.2rem 2rem;
  align-items: baseline;
  padding: 1.4rem 0.25rem;
  text-decoration: none;
  transition: padding-left var(--dur-fast) var(--ease-hover);
}
.row-link:hover { padding-left: 1rem; }
.row-link .row-name {
  font-family: var(--font-display);
  font-size: var(--size-row);
  line-height: 1.05;
  font-variation-settings: 'opsz' 60, 'wght' 390;
  letter-spacing: -0.02em;
  transition: color var(--dur-fast) var(--ease-hover);
}
.row-link:hover .row-name { color: var(--accent-huid-text); }
.row-link .row-sub { grid-column: 1; color: var(--ink-soft); font-size: var(--size-small); max-width: 55ch; }
.row-link .row-meta {
  grid-column: 2; grid-row: 1 / span 2;
  align-self: center;
  display: flex; align-items: center; gap: 1.5rem;
  color: var(--ink-soft); font-size: var(--size-small);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-link .arrow { color: var(--ink); font-size: 1.3rem; transition: transform var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover); }
.row-link:hover .arrow { transform: translateX(6px); color: var(--accent-huid-text); }
/* Grote variant (homepage-aanbod) */
.rows--index .row-link { padding-block: 1.6rem; }
.rows--index .row-name { font-size: clamp(1.7rem, 1rem + 3.1vw, 3.6rem); }

/* Rijen met de roze veeg-hover van het aanbod-patroon */
.rows--sweep li { position: relative; overflow: hidden; }
.rows--sweep li::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--rose) 0%, var(--rose-soft) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s var(--ease);
  pointer-events: none;
}
.rows--sweep li:hover::before { transform: scaleX(1); }
.rows--sweep .row-link { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .rows--sweep li::before { transition: none; }
}
@media (max-width: 640px) {
  .row-link { grid-template-columns: 1fr; position: relative; padding-right: 2.4rem; }
  .row-link .row-meta { grid-row: auto; grid-column: 1; padding-top: 0.3rem; }
  .row-link .arrow { position: absolute; right: 0.35rem; top: 1.65rem; }
  /* Paginakoppen: de display-maat is voor de desktop bedoeld */
  h1 { font-size: clamp(2.2rem, 11vw, 2.75rem); line-height: 0.98; }
  .rows--index .row-link { padding-block: 1.15rem; }
  .rows--index .row-name { font-size: 1.45rem; }
}

/* Prijslijsten — menukaartstijl: label · puntjeslijn · duur · prijs */
.price-group { max-width: 46rem; }
.pg-title {
  font-family: var(--font-display);
  font-size: 1.2rem; font-variation-settings: 'opsz' 30, 'wght' 480;
  margin: 0 0 0.7rem;
}
.pg-rows { list-style: none; margin: 0; padding: 0; }
.pg-row {
  display: flex; align-items: baseline; gap: 0.7rem;
  padding: 0.62rem 0;
  font-size: var(--size-small);
}
.pg-label { flex: 0 1 auto; }
.pg-leader {
  flex: 1 1 2rem; min-width: 2rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--gold) 55%, var(--line-strong));
  transform: translateY(-0.3em);
}
.pg-dur { color: var(--ink-soft); white-space: nowrap; font-size: 0.86em; }
.pg-price {
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'wght' 640;
  white-space: nowrap;
}
@media (max-width: 480px) {
  .pg-dur { font-size: 0.78em; }
}

/* FAQ / inklapbare blokken */
.faq { border-top: 1px solid var(--line); max-width: 46rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 0.25rem;
  font-variation-settings: 'wght' 560;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-family: var(--font-display); font-size: 1.4rem; color: var(--accent-huid-text); transition: transform var(--dur-fast) var(--ease-hover); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .faq-a { padding: 0 0.25rem 1.25rem; color: var(--ink-soft); max-width: 58ch; }

/* Foto-slot: eerlijke placeholder tot de fotoshoot (geen stock, geen AI) */
.photo-slot {
  position: relative;
  background: var(--tint-huid);
  border: 1px solid var(--line);
  border-radius: var(--radius-media);
  display: grid; place-items: center;
  min-height: 260px;
  overflow: hidden;
}
.photo-slot--haar { background: var(--tint-haar); }
.photo-slot .label {
  font-size: var(--size-label);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-faint);
  text-align: center; padding: 1rem;
}
.photo-frame { border-radius: var(--radius-media); overflow: hidden; }
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }

/* Reveals — traag (1.2s), quartOut, eenmalig; masked line-reveal voor display-titels.
   Gescoped op html.js zodat content zonder JavaScript zichtbaar blijft. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal-stagger > * { opacity: 0; transform: translateY(22px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.js .reveal-stagger.in > * { opacity: 1; transform: none; }
.js .reveal-stagger.in > *:nth-child(2) { transition-delay: 90ms; }
.js .reveal-stagger.in > *:nth-child(3) { transition-delay: 180ms; }
.js .reveal-stagger.in > *:nth-child(4) { transition-delay: 270ms; }
.js .reveal-stagger.in > *:nth-child(5) { transition-delay: 360ms; }
.js .reveal-stagger.in > *:nth-child(6) { transition-delay: 450ms; }
/* Masked line: <span class="line-mask"><span class="line-inner">…</span></span> */
.line-mask { display: block; overflow: hidden; }
.line-mask .line-inner { display: block; }
.js .reveal-lines .line-inner { transform: translateY(112%); transition: transform var(--dur) var(--ease); }
.js .reveal-lines.in .line-inner { transform: none; }
.js .reveal-lines.in .line-mask:nth-child(2) .line-inner { transition-delay: 110ms; }
.js .reveal-lines.in .line-mask:nth-child(3) .line-inner { transition-delay: 220ms; }
.js .reveal-media { opacity: 0; transform: scale(1.015); transition: opacity var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.js .reveal-media.in { opacity: 1; transform: none; }

/* Behandelingen-ticker — zelfde roze als de sectie erboven, zonder lijnen */
.ticker { overflow: hidden; white-space: nowrap; background: var(--rose); padding-block: 1.2rem; }
.ticker__track { display: inline-flex; gap: 3.5rem; padding-right: 3.5rem; animation: ticker 60s linear infinite; will-change: transform; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
  font-family: var(--font-display); font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem);
  font-variation-settings: 'opsz' 40, 'wght' 390; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none; display: inline-flex; align-items: baseline; gap: 3.5rem;
}
.ticker__sep { color: var(--accent-huid); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .reveal-stagger > * , .js .reveal-media { opacity: 1; transform: none; transition: none; }
  .js .reveal-lines .line-inner { transform: none; transition: none; }
  .btn, .row-link, .row-link .arrow, .arrow-link .arrow { transition: none; }
  .ticker__track { animation: none; }
  .ticker { white-space: normal; }
  .ticker__track { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
}

.overflow-x { overflow-x: auto; }

/* Bloesemtak — statisch fotografisch achtergronddetail vanuit de paginarand.
   overflow-x: clip vangt de bleed aan de rand zonder sticky te breken. */
html, body { overflow-x: clip; }

/* Scroll-bloesemtak (ScrollBloom, z-index 1) loopt óver de gekleurde
   sectievlakken; alle sectie-inhoud ligt er met z-index 2 weer boven,
   zodat de tak wel zichtbaar blijft maar nooit tekst of media bedekt. */
.section > *, .hero > * { position: relative; z-index: 2; }

/* ————— Menu-open: de pagina wordt een afgeronde, intern scrollbare
   kaart die naar rechts schuift, met het menupaneel links op het
   donkere vlak (referentiepatroon). ————— */
:root {
  --menu-w: clamp(20rem, 30vw, 30rem);
  /* Zware, soepele kaartbeweging (referentiegevoel) */
  --menu-ease: cubic-bezier(0.7, 0, 0.25, 1);
}
@media (max-width: 900px) {
  /* Telefoon/tablet: menu over de volle breedte, geen pagina-kaart ernaast */
  :root { --menu-w: 100vw; }
}
.page-shell { min-height: 100vh; }
body.menu-open { overflow: hidden; }
/* Scrollbalkruimte blijft gereserveerd, ook als het menu de pagina-scroll
   uitzet: anders wordt de pagina bij openen en sluiten 15px breder/smaller */
html { scrollbar-gutter: stable; }
body.menu-open .page-shell {
  position: fixed;
  z-index: 45;
  left: 0; top: 0;
  /* Even breed als de pagina (zonder scrollbalk) en met dezelfde ruimte
     voor de header als de body: zo staat de inhoud in de kaart op exact
     dezelfde plek als op de pagina en springt er bij sluiten niets */
  width: 100%;
  height: 100vh;
  padding-top: var(--bar-h);
  overflow-y: auto;
  overflow-x: clip;
  background: var(--ground);
  border-radius: 0;
  transform-origin: top left;
  transform: translate(0, 0) scale(1);
  transition:
    transform 0.7s var(--menu-ease),
    border-radius 0.7s var(--menu-ease),
    box-shadow 0.7s var(--menu-ease);
  /* Kaart scrolt met het wiel; geen zichtbare scrollbalk in de kaart */
  scrollbar-width: none;
}
body.menu-open .page-shell::-webkit-scrollbar { display: none; }
/* De héle pagina blijft in beeld, alleen verkleind: uitzoomen naar de
   ruimte rechts van het paneel, verticaal gecentreerd (referentie).
   --menu-scale en --menu-ty worden bij het openen door de header gezet. */
body.menu-open.menu-in .page-shell {
  transform: translate(var(--menu-w), var(--menu-ty, 7vh)) scale(var(--menu-scale, 0.68));
  border-radius: calc(var(--radius-media) + 16px);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.55);
}

/* Telefoon/tablet: de pagina blijft niet als kaart in beeld maar wijkt
   terug (licht verkleinen en vervagen) naar het donkere vlak, zodat alleen
   het menu te zien is. Zichtbaarheid valt pas weg na de animatie, zodat
   schermlezers en focus de verborgen pagina overslaan. */
@media (max-width: 900px) {
  body.menu-open .page-shell {
    transform-origin: 50% 40%;
    transition:
      transform 0.6s var(--menu-ease),
      opacity 0.45s ease;
  }
  body.menu-open.menu-in .page-shell {
    transform: translateY(2.5vh) scale(0.93);
    opacity: 0;
    visibility: hidden;
    border-radius: calc(var(--radius-media) + 16px);
    box-shadow: none;
    transition:
      transform 0.6s var(--menu-ease),
      opacity 0.45s ease,
      visibility 0s linear 0.6s;
  }
}

/* Korte scroll-lock bij binnenkomst: eerst de hero-choreografie,
   daarna pas de scroll (HomeView zet en verwijdert de klasse). */
html.intro-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  body.menu-open .page-shell { transition: none; }
}
.bloom-branch {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  height: auto;
}
.bloom-branch.flip { transform: scaleX(-1); }

/* ==========================================================================
   3. Header en menu
   ========================================================================== */

  .site-bar {
    position: fixed; inset: 0 0 auto 0; z-index: 60;
    height: var(--bar-h);
    background: color-mix(in srgb, var(--ground) 90%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--line);
    transition: background 0.5s var(--ease), border-color 0.5s var(--ease);
  }
  .bar-inner {
    height: 100%;
    padding-inline: var(--gutter);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  }
  .menu-toggle {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 0.6rem;
    background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
    font: inherit; font-size: 0.95rem; font-variation-settings: 'wght' 540; color: var(--ink);
    transition: color 0.5s var(--ease);
  }
  /* Hamburger ⇄ kruisje (zelfde knop, morph) */
  .menu-icon { position: relative; width: 22px; height: 12px; display: inline-block; }
  .menu-icon span {
    position: absolute; left: 0; width: 22px; height: 1.5px; background: currentColor;
    transition: transform 0.45s var(--ease), top 0.45s var(--ease), width var(--dur-fast) var(--ease-hover);
  }
  .menu-icon span:first-child { top: 2px; }
  .menu-icon span:last-child { top: 9px; }
  .menu-toggle:hover .menu-icon span:last-child { width: 14px; }
  body.menu-in .menu-icon span:first-child { top: 5.5px; transform: rotate(45deg); }
  body.menu-in .menu-icon span:last-child { top: 5.5px; width: 22px !important; transform: rotate(-45deg); }

  .wordmark { text-decoration: none; display: flex; align-items: center; justify-content: center; }
  .wordmark-logo { width: clamp(10rem, 16vw, 13.5rem); height: auto; }
  .bar-right {
    justify-self: end;
    display: inline-flex; align-items: center; gap: 1.4rem;
  }
  .lang-switch {
    display: inline-flex; align-items: center; gap: 0.45rem;
    font-size: 0.78rem; letter-spacing: 0.08em;
    color: var(--ink-soft);
    font-variation-settings: 'wght' 560;
  }
  .lang-switch a { color: var(--ink-soft); text-decoration: none; padding: 0.2rem 0.1rem; }
  .lang-switch a:hover { color: var(--gold-word); }
  .lang-current { color: var(--ink); font-variation-settings: 'wght' 700; }
  .lang-sep { color: var(--line-strong); }
  .bar-cta { font-size: 0.95rem; color: var(--ink); transition: color 0.5s var(--ease); }
  .bar-cta .arrow { color: var(--accent-huid-text); }

  /* Header op het donkere vlak zolang het menu open is; gekoppeld aan
     menu-in zodat hij bij sluiten meteen, gelijk met de pagina, terugkleurt
     in plaats van 680ms doorzichtig boven de terugkerende pagina te hangen */
  body.menu-in .site-bar { background: transparent; backdrop-filter: none; border-color: transparent; }
  body.menu-in .menu-toggle,
  body.menu-in .bar-cta { color: var(--ground); }
  body.menu-in .lang-switch a { color: color-mix(in srgb, var(--ground) 55%, var(--ink)); }
  body.menu-in .lang-current { color: var(--ground); }

  /* ————— Donker vlak + menupaneel ————— */
  .menu-scrim {
    position: fixed; inset: 0; z-index: 40;
    /* Ons palet, duidelijk aanwezig: warme rosé-espresso met een echte
       roze gloed linksboven en een gouden gloed rechtsonder. */
    background:
      radial-gradient(130% 110% at 12% -6%, color-mix(in srgb, var(--rose) 38%, transparent), transparent 58%),
      radial-gradient(100% 80% at 104% 110%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 52%),
      linear-gradient(168deg, #3b2a2b 0%, #2e2124 55%, #33222a 100%);
    opacity: 0; transition: opacity 0.55s var(--ease);
  }
  .menu-scrim.show { opacity: 1; }

  /* Gesloten menu is écht weg: zonder deze regel wint display:flex van
     het hidden-attribuut en vangt het onzichtbare paneel alle kliks
     aan de linkerkant van de pagina af */
  .site-menu[hidden] { display: none; }
  .site-menu {
    position: fixed; z-index: 50;
    left: 0; top: var(--bar-h); bottom: 0;
    width: var(--menu-w);
    padding: 1.6rem clamp(2rem, 4vw, 3.4rem) 2.2rem clamp(2rem, 3.4vw, 3rem);
    color: var(--ground);
    display: flex; flex-direction: column;
    overflow-y: auto;
    /* Dunne gouden scrollbalk i.p.v. de witte systeembalk op het donkere vlak */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--gold) 45%, transparent) transparent;
    transform: translateX(-40px);
    opacity: 0;
    transition: transform 0.6s var(--ease), opacity 0.55s var(--ease);
  }
  .site-menu.show { transform: none; opacity: 1; }
  /* Telefoon/tablet: paneel vult het scherm en komt van onderen in beeld */
  @media (max-width: 900px) {
    .site-menu { transform: translateY(18px); padding-inline: var(--gutter); }
    .site-menu::before { left: var(--gutter); right: var(--gutter); }
  }
  /* Dun gouden accentlijntje bovenaan het paneel, het huiskenmerk van
     de kaarten en popovers op de site */
  .site-menu::before {
    content: '';
    position: absolute;
    top: 0.4rem; left: clamp(2rem, 3.4vw, 3rem); right: clamp(2rem, 4vw, 3.4rem);
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 0 0 2px 2px;
  }

  /* Zoekveld met onderlijn + vergrootglas (referentiepatroon) */
  .menu-search { position: relative; margin-bottom: clamp(1.6rem, 5vh, 3rem); }
  .menu-search input {
    width: 100%;
    background: none; border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 42%, var(--ink));
    padding: 0.55rem 2rem 0.55rem 0;
    font: inherit; font-size: 0.92rem;
    color: var(--ground);
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-hover);
  }
  .menu-search input::placeholder { color: color-mix(in srgb, var(--ground) 48%, var(--ink)); }
  .menu-search input:focus { border-color: var(--gold); }
  .menu-search input::-webkit-search-cancel-button { display: none; }
  .menu-search button {
    position: absolute; right: 0; top: 0.45rem;
    background: none; border: 0; padding: 0.2rem; cursor: pointer;
    color: color-mix(in srgb, var(--ground) 60%, var(--ink));
    transition: color var(--dur-fast) var(--ease-hover);
  }
  .menu-search button:hover { color: var(--gold); }
  .menu-results {
    list-style: none; margin: 0.6rem 0 0; padding: 0;
    display: grid; gap: 0.15rem;
  }
  .menu-results a {
    display: block;
    padding: 0.3rem 0;
    color: color-mix(in srgb, var(--ground) 72%, var(--ink));
    text-decoration: none; font-size: 0.9rem;
    transition: color var(--dur-fast) var(--ease-hover), padding-left var(--dur-fast) var(--ease-hover);
  }
  .menu-results a:hover, .menu-results a.hl { color: var(--gold); padding-left: 0.35rem; }
  .menu-results .none { color: color-mix(in srgb, var(--ground) 45%, var(--ink)); font-size: 0.85rem; font-style: italic; }

  /* Grote serif-navigatie: gedimd, licht op bij hover */
  .menu-big { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
  .big-link {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 4.3vh, 2.7rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    font-variation-settings: 'opsz' 60, 'wght' 380;
    color: color-mix(in srgb, var(--ground) 52%, var(--ink));
    text-decoration: none;
    transition: color 0.35s var(--ease-hover);
  }
  .big-link:hover { color: var(--rose); }
  .big-link.active { color: var(--gold); }

  /* Twee schermen op dezelfde plek; het actieve schuift in beeld */
  .menu-nav { display: grid; margin-bottom: auto; }
  .menu-view {
    grid-area: 1 / 1;
    display: flex; flex-direction: column;
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0s;
  }
  .menu-view--sub { opacity: 0; transform: translateX(28px); visibility: hidden; }
  .menu-nav.is-sub .menu-view--main { opacity: 0; transform: translateX(-28px); visibility: hidden; }
  .menu-nav.is-sub .menu-view--sub { opacity: 1; transform: none; visibility: visible; }
  /* Het verdwijnende scherm wordt pas na de fade onzichtbaar */
  .menu-view--sub, .menu-nav.is-sub .menu-view--main {
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease), visibility 0s linear 0.4s;
  }
  .menu-nav.is-sub .menu-view--sub {
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), visibility 0s linear 0s;
  }

  /* "Behandelingen" leidt naar het tweede scherm: zelfde serif, gouden pijl */
  .drill {
    display: inline-flex; align-items: baseline; gap: 0.55rem;
    background: none; border: 0; padding: 0; margin: 0;
    cursor: pointer; text-align: left;
  }
  .drill-arrow {
    font-family: var(--font-body);
    font-size: 0.5em;
    color: var(--gold);
    transform: translateY(-0.18em);
    transition: transform 0.35s var(--ease-hover);
  }
  .drill:hover .drill-arrow { transform: translate(5px, -0.18em); }

  .drill-back {
    align-self: flex-start;
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: none; border: 0; padding: 0.2rem 0; margin: 0 0 1.1rem;
    cursor: pointer;
    font: inherit; font-size: 0.85rem; letter-spacing: 0.04em;
    font-variation-settings: 'wght' 560;
    color: color-mix(in srgb, var(--ground) 72%, var(--ink));
    transition: color var(--dur-fast) var(--ease-hover);
  }
  .drill-back span { color: var(--gold); transition: transform 0.35s var(--ease-hover); }
  .drill-back:hover { color: var(--rose); }
  .drill-back:hover span { transform: translateX(-4px); }
  .sub-kicker {
    margin: 0 0 1rem;
    font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold);
    font-variation-settings: 'wght' 600;
  }
  /* Huidvragen: dezelfde serif, iets kleiner omdat de namen langer zijn */
  .menu-big--sub { margin: 0; gap: 0.45rem; }
  .menu-big--sub .big-link { font-size: clamp(1.4rem, 3.5vh, 2.15rem); }
  .sub-all {
    margin-top: clamp(1.2rem, 3vh, 1.8rem);
    align-self: flex-start;
    font-size: 0.9rem; letter-spacing: 0.02em;
    font-variation-settings: 'wght' 580;
    color: var(--gold);
    text-decoration: none;
  }
  .sub-all:hover { color: var(--rose); }
  .sub-all .arrow { display: inline-block; transition: transform 0.35s var(--ease-hover); }
  .sub-all:hover .arrow { transform: translateX(4px); }
  /* Huidvragen komen na elkaar in beeld zodra het scherm opent */
  .menu-big--sub li { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
  .menu-nav.is-sub .menu-big--sub li { opacity: 1; transform: none; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(1) { transition-delay: 0.08s; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(2) { transition-delay: 0.12s; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(3) { transition-delay: 0.16s; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(4) { transition-delay: 0.2s; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(5) { transition-delay: 0.24s; }
  .menu-nav.is-sub .menu-big--sub li:nth-child(6) { transition-delay: 0.28s; }
  @media (prefers-reduced-motion: reduce) {
    .menu-view, .menu-big--sub li, .drill-arrow, .drill-back span, .sub-all .arrow { transition: none; }
  }

  .menu-small { list-style: none; margin: clamp(1.4rem, 4vh, 2.6rem) 0 0; padding: 0; display: grid; gap: 0.55rem; }
  .menu-small a {
    color: color-mix(in srgb, var(--ground) 78%, var(--ink));
    text-decoration: none; font-size: 0.92rem; font-variation-settings: 'wght' 540;
    transition: color var(--dur-fast) var(--ease-hover);
  }
  .menu-small a:hover { color: var(--rose); }
  .menu-small .arrow { color: var(--gold); }

  .menu-langs {
    margin-top: clamp(1.2rem, 3.5vh, 2rem);
    display: inline-flex; gap: 0.55rem; align-items: center;
    font-size: 0.8rem; letter-spacing: 0.08em; font-variation-settings: 'wght' 600;
  }
  .menu-langs a { color: color-mix(in srgb, var(--ground) 50%, var(--ink)); text-decoration: none; }
  .menu-langs a:hover { color: var(--gold); }
  .ml-current { color: var(--gold); }
  .ml-sep { color: color-mix(in srgb, var(--ground) 30%, var(--ink)); }

  /* Kalme stagger op de paneel-items */
  .site-menu .menu-search,
  .site-menu .menu-view--main .menu-big > li,
  .site-menu .menu-small li,
  .site-menu .menu-langs {
    opacity: 0; transform: translateY(10px);
    transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  }
  .site-menu.show .menu-search,
  .site-menu.show .menu-view--main .menu-big > li,
  .site-menu.show .menu-small li,
  .site-menu.show .menu-langs { opacity: 1; transform: none; }
  .site-menu.show .menu-search { transition-delay: 0.08s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(1) { transition-delay: 0.12s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(2) { transition-delay: 0.16s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(3) { transition-delay: 0.2s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(4) { transition-delay: 0.24s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(5) { transition-delay: 0.28s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(6) { transition-delay: 0.32s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(7) { transition-delay: 0.36s; }
  .site-menu.show .menu-view--main .menu-big > li:nth-child(8) { transition-delay: 0.4s; }
  .site-menu.show .menu-small li:nth-child(1) { transition-delay: 0.42s; }
  .site-menu.show .menu-small li:nth-child(2) { transition-delay: 0.46s; }
  .site-menu.show .menu-small li:nth-child(3) { transition-delay: 0.5s; }
  .site-menu.show .menu-small li:nth-child(4) { transition-delay: 0.54s; }
  .site-menu.show .menu-langs { transition-delay: 0.6s; }

  @media (max-width: 640px) {
    .wordmark-logo { width: 8.6rem; }
    .menu-word { position: absolute; left: -9999px; }
    .bar-right { gap: 0.8rem; }
    .bar-cta { font-size: 0.88rem; }
    .lang-switch { font-size: 0.72rem; gap: 0.3rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .site-menu, .menu-scrim, .menu-icon span,
    .site-menu .menu-search, .site-menu .menu-big li,
    .site-menu .menu-small li, .site-menu .menu-langs { transition: none; }
  }

/* ==========================================================================
   4. Footer
   ========================================================================== */

  /* Sluit naadloos aan op de roze PreFooter-strook en vervaagt onderaan naar bijna-wit */
  .site-footer { background: linear-gradient(180deg, var(--rose) 0%, var(--rose) 30%, var(--rose-soft) 100%); color: var(--ink); margin-top: 0; }
  .site-footer a { color: var(--ink-mid); text-decoration: none; }
  .site-footer a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); }
  .footer-grid {
    display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.1fr; gap: 3rem;
    padding-block: 4.5rem 3rem;
  }
  .footer-logo { width: min(280px, 100%); height: auto; margin-bottom: 1rem; }
  .footer-tag { color: var(--ink-mid); font-size: var(--size-small); }
  .footer-sign { color: var(--ink); margin-top: 1.2rem; }
  .footer-anbos { margin-top: 1.6rem; opacity: 0.9; }
  .footer-anbos img { width: 120px; height: auto; }
  .footer-h {
    font-family: var(--font-body); font-size: var(--size-label);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); font-variation-settings: 'wght' 660;
    margin-bottom: 1rem;
  }
  .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--size-small); }
  .footer-az { max-height: 16.5rem; overflow: hidden auto; padding-right: 0.5rem; }
  .site-footer address { font-style: normal; font-size: var(--size-small); color: var(--ink-mid); margin-bottom: 0.8rem; }
  .footer-hours { font-size: var(--size-small); color: var(--ink-mid); }
  .footer-note { color: var(--ink-mid); }
  .footer-contact { margin-block: 0.9rem !important; }
  /* Sociale pictogrammen: rustige cirkels die bij hover goud oplichten */
  .footer-social { display: flex !important; gap: 0.7rem; }
  .footer-col .footer-social { margin-top: 1.1rem; }
  .footer-social a {
    display: grid; place-items: center;
    width: 2.4rem; height: 2.4rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    color: var(--ink-mid);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-hover),
      border-color var(--dur-fast) var(--ease-hover),
      background-color var(--dur-fast) var(--ease-hover),
      transform var(--dur-fast) var(--ease-hover);
  }
  .footer-social a:hover {
    color: var(--gold-text);
    border-color: var(--gold);
    background: color-mix(in srgb, var(--gold) 12%, transparent);
    transform: translateY(-2px);
    text-decoration: none;
  }
  .footer-social a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
  .social-icon { display: grid; place-items: center; }
  .social-icon svg { display: block; }
  @media (prefers-reduced-motion: reduce) {
    .footer-social a, .footer-social a:hover { transition: none; transform: none; }
  }
  .footer-bottom {
    display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-block: 1.5rem; font-size: 0.85rem; color: var(--ink-mid);
  }
  .footer-bottom p { margin: 0; }
  .footer-credit a { font-variation-settings: 'wght' 620; }
  .footer-credit a:hover { color: var(--gold-text); text-decoration-color: var(--gold); }
  @media (max-width: 940px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
  .footer-acc > summary { list-style: none; cursor: default; }
  .footer-acc > summary::-webkit-details-marker { display: none; }

  /* Telefoon: merk gecentreerd, contact als kaart, navigatie inklapbaar */
  @media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; gap: 0; padding-block: 2.8rem 0.6rem; }

    .footer-brand { display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: 1.9rem; }
    .footer-logo { width: 200px; margin-bottom: 0.7rem; }
    .footer-tag { margin: 0; max-width: 26ch; }
    .footer-sign { margin-top: 0.6rem; }
    .footer-anbos { margin-top: 1rem; }
    .footer-anbos img { width: 88px; }

    .footer-visit {
      order: 1;
      position: relative;
      text-align: center;
      background: color-mix(in srgb, #fff 58%, transparent);
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) + 6px);
      padding: 1.5rem 1.2rem 1.35rem;
      margin-bottom: 1.8rem;
    }
    .footer-visit::before {
      content: '';
      position: absolute; top: 0; left: 1.3rem; right: 1.3rem;
      height: 2px;
      background: linear-gradient(90deg, transparent, var(--gold), transparent);
    }
    .footer-visit .footer-h { margin-bottom: 0.75rem; }
    .footer-visit address { margin-bottom: 0.6rem; }
    .footer-hours { margin-bottom: 0; }
    .footer-contact { margin-block: 0.8rem 0 !important; gap: 0.25rem !important; }
    .footer-social { justify-content: center; }
    .footer-col .footer-social { margin-top: 1.2rem; }

    .footer-nav { order: 2; border-top: 1px solid var(--line); }
    .footer-acc > summary {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1.1rem 0.15rem;
      cursor: pointer;
    }
    .footer-acc > summary .footer-h { margin: 0; }
    .footer-acc > summary::after {
      content: '+';
      font-family: var(--font-display);
      font-size: 1.4rem; line-height: 1;
      color: var(--gold-text);
      transition: transform var(--dur-fast) var(--ease-hover);
    }
    .footer-acc[open] > summary::after { transform: rotate(45deg); }
    .footer-acc ul { padding: 0 0.15rem 1.2rem !important; gap: 0.6rem !important; }
    .footer-az { max-height: none; overflow: visible; grid-template-columns: 1fr 1fr; column-gap: 1rem; }

    .footer-bottom {
      flex-direction: column; align-items: center; text-align: center;
      gap: 0.5rem;
      padding-block: 1.4rem 1.8rem;
      font-size: 0.8rem;
    }
    .footer-legal { order: -1; font-size: 0.86rem; }
  }
  @media (max-width: 560px) and (prefers-reduced-motion: reduce) {
    .footer-acc > summary::after { transition: none; }
  }

/* ==========================================================================
   5. Afsluitblok (pre-footer)
   ========================================================================== */

  /* Vloeit bovenaan in vanuit de paginakleur en blijft daarna vol roze,
     zodat strook + footer er naadloos op doorlopen. */
  .prefooter {
    background: linear-gradient(180deg, var(--ground) 0%, var(--rose) 38%, var(--rose) 100%);
    color: var(--ink);
  }
  .prefooter .kicker { color: var(--ink); }
  .prefooter p { color: var(--ink-mid); }

  .practical-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(2.5rem, 5vw, 6rem); align-items: start; }
  .practical-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }
  .practical-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .practical-h {
    font-family: var(--font-body); font-size: var(--size-label);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--ink); font-variation-settings: 'wght' 660; margin-bottom: 0.8rem;
  }
  .practical-soft { color: var(--ink-mid); font-size: var(--size-small); }
  .practical-cols a { color: var(--ink); text-decoration: none; }
  .practical-cols a:hover { text-decoration: underline; text-decoration-color: var(--gold); }

  .ticker-wrap { display: block; text-decoration: none; }
  .ticker-wrap:hover .ticker__item { color: var(--gold-text); }

  .prefooter-bloom {
    left: -6vw;
    bottom: 14%;
    width: clamp(200px, 20vw, 380px);
    opacity: 0.5;
  }

  @media (max-width: 900px) {
    .practical-grid { grid-template-columns: 1fr; }
    .practical-cols { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 520px) {
    .practical-cols { grid-template-columns: 1fr; }
  }
  @media (max-width: 700px) {
    .prefooter-bloom { width: 40vw; left: -14vw; opacity: 0.4; }
  }

/* ==========================================================================
   6. Scroll-bloesemtak
   ========================================================================== */

  .scrollbloom {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    /* Bóven de sectie-achtergronden (anders verdwijnt de tak achter de
       warme/roze vlakken onderin), maar onder de inhoud: sectie-inhoud
       krijgt z-index 2 in global.css. */
    z-index: 1;
    pointer-events: none;
  }
  .scrollbloom svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }
  .scrollbloom .sb-line { fill: none; stroke-linecap: round; }
  .scrollbloom .sb-bloom-in {
    transition:
      transform 0.9s cubic-bezier(0.34, 1.25, 0.64, 1),
      opacity 0.7s ease-out;
  }
  /* Bewust géén drop-shadow-filter op de bloemen: 40+ gefilterde images in
     één paginahoge SVG maakt elke repaint (scroll-groei) veel te zwaar. */

  html.js .scrollbloom:not(.ready) { opacity: 0; }
  html.js .scrollbloom.ready { transition: opacity 1.4s ease-out; }

  /* Vallende bloemetjes, achtergrondlaag */
  .sb-petals {
    position: fixed;
    inset: 0;
    z-index: 1; /* zelfde laag als de tak: boven vlakken, onder inhoud */
    pointer-events: none;
    overflow: hidden;
  }
  .sb-petal {
    position: absolute;
    top: -6vh;
    will-change: transform, opacity;
    animation: sb-petal-fall var(--d, 4s) ease-in forwards;
  }
  .sb-petal img { width: 100%; height: auto; display: block; }
  @keyframes sb-petal-fall {
    0% { transform: translate(0, 0) rotate(var(--r0, 0deg)); opacity: 0; }
    10% { opacity: 0.8; }
    55% { transform: translate(calc(var(--sx, 40px) * 0.6), 55vh) rotate(calc(var(--r0, 0deg) + var(--spin, 140deg) * 0.55)); opacity: 0.8; }
    100% { transform: translate(var(--sx, 40px), 112vh) rotate(calc(var(--r0, 0deg) + var(--spin, 140deg))); opacity: 0.1; }
  }

/* ==========================================================================
   7. Huidkiezer (hero)
   ========================================================================== */

  .picker {
    position: relative;
    width: 100%;
  }

  /* ————— Het beeldvlak: geen kader, maar een roze gloed die
     organisch oplost in de paginakleur (rand-tot-rand, geen randen) ————— */
  .stage {
    position: relative;
    width: 100%;
    /* Het gezichtsvlak is even hoog als de stage en 900/1080 breed, dus
       de hoogte bepaalt ook waar het gezicht horizontaal begint. */
    --stage-h: clamp(28rem, 82vh, 50rem);
    height: var(--stage-h);
  }
  .stage::before {
    content: '';
    position: absolute;
    /* Gloed loopt ruim door naar onderen, maar blijft van de titel af */
    inset: -2.5rem 0 -8rem;
    pointer-events: none;
    background:
      radial-gradient(34% 40% at 64% 20%, rgba(205, 165, 92, 0.12), transparent 100%),
      radial-gradient(56% 58% at 50% 47%, #e7c6bd 26%, #efd0c9 44%, var(--rose) 62%, color-mix(in srgb, var(--rose) 45%, transparent) 80%, transparent 100%);
  }

  /* ————— Uitnodiging linksboven in het beeldvlak, rustig en editorial;
     laat het gezicht vrij ————— */
  .stage-intro {
    position: absolute;
    z-index: 4;
    top: clamp(1.4rem, 5vh, 3.6rem);
    /* Rechterrand van het tekstblok net links van het zichtbare gezicht,
       zodat de tekst meeschuift met het beeld in plaats van in de hoek
       te blijven hangen. 0.31 x hoogte = halve gezichtsbreedte minus de
       zachte maskerrand. */
    left: auto;
    right: calc(50% + var(--stage-h) * 0.31);
    max-width: min(17rem, 24vw);
    pointer-events: none;
  }
  .intro-title {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 40, 'wght' 400;
    font-size: clamp(1.15rem, 0.9rem + 0.8vw, 1.5rem);
    line-height: 1.25;
    color: var(--ink);
    text-wrap: balance;
  }
  .intro-sub {
    margin: 0;
    font-size: var(--size-small);
    line-height: 1.5;
    color: var(--ink-soft);
  }
  .only-mobile { display: none; }
  /* Intro verschijnt samen met de punten, ná de hero-choreografie */
  html.js .stage-intro,
  html.js .face-points {
    opacity: 0;
    animation: cue-in 0.7s var(--ease) 3.3s forwards;
  }
  @keyframes cue-in { to { opacity: 1; } }

  /* ————— 360°-gezicht, gecentreerd ————— */
  .face-viewport {
    position: absolute;
    inset-block: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    aspect-ratio: 900 / 1080;
    touch-action: pan-y; /* horizontaal slepen = draaien; verticaal blijft scrollen */
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .face-viewport.dragging { cursor: grabbing; }
  .face-viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; border-radius: var(--radius-media); }
  .face-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    /* Randen van de video worden écht transparant en vloeien
       in de roze gloed, geen zichtbare rechthoek meer */
    -webkit-mask-image:
      linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 9%, #000 86%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(to right, transparent, #000 13%, #000 87%, transparent),
      linear-gradient(to bottom, transparent, #000 9%, #000 86%, transparent);
    mask-composite: intersect;
  }
  .face-fade { display: none; }

  .face-points { position: absolute; inset: 0; pointer-events: none; }

  .spot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    background: none; border: 0; padding: 0; cursor: pointer;
    pointer-events: auto;
    transition: opacity 0.25s ease-out;
  }
  .spot-dot {
    width: 11px; height: 11px; border-radius: 50%;
    background: #fff;
    border: 2px solid var(--gold);
    box-shadow: 0 0 0 0 rgba(205, 165, 92, 0.5), 0 1px 6px rgba(42, 33, 27, 0.25);
    transition: transform var(--dur-fast) var(--ease-hover), background-color var(--dur-fast) var(--ease-hover);
  }
  /* Eén punt pulseert zacht tot de eerste interactie: de uitnodiging
     om te klikken, zonder dat het hele gezicht knippert */
  .spot--cue .spot-dot { animation: spot-pulse 3s ease-out 3.8s infinite; }
  .spot:hover { z-index: 3; }
  .spot:hover .spot-dot { transform: scale(1.3); }
  .spot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }

  /* Hover-label (desktop): de huidbehoefte boven het punt, licht en zonder kader */
  .spot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% - 0.2rem);
    transform: translate(-50%, 4px);
    white-space: nowrap;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    background: color-mix(in srgb, #fffdfa 80%, var(--rose-soft));
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
    box-shadow: 0 10px 22px -14px rgba(42, 33, 27, 0.3);
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 30, 'wght' 400;
    font-size: 0.92rem;
    line-height: 1.2;
    color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .spot:hover .spot-label,
  .spot:focus-visible .spot-label { opacity: 1; transform: translate(-50%, 0); }
  .spot.active .spot-label { opacity: 0; }
  @media (hover: none) { .spot-label { display: none; } }
  .spot.active .spot-dot {
    background: var(--gold-word);
    border-color: #fff;
    transform: scale(1.45);
    animation: none;
    box-shadow: 0 0 0 7px rgba(166, 127, 47, 0.18), 0 1px 6px rgba(42, 33, 27, 0.25);
  }
  @keyframes spot-pulse {
    0% { box-shadow: 0 0 0 0 rgba(205, 165, 92, 0.5), 0 1px 6px rgba(42, 33, 27, 0.25); }
    70% { box-shadow: 0 0 0 11px rgba(205, 165, 92, 0), 0 1px 6px rgba(42, 33, 27, 0.25); }
    100% { box-shadow: 0 0 0 0 rgba(205, 165, 92, 0), 0 1px 6px rgba(42, 33, 27, 0.25); }
  }

  .stage-hint {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    margin: 0;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 30, 'wght' 380;
    font-size: 0.98rem;
    color: var(--ink-soft);
    white-space: nowrap;
    pointer-events: none;
  }

  /* ————— Zwevende kaart bij een huidpunt ————— */
  .popover {
    position: absolute;
    z-index: 5;
    width: min(23rem, calc(100vw - 2.5rem));
    background: color-mix(in srgb, #fffdfa 82%, var(--rose-soft));
    backdrop-filter: blur(14px) saturate(1.05);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 34px 64px -32px rgba(42, 33, 27, 0.32);
    padding: 1.55rem 1.7rem 1.45rem;
  }
  /* Dun gouden accentlijntje bovenaan de kaart */
  .popover::before {
    content: '';
    position: absolute;
    top: 0; left: 1.7rem; right: 1.7rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 0 0 2px 2px;
  }
  .popover.show { animation: pop-in 0.4s var(--ease) both; }
  @keyframes pop-in {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }
  .pop-close {
    position: absolute; top: 0.9rem; right: 0.95rem;
    width: 1.9rem; height: 1.9rem;
    display: grid; place-items: center;
    background: none; border: 1px solid var(--line-strong); border-radius: 50%;
    color: var(--ink); font-size: 1.05rem; line-height: 1;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-hover), transform var(--dur-fast) var(--ease-hover);
  }
  .pop-close:hover { border-color: var(--gold); transform: rotate(90deg); }

  .panel { display: none; }
  .panel.active { display: block; }
  /* Kadering: huidbehoefte → mogelijke behandelingen, geen diagnose */
  .panel-kicker, .panel-treats-label {
    font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--ink-soft); font-variation-settings: 'wght' 600;
    margin-bottom: 0.3rem;
  }
  .panel-treats-label { margin-top: 0.2rem; margin-bottom: 0.45rem; }
  .panel-zone {
    font-family: var(--font-display);
    font-size: 1.22rem;
    font-variation-settings: 'opsz' 40, 'wght' 460;
    color: var(--ink);
    margin-bottom: 0.4rem;
    padding-right: 2.2rem;
    line-height: 1.3;
  }
  .panel-q {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--ink-mid);
    margin-bottom: 1rem;
    padding-right: 0.3rem;
  }

  /* Compacte site-eigen hairline-rijen in de kaart */
  .rows--picker {
    margin-bottom: 1.05rem;
    border-top-color: color-mix(in srgb, var(--gold) 30%, transparent);
  }
  .rows--picker li { border-bottom-color: color-mix(in srgb, var(--gold) 22%, transparent); }
  .rows--picker .row-link {
    padding-block: 0.8rem;
    gap: 0.1rem 1rem;
    align-items: center;
  }
  .rows--picker .row-name { font-size: 1.1rem; font-variation-settings: 'opsz' 40, 'wght' 430; }
  .rows--picker .row-meta {
    color: var(--gold-text);
    font-variation-settings: 'wght' 620;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    gap: 0.55rem;
  }
  .rows--picker .row-link:hover { padding-left: 0.45rem; }
  .rows--picker .arrow { font-size: 0.95rem; color: var(--gold-text); }

  .panel-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.4rem; }
  .panel-more {
    font-variation-settings: 'wght' 600;
    font-size: 0.92rem;
    color: var(--gold-text);
  }
  .panel-more .arrow, .panel-more .arrow { color: var(--gold-text); }
  /* Secundair: advies via WhatsApp, bewust stiller dan de primaire link */
  .panel-advice {
    font-size: 0.86rem;
    color: var(--ink-soft);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--ink-soft) 40%, transparent);
    transition: color var(--dur-fast) var(--ease-hover), text-decoration-color var(--dur-fast) var(--ease-hover);
  }
  .panel-advice:hover { color: var(--ink); text-decoration-color: var(--gold); }

  /* ————— Mobiel: kaart onder het gezicht ————— */
  @media (max-width: 860px) {
    .stage {
      height: auto;
      padding-bottom: 0.4rem;
    }
    .stage::before {
      /* Gloed begint pas bij het beeldvlak, niet meer over de titel */
      inset: -0.5rem 0 -2.5rem;
      background:
        radial-gradient(120% 44% at 50% 34%, #e7c6bd 26%, #efd0c9 46%, var(--rose) 66%, color-mix(in srgb, var(--rose) 45%, transparent) 82%, transparent 100%);
    }
    .face-viewport {
      position: relative;
      inset-block: auto;
      left: auto;
      transform: none;
      /* Hoogte volgt het zichtbare scherm: menubalk, titel, uitleg en
         hint (~19.5rem) blijven er samen met het hele gezicht in passen */
      height: clamp(15rem, calc(100svh - 19.5rem), 28rem);
      width: auto;
      max-width: 100%;
      margin-inline: auto;
      display: block;
      transition: height 0.45s var(--ease);
    }
    /* Adviespaneel open: gezicht kleiner, zodat gezicht + advies
       samen onder de menubalk passen */
    .picker.has-pop .face-viewport {
      height: clamp(10rem, calc(100svh - 32rem), 17rem);
    }
    .popover {
      position: relative;
      inset: auto !important;
      width: auto;
      margin: 0.4rem clamp(0.9rem, 4vw, 1.6rem) 0.9rem;
    }
    /* Compacter paneel op een telefoonscherm */
    .popover { padding: 1.15rem 1.2rem 1.05rem; }
    .popover::before { left: 1.2rem; right: 1.2rem; }
    .pop-close { top: 0.7rem; right: 0.75rem; width: 1.7rem; height: 1.7rem; font-size: 0.95rem; }
    .panel-kicker, .panel-treats-label { font-size: 0.6rem; }
    .panel-zone { font-size: 1.05rem; margin-bottom: 0.3rem; }
    .panel-q { font-size: 0.86rem; line-height: 1.5; margin-bottom: 0.75rem; }
    .rows--picker { margin-bottom: 0.8rem; }
    .rows--picker .row-link { padding-block: 0.55rem; }
    .rows--picker .row-name { font-size: 0.98rem; }
    .rows--picker .row-meta { font-size: 0.72rem; }
    .panel-actions { gap: 0.35rem 1rem; }
    .panel-more { font-size: 0.84rem; }
    .panel-advice { font-size: 0.78rem; }
    .stage-hint {
      position: static;
      transform: none;
      display: block;
      text-align: center;
      padding-block: 0.5rem 0.6rem;
      white-space: normal;
    }
    /* Mobiel: uitnodiging gecentreerd boven het gezicht, met "tik" */
    .stage-intro {
      position: static;
      max-width: 26rem;
      margin: 0 auto 0.6rem;
      text-align: center;
      padding-inline: 1rem;
    }
    .only-desktop { display: none; }
    .only-mobile { display: inline; }
  }
  /* Lage telefoonschermen: paneel iets strakker, zodat gezicht + advies passen */
  @media (max-width: 860px) and (max-height: 740px) {
    .popover { margin-top: 0.2rem; padding-block: 0.95rem 0.85rem; }
    .panel-q { margin-bottom: 0.5rem; }
    .rows--picker { margin-bottom: 0.6rem; }
    .rows--picker .row-link { padding-block: 0.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .spot-dot, .spot--cue .spot-dot { animation: none; }
    .popover.show { animation: none; }
    .spot { transition: none; }
    html.js .stage-intro,
    html.js .face-points { opacity: 1; animation: none; }
  }

/* ==========================================================================
   8. Voor/na-vergelijking
   ========================================================================== */

  .ba { margin: 0; }
  .ba__frame {
    position: relative;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-media);
    overflow: hidden;
  }
  .ba__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ba__label {
    position: absolute; bottom: 0.8rem;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    background: color-mix(in srgb, #2e241d 72%, transparent);
    backdrop-filter: blur(6px);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    color: #f7efe6;
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    font-variation-settings: 'wght' 600;
  }
  .ba__label--before { left: 0.8rem; }
  .ba__label--after { right: 0.8rem; }
  .ba__caption {
    padding-top: 0.75rem;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-variation-settings: 'opsz' 30, 'wght' 440;
  }

/* ==========================================================================
   9. Prijstabellen
   ========================================================================== */

  .price-group { margin-bottom: 2rem; }
  .price-group:last-of-type { margin-bottom: 0; }

/* ==========================================================================
   10. Homepage
   ========================================================================== */

  /* Hero */
  .hero { padding-top: clamp(0.5rem, 2vw, 1.5rem); position: relative; }
  /* Eén doorlopende titelregel over de volle breedte (referentiepatroon) */
  .hero-title {
    margin: 0 0 clamp(2rem, 4.5vw, 4rem);
    padding-inline: var(--gutter);
    text-align: center;
    position: relative;
    z-index: 1;
    /* Referentie (Reckless 300): licht gewicht, hoog contrast, −4% tracking */
    font-size: clamp(2.4rem, 11.8vw, 13.4rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    font-variation-settings: 'opsz' 144, 'wght' 330;
    white-space: nowrap;
  }
  .hero-title .t-gold { color: var(--gold-word); }
  /* Bloesemtak groeit vanaf de linkerrand de hero in, achter titel en tekst */
  .hero-bloom {
    left: -5vw;
    top: -1.5rem;
    width: clamp(190px, 19vw, 360px);
    opacity: 0.6;
  }
  @media (max-width: 860px) {
    /* Kleiner en hoger: in de hoek naast de titel, bóven de roze gloed
       van de huidkiezer. Die gloed dekt op een smal scherm de volle breedte,
       dus lager zou de tak erachter wegvallen. */
    .hero-bloom { width: 15vw; left: 0; top: -0.25rem; opacity: 0.8; }
    /* Volgorde bij binnenkomst: eerst de titel, dan de hero (2s), dan pas de
       bloesem — gelijk met de scroll-tak, die op 3,4s infadet. */
    html.js .hero-bloom { opacity: 0; animation: bloom-in 1.2s var(--ease) 3.4s forwards; }
    @keyframes bloom-in {
      to { opacity: 0.8; }
    }
  }
  @media (max-width: 480px) {
    .hero-title { font-size: 9.8vw; }
  }
  @media (max-width: 860px) and (prefers-reduced-motion: reduce) {
    html.js .hero-bloom { opacity: 0.8; animation: none; }
  }
  /* Onthulling via pure CSS: letter voor letter uit het masker omhoog,
     "Esthetica" cursief, gouden glans over de M en de punt landt als
     laatste met een klein veertje. Laatste letter klaar rond ±1,9s —
     de hero eronder volgt op 2s (choreografie ongewijzigd). */
  .hero-title .ch { display: inline-block; }
  .hero-title .ch-it {
    font-style: italic;
    font-variation-settings: 'opsz' 144, 'wght' 340;
  }
  /* Goud met een subtiel verloop, klaar voor de glans */
  .hero-title .t-gold {
    background: linear-gradient(105deg, var(--gold-word) 24%, #e9d29c 50%, var(--gold-word) 76%);
    background-size: 240% 100%;
    background-position: 118% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  html.js .hero-title .ch {
    transform: translateY(118%);
    animation: ch-up 0.85s var(--ease) forwards;
    animation-delay: calc(0.18s + var(--i) * 0.05s);
  }
  html.js .hero-title .t-gold {
    animation: ch-up 0.85s var(--ease) forwards, gold-sheen 1.5s ease forwards;
    animation-delay: calc(0.18s + var(--i) * 0.05s), 2.15s;
  }
  /* De punt: iets later, met een zachte overshoot */
  html.js .hero-title .ch-dot {
    animation-duration: 1.05s, 1.5s;
    animation-timing-function: cubic-bezier(0.34, 1.5, 0.64, 1), ease;
  }
  @keyframes ch-up {
    to { transform: translateY(0); }
  }
  @keyframes gold-sheen {
    from { background-position: 118% 0; }
    to { background-position: -28% 0; }
  }
  /* Hero (gezicht + gloed) verschijnt pas als de letters staan */
  html.js .picker {
    opacity: 0;
    transform: translateY(26px);
    animation: hero-stage-in 1.2s var(--ease) 2s forwards;
  }
  @keyframes hero-stage-in {
    to { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    html.js .hero-title .ch,
    html.js .hero-title .t-gold { transform: none; animation: none; }
    .hero-title .t-gold { background-position: -28% 0; }
    html.js .picker { opacity: 1; transform: none; animation: none; }
  }

  /* Welkomststatement, schermvullend met grote typografie (referentiepatroon):
     de sectie beslaat het volledige scherm en het statement vult het beeld. */
  .statement-section {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(2rem, 4vh, 4rem);
  }
  .statement-section > .container { width: 100%; }
  .statement {
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 1rem + 5.2vw, 6.4rem);
    line-height: 1.12;
    letter-spacing: -0.022em;
    font-variation-settings: 'opsz' 72, 'wght' 380;
    text-align: center;
    max-width: 25ch;
    margin-inline: auto;
    text-wrap: balance;
  }
  .statement em { font-style: italic; color: var(--gold-word); }
  .statement-chip {
    /* Staand ovaal: vrijwel de hele foto zichtbaar, inclusief schouders */
    display: inline-block;
    width: 0.95em; height: 1.3em;
    object-fit: cover;
    object-position: 50% 18%;
    border-radius: 99px;
    vertical-align: -0.32em;
    margin-inline: 0.12em;
    /* Referentie-effect: chip groeit onder de cursor en krimpt weer terug */
    position: relative;
    z-index: 2;
    transition: transform 0.55s var(--ease);
    transform-origin: center;
  }
  .statement-chip:hover { transform: scale(3); }
  @media (prefers-reduced-motion: reduce) {
    .statement-chip, .statement-chip:hover { transition: none; transform: none; }
  }

  /* Aanbod: vult het volledige scherm, rijen rekken mee, lijnen rand-tot-rand */
  .offer-screen {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-block: clamp(1.5rem, 4vh, 3rem) 0;
  }
  /* Label ligt op een zachte pil in de paginakleur: de scroll-bloesemtak
     loopt hier langs de linkerrand en maakte de kleine tekst onleesbaar */
  .offer-kicker {
    align-self: flex-start;
    margin: 0 0 clamp(0.8rem, 2vh, 1.6rem) calc(var(--gutter) - 0.85em);
    padding: 0.5em 0.85em;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ground) 92%, transparent);
    box-shadow: 0 0 18px 10px color-mix(in srgb, var(--ground) 80%, transparent);
  }
  .offer-rows {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line);
  }
  .offer-rows li {
    flex: 1;
    display: flex;
    border-bottom: 1px solid var(--line);
    position: relative;
    overflow: hidden;
  }
  /* Hover: zachte roze veeg die de hele rij vult (van links naar rechts) */
  .offer-rows li::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--rose) 0%, var(--rose-soft) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease);
  }
  .offer-rows li:hover::before { transform: scaleX(1); }
  .offer-rows .row-link {
    flex: 1;
    position: relative;
    align-items: center;
    padding-block: 0.5rem;
    padding-inline: var(--gutter) calc(var(--gutter) + 0.25rem);
  }
  .offer-rows .row-name {
    font-size: clamp(2.4rem, 1rem + 5vw, 6rem);
    font-variation-settings: 'opsz' 60, 'wght' 455;
    letter-spacing: -0.028em;
    line-height: 1.02;
  }
  .offer-rows .arrow { font-size: clamp(1.4rem, 2vw, 2rem); }
  @media (prefers-reduced-motion: reduce) {
    .offer-rows li::before { transition: none; }
  }
  .index-note {
    margin: 0;
    padding: 1rem var(--gutter) 1.2rem;
    color: var(--ink-soft);
    font-size: var(--size-small);
  }

  /* Elke homepage-sectie als eigen "scherm": vult het volledige beeld en
     centreert de inhoud verticaal, zoals het welkomststatement */
  .home-screen {
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding-block: clamp(2rem, 4vh, 4rem);
  }
  .home-screen > .container { width: 100%; }
  /* Grote sectiekoppen die bij de schermvullende presentatie horen;
     de tekstkolom is smaller geworden (het beeld is de blikvanger),
     dus de kop schaalt mee met die kolom */
  .haar-copy h2,
  .studio-grid h2 {
    font-size: clamp(2.3rem, 1rem + 3.9vw, 5rem);
    letter-spacing: -0.03em;
    line-height: 1.04;
  }

  /* Practitioner */
  .pract-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; }
  .pract-name { font-size: clamp(2.8rem, 1.2rem + 6vw, 7.4rem); letter-spacing: -0.032em; line-height: 1; }
  .cred-lines { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--line); max-width: 34rem; }
  .cred-lines li { border-bottom: 1px solid var(--line); padding: 0.9rem 0.1rem; font-size: var(--size-small); }

  /* Haar & hoofdhuid: het analysestation is de blikvanger en krijgt
     de breedste kolom; de hoogtegrens houdt de foto binnen één scherm */
  .haar-wrap { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2rem, 4vw, 5rem); align-items: center; }
  .haar-copy h2 { max-width: 18ch; }
  .haar-stage {
    max-width: min(100%, calc((100svh - 15rem) * 4 / 3));
    margin-inline: auto;
  }
  .haar-offer {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.5rem;
    border-block: 1px solid var(--line);
    padding-block: 1.1rem; margin-block: 1.8rem;
    max-width: 34rem;
  }
  .haar-offer__name { font-family: var(--font-display); font-size: clamp(1.6rem, 1.1rem + 1vw, 2rem); font-variation-settings: 'opsz' 40, 'wght' 420; }
  .haar-offer__meta { color: var(--accent-haar-text); font-variation-settings: 'wght' 580; font-size: var(--size-small); }
  .haar-stage { position: relative; }
  .haar-photo { margin: 0; aspect-ratio: 4 / 3; position: relative; }
  .haar-photo img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 1.1s var(--ease);
  }
  .haar-stage:hover .haar-photo img { transform: scale(1.045); }

  /* Gouden punten, zelfde taal als de huidpicker in de hero */
  .haar-spots { position: absolute; inset: 0; }
  .hspot {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 2.4rem; height: 2.4rem;
    display: grid; place-items: center;
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  /* Duidelijker dan de heropunten: de foto is drukker, dus gevuld goud,
     witte ring, vaste halo en een bredere puls */
  .hspot-dot {
    width: 16px; height: 16px; border-radius: 50%;
    background: linear-gradient(135deg, #e9d29c 0%, var(--gold) 55%, var(--gold-word) 100%);
    border: 2px solid #fff;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 0 0 5px rgba(205, 165, 92, 0.55), 0 2px 10px rgba(42, 33, 27, 0.35);
    animation: hspot-pulse 2.6s ease-out infinite;
    transition: transform var(--dur-fast) var(--ease-hover), background-color var(--dur-fast) var(--ease-hover);
  }
  .hspot:hover .hspot-dot { transform: scale(1.25); }
  .hspot:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 50%; }
  .hspot[aria-expanded='true'] .hspot-dot {
    background: #fff;
    border-color: var(--gold-word);
    transform: scale(1.35);
    animation: none;
    box-shadow: 0 0 0 8px rgba(166, 127, 47, 0.22), 0 2px 10px rgba(42, 33, 27, 0.3);
  }
  @keyframes hspot-pulse {
    0% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 0 0 5px rgba(205, 165, 92, 0.55), 0 2px 10px rgba(42, 33, 27, 0.35); }
    70% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 0 0 18px rgba(205, 165, 92, 0), 0 2px 10px rgba(42, 33, 27, 0.35); }
    100% { box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.45), 0 0 0 5px rgba(205, 165, 92, 0), 0 2px 10px rgba(42, 33, 27, 0.35); }
  }

  /* Zwevende kaart per punt, spiegel van de picker-popover */
  .hcard {
    position: absolute;
    z-index: 3;
    width: min(17.5rem, 78%);
    background: color-mix(in srgb, #fffdfa 82%, var(--rose-soft));
    backdrop-filter: blur(14px) saturate(1.05);
    border: 1px solid color-mix(in srgb, var(--gold) 32%, transparent);
    border-radius: calc(var(--radius) + 4px);
    box-shadow: 0 30px 56px -30px rgba(42, 33, 27, 0.34);
    padding: 1.15rem 1.3rem 1.05rem;
    transform: translate(1.5rem, -50%);
  }
  .hcard[data-side='left'] { transform: translate(calc(-100% - 1.5rem), -50%); }
  .hcard::before {
    content: '';
    position: absolute;
    top: 0; left: 1.3rem; right: 1.3rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 0 0 2px 2px;
  }
  .hcard.show { animation: hcard-in 0.4s var(--ease) both; }
  @keyframes hcard-in {
    from { opacity: 0; transform: translate(1.5rem, -50%) translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translate(1.5rem, -50%); }
  }
  .hcard[data-side='left'].show { animation: hcard-in-l 0.4s var(--ease) both; }
  @keyframes hcard-in-l {
    from { opacity: 0; transform: translate(calc(-100% - 1.5rem), -50%) translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translate(calc(-100% - 1.5rem), -50%); }
  }
  .hcard-title {
    display: block;
    font-family: var(--font-display);
    font-size: 1.12rem;
    font-variation-settings: 'opsz' 40, 'wght' 460;
    margin-bottom: 0.35rem;
  }
  .hcard p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--ink-mid); }

  .haar-hint {
    margin: 0.85rem 0 0;
    text-align: center;
    font-family: var(--font-display);
    font-style: italic;
    font-variation-settings: 'opsz' 30, 'wght' 380;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }

  @media (max-width: 640px) {
    /* Mobiel: kaart onderin het beeld, rand-tot-rand leesbaar */
    .hcard, .hcard[data-side='left'] {
      left: 50% !important; top: auto !important; bottom: 0.8rem;
      width: calc(100% - 1.6rem);
      transform: translate(-50%, 0);
    }
    .hcard.show, .hcard[data-side='left'].show { animation: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hspot-dot { animation: none; }
    .hcard.show, .hcard[data-side='left'].show { animation: none; }
    .haar-stage:hover .haar-photo img { transform: none; }
  }

  /* Studio: de behandelkamer-loop vult de brede kolom over de volle
     hoogte van de tekstkolom, als cinematisch venster op de studio */
  .studio-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: clamp(2rem, 4vw, 5rem); align-items: stretch; }
  .studio-grid > div:last-child { align-self: center; }
  .studio-grid .photo-frame { height: 100%; }
  .studio-video {
    width: 100%;
    height: 100%;
    min-height: min(62svh, 34rem);
    object-fit: cover;
    display: block;
  }
  .studio-cols { display: grid; grid-template-columns: 1fr; gap: 0.5rem; max-width: 42ch; }
  .studio-cols p { font-size: var(--size-small); line-height: 1.7; }
  .studio-link { margin-top: 1.6rem; }

  /* Quote: gecentreerd en groot, in dezelfde taal als het welkomststatement */
  .quote-section { background: var(--ground); }
  .quote { margin: 0; text-align: center; }
  .quote p {
    font-family: var(--font-display);
    font-size: clamp(2.4rem, 1rem + 5.6vw, 7rem);
    line-height: 1.08;
    letter-spacing: -0.025em;
    font-variation-settings: 'opsz' 72, 'wght' 380;
    max-width: 22ch;
    margin-inline: auto;
    margin-bottom: 1.6rem;
    text-wrap: balance;
  }
  .quote cite { font-style: normal; color: var(--ink-soft); font-size: var(--size-small); }

  /* Kaart & adres: schermvullende kaart in een warme, ontkleurde tint
     met de donkere adreskaart eroverheen (referentiepatroon) */
  /* De kaart staat als flex-kind ín de sectie (niet absoluut): zo groeit
     de sectie altijd mee en valt de routeknop nooit buiten beeld */
  .map-screen {
    position: relative;
    display: flex;
    align-items: center;
    min-height: min(76svh, 46rem);
    padding: clamp(1.5rem, 4vh, 3rem) var(--gutter);
    background: var(--ground);
    overflow: hidden;
  }
  .map-embed {
    position: absolute; inset: 0;
    background: #fff;
  }
  /* Pin: de gouden D van het logo op een wit schildje met staartje */
  .map-screen .map-pin {
    position: relative;
    width: 54px; height: 54px;
    background: #fff;
    border: 2px solid var(--gold);
    border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 12px 26px -10px rgba(42, 33, 27, 0.4);
    cursor: pointer;
  }
  .map-screen .map-pin::after {
    content: '';
    position: absolute;
    left: 50%; bottom: -8px;
    width: 14px; height: 14px;
    background: #fff;
    border-right: 2px solid var(--gold);
    border-bottom: 2px solid var(--gold);
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 3px 0;
  }
  .map-screen .map-pin img {
    width: 58%; height: auto; display: block;
    position: relative; z-index: 1;
  }
  /* MapLibre-bedieningsknoppen in de stijl van de site */
  .map-screen .maplibregl-ctrl-group {
    border-radius: 12px;
    box-shadow: 0 10px 24px -12px rgba(42, 33, 27, 0.35);
    overflow: hidden;
  }
  .map-screen .maplibregl-ctrl-attrib {
    font-size: 0.68rem;
    background: rgba(255, 255, 255, 0.7);
  }
  .map-card {
    position: relative; z-index: 2;
    margin-left: clamp(0rem, 2.5vw, 3.6rem);
    width: min(26rem, 100%);
    background: linear-gradient(155deg, #403126 0%, #2e241d 55%, #251d17 100%);
    color: #f7efe6;
    border-radius: calc(var(--radius) + 10px);
    padding: clamp(1.6rem, 2.4vw, 2.5rem) clamp(1.5rem, 2.4vw, 2.4rem);
    box-shadow: 0 44px 90px -40px rgba(42, 33, 27, 0.6);
    overflow: hidden;
  }
  /* Gouden accentlijn plus zachte roze gloed, zelfde taal als het menu */
  .map-card::before {
    content: '';
    position: absolute; top: 0;
    left: clamp(1.7rem, 2.6vw, 2.6rem); right: clamp(1.7rem, 2.6vw, 2.6rem);
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }
  .map-card::after {
    content: '';
    position: absolute; right: -30%; top: -35%;
    width: 70%; aspect-ratio: 1; border-radius: 50%;
    background: radial-gradient(circle, rgba(214, 146, 148, 0.26), transparent 70%);
    pointer-events: none;
  }
  .map-kicker {
    display: block;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: color-mix(in srgb, var(--gold) 68%, #fff);
    margin-bottom: 1.1rem;
  }
  .map-address {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
    line-height: 1.3;
    font-variation-settings: 'opsz' 40, 'wght' 400;
    margin: 0 0 1.2rem;
  }
  .map-contact { margin: 0 0 1.5rem; }
  .map-contact a {
    font-family: var(--font-display);
    font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem);
    line-height: 1.55;
    color: #f1e2cf;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-hover);
  }
  .map-contact a:hover { color: var(--gold); }
  .map-route {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.72rem 1.35rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent);
    background: rgba(247, 239, 230, 0.08);
    color: #f7efe6;
    font-size: 0.95rem;
    text-decoration: none;
    transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease);
  }
  .map-route:hover { background: var(--gold); border-color: var(--gold); color: #2a211b; }
  .map-route .arrow { transition: transform 0.35s var(--ease); }
  .map-route:hover .arrow { transform: translate(2px, -2px); }
  @media (max-width: 640px) {
    /* Mobiel: kaartje onderin over de volle breedte */
    /* Kaart moet zichtbaar blijven: compacte strook onderin, de kaart
       zelf krijgt onderpadding zodat de pin boven de strook staat */
    .map-screen { align-items: flex-end; min-height: min(64svh, 34rem); padding: 0.8rem 0.7rem; }
    .map-card { margin-left: 0; width: 100%; padding: 0.9rem 1rem 0.85rem; border-radius: calc(var(--radius) + 4px); }
    .map-card::before { left: 1rem; right: 1rem; }
    .map-card::after { display: none; }
    .map-kicker { font-size: 0.62rem; margin-bottom: 0.45rem; }
    .map-address { font-size: 1rem; line-height: 1.3; margin-bottom: 0.55rem; }
    .map-contact { display: flex; flex-wrap: wrap; gap: 0.1rem 1rem; margin-bottom: 0.7rem; }
    .map-contact br { display: none; }
    .map-contact a { font-size: 0.86rem; line-height: 1.4; }
    .map-route { padding: 0.45rem 0.9rem; font-size: 0.8rem; }
    /* Op een telefoon geen schermvullende blokken: dat geeft alleen lege ruimte */
    .home-screen, .statement-section { min-height: 0; padding-block: clamp(3.5rem, 10vh, 5rem); }
  }

  @media (max-width: 900px) {
    .pract-grid, .haar-wrap, .studio-grid { grid-template-columns: 1fr; }
    .pract-media { max-width: 420px; }
    .studio-cols { grid-template-columns: 1fr; gap: 0; }
    /* Gestapeld: video terug naar 16/9 in plaats van een extreme crop */
    .studio-video { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
    .statement { max-width: 20ch; }
  }

/* ==========================================================================
   11. Behandelingen-overzicht
   ========================================================================== */

  .index-head { text-align: center; padding-block: clamp(1rem, 4vw, 3rem) clamp(2.8rem, 7vh, 5rem); }
  .index-bloom { right: -7vw; top: 0; width: clamp(200px, 22vw, 400px); opacity: 0.6; }
  @media (max-width: 1000px) { .index-bloom { display: none; } }
  .index-title { margin-inline: auto; }
  .index-title em { font-style: italic; color: var(--gold-word); }
  .index-lede { max-width: 46ch; margin-inline: auto; margin-top: 1.5rem; }
  /* Cursieve gouden telling per huidvraag (zoals op de prijzenpagina) */
  .rows .row-count {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--gold-text);
    font-variation-settings: 'opsz' 30, 'wght' 420;
  }

/* ==========================================================================
   12. Behandel- en categoriepagina
   ========================================================================== */

  .crumbs { font-size: var(--size-small); color: var(--ink-soft); margin-bottom: 2.2rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }

  .cat-grid { display: grid; grid-template-columns: 1.4fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .cat-aside { position: sticky; top: 6.5rem; }
  /* Met beeld wordt de kolom te hoog om mee te schuiven */
  .cat-aside:has(.cat-media) { position: static; }

  /* Beeld in de huisstijl: afgeronde hoeken, vullend bijgesneden */
  .mood { border-radius: var(--radius-media); overflow: hidden; }
  .mood img, .mood video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .cat-media { margin-bottom: 1.4rem; }
  .mood--band { margin-top: var(--space-block); }

  /* Productkaart: fles op zachtroze, witte productachtergrond valt weg (multiply) */
  .product-card {
    position: relative;
    display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center;
    padding: 1.4rem 1.6rem;
    border-radius: calc(var(--radius) + 6px);
    background: linear-gradient(150deg, var(--rose) 0%, color-mix(in srgb, var(--rose) 60%, #fff) 100%);
    border: 1px solid color-mix(in srgb, var(--gold) 25%, transparent);
  }
  .product-card::before {
    content: '';
    position: absolute; top: 0; left: 1.6rem; right: 1.6rem;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }
  .product-card__img { width: 6.6rem; }
  .product-card__img img { width: 100%; height: auto; display: block; mix-blend-mode: multiply; }
  .product-card__kicker {
    margin: 0 0 0.3rem;
    font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-text); font-variation-settings: 'wght' 620;
  }
  .product-card__brand {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: 1.45rem; line-height: 1.15;
    font-variation-settings: 'opsz' 40, 'wght' 420;
  }
  .product-card__text { margin: 0; font-size: var(--size-small); line-height: 1.55; color: var(--ink-mid); }
  .treat-media { margin-block: 0.4rem 2.2rem; }
  .approach { background: var(--tint-huid); border-radius: var(--radius); padding: 1.8rem; }
  .approach--haar { background: var(--tint-haar); }
  .aside-h { font-family: var(--font-body); font-size: var(--size-label); letter-spacing: 0.12em; text-transform: uppercase; font-variation-settings: 'wght' 640; color: var(--ink); margin-bottom: 0.8rem; }
  .approach p { font-size: var(--size-small); color: var(--ink); margin: 0; }

  .treat-hero h1 { max-width: 20ch; }
  .treat-grid { display: grid; grid-template-columns: 1.35fr 0.95fr; gap: clamp(2.5rem, 5vw, 5rem); align-items: start; margin-top: var(--space-block); }
  .treat-body h2 { font-size: 1.45rem; margin-top: 2.2rem; }
  .treat-intro { font-size: var(--size-lede); line-height: 1.55; }
  .check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; max-width: var(--measure); }
  .check-list li { padding-left: 1.5rem; position: relative; }
  .check-list li::before { content: '·'; position: absolute; left: 0; color: var(--accent-huid-text); }
  .kuur-note { margin-top: 1.8rem; border-left: 2px solid var(--accent-huid); padding-left: 1.1rem; color: var(--ink-soft); font-size: var(--size-small); }
  .treat-body .faq { margin-top: 2.2rem; }

  .treat-aside { position: sticky; top: 6.5rem; }
  .price-card { background: var(--ground-warm); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.8rem; }
  .treat-book { width: 100%; justify-content: center; margin-top: 1.4rem; }
  .advice-link { display: block; text-align: center; margin-top: 0.9rem; font-size: var(--size-small); }
  .cancel-note { margin-top: 1.2rem; font-size: 0.82rem; color: var(--ink-soft); }

  @media (max-width: 900px) {
    .cat-grid, .treat-grid { grid-template-columns: 1fr; }
    .cat-aside, .treat-aside { position: static; }
  }

/* ==========================================================================
   13. Prijzen
   ========================================================================== */

  /* Kop, compact: deze pagina hoeft het scherm niet te vullen */
  .prices-head { padding-block: clamp(2.2rem, 5vh, 3.4rem) clamp(1.6rem, 4vh, 2.6rem); }
  .prices-title {
    font-size: clamp(2.1rem, 1.2rem + 2.9vw, 3.8rem);
    letter-spacing: -0.028em;
    font-variation-settings: 'opsz' 90, 'wght' 380;
    margin-bottom: 0.4em;
  }
  .price-jump {
    display: flex; align-items: baseline; gap: 1.1rem; flex-wrap: wrap;
    margin-top: clamp(1.6rem, 4vh, 2.6rem);
    padding-top: 1.2rem;
    border-top: 1px solid var(--line);
  }
  .price-jump a {
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: var(--size-label);
    font-variation-settings: 'wght' 640;
    color: var(--ink-soft);
    transition: color var(--dur-fast) var(--ease-hover);
  }
  .price-jump a:hover { color: var(--gold-text); }
  .jump-count { color: var(--gold-text); letter-spacing: 0.04em; }
  .jump-sep { color: var(--line-strong); }

  /* Categoriekop */
  .cat-head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    padding-bottom: 1.2rem;
  }
  .cat-head h2 {
    font-size: clamp(1.7rem, 1rem + 2.2vw, 2.7rem);
    letter-spacing: -0.02em;
    font-variation-settings: 'opsz' 72, 'wght' 400;
    margin: 0;
  }
  .price-section { padding-block: clamp(2.6rem, 6vh, 4.2rem); }
  .cat-count {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    color: var(--gold-text);
    font-variation-settings: 'opsz' 30, 'wght' 420;
  }

  /* ————— Prijsrijen: aanbod-patroon, maar binnen de container en
     bewust smaller, geen rand-tot-rand meer ————— */
  .price-rows {
    list-style: none; margin: 0; padding: 0;
    max-width: 64rem;
    border-top: 1px solid var(--line-strong);
  }
  .prow { position: relative; border-bottom: 1px solid var(--line-strong); overflow: hidden; }
  /* Roze veeg van links bij hover, zoals "Ons aanbod" op de homepage */
  .prow::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, var(--rose) 0%, var(--rose-soft) 100%);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s var(--ease);
    pointer-events: none;
  }
  .prow:hover::before, .prow.open::before { transform: scaleX(1); }

  .prow-btn {
    position: relative;
    width: 100%;
    display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem;
    background: none; border: 0; cursor: pointer;
    padding: clamp(0.9rem, 2.1vh, 1.35rem) 0.9rem;
    font: inherit; color: var(--ink); text-align: left;
  }
  .prow-name {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 0.9rem + 1.5vw, 2.05rem);
    line-height: 1.05;
    letter-spacing: -0.018em;
    font-variation-settings: 'opsz' 52, 'wght' 435;
    transition: transform 0.45s var(--ease);
  }
  .prow:hover .prow-name, .prow.open .prow-name { transform: translateX(0.4rem); }
  .prow-meta { display: inline-flex; align-items: center; gap: 1.2rem; white-space: nowrap; }
  .prow-from {
    font-size: var(--size-small);
    color: var(--ink-mid);
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'wght' 560;
  }
  /* Plusje dat naar een kruisje draait */
  .prow-plus { position: relative; width: 1.05rem; height: 1.05rem; flex: none; }
  .prow-plus::before, .prow-plus::after {
    content: '';
    position: absolute; left: 0; top: 50%;
    width: 100%; height: 1.5px;
    background: var(--gold-text);
    transition: transform 0.45s var(--ease);
  }
  .prow-plus::after { transform: rotate(90deg); }
  .prow.open .prow-plus::before { transform: rotate(45deg); }
  .prow.open .prow-plus::after { transform: rotate(135deg); }

  /* Uitklappaneel: vloeiende hoogte via grid-rows */
  .prow-panel {
    position: relative;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s var(--ease);
  }
  .prow.open .prow-panel { grid-template-rows: 1fr; }
  .prow-inner {
    overflow: hidden;
    padding-inline: 0.9rem;
    min-height: 0;
  }
  .prow.open .prow-inner { padding-bottom: clamp(1.4rem, 3vh, 2.2rem); }
  .prow-inner .price-group { max-width: 44rem; }
  .prow-link {
    position: relative;
    z-index: 3; /* nadrukkelijk bóven de veeg-laag: klik gaat nooit verloren */
    display: inline-block;
    margin-top: 0.9rem;
    padding: 0.45rem 0.8rem 0.45rem 0; /* ruim klikvlak */
    font-size: var(--size-small);
  }

  /* Voorwaardenkaart */
  .terms-card {
    position: relative;
    max-width: 52rem;
    background: color-mix(in srgb, #fffdfa 82%, var(--rose-soft));
    border: 1px solid color-mix(in srgb, var(--gold) 26%, transparent);
    border-radius: calc(var(--radius) + 4px);
    padding: clamp(1.8rem, 4vw, 2.8rem) clamp(1.8rem, 4vw, 3rem);
  }
  .terms-card::before {
    content: '';
    position: absolute;
    top: 0; left: clamp(1.8rem, 4vw, 3rem); right: clamp(1.8rem, 4vw, 3rem);
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 0 0 2px 2px;
  }
  .terms-card h2 { font-size: 1.5rem; margin-bottom: 0.7rem; }
  .terms-card p { margin: 0; color: var(--ink-mid); max-width: 62ch; }

  @media (max-width: 640px) {
    .prow-btn { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
    .prow-meta { width: 100%; justify-content: space-between; }
  }
  @media (prefers-reduced-motion: reduce) {
    .prow::before, .prow-name, .prow-plus::before, .prow-plus::after, .prow-panel { transition: none; }
  }

/* ==========================================================================
   14. Resultaten
   ========================================================================== */

  .result-pending { margin-top: var(--space-block); }
  .result-pending h2 { font-size: 1.5rem; }
  .result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; align-items: start; }

  .result-honesty { margin-top: var(--space-section); }
  .result-honesty h2 { font-size: 1.5rem; }
  .results-check-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.55rem; max-width: var(--measure); }
  .results-check-list li { padding-left: 1.5rem; position: relative; }
  .results-check-list li::before { content: '·'; position: absolute; left: 0; color: var(--accent-huid-text); }
  @media (max-width: 700px) {
    .result-grid { grid-template-columns: 1fr; }
  }

/* ==========================================================================
   15. Over Dudu
   ========================================================================== */

  .over-grid { display: grid; grid-template-columns: 0.75fr 1.25fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .two-col h2 { font-size: 1.6rem; }
  .two-col .btn { margin-top: 1rem; }
  .cred-list { list-style: none; margin: var(--space-block) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .cred-list h3 { font-size: 1.15rem; font-family: var(--font-body); font-variation-settings: 'wght' 620; }
  .cred-list p { font-size: var(--size-small); color: var(--ink-soft); }
  .about-studio-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
  .about-studio-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
  .about-studio-grid .annotation { margin-top: 1.4rem; max-width: 40ch; }
  @media (max-width: 860px) {
    .over-grid, .two-col, .about-studio-grid { grid-template-columns: 1fr; }
    .over-media { max-width: 380px; }
    .cred-list { grid-template-columns: 1fr; gap: 1.8rem; }
  }

/* ==========================================================================
   16. Afspraak
   ========================================================================== */

  .book-head { max-width: 60rem; }
  .book-grid {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 5vw, 6rem);
    align-items: start;
    margin-top: var(--space-block);
  }

  /* Boekkaart, widget als geïntegreerd huisstijl-element */
  .book-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-media);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 24px 48px -32px rgba(42, 33, 27, 0.28);
  }
  .book-card__top {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    background: var(--rose); color: var(--ink);
    border-bottom: 1px solid var(--line);
    padding: 0.9rem 1.25rem;
  }
  .book-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-variation-settings: 'opsz' 30, 'wght' 440;
    letter-spacing: 0.01em;
    white-space: nowrap;
  }
  .book-card__live {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-mid); font-variation-settings: 'wght' 620;
    white-space: nowrap;
  }
  .live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--accent-huid);
    box-shadow: 0 0 0 0 rgba(180, 113, 60, 0.5);
    animation: live 2.4s ease-out infinite;
  }
  @keyframes live {
    0% { box-shadow: 0 0 0 0 rgba(180, 113, 60, 0.45); }
    70% { box-shadow: 0 0 0 7px rgba(180, 113, 60, 0); }
    100% { box-shadow: 0 0 0 0 rgba(180, 113, 60, 0); }
  }
  .book-card iframe {
    display: block;
    width: 100%;
    height: min(44rem, 74vh);
    border: none;
    background: #fff;
  }
  .book-card__foot {
    border-top: 1px solid var(--line);
    background: var(--ground);
    padding: 0.8rem 1.25rem;
    text-align: center;
  }
  .book-card__foot a {
    font-size: var(--size-small);
    color: var(--ink-soft);
    text-decoration: none;
  }
  .book-card__foot a:hover { color: var(--accent-huid-text); }
  .book-card__foot .arrow { color: var(--accent-huid-text); }

  /* Zijkolom, rustige blokken met hairlines */
  .book-aside {
    position: sticky; top: calc(var(--bar-h) + 1.5rem);
    display: grid;
    max-width: 34rem;
  }
  .aside-block { border-top: 1px solid var(--line); padding-block: 1.6rem; }
  .aside-block:first-child { border-top: none; padding-top: 0.35rem; }
  .book-aside-h {
    font-family: var(--font-body); font-size: var(--size-label);
    letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--accent-huid-text);
    font-variation-settings: 'wght' 640; margin-bottom: 0.8rem;
  }
  .aside-block p { font-size: var(--size-small); }
  .aside-block .btn { margin-top: 0.9rem; }
  .aside-strong { font-variation-settings: 'wght' 620; text-decoration: none; font-size: 1.05rem; }
  .aside-soft { color: var(--ink-soft); }
  .aside-lines { list-style: none; margin: 0; padding: 0; }
  .aside-lines li {
    display: flex; justify-content: space-between; gap: 1.5rem;
    padding-block: 0.55rem;
    border-bottom: 1px solid var(--line);
    font-size: var(--size-small);
  }
  .aside-lines li:last-child { border-bottom: none; }
  .aside-lines li span:first-child { color: var(--ink-soft); }
  .aside-lines li span:last-child { text-align: right; font-variation-settings: 'wght' 540; }

  @media (max-width: 900px) {
    .book-grid { grid-template-columns: 1fr; }
    .book-card { max-width: 32rem; }
    .book-aside { position: static; max-width: none; }
    .book-card iframe { height: min(42rem, 78vh); }
  }
  @media (max-width: 480px) {
    .book-card__live { font-size: 0; gap: 0; }
    .book-card__live::after { content: 'Live'; font-size: 0.72rem; letter-spacing: 0.1em; margin-left: 0.5rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .live-dot { animation: none; }
  }

/* ==========================================================================
   17. Contact
   ========================================================================== */

  .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem; margin-top: var(--space-block); }
  .contact-grid h2 { font-size: 1.15rem; font-family: var(--font-body); font-variation-settings: 'wght' 620; }
  .contact-grid address { font-style: normal; margin-bottom: 1.2rem; }
  .contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
  .contact-note { color: var(--ink-soft); font-size: var(--size-small); margin-top: 1rem; max-width: 32ch; }
  @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr 1fr; } }
  @media (max-width: 520px) { .contact-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   18. Salonstoel huren
   ========================================================================== */

  .rent-hero__grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
  }
  .rent-media { border-radius: var(--radius-media); overflow: hidden; aspect-ratio: 16 / 9; background: var(--rose); }
  .rent-video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .rent-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; margin-top: 1.8rem; }

  .rent-cols { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 6rem); }
  .rent-cols h3 { margin-top: 2rem; font-size: 1.15rem; font-family: var(--font-body); font-variation-settings: 'wght' 620; }
  .rent-list { list-style: none; margin: 1.2rem 0 0; padding: 0; border-top: 1px solid var(--line-strong); }
  .rent-list li {
    padding: 0.85rem 0.2rem;
    border-bottom: 1px solid var(--line-strong);
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem);
    font-variation-settings: 'opsz' 40, 'wght' 420;
  }
  .rent-note { color: var(--ink-soft); font-size: var(--size-small); margin-top: 1rem; max-width: 52ch; }

  .rent-rates { margin: 1.2rem 0 0; border-top: 1px solid var(--line-strong); max-width: 30rem; }
  .rent-rates div {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 1rem 0.2rem;
    border-bottom: 1px solid var(--line-strong);
  }
  .rent-rates dt { font-family: var(--font-display); font-size: clamp(1.2rem, 1rem + 0.8vw, 1.7rem); }
  .rent-rates dd { margin: 0; color: var(--gold-text); font-size: 1.15rem; font-variation-settings: 'wght' 560; }

  .rent-visit address { font-style: normal; margin-top: 1.2rem; }

  @media (max-width: 900px) {
    .rent-hero__grid, .rent-cols { grid-template-columns: 1fr; }
  }

/* ==========================================================================
   19. Juridische pagina's
   ========================================================================== */

  .legal-section { padding-block: clamp(2rem, 5vh, 4rem) clamp(3rem, 7vh, 5rem); }
  .legal-head { max-width: 46rem; }
  .legal-title { margin-bottom: 1.2rem; }
  .legal-lede { max-width: 44ch; }
  .legal-meta {
    margin-top: 1.4rem;
    font-size: var(--size-small);
    color: var(--ink-soft);
    font-family: var(--font-display);
    font-style: italic;
  }

  /* Inhoudsopgave: genummerde kolommenlijst met gouden cijfers */
  .legal-toc {
    margin-block: clamp(2.5rem, 5vh, 3.6rem);
    padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.4rem, 2.5vw, 2.2rem);
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) + 4px);
    background: color-mix(in srgb, var(--rose-soft) 55%, transparent);
    position: relative;
  }
  .legal-toc::before {
    content: '';
    position: absolute; top: 0;
    left: clamp(1.4rem, 2.5vw, 2.2rem); right: clamp(1.4rem, 2.5vw, 2.2rem);
    height: 2px;
    background: linear-gradient(90deg, var(--gold), transparent);
  }
  .legal-toc__label {
    display: block;
    font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--gold-text);
    margin-bottom: 1rem;
  }
  .legal-toc ol {
    margin: 0; padding: 0;
    list-style: none;
    counter-reset: toc;
    columns: 2;
    column-gap: clamp(1.5rem, 4vw, 3rem);
    font-size: var(--size-small);
  }
  .legal-toc li {
    counter-increment: toc;
    break-inside: avoid;
    margin-bottom: 0.45rem;
  }
  .legal-toc li::before {
    content: counter(toc) '.';
    color: var(--gold-text);
    font-family: var(--font-display);
    font-style: italic;
    margin-right: 0.45rem;
  }
  .legal-toc a { color: var(--ink-mid); text-decoration: none; }
  .legal-toc a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

  .legal-body { max-width: 44rem; }
  .legal-block { scroll-margin-top: calc(var(--bar-h) + 1.5rem); }
  .legal-block + .legal-block { margin-top: clamp(2.2rem, 4vh, 3.2rem); }
  .legal-block h2 {
    font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.75rem);
    line-height: 1.2;
    margin-bottom: 0.9rem;
    display: flex; gap: 0.7rem; align-items: baseline;
  }
  .legal-num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 0.75em;
    color: var(--gold-text);
    flex: none;
  }
  .legal-block p { margin-bottom: 0.9rem; }
  .legal-list { margin: 0 0 1rem; padding-left: 1.1rem; }
  .legal-list li { margin-bottom: 0.5rem; }
  .legal-list li::marker { color: var(--gold); }

  /* Tabellen voor bewaartermijnen en verwerkers */
  .legal-table-wrap { overflow-x: auto; margin: 1.2rem 0 1.4rem; }
  .legal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
    text-align: left;
  }
  .legal-table th, .legal-table td {
    padding: 0.7rem 0.9rem 0.7rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
  }
  .legal-table thead th {
    font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: var(--gold-text);
    font-variation-settings: 'wght' 600;
    border-bottom-color: var(--line-strong);
  }
  .legal-table tbody th {
    font-variation-settings: 'wght' 600;
    color: var(--ink);
    padding-right: 1.4rem;
  }
  .legal-table td { color: var(--ink-mid); }

  @media (max-width: 640px) {
    .legal-toc ol { columns: 1; }
    /* Tabellen stapelen: rijkop als kopje, cellen eronder */
    .legal-table thead { display: none; }
    .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100%; }
    .legal-table tr { padding: 0.75rem 0; border-bottom: 1px solid var(--line); }
    .legal-table th, .legal-table td { border: 0; padding: 0.1rem 0; }
    .legal-table tbody th { padding-bottom: 0.3rem; }
  }

/* ==========================================================================
   20. 404-pagina
   ========================================================================== */

/* Schermvullende foutpagina in de huisstijl: roze gloed, bloesemtak linksboven,
   een groot cursief 404 met een gouden nul, daarna de weg terug. */
.notfound {
  position: relative;
  min-height: calc(100svh - var(--bar-h, 5rem));
  display: grid;
  place-items: center;
  padding-block: clamp(3rem, 8vh, 6rem);
  overflow: hidden;
  text-align: center;
}
.notfound::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(34% 40% at 64% 22%, rgba(205, 165, 92, 0.12), transparent 100%),
    radial-gradient(56% 62% at 50% 46%, #efd0c9 18%, var(--rose) 48%, color-mix(in srgb, var(--rose) 40%, transparent) 72%, transparent 100%);
}
.notfound .notfound-bloom {
  position: absolute;
  z-index: 1;
  top: -1rem;
  left: -4rem;
  width: clamp(14rem, 30vw, 26rem);
  height: auto;
  transform: scaleX(-1);
  opacity: 0.9;
  pointer-events: none;
}
.notfound-inner { position: relative; z-index: 2; max-width: 44rem; padding-inline: var(--gutter); }
.notfound-code {
  margin: 0 0 0.2rem;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: 'opsz' 144, 'wght' 330;
  font-size: clamp(7rem, 4rem + 14vw, 15rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.notfound-code em { font-style: italic; color: var(--gold); }
.notfound h1 {
  margin: 0.6rem 0 1rem;
  font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem);
  text-wrap: balance;
}
.notfound .lede { margin-inline: auto; max-width: 36rem; }
.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 1rem;
  margin-top: 2rem;
}
.notfound-label {
  margin: 2.6rem 0 0.9rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.notfound-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}
.notfound-chips a {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ground) 70%, transparent);
  color: var(--ink);
  font-size: 0.92rem;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-hover), border-color var(--dur-fast) var(--ease-hover), color var(--dur-fast) var(--ease-hover);
}
.notfound-chips a:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.notfound-help { margin-top: 2rem; font-size: var(--size-small); color: var(--ink-soft); }
.notfound-help a { color: var(--ink); }
@media (max-width: 560px) {
  .notfound .notfound-bloom { top: -2.5rem; left: -4.5rem; width: 11rem; opacity: 0.5; }
  .notfound-actions .btn { width: 100%; justify-content: center; }
}