/* ============================================================
   Anima Domus — styles (moodboard edition)
   Light, natural, inviting: cream/sand, soft sage, Cormorant + Montserrat.
   ============================================================ */

/* ---- Fonts (self-hosted) ---- */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/cormorant-400.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/cormorant-500.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-600.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/montserrat-300.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/montserrat-400.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/montserrat-500.woff2") format("woff2"); }

/* ---- Tokens ---- */
:root {
  /* Colour (from the brand moodboard) */
  --sand: #f1e8d8;        /* main warm ground, matched to the logo paper */
  --cream: #f7f1e7;       /* lighter cream for alternating surfaces */
  --sage: #b7bdaa;        /* muted sage, the primary accent */
  --sage-pale: #e5e8da;   /* pale sage tint for soft section bands */
  --sage-hover: #a7af96;  /* deeper sage for button hover */
  --sage-deep: #4d6857;   /* deep herbal green from the logo, for the primary CTA so it pops */
  --sage-deep-hover: #405a48;
  --blush: #efcac3;       /* dusty pink, a rare warm accent */
  --taupe: #d5cdc1;       /* warm grey for surfaces / dividers */
  --ink: #3e443b;         /* deep charcoal-green, body + headings */
  --ink-soft: #5c6157;    /* secondary text */
  --charcoal: #656860;    /* the brand charcoal, for muted labels */
  --line: #e3dccd;        /* hairline on sand */
  --on-sage: #2f342b;     /* dark text on sage */

  /* Type — a small set of NAMED ROLES, each ONE defined size, used consistently.
     Only these sizes appear anywhere in the sheet; nothing is sized ad hoc. Just THREE
     heading tiers (Title / Header / Display) so the page reads cohesively top to bottom.
       Display  – the hero wordmark (one place)        --fs-display
       Title    – every section heading                --fs-h2
       Header   – every sub-heading, price, mantra      --fs-h3
       Subtext  – intros, hero line, brand wordmark     --fs-lede
       Text     – all running copy                      --fs-body
       Detail   – fine print, units, nav, captions      --fs-sm
       Label    – tracked eyebrows / tags               --fs-label */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-label: 0.78rem;    /* 12.5px — Label: tracked eyebrows, tags, the compact CTA */
  --fs-sm: 0.9375rem;     /* 15px — Detail: fine print, units, nav links, hints, tagline */
  --fs-body: 1.0625rem;   /* 17px — Text: all running copy; also the path markers */
  --fs-lede: clamp(1.2rem, 1.1rem + 0.45vw, 1.3rem);   /* 19.2–20.8px — Subtext: intros, hero line, brand wordmark, menu links (kept a clear step above Text at every width) */
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 1.85rem);       /* 24–29.6px — Header: every sub-heading, the prices, the visie mantra */
  --fs-h2: clamp(2rem, 1.5rem + 2.2vw, 3rem);          /* 32–48px — Title: every section heading */
  --fs-display: clamp(2.4rem, 1.6rem + 3.6vw, 4.5rem); /* 38.4–72px — Display: the hero wordmark lockup */
  --ls-label: 0.22em;     /* tracking shared by every tracked label */

  /* Space */
  --shell-max: 72rem;
  --shell-pad: clamp(1.25rem, 5vw, 2.5rem);
  --section-y: clamp(4.5rem, 3rem + 7vw, 8rem);
  --header-h: 4.75rem;

  /* Form */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* Motion */
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 220ms;
  --dur-reveal: 750ms;
  --breath: 9s;
  --ease-breath: cubic-bezier(0.45, 0, 0.55, 1);

  /* Depth */
  --shadow-soft: 0 18px 50px -28px rgba(62, 68, 59, 0.4);
  --shadow-header: 0 6px 22px -16px rgba(62, 68, 59, 0.3);

  /* z-index */
  --z-header: 200;
  --z-scrim: 380;
  --z-menu: 400;
  --z-skip: 500;
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.008em;
  color: var(--ink);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-wrap: break-word;
}

picture { display: block; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: 0.005em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
p { text-wrap: pretty; }
strong { font-weight: 500; }

:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--sand), 0 0 0 4px var(--ink);
}

