/* De Communicatie Code — concept stylesheet.
   Bewust één vaste lichte look: geen prefers-color-scheme-tak, zodat de demo bij
   iedereen identiek is. Alle kleuren expliciet gezet, geen beige/cream tinten. */

:root {
  --ink:        #14171a;
  --ink-soft:   #43484e;
  --muted:      #6f757d;
  --white:      #ffffff;
  --grey-50:    #f5f7f9;
  --grey-100:   #eceff2;
  --line:       #dfe3e8;
  --blue:       #006eba;
  --blue-dark:  #00548e;
  --blue-deep:  #003a63;
  --blue-light: #2f97e0;
  --blue-wash:  #e8f2fa;

  --hdr: 64px;
  --rhythm: clamp(3rem, 7vw, 5.5rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: "Work Sans", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--blue); color: var(--white); }

h1, h2, h3, h4 {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 500;
  text-wrap: balance;
  line-height: 1.2;
}
p { margin: 0; }

.wrap {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

.eyebrow {
  display: inline-block;
  font-size: 0.71rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.eyebrow--light { color: rgba(255, 255, 255, 0.75); }

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

/* ---------- concept notice ---------- */
.notice {
  background: var(--ink);
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.73rem;
  letter-spacing: 0.01em;
  text-align: center;
  padding: 0.45rem 1rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  padding: 0.8em 1.4em;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.btn--solid       { background: var(--blue); color: var(--white); }
.btn--solid:hover { background: var(--blue-dark); }
.btn--line        { border-color: var(--line); color: var(--ink-soft); background: transparent; }
.btn--line:hover  { border-color: var(--blue); color: var(--blue); }
.btn--white       { background: var(--white); color: var(--blue-deep); }
.btn--white:hover { background: var(--blue-wash); }
.btn--ghost       { border-color: rgba(255,255,255,0.45); color: var(--white); background: transparent; }
.btn--ghost:hover { border-color: var(--white); background: rgba(255,255,255,0.12); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.btn--white:focus-visible, .btn--ghost:focus-visible { outline-color: var(--white); }

/* ---------- platform chips ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.42em 0.8em;
  border: 1px solid var(--line);
  border-radius: 100px;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.chip svg { width: 13px; height: 13px; stroke: currentColor; fill: none; flex-shrink: 0; }
.chip:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-wash); }
.chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.chips--light .chip { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.9); }
.chips--light .chip:hover { border-color: var(--white); background: rgba(255,255,255,0.14); color: var(--white); }

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.hdr__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: var(--hdr);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-right: auto;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}
.brand__mark { width: 30px; height: 30px; flex-shrink: 0; }
.brand__mark circle,
.brand__mark path { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; }

.hdr__nav { display: flex; gap: clamp(0.9rem, 2vw, 1.75rem); }
.hdr__nav a {
  font-size: 0.91rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 0.35rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--blue); }

.duo { display: flex; align-items: center; flex-shrink: 0; }
.duo img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--white);
  box-shadow: 0 0 0 1px var(--line);
}
.duo img + img { margin-left: -9px; }

.burger {
  display: none;
  width: 42px; height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
}
.burger span {
  display: block;
  width: 17px; height: 1.5px;
  margin: 3.5px auto;
  background: var(--ink);
  transition: transform 200ms ease, opacity 200ms ease;
}
.burger:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (max-width: 1120px) {
  .hdr__chips { display: none; }
}
@media (max-width: 780px) {
  .burger { display: block; }
  .duo { display: none; }
  .hdr__nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 14px 28px -18px rgba(0, 20, 40, 0.28);
    padding: 0.4rem clamp(1.15rem, 4vw, 3rem) 1rem;
    display: none;
  }
  .hdr__nav.is-open { display: flex; }
  .hdr__nav a {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--grey-100);
    font-size: 1rem;
  }
  .hdr__nav a[aria-current="page"] { border-bottom-color: var(--blue); }
}

/* ---------- hero ---------- */
.hero {
  background: linear-gradient(158deg, var(--blue-deep) 0%, var(--blue-dark) 48%, var(--blue) 100%);
  color: var(--white);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  /* Vult het scherm, maar loopt op hoge monitors niet leeg: harde bovengrens. */
  min-height: min(calc(100svh - var(--hdr)), 760px);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.hero__with { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1.35rem; }
.hero__with .duo img { border-color: var(--blue-dark); width: 33px; height: 33px; box-shadow: none; }
.hero__with span { font-size: 0.86rem; color: rgba(255, 255, 255, 0.82); }

.statement {
  font-size: clamp(1.75rem, 4.4vw, 2.95rem);
  line-height: 1.24;
  margin-top: 0.85rem;
}
.statement .dim {
  color: rgba(255, 255, 255, 0.5);
  font-style: italic;
  text-decoration: line-through;
  text-decoration-thickness: 0.05em;
}
.statement .sharp { color: var(--white); font-weight: 600; }
.statement .to {
  font-family: "Work Sans", sans-serif;
  font-size: 0.5em;
  vertical-align: 0.12em;
  margin-inline: 0.25em;
  color: rgba(255, 255, 255, 0.7);
}
.hero__sub {
  margin-top: 1.35rem;
  max-width: 42ch;
  font-size: 1.02rem;
  color: rgba(255, 255, 255, 0.86);
}
.hero__cta { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: 0.65rem; }

.hero__art {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 66svh;
  box-shadow: 0 34px 64px -24px rgba(0, 18, 36, 0.6);
}
.hero__art img { width: 100%; height: 100%; object-fit: cover; }

/* De coverart is een vierkant ontwerp met tekst erin. In de 4/5-uitsnede zou
   object-fit: cover de tagline eraf snijden, dus houden we hem vierkant. */
.hero__art--cover { aspect-ratio: 1; max-height: 62svh; }

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 2.2rem;
    padding-block: clamp(2.2rem, 8vw, 3.2rem);
  }
  .hero__art { aspect-ratio: 3 / 2; max-height: none; order: 2; }
  /* Ook op mobiel vierkant blijven, anders sneuvelt de tekst in de coverart alsnog. */
  .hero__art--cover { aspect-ratio: 1; max-width: 22rem; margin-inline: auto; }
}

/* ---------- sections ---------- */
.sec { padding-block: var(--rhythm); }
.sec--line { border-top: 1px solid var(--line); }
.sec--grey { background: var(--grey-50); }
.sec--dark { background: var(--ink); color: rgba(255, 255, 255, 0.78); }

.sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.sec__head h2 { font-size: clamp(1.4rem, 2.7vw, 1.95rem); }

.pagehead { padding-block: clamp(2.4rem, 6vw, 4rem) clamp(1.4rem, 3vw, 2rem); }
.pagehead h1 { font-size: clamp(1.9rem, 5vw, 3rem); max-width: 22ch; margin-top: 0.65rem; }
.pagehead .lede { margin-top: 1rem; max-width: 58ch; font-size: 1.07rem; color: var(--ink-soft); }

/* ---------- episode ---------- */
.ep { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.7rem; align-items: start; }
.ep__cover {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 9px;
  object-fit: cover;
  border: 1px solid var(--line);
}
.ep__meta {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
  font-size: 0.81rem; font-weight: 500; color: var(--muted);
  margin-bottom: 0.5rem;
}
.ep h3 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin-bottom: 0.6rem; }
.ep p { color: var(--ink-soft); max-width: 62ch; }
.ep__links { margin-top: 1.15rem; }

@media (max-width: 640px) {
  .ep { grid-template-columns: 1fr; gap: 1.2rem; }
  .ep__cover { max-width: 220px; }
}

/* ---------- upcoming ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.card {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 1.4rem;
  background: var(--grey-50);
}
.card h4 {
  font-family: "Work Sans", sans-serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0.6rem 0 0.4rem;
}
.card p { font-size: 0.88rem; color: var(--muted); }
.card--live { background: var(--white); border-style: solid; border-color: var(--blue); }

/* ---------- split ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(2rem, 5vw, 3.6rem);
  align-items: center;
}
.split__media { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 11; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__copy h2 { font-size: clamp(1.4rem, 2.7vw, 1.95rem); margin-top: 0.7rem; }
.split__copy p { margin-top: 0.9rem; color: var(--ink-soft); max-width: 54ch; }

.stats { display: flex; flex-wrap: wrap; gap: 2.2rem; margin-top: 1.8rem; }
.stats b {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.95rem;
  font-weight: 500;
  color: var(--blue);
  line-height: 1.1;
}
.stats span {
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- hosts ---------- */
.hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.4rem; }
.host { display: flex; gap: 1.2rem; }
.host img {
  width: 82px; height: 82px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover; border: 1px solid var(--line);
}
.host h3 { font-family: "Work Sans", sans-serif; font-size: 1.09rem; font-weight: 600; }
.host__role {
  display: block; font-size: 0.79rem; font-weight: 600;
  color: var(--blue); margin: 0.15rem 0 0.6rem;
}
.host p { font-size: 0.94rem; color: var(--ink-soft); }
.host blockquote {
  margin: 0.75rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--line);
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
}
@media (max-width: 460px) {
  .host { flex-direction: column; gap: 0.9rem; }
}

