/* ============================================================
   Leqture — D8 visual concept
   Tokens read from AMSLEC001_Leqture_VisualConcept_09.12,
   page "Design System" (Colour Guidance, Typography D, Button,
   Grid, Icons).

   Colour     Luke Warm White  F6F2EF
              LQTR Orange      FF8250
              LQTR Black       141414
              Deep Black       000000
              Purple           5D395A
              Yellow           FFE943
   Type       Neue Haas Unica, -2% tracking
              H1 62/68  H2 48/62  H3 36/46  H4 30/38
              H5 24/34  Large 22/28  CTA 18/26  Body 18/26
   Grid       16 col / 40 margin / 40 gutter
   Shape      no radii; buttons and quote panels carry the
              speech-bubble tail from the logo
   ============================================================ */

:root {
  --warm-white: #F6F2EF;
  --orange: #FF8250;
  --black: #141414;
  --deep-black: #000000;
  --purple: #5D395A;
  --yellow: #FFE943;

  --font: 'Neue Haas Unica', 'Neue Haas Unica Pro', 'Helvetica Neue',
          Inter, Helvetica, Arial, sans-serif;

  /* band tokens, overridden per section further down */
  --bg: var(--black);
  --fg: var(--warm-white);
  --fg-2: rgba(246, 242, 239, .88);
  --fg-3: rgba(246, 242, 239, .74);
  --rule: rgba(246, 242, 239, .18);
  --rule-2: rgba(246, 242, 239, .3);
  --accent: var(--orange);
  --orange-ink: var(--orange);
  --field: rgba(246, 242, 239, .05);
  --tile: rgba(246, 242, 239, .04);
}

* { box-sizing: border-box; }
/* De kopbalk plakt bovenaan, dus een sprong naar #programme zette de kop van
   die sectie er precies achter: je landde in de tekst en moest terugscrollen
   om te zien waar je was. Dit houdt de hoogte van de balk vrij bij elke
   sprong, van het kruimelpad links tot een link in het menu. */
html {
  scroll-behavior: smooth; background: var(--black);
  scroll-padding-top: 104px;
}
@media (max-width: 1080px) { html { scroll-padding-top: 76px; } }

body {
  margin: 0;
  background: var(--black);
  color: var(--warm-white);
  font-family: var(--font);
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -.02em;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.1;
  color: var(--fg);
}
p { margin: 0; }
ul { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-decoration: none; }
b, strong { font-weight: 500; }
::selection { background: var(--orange); color: var(--black); }

.accent { color: var(--accent); }

/* ---------- grid ---------- */
.container { max-width: 1360px; margin: 0 auto; padding: 0 40px; }

section {
  padding: 108px 0;
  background: var(--bg);
  color: var(--fg);
}
section.tight { padding: 72px 0; }
section.tall { padding: 128px 0; }

/* ---------- bands ---------- */
#s-trust, #s-media, #demo {
  --bg: var(--warm-white);
  --fg: var(--black);
  --fg-2: rgba(20, 20, 20, .86);
  --fg-3: rgba(20, 20, 20, .74);
  --rule: rgba(20, 20, 20, .16);
  --rule-2: rgba(20, 20, 20, .28);
  --accent: var(--orange);
  --field: #FFFFFF;
  --tile: rgba(20, 20, 20, .03);
}
#s-list {
  --bg: var(--orange);
  --fg: var(--black);
  --fg-2: rgba(20, 20, 20, .78);
  --fg-3: rgba(20, 20, 20, .74);
  --rule: rgba(20, 20, 20, .22);
  --rule-2: rgba(20, 20, 20, .36);
  --accent: rgba(20, 20, 20, .84);
  --field: #FFFFFF;
  --tile: rgba(255, 255, 255, .18);
}
/* Paars draagt nu meerdere banden in plaats van alleen deze ene rij, en geel
   wordt nergens meer gebruikt: het accent op paars is het warme wit. */
#s-price,
#s-experts {
  --bg: var(--purple);
  --cur: var(--orange);
  --fg: var(--warm-white);
  --fg-2: rgba(246, 242, 239, .84);
  --fg-3: rgba(246, 242, 239, .88);
  --rule: rgba(246, 242, 239, .24);
  --rule-2: rgba(246, 242, 239, .36);
  --accent: var(--warm-white);
  --field: rgba(255, 255, 255, .08);
  --tile: rgba(255, 255, 255, .07);
}

/* ---------- type scale ---------- */
h1.h1-claim { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.1; letter-spacing: -.025em; }
h2.section-title { font-size: clamp(28px, 3.3vw, 48px); line-height: 1.14; }
h2.sub { font-size: clamp(23px, 2.4vw, 36px); line-height: 1.2; }
h3 { font-size: clamp(21px, 1.9vw, 30px); line-height: 1.22; }

.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px; line-height: 1.5;
}
.lead { font-size: 18px; line-height: 26px; color: var(--fg-2); }
.section-lead { font-size: 22px; line-height: 28px; color: var(--fg-2); max-width: 780px; margin-top: 24px; }

h1, h2, h3, .sub, .lead-stat, .price-num, .section-title { text-wrap: balance; }
p, .lead, .spk-title { text-wrap: pretty; }

/* ---------- wordmark ---------- */
/* Het echte logo staat nu inline als SVG (uit Leqture_Logo_Orange.ai). De CSS
   nabouw die hier stond klopte niet: de Q hoort een liggende tekstballon te
   zijn met de staart rechtsonder, en de letters zijn dunner. Hier alleen nog
   de maat; de vorm zit in het bestand. */
svg.wordmark {
  display: block; height: 26px; width: auto;
  color: var(--orange);
}
.topnav svg.wordmark, header svg.wordmark { height: 28px; }
footer svg.wordmark { color: var(--warm-white); height: 24px; }
@media (max-width: 700px) { svg.wordmark { height: 22px; } }

/* ---------- buttons: square, with the bubble tail ---------- */
.btn {
  position: relative;
  display: inline-block;
  font-family: var(--font);
  font-size: 18px; line-height: 26px; font-weight: 500; letter-spacing: -.02em;
  padding: 13px 26px;
  border: 1px solid transparent; border-radius: 0;
  cursor: pointer; white-space: nowrap; text-align: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn::after {
  content: ''; position: absolute; right: 20px; bottom: -9px;
  width: 0; height: 0; border-style: solid;
  border-width: 9px 11px 0 0;
  border-color: var(--tail, currentColor) transparent transparent transparent;
}
.btn-primary { background: var(--orange); border-color: var(--orange); color: var(--black); --tail: var(--orange); }
.btn-primary:hover { background: #FF9468; border-color: #FF9468; --tail: #FF9468; }
.btn-outline { background: transparent; border-color: var(--fg); color: var(--fg); --tail: var(--fg); }
.btn-outline:hover { background: var(--fg); color: var(--bg); }
.btn-sm { font-size: 15px; line-height: 22px; padding: 9px 18px; }
.btn-sm::after { right: 14px; bottom: -7px; border-width: 7px 9px 0 0; }

/* ---------- krimpen onder de inhoud ---------- */
/* Een grid- of flexkind heeft standaard min-width:auto en krimpt dus niet
   onder de breedte van zijn inhoud. Op een telefoon van 375px trok de video in
   de hero de kolom naar 382px, en daarmee de hele pagina 31px breder dan het
   scherm: alles schoof horizontaal mee. Dit haalt die ondergrens weg, zodat
   een kolom altijd binnen zijn container blijft. */
.container > *, .grid > *, .split > *, .hero .container > * { min-width: 0; }
.grid, .split, .hero .container { min-width: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 20, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(246, 242, 239, .14);
}
/* Het merk is een blok van twee delen: het woordmerk en de regel eronder.
   Dat blok is hoger dan het menu ernaast, dus is er een keuze: het menu op het
   woordmerk laten uitlijnen, of op het midden van de balk. Het stond op het
   woordmerk; uit de review kwam dat het menu in het midden hoort, en zo staat
   het nu. Het woordmerk komt daarmee iets boven de menuregel uit, want het
   midden van logo plus regel ligt nu eenmaal lager dan het midden van het logo
   alleen. */
.nav .container {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; padding-top: 18px; padding-bottom: 18px;
}
/* De nudges die het menu op het woordmerk lieten uitlijnen zijn eruit: de
   balk centreert nu zelf. Zie .nav .container hierboven. */
.brand { display: flex; align-items: center; gap: 12px; color: var(--warm-white); }
.brand-stacked { flex-direction: column; align-items: flex-start; gap: 8px; }
.brand .tag {
  display: block; font-size: 10px; font-weight: 400; letter-spacing: .18em;
  line-height: 1.5; text-transform: uppercase;
  color: rgba(246, 242, 239, .7); white-space: nowrap;
}
.nav-links { display: flex; gap: 30px; }
.nav-links a {
  font-size: 15px; font-weight: 400; letter-spacing: -.01em;
  color: var(--warm-white); white-space: nowrap;
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.nav-links a:hover { border-bottom-color: var(--orange); }
/* De pagina waar je op staat. De streep is dikker dan die van de hover, zodat
   je het verschil ziet tussen "hier sta ik" en "hier wijs ik naar". */
.nav-links a[aria-current="page"] {
  border-bottom: 2px solid var(--orange); padding-bottom: 1px; font-weight: 600;
}
/* ---------- language picker ---------- */
.lang { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font: inherit; background: transparent; line-height: 1;
  border: 1px solid rgba(246, 242, 239, .3); border-radius: 0;
  padding: 8px 12px; color: var(--warm-white);
}
.lang-btn::after {
  content: ''; width: 5px; height: 5px;
  border-right: 1.5px solid rgba(246, 242, 239, .7);
  border-bottom: 1.5px solid rgba(246, 242, 239, .7);
  transform: translateY(-2px) rotate(45deg);
}
.lang-btn:hover { border-color: var(--orange); }
.lang-btn .flag { font-size: 19px; line-height: 1; }
.lang.no-flags .flag { font-size: 0; }
.lang.no-flags .flag::before {
  content: attr(data-code); font-size: 13px; font-weight: 500;
  letter-spacing: .06em; color: var(--warm-white);
}
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  list-style: none; margin: 0; padding: 6px;
  background: var(--black); border: 1px solid rgba(246, 242, 239, .22);
  max-height: 340px; overflow-y: auto; min-width: 200px;
}
.lang-menu[hidden] { display: none; }
.lang-menu li {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px;
  font-size: 15px; cursor: pointer; white-space: nowrap; color: var(--warm-white);
}
.lang-menu li:hover, .lang-menu li[aria-selected="true"] { background: var(--orange); color: var(--black); }
.lang-menu .flag { font-size: 17px; line-height: 1; }
.lang.no-flags .lang-menu .flag { display: none; }
@media (max-width: 900px) { .lang { display: none; } }

/* ---------- hero ---------- */
.hero {
  background: var(--black); color: var(--warm-white);
  padding: 88px 0 108px;
}
.hero .container {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: 64px; align-items: stretch;
}
.hero .container > div:first-child { display: flex; flex-direction: column; }
.hero h1 { margin-bottom: 26px; }
.hero h2.sub { margin-bottom: 24px; color: var(--fg-2); }
.hero h2.sub .accent { color: var(--warm-white); }
.hero .lead { max-width: 560px; margin-bottom: 34px; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.hero-trust {
  margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--rule);
  font-size: 16px; line-height: 24px; color: var(--fg-3); max-width: 560px;
}
.hero .person-note { margin-top: auto; margin-bottom: 0; }
/* de kolommen zijn even hoog, maar de inhoud rechts stond naar boven gepakt.
   Met flex plus margin-top:auto zakken de cijfers naar de onderkant, zodat ze
   uitlijnen met de knoppen links. */
.hero-right { display: flex; flex-direction: column; gap: 24px; }
.hero-right .hero-mini { margin-top: auto; }
@media (max-width: 1000px) { .hero .container { grid-template-columns: minmax(0, 1fr); gap: 48px; } }

/* ---------- person note ---------- */
.person-note {
  display: flex; align-items: flex-start; gap: 16px;
  margin-top: 32px; padding-left: 18px;
  border-left: 2px solid var(--orange);
  max-width: 560px;
}
/* de tweede selector wint het van .split img, dat verderop staat en even
   specifiek is: zonder dat blaast het portretje op tot paginabreed */
.person-note img,
.split .person-note img { width: 46px; height: 46px; object-fit: cover; flex: none; margin-top: 2px; }
.person-note .txt { font-size: 16px; line-height: 24px; color: var(--fg-2); }
.person-note .txt b { color: var(--fg); font-weight: 500; }
.split .person-note { max-width: none; }

/* ---------- showreel ---------- */
.showreel { position: relative; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.showreel video { display: none; width: 100%; height: 100%; object-fit: contain; background: #000; }
.showreel.playing video, .showreel.autoplaying video { display: block; }
.showreel.playing .sr-play { display: none; }
.sr-play { display: block; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: none; position: relative; }
.sr-play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-btn {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  background: var(--orange);
}
.sr-btn::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-style: solid; border-width: 13px 0 13px 20px;
  border-color: transparent transparent transparent var(--black);
  transform: translateX(3px);
}
.sr-play:hover .sr-btn { background: #FF9468; }
.sr-cap {
  position: absolute; left: 16px; bottom: 14px; color: #fff;
  font-size: 14px; font-weight: 500; letter-spacing: -.01em;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .7);
}
.sr-sound {
  position: absolute; right: 14px; top: 14px; z-index: 2; border: 1px solid rgba(255, 255, 255, .5);
  cursor: pointer; background: rgba(0, 0, 0, .5); color: #fff;
  font: inherit; font-size: 14px; font-weight: 500; padding: 6px 14px;
  backdrop-filter: blur(4px); transition: background .15s ease;
}
.showreel:hover .sr-sound, .sr-sound:hover { background: var(--orange); color: var(--black); border-color: var(--orange); }

/* ---------- quote, with the bubble tail ---------- */
.quote-big {
  position: relative; margin: 0; background: var(--orange); color: var(--black);
  padding: 44px 46px 40px;
}
.quote-big::after {
  content: ''; position: absolute; left: 46px; bottom: -26px;
  width: 0; height: 0; border-style: solid; border-width: 26px 34px 0 0;
  border-color: var(--orange) transparent transparent transparent;
}
.quote-big blockquote {
  margin: 0; font-weight: 500; letter-spacing: -.025em;
  font-size: clamp(20px, 1.9vw, 26px); line-height: 1.24; color: var(--black);
}
.quote-big blockquote::before { content: '\201C'; }
.quote-big blockquote::after { content: '\201D'; }
.quote-big figcaption { margin-top: 24px; font-size: 15px; line-height: 1.45; }
.quote-big figcaption b { display: block; color: var(--black); font-weight: 500; }
.quote-big figcaption span { color: rgba(20, 20, 20, .74); }
.quote-hero { padding: 32px 34px 30px; }
.quote-hero blockquote { font-size: 20px; line-height: 1.26; }
.quote-hero::after { left: 34px; bottom: -20px; border-width: 20px 26px 0 0; }

/* ---------- hero mini stats ---------- */
/* repeat(3, 1fr) hield drie kolommen aan tot ze niet meer pasten: op 375px
   liep "4.6/5 average rating" 30px buiten het scherm en schoof de hele pagina
   mee. Met auto-fit vouwen ze naar twee en dan naar een. */
.hero-mini {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
  margin-top: 24px;
}
.hero-mini div { background: var(--black); padding: 20px 18px; }
.hero-mini b {
  display: block; font-weight: 500; font-size: 30px; line-height: 1;
  letter-spacing: -.03em; color: var(--orange);
}
.hero-mini span { display: block; font-size: 14px; line-height: 1.35; color: var(--fg-3); margin-top: 9px; }

/* ---------- logo rows ---------- */
.logo-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px 34px; }
.logo-row img { height: 46px; width: 46px; object-fit: contain; transition: transform .15s ease; }
.logo-row img:hover { transform: translateY(-3px); }
/* Zestien klanten op een rij. Twee rijen van tien lazen als een tabel; op een
   lijn is het een stoet en zie je in een oogopslag hoe breed de klantenkring
   is. De maat schaalt mee met het scherm, zodat de rij niet breekt.

   Past er iets niet meer bij, haal dan in deze volgorde weg: Schaeffler,
   ERIKS, Adyen, Dentsu. */
#s-trust .logo-row {
  display: flex; flex-wrap: nowrap;
  /* Gecentreerd met een vaste tussenruimte. Met space-between plakten de
     buitenste logo's tegen de rand en oogde de verdeling willekeurig, omdat
     de merken onderling sterk verschillen in visueel gewicht. */
  /* Van rand tot rand, zodat het eerste en het laatste logo op dezelfde lijn
     staan als de tekstregels en het citaat eronder. */
  justify-content: space-between; align-items: center;
  gap: clamp(8px, 1.4vw, 22px);
  max-width: none; margin: 0;
}
#s-trust .logo-row img {
  /* De meeste merken staan hier als vierkant beeldmerk, maar Salesforce en
     Red Bull bestaan alleen als liggend woordmerk. Die persen in een vierkant
     maakt ze onleesbaar klein, dus de hoogte is leidend en de breedte volgt. */
  height: clamp(28px, 3.2vw, 44px); width: auto;
  max-width: clamp(56px, 6.4vw, 88px);
  flex: 0 0 auto;
}
#s-trust .eyebrow { margin-bottom: 30px; }
/* De rij stond met de onderkant tegen het citaat aan. Twee blokken die niets
   met elkaar te maken hebben horen niet aan elkaar geplakt te staan. */
#s-trust .logo-row + .quote-rail { margin-top: 72px; }
/* De partnerregel plakte met nul ruimte tegen het citaat aan. */
#s-trust .eyebrow + .quote-rail { margin-top: 56px; }
#s-trust .logo-row + .eyebrow { margin-top: 34px; margin-bottom: 0; }
/* Op een telefoon wordt zestien op een lijn onleesbaar klein. Daar mag de rij
   schuiven in plaats van krimpen. */
@media (max-width: 720px) {
  #s-trust .logo-row {
    justify-content: flex-start; overflow-x: auto; gap: 22px;
    padding-bottom: 10px; scrollbar-width: none;
  }
  #s-trust .logo-row::-webkit-scrollbar { display: none; }
  #s-trust .logo-row img { height: 38px; width: 38px; }
}

#s-media .logo-row { gap: 34px 52px; }
#s-media .logo-row img { height: 48px; width: auto; max-width: 200px; }
#s-media .logo-row img[alt="Business Insider"] { height: 42px; }
#s-media .logo-row img[alt="HR.com"] { height: 56px; }

/* ---------- het cijfer bovenaan een eventpagina ---------- */
/* Groot, want dit is het eerste wat een koper wil weten, en altijd met het
   aantal erbij: een 4,7 zonder aantal is een bewering, met "uit 1.502
   beoordelingen" is het een feit. */
.ev-cijfer {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px;
  margin: 20px 0 22px;
}
/* Het cijfer hoort in de hero te staan, maar niet als tweede kop: op 76 pixels
   vocht het met de titel erboven. Het staat nu op de maat van de tekst
   eromheen, alleen zwaarder en in de accentkleur. */
.ev-cijfer-n {
  font-size: clamp(30px, 2.6vw, 38px); font-weight: 500; line-height: 1;
  letter-spacing: -.03em; color: var(--accent);
}
.ev-cijfer-uit {
  font-size: clamp(16px, 1.4vw, 19px); font-weight: 500; line-height: 1;
  letter-spacing: -.02em; color: var(--fg-3); margin-left: -3px;
}
.ev-cijfer-bron {
  flex: 0 0 auto; font-size: 15px; line-height: 1.4; color: var(--fg-2);
  align-self: center;
}
.ev-cijfer-bron + .ev-cijfer-bron::before {
  content: '\00b7'; margin: 0 8px 0 0; color: var(--fg-3);
}
@media (max-width: 560px) { .ev-cijfer { gap: 0 8px; } }

/* ---------- the two formats, row by row ---------- */
.fmt { margin-top: 44px; border: 1px solid var(--rule); }
/* Twee kolommen, en het label boven allebei de blokjes in plaats van in een
   eigen kolom links. Met een labelkolom ernaast begon de tekst in de twee
   kolommen op verschillende hoogtes zodra een label over twee regels liep;
   nu is elke rij een rasterrij van twee gelijke vakken en staat alles gelijk. */
.fmt-row { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--rule); }
.fmt-row:first-child { border-top: 0; }
.fmt-key {
  padding: 20px 22px; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3); background: var(--tile);
}
.fmt-a, .fmt-b { padding: 20px 26px; font-size: 16px; line-height: 24px; color: var(--fg-2); }
.fmt-b { border-left: 1px solid var(--rule); }
.fmt-head { background: var(--tile); }
.fmt-head .fmt-key { background: transparent; }
.fmt-head .fmt-a, .fmt-head .fmt-b { padding-top: 26px; padding-bottom: 26px; }
.fmt-head b {
  display: block; font-weight: 600; font-size: clamp(24px, 2.1vw, 30px); line-height: 1.18;
  letter-spacing: -.03em; color: var(--fg); margin-bottom: 8px;
}
.fmt-head span { display: block; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.fmt-foot .fmt-a, .fmt-foot .fmt-b { padding-top: 26px; padding-bottom: 28px; }
.fmt-cur { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; }
.fmt-cur span {
  font-weight: 500; font-size: clamp(22px, 2.1vw, 32px);
  letter-spacing: -.035em; line-height: 1.1;
}
.fmt-cur .eur { color: var(--orange); }
.fmt-cur .usd { color: var(--fg); }
/* De valutatekens staan sinds de kleurcorrectie allemaal gedempt;
   deze aparte kleur voor het pond is daarmee vervallen. */
/* Een pakket zonder vast bedrag ("See the event page") krijgt geen
   valuta-opmaak, maar staat wel op de plek van de prijs. */
.ev-price-tekst {
  font-size: clamp(21px, 2vw, 27px); line-height: 1.15; letter-spacing: -.02em;
  color: var(--fg); margin: 2px 0 6px;
}

.fmt-unit { font-size: 15px; color: var(--fg-3); margin-top: 10px; }
.fmt-logos { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.fmt-logos img { height: 30px; width: 30px; object-fit: contain; }
.fmt-logos .more { font-weight: 500; font-size: 22px; color: var(--fg-3); letter-spacing: .06em; }

/* ---------- video thumbnails ---------- */
.vthumb {
  position: relative; display: block; width: 100%; max-width: 340px; padding: 0;
  border: 1px solid var(--rule); border-radius: 0; overflow: hidden; cursor: pointer;
  background: #000; line-height: 0; transition: border-color .15s ease;
}
.vthumb:hover { border-color: var(--orange); }
.vthumb img {
  display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
  opacity: .82; transition: opacity .2s ease, transform .35s ease;
}
.vthumb:hover img { opacity: 1; transform: scale(1.015); }

/* Een stilstaand beeld met een driehoekje erop leest als een screenshot. Wat
   het tot een speler maakt is de rest van de spelerchroom: een donkere sluier
   onderlangs, de speelduur, en een balk die op hover volloopt. Samen zeggen
   die drie in een oogopslag dat hier iets af te spelen valt. */
.vthumb::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(20, 20, 20, .34) 0%, rgba(20, 20, 20, 0) 34%,
    rgba(20, 20, 20, 0) 52%, rgba(20, 20, 20, .72) 100%);
}
.vplay {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px;
  margin: -29px 0 0 -29px; background: var(--orange);
  box-shadow: 0 0 0 10px rgba(20, 20, 20, .3), 0 8px 26px rgba(20, 20, 20, .45);
  transition: transform .18s ease, box-shadow .18s ease;
}
.vthumb:hover .vplay {
  transform: scale(1.09);
  box-shadow: 0 0 0 14px rgba(255, 130, 80, .26), 0 10px 30px rgba(20, 20, 20, .5);
}
.vplay::after {
  content: ''; position: absolute; left: 23px; top: 17px; border-style: solid;
  border-width: 12px 0 12px 18px; border-color: transparent transparent transparent var(--black);
}
/* Het bewegende beeld dat bij hover over de stilstaande plaat komt. */
.vthumb-preview {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.vthumb.speelt .vthumb-preview { opacity: 1; }
/* Terwijl hij loopt hoeft de speelknop niet meer te schreeuwen. */
.vthumb.speelt .vplay { opacity: .82; }
.vthumb.speelt .vbalk::after { width: 100%; transition: width 58s linear; }

/* De speelduur. Iedereen kent dit hoekje van elke speler die er bestaat. */
.vduur {
  position: absolute; right: 10px; bottom: 14px; padding: 3px 7px;
  background: rgba(20, 20, 20, .82); color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.2;
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
/* De voortgangsbalk staat stil tot je erover gaat; dan loopt hij een stukje
   vol. Genoeg om te laten zien dat dit speelt, zonder te doen alsof er al
   iets aan de gang is. */
.vbalk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: rgba(246, 242, 239, .3);
}
.vbalk::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--orange); transition: width .5s ease;
}
.vthumb:hover .vbalk::after { width: 22%; }
@media (prefers-reduced-motion: reduce) {
  .vthumb img, .vplay, .vbalk::after { transition: none; }
  .vthumb:hover img { transform: none; }
  .vthumb:hover .vplay { transform: none; }
}
.vcap {
  position: absolute; left: 12px; bottom: 13px; padding: 4px 10px;
  background: rgba(20, 20, 20, .74); color: #fff; font-size: 13px; font-weight: 500;
  line-height: 1.2; letter-spacing: -.01em;
}

