/* ==========================================================================
   QualiMundi — Design System
   "De wereld, op jouw manier."
   Premium editorial. Rust, ruimte, inhoud. Geen opzichtige luxe.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* --- Merkkleuren, zoals ze in het logo staan ---------------------------
     Let op: deze drie zijn te licht voor kleine tekst op papier
     (oranje 2.18:1, blauw 3.25:1, lichtblauw 1.68:1). Gebruik ze groot en
     decoratief op licht, of op volle sterkte op de donkere secties — daar
     halen ze respectievelijk 7.1:1 en 9.2:1. Voor tekst op licht bestaan
     hieronder verdiepte varianten. */
  --merk-oranje:      #E89B4C;
  --merk-blauw:       #5B8FC7;
  --merk-blauw-licht: #A5C8E4;

  /* --- Werkpalet, alle waarden doorgerekend op contrast ----------------- */
  --ink:        #1A1814;   /* warm bijna-zwart, hoofdtekst */
  --ink-2:      #4E483F;   /* secundaire tekst */
  --ink-3:      #736B60;   /* tertiair / labels — 5.03:1 op paper, 4.66:1 op paper-2 */
  --paper:      #FCFAF6;   /* warm gebroken wit; verzoent het oranje met het blauw */
  --paper-2:    #F5F1E9;   /* zachte sectie-achtergrond */
  --paper-3:    #EBE5DA;   /* randen, vlakken */
  --deep:       #152231;   /* diep marineblauw; sluit aan op het logoblauw */
  --deep-2:     #1E2E40;
  --accent:     #9E5F28;   /* verdiepte logo-oranje — 4.89:1 op paper, 4.52:1 op paper-2 */
  --accent-2:   #E89B4C;   /* de échte logo-oranje, voor op de donkere secties (7.07:1) */
  --blauw-diep: #3D6E9E;   /* verdiepte logo-blauw, voor accenten op licht */
  --line:       rgba(21, 34, 49, .11);   /* haarlijn, bewust fijn */
  --line-soft:  rgba(21, 34, 49, .06);
  --line-dark:  rgba(252, 250, 246, .15);

  /* Typografie */
  --serif: "Cormorant Garamond", "Iowan Old Style", Garamond, Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Schaal — fluid */
  --t-hero:   clamp(3rem, 8.2vw, 7.5rem);
  --t-d1:     clamp(2.5rem, 5.6vw, 4.75rem);
  --t-d2:     clamp(2rem, 3.9vw, 3.25rem);
  --t-d3:     clamp(1.6rem, 2.6vw, 2.25rem);
  --t-lead:   clamp(1.125rem, 1.5vw, 1.4rem);
  --t-body:   clamp(1rem, 1.05vw, 1.0625rem);
  --t-small:  .875rem;
  --t-micro:  .72rem;

  /* Ritme — ruimte is hier een ontwerpmiddel, geen restpost */
  --sp-section: clamp(6rem, 13vw, 13.5rem);
  --sp-block:   clamp(2.5rem, 5vw, 4.5rem);
  --gutter:     clamp(1.5rem, 5vw, 5.5rem);
  --maxw:       1560px;
  --measure:    60ch;

  /* Beweging */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* --- 2. Reset ------------------------------------------------------------ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Ruimte voor de vaste header plus de ankerbalk op landpagina's. */
  scroll-padding-top: calc(var(--header-h, 4.5rem) + 4.5rem);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.72;
  font-weight: 360;
  letter-spacing: -.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Rustige aankomst: de pagina komt op, ze klapt niet binnen. */
html.js body { animation: pageIn .85s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }

img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -.018em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--accent); color: var(--paper); }

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

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 1rem 1.5rem;
}
.skip:focus { left: 0; }

/* --- 3. Layout ----------------------------------------------------------- */

.wrap  { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 1120px; }
.wrap--text   { max-width: 820px; }

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--flush-top { padding-top: 0; }

.section--paper2 { background: var(--paper-2); }
.section--deep { background: var(--deep); color: var(--paper); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--paper); }
.section--deep .eyebrow { color: var(--accent-2); }
.section--deep .lead,
.section--deep .prose { color: rgba(251, 249, 245, .76); }
.section--deep .pull { color: var(--paper); border-left-color: var(--accent-2); }
.section--deep .statement em { color: var(--accent-2); }

