/* ==========================================================
   Forty huisstijl 2026
   Drie lichten (Dageraad, Avondrood, Nacht) en één signatuur.
   Laden ná de pagina-eigen <style>, zodat dit de basis overschrijft.
   ========================================================== */

:root {
  /* Kleuren */
  --inkt: #17143D;
  --ultramarijn: #4636FF;
  --wolk: #F4F3EF;
  --zon: #FFB000;
  --lila: #A49BFF;
  --mist: #D9D6E0;
  --tekst: #3D3A63;      /* lopende tekst op wolk, contrast 10:1 */
  --tekst-zacht: #6B6790; /* labels, contrast 4.8:1 */

  /* Oude tokens laten wijzen naar de nieuwe kleuren */
  --stone-900: var(--inkt);
  --stone-800: #2A2659;
  --stone-700: #3D3A63;
  --stone-600: #4A4675;
  --stone-500: #6B6790;
  --stone-400: #9C98B8;
  --stone-300: #D9D6E0;
  --stone-200: #E2DFE8;
  --stone-100: #ECEAF0;
  --stone-50: var(--wolk);
  --white: #FBFAF7;            /* papier: kaarten en lichte vlakken */

  /* Tokens van subpagina's */
  --amber-500: var(--ultramarijn);   /* accenten op licht: ultramarijn, zon alleen bewust */
  --amber-600: #3424D9;
  --amber: var(--ultramarijn);
  --amber-hover: #FFC233;
  --amber-light: rgba(255,176,0,.14);
  --ink: var(--inkt);
  --paper: var(--wolk);
  --grey: var(--tekst-zacht);
  --line: var(--mist);
  --body: var(--tekst);
  --mid: var(--tekst-zacht);
  --faint: #9C98B8;
  --rule: #E2DFE8;
  --card: #FBFAF7;
  --surface: var(--wolk);
  --dark: var(--inkt);
  --slate-900: var(--inkt);
  --stone-950: var(--inkt);
  --forty-orange: var(--ultramarijn); /* oud oranje accent: op licht wordt het ultramarijn */
  --forty-blue: var(--inkt);

  /* Verlopen */
  --dageraad:
    radial-gradient(ellipse 90% 120% at 100% 0%, rgba(190,182,255,.85) 0%, rgba(190,182,255,.70) 20%, rgba(190,182,255,.47) 40%, rgba(190,182,255,.24) 60%, rgba(190,182,255,.07) 80%, rgba(190,182,255,0) 100%),
    radial-gradient(ellipse 80% 110% at 0% 100%, rgba(255,214,140,.70) 0%, rgba(255,214,140,.57) 20%, rgba(255,214,140,.39) 40%, rgba(255,214,140,.20) 60%, rgba(255,214,140,.06) 80%, rgba(255,214,140,0) 100%),
    #F7F6F2;
  --avondrood-basis: linear-gradient(200deg, #3A2BE0 0%, #2A1DB0 100%);
  --nacht:
    radial-gradient(ellipse 140% 180% at 100% 0%, rgba(110,96,255,.9) 0%, rgba(110,96,255,.74) 20%, rgba(110,96,255,.5) 40%, rgba(110,96,255,.25) 60%, rgba(110,96,255,.07) 80%, rgba(110,96,255,0) 100%),
    radial-gradient(ellipse 70% 90% at 90% 5%, rgba(185,176,255,.28) 0%, rgba(185,176,255,.23) 20%, rgba(185,176,255,.15) 40%, rgba(185,176,255,.08) 60%, rgba(185,176,255,.02) 80%, rgba(185,176,255,0) 100%),
    linear-gradient(200deg, #261F66 0%, #17143D 55%, #110E2E 100%);
  /* Typeschaal: vier serifmaten, twee sansmaten */
  --t-display: clamp(3.5rem, 8vw, 6.9375rem);  /* 111 */
  --t-kop: clamp(2.5rem, 5vw, 4.5rem);          /* 72 */
  --t-kernzin: clamp(1.75rem, 2.6vw, 2.25rem);  /* 36 */
  --t-tussenkop: 1.375rem;                      /* 22 */
  --t-tekst: 17px;                              /* 15 in documenten, 17 op scherm */
  --t-label: 14px;

  --korrel: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

body {
  background: var(--wolk);
  color: var(--tekst);
}

::selection { background: #D6D1FF; color: var(--inkt); }

a:focus-visible,
button:focus-visible { outline-color: var(--ultramarijn); }

/* Geen cursief accentwoord: nadruk komt uit grootte en de stip */
.hero__title em { font-style: normal; background: none; padding: 0; }

/* De zon-stip: 20% van de lettergrootte, op de basislijn */
.stip {
  display: inline-block;
  width: .2em;
  height: .2em;
  border-radius: 50%;
  background: var(--zon);
  margin-left: .04em;
  vertical-align: baseline;
}

/* ---------- Header ---------- */
.header { background: rgba(244,243,239,.92); }
@supports (backdrop-filter: blur(12px)) {
  .header { background: rgba(244,243,239,.8); }
}
.header__nav a { color: var(--tekst); font-size: 15px; }
.header__nav a:hover { color: var(--inkt); }
.header__nav a.header__cta {
  background: var(--inkt);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 500;
  transition: background 200ms ease;
}
.header__nav a.header__cta:hover { background: var(--ultramarijn); color: #fff; }
.header__mobile-menu { background: var(--wolk); }
.header__mobile-cta { background: var(--inkt); color: #fff; border-radius: 10px; }
.header__mobile-cta:hover { background: var(--ultramarijn); }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 26px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background 200ms ease;
}
.knop--zon { background: var(--zon); color: var(--inkt); }
.knop--zon:hover { background: #FFC233; }
.knop-link {
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgba(255,255,255,.5);
}
.knop-link:hover { text-decoration-color: #fff; }

/* ---------- Hero: het signatuurbeeld (Avondrood met lagen) ---------- */
.hero--signatuur {
  background: var(--avondrood-basis);
  min-height: min(64vw, 900px);
  display: flex;
  align-items: flex-end;
  padding: 150px 24px clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.hero--signatuur::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--korrel);
  background-size: 220px;
  opacity: .14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.hero--signatuur .hero__inner { width: 100%; }
.hero--signatuur .hero__label-text {
  text-transform: none;
  letter-spacing: 0;
  font-size: 15px;
  color: #CFCBFF;
}
.hero--signatuur .hero__title {
  font-size: var(--t-kop);
  line-height: 1;
  letter-spacing: -.01em;
  max-width: 700px;
  color: #fff;
  text-wrap: balance;
}
.hero--signatuur .hero__body { color: #E3E0F5; max-width: 520px; }
.hero__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin-top: 36px;
}

/* ---------- Logobalk ---------- */
.logobalk {
  background: var(--wolk);
  border-bottom: 1px solid #E2DFE8;
  padding: 36px 24px;
}
.logobalk__inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 48px;
}
.logobalk__label { font-size: 14px; color: var(--tekst-zacht); margin-right: 8px; }
.logobalk__namen {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 0;
  padding: 0;
}
.logobalk__namen li {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--tekst);
}

/* ---------- De lijn: een rustige hairline ----------
   De verlopen lijn van blauw naar zon is voorbehouden aan de beslislijn met stappen. */
.de-lijn__line,
.de-lijn--contained .de-lijn__line { height: 1px; background: #E2DFE8; }
.cta .de-lijn--contained .de-lijn__line { background: rgba(255,255,255,.14); }

/* ---------- Beslisblok: kernzin op wolk ---------- */
.beslisblok--kernzin {
  background: var(--wolk);
  background-image: none;
  padding: clamp(80px, 10vw, 136px) 24px clamp(40px, 5vw, 64px);
}
.beslisblok--kernzin .beslisblok__statement {
  color: var(--inkt);
  text-align: left;
  margin: 0;
  max-width: 820px;
  font-size: var(--t-kop);
  line-height: 1;
  letter-spacing: -.01em;
}

/* Drie lagen in de vorm van het beeldmerk.
   Middelpunt op de rechterrand (snede op de symmetrie-as),
   gelijke tussenruimte, buitenste band begint op het midden. */
.signatuur {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  --W: 100vw;
  --b: clamp(44px, 8vw, 140px);
  --onder: clamp(24px, 4vw, 56px);
}
.signatuur span {
  position: absolute;
  border-radius: 9999px;
}
.signatuur span:nth-child(1) {
  width: var(--W);
  height: calc(var(--W) / .64);
  left: calc(100% - var(--W) / 2);
  bottom: var(--onder);
  background: linear-gradient(200deg, #6A5CFF 0%, #4A3AFF 60%, #3A2BE6 100%);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.22), -40px 0 90px rgba(23,20,61,.35);
}
.signatuur span:nth-child(2) {
  width: calc(var(--W) - 2 * var(--b));
  height: calc(var(--W) / .64 - 2 * var(--b));
  left: calc(100% - var(--W) / 2 + var(--b));
  bottom: calc(var(--onder) + var(--b));
  background: linear-gradient(200deg, #8F84FF 0%, #6455FF 70%);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.3), -40px 0 90px rgba(23,20,61,.35);
}
.signatuur span:nth-child(3) {
  width: calc(var(--W) - 4 * var(--b));
  height: calc(var(--W) / .64 - 4 * var(--b));
  left: calc(100% - var(--W) / 2 + 2 * var(--b));
  bottom: calc(var(--onder) + 2 * var(--b));
  background: linear-gradient(200deg, #D9D2FF 0%, #A79CFF 55%, #8073FF 100%);
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.55), -40px 0 90px rgba(23,20,61,.35);
}
@media (max-width: 768px) {
  .hero--signatuur { min-height: 720px; padding-top: 120px; }
  .signatuur { --W: 120vw; --b: 40px; --onder: 400px; }
  .hero__acties { gap: 20px; }
}

/* ---------- Resultaat: kaarten op wolk ---------- */
.resultaat { background: var(--wolk); }
.canvas-card {
  border: 1px solid #E2DFE8;
  border-radius: 12px;
  box-shadow: none;
}
.canvas-card::after { border-radius: 12px; }
.canvas-card__heading { font-size: var(--t-tussenkop); line-height: 1.15; }
.canvas-card__body { color: var(--tekst); font-size: 17px; }

/* ---------- CTA: Nacht ----------
   Op een website geldt: één verloop per scherm. Hero en CTA staan nooit tegelijk in beeld. */
.cta {
  background: var(--nacht);
  border-bottom: none;
  color: #F4F3EF;
}
.cta::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--korrel);
  background-size: 220px;
  opacity: .14;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.cta__inner { z-index: 1; }
.cta__conclusion {
  color: #F4F3EF;
  font-size: var(--t-kernzin);
  line-height: 1.05;
  text-align: left;
  max-width: 720px;
  margin-bottom: 64px;
}
.cta .de-lijn--contained { margin-bottom: 48px; }
.cta__proof,
.cta__final {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.cta__final { padding-left: 48px; border-left: 1px solid rgba(255,255,255,.14); }
.cta__proof::after,
.cta__final::after { display: none; }
.cta__proof-text,
.cta__final-text { color: #E3E0F5; font-size: 19px; }
.cta__proof-link { color: #F4F3EF; border-bottom-color: rgba(244,243,239,.4); }
.cta__proof-link:hover { color: #fff; border-color: #fff; }
.cta__button {
  background: var(--zon);
  color: var(--inkt);
  border: none;
  border-radius: 10px;
  font-weight: 600;
  font-size: 16px;
  padding: 16px 26px;
  align-self: flex-start;
}
.cta__button:hover { background: #FFC233; color: var(--inkt); }
.cta__button:focus-visible { outline: 2px solid #fff; box-shadow: none; }
@media (max-width: 768px) {
  .cta__final { padding-left: 0; border-left: none; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.14); }
}

/* ---------- Snel overzicht (inline gestijld in de HTML) ---------- */
section[aria-label^="Snel overzicht"] {
  background: var(--wolk) !important;
  border-top: 1px solid #E2DFE8 !important;
}
section[aria-label^="Snel overzicht"] h2 { color: var(--inkt) !important; font-size: var(--t-kernzin) !important; }
section[aria-label^="Snel overzicht"] p,
section[aria-label^="Snel overzicht"] ul { color: var(--tekst) !important; }
section[aria-label^="Snel overzicht"] a { color: var(--ultramarijn) !important; }

/* ---------- Footer: inkt ---------- */
.footer { background: var(--inkt); color: #B9B5D6; }
.footer__top { border-bottom-color: rgba(255,255,255,.1); }
.footer__col-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: #9C98C4;
}
.footer__brand-tagline,
.footer__social a,
.footer__col a,
.footer__contact-item a { color: #C9C5E6; }
.footer__col a:hover,
.footer__contact-item a:hover,
.footer__social a:hover { color: #fff; }
.footer__bottom,
.footer__legal a { color: #9C98C4; }
.footer__legal a:hover { color: #fff; }

/* Inline gestijlde plaatsnaam in de footer */
.footer__contact-item[style] { color: #9C98C4 !important; }

/* Kernzin en resultaat horen bij elkaar: minder lucht ertussen */
.beslisblok--kernzin + .resultaat { padding-top: 24px; }

/* Overige koppen op de typeschaal */
.resultaat__title { font-size: var(--t-kernzin); }
h1 { font-size: var(--t-kop); }
h2 { font-size: var(--t-kernzin); }
h3 { font-size: var(--t-tussenkop); }
body { font-size: var(--t-tekst); }
section[aria-label^="Snel overzicht"] > div { max-width: 1120px !important; }


/* ==========================================================
   Alle pagina's
   ========================================================== */

/* Geen cursief accentwoord in koppen */
h1 em, h2 em, .hero__title em, .page-title em {
  font-style: normal !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
/* Ook geen cursieve serif in citaten en tussenzinnen */
.kern__pull, .bridge__text, .herkenbaar__zin em, .closing__text, .cta-section__quote,
blockquote, .pull-quote, .article__quote { font-style: normal !important; }

a { text-decoration-color: currentColor; }

/* Hero van subpagina's: Dageraad */
.hero:not(.hero--signatuur) {
  background: var(--dageraad) !important;
}
.hero:not(.hero--signatuur) .hero__label-text,
.hero:not(.hero--signatuur) [class*="label"] {
  text-transform: none;
  letter-spacing: 0;
}

/* Donkere statementblokken op subpagina's: effen inkt */
.beslisblok:not(.beslisblok--kernzin) {
  background: var(--inkt) !important;
  background-image: none !important;
}

/* Afsluitende CTA-blokken: Nacht */
.cta-section,
.closing {
  background: var(--nacht) !important;
  position: relative;
}
.cta-section__quote { color: #F4F3EF !important; font-size: var(--t-kernzin) !important; line-height: 1.15 !important; }
.cta-section__sub { color: #C9C5E6 !important; }
.cta-section__btn,
.closing__link--cta {
  background: var(--zon) !important;
  color: var(--inkt) !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.cta-section__btn:hover,
.closing__link--cta:hover { background: #FFC233 !important; }

/* Beslisstatus "Go": zon als vlak, inkt als tekst */
.hero__pill--decision { background: var(--zon) !important; border-color: var(--zon) !important; color: var(--inkt) !important; }

/* Accenten in diagrammen: oranje wordt ultramarijn (zon nooit als lijn of tekst op licht) */
svg [fill="#D97706" i], svg [fill="#E8A838" i], svg [fill="#F59E0B" i], svg [fill="#F97316" i] { fill: var(--ultramarijn); }
svg [stroke="#D97706" i], svg [stroke="#E8A838" i], svg [stroke="#F59E0B" i], svg [stroke="#F97316" i] { stroke: var(--ultramarijn); }

/* ==========================================================
   Automatisch verzameld uit de pagina's:
   geen labels in hoofdletters, geen cursieve serif
   ========================================================== */
.article-hero__category,
.article-hero__meta-label,
.article-nav__label,
.article__eyebrow,
.badge,
.beslisblok__label,
.case-card__label,
.case-nav__label,
.client-logos__label,
.content__insight-label,
.decision-core__label,
.decision-core__title,
.decision-marker,
.footer-col h4,
.footer__col-title,
.herkenning-card__label,
.hero-label,
.hero__label-text,
.matrix__caption,
.matrix__colhead,
.matrix__pos,
.matrix__rowhead,
.output-item .conf,
.patroon__step-number,
.patroon__title,
.section-label,
.sidebar__boundary-label,
.sidebar__label,
.verhaal-card__label,
.vormen__card-label {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.bias-tag,
.bridge__text,
.case-card__image-placeholder,
.content__insight-text,
.content__process-caption,
.footer-brand .tagline,
.herkenbaar__zin em,
.hero h1 em,
.hero__title em,
.kern__pull,
.main-image__caption,
.methodo-closer p,
.patroon__besluit-text,
.patroon__step-title,
.reflective__text {
  font-style: normal !important;
}
.hero h1 em { background: none !important; box-shadow: none !important; }

/* Werkwijze: dit is de beslislijn. Blauw naar zon, het besluit is de zon. */
.patroon__steps::after { background: linear-gradient(in oklch 90deg, var(--ultramarijn) 0%, var(--ultramarijn) 55%, var(--zon) 100%); }
.patroon__steps.proces-animate .patroon__step:nth-child(3) .patroon__marker {
  background: var(--zon) !important;
  border-color: var(--zon) !important;
}
.patroon__steps.proces-animate .patroon__step:nth-child(3) .patroon__marker-num { color: var(--inkt) !important; }

/* Cursief binnen serif-koppen en titels */
[class*="title"] em, [class*="quote"] em, [class*="statement"] em, [class*="zin"] em,
h1 em, h2 em, h3 em, h4 em, blockquote em { font-style: normal !important; }

/* Koppen van subpagina's: maximaal drie regels */
.hero:not(.hero--signatuur) .hero__title,
.hero:not(.hero--signatuur) h1 { max-width: 880px; text-wrap: balance; }

/* Op donkere vlakken worden accenten weer zon of lila, zodat ze leesbaar blijven */
.beslisblok, .cta, .cta-section, .closing, .footer, [class*="dark"] {
  --forty-orange: var(--zon);
  --amber-500: var(--zon);
  --amber-600: #FFC233;
  --amber: var(--zon);
}


/* ---------- Afbeeldingen ---------- */
/* Logo: strak uitgesneden bestand, overal dezelfde zichtbare maat */
header img[src*="Liggend"],
.header img[src*="Liggend"],
nav img[src*="Liggend"] { height: 40px !important; width: auto !important; }
footer img[src*="Liggend"],
.footer img[src*="Liggend"] { height: 36px !important; width: auto !important; }
@media (max-width: 768px) {
  header img[src*="Liggend"], .header img[src*="Liggend"] { height: 34px !important; }
}

/* Case-afbeeldingen: niet uitrekken, vaste verhouding, netjes bijgesneden */
.hero__image-wrapper img {
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.hero__image-wrapper { border-radius: 12px; }

/* Klantlogo's in cases: verhouding behouden */
img[src*="-logo"] { object-fit: contain; }


/* ==========================================================
   Ronde 3: contrast, header op beeld, kaarten
   ========================================================== */

/* Labels op licht: nooit zon of oranje als tekst */
.verhaal-card__label { color: var(--ultramarijn) !important; }

/* Over Forty: zachte tekst blijft leesbaar */
.herkenbaar__title { color: var(--tekst-zacht) !important; }
.herkenbaar__zin em { color: var(--tekst-zacht) !important; }
.cta__closing {
  color: #CFCBFF !important;
  text-align: left !important;
  font-size: 15px;
  margin-bottom: 16px !important;
}
.cta__closing strong { color: #F4F3EF !important; font-weight: 500; }

/* Homepage: header ligt transparant op het signatuurbeeld, wordt licht bij scrollen */
.header .logo--wit { display: none; }
.header--op-beeld {
  transition: background-color 250ms ease, border-color 250ms ease, backdrop-filter 250ms ease;
}
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom-color: transparent !important;
}
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .logo--inkt { display: none; }
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .logo--wit { display: block; }
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .header__nav a { color: #E3E0F5; }
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .header__nav a:hover { color: #fff; }
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .header__nav a.header__cta {
  background: #fff;
  color: var(--inkt);
}
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .header__nav a.header__cta:hover { background: var(--wolk); }
.header--op-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) .header__mobile-toggle { color: #fff; }

/* Verhalen: geen losse nummers, het label doet het werk */
.verhaal-card__number { display: none !important; }

/* Header op beeld, desktop: navigatie in een zachte inktpil, leesbaar boven de lagen */
@media (min-width: 769px) {
  .header--op-beeld:not(.scrolled) .header__nav {
    background: rgba(23,20,61,.32);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    padding: 5px 5px 5px 22px;
  }
  .header--op-beeld:not(.scrolled) .header__nav a.header__cta { border-radius: 999px; }
  .header--op-beeld:not(.scrolled) .header__nav a { color: #fff; }
}

/* Snel overzicht: rustige definitielijst in plaats van een opsomming */
section[aria-label^="Snel overzicht"] { padding: clamp(56px, 7vw, 96px) 24px !important; }
section[aria-label^="Snel overzicht"] h2 { margin-bottom: 16px !important; }
section[aria-label^="Snel overzicht"] ul {
  list-style: none !important;
  margin: 28px 0 28px !important;
  padding: 0 !important;
  border-top: 1px solid #E2DFE8;
  line-height: 1.5 !important;
}
section[aria-label^="Snel overzicht"] li {
  display: grid;
  grid-template-columns: minmax(140px, 240px) 1fr;
  gap: 8px 32px;
  padding: 16px 0;
  border-bottom: 1px solid #E2DFE8;
}
section[aria-label^="Snel overzicht"] li strong {
  font-family: 'Instrument Serif', Georgia, serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.2;
  color: var(--inkt);
}
section[aria-label^="Snel overzicht"] a { text-underline-offset: 4px; }
@media (max-width: 640px) {
  section[aria-label^="Snel overzicht"] li { grid-template-columns: 1fr; gap: 4px; }
}

/* Casusoverzicht: gelijke beelden, alleen vraag en uitkomst */
.case-card { border-radius: 12px !important; overflow: hidden; border: 1px solid #E2DFE8 !important; box-shadow: none !important; transition: transform 200ms ease, border-color 200ms ease; }
.case-card:hover { transform: translateY(-2px); border-color: #C9C4F0 !important; }
.case-card__image { aspect-ratio: 3 / 2 !important; height: auto !important; object-fit: cover !important; }
.case-card__content { padding: 28px 32px 32px !important; }
.case-card__content > .case-card__section:nth-child(3) { display: none; }
.case-card__header { margin-bottom: 20px !important; padding-bottom: 0 !important; }
.case-card__title { font-size: var(--t-tussenkop) !important; line-height: 1.2 !important; color: var(--inkt) !important; }
.case-card__label { font-size: 13px !important; font-weight: 500 !important; color: var(--tekst-zacht) !important; }
.case-card__decision-value {
  display: block !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--inkt) !important;
}
.case-card .decision-marker {
  display: inline-block;
  font-size: 12px !important;
  font-weight: 600 !important;
  opacity: 1 !important;
  padding: 2px 9px;
  border-radius: 999px;
  margin-right: 8px;
  vertical-align: 2px;
  background: #ECEAF0;
  color: var(--inkt);
}
.case-card .decision--go .decision-marker { background: var(--zon); }
.case-card__text { color: var(--tekst) !important; }
.case-card__content::after {
  content: 'Bekijk de case \2192';
  margin-top: auto;
  padding-top: 8px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ultramarijn);
}

/* Vorige en volgende case: twee kaarten met beeld */
.case-nav { background: var(--wolk) !important; border-top: 1px solid #E2DFE8 !important; padding: 40px 24px !important; }
.case-nav__inner { gap: 24px; align-items: stretch !important; }
.case-nav__link {
  flex: 1 1 0;
  display: grid !important;
  grid-template-columns: 112px 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 20px;
  padding: 14px;
  border: 1px solid #E2DFE8;
  border-radius: 12px;
  background: #FBFAF7;
  transition: border-color 200ms ease;
  max-width: 520px;
}
.case-nav__link:hover { border-color: #C9C4F0; }
.case-nav__img { grid-row: 1 / 3; width: 112px; height: 76px; object-fit: cover; border-radius: 8px; }
.case-nav__link--next { grid-template-columns: 1fr 112px; text-align: right; margin-left: auto; }
.case-nav__link--next .case-nav__img { grid-column: 2; grid-row: 1 / 3; }
.case-nav__link:not(:has(.case-nav__img)) { grid-template-columns: 1fr; flex: 0 1 auto; }
.case-nav__label { font-size: 13px !important; color: var(--tekst-zacht) !important; align-self: end; }
.case-nav__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400 !important; font-size: 22px !important; line-height: 1.15; color: var(--inkt) !important; align-self: start; }
@media (max-width: 640px) {
  .case-nav__inner { flex-direction: column; }
  .case-nav__link, .case-nav__link--next { max-width: none; margin-left: 0; }
}

/* Review ronde 4 */
/* Mobiel menu: knop leesbaar, effen achtergrond als het menu open is */
.header__mobile-menu a.header__mobile-cta { color: #fff !important; text-align: center; border-bottom: none; margin-top: 8px; }
.header:has(.header__mobile-menu.active) { background: var(--wolk) !important; }

/* Actieve menu-item: zelfde basislijn als de rest, onderstreping in plaats van rand */
.header__nav a[aria-current="page"] {
  border-bottom: none !important;
  padding-bottom: 12px !important;
  color: var(--inkt) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 8px;
}

/* Casustitels: klant in inkt, project in zachte tint */
.titel-zacht { color: var(--tekst-zacht); }

/* Homepage: "Na Forty weet je" is een label, geen tweede kop */
.resultaat__title--label {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--tekst-zacht) !important;
  margin-bottom: 20px !important;
}

/* Verhalen: vlakke kaarten met hairline, net als het casusoverzicht */
.verhaal-card { box-shadow: none !important; border: 1px solid #E2DFE8 !important; border-radius: 12px !important; overflow: hidden; transition: transform 200ms ease, border-color 200ms ease; }
.verhaal-card:hover { transform: translateY(-2px); border-color: #C9C4F0 !important; box-shadow: none !important; }

/* Homepage: binnen het beeld een donkere glazen balk, zodat logo en menu nooit over de kop schuiven */
.header--op-beeld.boven-beeld:not(.scrolled):not(:has(.header__mobile-menu.active)) {
  background: rgba(23,20,61,.55) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom-color: rgba(255,255,255,.08) !important;
}
.header--op-beeld.boven-beeld:not(.scrolled) .header__nav { background: none; border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }


/* ==========================================================
   Over Forty
   ========================================================== */
.pagina-over .hero__title { max-width: 900px; }

/* Manifest: kop links, vijf regels rechts, op het raster van de site */
.pagina-over .beslisblok { padding: clamp(80px, 9vw, 128px) 24px; }
.pagina-over .beslisblok__inner {
  max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px 64px; align-items: start;
  text-align: left;
}
.pagina-over .beslisblok__label { color: var(--zon) !important; font-size: 15px !important; text-align: left; margin-bottom: 16px; }
.pagina-over .manifest__titel {
  font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: var(--t-kernzin); line-height: 1.1; color: #F4F3EF; margin: 0;
}
.pagina-over .beslisblok__list { max-width: none; margin: 0; padding: 0; list-style: none; counter-reset: manifest; }
.pagina-over .beslisblok__item {
  counter-increment: manifest;
  display: grid; grid-template-columns: 48px 1fr; align-items: baseline;
  text-align: left !important;
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem) !important; line-height: 1.2 !important;
  color: #F4F3EF !important;
  padding: 22px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.12) !important;
}
.pagina-over .beslisblok__item:first-child { border-top: 1px solid rgba(255,255,255,.12) !important; }
.pagina-over .beslisblok__item::before {
  content: counter(manifest, decimal-leading-zero);
  font-family: 'DM Sans', sans-serif; font-size: 14px; color: #9C98C4;
}

/* Herkenbaar: zelfde raster, grotere zinnen */
.pagina-over .herkenbaar { background: var(--wolk); padding: clamp(80px, 9vw, 128px) 24px clamp(40px, 5vw, 64px); }
.pagina-over .herkenbaar__inner { max-width: 1120px; }
.pagina-over .herkenbaar__title { font-family: 'DM Sans', sans-serif !important; font-size: 15px !important; font-weight: 500; margin-bottom: 24px !important; }
.pagina-over .herkenbaar__zinnen { gap: 0; border-top: 1px solid #E2DFE8; }
.pagina-over .herkenbaar__zin {
  font-size: var(--t-kernzin) !important; line-height: 1.15 !important; color: var(--inkt);
  padding: 24px 0 !important; border-bottom: 1px solid #E2DFE8 !important;
}

/* Kern: de kernzin groot, zonder streep */
.pagina-over .kern { background: var(--wolk); padding: clamp(64px, 8vw, 112px) 24px; }
.pagina-over .kern__inner { max-width: 1120px; }
.pagina-over .kern__pull {
  border: none !important; padding: 0 !important; margin: 0 0 32px !important;
  font-size: var(--t-kop) !important; line-height: 1 !important; letter-spacing: -.01em;
  color: var(--inkt) !important; max-width: 900px; text-wrap: balance;
}
.pagina-over .kern__text { font-size: 19px; color: var(--tekst); max-width: 640px; }

/* Team: vier gelijke portretten, rustig in grijstinten */
.pagina-over .team { background: var(--wolk); padding: clamp(64px, 8vw, 112px) 24px; border-top: 1px solid #E2DFE8; }
.pagina-over .team__heading { font-size: var(--t-kernzin) !important; margin-bottom: 40px !important; }
.pagina-over .team__grid--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-bottom: 48px; }
.pagina-over .team__member { align-items: stretch; }
.pagina-over .team__photo {
  width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%;
  border-radius: 12px !important; margin-bottom: 16px !important;
  filter: grayscale(1) contrast(1.05); transition: filter 300ms ease;
  background: #E2DFE8;
}
.pagina-over .team__member:hover .team__photo { filter: none; }
.pagina-over .team__name { font-size: 17px !important; font-weight: 600 !important; color: var(--inkt) !important; }
.pagina-over .team__role { font-size: 15px !important; color: var(--tekst-zacht) !important; }
.pagina-over .team__desc { font-size: 15px; line-height: 1.5; color: var(--tekst); margin-top: 10px; }
.pagina-over .team__note { font-size: 17px !important; color: var(--tekst) !important; }
@media (max-width: 900px) {
  .pagina-over .beslisblok__inner { grid-template-columns: 1fr; gap: 32px; }
  .pagina-over .team__grid--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .pagina-over .team__member { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  .pagina-over .team__photo { margin-bottom: 12px !important; }
}

/* ==========================================================
   Virtueel Panel
   ========================================================== */
.pagina-panel { --surface: var(--wolk); --white: #FBFAF7; }
.pagina-panel .wrap-wide { max-width: 1120px; }
.pagina-panel .wrap { max-width: 1120px; }

/* Navigatie gelijk aan de rest van de site */
.pagina-panel .nav-bar { background: rgba(244,243,239,.8); border-bottom-color: #E2DFE8; }
.pagina-panel nav { padding: 16px 24px; }
.pagina-panel .nav-links { align-items: center; gap: 32px; }
.pagina-panel .nav-links a { font-size: 15px; font-weight: 400; color: var(--tekst); }
.pagina-panel .nav-links a.active { color: var(--inkt); text-decoration: underline; text-underline-offset: 8px; text-decoration-thickness: 1px; }
.pagina-panel .nav-links a.nav-cta { background: var(--inkt); color: #fff; padding: 10px 18px; border-radius: 10px; font-weight: 500; }
.pagina-panel .nav-links a.nav-cta:hover { background: var(--ultramarijn); color: #fff; }
@media (max-width: 768px) {
  .pagina-panel .nav-links { display: flex !important; gap: 0; }
  .pagina-panel .nav-links a:not(.nav-cta) { display: none; }
}

/* Hero: Dageraad over de volle breedte */
.pagina-panel .hero-section { background: var(--dageraad); padding: clamp(80px, 10vw, 144px) 0 clamp(64px, 8vw, 112px); }
.pagina-panel .wrap-wide.hero { background: none !important; }
.pagina-panel .hero__label { font-size: 15px; color: var(--tekst-zacht); margin-bottom: 20px; }
.pagina-panel .hero h1 { font-size: var(--t-kop); line-height: 1; max-width: 860px; margin-bottom: 28px; text-wrap: balance; }
.pagina-panel .hero .hook { font-size: 19px; font-weight: 400; color: var(--tekst); max-width: 620px; }
.pagina-panel .hero__acties { margin-top: 36px; }
.knop--inkt { background: var(--inkt); color: #fff; }
.knop--inkt:hover { background: var(--ultramarijn); color: #fff; }
.knop-link--donker { color: var(--inkt); text-decoration-color: rgba(23,20,61,.35); }
.knop-link--donker:hover { text-decoration-color: var(--inkt); }

/* Voor wie: vijf herkenbare situaties */
.panel-herken { background: var(--wolk); padding: clamp(64px, 8vw, 104px) 0 24px; }
.panel-herken__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid #E2DFE8; }
.panel-herken__lijst li {
  font-family: 'Instrument Serif', Georgia, serif; font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.25;
  color: var(--inkt); padding: 18px 0; border-bottom: 1px solid #E2DFE8;
}
.panel-herken__lijst li:last-child { color: var(--tekst-zacht); }

/* Labels en stappen */
.pagina-panel .section-label { font-size: 15px; font-weight: 500; color: var(--tekst-zacht); text-transform: none; letter-spacing: 0; margin-bottom: 16px; }
.pagina-panel .flow-section { background: var(--wolk); border-bottom: none; padding: 56px 0 72px; }
.pagina-panel .flow-strip { gap: 32px; }
.pagina-panel .flow-num {
  font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #fff;
  width: 30px; height: 30px; border-radius: 50%; background: var(--ultramarijn);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.pagina-panel .flow-step h4 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: var(--t-tussenkop); margin-bottom: 6px; }
.pagina-panel .flow-step p { font-size: 15px; color: var(--tekst); }

/* Oordelen in de eigen kleuren: stip in plaats van rood, oranje en groen */
.pagina-panel .badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--inkt) !important;
  background: #ECEAF0; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.pagina-panel .badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-zacht); }
.pagina-panel .badge-bevestigd::before { background: var(--ultramarijn); }
.pagina-panel .badge-genuanceerd::before { background: var(--lila); }
.pagina-panel .badge-ontkracht::before { background: var(--zon); }
.pagina-panel .voorbeeld-section { background: var(--wolk); }
.pagina-panel .voorbeeld-row { border-radius: 12px; border-color: #E2DFE8; background: #E2DFE8; }
.pagina-panel .voorbeeld-card h3,
.pagina-panel .output-item h4 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; font-size: var(--t-tussenkop); line-height: 1.2; color: var(--inkt); }
.pagina-panel .voorbeeld-card p,
.pagina-panel .output-item p { font-size: 15px; color: var(--tekst); }
.pagina-panel .voorbeeld-section .section-intro { font-size: 17px; color: var(--tekst); }

.pagina-panel .output-section { background: var(--wolk); border-top: 1px solid #E2DFE8; }
.pagina-panel .output-grid { border-radius: 12px; }
.pagina-panel .output-item .conf { font-size: 13px !important; font-weight: 600; color: var(--tekst-zacht) !important; }
.pagina-panel .output-item .conf.high { color: var(--ultramarijn) !important; }
.pagina-panel .output-bridge { font-size: 19px; color: var(--inkt); }
.pagina-panel .rapport-banner { border-radius: 12px; }

/* Formulier */
.pagina-panel .form-section { background: var(--wolk); border-top: 1px solid #E2DFE8; }
.pagina-panel .form-copy h2 { font-size: var(--t-kernzin); }
.pagina-panel .form-box { border-radius: 12px; }
.pagina-panel .submit-btn { background: var(--inkt) !important; border-radius: 10px !important; }
.pagina-panel .submit-btn:hover { background: var(--ultramarijn) !important; }

/* Methodologie op inkt: bias-labels leesbaar in lila */
.pagina-panel .methodo-section { background: var(--inkt); }
.pagina-panel .methodo-item { border-radius: 12px; }
.pagina-panel .bias-tag { color: #B9B0FF !important; font-style: normal; }
.pagina-panel .methodo-item .num { color: #9C98C4; }

.pagina-panel .next-section { background: var(--wolk); }
.pagina-panel .closing-section { background: var(--wolk); border-top: 1px solid #E2DFE8; }
.pagina-panel .closing-section a { background: var(--inkt); border-radius: 10px; }
.pagina-panel .closing-section a:hover { background: var(--ultramarijn); }


/* ==========================================================
   Ronde 5: eenheid over alle pagina's
   ========================================================== */
body { overflow-x: clip; }

/* AVEQ: tijdlijnafbeelding blijft binnen de kolom */
.content__process-img--flex { min-width: 0; max-width: 100% !important; height: auto; }

/* Kaarten zijn vlak met een hairline, nergens schaduw */
.vormen__card,
.decision-core__card {
  box-shadow: none !important;
  border: 1px solid #E2DFE8 !important;
  border-radius: 12px !important;
  background: #FBFAF7 !important;
}
.decision-core__card { border-left: 3px solid var(--ultramarijn) !important; }

/* Mobiel menu: overal alleen het icoon */
.header__mobile-toggle > span { display: none !important; }

/* Footer: LinkedIn-icoon op een leesbare maat */
.footer__social svg { width: 20px; height: 20px; }

/* ---------- Werkwijze ---------- */
.pagina-werkwijze .beslisblok { padding: clamp(80px, 9vw, 128px) 24px; }
.pagina-werkwijze .beslisblok__inner { max-width: 1120px; margin: 0 auto; }
.pagina-werkwijze .beslisblok__statement {
  text-align: left !important; max-width: 900px; margin: 0 !important;
  font-size: var(--t-kop) !important; line-height: 1 !important; letter-spacing: -.01em;
  color: #F4F3EF !important; text-wrap: balance;
}
.pagina-werkwijze .patroon { background: var(--wolk) !important; padding-top: clamp(80px, 9vw, 120px) !important; }
.pagina-werkwijze .patroon__title {
  text-align: left !important; font-family: 'DM Sans', sans-serif !important; font-style: normal !important;
  font-size: 15px !important; font-weight: 500 !important; color: var(--tekst-zacht) !important; margin-bottom: 56px !important;
}
.pagina-werkwijze .patroon__step-number { font-size: 14px !important; color: var(--tekst-zacht) !important; font-weight: 500 !important; }
.pagina-werkwijze .patroon__step-title { font-size: var(--t-tussenkop) !important; color: var(--inkt) !important; }
.pagina-werkwijze .patroon__step-body { font-size: 16px !important; color: var(--tekst) !important; line-height: 1.55; }
.pagina-werkwijze .patroon__besluit-text { font-size: 19px !important; color: var(--tekst) !important; font-family: 'DM Sans', sans-serif !important; }
.pagina-werkwijze .patroon__besluit-text strong { color: var(--inkt); font-weight: 600; }
.pagina-werkwijze .patroon__duration {
  background: rgba(255,176,0,.18) !important; color: var(--inkt) !important; border: none !important;
  font-size: 14px !important; font-weight: 600 !important; padding: 6px 14px !important; border-radius: 999px !important;
}
.pagina-werkwijze .vormen { background: var(--wolk) !important; border-top: 1px solid #E2DFE8; }
.pagina-werkwijze .vormen__title { font-size: var(--t-kernzin) !important; }
.pagina-werkwijze .vormen__intro { font-size: 19px !important; color: var(--tekst) !important; }
.pagina-werkwijze .vormen__card-title { font-size: var(--t-tussenkop) !important; line-height: 1.2 !important; color: var(--inkt) !important; }
.pagina-werkwijze .vormen__card-label { font-size: 14px !important; font-weight: 600 !important; color: var(--ultramarijn) !important; }
.pagina-werkwijze .altijd { background: var(--wolk) !important; padding: 24px 24px clamp(80px, 9vw, 120px) !important; }
.pagina-werkwijze .altijd__inner { max-width: 1120px !important; }
.pagina-werkwijze .altijd__text { max-width: 760px; font-size: 19px !important; color: var(--tekst) !important; }
.pagina-werkwijze .altijd__text strong {
  display: block; margin-top: 8px; font-family: 'Instrument Serif', Georgia, serif; font-weight: 400;
  font-size: var(--t-kernzin); line-height: 1.15; color: var(--inkt);
}
.pagina-werkwijze .faq { background: var(--wolk) !important; }
.pagina-werkwijze .faq > div { max-width: 1120px !important; }
.pagina-werkwijze .faq h2 { font-size: var(--t-kernzin) !important; color: var(--inkt) !important; }
.pagina-werkwijze .faq details { max-width: 820px; }
.pagina-werkwijze .faq summary { font-size: 18px !important; color: var(--inkt) !important; }
.pagina-werkwijze .faq details p { font-size: 17px !important; color: var(--tekst) !important; }

/* ---------- Casusoverzicht: hero links, kernzin links ---------- */
.pagina-cases .hero__inner { max-width: 1120px !important; text-align: left !important; }
.pagina-cases .hero__body { margin-left: 0 !important; max-width: 620px; }
.pagina-cases .reflective { background: var(--wolk) !important; padding: clamp(64px, 8vw, 104px) 24px 24px !important; }
.pagina-cases .reflective__inner { max-width: 1120px !important; text-align: left !important; }
.pagina-cases .reflective__text {
  font-size: var(--t-kernzin) !important; line-height: 1.15 !important; color: var(--inkt) !important; max-width: 820px;
}
.pagina-cases .cases { background: var(--wolk) !important; }

/* ---------- Verhalen: duidelijke leesverwijzing ---------- */
.verhaal-card__link {
  font-size: 15px !important; font-weight: 500 !important; color: var(--ultramarijn) !important; gap: 6px;
  width: auto !important; height: auto !important; border: none !important; border-radius: 0 !important; background: none !important;
}
.verhaal-card:hover .verhaal-card__link { color: var(--inkt) !important; }

/* ---------- Artikelen: zachte Dageraad-band achter de kop ---------- */
.article-hero { position: relative; z-index: 0; }
.article-hero::before {
  content: '';
  position: absolute; z-index: -1;
  top: -200px; bottom: 0;
  left: 50%; width: 100vw; transform: translateX(-50%);
  background: var(--dageraad);
  border-bottom: 1px solid #E2DFE8;
}
.article-hero--essay { display: block; padding: 72px 0 40px; margin-bottom: 48px; }
.article-hero__illustration { position: relative; }

/* Vorige en volgende verhaal: kaarten, zoals bij de cases */
.article-nav { background: var(--wolk) !important; border-top: 1px solid #E2DFE8 !important; padding: 40px 24px !important; }
.article-nav__inner { max-width: 1120px !important; gap: 24px; align-items: stretch !important; }
.article-nav__link {
  flex: 1 1 0; max-width: 520px;
  display: flex !important; flex-direction: column; justify-content: center; gap: 6px;
  padding: 20px 24px; border: 1px solid #E2DFE8; border-radius: 12px; background: #FBFAF7;
  transition: border-color 200ms ease;
}
.article-nav__link:hover { border-color: #C9C4F0; }
.article-nav__link--next { margin-left: auto; text-align: right; }
.article-nav__label { font-size: 13px !important; color: var(--tekst-zacht) !important; margin: 0 !important; }
.article-nav__title { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400 !important; font-size: 22px !important; line-height: 1.2; color: var(--inkt) !important; }
@media (max-width: 640px) {
  .article-nav__inner { flex-direction: column; }
  .article-nav__link, .article-nav__link--next { max-width: none; margin-left: 0; }
}

/* ---------- Plan een gesprek (/koffie/) ---------- */
.pagina-koffie { background: var(--wolk) !important; color: var(--tekst); display: flex; flex-direction: column; }
.pagina-koffie .header {
  max-width: 1120px; width: 100%; padding: 16px 24px; justify-content: space-between; gap: 24px;
  background: none !important; box-sizing: border-box;
}
.pagina-koffie .koffie-nav { display: flex; gap: 32px; }
.pagina-koffie .koffie-nav a { font-size: 15px; color: var(--tekst); text-decoration: none; }
.pagina-koffie .koffie-nav a:hover { color: var(--inkt); }
.pagina-koffie .koffie { background: var(--dageraad); flex: 1; padding: 56px 0 80px; }
.pagina-koffie .page { max-width: 760px; margin: 0 auto; text-align: left; }
.pagina-koffie .page h1 { font-size: var(--t-kop); line-height: 1; color: var(--inkt); margin-bottom: 16px; }
.pagina-koffie .page > p { font-size: 19px; color: var(--tekst); margin-bottom: 32px; max-width: 560px; }
.pagina-koffie .calendly-wrap { background: #FBFAF7; border: 1px solid #E2DFE8; box-shadow: none; }
.pagina-koffie .koffie-alt { font-size: 16px !important; color: var(--tekst) !important; margin: 24px 0 0 !important; }
.pagina-koffie .koffie-alt a { color: var(--ultramarijn); }
.koffie-footer { background: var(--inkt); color: #C9C5E6; padding: 40px 24px; }
.koffie-footer__inner { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; }
.koffie-footer__inner p { margin: 0; flex: 1; font-size: 15px; }
.koffie-footer__inner nav { display: flex; gap: 24px; }
.koffie-footer__inner a { color: #C9C5E6; font-size: 15px; }
.koffie-footer__inner a:hover { color: #fff; }
@media (max-width: 768px) {
  .pagina-koffie .koffie-nav { display: none; }
  .pagina-koffie .koffie { padding: 32px 0 56px; }
}
/* Essay-pagina heeft een vaste (niet zwevende) header: de band begint eronder */
.article-hero--essay::before { top: -72px; }
.article-hero { padding-bottom: 40px !important; margin-bottom: 40px !important; }