/* Blue Beacon: design system. Specificatie: docs/BLUE_BEACON_DESIGN_STRATEGY.md */

/* ---------- Fonts (lokaal, OFL) ----------
   Gewicht-as ingeperkt tot wat de site gebruikt (Newsreader 400-600, Hanken 400-700), ~30% kleiner.
   Originelen: /var/backups/sites/focus/bluebeacon-fonts-origineel/. */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz-normal.woff2?v=2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-opsz-italic.woff2?v=2") format("woff2");
  font-weight: 400 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("../fonts/hanken-grotesk-wght-normal.woff2?v=2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Kleur */
  --navy: #1E2959;
  --amber: #E0A82D;
  --amber-hover: #D39B24;
  --white: #FFFFFF;
  --paper: #F6F4EF;
  --line: #D9DCE5;
  --line-strong: #8A90A8;
  --slate: #4A5270;
  --on-navy: #FFFFFF;
  --on-navy-muted: #C9CCD8;
  --error: #9B1C1C;
  --edias: #81225D;
  --accent: var(--amber);

  /* Typografie */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-display: clamp(2.25rem, 1.568rem + 2.909vw, 3.75rem);
  --fs-h1: clamp(2.125rem, 1.614rem + 2.182vw, 3.25rem);
  --fs-h2: clamp(1.75rem, 1.466rem + 1.212vw, 2.375rem);
  --fs-statement: clamp(1.75rem, 1.295rem + 1.939vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.136rem + 0.4848vw, 1.5rem);
  --fs-h4: clamp(1.125rem, 1.097rem + 0.1212vw, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 1.102rem + 0.3636vw, 1.375rem);
  --fs-body: clamp(1.0625rem, 1.034rem + 0.1212vw, 1.125rem);
  --fs-small: 0.9375rem;
  --fs-label: 0.8125rem;

  /* Spacing (basis 8) */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --section-y: var(--s-8);
  --block-gap: 40px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1360px;
  --measure: 680px;
  --gutter: 16px;
  --pad-x: 20px;
  --header-h: 88px;

  /* Oppervlak */
  --radius: 4px;
  --radius-tag: 2px;
  --border: 1px solid var(--line);
  --shadow-header: 0 1px 0 var(--line), 0 8px 24px rgba(30, 41, 89, 0.06);

  /* Beweging */
  --t-fast: 150ms ease;
  --t-base: 200ms ease;
  --t-reveal: 400ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
@media (min-width: 768px) {
  :root { --gutter: 24px; --pad-x: 32px; --section-y: var(--s-9); --block-gap: var(--s-7); --header-h: 104px; }
}
@media (min-width: 1200px) {
  :root { --gutter: 32px; --pad-x: 40px; --section-y: var(--s-10); --block-gap: var(--s-8); --header-h: 120px; }
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0;
  background: var(--white);
  color: var(--navy);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3, h4 { margin: 0; color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
strong { font-weight: 600; }

a { color: var(--navy); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-fast); }
a:hover { text-decoration-color: var(--amber); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.on-navy :focus-visible, .on-navy:focus-visible { outline-color: var(--amber); }

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

.skiplink {
  position: absolute; left: var(--s-4); top: -100px; z-index: 200;
  background: var(--navy); color: var(--white); padding: var(--s-3) var(--s-5);
  font-weight: 600; text-decoration: none; border-radius: var(--radius);
}
.skiplink:focus { top: var(--s-4); outline-color: var(--amber); }

/* ---------- Typografische rollen ---------- */
.t-display, .t-h1, .t-h2, .t-statement, .serif { font-family: var(--font-serif); font-weight: 500; font-optical-sizing: auto; }
.t-display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -0.015em; }
.t-h1 { font-size: var(--fs-h1); line-height: 1.1; letter-spacing: -0.01em; }
.t-h2 { font-size: var(--fs-h2); line-height: 1.15; letter-spacing: -0.005em; }
.t-statement { font-size: var(--fs-statement); line-height: 1.15; letter-spacing: -0.01em; }
/* Homepage-maten: sectiekop (max 42px) en afsluitende statement (max 40px). */
.t-section { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.625rem); line-height: 1.12; }
.t-conclusion { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); line-height: 1.15; }
.t-h3 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h3); line-height: 1.3; }
.t-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-h4); line-height: 1.35; }
.t-lead { font-size: var(--fs-lead); line-height: 1.5; font-weight: 500; }
.t-small { font-size: var(--fs-small); line-height: 1.5; }
.t-muted { color: var(--slate); }
.t-quote { font-family: var(--font-serif); font-style: italic; font-weight: 400; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Eyebrow-label met amber richtingslijn */
.eyebrow {
  display: flex; align-items: center; gap: var(--s-3);
  font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-label);
  letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3;
  color: var(--slate); margin: 0 0 var(--s-5);
}
.eyebrow::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--accent); }
.on-navy .eyebrow { color: var(--on-navy-muted); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--pad-x)); margin-inline: auto; padding-inline: var(--pad-x); }
.container--wide { max-width: calc(var(--container-wide) + 2 * var(--pad-x)); }
.measure { max-width: var(--measure); }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: calc(var(--section-y) * 0.6); }
.section--paper { background: var(--paper); }
.section--navy { background: var(--navy); color: var(--on-navy); }
.on-navy a { color: var(--on-navy); }
.on-navy .t-muted { color: var(--on-navy-muted); }
/* Twee opeenvolgende witte secties delen hun witruimte; na een gekleurd vlak blijft de volle ruimte staan. */
.section:not(.section--paper):not(.section--navy) + .section:not(.section--paper):not(.section--navy) { padding-top: 0; }

.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: var(--s-6); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.grid > * { grid-column: 1 / -1; min-width: 0; }

.stack > * + * { margin-top: var(--s-5); }
.stack-lg > * + * { margin-top: var(--block-gap); }

