/* ════════════════════════════════════════════════════════════
   XÉNIA — Therapeutische coaching
   Warm editorial · Cormorant + Jost · brand gold #AE8247
   ════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette (uit de Xénia blueprint) */
  --paper: #F7F3EC;        /* ivoor / warm wit */
  --paper-soft: #F3EDE2;
  --greige: #EAE2D3;       /* warm greige, secties */
  --greige-deep: #DDD5CA;
  --sand: #C8BBA8;
  --champagne: #D7C2A1;
  --gold: #AE8247;         /* logo-goud */
  --gold-text: #7A5A2F;    /* leesbaar goud voor kleine tekst (AA op ivoor) */
  --ink: #2E2620;          /* koppen */
  --taupe: #55493F;        /* bodytekst */
  --espresso: #3F3226;     /* knoppen, donkere sectie */
  --espresso-deep: #362A1F;

  --hairline: rgba(85, 73, 63, .16);
  --hairline-gold: rgba(174, 130, 71, .35);

  --font-display: "Cormorant", "Times New Roman", serif;
  --font-body: "Jost", "Century Gothic", sans-serif;

  --fs-h1: clamp(3.4rem, 8vw, 6.6rem);
  --fs-h2: clamp(2.15rem, 4.2vw, 3.5rem);
  --fs-quote: clamp(1.9rem, 3.8vw, 3.1rem);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-curtain: cubic-bezier(.87, 0, .13, 1);
  --container: 76rem;
  --photo-filter: sepia(.12) saturate(.92) contrast(1.02);
  --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;
  /* Ruimte voor de scrollbalk blijft altijd gereserveerd. Zonder dit
     verspringt de pagina een paar pixels zodra de preloader het
     overflow:hidden weer vrijgeeft en de balk terugkomt. */
  scrollbar-gutter: stable;
}

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

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

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

::selection { background: var(--champagne); color: var(--espresso); }

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

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

/* ── Paginatransities ───────────────────────────────────────
   Overgangen tussen echte pagina's via de View Transitions API.
   Geen JavaScript nodig; browsers die het niet kennen springen
   gewoon meteen naar de volgende pagina.
   ─────────────────────────────────────────────────────────── */

@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: pagina-uit .26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: pagina-in .44s cubic-bezier(.22, .61, .36, 1) .04s both;
}

