/* ================================
   FONTS — lokale @font-face definities
   ================================ */

@font-face{
  font-family: "Alumni Sans Hero VF";
  src:
    url("../assets/fonts/alumni-sans/AlumniSans-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}


/* Alumni Sans (headings)
   Bewust géén local(): als een bezoeker toevallig een gelijknamig font
   geïnstalleerd heeft, wint dat van het bestand hierboven en kan de weergave
   afwijken van het ontwerp. Zelf hosten betekent ook zelf de bron bepalen. */
@font-face {
  font-family: "Alumni Sans";
  src: url("../assets/fonts/alumni-sans/AlumniSans-ExtraLightItalic.woff2") format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Alumni Sans";
  src: url("../assets/fonts/alumni-sans/AlumniSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Alumni Sans";
  src: url("../assets/fonts/alumni-sans/AlumniSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

/* Red Hat Display (body)
   r7-20260803: format("woff2-variations") verwijderd — dat is een verouderde,
   nooit gestandaardiseerde notatie en de URL stond er twee keer. Moderne
   browsers herkennen de gewichtsassen gewoon via format("woff2"). De ttf blijft
   als laatste redmiddel voor browsers zonder woff2-ondersteuning. */
@font-face {
  font-family: "Red Hat Display";
  src:
    url("../assets/fonts/red-hat-display/RedHatDisplay-VariableFont_wght.woff2") format("woff2"),
    url("../assets/fonts/red-hat-display/RedHatDisplay-VariableFont_wght.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: "Red Hat Display";
  src: url("../assets/fonts/red-hat-display/RedHatDisplay-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+000-5FF;
}

/* ================================
   DESIGN SYSTEM — type & colors
   ================================ */

:root {
  /* Fonts */
  --font-heading: "Alumni Sans", system-ui, sans-serif;
  --font-body:    "Red Hat Display", system-ui, sans-serif;

  /* Weights */
  --fw-regular: 300;
  --fw-bold: 700;

  /* Base text */
  --fs-root: 16px;
  --lh-normal: 1.25;
  --lh-tight: 0.92;

  /* Viewport fix */
  --vh: 1vh;

  /* Core palette (keep production backgrounds intentionally small) */
  --clr-bg: 0 0% 96%;
  --clr-text: 0 0% 7%;
  --clr-accent: 37 100% 60%;


  --clr-microcopy: var(--clr-text);

  --footer-brandmark-color: hsl(var(--clr-text) / 0.12);

  /* Layout rhythm */
  --space-xs: 0.25rem;
  --space-sm: clamp(1rem, 2vw, 1.5rem);
  --space-md: clamp(2rem, 5vw, 4rem);
  --space-lg: clamp(4rem, 10vw, 8rem);
  --space-xl: clamp(6rem, 16vh, 12rem);

  --page-pad-inline: clamp(20px, 6vw, 96px);
  --section-pad-y: var(--space-lg);
  --section-pad-y-lg: var(--space-xl);
  --layout-gap: var(--space-md);
  --content-gap: var(--space-sm);

  /* Underline system */
  --u-line-thickness: 1px;
  --u-line-offset: -0.02em;
  --u-ease: cubic-bezier(0.4, 0.0, 0.2, 1);


  /* ===============================
     Type tokens (central scale)
     =============================== */
  --type-micro: clamp(0.82rem, 0.76rem + 0.25vw, 0.95rem);
  --type-body: clamp(0.92rem, 0.88rem + 0.16vw, 1.02rem);
  --type-heading: clamp(2.4rem, 4vw + 1rem, 5rem);
  --type-display: clamp(4.75rem, 11vw, 10rem);
  --type-hero: clamp(3rem, 12vw, 14rem);
  --type-cta: var(--type-display);
  --type-menu: clamp(2.25rem, 8vw, 7.5rem);
  --type-brandmark: clamp(14rem, 32vw, 40rem);


  --ls-ui: 0.08em;
  --ls-support: 0.04em;
  --ls-microcopy: var(--ls-support);
  --ls-display: 0;
  --ls-h1: 0;

  --lh-ui: var(--lh-normal);
  --lh-h1: 0.82;
  --lh-h2: 0.82;
  --lh-h3: 0.88;
  --lh-display: 0.82;

  --focus-outline: 1px solid currentColor;
  --focus-offset: 4px;

  --nav-offset: 100px;
}
/* Gebruik dynamic viewport units alleen op touch/mobile.
   Op Chrome desktop kan een globale 1dvh op root/body/main dubbele scroll-contexten triggeren. */
@media (hover: none) and (pointer: coarse) {
  @supports (height: 100dvh){
    :root{ --vh: 1dvh; }
  }
}


/* ===============================
   BASIS — reset & document
   =============================== */

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

html, body { 
  margin: 0; 
  padding: 0; 
}

html { 
  font-size: var(--fs-root); 
  overflow-y: auto;
  scrollbar-gutter: stable;
  height: auto;
}

/* ===============================
   BOOT — no-js safety
   Als JS uit staat, moet de hero gewoon zichtbaar zijn
   =============================== */
html.no-js .hero-heading__line--top,
html.no-js .hero-heading__line--bottom{
  transform: none;
}

html.no-js .h1-highlight{
  transform: translateY(var(--so-y)) skewX(var(--so-skew));
}


body {
  min-height: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: hsl(var(--clr-text));
  background: hsl(var(--clr-bg));
  overscroll-behavior-y: auto;
}

/* Site-brede <strong> dikte — explicit op --fw-bold zodat
   vetgedrukte woorden overal exact dezelfde weight hebben
   als knoppen (.link--sm, .link--lg). */
strong{
  font-weight: var(--fw-bold);
}

body.bedrijfsevents-page{
  overflow-x: hidden;
  overflow-x: clip;
}

.bedrijfsevents-page .event-details{
  min-height: auto;
}

.bedrijfsevents-page .seo-readable{
  display: grid;
  gap: var(--section-pad-y);
  padding-block: var(--section-pad-y-lg);
}

/* Main wrapper: background is animated by GSAP (Engage) */
#main{
  min-height: 0;
  background: hsl(var(--clr-bg));
}

/* Anchor jumps: keep targets visible below header */
html{ scroll-padding-top: var(--nav-offset); }

/* Media defaults (prevents inline gaps + avoids overflow) */
img, picture, video, canvas, svg{
  display: block;
  max-width: 100%;
}

/* Form controls inherit typography */
button, input, select, textarea{
  font: inherit;
  color: inherit;
}

/* Prevent page scroll when fullscreen menu is open */
body.menu-open{
  overflow: hidden;
  touch-action: none;
  width: 100%;
  overscroll-behavior: none;
}

@supports selector(body:has(.menu-disclosure[open])){
  html.no-js:has(.menu-disclosure[open]){
    overflow: hidden;
    overscroll-behavior: none;
  }
}

/* ===============================
   TYPOGRAPHY (tokens-first)
   =============================== */

/* Shared microcopy: labels, compact links, nav text, footer links, locale time */
.supporting-copy,
.ui-text,
.link--sm,
.menu-col .num,
.lang-switch__link,
#footer .lt-city,
#footer .lt-time,
#footer .ft-sitemap a,
#footer .ft-socials a{
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-microcopy);
  color: hsl(var(--clr-microcopy));
}

/* Small uppercase UI text (nav, labels, microcopy) */
.ui-text{
  font-weight: var(--fw-regular);
}

/* Headings */
h1,
h2,
h3{
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: currentColor;
  margin: 0;
}


h1{
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  font-size: var(--type-hero);
}


.h1-highlight{
  font-family: "Alumni Sans Hero VF", var(--font-heading);
  font-synthesis: none;

  /* final (rest) look */
  font-weight: 350;
  font-style: normal;

  display: inline-block;
  white-space: nowrap;

  --so-y: 0.5px;        /* 👈 baseline micro-offset (single source of truth) */
  --so-skew: -2.5deg;   /* 👈 eind-skew */

  transform: translateY(var(--so-y)) skewX(var(--so-skew));
  transform-origin: left bottom;

  padding-right: 0;

  transition:
  transform 1.05s cubic-bezier(.22,1,.36,1),
  opacity 0.8s ease;
}


h2{
  line-height: var(--lh-h2);
  font-size: var(--type-display);
}

h3{
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h3);
  font-size: var(--type-heading);
  max-width: 40ch;
}

p{
  font-size: var(--type-body);
  line-height: var(--lh-normal);
}

/* Supporting copy (site-wide) */
.supporting-copy{
  font-weight: var(--fw-regular);
}
.supporting-copy--center{ text-align: center; }

.supporting-copy :where(strong, b),
:where(strong, b).supporting-copy{
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

/* Question headings: supporting-copy rhythm, bold for FAQ-style prompts */
.question-heading{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: currentColor;
}

/* Big display-like block (used as text sometimes) */
.display-heading{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-display);
  font-size: var(--type-display);
  max-width: none;
}

/* ===============================
   LINKS / BUTTONS — 4 types
   No color changes. No movement. Only underline animates.
   =============================== */

/* Global anchors: inherit color, no default underline */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Type 1 + 2: underline OUT (line visible -> slides away) */
.underline-anim {
  position: relative;
  display: inline-block;
  color: currentColor;
  text-decoration: none;

  width: fit-content;
  max-width: max-content;

}

.underline-anim::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: var(--u-line-offset);
  width: 100%;
  background: currentColor;


  height: var(--u-line-thickness);

  transform-origin: right;
  transform: translateZ(0) scaleX(1);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.45s var(--u-ease);
}

.underline-anim:hover::after,
.underline-anim:focus-visible::after{
  transform: translateZ(0) scaleX(0);
}


.underline-anim:focus-visible{
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

.link--sm{
  font-weight: var(--fw-bold);
}


/* Type 2: large (Explore the options / mail) */
.link--lg{
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-size: var(--type-display);
}
.link--lg.underline-anim::after{
  height: 0.06em;
  bottom: var(--u-line-offset);
}

/* Per-regel underline voor link--lg CTA's
   ────────────────────────────────────────
   Pure CSS kan op multi-line tekst geen betrouwbare left-to-right reveal
   doen — background-image met box-decoration-break: clone heeft afwijkende
   positioning per browser. Daarom: één <span class="cta-line"> per
   logische regel in de HTML, elke span een eigen ::after met scaleX
   animatie (zelfde patroon als de menu-items).

   Default (desktop): spans gedragen zich inline, tekst loopt natuurlijk
   door op één regel; de ::after op de anchor rendert één onderlijn.

   Mobile (≤600px): anchor-::after uit, spans worden block-level zodat
   elke regel een eigen onderlijn krijgt met scaleX van 0 → 1 op hover. */

/* Default: cta-line gedraagt zich als inline content (geen visuele impact) */
.cta-line{
  position: relative;
}

@media (max-width: 600px){
  .link--lg.underline-anim{
    display: block;
    width: fit-content;
    max-width: 100%;
    line-height: 1.25;
  }
  /* Anchor-::after uit op mobile — onderlijn komt per span */
  .link--lg.underline-anim::after{
    display: none;
  }
  .link--lg.underline-anim .cta-line{
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-bottom: 0.55em;
  }
  .link--lg.underline-anim .cta-line:last-child{
    margin-bottom: 0;
  }
  /* Per regel: scaleX 0 → 1, links-naar-rechts, zoals .nav-link::after */
  .link--lg.underline-anim .cta-line::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.18em;
    width: 100%;
    height: 0.06em;
    background: currentColor;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.45s var(--u-ease);
    pointer-events: none;
  }
  .link--lg.underline-anim:hover .cta-line::after,
  .link--lg.underline-anim:focus-visible .cta-line::after{
    transform: scaleX(1);
  }
}


/* underline IN utility: start zonder lijn, lijn komt op hover */
.underline-in{
  position: relative;
  color: currentColor;
  text-decoration: none;
}


.underline-in::after{
  content:"";
  position:absolute;
  left:0;
  bottom: var(--u-line-offset);
  width:100%;
  height: 1px;
  background: currentColor;
  transform-origin: left;
  transform: translateZ(0) scaleX(0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.45s var(--u-ease);
}

.underline-in:hover::after,
.underline-in:focus-visible::after{
  transform: translateZ(0) scaleX(1);
}


/* Type 3: nav items underline IN (start no line -> line appears) */
.brand,
.nav-link,
.nav-action,
.menu-close,
.lang-switch__link{
  position: relative;
  color: currentColor;
  text-decoration: none;
  transform: none;
  transition: none;
}

.brand::after,
.nav-link::after,
.nav-action::after,
.menu-close::after,
.lang-switch__link::after{
  content:"";
  position:absolute;
  left:0;
  bottom: var(--u-line-offset);
  width:100%;
  height: var(--u-line-thickness);
  background: currentColor;

  transform-origin:left;
  transform: scaleX(0);
  transition: transform 0.45s var(--u-ease);
  pointer-events:none;
}

.brand:hover::after,
.brand:focus-visible::after,
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-action:hover::after,
.nav-action:focus-visible::after,
.menu-close:hover::after,
.menu-close:focus-visible::after,
.lang-switch__link:hover::after,
.lang-switch__link:focus-visible::after{
  transform: scaleX(1);
}

/* nav focus */
.brand:focus-visible,
.nav-link:focus-visible,
.nav-action:focus-visible,
.menu-close:focus-visible,
.lang-switch__link:focus-visible{
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}


  /* Fullscreen menu underline moet exact de tekstbreedte volgen */
.menu-col a{
  display: inline-block;     /* i.p.v. block */
  width: fit-content;        /* extra zekerheid */

  position: relative;
  color: currentColor;
  text-decoration: none;
  transform: none;
  transition: none;
}

.menu-col a::after{
  content:"";
  position:absolute;
  left:0;
  bottom: var(--u-line-offset);
  width:100%;
  height: 0.06em;
  background: currentColor;

  transform-origin:left;
  transform: scaleX(0);
  transition: transform 0.45s var(--u-ease);
  pointer-events:none;
}

.menu-col a:hover::after,
.menu-col a:focus-visible::after{
  transform: scaleX(1);
}

.menu-col a:focus-visible{
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-offset) + 2px);
}

/* reduced motion for underline transitions only */
@media (prefers-reduced-motion: reduce){
  .underline-anim::after,
  .brand::after, .nav-link::after, .nav-action::after, .menu-close::after,
  .menu-col a::after{
    transition: none;
  }
}

/* ===============================
   ACCESSIBILITY UTILITIES
   =============================== */

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link:focus {
  position: fixed;
  left: 20px;
  top: 20px;
  width: auto;
  height: auto;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  border: 1px solid hsl(var(--clr-accent));
  border-radius: 0.5rem;
  z-index: 100;
}

/* ===============================
   HEADER & NAV
   =============================== */

.site-header {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 50;
  background: transparent;
  pointer-events: auto;
}

.site-nav,
.menu-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: min(5vh, 40px);
  padding-inline: var(--page-pad-inline);
  background: transparent;
  color: currentColor;
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.menu-disclosure{
  display: inline-block;
}

.menu-trigger{
  list-style: none;
}

.menu-trigger::-webkit-details-marker{
  display: none;
}

.menu-trigger::marker{
  content: "";
}

.menu-trigger__label--close{
  display: none;
}

/* Brand / woordmerk: typography via .ui-text */

/* Nav links: typography via .ui-text */

/* Nav buttons: Menu + Close */
.nav-action,
.menu-close{
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  vertical-align: middle;
}

/* no text selection */
.nav-action,
.menu-close,
.nav-action *,
.menu-close * {
  user-select: none;
}

/* Contact verbergen op mobiel in de topnav */
@media (max-width: 768px) {
  .nav-hide-mobile { display: none; }
}

/* ===============================
   NAV ICONS (SVG via mask, kleur = currentColor)
   assets/icons/icon-menu.svg
   assets/icons/icon-close.svg
   =============================== */

.nav-icon{
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  display: inline-block;
  background-color: currentColor;

  /* mask = icon-shape; background-color bepaalt de kleur */
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
          mask-repeat: no-repeat;
          mask-position: center;
          mask-size: contain;
}

.nav-icon--menu{
  -webkit-mask-image: url("../assets/icons/icon-menu.svg");
          mask-image: url("../assets/icons/icon-menu.svg");
}

.nav-icon--close{
  -webkit-mask-image: url("../assets/icons/icon-close.svg");
          mask-image: url("../assets/icons/icon-close.svg");
}

/* Swap icons in header button via aria-expanded */
.menu-trigger .nav-icon--close{ display: none; }

.menu-trigger[aria-expanded="true"] .nav-icon--menu{ display: none; }
.menu-trigger[aria-expanded="true"] .nav-icon--close{ display: inline-block; }

.menu-disclosure[open] > .menu-trigger{
  position: fixed;
  top: var(--space-sm);
  right: var(--page-pad-inline);
  z-index: 1002;
  color: hsl(var(--clr-text));
}

.menu-disclosure[open] > .menu-trigger .menu-trigger__label--open{
  display: none;
}

.menu-disclosure[open] > .menu-trigger .menu-trigger__label--close{
  display: inline;
}

.menu-disclosure[open] > .menu-trigger .nav-icon--menu{
  display: none;
}

.menu-disclosure[open] > .menu-trigger .nav-icon--close{
  display: inline-block;
}


/* ===============================
   FULLSCREEN MENU OVERLAY
   =============================== */

.menu-overlay {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  z-index: 1000;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  overscroll-behavior: contain;
  visibility: hidden;

  transform: translateY(-100%);
  pointer-events: none;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.45s;
}

.menu-overlay.is-open,
.menu-disclosure[open] > .menu-overlay {
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
  transition-delay: 0s;
}

html.js .menu-overlay{
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.36s ease,
    visibility 0s linear 0.58s;
}

html.js .menu-overlay.is-open,
html.js .menu-disclosure[open] > .menu-overlay{
  opacity: 1;
  transition-delay: 0s;
}

html.js .menu-topbar > *,
html.js .menu-col li{
  opacity: 0;
  transform: translate3d(0, 0.75rem, 0);
  transition:
    opacity 0.42s ease,
    transform 0.58s cubic-bezier(0.22, 1, 0.36, 1);
}

html.js .menu-overlay.is-open .menu-topbar > *,
html.js .menu-disclosure[open] > .menu-overlay .menu-topbar > *,
html.js .menu-overlay.is-open .menu-col li,
html.js .menu-disclosure[open] > .menu-overlay .menu-col li{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

html.js .menu-disclosure[open] > .menu-overlay .menu-col li:nth-child(1){ transition-delay: 80ms; }
html.js .menu-disclosure[open] > .menu-overlay .menu-col li:nth-child(2){ transition-delay: 125ms; }
html.js .menu-disclosure[open] > .menu-overlay .menu-col li:nth-child(3){ transition-delay: 170ms; }
html.js .menu-disclosure[open] > .menu-overlay .menu-col li:nth-child(4){ transition-delay: 215ms; }

.menu-content {
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-inline: var(--page-pad-inline);
  padding-top: clamp(40px, 8vh, 60px);
  padding-bottom: clamp(48px, 10vh, 72px);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: flex-start;
}

.menu-col {
  list-style: none;
  display: grid;
  gap: clamp(14px, 2vh, 22px);
  padding: 0;
  margin: 0;
}

.menu-col li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(12px, 2vw, 24px);
}

.menu-col .num{
  align-self: center;
  color: currentColor;
}

/* Fullscreen menu links: big, no movement. Underline handled above (Type 4) */
.menu-col a {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: var(--lh-tight);
  font-size: var(--type-menu);
}

/* Language switch (EN | NL) — fixed inside fullscreen menu */
.lang-switch{
  position: fixed;
  right: var(--page-pad-inline);
  bottom: clamp(18px, 4vh, 32px);

  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
}

.lang-switch__link{
  display: inline-block;
  cursor: pointer;
}

/* dit is het “sluisteken” als lijntje */
.lang-switch__sep{
  width: var(--u-line-thickness);
  height: 1.05em;
  background: currentColor;
  opacity: 0.6;
  user-select: none;
  pointer-events: none;
  transform: translateY(0.02em);
}

/* Active language: underline always on */
.lang-switch__link.is-active::after,
.lang-switch__link[aria-current="page"]::after{
  transform: scaleX(1);
}


/* Menu responsive */
@media (max-width: 900px) {
  .menu-content {
    grid-template-columns: 1fr;
    gap: 40px;
  }
}

/* ===============================
   HERO
   =============================== */

#hero {
  position: relative;
  min-height: calc(var(--vh) * 100);
  padding-top: clamp(6rem, 18vh, 12rem);
  padding-bottom: clamp(1rem, 2.5vh, 2rem);
  overflow: hidden; /* contain absolute-positioned .hero-bg */
  background-color: #1a1a1a; /* dekkleur tot AVIF/JPG paint */

  /* Tekst naar onderaan zodat het hoofdsubject in het beeldcentrum vrij blijft.
     Header (.site-header), .hero-bg en .scroll-indicator zijn position: absolute
     en blijven dus buiten de flex-flow.                                          */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* LCP image — vervangt vorige CSS background-image, zodat alt/fetchpriority/<picture> mogelijk zijn */
#hero .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

#hero .hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay — vignette + onderste donkere gradient voor leesbaarheid van tekst.
   Eerste gradient ligt bovenop de tweede (CSS shorthand stacking-volgorde).      */
#hero:has(.hero-bg)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Donkere overlay — extra contrast over de hele hero, hoeken zwaar donker. */
  background:
    radial-gradient(
      ellipse 120% 100% at center,
      rgba(0, 0, 0, 0.32)   0%,
      rgba(0, 0, 0, 0.46)  52%,
      rgba(0, 0, 0, 0.92) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.30)   0%,
      rgba(0, 0, 0, 0.22)  45%,
      rgba(0, 0, 0, 0.45) 100%
    );
}

/* Hero-content boven beeld + overlay. Scroll-indicator behoudt zijn eigen
   absolute-positionering rechts (z-index: 20 daar zit al boven de overlay).      */
#hero .hero-title {
  position: relative;
  z-index: 2;
}

/* Op hero met achtergrondfoto: wordart compacter zodat het onderaan past
   zonder het centrale onderwerp (gezicht) te overlappen. Globale --type-hero
   (clamp(3rem, 12vw, 14rem)) blijft van toepassing op andere heroes (bedrijfsevents
   heeft eigen overrides). Op de mobile breakpoint zit reeds een eigen cap.        */
#hero:has(.hero-bg) .hero-heading {
  font-size: clamp(2.5rem, 9.5vw, 10rem);
}


.hero-title {
  width: 100%;
  max-width: none;
  padding-inline: var(--page-pad-inline);
}

.hero-heading {
  display: block;
  width: fit-content;
  max-width: calc(100vw - (var(--page-pad-inline) * 2));
  overflow: clip;
  text-align: left;

  /* maak dit typografisch identiek aan je oude h1 (maar zonder SEO heading tag) */
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  color: currentColor;

  letter-spacing: var(--ls-h1);
  line-height: var(--lh-h1);
  font-size: var(--type-hero);
}

.hero-heading__line{
  display: flex;
  gap: 0.14em;
  width: fit-content;
  max-width: 100%;
  overflow: clip;
  align-items: baseline;
  padding-right: 0;
}

.hero-heading__line--nowrap { white-space: nowrap; }

html.hero-intro-ready .hero-heading__line{
  overflow: clip;
}


.hero-word{
  display: inline-block;
  will-change: transform, opacity;
  transition:
  transform 1.1s cubic-bezier(.22,1,.36,1),
  opacity 0.8s ease;
}


/* ===============================
   HERO — preloader heading motion (CSS-only)
   =============================== */


/* Start state */
html.is-preloading .hero-word{
  opacity: 0;
  transform: translate3d(0, 1.05em, 0);
}

/* Accent word starts from same position, but neutral skew */
html.is-preloading .h1-highlight{
  opacity: 0;
  transform: translate3d(0, 1.05em, 0) translateY(var(--so-y)) skewX(0deg);

}

