/* =========================================================
   Meditatiecentrum Oisterwijk — styles.css
   Art direction: warm, grounded, mature, editorial.
   Palette: warm paper surfaces, deep ink text, clay/terracotta
   accent, muted sage secondary. Serif display (Zodiak) +
   grounded sans (General Sans). No wellness cliché imagery —
   typography, color fields and abstract horizon SVGs carry it.
   ========================================================= */

/* ---------- TOKENS ---------- */
:root, [data-theme="light"] {
  /* Type scale (fluid) */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.6vw, 1.4rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.1rem);
  --text-2xl: clamp(2rem, 1.3rem + 2.3vw, 3.25rem);
  --text-3xl: clamp(2.5rem, 1.2rem + 3.8vw, 4.5rem);

  /* Spacing */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem;
  --space-12:3rem; --space-16:4rem; --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Surfaces — warm paper */
  --color-bg: #F4EFE7;
  --color-surface: #FAF6EF;
  --color-surface-2: #FFFDF8;
  --color-surface-offset: #EBE3D6;
  --color-border: #DDD2C0;
  --color-divider: #E6DCCD;

  /* Text — deep warm ink */
  --color-text: #2A2620;
  --color-text-muted: #6F675A;
  --color-text-faint: #A89F8E;
  --color-text-inverse: #FAF6EF;

  /* Accent — clay / terracotta */
  --color-primary: #B25A3C;
  --color-primary-hover: #9A4830;
  --color-primary-soft: #E7D3C5;

  /* Secondary — muted sage */
  --color-sage: #6E7A63;
  --color-sage-soft: #DCE0D2;

  /* SVG art tokens */
  --svg-warm-1: #C9714E;
  --svg-warm-2: #E2D2BE;
  --svg-line: #C9B79C;
  --svg-line-strong: #B25A3C;
  --svg-cta-line: rgba(250,246,239,0.35);
  --svg-cta-dot: rgba(250,246,239,0.22);

  --radius-sm:.4rem; --radius-md:.65rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-full:9999px;
  --transition-interactive: 220ms cubic-bezier(0.16,1,0.3,1);
  --shadow-sm: 0 1px 2px rgba(60,45,30,0.06);
  --shadow-md: 0 6px 22px rgba(60,45,30,0.09);
  --shadow-lg: 0 18px 48px rgba(60,45,30,0.14);

  --content: 1180px;
  --content-narrow: 760px;

  --font-display: 'Zodiak', Georgia, 'Times New Roman', serif;
  --font-body: 'General Sans', system-ui, -apple-system, sans-serif;
}

[data-theme="dark"] {
  --color-bg: #1A1713;
  --color-surface: #211D18;
  --color-surface-2: #26221B;
  --color-surface-offset: #2C271F;
  --color-border: #3A332A;
  --color-divider: #2E281F;

  --color-text: #ECE4D6;
  --color-text-muted: #A79C89;
  --color-text-faint: #6F6557;
  --color-text-inverse: #1A1713;

  --color-primary: #D98760;
  --color-primary-hover: #E89E7C;
  --color-primary-soft: #3A2C23;

  --color-sage: #9DA88E;
  --color-sage-soft: #2E332A;

  --svg-warm-1: #C9714E;
  --svg-warm-2: #3A322A;
  --svg-line: #4A4034;
  --svg-line-strong: #D98760;
  --svg-cta-line: rgba(236,228,214,0.18);
  --svg-cta-dot: rgba(217,135,96,0.25);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 22px rgba(0,0,0,0.45);
  --shadow-lg: 0 18px 48px rgba(0,0,0,0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --color-bg:#1A1713; --color-surface:#211D18; --color-surface-2:#26221B;
    --color-surface-offset:#2C271F; --color-border:#3A332A; --color-divider:#2E281F;
    --color-text:#ECE4D6; --color-text-muted:#A79C89; --color-text-faint:#6F6557;
    --color-primary:#D98760; --color-primary-hover:#E89E7C; --color-primary-soft:#3A2C23;
    --color-sage:#9DA88E; --color-sage-soft:#2E332A;
    --svg-warm-1:#C9714E; --svg-warm-2:#3A322A; --svg-line:#4A4034; --svg-line-strong:#D98760;
  }
}

