/* ==========================================================================
   Yvonne Baank — designsysteem & responsive styles
   Kleuren/typografie overgenomen uit het aangeleverde ontwerp.
   ========================================================================== */

/* ---- Fonts (zelf-gehost, variabel: één bestand dekt alle gewichten) ----- */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/cormorant-garamond-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---- Themavariabelen op :root (donker = default) ------------------------ */
:root {
  --bg: #15120F;
  --headerBg: rgba(21, 18, 15, 0.72);
  --fg: #ECE4D8;
  --muted: #A99E8E;
  --cap: #8f8676;
  --accent: #C2A06B;
  --navline: rgba(236, 228, 216, 0.10);
  --portrait: #1E1A16;

  --primaryBg: #C2A06B;
  --primaryFg: #15120F;
  --primaryBd: #C2A06B;
  --primaryHover: #D4B57F;

  --secFg: #ECE4D8;
  --secBd: rgba(236, 228, 216, 0.28);
  --secHoverBd: rgba(194, 160, 107, 0.7);
  --secHoverFg: #C2A06B;

  --cardBg: #1E1A16;
  --cardBd: rgba(236, 228, 216, 0.10);
  --cardPanel: #15120F;
  --cardPanelBd: rgba(236, 228, 216, 0.08);
  --cardDivider: rgba(236, 228, 216, 0.10);

  --slotBd: rgba(236, 228, 216, 0.18);
  --avatarBg: #C2A06B;
  --avatarFg: #15120F;
  --inputBg: #1E1A16;
  --inputBd: rgba(236, 228, 216, 0.22);

  --frameShadow: 0 24px 70px rgba(0, 0, 0, 0.22);
  --cardShadow: 0 18px 44px rgba(0, 0, 0, 0.30);

  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);

  color-scheme: dark;
}

html[data-theme="light"] {
  --bg: #F3ECE2;
  --headerBg: rgba(243, 236, 226, 0.72);
  --fg: #1E1813;
  --muted: #5f554a;
  --cap: #756a5b;
  --accent: #8a6433;
  --navline: rgba(30, 24, 19, 0.10);
  --portrait: #E7DCCD;

  --primaryBg: #1E1813;
  --primaryFg: #F3ECE2;
  --primaryBd: #1E1813;
  --primaryHover: #332a21;

  --secFg: #1E1813;
  --secBd: rgba(30, 24, 19, 0.30);
  --secHoverBd: #A37C46;
  --secHoverFg: #A37C46;

  --cardBg: #FFFFFF;
  --cardBd: rgba(30, 24, 19, 0.10);
  --cardPanel: #FAF5EC;
  --cardPanelBd: rgba(30, 24, 19, 0.08);
  --cardDivider: rgba(30, 24, 19, 0.10);

  --slotBd: rgba(30, 24, 19, 0.18);
  --avatarBg: #1E1813;
  --avatarFg: #F3ECE2;
  --inputBg: #FFFFFF;
  --inputBd: rgba(30, 24, 19, 0.22);

  --frameShadow: 0 24px 70px rgba(60, 45, 25, 0.14);
  --cardShadow: 0 18px 44px rgba(60, 45, 25, 0.10);

  color-scheme: light;
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Warme ambient-achtergrond (subtiele diepte, thema-bewust) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(194, 160, 107, 0.05), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(147, 167, 187, 0.04), transparent 55%);
}
html[data-theme="light"] body::before {
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(138, 100, 51, 0.05), transparent 60%),
    radial-gradient(90% 60% at 50% 120%, rgba(90, 110, 130, 0.035), transparent 55%);
}

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

a { color: inherit; }

h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; }

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

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ---- Eyebrow (label met lijntjes) -------------------------------------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.eyebrow::before, .eyebrow .line {
  content: "";
  width: 28px; height: 1px;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 auto;
}
.eyebrow--center { justify-content: center; }