/* Label-tekstritme: label links, tekst rechts */
@media (min-width: 1200px) {
  .split__aside { grid-column: 1 / span 3; }
  .split__main { grid-column: 4 / span 7; }
  .split__main--wide { grid-column: 4 / span 9; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .split__main { grid-column: 1 / span 7; }
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3);
  min-height: 52px; padding: 12px 28px; border-radius: var(--radius);
  font-family: var(--font-sans); font-weight: 600; font-size: 1.0625rem; line-height: 1.25;
  text-decoration: none; text-align: center; cursor: pointer; border: 1.5px solid transparent;
  transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.btn:hover { text-decoration: none; }
.btn .arrow { transition: transform var(--t-fast); flex: none; }
.btn:hover .arrow { transform: translateX(3px); }

.btn--primary { background: var(--amber); color: var(--navy); }
.btn--primary:hover { background: var(--amber-hover); color: var(--navy); }
.btn--primary:focus-visible { outline-color: var(--navy); }
.on-navy .btn--primary, .on-navy .btn--primary:hover { color: var(--navy); }
.on-navy .btn--primary:focus-visible { outline-color: var(--amber); }

.btn--secondary { background: var(--navy); color: var(--white); }
.btn--secondary:hover { background: #151E45; color: var(--white); }
.on-navy .btn--secondary { background: transparent; border-color: var(--white); color: var(--white); }
.on-navy .btn--secondary:hover { background: rgba(255, 255, 255, 0.08); }

.link-arrow {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  font-weight: 600; color: var(--navy); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 0.25em; min-height: 44px; align-items: center;
}
.link-arrow .arrow { transition: transform var(--t-fast); flex: none; }
.link-arrow:hover { text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.link-arrow:hover .arrow { transform: translateX(3px); }
/* Variant die naar een sectie verderop wijst (pijl omlaag). */
.link-arrow--down .arrow { transform: rotate(90deg); }
.link-arrow--down:hover .arrow { transform: rotate(90deg) translateX(3px); }
.on-navy .link-arrow { color: var(--white); }
button.link-arrow { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; text-align: left; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
@media (max-width: 767px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .btn-row .link-arrow { align-self: flex-start; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100; background: var(--white);
  box-shadow: 0 1px 0 var(--line);
  transition: box-shadow var(--t-base);
}
.site-header.is-compact { box-shadow: var(--shadow-header); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-6);
  height: var(--header-h); transition: height var(--t-base);
}
.site-header.is-compact .site-header__inner { height: calc(var(--header-h) - 16px); }
@media (max-width: 767px) { .site-header.is-compact .site-header__inner { height: var(--header-h); } }

.brand { display: block; flex: none; padding-block: 4px; }
.brand img { width: 128px; height: auto; transition: width var(--t-base); }
@media (min-width: 768px) { .brand img { width: 153px; } }
@media (min-width: 1200px) { .brand img { width: 162px; } .site-header.is-compact .brand img { width: 153px; } }

.nav-desktop { display: none; }
.nav-desktop ul { list-style: none; display: flex; align-items: center; gap: 26px; }
.nav-desktop a {
  position: relative; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; font-size: 1rem; color: var(--navy); text-decoration: none; white-space: nowrap;
}
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base);
}
.nav-desktop a:hover::after { transform: scaleX(1); }
.nav-desktop a[aria-current="page"]::after, .nav-desktop a.is-parent::after { transform: scaleX(1); background: var(--navy); }

.header-actions { display: flex; align-items: center; gap: var(--s-4); }
.header-cta { display: none; }
@media (min-width: 768px) { .header-cta { display: inline-flex; min-height: 48px; padding: 10px 22px; font-size: 1rem; } }

.menu-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; min-width: 48px;
  padding: 8px 12px; background: transparent; border: 1.5px solid var(--navy); border-radius: var(--radius);
  font-weight: 600; font-size: 1rem; cursor: pointer; color: var(--navy);
}
.menu-toggle svg { width: 20px; height: 20px; }

/* Transparante header boven een full-bleed hero (alleen home). Start transparant/wit-op-navy,
   wordt bij scrollen (.is-compact, zie site.js) de normale witte header. */
.site-header--overlay {
  position: fixed; top: 0; left: 0; right: 0; background: transparent; box-shadow: none;
  transition: background-color var(--t-base), box-shadow var(--t-base);
}
.site-header--overlay::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: calc(100% + 64px); z-index: -1;
  background: linear-gradient(to bottom, rgba(30, 41, 89, 0.36) 0%, rgba(30, 41, 89, 0.14) 55%, rgba(30, 41, 89, 0) 100%);
  opacity: 1; transition: opacity var(--t-base); pointer-events: none;
}
.site-header--overlay.is-compact { background: var(--white); box-shadow: var(--shadow-header); }
.site-header--overlay.is-compact::before { opacity: 0; }

.brand__logo--white { display: block; }
.brand__logo--navy { display: none; }
.site-header--overlay.is-compact .brand__logo--white { display: none; }
.site-header--overlay.is-compact .brand__logo--navy { display: block; }

.site-header--overlay .nav-desktop a { color: var(--white); transition: color var(--t-base); }
.site-header--overlay .nav-desktop a[aria-current="page"]::after, .site-header--overlay .nav-desktop a.is-parent::after { background: var(--white); }
.site-header--overlay.is-compact .nav-desktop a { color: var(--navy); }
.site-header--overlay.is-compact .nav-desktop a[aria-current="page"]::after, .site-header--overlay.is-compact .nav-desktop a.is-parent::after { background: var(--navy); }

.site-header--overlay .menu-toggle { border-color: var(--white); color: var(--white); transition: color var(--t-base), border-color var(--t-base); }
.site-header--overlay.is-compact .menu-toggle { border-color: var(--navy); color: var(--navy); }

/* Dropdowns in de hoofdnav: knop met chevron, klein wit paneel eronder (geen mega-menu).
   Open via .is-open (site.js: hover, klik, toetsenbord); zonder JS via :hover/:focus-within. */
.nav-dd { position: relative; }
.nav-desktop .nav-dd__panel { display: block; }
.nav-dd__toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 1rem; color: var(--navy); white-space: nowrap;
}
.nav-dd__toggle::after {
  content: ""; position: absolute; left: 0; right: 18px; bottom: 6px; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base);
}
.nav-dd__toggle:hover::after, .nav-dd.is-open .nav-dd__toggle::after { transform: scaleX(1); }
.nav-dd__toggle.is-parent::after { transform: scaleX(1); background: var(--navy); }
.nav-chevron { width: 12px; height: 12px; flex: none; transition: transform var(--t-base); }
.nav-dd__toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.nav-dd__panel {
  position: absolute; top: 100%; left: -20px; z-index: 10; min-width: 250px; margin-top: 4px; padding: 8px 0;
  list-style: none; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 12px 32px rgba(30, 41, 89, 0.10);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s linear 150ms;
}
/* Onzichtbare brug over de 4px tussenruimte, zodat hover niet wegvalt. */
.nav-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.nav-dd.is-open .nav-dd__panel,
html:not(.js) .nav-dd:hover .nav-dd__panel, html:not(.js) .nav-dd:focus-within .nav-dd__panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity var(--t-fast), transform var(--t-fast), visibility 0s;
}
.site-header .nav-desktop .nav-dd__panel a {
  display: flex; min-height: 40px; padding: 8px 24px 8px 20px; width: 100%;
  font-weight: 600; font-size: 0.9375rem; color: var(--navy); transition: background-color var(--t-fast);
}
.site-header .nav-desktop .nav-dd__panel a::after {
  left: 0; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto;
  background: var(--amber); transform: scaleY(0); transform-origin: center;
}
.site-header .nav-desktop .nav-dd__panel a:hover, .site-header .nav-desktop .nav-dd__panel a:focus-visible { background: var(--paper); }
.site-header .nav-desktop .nav-dd .nav-dd__panel a:hover::after,
.site-header .nav-desktop .nav-dd .nav-dd__panel a[aria-current="page"]::after { transform: scaleY(1); background: var(--amber); }
.site-header--overlay .nav-dd__toggle { color: var(--white); transition: color var(--t-base); }
.site-header--overlay .nav-dd__toggle.is-parent::after { background: var(--white); }
.site-header--overlay.is-compact .nav-dd__toggle { color: var(--navy); }
.site-header--overlay.is-compact .nav-dd__toggle.is-parent::after { background: var(--navy); }

/* Met drie chevrons erbij iets krapper tussen 1280 en 1440, zodat de CTA op één regel blijft. */
.header-cta { white-space: nowrap; }
@media (min-width: 1280px) and (max-width: 1439px) {
  .nav-desktop ul { gap: 20px; }
  .site-header__inner { gap: var(--s-5); }
}
@media (min-width: 1280px) {
  .nav-desktop { display: block; margin-left: auto; }
  .menu-toggle { display: none; }
}