/* ---------- pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.4rem; }
.pillar { padding: 1.7rem; border: 1px solid var(--line); border-radius: 11px; }
.pillar__n { font-family: "Fraunces", Georgia, serif; font-size: 1.55rem; color: var(--blue); }
.pillar h3 {
  font-family: "Work Sans", sans-serif;
  font-size: 1.03rem; font-weight: 600; margin: 0.55rem 0 0.45rem;
}
.pillar p { font-size: 0.94rem; color: var(--ink-soft); }

/* ---------- pull quote ---------- */
.pull { max-width: 760px; }
.pull blockquote {
  margin: 1rem 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.45rem);
  line-height: 1.5;
  color: var(--ink-soft);
}
.pull cite { display: block; margin-top: 0.9rem; font-style: normal; font-weight: 600; font-size: 0.95rem; }

/* ---------- cta band ---------- */
.band { text-align: center; }
.band h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); color: var(--white); max-width: 28ch; margin: 0.9rem auto 0; }
.band p { max-width: 48ch; margin: 1rem auto 0; }
.band__cta { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.8rem; }

/* ---------- contact ---------- */
.contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(2rem, 5vw, 3.5rem); }
.contact__card { background: var(--grey-50); border-radius: 14px; padding: clamp(1.5rem, 3.5vw, 2.3rem); }
.contact__card dl { margin: 0; }
.contact__card dt {
  font-size: 0.73rem; font-weight: 600; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.4rem;
}
.contact__card dt:first-of-type { margin-top: 0; }
.contact__card dd { margin: 0.3rem 0 0; font-size: 1.02rem; }
.contact__card a { color: var(--blue); text-decoration: none; font-weight: 500; }
.contact__card a:hover { text-decoration: underline; }

/* ---------- footer ---------- */
.ftr { border-top: 1px solid var(--line); padding-block: 2rem 2.8rem; }
.ftr__inner {
  display: flex; flex-wrap: wrap; gap: 1rem 1.6rem;
  justify-content: space-between; align-items: center;
  font-size: 0.83rem; color: var(--muted);
}
.ftr nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.ftr nav a { text-decoration: none; color: var(--muted); }
.ftr nav a:hover { color: var(--blue); }