.grid { display: grid; gap: clamp(1.5rem, 3.2vw, 3rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--editorial { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.grid--split { grid-template-columns: repeat(2, 1fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }

@media (max-width: 900px) {
  .grid--2, .grid--3, .grid--editorial, .grid--split { grid-template-columns: 1fr; }
}

/* --- 4. Typografische bouwstenen ----------------------------------------- */

.eyebrow {
  font-family: var(--sans);
  font-size: .69rem;
  font-weight: 450;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 1.9rem;
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.eyebrow::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
  opacity: .45;
  flex: none;
}
.eyebrow--plain::before { display: none; }

.h-hero { font-size: var(--t-hero); line-height: .96; letter-spacing: -.03em; }
.h-1    { font-size: var(--t-d1); }
.h-2    { font-size: var(--t-d2); }
.h-3    { font-size: var(--t-d3); letter-spacing: -.012em; }

.lead {
  font-size: var(--t-lead);
  line-height: 1.64;
  color: var(--ink-2);
  font-weight: 350;
  max-width: 46ch;
  letter-spacing: -.009em;
}

.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p + p { margin-top: 1.15em; }
.prose strong { font-weight: 500; color: var(--ink); }
.section--deep .prose strong { color: var(--paper); }

/* Statement — de korte merkzinnen */
.statement {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.4vw, 3rem);
  line-height: 1.18;
  font-weight: 300;
  letter-spacing: -.02em;
  max-width: 24ch;
}
.statement em { font-style: italic; color: var(--accent); }

.pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2.15rem);
  line-height: 1.28;
  font-weight: 300;
  letter-spacing: -.015em;
  color: var(--ink);
  border-left: 1px solid var(--accent);
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
  max-width: 30ch;
}

.num {
  font-family: var(--serif);
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.rule--soft { background: var(--line-soft); }
.section--deep .rule { background: var(--line-dark); }

/* --- 5. Knoppen ---------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  padding: 1.1rem 2.25rem;
  font-family: var(--sans);
  font-size: .745rem;
  font-weight: 450;
  letter-spacing: .155em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
  transition: background .6s var(--ease), color .6s var(--ease),
              border-color .6s var(--ease), transform .6s var(--ease), opacity .3s;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); transform: translateY(-1px); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.btn--light { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.btn--light:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }

.btn--ghost-light { background: transparent; color: var(--paper); border-color: rgba(251,249,245,.4); }
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.btn--lg { padding: 1.32rem 2.9rem; font-size: .795rem; }
.btn[disabled] { opacity: .35; pointer-events: none; }

.btn .ar { transition: transform .45s var(--ease); }
.btn:hover .ar { transform: translateX(4px); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  font-size: .745rem;
  font-weight: 450;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--line);
  transition: border-color .5s var(--ease), color .5s var(--ease), gap .5s var(--ease);
}
.tlink:hover { border-color: var(--accent); color: var(--accent); gap: .95rem; }
.section--deep .tlink { border-color: var(--line-dark); color: var(--paper); }
.section--deep .tlink:hover { border-color: var(--accent-2); color: var(--accent-2); }

.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

/* --- 6. Fotografie: slots met duotone-onderlaag --------------------------- */
/*
   Elke .ph is een fotoslot. Zolang er geen echte foto in assets/img/ staat,
   toont het een rustige duotone-gradient met filmkorrel — nooit een lege
   grijze placeholder. Plaats een <img> in het slot en de foto neemt het over.
   Voeg ?slots toe aan de URL om de fotobriefing per slot te tonen.
*/

.ph {
  position: relative;
  overflow: hidden;
  margin: 0;
  background:
    radial-gradient(120% 95% at 18% 12%, var(--ph-c, #C6A98A) 0%, transparent 58%),
    radial-gradient(115% 110% at 88% 88%, var(--ph-a, #2B3A31) 0%, transparent 62%),
    linear-gradient(148deg, var(--ph-b, #6E5844) 0%, var(--ph-a, #2B3A31) 100%);
  isolation: isolate;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .3;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.ph img, .ph video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

.ph--4x5  { aspect-ratio: 4 / 5; }
.ph--3x4  { aspect-ratio: 3 / 4; }
.ph--1x1  { aspect-ratio: 1 / 1; }
.ph--3x2  { aspect-ratio: 3 / 2; }
.ph--16x9 { aspect-ratio: 16 / 9; }
.ph--21x9 { aspect-ratio: 21 / 9; }
.ph--tall { aspect-ratio: 2 / 3; }

/* Fotobriefing — alleen zichtbaar met ?slots in de URL */
body.show-slots .ph[data-brief]::before {
  content: attr(data-brief);
  position: absolute;
  z-index: 5;
  inset: auto .75rem .75rem .75rem;
  font-family: var(--sans);
  font-size: .68rem;
  line-height: 1.45;
  letter-spacing: .02em;
  color: #fff;
  background: rgba(12, 14, 12, .85);
  padding: .55rem .7rem;
  border-radius: 3px;
  text-transform: none;
  font-weight: 400;
}

.cap {
  font-size: var(--t-small);
  color: var(--ink-3);
  margin-top: .9rem;
  line-height: 1.5;
  letter-spacing: 0;
}
.section--deep .cap { color: rgba(251,249,245,.5); }

/* --- 7. Header ----------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  padding-block: 1.5rem;
  transition: transform .5s var(--ease), background .5s var(--ease),
              padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10,12,10,.55), transparent);
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.site-header.is-solid {
  background: rgba(251, 249, 245, .94);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 1px 0 var(--line-soft);
  padding-block: .9rem;
}
.site-header.is-solid::before { opacity: 0; }
.site-header.is-hidden { transform: translateY(-101%); }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

/* --- Logo ----------------------------------------------------------------
   Twee varianten liggen over elkaar: kleur voor lichte achtergronden, wit
   voor over foto's en op de donkere secties. De header wisselt ertussen. */

.logo {
  display: block;
  position: relative;
  line-height: 0;
}
/* Het logo komt als <picture> zodat de browser de WebP kan kiezen; die
   tussenlaag mag de opmaak niet in de weg zitten. */
.logo picture { display: block; line-height: 0; }
.logo img {
  display: block;
  height: var(--logo-h, 2.5rem);
  width: auto;
  transition: opacity .5s var(--ease);
}
.logo .logo__wit {
  position: absolute;
  inset: 0;
}

/* Standaard staat de header over een foto: witte variant. */
.logo__kleur { opacity: 0; }
.logo__wit   { opacity: 1; }

/* Zodra de header solide is, of op pagina's zonder fotohero: kleur. */
.site-header.is-solid .logo__kleur,
body.header-dark .site-header:not(.is-solid) .logo__kleur { opacity: 1; }
.site-header.is-solid .logo__wit,
body.header-dark .site-header:not(.is-solid) .logo__wit { opacity: 0; }

.site-header.is-solid .logo { --logo-h: 2.2rem; }
.logo--footer { --logo-h: 3rem; }
.logo--footer .logo__wit { position: static; }

@media (max-width: 600px) {
  .logo { --logo-h: 2.1rem; }
  .site-header.is-solid .logo { --logo-h: 1.95rem; }
}

/* Terugval zolang de logobestanden ontbreken. */
.logo--tekst {
  font-family: var(--serif);
  font-size: 1.55rem;
  letter-spacing: .01em;
  font-weight: 300;
  line-height: 1;
  color: var(--paper);
  transition: color .5s var(--ease);
  white-space: nowrap;
}
.logo--tekst b { font-weight: 500; }

.nav-links { display: flex; align-items: center; gap: clamp(1.25rem, 2.3vw, 2.3rem); }
.nav-links a {
  font-size: .8125rem;
  font-weight: 450;
  letter-spacing: .04em;
  color: rgba(251,249,245,.9);
  transition: color .4s var(--ease);
  position: relative;
  padding-block: .35rem;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .45s var(--ease);
}
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.nav-cta {
  padding: .78rem 1.5rem;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1px solid rgba(251,249,245,.45);
  color: var(--paper);
  border-radius: 999px;
  white-space: nowrap;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.nav-cta:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.nav-cta::after { display: none !important; }

.site-header.is-solid .logo--tekst,
.site-header.is-solid .nav-links a { color: var(--ink); }
.site-header.is-solid .nav-cta { border-color: var(--ink); color: var(--ink); }
.site-header.is-solid .nav-cta:hover { background: var(--ink); color: var(--paper); }
.site-header.is-solid .burger span { background: var(--ink); }

/* Donkere navigatie op pagina's zonder fotohero */
body.header-dark .site-header:not(.is-solid) .logo--tekst,
body.header-dark .site-header:not(.is-solid) .nav-links a { color: var(--ink); }
body.header-dark .site-header:not(.is-solid) .nav-cta { border-color: var(--ink); color: var(--ink); }
body.header-dark .site-header:not(.is-solid) .nav-cta:hover { background: var(--ink); color: var(--paper); }
body.header-dark .site-header:not(.is-solid)::before { opacity: 0; }
body.header-dark .site-header:not(.is-solid) .burger span { background: var(--ink); }

.burger {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: 0;
  /* Het streepjespictogram is 24 bij 14 pixels; de knop eromheen moet
     met een duim te raken zijn, niet alleen met een muisaanwijzer. */
  min-width: 44px;
  min-height: 44px;
  padding: .6rem;
  cursor: pointer;
  margin-right: -.6rem;
}
.burger span {
  display: block;
  width: 24px;
  height: 1.5px;
  background: var(--paper);
  transition: transform .45s var(--ease), opacity .3s var(--ease), background .5s var(--ease);
}
body.menu-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
body.menu-open .burger span { background: var(--paper) !important; }

@media (max-width: 1080px) {
  .nav-links { display: none; }
  .burger { display: flex; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--deep);
  color: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s var(--ease), visibility .55s;
  overflow-y: auto;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.menu nav { display: flex; flex-direction: column; gap: .3rem; }
/* Ruimte binnen de link in plaats van ertussen: het raakvlak groeit,
   de tussenafstand blijft zoals ze getekend is. */
.menu nav a {
  display: block;
  padding-block: .3rem;
  font-family: var(--serif);
  font-size: clamp(1.85rem, 7vw, 2.85rem);
  font-weight: 300;
  line-height: 1.24;
  color: var(--paper);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease), color .3s;
}
body.menu-open .menu nav a { opacity: 1; transform: none; }
body.menu-open .menu nav a:nth-child(1) { transition-delay: .10s; }
body.menu-open .menu nav a:nth-child(2) { transition-delay: .15s; }
body.menu-open .menu nav a:nth-child(3) { transition-delay: .20s; }
body.menu-open .menu nav a:nth-child(4) { transition-delay: .25s; }
body.menu-open .menu nav a:nth-child(5) { transition-delay: .30s; }
body.menu-open .menu nav a:nth-child(6) { transition-delay: .35s; }
.menu nav a:hover { color: var(--accent-2); }
.menu .menu-foot { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line-dark); }
.menu .menu-foot p { color: rgba(251,249,245,.6); font-size: var(--t-small); }

/* --- 8. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;  /* terugval voor browsers zonder svh */
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  color: var(--paper);
  overflow: hidden;
}
.hero > .ph { position: absolute; inset: 0; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(to top, rgba(10,14,11,.85) 0%, rgba(10,14,11,.22) 48%, rgba(10,14,11,.4) 100%);
  pointer-events: none;
}
.hero__inner {
  position: relative;
  z-index: 5;
  width: 100%;
  padding-bottom: clamp(4rem, 9vh, 7rem);
  padding-top: 10rem;
}
.hero h1 { color: var(--paper); max-width: 16ch; }
.hero .lead { color: rgba(251,249,245,.87); max-width: 54ch; margin-top: 1.75rem; }
.hero .btn-row { margin-top: clamp(2rem, 4vw, 3rem); }
.hero .eyebrow { color: rgba(251,249,245,.72); }

.hero--short { min-height: 76vh; min-height: 76svh; }
.hero--mid   { min-height: 88vh; min-height: 88svh; }

.scroll-hint {
  position: absolute;
  z-index: 5;
  bottom: 2.25rem;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: .8rem;
  font-size: var(--t-micro);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(251,249,245,.7);
}
.scroll-hint i {
  display: block;
  width: 1px;
  height: 44px;
  background: linear-gradient(to bottom, rgba(251,249,245,.75), transparent);
  animation: drop 2.6s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drop { 0%,100% { transform: scaleY(1); opacity:.75 } 50% { transform: scaleY(.4); opacity:.25 } }
@media (max-width: 760px) { .scroll-hint { display: none; } }

/* --- 8b. Kleine hulpklassen ----------------------------------------------
   Vervangen de inline styles die eerder in de opmaak stonden. Scheelt ruis
   in de PHP-bestanden en houdt de opmaak op één plek. */

.mt-s  { margin-top: .8rem; }
.mt-1  { margin-top: 1.25rem; }
.mt-2  { margin-top: 1.5rem; }
.mt-3  { margin-top: 1.75rem; }
.mt-4  { margin-top: 2rem; }
.mt-5  { margin-top: 2.25rem; }
.mt-6  { margin-top: 2.5rem; }
.mt-7  { margin-top: 3rem; }
.mt-8  { margin-top: clamp(2rem, 4vw, 3.5rem); }
.mt-9  { margin-top: clamp(3rem, 6vw, 5rem); }
.mt-10 { margin-top: clamp(3.5rem, 7vw, 6rem); }

.mb-1 { margin-bottom: clamp(2rem, 4vw, 3rem); }
.mb-2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.mb-3 { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.mb-4 { margin-bottom: 2.5rem; }

.pt-1 { padding-top: .5rem; }

.prose--vol   { max-width: none; }
.tekst-links  { text-align: left; }
.inline-flex  { display: inline-flex; }
.nadruk-wit   { color: #fff; font-weight: 400; }

/* Eyebrow op een donkere achtergrond of over een foto. */
.op-donker { color: rgba(252, 250, 246, .72); }

/* Referentiecode op de bedankpagina. */
.ref-code {
  margin-top: 2rem;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(252, 250, 246, .5);
}

/* Alleen voor schermlezers — ook gebruikt voor het honeypotveld. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 9. Reveal ----------------------------------------------------------- */

/* De verborgen begintoestand geldt alleen wanneer JavaScript actief is.
   Zonder JavaScript staat alle inhoud gewoon zichtbaar op de pagina. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 1.05s var(--ease-out), transform 1.05s var(--ease-out);
}
html.js [data-reveal].in { opacity: 1; transform: none; }
[data-reveal][data-d="1"] { transition-delay: .09s; }
[data-reveal][data-d="2"] { transition-delay: .18s; }
[data-reveal][data-d="3"] { transition-delay: .27s; }
[data-reveal][data-d="4"] { transition-delay: .36s; }
[data-reveal][data-d="5"] { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* --- 10. Aanraakvlakken --------------------------------------------------- */

/*
 * Een link van achttien pixels hoog wijs je met een muis feilloos aan en
 * met een duim niet. WCAG vraagt minstens 24 bij 24 pixels; waar het zonder
 * de opmaak te verstoren kan, gaan we naar 44 — de maat waarop mensen niet
 * meer misgrijpen.
 *
 * De ruimte komt binnen de link te liggen in plaats van ertussen. Het
 * raakvlak groeit dus, de tussenafstand niet: de voettekst ziet er op een
 * groot scherm precies hetzelfde uit als voordien.
 */
@media (max-width: 700px), (pointer: coarse) {

  .footer-col ul { gap: 0; }
  .footer-col li {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col li a {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
  }

  .footer-bottom { gap: .25rem 1rem; }
  .footer-bottom a,
  .footer-juridisch a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .logo-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * Bij de tekstlink is de onderlijn de vorm zelf; die mag niet omlaag
   * schuiven. Daarom groeit hier alleen het raakvlak, met een laagje dat
   * je niet ziet maar wel raakt.
   */
  .tlink { position: relative; }
  .tlink::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* --- 11. Leesbaarheid op kleine schermen ---------------------------------- */

/*
 * De kleine kapitalen zijn een bewuste keuze: bovenschriften, regiolabels en
 * stapnummers horen ondergeschikt te zijn aan de kop waar ze bij staan. Op
 * een desktopscherm, op leesafstand, werkt dat. Op een telefoon zakte
 * hetzelfde label naar elf pixels, en met een spatiëring van .28em valt het
 * dan uit elkaar in losse letters.
 *
 * Daarom hier een ondergrens van twaalf pixels, en iets minder spatiëring —
 * die twee samen houden het label leesbaar zonder dat het zich opdringt.
 * Boven de 700 pixels verandert er niets aan het ontwerp.
 */
@media (max-width: 700px) {
  :root { --t-micro: .75rem; }

  .eyebrow {
    font-size: .75rem;
    letter-spacing: .22em;
    gap: .8rem;
  }


  .tlink {
    font-size: .78rem;
    letter-spacing: .13em;
  }

  .btn { font-size: .75rem; }

}