/* ---------- cards & grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--tile); border: 1px solid var(--rule); border-radius: 0; padding: 32px 30px; }
.card h3 { font-size: 24px; line-height: 34px; margin-bottom: 14px; }
.card p { font-size: 16px; line-height: 24px; color: var(--fg-2); }
@media (max-width: 980px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* tick / cross lists */
.card ul.tick, .card ul.cross, ul.tick {
  list-style: none; padding: 0; margin-top: 18px;
  display: flex; flex-direction: column; gap: 13px;
}
.card ul.tick li, .card ul.cross li, ul.tick li {
  position: relative; padding-left: 30px;
  font-size: 16px; line-height: 24px; color: var(--fg-2);
}
.card ul.tick li::before, ul.tick li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
.card ul.cross li::before {
  content: "\00D7"; position: absolute; left: 0; top: 0;
  color: var(--fg-3); font-size: 20px; line-height: 24px;
}

/* ---------- integrations ---------- */
.integrations { margin-top: 56px; padding-top: 34px; border-top: 1px solid var(--rule); text-align: center; }
.int-lab {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 24px;
}
.int-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 34px; }
/* Icoon en naam waren losse elementen in dezelfde flexrij. Op een smal scherm
   brak de rij daar middenin af en stond het Google-logo naast het woord Zoom.
   Als paar blijven ze bij elkaar. */
.int-item { display: inline-flex; align-items: center; gap: 10px; }
.int-row img { height: 32px; width: 32px; object-fit: contain; flex: none; }
.int-row .int-item > span { font-weight: 500; font-size: 16px; color: var(--fg-2); white-space: nowrap; }

/* ---------- split (text + image) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.split img { border-radius: 0; width: 100%; height: 420px; object-fit: cover; }
.split p { font-size: 18px; line-height: 26px; color: var(--fg-2); margin-bottom: 18px; }
.split.flip .copy { order: 2; }
@media (max-width: 980px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split.flip .copy { order: initial; }
  .split img { height: 300px; }
}

/* ---------- lead generation (orange band) ---------- */
.lead-gen { display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: start; }
.lead-stat {
  font-weight: 500; letter-spacing: -.03em;
  font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1;
  color: var(--black); margin-bottom: 22px;
  padding-bottom: 22px; border-bottom: 1px solid var(--rule);
}
.lead-stat span {
  display: block; font-size: .48em; font-weight: 400; letter-spacing: -.02em;
  color: rgba(20, 20, 20, .78); margin-top: 10px; line-height: 1.3;
}
.lead-copy h2 {
  font-weight: 500; letter-spacing: -.025em;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.14; margin-bottom: 18px;
}
.lead-copy p { font-size: 17px; line-height: 25px; color: rgba(20, 20, 20, .82); }
.lead-ticks { list-style: none; margin-top: 26px; display: grid; gap: 12px; padding: 0; }
.lead-ticks li { position: relative; padding-left: 30px; font-size: 16px; line-height: 24px; }
.lead-ticks li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 12px; height: 7px;
  border-left: 2px solid var(--black); border-bottom: 2px solid var(--black);
  transform: rotate(-45deg);
}
.lead-form { background: var(--black); color: var(--warm-white); padding: 36px 34px 32px; }
.lead-form label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(246, 242, 239, .6); margin-bottom: 20px;
}
.lead-form input, .lead-form select {
  display: block; width: 100%; margin-top: 10px; padding: 13px 15px;
  font: inherit; font-size: 17px; letter-spacing: -.02em;
  color: var(--warm-white); background: rgba(246, 242, 239, .06);
  border: 1px solid rgba(246, 242, 239, .26); border-radius: 0;
  text-transform: none; font-weight: 400;
}
.lead-form select option { color: #141414; }
.lead-form input::placeholder { color: rgba(246, 242, 239, .38); }
.lead-form input:focus, .lead-form select:focus { outline: 0; border-color: var(--orange); }
.lead-form .btn { width: 100%; margin-top: 8px; }
.lead-fine { font-size: 14px; line-height: 1.5; color: rgba(246, 242, 239, .5); margin-top: 18px; text-align: center; }
@media (max-width: 980px) { .lead-gen { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- time calculator ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.calc-copy h2 {
  font-weight: 500; letter-spacing: -.025em;
  font-size: clamp(26px, 2.6vw, 40px); line-height: 1.14; margin-bottom: 18px;
}
.calc-copy p { font-size: 17px; line-height: 25px; color: var(--fg-2); }
.calc-box { background: var(--tile); border: 1px solid var(--rule); padding: 36px 34px; }
.calc-box label { display: block; font-size: 15px; font-weight: 400; color: var(--fg-2); margin-bottom: 26px; }
.calc-box input[type=range] { display: block; width: 100%; margin-top: 14px; accent-color: var(--orange); }
.calc-box output { display: inline-block; margin-top: 8px; font-weight: 500; font-size: 20px; color: var(--orange); }
.calc-result { border-top: 1px solid var(--rule); padding-top: 26px; margin: 10px 0 0; }
.calc-num { font-weight: 500; letter-spacing: -.04em; line-height: 1; font-size: clamp(44px, 4.6vw, 62px); color: var(--orange); }
.calc-lab { font-size: 16px; line-height: 24px; color: var(--fg-2); margin-top: 12px; }
@media (max-width: 980px) { .calc { grid-template-columns: 1fr; gap: 34px; } }

/* ---------- pricing strip (purple band) ---------- */
/* Twee gelijke kolommen. De verhouding 1.25/.75 stamt uit de opzet waarin de
   lijst met wat erin zit een keer rechts naast beide prijzen stond; sinds elk
   product zijn eigen lijst heeft dragen ze hetzelfde en horen ze even breed te
   zijn, zodat de bedragen en de regels eronder op een lijn staan. */
.price-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.price-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; margin: 8px 0 0; }
.price-num em {
  font-style: normal; font-weight: 400; font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -.02em; color: var(--fg-2);
}
.price-num span { font-weight: 500; font-size: clamp(30px, 3.4vw, 48px); letter-spacing: -.035em; line-height: 1.05; }
.price-num .eur { color: var(--warm-white); }
.price-num .usd { color: rgba(246, 242, 239, .72); }

/* De twee producten hadden alleen een prijs met een regeltje eronder; welke
   prijs bij welk product hoorde moest je uit die kleine regel afleiden. Nu
   staat de naam er als kop boven. */
.price-kop {
  font-size: clamp(20px, 1.9vw, 26px); font-weight: 500; line-height: 1.15;
  letter-spacing: -.02em; color: var(--fg); margin: 18px 0 2px;
}
.price-kop-2 { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule); }
/* De scheidslijn zit nu boven de kop, dus die hoeft niet meer boven het bedrag. */
.price-num-2 { margin-top: 8px; padding-top: 0; border-top: 0; }
.price-unit { font-size: 15px; color: var(--fg-3); margin: 12px 0 4px; }
.price-strip p { font-size: 17px; line-height: 25px; color: var(--fg-2); margin-bottom: 26px; }
.price-incl { list-style: none; display: grid; gap: 0; padding: 0; border-top: 1px solid var(--rule); }
.price-incl li {
  position: relative; padding: 14px 0 14px 30px;
  border-bottom: 1px solid var(--rule);
  font-size: 16px; line-height: 24px; color: var(--fg);
}
.price-incl li::before {
  content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 7px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}
@media (max-width: 980px) { .price-strip { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- speakers ---------- */
.rail-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
  margin: 56px 0 24px; padding-bottom: 16px; border-bottom: 1px solid var(--rule);
}
.rail-head h3 { font-weight: 500; font-size: 22px; letter-spacing: -.02em; }
.rail-head a { font-size: 16px; font-weight: 400; color: var(--orange); white-space: nowrap; }
.rail-head a:hover { text-decoration: underline; }
.spk-rail, .spk-row5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.spk-card { background: transparent; border: 0; padding: 0; min-width: 0; }
.spk-avatar {
  position: relative; width: 100%; aspect-ratio: 4 / 5; border-radius: 0;
  overflow: hidden; margin-bottom: 16px; background: rgba(246, 242, 239, .06);
}
.spk-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.spk-name { font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.2; color: var(--fg); }
.spk-title { font-size: 15px; line-height: 21px; color: var(--fg-2); margin-top: 8px; min-height: 2.8em; }
/* Foto, naam en sessietitel op een kaartje zijn links naar de spreker of de
   sessie. Ze horen niet als link op te vallen; de kaart is al de knop. */
.spk-avatar a { display: block; height: 100%; }
.spk-name a, .spk-title a { color: inherit; text-decoration: none; }
.spk-name a:hover, .spk-title a:hover {
  text-decoration: underline; text-underline-offset: 3px;
}
.spk-meta {
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent); margin-top: 14px;
}
@media (max-width: 1100px) { .spk-rail, .spk-row5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .spk-rail, .spk-row5 { grid-template-columns: repeat(2, 1fr); } }

/* ---------- topics panel ---------- */
.panel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.panel-item { background: var(--black); padding: 24px 22px 26px; }
.panel-item .k {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin-bottom: 10px;
}
.panel-item .v { font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.22; color: var(--fg); }
@media (max-width: 980px) { .panel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .panel-grid { grid-template-columns: 1fr; } }

/* ---------- cases ---------- */
/* De drie kaarten hebben teksten van ongelijke lengte, waardoor de scheidslijn
   en de cijfers op verschillende hoogtes uitkwamen. De kaart is nu een kolom en
   het cijferblok wordt naar onderen geduwd, zodat de lijnen over de drie kaarten
   op dezelfde hoogte liggen. De logoregel krijgt een vaste hoogte, want het ene
   logo staat naast een naam en het andere niet. */
.case-card { display: flex; flex-direction: column; }
.case-logo {
  display: flex; align-items: center; gap: 12px;
  min-height: 40px; margin-bottom: 16px;
}
.case-logo img { height: 36px; width: auto; max-width: 150px; object-fit: contain; }
.case-logo span { font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.case-logo-wide img { height: 28px; max-width: 210px; }
.case-when {
  font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 14px;
}
/* Twee of drie cijfers per kaart, afhankelijk van wat er in Salesforce staat.
   auto-fit houdt ze uitgelijnd zonder dat een kaart met drie cijfers uit de pas
   loopt. */
.case-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 18px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--rule); }
.case-card p { margin-bottom: 24px; }
.case-stats b { display: block; font-weight: 500; font-size: 30px; letter-spacing: -.035em; color: var(--orange); line-height: 1; }
.case-stats span { display: block; font-size: 13px; line-height: 1.35; color: var(--fg-3); margin-top: 8px; }

/* ---------- branded experiences: the big bubble ---------- */
.tint-panel { position: relative; background: var(--orange); color: var(--black); padding: 60px 62px 56px; }
.tint-panel::after {
  content: ''; position: absolute; left: 62px; bottom: -34px;
  width: 0; height: 0; border-style: solid; border-width: 34px 44px 0 0;
  border-color: var(--orange) transparent transparent transparent;
}
.tint-panel .eyebrow { color: rgba(20, 20, 20, .74); }
/* de tweede helft is de boodschap, dus die krijgt de nadruk en niet de eerste */
.tint-panel h3 { font-size: clamp(26px, 3vw, 40px); line-height: 1.14; margin-bottom: 22px; color: rgba(20, 20, 20, .74); }
.tint-panel h3 .accent { color: var(--black); }
.tint-panel p { font-size: 18px; line-height: 26px; color: rgba(20, 20, 20, .82); max-width: 860px; }
@media (max-width: 680px) { .tint-panel { padding: 36px 28px 34px; } .tint-panel::after { left: 28px; } }

/* ---------- chips ---------- */
.chip-row, .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.cat-tools .chips { margin-top: 10px; }
/* Zegt wat de rij eronder doet: filteren op het overzicht, doorklikken op een
   categoriepagina. Ze zien er hetzelfde uit en doen iets anders. */
.chips-lab {
  display: block; margin-top: 22px;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2);
}
.chip {
  font-size: 11px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase;
  padding: 9px 15px; border: 1px solid var(--rule-2); color: var(--fg-2);
}

/* ---------- blog ---------- */
.post { display: block; border: 1px solid var(--rule); background: var(--tile); color: var(--fg); }
.post:hover { border-color: var(--orange); }
.post img { width: 100%; height: 200px; object-fit: cover; }
.post .body { padding: 24px 24px 28px; }
.post h4 { font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -.02em; color: var(--fg); }
.post .more { display: inline-block; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--orange); }

/* ---------- the team ---------- */
.team-strip {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px 24px;
  justify-items: start; max-width: 760px; margin-top: 44px;
}
.team-face { width: auto; text-align: left; }
/* Zwart-wit staat hier in het filter en niet in het bestand. De meeste
   portretten zijn al zwart-wit aangeleverd, maar een nieuwe foto in kleur
   sprong er meteen uit. Zo maakt het niet meer uit wat er wordt aangeleverd. */
.team-face img {
  width: 112px; height: 112px; object-fit: cover; border-radius: 0;
  margin: 0 0 14px; display: block; filter: grayscale(1);
}
.team-face .n { font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.team-face .r { font-size: 13px; line-height: 1.4; color: var(--fg-3); margin-top: 4px; }
@media (max-width: 760px) { .team-strip { grid-template-columns: repeat(3, 1fr); } .team-face img { width: 92px; height: 92px; } }

/* ---------- closing CTA ---------- */
.cta { text-align: center; }
.cta h2 { margin-bottom: 22px; }
.cta .lead { max-width: 680px; margin: 0 auto 40px; }
.cta .eyebrow { color: var(--accent); }
.cta .fine { margin-top: 30px; font-size: 15px; color: var(--fg-3); }
.sched { max-width: 980px; margin: 40px auto 30px; background: #fff; border: 1px solid var(--rule); overflow: hidden; }
.sched iframe { display: block; width: 100%; height: 700px; border: 0; }
@media (max-width: 760px) { .sched iframe { height: 900px; } }

/* ---------- footer ---------- */
footer { background: var(--deep-black); color: var(--warm-white); padding: 88px 0 40px; }
footer .container { max-width: 1360px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; }
.footer-grid .payoff {
  font-weight: 400; font-size: 15px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--orange); margin: 16px 0 20px;
}
footer p { font-size: 16px; line-height: 24px; color: rgba(246, 242, 239, .6); max-width: 360px; }
.footer-col-title {
  font-size: 12px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 242, 239, .5); margin-bottom: 20px;
}
.footer-links { display: flex; flex-direction: column; gap: 12px; }
/* Op een telefoon zijn dit de enige links onderaan de pagina; met 30px hoog
   staan ze te dicht op elkaar om zeker te raken. */
@media (max-width: 760px) {
  .footer-links { gap: 4px; }
  .footer-links a { display: block; padding: 7px 0; }
}
.footer-links a, footer a { font-size: 16px; color: var(--warm-white); }
.footer-links a:hover { color: var(--orange); }
.footer-bottom {
  margin-top: 64px; padding-top: 26px; border-top: 1px solid rgba(246, 242, 239, .18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 14px; color: rgba(246, 242, 239, .5);
}
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* ---------- modals ---------- */
.modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; }
.modal[hidden] { display: none; }
.modal-back { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); backdrop-filter: blur(4px); }
.modal-box {
  position: relative; width: min(760px, 100%); height: min(720px, 88vh);
  background: #fff; border-radius: 0; overflow: hidden;
}
.modal-body, .modal-body iframe { width: 100%; height: 100%; border: 0; display: block; }
.modal-x {
  position: absolute; top: 0; right: 0; z-index: 2; width: 40px; height: 40px;
  border: 0; background: var(--orange); font-size: 22px; line-height: 1;
  cursor: pointer; color: var(--black);
}
.modal-x:hover { background: var(--black); color: var(--warm-white); }
.modal-video { max-width: 1040px; width: 92vw; background: #000; height: auto; }
.modal-video .modal-body { line-height: 0; height: auto; }
.modal-video video { display: block; width: 100%; max-height: 82vh; background: #000; }
.modal-video audio { display: none; }
.modal-form { max-width: 580px; width: 92vw; height: auto; background: var(--black); color: var(--warm-white); }
.modal-form .modal-body { padding: 44px 44px 38px; height: auto; }
.modal-form .eyebrow { color: var(--orange); }
.modal-form h2 {
  font-weight: 500; letter-spacing: -.025em; font-size: clamp(22px, 2.3vw, 30px);
  line-height: 1.18; margin: 10px 0 16px; color: var(--warm-white);
}
.modal-form p { font-size: 16px; line-height: 24px; color: rgba(246, 242, 239, .66); }
.watch-form { margin-top: 28px; }
.watch-form label {
  display: block; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(246, 242, 239, .6); margin-bottom: 20px;
}
.watch-form input {
  display: block; width: 100%; margin-top: 10px; padding: 13px 15px; font: inherit;
  font-size: 17px; letter-spacing: -.02em; color: var(--warm-white);
  background: rgba(246, 242, 239, .06); border: 1px solid rgba(246, 242, 239, .26);
  border-radius: 0; text-transform: none; font-weight: 400;
}
.watch-form input::placeholder { color: rgba(246, 242, 239, .38); }
.watch-form input:focus { outline: 0; border-color: var(--orange); }
.watch-form .btn { width: 100%; margin-top: 6px; }
.watch-form .lead-fine { color: rgba(246, 242, 239, .66); }

/* ---------- honeypot ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- rotating examples ---------- */
/* De twee roterende voorbeelden zijn hetzelfde soort ding: een levend
   voorbeeld onder de productnaam. Dus dezelfde kleur en dezelfde maat, want
   twee kleuren suggereren een verschil dat er niet is. */
.rot {
  display: block; margin: 8px 0 12px; min-height: 1.35em;
  font-weight: 500; font-size: 19px; letter-spacing: -.025em; line-height: 1.3;
  opacity: 1; transform: translateY(0);
  transition: opacity .26s ease, transform .26s ease;
}
.fmt-head .rot { display: block; font-size: 19px; }
.rot-a, .rot-b, .fmt-head .rot-a, .fmt-head .rot-b { color: var(--orange-ink); }
.rot.rot-out { opacity: 0; transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .rot { transition: none; } }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .fmt-row { grid-template-columns: 1fr; padding: 18px 0 20px; }
  .fmt-b { border-left: 0; border-top: 0; }

  /* Naast elkaar zie je aan de kolom welk product het is; onder elkaar niet.
     Het stond hier eerst zo: productnaam boven elk blok, en het rijlabel
     eronder. Dat gaf zes losse blokken die om de beurt over een ander product
     gingen, met "What you get" twee keer vlak achter elkaar. Op een telefoon
     is de kop met de twee productnamen dan allang weggescrold en weet je niet
     meer waar je naar kijkt.
     Nu is een rij een kaartje: het label een keer als kop, en daaronder de
     twee antwoorden met de productnaam ervoor. Dan staat wat je vergelijkt
     onder elkaar in plaats van een half scherm uit elkaar. */
  .fmt-a, .fmt-b { padding-top: 0; padding-bottom: 0; }
  .fmt-a { padding-bottom: 14px; }
  .fmt-row .fmt-b .fmt-lab { display: none; }
  .fmt-a .fmt-lab { margin-bottom: 12px; }

  .fmt-val::before, .fmt-foot .fmt-cur::before {
    display: block; margin-bottom: 3px;
    font-size: 11px; font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent);
  }
  .fmt-a .fmt-val::before, .fmt-foot .fmt-a .fmt-cur::before {
    content: "Learning session";
  }
  .fmt-b .fmt-val::before, .fmt-foot .fmt-b .fmt-cur::before {
    content: "Learning event";
  }

  /* Een rij waar beide kolommen hetzelfde zeggen hoeft maar een keer. Twee
     keer dezelfde zin onder elkaar leest als een fout. */
  .fmt-same .fmt-b { display: none; }
  .fmt-same .fmt-a { padding-bottom: 0; }
  .fmt-same .fmt-a .fmt-val::before { content: "Both"; }

  .fmt-foot .fmt-b .fmt-lab { display: none; }
  .fmt-foot .fmt-a { padding-bottom: 18px; }
  /* .fmt-cur is een flexrij met de drie valuta naast elkaar. Het label is
     display:block, maar in een flexcontainer wordt dat gewoon het eerste
     item: de productnaam kwam zo naast het eurobedrag te staan. Met een
     volle basis krijgt hij zijn eigen regel erboven. */
  .fmt-foot .fmt-cur::before { flex-basis: 100%; }
}
@media (max-width: 720px) {
  .container { padding: 0 24px; }
  section { padding: 72px 0; }
  section.tight { padding: 52px 0; }
  section.tall { padding: 88px 0; }
  .hero { padding: 56px 0 72px; }
  .quote-big { padding: 30px 26px 28px; }
  .quote-big::after { left: 26px; }
  .footer-bottom { flex-direction: column; }
}

