/* Dagmar Voss - KOPP coaching Haarlem
   Mobile-first, calm, modern.
   Kleur en letter volgen de merkgids "Zachte kracht" (branding-kit/02-merkgids). */

:root {
  /* --- merkgids, exact --- */
  --pruim: #513747;
  --roze: #E9D8D5;
  --abrikoos: #E8AB83;
  --room: #FBF5EE;
  --inkt: #30282D;

  /* --- afgeleiden; nodig voor diepte en leesbaarheid, geen nieuwe merkkleuren ---
     abrikoos en roze zijn vlakkleuren: op room halen ze geen 4.5:1 en zijn ze dus
     onbruikbaar voor kleine tekst. -diep is dezelfde tint, donkerder gezet. */
  --pruim-diep: #3B2733;
  --inkt-zacht: #6A5A63;   /* 5.9:1 op room */
  --inkt-vaag: #746671;    /* 5.0:1 op room, 4.7:1 op room-diep (voettekst) */
  --abrikoos-diep: #9D5C35;/* 4.8:1 op room - abrikoos als tekstkleur */
  --abrikoos-zacht: #FAEADE;
  --room-diep: #F6EDE7;
  --wit: #FFFFFF;
  --lijn: #EADFDB;

  --radius: 16px;
  --radius-lg: 26px;
  /* "zachte kracht": blad-vorm, twee ronde hoeken tegenover twee strakke */
  --blad: clamp(2.2rem, 7vw, 5.5rem) 1.3rem clamp(2.2rem, 7vw, 5.5rem) 1.3rem;
  --blad-om: 1.3rem clamp(2.2rem, 7vw, 5.5rem) 1.3rem clamp(2.2rem, 7vw, 5.5rem);
  --shadow: 0 1px 2px rgba(48, 40, 45, .04), 0 8px 24px rgba(48, 40, 45, .07);
  --shadow-lg: 0 2px 4px rgba(48, 40, 45, .05), 0 18px 48px rgba(48, 40, 45, .11);
  --shadow-diep:
    0 1px 2px rgba(59, 39, 51, .05),
    0 10px 24px rgba(59, 39, 51, .06),
    0 30px 70px rgba(59, 39, 51, .09);

  /* de gouden draad */
  /* Hoe ver de draad om een beeldlijst heen buiten de foto mag liggen. Nooit
     verder dan de kantlijn, anders loopt hij het scherm af en wordt hij
     afgesneden door de overflow-grendel op de body. */
  --rand: min(1.3rem, calc(var(--pad) - .55rem));

  --wrap: 1120px;
  --prose: 68ch;
  --pad: clamp(1.15rem, 5vw, 2rem);

  --sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "DM Serif Display", Georgia, "Times New Roman", serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  color: var(--inkt);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
  overflow-x: hidden;
  background: var(--room);
}

/* Het palet heeft diepte; die halen we eruit met gelaagd licht in plaats van
   een vlakke roomkleur. Roze links boven, abrikoos rechts boven.

   Dit stond eerst als `background-attachment: fixed` op de body zelf. Dat laat
   de browser bij elke scrollstap de hele viewport opnieuw tekenen - op een
   telefoon is dat de duurste regel van het hele bestand. Als eigen vaste laag
   wordt hij een keer getekend en daarna alleen nog verschoven. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1200px 680px at 8% -10%, rgba(233, 216, 213, .80), transparent 64%),
    radial-gradient(900px 560px at 100% 2%, rgba(232, 171, 131, .24), transparent 62%),
    radial-gradient(1000px 900px at 50% 118%, rgba(233, 216, 213, .50), transparent 65%);
}

/* fijne korrel - geeft de pagina de papierkwaliteit van het drukwerk uit de
   merkgids. Alleen op muisschermen: de korrel lag met mix-blend-mode over de
   hele pagina, en dat dwingt elke scrollstap tot een volledige hertekening. */
@media (min-width: 900px) and (hover: hover) {
  body::after {
    content: ""; position: fixed; inset: 0; z-index: 3; pointer-events: none;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

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

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;   /* DM Serif Display heeft alleen Regular */
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--pruim);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 7.2vw, 3.55rem); }
h2 { font-size: clamp(1.55rem, 4.6vw, 2.35rem); }
h3 { font-size: clamp(1.18rem, 3.1vw, 1.42rem); }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--pruim); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--pruim-diep); }

:focus-visible {
  outline: 3px solid var(--abrikoos-diep);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }
.prose { max-width: var(--prose); }
.center { margin-inline: auto; text-align: center; }
.lead { font-size: clamp(1.06rem, 2.6vw, 1.22rem); color: var(--inkt-zacht); }
.eyebrow {
  font-size: .76rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--abrikoos-diep);
  margin: 0 0 .85rem; font-family: var(--sans);
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--pruim); color: var(--room); padding: .8rem 1.2rem; border-radius: 0 0 12px 0;
}
.skip:focus { left: 0; }