/* Mobiel menu: licht vlak, zodat het (navy) logo zichtbaar blijft */
.mobile-menu {
  position: fixed; inset: 0; z-index: 150; background: var(--paper);
  display: flex; flex-direction: column; overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity var(--t-base), visibility 0s linear 200ms;
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition: opacity var(--t-base), visibility 0s; }
.mobile-menu[hidden] { display: none; }
.mobile-menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); flex: none; }
.mobile-menu nav { flex: 1; padding-block: var(--s-5) var(--s-7); }
.mobile-menu ul { list-style: none; }
.mobile-menu li + li { border-top: 1px solid var(--line); }
.mobile-menu nav a {
  display: flex; align-items: center; min-height: 56px; padding-block: var(--s-2);
  font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.2;
  color: var(--navy); text-decoration: none;
}
.mobile-menu nav a[aria-current="page"], .mobile-menu nav a.is-parent { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mobile-menu nav .sub a { font-family: var(--font-sans); font-size: 1.0625rem; font-weight: 600; min-height: 48px; padding-left: var(--s-5); }
/* Mobiel: dropdowns als uitklapbare submenu's (knop met chevron, site.js). */
.mobile-menu .mm-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); width: 100%; min-height: 56px;
  padding: var(--s-2) 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--font-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.2; color: var(--navy);
}
.mobile-menu .mm-toggle.is-parent { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.mobile-menu .mm-toggle .nav-chevron { width: 18px; height: 18px; }
.mobile-menu .mm-toggle[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
.mobile-menu nav .sub { padding-bottom: var(--s-3); }
.mobile-menu__cta { padding-bottom: var(--s-7); }
.mobile-menu__cta .btn { width: 100%; }
body.menu-open { overflow: hidden; }

/* ---------- Hero's ---------- */
/* Home: beeldvullende foto vanaf de bovenkant van de pagina, header transparant erbovenop
   (.site-header--overlay, zie hierboven, met zijn eigen zeer subtiele donkere top-gradient
   voor het witte logo/nav). De hero zelf krijgt alleen een lichte navy overlay links, puur
   voor de leesbaarheid van de tekst — de zonsondergang blijft verder ongefilterd zichtbaar. */
/* Kleur achter de boog linksonder = die van de sectie eronder (section--paper). */
.hero-full-wrap { background: var(--paper); }
.hero-full {
  --hero-cut: clamp(48px, min(11vw, 16vh), 180px);
  position: relative; min-height: clamp(520px, 100svh, 820px); display: flex; align-items: flex-end;
  overflow: hidden; border-bottom-left-radius: var(--hero-cut);
}
.hero-full__media { position: absolute; inset: 0; overflow: hidden; }
/* Slider: drie foto's die zacht in elkaar overvloeien, geen zichtbare pijlen/dots —
   ambient wisseling, zie site.js. Werking staat los van prefers-reduced-motion,
   alleen de fade-duur wordt korter (zie onderaan dit bestand). */
.hero-full__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.hero-full__slide.is-active { opacity: 1; }
.hero-full__slide picture { position: absolute; inset: 0; display: block; }
.hero-full__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 42%; }
/* Overlay zit per slide (fadet mee met de foto); een lichtere foto kan zo een eigen,
   stevigere dosis krijgen via een modifier op de slide. */
.hero-full__slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(30, 41, 89, 0.34) 0%, rgba(30, 41, 89, 0.12) 40%, rgba(30, 41, 89, 0) 62%);
}
.hero-full__slide--zon::after {
  background: linear-gradient(100deg, rgba(30, 41, 89, 0.46) 0%, rgba(30, 41, 89, 0.2) 40%, rgba(30, 41, 89, 0) 64%);
}
.hero-full__inner { position: relative; z-index: 1; width: 100%; color: var(--on-navy); padding-block: calc(var(--header-h) + var(--s-6)) max(var(--s-7), var(--hero-cut)); }
.hero-full__text { max-width: 30rem; }
.hero-full .t-display { margin-bottom: var(--s-5); }
.hero-full .t-lead { max-width: 34em; margin-bottom: var(--s-6); color: var(--on-navy); }
@media (min-width: 768px) {
  .hero-full__inner { padding-block: calc(var(--header-h) + var(--s-7)) max(var(--s-8), var(--hero-cut)); }
  .hero-full__text { max-width: 34rem; }
}
@media (min-width: 1024px) {
  .hero-full__inner { padding-block: calc(var(--header-h) + clamp(8px, 3vh, 64px)) max(clamp(48px, 10vh, 128px), var(--hero-cut)); }
  .hero-full__text { max-width: 36rem; }
  .hero-full__text > .t-display { font-size: clamp(2.625rem, 3.5vw, 3.1875rem); }
}

/* Binnenpagina met foto (Hoe we werken): zelfde taal als de home-hero (afgeronde hoek linksonder,
   lichte navy waas links), maar lager en onder de gewone witte header. */
.photo-hero-wrap { background: var(--white); }
.photo-hero-wrap--paper { background: var(--paper); }
.photo-hero {
  --hero-cut: clamp(40px, 8vw, 128px);
  position: relative; min-height: clamp(380px, 54svh, 560px); display: flex; align-items: flex-end;
  overflow: hidden; border-bottom-left-radius: var(--hero-cut); background: var(--navy);
}
.photo-hero__media { position: absolute; inset: 0; }
.photo-hero__media picture { position: absolute; inset: 0; display: block; }
.photo-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 60%; }
.photo-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(30, 41, 89, 0.62) 0%, rgba(30, 41, 89, 0.34) 38%, rgba(30, 41, 89, 0) 66%),
              linear-gradient(to top, rgba(30, 41, 89, 0.38) 0%, rgba(30, 41, 89, 0) 45%);
}
.photo-hero__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--s-8) max(var(--s-7), var(--hero-cut)); }
.photo-hero__text { max-width: 34rem; }
.photo-hero .t-h1 { margin-bottom: var(--s-5); color: var(--on-navy); }
.photo-hero .t-lead { color: var(--on-navy); max-width: 30em; }
.photo-hero .eyebrow { color: var(--on-navy); }
.photo-hero__more { margin-top: var(--s-5); }
/* Verwijzing naar de eerste inhoudssectie: uitnodiging, geen derde kop. */
.photo-hero__more .link-arrow { font-size: 1.0625rem; font-weight: 500; text-underline-offset: 0.3em; }
@media (min-width: 1024px) { .photo-hero__more .link-arrow { font-size: 1.125rem; } }
@media (min-width: 1200px) { .photo-hero__text { max-width: 40rem; } }
/* Laptop/desktop: foto vult het scherm onder de witte header (zoals de home-hero), met een plafond
   voor hoge schermen. Tekst staat op ELKE pagina op dezelfde vaste afstand onder de header,
   gelijk aan Hoe we werken (niet centreren: dan verschilt de hoogte per titel/subtitel-lengte). */
@media (min-width: 1024px) {
  .photo-hero { min-height: clamp(520px, calc(100svh - var(--header-h)), 900px); align-items: flex-start; }
  /* Vaste startpositie van het label = de positie op Hoe we werken (leidend): ca. 1/3 van de hero-hoogte. */
  .photo-hero__inner { padding-block: clamp(64px, calc((100svh - var(--header-h)) * 0.32), 290px) var(--s-8); }
  .photo-hero__media::after {
    background: linear-gradient(100deg, rgba(30, 41, 89, 0.62) 0%, rgba(30, 41, 89, 0.3) 40%, rgba(30, 41, 89, 0) 66%),
                linear-gradient(to bottom, rgba(30, 41, 89, 0.4) 0%, rgba(30, 41, 89, 0) 50%);
  }
}