@keyframes pagina-uit {
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes pagina-in {
  from { opacity: 0; transform: translateY(16px); }
}

/* De kopbalk hoort bij de site, niet bij de pagina. Door hem een eigen
   naam te geven wordt hij uit de paginaovergang getild: hij blijft
   staan terwijl de inhoud eronder wisselt, en schuift hooguit zacht
   naar zijn nieuwe hoogte. Zonder dit wist de overgang de balk mee en
   verspringt het menu zichtbaar. */
.site-header { view-transition-name: kop; }

/* Even lang als de rest: duurt de kop langer, dan houdt hij de hele
   transitie op — ook bij een korte stijl. */
::view-transition-group(kop) {
  animation-duration: .48s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}

/* ── De gekozen stijl: doek ─────────────────────────────────
   Elke pagina zet data-transitie="doek" in haar eerste script.
   Pagina's zonder dat attribuut (de 404) krijgen de zachte
   overgang hierboven.

   Er waren nog twee kandidaten, "verdiepen" en "stil", te kiezen
   op een testpagina. De keuze is gemaakt en de testpagina is weg;
   ze staan nog in de git-geschiedenis als ze ooit terug moeten.
   ─────────────────────────────────────────────────────────── */

/* DOEK — de nieuwe pagina schuift als een doek van onder naar boven
   over de oude heen, dezelfde beweging als waarmee de preloader zich
   optilt.

   Twee dingen zijn hier essentieel:
   • De oude pagina beweegt NIET. Een doek schuift over een stilstaande
     achtergrond; laat je die meebewegen, dan zie je de vaste menubalk
     verspringen en oogt het als een storing.
   • De kopbalk blijft staan (zie de regel hierboven) en het doek gaat
     er onderdoor. Zou de balk meewissen, dan zie je het menu van hoogte
     verspringen omdat niet elke pagina dezelfde kopinhoud heeft. */

:root[data-transitie="doek"]::view-transition-group(kop) { animation-duration: .62s; }

:root[data-transitie="doek"]::view-transition-old(root) {
  animation: doek-onder .62s linear both;
}
:root[data-transitie="doek"]::view-transition-new(root) {
  animation: doek-in .62s cubic-bezier(.72, 0, .18, 1) both;
  transform-origin: bottom center;
}
@keyframes doek-onder { from, to { opacity: 1; } }
@keyframes doek-in {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Papier-grain over de hele site */
.grain {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: none;
  opacity: .05;
  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 {
  width: min(430px, 62vw);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.pl-logo { width: 100%; height: auto; overflow: visible; }

/* Het logo draagt twee ondertitels: "therapeutic coaching" en "luxury
   rituals". Dat tweede aanbod bestaat nog niet, dus tonen we het nog niet.
   Verbergen in plaats van uit de SVG knippen: één regel hier weghalen en
   het staat er weer. */
.pl-rituals { display: none; }

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

.pl-mark {
  clip-path: inset(0 0 100% 0);
  animation: pl-wipe 1.05s var(--ease-out) .4s forwards;
}
.pl-wordmark {
  clip-path: inset(0 100% 0 0);
  animation: pl-wipe .95s var(--ease-out) 1.15s forwards;
}
.pl-divider {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: pl-scale .65s var(--ease-out) 1.85s forwards;
}
.pl-subtitle {
  opacity: 0;
  transform: translateY(12px);
  transform-box: fill-box;
  animation: pl-rise .7s var(--ease-out) 2.05s forwards;
}

@keyframes pl-wipe { to { clip-path: inset(0 0 0 0); } }
@keyframes pl-scale { to { transform: scaleX(1); opacity: 1; } }
@keyframes pl-rise { to { opacity: 1; transform: translateY(0); } }

body.preloading { overflow: hidden; }

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

.narrow { max-width: 52rem; }
.center { text-align: center; }

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

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

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

h1 em, h2 em, blockquote em {
  font-style: italic;
  color: var(--gold-text);
}

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

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

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

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.02rem 2.1rem;
  border: 1px solid var(--espresso);
  border-radius: 2px;
  background: var(--espresso);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .22em;
  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(--gold-text); border-color: var(--gold-text); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn-outline {
  background: transparent;
  color: var(--espresso);
  border-color: rgba(63, 50, 38, .4);
}
.btn-outline:hover { background: var(--espresso); border-color: var(--espresso); color: var(--paper); }

.btn-champagne {
  background: var(--champagne);
  border-color: var(--champagne);
  color: var(--espresso-deep);
}
.btn-champagne:hover { background: var(--paper); border-color: var(--paper); color: var(--espresso-deep); }

.arrow-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: .55rem 0 .45rem;
  margin-top: -.55rem;
}
.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(--gold);
  opacity: .4;
  transition: opacity .4s var(--ease-out);
}
.arrow-link:hover span { transform: translateX(4px); }
.arrow-link:hover::after { opacity: 1; }

/* De negatieve margin-top hierboven is een optische correctie: bedoeld om
   de link strak onder iets te trekken dat zelf al een ondermarge heeft.
   Volgt hij direct op een alinea zonder die marge, dan plakt hij tegen de
   tekst. Hier eenmaal geregeld in plaats van per sectie opnieuw. */
p:has(+ .arrow-link) { margin-bottom: 2rem; }

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

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

.header-inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  /* Vaste inhoudshoogte, zodat de kopbalk op élke pagina even hoog is.
     Zonder dit is hij zo hoog als zijn inhoud — met een menu en knop
     dus hoger dan met alleen een logo — en verspringt het logo bij het
     wisselen van pagina. */
  min-height: 47px;
}

/* Niet laten krimpen: met acht menu-items duwde de navigatie het logo
   terug tot 14 px breed en brak de tekst in de knop over drie regels. */
.brand { display: block; flex: 0 0 auto; transition: opacity .28s var(--ease-out); }

/* De kopbalk ligt boven het menu-overlay, waardoor het logo over het
   open menu heen bleef staan. Zolang het menu open is hoort alleen de
   sluitknop zichtbaar te zijn. Kent een browser :has() niet, dan blijft
   het logo gewoon staan — dat is de huidige toestand, geen storing. */
.header-inner:has(.nav-toggle[aria-expanded="true"]) .brand {
  opacity: 0;
  pointer-events: none;
}
.brand-logo {
  height: 24px;
  width: auto;
  transition: height .4s var(--ease-out);
}
.site-header.scrolled .brand-logo { height: 20px; }

.site-nav { margin-left: auto; }
.site-nav ul {
  display: flex;
  /* Meebewegende tussenruimte in plaats van een vaste 2,4rem: met acht
     items werd het anders te krap en gingen de flexitems krimpen. */
  gap: clamp(1.15rem, 2.1vw, 2.4rem);
  list-style: none;
}
.site-nav a {
  position: relative;
  font-size: .8rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--taupe);
  padding-block: .4rem;
  /* Zonder dit vielen "Voor wie" en "Over mij" op twee regels zodra de
     items moesten krimpen, en groeide de hele kopbalk van 47 naar 66 px. */
  white-space: nowrap;
  transition: color .3s var(--ease-out);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { transform: scaleX(1); }
/* De huidige pagina krijgt alleen een iets donkerder kleur, geen streep.
   De gouden lijn is voorbehouden aan hover, zodat die beweging betekent
   "hier kun je heen" en niet "hier ben je al". aria-current blijft wel in
   de HTML staan — schermlezers hebben er iets aan, ook zonder streep. */
.site-nav a[aria-current="page"] { color: var(--ink); }

.header-cta { flex: 0 0 auto; white-space: nowrap; padding: .78rem 1.5rem; font-size: .68rem; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 1.5px;
  width: 100%;
  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); }

