/* ════════════════════════════════════════════════════════════
   INES DE MOOR — Klinisch psychologe
   Zacht editorial · Cormorant Garamond + Mulish
   Palet: warm ivoor · blush · zand · salie (uit het logo)
   ════════════════════════════════════════════════════════════ */

:root {
  --paper: #FAF6F0;        /* warm ivoor */
  --paper-soft: #F5F0E8;
  --blush: #F3EAE1;        /* zachte blush-secties */
  --sand: #EDE3D4;         /* warm zand */
  --sand-deep: #DFD2BE;
  --clay: #CBB9A2;
  --sage: #8B9884;         /* salie — uit het logo-onderschrift */
  --sage-text: #566350;    /* leesbaar salie voor kleine tekst (AA, ook op zand) */
  --sage-deep: #414E3B;    /* donkere CTA-sectie */
  --sage-deeper: #37422F;
  --ink: #2B2822;          /* koppen, lijntekening */
  --body-c: #524B41;       /* bodytekst */

  --hairline: rgba(82, 75, 65, .15);
  --hairline-sage: rgba(139, 152, 132, .4);

  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Mulish", "Segoe UI", sans-serif;

  --fs-h1: clamp(3rem, 7.2vw, 5.6rem);
  --fs-h2: clamp(2.05rem, 4vw, 3.2rem);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-curtain: cubic-bezier(.87, 0, .13, 1);
  --container: 74rem;
  --radius: 1.25rem;
  --photo-filter: sepia(.08) saturate(.92) contrast(1.01) brightness(1.03);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Reset & basis ─────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  scrollbar-gutter: stable;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--body-c);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

::selection { background: var(--sand-deep); color: var(--ink); }

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

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: .8rem 1.4rem;
  background: var(--sage-deep);
  color: var(--paper);
  font-size: .8rem;
  letter-spacing: .12em;
}
.skip-link:focus { top: 1rem; }

/* Papier-grain over de hele site */
.grain {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .045;
  background-image: var(--noise);
}

/* ── Preloader — logo-reveal ───────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--paper);
  clip-path: inset(0 0 0 0);
  transition: clip-path .95s var(--ease-curtain);
}
html.js .preloader { display: flex; }
.preloader::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: var(--noise);
  pointer-events: none;
}
.preloader-inner {
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}

/* Het logo is één PNG: twee lagen die elk een deel tonen.
   De tekening (bovenste ±78 %) tekent zich van boven naar onder,
   de naam (onderste deel) veegt daarna van links naar rechts open.
   De animaties starten pas zodra de afbeelding geladen is (.klaar,
   gezet in main.js) — anders speelt de intro zich af op een leeg vlak. */
.pl-logo {
  position: relative;
  width: min(320px, 58vw);
  aspect-ratio: 919 / 1099;
}
.pl-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pl-mark { clip-path: inset(0 0 100% 0); }
.pl-word { clip-path: inset(78% 100% 0 0); }
.pl-logo.klaar .pl-mark {
  animation: pl-mark-wipe 1.3s var(--ease-out) .35s forwards;
}
.pl-logo.klaar .pl-word {
  animation: pl-word-wipe 1s var(--ease-out) 1.5s forwards;
}
@keyframes pl-mark-wipe {
  to { clip-path: inset(0 0 22% 0); }
}
@keyframes pl-word-wipe {
  to { clip-path: inset(78% 0 0 0); }
}

.preloader.done { clip-path: inset(0 0 100% 0); }
.preloader.done .preloader-inner { opacity: 0; transform: translateY(-28px); }

body.preloading { overflow: hidden; }

/* ── Vangnet zonder JavaScript ──────────────────────────────
   main.js zet als allerlaatste stap de klasse js-ok op <html>.
   Laadt of crasht dat bestand, dan zou de site permanent achter
   de preloader verborgen blijven (en alle .reveal-content op
   opacity 0). Deze puur-CSS-failsafe heft beide na ±7 s op;
   draait main.js normaal, dan bestaat de selector nooit lang
   genoeg om te starten. */
html.js:not(.js-ok) .preloader {
  animation: preloader-failsafe .6s ease 7s forwards;
}
html.js:not(.js-ok) .reveal {
  animation: reveal-failsafe .9s var(--ease-out) 7.5s forwards;
}
@keyframes preloader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}
@keyframes reveal-failsafe {
  to { opacity: 1; transform: none; }
}