/* End state — this is what actually triggers the intro */
html.hero-intro-ready .hero-word{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Premium accent settle on “stand out” */
html.hero-intro-ready .h1-highlight{
  opacity: 1;
  transform: translate3d(0, 0, 0) translateY(var(--so-y)) skewX(-4deg);
}

/* Word stagger
   Structuur (NL homepage): top heeft 3 woorden ("Geef je event"),
   bottom heeft 1 woord ("gespreksstof") als late, dramatische arrival.
   Op /bedrijfsevents/: top heeft 2 woorden ("Vlak voor"), bottom 1 groep
   ("hun neus") — zelfde 1020ms-punchline voor de bottom-line. */
html.hero-intro-ready .hero-heading__line--top .hero-word:nth-child(1){
  transition-delay: 50ms;
}
html.hero-intro-ready .hero-heading__line--top .hero-word:nth-child(2){
  transition-delay: 200ms;
}
html.hero-intro-ready .hero-heading__line--top .hero-word:nth-child(3){
  transition-delay: 350ms;
}
html.hero-intro-ready .hero-heading__line--bottom .hero-word:nth-child(1){
  transition-delay: 1020ms;
}


.hero-title .supporting-copy--hero {
  margin-top: clamp(0.5rem, 1vw, 0.75rem);
  max-width: min(32ch, 40vw);
  line-height: var(--lh-normal);
  letter-spacing: 0.06em;
}

@media (max-width: 600px) {
  #hero { min-height: 100vh; min-height: 100svh; }

  .hero-title {
    padding-inline: var(--page-pad-inline);
    margin-top: clamp(4rem, 16vh, 6rem);
  }

  .hero-heading {
    max-width: calc(100vw - var(--page-pad-inline) * 2 - 3.5rem);
    /* Override van --type-hero (clamp(3rem, 12vw, 14rem)) op mobile.
       Op een 393px-scherm rendeert de globale clamp tot 3rem (48px), waardoor
       single-words als "GESPREKSSTOF" (12 chars, no wrap mogelijk) overflowen.
       10vw cap zorgt dat de langste hero-line past binnen viewport - padding
       - scroll-indicator buffer (3.5rem). Bedrijfsevents heeft zijn eigen
       override hieronder, dus die blijft ongemoeid. */
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  #hero.hero--bedrijfsevents .hero-heading {
    max-width: calc(100vw - var(--page-pad-inline) * 2);
    font-size: clamp(2.65rem, 12.6vw, 3.1rem);
  }

  #hero.hero--bedrijfsevents .h1-highlight {
    min-width: 0;
    white-space: normal;
  }

  /* Laat álle regels wrappen op mobile zodat 'helping your' niet
     wegvalt achter de scroll-indicator. row-gap: 0 → afstand tussen
     gewrapte woorden is gelijk aan afstand tussen de twee line-spans
     (puur line-height-based, geen extra flex-gap). */
  .hero-heading__line,
  .hero-heading__line--nowrap {
    white-space: normal;
    flex-wrap: wrap;
    column-gap: 0.14em;
    row-gap: 0;
  }

  .hero-title .supporting-copy--hero {
    width: min(90%, 600px);
    margin-top: 1.5rem;
    text-align: left;
  }
}


/* ===============================
   HERO SCROLL INDICATOR
   =============================== */

.scroll-indicator {
  position: absolute;
  top: 50%;
  right: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  pointer-events: none;
  color: currentColor;
  z-index: 20;

  /* Altijd zichtbaar (ook voor footer-variant). Alleen de lijn wordt later geactiveerd. */
  opacity: 1;
}

.scroll-label{
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

.scroll-line {
  width: 1px;
  height: 6rem;
  background-color: currentColor;

  /* start: label wel, lijn niet */
  transform-origin: center top;
  transform: scaleY(0);
  animation: none;
}

/* Activeer enkel de HERO-lijn wanneer JS het "armt" */
html.is-scrollcue #hero .scroll-line{
  animation: scrollRise 1.6s ease-in-out infinite;
}

@keyframes scrollRise {
  0%   { transform: scaleY(0); transform-origin: center top; }
  100% { transform: scaleY(1); transform-origin: center top; }
}

@media (max-width: 600px) {
  .scroll-indicator { right: clamp(1rem, 4vw, 1.5rem); }
}

/* Reduced motion: toon lijn statisch i.p.v. onzichtbaar */
@media (prefers-reduced-motion: reduce){
  #hero .scroll-line,
  .scroll-indicator--footer .scroll-line{
    transform: scaleY(1) !important;
  }
}


/* Video-card direct onder de hero */
.hero-video-section{
  --hero-video-block-gap: 0px;
  position: relative;
  z-index: 10;
  min-height: calc(var(--vh) * 100);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--page-pad-inline);
  padding-block: var(--hero-video-block-gap);
  background: hsl(var(--clr-bg));
  overflow: hidden;
}

#video-container{
  position: relative;
  width: min(100%, calc(90svh * 16 / 9));
  margin-inline: auto;
  overflow: visible;
  isolation: isolate;
}

.hero-video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 0;
  background: #040404;
  transform: translateZ(0) scale(0.74);
  transform-origin: center center;
  will-change: transform;
  backface-visibility: hidden;
  outline: 0;
}

html.js #video-container.is-video-enhanced .hero-video-frame{
  box-shadow: none;
  cursor: pointer;
}

html.js #video-container.is-video-enhanced .hero-video-frame:focus-visible{
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

html.no-js .hero-video-frame{
  transform: translateZ(0) scale(1);
  will-change: auto;
}

@supports (overflow: clip) {
  .hero-video-frame{
    overflow: clip;
  }
}

/* video zelf
   r13-20260803: JS zet hier een tegen-schaal op (diafragma-reveal, zie
   applyAperture in script.js). De transform hieronder is alleen de
   uitgangswaarde vóór het script draait — zonder JS blijft het gewoon 1:1. */
#video-container video{
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  max-width: none;
  object-fit: cover;
  cursor: inherit;
  pointer-events: auto;
  transform: translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  will-change: transform;
}

html.no-js #video-container video:focus-visible{
  outline: var(--focus-outline);
  outline-offset: calc(var(--focus-offset) * -1);
}

/* ===============================
   VIDEO AUDIO TOGGLE — tekstlabel buiten het kader
   r12-20260803: staat nu rechtsboven in de sectie in plaats van in het
   videokader. Daardoor schaalt het niet mee met de video, ligt het altijd op de
   rustige sectieachtergrond en is de tekstschaduw overbodig geworden.
   De typografie komt volledig van .supporting-copy in de HTML-class.
   =============================== */

/* Bedieningscluster rechtsboven in de videosectie. "Speel af" staat links van
   "Geluid aan" en verschijnt alleen wanneer de video stilstaat. */
.hero-video-section .video-controls{
  position: absolute;
  top: clamp(1.1rem, 3.2vh, 2rem);
  right: var(--page-pad-inline);

  display: flex;
  align-items: baseline;
  gap: clamp(0.9rem, 2vw, 1.6rem);

  z-index: 20;
}

.hero-video-section .video-play,
.hero-video-section .video-audio{
  position: relative;

  appearance: none;
  background: none;
  border: 0;
  margin: 0;

  /* Ruimere klikzone dan het label zelf, zonder iets zichtbaars toe te voegen. */
  padding: 0.5rem 0.25rem;

  /* Bewust géén font-eigenschappen hier: .supporting-copy levert font-family,
     -size, -weight, line-height, letter-spacing, text-transform en kleur.
     Een `font: inherit` zou de grootte terugzetten naar die van de sectie
     (16px) en zo van .supporting-copy afwijken. */
  text-align: right;

  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* De laatste knop optisch op de rand uitlijnen, ondanks de klik-padding. */
.hero-video-section .video-controls > :last-child{
  margin-right: -0.25rem;
}

.hero-video-section .video-play[hidden],
.hero-video-section .video-audio[hidden],
html.no-js .hero-video-section .video-controls{
  display: none;
}

/* .underline-in: geen lijn in rust, lijn schuift binnen bij hover of focus.
   Hier alleen de positie corrigeren zodat de lijn onder de tékst valt en niet
   onder de klik-padding. */
.hero-video-section .video-play::after,
.hero-video-section .video-audio::after{
  left: 0.25rem;
  right: 0.25rem;
  width: auto;
  bottom: 0.38rem;
}

.hero-video-section .video-play:focus-visible,
.hero-video-section .video-audio:focus-visible,
.scroll-indicator__link:focus-visible{
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset);
}

@media (max-width: 900px){
  .hero-video-section{
    --hero-video-block-gap: clamp(1rem, 4vw, 1.5rem);
    min-height: calc(var(--vh) * 100);
  }

  #video-container{
    width: min(
      100%,
      34rem,
      calc(((var(--vh) * 100) - (var(--hero-video-block-gap) * 2)) * 9 / 16)
    );
  }

  .hero-video-frame{
    aspect-ratio: 9 / 16;
    transform: translateZ(0) scale(1);
  }
}

@media (max-width: 600px){
  .hero-video-section{
    padding-inline: clamp(18px, 5vw, 24px);
  }
}


/* ===============================
   ESSENCE — split layout
   =============================== */

#essence {
  --essence-pad-block: clamp(1.5rem, 6vh, 4rem);
  --essence-title-size: clamp(3.25rem, 12vh, 8.75rem);
  background-color: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  padding-inline: var(--page-pad-inline);
  padding-block: var(--essence-pad-block);
  display: flex;
  align-items: center;
  min-height: calc(var(--vh) * 100);
  position: relative;
  overflow: clip;
}

@supports (min-height: 100svh) {
  #essence {
    --essence-pad-block: clamp(1.5rem, 6svh, 4rem);
    --essence-title-size: clamp(3.25rem, 12svh, 8.75rem);
    min-height: 100svh;
  }
}

#essence:focus {
  outline: none;
}

#essence .split-layout {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(0.65rem, 2.4vh, 1.45rem);
  align-items: flex-start;
  align-content: center;
}

#essence .split-layout__left,
#essence .split-layout__right,
#essence .split-layout__story {
  max-width: 100%;
}

#essence .split-layout__left { justify-self: start; }
#essence .split-layout__story { justify-self: center; }
#essence .split-layout__right { justify-self: end; }

#essence .display-heading {
  font-size: var(--essence-title-size);
  line-height: 0.82;
}

.essence-claim__line {
  display: block;
  white-space: nowrap;
}

.essence-claim--right {
  text-align: right;
}

.essence-claim--right .essence-claim__line {
  display: flex;
  justify-content: flex-end;
  gap: 0.14em;
  /* Clip alleen verticaal (voor de slide-up animatie van .essence-word),
     laat horizontale tekst-extensie toe zodat brede lijnen als
     "DAT BLIJFT HANGEN" niet links worden afgeknepen. */
  clip-path: inset(0 -50vw 0 -50vw);
}

.essence-word {
  display: inline-block;
  will-change: transform, opacity;
}

#essence.is-essence-fallback .split-layout__left .essence-claim,
#essence.is-essence-fallback .essence-word,
#essence.is-essence-fallback .essence-story__line{
  opacity: 0;
  transform: translate3d(0, 1.05em, 0);
  transition:
    opacity 0.8s ease,
    transform 1.05s cubic-bezier(.22,1,.36,1),
    filter 0.8s ease;
}

#essence.is-essence-fallback .split-layout__left .essence-claim{
  filter: blur(3px);
}

#essence.is-essence-fallback .essence-word,
#essence.is-essence-fallback .essence-story__line{
  transition-delay: var(--essence-delay, 0ms);
}

#essence.is-essence-fallback.is-essence-visible .split-layout__left .essence-claim,
#essence.is-essence-fallback.is-essence-visible .essence-word,
#essence.is-essence-fallback.is-essence-visible .essence-story__line{
  opacity: 1;
  transform: translate3d(0, 0, 0);
  filter: blur(0);
}

@media (prefers-reduced-motion: reduce){
  #essence.is-essence-fallback .split-layout__left .essence-claim,
  #essence.is-essence-fallback .essence-word,
  #essence.is-essence-fallback .essence-story__line{
    transition: none;
  }
}

#essence .essence-story {
  display: grid;
  gap: 0.1rem;
  text-align: right;
  max-width: min(100%, 21rem);
  text-wrap: balance;
}

#essence .essence-story__line {
  display: block;
}

@media (max-width: 900px){
  #essence{
    --essence-pad-block: clamp(1.25rem, 4vh, 2.35rem);
    /* Voeg vw-cap toe zodat de langste lijn ("DAT BLIJFT HANGEN", 17 chars)
       past op smalle telefoons. min(svh, vw) zorgt dat de title nooit
       breder wordt dan de viewport toelaat. */
    --essence-title-size: clamp(1.75rem, min(8vh, 9vw), 4.5rem);
  }

  @supports (min-height: 100svh) {
    #essence {
      --essence-pad-block: clamp(1.25rem, 4svh, 2.35rem);
      --essence-title-size: clamp(1.75rem, min(8svh, 9vw), 4.5rem);
    }
  }

  #essence .display-heading {
    line-height: 0.84;
  }

  #essence .split-layout {
    row-gap: clamp(0.55rem, 2vh, 1rem);
  }

  #essence .split-layout__story {
    margin-top: clamp(0.25rem, 1.2vh, 0.75rem);
    justify-self: end;
  }

  #essence .split-layout__right {
    justify-self: end;
    margin-top: clamp(0.15rem, 1vh, 0.6rem);
  }

  #essence .split-layout__right .essence-claim {
    width: auto;
    max-width: 100%;
  }

  #essence .essence-story {
    max-width: min(100%, 17.5rem);
    font-size: clamp(0.82rem, 2.15vh, 1rem);
  }
}

@media (min-width: 900px) {
  #essence .split-layout {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(0.75rem, 2vw, 1.6rem);
    row-gap: clamp(0.65rem, 1.8vh, 1.35rem);
    align-items: flex-start;
  }

  #essence .split-layout__left {
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: flex-start;
  }

  #essence .split-layout__right {
    grid-column: 7 / -1;
    grid-row: 1;
    align-self: flex-start;
    margin-top: 0;
  }

  #essence .split-layout__story {
    grid-column: 7 / -1;
    grid-row: 2;
    align-self: flex-start;
    justify-self: end;
    margin-top: clamp(0.4rem, 1.8vh, 1rem);
  }

  .essence-claim { max-width: none; }

  #essence .essence-story {
    max-width: 21rem;
  }
}


.more{
  margin-top: clamp(56px, 12vh, 160px);
}

#formats .more .link--lg{
  display: inline-block;
  max-width: 100%;
  text-transform: none;
  letter-spacing: 0;
}


/* ===============================
   BRAND PILLARS — editorial horizontal
   =============================== */

#pillars{
  /* Gedeelde breedte voor alle 4 de edge-strips */
  --pillars-strip-w: clamp(180px, 18.5vw, 360px);
  position: relative;
  height: calc(var(--vh) * 100);
  background: #050505;
  color: #ffffff;
  overflow: clip;
}

#pillars .pillars-scroll{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: clip;
}

@supports (overflow: clip) {
  #pillars .pillars-scroll{
    overflow: clip;
  }
}

#pillars .pillars-track{
  height: 100%;
  display: flex;
  width: max-content;
  will-change: transform;
}

#pillars .pillars-panel{
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  background: #050505;
  color: #ffffff;
  overflow: clip;
}

#pillars .pillars-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pillars .pillars-kicker,
#pillars .pillars-floating-label,
#pillars .pillars-number,
#pillars .pillars-mini-heading{
  color: currentColor;
}

#pillars .pillars-copy-block,
#pillars .pillars-floating-label,
#pillars .pillars-body{
  position: relative;
  z-index: 2;
}

#pillars .pillars-float{
  position: relative;
  z-index: 1;
  overflow: clip;
}

/* <picture> wrapper must not break the height chain (inline by default) */
#pillars .pillars-float picture{
  display: block;
  width: 100%;
  height: 100%;
}

#pillars .pillars-statement,
#pillars .pillars-subtitle{
  margin: 0;
  color: #ffffff;
}

#pillars .pillars-statement{
  max-width: 14ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: var(--lh-tight);
  font-size: clamp(2.8rem, 4.8vw, 5.2rem);
}

#pillars .pillars-subtitle{
  max-width: 11ch;
  font-size: clamp(2.5rem, 4.2vw, 4.6rem);
  line-height: var(--lh-tight);
}

#pillars .pillars-body{
  max-width: 34rem;
  font-size: clamp(1rem, 1rem + 0.18vw, 1.25rem);
  line-height: var(--lh-normal);
  text-transform: none;
  letter-spacing: 0;
}

#pillars .pillars-body--narrow{
  max-width: 22rem;
}

#pillars .pillars-copy-block--hero,
#pillars .pillars-copy-block--numbered,
#pillars .pillars-copy-block--craft-side,
#pillars .pillars-copy-block--host-side,
#pillars .pillars-floating-label,
#pillars .pillars-body--statement{
  max-width: 100%;
}

/* Panel 1 */
#pillars .pillars-panel--statement{
  display: grid;
  grid-template-columns: var(--pillars-strip-w) minmax(0, 1fr) var(--pillars-strip-w);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(24px, 2.2vw, 40px);
  row-gap: clamp(18px, 2.4vh, 32px);
  padding: clamp(14px, 1.4vh, 18px) clamp(16px, 1.8vw, 28px) clamp(20px, 2.6vh, 28px);
}

#pillars .pillars-copy-block--hero{
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  max-width: min(52rem, 100%);
}

#pillars .pillars-float--left-edge{
  grid-column: 1;
  grid-row: 1 / span 3;
  height: 100%;
}

#pillars .pillars-float--right-edge{
  grid-column: 3;
  grid-row: 1 / span 3;
  height: 100%;
}

/* Strip 2: toon de rechterkant van het beeld i.p.v. het midden */
#pillars .pillars-float--right-edge .pillars-image{
  object-position: right center;
}

#pillars .pillars-float--center-main{
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  width: min(29vw, 500px);
  min-width: 320px;
  aspect-ratio: 1 / 1.28;
  margin-top: clamp(8px, 3vh, 28px);
}

#pillars .pillars-floating-label--statement{
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  justify-self: end;
  width: max-content;
  max-width: min(16rem, 26vw);
  margin-top: clamp(8px, 1.2vh, 12px);
  margin-right: clamp(10px, 2vw, 28px);
}

#pillars .pillars-body--statement{
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  max-width: min(27rem, 29vw);
  margin-right: clamp(10px, 2vw, 28px);
  margin-bottom: clamp(2px, 0.4vh, 8px);
}

/* Panel 2 */
#pillars .pillars-panel--craft,
#pillars .pillars-panel--host{
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr)) var(--pillars-strip-w);
  grid-template-rows: repeat(6, minmax(0, 1fr));
  column-gap: clamp(18px, 1.8vw, 28px);
  row-gap: clamp(14px, 1.8vh, 22px);
  padding: clamp(28px, 3vh, 40px) var(--page-pad-inline);
}

#pillars .pillars-copy-block--craft-main{
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  align-self: start;
}

#pillars .pillars-float--craft-left{
  grid-column: 4 / 7;
  grid-row: 3 / 7;
  align-self: end;
}

#pillars .pillars-floating-label--craft{
  grid-column: 8 / 11;
  grid-row: 2;
  align-self: start;
}

#pillars .pillars-copy-block--craft-side{
  grid-column: 8 / 11;
  grid-row: 5 / 7;
  align-self: end;
}

#pillars .pillars-float--craft-right{
  grid-column: 11 / 12;
  grid-row: 1 / 7;
  height: 100%;
}

#pillars .pillars-copy-block--host-main{
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  align-self: start;
}

#pillars .pillars-floating-label--host{
  grid-column: 7 / 10;
  grid-row: 2;
  align-self: start;
  max-width: 18rem;
}

#pillars .pillars-float--host-center{
  grid-column: 5 / 8;
  grid-row: 3 / 7;
  align-self: end;
}

#pillars .pillars-float--host-left{
  grid-column: 1 / 4;
  grid-row: 3 / 7;
  align-self: end;
}

#pillars .pillars-copy-block--host-side{
  grid-column: 9 / 11;
  grid-row: 5 / 7;
  align-self: end;
}

#pillars .pillars-float--host-right{
  grid-column: 11 / 12;
  grid-row: 1 / 7;
  height: 100%;
}

#pillars .pillars-copy-block--host-side .link--sm,
#pillars .pillars-copy-block--craft-side .link--sm,
#pillars .pillars-copy-block--craft-main .link--sm,
#pillars .pillars-copy-block--host-main .link--sm{
  margin-top: 1rem;
}

@media (max-width: 1280px){
  #pillars .pillars-panel--statement{
    column-gap: clamp(18px, 1.8vw, 28px);
  }

  #pillars .pillars-statement{
    font-size: clamp(2.4rem, 4.2vw, 4.4rem);
    max-width: 13ch;
  }

  #pillars .pillars-float--center-main{
    width: min(31vw, 420px);
    min-width: 280px;
  }

  #pillars .pillars-body--statement{
    max-width: min(24rem, 30vw);
  }

  #pillars .pillars-panel--craft,
  #pillars .pillars-panel--host{
    column-gap: clamp(14px, 1.4vw, 22px);
    padding-inline: clamp(32px, 5vw, 72px);
  }
}

@media (max-width: 900px){
  #pillars{
    height: auto;
  }

  #pillars .pillars-scroll{
    height: auto;
    overflow: visible;
  }

  #pillars .pillars-track{
    display: grid;
    width: 100%;
    transform: none !important;
  }

  #pillars .pillars-panel{
    width: 100%;
    height: auto;
    min-height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 4vw, 20px);
    padding: clamp(24px, 6vw, 36px) var(--page-pad-inline);
  }

  #pillars .pillars-panel--statement,
  #pillars .pillars-panel--craft,
  #pillars .pillars-panel--host{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
    column-gap: clamp(12px, 3.8vw, 18px);
    row-gap: clamp(12px, 3.8vw, 18px);
    padding-block: clamp(24px, 6vw, 36px);
  }

  #pillars .pillars-copy-block--hero,
  #pillars .pillars-copy-block--craft-main,
  #pillars .pillars-copy-block--craft-side,
  #pillars .pillars-copy-block--host-main,
  #pillars .pillars-copy-block--host-side,
  #pillars .pillars-floating-label--statement,
  #pillars .pillars-floating-label--craft,
  #pillars .pillars-floating-label--host,
  #pillars .pillars-body--statement{
    grid-column: 1 / -1;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    justify-self: stretch;
    align-self: auto;
  }

  #pillars .pillars-copy-block--hero{ order: 1; }
  #pillars .pillars-float--center-main{ order: 2; }
  #pillars .pillars-floating-label--statement{ order: 3; }
  #pillars .pillars-body--statement{ order: 4; }
  #pillars .pillars-float--left-edge{ order: 5; }
  #pillars .pillars-float--right-edge{ order: 6; }

  #pillars .pillars-copy-block--craft-main{ order: 1; }
  #pillars .pillars-floating-label--craft{ order: 2; }
  #pillars .pillars-float--craft-left{ order: 3; }
  #pillars .pillars-copy-block--craft-side{ order: 4; }
  #pillars .pillars-float--craft-right{ order: 5; }

  #pillars .pillars-copy-block--host-main{ order: 1; }
  #pillars .pillars-floating-label--host{ order: 2; }
  #pillars .pillars-float--host-center{ order: 3; }
  #pillars .pillars-copy-block--host-side{ order: 4; }
  #pillars .pillars-float--host-right{ order: 5; }

  #pillars .pillars-float--left-edge,
  #pillars .pillars-float--right-edge,
  #pillars .pillars-float--craft-left,
  #pillars .pillars-float--craft-right,
  #pillars .pillars-float--host-center,
  #pillars .pillars-float--host-right{
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    height: auto;
    margin: 0;
  }

  #pillars .pillars-float--center-main{
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    aspect-ratio: 4 / 5;
    margin: 0;
  }

  #pillars .pillars-float--left-edge,
  #pillars .pillars-float--right-edge,
  #pillars .pillars-float--craft-right,
  #pillars .pillars-float--host-right{
    grid-column: span 1;
  }

  #pillars .pillars-float--craft-left,
  #pillars .pillars-float--host-center{
    grid-column: 1 / -1;
  }

  #pillars .pillars-image,
  #pillars .pillars-float--center-main .pillars-image,
  #pillars .pillars-float--craft-left .pillars-image,
  #pillars .pillars-float--craft-right .pillars-image,
  #pillars .pillars-float--host-center .pillars-image,
  #pillars .pillars-float--host-right .pillars-image,
  #pillars .pillars-float--left-edge .pillars-image,
  #pillars .pillars-float--right-edge .pillars-image{
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }

  #pillars .pillars-statement,
  #pillars .pillars-subtitle{
    max-width: 10ch;
    font-size: clamp(2.1rem, 10.8vw, 3.6rem);
    line-height: var(--lh-tight);
  }

  #pillars .pillars-kicker,
  #pillars .pillars-floating-label,
  #pillars .pillars-number,
  #pillars .pillars-mini-heading{
    font-size: 0.82rem;
    line-height: var(--lh-ui);
    letter-spacing: 0.05em;
  }

  #pillars .pillars-body,
  #pillars .pillars-body--statement,
  #pillars .pillars-body--narrow{
    max-width: 100%;
    font-size: 0.98rem;
    line-height: var(--lh-normal);
  }
}