/* Mobiel staat de tekst onderin over het drukke deel van de foto: waas van onderen, lucht blijft vrij. */
@media (max-width: 767px) {
  .photo-hero__media::after { background: linear-gradient(to top, rgba(30, 41, 89, 0.72) 0%, rgba(30, 41, 89, 0.45) 50%, rgba(30, 41, 89, 0.08) 85%); }
}
/* Academy: vloeiende navy-waas van links (achter de titel, rustig tegen de bladeren) naar volledig
   transparant rechts, zodat de warme gevel en het avondlicht onaangetast blijven. Extra zachte
   verdieping precies achter het tekstblok; boven en onder alleen een heel subtiele fade. */
@media (min-width: 768px) {
  .photo-hero--academy .photo-hero__media::after, .photo-hero--wwd .photo-hero__media::after, .photo-hero--over .photo-hero__media::after {
    background:
      radial-gradient(ellipse 46% 44% at 26% 46%, rgba(30, 41, 89, 0.24) 0%, rgba(30, 41, 89, 0) 100%),
      linear-gradient(90deg,
        rgba(30, 41, 89, 0.65) 0%, rgba(30, 41, 89, 0.61) 18%, rgba(30, 41, 89, 0.5) 32%,
        rgba(30, 41, 89, 0.3) 46%, rgba(30, 41, 89, 0.15) 57%, rgba(30, 41, 89, 0.05) 65%, rgba(30, 41, 89, 0) 72%),
      linear-gradient(to bottom, rgba(30, 41, 89, 0.3) 0%, rgba(30, 41, 89, 0) 32%),
      linear-gradient(to top, rgba(30, 41, 89, 0.16) 0%, rgba(30, 41, 89, 0) 22%);
  }
}

/* Wat we doen: de mensen staan over de hele breedte; uitsnede naar links zodat ze rechts van de tekst vallen.
   Mobiel: rustige linkerrand van de foto (raam en plant) achter de tekst. */
.photo-hero--wwd .photo-hero__media img { object-position: 4% 50%; }
/* Over Blue Beacon: zelfde aanpak, de twee oprichters rechts van de tekst. */
.photo-hero--over .photo-hero__media img { object-position: 8% 50%; }
@media (min-width: 768px) { .photo-hero--over .photo-hero__media img { object-position: 12% 50%; } }
@media (min-width: 1280px) { .photo-hero--over .photo-hero__media img { object-position: 30% 50%; } }

@media (min-width: 768px) {
  .photo-hero--wwd .photo-hero__media img { object-position: 0% 50%; }
  .photo-hero--wwd .t-lead { max-width: 21em; }
}

/* Onder de fotohero (standaard): rustig wit vlak met de kernzin als grote serif-kop, daarna de uitleg. */
.page-intro { padding-block: var(--s-9); }
.page-intro .page-intro__quote { max-width: 16em; }
.page-intro__body { max-width: var(--measure); margin-top: var(--s-6); }
.page-intro__body .t-lead { margin-bottom: var(--s-4); }
@media (min-width: 1200px) { .page-intro { padding-block: var(--s-10); } .page-intro__quote { font-size: clamp(2.5rem, 3.2vw, 3rem); } }

/* Home, "Eerst begrijpen": grote intro over de rechterhelft, daarna de vijf vragen als
   open, trapsgewijs aflopende route (geen kaartjes), afgesloten met een statement.
   Grote serif-cijfers zoals de principes op Hoe we werken: vervaagd navy tot ze bereikt zijn,
   dan (en zonder JS altijd) verdiepte amber (#A87A16, 3,5:1 op paper) omdat huisstijl-amber als tekst te licht is. */
.begrijpen__intro .t-h1 { max-width: 20em; }
.begrijpen__intro .t-lead { max-width: 34em; margin-top: var(--s-5); }
.route { position: relative; list-style: none; margin-top: var(--s-6); }
/* Voortgangslijn (site.js): loopt van nummer naar nummer en kleurt amber mee met scrollen. */
.route__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.route__line polyline { fill: none; stroke-linejoin: miter; stroke-linecap: butt; }
.route__line .track { stroke: var(--line-strong); stroke-width: 1; opacity: 0.55; }
.route__line .fill { stroke: var(--amber); stroke-width: 2; }
.route--live .route__num { color: rgba(30, 41, 89, 0.15); transition: color 300ms ease; }
.route--live .route__step.is-reached .route__num { color: #A87A16; }
.route__step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; max-width: 38rem; }
.route__num { font-family: var(--font-serif); font-weight: 500; font-size: 2.75rem; line-height: 0.9; color: #A87A16; font-variant-numeric: lining-nums; justify-self: start; }
.route__q { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; padding-block: var(--s-3); border-bottom: 1px solid var(--line-strong); }
.route__step + .route__step { margin-top: var(--s-6); }
.route__step:last-child .route__q { border-bottom: 0; }
.begrijpen__close { position: relative; margin-top: var(--s-7); padding-top: var(--s-6); border-top: 1px solid var(--navy); }
/* Amber lijn groeit na stap 05 mee met scrollen over de hele breedte (--p via site.js; zonder JS 0). */
.begrijpen__close { --stub: 48px; }
.begrijpen__close::before { content: ""; position: absolute; top: -2px; left: 0; width: calc(var(--stub) + (100% - var(--stub)) * var(--p, 0)); height: 3px; background: var(--amber); }
.begrijpen__close .t-statement { max-width: 17em; }
.begrijpen__close .t-statement span { display: block; }
@media (min-width: 768px) {
  .route__step { grid-template-columns: 4.5rem minmax(0, 1fr); margin-left: calc(var(--i) * 24px); }
}
@media (min-width: 1200px) {
  .begrijpen__intro, .route { grid-column: 4 / -1; }
  /* Slotzin = conclusie van de hele sectie: vanaf de linker contentrand, breder dan de route. */
  .begrijpen__close { grid-column: 1 / -1; }
  .begrijpen__close { --stub: 96px; }
  .begrijpen__close .t-statement { max-width: 850px; }
  .begrijpen { padding-block: var(--s-9); }
  .route { margin-top: var(--s-7); }
  .route__step { margin-left: calc(var(--i) * 48px); }
  .route__step + .route__step { margin-top: var(--s-7); }
  .route__num { font-size: 4rem; }
  .route__q { font-size: 1.5rem; padding-bottom: var(--s-4); }
  .begrijpen__close { margin-top: var(--s-9); }
}

@keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.page-hero { padding-block: var(--s-7) var(--s-7); }
@media (min-width: 768px) { .page-hero { padding-block: 72px var(--s-8); } }
@media (min-width: 1200px) { .page-hero { padding-block: var(--s-9) var(--s-9); } }
.page-hero__text { max-width: 860px; }
.page-hero .t-h1 { margin-bottom: var(--s-5); }
.page-hero .t-lead { max-width: var(--measure); }
.page-hero .t-lead + p { max-width: var(--measure); margin-top: var(--s-4); }
.page-hero__logo { margin-bottom: var(--s-7); }
.page-hero__logo img { width: 220px; }
@media (min-width: 768px) { .page-hero__logo img { width: 260px; } }


/* ---------- Beeld ---------- */
.media { margin: 0; }
.media img { width: 100%; height: 100%; object-fit: cover; background: var(--paper); }
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 3 / 2; }
@media (max-width: 767px) { .media--portrait { aspect-ratio: 4 / 3; } }
.media figcaption { font-size: var(--fs-small); color: var(--slate); margin-top: var(--s-3); }