.skip-link {
  position: absolute; left: 1rem; top: -100%; z-index: var(--z-skip);
  background: var(--ink); color: var(--cream);
  padding: 0.75rem 1.25rem; border-radius: var(--r-pill); text-decoration: none;
  transition: top var(--dur-quick) var(--ease-calm);
}
.skip-link:focus { top: 1rem; }

/* ---- Layout ---- */
.shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: var(--shell-pad); }
.section { padding-block: var(--section-y); scroll-margin-top: var(--header-h); }

.section__title { font-size: var(--fs-h2); margin-bottom: 1.25rem; }
.lede { font-size: var(--fs-lede); font-weight: 300; line-height: 1.7; color: var(--ink); }
.section p + p { margin-top: 1.1rem; }

/* ---- Soft dividers ----
   The brand's quiet separators, drawn from the Welkom cadence and used site-wide:
   a tapering hairline under section headings, a centre-weighted one between text blocks. */
.rule { height: 1px; border: 0; }
.rule--title { width: min(19rem, 72%); margin: 1.05rem 0 1.7rem; background: linear-gradient(to right, var(--line) 0%, var(--line) 55%, transparent 100%); }
.rule--between { width: min(14rem, 62%); margin: 1.5rem 0; background: linear-gradient(to right, transparent 0%, var(--line) 28%, var(--line) 72%, transparent 100%); }
.rule--center { margin-inline: auto; background: linear-gradient(to right, transparent 0%, var(--line) 28%, var(--line) 72%, transparent 100%); }
/* a heading directly followed by a title rule hands its bottom gap to the rule */
.section__title:has(+ .rule--title) { margin-bottom: 0; }

/* ---- Buttons ---- */
.btn {
  --btn-px: 2.1rem; --btn-py: 0.95rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-sm);
  letter-spacing: 0.06em; text-transform: uppercase; line-height: 1;
  text-decoration: none; cursor: pointer;
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--r-pill); border: 1px solid transparent;
  transition: background var(--dur-quick) var(--ease-calm), color var(--dur-quick) var(--ease-calm),
    border-color var(--dur-quick) var(--ease-calm), transform var(--dur-quick) var(--ease-calm);
}
.btn--primary { background: var(--sage-deep); color: var(--cream); box-shadow: 0 10px 24px -12px rgba(45, 60, 50, 0.55); }
.btn--primary:hover { background: var(--sage-deep-hover); transform: translateY(-1px); box-shadow: 0 16px 30px -14px rgba(45, 60, 50, 0.6); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--sage); }
.btn--ghost:hover { background: var(--sage-pale); }
.btn--sm { --btn-px: 1.4rem; --btn-py: 0.7rem; font-size: var(--fs-label); }

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-quick) var(--ease-calm), box-shadow var(--dur-quick) var(--ease-calm),
    border-color var(--dur-quick) var(--ease-calm);
}
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: inline-flex; flex-direction: column; text-decoration: none; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 600; letter-spacing: 0.02em; color: var(--ink); transition: opacity var(--dur-quick) var(--ease-calm), visibility var(--dur-quick) var(--ease-calm); }
/* The hero carries its own large wordmark; while it fills the screen the small header
   wordmark is a redundant twin, so reveal it only once scrolled past the hero (desktop). */
@media (min-width: 880px) {
  .has-js .site-header.is-over-hero .brand__name { opacity: 0; visibility: hidden; }
}

.nav__list { display: flex; align-items: center; gap: 2rem; list-style: none; padding: 0; }
.nav__link {
  position: relative; text-decoration: none; font-weight: 400; font-size: var(--fs-sm);
  letter-spacing: 0.03em; color: var(--ink-soft); padding: 0.35rem 0;
  transition: color var(--dur-quick) var(--ease-calm);
}
.nav__link::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--sage); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-quick) var(--ease-calm); }
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(1); }
/* scroll-spy: the section currently in view */
.nav__link.is-current { color: var(--ink); }
.nav__link.is-current::after { transform: scaleX(1); }