/* ---------- header ----------
   Twee standen. Bovenaan de pagina is er geen balk: de kop is volledig
   doorzichtig, het woordmerk en het menu staan gewoon op de achtergrond van de
   pagina. Zodra je scrollt trekt hij samen tot een zwevend eiland - een eigen
   vlak met ronde hoeken, los van de randen, met een schaduw eronder.

   De padding die er bij het zweven omheen komt is precies even groot als wat de
   binnenkant krimpt (1rem op een telefoon, 1.2rem op een breed scherm). De kop
   houdt dus altijd dezelfde hoogte en de pagina eronder verspringt niet op het
   moment dat het eiland verschijnt. */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: transparent;
  padding-block: 0;
  transition: padding-block .28s cubic-bezier(.22, 1, .36, 1);
}
.site-header.is-stuck { padding-block: .5rem; }

.header-inner {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.9rem;
  padding-inline: 0;
  border: 1px solid transparent;
  border-radius: 20px;
  transition:
    min-height .28s cubic-bezier(.22, 1, .36, 1),
    padding-inline .28s cubic-bezier(.22, 1, .36, 1),
    background-color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
/* Het eiland. Op een telefoon dekkend wit: matglas over bewegende inhoud kost
   per scrollstap een blur van de hele balkbreedte, en daar kwam het schokken
   vandaan. Boven 900px blijft het matglas. */
.site-header.is-stuck .header-inner {
  min-height: 3.9rem;
  padding-inline: .85rem .7rem;
  background: rgba(255, 255, 255, .97);
  border-color: rgba(234, 223, 219, .9);
  box-shadow:
    0 1px 2px rgba(59, 39, 51, .04),
    0 10px 24px -12px rgba(59, 39, 51, .22),
    0 26px 50px -30px rgba(59, 39, 51, .45);
}
/* Staat het menu open terwijl je nog bovenaan bent, dan krijgt de kop wel het
   vlak maar niet de krimp: het paneel hangt dan aan iets in plaats van aan
   niets, en er verschuift geen pixel op het moment dat je het opent. */
body.nav-vast .header-inner {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(234, 223, 219, .9);
  box-shadow: 0 1px 2px rgba(59, 39, 51, .04), 0 10px 24px -12px rgba(59, 39, 51, .22);
}
@media (min-width: 900px) {
  .site-header.is-stuck .header-inner {
    background: rgba(255, 255, 255, .80);
    backdrop-filter: saturate(165%) blur(18px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
  }
}
.brand {
  display: inline-flex; align-items: center; text-decoration: none;
  /* vrije ruimte rond het logo: merkgids vraagt minimaal 10% rondom */
  padding: .4rem .6rem .4rem 0;
}
/* Het gestapelde woordmerk - twee regels, met de gouden draad ernaast.
   Eigen bestand voor de balk: krappe viewBox (het merk vulde maar 69% van de
   hoogte van het oorspronkelijke bestand) en een optisch zwaarder gezette
   draad, want bij deze maat viel een haarlijn uit elkaar. */
.brand img {
  display: block; width: auto; height: 44px;
  transition: height .25s ease;
}
.site-header.is-stuck .brand img { height: 36px; }
@media (min-width: 900px) {
  .site-header.is-stuck { padding-block: .6rem; }
  .header-inner { min-height: 5.6rem; }
  .site-header.is-stuck .header-inner { min-height: 4.4rem; padding-inline: 1.15rem .95rem; }
  .brand img { height: 54px; }
  .site-header.is-stuck .brand img { height: 40px; }
}

.nav-toggle {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 999px; padding: .55rem .95rem;
  font: inherit; font-size: .88rem; font-weight: 500; color: var(--inkt);
  cursor: pointer;
}
/* Op het eiland is wit-op-wit geen knop meer; daar krijgt hij de roomtint. */
.site-header.is-stuck .nav-toggle,
body.nav-vast .nav-toggle { background: var(--room-diep); border-color: rgba(221, 206, 200, .95); }
.nav-toggle svg { width: 17px; height: 17px; }
.nav-toggle[aria-expanded="true"] .i-open,
.nav-toggle[aria-expanded="false"] .i-close { display: none; }

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.site-nav a:not(.btn) {
  display: block; padding: .78rem .9rem; border-radius: 12px;
  color: var(--inkt); text-decoration: none; font-weight: 500;
}
.site-nav a:not(.btn):hover { background: var(--room-diep); }
.site-nav a:not(.btn)[aria-current="page"] { color: var(--pruim); background: var(--roze); }

/* Het menu was een flex-item naast de knop, dus het klapte open als een smalle
   kolom rechts ernaast. Het hoort een paneel te zijn dat onder de kop valt, met
   een sluier eronder zodat duidelijk is dat het open staat.

   Het hangt aan .header-inner en niet aan de header zelf: zo ligt het paneel op
   het eiland uitgelijnd, dezelfde breedte en dezelfde ronde hoeken, in plaats
   van er onderuit te steken. */
@media (max-width: 899px) {
  .site-nav {
    position: absolute; top: calc(100% + .5rem); left: 0; right: 0;
    padding: .6rem .7rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--room);
    border: 1px solid var(--lijn);
    border-radius: 20px;
    box-shadow:
      0 10px 24px -12px rgba(59, 39, 51, .22),
      0 28px 52px -28px rgba(59, 39, 51, .55);
    max-height: calc(100dvh - 8rem); overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-10px);
    transition: opacity .18s ease, transform .24s cubic-bezier(.22, 1, .36, 1), visibility .18s;
  }
  .site-nav.is-open { opacity: 1; visibility: visible; transform: none; }
  .site-nav .nav-cta { margin-top: .7rem; }
  .site-nav .btn { width: 100%; justify-content: center; }

  .nav-sluier {
    position: fixed; inset: 0; z-index: 99;
    background: rgba(48, 40, 45, .34);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
  }
  .nav-sluier.is-open { opacity: 1; visibility: visible; }
  body.nav-vast { overflow: hidden; }
}
@media (min-width: 900px) { .nav-sluier { display: none; } }
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .site-nav { display: block !important; border: 0; padding: 0; }
  .site-nav ul { flex-direction: row; align-items: center; gap: .1rem; }
  .site-nav a:not(.btn) {
    padding: .5rem .72rem .62rem; font-size: .93rem;
    position: relative; background: none !important;
  }
  .site-nav .nav-cta { margin-left: .55rem; }

  /* De draad onderstreept: een getekend lijntje, geen rechte streep. */
  .site-nav a:not(.btn)::after {
    content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .1rem; height: 7px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='7' viewBox='0 0 90 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.6C14 1.3 28 6.2 45 3.6 62 1 76 5.4 89 2.4' fill='none' stroke='%23E8AB83' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
    transform: scaleX(0); transform-origin: left center;
    transition: transform .34s cubic-bezier(.22, 1, .36, 1);
  }
  .site-nav a:not(.btn):hover::after { transform: scaleX(1); }
  .site-nav a:not(.btn)[aria-current="page"] { color: var(--pruim); font-weight: 600; }
  .site-nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .92rem 1.5rem; border-radius: 999px;
  font-family: var(--sans); font-size: .97rem; font-weight: 600; line-height: 1;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  min-height: 48px;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--pruim); color: var(--room); box-shadow: var(--shadow); }