/* ---------- BASE ---------- */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html {
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility; scroll-behavior:smooth;
  scroll-padding-top:6rem;
}
body {
  min-height:100dvh; line-height:1.65;
  font-family:var(--font-body);
  font-size:var(--text-base);
  color:var(--color-text);
  background:var(--color-bg);
  transition: background .4s ease, color .4s ease;
}
img,svg,video,canvas { display:block; max-width:100%; height:auto; }
ul[role="list"] { list-style:none; }
a { color:inherit; text-decoration:none; }
button { cursor:pointer; background:none; border:none; color:inherit; font:inherit; }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:500; line-height:1.12; text-wrap:balance; letter-spacing:-.01em; }
p { text-wrap:pretty; }
::selection { background:var(--color-primary-soft); color:var(--color-text); }
:focus-visible { outline:2px solid var(--color-primary); outline-offset:3px; border-radius:var(--radius-sm); }

a, button, [role="button"], summary {
  transition: color var(--transition-interactive), background var(--transition-interactive),
              border-color var(--transition-interactive), box-shadow var(--transition-interactive),
              transform var(--transition-interactive);
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

.skip-link {
  position:absolute; left:-999px; top:.5rem; z-index:200;
  background:var(--color-primary); color:#fff; padding:.6rem 1rem; border-radius:var(--radius-md);
}
.skip-link:focus { left:.5rem; }

.container { width:100%; max-width:var(--content); margin-inline:auto; padding-inline:clamp(1.25rem, 5vw, 3rem); }

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:500; font-size:var(--text-sm); letter-spacing:.005em;
  padding:.7rem 1.3rem; border-radius:var(--radius-full);
  border:1px solid transparent; white-space:nowrap;
}
.btn-lg { padding:.95rem 1.7rem; font-size:var(--text-base); }
.btn-sm { padding:.55rem 1.05rem; font-size:var(--text-xs); }
.btn-primary { background:var(--color-primary); color:#FAF6EF; box-shadow:var(--shadow-sm); }
.btn-primary:hover { background:var(--color-primary-hover); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-ghost { background:transparent; color:var(--color-text); border-color:var(--color-border); }
.btn-ghost:hover { border-color:var(--color-primary); color:var(--color-primary); transform:translateY(-2px); }

/* ---------- TYPOGRAPHY HELPERS ---------- */
.eyebrow {
  font-size:var(--text-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-primary);
}
.section-label {
  font-size:var(--text-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  color:var(--color-sage); margin-bottom:var(--space-4);
}
.section-title { font-size:var(--text-xl); margin-bottom:var(--space-5); max-width:20ch; }
.lede { font-size:var(--text-lg); color:var(--color-text); line-height:1.55; max-width:60ch; }
.accent-text { color:var(--color-primary); font-style:italic; }

.section { padding-block: clamp(var(--space-16), 9vw, var(--space-32)); }

/* ---------- HEADER ---------- */
.site-header {
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s, box-shadow .3s, background .4s;
}
.site-header.scrolled { border-bottom-color:var(--color-divider); box-shadow:var(--shadow-sm); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:clamp(0.5rem, 1vw, 1rem); height:clamp(3.75rem, 3rem + 2vw, 4.75rem); }
.logo { display:inline-flex; align-items:center; gap:clamp(0.35rem, 0.2rem + 0.4vw, 0.6rem); color:var(--color-text); }
.logo-mark { color:var(--color-primary); flex:none; }
.logo-mark-image { width:clamp(2.4rem, 1.6rem + 2vw, 4rem); height:clamp(2.4rem, 1.6rem + 2vw, 4rem); object-fit:contain; flex:none; display:block; }
.logo-text { display:flex; flex-direction:column; line-height:1; }
.logo-name { font-family:var(--font-display); font-size:clamp(1.1rem, 0.7rem + 1.1vw, 1.75rem); font-weight:500; }
.logo-place { font-size:clamp(0.65rem, 0.45rem + 0.6vw, 1rem); letter-spacing:.18em; text-transform:uppercase; color:var(--color-text-muted); margin-top:3px; }

.nav { display:flex; gap:var(--space-6); }
.nav a { font-size:var(--text-sm); color:var(--color-text-muted); position:relative; }
.nav a:hover { color:var(--color-text); }
.nav a::after {
  content:""; position:absolute; left:0; bottom:-4px; width:0; height:1.5px;
  background:var(--color-primary); transition:width var(--transition-interactive);
}
.nav a:hover::after { width:100%; }

.header-actions { display:flex; align-items:center; gap:var(--space-3); }
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.4rem; height:2.4rem; border-radius:var(--radius-full);
  color:var(--color-text-muted); border:1px solid var(--color-border);
}
.theme-toggle:hover { color:var(--color-primary); border-color:var(--color-primary); }
.menu-toggle { display:none; flex-direction:column; gap:5px; width:2.4rem; height:2.4rem; align-items:center; justify-content:center; }
.menu-toggle span { width:20px; height:2px; background:var(--color-text); border-radius:2px; transition:.25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav { display:none; flex-direction:column; gap:var(--space-2); padding:var(--space-4) clamp(1.25rem,5vw,3rem) var(--space-6); border-top:1px solid var(--color-divider); }
.mobile-nav a { padding:.65rem 0; font-size:var(--text-base); color:var(--color-text); border-bottom:1px solid var(--color-divider); }
.mobile-nav a.btn { border:none; margin-top:var(--space-3); color:#FAF6EF; }

/* ---------- HERO ---------- */
.hero { position:relative; overflow:hidden; padding-block: clamp(var(--space-20), 12vw, var(--space-32)); }
.hero-bg { position:absolute; inset:0; z-index:0; }
.hero-svg { width:100%; height:100%; }
.hero-inner { position:relative; z-index:1; max-width:54rem; }
.hero-title { font-size:var(--text-3xl); line-height:1.05; margin:var(--space-5) 0 var(--space-6); max-width:18ch; }
.hero-sub { font-size:var(--text-lg); color:var(--color-text-muted); line-height:1.55; max-width:54ch; margin-bottom:var(--space-8); }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--space-3); }
.hero-micro { margin-top:var(--space-5); font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.02em; }

/* ---------- TRUST ---------- */
.trust { background:var(--color-surface); border-block:1px solid var(--color-divider); padding-block: clamp(var(--space-12), 7vw, var(--space-20)); }
.trust-inner { display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.trust-quote { font-family:var(--font-display); font-size:var(--text-xl); line-height:1.35; font-style:italic; color:var(--color-text); }
.trust-quote cite { display:block; margin-top:var(--space-4); font-family:var(--font-body); font-size:var(--text-sm); font-style:normal; color:var(--color-text-muted); }
.trust-points { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) var(--space-6); }
.trust-points li { display:flex; flex-direction:column; gap:2px; padding-left:var(--space-4); border-left:2px solid var(--color-primary-soft); }
.trust-points strong { font-size:var(--text-base); }
.trust-points span { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- PROBLEM ---------- */
.problem-grid { display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.problem-list { display:flex; flex-direction:column; gap:var(--space-3); }
.problem-list li {
  font-size:var(--text-base); padding:var(--space-4) var(--space-5);
  background:var(--color-surface); border:1px solid var(--color-divider); border-radius:var(--radius-md);
  position:relative; padding-left:var(--space-10);
}
.problem-list li::before {
  content:""; position:absolute; left:var(--space-5); top:50%; transform:translateY(-50%);
  width:8px; height:8px; border-radius:50%; background:var(--color-primary);
}

/* ---------- PATH ---------- */
.path { background:var(--color-surface); border-block:1px solid var(--color-divider); }
.path-head { max-width:var(--content-narrow); margin-bottom:clamp(2.5rem,6vw,4rem); }
.path-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-5); counter-reset:step; list-style:none; }
.path-step {
  position:relative; padding:var(--space-6); background:var(--color-surface-2);
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  transition:transform var(--transition-interactive), box-shadow var(--transition-interactive);
}
.path-step:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); }
.step-num { color:var(--color-primary); display:block; margin-bottom:var(--space-3); }
.step-num svg { display:block; }
.path-step h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.path-step p { font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- OFFER ---------- */
.offer-head { max-width:var(--content-narrow); margin-bottom:clamp(2.5rem,6vw,4rem); }
.offer-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-5); }
.offer-card {
  display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-3);
  padding:clamp(1.5rem,3vw,2.25rem); background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg);
  transition:transform var(--transition-interactive), box-shadow var(--transition-interactive), border-color var(--transition-interactive);
}
.offer-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--color-primary-soft); }
.offer-tag { font-size:var(--text-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--color-sage); padding:.25rem .65rem; background:var(--color-sage-soft); border-radius:var(--radius-full); }
.offer-card h3 { font-size:var(--text-lg); }
.offer-card p { font-size:var(--text-base); color:var(--color-text-muted); flex:1; }
.card-link { font-size:var(--text-sm); font-weight:500; color:var(--color-primary); display:inline-flex; align-items:center; gap:.4rem; }
.card-link span { transition:transform var(--transition-interactive); }
.card-link:hover span { transform:translateX(4px); }
.offer-note { margin-top:var(--space-8); font-size:var(--text-sm); color:var(--color-text-muted); text-align:center; }
.offer-note a { color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }

/* ---------- METHOD ---------- */
.method { background:var(--color-surface); border-block:1px solid var(--color-divider); }
.method-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.method-visual { color:var(--color-sage); max-width:340px; margin-inline:auto; }
.method-copy p:not(.lede):not(.section-label) { color:var(--color-text-muted); margin-top:var(--space-4); }

/* ---------- ABOUT ---------- */
.about-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:center; }
.about-portrait svg { border-radius:var(--radius-xl); box-shadow:var(--shadow-md); color:var(--color-sage); }
.portrait-note { font-size:var(--text-xs); color:var(--color-text-faint); text-align:center; margin-top:var(--space-3); font-style:italic; }
.about-copy p:not(.lede):not(.section-label) { color:var(--color-text-muted); margin-top:var(--space-4); }
.room-photo { margin:0; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-md); background:var(--color-surface-2); border:1px solid var(--color-border); }
.room-photo img { display:block; width:100%; min-height:26rem; height:100%; object-fit:cover; background:var(--color-surface-2); }
.room-photo figcaption { padding:var(--space-3) var(--space-4); font-size:var(--text-xs); color:var(--color-text-muted); background:var(--color-surface-2); }

/* ---------- TESTIMONIALS ---------- */
.testimonials { background:var(--color-surface-offset); border-block:1px solid var(--color-divider); }
.t-head { max-width:var(--content-narrow); margin-bottom:clamp(2.5rem,6vw,4rem); }
.t-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.t-card { padding:clamp(1.5rem,3vw,2.25rem); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.t-card blockquote { font-family:var(--font-display); font-size:var(--text-lg); line-height:1.45; font-style:italic; }
.t-card figcaption { margin-top:var(--space-5); font-size:var(--text-sm); color:var(--color-text-muted); }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.faq-intro { position:sticky; top:6rem; }
.faq-intro a { color:var(--color-primary); text-decoration:underline; text-underline-offset:3px; }
.faq-list details {
  border-bottom:1px solid var(--color-divider); padding:var(--space-4) 0;
}
.faq-list summary {
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-text);
}
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after {
  content:"+"; font-family:var(--font-body); font-size:1.5rem; color:var(--color-primary); transition:transform var(--transition-interactive); flex:none;
}
.faq-list details[open] summary::after { transform:rotate(45deg); }
.faq-list details p { margin-top:var(--space-3); color:var(--color-text-muted); font-size:var(--text-base); max-width:60ch; }