.site-header.is-scrolled { background: rgba(241, 232, 216, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: var(--line); box-shadow: var(--shadow-header); }

.menu-toggle { display: none; align-items: center; gap: 0.6rem; min-height: 44px; background: none; border: none; cursor: pointer; font: inherit; font-weight: 500; color: var(--ink); padding: 0.4rem 0.2rem; }
.menu-toggle__bars { position: relative; display: inline-block; width: 22px; height: 12px; }
.menu-toggle__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform var(--dur-quick) var(--ease-calm), top var(--dur-quick) var(--ease-calm);
}
.menu-toggle__bars span:nth-child(1) { top: 3px; }
.menu-toggle__bars span:nth-child(2) { top: 9px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) { top: 6px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) { top: 6px; transform: rotate(-45deg); }
.menu-toggle__label { font-size: var(--fs-sm); min-width: 3.6ch; text-align: left; }

.mobile-menu__scrim {
  position: fixed; inset: var(--header-h) 0 0 0; z-index: var(--z-scrim);
  background: rgba(62, 68, 59, 0.16); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-quick) var(--ease-calm), visibility var(--dur-quick);
}
.mobile-menu__scrim.is-open { opacity: 1; visibility: visible; }

.mobile-menu {
  position: fixed; inset: var(--header-h) 0 auto 0; z-index: var(--z-menu);
  background: var(--cream); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft);
  transform: translateY(-12px); opacity: 0; visibility: hidden;
  transition: transform var(--dur-quick) var(--ease-calm), opacity var(--dur-quick) var(--ease-calm), visibility var(--dur-quick);
}
.mobile-menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
.mobile-menu__nav { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem var(--shell-pad) 1.75rem; }
.mobile-menu__link { text-decoration: none; color: var(--ink); font-family: var(--font-display); font-weight: 500; font-size: var(--fs-lede); padding: 0.7rem 0.25rem; border-bottom: 1px solid var(--line); }
.mobile-menu__cta { margin-top: 1.1rem; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--sand);
  margin-top: calc(-1 * var(--header-h)); padding-top: var(--header-h);
  min-height: 100svh; display: flex; flex-direction: column; justify-content: center;
  text-align: center;
}
/* ============================================================
   Watercolour washes — real painted pigment (the brand mark), softened
   ============================================================ */
.hero__wash, .visie__wash, .wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

/* corner wash for content sections: a soft, blurred bleed of the painted mark.
   A directional mask keeps the deep pigment in the corner and fades it out toward
   the content, so text only ever meets the pale outer wash (contrast stays AA). */