/* ============================================================
   Session and speaker pages
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 26px;
}
.crumbs a { color: var(--fg-3); }
.crumbs a:hover { color: var(--orange); }
.crumbs a::after { content: '/'; margin-left: 10px; color: var(--rule-2); }
.crumbs span { color: var(--orange); }

/* ---------- session hero ---------- */
.hero-event { padding: 72px 0 96px; }
.hero-event .container { align-items: center; }
.hero-event .h1-claim { font-size: clamp(34px, 4vw, 58px); }
.hero-event h2.sub { margin-top: 14px; color: var(--orange); }
.hero-event .hero-cta { margin-top: 34px; }
.wx-fig { margin: 0; line-height: 0; }
.hero-portrait { max-width: 460px; margin-left: auto; }
.hero-portrait img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 20%; border-radius: 0; }
@media (max-width: 1000px) { .hero-portrait { margin-left: 0; } }

/* ---------- session facts ---------- */
.meta-row {
  display: flex; flex-wrap: wrap; gap: 0; margin: 26px 0 0;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.meta-item {
  padding: 14px 24px 14px 0; margin-right: 24px;
  font-size: 15px; line-height: 24px; color: var(--fg-2);
  border-right: 1px solid var(--rule);
}
.meta-item:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.meta-item b { color: var(--fg); font-weight: 500; }

/* ---------- body copy blocks ---------- */
.block-list { max-width: 900px; margin: 22px 0 0; }
.block-list li { font-size: 18px; line-height: 26px; }
.block-h3 { font-weight: 500; font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; line-height: 1.2; margin: 34px 0 12px; }
.block-p { font-size: 18px; line-height: 26px; color: var(--fg-2); max-width: 900px; margin-bottom: 16px; }
section.tight + section.tight { padding-top: 0; }
section.tight + section.tight .section-title { padding-top: 56px; border-top: 1px solid var(--rule); }

/* ---------- session and speaker cards ---------- */
.cat-tools { margin-bottom: 34px; }
.cat-search {
  width: 100%; max-width: 460px; padding: 13px 16px; font: inherit; font-size: 17px;
  letter-spacing: -.02em; color: var(--fg); background: var(--field);
  border: 1px solid var(--rule-2); border-radius: 0;
}
.cat-search::placeholder { color: var(--fg-3); }
.cat-search:focus { outline: 0; border-color: var(--orange); }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; margin-top: 34px; }
.cat-card { display: flex; flex-direction: column; background: transparent; border: 0; color: var(--fg); }
.cat-thumb { aspect-ratio: 4 / 3; background: var(--tile); overflow: hidden; }
.cat-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block; transition: opacity .15s ease; }
.cat-card:hover .cat-thumb img { opacity: .78; }
.cat-thumb-empty { background: var(--tile); }
.cat-body { padding: 16px 0 0; }
.cat-body h3 { font-weight: 500; font-size: 19px; letter-spacing: -.02em; line-height: 1.24; color: var(--fg); }
.cat-card:hover .cat-body h3 { color: var(--orange); }
.cat-by { margin-top: 8px; font-size: 15px; color: var(--fg-3); }
/* De regel onder een sessiekaart: waar de sessie over gaat. Twee regels
   hoog, want de kaarten in een rij horen even hoog te blijven. */
.cat-info {
  margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--fg-3);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.cat-card[hidden] { display: none !important; }

/* ---------- newsletter ---------- */
.nl-form { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.nl-form input[type="email"] {
  flex: 1; min-width: 260px; padding: 13px 16px; border-radius: 0;
  border: 1px solid var(--rule-2); background: var(--field); color: var(--fg);
  font-family: var(--font); font-size: 17px; letter-spacing: -.02em;
}
.nl-form input[type="email"]::placeholder { color: var(--fg-3); }
.nl-form input[type="email"]:focus { outline: 0; border-color: var(--orange); }
.nl-consent {
  flex-basis: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 14px; color: var(--fg-3); margin-top: 10px;
}
/* Was 13 bij 13 pixels, de standaardmaat van de browser. Op een telefoon is
   dat niet te raken; het hele label wordt nu het tikvlak. */
.nl-consent { padding: 8px 0; cursor: pointer; }
.nl-consent input[type="checkbox"] {
  accent-color: var(--orange); width: 22px; height: 22px; flex: none; margin: 0;
}

/* ============================================================
   Citatenrail
   Twee klantcitaten in dezelfde tekstballon, met ronde pijlen
   zoals de sprekerscarrousel in het D8-concept.
   ============================================================ */

/* Stond op 880 en zweefde daarmee tussen de andere blokken in: de logorij
   liep tot 1330, de tekstregels tot 1360 en het citaat tot 1160. Niets deelde
   een rand. Nu volgt het citaat de container, net als de rest. De regel zelf
   blijft leesbaar doordat de tekst binnenin een eigen maat houdt. */
.quote-rail { max-width: none; margin: 0 0 64px; text-align: left; }
.quote-rail .quote-big blockquote { max-width: 60ch; }
.quote-rail .quote-big { margin: 0; }
.quote-rail [data-quote][hidden] { display: none; }

.quote-nav { display: flex; align-items: center; gap: 14px; margin-top: 46px; }
.qnav {
  position: relative; width: 46px; height: 46px; flex: none;
  border: 1px solid var(--rule-2); border-radius: 50%;
  background: transparent; color: var(--fg); cursor: pointer; padding: 0;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.qnav::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-top: 2px solid currentColor;
}
.qnav-next::after { transform: translate(-65%, -50%) rotate(45deg); }
.qnav-prev::after { transform: translate(-35%, -50%) rotate(-135deg); }
.qnav:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }

.quote-dots { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.quote-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-2); }
.quote-dots .is-on { background: var(--orange); }

/* ---------- drie valuta zijn een prijs, niet drie dingen ---------- */
.fmt-cur .eur, .fmt-cur .usd, .fmt-cur .gbp { color: var(--fg); }
.price-num .eur, .price-num .usd, .price-num .gbp { color: var(--fg); }

/* ---------- de klantlogo's staan nu onder de productnaam ---------- */
.fmt-head .fmt-logos { margin-top: 22px; flex-wrap: wrap; gap: 10px 14px; }
.fmt-logos-lab {
  flex-basis: 100%; font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-3); margin-bottom: 2px;
}

/* Een <button class="chip"> erft anders de grijze systeemachtergrond, waardoor
   de filters op de sessiepagina vrijwel onzichtbaar waren. */
button.chip { background: transparent; font: inherit; cursor: pointer; }
button.chip:hover { border-color: var(--fg); color: var(--fg); }
button.chip.is-on { background: var(--fg); border-color: var(--fg); color: var(--bg); }

/* ============================================================
   Leesbaarheidsronde
   Gemeten op de homepage stond 22% van alle tekens onder 16px, de
   lopende tekst op 16 tot 18px met regelhoogte 1,44, en overal een
   negatieve letterspatiering van -2%. Dat laatste is een instelling
   voor display-formaten; op tekstgroottes kost het leessnelheid.
   De -2% van D8 blijft dus staan vanaf 24px en vervalt daaronder.
   Micro-labels gaan van 11-12px naar 13px, en hun spatiering van
   .16em naar .10em: heel wijd gespatieerde kleine kapitalen lezen
   traag.
   ============================================================ */

body { font-size: 19px; line-height: 30px; letter-spacing: normal; }

/* spatiering alleen nog waar het display-typografie is */
.nav-links a, .spk-name, .cat-body h3, .post h4, .panel-item .v,
.team-face .n, .rot, .fmt-head .rot, .meta-item, .cat-search,
.lead-form input, .lead-form select, .watch-form input, .nl-form input[type="email"],
.card p, .fmt-a, .fmt-b, .split p, .lead, .section-lead, .block-list li,
.person-note .txt, .spk-title, .cat-by, .tint-panel p, .lead-copy p,
.calc-copy p, .price-strip p, .quote-big figcaption, footer p,
.footer-links a, footer a, .price-incl li, .lead-ticks li,
.card ul.tick li, .card ul.cross li, ul.tick li { letter-spacing: normal; }

/* ---------- lopende tekst een maat groter en luchtiger ---------- */
.lead { font-size: 19px; line-height: 30px; }
.section-lead { font-size: 22px; line-height: 32px; }
.card p { font-size: 17px; line-height: 27px; }
.fmt-a, .fmt-b { font-size: 17px; line-height: 27px; }
.fmt-head span { font-size: 17px; line-height: 26px; }
.split p { font-size: 19px; line-height: 30px; margin-bottom: 20px; }
.lead-copy p, .calc-copy p, .price-strip p { font-size: 18px; line-height: 28px; }
.tint-panel p { font-size: 19px; line-height: 30px; }
.person-note .txt { font-size: 17px; line-height: 27px; }
.block-list li { font-size: 19px; line-height: 30px; }
.block-p { font-size: 19px; line-height: 30px; }
.card ul.tick li, .card ul.cross li, ul.tick li,
.price-incl li, .lead-ticks li { font-size: 17px; line-height: 27px; }
.meta-item { font-size: 17px; line-height: 26px; }
.quote-big figcaption { font-size: 16px; line-height: 1.5; }
.rail-head a { font-size: 17px; }
.int-row .int-item > span { font-size: 17px; }
.cat-search { font-size: 18px; }
.lead-form input, .lead-form select, .watch-form input { font-size: 18px; }

/* ---------- de kleinste tekst omhoog ---------- */
.spk-title { font-size: 16px; line-height: 24px; min-height: 3em; }
.cat-by { font-size: 16px; }
.hero-mini span { font-size: 15px; line-height: 1.4; }
.case-stats span { font-size: 14px; line-height: 1.4; }
.team-face .r { font-size: 14px; }
.cta .fine { font-size: 16px; }
.lead-fine { font-size: 15px; line-height: 1.55; }
.post .more { font-size: 16px; }
.nl-consent { font-size: 15px; }
.sr-cap { font-size: 15px; }
.vcap { font-size: 14px; }
.fmt-unit { font-size: 16px; }
footer p { font-size: 17px; line-height: 27px; }
.footer-links a, footer a { font-size: 17px; }
.footer-bottom { font-size: 15px; }

/* ---------- micro-labels: groter, minder ver uit elkaar ---------- */
.eyebrow { font-size: 13px; letter-spacing: .1em; }
.fmt-key { font-size: 13px; letter-spacing: .1em; }
.spk-meta { font-size: 13px; letter-spacing: .1em; }
/* In "Speaker rating 4,6/5 from 1.992 participants" zijn alleen het cijfer en
   het aantal het nieuws. De woorden eromheen in dezelfde kleur maakten er een
   oranje blok van waarin niets opvalt. */
.spk-meta { color: var(--fg); }
.spk-cijfer { color: var(--accent); font-weight: 500; }
.crumbs { font-size: 13px; letter-spacing: .1em; }
.case-when { font-size: 13px; letter-spacing: .1em; }
.int-lab { font-size: 13px; letter-spacing: .1em; }
.panel-item .k { font-size: 13px; letter-spacing: .1em; }
.footer-col-title { font-size: 13px; letter-spacing: .1em; }
.fmt-logos-lab { font-size: 12px; letter-spacing: .1em; }
.brand .tag { font-size: 11px; letter-spacing: .12em; }
.chip { font-size: 13px; letter-spacing: .1em; padding: 10px 16px; }
.lead-form label, .watch-form label { font-size: 13px; letter-spacing: .1em; }

/* De labelkolom stond in de meest gedempte tint op een grijze tegel: grijs op
   grijs. De tegel vervalt, zodat het label op de bandkleur staat, en de tekst
   gaat naar de tweede tint in plaats van de derde. */
.fmt-key { color: var(--fg-2); background: transparent; }

/* ============================================================
   Beschikbaarheid checken
   Kalender en criteria naast elkaar, zodat een concrete datum
   kiezen en een patroon opgeven allebei een klik of drie kosten.
   ============================================================ */
/* De hele doos scrolde, en de sluitknop zit daar absoluut in: die schoof dus
   mee naar boven uit beeld zodra je las. Nu scrolt alleen de binnenkant en
   blijft het kruisje staan waar het hoort. */
.av-box {
  max-width: 1220px; width: 95vw; height: auto; max-height: 92vh;
  background: var(--black); color: var(--warm-white);
  display: flex; flex-direction: column; overflow: hidden;
}
.av-body { padding: 32px 40px 30px; height: auto; overflow-y: auto; flex: 1 1 auto; }
.av-body .eyebrow { color: var(--orange); }
.av-body h2 { font-weight: 500; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.14; color: var(--warm-white); margin-bottom: 8px; }
.av-intro { font-size: 16px; line-height: 25px; color: rgba(246, 242, 239, .88); max-width: 660px; }

/* Breder en met minder lucht: op 980px viel het formulier onder de vouw, en dan
   ziet iemand de velden niet die hij juist moet invullen. */
.av-cols { display: grid; grid-template-columns: 320px 1fr; gap: 46px; margin-top: 22px; align-items: start; }
/* Wie je aan het checken bent, klein en linksonder onder de kalender. Zonder
   opmaak stond de foto hier op ware grootte onderaan de modal, en moest je
   scrollen om te ontdekken over wie het ging. */
.av-links { display: flex; flex-direction: column; gap: 18px; }
.av-een {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid rgba(20, 20, 20, .14);
  background: rgba(20, 20, 20, .03);
}
.av-een img {
  width: 34px; height: 34px; flex: 0 0 34px;
  object-fit: cover; object-position: center top; display: block;
}
.av-een-txt { display: flex; flex-direction: column; min-width: 0; }
.av-een-txt b { font-size: 14px; font-weight: 500; line-height: 1.25; color: var(--black); }
.av-een-txt span {
  font-size: 12.5px; line-height: 1.3; color: rgba(20, 20, 20, .64);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 780px) { .av-cols { grid-template-columns: 1fr; gap: 30px; } }

/* Op een breed scherm gaan de samenvatting en het formulier naast de kalender
   in plaats van eronder. Onder elkaar was de inhoud ruim 900px hoog en viel de
   verstuurknop weg; zo staat alles in een keer in beeld. */
@media (min-width: 1080px) {
  .av-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px;
             column-gap: 44px; align-content: start; }
  .av-body > .eyebrow,
  .av-body > h2,
  .av-body > .av-intro { grid-column: 1 / -1; }
  .av-cols { grid-column: 1; grid-row: 4 / span 2; }
  .av-sam  { grid-column: 2; grid-row: 4; margin-top: 22px; align-self: start; }
  .av-form { grid-column: 2; grid-row: 5; align-self: start; }
  /* De basisregel voor .av-velden staat verderop en won op volgorde,
     vandaar de extra ouder erbij. */
  .av-body .av-velden { grid-template-columns: 1fr; gap: 12px; }
}

.av-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.av-cal-titel { font-size: 17px; font-weight: 500; }
.av-nav { position: relative; width: 34px; height: 34px; border: 1px solid rgba(246, 242, 239, .3); border-radius: 50%; background: transparent; cursor: pointer; padding: 0; }
.av-nav::after { content: ''; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-right: 2px solid var(--warm-white); border-top: 2px solid var(--warm-white); transform: translate(-35%, -50%) rotate(-135deg); }
.av-nav-next::after { transform: translate(-65%, -50%) rotate(45deg); }
.av-nav:hover { background: var(--orange); border-color: var(--orange); }
.av-nav:hover::after { border-color: var(--black); }

.av-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.av-wd { text-align: center; font-size: 12px; letter-spacing: .06em; color: rgba(246, 242, 239, .55); padding-bottom: 6px; }
.av-dag { aspect-ratio: 1; border: 1px solid transparent; background: rgba(246, 242, 239, .05); color: var(--warm-white); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.av-dag.is-uit { opacity: .25; cursor: default; }
.av-dag.is-match { background: rgba(255, 130, 80, .22); }
.av-dag:not(.is-uit):hover { border-color: var(--orange); }
.av-dag.is-on { background: var(--orange); color: var(--black); font-weight: 500; }

.av-lab { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 242, 239, .74); margin: 0 0 12px; }
.av-crit .av-lab + * + .av-lab { margin-top: 20px; }
.av-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.av-chip { font: inherit; font-size: 14px; padding: 9px 14px; border: 1px solid rgba(246, 242, 239, .3); background: transparent; color: var(--warm-white); cursor: pointer; }
.av-chip:hover { border-color: var(--orange); }
.av-chip.is-on { background: var(--orange); border-color: var(--orange); color: var(--black); }

.av-tijd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.av-tijd span { font-size: 16px; color: rgba(246, 242, 239, .88); }
.av-tijd select { font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid rgba(246, 242, 239, .3); background: rgba(246, 242, 239, .06); color: var(--warm-white); border-radius: 0; }
.av-tijd select option { color: #141414; }

.av-sam { margin-top: 22px; padding: 16px 20px; background: rgba(255, 130, 80, .14); border-left: 3px solid var(--orange); }
.av-sam-txt { font-size: 18px; line-height: 26px; color: var(--warm-white); }
.av-sam-lijst { margin: 0; padding-left: 20px; }
.av-sam-lijst li { margin: 2px 0; }
.av-sam-meta { display: flex; align-items: center; gap: 14px; margin-top: 8px; font-size: 14px; color: rgba(246, 242, 239, .74); }
.av-wis { font: inherit; font-size: 14px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--orange); cursor: pointer; padding: 0; }
.av-hint { margin: 10px 0 0; font-size: 13px; line-height: 19px; color: rgba(246, 242, 239, .62); }
.av-form button[disabled] { opacity: .4; cursor: default; }

.av-form { margin-top: 22px; }
.av-velden { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 680px) { .av-velden { grid-template-columns: 1fr; } }
.av-form label { display: block; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 242, 239, .74); }
.av-form input { display: block; width: 100%; margin-top: 9px; padding: 12px 14px; font: inherit; font-size: 17px; letter-spacing: normal; text-transform: none; font-weight: 400; color: var(--warm-white); background: rgba(246, 242, 239, .06); border: 1px solid rgba(246, 242, 239, .26); border-radius: 0; }
.av-form input::placeholder { color: rgba(246, 242, 239, .5); }
.av-form input:focus { outline: 0; border-color: var(--orange); }
.av-form .btn { margin-top: 18px; }
.av-form .lead-fine { text-align: left; margin-top: 14px; }

/* De rechterkop loopt over twee regels en de linker over een, waardoor alles
   eronder uit de pas liep. Twee regels hoogte reserveren lijnt de kolommen uit. */
.fmt-head b { min-height: 2.36em; }
@media (max-width: 900px) { .fmt-head b { min-height: 0; } }

/* laatste krappe gevallen uit de audit */
.brand .tag { color: rgba(246, 242, 239, .82); }
.quote-big figcaption span { color: rgba(20, 20, 20, .8); }
.fmt-logos .more { color: var(--fg-2); }

/* De gescrapete beelden hebben wisselende verhoudingen. Zonder hoogtelimiet
   werd een staand portret paginavullend. Breedte volgt het beeld, hoogte is
   begrensd, en alles staat gecentreerd. */
.wx-fig img { width: auto; max-width: 100%; max-height: 560px; margin: 0 auto; }
.wx-media.one .wx-fig img { max-height: 620px; }
.wx-media.strip .wx-fig img { max-height: 66px; }
.wx-banner img { max-height: 260px; width: 100%; object-fit: cover; }

/* ============================================================
   Learning events
   ============================================================ */
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-4 { grid-template-columns: 1fr; } }

.ev-card { display: block; color: var(--fg); transition: border-color .15s ease; }
.ev-card:hover { border-color: var(--orange); }
.ev-card h3 { font-size: 22px; line-height: 1.2; margin-bottom: 14px; }
.ev-when { font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--orange-ink); margin-bottom: 10px; }
.ev-more { display: inline-block; font-size: 16px; color: var(--orange-ink); }

.ev-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 40px; }
.ev-stat { background: var(--bg); padding: 26px 22px; }
.ev-stat b { display: block; font-weight: 500; font-size: clamp(28px, 3vw, 40px); letter-spacing: -.035em; line-height: 1; color: var(--orange-ink); }
.ev-stat span { display: block; font-size: 15px; line-height: 1.4; color: var(--fg-2); margin-top: 10px; }
@media (max-width: 820px) { .ev-stats { grid-template-columns: repeat(2, 1fr); } }

.quote-grid { gap: 24px; }
.quote-card { margin: 0; background: var(--tile); border: 1px solid var(--rule); padding: 30px 28px; }
.quote-vraag { margin-top: 12px; font-size: 12px; letter-spacing: .04em; color: var(--fg-3); }
.quote-card blockquote { margin: 0; font-size: 19px; line-height: 29px; color: var(--fg); }
.quote-card blockquote::before { content: '\201C'; }
.quote-card blockquote::after { content: '\201D'; }

.ev-price { position: relative; display: flex; flex-direction: column; }
.ev-price-name { font-weight: 500; font-size: 21px; letter-spacing: -.02em; margin-bottom: 14px; }
.ev-price .fmt-cur { flex-wrap: wrap; gap: 4px 14px; }
.ev-price .fmt-cur span { font-size: clamp(20px, 1.9vw, 26px); }
/* De regel onder de prijs is een zin van een of twee regels, geen alinea. Op
   de standaard regelafstand ("All day, unlimited access, recordings for three
   months.") stonden de twee helften ver uit elkaar. */
.ev-price .fmt-unit { margin-top: 10px; line-height: 1.35; }
/* De hoek met "Best seller" ligt over de kaart heen en dus over de naam van
   het pakket. Staat er een, dan begint de naam eronder. */
.ev-price .chip-best + .ev-price-name { margin-top: 24px; }
.ev-price .tick { margin: 20px 0 18px; }
.ev-price .tick li { font-size: 16px; line-height: 24px; }
.ev-addon-line { font-size: 15px; line-height: 23px; color: var(--fg-2); padding-top: 16px; border-top: 1px solid var(--rule); margin-top: auto; }
.ev-price .btn { margin-top: 20px; align-self: flex-start; }
.chip-best { position: absolute; top: -1px; right: -1px; background: var(--orange); color: var(--black); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 7px 12px; }

/* ---------- vraag en antwoord ---------- */
.qa-list { margin-top: 40px; border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--rule); }
.qa summary {
  list-style: none; cursor: pointer; padding: 26px 44px 26px 0; position: relative;
  font-size: clamp(19px, 1.8vw, 23px); font-weight: 500; letter-spacing: -.02em;
  line-height: 1.3; color: var(--fg);
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ''; position: absolute; right: 6px; top: 50%; width: 11px; height: 11px;
  border-right: 2px solid var(--orange-ink); border-bottom: 2px solid var(--orange-ink);
  transform: translateY(-70%) rotate(45deg); transition: transform .18s ease;
}
.qa[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.qa summary:hover { color: var(--orange-ink); }
.qa p { font-size: 18px; line-height: 28px; color: var(--fg-2); padding: 0 60px 28px 0; margin-top: -6px; max-width: 900px; }

/* oproep onder de twee sprekersrijen */
.spk-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 48px; padding-top: 34px; border-top: 1px solid var(--rule); }
.spk-cta-txt { flex: 1; min-width: 260px; font-size: 19px; line-height: 28px; color: var(--fg); }