@media (max-width: 560px){
  #pillars .pillars-panel,
  #pillars .pillars-panel--statement,
  #pillars .pillars-panel--craft,
  #pillars .pillars-panel--host{
    grid-template-columns: 1fr;
  }

  #pillars .pillars-float--left-edge,
  #pillars .pillars-float--right-edge,
  #pillars .pillars-float--craft-right,
  #pillars .pillars-float--host-right,
  #pillars .pillars-float--craft-left,
  #pillars .pillars-float--host-center,
  #pillars .pillars-float--center-main{
    grid-column: 1;
  }

  #pillars .pillars-statement,
  #pillars .pillars-subtitle{
    max-width: 9.5ch;
    font-size: clamp(2rem, 11vw, 3.1rem);
  }

  #pillars .pillars-body,
  #pillars .pillars-body--statement,
  #pillars .pillars-body--narrow{
    font-size: 0.95rem;
  }
}


/* ===============================
   LOGO WALL — full height
   =============================== */

#logo-wall{
  position: relative;

  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));

  min-height: 128vh;
  padding: clamp(140px, 22vh, 240px) var(--page-pad-inline) clamp(84px, 14vh, 156px);

  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-wall__supporting{
  position: absolute;
  top: clamp(120px, 16vh, 190px);
  left: var(--page-pad-inline);
  margin: 0;

  max-width: 28rem;
  text-align: left;
  color: currentColor;
}

.logo-wall__grid{
  width: 100%;
  max-width: 1040px;
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 40px);

  align-items: center;
  justify-items: center;

  /* Reset native <ul> chrome (universal reset already zeroes margin/padding) */
  list-style: none;
}

.logo-wall__item{
  --logo-width: min(210px, 64%);
  --logo-height: clamp(52px, 5vw, 70px);
  --logo-offset-y: 0px;
  --logo-scale: 0.84;
  margin: 0;
  width: 100%;
  display: grid;
  place-items: center;
  padding-inline: clamp(6px, 1vw, 18px);
  min-height: clamp(64px, 6.2vw, 92px);
}

.logo-wall__item img{
  width: var(--logo-width);
  max-width: 100%;
  height: var(--logo-height);
  object-fit: contain;
  object-position: center;
  transform: translateY(var(--logo-offset-y)) scale(var(--logo-scale));
  transform-origin: center;

  filter: grayscale(1) brightness(0) contrast(1.15);
  opacity: 1;
}

.logo-wall__item--pom{
  --logo-width: min(178px, 54%);
  --logo-height: clamp(42px, 4.2vw, 56px);
}

.logo-wall__item--porsche{
  --logo-width: min(212px, 72%);
  --logo-height: clamp(74px, 6.2vw, 94px);
  --logo-offset-y: 2px;
}

.logo-wall__item--proximus{
  --logo-width: min(220px, 74%);
  --logo-height: clamp(52px, 4.7vw, 66px);
}

.logo-wall__item--pukkelpop{
  --logo-width: min(126px, 42%);
  --logo-height: clamp(62px, 5.6vw, 82px);
}

.logo-wall__item--pwc{
  --logo-width: min(154px, 50%);
  --logo-height: clamp(44px, 4vw, 56px);
}

.logo-wall__item--to-walk-again{
  --logo-width: min(170px, 54%);
  --logo-height: clamp(46px, 4.2vw, 58px);
}

.logo-wall__item--vrt{
  --logo-width: min(168px, 54%);
  --logo-height: clamp(54px, 4.7vw, 68px);
}

.logo-wall__item--vtm{
  --logo-width: min(188px, 60%);
  --logo-height: clamp(54px, 4.8vw, 68px);
}

@media (max-width: 900px){
  #logo-wall{
    min-height: auto;
    padding-top: clamp(128px, 22vh, 180px);
    padding-bottom: clamp(68px, 12vh, 112px);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
  }

  .logo-wall__grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: min(100%, 24rem);
    column-gap: clamp(8px, 3vw, 16px);
    row-gap: clamp(8px, 3vw, 16px);
  }

  .logo-wall__supporting{
    position: static;
    width: 100%;
    max-width: 34rem;
    margin: 0 0 clamp(24px, 6vh, 40px) 0;
  }

  .logo-wall__item{
    --logo-mobile-width: clamp(90px, 24vw, 112px);
    --logo-scale: 0.86;
    padding-inline: clamp(8px, 3vw, 16px);
    padding-block: clamp(8px, 2.5vw, 14px);
    min-height: clamp(56px, 16vw, 80px);
  }

  .logo-wall__item img{
    width: min(var(--logo-mobile-width), 100%);
    max-width: 100%;
    height: auto;
  }

  .logo-wall__item--pom{
    --logo-mobile-width: clamp(100px, 27vw, 122px);
  }

  .logo-wall__item--porsche{
    --logo-mobile-width: clamp(112px, 31vw, 138px);
  }

  .logo-wall__item--proximus{
    --logo-mobile-width: clamp(122px, 34vw, 150px);
  }

  .logo-wall__item--pukkelpop{
    --logo-mobile-width: clamp(54px, 15vw, 68px);
  }

  .logo-wall__item--pwc{
    --logo-mobile-width: clamp(76px, 21vw, 94px);
  }

  .logo-wall__item--to-walk-again{
    --logo-mobile-width: clamp(86px, 24vw, 106px);
  }

  .logo-wall__item--vrt{
    --logo-mobile-width: clamp(78px, 21vw, 92px);
  }

  .logo-wall__item--vtm{
    --logo-mobile-width: clamp(92px, 24vw, 108px);
  }
}

@media (max-width: 520px){
  .logo-wall__item{
    padding-inline: clamp(16px, 6vw, 28px);
    padding-block: clamp(12px, 4vw, 20px);
    min-height: clamp(72px, 22vw, 104px);
  }

  .logo-wall__item img{
    width: min(var(--logo-mobile-width), 100%);
  }
}

/* ===============================
   FORMATS — two options
   =============================== */

#formats {
  padding-inline: var(--page-pad-inline);
  padding-block: clamp(4rem, 18vh, 7rem);
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.formats-header {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(1.4rem, 3vh, 2rem);
  align-items: flex-start;
}

.formats-title { margin: 0; }
.formats-title__line { display: block; }
.formats-header__text { max-width: 16rem; }

.formats-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 7vh, 4rem);
  margin-top: clamp(2.5rem, 8vh, 4rem);
}

.formats-card {
  width: 100%;
}

/* Media */
.formats-card__media {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
}

.formats-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Title block: rechts uitgelijnd + subtitle eronder */
.format-heading{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;

  margin-top: 1rem;
  row-gap: clamp(0.02rem, 0.25vh, 0.12rem); /* was groter */

}

.format-heading h3{
  margin: 0;
  line-height: var(--lh-h3);
}

.format-heading > .supporting-copy{
  margin: 0;
  white-space: nowrap;
  line-height: var(--lh-ui);
}

/* Body block: uitleg links + knop eronder (links)
   ✅ werkt ideaal met een .format-body wrapper
   ✅ fallback inbegrepen voor je huidige HTML (p + a als directe kinderen) */
.format-body{
  margin-top: clamp(1.8rem, 5vh, 3rem);
  width: 100%;
  max-width: none;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  row-gap: clamp(1rem, 2.4vh, 1.6rem);
}

.format-body > .supporting-copy{
  margin: 0;
  width: 100%;
  max-width: none;
  text-transform: none;
  letter-spacing: 0;
}

.format-body > a.underline-anim{
  display: inline-block;
  width: fit-content;
  margin: 0;
}

/* Fallback (als je nog géén .format-body wrapper hebt) */
.formats-card > .supporting-copy{
  margin-top: clamp(1.8rem, 5vh, 3rem);
  margin-inline: 0;
  width: 100%;
  text-align: left;
  max-width: none;
}

.formats-card > a.underline-anim{
  display: inline-block;
  width: fit-content;
  margin-top: clamp(1rem, 2.4vh, 1.6rem);
}

/* Mobile: subtitle mag wrappen */
@media (max-width: 520px){
  .format-heading > .supporting-copy{
    white-space: normal;
  }
}

@media (min-width: 900px) {
  /* ruimte om de offset te dragen */
  #formats{
    min-height: 220vh;
    padding-bottom: clamp(12rem, 35vh, 28rem);
  }

  .formats-header {
    grid-template-columns: max-content minmax(0, 20rem);
    column-gap: clamp(0.8rem, 2vw, 1.4rem);
    align-items: flex-end;
  }

  .formats-header__text {
    justify-self: flex-start;
    max-width: 18rem;
    margin-bottom: clamp(0.2rem, 0.8vh, 0.55rem);
  }

  .formats-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: clamp(3rem, 8vw, 6rem);
  }

  .formats-card { width: 50%; }

  /* Desktop offset: verplaats de héle 2e optie (afbeelding + tekst) omlaag */
  .formats-card:nth-child(2){
    margin-top: clamp(26rem, 38vh, 34rem);

  }

}


/* ===============================
   CTA / Engage (centered)
   =============================== */

#engage.engage{
  min-height: calc(var(--vh) * 100);
  padding: clamp(72px, 14vh, 140px) var(--page-pad-inline);

  display: flex;
  align-items: center;
  justify-content: center;

  text-align: center;

  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

#engage .engage__inner{
  width: min(72rem, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.2vh, 26px);
}

#engage .engage__title{ margin: 0; }

#engage .engage__copy{
  margin: 0;
  max-width: 34rem;
  color: currentColor;
}

/* ===============================
   FOOTER — full screen
   =============================== */

#footer{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  width: 100%;
  height: 100svh;
  height: calc(var(--vh) * 100);
  min-height: 0;
  display: flex;
  align-items: stretch;
}

#footer .ft-wrap{
  width: 100%;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: clamp(32px, 7vh, 72px) var(--page-pad-inline);
  display: flex;
  flex-direction: column;
}

#footer .ft-top{
  flex: 1;
  height: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  grid-template-areas:
    "copy mail"
    "topnav address"
    ". links"
    "brand meta";
  column-gap: clamp(24px, 6vw, 96px);
  row-gap: clamp(20px, 4vh, 44px);
  align-items: stretch;
}

#footer .ft-bottom{
  grid-area: meta;
  display: flex;
  justify-content: flex-end;
  text-align: right;
  gap: var(--space-xs);
  align-self: end;
  width: 100%;
}

#footer .ft-left{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(32px, 6vh, 80px);
}

#footer .ft-left-top{
  display:flex;
  flex-direction: column;
  align-items:flex-start;
  gap: clamp(40px, 7vh, 56px);
}

#footer .ft-copy{
  grid-area: copy;
  max-width: 34rem;
  align-self: start;
}

#footer .ft-brandmark{
  grid-area: brand;
  align-self: end;
  justify-self: start;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  font-size: clamp(16rem, 34vw, 38rem);
  line-height: 0.72;
  color: var(--footer-brandmark-color);
  user-select: text;
  margin-bottom: -0.08em;
}

#footer .ft-right{
  display:grid;
  grid-template-rows: auto auto 1fr;
  align-content:space-between;
  gap: clamp(24px, 4vh, 48px);
}

#footer .ft-mail{
  grid-area: mail;
  justify-self: end;
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-inline-start: auto;
  text-align: right;
}

#footer .ft-mail__text{
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: var(--lh-display);
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  white-space: nowrap;
}

#footer .ft-mail__text.underline-anim::after{
  height: 0.055em;
  bottom: -0.035em;
}

#footer .ft-address{
  grid-area: address;
  justify-self: end;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: clamp(16px, 3vw, 60px);
  font-family: var(--font-body);
  font-size: clamp(14px, 1.05vw, 16px);
  text-align: right;
}

#footer .ft-address p{ margin: 0; }

#footer .lt-city,
#footer .lt-time,
#footer .ft-sitemap a,
#footer .ft-socials a{
  font-weight: var(--fw-regular);
}

#footer .ft-links{
  grid-area: links;
  display:grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  column-gap: var(--layout-gap);
  row-gap: 0;
  align-self: end;
  margin-inline: auto;
  margin-bottom: 0;
  width: min(100%, 34rem);
}

#footer .ft-sitemap{
  display:block;
  grid-column:auto;
}

#footer .ft-socials{
  grid-column:auto;
}

#footer .ft-sitemap ul,
#footer .ft-socials ul{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 0.05rem;
}

#footer .ft-sitemap a,
#footer .ft-socials a,
#footer .ft-mail,
#footer .ft-mail__text{
  color: hsl(var(--clr-text));
  text-decoration: none;
}

/* Footer scroll indicator */
.scroll-indicator--footer{
  grid-area: topnav;
  align-self: start;
  justify-self: start;
  position: static;
  transform: none;
  pointer-events: auto;
  display: flex;
  align-items: center;
}

.scroll-indicator--footer .scroll-indicator__link{
  display:flex;
  flex-direction: column-reverse;
  align-items:center;
  gap: 1.25rem;
  text-decoration:none;
  color:inherit;
}

.scroll-indicator--footer .scroll-label{
  transform: rotate(180deg);
}

.scroll-indicator--footer .scroll-line{
  width: 1px;
  height: 6rem;
  background-color: currentColor;
  animation: scrollRiseReverse 1.6s ease-in-out infinite;
}

@keyframes scrollRiseReverse{
  0%   { transform: scaleY(0); transform-origin: center bottom; }
  100% { transform: scaleY(1); transform-origin: center bottom; }
}

@media (max-width: 1100px){
  #footer .ft-top{
    column-gap: clamp(20px, 5vw, 48px);
    row-gap: clamp(20px, 4vh, 36px);
  }

  #footer .ft-mail{
    justify-self: stretch;
    text-align: right;
  }

  #footer .ft-address{
    flex-direction:column;
    align-items:flex-end;
  }

  #footer .ft-links{
    grid-template-columns: repeat(2, max-content);
    column-gap: var(--layout-gap);
  }

  #footer .ft-sitemap{
    grid-column:auto;
  }

  #footer .ft-socials{
    grid-column:auto;
  }
}

@media (max-width: 680px){
  #footer{
    min-height: 100svh;
    min-height: calc(var(--vh) * 100);
  }

  #footer .ft-wrap{
    min-height: 100svh;
    min-height: calc(var(--vh) * 100);
    padding-top: max(1.5rem, env(safe-area-inset-top));
    padding-right: clamp(1.5rem, 6.8vw, 2rem);
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    padding-left: clamp(1.5rem, 6.8vw, 2rem);
  }

  /* Grid-layout en plaatsing van ft-top wordt verderop gedefinieerd
     (zie @media 680px-blok onderaan). Hier alleen typografie + visuele
     details die voor mobile gelden. */

  .scroll-indicator--footer .scroll-indicator__link{
    gap: 0.95rem;
  }

  #footer .ft-sitemap a{
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
  }

  #footer .ft-sitemap ul,
  #footer .ft-socials ul{
    align-items: flex-end;
    gap: 0.08rem;
  }

  #footer .ft-mail{
    grid-area: mail;
    justify-self: stretch;
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    margin-inline-start: 0;
    text-align: left;
  }

  #footer .ft-mail__text{
    font-family: var(--font-heading);
    font-size: clamp(2.15rem, 8.7vw, 3rem);
    font-weight: var(--fw-bold);
    line-height: var(--lh-display);
    letter-spacing: 0;
    display: inline-block;
    width: fit-content;
    max-width: none;
    white-space: nowrap;
  }

  #footer .ft-mail__text.underline-anim::after{
    left: 0;
    bottom: -0.035em;
  }

  #footer .ft-address{
    grid-area: address;
    justify-self: start;
    align-self: start;
    display: block;
    text-align: left;
    width: auto;
  }

  #footer .ft-socials a{
    font-weight: var(--fw-regular);
    line-height: var(--lh-ui);
  }

  #footer .locale-time{
    justify-items: start;
    text-align: left;
    gap: 0.2rem;
  }

  #footer .locale-time .lt-city,
  #footer .locale-time .lt-time{
    font-style: italic;
    font-weight: var(--fw-regular);
    letter-spacing: 0.02em;
    line-height: var(--lh-ui);
  }
}

/* ===============================
   Locale time
   =============================== */

.locale-time{
  display:inline-grid;
  justify-items: end;
  text-align: right;
  gap: 4px;
  font-family: var(--font-body);
}

.locale-time .lt-city{
  font-size: clamp(14px, 1.1vw, 18px);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  line-height: var(--lh-ui);
}

.locale-time .lt-time{
  font-size: clamp(13px, 1vw, 16px);
  letter-spacing: 0.01em;
  line-height: var(--lh-ui);
  text-transform: lowercase;
  color: currentColor;
}

/* ===============================
   Section utilities
   =============================== */

.section--dark{
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.on-dark-text{
  color: hsl(var(--clr-bg));
}

/* Ensure common elements in dark sections inherit the section's text color.
   Using 'inherit' so nested light-bg containers (menu-overlay) correctly
   override back to dark text through their own color declaration. */
.on-dark-text .brand,
.on-dark-text .nav-link,
.on-dark-text .nav-action,
.on-dark-text .menu-close,
.on-dark-text .ui-text,
.on-dark-text .supporting-copy,
.on-dark-text .scroll-label,
.on-dark-text .lang-switch__link,
.on-dark-text .link--sm,
.on-dark-text h1,
.on-dark-text h2,
.on-dark-text h3,
.on-dark-text p,
.on-dark-text a{
  color: inherit;
}

/* Common section helpers */
.page{ width: 100%; }

#hero,
#essence,
#formats,
#pillars,
#logo-wall,
#engage,
#footer{
  scroll-margin-top: var(--nav-offset);
}

#footer{
  scroll-margin-top: 0;
}

html:has(#footer:target){
  scroll-padding-top: 0;
}

html:has(#logo-wall:target){
  scroll-padding-top: 0;
}

/* JS-only enhancement: content is never hidden when JavaScript is unavailable. */
html.js .reveal-item[data-reveal-pending="true"]{
  opacity: 0;
  transform: translate3d(0, 1.15rem, 0);
}

html.js .reveal-item{
  transition:
    opacity 0.7s ease var(--reveal-delay, 0ms),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

html.js .reveal-item.is-revealed{
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ===============================
   Responsive — ≤ 600px
   =============================== */

@media (max-width: 600px){
  :root{ --page-pad-inline: 20px; }
}

/* ===============================
   Reduced motion (site-wide safety net)
   =============================== */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

  html.js .menu-topbar > *,
  html.js .menu-col li,
  html.js .reveal-item{
    opacity: 1 !important;
    transform: none !important;
    will-change: auto !important;
  }
}


@media (max-width: 600px){
  .formats-header__text{
    max-width: 13.5rem;
  }
}

/* Mobile tweak: more space between Walking and Seated cards */
@media (max-width: 600px){
  .formats-grid{
    gap: clamp(4rem, 10vh, 6rem);
  }
}


/* ===============================
   PILLARS MOBILE POLISH — v3
   =============================== */
@media (max-width: 900px){
  #pillars{
    height: auto;
  }

  #pillars .pillars-scroll{
    height: auto;
    overflow: visible;
  }

  #pillars .pillars-track{
    display: grid;
    width: 100%;
    transform: none !important;
  }

  #pillars .pillars-panel,
  #pillars .pillars-panel--statement,
  #pillars .pillars-panel--craft,
  #pillars .pillars-panel--host{
    width: 100%;
    height: auto;
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: clamp(14px, 4.6vw, 22px);
    padding: clamp(24px, 6vw, 36px) var(--page-pad-inline);
    overflow: visible;
  }

  #pillars .pillars-copy-block--hero,
  #pillars .pillars-copy-block--craft-main,
  #pillars .pillars-copy-block--craft-side,
  #pillars .pillars-copy-block--host-main,
  #pillars .pillars-copy-block--host-side,
  #pillars .pillars-floating-label--statement,
  #pillars .pillars-floating-label--craft,
  #pillars .pillars-floating-label--host,
  #pillars .pillars-body--statement{
    position: relative;
    inset: auto;
    width: 100%;
    max-width: none;
    margin: 0;
    align-self: stretch;
  }

  #pillars .pillars-copy-block--hero{ order: 1; max-width: 24rem; }
  #pillars .pillars-float--center-main{ order: 2; }
  #pillars .pillars-floating-label--statement{ order: 3; }
  #pillars .pillars-body--statement{ order: 4; max-width: 26rem; align-self: flex-end; text-align: left; }
  #pillars .pillars-float--left-edge{ order: 5; }
  #pillars .pillars-float--right-edge{ order: 6; }

  #pillars .pillars-copy-block--craft-main{ order: 1; max-width: 22rem; }
  #pillars .pillars-float--craft-left{ order: 2; }
  #pillars .pillars-floating-label--craft{ order: 3; }
  #pillars .pillars-copy-block--craft-side{ order: 4; max-width: 18rem; align-self: flex-end; }
  #pillars .pillars-float--craft-right{ order: 5; }

  #pillars .pillars-copy-block--host-main{ order: 1; max-width: 22rem; }
  #pillars .pillars-float--host-center{ order: 2; }
  #pillars .pillars-float--host-left{ order: 3; }
  #pillars .pillars-floating-label--host{ order: 4; max-width: 16rem; align-self: flex-end; }
  #pillars .pillars-copy-block--host-side{ order: 5; max-width: 18rem; align-self: flex-end; }
  #pillars .pillars-float--host-right{ order: 6; }

  #pillars .pillars-float,
  #pillars .pillars-float--left-edge,
  #pillars .pillars-float--right-edge,
  #pillars .pillars-float--center-main,
  #pillars .pillars-float--craft-left,
  #pillars .pillars-float--craft-right,
  #pillars .pillars-float--host-center,
  #pillars .pillars-float--host-left,
  #pillars .pillars-float--host-right{
    position: relative;
    inset: auto;
    flex: none;
    height: auto;
    margin: 0;
    overflow: hidden;
  }

  #pillars .pillars-float--center-main{
    width: min(82vw, 27rem);
    aspect-ratio: 4 / 5;
    align-self: flex-start;
  }

  #pillars .pillars-float--left-edge{
    width: min(54vw, 12rem);
    aspect-ratio: 3 / 4;
    align-self: flex-start;
  }

  #pillars .pillars-float--right-edge{
    width: min(68vw, 16rem);
    aspect-ratio: 4 / 5;
    align-self: flex-end;
  }

  #pillars .pillars-float--craft-left{
    width: min(84vw, 28rem);
    aspect-ratio: 4 / 5;
    align-self: flex-start;
  }

  #pillars .pillars-float--craft-right{
    width: min(58vw, 14rem);
    aspect-ratio: 3 / 4;
    align-self: flex-end;
  }

  #pillars .pillars-float--host-center{
    width: min(72vw, 19rem);
    aspect-ratio: 5 / 6;
    align-self: flex-start;
  }

  #pillars .pillars-float--host-left{
    width: min(80vw, 22rem);
    aspect-ratio: 4 / 5;
    align-self: flex-end;
  }

  #pillars .pillars-float--host-right{
    width: min(88vw, 30rem);
    aspect-ratio: 5 / 4;
    align-self: flex-end;
  }

  #pillars .pillars-image,
  #pillars .pillars-float .pillars-image{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #pillars .pillars-kicker,
  #pillars .pillars-floating-label,
  #pillars .pillars-number,
  #pillars .pillars-mini-heading{
    font-size: 0.8rem;
    line-height: var(--lh-ui);
    letter-spacing: 0.06em;
  }

  #pillars .pillars-floating-label--statement,
  #pillars .pillars-floating-label--host{
    width: auto;
    max-width: 14rem;
    align-self: flex-end;
    text-align: left;
  }

  #pillars .pillars-floating-label--craft{
    width: auto;
    max-width: 12rem;
    align-self: flex-start;
  }

  #pillars .pillars-statement,
  #pillars .pillars-subtitle{
    max-width: 9.5ch;
    font-size: clamp(2.15rem, 10.2vw, 3.7rem);
    line-height: var(--lh-tight);
  }

  #pillars .pillars-body,
  #pillars .pillars-body--statement,
  #pillars .pillars-body--narrow{
    max-width: 100%;
    font-size: 0.98rem;
    line-height: var(--lh-normal);
  }
}