/* ---------- review mode (?review=1) ---------- */
.review-panel { display: none; }
body.review-on [data-blocked] {
  outline: 2px dashed #d13a3a;
  outline-offset: 3px;
}
body.review-on .review-panel {
  display: block;
  background: #fff5f5;
  border-top: 2px solid #d13a3a;
  padding: 1.4rem 0 1.8rem;
}
body.review-on .review-panel h2 {
  font-family: "Work Sans", sans-serif;
  font-size: 0.95rem; font-weight: 700; color: #a32020;
}
body.review-on .review-panel ol { margin: 0.7rem 0 0; padding-left: 1.3rem; }
body.review-on .review-panel li { font-size: 0.87rem; color: #7d2020; margin-bottom: 0.35rem; }

/* ---- afleveringen uit de Captivate-feed (js/episodes.js) ---- */

/* Meerdere afleveringen onder elkaar, met een scheidslijn ertussen. */
[data-episodes="list"] .ep + .ep {
  margin-top: var(--rhythm);
  padding-top: var(--rhythm);
  border-top: 1px solid var(--line);
}

.ep__player {
  display: flex;
  width: 100%;
  max-width: 34rem;
  margin-top: 1.15rem;
}

/* Speler in de hero: verschijnt pas nadat er op de play-knop is geklikt. */
.hero__player .ep__player { margin-top: 1.4rem; }
.hero__player[hidden] { display: none; }

/* ---- abonneer-rij in de hero ---- */
.hero__listen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem 0.75rem;
  margin-top: 1.7rem;
}
.hero__listen-label {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Aflevernummer als badge, zodat de volgorde in één oogopslag klopt. */
.ep__num {
  padding: 0.15em 0.55em;
  border-radius: 100px;
  background: var(--blue-wash);
  color: var(--blue-dark);
  font-weight: 600;
}

/* ---- afleveringlijst: scanbaar houden ---- */
/* Volledige omschrijvingen maken de lijst een muur tekst; drie regels is genoeg
   om te bepalen of je een aflevering wil horen. */
[data-episodes="list"] .ep p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
[data-episodes="list"] .ep p.is-expanded {
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

.ep__more {
  margin-top: 0.5rem;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ep__more:hover { color: var(--blue-dark); }

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

/* =====================================================================
   Designlaag 2026-09-02: één kaart- en pill-taal voor de hele site.
   Palet en typografie ongewijzigd. Referenties: Maze (afleveringkaart met
   luisterknop), incident.io (gegroepeerde abonneerlinks + golfvorm in de hero),
   Upwork/Symbolic (hosts als zachte kaarten).
   ===================================================================== */
:root {
  --radius:    16px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(20, 23, 26, 0.04), 0 4px 14px -6px rgba(20, 23, 26, 0.08);
  --shadow-md: 0 2px 4px rgba(20, 23, 26, 0.05), 0 18px 38px -16px rgba(0, 58, 99, 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Knoppen en chips: overal dezelfde pill-vorm. */
.btn { border-radius: 100px; transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background-color 0.2s, border-color 0.2s; }
.btn:hover { transform: translateY(-1px); }
.btn--white:hover, .btn--solid:hover { box-shadow: var(--shadow-md); }
.chip { transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.chip:hover { transform: translateY(-1px); }

/* Sectiekop: eyebrow boven de titel, op elke sectie hetzelfde. */
.sec__head .eyebrow { display: block; margin-bottom: 0.4rem; }

/* ---- kaart-basis, gedeeld door afleveringen, hosts, pijlers en cards ---- */
.ep, .host, .pillar, .card, .contact__card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s;
}
.ep:hover, .host:hover, .pillar:hover, .card:hover {
  box-shadow: var(--shadow-md);
  border-color: rgba(0, 110, 186, 0.35);
}
.card { border-style: solid; }               /* was dashed */
.card--live { border-color: var(--blue); }
.sec--grey .ep, .sec--grey .host, .sec--grey .pillar { box-shadow: none; }
.sec--grey .ep:hover, .sec--grey .host:hover, .sec--grey .pillar:hover { box-shadow: var(--shadow-md); }

/* ---- afleveringkaart ---- */
.ep { padding: 1.5rem; }
.ep__cover { border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.ep__meta { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; gap: 0.6rem; align-items: center; }
.ep__meta > span + span:not(.ep__num)::before { content: "·"; margin-right: 0.6rem; color: var(--line); }
.ep__num { text-transform: none; letter-spacing: 0; font-size: 0.74rem; }
[data-episodes="list"] .ep + .ep { margin-top: 1.4rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

/* Luisterknop i.p.v. een altijd zichtbare browserspeler (patroon: Maze). */
.ep__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1rem; margin-top: 1.15rem; }
.ep__play {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.7em 1.25em;
  border: 0; border-radius: 100px;
  background: var(--blue); color: var(--white);
  font: inherit; font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.ep__play:hover { background: var(--blue-dark); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.ep__play svg { width: 12px; height: 12px; fill: currentColor; }
.ep__player[hidden] { display: none; }
/* Alleen in de actierij vlak; de statische fallback zonder JS houdt zijn eigen marge. */
.ep__actions .ep__links { margin-top: 0; }

/* ---- hosts als kaart, met initialen zolang er geen echte portretten zijn ---- */
.host { padding: 1.6rem; gap: 1.3rem; }
.host img { box-shadow: var(--shadow-sm); }
.host__avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue-wash); color: var(--blue-dark);
  font-family: "Fraunces", Georgia, serif; font-size: 1.25rem; font-weight: 500;
  letter-spacing: 0.02em;
}
.host blockquote { border-left-color: var(--blue-light); }

/* ---- pijlers: nummer als badge, zoals .ep__num ---- */
.pillar { padding: 1.8rem; }
.pillar__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--blue-wash); font-size: 1.05rem; font-weight: 500;
}

/* ---- hero: abonneerpaneel + golfvorm ---- */
.hero { position: relative; }
.hero__wave {
  position: absolute; left: 0; right: 0; bottom: -2px;
  width: 100%; height: clamp(54px, 9vw, 110px);
  pointer-events: none; opacity: 0.16;
}
.hero__wave rect { fill: var(--white); }
.hero__grid { position: relative; z-index: 1; }
.hero__listen {
  display: inline-flex;
  padding: 0.7rem 0.9rem 0.7rem 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(6px);
}

/* Kleinere schermen: compacte kaartpadding. */
@media (max-width: 640px) {
  .ep, .host, .pillar { padding: 1.15rem; }
  .ep__actions { gap: 0.7rem; }
}

/* ---- landingspagina: cijferband, onderwerpen, citaat, BI-blok ---- */
.numbers { position: relative; overflow: hidden; }
.numbers__wave { position: absolute; inset: auto 0 -2px 0; width: 100%; height: 70px; opacity: 0.08; pointer-events: none; }
.numbers__wave rect { fill: var(--white); }
.numbers .wrap { position: relative; z-index: 1; }
.numbers__grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1.5rem 2rem; margin-top: 1.6rem;
}
.number b {
  display: block;
  font-family: "Fraunces", Georgia, serif; font-weight: 500;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--white); letter-spacing: -0.01em;
}
.number span {
  display: block; margin-top: 0.5rem;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.number { padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.18); }

.topics { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.topic {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.65em 1.1em;
  border: 1px solid var(--line); border-radius: 100px;
  background: var(--white);
  font-family: "Fraunces", Georgia, serif; font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink); text-decoration: none;
  transition: transform 0.25s var(--ease), border-color 0.2s, background-color 0.2s, box-shadow 0.25s var(--ease);
}
.topic::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.topic:hover { transform: translateY(-2px); border-color: var(--blue-light); background: var(--blue-wash); box-shadow: var(--shadow-md); }

.quote .pull { position: relative; margin-inline: auto; text-align: center; padding-top: 2.6rem; }
.quote .pull::before {
  content: "\201C"; position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  font-family: "Fraunces", Georgia, serif; font-size: 6rem; line-height: 1; color: var(--blue-light); opacity: 0.35;
}
.quote .pull blockquote { font-size: clamp(1.35rem, 3vw, 1.9rem); color: var(--ink); }

.split__logo { height: 26px; width: auto; margin-bottom: 1.1rem; }
.split__media--cover { aspect-ratio: 1; max-width: 340px; margin-inline: auto; border-radius: var(--radius); box-shadow: var(--shadow-md); }

/* =====================================================================
   Signatuurlaag: één motief (de geluidsbalken uit de coverart) op elke kaart,
   patroonpanelen achter artwork, zachte gloed achter verhaal-secties.
   Referenties: Maze (artwork op patroonpaneel), Acquired (tweekleurige
   uitgelichte kaart), Kajabi (gradient-blobs), Varo (accentstrip op kaarten).
   ===================================================================== */

/* Accentstrip: gradient-balk bovenaan elke kaart, altijd over de volle breedte
   (designcheck Dylan 22-09: een groeiende streep leest als stepper). Hover = rand + schaduw. */
.ep, .host, .pillar, .card { position: relative; overflow: hidden; }
.ep::before, .host::before, .pillar::before, .card::before {
  content: ""; position: absolute; inset: 0 auto auto 0; height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--blue-deep), var(--blue) 55%, var(--blue-light));
}