.container {
  width: min(var(--container), 100% - clamp(2.5rem, 8vw, 7rem));
  margin-inline: auto;
}

.narrow { max-width: 50rem; margin-inline: auto; }
.center { text-align: center; }

/* ── Typografie ────────────────────────────────────────────── */

h1, h2, h3, blockquote {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.08;
  letter-spacing: .004em;
}

h1, h2 { text-wrap: balance; }
.lede { text-wrap: pretty; }

h1 em, h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--sage-text);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }

.label {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  font-size: .72rem;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 1.6rem;
}
.label::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--sage);
  opacity: .7;
  flex: none;
}
.label-center { justify-content: center; }
.label-center::after {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: var(--sage);
  opacity: .7;
  flex: none;
}
.label-light { color: var(--sand-deep); }
.label-light::before, .label-light::after { background: var(--sand-deep); }

.lede {
  font-size: 1.1rem;
  max-width: 40rem;
  margin-inline: auto;
}

.section-head h2 { margin-bottom: 1rem; }
.section-head .lede { margin-top: 1.2rem; }

/* ── Knoppen & links ───────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1rem 2.15rem;
  border: 1px solid var(--sage-deep);
  border-radius: 999px;
  background: var(--sage-deep);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: background .35s var(--ease-out), border-color .35s var(--ease-out), color .35s var(--ease-out);
}
.btn .btn-arrow { transition: transform .35s var(--ease-out); }
.btn:hover { background: var(--sage-deeper); border-color: var(--sage-deeper); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-small { padding: .8rem 1.7rem; }

.btn-light {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--sage-deep);
}
.btn-light:hover { background: var(--sand); border-color: var(--sand); color: var(--sage-deeper); }

.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .55rem 0 .45rem;
}
.arrow-link span { transition: transform .3s var(--ease-out); }
.arrow-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sage);
  opacity: .5;
  transition: opacity .4s var(--ease-out);
}
.arrow-link:hover span { transform: translateX(4px); }
.arrow-link:hover::after { opacity: 1; }

/* ── Header ────────────────────────────────────────────────── */

.site-header {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.35rem;
  transition: padding .4s var(--ease-out), background .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.site-header.scrolled {
  padding-block: .8rem;
  background: rgba(250, 246, 240, .92);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  box-shadow: 0 1px 0 var(--hairline);
}

/* Het logo staat in de middenkolom, de twee navigatiegroepen leunen
   ertegenaan (end / start) in plaats van tegen de buitenranden: zo is
   de witruimte róndom het logo gelijk, en dát bepaalt of het optisch
   gecentreerd oogt. De knop staat los rechts en telt niet mee in die
   balans.
   minmax(0, 1fr) in plaats van een kale 1fr: die laatste groeit mee
   met zijn inhoud, waardoor de bredere rechterkolom het logo uit het
   midden duwde. Met een minimum van 0 blijven beide zijkolommen exact
   even breed en staat het logo gegarandeerd centraal. */
.header-inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.2rem, 2.6vw, 2.6rem);
}

/* Het logo is verticaal: tekening (tot 76 %), dan de naam, dan het
   onderschrift. In een compacte balk zou de naam onleesbaar klein
   worden, dus vouwt het logo bij het scrollen samen: de houder
   krimpt tot 76 % van de afbeeldingshoogte en toont dan enkel nog
   de tekening. */
.brand {
  display: block;
  overflow: hidden;
  height: 7.6rem;
  transition: height .4s var(--ease-out);
}
.brand img {
  height: 7.6rem;
  width: auto;
  transition: height .4s var(--ease-out), transform .4s var(--ease-out);
}
/* Gescrold blijft enkel de tekening over, en die staat in het
   logobestand 3,8 % links van het midden (de naam eronder wél
   gecentreerd). Zonder deze correctie hangt het merkteken zichtbaar
   uit het lood zodra de naam wegvalt. */
.site-header.scrolled .brand { height: 3.5rem; }
.site-header.scrolled .brand img {
  height: 4.6rem;
  transform: translateX(3.8%);
}

/* De navigatiegroepen staan tegen de buitenranden, niet tegen het
   logo aan: zo vult de balk de volle breedte in plaats van als een
   klompje in het midden te hangen. Het logo blijft desondanks exact
   gecentreerd dankzij de gelijke minmax-kolommen hierboven. */