@media (max-width: 560px){
  #pillars .pillars-panel,
  #pillars .pillars-panel--statement,
  #pillars .pillars-panel--craft,
  #pillars .pillars-panel--host{
    gap: 14px;
    padding-block: 24px;
  }

  #pillars .pillars-copy-block--hero,
  #pillars .pillars-copy-block--craft-main,
  #pillars .pillars-copy-block--host-main{
    max-width: 18rem;
  }

  #pillars .pillars-copy-block--craft-side,
  #pillars .pillars-copy-block--host-side,
  #pillars .pillars-body--statement{
    max-width: 15rem;
  }

  #pillars .pillars-float--center-main{
    width: min(86vw, 21rem);
    aspect-ratio: 4 / 5;
  }

  #pillars .pillars-float--left-edge{
    width: min(48vw, 9.5rem);
    aspect-ratio: 3 / 4;
  }

  #pillars .pillars-float--right-edge{
    width: min(72vw, 14rem);
    aspect-ratio: 4 / 5;
  }

  #pillars .pillars-float--craft-left{
    width: min(88vw, 22rem);
    aspect-ratio: 4 / 5;
  }

  #pillars .pillars-float--craft-right{
    width: min(56vw, 11rem);
    aspect-ratio: 3 / 4;
  }

  #pillars .pillars-float--host-center{
    width: min(74vw, 15rem);
    aspect-ratio: 5 / 6;
  }

  #pillars .pillars-float--host-left{
    width: min(82vw, 17rem);
    aspect-ratio: 4 / 5;
  }

  #pillars .pillars-float--host-right{
    width: min(90vw, 22rem);
    aspect-ratio: 6 / 5;
  }

  #pillars .pillars-statement,
  #pillars .pillars-subtitle{
    max-width: 9ch;
    font-size: clamp(1.95rem, 10.8vw, 3rem);
  }

  #pillars .pillars-body,
  #pillars .pillars-body--statement,
  #pillars .pillars-body--narrow{
    font-size: 0.95rem;
    line-height: var(--lh-normal);
  }
}

/* Microcopy color + scale — final override for section-specific variants */


/* ===============================
   SEO / EDITORIAL PAGES
   Herbruikbare module voor commerciële pagina's en gidsartikels
   =============================== */

.seo-page {
  min-height: 100vh;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.seo-page :where(a) {
  overflow-wrap: anywhere;
}

.seo-page :where(p, li) {
  max-width: 68ch;
}

.seo-page :where(strong) {
  font-weight: var(--fw-bold);
}

.seo-shell {
  width: 100%;
  padding-inline: var(--page-pad-inline);
}

.seo-readable {
  max-width: min(100%, 76rem);
  margin-inline: auto;
}

.seo-narrow {
  max-width: min(100%, 52rem);
}

.seo-topbar {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: min(5vh, 40px);
  padding-inline: var(--page-pad-inline);
}

.seo-brand {
  flex-shrink: 0;
}

.seo-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.seo-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.6vw, 2.5rem);
  list-style: none;
}

.seo-nav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

.seo-hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(84svh, 760px);
  padding-block: clamp(5rem, 12vh, 9rem) clamp(4rem, 10vh, 8rem);
  border-bottom: 1px solid hsl(var(--clr-text) / 0.16);
}

.seo-hero--compact {
  min-height: min(68svh, 620px);
}

.seo-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.seo-hero__eyebrow,
.seo-section__eyebrow,
.seo-card__eyebrow,
.seo-meta,
.seo-breadcrumbs,
.seo-table-of-contents__title {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-microcopy);
  color: hsl(var(--clr-microcopy));
}

.seo-breadcrumbs {
  margin-bottom: clamp(2rem, 5vw, 4rem);
}

.seo-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.seo-breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.5rem;
  color: currentColor;
}

.seo-hero__title {
  max-width: 10ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-h1);
  line-height: 0.82;
  font-size: clamp(4.25rem, 13vw, 15rem);
  text-wrap: balance;
}

.seo-hero__title--wide {
  max-width: 12ch;
}

.seo-hero__copy {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  max-width: 42rem;
}

.seo-hero__lede {
  font-size: clamp(1.15rem, 1rem + 0.9vw, 1.75rem);
  line-height: var(--lh-normal);
  text-wrap: balance;
}

.seo-hero__actions,
.seo-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
}

.seo-page-link {
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-microcopy);
  font-weight: var(--fw-bold);
}

.seo-page-link--large {
  font-size: clamp(1.15rem, 1rem + 0.75vw, 1.65rem);
  letter-spacing: var(--ls-ui);
}

.seo-main-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
  gap: clamp(3rem, 8vw, 8rem);
  align-items: start;
  padding-block: clamp(5rem, 12vw, 11rem);
}

.seo-main-column {
  min-width: 0;
  display: grid;
  gap: clamp(4rem, 9vw, 8rem);
}

.seo-aside {
  position: sticky;
  top: calc(var(--nav-offset) + 1.5rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.seo-table-of-contents,
.seo-aside-card {
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.seo-table-of-contents nav {
  margin-top: 1rem;
}

.seo-table-of-contents ol,
.seo-aside-card ul {
  list-style: none;
  display: grid;
  gap: 0.75rem;
}

.seo-section {
  scroll-margin-top: var(--nav-offset);
}

.seo-section__head {
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.4rem);
  margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.seo-section__title {
  max-width: 12ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 0.86;
  letter-spacing: var(--ls-display);
  font-size: clamp(3.3rem, 9vw, 10rem);
  text-wrap: balance;
}

.seo-section__title--wide {
  max-width: 16ch;
}

.seo-section__intro {
  max-width: 48rem;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.45rem);
  line-height: 1.35;
}

.seo-prose {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
}

.seo-prose :where(h2, h3) {
  margin-top: clamp(1.5rem, 4vw, 3rem);
}

.seo-prose :where(ul, ol) {
  display: grid;
  gap: 0.65rem;
  padding-left: 1.1em;
}

.seo-prose :where(li)::marker {
  color: hsl(var(--clr-microcopy));
}

.seo-split {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}

.seo-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.seo-card {
  display: grid;
  align-content: start;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  min-height: 100%;
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.seo-card__title {
  max-width: none;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3vw, 3.75rem);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.seo-list {
  display: grid;
  gap: 0.75rem;
  list-style: none;
}

.seo-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
}

.seo-list li::before {
  content: "";
  width: 0.42em;
  height: 0.42em;
  border-radius: 999px;
  background: currentColor;
  transform: translateY(0.6em);
  opacity: 0.75;
}

.seo-steps {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  counter-reset: seo-step;
  list-style: none;
}

.seo-step {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  padding-top: clamp(1rem, 2vw, 1.5rem);
  counter-increment: seo-step;
}

.seo-step::before {
  content: counter(seo-step, decimal-leading-zero);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  letter-spacing: var(--ls-microcopy);
  color: hsl(var(--clr-microcopy));
}

.seo-step__body {
  display: grid;
  gap: 0.55rem;
}

.seo-step__title {
  max-width: none;
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4vw, 4.5rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.seo-quote {
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  border-bottom: 1px solid hsl(var(--clr-text) / 0.18);
  padding-block: clamp(2rem, 5vw, 4rem);
}

.seo-quote p {
  max-width: 18ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(3rem, 8vw, 8.5rem);
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
}

.seo-quote--testimonial p {
  max-width: 28ch;
  font-size: clamp(2.2rem, 5.4vw, 5.75rem);
}

.seo-faq {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
}

.seo-faq__item {
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.seo-faq__item:last-child {
  border-bottom: 1px solid hsl(var(--clr-text) / 0.18);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.seo-faq__question {
  max-width: 34ch;
}

.seo-faq__answer {
  margin-top: clamp(0.75rem, 1.5vw, 1rem);
  max-width: 58rem;
}

.seo-related {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.seo-related__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, 2.4vw, 2rem);
}

.seo-related__item {
  display: grid;
  gap: 0.65rem;
  border-top: 1px solid hsl(var(--clr-text) / 0.14);
  padding-top: 1rem;
}

.seo-related__title {
  max-width: none;
  font-family: var(--font-heading);
  font-size: clamp(2rem, 3.2vw, 4rem);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.seo-cta {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  padding-block: clamp(4rem, 9vw, 8rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
}

.seo-cta__title {
  max-width: 11ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 0.82;
  letter-spacing: var(--ls-display);
  font-size: clamp(4rem, 11vw, 13rem);
  text-wrap: balance;
}

.seo-cta__copy {
  max-width: 44rem;
}

.seo-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.18);
}

.seo-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem clamp(1rem, 3vw, 2rem);
  list-style: none;
}

.seo-section--dark {
  margin-inline: calc(var(--page-pad-inline) * -1);
  padding-inline: var(--page-pad-inline);
  padding-block: clamp(5rem, 10vw, 9rem);
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.seo-section--dark .seo-section__eyebrow,
.seo-section--dark .seo-card__eyebrow,
.seo-section--dark .seo-meta {
  color: currentColor;
}

.seo-section--dark :where(.seo-card, .seo-step, .seo-faq__item, .seo-related, .seo-related__item, .seo-cta) {
  border-color: hsl(var(--clr-bg) / 0.2);
}

.seo-muted {
  color: currentColor;
}

/* ===============================
   CONTACT PAGE
   =============================== */

body.contact-page{
  overflow-x: hidden;
  overflow-x: clip;
}

.contact-screen{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.contact-screen .site-header{
  color: hsl(var(--clr-text));
}

.contact-screen__inner{
  width: 100%;
  max-width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    clamp(6.75rem, 13vh, 9.5rem)
    var(--page-pad-inline)
    clamp(2rem, 5vh, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.78fr);
  gap: clamp(3.5rem, 8.5vw, 9rem);
  align-items: stretch;
}

.contact-copy{
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-rows: auto auto auto 1fr;
  align-content: start;
}

.contact-kicker{
  max-width: 23rem;
  margin-bottom: clamp(1.35rem, 3vw, 2.4rem);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  color: currentColor;
}

.contact-title{
  max-width: 11.5ch;
  font-family: var(--font-heading);
  font-size: clamp(5.75rem, 8.7vw, 10.75rem);
  font-weight: var(--fw-bold);
  line-height: 0.76;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

.contact-title span{
  display: block;
}

.contact-intro{
  display: grid;
  gap: clamp(1.25rem, 2.4vw, 1.85rem);
  min-width: 0;
  max-width: 39rem;
  margin-top: clamp(2rem, 4.6vw, 3.7rem);
}

.contact-intro p{
  max-width: 100%;
  overflow-wrap: break-word;
}

.contact-intro p{
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  color: currentColor;
}

.contact-detail,
.contact-form,
.contact-field :where(input, textarea){
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  color: currentColor;
}

.contact-intro strong{
  font-weight: var(--fw-bold);
}

.contact-details{
  align-self: end;
  display: grid;
  grid-template-columns: minmax(9rem, 0.7fr) minmax(12rem, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem) clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(3.5rem, 9vh, 7.5rem);
}

.contact-detail{
  display: grid;
  gap: 0.65rem;
}

.contact-detail h2,
.contact-field label{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: currentColor;
}

.contact-detail p{
  margin: 0;
  max-width: none;
}

.contact-detail p:has(a){
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
}

.contact-detail a{
  font-weight: var(--fw-bold);
}

.contact-intro a,
.contact-privacy-note a,
.legal-page__content a{
  font-weight: var(--fw-bold);
}

.contact-form{
  min-width: 0;
  align-self: start;
  display: grid;
  gap: clamp(1.65rem, 3.4vh, 2.55rem);
  padding-top: clamp(0.4rem, 1vh, 0.8rem);
}

.contact-field{
  display: grid;
  gap: clamp(0.35rem, 1vw, 0.55rem);
}

.contact-field label{
  font-weight: var(--fw-regular);
}

.contact-field :where(input, textarea){
  width: 100%;
  min-width: 0;
  border: 0;
  border-bottom: 1px solid hsl(var(--clr-text) / 0.72);
  border-radius: 0;
  background: transparent;
  padding: 0.42rem 0 0.7rem;
  font-weight: var(--fw-regular);
  text-transform: none;
  outline: 0;
  resize: vertical;
}

.contact-field :where(input, textarea)::placeholder{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  color: currentColor;
  opacity: 1;
}

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

.contact-field textarea{
  min-height: clamp(8rem, 21vh, 13rem);
}

.contact-field :where(input, textarea):focus-visible{
  border-bottom-color: currentColor;
  box-shadow: 0 1px 0 currentColor;
}

.contact-submit{
  justify-self: start;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
  margin-top: clamp(1.25rem, 2.8vw, 2.35rem);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
  line-height: var(--lh-ui);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: currentColor;
}

.contact-privacy-note{
  max-width: 34rem;
  margin-top: clamp(0.35rem, 1.2vw, 0.8rem);
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  color: currentColor;
}

.contact-privacy-note a{
  color: inherit;
}

/* "Velden met * zijn verplicht" — zelfde microcopy-formaat, eigen regel zodat
   de asterisk in de placeholders verklaard is voordat iemand begint te typen. */
.contact-required-note{
  display: block;
}

.contact-form__status{
  justify-self: start;
  margin-top: clamp(0.2rem, 1vw, 0.6rem);
  max-width: 36rem;
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  white-space: pre-line;
  color: currentColor;
}

@media (max-width: 980px){
  .contact-screen__inner{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(2.75rem, 8vw, 5rem);
    align-items: start;
  }

  .contact-copy{
    grid-template-rows: none;
  }

  .contact-details{
    align-self: start;
    margin-top: clamp(2.5rem, 7vw, 4rem);
  }

  .contact-form{
    padding-top: 0;
  }
}

@media (max-width: 680px){
  .contact-screen .site-nav{
    width: min(100%, 390px);
  }

  .contact-screen__inner{
    width: min(100%, 390px);
    padding-top: clamp(6rem, 20vw, 8rem);
    padding-bottom: clamp(2rem, 8vw, 3.5rem);
  }

  .contact-title{
    max-width: 100%;
    font-size: clamp(3.7rem, 15.5vw, 4.35rem);
    line-height: 0.82;
    overflow-wrap: normal;
  }

  .contact-intro{
    margin-top: clamp(1.35rem, 5vw, 2rem);
  }

  .contact-details{
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(1.1rem, 5vw, 1.6rem);
  }

  .contact-form{
    gap: clamp(1.15rem, 5vw, 1.55rem);
  }

  .contact-field textarea{
    min-height: 8rem;
  }
}

.seo-section--dark .seo-muted {
  color: currentColor;
}

/* ===============================
   LEGAL PAGE
   =============================== */

.privacy-page{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.privacy-page .site-header{
  color: hsl(var(--clr-text));
}

.legal-page{
  min-height: 100vh;
  min-height: 100svh;
  padding:
    clamp(8rem, 16vh, 11.5rem)
    var(--page-pad-inline)
    clamp(4rem, 10vw, 8rem);
}

.legal-page__inner{
  width: min(100%, 62rem);
  margin-inline: auto;
  display: grid;
  justify-items: start;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

.legal-page__title{
  max-width: 8.5ch;
  font-size: clamp(5.75rem, 13vw, 13rem);
  line-height: 0.76;
  letter-spacing: var(--ls-display);
}

.legal-page__title span{
  display: block;
}

.legal-page__updated{
  color: currentColor;
}

.legal-page__content{
  display: grid;
  gap: clamp(2.35rem, 5vw, 4rem);
  width: min(100%, 50rem);
  margin-top: clamp(0.5rem, 2vw, 1.5rem);
  margin-inline: auto;
}

.legal-page__content section{
  display: grid;
  gap: clamp(0.8rem, 1.8vw, 1.15rem);
}

.legal-page__content h2{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
}

.legal-page__content p{
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  color: currentColor;
}

.legal-page__content a{
  font-weight: var(--fw-bold);
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

/* ===============================
   BREADCRUMB
   Zichtbaar kruimelpad op de subpagina's. Volgt de bestaande microcopy —
   zelfde grootte, kapitalen en letterspatiëring als .link--sm — zodat het
   als label leest en niet als extra navigatielaag.
   =============================== */

/* Losstaand tussen de hero en de eerste contentsectie. Draagt zelf de
   lichte paginakleur, zodat het aansluit op de sectie eronder in plaats van
   de donkere <main>-basiskleur te laten doorschijnen als losse balk. */
.breadcrumb{
  width: 100%;
  padding-inline: var(--page-pad-inline);
  padding-block: clamp(1.5rem, 4vh, 2.75rem) 0;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

/* Binnen een bestaande contentkolom draagt de ouder de padding en de kleur al. */
.article-hero .breadcrumb,
.notes-hero__inner .breadcrumb,
.legal-page__inner .breadcrumb,
.contact-copy .breadcrumb{
  padding-inline: 0;
  padding-block: 0 clamp(0.75rem, 2vh, 1.25rem);
  background: transparent;
  color: inherit;
}

.breadcrumb__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.5em;
}

.breadcrumb__item{
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  margin: 0;
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  color: inherit;
}

.breadcrumb__item + .breadcrumb__item::before{
  content: "/";
  opacity: 0.45;
  font-weight: var(--fw-regular);
}

/* Huidige pagina is geen link: zelfde ritme, iets rustiger. */
.breadcrumb__current{
  opacity: 0.55;
}

/* Op een donkere sectie de kleur meenemen van de omgeving. */
.section--dark .breadcrumb__item,
.on-dark-text .breadcrumb__item{
  color: currentColor;
}

@media (max-width: 600px){
  .breadcrumb{
    padding-block: clamp(1.1rem, 3vh, 1.75rem) 0;
  }
}

/* Wettelijke identificatie op de privacypagina — label/waarde-paren in dezelfde
   microcopy-stijl als de rest van de legal-page. */
.legal-identity{
  margin: clamp(0.6rem, 1.6vw, 1rem) 0 0;
  display: grid;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  gap: clamp(0.3rem, 0.9vw, 0.5rem) clamp(1rem, 2.5vw, 2rem);
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
}

.legal-identity dt{
  font-weight: var(--fw-bold);
  margin: 0;
}

.legal-identity dd{
  margin: 0;
}

@media (max-width: 520px){
  .legal-identity{
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .legal-identity dd{
    margin-bottom: 0.7rem;
  }
}

/* Linklijst op de 404-pagina — volgt de ritmiek van .legal-page__content section,
   zonder bullets zodat het bij de rest van de typografie blijft. */
.error-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(0.55rem, 1.4vw, 0.85rem);
}

.error-links li{
  margin: 0;
}

@media (max-width: 680px){
  .privacy-page .site-nav,
  .legal-page{
    width: min(100%, 390px);
  }

  .legal-page{
    padding-top: clamp(6rem, 20vw, 8rem);
  }

  .legal-page__title{
    max-width: 100%;
    font-size: clamp(3.7rem, 15.5vw, 5rem);
    line-height: 0.82;
  }
}

@media (max-width: 900px) {
  .seo-topbar {
    align-items: flex-start;
  }

  .seo-nav__list {
    gap: 1rem;
  }

  .seo-hide-mobile {
    display: none;
  }

  .seo-main-layout,
  .seo-split {
    grid-template-columns: 1fr;
  }

  .seo-aside {
    position: static;
    order: -1;
  }

  .seo-card-grid,
  .seo-related__grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 600px) {
  .seo-shell,
  .seo-topbar,
  .seo-section--dark {
    padding-inline: 20px;
  }

  .seo-hero {
    min-height: auto;
    padding-block: clamp(4rem, 18vw, 7rem);
  }

  .seo-hero__title {
    font-size: clamp(3.7rem, 19vw, 6.4rem);
  }

  .seo-section__title,
  .seo-cta__title {
    font-size: clamp(3.2rem, 17vw, 5.75rem);
  }

  .seo-step {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .seo-quote p {
    max-width: 12ch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .seo-page *,
  .seo-page *::before,
  .seo-page *::after {
    scroll-behavior: auto !important;
  }
}

/* ===============================
   STRICT DESIGN SYSTEM — typography groups
   Authoritative type definitions by visual role.
   =============================== */

body,
.seo-page{
  color: hsl(var(--clr-text));
  background: hsl(var(--clr-bg));
}

.section--dark,
#pillars,
#pillars .pillars-panel,
#engage.engage,
.seo-section--dark{
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

/* Group 1: UI / micro labels */
.supporting-copy,
.ui-text,
.brand,
.nav-link,
.nav-action,
.menu-close,
.menu-col .num,
.lang-switch__link,
.scroll-label,
#footer .lt-city,
#footer .lt-time,
#footer .ft-sitemap a,
#footer .ft-socials a,
.seo-hero__eyebrow,
.seo-section__eyebrow,
.seo-card__eyebrow,
.seo-meta,
.seo-breadcrumbs,
.seo-table-of-contents__title,
.seo-step::before{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  color: currentColor;
}

/* Group 2: compact text links */
.link--sm,
#engage .link--sm,
#pillars .link--sm,
.on-dark-text .link--sm,
.seo-page-link,
.seo-nav__link{
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: lowercase;
  font-weight: var(--fw-bold);
  color: currentColor;
}

/* Group 3: readable body copy */
/* .notes-hero__display hoort bij dezelfde familie decoratieve display-statements
   als .display-heading en .hero-heading. Zonder deze uitsluiting won deze regel
   (specificiteit 0,4,1) van .notities-page .notes-hero__display (0,2,0), en
   moest de notities-index dat repareren met een inline <style> vol !important. */
p:not(.supporting-copy):not(.hero-heading):not(.display-heading):not(.editorial-heading):not(.notes-hero__display),
#formats .format-body > .supporting-copy,
#pillars .pillars-body,
#pillars .pillars-body--statement,
.seo-hero__lede,
.seo-section__intro,
.seo-prose,
.seo-prose :where(p, li),
.seo-faq__answer,
.seo-cta__copy,
.seo-card p,
.seo-step__body,
.seo-related__item p{
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  color: currentColor;
}

.seo-faq__answer{
  color: currentColor;
}

.seo-faq__answer :where(a, strong){
  color: hsl(var(--clr-text));
}

.seo-section--dark .seo-faq__answer{
  color: currentColor;
}

.seo-section--dark .seo-faq__answer :where(a, strong){
  color: hsl(var(--clr-bg));
}

.section--dark :where(p:not(.supporting-copy), li),
.seo-section--dark :where(p:not(.supporting-copy), li){
  color: currentColor;
}

.section--dark :where(p, li) strong,
.seo-section--dark :where(p, li) strong{
  color: hsl(var(--clr-bg));
  font-weight: var(--fw-bold);
}

/* Group 4: large display / section titles */
#hero .hero-heading,
.display-heading,
.formats-title,
#engage .engage__title,
.seo-hero__title,
.seo-section__title,
.seo-cta__title,
.seo-quote p{
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

#hero .hero-heading{
  font-size: var(--type-display);
}

.display-heading,
#essence .display-heading,
.formats-title,
#engage .engage__title,
.seo-hero__title,
.seo-section__title,
.seo-cta__title,
.seo-quote p{
  font-size: var(--type-display);
}

/* Group 5: section/card headings */
h3,
.format-heading h3,
#pillars .pillars-subtitle,
#footer .ft-mail__text,
.seo-card__title,
.seo-step__title,
.seo-related__title{
  font-family: var(--font-heading);
  font-size: var(--type-heading);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

/* Group 5b: question headings */
.question-heading,
.seo-faq__question{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: currentColor;
}

/* Group 6: large CTA text */
.link--lg,
#formats .more .link--lg{
  font-family: var(--font-body);
  font-size: var(--type-cta);
  line-height: var(--lh-tight);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-regular);
  color: currentColor;
}

/* "start a conversation" — body font, op h3-grootte (zelfde als
   .format-heading h3 en #pillars .pillars-statement).
   Notitie-back link op artikelpagina krijgt dezelfde behandeling
   zodat homepage-CTA en artikel-CTA visueel identiek zijn. */
#formats .more .link--lg,
.notitie-back .link--lg{
  font-size: var(--type-heading);
  line-height: var(--lh-h3);
  width: fit-content;
  max-width: 100%;
}

/* Group 7: statement/contact text */
#pillars .pillars-statement{
  font-family: var(--font-heading);
  font-size: var(--type-heading);
  line-height: var(--lh-display);
  letter-spacing: 0;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: currentColor;
}

/* Group 8: fullscreen menu links and non-link menu-style display text */
.menu-col a,
#essence .display-heading{
  font-family: var(--font-heading);
  font-size: var(--type-menu);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

/* Group 9: contact/email wrapper */
#footer .ft-mail{
  color: currentColor;
}

/* Group 10: oversized footer mark */
#footer .ft-brandmark{
  font-family: var(--font-heading);
  font-size: var(--type-brandmark);
  line-height: 0.64;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: var(--footer-brandmark-color);
}

/* Shared layout rhythm */
.site-nav,
.menu-topbar,
.seo-topbar{
  padding-block: var(--space-sm);
  padding-inline: var(--page-pad-inline);
  /* Forceert beide rijen op exact dezelfde totaalhoogte.
     .site-nav bevat het 24px menu-icon → cross-axis ≈ 24px.
     .menu-topbar bevat alleen tekst → cross-axis ≈ 18px.
     Met align-items: center zou dat ~3px Y-verschil geven voor de brand.
     min-height met dezelfde formule als de site-nav's natural height
     (= 24px content + 2× padding-block) maakt beide gelijk en houdt
     de brand-tekst exact op dezelfde Y-positie. box-sizing: border-box
     is global gezet, dus deze waarde is de totale element-hoogte. */
  min-height: calc(24px + 2 * var(--space-sm));
}

.menu-content{
  padding: var(--space-lg) var(--page-pad-inline);
  gap: var(--layout-gap);
}

@media (min-width: 901px){
  .menu-content{
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    align-content: center;
    gap: var(--space-md);
    padding-block: var(--space-md);
    padding-left: calc(var(--page-pad-inline) + var(--space-md));
  }

  .menu-col{
    gap: var(--space-xs);
  }

  .menu-col li{
    gap: var(--space-sm);
  }
}

@media (max-width: 900px){
  .menu-content{
    grid-template-columns: max-content;
    justify-content: center;
    justify-items: start;
    align-content: center;
    gap: var(--space-sm);
    padding-block: clamp(3rem, 9svh, 5rem);
  }

  .menu-col{
    justify-items: start;
    gap: clamp(0.45rem, 1.4svh, 0.85rem);
  }

  .menu-col li{
    grid-template-columns: 2.2em 1fr;
    gap: clamp(0.5rem, 2vw, 0.85rem);
    align-items: baseline;
  }

  .menu-col .num{
    text-align: left;
    min-width: 2.2em;
  }
}

#hero{
  padding-top: var(--space-xl);
  padding-bottom: var(--space-lg);
}

#formats,
#engage.engage,
.seo-main-layout,
.seo-section--dark,
.seo-cta{
  padding-block: var(--section-pad-y);
}

#logo-wall{
  padding: var(--section-pad-y-lg) var(--page-pad-inline);
}

#footer .ft-wrap{
  padding: var(--space-md) var(--page-pad-inline);
}

@media (min-width: 681px){
  #footer .ft-top{
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "copy mail"
      "topnav address"
      ". links"
      "brand meta";
  }

  #footer .ft-mail{
    min-width: 0;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    align-self: start;
    text-align: right;
  }

  #footer .ft-mail__text{
    max-width: 100%;
    font-size: var(--type-heading);
    white-space: nowrap;
  }

  #footer .ft-links{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    column-gap: var(--layout-gap);
    width: min(100%, 34rem);
    margin-inline: auto;
    margin-bottom: 0;
  }

  #footer .ft-sitemap,
  #footer .ft-socials{
    grid-column: auto;
  }

  #footer .ft-sitemap{
    display: block;
  }

  #footer .ft-bottom{
    justify-content: flex-end;
    text-align: right;
  }
}