/* Eyebrow met korte regel ervoor: overal dezelfde sectiehandtekening. */
.sec__head .eyebrow::before, .pull .eyebrow::before, .numbers .eyebrow::before, .band .eyebrow::before, .split__copy .eyebrow::before {
  content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 0.6rem;
  vertical-align: middle; background: currentColor; opacity: 0.7; border-radius: 2px;
}

/* Patroonpaneel achter artwork (Maze): fijn raster + geluidsbalken in blue-wash. */
.ep__art {
  position: relative; border-radius: var(--radius-sm); padding: 10px;
  background:
    linear-gradient(var(--blue-wash), var(--blue-wash)) padding-box,
    repeating-linear-gradient(90deg, rgba(0,110,186,0.10) 0 1px, transparent 1px 12px),
    repeating-linear-gradient(0deg, rgba(0,110,186,0.10) 0 1px, transparent 1px 12px);
  background-color: var(--blue-wash);
  background-blend-mode: multiply;
}
.ep__art .ep__cover { border: 0; box-shadow: var(--shadow-md); }

/* Uitgelichte aflevering (Acquired): grote cover op donker paneel, tekst ernaast. */
.ep--featured { grid-template-columns: minmax(240px, 0.85fr) minmax(0, 1.15fr); gap: 0; padding: 0; }
.ep--featured .ep__art {
  padding: clamp(1.6rem, 4vw, 2.8rem); border-radius: 0; cursor: pointer;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(47,151,224,0.55), transparent 60%),
    linear-gradient(160deg, var(--blue-deep), var(--blue-dark));
  display: grid; place-items: center;
}
.ep--featured .ep__art::after {
  content: ""; position: absolute; width: 64px; height: 64px; border-radius: 50%;
  background: var(--white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23006eba'><path d='M8 5v14l11-7z'/></svg>") center/26px no-repeat;
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.5);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.ep--featured .ep__art:hover::after { transform: scale(1.08); box-shadow: 0 14px 36px -8px rgba(0,0,0,0.55); }
.ep--featured .ep__art:focus-visible { outline: 3px solid var(--blue-light); outline-offset: -3px; }
.ep--featured .ep__cover { width: min(100%, 300px); border-radius: var(--radius-sm); box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6); }
.ep--featured > div { padding: clamp(1.6rem, 4vw, 2.6rem); }
.ep--featured h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.ep--featured .ep__actions .ep__play { display: none; }   /* cover is de play-knop */
.ep--featured .ep__player { margin-top: 1.2rem; }
.ep--featured::before { display: none; }
@media (max-width: 760px) { .ep--featured { grid-template-columns: 1fr; } }

/* Zachte gloed achter verhaal-secties (Kajabi), nooit boven de content. */
.sec--glow { position: relative; overflow: hidden; }
.sec--glow::before, .sec--glow::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  filter: blur(60px); opacity: 0.55;
}
.sec--glow::before { width: 520px; height: 520px; right: -160px; top: -200px; background: radial-gradient(circle, var(--blue-wash), transparent 70%); }
.sec--glow::after  { width: 420px; height: 420px; left: -160px; bottom: -220px; background: radial-gradient(circle, rgba(47,151,224,0.22), transparent 70%); }
.sec--glow > .wrap { position: relative; z-index: 1; }

/* Cijfers met verloop, zodat de band niet vlak blijft. */
.number b {
  background: linear-gradient(180deg, #ffffff 0%, #bfe0f7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Hero-cover op patroonpaneel met offset-kader. */
.hero__art--cover { overflow: visible; box-shadow: none; }
.hero__art--cover::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border-radius: var(--radius); border: 1px solid rgba(255,255,255,0.35);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 2px, transparent 2px 10px);
}
.hero__art--cover img { border-radius: 14px; box-shadow: 0 34px 64px -24px rgba(0, 18, 36, 0.6); }

/* Topics: verloopranden op hover, badge-punt pulseert zacht. */
.topic::before { box-shadow: 0 0 0 0 rgba(0,110,186,0.35); animation: dot 2.6s ease-in-out infinite; }
@keyframes dot { 50% { box-shadow: 0 0 0 5px rgba(0,110,186,0.10); } }
@media (prefers-reduced-motion: reduce) { .topic::before { animation: none; } }

/* ---- panelen: sectie-inhoud in een ingesprongen, afgeronde container ----
   Referenties: Inkwell (inset panel met verticaal verloop), Harvest (frosted
   kaarten op getint veld), Craft (zachte halo achter de kop). */
.panel {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 28px;
  padding: clamp(2rem, 5vw, 3.6rem) clamp(1.4rem, 4.5vw, 3.4rem);
}
.panel > * { position: relative; z-index: 1; }
.panel::before, .panel::after { content: ""; position: absolute; pointer-events: none; }

.panel--dark {
  color: rgba(255, 255, 255, 0.82);
  background: linear-gradient(180deg, var(--blue-deep) 0%, var(--blue-dark) 62%, var(--blue) 100%);
  box-shadow: 0 40px 80px -40px rgba(0, 58, 99, 0.55), inset 0 1px 0 rgba(255,255,255,0.12);
}
.panel--dark::before {
  width: 60%; aspect-ratio: 1; right: -18%; top: -45%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(47,151,224,0.55), transparent 65%); filter: blur(30px);
}
.panel--dark::after {
  inset: 0; z-index: 0; opacity: 0.35;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 28px);
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.9), transparent 85%);
}
.panel--dark h2, .panel--dark .number b { color: var(--white); }

.panel--light {
  color: var(--ink);
  background: linear-gradient(180deg, #ffffff 0%, var(--blue-wash) 100%);
  border: 1px solid rgba(0, 110, 186, 0.14);
  box-shadow: var(--shadow-sm);
}
.panel--light::before {
  width: 70%; aspect-ratio: 1; left: 15%; top: -55%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(47,151,224,0.22), transparent 65%); filter: blur(24px);
}

.numbers, .band { background: var(--white); color: inherit; }
.numbers__wave { inset: auto 0 -2px 0; height: 64px; opacity: 0.10; z-index: 0; }
.band .eyebrow--light { color: rgba(255,255,255,0.75); }
.band p { color: rgba(255,255,255,0.82); }
.quote .pull { max-width: 900px; }
.quote .pull::before { top: 1.2rem; }

.panel--dark .number {
  padding: 1.1rem 1.2rem; border-top: 0; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(8px);
}
@media (max-width: 640px) { .panel { border-radius: 20px; } }
/* Golfvorm hoort onderin het paneel; .panel > * zette hem per ongeluk in de flow. */
.panel > .numbers__wave { position: absolute; z-index: 0; }