.btn-primary:hover { background: var(--pruim-diep); color: var(--room); }
.btn-ghost { background: transparent; color: var(--pruim); border-color: var(--lijn); }
.btn-ghost:hover { background: var(--wit); border-color: var(--pruim); color: var(--pruim-diep); }
.btn-sm { padding: .62rem 1.05rem; font-size: .88rem; min-height: 40px; }
.btn svg { width: 17px; height: 17px; flex: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ---------- sections ---------- */
section { padding-block: clamp(3rem, 8vw, 5.5rem); position: relative; }
.sec-tight { padding-block: clamp(2.25rem, 5.5vw, 3.5rem); }
.sec-room {
  background:
    radial-gradient(900px 480px at 85% 0%, rgba(233, 216, 213, .85), transparent 62%),
    radial-gradient(700px 400px at 0% 100%, rgba(232, 171, 131, .16), transparent 60%),
    var(--room-diep);
  border-block: 1px solid rgba(234, 223, 219, .9);
}
.sec-white {
  background: linear-gradient(176deg, var(--wit) 0%, #FDFAF6 100%);
  border-block: 1px solid rgba(234, 223, 219, .75);
}
.sec-pruim {
  color: var(--room);
  background:
    radial-gradient(880px 560px at 16% -10%, #614354, transparent 62%),
    radial-gradient(760px 520px at 92% 110%, #412C39, transparent 58%),
    var(--pruim);
}
/* Hier lag de lus uit het logo als watermerk. Eruit: dezelfde vorm stond ook in
   elke kaart, achter het citaat en in de voet, en vijf keer dezelfde krul maakt
   er een stempel van in plaats van een draad. De band draagt zijn diepte nu
   alleen uit het verloop. */
.sec-pruim > * { position: relative; z-index: 1; }
.sec-pruim h2, .sec-pruim h3 { color: var(--room); }
.sec-pruim .lead, .sec-pruim p { color: rgba(251, 245, 238, .84); }
.sec-pruim .eyebrow { color: var(--abrikoos); }
.sec-pruim a:not(.btn) { color: var(--room); }
/* op pruim keert de primaire knop om: room vlak, pruim letter */
.sec-pruim .btn-primary { background: var(--room); color: var(--pruim); }
.sec-pruim .btn-primary:hover { background: var(--roze); color: var(--pruim-diep); }
.sec-pruim .btn-ghost { color: var(--room); border-color: rgba(251, 245, 238, .38); }
.sec-pruim .btn-ghost:hover { background: rgba(251, 245, 238, .10); border-color: var(--room); color: var(--room); }

/* ---------- hero ---------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2.75rem, 7vw, 5rem); }
.hero-grid { display: grid; gap: clamp(1.75rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.06fr .94fr; } }

/* De hero van de homepagina heeft een derde kind: het rijtje bewijsjes. Op een
   telefoon hoort dat na de foto - de kop, de belofte en de twee knoppen zijn
   dan het eerste scherm, en de bewijsjes vangen je op zodra je verder scrollt.
   Op een breed scherm staan ze weer onder de knoppen in de linkerkolom, want
   daar is de foto ernaast en loopt de kolom anders leeg. Vandaar benoemde
   vlakken: dezelfde html, een andere volgorde per scherm. */
.hero-grid--troef {
  grid-template-areas: "tekst" "beeld" "troef";
  /* ruim genoeg dat het plaatsbordje, dat onder de foto uit steekt, niet tegen
     het eerste bewijsje aan komt te liggen */
  row-gap: 2.4rem;
}
.hero-grid--troef .hero-tekst { grid-area: tekst; }
.hero-grid--troef .hero-media { grid-area: beeld; }
.hero-grid--troef .trust { grid-area: troef; margin-top: 0; }
@media (min-width: 900px) {
  .hero-grid--troef {
    grid-template-areas: "tekst beeld" "troef beeld";
    grid-template-rows: auto 1fr;
    align-items: start;
    row-gap: 1.6rem;
  }
  /* Is de foto een keer hoger dan de tekstkolom, dan valt de overruimte in de
     tweede rij en blijven de bewijsjes onder de knoppen hangen in plaats van
     mee naar beneden te zakken. */
  .hero-grid--troef .hero-media { align-self: center; }
}
.hero h1 { margin-bottom: .45em; }
.hero h1 em {
  font-style: normal; color: var(--pruim);
  background: linear-gradient(transparent 62%, var(--abrikoos-zacht) 62%);
}
.hero-media { position: relative; border-radius: var(--blad-om); isolation: isolate; }
.hero-media img {
  border-radius: inherit; box-shadow: var(--shadow-diep);
  aspect-ratio: 4 / 3; object-fit: cover; width: 100%;
  position: relative; z-index: 1;
}
/* de draad komt uit het logo gelopen en legt zich om de hero-foto */
.hero-media::before {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(1rem, 3vw, 1.9rem) clamp(1rem, 3vw, 1.9rem) calc(-1 * clamp(1rem, 3vw, 1.9rem)) calc(-1 * clamp(1rem, 3vw, 1.9rem));
  border-radius: inherit; transform: rotate(-1.4deg);
  background: linear-gradient(135deg, var(--roze), var(--abrikoos-zacht) 60%, var(--abrikoos));
  opacity: .9;
}
.hero-media::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: calc(-1 * var(--rand));
  border-radius: inherit; transform: rotate(1deg);
  border: 1.7px solid var(--abrikoos);
}
.hero-badge {
  position: absolute; z-index: 3;
  left: clamp(.8rem, 3vw, 1.4rem); bottom: clamp(-.8rem, -2vw, -1.1rem);
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 14px; padding: .7rem 1rem; box-shadow: var(--shadow);
  font-size: .82rem; font-weight: 600; color: var(--inkt);
  display: flex; align-items: center; gap: .5rem;
}
.hero-badge svg { width: 16px; height: 16px; color: var(--pruim); flex: none; }

.trust {
  display: flex; flex-wrap: wrap; gap: .5rem .55rem;
  list-style: none; margin: 1.6rem 0 0; padding: 0;
}
.trust li {
  display: inline-flex; align-items: center; gap: .42rem;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: 999px; padding: .42rem .85rem;
  font-size: .82rem; font-weight: 500; color: var(--inkt-zacht);
}
.trust svg { width: 14px; height: 14px; color: var(--pruim); flex: none; }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.1rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.card {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(168deg, var(--wit) 0%, #FCF6F1 100%);
  border: 1px solid var(--lijn);
  border-radius: 1.4rem 1.4rem 1.4rem clamp(1.6rem, 5vw, 3rem);
  padding: clamp(1.3rem, 3.4vw, 1.85rem);
  display: flex; flex-direction: column; gap: .6rem;
  box-shadow: var(--shadow);
}
/* Geen krul meer in de kaart (zie .sec-pruim). Wat de kaart bij hover doet is
   nu een warme gloed vanuit de onderhoek - kleur, geen tekening. */
.card::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 90% at 100% 100%, rgba(232, 171, 131, .20), transparent 62%);
  opacity: 0; transition: opacity .35s ease;
}
.card-link { text-decoration: none; color: inherit; transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s ease, border-color .22s ease; }
.card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow-diep); border-color: var(--roze); color: inherit; }
.card-link:hover::before { opacity: 1; }
.card h3 { margin: 0; }
.card p { color: var(--inkt-zacht); font-size: .96rem; margin: 0; }
.card-more {
  margin-top: auto; padding-top: .55rem;
  font-size: .9rem; font-weight: 600; color: var(--pruim);
  display: inline-flex; align-items: center; gap: .35rem;
}
.card-more svg { width: 15px; height: 15px; transition: transform .16s ease; }
.card-link:hover .card-more svg { transform: translateX(3px); }
.card-icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--roze); color: var(--pruim);
  display: grid; place-items: center; margin-bottom: .3rem;
}
.card-icon svg { width: 21px; height: 21px; }