.wash::before {
  content: ""; position: absolute; width: clamp(16rem, 34vw, 28rem); aspect-ratio: 1;
  background: url("../img/wash-mark.webp") center / contain no-repeat;
  filter: blur(8px) saturate(0.9); opacity: 0.42;
}
.wash--tr::before { top: -14%; right: -11%; -webkit-mask-image: radial-gradient(130% 130% at 100% 0%, #000 24%, transparent 70%); mask-image: radial-gradient(130% 130% at 100% 0%, #000 24%, transparent 70%); }
.wash--bl::before { bottom: -14%; left: -11%; -webkit-mask-image: radial-gradient(130% 130% at 0% 100%, #000 24%, transparent 70%); mask-image: radial-gradient(130% 130% at 0% 100%, #000 24%, transparent 70%); }
.wash--br::before { bottom: -14%; right: -11%; -webkit-mask-image: radial-gradient(130% 130% at 100% 100%, #000 24%, transparent 70%); mask-image: radial-gradient(130% 130% at 100% 100%, #000 24%, transparent 70%); }
.wash--flip::before { background-position: 32% 68%; }

/* hero: the crisp painted mark floating over a large, soft watercolour aura */
.hero__wash::before {
  content: ""; position: absolute; left: 50%; top: 45%; translate: -50% -50%;
  width: min(56rem, 118vw); aspect-ratio: 1;
  background: url("../img/wash-mark.webp") center / contain no-repeat;
  filter: blur(30px) saturate(0.95); opacity: 0.45;
  transform-origin: center; animation: breathe-wash calc(var(--breath) + 1s) var(--ease-breath) infinite;
}
.hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: clamp(1.25rem, 3vw, 1.9rem); padding-block: clamp(2rem, 6vh, 4rem); }
.hero__lockup { display: flex; flex-direction: column; align-items: center; }
.hero__mark {
  display: block; width: min(30rem, 78vw); margin-inline: auto;
  -webkit-mask-image: radial-gradient(closest-side at 50% 47%, #000 58%, transparent 95%);
  mask-image: radial-gradient(closest-side at 50% 47%, #000 58%, transparent 95%);
  animation: breathe-scale calc(var(--breath) + 1s) var(--ease-breath) infinite;
}
.hero__mark img { display: block; width: 100%; height: auto; }
/* The wordmark sits on the sand like print: a soft letterpress lift, set a touch larger. */
.hero__title { margin: clamp(-2.5rem, -4vw, -1.25rem) 0 0; font-family: var(--font-display); font-weight: 500; font-size: calc(var(--fs-display) * 1.25); letter-spacing: 0.02em; line-height: 1; color: var(--ink); text-shadow: 0 1px 0 rgba(247, 241, 231, 0.7), 0 3px 16px rgba(62, 68, 59, 0.12); }
/* the line-heart-line flourish from the logo lockup */
.hero__rule { display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: min(17rem, 64%); margin: clamp(0.85rem, 2vw, 1.15rem) auto 0; }
.hero__rule-line { height: 1px; flex: 1; }
.hero__rule-line:first-child { background: linear-gradient(to right, transparent, var(--sage-hover) 38%); }
.hero__rule-line:last-child { background: linear-gradient(to left, transparent, var(--sage-hover) 38%); }
.hero__heart { flex: none; width: 1rem; height: 1rem; color: var(--sage-deep); }
.hero__tagline { margin-top: 0.85rem; font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.16em; color: var(--ink-soft); }
.hero__therapie { margin-top: 0.7rem; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--charcoal); }
.hero__scroll { display: grid; place-items: center; width: 2.75rem; height: 4.75rem; margin: 0 auto clamp(1.25rem, 4vh, 2.25rem); }
.hero__scroll-track { width: 1px; height: 3.5rem; overflow: hidden; }
.hero__scroll-line { display: block; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, var(--sage)); animation: scrollcue 2.6s var(--ease-calm) infinite; }
@keyframes scrollcue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* keyword strip from the moodboard */
.keywords { background: var(--sage-pale); padding-block: 1.1rem; }
.keywords__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.45rem 0; list-style: none; padding: 0; }
.keywords__list li { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--charcoal); }
.keywords__list li:not(:last-child)::after { content: "·"; color: var(--sage); margin: 0 0.95rem; }

/* ============================================================
   Values ("Over Anima Domus")
   ============================================================ */
.values { text-align: center; background: var(--cream); }
.values__head { max-width: 46ch; margin-inline: auto; }
.values__head .lede { color: var(--ink-soft); }

/* Four values as an even, symmetrical row: balanced columns that collapse 4 -> 2 -> 1. */
.values__grid {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
  display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem);
  max-width: 64rem; margin-inline: auto;
}
@media (min-width: 481px) {
  .values__grid { grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 3rem); }
}
@media (min-width: 861px) {
  .values__grid { grid-template-columns: repeat(4, 1fr); align-items: start; }
}
.value { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1rem; }
/* A real watercolour bloom cropped from the brand mark, a different fragment and size
   per value, so the four read as hand-placed pigment rather than a repeated icon strip.
   No icon, no box; the painted pigment carries its own sage/blush/ochre variation. */
.value__seed {
  width: clamp(3rem, 6vw, 3.75rem); aspect-ratio: 1; border-radius: 50%;
  background: url("../img/wash-mark.webp") 50% 50% / 230% no-repeat;
  filter: saturate(0.96) blur(0.4px); opacity: 0.92; transform: scale(0.8);
  -webkit-mask-image: radial-gradient(circle at 50% 48%, #000 50%, transparent 78%);
  mask-image: radial-gradient(circle at 50% 48%, #000 50%, transparent 78%);
}
.value:nth-child(1) .value__seed { background-position: 20% 30%; }
.value:nth-child(2) .value__seed { background-position: 80% 24%; width: clamp(2.7rem, 5.2vw, 3.3rem); }
.value:nth-child(3) .value__seed { background-position: 30% 76%; width: clamp(3.3rem, 6.6vw, 4.1rem); }
.value:nth-child(4) .value__seed { background-position: 74% 70%; }
.value h3 { font-size: var(--fs-h3); text-wrap: balance; }
.value p { font-weight: 300; color: var(--ink-soft); max-width: 24ch; margin-inline: auto; text-wrap: pretty; }

/* ============================================================
   Welkom
   ============================================================ */
.section--welkom { background: var(--cream); position: relative; isolation: isolate; overflow: hidden; }
/* Stacked: a wide image banner over a single centred, measured column (calmer reading cadence). */
.welkom__grid { display: grid; grid-template-columns: 1fr; justify-items: center; gap: 2.6rem; }
.welkom__img { margin: 0; position: relative; width: 100%; max-width: 52rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.welkom__img img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 42%; }

/* Photographer credit (naamsvermelding) — required by Kara Vrielink's terms.
   Subtle glass pill anchored to the image, echoing the original watermark spot. */
.photo-credit { position: absolute; right: 0.55rem; bottom: 0.5rem; z-index: 2; margin: 0;
  padding: 0.22rem 0.6rem; font-size: 0.68rem; letter-spacing: 0.03em; line-height: 1; color: #fff;
  background: rgba(28, 32, 30, 0.34); border-radius: 999px; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.photo-credit a { color: inherit; text-decoration: none; }
.photo-credit a:hover, .photo-credit a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.welkom__copy { max-width: 48ch; }
.welkom__copy .lede { margin-bottom: 0; } /* the between-divider carries the gap */
.welkom__copy p:not(.lede) { color: var(--ink-soft); }

/* ============================================================
   Wat is trauma (uitleg)
   ============================================================ */
.section--uitleg { background: var(--sand); position: relative; isolation: isolate; overflow: hidden; }
.uitleg { max-width: 60ch; margin-inline: auto; }
.uitleg .lede { margin-top: 0.75rem; }
.uitleg__body { margin-top: clamp(1.5rem, 3.5vw, 2.25rem); }
.uitleg__body p { color: var(--ink-soft); }

/* ============================================================
   Hoe ziet traumabegeleiding eruit (a real, ordered path)
   ============================================================ */
.section--begeleiding { background: var(--cream); position: relative; isolation: isolate; overflow: hidden; }
.begeleiding__head { max-width: 52ch; }
.begeleiding__head .lede { color: var(--ink-soft); margin-top: 0.6rem; }
.path { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 44rem; }
.path__step { position: relative; display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 3vw, 1.5rem); padding-bottom: clamp(1.75rem, 4vw, 2.6rem); }
.path__step:last-child { padding-bottom: 0; }
/* one hairline rail threading the markers, never a per-item side stripe */
.path__step:not(:last-child)::before { content: ""; position: absolute; left: 1.2rem; top: 2.85rem; bottom: 0; width: 1px; background: var(--line); }
.path__marker {
  position: relative; z-index: 1;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-display); font-size: var(--fs-body); font-weight: 600; line-height: 1;
  color: var(--sage-deep); background: var(--sage-pale);
}
.path__content { padding-top: 0.3rem; }
.path__title { font-size: var(--fs-h3); margin-bottom: 0.35rem; }
.path__content p { color: var(--ink-soft); font-weight: 300; max-width: 52ch; }
.begeleiding__note { margin-top: clamp(2rem, 4vw, 2.75rem); max-width: 52ch; font-family: var(--font-display); font-style: italic; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink); }

/* ============================================================
   Werkwijze
   ============================================================ */
.werkwijze__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.werkwijze__intro { position: sticky; top: calc(var(--header-h) + 1.5rem); }
.werkwijze__intro p { color: var(--ink-soft); max-width: 34ch; }
.werkwijze__methods { display: flex; flex-direction: column; }
.method { padding-block: clamp(1.75rem, 4vw, 2.5rem); }
.method:first-child { padding-top: 0; }
.method:not(:last-child) { border-bottom: 1px solid var(--line); }
.method__tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--charcoal); margin-bottom: 0.6rem; }
.method__title { font-size: var(--fs-h3); margin-bottom: 0.6rem; }
.method__body { color: var(--ink-soft); font-weight: 300; max-width: 56ch; }
.werkwijze__together { padding-top: clamp(1.75rem, 4vw, 2.5rem); color: var(--ink-soft); font-weight: 300; max-width: 56ch; }
.werkwijze__together strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   Tarieven
   ============================================================ */