/* ---- diensten: spreker inhuren / podcast op locatie ---- */
.services { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; }
.service { position: relative; overflow: hidden; padding: clamp(1.6rem, 3.5vw, 2.4rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--hdr) + 1rem); }
.service::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 4px; background: linear-gradient(90deg, var(--blue-deep), var(--blue) 55%, var(--blue-light)); }
.service h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0.5rem 0 0.9rem; }
.service p { color: var(--ink-soft); }
.service__head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.service__icon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--blue-wash); color: var(--blue-dark); }
.service__icon svg { width: 22px; height: 22px; }
.service__list { list-style: none; margin: 1.1rem 0 1.5rem; padding: 0; display: grid; gap: 0.45rem; font-size: 0.94rem; color: var(--ink-soft); }
.service__list li { padding-left: 1.3rem; position: relative; }
.service__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }

/* Home: dienstenblok in het donkere paneel. */
.band__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; margin: 2rem auto 0; max-width: 820px; text-align: left; }
.band__service { display: grid; gap: 0.45rem; padding: 1.4rem 1.5rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--white); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(8px); transition: transform 0.3s var(--ease), background-color 0.2s, border-color 0.2s; }
.band__service:hover { transform: translateY(-3px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); }
.band__service .service__icon { background: rgba(255,255,255,0.12); color: var(--white); margin-bottom: 0.3rem; }
.band__service strong { font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: 1.2rem; }
.band__service span:not(.service__icon) { font-size: 0.92rem; color: rgba(255,255,255,0.78); }
.band__service em { font-style: normal; font-weight: 600; font-size: 0.86rem; color: var(--white); margin-top: 0.3rem; }
.band .panel > p { margin-inline: auto; }

/* ---- formulier ---- */
.form { text-align: left; }
.form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.1rem 1.4rem; }
.field { display: grid; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea { font: inherit; font-size: 0.98rem; color: var(--ink); padding: 0.8em 1em; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--white); width: 100%; transition: border-color 0.2s, box-shadow 0.2s; }
.field textarea { resize: vertical; min-height: 7rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,110,186,0.14); }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.4rem; margin-top: 1.6rem; }
.form__note { font-size: 0.88rem; color: var(--muted); }
.form__done { margin-top: 1.4rem; padding: 1rem 1.2rem; border-radius: var(--radius-sm); background: var(--blue-wash); color: var(--blue-deep); font-weight: 500; }
.form__done[hidden] { display: none; }

/* ---- verfijningen: header, glow, pijlen, spelende golfvorm ----
   Referenties: Analogue (frosted zwevende header), Linear (zachte gloedrand
   op hover), Framer (pijl die meeschuift). */
.hdr { transition: background-color 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s; }
.hdr.is-scrolled {
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: rgba(223, 227, 232, 0.6);
  box-shadow: 0 10px 30px -22px rgba(0, 58, 99, 0.35);
}

/* Gloedrand op hover: één extra laag onder de bestaande kaartschaduw. */
.ep:hover, .host:hover, .pillar:hover, .card:hover, .service:hover, .topic:hover {
  box-shadow: 0 0 0 1px rgba(0, 110, 186, 0.35), 0 0 46px -14px rgba(0, 110, 186, 0.45), var(--shadow-md);
}
.band__service:hover { box-shadow: 0 0 0 1px rgba(255,255,255,0.35), 0 0 46px -14px rgba(255,255,255,0.45); }

/* Pijl schuift mee (Framer). */
.band__service em, .ep__more, .btn--line { transition: color 0.2s, border-color 0.2s, transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
.band__service em::after { content: ""; }
.band__service em { display: inline-flex; align-items: center; gap: 0.35em; }
.band__service:hover em { transform: translateX(4px); }
.sec__head .btn--line::after { content: "\2192"; display: inline-block; margin-left: 0.2em; transition: transform 0.25s var(--ease); }
.sec__head .btn--line:hover::after { transform: translateX(4px); }

/* Golfvorm 'speelt' zodra er audio loopt: balken ademen gestaggerd. */
body.is-playing .hero__wave rect,
body.is-playing .numbers__wave rect { transform-box: fill-box; transform-origin: bottom center; animation: eq 1.1s ease-in-out infinite alternate; }
body.is-playing .hero__wave rect:nth-child(3n)   { animation-duration: 0.9s; animation-delay: -0.3s; }
body.is-playing .hero__wave rect:nth-child(3n+1) { animation-duration: 1.3s; animation-delay: -0.6s; }
body.is-playing .hero__wave rect:nth-child(5n)   { animation-duration: 0.7s; animation-delay: -0.15s; }
@keyframes eq { from { transform: scaleY(0.55); } to { transform: scaleY(1.25); } }
.hero__wave rect, .numbers__wave rect { transition: transform 0.4s var(--ease); }

/* Reveal: van licht vervaagd naar scherp; GSAP zet de filter, CSS ruimt op. */
[data-reveal], [data-reveal-group] > * { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  body.is-playing .hero__wave rect, body.is-playing .numbers__wave rect { animation: none; }
  .hdr, .band__service em, .sec__head .btn--line::after { transition: none; }
}
/* Met 'Boeken' in het menu passen de platformchips pas vanaf brede schermen naast de nav. */
@media (max-width: 1320px) { .hdr__chips { display: none; } }

/* ---- ticker: merkcopy die voorbijglijdt, tussen pijlers en hosts ---- */
.ticker { position: relative; overflow: hidden; padding-block: clamp(1.4rem, 3vw, 2.2rem); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--white), var(--grey-50)); }
.ticker::before, .ticker::after { content: ""; position: absolute; top: 0; bottom: 0; width: 12vw; z-index: 1; pointer-events: none; }
.ticker::before { left: 0; background: linear-gradient(90deg, var(--white), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--grey-50), transparent); }
.ticker__track { display: flex; width: max-content; animation: ticker 48s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__row { display: flex; align-items: baseline; flex-shrink: 0; }
.ticker__item { display: inline-flex; align-items: baseline; gap: 0.5em; padding-inline: 1.6rem; white-space: nowrap; font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: clamp(1.35rem, 2.6vw, 2rem); color: var(--ink); }
.ticker__item small { font-family: "Work Sans", sans-serif; font-style: normal; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); }
.ticker__item::after { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); margin-left: 1.6rem; transform: translateY(-0.35em); }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; flex-wrap: wrap; width: auto; } .ticker__row[aria-hidden] { display: none; } }