/* meerdere tijdvensters onder elkaar */
.av-tijd { flex-direction: column; align-items: stretch; gap: 10px; }
.av-venster { display: flex; align-items: center; gap: 10px; }
.av-venster select { flex: 1; min-width: 0; }
.av-weg { flex: none; width: 34px; height: 34px; border: 1px solid rgba(246,242,239,.3); background: transparent; color: var(--warm-white); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; }
.av-weg:hover { background: var(--orange); border-color: var(--orange); color: var(--black); }
.av-erbij { align-self: flex-start; font: inherit; font-size: 15px; background: none; border: 0; border-bottom: 1px solid currentColor; color: var(--orange); cursor: pointer; padding: 0; margin-top: 4px; }
.av-zone { margin-top: 14px; }
.av-zone select { width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid rgba(246,242,239,.3); background: rgba(246,242,239,.06); color: var(--warm-white); border-radius: 0; }
.av-zone select option { color: #141414; }
.av-rot { color: var(--orange); transition: opacity .2s ease; }

/* Het valutateken vet en in een eigen kleur, zodat je in een oogopslag ziet dat
   er drie keer dezelfde prijs staat in drie eenheden.

   Het stond eerst in een gevuld blokje. Dat loste het contrast op, maar het oogde
   als een label in plaats van als een prijs. Vet met kleur doet hetzelfde werk en
   staat rustiger. De kleur verschilt per band, want het D8-paars is bijna net zo
   donker als de zwarte band en het volle oranje verdwijnt op warm wit:

     overal         LQTR Orange #FF8250
     zwarte band     oranje #FF8250  op zwart    7,5:1
     paarse band     oranje #FF8250  op paars    3,9:1, ruim genoeg voor deze
                                                 grote cijfers (drempel 3,0)

   Op de lichte band haalt dit oranje 2,2:1. Dat is laag, maar het gaat om het
   valutateken naast een bedrag dat zelf in bijna zwart staat (16,6:1): de prijs
   blijft leesbaar en de eenheid staat er drie keer naast. Bewuste keuze voor de
   merkkleur boven de meetwaarde.

   De spans zijn flexitems en dus geblokkeerd, waardoor ::first-letter het teken
   pakt en er geen extra markup nodig is. */
:root { --cur: var(--orange); }

.fmt-cur span::first-letter,
.price-num span::first-letter,
.ev-price .fmt-cur span::first-letter {
  color: var(--cur);
  font-weight: 700;
}

/* Koopknop: naast Check availability, maar visueel ondergeschikt daaraan.
   De meeste bezoekers checken eerst beschikbaarheid; wie al weet wat hij wil
   koopt direct. */
.btn-buy { background: transparent; border-color: var(--fg); color: var(--fg); --tail: var(--fg); }
.btn-buy:hover { background: var(--fg); color: var(--bg); }
.btn-prijs { margin-left: 10px; padding-left: 10px; border-left: 1px solid currentColor; opacity: .85; }

/* Een sectiekop van 48px zonder ondermarge plakt op de eerste alinea. De kop
   is een sprong in de hiërarchie, dus die mag ook een sprong in de witruimte
   zijn: ongeveer een halve regelhoogte van de kop zelf. */
.section-title + .block-p,
.section-title + .block-list,
.section-title + ul,
.section-title + .grid,
.section-title + .qa-list,
h2.sub + .block-p,
.block-h3 + .block-p { margin-top: 30px; }
.card h3 + p, .card h3 + ul { margin-top: 14px; }
.block-p + .block-p { margin-top: 0; }
.block-p { margin-bottom: 20px; }

/* Het valutateken plakte tegen het bedrag. ::first-letter accepteert marge,
   dus dat kan zonder extra markup. */
.fmt-cur span::first-letter,
.price-num span::first-letter,
.ev-price .fmt-cur span::first-letter { margin-right: .3em; }


/* Key Learnings: elk punt heeft een titel en een uitleg. Als blokken met een
   haarlijn ertussen lezen ze als een lijst zonder dat het een opsomming wordt. */
.leerpunten { margin-top: 30px; border-top: 1px solid var(--rule); }
.leerpunt { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.leerpunt h3 { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.24; margin-bottom: 14px; }
.leerpunt p { font-size: 18px; line-height: 28px; color: var(--fg-2); max-width: 900px; }
.leerpunt p + p { margin-top: 14px; }

/* De sessiehero mag compacter, zodat Session Summary boven de vouw begint. */
.hero-event { padding: 52px 0 60px; }
.hero-event .meta-row { margin-top: 22px; }
.hero-event .hero-cta { margin-top: 26px; }
.hero-event .hero-portrait { max-width: 400px; }

/* ============================================================
   De beschikbaarheidskiezer op een lichte grond
   Het is een formulier met een kalender, chips en selects. Die
   dichte besturing leest op Luke Warm White een stuk rustiger dan
   op zwart; oranje blijft het accent.
   ============================================================ */
.av-box { background: var(--warm-white); color: var(--black); }
.av-body .eyebrow { color: var(--orange); }
.av-body h2 { color: var(--black); }
.av-intro { color: rgba(20, 20, 20, .78); }

.av-cal-titel { color: var(--black); }
.av-nav { border-color: rgba(20, 20, 20, .3); }
.av-nav::after { border-right-color: var(--black); border-top-color: var(--black); }
.av-nav:hover::after { border-right-color: var(--black); border-top-color: var(--black); }

.av-wd { color: rgba(20, 20, 20, .6); }
.av-dag { background: rgba(20, 20, 20, .05); color: var(--black); }
.av-dag.is-match { background: rgba(255, 130, 80, .3); }
.av-dag.is-on { background: var(--orange); color: var(--black); }

.av-lab { color: rgba(20, 20, 20, .74); }
.av-chip { border-color: rgba(20, 20, 20, .28); color: var(--black); }
.av-chip.is-on { background: var(--orange); border-color: var(--orange); color: var(--black); }

.av-tijd span { color: rgba(20, 20, 20, .78); }
.av-tijd select,
.av-zone select { border-color: rgba(20, 20, 20, .28); background: #fff; color: var(--black); }
.av-weg { border-color: rgba(20, 20, 20, .28); color: var(--black); }
.av-erbij { color: var(--orange); }

.av-sam { background: rgba(255, 130, 80, .18); border-left-color: var(--orange); }
.av-sam-txt { color: var(--black); }
.av-sam-meta { color: rgba(20, 20, 20, .74); }
.av-wis { color: var(--orange); }
.av-hint { color: rgba(20, 20, 20, .62); }

.av-form label { color: rgba(20, 20, 20, .74); }
.av-form input { color: var(--black); background: #fff; border-color: rgba(20, 20, 20, .26); }
.av-form input::placeholder { color: rgba(20, 20, 20, .45); }
.av-form .lead-fine { color: rgba(20, 20, 20, .66); }
.av-rot { color: var(--orange); }

/* per sprekerskaart een eigen ingang naar de kiezer */
/* Beschikbaarheid checken is de belangrijkste stap op deze kaart: het is de
   enige vraag die een bezoeker echt heeft voordat hij iemand boekt. Als
   onderstreepte link stond hij gelijk aan "See sessions & bio", en dat is hij
   niet. Nu een echte knop, met de tekstballonstaart van D8. */
.spk-check {
  position: relative; display: inline-block; margin-top: 14px;
  padding: 9px 16px; font-size: 15px; line-height: 22px; font-weight: 500;
  letter-spacing: -.01em; border: 1px solid var(--orange);
  background: var(--orange); color: var(--black); border-bottom-width: 1px;
}
.spk-check::after {
  content: ''; position: absolute; right: 13px; bottom: -7px;
  border-style: solid; border-width: 7px 8px 0 0;
  border-color: var(--orange) transparent transparent transparent;
}
.spk-check:hover { background: #FF9468; border-color: #FF9468; color: var(--black); }
.spk-check:hover::after { border-top-color: #FF9468; }
.spk-more { display: inline-block; margin-top: 16px; }

/* ----------------------------------------------------- je eigen pagina zien */
/* Het invulveld op de learning-events pagina. Eén regel op de desktop, twee op
   een telefoon, en het veld blijft leesbaar op elke bandkleur omdat het zijn
   eigen grond meeneemt. */
.brandform { margin-top: 34px; max-width: 720px; }
.brandform-label {
  display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 10px;
}
.brandform-row { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; }
.brandform input {
  flex: 1 1 280px; min-width: 0;
  /* Hard wit met donkere tekst, niet via de bandtokens. Op de zwarte band was
     --field zelf zwart, en dan typte je zwart op zwart. Een invulveld hoort er
     op elke band hetzelfde uit te zien. */
  background: #FFFFFF; color: #141414;
  border: 1px solid var(--rule); border-radius: 0;
  padding: 16px 18px; font: inherit; font-size: 18px; letter-spacing: -.01em;
}
.brandform input::placeholder { color: #6B6B6B; }
.brandform input:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
.brandform .btn { flex: 0 0 auto; }
.brandform .btn[disabled] { opacity: .7; cursor: progress; }
.brandform-note { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
@media (max-width: 640px) {
  .brandform-row > * { flex: 1 1 100%; }
}
.brandform-fout {
  margin-top: 10px; font-size: 15px; font-weight: 500;
  color: var(--accent); 
}

/* Bevestiging onder een formulier. De formulieren gingen naar Netlify Forms,
   dat niets registreerde: een POST gaf 404 en de bezoeker kreeg een foutpagina.
   Nu blijft hij op de pagina en leest hij hier of het gelukt is. */
.form-melding {
  margin-top: 14px; font-size: 15px; line-height: 1.5; font-weight: 500;
  color: var(--fg);
}
.form-melding:empty { display: none; }
.form-melding.is-fout { color: var(--accent); }

/* De bevestiging na een geslaagde verzending. Hij stond als gewone regel
   tussen de velden en las als nog een zin erbij; nu is het het antwoord op wat
   je net deed, met een vinkje ervoor en lucht eromheen. */
.form-melding.is-klaar {
  margin-top: 22px; padding: 18px 20px 18px 46px; position: relative;
  border-radius: 10px; background: rgba(127, 176, 105, .12);
  font-size: 16px; font-weight: 500;
}
.form-melding.is-klaar::before {
  content: ""; position: absolute; left: 18px; top: 21px;
  width: 15px; height: 9px; border-left: 2.5px solid #5c8f3f;
  border-bottom: 2.5px solid #5c8f3f; transform: rotate(-45deg);
}
.form-melding.is-klaar + [data-form-sluit] { margin-top: 14px; }

/* Het hidden-attribuut werkt via een browserregel, en elke eigen regel met een
   klasse wint daarvan. De verstuurknop is een .btn met display:inline-flex, dus
   die bleef als "Sending..." staan naast de bevestiging terwijl hij verborgen
   heette te zijn. */
[hidden] { display: none !important; }

/* Dagen tussen begin en eind van een reeks. Een klant die een evenement over
   meerdere dagen wil, klikt de eerste en de laatste dag; wat ertussen ligt
   hoort zichtbaar bij de selectie zonder de twee uiteinden te overschreeuwen. */
.av-dag.is-tussen { background: rgba(255, 130, 80, .42); color: var(--warm-white); }
.av-box .av-dag.is-tussen { color: inherit; }

/* ---------- learning events: sessies uit de catalogus ---------- */
/* Elke eventpagina laat zien welke sessies er inhoudelijk bij horen. Zonder
   deze koppeling was elke eventpagina hetzelfde verhaal met een andere kop. */
.ev-sess { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ev-sess:hover { border-color: var(--accent); }
.ev-sess-spk {
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 10px;
}
.ev-sess h3 { margin: 0 0 18px; }
.ev-sess-cta { margin-top: auto; font-size: 15px; font-weight: 500; color: var(--accent); }

/* De datum van het event, direct onder de introzin in de hero. */
.ev-when {
  display: inline-block; margin-top: 18px; padding: 9px 16px;
  border: 1px solid var(--rule-2); font-size: 15px; font-weight: 500; color: var(--fg);
}

/* ---------- how it works: de zeven stappen ---------- */
/* De gescrapete versie plakte de titel van elke stap vast aan de uitleg, zodat
   het een onleesbare vinkjeslijst werd. Genummerd, met de kop apart. */
.stappen { list-style: none; margin: 40px 0 0; padding: 0; counter-reset: stap; }
.stap {
  display: grid; grid-template-columns: 56px 1fr; gap: 22px;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.stap:last-child { border-bottom: 1px solid var(--rule); }
.stap-n {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 1px solid var(--rule-2); color: var(--accent);
  font-size: 17px; font-weight: 500;
}
.stap h3 { margin: 0 0 8px; }
.stap p { margin: 0; color: var(--fg-2); }
@media (max-width: 640px) {
  .stap { grid-template-columns: 40px 1fr; gap: 16px; }
  .stap-n { width: 34px; height: 34px; font-size: 15px; }
}

/* De platforms waarop we uitzenden, in de kaart ernaast. */
.plat-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 22px; }
.plat img { height: 30px; width: auto; max-width: 120px; object-fit: contain; }

/* Een tweede link op de sprekerkaart. Er stond alleen "Check availability", en
   dan vraag je beschikbaarheid voor een sessie waarvan je niet weet waar hij
   over gaat. Deze link gaat naar de spreker en zijn sessies. */
.spk-more {
  display: block; margin-top: 8px; font-size: 14px; font-weight: 500;
  color: var(--fg-2); text-decoration: none;
}
.spk-more:hover { color: var(--accent); }

/* ---------- oranje slotbalk onder de voet ---------- */
/* De onderste strook hoort oranje te zijn. Die zat in deze skin nog niet; wat
   er stond was de payoffregel in oranje, en die is eruit toen de tagline eruit
   ging. De balk loopt over de volle breedte, buiten de container om. */
footer { padding-bottom: 0; }
.footer-bottom {
  margin-top: 64px; padding: 22px 0 0;
  border-top: 1px solid rgba(246, 242, 239, .18);
  font-size: 14px; color: rgba(246, 242, 239, .5);
}
.footer-slot {
  background: var(--orange); color: var(--black);
  margin-top: 34px;
  /* De voet heeft een container met marge; deze strook moet daar doorheen. */
  margin-inline: calc(50% - 50vw); padding: 18px calc(50vw - 50% + 0px);
}
.footer-slot-in {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 26px;
  font-size: 14px; font-weight: 500; color: var(--black);
}
@media (max-width: 860px) { .footer-slot-in { flex-direction: column; } }

/* ---------- pricing: wat elk product is ---------- */
/* Boven de prijzen stond alleen een kop, zodat je moest raden bij welk product
   ze hoorden. Dezelfde drie regels als in de vergelijking op de homepage. */
.prod-feiten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; margin-top: 30px;
}
/* Op de bandkleur zelf vielen deze drie blokjes weg: een dun lijntje op
   dezelfde grond. Nu staan ze er omgekeerd in, dus op een lichte band zwart
   met witte tekst en op een donkere band wit met zwarte. */
.prod-feit { background: var(--fg); padding: 20px 22px; }
.prod-feit span {
  display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bg); opacity: .72; margin-bottom: 8px;
}
.prod-feit b { font-weight: 500; font-size: 17px; line-height: 1.4; color: var(--bg); }
/* Wat bij elk sessiepakket hoort: een keer, onder de rij kaarten, in twee of
   drie kolommen zodat het geen lijst van zes regels wordt. */
.prijs-incl { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--rule); }
.prijs-incl .tick {
  margin-top: 14px; columns: 3; column-gap: 40px;
}
.prijs-incl .tick li { break-inside: avoid; font-size: 16px; line-height: 24px; }
@media (max-width: 900px) { .prijs-incl .tick { columns: 2; } }
@media (max-width: 620px) { .prijs-incl .tick { columns: 1; } }
.prijs-noot { margin-top: 24px; font-size: 16px; color: var(--fg-2); }
.prijs-noot a { color: var(--accent); }

/* ---------- about us: het team ---------- */
/* Stond er niet op terwijl de foto's al in de repo zaten; de pagina noemde
   alleen Micha's citaat. */
.team-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 26px 20px; margin-top: 38px;
}
.team-card { margin: 0; }
.team-card img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  filter: grayscale(1); transition: filter .2s ease;
}
/* Andersom dan eerst: grijs is de rust, kleur is de beloning van het aanwijzen. */
.team-card:hover img { filter: none; }
.team-card { position: relative; }
.team-card figcaption { margin-top: 12px; }

/* De bio klapt uit bij hover en bij focus. Focus erbij, anders is het met het
   toetsenbord niet te bereiken; daarom staat er ook tabindex op de kaart. */
.team-bio {
  position: absolute; inset: auto 0 0 0; z-index: 5;
  background: var(--black); color: var(--warm-white);
  padding: 18px 18px 20px; max-height: 100%; overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.team-bio p { margin: 0; font-size: 13.5px; line-height: 1.5; }
.team-card.heeft-bio:hover .team-bio,
.team-card.heeft-bio:focus .team-bio,
.team-card.heeft-bio:focus-within .team-bio {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.team-card.heeft-bio { cursor: help; }
.team-card.heeft-bio:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .team-bio { transition: none; } }
.team-card b { display: block; font-weight: 500; font-size: 17px; color: var(--fg); }
.team-card span { display: block; font-size: 14px; color: var(--fg-2); margin-top: 2px; }

/* ---------- overzichten van sessies en sprekers ---------- */
/* Deze klassen komen uit de groene skin en hadden in D8 nog geen opmaak: de
   Wix-dump overschreef deze pagina's altijd, dus het viel niet op. Zonder deze
   regels staat elke kaart op volle breedte met een portret van 440 pixels hoog. */
.session-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 28px 24px; margin-top: 40px;
}
.session-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--tile); border: 1px solid var(--rule);
  transition: border-color .15s ease, transform .15s ease;
}
.session-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.session-card img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block;
  transition: filter .2s ease;
}
/* Kleur, ook bij het aanwijzen: de kleur eruit halen zodra iemand er met de
   muis overheen gaat leest als iets dat uitgaat in plaats van als een
   aanwijzing dat je erop kunt klikken. */
.session-card .body { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.session-card .who {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2);
}
.session-card h3 {
  margin: 0; font-size: 18px; line-height: 1.28; font-weight: 500; color: var(--fg);
}
@media (max-width: 560px) {
  .session-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px 16px; }
  .session-card h3 { font-size: 16px; }
}

/* In een pakketkaart passen drie prijzen nooit op een regel: ze braken af als
   twee plus een en dat oogde rommelig. Onder elkaar, een per regel, leest het
   als drie eenheden van dezelfde prijs. In de bredere prijsstrook op de
   homepage passen ze wel naast elkaar en blijft dat zo. */
.ev-price .fmt-cur {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.ev-price .fmt-cur span { line-height: 1.25; }

/* ---------- wellbeing weekly ---------- */
/* De gescrapete versie plakte spreker en titel aan elkaar tot een vinkjesregel
   ("Zoia Mahjoubi The Art of Self Care...") met een paginavullend portret
   ertussen. Hier staan ze uit elkaar, in een raster. */
.ww-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px; margin-top: 40px; background: var(--rule); border: 1px solid var(--rule);
}
.ww-sess { background: var(--bg); padding: 22px 24px; }
.ww-sess-spk {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 8px;
}
.ww-sess h3 { margin: 0; font-size: 18px; line-height: 1.3; font-weight: 500; }
.ww-sess h3 a { color: var(--fg); text-decoration: none; }
.ww-sess h3 a:hover { color: var(--accent); }

/* Twee prijzen per kaart: de normale jaarprijs en de aanbieding. De normale
   staat doorgestreept, zodat duidelijk is welke nu geldt. */
.ww-cadans { font-size: 16px; color: var(--fg-2); margin: 4px 0 18px; }
.ww-was, .ww-nu { margin-bottom: 14px; }
.ww-was span, .ww-nu span {
  display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 6px;
}
.ww-vol span { font-size: 20px; text-decoration: line-through; opacity: .7; }
.ww-vol span::first-letter { background: none; color: var(--fg-2); padding: 0; }

/* ---------- leesbare regellengte voor lopende tekst ---------- */
/* De juridische en informatieve pagina's zetten alinea's over de volle
   containerbreedte van 900px; dat is te lang om comfortabel te lezen. Rond de
   zeventig tekens per regel leest het beste. */
.prose p, .prose li,
.wx-body p, .wx-body li,
section > .container > p:not(.section-lead):not(.lead):not(.hero-trust),
.block-p { max-width: 68ch; }
.section-lead, .lead { max-width: 62ch; }

/* ============================================================
   Eventpagina's
   Deze veertien klassen komen uit event_template.py en hadden in
   deze stylesheet geen enkele regel. Zonder maatvoering rendert een
   logo van 1000x1000 ook op 1000x1000: de klantenrij werd achttien
   logo's onder elkaar, achttienduizend pixels hoog.
   ============================================================ */

/* ---------- hero ---------- */
.ev-hero .ev-hero-img,
.ev-hero-img {
  max-width: 460px; width: 100%; height: auto;
  display: block; margin-left: auto;
}
.ev-hero-img img { width: 100%; height: auto; display: block; }

/* ---------- klantenlogo's ---------- */
.ev-clients { margin-top: 30px; }
/* Label en logo's op een regel. Zie de toelichting in event_template.py:
   een rij logo's hoort geen hoofdstukkop en geen halve schermhoogte te
   krijgen. */
/* section.ev-band zet 72px verderop in dit bestand; met alleen .ev-logoband
   wint die. Vandaar dezelfde vorm, zodat deze het overneemt. */
section.ev-band.ev-logoband { padding: 24px 0; margin: 0; }
.ev-logoregel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
  /* Zonder eigen breedte kreeg de rij er nul van de container mee en brak hij
     alsnog in drie regels. */
  width: 100%;
}
.ev-logolabel {
  flex: 0 0 auto; font-size: 12px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); white-space: nowrap;
}
.ev-logoregel .ev-logos { flex: 1 1 auto; margin-top: 0; gap: 14px 26px; }

.ev-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 20px 30px; margin-top: 18px;
}
.ev-logos img {
  height: 30px; width: auto; max-width: 150px;
  object-fit: contain; display: block;
  /* De logo's zijn kleurrijk en van elkaar verschillend; op een band
     gedempt houden ze de aandacht bij de tekst. */
  opacity: .82; transition: opacity .15s ease;
}
.ev-logos img:hover { opacity: 1; }
@media (max-width: 640px) { .ev-logos img { height: 26px; max-width: 90px; } }

/* ---------- losse beelden in de tekst ---------- */
.ev-fig { margin: 30px 0; }
.ev-fig img {
  width: 100%; height: auto; display: block;
  max-height: 460px; object-fit: cover;
}
.ev-fig.wide img { max-height: 380px; }
.ev-fig figcaption {
  margin-top: 10px; font-size: 14px; line-height: 1.5; color: var(--fg-2);
}

/* ---------- gekleurde tussenband ---------- */
.ev-band {
  background: var(--tile); padding: 30px 34px; margin: 34px 0;
  border-left: 3px solid var(--accent);
}