/* ---------- Statement ---------- */
.statement { max-width: 22em; }
.statement--center { margin-inline: auto; text-align: center; }
.statement--frame { position: relative; padding: var(--s-6) 0 0 var(--s-6); }
.statement--frame::before {
  content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 56px;
  border-left: 2px solid var(--accent); border-top: 2px solid var(--accent);
}
.on-navy .statement__accent { color: var(--amber); }

/* ---------- Vragenreeks (Home) ---------- */
.questions { list-style: none; border-top: 1px solid var(--line); }
.questions li { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.3; padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
@media (min-width: 1200px) { .questions li { font-size: 1.75rem; padding-block: var(--s-5); } }

/* ---------- 3:2:1-domeinen ---------- */
.domains { list-style: none; display: grid; gap: var(--gutter); }
.domain { position: relative; display: flex; flex-direction: column; padding: var(--s-6) var(--s-5); border: 1px solid transparent; }
.domain__title { font-family: var(--font-serif); font-weight: 500; line-height: 1.1; margin-bottom: var(--s-4); }
.domain__sub { font-weight: 600; line-height: 1.45; margin-bottom: var(--s-4); }
.domain__body { margin-bottom: var(--s-5); }
.domain__more { margin-top: auto; }
.domain--1 { background: var(--navy); color: var(--on-navy); }
.domain--1 .domain__title { font-size: clamp(2rem, 1.6rem + 1.7vw, 2.375rem); }
.domain--1 .domain__body { color: var(--on-navy-muted); }
.domain--2 { background: var(--paper); }
.domain--2 .domain__title { font-size: clamp(1.625rem, 1.4rem + 0.9vw, 1.875rem); }
.domain--3 { background: var(--white); border-color: var(--line); }
.domain--3 .domain__title { font-size: 1.5rem; }
@media (min-width: 768px) {
  .domains { grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 2fr) minmax(0, 1fr); height: 960px; }
  .domain { padding: var(--s-7) var(--s-6); }
  .domain--1 { grid-row: 1 / span 2; }
}
@media (min-width: 1200px) {
  .domains { height: 780px; }
  .domain { padding: var(--s-8) var(--s-7); }
  .domain--2, .domain--3 { padding-inline: var(--s-7); }
  .domain--3 { padding-block: var(--s-6); }
}
@media (max-width: 767px) {
  .domains { margin-inline: calc(var(--pad-x) * -1); gap: 0; }
  .domain { padding-inline: var(--pad-x); }
  .domain--1 { padding-block: var(--s-7); }
  .domain--2 { padding-block: var(--s-7) var(--s-6); }
  .domain--3 { margin: var(--s-5) var(--pad-x) 0; padding: var(--s-5); }
}

/* 3-2-1-markering: gebundelde lichtstreepjes */
.rank { display: flex; gap: 5px; margin-bottom: var(--s-5); }
.rank span { width: 18px; height: 3px; background: var(--amber); transform-origin: left; }
.js .rank span { transition: transform 360ms ease-out, opacity 360ms ease-out; }
.js .rank:not(.is-visible) span { transform: scaleX(0.25); opacity: 0.35; }
.js .rank span:nth-child(2) { transition-delay: 120ms; }
.js .rank span:nth-child(3) { transition-delay: 240ms; }

/* ---------- Normlabels ---------- */
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.tags li {
  font-size: var(--fs-small); font-weight: 500; line-height: 1.3;
  padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-tag);
}
.on-navy .tags li, .domain--1 .tags li { border-color: rgba(255, 255, 255, 0.4); color: var(--white); }

/* ---------- Genummerde lijst ---------- */
.numbered { list-style: none; border-top: 1px solid var(--line); counter-reset: n; }
.numbered > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-6); border-bottom: 1px solid var(--line); }
.numbered__num { font-family: var(--font-serif); font-weight: 500; font-size: 1.25rem; line-height: 1; color: var(--slate); font-variant-numeric: lining-nums tabular-nums; }
.numbered__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.2; }
@media (min-width: 768px) {
  .numbered > li { grid-template-columns: 64px minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-6); padding-block: var(--s-7); }
  .numbered__title { font-size: 1.625rem; }
}
.numbered__emph { font-weight: 600; }

/* ---------- Principes (Hoe we werken) ---------- */
.principles-layout { display: grid; gap: var(--s-7); }
@media (min-width: 1200px) {
  .principles-layout { grid-template-columns: 3fr 9fr; gap: var(--gutter); }
}
.principles-index { display: none; }
@media (min-width: 1200px) {
  .principles-index { display: block; }
  .principles-index nav { position: sticky; top: calc(var(--header-h) + 24px); }
  .principles-index ol { list-style: none; border-left: 1px solid var(--line); }
  .principles-index a {
    position: relative; display: block; padding: 8px 0 8px var(--s-5); min-height: 44px;
    font-size: var(--fs-small); font-weight: 600; color: var(--slate); text-decoration: none; line-height: 1.4;
  }
  .principles-index a::before { content: ""; position: absolute; left: -1px; top: 8px; bottom: 8px; width: 2px; background: transparent; transition: background var(--t-fast); }
  .principles-index a:hover { color: var(--navy); }
  .principles-index a.is-current { color: var(--navy); }
  .principles-index a.is-current::before { background: var(--amber); }
}
.toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--s-4); }
.toc ol { list-style: none; display: grid; gap: 0; }
.toc a { display: flex; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--fs-small); }
@media (min-width: 1200px) { .toc--mobile-only { display: none; } }