/* ---- over ons: volledig profiel per host ---- */
.profile { display: grid; grid-template-columns: clamp(200px, 24vw, 260px) minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; padding: clamp(1.6rem, 3.5vw, 2.6rem); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--hdr) + 1rem); }
.profile + .profile { margin-top: 1.6rem; }
.profile--flip { grid-template-columns: minmax(0, 1fr) clamp(200px, 24vw, 260px); }
.profile--flip .profile__media { order: 2; }
.profile__media { margin: 0; width: 100%; max-width: 260px; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-md); position: relative; }
.profile__media::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); pointer-events: none; }
.profile--flip .profile__media { justify-self: end; }
.profile__media img { width: 100%; height: 100%; object-fit: cover; }
.profile__body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 0.4rem; }
.profile__body .host__role { margin-bottom: 1rem; }
.profile__body p { color: var(--ink-soft); margin-top: 0.8rem; max-width: 62ch; }
.profile__body blockquote { margin: 1.2rem 0 0; padding-left: 1rem; border-left: 2px solid var(--blue-light); font-family: "Fraunces", Georgia, serif; font-style: italic; font-size: 1.05rem; color: var(--ink); }
.profile__facts { margin: 1.4rem 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.2rem; font-size: 0.9rem; }
.profile__facts dt { font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); padding-top: 0.2em; }
.profile__facts dd { margin: 0; color: var(--ink-soft); }
.profile__body .btn { margin-top: 1.5rem; }
@media (max-width: 760px) { .profile, .profile--flip { grid-template-columns: 1fr; } .profile--flip .profile__media { order: 0; } .profile__media { max-width: 320px; } }

/* ---- boeken: aanvragen per mail ---- */
.aanvraag { text-align: center; max-width: 820px; margin-inline: auto; }
.aanvraag h2 { margin-top: 0.5rem; }
.aanvraag p { color: var(--ink-soft); margin: 1rem auto 0; max-width: 56ch; }
.aanvraag__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; margin-top: 1.6rem; }
.aanvraag__note { font-size: 0.9rem; color: var(--muted); }

/* ---- juridische tekst ---- */
.legal { max-width: 760px; }
.legal h2 { font-size: 1.25rem; margin-top: 2rem; }
.legal p { color: var(--ink-soft); margin-top: 0.7rem; }
.legal a { color: var(--blue); }
.legal__meta { font-size: 0.85rem; color: var(--muted); margin-top: 2.4rem; }

/* ---- cookiemelding ---- */
.cookie { position: fixed; z-index: 90; left: 1rem; right: 1rem; bottom: 1rem; max-width: 560px; margin-inline: auto; padding: 1.1rem 1.2rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-md); display: grid; gap: 0.9rem; animation: cookie-in 0.5s var(--ease); }
.cookie[hidden] { display: none; }
.cookie p { font-size: 0.92rem; color: var(--ink-soft); }
.cookie a { color: var(--blue); }
.cookie__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
@keyframes cookie-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .cookie { animation: none; } }

/* ---- polish: skip-link, footer, 404, missie-citaat ---- */
.skip { position: absolute; left: 1rem; top: -3rem; z-index: 100; padding: 0.6em 1em; background: var(--blue); color: var(--white); border-radius: 100px; font-weight: 600; text-decoration: none; transition: top 0.2s; }
.skip:focus { top: 1rem; }

.ftr { border-top: 1px solid var(--line); background: var(--grey-50); }
.ftr__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem 3rem; padding-block: clamp(2.2rem, 5vw, 3.4rem) 1.6rem; align-items: start; }
.ftr__name { display: block; font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 500; color: var(--ink); }
.ftr__tag { display: block; margin-top: 0.3rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue); }
.ftr__brand p { margin-top: 0.9rem; max-width: 46ch; font-size: 0.93rem; color: var(--ink-soft); }
.ftr__label { display: block; margin-bottom: 0.6rem; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ftr__listen .chips { gap: 0.5rem; }
.ftr__listen .chip { background: var(--white); }
.ftr__inner { border-top: 1px solid var(--line); }

.notfound { text-align: center; }
.notfound h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--white); margin-top: 0.8rem; }
.notfound p { max-width: 52ch; margin: 1rem auto 0; color: rgba(255,255,255,0.82); }

.quote-panel { margin-inline: auto; text-align: center; }
.quote-panel .eyebrow::before { content: none; }

/* ---- uniformiteit: paneelmarges, pageheads, subpagina-CTA ---- */
.wrap > .panel { margin-inline: 0; }
.pagehead__listen { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 1.4rem; }
.pagehead__listen .ftr__label { margin: 0; }
.band .panel { text-align: center; }
.band .panel h2 { margin-inline: auto; }
.quote-panel, .aanvraag { max-width: none; }
.numbers .panel, .band .panel { padding-inline: clamp(1.4rem, 4.5vw, 3.4rem); }

/* ---- footer v2: merk, pagina's, contact, producent ---- */
.ftr { position: relative; background: var(--grey-50); border-top: 1px solid var(--line); }
.ftr::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--blue-deep), var(--blue) 55%, var(--blue-light)); }
.ftr__grid { display: grid; grid-template-columns: minmax(260px, 1.6fr) repeat(3, minmax(150px, 1fr)); gap: 2.4rem 3rem; padding-block: clamp(2.6rem, 6vw, 4rem) clamp(1.8rem, 4vw, 2.6rem); }
.ftr__brand .brand { margin-right: 0; }
.ftr__brand .ftr__tag { margin-top: 0.7rem; }
.ftr__brand .ftr__listen { margin-top: 1.4rem; }
.ftr__col { display: grid; align-content: start; gap: 0.55rem; }
.ftr__col .ftr__label { margin-bottom: 0.2rem; }
.ftr__col a { font-size: 0.93rem; color: var(--ink-soft); text-decoration: none; transition: color 0.2s, transform 0.25s var(--ease); }
.ftr__col a:hover { color: var(--blue); transform: translateX(2px); }
.ftr__producer img { height: 24px; width: auto; margin: 0.2rem 0 0.6rem; }
.ftr__producer address { font-style: normal; font-size: 0.9rem; color: var(--ink-soft); line-height: 1.5; }
.ftr__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem 1.5rem; padding-block: 1.1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--muted); }
.ftr__inner nav { display: flex; gap: 1.2rem; }
.ftr__inner a { color: var(--muted); text-decoration: none; }
.ftr__inner a:hover { color: var(--blue); }
@media (max-width: 900px) { .ftr__grid { grid-template-columns: 1fr 1fr; } .ftr__brand { grid-column: 1 / -1; } }
@media (max-width: 520px) { .ftr__grid { grid-template-columns: 1fr; } }
/* De oude .ftr nav-regel zette de paginakolom op één rij; kolom wint. */
.ftr nav.ftr__col { display: grid; flex-wrap: nowrap; gap: 0.55rem; }
.ftr nav.ftr__col a { font-size: 0.93rem; }


/* ---- Eigen audiospeler 2026-09-04 -------------------------------------
   Vervangt de browserspeler. Zelfde pill-taal als de knoppen: ronde play-
   knop, dunne voortgangsbalk met accentgradient, tijd links/rechts, skip
   15/30 en snelheid. Op de kaarten licht, in de hero als glas op blauw. ---- */
