/* ==========================================================================
   Kracht van Vrouw Zijn — pilot / showcase
   Design system
   Merkkleuren, typografie en logo afgeleid van krachtvanvrouwzijn.nl
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Merkkleuren */
  --terracotta:      #CA5650;
  --terracotta-dark: #A8433E;
  --terracotta-soft: #E8A9A4;
  --plum:            #904F6C;
  --plum-dark:       #6E3A52;
  --plum-soft:       #C9A3B4;

  /* Warme neutralen */
  --cream:      #FDFAF7;
  --sand:       #F6EEE7;
  --sand-deep:  #EDE0D4;
  --clay:       #E0CDBF;
  --ink:        #2E2622;
  --ink-soft:   #6B5D55;
  --white:      #FFFFFF;

  /* Rollen */
  --bg:            var(--cream);
  --bg-alt:        var(--sand);
  --text:          var(--ink);
  --text-muted:    var(--ink-soft);
  --accent:        var(--terracotta);
  --accent-2:      var(--plum);
  --border:        rgba(46, 38, 34, 0.12);

  /* Typografie. De families komen uit public/assets/fonts/ en worden geladen in
     lettertypen.css; wat daarachter staat is de terugval voor de seconde dat
     het bestand er nog niet is.

     Butler kwam eerder van fonts.cdnfonts.com — een derde partij die bij elk
     paginabezoek het IP-adres van de bezoeker zag, zonder dat daar iets
     tegenover stond. Nu uit het pakket van de maker, in de repo.

     'Better Grade' stond hier vóór Parisienne en is weg: dat lettertype werd
     nergens geladen, dus die naam deed alleen alsof. */
  --font-heading: 'Butler', 'Playfair Display', 'Georgia', 'Times New Roman', serif;
  --font-body:    'Lato', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-script:  'Parisienne', 'Snell Roundhand', cursive;

  /* Ritme */
  --radius:    6px;
  --radius-lg: 14px;
  --arch:      50% 50% 8px 8px / 34% 34% 8px 8px;

  --shadow-sm: 0 2px 10px rgba(46, 38, 34, 0.06);
  --shadow:    0 10px 40px rgba(46, 38, 34, 0.09);
  --shadow-lg: 0 24px 70px rgba(46, 38, 34, 0.13);

  --wrap:   1180px;
  --wrap-n: 940px;
  --wrap-s: 720px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Reset & basis
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--accent); text-decoration: none; transition: color .25s var(--ease); }
a:hover { color: var(--terracotta-dark); }

h1, h2, h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: 400;
  line-height: 1.16;
  margin: 0 0 .5em;
  color: var(--ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.1rem); }
h3 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); }
h4 { font-size: 1.2rem; }

p { margin: 0 0 1.3em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0 0 1.4em; padding-left: 1.25em; }
li { margin-bottom: .55em; }

strong, b { font-weight: 700; }
em { font-style: italic; }

blockquote { margin: 0; }