.formats-header,
.formats-grid,
#engage .engage__inner,
.seo-hero__inner,
.seo-main-column,
.seo-card-grid,
.seo-related__grid,
.seo-split{
  gap: var(--layout-gap);
}

.format-body,
.seo-prose,
.seo-card,
.seo-faq,
.seo-related{
  gap: var(--content-gap);
}

.format-heading,
.seo-step__body,
.seo-related__item,
#footer .ft-sitemap ul,
#footer .ft-socials ul{
  gap: 0;
}

#footer .ft-sitemap a,
#footer .ft-socials a{
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  text-transform: uppercase;
  color: currentColor;
}

.more,
.formats-grid,
.format-body,
.formats-card > .supporting-copy{
  margin-top: var(--layout-gap);
}

.more{
  display: flex;
  justify-content: center;
  text-align: center;
  padding-block: var(--space-lg);
}

.seo-breadcrumbs,
.seo-section__head{
  margin-top: 0;
  margin-bottom: var(--layout-gap);
}

.formats-header__text,
.hero-title .supporting-copy--hero,
#essence .essence-story,
.logo-wall__supporting,
#engage .engage__copy,
#footer .ft-copy,
.seo-hero__copy,
.seo-section__intro,
.seo-cta__copy{
  max-width: 34rem;
}

@media (max-width: 680px){
  :root{
    --page-pad-inline: 20px;
    --type-cta: var(--type-display);
    --type-display: clamp(4rem, 22vw, 7rem);
    --type-heading: clamp(1.95rem, 10vw, 2.45rem);
    --type-hero: clamp(2.4rem, 11vw, 3.4rem);
    --type-menu: var(--type-heading);
    --type-brandmark: clamp(15rem, 64vw, 24rem);
  }

  #footer .ft-wrap{
    height: 100%;
    min-height: 0;
    padding-top: clamp(3.5rem, 10vh, 5rem);
  }

  #footer .ft-top{
    flex: 1 1 auto;
    min-height: 100%;
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-rows:
      auto             /* mail */
      auto             /* address */
      auto             /* nav row: topnav | links */
      minmax(0, 1fr)   /* spacer */
      auto             /* copy */
      auto             /* brand */
      auto;            /* meta */
    grid-template-areas:
      "mail    mail    mail   mail"
      "address address address address"
      "topnav  .       .       links"
      ".       .       .      ."
      "copy    copy    copy   copy"
      "brand   brand   brand  brand"
      "meta    meta    meta   meta";
    column-gap: clamp(0.85rem, 3.5vw, 1.4rem);
    row-gap: var(--space-xs);
    align-items: start;
  }

  #footer .ft-mail{
    grid-area: mail;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    text-align: left;
  }

  #footer .ft-mail__text{
    font-size: clamp(var(--type-body), 10vw, var(--type-heading));
    max-width: 100%;
    white-space: nowrap;
  }

  #footer .ft-address{
    grid-area: address;
    justify-self: start;
    align-self: start;
    width: max-content;
    max-width: 100%;
    margin-top: var(--layout-gap);
    text-align: left;
  }

  #footer .ft-address .lt-city{
    white-space: nowrap;
  }

  /* Eén verticale lijst van álle links: ft-sitemap (Home/Options/...)
     boven ft-socials (LinkedIn/Instagram/Mentalista). */
  #footer .ft-links{
    grid-area: links;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: center;
    justify-self: end;
    width: max-content;
    margin: 0;
    column-gap: 0;
    row-gap: 0;
    gap: 0;
  }

  #footer .ft-sitemap,
  #footer .ft-socials{
    grid-area: auto;
    display: block;
    width: auto;
    margin: 0;
  }

  #footer .ft-copy{
    justify-self: center;
    align-self: end;
    max-width: min(34rem, 100%);
    text-align: center;
    text-wrap: balance;
  }

  #footer .ft-brandmark{
    grid-area: brand;
    justify-self: center;
    align-self: end;
    width: 100%;
    max-width: 100%;
    text-align: center;
  }

  /* BACK TO TOP — verticaal, links uitgelijnd. */
  .scroll-indicator--footer{
    grid-area: topnav;
    justify-self: start;
    align-self: center;
    margin: 0;
  }

  .scroll-indicator--footer .scroll-line{
    height: clamp(5rem, 18vw, 7rem);
  }

  #footer .ft-bottom{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: var(--space-xs);
    margin-top: 0;
  }
}

/* Footer viewport correction: keep the footer to exactly one screen and
   make the mobile grid fit inside that screen instead of extending scroll. */
#footer{
  height: 100vh;
  height: 100svh;
  min-height: 0;
  max-height: 100vh;
  max-height: 100svh;
  overflow: clip;
}

#footer .ft-wrap{
  height: 100%;
  min-height: 0;
  overflow: clip;
  padding-block: clamp(24px, 4.5vh, 56px) clamp(12px, 2vh, 24px);
}

#footer .ft-top{
  height: 100%;
  min-height: 0;
  overflow: clip;
}

#footer .ft-brandmark{
  font-size: clamp(13rem, 25vw, 29rem);
  line-height: 0.72;
  margin-bottom: 0.12em;
}

@media (max-width: 680px){
  #footer{
    height: 100vh;
    height: 100svh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100svh;
  }

  #footer .ft-wrap{
    height: 100%;
    min-height: 0;
    padding-top: max(clamp(1rem, 4svh, 2rem), env(safe-area-inset-top));
    padding-right: clamp(1.25rem, 5vw, 1.75rem);
    padding-bottom: max(clamp(0.5rem, 2svh, 1rem), env(safe-area-inset-bottom));
    padding-left: clamp(1.25rem, 5vw, 1.75rem);
  }

  #footer .ft-top{
    height: 100%;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-rows:
      auto
      auto
      auto
      minmax(0, 1fr)
      auto
      auto
      auto;
    grid-template-areas:
      "mail    mail    mail   mail"
      "address address address address"
      "topnav  .       .       links"
      ".       .       .      ."
      "copy    copy    copy   copy"
      "brand   brand   brand  brand"
      "meta    meta    meta   meta";
    row-gap: clamp(0.35rem, 1.4svh, 0.85rem);
  }

  #footer .ft-mail__text{
    font-size: var(--type-heading);
  }

  #footer .ft-address{
    margin-top: clamp(0.35rem, 1.6svh, 0.9rem);
  }

  #footer .ft-brandmark{
    font-size: clamp(14rem, 55vw, 20rem);
    line-height: 0.72;
    margin-bottom: -0.08em;
  }

  #footer .ft-copy{
    max-width: min(26rem, 100%);
  }

  .scroll-indicator--footer{
    transform: none;
  }

  .scroll-indicator--footer .scroll-line{
    height: clamp(5rem, 18vw, 7rem);
  }
}

/* ===============================
   Native scroll baseline
   Desktop pillars stack naturally without JavaScript. JS opts into the
   horizontal pinned treatment only after measuring the actual container.
   =============================== */

@media (min-width: 901px){
  #pillars{
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  #pillars .pillars-scroll{
    height: auto;
    overflow: visible;
  }

  #pillars .pillars-track{
    display: grid;
    width: 100%;
    height: auto;
    will-change: auto;
  }

  #pillars .pillars-panel{
    flex: none;
    width: 100%;
    min-height: 100svh;
    height: auto;
    overflow: clip;
  }

  html.js #pillars.is-pillars-enhanced{
    height: calc(var(--vh) * 100);
    min-height: 0;
    overflow: clip;
  }

  html.js #pillars.is-pillars-enhanced .pillars-scroll{
    height: 100%;
    overflow: clip;
  }

  html.js #pillars.is-pillars-enhanced .pillars-track{
    display: flex;
    width: max-content;
    height: 100%;
    will-change: transform;
  }

  html.js #pillars.is-pillars-enhanced .pillars-panel{
    flex: 0 0 var(--pillars-panel-width, 100%);
    width: var(--pillars-panel-width, 100%);
    min-height: 0;
    height: 100%;
    overflow: clip;
  }
}

/* ===============================
   BEDRIJFSEVENTS — dark editorial page
   Page-scoped overrides that keep the global type tokens intact.
   =============================== */

body.bedrijfsevents-page,
body.bedrijfsevents-page #main,
.bedrijfsevents-page .event-details,
.bedrijfsevents-page #logo-wall,
.bedrijfsevents-page #engage.event-engage{
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.bedrijfsevents-page #hero.hero--bedrijfsevents{
  inline-size: 100%;
  max-inline-size: 100vw;
  min-height: 100svh;
  display: grid;
  place-items: center;
  place-content: center; /* echte H+V centrering — overschrijft de geërfde flex-end van #hero */
  padding: clamp(7rem, 16vh, 11rem) var(--page-pad-inline) clamp(5rem, 12vh, 8rem);
  background: hsl(var(--clr-text)); /* effen zwart — geen achtergrondbeeld */
  color: hsl(var(--clr-bg));
  overflow: hidden;
  overflow: clip;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .hero-title{
  display: grid;
  justify-items: center;
  gap: clamp(0.85rem, 2vw, 1.5rem);
  width: 100%;
  max-width: min(100%, 88rem);
  margin: 0 auto;
  padding: 0;
  text-align: center;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .hero-heading{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
  /* Exact dezelfde grootte als de homepage-hero (#hero:has(.hero-bg) .hero-heading). */
  font-size: clamp(2.5rem, 9.5vw, 10rem);
  line-height: var(--lh-h1);
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .hero-heading__line{
  justify-content: center;
  width: 100%;
  max-width: 100%;
  gap: 0.14em;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .hero-title .supporting-copy--hero{
  max-width: none;
  margin-top: 0;
  text-align: center;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .scroll-indicator{
  display: flex;
  visibility: visible;
  opacity: 1;
  top: 50%;
  right: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%);
  color: currentColor;
  z-index: 30;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .scroll-line{
  height: 6rem;
}

.bedrijfsevents-page #hero.hero--bedrijfsevents .scroll-indicator--event-mobile{
  display: none;
}

.bedrijfsevents-page .event-readable{
  display: grid;
  gap: clamp(5rem, 11vw, 10rem);
  max-width: min(100%, 92rem);
  padding-block: clamp(5rem, 12vw, 10rem);
}

.bedrijfsevents-page .event-section{
  display: grid;
  grid-template-columns: minmax(7rem, 0.28fr) minmax(0, 0.72fr);
  column-gap: clamp(2rem, 8vw, 8rem);
  row-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.bedrijfsevents-page :where(.event-section, .event-section__head, .editorial-copy, .event-section__tail, .event-format, .event-format__body, .seo-faq__item, .seo-related__item){
  min-width: 0;
  max-width: 100%;
}

.bedrijfsevents-page .event-section__head{
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: inherit;
  column-gap: inherit;
  row-gap: clamp(1rem, 2vw, 1.5rem);
  align-items: start;
  margin: 0;
}

.bedrijfsevents-page .event-section__head > .seo-section__eyebrow{
  grid-column: 1;
  margin-top: 0.12em;
  color: currentColor;
}

.bedrijfsevents-page .event-section__head > :where(.seo-section__title, .seo-section__intro, .event-statement),
.bedrijfsevents-page .event-section__tail{
  grid-column: 2;
}

body.bedrijfsevents-page .event-section .event-statement{
  max-width: 18ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2.8rem, 5.2vw, 5.75rem);
  line-height: 0.86;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.bedrijfsevents-page .editorial-copy,
.bedrijfsevents-page .event-section__tail,
.bedrijfsevents-page .seo-section__intro,
.bedrijfsevents-page .event-format p,
.bedrijfsevents-page .seo-faq__answer,
.bedrijfsevents-page .seo-related__item p{
  color: currentColor;
}

.bedrijfsevents-page .seo-faq__answer :where(a, strong){
  color: hsl(var(--clr-bg));
}

.bedrijfsevents-page .event-details :where(a){
  overflow-wrap: anywhere;
}

.bedrijfsevents-page .event-details :where(p, li){
  max-width: 68ch;
}

.bedrijfsevents-page .event-details :where(strong){
  font-weight: var(--fw-bold);
}

.bedrijfsevents-page :where(.event-details, .event-formats, #engage.event-engage) :where(.editorial-copy, .event-section__tail, .seo-section__intro, .format-row__body, .seo-faq__answer, .seo-related__item p) strong{
  color: hsl(var(--clr-bg));
  font-weight: var(--fw-bold);
}

body.bedrijfsevents-page .editorial-copy.editorial-copy--large p{
  max-width: 19ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(2.5rem, 5.8vw, 6.5rem);
  line-height: 0.9;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: hsl(var(--clr-bg));
}

.bedrijfsevents-page .event-format-list{
  grid-column: 1 / -1;
  display: grid;
  gap: clamp(3.5rem, 7vw, 6.5rem);
  list-style: none;
  margin: clamp(1rem, 3vw, 2rem) 0 0;
  padding: 0;
}

.bedrijfsevents-page .event-format{
  display: grid;
  grid-template-columns: minmax(7rem, 0.34fr) minmax(0, 0.66fr);
  column-gap: clamp(2rem, 8vw, 8rem);
  align-items: start;
}

.bedrijfsevents-page .event-format__num{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  color: currentColor;
}

.bedrijfsevents-page .event-format__body{
  display: grid;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}

.bedrijfsevents-page .event-format__title{
  max-width: 8ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(4.5rem, 10vw, 11rem);
  line-height: 0.78;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

.bedrijfsevents-page .event-section__tail{
  display: grid;
  gap: var(--content-gap);
  max-width: 42rem;
}

.bedrijfsevents-page :where(.seo-card, .seo-faq__item, .seo-faq__item:last-child, .seo-related, .seo-related__item, .seo-quote){
  border: 0;
}

.bedrijfsevents-page #logo-wall.event-logo-wall{
  min-height: auto;
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5rem);
  padding: clamp(5rem, 12vw, 10rem) var(--page-pad-inline);
  scroll-margin-top: 0;
}

.bedrijfsevents-page #logo-wall .logo-wall__supporting{
  position: static;
  max-width: none;
  margin: 0;
  text-align: center;
  color: currentColor;
  opacity: 1;
}

.bedrijfsevents-page #logo-wall .logo-wall__grid{
  max-width: 68rem;
}

.bedrijfsevents-page #logo-wall .logo-wall__item img{
  filter: grayscale(1) brightness(0) invert(1) contrast(0.92);
  opacity: 1;
}

.bedrijfsevents-page .event-section--quote{
  display: block;
}

.bedrijfsevents-page .seo-quote{
  padding: 0;
}

/* Intro-statement onder de hero-media-split (zelfde visuele gewicht als h3 / Walking) */
.editorial-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h3);
  font-size: var(--type-heading);
  color: currentColor;
}

/* Quote-blok — zelfde type-behandeling als .editorial-heading (intro-statement). */
body.bedrijfsevents-page .event-section--quote .seo-quote p{
  max-width: min(100%, 48rem);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h3);
  font-size: var(--type-heading);
  color: currentColor;
  margin-inline: auto;
  text-align: center;
}

.bedrijfsevents-page .seo-quote .seo-meta{
  display: block;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  text-align: center;
  color: currentColor;
}

.bedrijfsevents-page .seo-faq{
  align-self: flex-end;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: min(100%, 40rem);
  max-width: 40rem;
}

.bedrijfsevents-page .seo-faq__item{
  display: grid;
  gap: clamp(0.55rem, 1.3vw, 0.85rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.16);
}

.bedrijfsevents-page .seo-faq__item:first-child{
  padding-top: 0;
  border-top: 0;
}

.bedrijfsevents-page .seo-faq__item:last-child{
  padding-bottom: 0;
  border-bottom: 0;
}

.bedrijfsevents-page .seo-faq__question{
  max-width: 26ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(1.5rem, 1.15rem + 1.05vw, 2.25rem);
  line-height: 1.05;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

.bedrijfsevents-page .seo-faq__answer{
  margin-top: 0;
  max-width: 36rem;
}

.bedrijfsevents-page .seo-faq__cta{
  margin-top: clamp(0.3rem, 0.9vw, 0.65rem);
}

.bedrijfsevents-page .seo-related{
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1.75rem, 4vw, 3rem);
  width: min(100%, 40rem);
  padding: 0;
}

.bedrijfsevents-page .seo-related__grid{
  align-self: stretch;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.bedrijfsevents-page .seo-related__item{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.4rem, 1vw, 0.65rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid hsl(var(--clr-text) / 0.16);
}

.bedrijfsevents-page .seo-related__item:first-child{
  padding-top: 0;
  border-top: 0;
}

.bedrijfsevents-page .seo-related__title{
  max-width: none;
  font-size: clamp(1.5rem, 1.15rem + 1.05vw, 2.25rem);
  line-height: 1.05;
}

.bedrijfsevents-page .seo-related__desc{
  max-width: 34rem;
}

.bedrijfsevents-page #engage.event-engage{
  padding-block: clamp(5rem, 12vw, 10rem);
}

/* ===============================
   PRAKTISCH / VERDER LEZEN — witte full-bleed editorial banden
   =============================== */
.bedrijfsevents-page .event-band{
  padding-inline: var(--page-pad-inline);
  padding-block: clamp(4.5rem, 11vw, 9rem);
}

.bedrijfsevents-page .event-band--light{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.bedrijfsevents-page .event-band__inner{
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  max-width: min(100%, 88rem);
  margin-inline: auto;
}

.bedrijfsevents-page .event-band__head{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.7rem, 1.6vw, 1.1rem);
}

.bedrijfsevents-page .event-band__kicker{
  margin: 0;
}

/* Verder lezen — gespiegeld: titel rechts, links links */
.bedrijfsevents-page .event-band--related .event-band__head{
  align-items: flex-end;
  text-align: right;
}

/* Witte band: links & strong donker (override van de dark-page-regels) */
.bedrijfsevents-page .event-band--light .seo-faq__answer :where(a, strong),
.bedrijfsevents-page .event-band--light .seo-faq__item > a{
  color: hsl(var(--clr-text));
}

@media (max-width: 900px){
  .bedrijfsevents-page .event-section,
  .bedrijfsevents-page .event-section__head,
  .bedrijfsevents-page .event-format{
    grid-template-columns: 1fr;
  }

  .bedrijfsevents-page .event-section__head > .seo-section__eyebrow,
  .bedrijfsevents-page .event-section__head > :where(.seo-section__title, .seo-section__intro, .event-statement),
  .bedrijfsevents-page .event-section__tail,
  .bedrijfsevents-page .seo-faq,
  .bedrijfsevents-page .seo-related{
    grid-column: 1;
  }

  .bedrijfsevents-page .seo-faq,
  .bedrijfsevents-page .seo-related{
    align-self: flex-start;
  }

  .bedrijfsevents-page .event-band--related .event-band__head{
    align-items: flex-start;
    text-align: left;
  }
}