.player {
  --pl-bg: var(--white);
  --pl-line: var(--line);
  --pl-ink: var(--ink);
  --pl-muted: var(--muted);
  --pl-track: var(--grey-100);
  --pl-fill: linear-gradient(90deg, var(--blue-dark), var(--blue-light));
  --pl-btn: var(--blue);
  --pl-btn-ink: var(--white);
  --pl-soft: var(--blue-wash);
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.7rem 0.55rem 0.55rem;
  border-radius: 100px;
  background: var(--pl-bg);
  border: 1px solid var(--pl-line);
  box-shadow: var(--shadow-sm);
  color: var(--pl-ink);
  font-family: inherit;
  transition: box-shadow 0.3s var(--ease), border-color 0.2s;
}
.player:hover { box-shadow: var(--shadow-md); }
.player[hidden] { display: none; }
.player audio { display: none; }

.player__toggle {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--pl-btn); color: var(--pl-btn-ink);
  box-shadow: 0 6px 16px -6px rgba(0, 58, 99, 0.45);
  transition: transform 0.25s var(--ease), background-color 0.2s, box-shadow 0.25s var(--ease);
}
.player__toggle:hover { transform: scale(1.06); background: var(--blue-dark); }
.player__toggle:active { transform: scale(0.96); }
.player__toggle svg { width: 18px; height: 18px; fill: currentColor; }
.player.is-playing .player__toggle { box-shadow: 0 0 0 5px var(--pl-soft), 0 6px 16px -6px rgba(0, 58, 99, 0.45); }
.player.is-loading .player__toggle { animation: pl-pulse 1s ease-in-out infinite; }
@keyframes pl-pulse { 50% { opacity: 0.55; } }

.player__skip, .player__rate {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer; color: var(--pl-muted);
  font: 600 0.7rem/1 inherit; font-family: inherit; letter-spacing: 0.02em;
  display: grid; place-items: center; border-radius: 100px;
  transition: color 0.2s, background-color 0.2s, transform 0.2s var(--ease);
}
.player__skip { width: 36px; height: 36px; }
.player__skip svg { width: 26px; height: 26px; overflow: visible; }
.player__skip .player__ring { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.player__skip .player__head { fill: currentColor; }
.player__skip text { fill: currentColor; font-family: inherit; font-size: 7.6px; font-weight: 700; letter-spacing: -0.03em; }
.player__skip:active svg { transform: scale(0.9); }
.player__skip svg { transition: transform 0.2s var(--ease); }
.player__skip:hover, .player__rate:hover { color: var(--pl-ink); background: var(--pl-soft); }
.player__rate { height: 30px; min-width: 42px; padding: 0 0.6rem; font-size: 0.78rem; border: 1px solid var(--pl-line); }

.player__body { flex: 1 1 auto; min-width: 0; display: grid; gap: 0.35rem; }
.player__top { display: flex; align-items: center; gap: 0.55rem; font-size: 0.74rem; color: var(--pl-muted); }
.player__time { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.player__status { flex: 1 1 auto; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.62rem; font-weight: 600; }

/* Vijf balkjes die meebewegen, zusje van de golfvorm uit de hero. */
.player__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; width: 18px; }
.player__bars i { flex: 1; height: 30%; border-radius: 1px; background: var(--pl-btn); opacity: 0.5; transform-origin: bottom; transition: height 0.3s; }
.player.is-playing .player__bars i { animation: pl-eq 0.9s ease-in-out infinite alternate; opacity: 1; }
.player.is-playing .player__bars i:nth-child(2) { animation-duration: 1.2s; animation-delay: -0.3s; }
.player.is-playing .player__bars i:nth-child(3) { animation-duration: 0.7s; animation-delay: -0.5s; }
.player.is-playing .player__bars i:nth-child(4) { animation-duration: 1.05s; animation-delay: -0.15s; }
.player.is-playing .player__bars i:nth-child(5) { animation-duration: 0.85s; animation-delay: -0.6s; }
@keyframes pl-eq { from { height: 25%; } to { height: 100%; } }

/* Voortgang: native range, opgeschoond. --p wordt door JS gezet. */
.player__seek {
  -webkit-appearance: none; appearance: none; width: 100%; height: 18px; margin: 0; background: transparent; cursor: pointer; display: block;
}
.player__seek:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 4px; border-radius: 100px; }
.player__seek::-webkit-slider-runnable-track {
  height: 5px; border-radius: 100px;
  background: linear-gradient(to right, var(--blue-dark), var(--blue-light) var(--p), var(--pl-track) var(--p));
}
.player__seek::-moz-range-track { height: 5px; border-radius: 100px; background: var(--pl-track); }
.player__seek::-moz-range-progress { height: 5px; border-radius: 100px; background: var(--pl-fill); }
.player__seek::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%;
  background: var(--white); border: 3px solid var(--pl-btn); box-shadow: 0 1px 4px rgba(20,23,26,0.25);
  transition: transform 0.2s var(--ease); 
}
.player__seek::-moz-range-thumb { width: 9px; height: 9px; border-radius: 50%; background: var(--white); border: 3px solid var(--pl-btn); box-shadow: 0 1px 4px rgba(20,23,26,0.25); }
.player__seek:hover::-webkit-slider-thumb, .player__seek:active::-webkit-slider-thumb { transform: scale(1.2); }