/* ---------- symptom list ---------- */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
@media (min-width: 700px) { .checks { grid-template-columns: repeat(2, 1fr); column-gap: 1.6rem; } }
.checks li {
  position: relative; padding-left: 1.85rem;
  font-size: .98rem; color: var(--inkt-zacht);
}
.checks li::before {
  content: ""; position: absolute; left: 0; top: .58em;
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--abrikoos);
}
.sec-pruim .checks li { color: rgba(251, 245, 238, .86); }
.sec-pruim .checks li::before { background: var(--abrikoos); }

/* ---------- quote ---------- */
.quote {
  font-family: var(--serif); font-size: clamp(1.35rem, 3.9vw, 2rem);
  line-height: 1.32; letter-spacing: -.015em; margin: 0;
  text-wrap: balance;
}
.quote-cite {
  display: block; margin-top: 1.1rem;
  font-family: var(--sans); font-size: .87rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; font-style: normal;
  color: var(--abrikoos-diep);
}

/* ---------- price ---------- */
.price-card {
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 2.4rem);
  box-shadow: var(--shadow);
}
.price-tag {
  font-family: var(--serif); font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 600; color: var(--pruim); line-height: 1; letter-spacing: -.02em;
}
.price-tag small { font-family: var(--sans); font-size: .9rem; font-weight: 500; color: var(--inkt-vaag); display: block; margin-top: .5rem; letter-spacing: 0; }
.price-note { font-size: .93rem; color: var(--inkt-zacht); margin-top: 1.1rem; }