.nav-links { justify-self: start; }
.nav-rechts {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 1.9rem;
}
.site-nav a { white-space: nowrap; }

.site-nav ul {
  display: flex;
  gap: 1.7rem;
  list-style: none;
}
.site-nav a {
  position: relative;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--body-c);
  padding-block: .4rem;
  transition: color .3s var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--sage);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header-cta { flex: none; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  background: var(--ink);
  transition: transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.25px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.25px) rotate(-45deg); }

/* Zonder deze regel wint het display:flex hieronder van het
   hidden-attribuut (auteursstijl verslaat de browserstijl) en ligt
   het onzichtbare menu als klikvanger over de hele pagina. */
.mobile-menu[hidden] { display: none; }

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s var(--ease-out), visibility 0s .4s;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .4s var(--ease-out);
}
.mobile-menu ul {
  list-style: none;
  text-align: center;
  display: grid;
  gap: 1.4rem;
}
.mobile-menu a:not(.btn) {
  font-family: var(--font-display);
  font-size: 1.9rem;
  color: var(--ink);
}

/* ── Hero ──────────────────────────────────────────────────── */

/* De sfeervlekken zaten eerst in losse divs met blur. Die werden door
   de overflow:hidden van de hero hard afgesneden op de onderrand, wat
   precies daar een zichtbare naad gaf met de golf eronder. Als gradient
   op de sectie zelf doven ze uit binnen de hero — geen rand mogelijk.
   Let op: eindig op rgba van de papierkleur, niet op "transparent";
   dat laatste vervaagt in sommige browsers via zwart en geeft grijs. */
.hero {
  position: relative;
  padding-top: clamp(13rem, 22vh, 16rem);   /* ruimte voor de hoge kopbalk met logo */
  padding-bottom: clamp(3rem, 6vh, 5rem);
  overflow: hidden;
  background:
    radial-gradient(38rem 30rem at 88% 8%, rgba(243, 234, 225, .85), rgba(250, 246, 240, 0) 68%),
    radial-gradient(30rem 26rem at 6% 52%, rgba(237, 227, 212, .55), rgba(250, 246, 240, 0) 70%);
}

.hero-copy { max-width: 46rem; }
.hero-copy .label { margin-bottom: 2rem; }
.hero-lede {
  font-size: 1.15rem;
  max-width: 36rem;
  margin: 1.8rem auto 0;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  flex-wrap: wrap;
  margin-top: 2.6rem;
}

.arch-echo {
  position: absolute;
  z-index: 0;
  width: min(24rem, 100%);
  aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline-sage);
  border-radius: 12rem 12rem var(--radius) var(--radius);
  top: 1.4rem;
  left: calc(50% + 1.4rem);
  transform: translateX(-50%);
  pointer-events: none;
}
.arch-echo-left {
  left: auto;
  right: calc(50% + 1.4rem);
  transform: translateX(50%);
}

/* De draad: tekent zichzelf van knoop naar heldere lijn.
   In de gewone flow ónder de hero-grid, zodat hij nooit
   met de knoppen of de boog kan botsen. */
.hero-thread {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(1.5rem, 4vh, 3rem);
  color: var(--ink);
  opacity: .38;
  pointer-events: none;
}
.hero-thread path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html.js .hero-thread.tekenen path {
  animation: draad-tekenen 3.4s var(--ease-out) .5s forwards;
}
html:not(.js) .hero-thread path { stroke-dashoffset: 0; }
@keyframes draad-tekenen {
  to { stroke-dashoffset: 0; }
}

/* ── Secties & overgangen ──────────────────────────────────── */

.section { padding-block: clamp(5rem, 10vh, 8rem); }
.section-blush { background: var(--blush); }
.section-sand { background: var(--sand); }

/* Eén golfvorm voor élke sectiewissel. De achtergrond draagt de
   kleur van de sectie erbóven, de vulling die van de sectie
   eronder — zo sluit elke overgang naadloos aan, ongeacht de
   volgorde. Om de beurt gespiegeld voor ritme zonder dat de
   amplitude verspringt. */
.overgang {
  line-height: 0;
  margin-block: -1px;
}
.overgang svg {
  width: 100%;
  height: clamp(3rem, 6.5vw, 5.5rem);
}
.overgang.gespiegeld svg { transform: scaleX(-1); }