::selection { background: var(--terracotta-soft); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--plum);
  outline-offset: 3px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; top: -60px; left: 16px; z-index: 999;
  background: var(--plum); color: #fff; padding: 10px 18px;
  border-radius: var(--radius); font-size: .9rem;
}
.skip-link:focus { top: 16px; color: #fff; }

/* Wel voorlezen, niet tonen — voor labels bij een veld dat zijn eigen
   placeholder al draagt. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */

/* Een regelafbreking die de schrijver zelf in de tekst zet blijft staan. Dat
   is nodig waar de kop anders op een lelijke plek breekt — "klacht of kracht?"
   viel uiteen over twee regels, "Midden-Nederland" ook. Verder gedraagt de
   tekst zich als altijd: losse spaties en inspringing vallen weg. */
h1, h2, h3, .eyebrow, .kicker, .lede { white-space: pre-line; }

/* De browser verdeelt de regels van een kop gelijkmatig in plaats van elke
   regel vol te maken en de rest te laten hangen. Dat scheelt losse woorden op
   een laatste regel, en het scheelt met de hand gezette afbrekingen die bij
   een andere schermbreedte weer misstaan. Een afbreking die de schrijver zelf
   in de tekst zet blijft voorgaan; zie de regel hierboven. */
h1, h2, h3 { text-wrap: balance; }

.wrap    { width: 100%; max-width: var(--wrap);   margin-inline: auto; padding-inline: 24px; }
.wrap-n  { width: 100%; max-width: var(--wrap);   margin-inline: auto; padding-inline: 24px; }

/* Tekstblokken stonden in een smallere kolom dan de blokken eromheen, waardoor
   ze zichtbaar inspringen. De maat is nu gelijk aan .wrap, links en rechts:
   een blok dat links uitlijnt maar rechts 192 pixels eerder ophoudt, leest als
   een fout en niet als een keuze.

   Een gecentreerde variant houdt wel de smallere maat, want daar is de kolom
   het ontwerp: een gecentreerde regel over de volle breedte is niet te volgen. */
.wrap-n.center > * { max-width: var(--wrap-n); margin-inline: auto; }
.wrap-s  { width: 100%; max-width: var(--wrap-s); margin-inline: auto; padding-inline: 24px; }

/* De ruimte tussen twee secties was op brede schermen 260px — genoeg om een
   pagina langer te laten voelen dan hij is, en op vijf pagina's het eerste dat
   opviel. Nu 192px: de blokken ademen nog, maar staan dichter op elkaar. */
.section        { padding: clamp(56px, 7vw, 96px) 0; position: relative; }
.section--tight { padding: clamp(42px, 5vw, 68px) 0; }
.section--sand  { background: var(--bg-alt); }
.section--clay  { background: var(--sand-deep); }
.section--plum  { background: var(--plum-dark); color: #F4E9EE; }
.section--plum h1, .section--plum h2, .section--plum h3 { color: #fff; }
.section--ink   { background: var(--ink); color: #E8DED6; }
.section--ink h2, .section--ink h3 { color: #fff; }

.grid { display: grid; gap: clamp(24px, 3.5vw, 48px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--wide-left  { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }

/* Beeld naast tekst: het kader loopt mee met de hoogte van de tekstkolom in
   plaats van op een vaste verhouding te blijven staan. Een liggende foto naast
   een lange opsomming werd anders een lage strook met een half scherm wit
   eronder. De ondergrens houdt het beeld overeind als de tekst juist kort is. */
.split--beeldhoog { align-items: stretch; }
.split--beeldhoog .figure { display: flex; flex-direction: column; }
.split--beeldhoog .figure__frame {
  flex: 1;
  aspect-ratio: auto;
  min-height: clamp(340px, 32vw, 540px);
}

.center { text-align: center; }
.center .eyebrow, .center .lede { margin-inline: auto; }
/* Gecentreerd blijft de lede wél smal: een korte regellengte houdt een
   gecentreerde alinea leesbaar. Links uitgelijnd loopt hij mee met de rest
   van de tekst, anders staat de eerste alinea smaller dan de alinea's
   eronder en oogt de kolom scheef. */
.center .lede { max-width: 62ch; }
/* De toelichting onder een statement staat gecentreerd en mag ruimer: hij
   hoort bij het citaat erboven, en op 62ch valt hij daar smal onder weg. */
.center .lede--breed { max-width: 82ch; }

.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   4. Typografische onderdelen
   -------------------------------------------------------------------------- */

.eyebrow {
  display: block;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  line-height: 1.1;
  color: var(--terracotta);
  margin-bottom: .35em;
  font-weight: 400;
}

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--plum);
  margin-bottom: 1.1em;
}
.section--plum .kicker, .section--ink .kicker { color: var(--terracotta-soft); }

.lede {
  font-size: clamp(1.1rem, 1.7vw, 1.32rem);
  line-height: 1.7;
  color: var(--text-muted);
}
.section--plum .lede, .section--ink .lede { color: rgba(255,255,255,.82); }

.script {
  font-family: var(--font-script);
  color: var(--terracotta);
  font-size: 1.35em;
  line-height: .9;
}

.rule {
  width: 64px; height: 2px; border: 0;
  background: var(--terracotta);
  margin: 1.6em 0;
}
.center .rule { margin-inline: auto; }

.pullquote {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3.2vw, 2.4rem);
  line-height: 1.32;
  color: var(--plum);
  max-width: 22ch;
}
.pullquote--wide { max-width: 34ch; }

/* Een uitspraak in een gecentreerd blok moet zelf ook gecentreerd staan. Zonder
   deze regel centreert `.center` alleen de tékst binnen een blok dat links
   blijft hangen op zijn eigen 22 of 34 tekens breed, terwijl de bronvermelding
   eronder wél over de volle breedte centreert — twee verschillende assen, en
   dat is precies wat je ziet als scheef. Stond hier eerder als inline stijl op
   één van de drie plekken waar dit voorkomt. */
.center > .pullquote { margin-inline: auto; }
.section--plum .pullquote, .section--ink .pullquote { color: #fff; }

.attrib {
  display: block;
  font-family: var(--font-body);
  font-size: .82rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 1.4em;
}
.section--plum .attrib, .section--ink .attrib { color: rgba(255,255,255,.6); }

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 15px 32px;
  border: 1.5px solid transparent;
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .3s var(--ease);
  background: var(--terracotta);
  color: #fff;
  line-height: 1.2;
  text-align: center;
}
.btn:hover {
  background: var(--terracotta-dark);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(202, 86, 80, .32);
}

.btn--outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: none; }

.btn--plum { background: var(--plum); }
.btn--plum:hover { background: var(--plum-dark); box-shadow: 0 10px 26px rgba(144, 79, 108, .32); }

.btn--light { background: #fff; color: var(--plum-dark); }
.btn--light:hover { background: var(--sand); color: var(--plum-dark); }

.btn--ghost-light { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost-light:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; box-shadow: none; }

.btn--sm { padding: 11px 22px; font-size: .72rem; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2em; }
.center .btn-row { justify-content: center; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .5em;
  font-size: .8rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--plum);
}
.link-arrow::after { content: '→'; transition: transform .3s var(--ease); font-size: 1.15em; }
.link-arrow:hover { color: var(--terracotta); }
.link-arrow:hover::after { transform: translateX(5px); }

/* --------------------------------------------------------------------------
   6. Header / navigatie
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(253, 250, 247, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--border);
  box-shadow: 0 4px 24px rgba(46,38,34,.05);
}

/* Vijf benoemde vakken. Bovenaan de pagina staan ze op twee regels — icoon,
   woordmerk en knop, met het menu eronder. Zodra `.is-stuck` erop staat wisselt
   het raster naar één regel en verdwijnt het woordmerk. Er beweegt dus niets
   met JavaScript; alleen de indeling verandert. */
.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "icon word cta"
    "menu menu menu";
  align-items: center;
  column-gap: 24px;
  padding: 14px 0 6px;
  transition: padding .3s var(--ease);
}
.site-header.is-stuck .nav {
  grid-template-areas: "icon menu cta";
  padding: 8px 0;
}

.nav__icon { grid-area: icon; display: flex; }
.nav__icon img { height: 62px; width: auto; transition: height .3s var(--ease); }
.site-header.is-stuck .nav__icon img { height: 38px; }

.nav__word { grid-area: word; justify-self: center; display: flex; }
.nav__word img { height: 58px; width: auto; display: block; }
.site-header.is-stuck .nav__word { display: none; }

/* Een menu-item met een lijst eronder. Het klapt uit bij hover én bij
   toetsenbordfocus ergens binnen de groep; dat laatste is de reden dat het met
   `:focus-within` gaat en niet met JavaScript. Zonder die tweede regel is de
   groep met de tab-toets onbereikbaar. */
.nav__groep { position: relative; }

.nav__pijl {
  display: inline-block; margin-left: 7px; vertical-align: middle;
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .25s var(--ease);
}
.nav__groep:hover .nav__pijl, .nav__groep:focus-within .nav__pijl {
  transform: translateY(0) rotate(225deg);
}

.nav__uitklap {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  min-width: 220px; margin: 0; padding: 10px 0; list-style: none;
  background: var(--cream); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  z-index: 40;
}
.nav__groep:hover .nav__uitklap, .nav__groep:focus-within .nav__uitklap {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
/* De muis moet de afstand tussen het item en de lijst kunnen oversteken zonder
   dat de lijst dichtklapt. */
.nav__groep::after {
  content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 12px;
}
.nav__uitklap a {
  display: block; padding: 9px 22px;
  font-size: .88rem; letter-spacing: .04em; color: var(--text);
  white-space: nowrap;
}
.nav__uitklap a:hover, .nav__uitklap a[aria-current='page'] { color: var(--terracotta); }

/* Het woordmerk in de voettekst, en de terugval als het icoon niet laadt. */
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__fallback {
  font-family: var(--font-heading);
  font-size: 1.2rem; line-height: 1.15; color: var(--ink);
  letter-spacing: .01em;
}
.brand__fallback span { display: block; font-family: var(--font-script); font-size: 1.5rem; color: var(--terracotta); }

.nav__menu-wrap { grid-area: menu; min-width: 0; }
.nav__menu {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  list-style: none; margin: 0; padding: 0;
}
.nav__menu > li { margin: 0; }

.nav__link {
  display: block; padding: 10px 14px;
  font-size: .81rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--terracotta); }
.nav__link[aria-current="page"] { position: relative; }
.nav__link[aria-current="page"]::after {
  content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 1.5px; background: var(--terracotta);
}

.nav__cta { grid-area: cta; justify-self: end; }
.nav__cta-mobile { display: none; }

.nav__burger {
  grid-area: burger;
  display: none; width: 46px; height: 46px; padding: 0;
  background: none; border: 0; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav__burger span {
  display: block; width: 24px; height: 2px; background: var(--ink);
  transition: all .3s var(--ease); border-radius: 2px;
}
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  padding: clamp(56px, 8vw, 110px) 0 clamp(64px, 9vw, 120px);
  background: linear-gradient(168deg, var(--sand) 0%, var(--cream) 58%, var(--sand-deep) 100%);
  overflow: hidden;
}
.hero::before {
  content: ''; position: absolute; top: -18%; right: -12%;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(202,86,80,.16), rgba(202,86,80,0) 68%);
  pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; bottom: -22%; left: -14%;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, rgba(144,79,108,.14), rgba(144,79,108,0) 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }

.hero__grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.hero__title { margin-bottom: .38em; }
/* Het slotwoord in de schrijfletter loopt door achter de aanloop en staat niet
   op een eigen regel: "naar doorleven" hoort bij elkaar. Verder niets forceren
   — de regel groeit vanzelf mee met de lussen van het schrift. */
.hero__title .script { font-size: 1.15em; }
.hero__lede { font-size: clamp(1.12rem, 1.6vw, 1.34rem); }

.hero__meta {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 2.4em; padding-top: 1.8em;
  border-top: 1px solid var(--border);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.hero__meta--kolom { flex-direction: column; gap: 10px; }
.hero__meta span { display: inline-flex; align-items: center; gap: .55em; }
.hero__meta span::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--terracotta); flex-shrink: 0;
}