/* ---------- details / faq / books ---------- */
.acc { border-top: 1px solid var(--lijn); }
.acc details { border-bottom: 1px solid var(--lijn); }
.acc summary {
  list-style: none; cursor: pointer;
  padding: 1.15rem 2.5rem 1.15rem 0; position: relative;
  font-weight: 600; font-size: 1.02rem; color: var(--inkt);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%;
  width: .58rem; height: .58rem; margin-top: -.42rem;
  border-right: 2px solid var(--pruim); border-bottom: 2px solid var(--pruim);
  transform: rotate(45deg); transition: transform .2s ease;
}
.acc details[open] summary::after { transform: rotate(-135deg); margin-top: -.18rem; }
.acc .acc-body { padding: 0 0 1.35rem; color: var(--inkt-zacht); font-size: .97rem; max-width: var(--prose); }
.acc .acc-body p { margin-bottom: .8em; }

.books { columns: 1; }
@media (min-width: 760px) { .books { columns: 2; column-gap: 2.4rem; } }
.books details { break-inside: avoid; }

/* ---------- contact ---------- */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.contact-list a, .contact-list .row {
  display: flex; align-items: center; gap: .9rem;
  background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  text-decoration: none; color: var(--inkt); font-weight: 500;
  transition: border-color .15s ease, transform .15s ease;
}
.contact-list a:hover { border-color: var(--pruim); transform: translateY(-1px); }
.contact-ico {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: var(--roze); color: var(--pruim);
  display: grid; place-items: center;
}
.contact-ico svg { width: 19px; height: 19px; }
.contact-list small { display: block; font-size: .78rem; font-weight: 500; color: var(--inkt-vaag); }

/* ---------- kaart (Mapbox) ----------
   De boog uit het merk, maar met twee rustige onderhoeken: langs de onderrand
   staan het Mapbox-logo en de bronvermelding, en die mogen van de licentie niet
   worden afgesneden. In een bladvorm zou de ronde hoek ze opeten. De draad en
   de mat liggen eromheen, net als bij de beeldlijsten. */