.van-paper { background: var(--paper); }
.van-blush { background: var(--blush); }
.van-sand  { background: var(--sand); }

.naar-paper path { fill: var(--paper); }
.naar-blush path { fill: var(--blush); }
.naar-sand  path { fill: var(--sand); }
.naar-sage  path { fill: var(--sage-deep); }

#even-stilstaan h2 { margin-bottom: 1.4rem; }
#even-stilstaan .lede + .lede { margin-top: 1.1rem; }

/* ── Split (over mij / bereikbaarheid) ─────────────────────── */

.split {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(3rem, 7vw, 6.5rem);
  align-items: center;
}

.split-copy h2 { margin-bottom: 1.6rem; }
.split-copy p + p { margin-top: 1.1rem; }

.split-visual { position: relative; }

/* De boog met het portret van Ines */
.arch {
  position: relative;
  z-index: 1;
  width: min(22rem, 100%);
  margin-inline: auto;
  aspect-ratio: 4 / 5;
  border-radius: 11rem 11rem var(--radius) var(--radius);
  overflow: hidden;
  background: var(--blush);
}
.arch-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  filter: sepia(.16) saturate(.9) contrast(.97) brightness(1.05);
}
/* De muur achter Ines is bijna zwart en dat botst met het warme
   palet. "lighten" tilt alleen de pixels op die dónkerder zijn dan
   deze tint: de muur wordt warm bruin, haar gezicht blijft intact. */
.arch-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #453A30;
  mix-blend-mode: lighten;
  pointer-events: none;
}

/* Opleiding & lidmaatschap */
.creds {
  list-style: none;
  margin-top: 2.2rem;
  border-top: 1px solid var(--hairline);
}
.creds li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding-block: .9rem;
  border-bottom: 1px solid var(--hairline);
}
.creds li strong {
  font-weight: 400;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--body-c);
}
.creds li span {
  flex: none;
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sage-text);
}

/* ── Werkwijze — pijlers ───────────────────────────────────── */

.pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vh, 4.5rem);
}
.pillars li {
  background: rgba(250, 246, 240, .72);
  border: 1px solid rgba(82, 75, 65, .08);
  border-radius: 8rem 8rem var(--radius) var(--radius);
  padding: 2.6rem 1.6rem 2.2rem;
  text-align: center;
  /* Zelfde schaduw als bij hover, maar volledig doorzichtig: dan
     interpoleert alleen de alpha en is de overgang gegarandeerd
     vloeiend (van "none" naar een schaduw springt in sommige
     browsers). */
  box-shadow: 0 24px 44px -28px rgba(43, 40, 34, 0);
}
.pillars li:hover {
  translate: 0 -6px;
  box-shadow: 0 24px 44px -28px rgba(43, 40, 34, .28);
}
.pillar-mark {
  display: inline-flex;
  width: 4.4rem;
  height: 4.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline-sage);
  color: var(--sage-text);
  margin-bottom: 1.4rem;
}
.pillar-mark svg { width: 2.1rem; height: 2.1rem; }
/* Lucide tekent standaard met stroke-width 2; op dit formaat wordt dat
   bijna 3 px en oogt het log. 1,6 houdt de lijn stevig maar rustig. */
.pillar-mark svg, .reis-icoon svg { stroke-width: 1.6; }
.pillars h3 {
  font-size: 1.35rem;
  margin-bottom: .55rem;
}
.pillars p {
  font-size: .92rem;
  line-height: 1.7;
}
.pillars-note {
  max-width: 40rem;
  margin: 3rem auto 0;
  font-style: italic;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--sage-text);
}

/* ── Praktisch — kaarten ───────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(3rem, 6vh, 4.5rem);
}
.card {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid rgba(82, 75, 65, .08);
  border-radius: var(--radius);
  padding: 2.4rem 2.1rem 2.2rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 44px -28px rgba(43, 40, 34, 0);
}
.card:hover {
  translate: 0 -6px;
  box-shadow: 0 24px 44px -28px rgba(43, 40, 34, .25);
}
.card-nr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--sage-text);
  letter-spacing: .08em;
  margin-bottom: 1.2rem;
}
.card h3 {
  font-size: 1.5rem;
  margin-bottom: .8rem;
}
.card p { font-size: .95rem; }
.card p + p { margin-top: .8rem; }

.price {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  margin-bottom: .6rem;
}
.price strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  color: var(--ink);
  line-height: 1;
}
.price span {
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--sage-text);
}

.card-actions {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 1.6rem;
}
.rosa-note {
  font-size: .88rem;
  font-style: italic;
  color: var(--sage-text);
  margin-top: .8rem;
}

/* ── Bereikbaarheid ────────────────────────────────────────── */