@media (max-width: 600px){
  .bedrijfsevents-page #hero.hero--bedrijfsevents{
    min-height: 100svh;
    padding-top: clamp(6rem, 18svh, 8rem);
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents .hero-title{
    margin-top: 0;
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents .hero-title .supporting-copy--hero{
    width: min(100%, 30ch);
    text-wrap: balance;
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents .scroll-indicator{
    right: clamp(2.25rem, 10vw, 3rem);
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents .scroll-indicator--event-mobile{
    position: absolute;
    top: 50%;
    right: auto;
    left: clamp(1.25rem, 6vw, 1.75rem);
    transform: translateY(-50%);
    display: flex;
    z-index: 30;
    color: hsl(var(--clr-bg));
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents > .scroll-indicator:not(.scroll-indicator--event-mobile){
    display: none;
  }

  .bedrijfsevents-page #hero.hero--bedrijfsevents .hero-heading__line,
  .bedrijfsevents-page #hero.hero--bedrijfsevents .hero-heading__line--nowrap{
    white-space: normal;
  }

  .bedrijfsevents-page .event-readable{
    gap: clamp(4rem, 18vw, 6rem);
    padding-block: clamp(4rem, 18vw, 6rem);
  }

  body.bedrijfsevents-page .event-section .event-statement{
    max-width: min(100%, 21.5rem);
    font-size: clamp(2.35rem, 9.5vw, 3.2rem);
  }

  .bedrijfsevents-page .seo-section__title{
    max-width: min(100%, 21.5rem);
    font-size: clamp(3rem, 13vw, 4.2rem);
    overflow-wrap: break-word;
  }

  .bedrijfsevents-page .event-format__title{
    max-width: min(100%, 7ch);
    font-size: clamp(4rem, 20vw, 6.8rem);
  }

  .bedrijfsevents-page :where(.editorial-copy, .event-section__tail, .seo-section__intro, .event-format p, .seo-faq__answer, .seo-related__item p){
    width: min(100%, 21.5rem);
  }

  body.bedrijfsevents-page .editorial-copy.editorial-copy--large p{
    font-size: clamp(2.7rem, 13vw, 4.8rem);
  }
}

/* Bedrijfsevents — homepage rhythm */
.bedrijfsevents-page .event-essence{
  --essence-pad-block: clamp(1.5rem, 6vh, 4rem);
  --essence-title-size: clamp(3.25rem, 12vh, 8.75rem);
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  padding-inline: var(--page-pad-inline);
  padding-block: var(--essence-pad-block);
  display: flex;
  align-items: center;
  min-height: calc(var(--vh) * 100);
  position: relative;
  overflow: clip;
}

@supports (min-height: 100svh){
  .bedrijfsevents-page .event-essence{
    --essence-pad-block: clamp(1.5rem, 6svh, 4rem);
    --essence-title-size: clamp(3.25rem, 12svh, 8.75rem);
    min-height: 100svh;
  }
}

.bedrijfsevents-page .event-essence:focus{
  outline: none;
}

.bedrijfsevents-page .event-essence .split-layout{
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  row-gap: clamp(0.65rem, 2.4vh, 1.45rem);
  align-items: flex-start;
  align-content: center;
}

.bedrijfsevents-page .event-essence .split-layout__left,
.bedrijfsevents-page .event-essence .split-layout__right,
.bedrijfsevents-page .event-essence .split-layout__story{
  max-width: 100%;
}

.bedrijfsevents-page .event-essence .split-layout__left{ justify-self: start; }
.bedrijfsevents-page .event-essence .split-layout__story{ justify-self: center; }
.bedrijfsevents-page .event-essence .split-layout__right{ justify-self: end; }

.bedrijfsevents-page .event-essence .display-heading{
  font-size: var(--essence-title-size);
  line-height: 0.82;
}

.bedrijfsevents-page .event-essence .essence-story{
  display: grid;
  gap: 0.1rem;
  max-width: min(100%, 21rem);
  text-align: right;
  text-wrap: balance;
}

.bedrijfsevents-page .event-essence .essence-story__line{
  display: block;
}

.media-text-split{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  padding: clamp(4rem, 14vw, 9rem) var(--page-pad-inline) clamp(4rem, 14vw, 9rem) 0;
  display: grid;
  grid-template-columns: minmax(18rem, 0.46fr) minmax(0, 0.54fr);
  gap: clamp(2rem, 7vw, 7rem);
  align-items: center;
}

.media-text-split__media{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.media-text-split__media picture{
  display: block;
  width: 100%;
  height: 100%;
}

.media-text-split__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.media-text-split__content{
  display: grid;
  gap: clamp(1.1rem, 2.4vw, 1.75rem);
  max-width: min(100%, 58rem);
  justify-self: start;
  text-align: left;
}

.media-text-split__heading{
  margin: 0;
  text-wrap: balance;
  text-align: left;
}

.media-text-split .editorial-copy{
  width: min(100%, 33rem);
  color: currentColor;
}

.bedrijfsevents-page .event-formats,
.bedrijfsevents-page #formats.event-formats{
  padding-inline: var(--page-pad-inline);
  padding-block: clamp(4.5rem, 14vw, 9rem);
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.bedrijfsevents-page .event-formats .formats-header__text{
  max-width: 18rem;
}

/* ===============================
   FORMATS — editorial alternating layout
   (vervangt de oude .formats-grid/.formats-card weergave)
   =============================== */

.bedrijfsevents-page .event-formats .formats-editorial{
  --format-row-gap: clamp(5rem, 12vh, 10rem);
  margin-top: clamp(3rem, 8vh, 5rem);
  display: flex;
  flex-direction: column;
  gap: var(--format-row-gap);
}

.bedrijfsevents-page .format-row{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}

.bedrijfsevents-page .format-row__copy{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 2.4vh, 1.6rem);
  max-width: 32rem;
}

.bedrijfsevents-page .format-row__head,
.bedrijfsevents-page .format-row__foot{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.6rem, 1.6vh, 1rem);
  width: 100%;
}

.bedrijfsevents-page .format-row__num{
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: currentColor;
}

.bedrijfsevents-page .format-row__title{
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-h3);
  font-size: var(--type-heading);
  color: currentColor;
}

.bedrijfsevents-page .format-row__body{
  margin: 0;
  max-width: 28rem;
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--fw-regular);
  color: currentColor;
}

.bedrijfsevents-page .format-row__cta{
  margin-top: clamp(0.25rem, 1vh, 0.6rem);
}

.bedrijfsevents-page .format-row__media{
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: hsl(var(--clr-bg) / 0.08);
  overflow: hidden;
}

.bedrijfsevents-page .format-row__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* <picture>-wrapper mag de height-chain niet breken: het figure draagt de
   aspect-ratio, de img vult met height:100% — de picture moet die doorgeven. */
.bedrijfsevents-page .format-row__media picture{
  display: block;
  width: 100%;
  height: 100%;
}

/* (event-formats__more is verwijderd: combine-messaging staat nu in
   format-row 03 'Een combinatie' zelf.) */

.bedrijfsevents-page .event-moments{
  min-height: calc(var(--vh) * 100);
  padding: clamp(5rem, 12vw, 10rem) var(--page-pad-inline);
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  display: grid;
  grid-template-columns: minmax(9rem, 0.32fr) minmax(0, 0.48fr) minmax(8rem, 0.2fr);
  grid-template-rows: auto auto;
  gap: clamp(1.5rem, 5vw, 5rem);
  align-items: center;
  overflow: hidden;
}

@supports (min-height: 100svh){
  .bedrijfsevents-page .event-moments{
    min-height: 100svh;
  }
}

.bedrijfsevents-page .event-moments__image{
  margin: 0;
  overflow: hidden;
}

.bedrijfsevents-page .event-moments__image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bedrijfsevents-page .event-moments__image--left{
  align-self: start;
}

.bedrijfsevents-page .event-moments__image--left img{
  aspect-ratio: 4 / 5;
}

.bedrijfsevents-page .event-moments__image--right{
  align-self: end;
  margin-top: clamp(5rem, 14vw, 12rem);
}

.bedrijfsevents-page .event-moments__image--right img{
  aspect-ratio: 3 / 4;
}

.bedrijfsevents-page .event-moments__copy{
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  justify-items: start;
}

.bedrijfsevents-page .event-moments .pillars-statement{
  max-width: 12ch;
}

.bedrijfsevents-page .event-moments .pillars-body{
  max-width: 31rem;
}

.bedrijfsevents-page .event-moments__note{
  grid-column: 2 / 4;
  justify-self: end;
  max-width: 18rem;
  color: currentColor;
  text-align: right;
}

@media (min-width: 900px){
  .bedrijfsevents-page .event-essence .split-layout{
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(0.75rem, 2vw, 1.6rem);
    row-gap: clamp(0.65rem, 1.8vh, 1.35rem);
    align-items: flex-start;
  }

  .bedrijfsevents-page .event-essence .split-layout__left{
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: flex-start;
  }

  .bedrijfsevents-page .event-essence .split-layout__right{
    grid-column: 7 / -1;
    grid-row: 1;
    align-self: flex-start;
    margin-top: 0;
  }

  .bedrijfsevents-page .event-essence .split-layout__story{
    grid-column: 7 / -1;
    grid-row: 2;
    align-self: flex-start;
    justify-self: end;
    margin-top: clamp(0.4rem, 1.8vh, 1rem);
  }

  /* Format-row: 2-koloms editorial layout met alternerende plaatsing.
     Beelden lopen tegen de viewport-rand (full-bleed via negatieve margin).
     Per rij iets andere ritmiek: kolombreedtes, aspect-ratio, vertical offset. */
  .bedrijfsevents-page .format-row{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
    align-items: center;
  }

  .bedrijfsevents-page .format-row__copy{
    max-width: 30rem;
  }

  .bedrijfsevents-page .format-row--copy-left .format-row__copy{
    grid-column: 1;
    grid-row: 1;
  }

  .bedrijfsevents-page .format-row--copy-left .format-row__media{
    grid-column: 2;
    grid-row: 1;
    margin-right: calc(var(--page-pad-inline) * -1);
  }

  .bedrijfsevents-page .format-row--copy-right .format-row__media{
    grid-column: 1;
    grid-row: 1;
    margin-left: calc(var(--page-pad-inline) * -1);
  }

  .bedrijfsevents-page .format-row--copy-right .format-row__copy{
    grid-column: 2;
    grid-row: 1;
  }

  /* 01 Walking — editorial split: nummer + titel linksboven, body+CTA licht
     ingesprongen eronder, vierkant beeld rechts (verticaal gecentreerd). */
  .bedrijfsevents-page .format-row--editorial-split{
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    column-gap: clamp(2.5rem, 6vw, 5.5rem);
  }

  .bedrijfsevents-page .format-row--editorial-split .format-row__copy{
    max-width: 33rem;
    gap: clamp(1.6rem, 4vh, 2.75rem);
  }

  .bedrijfsevents-page .format-row--editorial-split .format-row__head{
    max-width: 100%;
  }

  .bedrijfsevents-page .format-row--editorial-split .format-row__foot{
    max-width: 30rem;
    padding-left: clamp(1.75rem, 4vw, 3.5rem);
  }

  /* Selector draagt --copy-left mee zodat hij op eigen kracht wint van
     .format-row--copy-left .format-row__media (die een negatieve margin-right
     zet voor de full-bleed variant). Voorheen loste een !important dat op. */
  .bedrijfsevents-page .format-row--copy-left .format-row__media--inset{
    margin-right: 0;
    align-self: center;
    width: 100%;
    max-width: clamp(24rem, 38vw, 38rem);
    margin-left: auto;
    aspect-ratio: 1 / 1;
  }

  /* 02 Seated — kleinere portret-foto links (niet full-bleed),
     copy rechts met titel boven en body onder met flink wat ademruimte. */
  .bedrijfsevents-page .formats-editorial > .format-row:nth-child(2){
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: stretch;
    column-gap: clamp(2rem, 5vw, 4rem);
    margin-top: clamp(2rem, 6vw, 5rem);
    min-height: clamp(28rem, 60vh, 38rem);
  }

  .bedrijfsevents-page .formats-editorial > .format-row:nth-child(2) .format-row__media{
    margin-left: 0;
    align-self: center;
    width: 100%;
    max-width: clamp(20rem, 32vw, 30rem);
    aspect-ratio: 4 / 5;
  }

  .bedrijfsevents-page .formats-editorial > .format-row:nth-child(2) .format-row__copy{
    padding-left: clamp(0.5rem, 3vw, 3rem);
    height: 100%;
    justify-content: space-between;
    max-width: none;
    gap: clamp(3rem, 9vh, 6rem);
  }

  .bedrijfsevents-page .formats-editorial > .format-row:nth-child(2) .format-row__foot{
    max-width: 28rem;
  }

  /* 03 Een combinatie — titel-blok links, body+CTA rechts (geen foto).
     Head en foot staan direct in de article (geen __copy wrapper). */
  .bedrijfsevents-page .format-row--copy-split{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 5rem);
    margin-top: clamp(2rem, 6vw, 5rem);
  }

  .bedrijfsevents-page .format-row--copy-split > .format-row__head{
    grid-column: 1;
    grid-row: 1;
  }

  .bedrijfsevents-page .format-row--copy-split > .format-row__foot{
    grid-column: 2;
    grid-row: 1;
    max-width: 32rem;
    padding-top: clamp(0.5rem, 2vw, 1.5rem);
    gap: clamp(1rem, 2.4vh, 1.5rem);
  }
}

@media (max-width: 900px){
  /* Format-row: stacked layout, beeld eerst dan copy (consistent op mobiel) */
  .bedrijfsevents-page .format-row,
  .bedrijfsevents-page .format-row--copy-left,
  .bedrijfsevents-page .format-row--copy-right,
  .bedrijfsevents-page .format-row--editorial-split,
  .bedrijfsevents-page .format-row--copy-split,
  .bedrijfsevents-page .formats-editorial > .format-row:nth-child(n){
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-top: 0;
    min-height: 0;
    align-items: start;
  }

  /* Reset per-row paddings + split-specifieke gedrag */
  .bedrijfsevents-page .formats-editorial > .format-row .format-row__copy,
  .bedrijfsevents-page .format-row--editorial-split .format-row__copy,
  .bedrijfsevents-page .format-row--editorial-split .format-row__foot,
  .bedrijfsevents-page .format-row--copy-split > .format-row__head,
  .bedrijfsevents-page .format-row--copy-split > .format-row__foot{
    padding: 0;
  }

  .bedrijfsevents-page .format-row--editorial-split .format-row__copy{
    height: auto;
    justify-content: flex-start;
    gap: clamp(1rem, 2.4vh, 1.6rem);
  }

  /* Combinatie row op mobiel: head boven, foot onder */
  .bedrijfsevents-page .format-row--copy-split > .format-row__head{
    grid-column: 1;
    grid-row: auto;
    order: 1;
  }
  .bedrijfsevents-page .format-row--copy-split > .format-row__foot{
    grid-column: 1;
    grid-row: auto;
    order: 2;
    max-width: 100%;
    margin-top: clamp(1.5rem, 4vw, 2.5rem);
  }

  .bedrijfsevents-page .format-row__media,
  .bedrijfsevents-page .format-row__media--inset{
    order: 1;
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 5;
    width: min(74%, 20rem);
    margin-inline: 0;
  }

  .bedrijfsevents-page .format-row__copy{
    order: 2;
    grid-column: 1;
    grid-row: auto;
    max-width: 100%;
  }

  .bedrijfsevents-page .format-row + .format-row{
    margin-top: 0;
  }

  .bedrijfsevents-page .event-essence{
    --essence-pad-block: clamp(1.25rem, 4vh, 2.35rem);
    --essence-title-size: clamp(3.05rem, 9vh, 4.8rem);
  }

  @supports (min-height: 100svh){
    .bedrijfsevents-page .event-essence{
      --essence-pad-block: clamp(1.25rem, 4svh, 2.35rem);
      --essence-title-size: clamp(3.05rem, 9svh, 4.8rem);
    }
  }

  .bedrijfsevents-page .event-essence .display-heading{
    line-height: 0.84;
  }

  .bedrijfsevents-page .event-essence .split-layout{
    row-gap: clamp(0.55rem, 2vh, 1rem);
  }

  .bedrijfsevents-page .event-essence .split-layout__story{
    margin-top: clamp(0.25rem, 1.2vh, 0.75rem);
    justify-self: end;
  }

  .bedrijfsevents-page .event-essence .split-layout__right{
    justify-self: end;
    margin-top: clamp(0.15rem, 1vh, 0.6rem);
  }

  .bedrijfsevents-page .event-essence .essence-story{
    max-width: min(100%, 17.5rem);
    font-size: clamp(0.82rem, 2.15vh, 1rem);
  }

  .media-text-split{
    grid-template-columns: 1fr;
    padding-right: 0;
  }

  .media-text-split__media{
    order: 2;
    width: min(84vw, 22rem);
    margin-inline: var(--page-pad-inline) auto;
  }

  .media-text-split__content{
    order: 1;
    padding-right: var(--page-pad-inline);
  }

  .bedrijfsevents-page .event-moments{
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .bedrijfsevents-page .event-moments__copy,
  .bedrijfsevents-page .event-moments__image--left,
  .bedrijfsevents-page .event-moments__image--right,
  .bedrijfsevents-page .event-moments__note{
    grid-column: 1;
  }

  .bedrijfsevents-page .event-moments__image--left{
    width: min(74%, 20rem);
  }

  .bedrijfsevents-page .event-moments__image--right{
    width: min(74%, 20rem);
    margin-top: 0;
    margin-left: auto;
  }

  .bedrijfsevents-page .event-moments__note{
    justify-self: start;
    text-align: left;
  }
}

@media (max-width: 600px){
  .bedrijfsevents-page .event-formats,
  .bedrijfsevents-page .event-moments{
    padding-inline: clamp(18px, 5vw, 24px);
  }

  .media-text-split{
    padding-inline: 0;
  }

  .media-text-split__media{
    width: min(82vw, 20.5rem);
  }

  .media-text-split__content{
    padding-inline: clamp(18px, 5vw, 24px);
  }

  .media-text-split__heading{
    max-width: none;
  }

  .bedrijfsevents-page .event-formats .formats-title{
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .bedrijfsevents-page .format-row__media,
  .bedrijfsevents-page .format-row__media--inset{
    width: min(82vw, 21rem);
    max-width: 100%;
    margin-inline: 0 auto;
  }

  .bedrijfsevents-page .event-moments__image--left{
    width: min(78vw, 20rem);
  }

  .bedrijfsevents-page .event-moments__image--right{
    width: min(58vw, 15rem);
  }

  .bedrijfsevents-page .event-moments .pillars-statement{
    font-size: clamp(3.35rem, 16vw, 5.2rem);
  }
}

/* ===============================
   WALKING — eigen ritme: positionering en spacing
   (laag boven .bedrijfsevents-page; geen nieuwe componenten)
   =============================== */

.walking-page .media-text-split{
  gap: clamp(2.5rem, 9vw, 7rem);
}
.walking-page .media-text-split__content{
  max-width: min(100%, 36rem);
}

/* Intro-beeld: kleiner dan default op desktop, mobile blijft op bedrijfsevents-default */
@media (min-width: 900px){
  .walking-page .media-text-split{
    grid-template-columns: minmax(14rem, 0.32fr) minmax(0, 0.68fr);
  }
}

/* "Wat het is" — editorial spread met 12-koloms grid en twee beelden */
.walking-page #zo-werkt{
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: var(--page-pad-inline);
}

.walking-page .walking-anders{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 5vw, 4rem);
  max-width: min(100%, 92rem);
  margin-inline: auto;
  align-items: start;
}

.walking-page .walking-anders__intro{
  grid-column: 1 / span 7;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.walking-page .walking-anders__kicker,
.walking-page .walking-anders__title{
  margin: 0;
}

.walking-page .walking-anders__title{
  max-width: none;
}

.walking-page .walking-anders__lede{
  max-width: 36rem;
}

.walking-page .walking-anders__media--portrait{
  grid-column: 8 / -1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

.walking-page .walking-anders__media--portrait img,
.walking-page .walking-anders__media--landscape img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.walking-page .walking-anders__statement{
  grid-column: 2 / span 10;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  max-width: none;
}

.walking-page .walking-anders__media--landscape{
  grid-column: 1 / span 5;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.walking-page .walking-anders__body{
  grid-column: 7 / -1;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 38rem;
}

.walking-page .walking-anders__body a{
  margin-top: clamp(0.4rem, 1.2vw, 0.85rem);
  justify-self: start;
}

@media (max-width: 900px){
  .walking-page .walking-anders{
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 6vw, 3.5rem);
  }
  .walking-page .walking-anders__media--portrait,
  .walking-page .walking-anders__media--landscape{
    width: min(80%, 20rem);
    margin: 0 auto;
    aspect-ratio: 4 / 5;
  }
  .walking-page .walking-anders__statement{
    text-align: left;
    margin: 0;
  }
  .walking-page .walking-anders__lede,
  .walking-page .walking-anders__body{
    max-width: none;
    margin-top: 0;
  }
}

/* Waar het past: linker beeld lager en iets kleiner (desktop) */
@media (min-width: 900px){
  .walking-page .event-moments__image--left{
    align-self: end;
    margin-top: clamp(5rem, 14vw, 12rem);
    width: min(100%, 22rem);
  }
  .walking-page .event-moments__image--right{
    align-self: start;
    margin-top: 0;
  }
}

@media (max-width: 900px){
  .walking-page .event-moments__image--left{
    width: min(55%, 13rem);
  }
}

.walking-page .event-moments__copy{
  justify-items: end;
  text-align: right;
}
.walking-page .event-moments .pillars-statement,
.walking-page .event-moments .pillars-body{
  text-align: right;
  margin-left: auto;
}

.walking-page .event-band__inner{
  max-width: min(100%, 76rem);
  gap: clamp(3rem, 7vw, 5rem);
}

.walking-page #praktisch .event-band__head{
  align-items: flex-end;
  text-align: right;
}
.walking-page #praktisch .seo-faq{
  align-self: flex-start;
}

.walking-page .event-band--related .event-band__head{
  align-items: flex-start;
  text-align: left;
}
.walking-page .event-band--related .seo-related{
  align-self: flex-end;
}


/* ===============================
   SEATED FORMULE — page-scoped tweaks
   Mirrort de Walking-formule met eigen ritme:
   intro-beeld linksonder, editorial spread met twee
   staande beelden (geen landscape), event-moments
   asymmetrisch maar gespiegeld t.o.v. Walking.
   =============================== */

/* Intro media-text-split: landscape intro-beeld (4:3),
   gebalanceerde kolommen en verticaal gecentreerd op desktop. */
.seated-page .media-text-split__content{
  max-width: min(100%, 36rem);
}

.seated-page .media-text-split__media{
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px){
  .seated-page .media-text-split{
    grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr);
    align-items: center;
  }
}

/* "Wat het is" — editorial spread met 12-koloms grid en twee staande beelden */
.seated-page #wat-het-is{
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: var(--page-pad-inline);
}

.seated-page .seated-anders{
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2rem, 5vw, 4rem);
  max-width: min(100%, 92rem);
  margin-inline: auto;
  align-items: start;
}

.seated-page .seated-anders__intro{
  grid-column: 1 / span 8;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.seated-page .seated-anders__kicker,
.seated-page .seated-anders__title{
  margin: 0;
}

.seated-page .seated-anders__title{
  max-width: none;
}

.seated-page .seated-anders__lede{
  max-width: 38rem;
}

/* Eerste staande beeld: rechtsboven, kleiner formaat */
.seated-page .seated-anders__media--portrait-a{
  grid-column: 9 / -1;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
}

/* Tweede beeld: linksonder, landscape (4:3) */
.seated-page .seated-anders__media--landscape{
  grid-column: 1 / span 5;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.seated-page .seated-anders__media--portrait-a img,
.seated-page .seated-anders__media--landscape img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Centrale statement tussen de twee beelden */
.seated-page .seated-anders__statement{
  grid-column: 2 / span 10;
  margin: 0;
  text-align: center;
  text-wrap: balance;
  max-width: none;
}

/* Body copy aansluitend op tweede beeld, rechts */
.seated-page .seated-anders__body{
  grid-column: 7 / -1;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  max-width: 38rem;
  align-self: center;
}

.seated-page .seated-anders__body a{
  margin-top: clamp(0.4rem, 1.2vw, 0.85rem);
  justify-self: start;
}

@media (max-width: 900px){
  .seated-page .seated-anders{
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 6vw, 3.5rem);
  }
  .seated-page .seated-anders__media--portrait-a{
    width: min(80%, 20rem);
    margin: 0 auto;
    aspect-ratio: 4 / 5;
  }
  .seated-page .seated-anders__media--landscape{
    width: min(90%, 26rem);
    margin: 0 auto;
    aspect-ratio: 4 / 3;
  }
  .seated-page .seated-anders__statement{
    text-align: left;
    margin: 0;
  }
  .seated-page .seated-anders__lede,
  .seated-page .seated-anders__body{
    max-width: none;
    margin-top: 0;
  }
}

/* Waar het past: één landscape-beeld (4:3) rechts, copy links
   en verticaal gecentreerd. */
.seated-page .event-moments__image--left img{
  aspect-ratio: 4 / 3;
}

@media (min-width: 900px){
  .seated-page .event-moments{
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    grid-template-rows: auto auto;
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: clamp(1.5rem, 4vw, 3rem);
    align-items: center;
  }
  .seated-page .event-moments__copy{
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }
  .seated-page .event-moments__image--left{
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin-top: 0;
    width: 100%;
  }
  .seated-page .event-moments__note{
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    text-align: left;
    margin-top: clamp(1rem, 3vw, 2rem);
  }
}

@media (max-width: 900px){
  .seated-page .event-moments__image--left{
    width: min(86%, 24rem);
  }
}

/* Event-bands: zelfde ritme als Walking, kop links voor 'Praktisch'. */
.seated-page .event-band__inner{
  max-width: min(100%, 76rem);
  gap: clamp(3rem, 7vw, 5rem);
}

.seated-page .event-band--related .event-band__head{
  align-items: flex-start;
  text-align: left;
}


/* ===============================
   FORMULES OVERZICHT — hub-pagina
   Hub voor Walking en Seated: lede, twee cards,
   vergelijking en combinatie-blok. Eigen ritme,
   geen overlap met de detail-pagina's.
   =============================== */

/* Lede-blok: gecentreerd statement onder de hero */
.formules-overzicht-page #lede{
  padding-block: clamp(4rem, 10vw, 7rem);
  padding-inline: var(--page-pad-inline);
}