/* ---- Knoppen ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 16px 30px;
  border: 1px solid transparent;
  border-radius: 1px;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
  min-height: 48px;
}
.btn--primary {
  color: var(--primaryFg);
  background: var(--primaryBg);
  border-color: var(--primaryBd);
}
.btn--primary:hover { background: var(--primaryHover); border-color: var(--primaryHover); }
.btn--secondary {
  color: var(--secFg);
  background: transparent;
  border-color: var(--secBd);
}
.btn--secondary:hover { border-color: var(--secHoverBd); color: var(--secHoverFg); }

/* ---- Header / navigatie ------------------------------------------------- */
.site-header {
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--headerBg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: border-color .4s ease, background .4s ease;
}
.site-header.scrolled { border-bottom-color: var(--navline); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 84px;
  padding-top: 14px;
  padding-bottom: 14px;
}
.nav__brand {
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.nav__right { display: flex; align-items: center; gap: 12px; }

.nav__cta {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--secFg);
  background: transparent;
  text-decoration: none;
  font-weight: 600;
  padding: 11px 22px;
  border: 1px solid var(--secBd);
  border-radius: 1px;
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* Rustige tekstlink in de nav (geen kader; voor secundaire pagina's zoals Tarieven) */
.nav__link {
  font-family: var(--sans);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-decoration: none;
  font-weight: 500;
  padding: 11px 10px;
  transition: color .25s;
  white-space: nowrap;
}
.nav__link:hover { color: var(--accent); }

/* Themaschakelaar (hitbox >= 44px) */
.theme-toggle {
  width: 44px; height: 44px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--secBd);
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  transition: border-color .2s;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle__icon {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 1.5px solid var(--fg);
  background: linear-gradient(90deg, transparent 0 50%, var(--fg) 50% 100%);
}

/* Hamburger (verborgen op desktop) */
.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--secBd);
  border-radius: 1px;
  cursor: pointer;
  padding: 0;
}
.nav__toggle-bars, .nav__toggle-bars::before, .nav__toggle-bars::after {
  display: block;
  width: 18px; height: 1.5px;
  background: var(--fg);
  position: relative;
  transition: transform .25s, opacity .2s;
}
.nav__toggle-bars::before { content: ""; position: absolute; top: -6px; left: 0; }
.nav__toggle-bars::after  { content: ""; position: absolute; top: 6px;  left: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars { background: transparent; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bars::after  { transform: translateY(-6px) rotate(-45deg); }

/* ---- Main wrapper ------------------------------------------------------- */
.main { flex: 1 1 auto; display: flex; flex-direction: column; position: relative; z-index: 1; }

/* Reveal-on-scroll (progressive enhancement; alleen actief met .js-vlag) */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---- Hero (homepage) --------------------------------------------------- */
.hero {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  align-items: stretch;
  min-height: clamp(520px, 70vh, 760px);
}
.hero__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* De hero loopt over de volle breedte, maar de tekst moet op hetzelfde raster
     staan als de header, de secties en de footer (.container: max 1200px + gutter).
     Daarom links dezelfde inspringing als .container in plaats van margin-left:auto.
     Let op: 100vw telt de schuifbalk mee, dus op Windows kan dit een paar pixels
     schelen; dat is verwaarloosbaar naast de 50 tot 80px die het eerst scheelde. */
  --heroInset: max(var(--gutter), calc((100vw - var(--maxw)) / 2 + var(--gutter)));
  padding: clamp(40px, 6vw, 72px) var(--gutter) clamp(40px, 6vw, 72px) var(--heroInset);
  max-width: calc(var(--heroInset) + 632px + var(--gutter));
  margin-left: 0;
  width: 100%;
}
.hero__title {
  font-size: clamp(34px, 5.2vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 26px 0;
  max-width: 17ch;
}
.hero__lead {
  font-size: clamp(17px, 2.2vw, 20px);
  font-weight: 500;
  line-height: 1.5;
  color: var(--fg);
  margin: 0 0 16px;
  max-width: 40ch;
}
.hero__body {
  font-size: clamp(15.5px, 1.9vw, 16.5px);
  line-height: 1.62;
  color: var(--muted);
  margin: 0 0 36px;
  max-width: 47ch;
}
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.hero__portrait {
  position: relative;
  background: var(--portrait);
  overflow: hidden;
}
.hero__portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 80px 0 90px -40px var(--bg);
}

/* Statische portret-placeholder (geen upload) */
.portrait-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 24px;
  color: var(--cap);
}
.portrait-placeholder img,
.portrait-placeholder .portrait-photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Portretfoto (transparante uitsnede) — volledige figuur, onderaan verankerd */
.portrait-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
}
.portrait-placeholder__icon { width: 40px; height: 40px; opacity: 0.5; }
.portrait-placeholder__text {
  font-size: 13px;
  letter-spacing: 0.04em;
  max-width: 22ch;
}