.section--tarieven { background: var(--sand); position: relative; isolation: isolate; overflow: hidden; }
.tarieven__inner { display: flex; flex-direction: column; }
.tarieven__head { max-width: 48ch; }
.tarieven__head .lede { color: var(--ink-soft); margin-top: 0.4rem; }
.tarieven__options {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 1.75rem);
  align-items: start;
}
@media (max-width: 640px) { .tarieven__options { grid-template-columns: 1fr; } }
.tarief {
  display: flex; flex-direction: column; gap: 0.85rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-lg);
  background: transparent; border: 1px solid var(--taupe);
}
.tarief--featured { background: var(--sage-pale); border-color: transparent; box-shadow: var(--shadow-soft); }
.tarief__tag { font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--charcoal); }
.tarief__name { font-size: var(--fs-h3); }
.tarief__desc { color: var(--ink-soft); font-weight: 300; max-width: 28ch; }
.tarief__includes { list-style: none; padding: 0; margin: 0.2rem 0; display: flex; flex-direction: column; gap: 0.55rem; }
.tarief__includes li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-weight: 300; padding-bottom: 0.55rem; border-bottom: 1px solid rgba(101, 104, 96, 0.16); }
.tarief__includes li:last-child { border-bottom: 0; padding-bottom: 0; }
.tarief__dur { color: var(--ink-soft); font-size: var(--fs-sm); white-space: nowrap; }
.tarief__price { margin-top: 0.65rem; display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.tarief__amount { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; line-height: 1; color: var(--ink); }
.tarief__unit { color: var(--ink-soft); font-size: var(--fs-sm); }
.tarieven__note { margin-top: clamp(1.75rem, 3vw, 2.25rem); color: var(--ink-soft); font-size: var(--fs-sm); }

/* ============================================================
   Wat je kunt verwachten (a calm, card-less practical block)
   ============================================================ */
.section--verwachten { background: var(--sage-pale); position: relative; isolation: isolate; overflow: hidden; }
.verwachten__head { max-width: 54ch; }
.verwachten__head .lede { color: var(--ink-soft); margin-top: 0.5rem; }
.verwachten__list { margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0; max-width: 47rem; }
.verwachten__row {
  display: grid; grid-template-columns: minmax(11rem, 15rem) 1fr; gap: clamp(0.6rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 3.2vw, 2rem); border-top: 1px solid rgba(101, 104, 96, 0.18);
}
.verwachten__row:first-child { border-top: 0; padding-top: 0; }
/* Compact list terms in a narrow side column: Subtext role, and hyphenate long Dutch
   compounds (lang="nl") at syllable boundaries instead of snapping mid-word. */
.verwachten__term { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 500; line-height: 1.25; color: var(--ink); -webkit-hyphens: auto; hyphens: auto; }
.verwachten__detail { color: var(--ink-soft); font-weight: 300; max-width: 56ch; }
/* visibly-flagged placeholder so it never ships unfilled by accident */
.verwachten__todo { font-style: italic; color: var(--sage-deep); border-bottom: 1px dashed var(--sage-hover); }
@media (max-width: 760px) {
  .verwachten__row { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* ============================================================
   Veelgestelde vragen (same quiet, card-less rhythm as Verwachten)
   ============================================================ */
.faq__head { max-width: 54ch; }
.faq__head .lede { color: var(--ink-soft); margin-top: 0.5rem; }
.faq__list { margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0; max-width: 47rem; }
.faq__item { padding-block: clamp(1.4rem, 3vw, 1.9rem); border-top: 1px solid rgba(101, 104, 96, 0.18); }
.faq__item:first-child { border-top: 0; padding-top: 0; }
.faq__q { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 500; line-height: 1.3; color: var(--ink); }
.faq__a { margin: 0.45rem 0 0; color: var(--ink-soft); font-weight: 300; max-width: 58ch; }

/* ============================================================
   Voor wie
   ============================================================ */
.section--voor-wie { background: var(--sage-pale); position: relative; isolation: isolate; overflow: hidden; }
.voor-wie__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.75rem); align-items: start; }
.voor-wie__head { max-width: 48ch; }
.voor-wie__head p { color: var(--ink-soft); margin-top: 0.5rem; max-width: 40ch; }
/* The reasons gather into one soft, warm panel: a held space on the sage band. */
.reasons { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0; column-gap: clamp(1.5rem, 3vw, 2.5rem); background: var(--cream); border-radius: var(--r-lg); box-shadow: var(--shadow-soft); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.75rem); }
.reason { position: relative; padding: 1.15rem 1rem 1.15rem 2.1rem; border-top: 1px solid rgba(101, 104, 96, 0.18); color: var(--ink); font-weight: 300; }
.reason::before { content: ""; position: absolute; left: 0.2rem; top: 1.55rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--sage); }
/* the top row of the panel has no divider above it */
.reason:nth-child(1), .reason:nth-child(2) { border-top: 0; }
/* Audience group labels: clearly mark the adults vs children lists. */
.voor-wie__group-label { margin: 0 0 0.85rem; font-size: var(--fs-label); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--charcoal); }