.formules-overzicht-page .formules-lede{
  max-width: min(100%, 56rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  text-align: center;
}

.formules-overzicht-page .formules-lede__kicker{
  margin: 0;
}

.formules-overzicht-page .formules-lede__statement{
  margin: 0;
  text-wrap: balance;
}

/* Cards-sectie: twee gelijke tegels met staand beeld */
.formules-overzicht-page #de-formules{
  padding-block: clamp(4rem, 10vw, 7rem);
  padding-inline: var(--page-pad-inline);
}

.formules-overzicht-page .formules-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: clamp(2.5rem, 6vw, 4rem);
  max-width: min(100%, 92rem);
  margin-inline: auto;
  align-items: start;
}

.formules-overzicht-page .formules-card{
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
}

.formules-overzicht-page .formules-card__media{
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-width: min(100%, 22rem);
  margin-inline: auto;
  position: relative; /* positioning context voor __num overlay linksboven */
  display: block;
}

.formules-overzicht-page .formules-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.formules-overzicht-page .formules-card:hover .formules-card__media img,
.formules-overzicht-page .formules-card:focus-within .formules-card__media img{
  transform: scale(1.02);
}

/* Card head: titel + subtitel gecentreerd onder de afbeelding */
.formules-overzicht-page .formules-card__head{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Nummer 01/02: in de flow, boven de afbeelding, linksgelijnd met de
   linkerrand van het beeld. Eigen max-width + margin-inline auto laat
   het cijfer mee-centreren met de afbeelding (max-width 22rem). */
.formules-overzicht-page .formules-card__num{
  margin: 0 auto;
  max-width: min(100%, 22rem);
  width: 100%;
  color: inherit;
  opacity: 1;
}

.formules-overzicht-page .formules-card__title-block{
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: clamp(0.15rem, 0.5vw, 0.4rem);
}

.formules-overzicht-page .formules-card__title{
  margin: 0;
}

.formules-overzicht-page .formules-card__subtitle{
  margin: 0;
  /* Geen opacity: subtitle in volle tekstkleur, conform sitebrede stijl */
}

.formules-overzicht-page .formules-card__teaser{
  margin: 0;
  max-width: 32rem;
  text-align: center;
  margin-inline: auto;
}

.formules-overzicht-page .formules-card__link{
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  justify-self: center;
  align-self: center;
}

/* Cards staan gelijk uitgelijnd (geen offset op Seated) */
.formules-overzicht-page .formules-cards{
  align-items: stretch;
}

@media (max-width: 760px){
  .formules-overzicht-page .formules-cards{
    grid-template-columns: 1fr;
  }
  .formules-overzicht-page .formules-card__media{
    width: min(100%, 26rem);
    margin-inline: auto;
  }
}

/* Vergelijking: donkere sectie, definition-grid */
.formules-overzicht-page #vergelijking{
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: var(--page-pad-inline);
}

.formules-overzicht-page .vergelijking-header{
  max-width: min(100%, 76rem);
  margin: 0 auto clamp(2.5rem, 6vw, 4.5rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.formules-overzicht-page .vergelijking-header__kicker{
  margin: 0;
}

.formules-overzicht-page .vergelijking-header__title{
  margin: 0;
}

/* Vereenvoudigde tabel-look:
   - Geen buitenkader
   - Per rij één horizontale onderlijn over Walking + Seated (niet onder aspect)
   - Eén verticale lijn tussen Walking en Seated
   - Aspect-kolom heeft geen randen, hangt links naast de tabel */
.formules-overzicht-page .vergelijking-grid{
  --line: hsl(var(--clr-bg) / .25);
  max-width: min(100%, 76rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns:
    minmax(8rem, 0.9fr)
    minmax(0, 1.4fr)
    minmax(0, 1.4fr);
  column-gap: 0;
}

/* Kolomkoppen (Walking / Seated). Aspect-cel blijft leeg, geen lijn. */
.formules-overzicht-page .vergelijking-grid__head{
  display: contents;
}

.formules-overzicht-page .vergelijking-grid__col-label{
  margin: 0;
  padding: clamp(0.75rem, 1.75vw, 1.1rem) clamp(0.85rem, 2vw, 1.25rem);
  border-bottom: 1px solid var(--line);
  text-align: center;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Aspect-kolomkop: geen rand, geen tekst (placeholder) */
.formules-overzicht-page .vergelijking-grid__col-label--aspect{
  border-bottom: 0;
  visibility: hidden;
}

/* Rij = subgrid via display:contents */
.formules-overzicht-page .vergelijking-row{
  display: contents;
}

.formules-overzicht-page .vergelijking-row__aspect,
.formules-overzicht-page .vergelijking-row__cel{
  margin: 0;
  padding: clamp(0.85rem, 2vw, 1.25rem) clamp(0.85rem, 2vw, 1.25rem);
}

/* Aspect-kolom: geen lijnen, klein uppercase label */
.formules-overzicht-page .vergelijking-row__aspect{
  align-self: start;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding-left: 0;
}

/* Walking en Seated cellen: onderlijn voor de rij */
.formules-overzicht-page .vergelijking-row__cel{
  border-bottom: 1px solid var(--line);
}

/* Eén verticale lijn tussen Walking en Seated:
   = border-right op de Walking-cel (eerste cel binnen elke rij) */
.formules-overzicht-page .vergelijking-row__cel:first-of-type{
  border-right: 1px solid var(--line);
}

.formules-overzicht-page .vergelijking-row__cel strong{
  font-weight: 600;
}

/* Merged rij: aspect-label en statement op DEZELFDE rij,
   zodat de rijhoogte identiek is aan de andere rijen.
   Verschil met normale rij: één wide cel (kolom 2/-1) zonder
   verticale scheider tussen Walking- en Seated-kolom. */
.formules-overzicht-page .vergelijking-row--merged .vergelijking-row__aspect{
  grid-column: 1;
}

.formules-overzicht-page .vergelijking-row--merged .vergelijking-row__cel--merged{
  grid-column: 2 / -1;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  /* pretty i.p.v. balance: langere cellen lopen vol, geen vroege afbreking */
  text-wrap: pretty;
}

@media (max-width: 760px){
  /* Mobile: stack naar 1 kolom als definition-list */
  .formules-overzicht-page .vergelijking-grid{
    grid-template-columns: 1fr;
  }
  .formules-overzicht-page .vergelijking-grid__head{
    display: none;
  }
  .formules-overzicht-page .vergelijking-row__aspect{
    padding-block: clamp(1rem, 3.5vw, 1.5rem) clamp(0.3rem, 1vw, 0.5rem);
    padding-left: 0;
    font-size: .8em;
  }
  .formules-overzicht-page .vergelijking-row__cel{
    padding-block: clamp(0.3rem, 1vw, 0.5rem) clamp(0.4rem, 1.25vw, 0.65rem);
    border-right: 0;
    border-bottom: 0;
  }
  .formules-overzicht-page .vergelijking-row__cel:first-of-type{
    border-right: 0;
  }
  .formules-overzicht-page .vergelijking-row__cel:last-of-type{
    border-bottom: 1px solid var(--line);
  }
  .formules-overzicht-page .vergelijking-row__cel::before{
    content: attr(data-label);
    display: block;
    opacity: .55;
    font-size: .8em;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .15em;
  }

  /* Merged onderste rij: één blok, geen Walking/Seated labels */
  .formules-overzicht-page .vergelijking-row--merged .vergelijking-row__aspect{
    grid-column: 1;
  }
  .formules-overzicht-page .vergelijking-row--merged .vergelijking-row__cel--merged{
    grid-column: 1;
    border-bottom: 1px solid var(--line);
  }
  .formules-overzicht-page .vergelijking-row--merged .vergelijking-row__cel--merged::before{
    content: none;
  }
}

/* Combinatie-statement na de vergelijking */
.formules-overzicht-page #combinatie{
  padding-block: clamp(4rem, 10vw, 7rem);
  padding-inline: var(--page-pad-inline);
}

.formules-overzicht-page .formules-combinatie{
  max-width: min(100%, 60rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
}

.formules-overzicht-page .formules-combinatie__kicker{
  margin: 0;
}

.formules-overzicht-page .formules-combinatie__statement{
  margin: 0;
  text-wrap: balance;
}

.formules-overzicht-page .formules-combinatie__body p{
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
}

.formules-overzicht-page .formules-combinatie__body p:last-child{
  margin-bottom: 0;
}

.formules-overzicht-page .formules-combinatie__link{
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  justify-self: start;
}

/* Blog-CTA: verwijzing naar notitie over event-type-keuze.
   Rechts-uitgelijnd zodat het visueel los staat van de centrale Of-beide-sectie. */
.formules-overzicht-page #kies-via-event{
  padding-block: clamp(3rem, 8vw, 5rem);
  padding-inline: var(--page-pad-inline);
}

.formules-overzicht-page .formules-blog-cta{
  max-width: min(100%, 42rem);
  margin-left: auto;
  margin-right: 0;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
  text-align: right;
  justify-items: end;
}

.formules-overzicht-page .formules-blog-cta__kicker,
.formules-overzicht-page .formules-blog-cta__statement{
  margin: 0;
}

.formules-overzicht-page .formules-blog-cta__statement{
  text-wrap: balance;
}

.formules-overzicht-page .formules-blog-cta__body{
  margin: 0;
  max-width: 38rem;
}

.formules-overzicht-page .formules-blog-cta__link{
  margin-top: clamp(0.25rem, 1vw, 0.5rem);
  justify-self: end;
}

@media (max-width: 760px){
  /* Mobile: laat het natuurlijk vloeien, niet meer rechts-vastgepind */
  .formules-overzicht-page .formules-blog-cta{
    margin-right: auto;
    text-align: left;
    justify-items: start;
  }
  .formules-overzicht-page .formules-blog-cta__link{
    justify-self: start;
  }
}


/* ===============================
   NOTITIE DETAIL — blogpost-pagina
   Witte achtergrond, content gecentreerd, tekst links.
   Geen horizontale lijnen tussen blokken. Titel-styling
   wordt overgenomen van bestaande site-classes
   (.editorial-heading e.d.) zodat geen nieuwe
   typografie wordt geïntroduceerd.
   =============================== */

/* Witte achtergrond expliciet — geen vlek van andere page-classes */
body.notitie-detail-page{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

body.notitie-detail-page #main{
  background: hsl(var(--clr-bg));
}

/* ---- Article scroll-indicator — site-stijl, rechts in beeld,
   zonder label, lijntje groeit mee met de scroll-progress.
   Reuse: zelfde positionering als de hero scroll-indicator. ---- */
.notitie-detail-page .article-progress{
  position: fixed;
  top: 50%;
  right: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%);
  width: 1px;
  height: 6rem;
  z-index: 40;
  pointer-events: none;
}

.notitie-detail-page .article-progress__line{
  display: block;
  /* Lijn vastgepind aan de onderkant: bottom blijft op zijn plek,
     top krimpt naar beneden naarmate er gescrolld wordt. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: calc(100% - var(--scroll-progress, 0%));
  background: hsl(var(--clr-text));
  transition: height .08s linear;
}

@media (max-width: 600px){
  .notitie-detail-page .article-progress{
    right: clamp(1rem, 4vw, 1.5rem);
  }
}

/* ---- Article hero — alleen layout, geen eigen typografie ---- */
.notitie-detail-page #article-hero{
  padding-block: clamp(6rem, 14vw, 10rem) clamp(1.5rem, 4vw, 2.5rem);
  padding-inline: var(--page-pad-inline);
}

.notitie-detail-page .article-hero{
  max-width: min(100%, 56rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.25rem);
  text-align: left;
}

.notitie-detail-page .article-hero__eyebrow{
  margin: 0;
}

/* H1 erft de styling van .editorial-heading (uitgesproken in HTML) */
.notitie-detail-page .article-hero__title{
  margin: 0;
}

/* Auteur-meta direct onder titel — flex-rij, geen separators */
.notitie-detail-page .article-meta{
  margin: clamp(0.85rem, 2.5vw, 1.5rem) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 2em;
  align-items: baseline;
}

.notitie-detail-page .article-meta__item{
  margin: 0;
}

/* ---- Body wrapper ---- */
.notitie-detail-page .notitie-body{
  padding-inline: var(--page-pad-inline);
  /* Geen padding-block: de blokmarges dragen het ritme, ook richting
     hero en conclusie, zodat er nergens marges op padding stapelen. */
  padding-block: clamp(1.5rem, 4vw, 3rem) 0;
}

/* Secties: gecentreerd op de pagina, tekst links binnen het block.
   GEEN horizontale lijnen tussen blokken.
   Uniform verticaal ritme: sectie, beeld en citaat dragen dezelfde
   blokmarge; aangrenzende marges vallen samen, dus de witruimte
   tussen elk paar blokken is overal exact gelijk. */
.notitie-detail-page .notitie-section{
  max-width: min(100%, 56rem);
  margin-block: clamp(2.75rem, 6vw, 4.25rem);
  margin-inline: auto;
  padding-block: 0;
}

.notitie-detail-page .notitie-section__head{
  display: flex;
  flex-direction: column;
  gap: clamp(0.4rem, 1.25vw, 0.7rem);
  margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.notitie-detail-page .notitie-section__kicker,
.notitie-detail-page .notitie-section__title{
  margin: 0;
}

.notitie-detail-page .notitie-section__body p,
.notitie-detail-page .notitie-conclusie__body p{
  margin: 0 0 clamp(1.25rem, 2.5vw, 1.9rem);
}

.notitie-detail-page .notitie-section__body p:last-child,
.notitie-detail-page .notitie-conclusie__body p:last-child{
  margin-bottom: 0;
}

/* Inline beeld — zelfde blokmarge als de secties (uniform ritme). */
.notitie-detail-page .notitie-figure{
  max-width: min(100%, 56rem);
  margin: clamp(2.75rem, 6vw, 4.25rem) auto;
}

.notitie-detail-page .notitie-figure picture{
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.notitie-detail-page .notitie-figure img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Modifier: kleiner beeld (ca. twee derde van de kolom),
   gecentreerd, nooit opgeschaald boven de intrinsieke breedte.
   Bijschrift volgt de beeldbreedte. */
.notitie-detail-page .notitie-figure--natural{
  max-width: min(100%, 31rem);
}

.notitie-detail-page .notitie-figure--natural img{
  height: auto;
}

.notitie-detail-page .notitie-figure figcaption{
  margin-top: clamp(0.5rem, 1.5vw, 0.85rem);
}

/* Inline citaat — gecentreerd op pagina, GEEN lijnen meer */
.notitie-detail-page .notitie-quote{
  max-width: min(100%, 56rem);
  margin: clamp(2.75rem, 6vw, 4.25rem) auto;
  padding-block: 0;
  text-align: center;
}

.notitie-detail-page .notitie-quote blockquote{
  margin: 0;
}

.notitie-detail-page .notitie-quote__line{
  margin: 0;
  text-wrap: balance;
}

.notitie-detail-page .notitie-quote__source{
  margin: clamp(0.75rem, 2vw, 1.1rem) 0 0;
}

/* ---- Conclusie ---- */
.notitie-detail-page #conclusie{
  /* Bovenaan geen padding: de marge van het laatste blok in de body
     bepaalt de afstand, gelijk aan alle andere blok-tussenruimtes. */
  padding-block: 0 clamp(3rem, 7vw, 5rem);
  padding-inline: var(--page-pad-inline);
}

.notitie-detail-page .notitie-conclusie{
  max-width: min(100%, 56rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.notitie-detail-page .notitie-conclusie__kicker,
.notitie-detail-page .notitie-conclusie__statement{
  margin: 0;
}

.notitie-detail-page .notitie-conclusie__body p{
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
}

.notitie-detail-page .notitie-conclusie__body p:last-child{
  margin-bottom: 0;
}

/* ---- Veelgestelde vragen op een notitie ----
   Zichtbare tegenhanger van de FAQPage-markup. Zelfde kolombreedte en ritme
   als .notitie-conclusie, zodat het als onderdeel van het artikel leest. */
.notitie-detail-page .notitie-faq{
  max-width: min(100%, 56rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.notitie-detail-page .notitie-faq__kicker,
.notitie-detail-page .notitie-faq__title{
  margin: 0;
}

.notitie-detail-page .notitie-faq .seo-faq{
  margin-top: clamp(0.25rem, 1vw, 0.75rem);
}

/* ---- Afterword: auteur-block + share + feedback-mail ----
   Compacte sectie tussen conclusie en gerelateerd. Geeft E-E-A-T
   signaal (auteur context) en biedt UX hooks (delen + reageren). */
.notitie-detail-page #afterword{
  padding-block: clamp(3rem, 7vw, 5rem);
  padding-inline: var(--page-pad-inline);
}

.notitie-detail-page .notitie-afterword{
  max-width: min(100%, 56rem);
  margin-inline: auto;
  display: grid;
  /* Kleinere gap tussen auteur en share — minder visuele gap */
  gap: clamp(1.5rem, 3.5vw, 2.25rem);
}

.notitie-detail-page .notitie-afterword > *{
  margin: 0;
}

/* Auteur-block */
.notitie-detail-page .notitie-author{
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 0.85rem);
}

.notitie-detail-page .notitie-author__kicker,
.notitie-detail-page .notitie-author__name,
.notitie-detail-page .notitie-author__bio,
.notitie-detail-page .notitie-author__link{
  margin: 0;
}

.notitie-detail-page .notitie-author__name{
  font-weight: 600;
}

/* Share row — geen horizontale lijn meer */
.notitie-detail-page .notitie-share{
  display: grid;
  gap: clamp(0.75rem, 2vw, 1.25rem);
}

.notitie-detail-page .notitie-share__kicker{
  margin: 0;
}

.notitie-detail-page .notitie-share__links{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 2em;
  padding: 0;
  margin: 0;
  list-style: none;
}

.notitie-detail-page .notitie-share__links li{
  margin: 0;
}


/* ---- Gerelateerd ---- */
.notitie-detail-page #gerelateerd{
  padding-block: clamp(4rem, 10vw, 7rem) clamp(2rem, 5vw, 3rem);
  padding-inline: var(--page-pad-inline);
}

.notitie-detail-page .notitie-gerelateerd{
  /* Smaller dan eerder zodat kaarten compacter zijn, vergelijkbaar
     met hoe ze op /notities verschijnen. */
  max-width: min(100%, 56rem);
  margin-inline: auto;
}

.notitie-detail-page .notitie-gerelateerd__head{
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.notitie-detail-page .notitie-gerelateerd__kicker,
.notitie-detail-page .notitie-gerelateerd__title{
  margin: 0;
}

/* 2-koloms grid, kaarten boven uitgelijnd, asymmetrische beeldhoogtes
   creëren visuele variatie zoals op /notities overzicht. */
.notitie-detail-page .notitie-gerelateerd__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  list-style: none;
  padding: 0;
  margin: 0;
  align-items: start;
}

.notitie-detail-page .notes-card{
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin: 0;
  list-style: none;
}

.notitie-detail-page .notes-card__media{
  display: block;
  margin: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

/* Default aspect-ratio voor --sm; --md en --lg krijgen eigen ratios */
.notitie-detail-page .notes-card .notes-card__media{ aspect-ratio: 4 / 5; }
.notitie-detail-page .notes-card--md .notes-card__media{ aspect-ratio: 4 / 3; }
.notitie-detail-page .notes-card--lg .notes-card__media{ aspect-ratio: 16 / 10; }

.notitie-detail-page .notes-card__media picture,
.notitie-detail-page .notes-card__media img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.notitie-detail-page .notes-card__media img{
  transition: transform .6s ease;
}

.notitie-detail-page .notes-card__media:hover img,
.notitie-detail-page .notes-card__media:focus-visible img{
  transform: scale(1.02);
}

.notitie-detail-page .notes-card__body{
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.25vw, 0.75rem);
}

.notitie-detail-page .notes-card__date,
.notitie-detail-page .notes-card__title{
  margin: 0;
}

/* Section-titles in het artikel én notes-card titles krijgen dezelfde
   typografische behandeling als de notes-card titles op /notities. */
.notitie-detail-page .notitie-section__title,
.notitie-detail-page .notitie-conclusie__statement,
.notitie-detail-page .notes-card__title{
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.4vw, 4.4rem);
  font-weight: var(--fw-bold);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  text-wrap: balance;
}

.notitie-detail-page .notes-card__title a{
  color: inherit;
  text-decoration: none;
}

.notitie-detail-page .notes-card__more{
  margin: 0;
  align-self: flex-start;
}

/* ---- "Terug naar alle notities" als grote CTA-knop ----
   Wrapper-spacing matched homepage CTA (.more). Symmetrische
   margin-top + margin-bottom omdat hier (anders dan op homepage)
   geen omliggende sectie met padding-bottom zit. */
.notitie-detail-page .notitie-back{
  margin-top: clamp(56px, 12vh, 160px);
  margin-bottom: clamp(56px, 12vh, 160px);
  padding-block: var(--space-lg);
  padding-inline: var(--page-pad-inline);
  display: flex;
  justify-content: center;
  text-align: center;
}

.notitie-detail-page .notitie-back__link{
  display: inline-block;
}

@media (max-width: 760px){
  .notitie-detail-page .notitie-gerelateerd__grid{
    grid-template-columns: 1fr;
  }
}


body.contact-page .contact-form .contact-privacy-note{
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-normal);
  letter-spacing: 0;
  text-transform: none;
  color: currentColor;
}

/* Privacylink: zelfde opmaak als de omringende tekst (bewust niet vet);
   het onderlijntje van .underline-anim maakt hem herkenbaar als link. */
body.contact-page .contact-form .contact-privacy-note a{
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  font-weight: inherit;
  text-transform: inherit;
}

/* Contactpagina: donkere footer (zwarte achtergrond, lichte tekst),
   in contrast met de lichte footer op de rest van de site.
   Alle tekst binnen #footer volgt via currentColor; de brandmark
   krijgt zijn subtiele tint via de custom property. */
body.contact-page #footer{
  --footer-brandmark-color: hsl(var(--clr-bg) / 0.12);
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

/* ===============================
   NOTITIES V1 — editorial blog index
   =============================== */

body.notities-v1-page{
  overflow-x: hidden;
  overflow-x: clip;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

body.notities-v1-page #main{
  background: hsl(var(--clr-bg));
}

body.notities-v1-page #hero.notities-hero{
  min-height: 100vh;
  min-height: 100svh;
  padding: 0;
  display: grid;
  align-items: end;
  justify-content: stretch;
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
  overflow: hidden;
  overflow: clip;
}

.notities-v1-page .notities-hero .site-header{
  color: currentColor;
}

.notities-v1-page .notities-hero__inner{
  width: 100%;
  min-height: 100%;
  padding:
    clamp(7rem, 16vh, 11rem)
    var(--page-pad-inline)
    clamp(4rem, 9vh, 7rem);
  display: grid;
  grid-template-columns: minmax(10rem, 0.35fr) minmax(0, 0.65fr);
  grid-template-rows: auto 1fr auto;
  column-gap: clamp(2rem, 7vw, 7rem);
  row-gap: clamp(1.4rem, 4vh, 3rem);
  align-items: end;
}

.notities-v1-page .notities-hero__eyebrow{
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  margin: 0;
  color: currentColor;
}

.notities-v1-page .notities-hero__title{
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: center;
  display: grid;
  gap: clamp(0.15rem, 1vw, 0.45rem);
  max-width: none;
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(4.8rem, min(13vw, 22vh), 13rem);
  line-height: 0.76;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

.notities-v1-page .notities-hero__title span{
  display: block;
  max-width: 9ch;
}

.notities-v1-page .notities-hero__title span:last-child{
  justify-self: end;
  max-width: 12ch;
  text-align: right;
  white-space: nowrap;
}

.notities-v1-page .notities-hero__copy{
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  width: min(100%, 34rem);
  color: currentColor;
}

.notities-v1-page .notities-hero__copy p{
  max-width: 34rem;
  color: currentColor;
}

.notities-v1-page .notities-index{
  padding: clamp(5rem, 12vw, 10rem) var(--page-pad-inline);
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.notities-v1-page .notities-index__intro{
  display: grid;
  grid-template-columns: minmax(8rem, 0.28fr) minmax(0, 0.72fr);
  column-gap: clamp(2rem, 8vw, 8rem);
  row-gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  max-width: min(100%, 92rem);
  margin-inline: auto;
  margin-bottom: clamp(4rem, 9vw, 7rem);
}

.notities-v1-page .notities-index__kicker{
  margin: 0.25em 0 0;
  color: currentColor;
}

.notities-v1-page .notities-index__intro-copy{
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  max-width: 58rem;
}

.notities-v1-page .notities-index__intro-copy h2{
  max-width: 10ch;
  font-size: clamp(4rem, 10vw, 11rem);
  line-height: 0.82;
}

.notities-v1-page .notities-index__intro-copy p{
  max-width: 44rem;
}

.notities-v1-page .notities-list{
  max-width: min(100%, 92rem);
  margin-inline: auto;
  border-top: 1px solid hsl(var(--clr-text) / 0.22);
}

.notities-v1-page .note-row{
  display: grid;
  grid-template-columns: minmax(7rem, 0.18fr) minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding-block: clamp(2rem, 5vw, 4.5rem);
  border-bottom: 1px solid hsl(var(--clr-text) / 0.22);
}

.notities-v1-page .note-row--featured{
  grid-template-columns: minmax(7rem, 0.16fr) minmax(0, 0.7fr) minmax(17rem, 0.38fr);
  align-items: center;
}

.notities-v1-page .note-row__meta{
  display: grid;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: var(--type-micro);
  line-height: var(--lh-ui);
  letter-spacing: var(--ls-microcopy);
  text-transform: uppercase;
  color: currentColor;
}

.notities-v1-page .note-row__body{
  min-width: 0;
  display: grid;
  gap: clamp(0.85rem, 2vw, 1.35rem);
}

.notities-v1-page .note-row__title{
  max-width: 12ch;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(3.1rem, 6.4vw, 7rem);
  line-height: 0.84;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
  text-wrap: balance;
}

.notities-v1-page .note-row--featured .note-row__title{
  max-width: 9ch;
  font-size: clamp(4rem, 9vw, 10rem);
  line-height: 0.78;
}

.notities-v1-page .note-row__body p{
  max-width: 35rem;
}

.notities-v1-page .note-row__link{
  margin-top: clamp(0.25rem, 1vw, 0.65rem);
}

.notities-v1-page .note-row__action{
  align-self: end;
  justify-self: end;
  white-space: nowrap;
}

.notities-v1-page .note-row__media{
  margin: 0;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: hsl(var(--clr-text) / 0.08);
}

.notities-v1-page .note-row__media picture,
.notities-v1-page .note-row__media img{
  width: 100%;
  height: 100%;
}

.notities-v1-page .note-row__media img{
  object-fit: cover;
  object-position: center;
}

.notities-v1-page .notities-statement{
  display: grid;
  grid-template-columns: minmax(0, 0.55fr) minmax(18rem, 0.45fr);
  gap: clamp(2rem, 8vw, 8rem);
  align-items: end;
  padding: clamp(5rem, 12vw, 10rem) var(--page-pad-inline);
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.notities-v1-page .notities-statement__copy,
.notities-v1-page .notities-statement__points{
  display: grid;
  gap: clamp(1rem, 2.6vw, 1.75rem);
}

.notities-v1-page .notities-statement__copy h2{
  max-width: 9ch;
  font-size: clamp(4.25rem, 10.5vw, 12rem);
  line-height: 0.82;
}

.notities-v1-page .notities-statement__points{
  max-width: 36rem;
}

.notities-v1-page .notities-statement__points p{
  padding-top: clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid hsl(var(--clr-bg) / 0.22);
  color: currentColor;
}

.notities-v1-page #engage.notities-engage{
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

.notities-v1-page #engage.notities-engage .engage__title{
  max-width: 11ch;
}

@media (max-width: 980px){
  .notities-v1-page .notities-hero__inner{
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }

  .notities-v1-page .notities-hero__eyebrow,
  .notities-v1-page .notities-hero__copy{
    grid-column: 1;
  }

  .notities-v1-page .notities-hero__copy{
    justify-self: start;
  }

  .notities-v1-page .notities-index__intro,
  .notities-v1-page .notities-statement{
    grid-template-columns: 1fr;
  }

  .notities-v1-page .note-row,
  .notities-v1-page .note-row--featured{
    grid-template-columns: minmax(6rem, 0.18fr) minmax(0, 1fr);
  }

  .notities-v1-page .note-row__action{
    grid-column: 2;
    justify-self: start;
    align-self: start;
  }

  .notities-v1-page .note-row--featured .note-row__media{
    grid-column: 2;
    width: min(100%, 26rem);
    margin-top: clamp(1rem, 3vw, 2rem);
  }
}

@media (max-width: 680px){
  body.notities-v1-page #hero.notities-hero{
    min-height: 100svh;
  }

  .notities-v1-page .notities-hero__inner{
    padding-top: clamp(6rem, 18vw, 8rem);
    padding-bottom: clamp(3.25rem, 12vw, 5rem);
  }

  .notities-v1-page .notities-hero__title{
    font-size: clamp(4.35rem, 21vw, 6.4rem);
    line-height: 0.8;
  }

  .notities-v1-page .notities-hero__title span:last-child{
    justify-self: start;
    max-width: 8.4ch;
    text-align: left;
    white-space: normal;
  }

  .notities-v1-page .notities-index,
  .notities-v1-page .notities-statement{
    padding-inline: clamp(18px, 5vw, 24px);
  }

  .notities-v1-page .notities-index__intro-copy h2,
  .notities-v1-page .notities-statement__copy h2{
    font-size: clamp(3.6rem, 18vw, 5.8rem);
  }

  .notities-v1-page .note-row,
  .notities-v1-page .note-row--featured{
    grid-template-columns: 1fr;
    gap: clamp(1rem, 5vw, 1.6rem);
  }

  .notities-v1-page .note-row__meta{
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 1rem;
  }

  .notities-v1-page .note-row__title,
  .notities-v1-page .note-row--featured .note-row__title{
    max-width: min(100%, 9.5ch);
    font-size: clamp(3.4rem, 18vw, 5.6rem);
  }

  .notities-v1-page .note-row__action,
  .notities-v1-page .note-row--featured .note-row__media{
    grid-column: 1;
  }

  .notities-v1-page .note-row--featured .note-row__media{
    width: min(82vw, 22rem);
  }

  .notities-v1-page #engage.notities-engage .engage__title{
    max-width: 9ch;
  }
}


/* ===============================
   Footer global stability
   =============================== */

/* r9-20260803: hier stond een defensieve regel die .reveal-item in de footer
   forceerde op opacity 1. Dode code — initRevealAnimations() in script.js richt
   zich alleen op .formats-header, .formats-card, #pillars, .logo-wall en
   #engage. In de footer komt .reveal-item dus nooit voor. Verwijderd. */

#footer{
  scroll-margin-top: calc(var(--nav-offset) * -1);
  height: 100svh;
  height: calc(var(--vh) * 100);
  min-height: 100svh;
  min-height: calc(var(--vh) * 100);
  max-height: 100svh;
  max-height: calc(var(--vh) * 100);
  overflow: clip;
}