/* ── Mobiel menu ───────────────────────────────────────────── */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.6rem;
  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 nav a {
  font-family: var(--font-display);
  font-size: 2.1rem;
  color: var(--ink);
  transition: color .3s;
}
.mobile-menu nav a:hover { color: var(--gold-text); }
.mobile-menu li {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.mobile-menu.open li { opacity: 1; transform: none; }
.mobile-menu.open li:nth-child(1) { transition-delay: .05s; }
.mobile-menu.open li:nth-child(2) { transition-delay: .1s; }
.mobile-menu.open li:nth-child(3) { transition-delay: .15s; }
.mobile-menu.open li:nth-child(4) { transition-delay: .2s; }
.mobile-menu.open li:nth-child(5) { transition-delay: .25s; }
/* ── Hero ──────────────────────────────────────────────────── */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(7rem, 14vh, 10rem);
  background: var(--paper);
  overflow: hidden;
}

/* Full-bleed beeld/video dat links in ivoor overloopt */
.hero-media { position: absolute; inset: 0; }
.hero-media-img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 58%;
  filter: var(--photo-filter);
}
.hero-video { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.hero-video.playing { opacity: 1; }
.hero-veil {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--paper) 4%, rgba(247, 243, 236, .93) 30%, rgba(247, 243, 236, .5) 54%, rgba(247, 243, 236, 0) 76%),
    linear-gradient(180deg, rgba(247, 243, 236, .85) 0%, rgba(247, 243, 236, 0) 26%),
    linear-gradient(0deg, var(--paper) 2%, rgba(247, 243, 236, 0) 26%),
    linear-gradient(rgba(247, 243, 236, .26), rgba(247, 243, 236, .26));
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 40rem);
  align-items: center;
  flex: 1;
}

.hero h1 {
  font-size: var(--fs-h1);
  margin-bottom: 2.1rem;
}

.hero-lede {
  font-size: 1.16rem;
  max-width: 27rem;
  margin-bottom: 2.8rem;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  flex-wrap: wrap;
}

/* De arch — echo van het capsule-logo */
.arch {
  position: relative;
  /* Boven de echo-ring, maar zonder negatieve z-index: die zou de ring
     achter de sectieachtergrond duwen zodra de reveal-animatie klaar is
     en de stacking context van het element verdwijnt. */
  z-index: 1;
  width: clamp(240px, 26vw, 330px);
  aspect-ratio: 3 / 5;
  border-radius: 999px;
  overflow: hidden;
  background:
    radial-gradient(120% 85% at 28% 8%, rgba(247, 243, 236, .95), transparent 55%),
    linear-gradient(158deg, #EDE4D2 0%, #E0D3BB 48%, var(--champagne) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 30px 60px -30px rgba(63, 50, 38, .28),
    inset 0 1px 0 rgba(255, 255, 255, .5);
}
.arch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--champagne);
  mix-blend-mode: multiply;
  opacity: .12;
  border-radius: inherit;
  pointer-events: none;
}
.arch::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid var(--hairline-gold);
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}

.arch-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: var(--photo-filter);
}

.arch-echo {
  position: absolute;
  inset: 0;
  z-index: 0;
  transform: translate(32px, -32px);
  border: 1px solid rgba(174, 130, 71, .45);
  border-radius: 999px;
  pointer-events: none;
}

/* ── Secties algemeen ──────────────────────────────────────── */

.section {
  padding-block: clamp(5.5rem, 11vw, 9.5rem);
}

.section-greige {
  background:
    radial-gradient(70rem 40rem at 110% 0%, rgba(247, 243, 236, .65), transparent 55%),
    var(--greige);
}