/* ---------- END CTA ---------- */
.end-cta { position:relative; overflow:hidden; background:var(--color-primary); color:#FAF6EF; text-align:center; }
[data-theme="dark"] .end-cta { background:#3A2117; }
[data-theme="dark"] .logo-mark-image { filter:brightness(0) invert(1); opacity:.92; }
.end-cta-bg { position:absolute; inset:0; z-index:0; }
.end-cta-bg svg { width:100%; height:100%; }
.end-cta-inner { position:relative; z-index:1; max-width:46rem; margin-inline:auto; }
.end-cta .eyebrow { color:rgba(250,246,239,0.75); }
.end-cta h2 { font-size:var(--text-2xl); margin:var(--space-4) 0 var(--space-5); color:#FAF6EF; }
.end-cta-sub { font-size:var(--text-lg); color:rgba(250,246,239,0.9); line-height:1.55; margin-bottom:var(--space-8); margin-inline:auto; }
.end-cta .hero-cta { justify-content:center; }
.end-cta .btn-primary { background:#FAF6EF; color:var(--color-primary); }
.end-cta .btn-primary:hover { background:#fff; }
.end-cta .btn-ghost { color:#FAF6EF; border-color:rgba(250,246,239,0.4); }
.end-cta .btn-ghost:hover { border-color:#FAF6EF; color:#FAF6EF; }
.end-cta .hero-micro { color:rgba(250,246,239,0.7); }

/* ---------- FOOTER ---------- */
.site-footer { background:var(--color-surface); border-top:1px solid var(--color-divider); padding-block:var(--space-16) var(--space-8); }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(2rem,5vw,4rem); }
.footer-brand p { margin-top:var(--space-4); color:var(--color-text-muted); font-size:var(--text-sm); max-width:38ch; }
.footer-logo { color:var(--color-text); }
.footer-logo-card { display:inline-flex; align-items:center; justify-content:center; width:8.25rem; height:8.25rem; border-radius:1.4rem; background:#fff; box-shadow:var(--shadow-sm); border:1px solid rgba(22,38,59,.08); overflow:hidden; }
.footer-logo-card img { width:100%; height:100%; object-fit:contain; padding:.35rem; display:block; }
.footer-col h3 { font-family:var(--font-body); font-size:var(--text-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-4); font-weight:500; }
.footer-col a, .footer-col span { display:block; font-size:var(--text-sm); color:var(--color-text-muted); margin-bottom:var(--space-3); }
.footer-col a:hover { color:var(--color-primary); }
.footer-col .btn { color:#FAF6EF; margin-top:var(--space-2); }
.footer-bottom { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:var(--space-16); padding-top:var(--space-6); border-top:1px solid var(--color-divider); font-size:var(--text-xs); color:var(--color-text-faint); }

/* ---------- REVEAL ANIMATION ---------- */
.reveal { opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity:1; transform:none; } }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1180px) {
  .nav, .header-cta { display:none; }
  .menu-toggle { display:flex; }
  .mobile-nav[data-open] { display:flex; }
}
@media (max-width: 940px) {
  .trust-inner, .problem-grid, .method-grid, .about-grid, .faq-grid { grid-template-columns:1fr; }
  .path-steps { grid-template-columns:1fr 1fr; }
  .offer-grid, .t-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-brand { grid-column:1/-1; }
  .faq-intro { position:static; }
  .method-visual { order:-1; max-width:240px; }
}
@media (max-width: 560px) {
  .path-steps { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; }
  .trust-points { grid-template-columns:1fr; }
  .footer-bottom { flex-direction:column; gap:.4rem; }
}

/* =========================================================
   MULTI-PAGE ADDITIONS — subpages, nav state, layouts
   ========================================================= */

/* ---- Active nav state ---- */
.nav a[aria-current="page"],
.mobile-nav a[aria-current="page"] { color:var(--color-primary); }
.nav a[aria-current="page"]::after { width:100%; }

/* ---- Page hero (subpages) ---- */
.page-hero { position:relative; overflow:hidden; padding-block: clamp(var(--space-16), 9vw, var(--space-24)); background:var(--color-surface); border-bottom:1px solid var(--color-divider); }
.page-hero-bg { position:absolute; inset:0; z-index:0; }
.page-hero-bg svg { width:100%; height:100%; }
.page-hero-inner { position:relative; z-index:1; max-width:46rem; }
.page-hero h1 { font-size:var(--text-2xl); line-height:1.08; margin:var(--space-4) 0 var(--space-5); max-width:20ch; }
.page-hero .lede { color:var(--color-text-muted); }
.page-hero .hero-cta { margin-top:var(--space-8); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size:var(--text-xs); color:var(--color-text-faint); letter-spacing:.04em; }
.breadcrumb a { color:var(--color-text-muted); }
.breadcrumb a:hover { color:var(--color-primary); }
.breadcrumb span { margin-inline:.4rem; }

/* ---- Generic two-column prose block ---- */
.split { display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.split.reverse { grid-template-columns:1.15fr 0.85fr; }
.prose > * + * { margin-top:var(--space-4); }
.prose p { color:var(--color-text-muted); }
.prose p.lede { color:var(--color-text); }
.prose h3 { font-size:var(--text-lg); margin-top:var(--space-6); }
.prose ul { list-style:none; display:flex; flex-direction:column; gap:var(--space-3); margin-top:var(--space-4); }
.prose ul li { position:relative; padding-left:var(--space-6); color:var(--color-text-muted); }
.prose ul li::before { content:""; position:absolute; left:.2rem; top:.65em; width:7px; height:7px; border-radius:50%; background:var(--color-primary); }

/* ---- "For who" / feature cards ---- */
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-5); }
.feature-grid.cols-2 { grid-template-columns:repeat(2,1fr); }
.feature-card { padding:clamp(1.5rem,3vw,2.25rem); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.feature-card h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.feature-card p { font-size:var(--text-base); color:var(--color-text-muted); }
.feature-num { font-family:var(--font-display); font-size:var(--text-lg); color:var(--color-primary); display:block; margin-bottom:var(--space-2); }

/* ---- Programma / opbouw (timeline) ---- */
.program { display:flex; flex-direction:column; gap:var(--space-4); counter-reset:prog; }
.program-item { display:grid; grid-template-columns:auto 1fr; gap:var(--space-5); padding:var(--space-6); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.program-item .marker { font-family:var(--font-display); font-size:var(--text-xl); color:var(--color-primary); line-height:1; }
.program-item h3 { font-size:var(--text-lg); margin-bottom:var(--space-2); }
.program-item p { font-size:var(--text-base); color:var(--color-text-muted); }

/* ---- Practical info panel ---- */
.info-panel { background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(1.75rem,4vw,2.75rem); }
.info-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5) var(--space-8); }
.info-list dt { font-size:var(--text-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-faint); margin-bottom:var(--space-1); }
.info-list dd { font-size:var(--text-base); color:var(--color-text); }
.info-note { margin-top:var(--space-6); font-size:var(--text-sm); color:var(--color-text-muted); font-style:italic; }

/* ---- Schedule (data & tijden) ---- */
.schedule-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.schedule-card { border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.25rem); background:var(--color-surface); }
.schedule-card h3 { font-size:var(--text-lg); margin:var(--space-3) 0 var(--space-2); }
.schedule-time { color:var(--color-text-muted); margin-bottom:var(--space-3); }
.schedule-dates { list-style:disc; padding-left:1.1em; display:flex; flex-direction:column; gap:var(--space-1); color:var(--color-text); }
.schedule-note { margin-top:var(--space-3); font-size:var(--text-sm); color:var(--color-text-muted); }
.schedule-practical { margin-top:var(--space-5); background:var(--color-sage-soft); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.25rem); }
.schedule-practical h3 { font-size:var(--text-base); text-transform:uppercase; letter-spacing:.08em; margin-bottom:var(--space-4); }
.schedule-practical .info-list { grid-template-columns:1fr 1fr 1fr; gap:var(--space-4); }

/* ---- About page extended bios ---- */
.bio { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.bio + .bio { border-top:1px solid var(--color-divider); }
.bio-grid { display:grid; grid-template-columns:0.8fr 1.2fr; gap:clamp(2rem,6vw,5rem); align-items:start; }
.bio:nth-child(even) .bio-grid { grid-template-columns:1.2fr 0.8fr; }
.bio:nth-child(even) .bio-portrait { order:2; }
.bio-portrait { position:sticky; top:6rem; }
.bio-portrait svg { border-radius:var(--radius-xl); box-shadow:var(--shadow-md); color:var(--color-sage); width:100%; }
.bio.text-only .bio-grid { display:block; max-width:var(--content-narrow); }
.bio.text-only .bio-body { max-width:var(--content-narrow); }
.bio-name { font-family:var(--font-display); font-size:var(--text-xl); margin-bottom:var(--space-2); }
.bio-role { font-size:var(--text-xs); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--color-sage); margin-bottom:var(--space-5); }
.bio-body p { color:var(--color-text-muted); }
.bio-body p + p { margin-top:var(--space-4); }
.bio-body .lede { color:var(--color-text); }

/* sensitive / loss callout */
.tender { border-left:3px solid var(--color-primary-soft); padding-left:var(--space-5); margin-block:var(--space-5); font-style:italic; color:var(--color-text)!important; }

/* ---- Contact page ---- */
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,6vw,4.5rem); align-items:start; }
.contact-methods { display:flex; flex-direction:column; gap:var(--space-5); }
.contact-method { display:flex; gap:var(--space-4); align-items:flex-start; padding:var(--space-5); background:var(--color-surface-2); border:1px solid var(--color-border); border-radius:var(--radius-lg); }
.contact-method .ic { color:var(--color-primary); flex:none; margin-top:2px; }
.contact-method strong { display:block; font-size:var(--text-base); }
.contact-method a, .contact-method span { font-size:var(--text-sm); color:var(--color-text-muted); }
.contact-method a:hover { color:var(--color-primary); }

.contact-form { display:flex; flex-direction:column; gap:var(--space-4); }
.field { display:flex; flex-direction:column; gap:var(--space-2); }
.field label { font-size:var(--text-sm); font-weight:500; }
.field input, .field textarea, .field select {
  font:inherit; font-size:var(--text-base); color:var(--color-text);
  background:var(--color-surface-2); border:1px solid var(--color-border);
  border-radius:var(--radius-md); padding:.75rem .9rem; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px var(--color-primary-soft); }
.field textarea { min-height:7rem; resize:vertical; }
.honeypot { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note { font-size:var(--text-xs); color:var(--color-text-faint); }

/* ---- Section intro helper ---- */
.section-intro { max-width:var(--content-narrow); margin-bottom:clamp(2.5rem,6vw,4rem); }

/* ---- Soft CTA band (mid page) ---- */
.cta-band { background:var(--color-surface-offset); border-block:1px solid var(--color-divider); text-align:center; }
.cta-band-inner { max-width:44rem; margin-inline:auto; }
.cta-band h2 { font-size:var(--text-xl); margin-bottom:var(--space-4); }
.cta-band p { color:var(--color-text-muted); margin-bottom:var(--space-6); }
.cta-band .hero-cta { justify-content:center; }

/* footer subpage nav columns: allow 4 */
.footer-grid.cols-4 { grid-template-columns:1.6fr 1fr 1fr 1fr; }

/* ---- RESPONSIVE additions ---- */
@media (max-width: 940px) {
  .split, .split.reverse, .bio-grid, .bio:nth-child(even) .bio-grid, .contact-grid { grid-template-columns:1fr; }
  .bio:nth-child(even) .bio-portrait, .bio-portrait { order:-1; position:static; max-width:360px; }
  .feature-grid, .feature-grid.cols-2 { grid-template-columns:1fr 1fr; }
  .footer-grid.cols-4 { grid-template-columns:1fr 1fr; }
  .schedule-grid { grid-template-columns:1fr; }
  .schedule-practical .info-list { grid-template-columns:1fr 1fr; }
}
@media (max-width: 560px) {
  .feature-grid, .feature-grid.cols-2 { grid-template-columns:1fr; }
  .info-list { grid-template-columns:1fr; }
  .program-item { grid-template-columns:1fr; gap:var(--space-3); }
  .footer-grid.cols-4 { grid-template-columns:1fr; }
  .schedule-practical .info-list { grid-template-columns:1fr; }
}