/* ---------- het programma: tijdslot naast de sessie ---------- */
.ev-programme { margin-top: 34px; border-top: 1px solid var(--rule); }
.ev-slot {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px;
  padding: 20px 0; border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.ev-slot > time,
.ev-slot > b:first-child {
  font-size: 14px; letter-spacing: .04em; color: var(--accent);
  font-weight: 500;
}
.ev-slot-txt h3 {
  font-size: 20px; line-height: 1.3; font-weight: 500; margin: 0 0 4px;
}
.ev-slot-txt p { font-size: 16px; line-height: 1.55; color: var(--fg-2); margin: 0; }
@media (max-width: 700px) {
  .ev-slot { grid-template-columns: 1fr; gap: 6px; }
}

/* ---------- stappen ---------- */
.ev-steps { margin-top: 40px; }
.ev-step { display: flex; flex-direction: column; }
.ev-step h3 { font-size: 20px; line-height: 1.3; font-weight: 500; margin-bottom: 8px; }
.ev-step p { font-size: 16px; line-height: 1.55; color: var(--fg-2); }

/* ---------- cijfer ---------- */
.ev-score {
  font-size: clamp(38px, 5vw, 62px); font-weight: 500;
  letter-spacing: -.04em; line-height: 1; color: var(--accent);
}

/* ---------- prijzen ---------- */
.ev-prices { margin-top: 40px; align-items: stretch; }

/* ============================================================
   Overgebleven klassen zonder regel
   Deze kwamen uit build.py en leqture.html en hadden geen opmaak.
   Geen ervan is een beeld, dus er rendert niets reusachtig, maar
   zonder regels vallen ze terug op browserstandaarden.
   ============================================================ */

/* De kaartenrij op de awareness-daysoverzichtspagina. */
.ev-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px; margin-top: 36px;
}
.ev-grid .ev-card { display: flex; flex-direction: column; }
.ev-grid .ev-card h3 { font-size: 21px; line-height: 1.25; font-weight: 500; margin-bottom: 8px; }
.ev-grid .ev-card p { font-size: 15px; line-height: 1.5; color: var(--fg-2); }

/* Opsomming met een vetgedrukte aanhef per punt. */
.feature-list { list-style: none; margin: 22px 0 0; padding: 0; }
.feature-list li {
  padding: 14px 0; border-bottom: 1px solid var(--rule);
  font-size: 16px; line-height: 1.55; color: var(--fg-2);
}
.feature-list li:last-child { border-bottom: 0; }
.feature-list strong { color: var(--fg); font-weight: 500; }

/* Kop met een label links en een terzijde rechts. */
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--rule);
}
.panel-head .title { font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.panel-head .meta {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2);
}

/* De prijsregel onder een overzicht. */
.price-line { margin-top: 24px; }
.price-line .amount,
.amount {
  font-size: clamp(20px, 2.2vw, 26px); font-weight: 500;
  letter-spacing: -.03em; line-height: 1.2; color: var(--fg);
}
.price-line p { margin-top: 8px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }

/* Het prijsblok op de homepage. */
.price-main { display: flex; flex-direction: column; gap: 6px; }

/* Het contactformulier. */
.contact-form { display: flex; flex-direction: column; gap: 16px; max-width: 560px; }
.contact-form label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-2); }
.contact-form input, .contact-form textarea, .contact-form select {
  background: #FFFFFF; color: #141414;
  border: 1px solid var(--rule); border-radius: 0;
  padding: 14px 16px; font: inherit; font-size: 17px; width: 100%;
}
.contact-form input:focus-visible,
.contact-form textarea:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.contact-form .hp { position: absolute; left: -9999px; }

/* ---------- de voet is oranje ---------- */
/* Zoals op leqture.com: het hele blok onderaan staat op oranje, niet alleen een
   strook. Donkere tekst haalt daar 7,5:1. De losse slotbalk die ik eerder
   toevoegde is daarmee overbodig; die valt nu samen met de voet zelf. */
footer {
  background: var(--orange) !important;
  color: var(--black) !important;
  padding: 88px 0 0;
}
footer p,
footer .footer-grid p { color: rgba(20, 20, 20, .82); }
footer a,
.footer-links a { color: var(--black); }
/* De hover was warm wit, en dat is op oranje bijna niet te lezen: de regel
   leek te verdwijnen zodra je hem aanwees. Nu blijft de tekst staan en komt er
   een streep onder, zoals overal op de site. */
.footer-links a:hover, footer a:hover {
  color: var(--black); text-decoration: underline; text-underline-offset: 3px;
}
.footer-col-title { color: rgba(20, 20, 20, .66); }
footer svg.wordmark { color: var(--black); }
.footer-grid .payoff { color: var(--black); }

.footer-bottom {
  border-top: 1px solid rgba(20, 20, 20, .22);
  color: rgba(20, 20, 20, .7);
}

/* De aparte slotbalk zat er alleen omdat de voet zwart was. */
.footer-slot { display: none; }

/* Losse prijsregels ("Sessions start at €2,250 · £2,000 · $2,700"): daar staan
   de tekens in doorlopende tekst, dus ::first-letter kan er niet bij. De
   generator zet er een span omheen. */
.cur { color: var(--cur); font-weight: 700; margin-right: .12em; }

/* Oranje vinkjes voor de opsomming met een vetgedrukte aanhef. */
.feature-list li { position: relative; padding-left: 30px; }
.feature-list li::before {
  content: ''; position: absolute; left: 2px; top: 20px;
  width: 11px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

/* De sessierating in de metaregel van een sessiepagina. Het cijfer telt, het
   aantal deelnemers staat er gedempt achter als onderbouwing. */
.meta-rating b { font-weight: 500; }
.meta-rating .meta-n { color: var(--fg-2); font-size: .92em; }

/* De logowall in de hero, in plaats van de zin "Trusted by 150+ companies". */
.hero-logos { margin-top: 26px; }
.hero-logos-lab {
  display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 14px;
}
.hero-logos .logo-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  gap: 18px 26px;
}
.hero-logos .logo-row img {
  height: 30px; width: auto; max-width: 92px; object-fit: contain;
  opacity: .78; transition: opacity .15s ease;
}
.hero-logos .logo-row img:hover { opacity: 1; }
@media (max-width: 640px) { .hero-logos .logo-row img { height: 24px; max-width: 72px; } }

/* ---------- submenus in de navigatie ---------- */
/* Learning Sessions en Learning Events klappen uit naar hun categorieen en
   losse events, zodat je vanaf elke pagina direct naar het juiste overzicht
   kunt. Werkt op hover en op focus, dus ook met het toetsenbord. */
.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-item .sub {
  position: absolute; top: 100%; left: -14px; z-index: 60;
  min-width: 268px; padding: 10px 0;
  background: var(--black); border: 1px solid rgba(246, 242, 239, .16);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
.nav-item:hover .sub,
.nav-item:focus-within .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-item .sub a {
  display: block; padding: 9px 18px; font-size: 15px; line-height: 1.3;
  color: var(--warm-white); white-space: nowrap;
}
.nav-item .sub a:hover,
.nav-item .sub a:focus-visible { background: var(--orange); color: var(--black); }
.nav-item .sub a:first-child {
  font-weight: 500; border-bottom: 1px solid rgba(246, 242, 239, .16);
  margin-bottom: 6px; padding-bottom: 12px;
}
/* Een onzichtbare brug, anders valt het menu dicht tussen knop en lijst. */
.nav-item .sub::before {
  content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
}
@media (max-width: 1100px) { .nav-item .sub { display: none; } }

/* ---------- logostrook onder de hero ---------- */
/* Stond eerst in de linkerkolom van de hero en brak dan over twee regels. Als
   eigen strook over de volle containerbreedte passen alle logo's op een lijn. */
.logo-strip-band { padding: 30px 0 34px; border-bottom: 1px solid var(--rule); }
.logo-strip-lab {
  display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2); margin-bottom: 16px;
}
.logo-strip .logo-row {
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: 0 clamp(14px, 2.4vw, 34px); overflow-x: auto;
  scrollbar-width: none;
}
.logo-strip .logo-row::-webkit-scrollbar { display: none; }
.logo-strip .logo-row img {
  height: 28px; width: auto; max-width: none; object-fit: contain;
  flex: 0 0 auto; opacity: .8; transition: opacity .15s ease;
}
.logo-strip .logo-row img:hover { opacity: 1; }
@media (max-width: 900px) { .logo-strip .logo-row img { height: 22px; } }

/* ---------- shortlist ---------- */
/* Wie een programma samenstelt vergelijkt niet op beeld maar op inhoud. In
   rasterstand blijft de kaart wat hij was; in shortlist-stand klapt hetzelfde
   raster om naar balken onder elkaar: foto links, waar het over gaat in het
   midden, het vinkje rechts. Uitklappen geeft de bio erbij. */

/* De uitnodiging om een shortlist te maken. Stond eerst als een klein grijs
   knopje tussen de chips en werd over het hoofd gezien. Nu een blok dat zegt
   wat je ermee opschiet, met de knop in het oranje ernaast. */
.sl-start {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  margin: 0 0 34px; padding: 22px 26px;
  background: var(--tile); border: 1px solid var(--rule);
  border-left: 3px solid var(--orange);
}
.sl-start-tekst { flex: 1 1 380px; }
.sl-start-kop {
  margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 500;
  color: var(--fg);
}
.sl-start-uitleg {
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2);
  max-width: 62ch;
}
.sl-start-knop { flex: 0 0 auto; }
/* Bezig? Dan is de uitnodiging gedaan en telt alleen de weg terug. */
.sl-start.is-bezig { padding: 14px 26px; }
.sl-start.is-bezig .sl-start-tekst { display: none; }
.sl-start.is-bezig .sl-start-knop {
  background: transparent; border-color: var(--fg-2); color: var(--fg);
  --tail: var(--fg-2);
}
.sl-start.is-bezig .sl-start-knop:hover { background: var(--fg); color: var(--bg); }
@media (max-width: 640px) {
  .sl-start { padding: 18px 20px; }
  .sl-start-knop { width: 100%; text-align: center; }
}

/* De regel en de bio horen bij de balkweergave; in het raster staan ze stil. */
.cat-grid .rij-info,
.cat-grid .rij-uit { display: none; }

.cat-grid.is-rijen { display: block; }
.cat-grid.is-rijen .cat-card {
  position: relative; display: grid;
  grid-template-columns: 84px 1fr 44px;
  align-items: start; gap: 20px;
  padding: 18px 4px; border: 0;
  border-bottom: 1px solid var(--rule);
}
.cat-grid.is-rijen .cat-card:first-child { border-top: 1px solid var(--rule); }
.cat-grid.is-rijen .cat-card:hover { background: var(--tile); }
.cat-grid.is-rijen .cat-thumb {
  width: 84px; height: 84px; margin: 0; overflow: hidden;
}
.cat-grid.is-rijen .cat-thumb img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
}
.cat-grid.is-rijen .cat-body { padding: 0; }
.cat-grid.is-rijen .cat-body h3 { margin: 0 0 4px; font-size: 19px; line-height: 1.3; }
/* De naam stond hier eerst in het oranje. Op warm wit haalt dat 2,2:1, en
   voor een klein kapitaaltje is dat niet te lezen. Nu de gedempte tekstkleur
   van de band, die op licht en op donker meebeweegt. */
.cat-grid.is-rijen .cat-by {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--fg-2);
}
/* Twee regels, en precies twee. Een halve zin is te weinig om op te kiezen, en
   een alinea van vijf regels maakt een lijst van dertig sessies onleesbaar.
   Uitgeklapt valt de begrenzing weg, want dan wil je alles zien. */
.cat-grid.is-rijen .rij-info {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden;
  margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2);
}
.cat-grid.is-rijen .cat-card.is-open .rij-info {
  display: block; -webkit-line-clamp: unset; overflow: visible;
}
.cat-grid.is-rijen .rij-uit { display: none; grid-column: 2 / 3; }
.cat-grid.is-rijen .cat-card.is-open .rij-uit {
  display: block; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.cat-grid.is-rijen .rij-bio {
  margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--fg);
  max-width: 74ch;
}
/* De link in de tekstkleur van de band met een oranje streep eronder. Oranje
   letters halen op warm wit 2,2:1 en dat is voor veertien pixels te weinig;
   als streep werkt dezelfde kleur wel, want die hoeft niet gelezen te worden. */
.cat-grid.is-rijen .rij-meer {
  display: inline-block; font-size: 14px; font-weight: 500; color: var(--fg);
  border-bottom: 2px solid var(--orange); padding-bottom: 1px;
}
.cat-grid.is-rijen .rij-meer:hover { background: var(--orange); color: var(--black); }

/* Het vinkje. Groot genoeg om met een duim te raken, en het hele vlak eromheen
   reageert, want mikken op een klein vierkantje in een lange lijst is werk. */
.sl-vink {
  grid-column: 3 / 4; justify-self: end;
  width: 30px; height: 30px; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--rule); background: transparent;
  color: transparent; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.sl-vink svg { width: 20px; height: 20px; }
.cat-card:hover .sl-vink { border-color: var(--fg-2); }
.sl-vink:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.cat-card.is-gekozen .sl-vink {
  background: var(--orange); border-color: var(--orange); color: #FFFFFF;
}
/* Zwart op oranje viel weg tegen de vulling. Wit en een dikkere lijn maken er
   op afstand een duidelijk vinkje van. */
.cat-card.is-gekozen .sl-vink svg path { stroke-width: 3; }
.cat-card.is-gekozen { background: var(--tile); }
/* In rasterstand hangt het vinkje in de hoek van de thumbnail. */
.cat-grid:not(.is-rijen) .sl-vink {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(20, 20, 20, .55); border-color: rgba(246, 242, 239, .5);
}
.cat-grid:not(.is-rijen) .cat-card { position: relative; }

/* De balk onderaan blijft staan waar je ook scrolt, want de keuze loopt over
   meerdere pagina's en je moet er altijd bij kunnen. */
/* De balk hing onderaan het scherm en werd daar over het hoofd gezien. Nu
   plakt hij vlak boven de bovenste rij in beeld, net onder de kopbalk. Daar
   kijk je toch al, en hij schuift mee met de lijst.

   --sl-top wordt door het script gezet, want de hoogte van de kopbalk
   verschilt per schermbreedte. */
.sl-balk {
  position: sticky; top: var(--sl-top, 92px); z-index: 40;
  margin: 0 0 4px;
  background: var(--black); border: 1px solid rgba(246, 242, 239, .18);
  box-shadow: 0 10px 26px rgba(20, 20, 20, .2);
}
.sl-balk-in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  width: 100%; padding: 12px 20px;
}
.sl-teller { font-size: 15px; color: rgba(246, 242, 239, .78); }
.sl-teller strong { font-size: 19px; color: var(--warm-white); }
.sl-vol-uitleg { display: none; margin-left: 10px; color: var(--orange); }
.sl-balk.is-vol .sl-vol-uitleg { display: inline; }
.sl-acties { display: flex; align-items: center; gap: 12px; }
.sl-balk .btn-outline { border-color: rgba(246, 242, 239, .6); color: var(--warm-white);
                        --tail: rgba(246, 242, 239, .6); }
.sl-balk .btn-outline:hover { background: var(--warm-white); color: var(--black); }
.sl-balk .btn[disabled] { opacity: .4; pointer-events: none; }
/* Er staat nu tekst naast het kruisje, dus dit is geen icoontje meer maar een
   knop met een rand eromheen. */
.sl-sluit {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: 15px; line-height: 1; padding: 9px 14px;
  background: transparent; border: 1px solid rgba(246, 242, 239, .45);
  color: rgba(246, 242, 239, .88); cursor: pointer; white-space: nowrap;
}
.sl-sluit span { font-size: 19px; line-height: 1; }
.sl-sluit:hover { color: var(--black); background: var(--warm-white);
                  border-color: var(--warm-white); }
/* Een uitgeklapte rij mag niet onder de balk verdwijnen als je hem aanklikt. */
.cat-grid.is-rijen .cat-card { scroll-margin-top: calc(var(--sl-top, 92px) + 72px); }
@media (max-width: 720px) {
  .sl-balk-in { padding: 10px 16px; }
  /* De rij met knoppen kreeg wel de volle breedte maar mocht niet afbreken,
     dus "Generate shortlist page" en het kruisje liepen 53px buiten het
     scherm. Nu breken ze af en krimpt de knop mee. */
  .sl-acties { width: 100%; flex-wrap: wrap; }
  .sl-acties .btn { flex: 1 1 140px; min-width: 0; text-align: center; }
  /* Het kruisje was 27 bij 26 pixels, en op een eigen regel maakte het de
     balk 198px hoog: een kwart van het scherm. Nu hoort het bij de teller
     bovenin, en houden de twee knoppen samen een regel. */
  .sl-balk { position: sticky; }
  .sl-balk-in { position: relative; padding-right: 52px; }
  /* Op een telefoon past de tekst er niet naast; daar blijft het kruisje,
     maar dan wel als een vlak van veertig bij veertig met een rand. */
  .sl-sluit {
    position: absolute; top: 6px; right: 6px;
    width: 40px; height: 40px; flex: none; padding: 0;
    display: flex; align-items: center; justify-content: center; gap: 0;
    font-size: 0;
  }
  .sl-sluit span { font-size: 22px; }
  .sl-teller { padding-right: 4px; }
  /* En de knop om een rij uit te klappen. */
  .sl-meer { padding: 8px 0; }
  .cat-grid.is-rijen .cat-card { grid-template-columns: 64px 1fr 34px; gap: 14px; }
  .cat-grid.is-rijen .cat-thumb { width: 64px; height: 64px; }
}

/* Het scherm waarin je je adres invult. */
.sl-modal { position: fixed; inset: 0; z-index: 90;
            display: flex; align-items: center; justify-content: center; padding: 24px; }
.sl-modal-vlak { position: absolute; inset: 0; background: rgba(20, 20, 20, .62); }
.sl-modal-kaart {
  position: relative; z-index: 1; width: 100%; max-width: 620px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  padding: 34px 34px 30px; background: var(--warm-white); color: var(--black);
  border: 1px solid rgba(20, 20, 20, .14);
}
.sl-modal-sluit {
  position: absolute; top: 12px; right: 14px;
  font: inherit; font-size: 28px; line-height: 1; padding: 0 6px;
  background: transparent; border: 0; color: rgba(20, 20, 20, .5); cursor: pointer;
}
.sl-modal-sluit:hover { color: var(--black); }
.sl-modal-kaart .eyebrow { color: var(--orange); }
.sl-modal-kaart h2 { margin: 6px 0 14px; }
.sl-modal-tekst { font-size: 16px; line-height: 1.6; color: rgba(20, 20, 20, .74);
                  max-width: 56ch; }
.sl-modal-lijst {
  margin: 20px 0 24px; padding: 0; list-style: none;
  max-height: 218px; overflow-y: auto;
  border-top: 1px solid rgba(20, 20, 20, .12);
}
.sl-modal-lijst li {
  padding: 9px 2px; font-size: 15px; line-height: 1.4;
  border-bottom: 1px solid rgba(20, 20, 20, .12);
}
.sl-modal-lijst li span { color: rgba(20, 20, 20, .58); }
.sl-modal-lijst li span::before { content: ' — '; }
.sl-form .brandform-label { color: rgba(20, 20, 20, .7); }
.sl-form input {
  flex: 1 1 240px; padding: 13px 16px; font: inherit; border-radius: 0;
  background: #fff; border: 1px solid rgba(20, 20, 20, .28); color: var(--black);
}
.sl-form input:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.sl-fout { margin: 10px 0 0; font-size: 15px; color: #B3261E; }
.sl-klaar h3 { margin: 0 0 8px; font-size: 23px; }
.sl-klaar .btn { margin: 18px 12px 0 0; }
.sl-kopieer {
  font: inherit; font-size: 15px; padding: 0; background: transparent; border: 0;
  color: rgba(20, 20, 20, .66); text-decoration: underline; cursor: pointer;
}
.sl-kopieer:hover { color: var(--black); }

/* De uitleg in de beschikbaarheidsmodal bij een shortlist. */
.av-veel {
  margin: 0 0 18px; padding: 12px 16px; font-size: 15px; line-height: 1.5;
  background: rgba(255, 130, 80, .12); border-left: 3px solid var(--orange);
}

/* De gedeelde shortlistpagina: dezelfde balken, maar zonder vinkjes. Hier is
   de lijst de uitkomst, dus rechts staat een pijl naar de sessie. */
.sp-laden, .sp-fout { font-size: 16px; line-height: 1.6; color: var(--fg-2); }
.rij-pijl { grid-column: 3 / 4; justify-self: end; padding-top: 2px;
            font-size: 19px; color: var(--fg-2); }
.cat-card:hover .rij-pijl { color: var(--orange); }

/* Wie je aan het checken bent, boven in de beschikbaarheidsmodal. Met negen
   sprekers is een rij namen niet te overzien; aan de gezichten zie je in een
   oogopslag of iedereen erbij zit die je bedoelde. */
/* De rubriek links, de gezichten rechts, allebei bovenaan de modal. De
   sluitknop staat absoluut in dezelfde hoek, dus daar houden we ruimte voor. */
.av-kopregel {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px 24px; flex-wrap: wrap; padding-right: 44px;
}
/* display:flex won van het hidden-attribuut, waardoor er een leeg grijs
   vakje in de kop stond zodra er maar een spreker was. */
.av-wie[hidden] { display: none; }
.av-wie {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: flex-end; gap: 10px 14px;
  margin: 0; padding: 10px 14px; max-width: 62%;
  background: rgba(20, 20, 20, .04); border: 1px solid rgba(20, 20, 20, .1);
}
@media (max-width: 780px) {
  .av-kopregel { padding-right: 40px; }
  .av-wie { max-width: 100%; justify-content: flex-start; }
}
.av-wie-kop {
  align-self: center; margin-right: 2px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(20, 20, 20, .55);
}
.av-wie-p { display: flex; flex-direction: column; align-items: center; width: 56px; }
.av-wie-p img, .av-wie-leeg {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  object-position: center top; background: rgba(20, 20, 20, .1);
}
.av-wie-leeg {
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 600; color: rgba(20, 20, 20, .5);
}
.av-wie-n {
  margin-top: 5px; font-size: 10.5px; line-height: 1.25; text-align: center;
  color: rgba(20, 20, 20, .68); word-break: break-word;
}

/* De wisknop in de shortlistbalk. Zonder deze zit je vast aan een keuze die je
   niet meer ziet zodra je terug bent in rasterstand. */
/* De opdracht leest als een zin, de teller als een cijfer; ze staan op
   dezelfde plek en wisselen elkaar af. */
.sl-vraag { font-size: 15px; color: var(--warm-white); }
.sl-stand { display: inline; }

.sl-wis {
  margin-left: 14px; padding: 0; font: inherit; font-size: 14px;
  background: transparent; border: 0; color: rgba(246, 242, 239, .7);
  text-decoration: underline; cursor: pointer;
}
.sl-wis:hover { color: var(--warm-white); }

/* De uitklap op de gedeelde shortlistpagina. */
.cat-grid.is-rijen .cat-card.is-klapbaar { cursor: default; }
.rij-klap {
  grid-column: 3 / 4; justify-self: end; align-self: start;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px; font: inherit; font-size: 13px; cursor: pointer;
  background: transparent; color: var(--fg-2);
  border: 1px solid var(--rule); border-radius: 0;
}
.rij-klap:hover { color: var(--fg); border-color: var(--fg-2); }
.rij-klap-i {
  width: 7px; height: 7px; border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.cat-card.is-open .rij-klap-i { transform: rotate(225deg) translate(-2px, -2px); }
.rij-vol { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--fg);
           max-width: 76ch; }
.cat-grid.is-rijen .cat-card .rij-uit .btn { margin-top: 4px; }

/* Het sessiecijfer in een balk. Naast de titel, want dat is waar je op kiest:
   welk cijfer het hoogst is verschilt per sessie, dus het label zegt erbij of
   het over de inhoud of over de spreker gaat. */
.rij-cijfer {
  display: none; margin: 0 0 8px; font-size: 13px; line-height: 1.4;
  color: var(--fg-2);
}
.cat-grid.is-rijen .rij-cijfer { display: block; }
/* Niet oranje: op de warm witte band haalt dat 2,2:1 en dit is dertien pixels.
   De nadruk komt van het gewicht, niet van de kleur. */
.rij-cijfer b { font-weight: 600; color: var(--fg); }
.rij-cijfer-n { margin-left: 8px; opacity: .72; }

/* De knoppen rechts horen op de eerste regel te blijven. Zonder dit zakte het
   vinkje van een uitgeklapte balk mee naar beneden: de uitklap maakt een
   tweede rij in het raster en het vinkje staat er in de HTML achter, dus die
   werd daar automatisch in geplaatst. */
.cat-grid.is-rijen .sl-vink,
.cat-grid.is-rijen .rij-klap,
.cat-grid.is-rijen .rij-pijl { grid-row: 1; align-self: start; }
.rij-cijfer-nieuw { font-style: italic; opacity: .78; }

/* De partner- en medialogo's dragen zelf een witte achtergrond. Op een zwarte
   band werd elk logo een wit blokje, en het zwarte AP-woordmerk viel helemaal
   weg. De band draagt daarom de kleur die de logo's zelf hebben, zodat er geen
   blokjes meer zijn maar alleen de merken. */
body > section.ev-logoband {
  --bg: #fff;
  --fg: #141414;
  --fg-2: rgba(20, 20, 20, .78);
  --fg-3: rgba(20, 20, 20, .6);
  --rule: rgba(20, 20, 20, .12);
  background: #fff;
  color: #141414;
}

/* ---------- de andere events, als kaarten ---------- */
.ev-kaarten {
  display: grid; gap: 16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.ev-kaart {
  display: block; padding: 20px 22px 18px;
  border: 1px solid var(--rule); background: var(--tile);
  transition: border-color .15s ease, transform .15s ease;
}
.ev-kaart:hover { border-color: var(--accent); transform: translateY(-2px); }
.ev-kaart-datum {
  font-size: 11px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 10px;
}
.ev-kaart h3 {
  font-size: 19px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--fg); margin: 0 0 14px;
}
.ev-kaart-meer { font-size: 14px; color: var(--accent); }

/* ---------- het vaste stramien van een eventpagina ---------- */
/* Zie event_blueprint.py. De opbouw ligt vast: achttien secties in dezelfde
   volgorde als mentalhealthday.com, gevuld met de inhoud van dit event. */

/* De vier manieren waarop mensen buiten de boot vallen, en de drie kaartjes
   over rapportage: kop en een regel eronder. */
.ev-kaartjes { margin-top: 34px; }
.ev-kaartjes .card h3 {
  font-size: 19px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--fg); margin: 0 0 10px;
}
.ev-kaartjes .card p { margin: 0; color: var(--fg-2); }