.section-head {
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
}

#voor-wie h2 { margin-bottom: 1.8rem; }
#voor-wie .lede { margin-bottom: 0; }

/* ── Pijlers ───────────────────────────────────────────────── */

.pillars {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 3vw, 3rem);
  border-block: 1px solid var(--hairline);
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-block: clamp(3rem, 5vw, 4rem);
}
.pillars li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Het beeldmerk-motief: een capsule met een haarlijntekening erin,
   in dezelfde vormentaal als het logo. */
.pillar-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  aspect-ratio: 3 / 5;
  margin-bottom: 1.7rem;
  border: 1px solid var(--hairline-gold);
  border-radius: 999px;
  color: var(--gold);
  transition: background .45s var(--ease-out), border-color .45s var(--ease-out),
              transform .45s var(--ease-out);
}
/* Phosphor Thin (MIT) — vierkante iconen, dus op breedte maatvoeren.
   De haarlijn van deze set sluit aan bij de lijndikte van het logo. */
.pillar-mark svg { width: 58%; height: auto; }

.pillars li:hover .pillar-mark {
  background: rgba(215, 194, 161, .22);
  border-color: var(--gold);
  transform: translateY(-4px);
}

.pillars h3 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .78rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.6;
  margin-bottom: .8rem;
  text-wrap: balance;
}
.pillars p {
  font-size: .96rem;
  line-height: 1.75;
  max-width: 15rem;
  text-wrap: pretty;
}

/* ── Werkwijze / split ─────────────────────────────────────── */

.split {
  display: grid;
  grid-template-columns: .8fr 1.1fr;
  gap: clamp(3.5rem, 8vw, 7.5rem);
  align-items: center;
}

.split-visual {
  position: relative;
  width: fit-content;
  margin-inline: auto;
}

.arch-portrait {
  width: clamp(250px, 24vw, 320px);
  background:
    radial-gradient(110% 80% at 70% 6%, rgba(247, 243, 236, .9), transparent 55%),
    linear-gradient(200deg, #E4D8C2 0%, #D3C2A4 55%, #C4AE8A 100%);
}

.arch-echo-left { transform: translate(-32px, 32px); }

.split-copy h2 { margin-bottom: 1.8rem; }
.split-copy p { max-width: 33rem; }

/* Gespiegelde variant: tekst links, portret rechts. Twee split-secties
   vlak na elkaar met het beeld aan dezelfde kant lezen als een herhaling;
   omkeren geeft de pagina een ritme. De kolombreedtes wisselen mee, want
   de bredere kolom hoort bij de tekst. */
.split-omgekeerd { grid-template-columns: 1.1fr .8fr; }

.layers {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem 0;
  margin-block: 2.2rem 2.6rem;
}
.layers li {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--ink);
}
.layers li + li::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .6;
  margin-inline: 1.4rem;
  transform: translateY(-.22em);
}

/* ── Aanbod / cards ────────────────────────────────────────── */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.4rem, 2.5vw, 2.2rem);
}

.card {
  display: flex;
  flex-direction: column;
  padding: 2.8rem 2.4rem 2.6rem;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: rgba(255, 253, 248, .5);
  overflow: hidden;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out);
}

.card-media {
  position: relative;
  margin: -2.8rem -2.4rem 2.2rem;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-bottom: 1px solid var(--hairline);
}
.card-media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--champagne);
  mix-blend-mode: multiply;
  opacity: .12;
  pointer-events: none;
}
.card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform .7s var(--ease-out);
}
.card:hover .card-media img { transform: scale(1.045); }
.card:hover {
  background: #FDFBF6;
  transform: translateY(-5px);
  border-color: var(--hairline-gold);
  box-shadow: 0 24px 44px -28px rgba(63, 50, 38, .3);
}

.card-nr {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--gold-text);
  margin-bottom: 2.2rem;
}
.card h3 {
  font-size: 1.75rem;
  margin-bottom: .9rem;
}
.card p {
  font-size: .99rem;
  margin-bottom: 2.2rem;
}
.card .arrow-link { margin-top: auto; align-self: flex-start; }

/* ── Filosofie — full-bleed filmisch moment ────────────────── */

.filosofie-cine {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(480px, 74vh, 660px);
  padding-block: clamp(5rem, 10vw, 8rem);
  overflow: hidden;
}
/* Deze sectie was donker met lichte tekst. Dat werkte bij het vorige,
   donkere beeld; bij deze lichte zonsondergang zakte het contrast naar
   1,2 op 1 — praktisch onleesbaar. Er zou een sluier van driekwart zwart
   nodig zijn om wit leesbaar te krijgen, en dan is precies weg wat de
   foto mooi maakt.
   Daarom omgekeerd: de foto blijft licht, de tekst wordt donker. */