/* ============================================================
   Visie (soft band)
   ============================================================ */
.visie { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(5rem, 10vw, 8rem); background: var(--sand); }
.visie__wash::before {
  content: ""; position: absolute; left: 50%; top: 49%; translate: -50% -50%;
  width: min(46rem, 118vw); aspect-ratio: 1;
  /* a single even, symmetric watercolour glow (warm core into sage): tidy, never blotchy */
  background: radial-gradient(circle at 50% 50%,
    rgba(228, 206, 150, 0.20) 0%,
    rgba(183, 189, 170, 0.22) 38%,
    rgba(183, 189, 170, 0) 72%);
  transform-origin: center; animation: breathe-wash calc(var(--breath) + 2s) var(--ease-breath) infinite;
}
/* A wide coastal banner introducing the vision, treated like the Welkom image. */
.visie__img { margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); position: relative; width: 100%; max-width: 40rem; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-soft); }
.visie__img img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; object-position: 50% 58%; }
.visie__inner { max-width: 40ch; margin-inline: auto; }
.visie__text { font-size: var(--fs-lede); font-weight: 300; color: var(--ink-soft); }
.visie__mantra { margin-top: clamp(1.1rem, 2.5vw, 1.6rem); font-family: var(--font-display); font-size: calc(var(--fs-h3) * 1.2); font-weight: 500; font-style: italic; line-height: 1.35; color: var(--ink); text-wrap: balance; }
/* The hero's line-heart flourish, echoed above the mantra to lift the vision. */
.visie__flourish { display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: min(13rem, 58%); margin: clamp(1.4rem, 3vw, 2rem) auto 0; }
.visie__flourish-line { height: 1px; flex: 1; }
.visie__flourish-line:first-child { background: linear-gradient(to right, transparent, var(--sage-hover)); }
.visie__flourish-line:last-child { background: linear-gradient(to left, transparent, var(--sage-hover)); }
.visie__flourish-heart { flex: none; width: 1rem; height: 1rem; color: var(--sage-deep); }