/* Een kop die een hele zin is, een maat kleiner: op displayformaat wordt zo'n
   zin anders een muur van vier of vijf regels. */
.pagehero--compact h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); }

/* De woorden in de schrijfletter horen bij elkaar: "zelf doen" over twee
   regels leest als twee dingen in plaats van één.

   Alleen vanaf een breed scherm, waar de kolom ruim genoeg is dat zo'n woord
   er zeker in past. Daaronder mag het breken: een woord dat buiten het scherm
   valt is erger dan een woord dat afbreekt, en de schrijfletter is een stuk
   breder dan de gewone letter. */
@media (min-width: 900px) { .pagehero h1 .script { white-space: nowrap; } }

/* Pagina-hero (subpagina's) */
.pagehero {
  position: relative;
  padding: clamp(52px, 7vw, 96px) 0 clamp(44px, 6vw, 78px);
  background: linear-gradient(160deg, var(--sand) 0%, var(--cream) 100%);
  overflow: hidden;
}
.pagehero::before {
  content: ''; position: absolute; top: -30%; right: -8%;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(144,79,108,.13), rgba(144,79,108,0) 70%);
  pointer-events: none;
}
.pagehero .wrap, .pagehero .wrap-n, .pagehero .wrap-s { position: relative; z-index: 1; }
.pagehero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,68px); align-items: center; }

/* --------------------------------------------------------------------------
   8. Beeld
   -------------------------------------------------------------------------- */

.figure { position: relative; }

.figure__frame {
  position: relative; overflow: hidden;
  background: linear-gradient(145deg, var(--clay), var(--sand-deep));
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}
.figure__frame img {
  width: 100%; height: 100%; object-fit: cover;
  display: block; transition: transform .8s var(--ease);
}
.figure--arch .figure__frame { border-radius: var(--arch); }
.figure--round .figure__frame { border-radius: 50%; }

/* De verhouding staat op het kader zelf en niet op de figuur eromheen. Dat
   stond eerst andersom in de stylesheet terwijl de klasse wél op het kader
   werd gezet, waardoor geen enkele verhouding aankwam: elke foto viel terug op
   zijn eigen afmetingen. Een liggende groepsfoto werd zo een lage streep. */
.figure__frame--tall   { aspect-ratio: 4 / 5; }
.figure__frame--wide   { aspect-ratio: 16 / 10; }
.figure__frame--square { aspect-ratio: 1 / 1; }

.figure:hover .figure__frame img { transform: scale(1.04); }

/* Sierrand achter beeld */
.figure--outlined::before {
  content: ''; position: absolute; inset: 18px -18px -18px 18px;
  border: 1.5px solid var(--terracotta-soft);
  border-radius: var(--radius-lg);
  z-index: 0; pointer-events: none;
}
.figure--outlined.figure--arch::before { border-radius: var(--arch); }
/* Een rechthoekige sierlijn schuin achter een ronde foto leest als een fout. */
.figure--round.figure--outlined::before { display: none; }
.figure--outlined .figure__frame { z-index: 1; }

.figure__caption {
  margin-top: 1em; font-size: .82rem; color: var(--text-muted);
  font-style: italic; line-height: 1.5;
}

/* Elegante fallback wanneer een foto niet laadt */
.figure__frame.img-missing img { opacity: 0; }
.figure__frame.img-missing {
  background:
    radial-gradient(circle at 28% 24%, rgba(255,255,255,.55), transparent 55%),
    linear-gradient(145deg, var(--terracotta-soft) 0%, var(--clay) 45%, var(--plum-soft) 100%);
}
.figure__frame.img-missing::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 12%;
  font-family: var(--font-script); font-size: clamp(1.5rem, 3vw, 2.4rem);
  color: rgba(255,255,255,.92); line-height: 1.1;
  text-shadow: 0 2px 12px rgba(46,38,34,.22);
}

/* Fotogalerij */
/* Zes beelden vullen precies drie kolommen bij twee rijen */
/* De galerij stond strak tegen de split erboven aan, waardoor de bovenste rij
   foto's tegen de slotalinea en het portret aan liep. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
           margin-top: clamp(28px, 4vw, 56px); }
.gallery .figure__frame { aspect-ratio: 4 / 3; border-radius: var(--radius); }

/* De vaststelling en de herkenning naast elkaar op de homepage.
   ------------------------------------------------------------------------- */

/* Kolommen vanaf de bovenkant, niet gecentreerd: gecentreerd begint de lijst
   ergens halverwege de kop en lijnt er niets uit. */
.split--boven { align-items: start; }

/* De lijst krijgt een kader, zodat hij als eigen ding leest naast de kop en
   niet als losse regels ernaast. */
.herkenning {
  background: var(--cream);
  border: 1px solid var(--border);
  border-left: 3px solid var(--terracotta);
  border-radius: var(--radius);
  padding: clamp(24px, 2.6vw, 34px);
}
.section--sand .herkenning { background: #fff; }
.ticks--strak { margin-bottom: 0; }
.ticks--strak li:last-child { margin-bottom: 0; }

/* De slotzin en de doorverwijzing sluiten het blok af over de volle breedte,
   met een lijn erboven zodat je ziet dat ze bij allebei de kolommen horen. */
.split-list__slot {
  margin-top: clamp(34px, 4vw, 54px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 12px clamp(24px, 4vw, 56px);
}
.split-list__conclusie {
  margin: 0; flex: 1 1 22em;
  font-family: var(--font-heading);
  font-size: clamp(1.15rem, 1.7vw, 1.4rem);
  line-height: 1.4; color: var(--text);
}

/* --------------------------------------------------------------------------
   9. Cards
   -------------------------------------------------------------------------- */

.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  height: 100%;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }

.card__media {
  position: relative; aspect-ratio: 3 / 2; overflow: hidden;
  background: linear-gradient(145deg, var(--clay), var(--sand-deep));
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card__media img { transform: scale(1.05); }
.card__media.img-missing img { opacity: 0; }
.card__media.img-missing {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.5), transparent 58%),
    linear-gradient(150deg, var(--terracotta-soft), var(--plum-soft));
}
.card__media.img-missing::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; padding: 10%;
  text-align: center; font-family: var(--font-script);
  font-size: 1.8rem; color: rgba(255,255,255,.95); line-height: 1.1;
}

.card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: rgba(253,250,247,.94); color: var(--plum);
  padding: 6px 13px; border-radius: 100px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}

/* De wegwijzerkaart: de titel boven het beeld, het label als pil op het beeld.
   Het beeld loopt van rand tot rand. */
.card__kop { padding: 26px 28px 20px; }
.card__kop h3 { margin-bottom: 0; }
.card--kop-boven .card__body { padding-top: 22px; }