.filosofie-cine > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Onderaan uitlijnen: dan blijft het pad en de begroeiing in beeld en
     verdwijnt de felle zonneweerspiegeling grotendeels boven de rand. */
  object-position: center bottom;
  filter: saturate(.66) sepia(.08) brightness(.94) contrast(1.02);
}
/* Donkere sluier, iets zwaarder in het midden waar de tekst staat. Zonder
   dit haalde het citaat een contrast van 1,2 op 1 tegen de lichte lucht. */
.filosofie-cine::before {
  content: "";
  position: absolute;
  inset: 0;
  /* Zonder deze z-index doet de sluier niets. Een ::before is het eerste
     kind in de tekenvolgorde, dus de foto erna schilderde er gewoon
     overheen. Dat viel niet op zolang de foto zelf donker was — bij een
     lichte foto is het meteen zichtbaar als onleesbare tekst. */
  z-index: 1;
  background:
    radial-gradient(82% 70% at 50% 46%, rgba(26, 20, 14, .56), rgba(26, 20, 14, .30) 72%, rgba(26, 20, 14, .22)),
    linear-gradient(180deg, rgba(34, 26, 19, .26), rgba(34, 26, 19, .34));
}
.filosofie-inner { position: relative; z-index: 2; }
.filosofie-cine blockquote p {
  font-size: var(--fs-quote);
  line-height: 1.3;
  color: var(--paper);
  text-shadow: 0 1px 26px rgba(24, 18, 13, .55);
}
.filosofie-cine blockquote em { color: #EFE0C4; }
.filosofie-cine .label { color: #EFE5D2; }
.filosofie-cine .label::before,
.filosofie-cine .label::after { background: var(--champagne); }
.filosofie-cine .motif span,
.filosofie-cine .motif i { background: var(--champagne); }
.line { display: inline-block; }

.motif {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.8rem;
}
.motif span {
  width: 5.5rem;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}
.motif i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  opacity: .7;
}

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

.cta {
  position: relative;
  background:
    radial-gradient(70rem 40rem at 15% -20%, rgba(215, 194, 161, .16), transparent 55%),
    linear-gradient(175deg, #47382A 0%, var(--espresso-deep) 100%);
  color: var(--greige-deep);
  overflow: hidden;
}

.cta h2 { color: var(--paper); }
.cta h2 em { color: var(--champagne); }

.cta-mark {
  position: absolute;
  right: -3%;
  bottom: -22%;
  /* Ondergrens laag houden: met 280px werd dit op tabletbreedte 36% van het
     scherm terwijl het op desktop 30% is, en dan gaat het domineren. */
  width: clamp(180px, 30vw, 440px);
  color: var(--champagne);
  opacity: .13;
  pointer-events: none;
}

/* Op smalle schermen was het merkteken 72% van de schermbreedte en liep het
   dwars door de tekst. Half wegschuiven maakte er een fragment van, dus staat
   het hier volledig in beeld als klein sluitteken onderaan — en de gloed in de
   achtergrond wordt op schermbreedte geschaald, anders valt hij buiten beeld
   en blijft er een vlakke bruine was over. */
@media (max-width: 700px) {
  .cta {
    background:
      radial-gradient(24rem 18rem at 50% -8%, rgba(215, 194, 161, .14), transparent 62%),
      radial-gradient(20rem 16rem at 92% 106%, rgba(215, 194, 161, .10), transparent 60%),
      linear-gradient(172deg, #47382A 0%, var(--espresso-deep) 100%);
  }

  /* Extra ruimte onderaan zodat het sluitteken niet in de tekst valt. */
  .cta { padding-bottom: 13rem; }

  .cta-mark {
    width: 68px;
    right: 50%;
    transform: translateX(50%);
    bottom: 3rem;
    opacity: .18;
  }
}

.cta-actions { margin-top: 2.8rem; }

.cta-alt {
  margin-top: 2.2rem;
  font-size: .95rem;
  color: var(--sand);
}
.cta-alt a {
  color: var(--champagne);
  border-bottom: 1px solid rgba(215, 194, 161, .4);
  transition: border-color .3s;
}
.cta-alt a:hover { border-color: var(--champagne); }

/* ── Aanbod met één item ───────────────────────────────────── */

/* Zolang er maar één ding aangeboden wordt, is een kaartenraster de
   verkeerde vorm: twee lege plekken lezen als "hier hoort nog iets".
   Beeld naast tekst maakt er een bewuste, complete sectie van. */
.aanbod-een {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  overflow: hidden;
  background: rgba(255, 253, 248, .5);
  transition: border-color .4s var(--ease-out), background .4s var(--ease-out);
}
.aanbod-een:hover {
  border-color: var(--hairline-gold);
  background: #FDFBF6;
}
.aanbod-een figure {
  position: relative;
  min-height: 20rem;
  overflow: hidden;
}
.aanbod-een img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: var(--photo-filter);
  transition: transform .7s var(--ease-out);
}
.aanbod-een:hover img { transform: scale(1.04); }

.aanbod-een-tekst {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(2.2rem, 5vw, 3.5rem);
}
.aanbod-een-tekst h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  color: var(--ink);
  margin-bottom: 1rem;
}
.aanbod-een-tekst p {
  color: var(--taupe);
  max-width: 26rem;
  margin-bottom: 2rem;
}

@media (max-width: 760px) {
  .aanbod-een { grid-template-columns: 1fr; }
  .aanbod-een figure { min-height: 14rem; }
}

/* ── Over mij ──────────────────────────────────────────────── */

/* De pagina begint direct onder de vaste kopbalk, dus daar is extra lucht
   nodig die de homepage van de hero krijgt. */
.over-intro { padding-top: clamp(7rem, 12vw, 10rem); }

.over-intro h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.6rem, 5.5vw, 4.2rem);
  line-height: 1.08;
  color: var(--ink);
  margin-bottom: 1.8rem;
}
.over-intro h1 em { font-style: italic; color: var(--gold-text); }
.over-intro .split-copy p + p { margin-top: 1.2rem; }
/* Xenia's tekst beslaat hier vier alinea's; naast de standaardcapsule van
   3:5 wordt die kolom een stuk hoger dan het beeld. Een iets ruimere arch
   houdt de twee kolommen in evenwicht. */