.kaart-om { position: relative; isolation: isolate; }
.kaart-om::before {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(.8rem, 2.4vw, 1.5rem) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)) clamp(.8rem, 2.4vw, 1.5rem);
  border-radius: 2.2rem 2.2rem var(--radius) var(--radius);
  background: linear-gradient(140deg, var(--roze), var(--abrikoos-zacht));
  transform: rotate(1.1deg);
}
.kaart-om::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: calc(-1 * var(--rand));
  border-radius: 2.6rem 2.6rem var(--radius-lg) var(--radius-lg);
  border: 1.6px solid var(--abrikoos);
  transform: rotate(-.8deg);
  opacity: .85;
}
.kaart {
  position: relative; z-index: 1;
  border-radius: 2.2rem 2.2rem var(--radius) var(--radius); overflow: hidden;
  box-shadow: var(--shadow-diep);
  background: var(--room-diep);
  aspect-ratio: 16 / 11;
}
@media (min-width: 900px) { .kaart { aspect-ratio: 4 / 3; } }
.kaart-plaat { width: 100%; height: 100%; object-fit: cover; }
/* Het hele vlak is de knop; de pil staat onder de speld zodat die vrij blijft. */
.kaart-aan {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 16%;
  border: 0; cursor: pointer;
  background: rgba(251, 245, 238, .26);
  transition: background .2s ease;
  font: inherit; font-size: .9rem; font-weight: 600; color: var(--pruim);
}
.kaart-aan:hover { background: rgba(251, 245, 238, .12); }
.kaart-aan svg { width: 18px; height: 18px; }
.kaart-aan span {
  display: inline-flex; align-items: center; gap: .45rem;
  background: var(--room); border: 1px solid var(--lijn);
  border-radius: 999px; padding: .6rem 1.1rem;
  box-shadow: var(--shadow);
}
.kaart.is-aan .kaart-aan, .kaart.is-aan .kaart-plaat { display: none; }
/* Twee klassen diep, met opzet: mapbox-gl.css komt pas bij het aanzetten binnen
   en staat dus na dit bestand in de head. Zijn .mapboxgl-map zet position op
   relative en zou een losse .kaart-doek overrulen - dan is de kaart 0 hoog. */
.kaart .kaart-doek { position: absolute; inset: 0; }
/* Linksboven: de onderrand is van Mapbox. */
.kaart-route {
  position: absolute; z-index: 3; left: .8rem; top: .8rem;
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--pruim); color: var(--room); text-decoration: none;
  border-radius: 999px; padding: .55rem 1rem;
  font-size: .85rem; font-weight: 600;
  box-shadow: 0 6px 18px rgba(81, 55, 71, .3);
}
.kaart-route:hover { background: var(--pruim-diep); color: var(--room); }
.kaart-route svg { width: 15px; height: 15px; }
.kaart .mapboxgl-ctrl-bottom-right { font-size: .7rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--room-diep); color: var(--inkt-zacht);
  border-top: 1px solid var(--lijn);
  padding-block: clamp(2.5rem, 6vw, 3.75rem) 1.75rem;
  font-size: .93rem;
}
.site-footer h4 { color: var(--inkt); font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-bottom: .9rem; }
.site-footer a:not(.btn) { color: var(--inkt-zacht); text-decoration: none; }
.site-footer a:not(.btn):hover { color: var(--pruim-diep); text-decoration: underline; }
.footer-grid { display: grid; gap: 2rem; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; } }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.footer-brand { margin-bottom: 1rem; }
.footer-brand img { width: 100%; max-width: 236px; height: auto; }
.socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.socials a {
  width: 40px; height: 40px; border-radius: 11px;
  border: 1px solid var(--lijn); background: var(--wit);
  display: grid; place-items: center; color: var(--pruim);
  transition: border-color .15s ease, transform .15s ease, background-color .15s ease;
}
.socials a:hover { border-color: var(--pruim); background: var(--roze); color: var(--pruim-diep); transform: translateY(-1px); }
.socials svg { width: 18px; height: 18px; }
.footer-bottom {
  margin-top: 2.25rem; padding-top: 1.35rem;
  border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem;
  justify-content: space-between; font-size: .84rem; color: var(--inkt-vaag);
}