/* Hier staat de tekst links en de kaart rechts, dus de verhouding
   van .split (visual links, tekst rechts) moet omgekeerd. */
/* stretch in plaats van start: de kaart rekt mee tot de hoogte van de
   tekstkolom ernaast. De vaste beeldverhouding moet daarvoor wijken,
   anders bepaalt die de hoogte. */
.split-map {
  align-items: stretch;
  grid-template-columns: 1.1fr .9fr;
}
.split-map .split-visual { display: flex; }
.split-map .map-kader {
  aspect-ratio: auto;
  height: 100%;
  width: 100%;
}
.split-map .split-copy h2 { margin-bottom: 1.2rem; }

.adres {
  font-family: var(--font-display);
  font-style: normal;
  font-size: 1.45rem;
  color: var(--ink);
  line-height: 1.35;
  margin-bottom: 1.8rem;
}

.reis {
  list-style: none;
  display: grid;
  gap: 1.4rem;
  margin-bottom: 2rem;
}
.reis li {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
}
.reis-icoon {
  flex: none;
  display: inline-flex;
  width: 3.4rem;
  height: 3.4rem;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--hairline-sage);
  color: var(--sage-text);
}
.reis-icoon svg { width: 1.8rem; height: 1.8rem; }
.reis h3 {
  font-size: 1.2rem;
  margin-bottom: .15rem;
}
.reis p { font-size: .93rem; line-height: 1.7; }

/* Bewust géén boogvorm: de Google-embed zet zijn eigen infovenster
   linksboven, dat door een ronde bovenrand wordt afgesneden. */
.map-kader {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(82, 75, 65, .1);
  aspect-ratio: 4 / 3;
  margin-inline: auto;
}
.map-kader iframe {
  width: 100%;
  height: 100%;
  border: 0;
  filter: sepia(.18) saturate(.82) contrast(.98);
}

/* ── CTA ───────────────────────────────────────────────────── */

.cta {
  position: relative;
  background: var(--sage-deep);
  color: rgba(250, 246, 240, .82);
  overflow: hidden;
  /* De draad sluit de sectie af, dus onderaan minder ruimte nodig. */
  padding-bottom: clamp(2.5rem, 5vh, 4rem);
}
.cta h2 { color: var(--paper); }
.cta h2 em { color: var(--sand-deep); }
/* In de flow ónder de tekst, net als de draad in de hero. Absoluut
   gepositioneerd sneed hij dwars door het label en de kop. */
.cta-thread {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2.5rem, 6vh, 4rem);
  color: var(--paper);
  opacity: .2;
  pointer-events: none;
}
.cta-actions { margin-top: 2.4rem; }
.cta-alt {
  margin-top: 1.8rem;
  font-size: .95rem;
}
.cta-alt a {
  border-bottom: 1px solid rgba(250, 246, 240, .4);
  transition: border-color .3s var(--ease-out), color .3s var(--ease-out);
}
.cta-alt a:hover { color: var(--paper); border-color: var(--paper); }
/* De standaard salie-focusring is onzichtbaar op de donkere sectie */
.cta :focus-visible { outline-color: var(--paper); }

/* ── Footer ────────────────────────────────────────────────── */

.site-footer {
  background: var(--paper);
  padding-top: clamp(4rem, 8vh, 6rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: 3.5rem;
}
.footer-brand img {
  width: 8.5rem;
  height: auto;
  margin-bottom: 1.2rem;
}
.footer-brand p {
  font-size: .95rem;
  max-width: 16rem;
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--sage-text);
  margin-bottom: 1.2rem;
}
.footer-col ul {
  list-style: none;
  display: grid;
  gap: .55rem;
  font-size: .93rem;
}
.footer-col a {
  transition: color .3s var(--ease-out);
}
.footer-col a:hover { color: var(--ink); }
.footer-erkenning { max-width: 20rem; }
.footer-erkenning li { line-height: 1.6; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding-block: 1.6rem;
  border-top: 1px solid var(--hairline);
  font-size: .82rem;
}
.footer-credit a {
  border-bottom: 1px solid var(--hairline);
  transition: color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.footer-credit a:hover { color: var(--ink); border-color: var(--ink); }

/* ── Scroll-reveals ────────────────────────────────────────── */

html.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
  transition-delay: var(--d, 0s);
}