.over-intro .arch-portrait { width: clamp(260px, 27vw, 380px); }

/* Niet standaard centreren: in een sectie met een linksuitgelijnde kop
   zou de tekst eronder dan naar binnen springen. Alleen binnen .center
   hoort hij ook echt gecentreerd te staan. */
.over-lede {
  font-size: 1.1rem;
  line-height: 1.85;
  max-width: 42rem;
}
.center .over-lede { text-align: center; margin-inline: auto; }

.over-noot {
  margin-top: 1.6rem;
  font-size: .95rem;
  color: var(--gold-text);
}

/* De kattenfoto is een echte momentopname, geen gestileerd portret. Daarom
   hier bewust niet het capsulevormpje van het logo: dat is voorbehouden aan
   de beelden die de merksfeer dragen. Een rustig kader met dezelfde
   haarlijn en radius als de rest houdt het bij de familie zonder te doen
   alsof het een studiofoto is. */
.katten {
  margin: clamp(2.2rem, 5vw, 3.2rem) auto 0;
  max-width: 30rem;
}
.katten img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  filter: var(--photo-filter);
}
/* Geen namenregel eronder: de namen staan op de foto zelf. Ze staan ook in
   de lopende tekst en in het alt-attribuut, want een schermlezer en Google
   kunnen niet in een afbeelding kijken. */


/* ── Veelgestelde vragen ───────────────────────────────────── */

.vragen-intro,
.praktijk-intro { padding-top: clamp(7rem, 12vw, 10rem); }
.vragen-intro h1,
.praktijk-intro h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 1.6rem;
}
.vragen-intro h1 em,
.praktijk-intro h1 em { font-style: italic; color: var(--gold-text); }

/* Openklappers met <details>: werkt zonder JavaScript, met toetsenbord en
   met schermlezers. Alles staat standaard dicht — een lijst van elf open
   antwoorden is geen overzicht meer. */
.vragen { border-top: 1px solid var(--hairline); }

.vraag-item { border-bottom: 1px solid var(--hairline); }

.vraag-item summary {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  padding: 1.5rem 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
  transition: color .3s var(--ease-out);
}
/* Het standaard driehoekje weg in alle browsers. */
.vraag-item summary::-webkit-details-marker { display: none; }
.vraag-item summary:hover { color: var(--gold-text); }

/* Eigen teken rechts: een plus die bij het openen een min wordt. Twee
   haarlijnen in plaats van een icoon, zodat het bij de rest hoort. */