/* ============================================================
   Over mij
   ============================================================ */
.section--over-mij { background: var(--cream); }
.over-mij__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.over-mij__portrait { margin: 0; position: sticky; top: calc(var(--header-h) + 1.5rem); }
.over-mij__portrait img { width: 100%; border-radius: var(--r-lg); aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; box-shadow: var(--shadow-soft); }
.over-mij__copy p { max-width: 62ch; } /* a calmer reading measure for the long story */
.over-mij__copy .lede { margin-bottom: 1.3rem; }
.over-mij__copy p:not(.lede) { color: var(--ink-soft); font-weight: 300; }
.over-mij__copy p + p { margin-top: 1.1rem; }

/* ============================================================
   Contact
   ============================================================ */
.section--contact { text-align: center; background: var(--cream); position: relative; isolation: isolate; overflow: hidden; }
.contact__inner { max-width: 44rem; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.section--contact .lede { color: var(--ink-soft); max-width: 46ch; margin-inline: auto; }

/* Quieted contact: the CTA drops its glow here, and the block breathes more (distilled). */
.contact__inner .btn--primary { box-shadow: none; }
.contact__inner .btn--primary:hover { box-shadow: none; }
.contact__actions { margin-top: clamp(2.3rem, 5vw, 3.2rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.85rem; }
.btn__icon { display: inline-flex; }
.btn__icon svg { width: 1.2em; height: 1.2em; }
.contact__assurance { margin-top: clamp(1.5rem, 3.5vw, 2.15rem); max-width: 48ch; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; }
/* A pull-quote closing the Werkwijze, in its own full-width band below the two columns
   (kept out of the sticky-intro grid so the text never overlaps while scrolling). */
.werkwijze__quote { max-width: 34rem; margin: clamp(2.75rem, 6vw, 4.5rem) auto 0; text-align: center; }
.werkwijze__quote::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 3.25rem; line-height: 0.8; color: var(--sage); margin-bottom: 0.2rem; }
.werkwijze__quote-text { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: 500; font-style: italic; line-height: 1.3; color: var(--ink); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--sage-pale); color: var(--ink-soft); padding-block: clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 2rem; }
.site-footer__brand { font-family: var(--font-display); font-size: var(--fs-lede); font-weight: 600; color: var(--ink); letter-spacing: 0.02em; }
.site-footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.75rem; font-size: var(--fs-sm); }
.site-footer__meta a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); text-decoration: none; }
.site-footer__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   Reveal + breathing
   ============================================================ */