.card__body { padding: 28px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .45em; }
.card__body p { color: var(--text-muted); font-size: .97rem; }
.card__body .link-arrow { margin-top: auto; padding-top: 1.4em; }

.card__meta {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--terracotta); font-weight: 700; margin-bottom: .9em;
}

/* Zachte kaart zonder beeld */
.softcard {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 34px 32px;
  height: 100%; transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.softcard:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.softcard p:last-child { margin-bottom: 0; }
.softcard p { color: var(--text-muted); font-size: .98rem; }
.section--sand .softcard { background: var(--cream); }

.softcard__num {
  font-family: var(--font-heading); font-size: 2.4rem; line-height: 1;
  color: var(--terracotta-soft); display: block; margin-bottom: .35em;
}

.icon-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--sand); color: var(--plum);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.15rem;
  margin-bottom: 1.1em; flex-shrink: 0;
}
.section--sand .icon-dot { background: var(--white); }

/* --------------------------------------------------------------------------
   10. Lijsten met vinkje
   -------------------------------------------------------------------------- */

.ticks { list-style: none; padding: 0; margin: 0 0 1.6em; }
.ticks li {
  position: relative; padding-left: 34px; margin-bottom: .85em;
  line-height: 1.65;
}
.ticks li::before {
  content: ''; position: absolute; left: 0; top: .52em;
  width: 16px; height: 9px;
  border-left: 2px solid var(--terracotta);
  border-bottom: 2px solid var(--terracotta);
  transform: rotate(-45deg);
}
.section--plum .ticks li::before, .section--ink .ticks li::before { border-color: var(--terracotta-soft); }

.crosses { list-style: none; padding: 0; margin: 0 0 1.6em; }
.crosses li { position: relative; padding-left: 34px; margin-bottom: .85em; }
.crosses li::before {
  content: '×'; position: absolute; left: 4px; top: -.06em;
  font-size: 1.5rem; color: var(--plum-soft); line-height: 1.4;
}

/* Een ingehouden streepje in plaats van een vinkje. Voor lijsten die geen
   belofte zijn maar een herkenning: "je blijft doorgaan, ook als je lichaam
   signalen geeft" verdient geen opgewekt vinkje. */
.streepjes { list-style: none; padding: 0; margin: 0 0 1.6em; }
.streepjes li {
  position: relative; padding-left: 34px; margin-bottom: .85em;
  line-height: 1.65;
}
.streepjes li::before {
  content: ''; position: absolute; left: 0; top: .85em;
  width: 18px; height: 2px; border-radius: 2px;
  background: var(--plum-soft);
}

/* --------------------------------------------------------------------------
   10a. Voor en na

   Twee panelen met een pijl ertussen: waar je nu staat, en waar je uit kunt
   komen. Het linkerpaneel is stil — open, alleen een rand, gedempte tekst. Het
   rechter is wit, opgetild en heeft een accentrand: daar wil je heen kijken.
   -------------------------------------------------------------------------- */

.beforeafter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(14px, 2.2vw, 30px);
}

.paneel {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.2vw, 44px);
}

/* De koppen staan hier op h2-niveau, maar wel in een paneel naast elkaar. Op
   displayformaat loopt een lange kop over drie regels terwijl een korte er
   eenzaam naast staat; op deze maat blijven de twee in balans. */
.beforeafter .paneel h2 {
  font-size: clamp(1.4rem, 2.1vw, 1.85rem);
  line-height: 1.22;
  margin: 0 0 1em;
}
.beforeafter .kicker { margin-bottom: .9em; }

/* De lijst rekt op, zodat de slotregels van beide panelen op dezelfde hoogte
   eindigen ook al is de ene lijst langer dan de andere. */
.beforeafter ul { flex: 1 0 auto; margin-bottom: 1.5em; }
.beforeafter li:last-child { margin-bottom: 0; }
/* De slotregel staat als voetregel onderin, met een haarlijn erboven. Beide
   panelen eindigen zo op dezelfde hoogte, en de ruimte die de kortere lijst
   overlaat leest als lucht boven een afsluiting in plaats van als een gat. */
.beforeafter .lijstslot {
  margin: 0; padding-top: 1.4em;
  border-top: 1px solid var(--border);
}

.paneel--nu {
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.paneel--nu h2 { color: var(--text); }
.paneel--nu .kicker { color: var(--ink-soft); }
.paneel--nu .lijstslot { color: var(--text); }

.paneel--straks {
  background: var(--white);
  box-shadow: var(--shadow);
  border-top: 3px solid var(--terracotta);
}
.paneel--straks .lijstslot { color: var(--terracotta-dark); }

.beforeafter__pijl {
  align-self: center;
  display: grid; place-items: center;
  width: 52px; height: 52px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.beforeafter__pijl svg {
  width: 22px; height: 22px;
  fill: none; stroke: var(--terracotta);
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   11. Prijs / aanbodblok
   -------------------------------------------------------------------------- */

.price {
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 40px 36px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.price::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--terracotta), var(--plum));
}
.price__label {
  font-size: .74rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum); font-weight: 700; margin-bottom: .8em;
}
.price__amount {
  font-family: var(--font-heading); font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1; color: var(--ink); margin-bottom: .18em;
}
.price__amount sup { font-size: .38em; vertical-align: super; color: var(--text-muted); }
.price__note { font-size: .88rem; color: var(--text-muted); margin-bottom: 1.6em; }

/* --------------------------------------------------------------------------
   12. Statistieken
   -------------------------------------------------------------------------- */

.stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px; text-align: center;
}
.stat__num {
  font-family: var(--font-heading); font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1; color: var(--terracotta); display: block; margin-bottom: .22em;
}
.section--plum .stat__num, .section--ink .stat__num { color: var(--terracotta-soft); }
.stat__label {
  font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; line-height: 1.5;
  overflow-wrap: anywhere;
}
.section--plum .stat__label, .section--ink .stat__label { color: rgba(255,255,255,.7); }

/* --------------------------------------------------------------------------
   13. Tijdlijn
   -------------------------------------------------------------------------- */

.timeline { position: relative; padding-left: 40px; }
.timeline::before {
  content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px;
  width: 1.5px; background: linear-gradient(180deg, var(--terracotta), var(--plum-soft));
}
.timeline__item { position: relative; margin-bottom: 2.6em; }
.timeline__item:last-child { margin-bottom: 0; }
.timeline__item::before {
  content: ''; position: absolute; left: -40px; top: .5em;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cream); border: 2.5px solid var(--terracotta);
}
.timeline__year {
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--plum); font-weight: 700; margin-bottom: .35em;
}
.timeline__item h3 { font-size: 1.3rem; margin-bottom: .35em; }
.timeline__item p { color: var(--text-muted); font-size: .98rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   14. Testimonials
   -------------------------------------------------------------------------- */

/* Tot vier naast elkaar op een breed scherm, en daaronder vanzelf minder. De
   ondergrens van 250px bepaalt het: in de brede kolom van 1180px passen er vier
   en niet meer, en op een smaller scherm vallen ze per stuk terug naar drie,
   twee en één. Zijn er maar twee uitspraken, dan vult auto-fit de rij en blijft
   er geen lege kolom staan. */
.quotes-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(16px, 2vw, 26px);
}