/* ---------- crisis note ---------- */
.crisis {
  background: var(--abrikoos-zacht); border: 1px solid #EFD5BF;
  border-radius: var(--radius); padding: 1.1rem 1.25rem;
  font-size: .9rem; color: #7E4B27;
}
.crisis strong { color: #613A1D; }

/* ---------- whatsapp ---------- */
/* Het herkenbare groen, #23c063. De letter erop is pruim en niet wit: wit haalt
   op dit groen maar 2.4:1 (ook bij WhatsApp zelf), pruim-diep haalt 5.8:1. Zo
   blijft de knop meteen als WhatsApp te lezen en blijft de tekst leesbaar. */
:root { --wa: #23c063; --wa-diep: #1CA552; }
.btn-wa { background: var(--wa); color: var(--pruim-diep); box-shadow: var(--shadow); }
.btn-wa:hover { background: var(--wa-diep); color: var(--pruim-diep); }
/* op de pruim-band staat hetzelfde groen - daar springt het er juist uit */
.sec-pruim .btn-wa { background: var(--wa); color: var(--pruim-diep); }
.sec-pruim .btn-wa:hover { background: var(--wa-diep); color: var(--pruim-diep); }
.contact-ico.is-wa { background: var(--wa); color: var(--pruim-diep); box-shadow: inset 0 0 0 1px rgba(28, 165, 82, .45); }

.wa-float {
  position: fixed; right: clamp(1rem, 3vw, 1.75rem); bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: 85; display: none; align-items: center; gap: .55rem;
  padding: .85rem 1.15rem; border-radius: 999px;
  background: var(--wa); color: var(--pruim-diep); text-decoration: none;
  font-weight: 600; font-size: .95rem;
  box-shadow: 0 6px 22px rgba(28, 110, 60, .28);
  transition: transform .15s ease, background .15s ease;
}
.wa-float:hover { background: var(--wa-diep); color: var(--pruim-diep); transform: translateY(-2px); }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (min-width: 900px) { .wa-float { display: inline-flex; } }

/* ---------- mobile sticky CTA ---------- */
/* Komt pas omhoog zodra je onder de hero bent. Boven in beeld staan de knoppen
   uit de hero zelf al; de balk is er voor als die uit zicht zijn. */
.mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem;
  padding: .6rem var(--pad) calc(.6rem + env(safe-area-inset-bottom));
  background: var(--room);
  border-top: 1px solid var(--lijn);
  transform: translateY(105%);
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}
.mobile-cta.is-zichtbaar { transform: none; }
.mobile-cta .btn { width: 100%; padding-inline: .45rem; font-size: .85rem; gap: .35rem; }
.mobile-cta .btn svg { width: 17px; height: 17px; }
@media (max-width: 359px) { .mobile-cta .btn { font-size: .78rem; } }
@media (min-width: 900px) { .mobile-cta { display: none; } }
@media (max-width: 899px) { body { padding-bottom: 4.6rem; } }

/* ---------- misc ---------- */
.page-head { padding-block: clamp(2.25rem, 6vw, 3.75rem) clamp(1.5rem, 4vw, 2.5rem); }
.crumbs { font-size: .84rem; color: var(--inkt-vaag); margin-bottom: 1rem; }
.crumbs a { color: var(--inkt-vaag); text-decoration: none; }
.crumbs a:hover { color: var(--pruim); text-decoration: underline; }
/* ---------- beeldlijsten ----------
   Geen rechthoek met ronde hoekjes. De lijst krijgt de bladvorm uit het merk:
   twee volle hoeken tegenover twee strakke. Daarachter een mat die scheef ligt,
   daarvoor de gouden draad die de lijst net niet raakt. */
.figure {
  position: relative; border-radius: var(--blad);
  isolation: isolate;
}
.figure img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: inherit; box-shadow: var(--shadow-diep);
  filter: saturate(.94) contrast(1.03);
  position: relative; z-index: 1;
}
/* de mat: een vlak in merkkleur dat achter de foto uit steekt */
.figure::before {
  content: ""; position: absolute; z-index: 0;
  inset: clamp(.8rem, 2.4vw, 1.5rem) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)) clamp(.8rem, 2.4vw, 1.5rem);
  border-radius: inherit;
  background: linear-gradient(140deg, var(--roze), var(--abrikoos-zacht));
  transform: rotate(1.1deg);
}
/* de draad die om de lijst heen loopt - net ernaast, nooit over de foto */
.figure::after {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  inset: calc(-1 * var(--rand));
  border-radius: inherit;
  border: 1.6px solid var(--abrikoos);
  transform: rotate(-.8deg);
  opacity: .85;
}
.figure-om { border-radius: var(--blad-om); }
.figure-om::before { transform: rotate(-1.1deg); inset: clamp(.8rem, 2.4vw, 1.5rem) clamp(.8rem, 2.4vw, 1.5rem) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)) calc(-1 * clamp(.8rem, 2.4vw, 1.5rem)); }
.figure-om::after { transform: rotate(.8deg); }