/* ---- Generieke sectie -------------------------------------------------- */
.section {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: clamp(48px, 8vw, 88px) 0;
}
.section--center { text-align: center; justify-content: center; }
/* Boeking: bovenaan uitlijnen + compactere bovenruimte zodat de agenda hoog staat */
.section--booking {
  align-items: flex-start;
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(32px, 5vw, 56px);
}

/* ---- Boekingspagina ---------------------------------------------------- */
.booking {
  display: block;
  width: 100%;
}
.booking__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
  margin-bottom: clamp(22px, 3vw, 34px);
}
.booking__intro-aside { padding-bottom: 8px; }
.booking__intro .booking__lead { margin: 0; max-width: 46ch; }
.booking__title { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.06; margin: 14px 0; max-width: 13ch; }
.booking__lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: var(--muted); margin: 0 0 22px; max-width: 42ch; }
.booking__points { display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; list-style: none; }
.booking__point { display: flex; align-items: center; gap: 13px; font-size: 15.5px; color: var(--fg); }
.booking__point::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); flex: 0 0 auto;
}

/* Widget-container (klaar voor embed) */
.booking__widget {
  background: var(--cardBg);
  border: 1px solid var(--cardBd);
  border-radius: 5px;
  box-shadow: var(--cardShadow);
  overflow: hidden;
  min-height: 520px;
  display: block;
}
.booking__embed { width: 100%; min-height: 520px; border: 0; display: block; }
.booking__embed-mount { width: 100%; }
.booking__embed-mount iframe { width: 100%; border: 0; display: block; min-height: 560px; }
.widget-placeholder {
  text-align: center;
  padding: clamp(32px, 6vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.widget-placeholder__badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--avatarBg); color: var(--avatarFg);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: 0.04em;
}
.widget-placeholder__title { font-family: var(--serif); font-size: 26px; color: var(--fg); }
.widget-placeholder__text { font-size: 14px; color: var(--muted); max-width: 34ch; }
.booking__note { font-size: 12.5px; color: var(--cap); margin: 14px 0 0; }

/* ---- Nieuwsbrief ------------------------------------------------------- */
.newsletter { max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.newsletter__title { font-size: clamp(38px, 6vw, 60px); line-height: 1.08; margin: 24px 0; max-width: 15ch; }
.newsletter__lead { font-size: clamp(17px, 2.4vw, 19px); line-height: 1.6; color: var(--muted); margin: 0 0 36px; max-width: 48ch; }

/* Knoppenrij (o.a. consult-pagina) */
.actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* Ervaringsverhalen: korte citaten van cursisten, met hun voornaam eronder.
   Let op de .prose ervoor: dit blok staat binnen .prose, en .prose ul/li/p staan verderop in dit
   bestand met gelijke specificiteit. Zonder .prose winnen die en komt de naam dichter bij het
   VOLGENDE citaat te staan dan bij het eigen citaat. */
.prose .quotes { margin: 24px 0 28px; padding-left: 0; list-style: none; }
.prose .quotes li { margin: 0 0 22px; padding-left: 18px; border-left: 2px solid var(--accent); }
.prose .quotes li:last-child { margin-bottom: 0; }
.prose .quotes p { margin: 0 0 8px; font-style: italic; }
.prose .quotes cite { display: block; margin-top: 10px; font-style: normal; font-size: 14px; letter-spacing: 0.04em; color: var(--cap); }
.prose .quotes p:last-of-type { margin-bottom: 0; }

.signup-form { width: 100%; max-width: 520px; }
.signup-form__row { display: flex; gap: 12px; flex-wrap: wrap; }
.field { flex: 1 1 180px; display: flex; flex-direction: column; text-align: left; }
.field label { font-size: 12px; letter-spacing: 0.04em; color: var(--cap); margin-bottom: 6px; font-weight: 600; }
.input {
  width: 100%;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--fg);
  background: var(--inputBg);
  border: 1px solid var(--inputBd);
  border-radius: 1px;
  padding: 15px 16px;
  outline: none;
  transition: border-color .2s;
  min-height: 48px;
}
.input:focus { border-color: var(--accent); }
.signup-form .btn { width: 100%; margin-top: 14px; }