.quote-card {
  background: #fff; border-radius: var(--radius-lg);
  padding: 32px 28px; border: 1px solid var(--border);
  height: 100%; display: flex; flex-direction: column;
}
.section--sand .quote-card { background: var(--cream); }
.quote-card__mark {
  font-family: var(--font-heading); font-size: 2.9rem; line-height: .6;
  color: var(--terracotta-soft); margin-bottom: .28em; display: block;
}
.quote-card__text {
  font-family: var(--font-heading); font-size: 1.08rem; line-height: 1.55;
  color: var(--ink); margin-bottom: 1.3em;
}
.quote-card__body { font-size: .95rem; color: var(--text-muted); margin-bottom: 1.6em; }
.quote-card__person { display: flex; align-items: center; gap: 14px; margin-top: auto; }
.quote-card__avatar {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  background: linear-gradient(145deg, var(--terracotta-soft), var(--plum-soft));
  position: relative;
}
.quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card__avatar.img-missing img { opacity: 0; }
.quote-card__avatar.img-missing::after {
  content: attr(data-label); position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-heading); font-size: 1.1rem; color: #fff;
}
.quote-card__name { font-weight: 700; font-size: .98rem; line-height: 1.3; }
.quote-card__role { font-size: .84rem; color: var(--text-muted); }

/* Het kader van de boekingsagenda. Google levert zijn eigen opmaak mee; de rand
   en de afronding eromheen zorgen dat het bij de rest van de pagina hoort in
   plaats van als een los venster te lezen.

   De achtergrond van dat kader is wit, en die krijg je met geen enkele
   instelling van Google mee: `bgcolor` in het adres wordt bij dit soort embed
   genegeerd (uitgeprobeerd), en de inhoud komt van een ander domein, dus met CSS
   erin komen kan niet. Wat wél kan is het van buitenaf laten vermengen: bij
   `multiply` wordt wit doorzichtig en houdt de rest zijn kleur. De blauwe
   knoppen en de zwarte tekst van Google blijven dus zoals ze zijn, alleen het
   witte vlak eronder wordt het zand van de pagina.

   Daarom staat er hier geen eigen achtergrondkleur: het kader vermengt met de
   sectie waarin het staat, en past zich dus aan als die ooit een andere kleur
   krijgt. */
.agenda {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.agenda iframe { display: block; width: 100%; border: 0; mix-blend-mode: multiply; }

/* Het kader vóór de klik, voor wie de cookies geweigerd heeft of nog niets
   gekozen heeft; zie components/agenda-kader.tsx. Dezelfde omvang als het kader
   zelf, zodat de pagina niet verspringt als de agenda er wél komt. */
.agenda--gesloten {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 20px; padding: clamp(28px, 4vw, 48px); text-align: center;
  background: var(--sand);
}
.agenda__uitleg {
  margin: 0; max-width: 44ch;
  font-size: .95rem; color: var(--text-muted);
}
.agenda--gesloten .btn-row { justify-content: center; }

/* Een juridisch document. Lange lappen tekst die niemand voor zijn plezier
   leest, dus: smalle kolom, wat kleiner gezet dan lopende tekst, en genummerde
   bepalingen die als lijst zijn opgemaakt zodat "artikel 8 lid 5" naar iets
   verwijst dat je kunt aanwijzen. */
.juridisch { font-size: .96rem; }
.juridisch h2 {
  font-size: 1.15rem; margin: 2.4em 0 .8em;
  letter-spacing: .01em;
}
.juridisch > p:first-child { margin-top: 0; }
.juridisch ol { padding-left: 1.4em; margin: 0; }
.juridisch li { margin-bottom: .9em; line-height: 1.7; }
.juridisch li::marker { color: var(--text-muted); }
.juridisch .note { margin-top: 2.6em; }

/* De cookietabel. Vier kolommen passen niet op een telefoon, dus schuift de
   tabel binnen zijn eigen kader in plaats van de pagina scheef te trekken. */
.tabel-scroll { overflow-x: auto; margin: 1.4em 0 0; }
.cookietabel {
  width: 100%; border-collapse: collapse; min-width: 560px;
  font-size: .88rem;
}
.cookietabel th, .cookietabel td {
  text-align: left; vertical-align: top;
  padding: 12px 16px 12px 0; border-bottom: 1px solid var(--border);
}
.cookietabel th {
  font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700;
}
.cookietabel td:last-child { white-space: nowrap; color: var(--text-muted); }
.cookietabel code {
  font-size: .86em; background: var(--sand); padding: 2px 6px;
  border-radius: 4px; white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14b. Cookiebanner

   Accepteren en weigeren staan naast elkaar in dezelfde maat en dezelfde
   opvallendheid. Een weigerknop die kleiner of grijzer is dan de accepteerknop
   is geen vrije keuze meer, en dat is precies waar toezichthouders op letten.
   -------------------------------------------------------------------------- */

.cookiebanner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -8px 40px rgba(46, 38, 34, .12);
  padding: clamp(18px, 2.4vw, 26px) 0;
}
.cookiebanner__binnen {
  width: min(var(--wrap), calc(100% - 48px));
  margin-inline: auto;
  display: grid; grid-template-columns: 1fr auto;
  gap: clamp(18px, 3vw, 40px); align-items: center;
}
.cookiebanner__kop {
  font-family: var(--font-heading); font-size: 1.1rem;
  margin-bottom: .35em;
}
.cookiebanner__tekst p { margin: 0; font-size: .92rem; line-height: 1.6; }
.cookiebanner__tekst a { color: var(--terracotta); text-decoration: underline; }

.cookiebanner__keuzes { display: grid; gap: 10px; margin-top: 1.1em; }
.cookiebanner__keuze {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: .88rem; line-height: 1.5; cursor: pointer;
}
.cookiebanner__keuze input { margin-top: .28em; flex-shrink: 0; accent-color: var(--terracotta); }
.cookiebanner__keuze input:disabled { cursor: default; }

.cookiebanner__knoppen {
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
}
.cookiebanner__knoppen .btn { justify-content: center; white-space: nowrap; }
.cookiebanner__meer {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font: inherit; font-size: .85rem; color: var(--text-muted);
  text-decoration: underline;
}
.cookiebanner__meer:hover { color: var(--terracotta); }

@media (max-width: 760px) {
  .cookiebanner__binnen { grid-template-columns: 1fr; }
  .cookiebanner { max-height: 80vh; overflow-y: auto; }
}

/* --------------------------------------------------------------------------
   15. Accordeon (FAQ)
   -------------------------------------------------------------------------- */

.faq { border-top: 1px solid var(--border); }
.faq__item { border-bottom: 1px solid var(--border); }
.faq__q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 24px 0; text-align: left;
  font-family: var(--font-heading); font-size: clamp(1.08rem, 1.8vw, 1.3rem);
  color: var(--ink); line-height: 1.4;
}
.faq__q:hover { color: var(--terracotta); }
/* Het pijltje is een gedraaid vierkant: het neemt 13px in de opmaak in, maar
   staat er na de draai 13 × √2 breed, dus ruim 2,5px aan elke kant buiten zijn
   eigen vak. Rechts viel dat net buiten de tekstkolom en stond de punt scheef
   ten opzichte van de rest van de pagina. De marge duwt hem terug. */