/* In de hero: glas op het blauw, witte knop. */
.player--hero {
  --pl-bg: rgba(255, 255, 255, 0.09);
  --pl-line: rgba(255, 255, 255, 0.2);
  --pl-ink: var(--white);
  --pl-muted: rgba(255, 255, 255, 0.72);
  --pl-track: rgba(255, 255, 255, 0.22);
  --pl-fill: linear-gradient(90deg, #ffffff, #bfe0f7);
  --pl-btn: var(--white);
  --pl-btn-ink: var(--blue-dark);
  --pl-soft: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.5);
  max-width: 34rem;
}
.player--hero .player__toggle:hover { background: var(--white); }
.player--hero .player__toggle { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.45); }
.player--hero.is-playing .player__toggle { box-shadow: 0 0 0 5px rgba(255,255,255,0.18), 0 8px 18px -8px rgba(0,0,0,0.45); }
.player--hero .player__seek::-webkit-slider-runnable-track { background: linear-gradient(to right, #ffffff, #bfe0f7 var(--p), var(--pl-track) var(--p)); }
.player--hero .player__seek::-webkit-slider-thumb { border-color: var(--white); background: var(--blue-dark); }
.player--hero .player__rate { border-color: var(--pl-line); }
.hero__player .player--hero { margin-top: 1.4rem; }

/* Compact op smalle schermen: skip-knoppen weg, snelheid blijft. */
@media (max-width: 560px) {
  .player { gap: 0.45rem; padding: 0.45rem 0.55rem 0.45rem 0.45rem; }
  .player__skip { display: none; }
  .player__toggle { width: 40px; height: 40px; }
  .player__status { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .player.is-playing .player__bars i, .player.is-loading .player__toggle { animation: none; }
}


/* ---- Over ons: feitenpaneel met iconen en chips (2026-09-04) ----
   Vervangt de kale dl "Opleiding & trainingen / Talen". Elke opleiding wordt
   een eigen chip, met een icoon ervoor, op een zachte blauwe wash met raster. ---- */
.facts { margin-top: 1.4rem; display: grid; gap: 0.7rem; padding: 1rem 1.1rem; border-radius: var(--radius-sm); background: var(--blue-wash); border: 1px solid rgba(0, 110, 186, 0.12); position: relative; overflow: hidden; }
.facts::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: linear-gradient(rgba(0,110,186,0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(0,110,186,0.08) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: linear-gradient(120deg, rgba(0,0,0,0.9), transparent 70%); -webkit-mask-image: linear-gradient(120deg, rgba(0,0,0,0.9), transparent 70%); }
.facts__row { display: grid; grid-template-columns: 38px 1fr; gap: 0.75rem; align-items: start; position: relative; }
.facts__row + .facts__row { padding-top: 0.7rem; border-top: 1px dashed rgba(0, 110, 186, 0.18); }
.facts__icon { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--white); color: var(--blue); box-shadow: var(--shadow-sm); }
.facts__icon svg { width: 20px; height: 20px; fill: currentColor; }
.facts__label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue-dark); margin: 0.15rem 0 0.45rem; }
.facts__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.facts__chips li { font-size: 0.84rem; line-height: 1.2; color: var(--ink); background: var(--white); border: 1px solid rgba(0, 110, 186, 0.16); border-radius: 100px; padding: 0.38rem 0.75rem; transition: transform 0.2s var(--ease), border-color 0.2s; }
.facts__chips li:hover { transform: translateY(-1px); border-color: var(--blue-light); }
@media (max-width: 760px) { .profile__media { max-width: 240px; } .profile--flip .profile__media { justify-self: start; } .facts__row { grid-template-columns: 34px 1fr; } .facts__icon { width: 34px; height: 34px; } }


/* ---- Over ons: moderne kaarten (2026-09-04) -----------------------------
   Gradient-rand, zachte glow, ghost-nummer, zwevend portret met offset-frame
   en Host-badge met equalizer. Motieven komen uit de hero (frame, golfbalken). ---- */
.profile { position: relative; overflow: hidden; isolation: isolate; border: 1px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    linear-gradient(135deg, rgba(47,151,224,0.55), rgba(223,227,232,0.9) 40%, rgba(223,227,232,0.9) 60%, rgba(0,110,186,0.45)) border-box;
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease); }
.profile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* glow + raster op de achtergrond */
.profile::before { content: ""; position: absolute; z-index: -1; width: 520px; height: 520px; right: -200px; top: -240px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(47,151,224,0.22), transparent 68%); transition: transform 0.6s var(--ease); }
.profile--flip::before { right: auto; left: -200px; }
.profile:hover::before { transform: scale(1.15); }
.profile::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(0,110,186,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,110,186,0.07) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 55%); mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 55%); }
.profile--flip::after { -webkit-mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 55%); mask-image: radial-gradient(ellipse at 0% 0%, #000 0%, transparent 55%); }
/* ghost-nummer */
.profile__body { position: relative; }
.profile__num { position: absolute; top: -0.35em; right: 0; font-family: "Fraunces", Georgia, serif; font-weight: 700; font-size: clamp(4rem, 9vw, 7rem); line-height: 1; letter-spacing: -0.04em; color: transparent;
  background: linear-gradient(180deg, rgba(0,110,186,0.14), rgba(0,110,186,0.02)); -webkit-background-clip: text; background-clip: text; pointer-events: none; user-select: none; }
/* portret: zwevend, offset frame, badge */
.profile__media { overflow: visible; box-shadow: none; }
.profile__media img { border-radius: var(--radius-sm); box-shadow: var(--shadow-md); position: relative; z-index: 1; transition: transform 0.6s var(--ease); }
.profile:hover .profile__media img { transform: translate(-4px, -4px); }
.profile__media::after { content: none; }
.profile__media::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: var(--radius-sm); z-index: 0;
  background: linear-gradient(135deg, var(--blue-light), var(--blue-deep)); opacity: 0.9;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; padding: 2px; }
.profile--flip .profile__media::before { inset: 14px 14px -14px -14px; }
.profile--flip:hover .profile__media img { transform: translate(4px, -4px); }
.profile__badge { position: absolute; z-index: 2; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.42rem 0.8rem 0.42rem 0.6rem; border-radius: 100px;
  background: rgba(255,255,255,0.78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.7); box-shadow: var(--shadow-sm);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue-dark); }
.profile--flip .profile__badge { left: auto; right: 12px; }
.bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.bars b { display: block; width: 3px; height: 40%; border-radius: 2px; background: var(--blue); animation: eq 1.1s ease-in-out infinite alternate; transform-origin: bottom; }
.bars b:nth-child(2) { animation-duration: 0.8s; animation-delay: -0.3s; height: 90%; }
.bars b:nth-child(3) { animation-duration: 1.3s; animation-delay: -0.6s; height: 60%; }
.bars b:nth-child(4) { animation-duration: 0.95s; animation-delay: -0.15s; height: 75%; }
/* quote als tegel met groot aanhalingsteken */
.profile__body blockquote { position: relative; margin-top: 1.4rem; padding: 1.1rem 1.2rem 1.1rem 3.1rem; border-left: 0; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--grey-50), var(--white)); border: 1px solid var(--line); }
.profile__body blockquote::before { content: "\201C"; position: absolute; left: 0.8rem; top: -0.1rem; font-family: "Fraunces", Georgia, serif; font-size: 4.6rem; font-weight: 700; opacity: 0.9; line-height: 1; color: var(--blue-light); font-style: normal; }
/* feitenpaneel: lichte gradient-rand i.p.v. vlakke lijn */
.facts { border: 1px solid transparent;
  background: linear-gradient(var(--blue-wash), var(--blue-wash)) padding-box, linear-gradient(135deg, rgba(47,151,224,0.6), rgba(0,110,186,0.12) 50%, rgba(47,151,224,0.5)) border-box; }
@media (max-width: 760px) {
  .profile__media { margin: 0 0 1.2rem 0; }
  .profile__media::before, .profile--flip .profile__media::before { inset: 12px -12px -12px 12px; }
  .profile__num { font-size: 4rem; top: -0.2em; }
  .profile:hover .profile__media img, .profile--flip:hover .profile__media img { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .bars b { animation: none; } }

/* Platformchips: echte beeldmerken (designcheck Dylan 22-09), gevuld in plaats van lijnicoon. */
.chip svg.chip__logo { width: 14px; height: 14px; fill: currentColor; stroke: none; }