/* De kaarten zijn tegelijk .reveal én hoverbaar, en de regel hierboven
   is specifieker dan .pillars li / .card — die overschreef daar de
   hover-transitie, waardoor de schaduw sprong en de lift de trage
   reveal-timing mét vertraging kreeg.
   Oplossing: het verschijnen gebruikt "transform", het zweven gebruikt
   de losse "translate"-eigenschap. Die twee leven naast elkaar, dus
   elk kan zijn eigen duur houden zonder de ander te storen. */
html.js .pillars li,
html.js .card {
  transition:
    opacity .9s var(--ease-out) var(--d, 0s),
    transform .9s var(--ease-out) var(--d, 0s),
    translate .45s var(--ease-out),
    box-shadow .45s var(--ease-out);
}
html.js .reveal.in-view {
  opacity: 1;
  transform: none;
}

/* ── Responsief ────────────────────────────────────────────── */

/* Onder deze breedte botst de knop met de rechternavigatie. De
   afspraak-CTA staat verderop nog prominent genoeg (hero, praktisch
   en contact), dus daar verdwijnt hij uit de balk. */
@media (max-width: 68rem) {
  .header-cta { display: none; }
  /* Zonder knop weegt de rechterkolom een stuk lichter. De groepen
     leunen dan tegen het logo in plaats van tegen de buitenranden,
     zodat de lucht eromheen in balans blijft. */
  .nav-links { justify-self: end; }
  .nav-rechts { justify-self: start; }
}

@media (max-width: 64rem) {
  /* Mobiel: logo links, hamburger rechts. De grid valt terug op twee
     kolommen omdat de navigatie eromheen verdwijnt. */
  /* .nav-rechts is de omhullende div van de rechternavigatie plus de
     knop. Alleen de inhoud verbergen volstaat niet: de lege div bezet
     dan nog een grid-cel en duwt de balk naar een tweede rij. */
  .site-nav, .nav-rechts, .header-cta { display: none; }
  .header-inner { grid-template-columns: auto 1fr; gap: 1rem; }
  /* Niet kleiner dan dit: de naam in het logo is maar 9,9 % van de
     hoogte, dus daaronder wordt hij onleesbaar. */
  .brand { grid-column: 1; height: 5.2rem; }
  .brand img { height: 5.2rem; }
  .site-header.scrolled .brand { height: 2.35rem; }
  .site-header.scrolled .brand img { height: 3.1rem; }
  .nav-toggle { display: flex; grid-column: 2; justify-self: end; }

  .arch-echo { display: none; }
  .hero { padding-top: 8.5rem; }

  .split { grid-template-columns: 1fr; }
  .split-visual { order: -1; }
  .arch { width: min(18rem, 80vw); }

  .pillars { grid-template-columns: repeat(2, 1fr); }
  .cards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }

  /* Gestapeld is er geen kolom meer om de hoogte van over te nemen,
     dus krijgt de kaart zijn eigen verhouding terug. */
  .split-map .split-visual { order: 1; }
  .split-map .map-kader { aspect-ratio: 4 / 3; height: auto; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 40rem) {
  .pillars { grid-template-columns: 1fr; max-width: 22rem; margin-inline: auto; }

  /* Naast elkaar wordt te krap: de opleidingsnaam wrapt dan over drie
     regels met het instituut ernaast geperst. */
  .creds li { display: block; }
  .creds li span { display: block; margin-top: .3rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { justify-content: center; text-align: center; }
  .hero-thread { display: none; }
}

/* ── Reduced motion ────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero-thread path { stroke-dashoffset: 0 !important; animation: none !important; }
  /* Even specifiek als de regel hierboven, anders wint die alsnog. */
  html.js .pillars li, html.js .card { transition: none; }
  * { animation-duration: .01ms !important; }
}