/* Het antwoord op die vier: een blok dat er los van staat. */
.ev-inclusie {
  margin-top: 30px; padding: 26px 28px;
  border-left: 3px solid var(--accent); background: var(--tile);
}
.ev-inclusie h3 {
  font-size: clamp(20px, 2vw, 25px); line-height: 1.2; letter-spacing: -.02em;
  color: var(--fg); margin: 0 0 10px;
}
.ev-inclusie p { margin: 0; color: var(--fg-2); max-width: 720px; }

/* De vier stappen, genummerd. */
.ev-stappen {
  display: grid; gap: 18px; margin-top: 36px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.ev-stap { padding: 22px 22px 20px; border: 1px solid var(--rule); background: var(--tile); }
.ev-stap-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-bottom: 14px;
  background: var(--accent); color: var(--black);
  font-size: 15px; font-weight: 600;
}
.ev-stap h3 {
  font-size: 18px; line-height: 1.25; letter-spacing: -.01em;
  color: var(--fg); margin: 0 0 8px;
}
.ev-stap p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg-2); }

/* De koppen van de sprekers die op dit event staan. */
/* De sprekers onder de kop. Hoe minder er die dag zijn, hoe groter hun
   portret: vier gezichten in een raster dat op zestien is gezet laat drie
   kwart van de regel leeg. De maat komt uit de bouw mee. */
.ev-koppen {
  display: grid; gap: 22px 18px; margin-top: 34px;
  grid-template-columns: repeat(var(--kopkolommen, 5), 1fr);
}
.ev-kop { margin: 0; }
/* De portretten staan in kleur. Ze stonden grijs met kleur bij het aanwijzen,
   maar dit is de rij waar een bezoeker voor komt en een grijze rij gezichten
   houdt die op afstand. */
.ev-kop img {
  width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top;
  display: block; background: var(--tile);
}
.ev-kop figcaption { margin-top: 10px; }
/* De naam draagt het gezicht, de regel eronder zegt waarover. Zonder dat is
   het een rij gezichten zonder reden om erheen te kijken. */
.ev-kop figcaption b {
  display: block; font-size: 15px; font-weight: 500; line-height: 1.25;
  letter-spacing: -.01em; color: var(--fg);
}
.ev-kop figcaption span {
  display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.35;
  color: var(--fg-3);
}

/* De twaalf kenmerken. */
.ev-kenmerken { margin-top: 36px; }
/* De kop van een kenmerk is de essentie van dat blokje. Op 12 pixels in een
   lichte letter las hij als een labeltje boven de tekst in plaats van als het
   antwoord zelf. */
.ev-kenmerken .card h3 {
  font-size: 17px; font-weight: 700; letter-spacing: .06em;
  line-height: 1.25; text-transform: uppercase;
  color: var(--accent); margin: 0 0 12px;
}
.ev-kenmerken .card p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fg-2); }

/* De regel over IT, alleen. */
.ev-it {
  max-width: 780px; margin: 0 auto; text-align: center;
  font-size: clamp(19px, 2vw, 24px); line-height: 1.35; color: var(--fg);
}

@media (max-width: 720px) {
  .ev-koppen { grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 18px 12px; }
  .ev-kop figcaption b { font-size: 14px; }
  .ev-kop figcaption span { font-size: 12.5px; }
  .ev-inclusie { padding: 20px 20px; }
}

/* ---------- het programma van een event ---------- */
/* Portret, spreker, sessie en tijden op een regel. Stond eerst als losse
   alinea's onder elkaar, met de portretten er willekeurig tussendoor. */
.ev-prog { margin-top: 26px; border-top: 1px solid var(--rule); }
.ev-prog-rij {
  display: grid; grid-template-columns: 56px 1fr auto;
  align-items: center; gap: 18px;
  padding: 14px 0; border-bottom: 1px solid var(--rule);
}
.ev-prog-foto img, .ev-prog-leeg {
  width: 56px; height: 56px; object-fit: cover; object-position: center top;
  display: block; background: var(--tile);
}
.ev-prog-spr {
  font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 3px;
}
.ev-prog-titel {
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.3; letter-spacing: -.01em;
  color: var(--fg);
}
.ev-prog-tijd {
  font-size: 13px; line-height: 1.4; color: var(--fg-3);
  text-align: right; white-space: nowrap;
}
@media (max-width: 720px) {
  .ev-prog-rij { grid-template-columns: 44px 1fr; gap: 14px; }
  .ev-prog-foto img, .ev-prog-leeg { width: 44px; height: 44px; }
  .ev-prog-tijd { grid-column: 2; text-align: left; white-space: normal; }
}

/* ---------- de kop van de vergelijking, buiten de tabel ---------- */
/* Eerst stond dit als eerste rij in de tabel zelf, met een lege cel onder de
   labelkolom ernaast. Daardoor las de essentie van de twee producten als de
   eerste van tien regels om te vergelijken, terwijl je hem juist in een keer
   moet snappen voordat je gaat vergelijken. Nu staat hij los erboven, over de
   volle breedte, en zijn de video's meteen groter. */
.fmt-intro {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px 56px; margin-top: 44px;
}
.fmt-intro b {
  display: block; font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.14;
  letter-spacing: -.03em; color: var(--fg); margin-bottom: 6px;
}
/* Deze regel hoort bij de kop erboven en leest als de tweede helft ervan
   ("60 minute Learning Sessions" / "on stress at work"). In een lichter
   gewicht viel hij terug naar bijschrift; even zwaar als de kop houdt de twee
   regels bij elkaar. */
.fmt-intro .rot { display: block; font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 14px; }
.fmt-uitleg { font-size: 17px; line-height: 27px; color: var(--fg-2); margin: 0 0 24px; }
.fmt-intro .vthumb { max-width: none; }
.fmt-intro .fmt-logos { margin-top: 22px; flex-wrap: wrap; gap: 10px 14px; }
@media (max-width: 860px) { .fmt-intro { grid-template-columns: 1fr; } }

/* De labelkolom stond op de gedempte tekstkleur en viel daarmee weg tegen de
   band waar hij op ligt. */
.fmt-key { color: var(--fg); }

/* De prijsband draagt nu twee producten naast elkaar, elk met zijn eigen
   lijst van wat erin zit. Eerder stond die lijst een keer rechts en las hij
   als het aanbod van alleen het bovenste product. */
.price-strip { grid-template-columns: 1fr 1fr; gap: 56px; }
.price-kolom .price-kop { margin-top: 0; }
.price-strip p { margin-bottom: 22px; }
.price-alles { display: inline-block; margin-top: 40px; }
@media (max-width: 980px) { .price-strip { grid-template-columns: 1fr; gap: 44px; } }

/* De muur van sprekers loopt mee met de tekst ernaast: hij begint bovenaan
   de kolom en de fotostrook is hoog in plaats van breed. */
.hero .spk-mozaiek { align-self: start; margin-top: 0; }

/* Wie een datum kiest wil er soms bij zeggen waar het over moet gaan. */
.av-bericht { display: block; margin-top: 16px; font-size: 12px; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--fg-3); }
.av-bericht textarea {
  display: block; width: 100%; margin-top: 8px; padding: 12px 14px; font: inherit;
  font-size: 16px; text-transform: none; letter-spacing: normal; font-weight: 400;
  color: var(--fg); background: var(--field); border: 1px solid var(--rule);
  border-radius: 0; resize: vertical;
}

/* De tijd staat onder de sessietitel, niet erachteraan geplakt. */
.ev-slot-txt p { margin-bottom: 10px; }
.ev-slot-txt p:last-child { margin-bottom: 0; }
.ev-slot-txt p .w {
  display: block; margin-top: 2px; font-size: 14px; color: var(--fg-3);
}
/* Een kop uit de oude pagina zonder tekst eronder: compact, geen halve
   schermhoogte aan lege band. */
.ev-kop { padding-top: 26px; padding-bottom: 0; }
.ev-kop .section-title { margin: 0; }
/* Een spreker zonder portret in de scrape houdt dezelfde inspringing. */
.ev-slot-plat { grid-template-columns: 1fr; }

/* .ev-band is bedoeld als een klein tussenkaartje binnen een sectie: een
   tegel met een streep ernaast. Op de eventpagina's staat die klasse op de
   section zelf, en dan gooide hij de grond van de band weg terwijl de
   tekstkleur van de band bleef staan. Op een donkere band betekende dat warm
   wit op de lichte paginagrond: de prijzen, de bullets en de citaten waren
   onzichtbaar. Als sectie houdt hij dus gewoon zijn eigen grond. */
section.ev-band {
  background: var(--bg);
  padding: 72px 0;
  margin: 0;
  border-left: 0;
}

/* De beoordeling: het cijfer groot, het aantal enquetes eronder. Zonder deze
   regel plakten ze aan elkaar tot "4.6 - 5Based on 3.000 surveys". */
.ev-score { margin: 18px 0 30px; }
.ev-score b {
  display: block; font-weight: 500; font-size: clamp(30px, 3vw, 44px);
  line-height: 1.1; letter-spacing: -.03em; color: var(--accent);
}
.ev-score span { display: block; margin-top: 6px; font-size: 15px; color: var(--fg-3); }

/* ---------- de beschikbaarheidsmodal op een telefoon ---------- */
@media (max-width: 720px) {
  /* De modal centreerde het vak in een venster met 24px marge, terwijl het vak
     zelf 100vh hoog is. Het liep er dus boven en onder uit, en op iOS is 100vh
     groter dan wat je ziet: het kruisje in de bovenhoek stond daar buiten
     beeld en je kwam het formulier niet meer uit. Vandaar geen marge, geen
     centrering, en dvh waar de browser dat kent. */
  .modal { padding: 0; align-items: stretch; }
  .av-box { width: 100vw; max-width: none; max-height: none; height: 100vh; }
  .av-body { padding: 22px 18px 26px; }
  .av-kopregel { padding-right: 46px; }
  /* Zeven portretten van 34px met naam eronder vulden het halve scherm nog
     voordat de vraag in beeld kwam. Hier alleen de gezichten, klein en op een
     rij, met de naam als tooltip. */
  .av-wie { max-width: 100%; gap: 6px; padding: 8px 10px; }
  .av-wie-p { width: 34px; }
  .av-wie-p img, .av-wie-leeg { width: 30px; height: 30px; }
  .av-wie-n { display: none; }
  .av-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
}
@supports (height: 100dvh) {
  @media (max-width: 720px) { .av-box { height: 100dvh; } }
}

/* ---------- het menu op een smal scherm ---------- */
/* Zie assets/nav.js. Het paneel ligt over de pagina in plaats van in de
   kopbalk: als extra regel in de balk kon het niet afbreken en liep de lijst
   van het scherm af. De twee ingangen met een submenu klappen open op een tik;
   zevenentwintig links tegelijk tonen is geen menu maar een dump. */
.nav-burger, .nav-klap { display: none; }
@media (max-width: 1080px) {
  /* backdrop-filter op de kopbalk maakt daarvan het referentiekader voor alles
     wat position:fixed is. Het paneel werd daardoor niet schermvullend maar
     even hoog als de balk: 47 pixels, met een regel erin. Op een telefoon
     leveren we de vervaging in. */
  .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--black); }

  /* De kopbalk: logo, knop en burger samen op een regel. Zonder deze regels
     rekt het logo over de volle breedte en wordt de knop tot "Speak to hu..."
     samengeknepen onder de burger. */
  .nav .container { flex-wrap: nowrap; align-items: center; gap: 10px; padding: 12px 20px; }
  .nav .brand { flex: 0 1 auto; min-width: 0; gap: 4px; }
  .nav .brand .logo { height: 28px; width: auto; }
  .nav .brand .tag { font-size: 8.5px; letter-spacing: .14em; line-height: 1.4; }
  /* De knop krimpt niet: liever een kleiner logo dan een halve zin. */
  .nav .container > .btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }
  .nav .container > .nav-burger { flex: none; }
  @media (max-width: 500px) {
    .nav .brand .tag { display: none; }
    .nav .brand .logo { height: 24px; }
    .nav .container { gap: 8px; padding: 11px 14px; }
    .nav .container > .btn { font-size: 13px; padding: 8px 10px; }
    .nav .container > .btn::after { right: 10px; }
  }

  .nav-burger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; flex: none; order: 3;
    background: transparent; border: 0; cursor: pointer;
  }
  .nav-burger span {
    display: block; height: 2px; width: 100%; background: var(--warm-white);
    transition: transform .18s ease, opacity .18s ease;
  }
  .nav.menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .nav.menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Het paneel begint onder de kopbalk en vult de rest van het scherm. */
  .nav-links {
    display: none; position: fixed; left: 0; right: 0; bottom: 0;
    top: var(--nav-h, 68px); z-index: 60;
    flex-direction: column; align-items: stretch; gap: 0;
    margin: 0; padding: 6px 20px 40px; overflow-y: auto;
    background: var(--black); border-top: 1px solid rgba(246, 242, 239, .16);
    -webkit-overflow-scrolling: touch;
  }
  .nav.menu-open .nav-links { display: flex; }

  .nav-links > a, .nav-item > a {
    display: block; padding: 15px 2px; font-size: 17px;
    border-bottom: 1px solid rgba(246, 242, 239, .12);
  }
  /* De ingang met een submenu: link links, pijltje rechts. */
  .nav-item {
    display: grid; grid-template-columns: 1fr 44px; align-items: center;
    width: 100%; position: relative;
  }
  .nav-item > a { border-bottom: 0; }
  .nav-klap {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; background: transparent;
    border: 0; color: var(--warm-white); cursor: pointer;
  }
  .nav-klap svg { width: 20px; height: 20px; transition: transform .18s ease; }
  .nav-item.sub-open .nav-klap svg { transform: rotate(180deg); }
  /* De rij eronder loopt over beide kolommen. */
  .nav-item .sub {
    grid-column: 1 / -1; position: static; display: none;
    opacity: 1; visibility: visible; transform: none;
    min-width: 0; padding: 2px 0 12px 14px;
    background: transparent; border: 0;
  }
  .nav-item.sub-open .sub { display: block; }
  .nav-item .sub::before { content: none; }
  .nav-item .sub a {
    padding: 11px 0; font-size: 15px; color: rgba(246, 242, 239, .82);
    white-space: normal;
  }
  .nav-item .sub a:first-child {
    border-bottom: 0; margin-bottom: 0; padding-bottom: 11px; font-weight: 500;
  }
  .nav-item .sub a:hover, .nav-item .sub a:focus-visible {
    background: transparent; color: var(--orange);
  }
  /* De streep onder een ingang met submenu hoort onder het hele blok. */
  .nav-item { border-bottom: 1px solid rgba(246, 242, 239, .12); }
}

/* iOS zoomt de pagina in zodra je een formulierveld aanraakt dat kleiner is
   dan 16px, en zoomt daarna niet vanzelf terug. Dat overkomt je op elk veld
   dat voor het oog prima 14 of 15px kan zijn. Op een telefoon dus altijd 16;
   op een breed scherm blijft alles zoals het was. */
@media (max-width: 900px) {
  input, select, textarea { font-size: 16px; }
}

/* ---------------------------------------------------------------- prijskaarten
   op een eventpagina
   Het aantal pakketten verschilt per event: twee bij Learning Week, vijf bij
   International Women's Day. Een vaste vier-koloms rij liet die vijfde kaart
   alleen onderaan achter. Daarom vullen ze de breedte zelf op. */