/* het portret staat in een boog - dezelfde boog als de deur in haar praktijk */
.figure-portrait { border-radius: 50% 50% 1.6rem 1.6rem / 32% 32% 1.6rem 1.6rem; }
.figure-portrait img { aspect-ratio: 4 / 5; filter: none; }
.figure-portrait::before { transform: rotate(-1.6deg); }
.figure-portrait::after { transform: rotate(1.2deg); }
.rule { border: 0; border-top: 1px solid var(--lijn); margin-block: clamp(2rem, 5vw, 3rem); }
.stack > * + * { margin-top: 1.5rem; }
.tight { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }

/* ==================================================================
   DE GOUDEN DRAAD
   De draad uit het logo is geen decoratie maar het bindmiddel: hij knoopt de
   secties aan elkaar en hij reageert op wat je doet. Twee lagen:
     1. .draad-knoop - de scheiding tussen secties, tekent zich in beeld
     2. het kleine haakje bij een bovenkopje
   De derde laag (.draad-spoel: twee verticale strengen in de zijmarges, alleen
   boven 1400px, met parallax) is eruit op verzoek - ze leidden af bij het lezen.
   ================================================================== */

main { position: relative; z-index: 2; }

/* ---- 1. de knoop: sectiescheiding die zich intekent ---- */
.draad-knoop {
  position: relative; z-index: 1;
  margin: 0 auto; width: min(100%, 1280px);
  padding: clamp(1.4rem, 4vw, 2.6rem) var(--pad);
  line-height: 0;
}
.draad-knoop svg { width: 100%; height: clamp(40px, 6.5vw, 76px); display: block; overflow: visible; }
.draad-knoop path {
  fill: none; stroke: var(--abrikoos); stroke-width: 1.8; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s cubic-bezier(.33, .9, .3, 1);
}
.draad-knoop.is-zichtbaar path { stroke-dashoffset: 0; }

/* ---- 2. het haakje bij een bovenkopje ---- */
.eyebrow { display: flex; align-items: center; gap: .6rem; }
.eyebrow::before {
  content: ""; width: 26px; height: 10px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='10' viewBox='0 0 26 10'%3E%3Cpath d='M1 7.6C5.5 1.8 10.5 9 15 5.2 18.4 2.3 21.6 2 25 3.6' fill='none' stroke='%23E8AB83' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.center .eyebrow { justify-content: center; }

/* ---- de draad onder het accentwoord in de h1 ---- */
.hero h1 em {
  font-style: normal; color: var(--pruim);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='14' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M2 9C34 3 58 12 100 7c40-4.6 64 4 98-1.4' fill='none' stroke='%23E8AB83' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left bottom / 100% .32em;
  padding-bottom: .12em;
}

/* ---- het citaat ----
   Hier lag de lus omheen. Weg; het citaat heeft de ruimte en de letter al. */
.quote-wrap { position: relative; padding-block: clamp(3.5rem, 9vw, 6rem); }
.quote-wrap > * { position: relative; z-index: 1; }

/* ---- diepte in de kleinere onderdelen ---- */
.trust li, .contact-list a, .contact-list .row, .price-card, .socials a {
  background-image: linear-gradient(168deg, var(--wit), #FCF6F1);
}
.price-card { box-shadow: var(--shadow-diep); border-radius: 1.6rem 1.6rem 1.6rem clamp(2rem, 6vw, 3.5rem); }
.card-icon, .contact-ico {
  background: linear-gradient(140deg, var(--roze), var(--abrikoos-zacht));
  box-shadow: inset 0 0 0 1px rgba(232, 171, 131, .4);
}
.acc summary { transition: color .15s ease; }
.acc summary:hover { color: var(--pruim); }
.acc details[open] summary { color: var(--pruim); }

/* De bolletjes in de klachtenlijst zijn knoopjes in de draad. */
.checks li::before { box-shadow: 0 0 0 3px rgba(232, 171, 131, .22); }

/* ---- reduced motion: de draad staat stil, maar blijft staan ---- */
@media (prefers-reduced-motion: reduce) {
  .draad-knoop path { stroke-dashoffset: 0 !important; transition: none; }
}

/* ---- de voet: hier knoopt de draad af ---- */
.site-footer {
  position: relative; overflow: hidden;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(233, 216, 213, .9), transparent 62%),
    radial-gradient(700px 380px at 95% 100%, rgba(232, 171, 131, .18), transparent 62%),
    var(--room-diep);
  border-top: 0;
}
/* een dunne draad in plaats van een rechte scheidingslijn boven de voet */
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 10px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='10' viewBox='0 0 1200 10' preserveAspectRatio='none'%3E%3Cpath d='M0 6C180 6 260 2 420 4c150 2 190 7 320 6 140-1 180-6 300-6 90 0 140 2 160 2' fill='none' stroke='%23E8AB83' stroke-width='1.5'/%3E%3C/svg%3E") repeat-x center / 1200px 10px;
  opacity: .8;
}
/* de lus lag hier ook als watermerk - weg, net als elders */
.site-footer > * { position: relative; z-index: 1; }