.principle { position: relative; padding-block: var(--s-7); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.principle:first-child { border-top: 0; padding-top: 0; }
.principle__num { font-family: var(--font-serif); font-weight: 500; font-size: 4rem; line-height: 0.9; color: rgba(30, 41, 89, 0.15); margin-bottom: var(--s-4); font-variant-numeric: lining-nums; }
.principle__title { margin-bottom: var(--s-3); }
.principle__sub { font-weight: 600; font-size: var(--fs-lead); line-height: 1.45; margin-bottom: var(--s-5); max-width: var(--measure); }
.principle__body { max-width: var(--measure); }
@media (min-width: 1200px) { .principle { padding-block: var(--s-8); } .principle__num { font-size: 5rem; } }

/* ---------- Juridische tekst (algemene voorwaarden) ---------- */
/* Hergebruikt .principles-layout/.principles-index; de index is hier compacter (22 artikelen). */
.legal-meta { font-weight: 600; color: var(--slate); }
.legal-hero + .section { padding-top: 0; }
.page-hero.legal-hero { padding-bottom: var(--s-7); }
.legal { max-width: 760px; }
.legal-article { padding-block: var(--s-6); border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 16px); }
.legal-article:first-of-type { border-top: 0; padding-top: 0; }
.legal-article__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--s-4); }
.legal-article__num { display: block; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s-2); }
.legal-list { padding-left: 1.6em; display: grid; gap: var(--s-3); }
.legal-list > li { padding-left: var(--s-2); }
.legal-list > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
.legal-list ul { list-style: disc; padding-left: 1.3em; margin-top: var(--s-2); display: grid; gap: var(--s-1); }
.legal-list ul li::marker { color: var(--line-strong); }
.legal--short .legal-article:first-of-type { border-top: 1px solid var(--line); padding-top: var(--s-6); }
.legal-intro { margin-bottom: var(--s-7); }
.legal-bullets { list-style: disc; padding-left: 1.3em; margin: 0 0 1em; display: grid; gap: var(--s-1); }
.legal-bullets li::marker { color: var(--line-strong); }
.legal-address { font-style: normal; padding-left: var(--s-5); border-left: 2px solid var(--amber); line-height: 1.7; }
.legal-foot { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.legal-toc { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: var(--s-7); }
.legal-toc summary { display: flex; align-items: center; min-height: 48px; font-weight: 600; cursor: pointer; }
.legal-toc ol { list-style: none; padding-bottom: var(--s-4); }
.legal-toc a { display: flex; align-items: center; min-height: 40px; font-size: var(--fs-small); font-weight: 600; }
@media (min-width: 1200px) {
  .legal-toc { display: none; }
  .legal-index nav { max-height: calc(100svh - var(--header-h) - 48px); overflow-y: auto; }
  .legal-index a { min-height: 0; padding-block: 4px; font-size: 0.8125rem; line-height: 1.35; }
  .legal-index a::before { top: 4px; bottom: 4px; }
  .legal-index .eyebrow { margin-bottom: var(--s-3); }
}

/* ---------- Tweedeling ---------- */
.duo { display: grid; gap: var(--s-7); }
@media (min-width: 768px) {
  .duo { grid-template-columns: 1fr 1fr; gap: 0; }
  .duo > * { padding-right: var(--s-7); }
  .duo > * + * { padding-left: var(--s-7); padding-right: 0; border-left: 1px solid var(--line); }
}
@media (max-width: 767px) { .duo > * + * { border-top: 1px solid var(--line); padding-top: var(--s-7); } }
.duo h2, .duo h3 { margin-bottom: var(--s-4); }
.duo .link-arrow { margin-top: var(--s-4); }
.duo__logo { width: 180px; margin-bottom: var(--s-5); }

/* ---------- Klikbare kaart ---------- */
.card-link {
  position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  padding: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--navy); text-decoration: none; transition: border-color var(--t-fast);
}
.card-link:hover { border-color: var(--navy); text-decoration: none; }
.card-link__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; }
.card-link__text { color: var(--slate); max-width: var(--measure); }
.card-link__more { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 600; margin-top: var(--s-2); }
.card-link__more .arrow { transition: transform var(--t-fast); }
.card-link:hover .card-link__more .arrow { transform: translateX(3px); }

/* ---------- Publicaties ---------- */
.pub-list { list-style: none; display: grid; gap: var(--s-5); }
.pub { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
@media (min-width: 768px) { .pub { grid-template-columns: 160px minmax(0, 1fr); padding: var(--s-6); gap: var(--s-6); } }
.pub--edias { border-top: 3px solid var(--edias); }
.pub__cover { aspect-ratio: 2 / 3; }
.pub__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--s-2); }
.pub__meta { font-size: var(--fs-small); color: var(--slate); margin-bottom: var(--s-4); }

/* ---------- Artikelen ---------- */
.article-list { list-style: none; border-top: 1px solid var(--line); }
.article-list li { border-bottom: 1px solid var(--line); }
.article-item { display: block; padding-block: var(--s-6); text-decoration: none; color: var(--navy); }
.article-item__meta { font-size: var(--fs-small); color: var(--slate); margin-bottom: var(--s-2); }
.article-item__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; margin-bottom: var(--s-2); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-fast); }
.article-item:hover .article-item__title { text-decoration-color: var(--amber); }
.article-item--thumb { display: grid; gap: var(--s-5); }
.article-item__thumb { display: block; overflow: hidden; aspect-ratio: 16 / 10; }
.article-item__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; transition: transform 400ms ease; }
.article-item--thumb:hover .article-item__thumb img { transform: scale(1.03); }
@media (min-width: 768px) {
  .article-item--thumb { grid-template-columns: 280px minmax(0, 1fr); gap: var(--s-7); align-items: center; }
  .article-item__text { max-width: var(--measure); }
}
.article-body { max-width: var(--measure); }
.article-body h2 { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; margin: var(--s-7) 0 var(--s-4); }
.article-body h3 { font-weight: 600; font-size: var(--fs-h3); margin: var(--s-6) 0 var(--s-3); }
.article-body ul.article-links { list-style: none; padding: 0; border-top: 1px solid var(--line); margin-bottom: var(--s-6); }
.article-links li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--line); }
.article-links a { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h4); text-decoration-color: transparent; }
.article-links a:hover { text-decoration-color: var(--amber); }
.article-links span { color: var(--slate); font-size: var(--fs-small); }
.article-credit { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--slate); }
.article-credit { display: flex; gap: var(--s-5); align-items: center; }
.article-credit__logo { flex: none; display: block; width: 104px; }
.article-credit__logo img { width: 100%; height: auto; }
@media (max-width: 479px) { .article-credit { flex-direction: column; align-items: flex-start; gap: var(--s-4); } }
.article-credit__title { font-weight: 600; color: var(--navy); margin-bottom: var(--s-1); }
.article-body ul, .article-body ol { padding-left: 1.25em; margin-bottom: 1em; }

/* ---------- Submerkcontext ---------- */
.ctx-academy { --accent: var(--amber); }
.ctx-academy .eyebrow::before { width: 40px; height: 3px; }

/* Academy: opleidingsaanbod als rustige kaarten (lijn boven, geen schaduw). */
.courses { list-style: none; display: grid; gap: var(--s-7); }
@media (min-width: 768px) { .courses { grid-template-columns: 1fr 1fr; gap: var(--gutter); } }
.course { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-5); border-top: 2px solid var(--navy); }
.course__type { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin: 0; }
.course__title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.25; margin: 0; }
.course > p:not(.course__type) { margin: 0; max-width: var(--measure); }
.course__meta { display: grid; gap: var(--s-2); margin: var(--s-2) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line); font-size: var(--fs-small); }
.course__meta div { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s-3); }
.course__meta dt { font-weight: 600; color: var(--slate); }
.course__meta dd { margin: 0; }
.course .link-arrow { margin-top: auto; align-self: flex-start; }
/* Domeinnavigatie zonder 3:2:1-weging (Kennis & publicaties): gelijke kolommen, pijl omlaag naar de sectie. */
.domain-nav.domain-nav--equal a { font-size: var(--fs-h3); justify-content: space-between; }
.domain-nav.domain-nav--equal .arrow { flex: none; transform: rotate(90deg); color: var(--navy); transition: transform var(--t-fast); }
.domain-nav.domain-nav--equal a:hover .arrow { transform: rotate(90deg) translateX(3px); }
@media (min-width: 768px) {
  .domain-nav.domain-nav--equal ol { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .domain-nav.domain-nav--equal a { flex-direction: row; align-items: center; min-height: 96px; padding-right: var(--s-5); }
}
@media (min-width: 1200px) { .domain-nav.domain-nav--equal a { font-size: 2rem; min-height: 120px; } .domain-nav.domain-nav--equal .arrow { width: 22px; height: 22px; } }

/* Draaiend boek: één keer per bezoek naar de achterkant en terug (timing in site.js).
   Bij reduced motion wisselt hij nog steeds, alleen zonder draai-animatie (globale regel). */
.book-flip { perspective: 1400px; aspect-ratio: 550 / 770; }
.book-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 700ms cubic-bezier(0.45, 0, 0.2, 1); }
.book-flip.is-flipped .book-flip__inner { transform: rotateY(180deg); }
.book-flip__face { position: absolute; inset: 0; display: block; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 10px 28px rgba(21, 30, 69, 0.18), 0 2px 6px rgba(21, 30, 69, 0.12); border-radius: 2px; overflow: hidden; }
.book-flip__face img { width: 100%; height: 100%; object-fit: cover; }
.book-flip__back { transform: rotateY(180deg); }
.pub__cover--flip { aspect-ratio: auto; }
.pub:has(.pub__cover--flip) { grid-template-columns: minmax(0, 1fr); }
.pub__cover--flip .book-flip { max-width: 170px; }
@media (min-width: 768px) {
  .pub:has(.pub__cover--flip) { grid-template-columns: 210px minmax(0, 1fr); align-items: center; }
  .pub__cover--flip .book-flip { max-width: none; }
}
.pub__actions { margin-top: var(--s-5); }