.faq__q::after {
  content: ''; flex-shrink: 0; width: 13px; height: 13px; margin-top: 7px;
  margin-right: calc((1.4142 - 1) * 13px / 2);
  border-right: 2px solid var(--terracotta); border-bottom: 2px solid var(--terracotta);
  transform: rotate(45deg); transition: transform .35s var(--ease);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(225deg); margin-top: 12px; }
.faq__a {
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), padding .35s var(--ease);
  opacity: 0;
}
.faq__a[data-open="true"] { opacity: 1; padding-bottom: 26px; }
.faq__a p { color: var(--text-muted); margin-bottom: 1em; }
.faq__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   16. Artikelen / kennis
   -------------------------------------------------------------------------- */

.article { font-size: 1.07rem; line-height: 1.85; }
.article h2 { margin-top: 1.9em; margin-bottom: .6em; }
.article h3 { margin-top: 1.7em; margin-bottom: .5em; }
.article > *:first-child { margin-top: 0; }
.article ul, .article ol { margin-bottom: 1.6em; }
.article li { margin-bottom: .7em; }

.article__meta {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-bottom: 1.6em;
}
.article__meta span { display: inline-flex; align-items: center; gap: .5em; }
.article__meta span:not(:last-child)::after {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--terracotta-soft); margin-left: 18px;
}

.callout {
  background: var(--sand); border-left: 3px solid var(--terracotta);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 28px 30px; margin: 2.4em 0;
}
.callout h4 {
  font-family: var(--font-body); font-size: .76rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--plum); margin-bottom: .9em; font-weight: 700;
}
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }

.article-note {
  font-size: .92rem; color: var(--text-muted); font-style: italic;
  border-top: 1px solid var(--border); padding-top: 1.6em; margin-top: 2.6em;
}

.breadcrumb {
  font-size: .76rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 700; margin-bottom: 1.6em;
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--terracotta); }
.breadcrumb span { margin: 0 .6em; color: var(--clay); }

/* --------------------------------------------------------------------------
   17. Reisplan / stappen
   -------------------------------------------------------------------------- */

.steps { counter-reset: step; display: grid; gap: 4px; }
.step {
  display: grid; grid-template-columns: 74px 1fr; gap: 22px;
  padding: 26px 0; border-bottom: 1px solid var(--border); align-items: start;
}
.step:first-child { border-top: 1px solid var(--border); }
.step__num {
  counter-increment: step;
  font-family: var(--font-heading); font-size: 2rem; line-height: 1;
  color: var(--terracotta-soft);
}
.step__num::before { content: '0' counter(step); }
.step h3 { font-size: 1.28rem; margin-bottom: .3em; }
.step p { color: var(--text-muted); font-size: .98rem; margin-bottom: 0; }

/* --------------------------------------------------------------------------
   18. Formulier (visuele demo)
   -------------------------------------------------------------------------- */

.form-grid { display: grid; gap: 18px; }
.field label {
  display: block; font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; color: var(--plum); margin-bottom: .6em;
}
.field input, .field textarea, .field select {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; font-family: var(--font-body); font-size: 1rem;
  color: var(--ink); transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(202,86,80,.12);
}
.field textarea { min-height: 148px; resize: vertical; }

.form-note {
  font-size: .84rem; color: var(--text-muted); font-style: italic;
  margin-top: 1.2em;
}

.form-grid .btn[disabled] { opacity: .6; cursor: default; }

/* Met de kaart erbij, en dat is nodig: `.softcard p` hierboven zet elke alinea
   in de kaart op de gedempte tekstkleur, en dat wint van een losse klasse. Een
   foutmelding die in dezelfde grijstint staat als de rest leest als een
   voetnoot in plaats van als iets dat je moet oplossen. */
.softcard .bericht__fout { font-size: .9rem; color: var(--terracotta); }
.softcard .bericht__gelukt { margin-top: 1.4em; font-size: 1.05rem; color: var(--ink); }

/* Het lokvakje van het contactformulier: uit beeld, maar wel in de HTML, want
   een script moet het juist vinden en invullen. Niet met display:none — dat
   slaan sommige scripts over, en dan vangt het niets. */
.lokvak {
  position: absolute; left: -9999px;
  width: 1px; height: 1px; overflow: hidden;
}

/* --------------------------------------------------------------------------
   19. Contactgegevens
   -------------------------------------------------------------------------- */

.contact-block { display: flex; gap: 18px; margin-bottom: 2.2em; }
.contact-block:last-child { margin-bottom: 0; }
.contact-block__icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  background: var(--sand); color: var(--plum);
  display: flex; align-items: center; justify-content: center;
}
.section--sand .contact-block__icon { background: #fff; }
.contact-block h3 { font-size: 1.1rem; margin-bottom: .35em; }
.contact-block p { font-size: .97rem; color: var(--text-muted); margin-bottom: 0; line-height: 1.75; }

/* --------------------------------------------------------------------------
   20. CTA-band
   -------------------------------------------------------------------------- */

.cta-band {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--plum-dark) 0%, var(--plum) 55%, var(--terracotta-dark) 100%);
  color: #fff; text-align: center;
  padding: clamp(64px, 8vw, 108px) 0;
}
.cta-band::before {
  content: ''; position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 780px; height: 780px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
  pointer-events: none;
}
.cta-band .wrap-s { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band .eyebrow { color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); }

/* Het aanmeldformulier in een band: één veld en een knop. Zelfde blok voor de
   wachtlijst van de retreats en voor de nieuwsbrief. */
.aanmeld { margin-top: 26px; text-align: left; max-width: 480px; margin-inline: auto; }
.aanmeld__label {
  display: block; font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .78); margin-bottom: 8px;
}
/* Veld en knop onder elkaar: naast elkaar past de knop niet binnen de kolom
   van de band, en half afgekapt leest slechter dan gestapeld. */
.aanmeld__rij { display: grid; gap: 12px; }
.aanmeld__label--tweede { margin-top: 16px; }
.aanmeld__bijzin {
  font-weight: 400; letter-spacing: .06em; text-transform: none;
  color: rgba(255, 255, 255, .55);
}
.aanmeld input {
  width: 100%; min-width: 0;
  padding: 13px 16px; font: inherit; color: var(--text);
  background: #fff; border: 1px solid transparent; border-radius: var(--radius);
}
.aanmeld input:focus-visible { outline: 2px solid var(--terracotta-soft); outline-offset: 2px; }
.aanmeld input[aria-invalid] { border-color: var(--terracotta-soft); }
.aanmeld .btn { justify-content: center; }
.aanmeld .btn[disabled] { opacity: .6; cursor: default; }
.aanmeld__fout { margin-top: 10px; font-size: .9rem; color: var(--terracotta-soft); }
.aanmeld__note {
  margin-top: 14px; font-size: .84rem;
  color: rgba(255, 255, 255, .7); max-width: 480px; margin-inline: auto;
}
.aanmeld__gelukt {
  margin-top: 26px; font-size: 1.05rem; color: #fff;
  border-top: 1px solid rgba(255, 255, 255, .3); padding-top: 22px;
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--ink); color: rgba(255,255,255,.68); padding: clamp(56px, 7vw, 88px) 0 0; }
.site-footer a { color: rgba(255,255,255,.68); }
.site-footer a:hover { color: var(--terracotta-soft); }

.footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px); padding-bottom: 44px;
}
.footer__brand .brand__fallback { color: #fff; }
.footer__brand p { font-size: .95rem; margin-top: 1.2em; max-width: 34ch; }
.footer__logo { height: 56px; width: auto; filter: brightness(0) invert(1); opacity: .92; }

.footer__title {
  font-family: var(--font-body); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 1.4em;
}
.footer__list { list-style: none; padding: 0; margin: 0; }
.footer__list li { margin-bottom: .7em; font-size: .95rem; }

.footer__note { font-size: .88rem; margin: 0; max-width: 44ch; }

/* De nieuwsbrief in een eigen band: uitleg links, velden rechts. Met drie
   velden past hij niet meer in een kolom naast de linklijstjes. */
.footer__nieuwsbrief {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: clamp(24px, 4vw, 56px); align-items: start;
  border-top: 1px solid rgba(255,255,255,.12); padding: 32px 0;
}
.footer__nieuwsbrief .footer__title { margin-bottom: .9em; }

/* De drie velden naast elkaar met de knop erachter; de knop lijnt uit op de
   onderrand van de velden, want de labels erboven maken de kolommen even hoog. */
.footer__form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; align-items: end; }
.footer__veld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.footer__veld label {
  font-size: .78rem; letter-spacing: .04em; color: rgba(255,255,255,.78);
}
.footer__bijzin { color: rgba(255,255,255,.45); }
.footer__form input {
  width: 100%; min-width: 0; padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius);
  background: rgba(255,255,255,.06); color: #fff;
  font-family: var(--font-body); font-size: .95rem;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.footer__form input::placeholder { color: rgba(255,255,255,.45); }
.footer__form input:focus {
  outline: none; border-color: var(--terracotta-soft);
  background: rgba(255,255,255,.1);
}
.footer__form input[aria-invalid] { border-color: var(--terracotta-soft); }
.footer__form .btn[disabled] { opacity: .6; cursor: default; }
/* De foutmelding staat onder de velden en de knop, over de volle breedte van
   de rij; vandaar dat hij alle kolommen van het raster overspant. */
.footer__fout { grid-column: 1 / -1; margin: 2px 0 0; font-size: .86rem; color: var(--terracotta-soft); }
.footer__gelukt {
  margin: 0; font-size: .95rem; color: #fff;
  border-left: 2px solid var(--terracotta-soft); padding-left: 14px;
}

.footer__acties {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  font-size: .9rem;
}

.footer__bottom {
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 26px 0 34px;
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  align-items: center; justify-content: space-between;
  font-size: .84rem;
}
/* De fotografen krijgen een eigen regel binnen het colofon: de onderste rij
   heeft al drie dingen naast elkaar staan, en een vierde knijpt die plat. */
.footer__credits { flex: 0 0 100%; margin: 0; }
.footer__credits a { text-decoration: underline; text-underline-offset: 3px; }

.footer__legal {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  list-style: none; margin: 0; padding: 0;
}
.footer__legal li { margin: 0; }
.footer__socials { display: flex; gap: 10px; margin-top: 1.6em; }
.footer__socials a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  transition: all .3s var(--ease);
}
.footer__socials a:hover { background: var(--terracotta); border-color: var(--terracotta); color: #fff; }
.footer__socials svg { width: 17px; height: 17px; fill: currentColor; }

/* --------------------------------------------------------------------------
   22. Agenda
   -------------------------------------------------------------------------- */

.evenementen { list-style: none; margin: 0; padding: 0; }
.evenement {
  border-top: 1px solid var(--border);
  transition: background .25s var(--ease);
}
.evenement:last-child { border-bottom: 1px solid var(--border); }
.evenement:hover { background: rgba(255,255,255,.5); }

/* De li houdt alleen de lijn eromheen; het blok erbinnen doet de kolommen. Met
   en zonder link dezelfde indeling, zodat een agenda waarin één item wél een
   bestemming heeft er niet anders uitziet dan de rest. */
.evenement__blok {
  display: grid; grid-template-columns: 62px 1fr; gap: 4px 20px;
  align-items: baseline; padding: 20px 14px;
}
.evenement__link { color: inherit; text-decoration: none; }
.evenement__link:hover { color: inherit; }

.evenement__datum {
  display: block; text-align: center; line-height: 1.1;
  border-right: 1px solid var(--border); padding-right: 16px;
}
.evenement__dag { display: block; font-family: var(--font-heading); font-size: 1.7rem; color: var(--ink); }
.evenement__maand {
  display: block; font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-muted); margin-top: 2px;
}

.evenement__tekst { display: block; }
.evenement__soort {
  display: block; font-size: .72rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent-2); margin-bottom: 4px;
}
.evenement__kop { display: block; font-family: var(--font-heading); font-size: 1.15rem; color: var(--ink); }
.evenement__body { display: block; font-size: .93rem; color: var(--text-muted); margin-top: 4px; }
.evenement__tijd { display: block; font-size: .85rem; color: var(--text-muted); margin-top: 6px; }
/* Een event met een link krijgt een pijl, zodat het verschil met een regel
   zonder bestemming te zien is en niet alleen te voelen. */
.evenement__link .evenement__kop::after { content: ' \2192'; color: var(--terracotta); }

.evenementen__note, .evenementen__leeg {
  margin-top: 22px; font-size: .92rem; color: var(--text-muted);
}
.evenementen__leeg { margin-top: 0; }

@media (max-width: 520px) {
  .evenement__blok { grid-template-columns: 48px 1fr; gap: 4px 14px; }
  .evenement__datum { padding-right: 10px; }
  .evenement__dag { font-size: 1.4rem; }
}

/* --------------------------------------------------------------------------
   23. Animatie bij scrollen
   -------------------------------------------------------------------------- */