/* Honeypot — verborgen voor mensen, zichtbaar voor domme bots */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}

.consent {
  font-size: 13px;
  color: var(--cap);
  margin: 16px 0 0;
  line-height: 1.5;
  text-align: center;
}
.consent a { color: var(--accent); }

/* Form-meldingen */
.form-msg {
  width: 100%;
  max-width: 520px;
  margin: 18px auto 0;
  padding: 14px 16px;
  border-radius: 2px;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}
.form-msg[hidden] { display: none; }
.form-msg--ok { color: var(--fg); border-color: var(--accent); background: rgba(194, 160, 107, 0.10); }
.form-msg--err { color: var(--fg); border-color: #c0563f; background: rgba(192, 86, 63, 0.10); }

/* Prominente bevestiging na inschrijven (het formulier is dan verborgen) */
.form-msg--success {
  text-align: center;
  font-size: 17px;
  line-height: 1.6;
  padding: 26px 22px;
  margin-top: 26px;
}
.form-msg--success::before {
  content: "\2713";
  display: block;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 10px;
}

/* ---- Prose (privacyverklaring) ----------------------------------------- */
.prose { max-width: 720px; margin: 0 auto; }
.prose h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.1; margin: 12px 0 8px; }
/* Koppen groter en met meer lucht erboven, zodat de pagina te scannen is in
   plaats van te lezen. De sprong van h2 naar tekst was te klein om als kop te
   werken; nu is er echt hiërarchie. */
.prose h2 {
  font-size: clamp(27px, 3.6vw, 38px);
  line-height: 1.15;
  margin: 56px 0 14px;
  color: var(--fg);
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-family: var(--sans);
  font-size: clamp(16px, 1.6vw, 18px);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1.3;
  margin: 34px 0 8px;
  color: var(--accent);
}
.prose p, .prose li { color: var(--muted); font-size: 17px; line-height: 1.75; }
.prose p { margin: 0 0 16px; max-width: 66ch; }
.prose strong { color: var(--fg); font-weight: 600; }
.prose a { color: var(--accent); }
.prose ul { padding-left: 1.15em; margin: 0 0 20px; }
.prose li { margin-bottom: 10px; padding-left: 2px; }
.prose li::marker { color: var(--accent); }
.prose .lead { color: var(--fg); font-size: clamp(19px, 2vw, 21px); line-height: 1.6; }
.prose .back-link { margin-top: 32px; }

/* Form-melding die altijd zichtbaar is (no-JS bevestigingspagina) */
.form-msg--static { display: block; }

/* ---- Footer ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--navline);
  padding: 36px 0;
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.site-footer__brand {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 600;
}
.site-footer__meta { font-size: 13px; color: var(--cap); line-height: 1.7; }
.site-footer__meta a { color: var(--cap); text-decoration: none; }
.site-footer__meta a:hover { color: var(--accent); }
.site-footer__sep { opacity: 0.5; margin: 0 8px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet en kleiner: nav wordt hamburger */
@media (max-width: 860px) {
  .nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--navline);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav__menu.is-open { display: flex; }
  .nav__menu .nav__cta,
  .nav__menu .nav__link {
    border: none;
    border-bottom: 1px solid var(--navline);
    border-radius: 0;
    padding: 16px 0;
    text-align: left;
    font-size: 16px;
  }
  .nav__menu .nav__cta:hover { background: transparent; color: var(--accent); }
  .nav__toggle { display: inline-flex; }
}