/* ---------- Boeken (Kennis & publicaties) ---------- */

/* Boekpagina: tekst links, omslag rechts op crème. */
.book-hero { background: var(--paper); padding-block: var(--s-8) var(--s-8); }
.book-hero .t-h1 { margin-bottom: var(--s-5); max-width: 15em; }
.book-hero__author { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; margin-bottom: var(--s-2); }
.book-hero__meta { color: var(--slate); font-size: var(--fs-small); }
.book-hero__order { margin-top: var(--s-6); }
.book-hero__more { margin-top: var(--s-4); }
.book-hero__cover { max-width: 280px; margin-inline: auto; width: 100%; }
.book-hero__cover .book-flip__face { box-shadow: 0 18px 44px rgba(21, 30, 69, 0.22), 0 3px 8px rgba(21, 30, 69, 0.12); }
@media (min-width: 768px) {
  .book-hero__text { grid-column: 1 / span 5; align-self: center; }
  .book-hero__cover { grid-column: 6 / span 3; max-width: none; margin: 0; }
}
@media (min-width: 1200px) {
  .book-hero { padding-block: var(--s-9); }
  .book-hero__text { grid-column: 1 / span 7; }
  .book-hero__cover { grid-column: 8 / span 5; padding-inline: var(--s-8); }
}
.book-section .split__main { max-width: var(--measure); }
.book-section h2.eyebrow { margin-bottom: var(--s-5); }
.book-author-name { font-family: var(--font-serif); font-size: var(--fs-h3); line-height: 1.3; margin-bottom: var(--s-3); }

/* Recensies: serif citaten met dunne lijnen, geen kaarten. */
.reviews { list-style: none; display: grid; }
.reviews > li { padding-block: var(--s-6); border-top: 1px solid var(--line); }
.reviews > li:first-child { padding-top: 0; border-top: 0; }
.review { margin: 0; }
.review blockquote { margin: 0 0 var(--s-4); font-family: var(--font-serif); font-size: var(--fs-h4); line-height: 1.5; }
.review blockquote p::before { content: "\201C"; }
.review blockquote p::after { content: "\201D"; }
.review figcaption { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--fs-small); }
.review figcaption span { color: var(--slate); }
.review figcaption strong::after { content: ","; }

.ctx-edias { --accent: var(--edias); }
.ctx-edias .edias-title { color: var(--edias); }

/* ---------- Profiel ---------- */
.profiles { display: grid; gap: var(--s-7); }
@media (min-width: 768px) { .profiles { grid-template-columns: 1fr 1fr; gap: var(--gutter); } }
.profile { border-top: 2px solid var(--navy); padding-top: var(--s-6); }
.profile__photo { display: block; width: 160px; margin-bottom: var(--s-5); }
.profile__photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
@media (min-width: 768px) { .profile__photo { width: 200px; } }
.profile__name { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.15; margin-bottom: var(--s-2); }
.profile__role { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s-5); }

/* ---------- Placeholders (intern, voor nog aan te leveren inhoud) ---------- */
.placeholder {
  display: inline-block; padding: 4px 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius-tag);
  font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 600; font-style: normal;
  letter-spacing: 0.02em; color: var(--slate); background: var(--white); line-height: 1.4;
}
.placeholder-box {
  display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--s-4);
  border: 1px dashed var(--line-strong); background: var(--paper); color: var(--slate);
  font-size: 0.8125rem; font-weight: 600; line-height: 1.4;
}

/* ---------- Bundellijnen (stil beacon-accent op navy) ---------- */
.has-beams { position: relative; overflow: hidden; }
/* Lichte foto op een navy vlak: zwart-wit, laag gedekt, vervaagt naar links zodat tekst op egaal navy staat. */
.section-photo { position: absolute; inset: 0; pointer-events: none; }
.section-photo picture, .section-photo img { display: block; width: 100%; height: 100%; }
.section-photo img { object-fit: cover; object-position: 75% 55%; filter: grayscale(1) contrast(1.05); opacity: 0.12; }
@media (min-width: 1024px) {
  .section-photo { left: auto; width: 60%; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 55%); mask-image: linear-gradient(to right, transparent 0%, #000 55%); }
  .section-photo img { opacity: 0.2; }
}
.has-beams > .container { position: relative; z-index: 1; }
.beams { position: absolute; right: -4%; top: 50%; width: min(52vw, 640px); height: auto; transform: translateY(-50%); pointer-events: none; color: #FFFFFF; opacity: 0.09; }
@media (max-width: 767px) { .beams { width: 90vw; right: -30%; top: 20%; } }

/* ---------- Kennismakingsblok ---------- */
.meet { text-align: left; }
.meet__inner { max-width: 760px; margin-inline: auto; }
.meet .t-h2 { margin-bottom: var(--s-5); }
.meet p { max-width: var(--measure); }
.meet .btn-row { margin-top: var(--s-6); }

/* ---------- Formulier ---------- */
.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; font-size: 1rem; }
.field .hint { font-size: var(--fs-small); color: var(--slate); font-weight: 400; }
.field input, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px; background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1.0625rem; line-height: 1.4;
  transition: border-color var(--t-fast);
}
.field textarea { min-height: 160px; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--navy); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field--error input, .field--error textarea { border-color: var(--error); border-width: 2px; }
.field__error { color: var(--error); font-size: var(--fs-small); font-weight: 600; display: flex; gap: var(--s-2); align-items: flex-start; }
.field__error svg { flex: none; margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: var(--s-5); border-left: 3px solid var(--navy); background: var(--paper); }
.notice--error { border-left-color: var(--error); }
.notice h2, .notice h3 { font-size: 1.0625rem; font-weight: 600; font-family: var(--font-sans); margin-bottom: var(--s-2); }
.notice ul { padding-left: 1.2em; }
.form .btn { justify-self: start; }
@media (max-width: 767px) { .form .btn { width: 100%; } }

/* Keuzelijst in dezelfde stijl als de invoervelden (eigen chevron). */
.field select {
  width: 100%; min-height: 48px; padding: 12px 44px 12px 14px; background: var(--white);
  border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1.0625rem; line-height: 1.4;
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: border-color var(--t-fast);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 6 8 10.5 12.5 6' stroke='%231E2959' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.field select:hover { border-color: var(--navy); }
.field select:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; border-color: var(--navy); }
.field--error select { border-color: var(--error); border-width: 2px; }