.vraag-item summary::after {
  content: "";
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  margin-left: auto;
  align-self: center;
  background:
    linear-gradient(var(--gold), var(--gold)) center/13px 1px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center/1px 13px no-repeat;
  transition: transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.vraag-item[open] summary::after {
  /* Halve slag, geen kwartslag: bij 90° zou de overgebleven horizontale
     lijn rechtop komen te staan en zie je een streepje in plaats van een
     min. Bij 180° draait het teken zichtbaar en eindigt het vlak. */
  transform: rotate(180deg);
  background:
    linear-gradient(var(--gold), var(--gold)) center/13px 1px no-repeat;
}
.vraag-item[open] summary { color: var(--gold-text); }

.vraag-antwoord {
  padding: 0 0 1.7rem;
  max-width: 44rem;
}
.vraag-antwoord p { color: var(--taupe); }

/* Een openklapper animeren kan niet met een hoogte-overgang zonder JS,
   dus laten we alleen de inhoud opkomen. Dat is genoeg om de sprong te
   verzachten zonder trucs met vaste hoogtes. */
@media (prefers-reduced-motion: no-preference) {
  .vraag-item[open] .vraag-antwoord {
    animation: antwoord-in .34s var(--ease-out) both;
  }
}
@keyframes antwoord-in {
  from { opacity: 0; transform: translateY(-6px); }
}

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

.site-footer {
  background: var(--paper);
  padding-top: clamp(4.5rem, 8vw, 6.5rem);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 4rem);
  padding-bottom: clamp(3.5rem, 6vw, 5rem);
}

.footer-brand img { margin-bottom: 1.6rem; }
.footer-brand p {
  font-size: .95rem;
  max-width: 17rem;
}

.footer-col h4 {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: 1.4rem;
}
.footer-col ul {
  list-style: none;
  display: grid;
  gap: .65rem;
}
.footer-col a {
  font-size: .96rem;
  color: var(--taupe);
  transition: color .3s;
}
.footer-col li {
  font-size: .96rem;
  line-height: 1.55;
  color: var(--taupe);
}
.footer-col a:hover { color: var(--gold-text); }

/* Het btw-nummer is een wettelijke vermelding, geen informatie waar iemand
   naar op zoek is. Stiller dus, en met wat lucht erboven. */
.footer-btw {
  margin-top: .4rem;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--gold-text);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--hairline);
  padding-block: 1.8rem;
  font-size: .8rem;
  letter-spacing: .06em;
}
/* Een maker-vermelding hoort stil te zijn: geen kapitalen en geen brede
   letterafstand zoals de oude baseline had, anders trekt ze de aandacht
   weg van de praktijk zelf. */
.footer-credit {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--sand);
}
.footer-credit a {
  color: var(--taupe);
  border-bottom: 1px solid transparent;
  transition: color .3s, border-color .3s;
}
.footer-credit a:hover {
  color: var(--gold-text);
  border-bottom-color: rgba(122, 90, 47, .4);
}

/* ── Scroll reveals (alleen met JS actief) ─────────────────── */

/* De reveal gebruikt een animatie en géén transition, en dat is een
   bewuste keuze. Met een transition won deze regel het van de hover-regels
   van elementen die óók .reveal dragen: de shorthand verving hun hele
   transition, waardoor bijvoorbeeld de schaduw van een kaart bij hover
   ineens aan- en uitsprong in plaats van te vervloeien.

   'backwards' is hier de sleutel: tijdens de vertraging van --d houdt de
   animatie de begintoestand vast, maar ná afloop laat ze het element weer
   los. Zou dat 'both' of 'forwards' zijn, dan bleef transform: none aan de
   animatie hangen en kon hover de kaart niet meer optillen. */
html.js .reveal { opacity: 0; }

html.js .reveal.in-view {
  opacity: 1;
  animation: onthullen .8s var(--ease-out) var(--d, 0s) backwards;
}

@keyframes onthullen {
  from { opacity: 0; transform: translateY(20px); }
}

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

/* De navigatie schakelt op zijn eigen breekpunt, los van de layout: het
   menu heeft andere ruimte nodig dan de hero en de secties eronder. */
@media (max-width: 1020px) {
  .site-nav { display: none; }
  .header-cta { display: none; }
  .nav-toggle { display: flex; margin-left: auto; }
}