/* Hero stapelt op tablet/mobiel: tekst boven, portret eronder */
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .hero__text {
    margin: 0 auto;
    padding: clamp(40px, 9vw, 64px) var(--gutter);
    max-width: 760px;
    order: 1;
  }
  .hero__portrait {
    order: 2;
    min-height: clamp(320px, 60vw, 460px);
  }
  .hero__portrait::after { box-shadow: inset 0 80px 90px -40px var(--bg); }
  .hero__title, .hero__lead, .hero__body { max-width: none; }
}

/* Boeking: op smal scherm de kop-kolommen stapelen */
@media (max-width: 720px) {
  .booking__intro { grid-template-columns: 1fr; gap: 14px; align-items: start; }
  .booking__intro-aside { padding-bottom: 0; }
  .booking__title, .booking__lead { max-width: none; }
}

/* Smal: verberg het tweede sierlijntje zodat de eyebrow netjes afbreekt */
@media (max-width: 600px) {
  .eyebrow .line { display: none; }
  /* Gecentreerde eyebrow: dan ook de linkerlijn weg, anders staat 'ie scheef */
  .eyebrow--center::before { display: none; }
}

/* Mobiel: knoppen vol breed, comfortabeler tikken */
@media (max-width: 480px) {
  .hero__actions, .actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .actions .btn { width: 100%; }
  .signup-form__row { flex-direction: column; }
  /* In kolom-modus mag flex-basis (180px) niet als hoogte gaan gelden */
  .signup-form__row .field { flex: 0 0 auto; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Toegankelijkheid: respecteer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}

/* Doorstuurblok op de bedankpagina: het kant-en-klare bericht moet er als een
   selecteerbaar tekstblok uitzien, ook voor wie het met de hand kopieert. */
.share-quote {
  margin: 1.25rem 0;
  padding: 1rem 1.15rem;
  border-left: 3px solid var(--accent, #b08d57);
  border-radius: 6px;
  background: rgba(127, 127, 127, .08);
  font-size: .97rem;
  line-height: 1.65;
  color: inherit;
}

/* Merklogo in de header. Twee bestanden: goud voor het donkere thema, donkerbruin
   voor het lichte. De wissel gaat via CSS en niet via JavaScript, zodat het
   anti-flash-script het thema al heeft gezet vóór de eerste paint en er dus geen
   verkeerde variant even oplicht. Zonder deze regels zouden beide zichtbaar zijn,
   dus de cachebuster van styles.css moet mee omhoog. */
.nav__brand { display: inline-flex; align-items: center; min-width: 0; }
/* Volle grootte: 280 x 42, precies zoals aangeleverd. Krimpt pas mee als het
   naast de knoppen niet meer past, want dan botst het met de hamburger. */
.nav__brand-logo { display: block; width: 280px; height: auto; max-width: 100%; }
[data-theme="dark"] .nav__brand-logo--light,
[data-theme="light"] .nav__brand-logo--dark { display: none; }
@media (max-width: 700px) { .nav__brand-logo { width: 220px; } }
@media (max-width: 480px) { .nav__brand-logo { width: 180px; } }

/* Actieve pagina in de nav. De gewone links staan op --muted; de pagina waar je
   nu bent wordt vet én lichter (--fg), zodat het verschil ook opvalt zonder dat
   je de kleuren naast elkaar ziet. De call-to-action krijgt zijn gevulde staat,
   dat leest als "je bent hier". */
.nav__link[aria-current="page"] {
  color: var(--fg);
  font-weight: 700;
}
.nav__cta[aria-current="page"] {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

/* Merk in de footer: alleen het monogram, niet de hele lockup. Die staat al in
   de header van dezelfde pagina; twee keer hetzelfde voegt niets toe. Het merk
   krijgt hier de herhaling die het nodig heeft (het is ook de favicon en straks
   haar avatar), terwijl de naam gewoon leesbaar blijft in het e-mailadres eronder
   en voor schermlezers via de verborgen tekst. */
a.site-footer__brand { display: inline-flex; align-items: center; text-decoration: none; border-radius: 2px; transition: opacity .2s; }
a.site-footer__brand:hover { opacity: .75; }
.site-footer__mark { display: block; height: 34px; width: auto; }
[data-theme="dark"] .site-footer__mark--light,
[data-theme="light"] .site-footer__mark--dark { display: none; }

/* De sierstreepjes om de eyebrow zijn gemaakt voor een GECENTREERD blok; daar
   omlijsten ze de tekst netjes. In een linkslijnend blok werkt dat niet: laat je
   ze staan, dan begint de tekst 44px naast de kop; haal je alleen het linker weg,
   dan hangt het rechter er los bij. Daarom in linkslijnende blokken geen streepjes,
   en lijnt de tekst exact uit met de kop eronder. Gecentreerd houdt ze wel. */
.eyebrow:not(.eyebrow--center) { justify-content: flex-start; }
.eyebrow:not(.eyebrow--center)::before,
.eyebrow:not(.eyebrow--center) .line { display: none; }

/* Werknotitie op een pagina die nog niet af is. Valt op, hoort er niet blijvend te staan. */
.nota {
  border-left: 3px solid var(--accent);
  background: rgba(194, 160, 107, .08);
  padding: 14px 18px;
  margin: 22px 0;
  font-size: .95rem;
  line-height: 1.6;
}
.nota strong { color: var(--accent); }

/* ---- Knoppen binnen .prose --------------------------------------------
   .prose a zet alle links op de accentkleur en wint van .btn--primary
   (0,1,1 tegen 0,1,0). Daardoor stond er goud op goud en was de knoptekst
   onzichtbaar. Hier expliciet terugzetten. */
.prose a.btn--primary { color: var(--primaryFg); }
.prose a.btn--secondary { color: var(--secFg); }
.prose a.btn--secondary:hover { color: var(--secHoverFg); }
.prose .actions { justify-content: flex-start; margin-top: 26px; }

/* ---- Opleidingspagina: inhoud met een meescrollend infoblok ------------ */
.yms-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.yms-aside { position: sticky; top: 100px; }
.yms-card {
  border: 1px solid var(--cardBd);
  background: var(--cardBg);
  box-shadow: var(--cardShadow);
  border-radius: 2px;
  padding: 26px 24px;
}
.yms-card__eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cap);
  font-weight: 600;
  margin: 0 0 4px;
}
.yms-card__price {
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1.05;
  color: var(--fg);
  margin: 0 0 2px;
}
.yms-card__sub { font-size: 13px; color: var(--cap); margin: 0 0 20px; }
.yms-card__list { list-style: none; margin: 0 0 22px; padding: 0; }
.yms-card__list li {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 10px 0; border-bottom: 1px solid var(--cardDivider); font-size: 14px;
}
.yms-card__list li:last-child { border-bottom: 0; }
.yms-card__label { color: var(--cap); flex: 0 0 auto; }
.yms-card__value { color: var(--fg); font-weight: 600; text-align: right; }
.yms-card .btn { width: 100%; margin-bottom: 10px; }
.yms-card__note { font-size: 12.5px; color: var(--cap); line-height: 1.55; margin: 14px 0 0; }
.yms-card__note a { color: var(--accent); }
.yms-card__hr { border: 0; border-top: 1px solid var(--cardDivider); margin: 20px 0; }

@media (max-width: 960px) {
  .yms-layout { grid-template-columns: 1fr; }
  .yms-aside { position: static; order: -1; }
  .yms-card { max-width: 460px; }
}

/* Portret op de opleidingspagina. Bewust NIET .portrait-photo: die is
   position:absolute en hoort in de hero-container; buiten die context plakt
   hij aan het venster en schuift hij over de tekst. */
.yms-portret {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  border-radius: 2px;
  margin: 0 auto 10px;
}

/* Kop van de opleidingspagina: de merknaam groot, de gevoelsregel eronder. */
.yms-titel { font-size: clamp(40px, 6.5vw, 76px); line-height: 1.02; margin: 0 0 16px; }
.yms-subtitel {
  font-family: var(--serif);
  font-size: clamp(21px, 2.2vw, 24px);
  line-height: 1.4;
  color: var(--fg);
  margin: 0 0 22px;
  max-width: 22ch;
}

/* Datum en tijd van het webinar: dit is de kerninformatie van die pagina en
   stond eerst als gewone tekstregel tussen de alinea's. Nu groot in het blok. */
.yms-card__datum {
  font-family: var(--serif);
  font-size: clamp(30px, 3.4vw, 38px);
  line-height: 1.05;
  color: var(--fg);
  margin: 2px 0 6px;
}
.yms-card__tijd {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 20px;
}
/* Het formulier zit in een smalle kolom; velden onder elkaar in plaats van naast elkaar. */
.yms-card .signup-form { max-width: none; }
.yms-card .signup-form__row { flex-direction: column; gap: 10px; }
/* .field heeft flex-basis 180px. Bij flex-direction:row is dat een breedte, maar zodra de rij
   naar column kantelt wordt het een HOOGTE, en dan groeit elk veld naar 180px met een gat onder
   het invoerveld. Dezelfde fix staat al bij de mobiele breakpoint; hij ontbrak alleen hier. */
.yms-card .signup-form__row .field { flex: 0 0 auto; }
.yms-card .signup-form .btn { width: 100%; margin-top: 14px; margin-bottom: 0; }

/* Kortere pagina's, zoals de bedankpagina. Twee dingen maakten het gat tussen
   de blokken groot: 88px padding aan beide kanten, én .section groeit mee
   (flex: 1 1 auto) zodat de hero op de homepage de hoogte kan vullen. Op een
   korte pagina rekt dat de tussenruimte extra op. Hier zetten we allebei uit. */
.section--tight { padding-top: clamp(16px, 2.5vw, 30px); padding-bottom: clamp(16px, 2.5vw, 30px); flex: 0 0 auto; }
.section--pb-sm { padding-bottom: clamp(16px, 2.5vw, 30px); flex: 0 0 auto; }

/* Tekstblok dat op dezelfde as staat als een gecentreerde sectie erboven.
   Het citaat blijft links: dat is bedoeld om te lezen en te kopiëren. */
.prose--center { text-align: center; }
.prose--center p, .prose--center h2 { margin-left: auto; margin-right: auto; }
.prose--center .share-quote { text-align: left; }
.prose--center .actions { justify-content: center; }

/* Kopieerknop in de hoek van het doorstuurbericht. Wordt door JavaScript
   aangemaakt, zodat er zonder script geen knop staat die niets doet. */
.share-quote-wrap { position: relative; }
.share-quote { padding-right: 116px; }
.share-copy {
  position: absolute; top: 10px; right: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--secBd);
  border-radius: 2px;
  padding: 7px 11px;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.share-copy:hover { border-color: var(--accent); }
.share-copy.is-done {
  color: var(--primaryFg); background: var(--accent); border-color: var(--accent);
}
.share-copy svg { width: 13px; height: 13px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .share-quote { padding-right: 16px; padding-top: 52px; }
  .share-copy { top: 10px; right: 10px; }
}

/* Uitgelicht instructieblok: een stap die de bezoeker echt moet zetten en die
   niet mag wegvallen in kleine, gedempte tekst. */
.uitleg {
  border: 1px solid var(--cardBd);
  background: var(--cardBg);
  border-radius: 2px;
  padding: 22px 24px;
  margin: 26px auto;
  max-width: 560px;
  font-size: clamp(17px, 1.9vw, 19px);
  line-height: 1.65;
  color: var(--fg);
  text-align: left;
}
.uitleg strong { color: var(--accent); }