[data-reveal] {
  opacity: 0; transform: translateY(26px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .09s; }
[data-reveal-delay="2"] { transition-delay: .18s; }
[data-reveal-delay="3"] { transition-delay: .27s; }
[data-reveal-delay="4"] { transition-delay: .36s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   24. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  /* De uitleg boven de velden in plaats van ernaast; anders houdt elk veld
     nog een centimeter of drie over. */
  .footer__nieuwsbrief { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 960px) {
  /* Op mobiel is de kop altijd al één regel — icoon, woordmerk, hamburger.
     Het menu wordt een paneel dat eronder uitklapt. */
  .nav, .site-header.is-stuck .nav {
    grid-template-areas: "icon word burger";
    padding: 10px 0;
  }
  .nav__icon img { height: 46px; }
  .site-header.is-stuck .nav__icon img { height: 36px; }
  .nav__word img { height: 34px; }

  .nav__menu-wrap, .nav__cta { display: none; }
  .nav__burger { display: flex; }

  .nav.is-open .nav__menu-wrap {
    display: block;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-top: 1px solid var(--border);
    padding: 14px 24px 26px; max-height: calc(100vh - 84px); overflow-y: auto;
    box-shadow: var(--shadow);
  }
  .nav.is-open .nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav.is-open .nav__menu .nav__cta-mobile { display: block; padding-top: 20px; }
  .nav__cta-mobile .btn { width: 100%; justify-content: center; }

  .nav__link {
    padding: 15px 0; font-size: .95rem; letter-spacing: .06em;
    border-bottom: 1px solid var(--border); width: 100%;
  }
  .nav__link[aria-current="page"]::after { display: none; }

  /* Gestapeld is er geen ruimte om uit te klappen en geen muis om mee te
     zweven: de groep staat gewoon open, ingesprongen onder zijn kop. */
  .nav__uitklap {
    position: static; transform: none; opacity: 1; visibility: visible;
    pointer-events: auto; min-width: 0; padding: 4px 0 10px;
    background: none; border: 0; box-shadow: none;
  }
  .nav__uitklap a { padding: 11px 0 11px 18px; font-size: .9rem; }
  .nav__groep::after { display: none; }
  .nav__pijl { display: none; }

  .hero__grid, .pagehero__grid, .split, .split--wide-left, .split--wide-right {
    grid-template-columns: 1fr;
  }
  /* De `width: 100%` hoort hier echt bij de `margin-inline: auto`. Een
     rasteronderdeel rekt vanzelf tot zijn kolom, maar niet meer zodra het een
     automatische marge heeft: dan valt het terug op de maat van zijn inhoud.
     Dat is de afmeting die in de content staat, en die zegt niets over de plek
     op het scherm — de foto op /programmas stond zo op 219 px in een kolom van
     342. Met een breedte die wél vaststaat rekt hij tot de kolom, en centreert
     de marge hem pas als de kolom breder is dan 440. */
  .hero__grid .figure, .pagehero__grid .figure {
    width: 100%; max-width: 440px; margin-inline: auto;
  }

  /* Gestapeld wijst de pijl naar beneden in plaats van naar rechts. */
  .beforeafter { grid-template-columns: 1fr; }
  .beforeafter__pijl { justify-self: center; transform: rotate(90deg); }
  .beforeafter ul { flex: 0 1 auto; }

  .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 20px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: 34px; }
  /* Onder elkaar, en de knop over de volle breedte: drie velden naast elkaar
     op een telefoon zijn drie velden waar niets in past. */
  .footer__form { grid-template-columns: 1fr; }
  .footer__form .btn { width: 100%; justify-content: center; }
  .gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .step { grid-template-columns: 1fr; gap: 6px; }
  .step__num { font-size: 1.5rem; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; justify-content: center; }
  .nav__icon img { height: 40px; }
  .figure--outlined::before { inset: 12px -12px -12px 12px; }
  .card__body, .softcard, .price, .quote-card, .paneel { padding: 26px 22px; }
  .hero__meta { gap: 8px 18px; font-size: .72rem; }
}

/* --------------------------------------------------------------------------
   20. Varianten voor de pagina's uit het contentmodel

   Deze regels vervangen inline opmaak die per pagina met de hand was gezet.
   Drieënveertig verschillende inline stijlen stonden er, waarvan drieëntwintig
   eenmalig: marges en lettergroottes die in een stylesheet thuishoren en niet
   in de inhoud. Ze zijn hier samengebracht en gelijkgetrokken.

   Het zijn toevoegende modifiers, geen aanpassingen aan bestaande klassen.
   Reden: de homepage zet dezelfde eigenschappen nog inline, en een gewijzigde
   basisklasse zou die pagina ongevraagd verschuiven.
   -------------------------------------------------------------------------- */

/* De kop boven een sectie. De witruimte eronder stond in vijf verschillende
   waarden in de opmaak — van clamp(30px,4vw,48px) tot clamp(38px,5vw,62px).
   Dat verschil was niet gekozen maar meegekomen; nu één waarde. */
.center--head { margin-bottom: clamp(34px, 4.5vw, 56px); }
.center--foot { margin-top: clamp(40px, 5vw, 68px); }

/* Een gecentreerde band centreert de tekst, maar niet de blokken daarbinnen. */
.cta-band .lede { max-width: 62ch; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; }

/* Koppen op zachte kaarten stonden als 1.2, 1.25 en 1.3rem door elkaar. */
.softcard h3 { font-size: 1.25rem; }

/* De pijl-link sluit een kaart af en heeft lucht boven zich nodig. */
.softcard .link-arrow { margin-top: 1em; }

/* Twee lijsten naast elkaar: de kop hoort los van de lijst te staan. */
.list-pair h3 { margin-bottom: 1em; }

/* Kleine toelichting onder een blok — de "* excl. btw"-regels en verwante. */
.note { font-size: .95rem; color: var(--text-muted); }
.note--italic { font-style: italic; }
.note--spaced { margin-top: 1.6em; }

/* Een knop die de volle breedte van zijn kolom pakt. */
.btn--block { width: 100%; justify-content: center; }

/* Een kader dat als losse sectie staat in plaats van in een artikel. */
.callout--narrow { max-width: var(--wrap-n); margin-inline: auto; margin-top: 3em; }
.callout--heading h4 { font-family: var(--font-heading); font-size: 1.25rem; text-transform: none; letter-spacing: 0; }

/* Eén uitgelicht artikel, liggend. Stond als drie inline stijlen op de kaart,
   het beeld en het tekstblok; nu één modifier. */
.card--wide { flex-direction: row; align-items: stretch; }
.card--wide .card__media { flex: 0 0 46%; aspect-ratio: auto; }
.card--wide .card__body { justify-content: center; padding: clamp(28px, 4vw, 52px); }
.card__title { font-size: clamp(1.6rem, 3vw, 2.4rem); }

/* Het formulierblok op de contactpagina. */
.softcard--wit { background: #fff; }
.form-grid--spaced { margin-top: 1.4em; }

/* De opsomming met opleidingen staat een tikje kleiner dan de lopende tekst. */
.ticks--klein { font-size: .95rem; }

/* Een afsluitende zin onder een blok stappen. */
.lede--na { margin-top: 2.4em; }

/* "Wat je leert:" — de aankondiging boven een opsomming in een kaart. */
.lijst-kop { font-weight: 700; margin-top: 1em; }

/* Een gecentreerde afsluiter onder een rij kaarten. */
.lede--onder { max-width: 62ch; margin: 2.6em auto 0; }

/* Een smal inleidend blok boven twee kolommen. */
/* De inleiding boven een prijsblok. Smal, zodat de regel leesbaar blijft, maar
   níét gecentreerd: hij staat in de brede kolom en daaronder begint een raster
   dat wél links uitlijnt. Met `margin-inline: auto` stond de kop honderdtwintig
   pixels naar binnen ten opzichte van de lijst eronder, en dat las als scheef. */
.intro-smal { max-width: var(--wrap-n); margin-bottom: clamp(34px, 4.5vw, 56px); }

/* Extra lucht onder een toelichting of opsomming in een prijsblok. */
.note--ruim { margin-bottom: 1.8em; }
.ticks--ruim { margin-bottom: 1.8em; }

/* De keuzehulp: vier smalle kaarten met een kop in het kopletterlettertype. */
.softcard--keuze h4 { font-family: var(--font-heading); font-size: 1.25rem; text-transform: none; letter-spacing: 0; }
.softcard--keuze .link-arrow { margin-top: .8em; }

/* Een uitspraak binnen een tekstkolom, met lucht erboven. */
.pullquote--in { margin-top: 1.4em; }

/* De kleine regel onder een galerij. */
.note--klein { font-size: .86rem; margin-top: 1.6em; }