@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 8rem; }
  .hero-veil {
    background:
      linear-gradient(180deg, rgba(247, 243, 236, .95) 0%, rgba(247, 243, 236, .88) 42%, rgba(247, 243, 236, .45) 72%, var(--paper) 100%);
  }
  .hero-media-img, .hero-video { object-position: 60% 58%; }
  .arch { width: min(260px, 62vw); }

  .pillars { grid-template-columns: 1fr 1fr; gap: 2.75rem 1.5rem; }

  .split { grid-template-columns: 1fr; }
  .split-visual { order: 2; }

  .cards { grid-template-columns: 1fr; max-width: 30rem; margin-inline: auto; }

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

@media (max-width: 620px) {
  /* Op smalle schermen: capsule links, titel en tekst rechts onder elkaar.
     Scheelt veel scrollen en leest natuurlijker dan alles gecentreerd. */
  .pillars { grid-template-columns: 1fr; gap: 2.2rem; }
  .pillars li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: .5rem 1.3rem;
    text-align: left;
  }
  .pillar-mark {
    grid-row: 1 / span 2;
    align-self: center;
    width: 44px;
    margin-bottom: 0;
  }
  .pillars h3 { margin-bottom: 0; align-self: end; }
  .pillars p { max-width: none; }

  .layers { gap: .9rem 1.7rem; }
  .layers li + li::before { display: none; }

  .hero-actions { gap: 1.6rem; }
  /* Eén kolom onder elkaar leest gecentreerd rustiger dan links uitgelijnd:
     zonder kolomstructuur heeft een linkerlijn niets meer om zich op te
     richten. De blokken met een eigen breedte moeten dan wel zelf
     gecentreerd worden — text-align doet dat niet voor ze. */
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2.75rem;
  }
  .footer-brand img { margin-inline: auto; }
  .footer-brand p { margin-inline: auto; }

  .footer-bottom { justify-content: center; text-align: center; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  html.js .reveal { opacity: 1; transform: none; }
  .preloader { display: none !important; }

  /* De pseudo-elementen van een paginatransitie vallen buiten de
     universele selector hierboven, dus die zetten we apart uit. */
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ── De praktijk ───────────────────────────────────────────── */

/* Adres links, de ruimte zelf rechts en breder. De foto is hier het
   argument — iemand wil zien waar hij terechtkomt — en de tekst het
   bijschrift daarbij. */
.praktijk-kop {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}

/* Het adres is de reden dat iemand deze pagina opent: iemand wil weten of
   de afstand haalbaar is. Daarom in de displayletter en als gegeven op
   zichzelf, niet weggewerkt in een lopende zin. */
.adres {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 1.1rem;
}

/* Geen capsule: dit is een documentaire opname van de ruimte, geen beeld
   dat de merksfeer draagt. Zelfde haarlijn en radius als de kattenfoto. */
.praktijk-beeld img {
  width: 100%;
  height: auto;
  border-radius: 2px;
  border: 1px solid var(--hairline);
  filter: var(--photo-filter);
}

/* Kop links, tekst rechts. De kattenfoto hangt onder haar eigen kopje in
   diezelfde linkerkolom: zo loopt de tekst er echt naast, en houden beide
   onderdelen dezelfde tekstkolom en dezelfde koplijn. */
.praktisch-deel {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  /* Smaller dan de container: over de volle breedte werd de tekstregel zo
     lang dat hij niet meer prettig leest, en liep de beeldkolom ver door
     onder de tekst. Zo eindigen de twee kolommen ongeveer gelijk. */
  max-width: 60rem;
  margin-inline: auto;
}
.praktisch-deel + .praktisch-deel {
  margin-top: clamp(2.8rem, 6vw, 4rem);
  border-top: 1px solid var(--hairline-gold);
  padding-top: clamp(2.2rem, 5vw, 3rem);
}
.praktisch-deel h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 1.85rem);
  color: var(--ink);
}
.praktisch-tekst p { color: var(--taupe); }
.praktisch-tekst p + p { margin-top: 1.1rem; }
/* Moet na de regel hierboven: die is even specifiek en zou anders de
   goudkleur van de slotregel overschrijven. */
.praktisch-tekst .over-noot { color: var(--gold-text); }

/* In de kolom vult de foto de breedte; de gecentreerde variant van .katten
   hoort bij het gebruik in een smalle, gecentreerde sectie. */
.praktisch-kop .katten { margin: 1.5rem 0 0; max-width: none; }

/* Onder deze breedte wordt de tekstkolom te smal om er nog een beeld naast
   te zetten. Alles onder elkaar: kop, foto, tekst. */
@media (max-width: 860px) {
  .praktijk-kop,
  .praktisch-deel { grid-template-columns: 1fr; gap: clamp(1.8rem, 5vw, 2.6rem); }
  .praktisch-kop .katten { max-width: 26rem; }
}