/* ---------- Offcanvas-formulier (herbruikbaar, zie includes/forms.php + site.js) ---------- */
/* Zonder JS opent er geen paneel: de trigger valt dan terug op een link naar /contact/. */
.oc-trigger { display: none; }
.js .oc-trigger { display: inline-flex; }
.js .oc-fallback { display: none; }

.offcanvas { position: fixed; inset: 0; z-index: 160; }
.offcanvas[hidden] { display: none; }
.offcanvas [hidden] { display: none; } /* .form zet display: grid, dat mag hidden niet overrulen */
.offcanvas__overlay {
  position: absolute; inset: 0; background: rgba(21, 30, 69, 0.48);
  opacity: 0; transition: opacity 300ms ease;
}
.offcanvas__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(544px, calc(100% - 20px));
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  background: var(--paper); color: var(--navy); border-left: 1px solid var(--line);
  box-shadow: -16px 0 48px rgba(21, 30, 69, 0.18);
  transform: translateX(100%); transition: transform 300ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.offcanvas.is-open .offcanvas__overlay { opacity: 1; }
.offcanvas.is-open .offcanvas__panel { transform: none; }
body.oc-open { overflow: hidden; }

.offcanvas__close {
  position: absolute; top: 16px; right: 16px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 1px solid transparent; border-radius: var(--radius); color: var(--navy); cursor: pointer;
  transition: border-color var(--t-fast);
}
.offcanvas__close:hover { border-color: var(--line-strong); }
.offcanvas__head { padding: var(--s-7) var(--s-5) var(--s-6); border-bottom: 1px solid rgba(30, 41, 89, 0.16); }
.offcanvas__head .eyebrow { margin-bottom: var(--s-4); padding-right: 48px; }
.offcanvas__title {
  font-family: var(--font-serif); font-weight: 500; font-optical-sizing: auto;
  font-size: clamp(1.875rem, 1.6rem + 1vw, 2.375rem); line-height: 1.12; letter-spacing: -0.005em;
  margin-bottom: var(--s-4); padding-right: 48px;
}
.offcanvas__title:focus { outline: none; }
.offcanvas__intro { color: var(--slate); max-width: 44ch; margin: 0; }
.offcanvas__body { padding: var(--s-6) var(--s-5) var(--s-7); flex: 1; }
.offcanvas__feedback:not(:empty) { margin-bottom: var(--s-5); }
.offcanvas__feedback .notice { background: var(--white); }
.offcanvas__feedback .notice:focus { outline: none; }
.offcanvas__form { gap: var(--s-5) var(--s-4); }
.offcanvas__form .field label { font-size: 0.9375rem; }
.offcanvas__form .t-small { margin-top: var(--s-2); }
.offcanvas__form .btn[aria-disabled="true"] { opacity: 0.7; cursor: progress; }
.offcanvas__done { padding: var(--s-5) 0 0; border-top: 2px solid var(--navy); }
.offcanvas__done:focus { outline: none; }
.offcanvas__done-title { font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h3); line-height: 1.2; margin-bottom: var(--s-3); }
.offcanvas__done-close { margin-top: var(--s-4); background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-weight: 600; }
@media (min-width: 560px) {
  .offcanvas__form { grid-template-columns: 1fr 1fr; }
  .offcanvas__form > :not(.field--half) { grid-column: 1 / -1; }
  .offcanvas__head { padding: var(--s-8) var(--s-7) var(--s-6); }
  .offcanvas__body { padding: var(--s-6) var(--s-7) var(--s-8); }
  .offcanvas__close { top: 24px; right: 24px; }
}
@media (max-width: 767px) { .offcanvas__form .btn { width: 100%; } }

.contact-layout { display: grid; gap: var(--s-8); }
@media (min-width: 1200px) {
  .contact-layout { grid-template-columns: 5fr 1fr 6fr; gap: var(--gutter); }
  .contact-layout > :last-child { grid-column: 3; }
}
.contact-details { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }

/* ---------- Footer ---------- */
.footer-band { background: var(--navy); color: var(--white); padding-block: var(--s-7); }
.footer-band p { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: var(--fs-h3); line-height: 1.3; margin: 0; display: flex; align-items: center; gap: var(--s-4); }
.footer-band p::before { content: ""; flex: none; width: 24px; height: 2px; background: var(--amber); }
.site-footer { background: var(--paper); padding-block: var(--s-8) var(--s-6); font-size: var(--fs-small); }
.site-footer a { color: var(--navy); }
.footer-grid { display: grid; gap: var(--s-7); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .footer-grid { grid-template-columns: 4fr 3fr 3fr 2fr; gap: var(--gutter); } }
.footer-brand img { width: 190px; }
.footer-sub { display: flex; flex-wrap: wrap; gap: var(--s-5); margin-top: var(--s-6); }
.footer-sub img { width: 180px; }
.footer-title { font-weight: 600; font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: var(--s-4); }
.footer-nav { list-style: none; }
.footer-nav li { line-height: 1.4; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 36px; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; }
.footer-nav .sub a { padding-left: var(--s-4); color: var(--slate); }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-6); justify-content: space-between; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--line); color: var(--slate); }
.footer-bottom p { margin: 0; }
.footer-reg { white-space: nowrap; }
.footer-reg::before { content: "·"; margin-inline: 0.6em; }
.footer-cta { margin-top: var(--s-5); }
@media (max-width: 767px) { .footer-reg { display: block; } .footer-reg::before { content: none; } }
.contact-block { font-style: normal; line-height: 1.8; }
.contact-block a { display: inline-block; }
.contact-reg { margin-top: var(--s-4); color: var(--slate); font-size: var(--fs-small); }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--s-5); }
.footer-bottom a { color: var(--slate); display: inline-flex; min-height: 36px; align-items: center; }
.footer-bottom .footer-credit a { display: inline; min-height: 0; }

/* ---------- Reveal (inhoud altijd zichtbaar zonder JS) ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--t-reveal), transform var(--t-reveal); }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Diversen ---------- */
.mt-0 { margin-top: 0 !important; }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }
.mb-7 { margin-bottom: var(--s-7); }
.back-top { margin-top: var(--s-7); }
.hr { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---------- Reduced motion: alleen beweging uit, functie blijft ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
  .js .reveal { opacity: 1; transform: none; }
  .js .rank:not(.is-visible) span { transform: none; opacity: 1; }
}

@media print {
  .site-header, .mobile-menu, .offcanvas, .footer-band, .skiplink { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Domeinnavigatie (Expertise) ---------- */
.domain-nav { padding-bottom: var(--s-8); }
.domain-nav ol { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.domain-nav li { border-bottom: 1px solid var(--line); }
.domain-nav a { display: flex; align-items: center; gap: var(--s-4); min-height: 56px; padding-block: var(--s-3); text-decoration: none; font-family: var(--font-serif); font-weight: 500; line-height: 1.2; }
.domain-nav a:hover span { text-decoration: underline; text-decoration-color: var(--amber); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.domain-nav .rank { margin: 0; width: 64px; flex: none; }
.domain-nav__1 a { font-size: var(--fs-h2); }
.domain-nav__2 a { font-size: var(--fs-h3); }
.domain-nav__3 a { font-size: var(--fs-h4); }
@media (min-width: 768px) {
  .domain-nav ol { grid-template-columns: 3fr 2fr 1.4fr; border-bottom: 1px solid var(--line); }
  .domain-nav li { border-bottom: 0; }
  .domain-nav li + li { border-left: 1px solid var(--line); padding-left: var(--s-5); }
  .domain-nav a { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-5); }
}