.ev-prijsrij {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.ev-prijsrij .ev-price { height: 100%; }
/* De knop staat bij elke kaart op dezelfde hoogte, ook als de ene kaart tien
   kenmerken heeft en de andere geen. */
.ev-prijsrij .ev-price .btn { margin-top: auto; }
.ev-prijsrij .ev-price .tick { margin-bottom: 18px; }
.ev-price-alt {
  margin-top: 6px; font-size: 15px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* Een knop midden in een sectie plakte tegen de alinea erboven. */
.ev-cta { margin-top: 30px; }
/* De slotregel onder een rij kaarten hoort niet tegen de kaarten aan. */
.ev-slotregel { margin-top: 26px; }
/* Opsommingen op een eventpagina liepen tot de rechterrand van de pagina; een
   regel van honderdvijftig tekens leest niet meer als een opsomming. */
.ev-hero ~ section .lead-ticks li { max-width: 74ch; }
/* Een programmaregel zonder portret liet een grijs vierkant achter. */
.ev-prog-leeg { background: transparent; }

/* "From € 2,250" begint niet met een valutateken. Het eerste teken oranje en
   vet zetten maakte daar een losse F van. */
.fmt-cur-tekst span::first-letter,
.ev-price .fmt-cur-tekst span::first-letter {
  color: inherit; font-weight: inherit; margin-right: 0;
}

/* Sinds elk pakket de gedeelde kenmerken draagt, staan er zeven tot tien
   regels in een kolom van nog geen tweehonderd pixels. Iets minder inspringen
   en iets kleiner scheelt daar een regel of drie per kenmerk. */
.ev-prijsrij .card { padding: 26px 22px; }
.ev-prijsrij .ev-price .tick li { font-size: 15px; line-height: 22px; padding-left: 24px; }
.ev-prijsrij .ev-price .tick li::before { top: 8px; }
.ev-prijsrij .ev-price .tick { display: grid; gap: 9px; }

/* ------------------------------------------------------------ het woordmerk
   Er stond nergens een maat voor het logo in de kopbalk, alleen binnen de
   mobiele blokken. Op een breed scherm viel de balk dus terug op de eigen maat
   van het bestand, 580 bij 120 pixels, en dan is het woordmerk een halve
   schermbreedte en duwt het het menu over de knop heen. De regel eronder telt
   mee in de hoogte van het merkblok, dus de twee delen rechts zakken een halve
   regel om op het woordmerk uit te lijnen, niet op het blok als geheel. */
.nav .brand .logo { height: 40px; width: auto; display: block; }
/* Deze regel staat na de mobiele blokken hierboven en won het daarvan: op een
   telefoon was het woordmerk veertig hoog en honderdvijftig breed, en dan is
   de kopbalk het logo met een knop ernaast geperst. De maten voor een smal
   scherm horen dus ook hier te staan, na de regel die ze anders overschrijft. */
@media (max-width: 1080px) {
  .nav .brand .logo { height: 28px; }
  .nav .container > .nav-links, .nav .container > .btn { margin-top: 0; }
}
@media (max-width: 500px) { .nav .brand .logo { height: 22px; } }

/* De partner- en mediaregels staan nu in een band. Twee regels onder elkaar,
   met de labels links op dezelfde kolom zodat de logo's uitlijnen. */
section.ev-logoband { padding: 26px 0; margin: 0; }
section.ev-logoband .ev-logoregel + .ev-logoregel { margin-top: 18px; }
section.ev-logoband .ev-logolabel { color: var(--fg-3); min-width: 268px; }
/* Op een witte grond hoeven de logo's niet gedempt: ze staan er zoals ze zijn. */
section.ev-logoband .ev-logos img { opacity: 1; }
@media (max-width: 760px) {
  section.ev-logoband .ev-logolabel { min-width: 0; }
}

/* Het label van een rij, boven het blokje in beide kolommen. */
.fmt-lab {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg);
}
.fmt-head .fmt-lab { display: none; }
@media (max-width: 900px) {
  /* Het label van kolom b wordt verborgen; zie het blok bij .fmt-row. */
  .fmt-lab { margin-bottom: 6px; }
}

/* De knoppen onder de sprekerskaarten stonden niet op een lijn: de ene kaart
   draagt "Recently added" op een regel en de andere "Speaker rating 4.6/5 from
   60 participants" op twee, en dan zakt de knop mee. De kaart is nu een kolom
   die de volle hoogte van zijn rij vult, met de knop onderaan. */
.spk-rail, .spk-row5 { align-items: stretch; }
.spk-card { display: flex; flex-direction: column; height: 100%; }
.spk-card .spk-check { margin-top: auto; align-self: flex-start; }
/* De regel eronder hoort bij de knop en blijft er dus tegenaan staan. */
.spk-card .spk-more { margin-top: 16px; }

/* ------------------------------------------------- de branded pagina, open
   Op elke eventpagina staat dezelfde module: het venster staat al open met de
   pagina van dit event erin, en de bezoeker draait er twee dingen aan. Eerder
   was dit een formulier dat een nieuw tabblad opende, en dan moest je eerst
   iets invullen voordat je zag waar het over ging. */
.dm-bediening {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 40px; margin-top: 34px;
}
/* Het was in twee genummerde stappen: eerst het event kiezen, dan je adres.
   Dat is een stap te veel - de pagina waar je op staat weet zelf al om welk
   event het gaat. Links vul je je adres in, rechts stap je daarna door de
   andere dagen heen met je merk er al op. */
.dm-vak { min-width: 0; }
.dm-vraag {
  display: block; margin-bottom: 14px;
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.3; color: var(--fg);
}
.dm-events { display: flex; flex-wrap: wrap; gap: 8px; }
.dm-ev {
  padding: 7px 12px; font: inherit; font-size: 14px; line-height: 1.2;
  color: var(--fg-2); background: transparent;
  border: 1px solid var(--rule); cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.dm-ev:hover { border-color: var(--orange); color: var(--fg); }
.dm-ev.is-aan {
  background: var(--orange); border-color: var(--orange); color: var(--black);
}
.dm-form { margin-top: 0; max-width: 480px; }
.dm-form .brandform-note { font-size: 14px; }

/* Het venster: een browservenster om de pagina heen, zodat meteen duidelijk is
   dat dit een echte pagina is en geen plaatje. */
/* Het venster moet er als een venster uitzien: zonder duidelijke rand loopt de
   voorbeeldpagina over in onze eigen pagina en zie je niet waar de een ophoudt
   en de ander begint. Vandaar een dikke rand rondom, een echte titelbalk en
   een schaduw eronder. */
.dm-venster {
  margin-top: 34px; border: 3px solid var(--fg);
  border-radius: 10px; background: var(--tile); overflow: hidden;
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .55);
}
/* De balk van het venster heeft een eigen, vaste kleur en volgt niet de tokens
   van de sectie eromheen. Die tokens draaien om per skin en per band: op de ene
   pagina werd de balk licht en stond de tekst die ik erin had gezet in wit op
   wit. Een adresbalk is donker, waar hij ook staat. */
.dm-balk {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 16px; border-bottom: 3px solid #1B1B1B;
  background: #1B1B1B; color: #F6F2EF;
}
.dm-balk .dm-url {
  flex: 1 1 auto; padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: inherit;
}
.dm-stippen i { background: rgba(255, 255, 255, .45); }
.dm-stippen { display: flex; gap: 6px; }
.dm-stippen i {
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(246, 242, 239, .32); display: block;
}
.dm-url {
  font-size: 13px; letter-spacing: .01em; color: rgba(246, 242, 239, .8);
  font-variant-numeric: tabular-nums;
}
/* De hoogte komt van de inhoud: eventdemo.js meet de pagina in het venster en
   zet hem hier neer, zodat er geen schuifbalk in het venster zit. Tot die meting
   binnen is houdt hij deze hoogte aan, anders springt de pagina. */
/* Het venster toont de pagina op ware breedte, alleen kleiner getekend. De
   hoogte van dit vak komt uit eventdemo.js: die weet hoe hoog de pagina is en
   met welke factor hij is verkleind. */
.dm-scherm { position: relative; overflow: hidden; height: 760px; background: #fff; }
.dm-frame {
  display: block; width: 1280px; height: 760px; border: 0; background: #fff;
}
@media (max-width: 900px) {
  .dm-bediening { grid-template-columns: 1fr; gap: 24px; }
  .dm-scherm { height: 520px; }
}
@media (max-width: 620px) {
  .dm-scherm { height: 440px; }
  .dm-ev { font-size: 13px; padding: 6px 10px; }
}

/* ------------------------------------------------------- het kruimelpad links
   Een eventpagina is lang. Dit staat vast aan de linkerkant en laat zien waar
   je bent en wat er nog komt. Alleen op een scherm dat er ruimte voor heeft;
   smaller loopt hij over de tekst heen en dan is het hinder in plaats van
   houvast. */
.ev-pad { display: none; }
/* Stond op 1400px, en dat is te vroeg. De container is 1360 breed, dus op een
   laptop van 1440 blijft er veertig pixels marge over en lag het kruimelpad
   met zijn honderdvijftig pixels dwars over de kop en de tekst. Vandaar 1720:
   dan is de marge honderdtachtig en past hij ernaast in plaats van erover. */
@media (min-width: 1720px) {
  /* Hij zweeft over de pagina heen, dus onder hem wisselt de grond van licht
     naar donker. Met alleen een tekstkleur viel de helft weg op de rand tussen
     twee secties; daarom draagt hij zijn eigen grond mee. */
  .ev-pad {
    display: grid; gap: 2px; position: fixed; z-index: 20;
    left: 20px; top: 50%; transform: translateY(-50%);
    padding: 14px 16px; background: var(--bg);
    border: 1px solid var(--rule);
  }
  .ev-pad a {
    display: flex; align-items: center; gap: 10px;
    padding: 5px 0; color: var(--fg-3); font-size: 13px; line-height: 1.2;
    text-decoration: none; transition: color .15s ease;
  }
  .ev-pad-stip {
    width: 7px; height: 7px; flex: 0 0 auto;
    border: 1px solid var(--fg-3); border-radius: 50%;
    transition: background .15s ease, border-color .15s ease;
  }
  .ev-pad a:hover { color: var(--fg); }
  .ev-pad a:hover .ev-pad-stip { border-color: var(--fg); }
  .ev-pad a.is-hier { color: var(--accent); }
  .ev-pad a.is-hier .ev-pad-stip {
    background: var(--accent); border-color: var(--accent);
  }
}

/* ------------------------------------------- de experts, rechts in de hero
   Ze stonden onder de hero, achter de vouw. Dit is waar een bezoeker voor
   komt, dus staan ze nu naast de tekst. De video die hier stond is weg: zestien
   gezichten zeggen meer dan een showreel. Het aantal kolommen komt uit de
   bouw en volgt het aantal experts, zodat het blok even hoog blijft en dus
   past, of het er nu twee zijn of zestien. */
.ev-hero-koppen { min-width: 0; align-self: center; }
/* "Meet your experts" is de kop boven het blok waar een bezoeker voor komt, en
   stond als labeltje van twaalf pixels naast een kop van zestig. */
.ev-koppen-lab {
  display: block; margin-bottom: 20px;
  font-size: clamp(26px, 2.6vw, 34px); font-weight: 400;
  letter-spacing: -.02em; line-height: 1.15; text-transform: none;
  color: var(--fg);
}
.ev-koppen-hero { margin-top: 0; gap: 12px 10px; }
/* Onder elk portret staat de naam en waar die spreker het over heeft. Ik had
   die tweede regel bij drie kolommen of meer verborgen om het rustig te houden,
   maar dan is het een rij gezichten zonder onderwerp - en juist de sessie is
   waar iemand voor komt. Hij staat er nu altijd, kleiner naarmate er meer
   experts naast elkaar staan. */
.ev-koppen-hero figcaption b { font-size: 15px; }
.ev-koppen-hero figcaption span { display: block; }
.ev-koppen-hero[style*="--kopkolommen:2"] figcaption b { font-size: 18px; }
.ev-koppen-hero[style*="--kopkolommen:2"] figcaption span { font-size: 15px; }
.ev-koppen-hero[style*="--kopkolommen:4"] figcaption b { font-size: 13px; }
.ev-koppen-hero[style*="--kopkolommen:4"] figcaption span { font-size: 12px; }
.ev-koppen-hero[style*="--kopkolommen:5"] figcaption b { font-size: 12.5px; }
.ev-koppen-hero[style*="--kopkolommen:5"] figcaption span { font-size: 11.5px; }
@media (max-width: 900px) {
  .ev-koppen-hero { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .ev-koppen-hero figcaption b { font-size: 12.5px; }
}

/* "branded <naam van het event>" hoort bij elkaar en mag nooit over twee
   regels breken; het is de kern van de zin. Hij krijgt daarom een eigen maat
   en breekt niet af - bij een lange eventnaam krimpt de letter mee in plaats
   van dat de regel omvalt. */
.dm-eventkop {
  white-space: nowrap; font-size: 1.08em; font-weight: 500;
}
@media (max-width: 900px) {
  .dm-eventkop { font-size: .96em; }
}
@media (max-width: 620px) {
  /* Op een telefoon past hij echt niet meer naast de rest; dan mag hij op zijn
     eigen regel. Hij bleef hier ook nowrap, en daar liep het mis: "branded
     International Women's Day event" is dan 450px breed in een kolom van 327,
     en de hele pagina schoof 146px opzij. Een bezoeker die zijwaarts kan
     scrollen denkt dat de pagina stuk is.
     Nu breekt de zin gewoon af; alleen de naam van het event blijft bij
     elkaar, want dat is de kern. */
  .dm-eventkop { display: block; font-size: 1em; white-space: normal; }
  .dm-eventkop [data-demo-eventnaam] { white-space: nowrap; }
}
@media (max-width: 400px) {
  /* Een lange eventnaam past op de smalste telefoons ook los niet meer. Dan
     gaat afbreken voor bij elkaar houden: liever twee regels dan een pagina
     die opzij schuift. */
  .dm-eventkop [data-demo-eventnaam] { white-space: normal; }
}

/* Wat lucht in de hero: kop, cijfer, tekst en knoppen stonden dicht op elkaar
   en met de experts ernaast werd het er boven te druk. */
.ev-hero .container { gap: clamp(40px, 5vw, 88px); }
.ev-hero .h1-claim { margin-bottom: 8px; }
.ev-hero .lead { margin-top: 26px; }
.ev-hero .hero-cta { margin-top: 38px; }
.ev-hero-koppen { padding-top: 6px; }
.ev-koppen-hero { gap: 20px 16px; }

/* Het venster is zo hoog als de pagina erin, en dan zie je tijdens het
   scrollen alleen nog maar die pagina: de rand staat honderden pixels boven
   en onder je. De titelbalk blijft daarom plakken onder onze eigen kopbalk,
   zodat je onderweg blijft zien dat je door een voorbeeld scrollt en niet door
   onze site. De zijranden lopen mee als twee duidelijke lijnen. */
.dm-venster { position: relative; border-color: #1B1B1B; }
/* De balk plakte mee tijdens het scrollen, zodat je bleef zien dat je door een
   voorbeeld keek. Dat leverde twee keer een kapot beeld op: de kopbalk van de
   pagina in het venster kwam erboven te staan, en het adres bleef als los
   pilletje over de pagina zweven. De balk staat daarom weer gewoon bovenaan het
   venster. Wat je onderweg vasthoudt zijn de randen aan weerszijden en de
   naamplaat hieronder. */
.dm-venster::after {
  content: "Preview"; position: absolute; top: 0; right: 0; z-index: 4;
  padding: 6px 14px; background: #1B1B1B; color: #F6F2EF;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none;
}

/* --------------------------------------------- het venster met de uitleg ernaast
   De voorbeeldpagina staat kleiner, en naast hem staat een vak met de uitleg
   van waar je op dat moment naar kijkt. De bolletjes stonden eerder over de
   pagina heen en dekten daarmee af waar ze naar wijzen. */
.dm-naast {
  display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr);
  gap: 24px; align-items: start; margin-top: 34px;
}
.dm-naast .dm-venster { margin-top: 0; }
.dm-uitleg { position: sticky; top: calc(var(--nav-h, 118px) + 26px); }
/* Bovenin de kolom staat het invulveld en het blijft daar staan: dat is wat je
   hier kunt doen. Eronder lopen de regels mee met waar je bent. Het veld stond
   in de balk van het venster, waar het als een adresbalk las in plaats van als
   een uitnodiging.
   De regels zelf liggen op elkaar; er is er steeds een zichtbaar, zodat de
   pagina niet verspringt als de ene langer is dan de andere. */
.dm-uitleg { display: block; }
.dm-kolomform {
  margin: 0 0 26px; padding: 20px; background: #1B1B1B; color: #F6F2EF;
  border-radius: 12px;
}
.dm-kolomlabel {
  display: block; margin-bottom: 12px;
  font-size: 15px; font-weight: 500; line-height: 1.35; color: #F6F2EF;
}
.dm-kolomform .brandform-row { display: grid; gap: 8px; }
.dm-kolomform input {
  width: 100%; padding: 11px 13px; font-size: 15px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
}
.dm-kolomform input::placeholder { color: rgba(255, 255, 255, .62); }
.dm-kolomform input:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
}
.dm-kolomform .btn { width: 100%; justify-content: center; }
.dm-kolomform .brandform-fout { margin: 10px 0 0; font-size: 13px; }
.ev-demo.is-eigen .dm-kolomform { display: none; }
.dm-punten { display: grid; min-height: 260px; }
.dm-punt {
  grid-area: 1 / 1; margin: 0; align-self: center;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.35; letter-spacing: -.015em;
  color: var(--fg);
  opacity: 0; transform: translateY(10px); pointer-events: none;
  /* De uitgaande regel verdwijnt sneller dan de nieuwe komt, anders staan er
     even twee half over elkaar heen. */
  transition: opacity .18s ease, transform .18s ease;
}
.dm-punt.is-aan { transition: opacity .42s ease .1s, transform .42s ease .1s; }
.dm-punt.is-aan { opacity: 1; transform: none; }
.dm-punt::before {
  content: ""; display: block; width: 34px; height: 3px; margin-bottom: 18px;
  background: var(--orange);
}
@media (max-width: 1100px) {
  .dm-naast { grid-template-columns: 1fr; }
  .dm-uitleg { position: static; }
  .dm-uitleg-vak { min-height: 0; }
}

/* De uitnodiging in de balk boven de pagina: zolang er nog geen merk is, is dit
   wat je hier kunt doen. Zodra het merk er staat is het adres het onderwerp en
   verdwijnt de regel. */
/* In de balk staat een ding tegelijk. Zolang er nog geen merk is, is dat wat je
   hier kunt doen; daarna is het adres van je eigen pagina het onderwerp. Ze
   stonden allebei tegelijk in de balk en liepen daar over elkaar heen. */
.dm-doe {
  flex: 1 1 auto; min-width: 0;
  font-size: 13px; line-height: 1.3; color: rgba(255, 255, 255, .82);
}
.ev-demo.is-eigen .dm-doe { display: none; }
.ev-demo:not(.is-eigen) .dm-balk .dm-url { display: none; }
.dm-balk .dm-url { flex: 0 1 auto; }
.ev-demo .container { position: relative; }
/* Het boogje van "In five seconds." naar het invulveld. De belofte staat links
   bovenin, het veld waarmee je hem inlost rechts naast de pagina; de pijl
   verbindt ze. Hij ligt over de sectie heen en vangt geen muis. */
.dm-boog {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: visible; z-index: 3;
  transition: opacity .25s ease;
}
.dm-boog path { fill: none; stroke: var(--orange); stroke-width: 2.2;
  stroke-linecap: round; }
.dm-boog .dm-boog-punt { fill: var(--orange); stroke: none; }
/* Hij tekent zichzelf zodra de sectie in beeld komt. */
.dm-boog .dm-boog-lijn {
  stroke-dasharray: var(--booglengte, 600); stroke-dashoffset: var(--booglengte, 600);
}
.ev-demo.is-boog .dm-boog .dm-boog-lijn {
  transition: stroke-dashoffset 1.1s cubic-bezier(.22, .61, .36, 1);
  stroke-dashoffset: 0;
}
.ev-demo.is-boog .dm-boog .dm-boog-punt {
  animation: boogpunt .3s ease .95s both;
}
@keyframes boogpunt { from { opacity: 0; } to { opacity: 1; } }
.dm-boog .dm-boog-punt { opacity: 0; }
/* Zodra het merk erin staat is het veld weg en wijst de pijl nergens meer
   heen. */
.ev-demo.is-eigen .dm-boog { display: none; }
@media (prefers-reduced-motion: reduce) {
  .ev-demo.is-boog .dm-boog .dm-boog-lijn { transition: none; }
  .ev-demo.is-boog .dm-boog .dm-boog-punt { animation: none; opacity: 1; }
}
@media (max-width: 1100px) { .dm-boog { display: none; } }

.dm-naast { position: relative; }
/* Het lijntje van het i-tje naar het onderdeel staat uit: het tekende wel, maar
   wees niet bij elke aantekening naar de goede plek, en een lijn die ergens
   anders heen wijst is erger dan geen lijn. Zie eventdemo.js. */
.dm-lijn { display: none; }
@media (max-width: 1100px) {
  .dm-doe { display: none; }
}

/* --------------------------------------------------- de talen, met hun vlag
   Het getal 24 moet je geloven; de lijst laat je zelf zien of jouw taal erbij
   zit. Links de kop, rechts het raster - zoals op mentalhealthday.com. */
.ev-talen {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 44px; align-items: start;
}
.ev-talen-kop .section-title { margin-top: 0; }
.ev-talen-dekking {
  display: inline-flex; align-items: center; gap: 14px; margin-top: 28px;
  padding: 12px 18px; background: var(--tile); border: 1px solid var(--rule);
  font-size: 15px; color: var(--fg);
}
.ev-talen-dekking span {
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-3);
}
.ev-talenlijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); border-width: 1px 0 0 1px;
}
.ev-talenlijst li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; font-size: 15px; line-height: 1.2; color: var(--fg);
  border: 1px solid var(--rule); border-width: 0 1px 1px 0;
}
.ev-vlag { font-size: 19px; line-height: 1; }
@media (max-width: 1000px) {
  .ev-talen { grid-template-columns: 1fr; gap: 30px; }
  .ev-talenlijst { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  .ev-talenlijst { grid-template-columns: repeat(2, 1fr); }
  .ev-talenlijst li { padding: 11px 12px; font-size: 14px; gap: 9px; }
}

/* Het invulveld staat in de balk van het venster zelf. Het stond erboven als
   los blok, en dan is het een formulier op onze pagina; hier is het de knop
   waarmee je het venster eronder van jou maakt. */
.dm-balk { flex-wrap: wrap; row-gap: 10px; }
.dm-balkform {
  flex: 1 1 340px; min-width: 0; margin: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.dm-balklabel {
  flex: 0 0 auto; font-size: 13px; font-weight: 500; line-height: 1.3;
  color: #F6F2EF; margin: 0;
}
.dm-balkform .brandform-row { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.dm-balkform input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-size: 14px;
  background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
}
.dm-balkform input:focus-visible {
  outline: 2px solid var(--orange); outline-offset: 1px;
  background: rgba(255, 255, 255, .2);
}
.dm-balkform input::placeholder { color: rgba(255, 255, 255, .62); }
.dm-balkform .btn { flex: 0 0 auto; padding: 8px 14px; font-size: 14px; }
.dm-balkform .btn::after { display: none; }
.dm-balkform .brandform-fout { flex: 1 1 100%; font-size: 13px; margin: 0; }
.ev-demo.is-eigen .dm-balkform { display: none; }
.ev-demo:not(.is-eigen) .dm-balk .dm-url { display: none; }
@media (max-width: 760px) {
  .dm-balklabel { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- de wereldkaart
   Het programma loopt van vroeg tot laat om een reden, en die reden zie je pas
   als je hem op een kaart zet: een collega in San Francisco en een in Shanghai
   kijken allebei op een normaal moment van hun dag. */
.wk { margin-top: 38px; }
.wk-kaart { width: 100%; height: auto; display: block; }
.wk-land circle { fill: var(--fg-3); opacity: .4; }
.wk-ring {
  fill: none; stroke: var(--accent); stroke-width: 1.6; opacity: .9;
  transform-box: fill-box; transform-origin: center;
  animation: wk-puls 3.2s ease-out infinite;
}
.wk-stad:nth-child(2n) .wk-ring { animation-delay: .6s; }
.wk-stad:nth-child(3n) .wk-ring { animation-delay: 1.2s; }
.wk-punt { fill: var(--accent); }
@keyframes wk-puls {
  0%, 70%, 100% { opacity: .9; transform: scale(1); }
  35% { opacity: .25; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) { .wk-ring { animation: none; } }
/* Een rij steden, niet drie. Zes plekken van San Francisco tot Sydney zeggen
   genoeg; dertien werd een muur kaartjes onder de kaart. */
.wk-lijst {
  list-style: none; margin: 28px 0 0; padding: 0;
  display: grid; gap: 12px; grid-template-columns: repeat(6, 1fr);
}
.wk-lijst li {
  display: grid; gap: 6px; align-content: start; padding: 15px 16px;
  background: var(--tile); border: 1px solid var(--rule);
  cursor: default; transition: border-color .15s ease, background .15s ease;
}
.wk-lijst li.is-aan { border-color: var(--accent); background: var(--bg); }
.wk-stad-n { font-size: 15px; font-weight: 500; color: var(--fg); }
.wk-stad-a { font-size: 12.5px; line-height: 1.35; color: var(--fg-3); }
/* De tijden zelf: pas dan zie je welke sessies het zijn en niet alleen hoeveel
   het er zijn. */
/* Wat de rij getallen eronder is. Zonder dit kopje stonden er acht losse
   tijden zonder te zeggen van welke klok ze zijn. */
.wk-uren-lab {
  display: block; margin-top: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fg-3);
}
.wk-uren { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 4px; }
.wk-uren span {
  padding: 3px 7px; font-size: 12px; line-height: 1.2;
  font-variant-numeric: tabular-nums;
  color: var(--accent); border: 1px solid var(--rule);
}
.wk-lijst li.is-aan .wk-uren span { border-color: var(--accent); }
/* De tijdzones liggen als onzichtbare banden over de kaart. Ga je er met de
   muis overheen, dan licht de band op en komt de stad in die zone naar voren.
   Zonder die banden is een kaart met zes stippen een plaatje; met de banden kun
   je er je eigen kantoor in aanwijzen. */
.wk-zones .wk-zone {
  fill: var(--accent); opacity: 0; cursor: crosshair;
  transition: opacity .16s ease;
}
.wk-zones .wk-zone:hover { opacity: .07; }
.wk-zones .wk-zone.is-aan { opacity: .13; }
/* Wijs je een stad aan, dan zakt de rest van de kaart weg. */
.wk-naam {
  fill: var(--fg); font-size: 13px; text-anchor: middle;
  opacity: 0; transition: opacity .18s ease;
}
.wk-stad.is-aan .wk-naam { opacity: 1; }
.wk.is-gericht .wk-land circle { opacity: .18; }
.wk.is-gericht .wk-stad { opacity: .25; }
.wk.is-gericht .wk-stad.is-aan { opacity: 1; }
.wk-stad { transition: opacity .18s ease; }
@media (max-width: 1000px) {
  .wk-lijst { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 620px) {
  .wk-lijst { grid-template-columns: repeat(2, 1fr); }
}


/* ------------------------------------- sprekers per onderwerp (de hubs)
   Een rij experts met portret, cijfer en hun sessies eronder. Drie op een rij
   op een breed scherm, want met vier worden de portretten postzegels. */
.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 28px 26px; margin-top: 34px;
}
.hub-spreker { display: grid; grid-template-columns: 96px 1fr; gap: 16px; }
.hub-portret { display: block; }
.hub-portret img {
  width: 96px; height: 96px; object-fit: cover; object-position: top center;
  border-radius: 4px; display: block;
}
.hub-tekst h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.hub-tekst h3 a { color: inherit; text-decoration: none; }
.hub-tekst h3 a:hover { text-decoration: underline; }
.hub-cijfer {
  margin: 4px 0 0; font-size: 14px; color: var(--fg-2);
}
.hub-cijfer span { color: var(--fg-3); }
.hub-sessies {
  list-style: none; margin: 10px 0 0; padding: 0;
  font-size: 14px; line-height: 1.45;
}
.hub-sessies li { margin-bottom: 4px; }
.hub-sessies a { color: var(--fg-2); }
@media (max-width: 600px) {
  .hub-spreker { grid-template-columns: 72px 1fr; gap: 12px; }
  .hub-portret img { width: 72px; height: 72px; }
}


/* Wat voor sessie het is: workshop, masterclass, lunch and learn. Een regel
   onder de kop, want dat is waar een koper naar zoekt en waar hij over
   twijfelt. */
.ses-vorm {
  margin: 0; max-width: 720px;
  font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; color: var(--fg-2);
  border-left: 3px solid var(--orange); padding-left: 18px;
}


/* ------------------------------------------- programmapagina's (de trajecten)
   Zes stappen onder elkaar, genummerd, met per stap de sessie die we
   voorstellen. De nummers dragen de volgorde: dit is een traject en geen
   lijstje. */
.pg-lijst { list-style: none; margin: 34px 0 0; padding: 0; counter-reset: stap; }
.pg-stap {
  display: grid; grid-template-columns: 56px 1fr; gap: 20px;
  padding: 26px 0; border-top: 1px solid var(--rule);
}
.pg-stap:last-child { border-bottom: 1px solid var(--rule); }
.pg-nr {
  font-size: 26px; line-height: 1; color: var(--orange); font-weight: 600;
  padding-top: 4px;
}
.pg-body h3 { margin: 0 0 6px; font-size: 21px; line-height: 1.25; }
.pg-waarom { margin: 0 0 16px; max-width: 640px; color: var(--fg-2); }
.pg-sessie {
  display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
  text-decoration: none; color: inherit;
  border: 1px solid var(--rule); border-radius: 6px; padding: 12px 16px 12px 12px;
  max-width: 640px;
}
.pg-sessie:hover { border-color: var(--orange); }
.pg-sessie img {
  width: 64px; height: 64px; object-fit: cover; object-position: top center;
  border-radius: 4px; display: block;
}
/* Titel en spreker horen in een cel: als losse kinderen vallen ze in het
   rooster elk in een eigen kolom en breekt de naam op vijf regels. */
.pg-sessie-tekst { min-width: 0; }
.pg-titel { display: block; font-size: 17px; line-height: 1.3; }
.pg-spr { display: block; margin-top: 4px; font-size: 14px; color: var(--fg-3); }
.pg-cijfer { color: var(--fg-3); }
@media (max-width: 600px) {
  .pg-stap { grid-template-columns: 36px 1fr; gap: 12px; }
  .pg-nr { font-size: 20px; }
  .pg-sessie { grid-template-columns: 48px 1fr; }
  .pg-sessie img { width: 48px; height: 48px; }
}


/* ----------------------------------------------- de kalender van awareness days
   Een tabel per maand: wanneer het valt, wat het is, en waar je het kunt
   draaien. Op een smal scherm scrollt hij binnen zijn eigen kader in plaats van
   de pagina breed te maken. */
.kal-wrap { margin-top: 30px; overflow-x: auto; }
.kal { width: 100%; border-collapse: collapse; font-size: 16px; }
.kal th, .kal td { text-align: left; vertical-align: top; padding: 16px 18px 16px 0; }
.kal-maand th {
  padding-top: 30px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--orange); border-bottom: 1px solid var(--rule);
}
.kal tr + tr td { border-top: 1px solid var(--rule); }
.kal-wanneer { white-space: nowrap; color: var(--fg-2); width: 1%; }
.kal-wat a { font-size: 18px; text-decoration: none; color: inherit; }
.kal-wat a:hover { text-decoration: underline; }
.kal-wat span { display: block; margin-top: 5px; color: var(--fg-3); max-width: 52ch; }
.kal-doel { white-space: nowrap; }
@media (max-width: 700px) {
  .kal { font-size: 15px; }
  .kal-doel { display: none; }
}


/* --------------------------------------------- de landingspagina's
   De belofte direct onder de kop: wij leveren geen spreker, wij doen alles.
   Dat is de zin waarmee elk gesprek begint, dus hij staat hoog en in de
   accentkleur. */
.belofte { padding: 44px 0; background: var(--orange); color: #1B1B1B; }
.belofte-kop {
  margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.15;
  letter-spacing: -.02em; font-weight: 600;
}
.belofte-tekst {
  margin: 0; max-width: 70ch; font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.55;
}

/* De twee producten naast elkaar: een losse sessie of een hele dag op een
   eigen merkpagina. Op een smal scherm onder elkaar. */
.prod-twee {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 26px; margin-top: 38px;
}
.prod-kaart {
  border: 1px solid var(--rule); border-radius: 8px; padding: 28px 26px 30px;
  display: flex; flex-direction: column;
}
.prod-kaart h3 { margin: 8px 0 12px; font-size: 23px; line-height: 1.2; }
.prod-kaart > p { color: var(--fg-2); }
.prod-kaart .tick { margin-top: 14px; }
.prod-prijs {
  margin-top: auto; padding-top: 18px; font-size: 17px;
  border-top: 1px solid var(--rule);
}
.prod-prijs b { font-size: 21px; }
.prod-kaart .btn { margin-top: 16px; align-self: flex-start; }

/* ---------- het bezoekersrapport op /meting ----------
   Een interne pagina, dus geen ontwerp maar leesbaarheid: getallen rechts
   uitgelijnd, een staafje ernaast zodat je de verhouding ziet zonder te
   rekenen. */
.mt-vorm { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; align-items: center; }
.mt-vorm input, .mt-vorm select {
  font: inherit; font-size: 16px; padding: 11px 14px;
  background: transparent; color: var(--warm-white);
  border: 1px solid rgba(246, 242, 239, .35); border-radius: 0;
}
.mt-vorm input { min-width: 260px; }
.mt-vorm select option { color: #141414; }
.mt-fout { margin-top: 16px; color: var(--orange); font-size: 16px; }

.mt-kop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.mt-kop > div { border-top: 2px solid var(--accent); padding-top: 14px; }
.mt-kop b { display: block; font-size: 34px; font-weight: 500; letter-spacing: -.02em; }
.mt-kop span { display: block; margin-top: 4px; font-size: 14px; color: var(--fg-3); }
@media (max-width: 780px) { .mt-kop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mt-blok { margin-top: 54px; }
.mt-blok h2 { font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
.mt-uitleg { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--fg-3); max-width: 720px; }
.mt-tabel { width: 100%; border-collapse: collapse; margin-top: 16px; table-layout: fixed; }
.mt-tabel th {
  text-align: left; font-weight: 400; font-size: 15px; padding: 7px 12px 7px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--rule); width: 46%;
}
.mt-tabel th a { color: inherit; text-decoration: none; }
.mt-tabel th a:hover { text-decoration: underline; }
.mt-tabel td { padding: 7px 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.mt-getal { width: 78px; text-align: right; padding-right: 14px !important;
            font-variant-numeric: tabular-nums; font-size: 15px; }
.mt-tweede { width: 62px; color: var(--accent); }
.mt-balk span { display: block; height: 9px; background: var(--accent); opacity: .75; }

/* ---- /what-works-in-employee-learning ---------------------------------
   De staafjes en de tabel op de cijferpagina. Geen afbeelding en geen
   canvas: een AI die deze pagina leest moet het getal in de tekst kunnen
   vinden, dus de balk is opmaak en het percentage staat er als tekst naast. */
.ond-grafiek { margin-top: 34px; max-width: 760px; }
.ond-rij { display: grid; grid-template-columns: 104px 1fr 132px;
           align-items: center; gap: 16px; margin-bottom: 12px; }
.ond-lab { font-size: 14px; color: var(--muted, #6b6b6b); white-space: nowrap; }
.ond-balk { background: rgba(0, 0, 0, .06); border-radius: 999px; height: 12px;
            overflow: hidden; }
.ond-balk i { display: block; height: 100%; border-radius: 999px;
              background: var(--accent, #ff8250); }
.ond-getal { font-size: 14px; font-variant-numeric: tabular-nums;
             text-align: right; }
.ond-getal small { color: var(--muted, #6b6b6b); }
.tabelwrap { overflow-x: auto; margin-top: 30px; max-width: 760px; }
.ond-tabel { border-collapse: collapse; width: 100%; font-size: 15px; }
.ond-tabel th, .ond-tabel td { text-align: left; padding: 11px 14px;
                               border-bottom: 1px solid rgba(0, 0, 0, .08); }
.ond-tabel th { font-size: 13px; text-transform: uppercase;
                letter-spacing: .04em; color: var(--muted, #6b6b6b); }
.ond-tabel .n { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .ond-rij { grid-template-columns: 82px 1fr 96px; gap: 10px; }
  .ond-getal small { display: none; }
}

/* ---- sterren bij het sessiecijfer -------------------------------------
   Twee rijen over elkaar, de bovenste afgeknipt op het percentage, zodat
   4,2 van de 5 er ook uitziet als 4,2 en niet als 4 of 4,5. Het cijfer
   staat er als tekst naast; de sterren zijn puur opmaak. */
.sterren { position: relative; display: inline-block; vertical-align: -1px;
           letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.sterren-leeg { color: rgba(128, 128, 128, .38); }
.sterren-vol { position: absolute; left: 0; top: 0; overflow: hidden;
               color: var(--accent, #ff8250); }

/* ============================================================
   Leqture — D8, omgekeerd
   Dezelfde vormgeving als leqture-d8.css, maar op de andere helft
   van het palet: Luke Warm White als grond, LQTR Black als inkt.
   Deze laag wordt achter de basis geplakt, dus alles wat met tokens
   werkt keert vanzelf mee; hieronder staat alleen wat vastgezet was.

   Twee dingen zijn bewust geen letterlijke omkering:
   - de band met perslogo's blijft de grond van de pagina, want die
     woordmerken zijn donker en verdwijnen op zwart;
   - beeldvlakken achter video blijven zwart.
   ============================================================ */

:root {
  --pure-white: #FFFFFF;
  --orange-ink: var(--orange);   /* oranje dat leesbaar is op een lichte grond */

  --bg: var(--warm-white);
  --fg: var(--black);
  --fg-2: rgba(20, 20, 20, .86);
  --fg-3: rgba(20, 20, 20, .74);
  --rule: rgba(20, 20, 20, .18);
  --rule-2: rgba(20, 20, 20, .3);
  --accent: var(--orange-ink);
  --field: var(--pure-white);
  --tile: rgba(20, 20, 20, .04);
}

html, body { background: var(--warm-white); color: var(--black); }

/* ---------- banden die licht waren, worden zwart ---------- */
#s-trust, #demo {
  --bg: var(--black);
  --fg: var(--warm-white);
  --fg-2: rgba(246, 242, 239, .88);
  --fg-3: rgba(246, 242, 239, .74);
  --rule: rgba(246, 242, 239, .16);
  --rule-2: rgba(246, 242, 239, .28);
  --accent: var(--orange);
  --orange-ink: var(--orange);
  --field: rgba(246, 242, 239, .06);
  --tile: rgba(246, 242, 239, .04);
}

/* De perslogo's zijn donkere woordmerken met een wit kader ingebakken. Op zwart
   verdwijnen ze en op oranje zie je de kaders, dus die band houdt gewoon de
   grond van de pagina en valt naadloos weg. */

/* ---------- vaste kleuren in de chrome ---------- */
.nav { background: rgba(246, 242, 239, .9); border-bottom-color: rgba(20, 20, 20, .16); }
.brand { color: var(--black); }
.brand .tag { color: rgba(20, 20, 20, .82); }
.nav-links a { color: var(--black); }
.wordmark { color: var(--orange-ink); }

.lang-btn { border-color: rgba(20, 20, 20, .3); color: var(--black); }
.lang-btn::after { border-right-color: rgba(20, 20, 20, .7); border-bottom-color: rgba(20, 20, 20, .7); }
.lang.no-flags .flag::before { color: var(--black); }
.lang-menu { background: var(--warm-white); border-color: rgba(20, 20, 20, .22); }
.lang-menu li { color: var(--black); }

.hero { background: var(--warm-white); color: var(--black); }
.hero h2.sub .accent { color: var(--black); }
.hero-mini div { background: var(--warm-white); }
.panel-item { background: var(--warm-white); }
.spk-avatar { background: rgba(20, 20, 20, .06); }

/* ---------- kaarten die zwart waren, worden wit ---------- */
.lead-form { background: var(--pure-white); color: var(--black); }
.lead-form label { color: rgba(20, 20, 20, .74); }
.lead-form input, .lead-form select {
  color: var(--black); background: rgba(20, 20, 20, .04); border-color: rgba(20, 20, 20, .26);
}
.lead-form input::placeholder { color: rgba(20, 20, 20, .38); }
.lead-fine { color: rgba(20, 20, 20, .66); }

.modal-form { background: var(--warm-white); color: var(--black); }
.modal-form h2 { color: var(--black); }
.modal-form p { color: rgba(20, 20, 20, .66); }
.modal-form .eyebrow { color: var(--orange-ink); }
.watch-form label { color: rgba(20, 20, 20, .74); }
.watch-form input {
  color: var(--black); background: rgba(20, 20, 20, .04); border-color: rgba(20, 20, 20, .26);
}
.watch-form input::placeholder { color: rgba(20, 20, 20, .38); }
.watch-form .lead-fine { color: rgba(20, 20, 20, .66); }

/* ---------- footer: Deep Black wordt puur wit ---------- */
footer { background: var(--pure-white); color: var(--black); }
footer .wordmark { color: var(--black); }
footer p { color: rgba(20, 20, 20, .74); }
.footer-col-title { color: rgba(20, 20, 20, .66); }
.footer-links a, footer a { color: var(--black); }
.footer-links a:hover { color: var(--orange-ink); }
.footer-grid .payoff { color: var(--orange-ink); }
.footer-bottom { border-top-color: rgba(20, 20, 20, .18); color: rgba(20, 20, 20, .66); }

/* ---------- oranje en geel als tekst: donkerder op een lichte grond ---------- */
.hero-mini b,
.spk-meta,
.panel-item .k,
.case-stats b,
.calc-box output,
.calc-num,
.rail-head a,
.post .more,
.crumbs span,
.crumbs a:hover,
.hero-event h2.sub,
.cat-card:hover .cat-body h3,
.fmt-head .rot-a,
.fmt-head .rot-b,
.rot-a,
.rot-b { color: var(--orange-ink); }

.card ul.tick li::before, ul.tick li::before {
  border-left-color: var(--orange-ink); border-bottom-color: var(--orange-ink);
}

/* de paarse band houdt zijn eigen contrast */


/* De valutatekens staan nu als oranje blokje en hebben geen kleur per
   band meer nodig; zie de basisstylesheet. */

/* ---------- de voet blijft oranje ---------- */
/* Deze laag wordt over de basis geladen en zette de voet anders terug naar wit
   of zwart. Zie de basisstylesheet voor het waarom. */
footer { background: var(--orange) !important; color: var(--black) !important; }
footer p, footer .footer-grid p { color: rgba(20, 20, 20, .82); }
footer a, .footer-links a { color: var(--black); }
.footer-col-title { color: rgba(20, 20, 20, .66); }
footer svg.wordmark { color: var(--black); }
.footer-grid .payoff { color: var(--black); }
.footer-bottom { border-top-color: rgba(20, 20, 20, .22); color: rgba(20, 20, 20, .7); }

/* De partner- en medialogo's dragen zelf een witte achtergrond. Op een zwarte
   band werd elk logo een wit blokje en viel het zwarte AP-woordmerk helemaal
   weg. De band draagt daarom de kleur die de logo's zelf hebben. */
body > section.ev-logoband {
  --bg: #fff;
  --fg: #141414;
  --fg-2: rgba(20, 20, 20, .78);
  --fg-3: rgba(20, 20, 20, .6);
  --rule: rgba(20, 20, 20, .12);
  background: #fff;
  color: #141414;
}

/* ============================================================
   Leqture — D8, alternerend
   Deze laag komt achter de basis en de omkeerlaag. De pagina staat
   dus op Luke Warm White, en om de sectie kantelt hij naar LQTR
   Black. De oranje en paarse banden houden hun eigen kleur: die
   zijn een accent, geen ritme.

   Op de homepagina heeft elke sectie een id, dus daar staat de
   volgorde met de hand vast. Op de sessie- en sprekerpagina's
   hebben de secties geen id en telt nth-of-type ze af.
   ============================================================ */

/* ---------- donkere banden ---------- */
#s-clarity,
#s-cases,
#s-service,
#s-brand,
body > section:nth-of-type(even),
.hero {
  --bg: var(--black);
  --fg: var(--warm-white);
  --fg-2: rgba(246, 242, 239, .88);
  --fg-3: rgba(246, 242, 239, .74);
  --rule: rgba(246, 242, 239, .16);
  --rule-2: rgba(246, 242, 239, .28);
  --accent: var(--orange);
  --orange-ink: var(--orange);
  --field: rgba(246, 242, 239, .06);
  --tile: rgba(246, 242, 239, .04);
}

/* ---------- lichte banden, met een id zodat ze het aftellen winnen ---------- */
/* De sessielijst staat op de ene pagina als derde sectie en op de andere
   als tweede, dus het aftellen gaf hem daar een donkere band en hier een
   lichte. Hij hoort overal hetzelfde te zijn: licht. */
#sessions,
#s-formats,
#s-speakers,
#s-experts,
#s-report,
#s-people {
  --bg: var(--warm-white);
  --fg: var(--black);
  --fg-2: rgba(20, 20, 20, .86);
  --fg-3: rgba(20, 20, 20, .74);
  --rule: rgba(20, 20, 20, .18);
  --rule-2: rgba(20, 20, 20, .3);
  /* --orange-ink moet hier ook staan: de nth-of-type-regel
     zet ze op de donkere variant en die wint anders van deze id-regel */
  --orange-ink: var(--orange);
  --accent: var(--orange-ink);
  --field: var(--pure-white);
  --tile: rgba(20, 20, 20, .04);
}

/* ---------- secties scheiden zich nu met kleur, niet met een streep ---------- */
section.tight + section.tight { padding-top: 72px; }
section.tight + section.tight .section-title { padding-top: 0; border-top: 0; }

/* ============================================================
   Donkere hero
   De hero en de klantlogo's eronder vormen samen een zwart
   openingsblok; daarna opent de pagina zich naar licht, precies
   waar de vergelijkingstabel begint. De nav loopt mee over de
   hero, dus die is ook donker.
   ============================================================ */

.hero {
  background: var(--black); color: var(--warm-white);
}
.hero h2.sub .accent { color: var(--warm-white); }
.hero-mini div { background: var(--black); }

.nav { background: rgba(20, 20, 20, .88); border-bottom-color: rgba(246, 242, 239, .14); }
.brand { color: var(--warm-white); }
.brand .tag { color: rgba(246, 242, 239, .55); }
.nav-links a { color: var(--warm-white); }
.wordmark { color: var(--orange); }

.lang-btn { border-color: rgba(246, 242, 239, .3); color: var(--warm-white); }
.lang-btn::after { border-right-color: rgba(246, 242, 239, .7); border-bottom-color: rgba(246, 242, 239, .7); }
.lang.no-flags .flag::before { color: var(--warm-white); }
.lang-menu { background: var(--black); border-color: rgba(246, 242, 239, .22); }
.lang-menu li { color: var(--warm-white); }

/* ---------------------------------------------------------------- paarse banden
   Paars stond op één rij en dat viel op als een uitzondering in plaats van als
   onderdeel van de huisstijl. Deze drie banden delen hem, verspreid over de
   pagina. Deze regels staan hier en niet in de basis, want deze laag wordt er
   overheen geladen en zou ze anders terugzetten naar zwart of wit. */
#s-price,
#s-experts {
  --bg: var(--purple);
  --fg: var(--warm-white);
  --fg-2: rgba(246, 242, 239, .84);
  --fg-3: rgba(246, 242, 239, .88);
  --rule: rgba(246, 242, 239, .24);
  --rule-2: rgba(246, 242, 239, .36);
  --accent: var(--warm-white);
  --orange-ink: var(--orange);
  --field: rgba(255, 255, 255, .08);
  --tile: rgba(255, 255, 255, .07);
  background: var(--bg);
  color: var(--fg);
}

/* De kaarten in deze secties hielden hun lichte grond uit de lichte band terwijl
   de tekst warm wit werd: wit op wit, 1,11:1. Ze krijgen hier hun eigen grond. */
#s-price .card,
#s-experts .card,
#s-price .qa,
#s-experts .qa {
  background: var(--tile);
  border-color: var(--rule);
  color: var(--fg);
}
#s-price .card h3,
#s-experts .card h3 { color: var(--fg); }
#s-price .card p,
#s-experts .card p { color: var(--fg-2); }


/* Het valutateken per band. Paars is de standaard en werkt op alles wat licht
   is; op de donkere en de paarse banden moet hij oranje worden. */
body > section:nth-of-type(even), .hero,
#s-clarity, #s-cases, #s-service, #s-brand,
#s-price, #s-experts { --cur: var(--orange); }
#s-formats, #s-speakers, #s-report, #s-people { --cur: var(--orange); }

/* ---------- de voet blijft oranje ---------- */
/* Deze laag wordt over de basis geladen en zette de voet anders terug naar wit
   of zwart. Zie de basisstylesheet voor het waarom. */
footer { background: var(--orange) !important; color: var(--black) !important; }
footer p, footer .footer-grid p { color: rgba(20, 20, 20, .82); }
footer a, .footer-links a { color: var(--black); }
.footer-col-title { color: rgba(20, 20, 20, .66); }
footer svg.wordmark { color: var(--black); }
.footer-grid .payoff { color: var(--black); }
.footer-bottom { border-top-color: rgba(20, 20, 20, .22); color: rgba(20, 20, 20, .7); }

/* De partner- en medialogo's dragen zelf een witte achtergrond. Op een zwarte
   band werd elk logo een wit blokje en viel het zwarte AP-woordmerk helemaal
   weg. De band draagt daarom de kleur die de logo's zelf hebben. */
body > section.ev-logoband {
  --bg: #fff;
  --fg: #141414;
  --fg-2: rgba(20, 20, 20, .78);
  --fg-3: rgba(20, 20, 20, .6);
  --rule: rgba(20, 20, 20, .12);
  background: #fff;
  color: #141414;
}