.has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur-reveal) var(--ease-calm), transform var(--dur-reveal) var(--ease-calm); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }

@keyframes breathe-wash { 0%, 100% { opacity: 0.4; transform: scale(0.9); } 50% { opacity: 0.8; transform: scale(1.1); } }
@keyframes breathe-scale { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

/* Pause the ambient breathing while its section is off-screen (toggled by JS) to spare the battery on long scrolls. */
.hero__wash.is-paused::before,
.visie__wash.is-paused::before,
.hero__mark.is-paused { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .has-js .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__scroll-line { animation: none; opacity: 0.6; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
  .hero__mark, .hero__wash::before, .visie__wash::before { animation: none !important; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 879px) {
  .nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .welkom__grid, .werkwijze__grid, .voor-wie__grid, .over-mij__grid { grid-template-columns: 1fr; }
  .werkwijze__intro { position: static; }
  .reasons { grid-template-columns: 1fr; }
  .reason:nth-child(2) { border-top: 1px solid rgba(101, 104, 96, 0.18); } /* single column: restore divider */
  .welkom__img, .over-mij__portrait { max-width: 26rem; margin-inline: auto; }
  .over-mij__portrait { order: -1; position: static; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

@media (min-width: 880px) { .mobile-menu, .mobile-menu__scrim { display: none !important; } }

@media (max-width: 600px) {
  /* Mobile: a centered wrapping row of plain keywords (no dangling separators), not a tall stack. */
  .keywords__list { gap: 0.5rem; }
  .keywords__list li { padding: 0.2rem 0.45rem; }
  .keywords__list li:not(:last-child)::after { display: none; }
}

@media (max-width: 560px) {
  .btn { width: 100%; }
}

/* Never let a scroll-reveal section print (or save-to-PDF) blank. */
@media print {
  .has-js .reveal { opacity: 1 !important; transform: none !important; }
}