#footer .ft-wrap,
#footer .ft-top{
  overflow: clip;
}

#footer .ft-wrap{
  padding-bottom: max(clamp(0.45rem, 1.2svh, 0.95rem), env(safe-area-inset-bottom));
}

#footer .ft-top{
  min-height: 0;
}

#footer .ft-brandmark{
  margin-bottom: -0.025em;
}

#footer .ft-bottom{
  justify-self: end;
  align-self: end;
  width: auto;
  max-width: 100%;
  margin-bottom: clamp(0.2rem, 0.75svh, 0.65rem);
  padding-inline-end: 0.04em;
  white-space: nowrap;
}

#footer .ft-address{
  min-width: 0;
  width: min(100%, 30rem);
  max-width: 100%;
  justify-self: end;
  justify-content: flex-end;
  overflow: clip;
}

#footer .locale-time{
  min-width: 0;
  max-width: 100%;
  overflow: clip;
}

#footer .locale-time .lt-city,
#footer .locale-time .lt-time{
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
}

@media (max-width: 680px){
  #footer .ft-wrap{
    padding-bottom: max(clamp(0.45rem, 1.5svh, 0.95rem), env(safe-area-inset-bottom));
  }

  #footer .ft-address{
    justify-self: stretch;
    width: 100%;
    margin-top: clamp(0.35rem, 1.4svh, 0.8rem);
    justify-content: flex-start;
  }

  #footer .locale-time{
    justify-items: start;
    text-align: left;
  }

  #footer .ft-address .lt-city{
    white-space: normal;
  }

  #footer .ft-brandmark{
    font-size: clamp(12rem, 52vw, 18rem);
    margin-bottom: -0.02em;
  }

  #footer .ft-bottom{
    justify-self: center;
    justify-content: center;
    text-align: center;
    margin-bottom: 0.1rem;
    padding-inline-end: 0;
  }
}

/* ===============================
   NOTITIES — overzichtspagina (/notities/)
   Asymmetrisch MOQO-grid, scoped onder .notities-page
   =============================== */

body.notities-page{
  overflow-x: hidden;
  overflow-x: clip;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

body.notities-page #main{
  background: hsl(var(--clr-bg));
}

/* ---------- Hero — typografie + layout 1:1 overgenomen van v2 ---------- */
.notities-page .notes-hero{
  position: relative;
  min-height: min(78svh, 760px);
  padding:
    clamp(7rem, 15vh, 10rem)
    var(--page-pad-inline)
    clamp(3.5rem, 9vh, 6.5rem);
  display: grid;
  align-items: end;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.notities-page .notes-hero .site-header{ color: currentColor; }

.notities-page .notes-hero__inner{
  width: min(100%, 116rem);
  margin-inline: auto;
  display: grid;
  align-items: end;
  gap: clamp(1rem, 2vh, 2rem);
}

/* Decoratief display-statement (aria-hidden in HTML).
   Schaal en line-height identiek aan v2 .notes-grid-hero__title.
   Staircase: spans na de eerste krijgen indent (zelfde patroon als v2). */
.notities-page .notes-hero__display{
  margin: 0;
  display: grid;
  gap: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: clamp(5rem, min(11vw, 20vh), 13rem);
  line-height: 0.78;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
}

.notities-page .notes-hero__display span{ display: block; }

.notities-page .notes-hero__display span:not(:first-child){
  margin-left: clamp(1.5rem, 13vw, 14rem);
}

/* Echte H1 in supporting-copy stijl (site-conventie) */
.notities-page .notes-hero__h1{
  margin: 0;
  max-width: 48ch;
  letter-spacing: 0.06em;
}

/* Scroll-indicator — site-standaard absoluut, rechts midden in de hero.
   Site-CSS activeert de animatie alleen onder html.is-scrollcue #hero (gearmd
   door bootstrap-script die op v3 niet draait). Bovendien bewust GEEN id="hero"
   op deze section gezet, omdat die selector ook background:#1a1a1a + flex
   meeneemt. Daarom hier expliciet activeren op de v3-scope. */
.notities-page .notes-hero .scroll-indicator{
  color: currentColor;
}

.notities-page .notes-hero .scroll-line{
  animation: scrollRise 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce){
  .notities-page .notes-hero .scroll-line{
    animation: none;
    transform: scaleY(1);
  }
}

/* ---------- Grid section ---------- */
.notities-page .notes-section{
  padding:
    clamp(4rem, 10vw, 9rem)
    var(--page-pad-inline)
    clamp(5rem, 12vw, 10rem);
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
}

.notities-page .notes-grid{
  width: min(100%, 116rem);
  margin-inline: auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.4vw, 2.4rem);
  row-gap: clamp(5rem, 10vw, 9rem);
}

/* size variants — MOQO asymmetrisch ritme */
.notities-page .notes-card{ grid-column: span 4; min-width: 0; }
.notities-page .notes-card--sm{ grid-column: span 4; }
.notities-page .notes-card--md{ grid-column: span 5; }
.notities-page .notes-card--lg{ grid-column: span 6; }

/* horizontal "shift" — MOQO laat items soms versprongen starten */
.notities-page .notes-card--shift{      grid-column-start: 7;  grid-column-end: span 5; }
.notities-page .notes-card--shift-mid{  grid-column-start: 3;  grid-column-end: span 6; }
.notities-page .notes-card--shift-end{  grid-column-start: 9;  grid-column-end: span 4; }

/* card layout */
.notities-page .notes-card{
  display: grid;
  grid-template-rows: auto auto;
  gap: clamp(1.1rem, 2vw, 1.6rem);
  align-content: start;
}

/* media */
.notities-page .notes-card__media{
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  overflow: clip;
  background: hsl(var(--clr-text) / 0.06);
  color: hsl(var(--clr-bg));
  aspect-ratio: 4 / 5;
}

.notities-page .notes-card--md .notes-card__media{ aspect-ratio: 4 / 3; }
.notities-page .notes-card--lg .notes-card__media{ aspect-ratio: 16 / 10; }

.notities-page .notes-card__media picture,
.notities-page .notes-card__media img{
  width: 100%;
  height: 100%;
}

.notities-page .notes-card__media img{
  object-fit: cover;
  object-position: center;
  transition: transform 0.65s var(--u-ease);
}

.notities-page .notes-card__media:hover img,
.notities-page .notes-card__media:focus-visible img{
  transform: scale(1.04);
}

.notities-page .notes-card__media:focus-visible{
  outline: var(--focus-outline);
  outline-offset: var(--focus-offset, 4px);
}

/* poster variant (typografische "card") */
.notities-page .notes-card__media--poster{
  display: grid;
  place-content: center;
  gap: clamp(0.45rem, 1vw, 0.75rem);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: hsl(var(--clr-accent));
  color: hsl(var(--clr-text));
}

.notities-page .notes-card__media--poster span{
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 0.03em 0.22em 0.09em;
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
  font-family: var(--font-heading);
  font-size: clamp(3rem, 5.2vw, 5.6rem);
  font-weight: var(--fw-bold);
  line-height: 0.84;
  text-transform: uppercase;
  letter-spacing: var(--ls-display);
  white-space: nowrap;
}

/* body */
.notities-page .notes-card__body{
  display: grid;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
  align-content: start;
}

/* Date — leunt op .supporting-copy uit het design-system,
   alleen uppercase + lichte opacity hier */
.notities-page .notes-card__date{
  margin: 0;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.7;
}

.notities-page .notes-card__title{
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 3.4vw, 4.4rem);
  font-weight: var(--fw-bold);
  line-height: 0.92;
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
  color: currentColor;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.notities-page .notes-card--lg .notes-card__title{
  font-size: clamp(2.8rem, 4.4vw, 5.6rem);
}

.notities-page .notes-card__title a{
  color: inherit;
  text-decoration: none;
}

.notities-page .notes-card__title a:focus-visible{
  outline: var(--focus-outline);
  outline-offset: 4px;
}

.notities-page .notes-card__more{
  justify-self: start;
  margin-top: clamp(0.1rem, 0.4vw, 0.3rem);
}

/* ---------- Essence (split-layout, zwart — zoals v2) ---------- */
.notities-page #essence{
  background: hsl(var(--clr-text));
  color: hsl(var(--clr-bg));
}

/* ---------- Breakpoints ---------- */

/* tablet / smaller laptop */
@media (max-width: 1100px){
  .notities-page .notes-grid{
    grid-template-columns: repeat(6, minmax(0, 1fr));
    row-gap: clamp(4rem, 9vw, 7rem);
  }

  /* alle size-varianten naar 3-koloms equivalent op 6-col grid */
  .notities-page .notes-card,
  .notities-page .notes-card--sm{ grid-column: span 3; }
  .notities-page .notes-card--md{ grid-column: span 3; }
  .notities-page .notes-card--lg{ grid-column: span 6; }

  .notities-page .notes-card--shift{      grid-column-start: 4; grid-column-end: span 3; }
  .notities-page .notes-card--shift-mid{  grid-column-start: 1; grid-column-end: span 6; }
  .notities-page .notes-card--shift-end{  grid-column-start: 4; grid-column-end: span 3; }
}

/* phone */
@media (max-width: 680px){
  .notities-page .notes-hero{
    min-height: auto;
    padding-top: clamp(6rem, 20vw, 8rem);
  }

  .notities-page .notes-hero__display{
    font-size: clamp(3.55rem, 14.5vw, 6.2rem);
  }

  .notities-page .notes-hero__display span:not(:first-child){
    margin-left: clamp(0.75rem, 8vw, 5rem);
  }

  .notities-page .notes-section{
    padding-inline: clamp(18px, 5vw, 24px);
  }

  .notities-page .notes-grid{
    grid-template-columns: 1fr;
    row-gap: clamp(3.5rem, 12vw, 5rem);
  }

  .notities-page .notes-card,
  .notities-page .notes-card--sm,
  .notities-page .notes-card--md,
  .notities-page .notes-card--lg,
  .notities-page .notes-card--shift,
  .notities-page .notes-card--shift-mid,
  .notities-page .notes-card--shift-end{
    grid-column: 1 / -1;
  }

  .notities-page .notes-card__media,
  .notities-page .notes-card--md .notes-card__media,
  .notities-page .notes-card--lg .notes-card__media{
    aspect-ratio: 4 / 3;
  }

  .notities-page .notes-card__title{
    font-size: clamp(2.8rem, 11vw, 4.2rem);
    max-width: 18ch;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .notities-page .notes-card__media img{ transition: none; }
}


/* ===============================
   OVER — page-scoped componenten
   Bouwt voort op .bedrijfsevents-page (media-text-split,
   event-moments, engage, event-band). Eigen blokken:
   statement/manifest, waarden-trio en feitenlijst.
   Gebruikt bestaande tokens; geen overlap met andere pagina's.
   =============================== */

/* Intro: vierkant portret i.p.v. staand 4:5 */
.over-page .media-text-split__media{
  aspect-ratio: 1 / 1;
}

/* Statement / manifest: gecentreerd tekstblok */
.over-page #wat-ik-doe{
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: var(--page-pad-inline);
}

/* Traject + consultant: lichte secties op de donkere basis.
   Samen één editorial spread: krappe binnenruimte tussen beide,
   ruime buitenranden. */
.over-page #traject,
.over-page #consultant{
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  padding-inline: var(--page-pad-inline);
}

.over-page #traject{
  padding-block: clamp(4rem, 9vw, 6.5rem) clamp(1.5rem, 4vw, 2.5rem);
}

.over-page #consultant{
  padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(4rem, 9vw, 6.5rem);
}

.over-page .over-statement{
  max-width: min(100%, 60rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: center;
}

.over-page .over-statement__kicker,
.over-page .over-statement__title{
  margin: 0;
}

.over-page .over-statement__title{
  max-width: 24ch;
  text-wrap: balance;
}

.over-page .over-statement--light .over-statement__title{
  max-width: 18ch;
}

.over-page .over-statement__body{
  max-width: 46rem;
}

/* Twee kleine editorial blokken: traject links, consultant rechts.
   Zelfde geest als de blog-cta op /formules. */
.over-page .over-aside{
  max-width: min(100%, 42rem);
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.5rem);
}

.over-page .over-aside--links{
  margin-right: auto;
}

.over-page .over-aside--rechts{
  margin-left: auto;
  text-align: right;
  justify-items: end;
}

.over-page .over-aside__kicker,
.over-page .over-aside__title{
  margin: 0;
}

@media (max-width: 760px){
  /* Mobile: natuurlijk laten vloeien, niet rechts vastgepind */
  .over-page .over-aside--rechts{
    margin-left: 0;
    margin-right: auto;
    text-align: left;
    justify-items: start;
  }
}

/* Waarden: drie pijlers */
.over-page #waarden{
  padding-block: clamp(4rem, 10vw, 7rem);
  padding-inline: var(--page-pad-inline);
}

.over-page .over-values{
  list-style: none;
  margin-inline: auto;
  padding: 0;
  max-width: min(100%, 92rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 5vw, 4rem);
}

.over-page .over-values__item{
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
}

.over-page .over-values__num{
  margin: 0;
  opacity: 0.6;
}

.over-page .over-values__title{
  margin: 0;
  font-size: clamp(1.7rem, 1rem + 2.2vw, 2.6rem);
}

.over-page .over-values__desc{
  margin: 0;
  max-width: 32ch;
}

@media (max-width: 760px){
  .over-page .over-values{
    grid-template-columns: 1fr;
    gap: clamp(2rem, 8vw, 3rem);
  }
}

/* In het kort: feitenlijst (twee kolommen) */
.over-page #in-het-kort{
  padding-block: clamp(5rem, 12vw, 9rem);
  padding-inline: var(--page-pad-inline);
}

.over-page .over-facts{
  max-width: min(100%, 76rem);
  margin-inline: auto;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.over-page .over-facts__head{
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.5vw, 0.9rem);
}

.over-page .over-facts__kicker,
.over-page .over-facts__title{
  margin: 0;
}

.over-page .over-facts__grid{
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2rem, 6vw, 5rem);
}

.over-page .over-facts__row{
  display: grid;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 0.58fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: baseline;
  padding-block: clamp(0.9rem, 2vw, 1.25rem);
  border-top: 1px solid hsl(var(--clr-bg) / 0.2);
}

.over-page .over-facts__term{
  margin: 0;
  opacity: 0.7;
}

.over-page .over-facts__desc{
  margin: 0;
}

@media (max-width: 760px){
  .over-page .over-facts__grid{
    grid-template-columns: 1fr;
  }
}

/* ===============================================================
   Homepage "Meer lezen"-band — staat op de standaard site-achtergrond
   (zelfde wit als de logo-wall en de rest van de site)
   =============================================================== */
.home-faq {
  position: relative;
  background: hsl(var(--clr-bg));
  color: hsl(var(--clr-text));
  padding-block: var(--section-pad-y);
}

.home-faq__inner {
  max-width: 80rem;
  margin-inline: auto;
  padding-inline: var(--page-pad-inline);
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
}

.home-faq__head {
  display: grid;
  gap: clamp(0.5rem, 1.5vw, 1rem);
}

.home-faq__kicker {
  text-transform: uppercase;
  letter-spacing: var(--ls-ui);
  color: hsl(var(--clr-text) / 0.6);
}

/* Scattered blokken i.p.v. een rechte stapel — geen scheidingslijnen */
.home-faq__list {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.75rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.home-faq__item {
  max-width: 44ch;
}

.home-faq__item:nth-child(1) { grid-column: 1 / span 6; }
.home-faq__item:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(1.5rem, 5vw, 4rem); }
.home-faq__item:nth-child(3) { grid-column: 3 / span 7; margin-top: clamp(1rem, 3vw, 2.5rem); }

/* Vraag = gewone tekst, maar vet (zoals <strong>) */
.home-faq__q {
  margin: 0 0 clamp(0.4rem, 1.2vw, 0.65rem);
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--type-body);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
}

.home-faq__a {
  margin: 0;
  max-width: 46ch;
}

.home-faq__cta {
  margin-top: clamp(0.5rem, 2vw, 1.25rem);
}

@media (max-width: 700px) {
  .home-faq__list {
    grid-template-columns: 1fr;
    gap: clamp(1.5rem, 6vw, 2.25rem);
  }
  .home-faq__item {
    grid-column: 1 / -1;
    margin-top: 0;
    max-width: none;
  }
}