/* Lettertypen op de eigen server (geen verbinding met Google, geen IP-adres naar Google).
   Montserrat en Open Sans, SIL Open Font License 1.1, zie fonts/LEESMIJ.txt. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/montserrat-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500 800; font-display: swap; src: url('../fonts/montserrat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/open-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/open-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ============================================
   Podcast Studio Westland — Design tokens
   ============================================ */
:root {
  --color-yellow: #FFEE52;
  --color-yellow-dark: #F5DE2C;
  --color-purple: #4C2882;        /* hoofd paars (zoals originele site) */
  --color-purple-dark: #37206A;
  --color-purple-light: #8A72D0;  /* lichtpaars accent */
  --color-ink: #15131C;
  --color-ink-soft: #4A4657;
  --color-bg: #FFFFFF;
  --color-bg-soft: #F5F2FB;       /* zeer lichte lavendel voor kaarten/secties */
  --color-bg-yellow: #FCFAE6;
  --color-line: #E7E1F2;

  --font-display: 'Montserrat', 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', sans-serif;

  --radius-lg: 14px;
  --radius-md: 10px;
  --radius-sm: 6px;

  --shadow-card: 0 10px 30px rgba(21, 19, 28, 0.08);
  --shadow-hover: 0 16px 40px rgba(21, 19, 28, 0.14);

  /* Podcastcovers als losse kaartjes: kleine hoeken en een schaduw die naar
     linksonder valt, alsof het licht van rechtsboven komt. Nagemeten op het
     voorbeeld dat Braihim aanleverde (29-09-2026), in onze eigen donkere kleur.
     Dit is de sterkte voor een lichte achtergrond, zoals in het voorbeeld. */
  --cover-hoek: 6px;
  --cover-schaduw: -10px 14px 15px -2px rgba(20, 16, 30, 0.5);
  --cover-schaduw-hover: -13px 19px 20px -3px rgba(20, 16, 30, 0.5);

  --container: 1180px;
}

* { box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 .5em;
  letter-spacing: -0.02em;
}

p { margin: 0 0 1em; color: var(--color-ink-soft); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: 96px 0;
}

.section--tight { padding: 64px 0; }

.section--soft { background: var(--color-bg-soft); }
.section--yellow { background: var(--color-bg-yellow); }

/* Volle paarse secties (zoals de originele site) */
.section--purple { background: var(--color-purple); }
.section--purple-light { background: var(--color-purple-light); }
.section--purple-deep {
  background: linear-gradient(165deg, var(--color-purple-dark) 0%, #2a1650 100%);
  /* Op donkerpaars: een zachte schaduw met een kort contactschaduwtje eronder.
     Op 29-09-2026 gehalveerd op verzoek van Braihim. */
  --cover-schaduw: -10px 14px 15px -2px rgba(20, 16, 30, 0.45), -2px 3px 4px rgba(20, 16, 30, 0.2);
  --cover-schaduw-hover: -13px 19px 20px -3px rgba(20, 16, 30, 0.45), -3px 4px 6px rgba(20, 16, 30, 0.2);
}

.section--purple .section-head h2,
.section--purple-light .section-head h2,
.section--purple-deep .section-head h2 { color: #fff; }
.section--purple .section-head p,
.section--purple-light .section-head p,
.section--purple-deep .section-head p { color: rgba(255,255,255,0.82); }
.section--purple .eyebrow,
.section--purple-light .eyebrow,
.section--purple-deep .eyebrow {
  background: rgba(255,255,255,0.14);
  color: var(--color-yellow);
}

/* Podcastcovers op donkerpaars leesbaar houden */
.section--purple-deep .podcast-meta h3 { color: #fff; }
.section--purple-deep .podcast-cat { color: var(--color-yellow); }

/* Kaarten op lichte secties wit houden voor contrast */
.section--soft .contact-form { background: #fff; }
.section--soft .faq-question .plus { background: #fff; }
.section--soft .testimonial-card { background: #fff; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-purple);
  background: rgba(76, 40, 130, 0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 16px;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 56px;
  text-align: center;
}

.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); }
.section-head p { font-size: 17px; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-yellow);
  color: var(--color-ink);
  box-shadow: 0 8px 20px rgba(255, 238, 82, 0.45);
}
.btn-primary:hover { transform: translateY(-2px); background: var(--color-yellow-dark); box-shadow: 0 12px 26px rgba(255, 238, 82, 0.55); }

.btn-dark {
  background: var(--color-ink);
  color: #fff;
}
.btn-dark:hover { transform: translateY(-2px); background: #000; }

.btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); border-color: #fff; }

.btn-block { width: 100%; }

/* ============================================
   Header
   ============================================ */
/* Navigatie (29-09-2026): een zwevende, donkere balk met ronde hoeken. De
   pagina waar je bent krijgt de gele accentlijn uit het brandbook, de
   hoofdactie is een gele knop. Alle doelen zijn minstens 44 pixels hoog, de
   focusrand is geel en het menu werkt met het toetsenbord. */
.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 200;
  padding: 12px 18px;
  border-radius: 8px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

#inhoud { display: block; outline: none; }

.site-header {
  position: fixed;
  top: 14px;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 16px;
  pointer-events: none; /* alleen de balk zelf vangt klikken, niet de lucht ernaast */
}

.nav-bar {
  pointer-events: auto;
  max-width: var(--container);
  margin: 0 auto;
  min-height: 68px;
  padding: 10px 10px 10px 23px; /* het logo lijnt uit met de tekst van de pagina */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 14px;
  background: rgba(21, 19, 28, 0.78);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 10px 30px rgba(21, 19, 28, 0.18);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.site-header.is-scrolled .nav-bar,
.site-header.nav-open .nav-bar {
  background: rgba(21, 19, 28, 0.94);
  box-shadow: 0 14px 40px rgba(21, 19, 28, 0.28);
}

/* Eenmaal aan het scrollen: rookglas. De balk is 40% dekkend en dempt wat
   erachter langs schuift, zodat de witte tekst ook boven lichte secties
   leesbaar blijft. Staat het menu open, dan is de balk dekkend, net als het
   menu zelf. Een browser zonder glaseffect houdt de dekkende balk hierboven. */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-scrolled:not(.nav-open) .nav-bar {
    background: rgba(20, 16, 30, 0.4);
    -webkit-backdrop-filter: blur(18px) saturate(160%) brightness(0.55);
    backdrop-filter: blur(18px) saturate(160%) brightness(0.55);
    box-shadow: 0 10px 30px rgba(21, 19, 28, 0.16);
  }
}
/* Wie op zijn apparaat minder doorzichtigheid heeft ingesteld, krijgt een
   dekkende balk. */
@media (prefers-reduced-transparency: reduce) {
  .site-header .nav-bar,
  .site-header.is-scrolled:not(.nav-open) .nav-bar,
  .site-header--affiche:not(.is-scrolled):not(.nav-open) .nav-bar {
    background: #15131C;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Boven het affiche op de homepagina is het glas lichter, zodat de foto
   doorloopt tot de bovenrand. De gele knop staat dan al in het affiche, dus de
   knop in de balk is omlijnd. Schuift de knop van het affiche uit beeld, dan
   wordt die in de balk geel. */
.site-header--affiche:not(.is-scrolled):not(.nav-open) .nav-bar {
  background: rgba(20, 16, 30, 0.3); /* 30% dekkend */
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
}
.site-header--affiche:not(.knop-uit-beeld) .header-actions .nav-cta {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5);
}
.site-header--affiche:not(.knop-uit-beeld) .header-actions .nav-cta:hover {
  background: #fff;
  color: var(--color-ink);
  box-shadow: none;
}

/* Logo: het beeldmerk met het woordmerk ernaast, zoals in het brandbook.
   Het volledige logo is onder de 150 pixels niet leesbaar, daarom staat de
   naam hier als tekst. */
.logo {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-display);
}

.logo-icon { display: none; }

.logo-img { display: block; height: 44px; width: auto; }

.logo-word {
  font-weight: 800;
  font-size: 13px;
  line-height: 1.14;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.logo-word span { display: block; color: var(--color-yellow); }


.nav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.8);
  transition: color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.nav-links a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.09);
}

/* Waar je bent: witte tekst met de gele accentlijn eronder. */
.nav-links a.active:not(.nav-cta),
.nav-links a[aria-current="page"]:not(.nav-cta) {
  color: #fff;
  font-weight: 600;
}
.nav-links a.active:not(.nav-cta)::after,
.nav-links a[aria-current="page"]:not(.nav-cta)::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}

/* In de balk staan de knop en de socials niet in de lijst; in het menu op een
   telefoon wel. */
.nav-menu-cta,
.nav-social { display: none; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.nav-cta,
.nav-links a.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  box-shadow: none;
  transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.nav-cta:hover,
.nav-links a.nav-cta:hover {
  background: #fff;
  color: var(--color-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(255, 238, 82, 0.28);
}

.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 3px;
}

.social-icons {
  display: flex;
  align-items: center;
  gap: 16px;
}
.social-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  transition: color .15s ease, opacity .15s ease;
  opacity: 0.9;
}
.social-icons a:hover { opacity: 1; color: var(--color-purple); }
.social-icons svg { width: 17px; height: 17px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.09);
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle:hover { background: rgba(255, 255, 255, 0.16); }
.nav-toggle span {
  width: 22px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.site-header.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Iets minder breed: de links en de knop krijgen wat minder lucht, de naam
   blijft staan. */
@media (max-width: 1240px) {
  .nav-bar { gap: 10px; padding-left: 18px; }
  .logo-word { font-size: 12px; }
  .nav-links { gap: 0; }
  .nav-links a { padding: 0 10px; font-size: 13.5px; }
  .nav-links a.active:not(.nav-cta)::after,
  .nav-links a[aria-current="page"]:not(.nav-cta)::after { left: 10px; right: 10px; }
  .nav-cta,
  .nav-links a.nav-cta { padding: 0 16px; font-size: 13.5px; }
}

/* Tablet en telefoon: de links klappen in een menu onder de balk. */
@media (max-width: 1040px) {
  .header-actions .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .logo-word { font-size: 13px; }

  .nav-links {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px;
    border-radius: 14px;
    background: #15131C;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 50px rgba(21, 19, 28, 0.4);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .site-header { position: fixed; }
  .nav-bar { position: relative; }
  .site-header.nav-open .nav-links { display: flex; pointer-events: auto; }

  .nav-links a { min-height: 50px; font-size: 16px; padding: 0 16px; }

  /* In het menu staat de accentlijn links van de pagina waar je bent. */
  .nav-links a.active:not(.nav-cta),
  .nav-links a[aria-current="page"]:not(.nav-cta) { background: rgba(255, 255, 255, 0.07); }
  .nav-links a.active:not(.nav-cta)::after,
  .nav-links a[aria-current="page"]:not(.nav-cta)::after {
    left: 0;
    right: auto;
    top: 13px;
    bottom: 13px;
    width: 3px;
    height: auto;
  }

  .nav-menu-cta { display: block; margin-top: 8px; }
  .nav-links a.nav-cta { width: 100%; min-height: 52px; font-size: 16px; }

  .nav-social {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
  }
  .nav-social a { width: 48px; padding: 0; justify-content: center; color: rgba(255, 255, 255, 0.78); }
  .nav-social svg { width: 20px; height: 20px; }
}

@media (max-width: 380px) {
  .logo-img { height: 40px; }
  .logo-word { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-bar, .nav-links a, .nav-cta, .nav-toggle span, .skip-link { transition: none; }
}

/* ============================================
   Hero: het affiche
   ============================================ */
/* Eén foto, één kop, één knop. Links de tekst op donker met de paarse gloed
   uit het brandbook, rechts de foto die naar links in het donker vervloeit.
   De tekst is bewust klein en rustig gehouden: de foto doet het werk.

   Een andere foto? Vervang de bestanden in images/hero/ en stel hieronder het
   scherpe punt bij: de plek van het gezicht, van links en van boven. */
.hero {
  --hero-nacht: #14101E;
  --hero-focus: 50% 30%;          /* brede foto's, laptop en groter: het gezicht staat in elke dia op 55% van links */
  --hero-focus-staand: 50% 10%;   /* staande foto's, telefoon */
  --hero-foto-breedte: 64%;

  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: clamp(580px, calc(100svh - 64px), 1040px); /* ruimte voor de speler eronder */
  overflow: hidden;
  background: var(--hero-nacht);
  color: #fff;
}

/* De paarse gloed achter de tekst. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(54% 64% at 14% 46%, rgba(76, 40, 130, 0.66), transparent 72%),
    radial-gradient(36% 46% at 2% 100%, rgba(138, 114, 208, 0.18), transparent 70%);
}

.hero-foto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--hero-foto-breedte);
  z-index: -2;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 14%, rgba(0, 0, 0, 0.82) 30%, #000 42%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.3) 14%, rgba(0, 0, 0, 0.82) 30%, #000 42%);
}
.hero-dia {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease-in-out;
}
.hero-dia.actief { opacity: 1; }
.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--dia-focus, var(--hero-focus));
}

/* Over het geheel: donkerder bovenaan voor het menu en onderaan als overgang
   naar de volgende sectie, met een fijne korrel erover zodat foto en vlak één
   beeld worden. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.2'/%3E%3C/svg%3E") 0 0 / 220px 220px,
    linear-gradient(180deg, rgba(20, 16, 30, 0.7) 0%, rgba(20, 16, 30, 0) 24%),
    linear-gradient(0deg, rgba(20, 16, 30, 0.85) 0%, rgba(20, 16, 30, 0) 24%);
}

.hero-inhoud {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 124px; /* ruimte voor het menu */
  padding-bottom: 120px; /* even veel als boven, zo staat de tekst in het midden */
}

.hero-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.hero-label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}

/* De kop is de slogan van de eindkaart uit de commercial: wit boven, geel
   eronder. Het label hoort bij de kop, zo staat het zoekwoord in de h1. */
.hero h1 {
  margin: 0 0 12px;
  color: #fff;
}
.hero-kop {
  display: block;
  font-weight: 700;
  font-size: clamp(32px, min(4.3vw, 8.2vh), 62px);
  line-height: 1.04;
  letter-spacing: -0.03em;
}
.hero-kop .regel { display: block; white-space: nowrap; }
.hero-kop .geel { color: var(--color-yellow); }

.hero .hero-sub {
  max-width: 580px;
  margin: 0 0 22px;
  text-wrap: balance;
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}

.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.hero .hero-actions {
  align-items: center;
  gap: 12px 26px;
  margin-bottom: 0;
}

.hero .btn-primary {
  min-height: 50px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  box-shadow: none;
}

.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.9);
  transition: color .15s ease;
}
.hero-link svg { width: 17px; height: 17px; transition: transform .2s ease; }
.hero-link:hover { color: var(--color-yellow); }
.hero-link:hover svg { transform: translateX(4px); }

.hero a:focus-visible {
  outline: 3px solid var(--color-yellow);
  outline-offset: 4px;
}

/* Binnenkomst: de regels schuiven één voor één omhoog, de foto zakt op zijn
   plek. Alleen voor wie beweging aan heeft staan. */
@media (prefers-reduced-motion: no-preference) {
  .hero-label,
  .hero-kop .regel,
  .hero .hero-sub,
  .hero .hero-actions {
    animation: hero-op .7s cubic-bezier(.2, .7, .2, 1) both;
  }
  .hero-label { animation-delay: .05s; }
  .hero-kop .regel:nth-child(1) { animation-delay: .12s; }
  .hero-kop .regel:nth-child(2) { animation-delay: .2s; }
  .hero .hero-sub { animation-delay: .3s; }
  .hero .hero-actions { animation-delay: .4s; }
  /* Elke dia zoomt langzaam in zolang hij aan staat en zoomt net zo langzaam
     terug terwijl hij wegvaagt. Een overgang in plaats van een animatie, zodat
     er bij de wissel niets terugspringt. */
  .hero-dia img { transform: scale(1); transition: transform 6s linear; }
  .hero-dia.actief img { transform: scale(1.05); }
}
@keyframes hero-op {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
@keyframes hero-foto {
  from { transform: scale(1.06); }
  to { transform: none; }
}

/* Lage schermen, zoals een kleine laptop: minder lucht, zodat het hele affiche
   in beeld past. */
@media (min-width: 761px) and (max-height: 700px) {
  .hero-inhoud { padding-top: 104px; padding-bottom: 72px; }
  .hero-label { margin-bottom: 10px; }
  .hero h1 { margin-bottom: 10px; }
  .hero .hero-sub { margin-bottom: 18px; }
  .hero .btn-primary { min-height: 48px; }
}

/* Tablet: de tekst krijgt iets minder ruimte. */
@media (max-width: 1040px) {
  .hero { --hero-focus: 55% 30%; }
  .hero .hero-sub { max-width: 400px; }
}

/* Telefoon: het affiche staand. Foto boven, tekst eronder, de kop zo groot
   als het scherm toelaat. */
@media (max-width: 760px) {
  /* Twee rijen: de foto en de tekst. De foto krijgt alle ruimte boven de
     tekst en loopt er een stukje onderdoor. */
  .hero {
    display: grid;
    grid-template-rows: minmax(250px, 1fr) auto;
    min-height: max(600px, calc(100svh - 84px)); /* de speler past zo in het eerste scherm */
  }

  .hero::before {
    background: radial-gradient(90% 46% at 40% 76%, rgba(76, 40, 130, 0.7), transparent 74%);
  }

  .hero-foto {
    position: relative;
    grid-row: 1;
    width: 100%;
    margin-bottom: -70px;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgba(0, 0, 0, 0.4) calc(100% - 120px), transparent calc(100% - 58px));
    mask-image: linear-gradient(180deg, #000 calc(100% - 200px), rgba(0, 0, 0, 0.4) calc(100% - 120px), transparent calc(100% - 58px));
  }
  .hero-foto img { object-position: var(--dia-focus-staand, var(--hero-focus-staand)); }

  .hero::after {
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)' opacity='.2'/%3E%3C/svg%3E") 0 0 / 220px 220px,
      linear-gradient(180deg, rgba(20, 16, 30, 0.62) 0%, rgba(20, 16, 30, 0) 20%);
  }

  .hero-inhoud {
    grid-row: 2;
    justify-content: flex-start;
    padding-top: 0;
    padding-bottom: 64px; /* de speler ligt over de onderrand */
  }

  .hero-label {
    gap: 10px;
    margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .hero-label::before { width: 22px; height: 3px; }

  .hero h1 { margin-bottom: 9px; }
  .hero-kop {
    font-size: clamp(27px, 8.5vw, 52px);
    line-height: 1.06;
  }

  .hero .hero-sub { max-width: none; margin-bottom: 18px; font-size: 15.5px; }

  .hero .hero-actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ============================================
   Luister: audiospeler onder het affiche
   ============================================ */
/* Een witte speler die half over de onderrand van het affiche ligt. Het affiche
   is daarom 64 pixels minder hoog dan het scherm, zodat de speler bij het openen
   van de pagina helemaal in beeld staat. De bediening komt uit js/main.js. */
.luister {
  position: relative;
  z-index: 5;
  margin-top: -44px;
}

.speler {
  display: grid;
  grid-template-columns: 64px minmax(0, 1.2fr) minmax(280px, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 12px 22px 12px 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(20, 16, 30, 0.5), 0 2px 6px rgba(20, 16, 30, 0.08);
  color: var(--color-ink);
}

.speler-foto {
  width: 64px;
  height: 64px;
  border-radius: var(--cover-hoek);
  object-fit: cover;
  box-shadow: -3px 5px 8px -2px rgba(20, 16, 30, 0.25);
}

.speler-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}
.speler-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 3px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-purple);
}
.speler-titel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
}
.speler-meta { margin-top: 2px; font-size: 13px; color: var(--color-ink-soft); }
.speler-meta-duur { display: none; } /* alleen op de telefoon, daar zijn de tijden weg */

/* Vier balkjes naast het label; ze bewegen als de speler speelt. */
.speler-golf { display: inline-flex; align-items: flex-end; gap: 2px; height: 10px; }
.speler-golf i { width: 2px; height: 40%; border-radius: 1px; background: currentColor; }
.speler-golf i:nth-child(2) { height: 100%; }
.speler-golf i:nth-child(3) { height: 65%; }
.speler-golf i:nth-child(4) { height: 85%; }
@media (prefers-reduced-motion: no-preference) {
  .speler.speelt .speler-golf i { animation: speler-golf .9s ease-in-out infinite alternate; }
  .speler.speelt .speler-golf i:nth-child(2) { animation-delay: -.3s; }
  .speler.speelt .speler-golf i:nth-child(3) { animation-delay: -.6s; }
  .speler.speelt .speler-golf i:nth-child(4) { animation-delay: -.15s; }
}
@keyframes speler-golf { from { height: 20%; } to { height: 100%; } }

.speler-bediening { display: flex; flex-direction: column; gap: 4px; }
.speler-knoppen { display: flex; align-items: center; justify-content: center; gap: 14px; }

.speler button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink);
  cursor: pointer;
}
.speler button:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 2px; border-radius: 50%; }

.speler .speler-afspelen {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #14101E;
  color: #fff;
  transition: background-color .15s ease, transform .15s ease;
}
.speler .speler-afspelen:hover { background: var(--color-purple); transform: scale(1.04); }
.speler-afspelen svg { width: 20px; height: 20px; fill: currentColor; }
.speler-afspelen .icoon-pauze,
.speler.speelt .speler-afspelen .icoon-afspelen { display: none; }
.speler.speelt .speler-afspelen .icoon-pauze { display: block; }

.speler-sprong { width: 36px; height: 36px; border-radius: 50%; transition: background-color .15s ease; }
.speler .speler-sprong:hover { background: var(--color-bg-soft); }
.speler-sprong svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.speler-sprong text {
  fill: currentColor;
  stroke: none;
  font-family: var(--font-display);
  font-size: 7px;
  font-weight: 700;
  text-anchor: middle;
}

.speler-tijdlijn { display: flex; align-items: center; gap: 10px; }
.speler-tijd {
  min-width: 36px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}
.speler-tijd:last-child { text-align: right; }

/* De balken: een dunne lijn met een paarse vulling tot waar je bent. */
.speler input[type="range"] {
  --voortgang: 0%;
  flex: 1;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.speler input[type="range"]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--color-purple) var(--voortgang), #E6E0F0 var(--voortgang));
}
.speler input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: #E6E0F0; }
.speler input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--color-purple); }
.speler input[type="range"]::-webkit-slider-thumb {
  width: 12px;
  height: 12px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--color-purple);
  opacity: 0;
  transition: opacity .15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.speler input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--color-purple);
  opacity: 0;
  transition: opacity .15s ease;
}
.speler input[type="range"]:hover::-webkit-slider-thumb,
.speler input[type="range"]:focus-visible::-webkit-slider-thumb { opacity: 1; }
.speler input[type="range"]:hover::-moz-range-thumb,
.speler input[type="range"]:focus-visible::-moz-range-thumb { opacity: 1; }
.speler input[type="range"]:focus-visible { outline: 2px solid var(--color-purple); outline-offset: 4px; border-radius: 4px; }

.speler-volume { display: flex; align-items: center; gap: 8px; }
.speler-geluid { width: 32px; height: 32px; border-radius: 50%; }
.speler-geluid svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.speler-geluid svg path:first-child { fill: currentColor; stroke: none; }
.speler-geluid .icoon-stil,
.speler.stil .speler-geluid .icoon-geluid { display: none; }
.speler.stil .speler-geluid .icoon-stil { display: block; }
.speler input.speler-volumebalk { flex: none; width: 84px; }
.speler input.speler-volumebalk::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--color-purple-light) var(--voortgang), #E6E0F0 var(--voortgang));
}
.speler input.speler-volumebalk::-moz-range-progress { background: var(--color-purple-light); }

/* Tablet: geen volumeregelaar, die zit op het apparaat zelf. */
@media (max-width: 1040px) {
  .speler { grid-template-columns: 64px minmax(0, 1.2fr) minmax(250px, 1fr); }
  .speler-volume { display: none; }
}

/* Telefoon: foto, titel en afspeelknop op één regel, de tijdlijn als dunne
   balk eronder. Terug- en vooruitspringen zit dan in de knoppen van het
   vergrendelscherm. */
@media (max-width: 760px) {
  .luister { margin-top: -38px; }
  .speler {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    grid-template-areas: "foto tekst knop" "balk balk balk";
    row-gap: 10px;
    column-gap: 14px;
    padding: 10px 14px 12px 10px;
    border-radius: 13px;
  }
  .speler-foto { grid-area: foto; width: 52px; height: 52px; }
  .speler-tekst { grid-area: tekst; }
  .speler-bediening,
  .speler-knoppen,
  .speler-tijdlijn { display: contents; }
  .speler-afspelen { grid-area: knop; }
  .speler .speler-sprong,
  .speler .speler-tijd { display: none; }
  .speler-balk { grid-area: balk; width: 100%; }
  .speler-titel {
    display: -webkit-box;
    font-size: 14.5px;
    line-height: 1.25;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .speler-meta-duur { display: inline; }
}

/* ============================================
   Intro / value props
   ============================================ */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

.value-card {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}

.value-card .icon {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--color-ink);
  color: var(--color-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.value-card h3 { font-size: 18px; margin-bottom: 8px; }
.value-card p { font-size: 15px; margin: 0; }

.intro-flex {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.intro-flex .eyebrow { margin-bottom: 16px; }
.intro-flex h2 { font-size: clamp(28px, 3.2vw, 38px); }

.intro-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--color-purple), #2a1a3d);
}

.intro-media .ph-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.5);
  font-family: var(--font-display);
  font-size: 14px;
  text-align: center;
  padding: 20px;
}

.intro-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* ============================================
   Wie wij zijn (homepagina)
   ============================================ */
/* Rustig op wit, direct onder de speler. Twee gelijke kolommen: links de kop
   met Onze achtergrond, rechts het verhaal. Eronder de drie diensten. Alle
   tekst staat open in beeld. Geen kaarten of vlakken, alleen dunne lijnen en
   typografie. De buitenranden lopen gelijk met het logo, het affiche en de
   speler erboven. */
.section.intro {
  --intro-lijn: #ECE7F4;
  padding: 96px 0 72px;
  background: #fff;
}
.intro-raster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 72px;
  align-items: start;
}
.intro-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.intro-label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}
.intro-kop h2 {
  margin: 0;
  font-weight: 700;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

/* Onze achtergrond: kleiner gezet onder de kop, met een dunne lijn erboven. */
.intro-achtergrond {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--intro-lijn);
}
.intro-achtergrond h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-purple);
}
.intro-achtergrond p { margin: 0; font-size: 12.5px; line-height: 1.65; text-wrap: pretty; }
.intro-achtergrond p + p { margin-top: 10px; }

/* Het verhaal. De eerste regel staat op de hoogte van de kop links. */
.intro-tekst { padding-top: 33px; }
.intro-tekst p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.intro-tekst .intro-lead {
  margin-bottom: 16px;
  font-size: clamp(17px, 1.4vw, 19.5px);
  line-height: 1.55;
  color: var(--color-ink);
}
.intro-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  margin-top: 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-purple);
}
.intro-link svg { transition: transform .2s ease; }
.intro-link:hover svg { transform: translateX(4px); }
.intro-link:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 4px; border-radius: 4px; }

.intro-diensten {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 48px;
  list-style: none;
  margin: 48px 0 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--intro-lijn);
}
.intro-diensten > li { display: flex; align-items: flex-start; gap: 14px; }
.intro-diensten > li > svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  fill: none;
  stroke: var(--color-purple);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.intro-diensten h3 { margin: 0 0 4px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.intro-diensten p { margin: 0; font-size: 14.5px; line-height: 1.6; }
.bijeen { white-space: nowrap; } /* woord met streepjes niet over twee regels */

/* Publicatie op: de logo's in hun merkkleur, zonder kader, klein en dicht op
   elkaar, met de naam eronder. */
.platformen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.platformen li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-width: 52px; /* Apple Podcasts mag over twee regels, dan blijft alles op één rij */
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  color: var(--color-ink-soft);
}
.platform-logo { display: block; }
.platform-logo img { display: block; width: 18px; height: 18px; }

/* Tablet en telefoon: alles onder elkaar in leesvolgorde, Onze achtergrond na
   het verhaal. */
@media (max-width: 980px) {
  .section.intro { padding: 80px 0 64px; }
  .intro-raster { display: flex; flex-direction: column; }
  .intro-kop { display: contents; }
  .intro-label { order: 1; }
  .intro-kop h2 { order: 2; margin-bottom: 18px; }
  .intro-tekst { order: 3; padding-top: 0; }
  .intro-achtergrond { order: 4; margin-top: 24px; }
  .intro-diensten { grid-template-columns: 1fr; margin-top: 36px; padding-top: 0; }
  .intro-diensten > li { padding: 20px 0; border-bottom: 1px solid var(--intro-lijn); }
}
@media (max-width: 760px) {
  .section.intro { padding-top: 64px; padding-bottom: 48px; }
  .intro-tekst .intro-lead { font-size: 16.5px; }
  .intro-tekst p { font-size: 15px; }
}

/* ============================================
   Waarom wij (homepagina)
   ============================================ */
/* Links een staande studiofoto met een kleine foto van een opname op locatie
   eroverheen, rechts de vier redenen als genummerde lijst met dunne lijnen.
   Zelfde typografie als de introductie. De foto blijft staan als je door de
   redenen scrolt. */
.section.waarom { padding: 96px 0; background: #fff; }
.waarom-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: 80px;
  align-items: start;
}

.waarom-beeld {
  position: sticky;
  top: 112px;
  margin: 0 0 40px;
}
.waarom-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 30, 0.45);
}
.waarom-inzet {
  position: absolute;
  right: -28px;
  bottom: -36px;
  width: 44%;
  max-width: 190px;
  padding: 6px;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(20, 16, 30, 0.4);
}
.waarom-inzet img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.waarom-inzet span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 16, 30, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.waarom-tekst h2 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.waarom-lead {
  max-width: 58ch;
  margin: 0 0 32px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--color-ink);
  text-wrap: pretty;
}

.waarom-lijst { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--color-line); }
.waarom-lijst li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 20px 0 22px;
  border-top: 1px solid var(--color-line);
}
.waarom-nr {
  padding-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-purple);
}
.waarom-lijst h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.waarom-lijst p { max-width: 60ch; margin: 0; font-size: 15.5px; line-height: 1.65; text-wrap: pretty; }

.waarom-slot { margin-top: 28px; }
.waarom-bewijs { margin: 0 0 20px; font-size: 14px; color: var(--color-ink-soft); }
.waarom-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.waarom .btn-dark { min-height: 50px; padding: 0 24px; font-size: 15px; }
.waarom .btn svg,
.waarom .intro-link svg { transition: transform .2s ease; }
.waarom .btn:hover svg { transform: translateX(3px); }
.waarom .btn-dark:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }

/* Tablet en telefoon: de foto boven de tekst, liggend en niet meer vast. */
@media (max-width: 980px) {
  .section.waarom { padding: 80px 0; }
  .waarom-raster { display: block; }
  .waarom-beeld { position: relative; top: auto; margin: 0 0 64px; }
  .waarom-foto { aspect-ratio: 16 / 10; object-position: 50% 45%; }
  .waarom-inzet { right: 16px; bottom: -32px; width: 30%; max-width: 150px; }
}
@media (max-width: 760px) {
  .section.waarom { padding: 64px 0; }
  .waarom .intro-label { gap: 10px; font-size: 10.5px; letter-spacing: 0.13em; }
  .waarom .intro-label::before { width: 22px; }
  .waarom-foto { aspect-ratio: 4 / 3; border-radius: 11px; }
  .waarom-inzet { right: 12px; width: 36%; }
  .waarom-inzet span { left: 10px; bottom: 10px; font-size: 10px; }
  .waarom-lijst li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; }
  .waarom-lijst h3 { font-size: 17px; }
  .waarom-lijst p { font-size: 15px; }
}

/* ============================================
   Pricing
   ============================================ */
/* Pakketten (29-09-2026): rustige witte kaarten met een dunne rand en een
   zachte schaduw. De Pro-kaart is donker met de paarse gloed uit het
   brandbook en een vage geluidsgolf. De knop staat direct onder de prijs,
   daarna een stippellijn en wat je krijgt. Dankzij subgrid liggen naam, prijs,
   knop en lijst in alle drie de kaarten op dezelfde hoogte. Geen euroteken in
   beeld; voor schermlezers staat het woord euro er wel. */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.pricing-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(7, auto);
  column-gap: 24px;
}
/* Zachte paarse gloed achter de middelste kaart. */
.pricing-grid::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62%;
  height: 92%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(138, 114, 208, 0.34), transparent);
  filter: blur(24px);
  pointer-events: none;
}

.price-card {
  --price-tekst: var(--color-ink);
  --price-zacht: var(--color-ink-soft);
  --price-lijn: #E3DCEF;
  --price-vlak: #F3EFFA;
  --price-accent: var(--color-purple);
  --price-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234C2882' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  position: relative;
  display: grid;
  grid-row: span 7;
  grid-template-rows: subgrid;
  padding: 28px 28px 32px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #ECE7F4;
  box-shadow: 0 1px 2px rgba(20, 16, 30, 0.04), 0 18px 40px -22px rgba(20, 16, 30, 0.22);
  color: var(--price-tekst);
}

.price-card.featured {
  --price-tekst: #fff;
  --price-zacht: rgba(255, 255, 255, 0.64);
  --price-lijn: rgba(255, 255, 255, 0.16);
  --price-vlak: rgba(255, 238, 82, 0.12);
  --price-accent: var(--color-yellow);
  --price-vink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFEE52' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  border-color: rgba(255, 255, 255, 0.08);
  background:
    url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 480 120%22%3E%3Cdefs%3E%3ClinearGradient id=%22g%22 x1=%220%22 x2=%221%22 y1=%220%22 y2=%220%22%3E%3Cstop offset=%220%22 stop-color=%22%23fff%22 stop-opacity=%220%22/%3E%3Cstop offset=%22.5%22 stop-color=%22%23fff%22 stop-opacity=%22.05%22/%3E%3Cstop offset=%221%22 stop-color=%22%23fff%22 stop-opacity=%22.13%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M8.0 54.3V65.7M18.3 53.0V67.0M28.6 51.0V69.0M38.9 52.8V67.2M49.2 52.5V67.5M59.6 52.4V67.6M69.9 52.3V67.7M80.2 49.6V70.4M90.5 50.8V69.2M100.8 49.0V71.0M111.1 47.1V72.9M121.4 45.4V74.6M131.7 44.8V75.2M142.0 45.1V74.9M152.4 45.1V74.9M162.7 44.1V75.9M173.0 43.1V76.9M183.3 40.8V79.2M193.6 39.9V80.1M203.9 36.8V83.2M214.2 30.5V89.5M224.5 39.6V80.4M234.8 33.2V86.8M245.2 32.1V87.9M255.5 32.8V87.2M265.8 35.9V84.1M276.1 36.2V83.8M286.4 31.9V88.1M296.7 33.5V86.5M307.0 27.9V92.1M317.3 30.3V89.7M327.6 26.4V93.6M338.0 18.6V101.4M348.3 24.8V95.2M358.6 30.5V89.5M368.9 28.2V91.8M379.2 20.5V99.5M389.5 25.7V94.3M399.8 29.4V90.6M410.1 25.9V94.1M420.4 21.6V98.4M430.8 18.9V101.1M441.1 14.6V105.4M451.4 24.4V95.6M461.7 20.9V99.1M472.0 13.5V106.5%22 stroke=%22url%28%23g%29%22 stroke-width=%223.5%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") right -28px top 22px / 120% auto no-repeat,
    radial-gradient(90% 55% at 92% 0%, rgba(138, 114, 208, 0.45), transparent 70%),
    radial-gradient(80% 45% at 0% 100%, rgba(76, 40, 130, 0.4), transparent 70%),
    #14101E;
  box-shadow: 0 30px 60px -24px rgba(76, 40, 130, 0.7), 0 2px 6px rgba(20, 16, 30, 0.2);
}

.price-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.price-icoon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--price-vlak);
  color: var(--price-accent);
}
.price-icoon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Meest gekozen, met een lampje zoals het opnamelicht in de studio. */
.price-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 238, 82, 0.1);
  border: 1px solid rgba(255, 238, 82, 0.26);
  color: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
}
.price-badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-yellow);
  box-shadow: 0 0 0 3px rgba(255, 238, 82, 0.16);
}
@media (prefers-reduced-motion: no-preference) {
  .price-badge::before { animation: opname-lampje 2.4s ease-in-out infinite; }
}
@keyframes opname-lampje { 50% { opacity: 0.35; } }

.price-card h3 {
  margin: 20px 0 2px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--price-tekst);
}
.price-voor { margin: 0; font-size: 14px; color: var(--price-zacht); }

.price-amount {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 22px 0 8px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
  color: var(--price-tekst);
}
/* Twee woorden ogen zwaarder dan een getal, dus iets kleiner. */
.price-amount--tekst { font-size: 40px; letter-spacing: -0.03em; }
.price-unit {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--price-zacht);
}
.price-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--price-zacht);
}
.price-voordeel {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--price-vlak);
  color: var(--price-accent);
  font-weight: 600;
  font-size: 12.5px;
}

.price-card .btn {
  width: 100%;
  min-height: 50px;
  margin-top: 24px;
  padding: 0 20px;
  font-size: 15px;
}
.price-card .btn-outline {
  color: var(--color-ink);
  border: 1.5px solid rgba(20, 16, 30, 0.16);
}
.price-card .btn-outline:hover {
  background: var(--color-ink);
  border-color: var(--color-ink);
  color: #fff;
}
.price-card .btn-primary { box-shadow: 0 12px 28px -12px rgba(255, 238, 82, 0.55); }
.price-card .btn-primary:hover { background: #fff; }
.price-card .btn:focus-visible { outline: 3px solid var(--price-accent); outline-offset: 3px; }

.price-features {
  display: grid;
  align-content: start;
  gap: 12px;
  list-style: none;
  margin: 24px 0 0;
  padding: 22px 0 0;
  border-top: 1px dashed var(--price-lijn);
}
.price-features li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--price-tekst);
}
.price-features li::before {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--price-vlak) var(--price-vink) center / 11px no-repeat;
}

.price-vat-note {
  position: relative;
  margin: 32px auto 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-ink-soft);
}

.price-vat-note a {
  margin-left: 6px;
  color: var(--color-purple);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(76, 40, 130, 0.3);
  text-underline-offset: 3px;
}
.price-vat-note a:hover { text-decoration-color: currentColor; }

/* Vergelijkingstabel op de pakkettenpagina. Dicht tot je op de knop drukt.
   Een echte tabel, zodat schermlezers per rij en kolom kunnen lezen. Op een
   telefoon scrolt alleen de tabel opzij en blijft de eerste kolom staan. */
.vergelijk {
  position: relative;
  margin-top: 28px;
  text-align: center;
  scroll-margin-top: 110px; /* niet onder het menu verdwijnen via #vergelijk */
}
.vergelijk-knop {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(20, 16, 30, 0.16);
  background: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--color-ink);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color .15s ease;
}
.vergelijk-knop::-webkit-details-marker { display: none; }
.vergelijk-knop:hover { border-color: var(--color-ink); }
.vergelijk-knop:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }
.vergelijk-knop svg { width: 16px; height: 16px; transition: transform .2s ease; }
.vergelijk[open] .vergelijk-knop svg { transform: rotate(180deg); }
.vergelijk-knop .label-sluiten,
.vergelijk[open] .vergelijk-knop .label-openen { display: none; }
.vergelijk[open] .vergelijk-knop .label-sluiten { display: inline; }

.vergelijk-inhoud { margin-top: 40px; text-align: left; }
@media (prefers-reduced-motion: no-preference) {
  .vergelijk[open] .vergelijk-inhoud { animation: vergelijk-in .35s ease both; }
}
@keyframes vergelijk-in { from { opacity: 0; transform: translateY(8px); } }
.vergelijk-inhoud h2 { font-size: clamp(24px, 2.6vw, 30px); margin-bottom: 8px; }
.vergelijk-inhoud > p { max-width: 620px; margin-bottom: 24px; font-size: 16px; }

.vergelijk-scroll {
  position: relative; /* houdt de verborgen labels binnen de scrollbox */
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid #ECE7F4;
  background: #fff;
  box-shadow: 0 1px 2px rgba(20, 16, 30, 0.04), 0 18px 40px -22px rgba(20, 16, 30, 0.22);
}
.vergelijk-tabel {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 14.5px;
  color: var(--color-ink);
}
.vergelijk-tabel th,
.vergelijk-tabel td { padding: 14px 20px; text-align: center; vertical-align: middle; }
.vergelijk-tabel th[scope="row"] { text-align: left; font-weight: 600; width: 34%; }
.vergelijk-tabel tbody tr + tr > * { border-top: 1px solid #EEE9F6; }

.vergelijk-tabel thead th {
  padding-top: 18px;
  padding-bottom: 18px;
  background: #14101E;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
}
.vergelijk-tabel thead th:first-child {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.vergelijk-tag {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--color-yellow);
}
/* De Pro-kolom licht gemarkeerd, zoals de donkere kaart erboven. */
.vergelijk-tabel tbody .is-pro,
.vergelijk-tabel tfoot .is-pro { background: #F8F5FD; }
.vergelijk-tabel thead .is-pro { background: #1E1830; }

.vergelijk-sub { display: block; margin-top: 2px; font-size: 12.5px; color: var(--color-ink-soft); }

.vergelijk-ja,
.vergelijk-nee { display: inline-grid; place-items: center; }
.vergelijk-ja svg,
.vergelijk-nee svg { width: 20px; height: 20px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.vergelijk-ja svg { stroke: var(--color-purple); stroke-width: 2.6; }
.vergelijk-nee svg { stroke: #B7B0C6; stroke-width: 2.2; }

.vergelijk-tabel tfoot td { padding-top: 18px; padding-bottom: 22px; border-top: 1px solid #EEE9F6; }
.vergelijk-tabel .btn { min-height: 42px; padding: 0 18px; font-size: 14px; }
.vergelijk-tabel .btn-outline { color: var(--color-ink); border: 1.5px solid rgba(20, 16, 30, 0.16); }
.vergelijk-tabel .btn-outline:hover { background: var(--color-ink); border-color: var(--color-ink); color: #fff; }
.vergelijk-tabel .btn-primary { box-shadow: none; }

/* Browsers zonder subgrid: gewone kolommen, alles onder elkaar. */
@supports not (grid-template-rows: subgrid) {
  .price-card { display: flex; flex-direction: column; }
  .price-features { flex: 1; }
}

/* ============================================
   Why / objections
   ============================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.why-card {
  padding: 30px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-line);
}
.why-card .q-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  color: var(--color-yellow-dark);
  margin-bottom: 12px;
}
.why-card h3 { font-size: 17px; margin-bottom: 8px; }
.why-card p { font-size: 14.5px; margin: 0; }

/* ============================================
   Producties — podcast covers
   ============================================ */
.podcast-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.podcast-card {
  display: block;
  color: inherit;
}

.podcast-cover {
  position: relative;
  border-radius: var(--cover-hoek);
  overflow: hidden;
  aspect-ratio: 1/1;
  box-shadow: var(--cover-schaduw);
  transition: transform .3s ease, box-shadow .3s ease;
}
/* Bij aanwijzen komt het kaartje iets naar het licht toe. */
.podcast-card:hover .podcast-cover {
  transform: translate(2px, -3px);
  box-shadow: var(--cover-schaduw-hover);
}
.podcast-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.podcast-card:hover .podcast-cover img { transform: scale(1.06); }

.podcast-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(21,19,28,0.45), transparent 45%);
  opacity: 0;
  transition: opacity .3s ease;
}
.podcast-card:hover .podcast-cover::after { opacity: 1; }

.podcast-play {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(8px) scale(0.9);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  box-shadow: 0 6px 16px rgba(21,19,28,0.25);
}
.podcast-play svg { width: 20px; height: 20px; margin-left: 2px; }
.podcast-card:hover .podcast-play { transform: translateY(0) scale(1); opacity: 1; }

.podcast-meta { padding: 16px 2px 0; }
.podcast-cat {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-purple);
}
.podcast-meta h3 { font-size: 16px; margin: 4px 0 0; }

/* ============================================
   Results banner
   ============================================ */
.results-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: center;
}
.results-banner > div {
  background: var(--color-purple-dark);
  border: 2px solid var(--color-yellow);
  border-radius: var(--radius-lg);
  padding: 40px 26px;
  color: #fff;
}
.results-banner div strong {
  display: block;
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 6px;
}
.results-banner div span { font-size: 14.5px; color: rgba(255,255,255,0.75); }

/* ============================================
   Why choose us
   ============================================ */
/* Waarom bedrijven met ons werken — checklist */
.benefits-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}
.benefits-grid li {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
}
.benefit-check {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.benefit-check svg { width: 17px; height: 17px; }

.choose-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.choose-list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.choose-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.choose-list .num {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 7px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choose-list h4 { margin: 0 0 4px; font-size: 16px; }
.choose-list p { margin: 0; font-size: 14.5px; }

/* ============================================
   Testimonials
   ============================================ */
/* Doorlopende strook. De beweging komt uit js/main.js: zonder muis drijft hij
   langzaam naar links, met de muis stuur je hem en op een telefoon veeg je. */
.testimonial-marquee {
  overflow: hidden;
  position: relative;
  padding: 8px 0;
  touch-action: pan-y; /* verticaal scrollen blijft werken, horizontaal veeg je de strook */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.testimonial-track {
  display: flex;
  align-items: flex-start; /* elk kaartje zo hoog als zijn eigen tekst */
  gap: 24px;
  width: max-content;
  will-change: transform;
}

/* De score van Google boven de reviews: klein en rustig, met de bron erbij
   en een link ernaartoe. Op licht zijn de sterren paars, op donker geel. */
.review-score {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 9px;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.review-score-sterren { color: var(--color-purple); font-size: 13px; letter-spacing: 2px; }
.review-score-cijfer { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.review-score-bron {
  text-decoration: underline;
  text-decoration-color: rgba(76, 40, 130, 0.28);
  text-underline-offset: 3px;
  transition: text-decoration-color .15s ease;
}
.review-score:hover .review-score-bron { text-decoration-color: currentColor; }
.review-score:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 4px; border-radius: 4px; }

.page-hero .review-score { margin-top: 18px; color: rgba(255, 255, 255, 0.75); }
.page-hero .review-score-sterren { color: var(--color-yellow); }
.page-hero .review-score-cijfer { color: #fff; }
.page-hero .review-score-bron { text-decoration-color: rgba(255, 255, 255, 0.3); }
.page-hero .review-score:focus-visible { outline-color: var(--color-yellow); }

.testimonial-card {
  flex: 0 0 auto;
  width: 320px;
  background: var(--color-bg-soft);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  border: 1px solid var(--color-line);
  white-space: normal;
}

.stars { color: var(--color-yellow-dark); font-size: 12px; margin-bottom: 10px; letter-spacing: 2px; }

.testimonial-card p.quote {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-ink);
  margin-bottom: 16px;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 12px;
}
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-yellow), var(--color-purple));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}
.testimonial-person strong { display: block; font-family: var(--font-display); font-size: 13.5px; line-height: 1.3; }
.testimonial-person span { font-size: 12px; color: var(--color-ink-soft); }

/* ============================================
   Steps
   ============================================ */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}

.step-card {
  padding: 34px 28px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--color-line);
  position: relative;
}
.step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--color-line);
  margin-bottom: 8px;
}
.step-card h3 { font-size: 18px; margin-bottom: 8px; }
.step-card p { font-size: 14.5px; margin: 0; }

/* ============================================
   Klantlogo's
   ============================================ */
/* Klantlogo's: een stilstaand raster van gelijke tegels. De logo's zijn vooraf
   eenkleurig en op gelijke grootte gezet (tools/logos.py) en worden als masker
   gekleurd: grijs, paars bij aanwijzen. De laatste rij staat in het midden. */
/* Alleen het label boven het raster, als kop voor schermlezers. */
.klanten-kop { margin-bottom: 28px; }
.section-head.klanten-kop h2.eyebrow { margin: 0; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; }

.klanten-raster {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.klanten-raster > li { flex: 0 0 calc((100% - 5 * 14px) / 6); display: flex; }
.klant-logo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 2 / 1;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--color-line);
  transition: box-shadow .2s ease, transform .2s ease;
}
.klant-logo-kleur { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: contain; }
.klant-logo:hover,
.klant-logo:focus-visible { box-shadow: 0 10px 26px -14px rgba(20, 16, 30, 0.35), inset 0 0 0 1px var(--color-line); transform: translateY(-2px); }
.klant-logo:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }
@media (max-width: 1040px) { .klanten-raster > li { flex-basis: calc((100% - 3 * 14px) / 4); } }
@media (max-width: 620px) {
  .klanten-raster { gap: 10px; }
  .klanten-raster > li { flex-basis: calc((100% - 10px) / 2); }
  .klant-logo { border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) { .klant-logo { transition: none; } .klant-logo:hover { transform: none; } }

/* Contactformulier op de telefoon: minder binnenruimte, bredere velden. */
@media (max-width: 620px) {
  .section .contact-form { padding: 22px 18px; border-radius: 13px; }
}

/* ============================================
   Launch banner
   ============================================ */
.launch-banner {
  background: linear-gradient(150deg, var(--color-purple) 0%, var(--color-purple-dark) 60%, #2a1a3d 100%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 72px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.launch-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 238, 82,0.16), transparent 55%);
}
.launch-banner .eyebrow { background: rgba(255,255,255,0.1); color: var(--color-yellow); }
.launch-banner h2 { font-size: clamp(26px, 3.4vw, 36px); color: #fff; max-width: 620px; margin: 0 auto 16px; position: relative; }
.launch-banner p { color: rgba(255,255,255,0.7); max-width: 560px; margin: 0 auto 28px; position: relative; }

/* ============================================
   Gallery
   ============================================ */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 220px;
  gap: 16px;
}
.gallery-grid .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery-grid .gallery-item:nth-child(4) { grid-row: span 1; }

.gallery-item {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #201a2c, #3a2454);
}
.gallery-item .ph-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.45);
  font-size: 13px;
  font-family: var(--font-display);
  text-align: center;
  padding: 12px;
}

.gallery-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.gallery-item:hover .gallery-img { transform: scale(1.05); }

/* Teaser op de homepage met knop naar de fotopagina */
.studio-teaser {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.studio-teaser-text h2 { font-size: clamp(28px, 3.2vw, 38px); }
.studio-teaser-text p { font-size: 16px; margin-bottom: 26px; }

.studio-teaser-preview {
  position: relative;
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  height: 360px;
  border-radius: var(--radius-lg);
}
.studio-teaser-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6);
  transition: transform .35s ease, filter .35s ease;
}
.studio-teaser-preview img:first-child { grid-row: span 2; }
.studio-teaser-preview:hover img { filter: brightness(1.06); }
.studio-teaser-preview:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 6px; }

.studio-teaser-preview .ph-block {
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--color-purple) 0%, #2a1a3d 100%);
  border: 1px dashed rgba(255,255,255,0.18);
}
.studio-teaser-preview .ph-block:first-child { grid-row: span 2; }

.studio-teaser-more {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(21,19,28,0.78);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  padding: 9px 18px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

.galerij-cta { text-align: center; margin-top: 48px; }

/* ============================================
   FAQ
   ============================================ */
.faq-list { max-width: 780px; margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--color-line);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 22px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--color-ink);
}

.faq-question .plus {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: transform .2s ease;
}

.faq-item.open .faq-question .plus { transform: rotate(45deg); background: var(--color-yellow); }

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .25s ease;
}
.faq-answer p { padding: 0 4px 22px; font-size: 15px; margin: 0; }

/* ============================================
   Contact / final CTA
   ============================================ */
.contact-wrap {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: flex-start;
}

.contact-info h2 { font-size: clamp(26px, 3vw, 34px); }

.contact-detail {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 22px;
}
.contact-detail .icon {
  width: 40px;
  height: 40px;
  border-radius: 7px;
  background: var(--color-bg-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-purple);
  flex-shrink: 0;
}
.contact-detail strong { display: block; font-family: var(--font-display); font-size: 14.5px; margin-bottom: 2px; }
.contact-detail span, .contact-detail a { font-size: 14.5px; color: var(--color-ink-soft); }

.contact-form {
  background: var(--color-bg-soft);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  padding: 36px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  margin-bottom: 6px;
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  font-family: var(--font-body);
  font-size: 14.5px;
  background: #fff;
  transition: border-color .15s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--color-purple);
  box-shadow: 0 0 0 3px rgba(76, 40, 130, 0.18);
}
.field textarea { resize: vertical; min-height: 110px; }
.field select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A94A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
  cursor: pointer;
}

.form-note { font-size: 12.5px; color: var(--color-ink-soft); margin-top: 12px; text-align: center; }
.form-status { font-size: 14px; margin-top: 14px; text-align: center; display: none; }
.form-status.success { display: block; color: #147a4a; }
.form-status.error { display: block; color: #c0392b; }

/* ============================================
   Footer
   ============================================ */
/* Diep paars met afgeronde bovenhoeken, die over de sectie erboven schuift.
   Het beeldmerk staat als rond teken op de bovenrand, met ringen eromheen als
   geluidsgolven. In het midden het merk met de slogan en twee knoppen, links
   contact en socials, rechts de pagina's. */
.site-footer {
  position: relative;
  z-index: 2;
  isolation: isolate;
  margin-top: -40px;
  padding: 92px 0 26px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(175deg, #37206A 0%, #241442 100%);
  color: rgba(255, 255, 255, 0.74);
  font-size: 14.5px;
}
/* De sectie boven de footer houdt ruimte vrij voor de ronde hoeken en het teken. */
/* De laatste sectie voor de footer houdt ruimte vrij voor het microfoonteken.
   Sinds alle inhoud in <main> staat, is dat de laatste sectie in main. */
:is(section, main.section):has(+ .site-footer),
main:has(+ .site-footer) > section:last-child { padding-bottom: 156px; }

/* Geluidsgolven vanuit het beeldmerk, heel zacht. */
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 0, transparent 0 63px, rgba(255, 255, 255, 0.06) 63px 64px);
  -webkit-mask-image: radial-gradient(75% 110% at 50% 0, #000 10%, transparent 72%);
  mask-image: radial-gradient(75% 110% at 50% 0, #000 10%, transparent 72%);
}

.footer-merk-teken {
  position: absolute;
  left: 50%;
  top: -46px;
  display: grid;
  place-items: center;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #14101E;
  border: 2px solid var(--color-yellow);
  box-shadow: 0 0 0 8px #37206A, 0 18px 36px -12px rgba(20, 16, 30, 0.7);
  transform: translateX(-50%);
  transition: transform .2s ease;
}
.footer-merk-teken:hover { transform: translateX(-50%) translateY(-3px); }
.footer-merk-teken img { width: 28px; height: 50px; }

.footer-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas: "contact merk nav";
  align-items: end;
  column-gap: 48px;
}

.footer-merk { grid-area: merk; text-align: center; }
.footer-naam {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.footer-naam span { display: block; color: var(--color-yellow); }
.footer-slogan { margin: 10px 0 22px; font-size: 15.5px; color: rgba(255, 255, 255, 0.74); }
.footer-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.site-footer .btn { min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700; }
.site-footer .btn-primary { box-shadow: none; }
.site-footer .btn-primary:hover { background: #fff; }
.site-footer .btn svg { transition: transform .2s ease; }
.site-footer .btn:hover svg { transform: translateX(3px); }

.footer-kop {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { line-height: 1.75; }
.site-footer li a { transition: color .15s ease; }
.site-footer li a:hover { color: #fff; }
.site-footer a:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; border-radius: 4px; }
.footer-mail { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }

.footer-contact { grid-area: contact; }
.footer-socials { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-socials a { display: inline-flex; align-items: center; gap: 6px; }
.footer-socials svg { color: var(--color-yellow); transition: transform .2s ease; }
.footer-socials a:hover svg { transform: translate(2px, -2px); }

.footer-nav { grid-area: nav; justify-self: end; }
.footer-nav ul { columns: 2; column-gap: 36px; }
.footer-nav li { break-inside: avoid; }

.footer-onder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-top: 44px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12.5px;
}
.footer-score { display: inline-flex; align-items: center; gap: 9px; }
.footer-score strong {
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
}
.footer-score:hover { color: #fff; }
.footer-rechten {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
}

/* Tablet: het merk bovenaan over de volle breedte, contact en pagina's eronder. */
@media (max-width: 1040px) {
  .footer-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas: "merk merk" "contact nav";
    align-items: start;
    row-gap: 44px;
  }
}
/* Telefoon: alles onder elkaar. */
@media (max-width: 760px) {
  .site-footer { margin-top: -28px; padding-top: 80px; border-radius: 20px 20px 0 0; }
  :is(section, main):has(+ .site-footer) { padding-bottom: 124px; }
  .footer-raster { grid-template-columns: 1fr; grid-template-areas: "merk" "contact" "nav"; row-gap: 32px; }
  .footer-nav { justify-self: start; }
  .footer-knoppen { flex-direction: column; align-items: stretch; }
  .footer-onder { flex-direction: column; align-items: flex-start; margin-top: 32px; }
  .footer-rechten { padding: 0; background: none; color: rgba(255, 255, 255, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .footer-merk-teken, .site-footer .btn svg, .footer-socials svg { transition: none; }
}

/* ============================================
   Podcast detailpagina
   ============================================ */
.podcast-detail { padding-top: 124px; }

.podcast-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-ink-soft);
  margin-bottom: 32px;
}
.podcast-back:hover { color: var(--color-purple); }
.podcast-back svg { width: 16px; height: 16px; }

.podcast-hero {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 48px;
}
.podcast-hero-cover {
  border-radius: var(--cover-hoek);
  overflow: hidden;
  box-shadow: var(--cover-schaduw);
  aspect-ratio: 1/1;
}
.podcast-hero-cover img { width: 100%; height: 100%; object-fit: cover; }

.podcast-hero-info .podcast-cat {
  display: inline-block;
  background: rgba(76, 40, 130,0.08);
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.podcast-hero-info h1 { font-size: clamp(28px, 4vw, 44px); margin-bottom: 14px; }
.podcast-hero-host {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--color-ink-soft);
  margin-bottom: 18px;
}
.podcast-hero-host strong { color: var(--color-ink); font-family: var(--font-display); }
.podcast-hero-info p { font-size: 16px; max-width: 620px; }

.podcast-hero-actions { margin-top: 24px; display: flex; gap: 14px; flex-wrap: wrap; }

.podcast-episodes h2 { font-size: 24px; margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.episode-count {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-purple);
  background: rgba(76, 40, 130,0.08);
  padding: 3px 12px;
  border-radius: 999px;
}
.podcast-episodes .episodes-note { color: var(--color-ink-soft); font-size: 15px; margin-bottom: 24px; }
.podcast-embed {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.podcast-embed iframe { display: block; width: 100%; border: 0; }

/* Afleveringenlijst — Spotify-stijl donkere kaartjes */
.episode-list {
  background: #121212;
  border-radius: var(--radius-lg);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.episode-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px;
  border-radius: 7px;
  transition: background .15s ease;
}
.episode-row:hover { background: rgba(255,255,255,0.08); }

.episode-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 4px;
  object-fit: cover;
}

.episode-info { flex: 1; min-width: 0; }
.episode-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.episode-meta { display: block; font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }

.episode-play {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #fff;
  color: #121212;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .15s ease, transform .15s ease;
}
.episode-row:hover .episode-play { opacity: 1; transform: scale(1); }
.episode-play svg { width: 18px; height: 18px; margin-left: 2px; }

@media (hover: none) {
  .episode-play { opacity: 1; transform: scale(1); }
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 980px) {
  .value-grid, .why-grid, .pricing-grid, .testimonial-grid, .steps-grid { grid-template-columns: 1fr; }
  .podcast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .intro-flex, .choose-grid, .contact-wrap, .achtergrond-flex, .case-flex { grid-template-columns: 1fr; gap: 40px; }
  #over-mij .about-grid { grid-template-columns: 1fr; gap: 36px; }
  #over-mij .about-media { position: static; }
  .results-banner { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .podcast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .value-grid, .why-grid, .pricing-grid, .steps-grid, .gallery-grid, .benefits-grid { grid-template-columns: 1fr; }
  .loc-examples { grid-template-columns: 1fr; }
  .gallery-grid .gallery-item:nth-child(1) { grid-column: span 1; grid-row: span 1; }
  .studio-teaser { grid-template-columns: 1fr; gap: 32px; }
  .studio-teaser-preview { height: 240px; }
  .testimonial-card { width: 280px; padding: 20px; }
  .form-row { grid-template-columns: 1fr; }
  .podcast-hero { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  .podcast-hero-cover { max-width: 240px; margin: 0 auto; }
  .podcast-hero-host { justify-content: center; }
  .podcast-hero-info p { margin-left: auto; margin-right: auto; }
  .podcast-hero-actions { justify-content: center; }
}

/* ============================================
   Page hero (subpagina's)
   ============================================ */
.page-hero {
  position: relative;
  padding: 148px 0 66px;
  background: linear-gradient(135deg, #2a1650 0%, var(--color-purple-dark) 50%, var(--color-purple) 100%);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 238, 82,0.16), transparent 42%),
    radial-gradient(circle at 88% 80%, rgba(138,114,208,0.35), transparent 46%);
}
.page-hero .eyebrow { color: var(--color-yellow); }
.page-hero h1 {
  font-size: clamp(32px, 5vw, 52px);
  line-height: 1.05;
  margin: 14px 0 18px;
  max-width: 15ch;
}
.page-hero h1 span { color: var(--color-yellow); }
.page-hero p {
  font-size: clamp(16px, 1.7vw, 19px);
  color: rgba(255,255,255,0.85);
  max-width: 620px;
  margin-bottom: 0;
}
.page-hero .hero-actions { margin-top: 30px; }

/* Terug-link naar boven op subpagina's (hergebruikt podcast-back styling) */
.page-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 22px;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
}
.page-crumb svg { width: 18px; height: 18px; }
.page-crumb:hover { color: #fff; }

/* Losse tekstblokken op subpagina's */
.prose { max-width: 760px; }
.prose h3 { font-size: 22px; margin: 32px 0 10px; }
.prose h3:first-child { margin-top: 0; }
.prose p { font-size: 17px; line-height: 1.7; }
.section--purple .prose p,
.section--purple-deep .prose p { color: rgba(255,255,255,0.85); }
.section--purple .prose h3,
.section--purple-deep .prose h3 { color: #fff; }

/* Slot-CTA onderaan subpagina's */
.page-cta { text-align: center; }
.page-cta h2 { font-size: clamp(26px, 3.2vw, 38px); margin-bottom: 12px; }
.page-cta p { max-width: 560px; margin: 0 auto 26px; font-size: 17px; }

/* ============================================
   Homepage-specifieke kleuraccenten
   ============================================ */

/* Pakketten: rustige lavendel achtergrond, zodat de kaarten zacht loskomen en
   de donkere Pro-kaart de blikvanger is. */
#pakketten { background: var(--color-bg-soft); }

/* Een kijkje achter de schermen: donkerpaarse achtergrond */
#studio { background: var(--color-purple-dark); }
#studio .eyebrow { color: var(--color-yellow); background: rgba(255,255,255,0.1); }
#studio .studio-teaser-text h2 { color: #fff; }
#studio .studio-teaser-text p { color: rgba(255,255,255,0.82); }
#studio .studio-teaser-preview .ph-block {
  background: linear-gradient(135deg, var(--color-purple-light) 0%, var(--color-purple) 100%);
  border-color: rgba(255,255,255,0.28);
}



/* Klanten aan het woord: compacter, donkerpaarse review-vakjes */
#klanten { padding: 64px 0; }
#klanten .testimonial-card {
  background: var(--color-purple-dark);
  border-color: rgba(255,255,255,0.14);
  width: 300px;
  padding: 20px 20px 18px;
  border-radius: 11px;
}
#klanten .testimonial-card p.quote { color: #fff; }
#klanten .testimonial-person strong { color: #fff; }
#klanten .testimonial-person span { color: rgba(255,255,255,0.7); }

/* Pakketten-pagina: 'Waarom een vast pakket handig is' donkerpaarse achtergrond */


/* ============================================
   Tijdlijn 'Het verhaal' (Over ons)
   ============================================ */
.timeline { list-style: none; margin: 44px auto 0; padding: 0; max-width: 760px; position: relative; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-line);
}
.timeline-item { position: relative; padding: 0 0 34px 46px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-purple);
  border: 4px solid var(--color-bg-soft);
  box-shadow: 0 0 0 2px var(--color-purple);
}
.timeline-phase {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-purple);
  background: rgba(76, 40, 130, 0.08);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.timeline-item h3 { font-size: 20px; margin: 0 0 8px; }
.timeline-item p { font-size: 15.5px; line-height: 1.7; margin: 0 0 10px; }
.timeline-item p:last-child { margin-bottom: 0; }
.timeline-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 6px; }
.timeline-links a { font-size: 13.5px; font-weight: 600; color: var(--color-purple); display: inline-flex; align-items: center; gap: 5px; }
.timeline-links a:hover { text-decoration: underline; }
.timeline-links a::after { content: "\2197"; font-size: 13px; }

/* Over ons: 'Het verhaal' lichtpaarse achtergrond */
#verhaal { background: var(--color-purple-light); }
#verhaal .section-head h2 { color: #fff; }
#verhaal .section-head p { color: rgba(255,255,255,0.85); }
#verhaal .eyebrow { color: var(--color-yellow); background: rgba(255,255,255,0.16); }
#verhaal .timeline::before { background: rgba(255,255,255,0.35); }
#verhaal .timeline-item::before {
  background: var(--color-yellow);
  border-color: var(--color-purple-light);
  box-shadow: 0 0 0 2px var(--color-yellow);
}
#verhaal .timeline-phase { color: #fff; background: rgba(255,255,255,0.16); }
#verhaal .timeline-item h3 { color: #fff; }
#verhaal .timeline-item p { color: rgba(255,255,255,0.88); }
#verhaal .timeline-links a { color: #fff; }
#verhaal .timeline-links a:hover { color: var(--color-yellow); }

/* Het verhaal compacter: twee kolommen met kaartjes */
#verhaal .timeline {
  max-width: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 34px;
}
#verhaal .timeline::before { display: none; }
#verhaal .timeline-item {
  padding: 20px 22px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius-md);
}
#verhaal .timeline-item::before { display: none; }
#verhaal .timeline-phase { margin-bottom: 8px; color: var(--color-yellow); background: rgba(255,255,255,0.14); }
#verhaal .timeline-item h3 { font-size: 16.5px; margin-bottom: 6px; }
#verhaal .timeline-item p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
#verhaal .timeline-links a { font-size: 13px; }
/* Pijltjes tussen de kaartjes: leesrichting links -> rechts per rij (3 kolommen) */
#verhaal .timeline-item:not(:nth-child(3n)):not(:last-child)::after {
  content: "\2192";
  position: absolute;
  right: -21px;
  top: 22px;
  color: var(--color-yellow);
  font-weight: 800;
  font-size: 20px;
  line-height: 1;
  z-index: 2;
}

/* 'Aan de slag'-CTA witte achtergrond (alle subpagina's) */
.section--soft:has(.page-cta) { background: #fff; }

/* Over ons: 'Over mij' (portret + tekst op paars) */
#over-mij .about-photo .ph-portrait {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
#over-mij h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 18px; }
#over-mij p { color: rgba(255,255,255,0.85); font-size: 15.5px; line-height: 1.7; }
#over-mij .about-cta-line { color: #fff; font-weight: 700; font-family: var(--font-display); margin-top: 20px; }
#over-mij .about-link {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  border-bottom: 3px solid var(--color-yellow);
  padding-bottom: 3px;
}
#over-mij .about-link:hover { color: var(--color-yellow); }
#over-mij .about-grid { display: grid; grid-template-columns: 0.85fr 1.5fr; gap: 56px; align-items: start; }
#over-mij .about-media { position: sticky; top: 104px; }
#over-mij .about-body { max-width: none; }
#over-mij .about-body h2 { color: #fff; font-size: clamp(26px, 3vw, 34px); margin-bottom: 18px; }
#over-mij .about-body h3 { color: #fff; font-family: var(--font-display); font-size: 21px; margin: 32px 0 10px; }
#over-mij .about-list { list-style: none; margin: 8px 0 6px; padding: 0; }
#over-mij .about-list li { position: relative; padding-left: 28px; margin-bottom: 9px; color: rgba(255,255,255,0.9); font-size: 15.5px; }
#over-mij .about-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--color-yellow); font-weight: 800; }
#over-mij .about-body .btn { margin: 10px 0 26px; }
#over-mij .about-outro { color: #fff; font-weight: 700; font-family: var(--font-display); font-size: 18px; }

/* Op locatie: Zentoo-case (tekst + video) */
.case-flex { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.case-text h2 { font-size: clamp(26px, 3vw, 34px); margin: 6px 0 14px; }
.case-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.case-media .ph-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--color-purple) 0%, #2a1a3d 100%);
  border: 1px dashed rgba(255,255,255,0.28);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.case-media .ph-video svg { width: 52px; height: 52px; color: var(--color-yellow); opacity: 0.9; }
.case-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.loc-examples-title { font-size: 20px; margin: 56px 0 10px; }
.loc-examples-intro { max-width: 780px; margin: 0 0 26px; font-size: 15.5px; }
.loc-examples { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.loc-example {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--color-line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.loc-example:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.loc-example img { width: 92px; height: 92px; border-radius: var(--radius-md); object-fit: cover; flex-shrink: 0; }
.loc-example-text h3 { font-size: 16.5px; margin: 0 0 4px; color: var(--color-ink); }
.loc-example-text p { font-size: 14px; margin: 0; color: var(--color-ink-soft); }

/* Over ons: teamfoto bovenaan */
.achtergrond-flex {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.achtergrond-flex .prose { max-width: none; }
.achtergrond-figure { margin: 0; max-width: 440px; }
.achtergrond-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: 0 12px 30px rgba(0,0,0,0.28);
}
.achtergrond-figure .ph-frame {
  display: none;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.3);
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.65);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
}
.achtergrond-figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.72);
  font-style: italic;
}

/* Responsieve kolommen voor 'Het verhaal' (na de basisregel, zodat ze pakken) */
@media (max-width: 980px) {
  #verhaal .timeline { grid-template-columns: 1fr 1fr; }
  #verhaal .timeline-item::after { display: none; }
}
@media (max-width: 640px) {
  #verhaal .timeline { grid-template-columns: 1fr; }
}

/* Op locatie: vierkante fotoplek voor de bosfoto, dichter bij de tekst */
.intro-media--portrait { aspect-ratio: 1 / 1; }
#locatie-intro .choose-grid { grid-template-columns: 420px 1fr; gap: 44px; align-items: center; }

@media (max-width: 720px) {
  #locatie-intro .choose-grid { grid-template-columns: 1fr; gap: 30px; }
  #locatie-intro .intro-media--portrait { max-width: 420px; }
}

/* YouTube-knop op de podcast-detailpagina */
.btn-youtube { background: #D90000; color: #fff; } /* #FF0000 haalt met witte tekst geen 4,5:1 */
.btn-youtube:hover { background: #B80000; transform: translateY(-2px); }
.btn-youtube svg { width: 18px; height: 18px; }

/* ============================================
   Responsive, vervolg
   ============================================ */
/* Deze regels staan ook in het blok Responsive, maar de basisregels van deze
   blokken staan verderop in het bestand en wonnen het daardoor. Gevolg: op een
   telefoon bleven ze twee kolommen breed en werd Op locatie breder dan het
   scherm. Hier staan ze na de basisregels, zodat ze pakken. */
@media (max-width: 980px) {
  .achtergrond-flex, .case-flex { grid-template-columns: 1fr; gap: 40px; }
  #over-mij .about-grid { grid-template-columns: 1fr; gap: 36px; }
  #over-mij .about-media { position: static; }
}
@media (max-width: 720px) {
  .loc-examples { grid-template-columns: 1fr; }
  /* Reviews: smaller dan het scherm, zodat je het volgende kaartje ziet. */
  #klanten .testimonial-card { width: 264px; padding: 18px 18px 16px; }
}

/* Vergelijkingstabel op een telefoon: de kenmerken blijven links staan. */
@media (max-width: 720px) {
  .vergelijk-tabel { min-width: 560px; font-size: 13.5px; }
  .vergelijk-tabel th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    width: 132px;
    min-width: 132px;
    background: #fff;
    box-shadow: 1px 0 0 #EEE9F6;
  }
  .vergelijk-tabel thead th:first-child { background: #14101E; }
  .vergelijk-tabel thead th { font-size: 15px; }
  .vergelijk-tabel th,
  .vergelijk-tabel td { padding: 11px 12px; }
}

/* Pakketten op tablet en telefoon: onder elkaar, niet breder dan nodig. */
@media (max-width: 980px) {
  .pricing-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 20px;
    max-width: 480px;
    margin: 0 auto;
  }
  .pricing-grid::before { width: 100%; height: 50%; }
  .price-card { display: flex; flex-direction: column; grid-row: auto; }
}

/* Telefoon: twee covers naast elkaar, dus kleinere hoeken en een kortere
   schaduw in dezelfde verhouding. */
@media (max-width: 620px) {
  .podcast-grid {
    --cover-hoek: 4px;
    --cover-schaduw: -6px 9px 9px -1px rgba(20, 16, 30, 0.5);
    --cover-schaduw-hover: -8px 12px 12px -2px rgba(20, 16, 30, 0.5);
  }
  .section--purple-deep .podcast-grid {
    --cover-schaduw: -6px 9px 9px -1px rgba(20, 16, 30, 0.45), -1px 2px 3px rgba(20, 16, 30, 0.2);
    --cover-schaduw-hover: -8px 12px 12px -2px rgba(20, 16, 30, 0.45), -2px 3px 4px rgba(20, 16, 30, 0.2);
  }
}
@media (prefers-reduced-motion: reduce) {
  .podcast-cover { transition: none; }
  .podcast-card:hover .podcast-cover { transform: none; }
}

/* Smalle telefoons: de knop in de pakketkaart krijgt iets minder lucht, anders
   wordt de kaart breder dan het scherm. */
@media (max-width: 350px) {
  .price-card { padding-left: 22px; padding-right: 22px; }
  .price-card .btn { padding-left: 16px; padding-right: 16px; }
  .loc-example { gap: 14px; padding: 14px; }
  .loc-example img { width: 76px; height: 76px; }
}

/* ============================================
   Homepagina: één stijl voor labels en koppen
   ============================================ */
/* Op de homepagina hebben alle labels dezelfde vorm als bij Wie wij zijn: klein,
   in hoofdletters, met de gele accentlijn ervoor. Alle koppen hebben hetzelfde
   gewicht. De subpagina's houden voorlopig hun eigen stijl. */
.home .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.home .eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}
.home #producties .eyebrow,
.home #studio .eyebrow,
.home #contact .eyebrow { background: none; color: rgba(255, 255, 255, 0.72); }
.home .section-head.klanten-kop h2.eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; }
.home .section h2,
.home .section--tight h2 { font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }

/* ============================================
   Pakketten: waarom een vast pakket
   ============================================ */
/* Donkerpaars met de gloed uit het brandbook. Links de kop met een rekensom
   op een witte kaart en twee knoppen, rechts vijf genummerde redenen met dunne
   lijnen, in dezelfde vorm als Waarom wij op de homepagina. */
.section.vast {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 104px 0;
  background: #1E1236;
  color: #fff;
}
.section.vast::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(138, 114, 208, 0.35), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(76, 40, 130, 0.6), transparent 70%);
}
.vast-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 56px 88px;
  align-items: start;
}
.vast .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  border-radius: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.vast .eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}
.vast-kop h2 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
}
.vast-lead { margin: 0 0 28px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); text-wrap: pretty; }

/* De rekensom */
.vast-som {
  padding: 22px 24px 20px;
  border-radius: 13px;
  background: #fff;
  color: var(--color-ink);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6);
}
.vast-som-kop {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-purple);
}
.vast-som dl { margin: 0; }
.vast-som dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--color-line);
}
.vast-som dl > div:first-child { border-top: 0; padding-top: 0; }
.vast-som dt { font-size: 15px; color: var(--color-ink-soft); }
.vast-som dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vast-som dl > div:first-child dd { color: var(--color-ink-soft); text-decoration: line-through; text-decoration-thickness: 1.5px; text-decoration-color: rgba(20, 16, 30, 0.35); }
.vast-som .vast-som-totaal {
  margin: 6px -12px 0;
  padding: 12px 12px;
  border-top: 0;
  border-radius: 8px;
  background: var(--color-yellow);
}
.vast-som .vast-som-totaal dt { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
.vast-som .vast-som-totaal dd { font-size: 24px; color: var(--color-ink); }
.vast-som-noot { margin: 12px 0 0; font-size: 12.5px; color: var(--color-ink-soft); }

.vast-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 28px; }
.vast .btn-primary { min-height: 50px; padding: 0 24px; font-size: 15px; box-shadow: none; }
.vast-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.vast .btn svg, .vast-link svg { transition: transform .2s ease; }
.vast .btn:hover svg, .vast-link:hover svg { transform: translateX(3px); }
.vast-link:hover { color: var(--color-yellow); }
.vast a:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 4px; border-radius: 4px; }

/* De redenen */
.vast-lijst { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.vast-lijst li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  padding: 20px 0 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.vast-nr {
  padding-top: 3px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--color-yellow);
}
.vast-lijst h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; color: #fff; }
.vast-lijst p { margin: 0; font-size: 15.5px; line-height: 1.65; color: rgba(255, 255, 255, 0.74); text-wrap: pretty; }

@media (max-width: 980px) {
  .section.vast { padding: 80px 0; }
  .vast-raster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .section.vast { padding: 64px 0; }
  .vast-lijst li { grid-template-columns: 40px minmax(0, 1fr); padding: 18px 0 20px; }
  .vast-lijst h3 { font-size: 17px; }
  .vast-lijst p { font-size: 15px; }
  .vast-som { padding: 18px 18px 16px; }
  .vast-som dt { font-size: 14px; }
  .vast-acties { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ============================================
   Over ons
   ============================================ */
/* Een rustige redactiepagina in de stijl van de homepagina: kleine labels met
   de gele lijn, koppen op gewicht 700 en dunne lijnen in plaats van kaarten.
   Donker boven en bij Fleur, daartussen wit en lavendel. */
.over .section h2 { font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.over .intro-label { margin-bottom: 16px; }
.over-verhaal-kop h2 {
  margin: 0;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
}

/* Opening */
.over-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 152px 0 96px;
  background: #14101E;
  color: #fff;
}
.over-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 70% at 0% 0%, rgba(138, 114, 208, 0.30), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(76, 40, 130, 0.55), transparent 70%);
}
.over-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 48px 72px;
  align-items: center;
}
.over-hero .intro-label { color: rgba(255, 255, 255, 0.72); }
.over-hero h1 {
  margin: 0 0 20px;
  font-weight: 700;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.over-hero h1 span { color: var(--color-yellow); }
.over-hero-lead {
  max-width: 50ch;
  margin: 0;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  text-wrap: pretty;
}
.over-hero-sprong {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.over-hero-sprong a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 15px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.88);
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.over-hero-sprong a:hover { background: #fff; border-color: #fff; color: var(--color-ink); }
.over-hero-sprong a:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 3px; }
.over-hero-foto { margin: 0; }
.over-hero-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 30px 60px -28px rgba(0, 0, 0, 0.7);
}
.over-hero-foto figcaption {
  margin-top: 12px;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}

/* Wie wij zijn: tekst links, een staande foto rechts. Onder de tekst een
   rustige regel met namen uit de muziektijd. */
.section.over-wie { padding: 104px 0; }
.over-wie-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 48px 96px;
  align-items: center;
}
.over-wie-tekst h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
}
.over-wie-tekst p:not(.intro-label) {
  max-width: 58ch;
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  text-wrap: pretty;
}
.over-wie-tekst .over-wie-lead {
  margin-bottom: 18px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--color-ink);
}
.over-wie-bewijs {
  display: flex;
  max-width: 58ch;
  flex-wrap: wrap;
  gap: 8px 0;
  margin: 28px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--color-line);
}
.over-wie-bewijs li {
  padding: 0 16px;
  border-left: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.over-wie-bewijs li:first-child { padding-left: 0; border-left: 0; }
.over-wie-foto { margin: 0; }
.over-wie-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 30px 60px -30px rgba(20, 16, 30, 0.45);
}
.over-wie-foto figcaption { margin-top: 12px; font-size: 12.5px; color: var(--color-ink-soft); }

/* Ons verhaal */
.section.over-verhaal { padding: 96px 0; }
.over-verhaal-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 40px 88px;
  align-items: start;
}
.over-verhaal-kop { position: sticky; top: 112px; }
.over-verhaal-kop p:not(.intro-label) {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}
.over-tijdlijn { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--color-line); }
.over-tijdlijn li {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 0 16px;
  padding: 22px 0 24px;
  border-top: 1px solid var(--color-line);
}
.over-jaar {
  padding-top: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--color-purple);
}
.over-tijdlijn h3 { margin: 0 0 6px; font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.over-tijdlijn p { max-width: 60ch; margin: 0; font-size: 15.5px; line-height: 1.65; text-wrap: pretty; }
.over-tijdlijn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--color-purple);
}
.over-tijdlijn-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.over-formule {
  margin: 24px 0 0;
  font-size: 13.5px;
  line-height: 1.65;
  text-wrap: pretty;
}
.over-formule a {
  font-weight: 600;
  color: var(--color-purple);
  text-decoration: underline;
  text-decoration-color: rgba(76, 40, 130, 0.3);
  text-underline-offset: 3px;
}
.over-formule a:hover { text-decoration-color: currentColor; }

/* Fleur */
.section.over-fleur {
  position: relative;
  isolation: isolate;
  padding: 104px 0;
  background: #1E1236;
  color: #fff;
}
.section.over-fleur::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 60% at 100% 0%, rgba(138, 114, 208, 0.32), transparent 70%),
    radial-gradient(45% 60% at 0% 100%, rgba(76, 40, 130, 0.6), transparent 70%);
}
.over-fleur-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px 88px;
  align-items: start;
}
.over-fleur-foto { position: sticky; top: 112px; margin: 0; }
.over-fleur-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 0.75);
}
.over-fleur-foto figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 10px 14px 11px;
  border-radius: 8px;
  background: rgba(20, 16, 30, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.72);
}
.over-fleur-naam { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: #fff; }
.over-fleur .intro-label {
  max-width: none;
  margin: 0 0 16px;
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
}
.over-fleur-tekst h2 {
  margin: 0 0 18px;
  font-size: clamp(30px, 3.2vw, 44px);
  line-height: 1.08;
  color: #fff;
}
.over-fleur-tekst p {
  max-width: 60ch;
  margin: 0 0 14px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.74);
  text-wrap: pretty;
}
.over-fleur-tekst .over-fleur-lead {
  margin-bottom: 18px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
}
.over-citaat {
  margin: 30px 0;
  padding: 2px 0 2px 22px;
  border-left: 3px solid var(--color-yellow);
}
.over-fleur-tekst .over-citaat p {
  max-width: 26ch;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.over-fleur-acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 28px;
  margin-top: 30px;
}
.over-fleur-acties .btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
.over-link-licht {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}
.over-link-licht:hover { color: var(--color-yellow); }
.over-fleur-acties svg,
.over-slot-acties svg { transition: transform .2s ease; }
.over-fleur-acties a:hover svg,
.over-slot-acties a:hover svg { transform: translateX(4px); }
.over-fleur a:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 4px; }

/* Afsluiting */
.section.over-slot { padding: 96px 0 112px; }
.over-slot-kaart { max-width: 600px; margin: 0 auto; text-align: center; }
.over-slot-kaart img {
  width: 80px;
  height: 80px;
  margin: 0 auto 22px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--color-line), 0 14px 30px -12px rgba(20, 16, 30, 0.5);
}
.over-slot-kaart h2 { margin: 0 0 14px; font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; }
.over-slot-kaart p { margin: 0 auto; max-width: 48ch; font-size: 16px; line-height: 1.65; text-wrap: pretty; }
.over-slot-acties {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 28px;
  margin-top: 28px;
}
.over-slot-acties .btn-dark { min-height: 50px; padding: 0 24px; font-size: 15px; }
.over-slot-acties .btn-dark:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }

/* Tablet: alles onder elkaar, niets meer vast bij het scrollen. */
@media (max-width: 980px) {
  .over-hero { padding: 132px 0 72px; }
  .over-hero-raster { grid-template-columns: minmax(0, 1fr); }
  .over-hero-foto { max-width: 560px; }
  .section.over-wie,
  .section.over-verhaal { padding: 80px 0; }
  .over-wie-raster { grid-template-columns: minmax(0, 1fr); }
  .over-wie-foto { max-width: 440px; }
  .section.over-fleur { padding: 80px 0; }
  .over-verhaal-raster,
  .over-fleur-raster { grid-template-columns: minmax(0, 1fr); }
  .over-verhaal-kop { position: static; }
  .over-fleur-foto { position: relative; top: auto; max-width: 440px; }
}

/* Telefoon */
@media (max-width: 760px) {
  .over-hero { padding: 118px 0 56px; }
  .over-hero-lead { font-size: 16px; }
  .section.over-wie,
  .section.over-verhaal,
  .section.over-fleur { padding: 64px 0; }
  .section.over-slot { padding: 64px 0 80px; }
  .over section[id] { scroll-margin-top: 44px; }
  .over-wie-tekst p:not(.intro-label) { font-size: 15px; }
  .over-wie-tekst .over-wie-lead { font-size: 16.5px; }
  .over-wie-bewijs { flex-direction: column; gap: 6px; }
  .over-wie-bewijs li { padding: 0; border-left: 0; }
  .over-wie-foto img,
  .over-hero-foto img,
  .over-fleur-foto img { border-radius: 11px; }
  .over-tijdlijn li { grid-template-columns: 1fr; padding: 18px 0 20px; }
  .over-jaar { margin-bottom: 4px; font-size: 15px; }
  .over-tijdlijn h3 { font-size: 17px; }
  .over-tijdlijn p,
  .over-fleur-tekst p { font-size: 15px; }
  .over-citaat { margin: 24px 0; padding-left: 18px; }
  .over-fleur-acties { flex-direction: column; align-items: flex-start; gap: 4px; }
  .over-fleur-acties .btn { max-width: 100%; white-space: normal; text-align: left; }
}

/* ============================================
   Podcasts: aanbevolen podcast naast de kop
   ============================================ */
/* Een glazen kaart met de cover, zoals een uitgelichte show in een
   streamingapp. De kaart linkt naar de pagina van de podcast. */
.podcasts-hero {
  display: grid;
  grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
  gap: 40px 56px;
  align-items: center;
}
.uitgelicht { display: block; color: #fff; }
.page-hero .uitgelicht-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.uitgelicht-label::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}
.uitgelicht-kaart {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  padding: 16px 26px 16px 16px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px rgba(10, 6, 20, 0.6);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.uitgelicht:hover .uitgelicht-kaart {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.24);
}
.uitgelicht:focus-visible { outline: none; }
.uitgelicht:focus-visible .uitgelicht-kaart { outline: 3px solid var(--color-yellow); outline-offset: 4px; }
.uitgelicht-cover { position: relative; }
.uitgelicht-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: -8px 12px 18px -4px rgba(10, 6, 20, 0.55);
}
.uitgelicht-play {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  padding-left: 2px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  box-shadow: 0 8px 18px -6px rgba(10, 6, 20, 0.6);
  transition: transform .25s ease;
}
.uitgelicht:hover .uitgelicht-play { transform: scale(1.08); }
.uitgelicht-cat {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 238, 82, 0.14);
  color: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.page-hero .uitgelicht-info h2 {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #fff;
}
.page-hero .uitgelicht-info p { max-width: none; }
.page-hero .uitgelicht-host {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}
.page-hero .uitgelicht-afl {
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.88);
}
.uitgelicht-afl span {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}

@media (max-width: 980px) {
  .podcasts-hero { grid-template-columns: minmax(0, 1fr); }
  .uitgelicht { max-width: 560px; }
}
@media (max-width: 760px) {
  .uitgelicht-kaart { grid-template-columns: 132px minmax(0, 1fr); gap: 16px; padding: 12px 16px 12px 12px; }
  .uitgelicht-play { width: 34px; height: 34px; right: 7px; bottom: 7px; }
  .uitgelicht-play svg { width: 15px; height: 15px; }
  .page-hero .uitgelicht-info h2 { font-size: 21px; }
  .page-hero .uitgelicht-host { margin-bottom: 10px; }
  .page-hero .uitgelicht-afl { padding-top: 9px; font-size: 12.5px; }
}
@media (max-width: 420px) {
  .uitgelicht-kaart { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
  .uitgelicht-play { width: 30px; height: 30px; right: 6px; bottom: 6px; }
  .uitgelicht-play svg { width: 13px; height: 13px; }
  .uitgelicht-cat { margin-bottom: 8px; }
  .page-hero .uitgelicht-info h2 { font-size: 18px; }
  .page-hero .uitgelicht-host { font-size: 12.5px; }
}

/* ============================================
   Kennismaking aanvragen
   ============================================ */
/* Het belangrijkste formulier van de site, op de homepagina en op de
   contactpagina. Zo min mogelijk drempels: drie vragen met grote tikvlakken,
   Fleur als gezicht en links in drie stappen wat er daarna gebeurt. Na het
   versturen maakt het formulier plaats voor een bevestiging. */
.section.kennis {
  position: relative;
  isolation: isolate;
  padding: 104px 0;
  background: #14101E;
  color: #fff;
}
.section.kennis::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 114, 208, 0.28), transparent 70%),
    radial-gradient(40% 55% at 100% 100%, rgba(76, 40, 130, 0.5), transparent 70%);
}
.section.kennis--pagina { padding-top: 156px; }
.kennis-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px 80px;
  align-items: start;
}
.kennis .intro-label { color: rgba(255, 255, 255, 0.72); }
.kennis-intro h2,
.kennis-intro h1 {
  margin: 0 0 16px;
  font-weight: 700;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  color: #fff;
}
.kennis-lead {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: clamp(16px, 1.3vw, 17.5px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.76);
  text-wrap: pretty;
}

/* Fleur als gezicht van het gesprek */
.kennis-fleur { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.kennis-fleur img {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 3px #14101E, 0 0 0 4.5px var(--color-yellow);
}
.kennis-fleur p { margin: 0; font-size: 13.5px; line-height: 1.45; color: rgba(255, 255, 255, 0.62); }
.kennis-fleur .kennis-fleur-naam { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }

/* Zo gaat het */
.kennis-stappen { margin: 0 0 28px; padding: 0; list-style: none; }
.kennis-stappen li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}
.kennis-stappen li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 32px;
  bottom: 4px;
  width: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.kennis-stap-nr {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  color: var(--color-yellow);
}
.kennis-stappen h2,
.kennis-stappen h3 { margin: 3px 0 3px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: #fff; }
.kennis-stappen p { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }

/* Gegevens: klein onderaan, voor wie liever zelf belt of mailt */
.kennis-gegevens {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kennis-gegevens li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: rgba(255, 255, 255, 0.66); }
.kennis-gegevens svg { flex: none; color: var(--color-yellow); opacity: 0.85; }
.kennis-gegevens a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, 0.3); text-underline-offset: 3px; }
.kennis-gegevens a:hover { text-decoration-color: var(--color-yellow); }

/* De kaart met het formulier */
.kennis-kaart {
  padding: 32px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7);
}
.kennis-form { margin: 0; }
.kennis-vraag { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.kennis-kop {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: #fff;
}
.kennis-nr {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  font-size: 11.5px;
  font-weight: 800;
}
.kennis-sub {
  display: block;
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.kennis-sub span { font-weight: 500; color: rgba(255, 255, 255, 0.72); }
.kennis-vraag--extra .kennis-sub { margin-top: 0; }

/* Keuzes als grote tikvlakken */
.kennis-keuzes { display: flex; flex-wrap: wrap; gap: 8px; }
.keuze { position: relative; cursor: pointer; }
.keuze input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.keuze span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.keuze:hover span { border-color: rgba(255, 255, 255, 0.4); }
.keuze input:checked + span { background: var(--color-yellow); border-color: var(--color-yellow); color: var(--color-ink); }
.keuze input:focus-visible + span { outline: 3px solid var(--color-purple-light); outline-offset: 3px; }

/* Velden: 16 pixels tekst, zodat een iPhone niet inzoomt */
.kennis-veld {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 13px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  background: rgba(10, 6, 20, 0.55);
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color .15s ease, background .15s ease;
}
.kennis-veld::placeholder { color: rgba(255, 255, 255, 0.6); }
.kennis-veld:focus { outline: none; border-color: var(--color-yellow); background: rgba(10, 6, 20, 0.75); }
.kennis-veld:focus-visible { box-shadow: 0 0 0 3px rgba(255, 238, 82, 0.35); }
.kennis-veld:user-invalid { border-color: #FFB4A8; }
textarea.kennis-veld { min-height: 84px; resize: vertical; }

.kennis-knop { min-height: 56px; margin-top: 4px; font-size: 16px; }
.kennis-knop svg { transition: transform .2s ease; }
.kennis-knop:hover svg { transform: translateX(4px); }
.kennis-knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.kennis-knop:disabled { opacity: 0.7; cursor: wait; transform: none; }
.kennis-noot { margin: 12px 0 0; font-size: 13px; text-align: center; color: rgba(255, 255, 255, 0.55); }
.kennis .form-status.error { color: #FFB4A8; }
.kennis .form-status a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Na het versturen */
.kennis-klaar { padding: 28px 8px 12px; text-align: center; outline: none; }
.kennis-klaar[hidden] { display: none; }
.kennis-vink {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--color-yellow);
  color: var(--color-ink);
  box-shadow: 0 0 0 10px rgba(255, 238, 82, 0.12);
}
.kennis-klaar h2,
.kennis-klaar h3 { margin: 0 0 10px; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; }
.kennis-klaar > p { max-width: 36ch; margin: 0 auto 26px; text-wrap: balance; font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.76); }
.kennis-fleur--klein { justify-content: center; margin: 0; }
.kennis-fleur--klein img { width: 40px; height: 40px; }
.kennis-fleur--klein p { font-size: 14px; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 980px) {
  .section.kennis { padding: 80px 0; }
  .section.kennis--pagina { padding-top: 132px; }
  .kennis-raster { grid-template-columns: minmax(0, 1fr); }
  .kennis-kaart { order: -1; }
  .kennis-intro { display: contents; }
  .kennis-intro > .intro-label { order: -4; margin-bottom: 0; }
  .kennis-intro > h2,
  .kennis-intro > h1 { order: -3; margin-bottom: 0; }
  .kennis-intro > .kennis-lead { order: -2; margin-bottom: 0; }
  .kennis-raster { gap: 16px; }
  .kennis-kaart { margin: 12px 0 28px; }
  .kennis-fleur, .kennis-stappen, .kennis-gegevens { max-width: 560px; }
}
@media (max-width: 760px) {
  .section.kennis { padding: 64px 0; }
  .section.kennis--pagina { padding-top: 116px; }
  .kennis-kaart { padding: 22px 18px; border-radius: 14px; }
  .keuze span { padding: 0 15px; font-size: 13.5px; }
}

/* ============================================
   Eén stijl voor de hele site (kwaliteitsronde 30-09-2026)
   ============================================ */
/* Wat op de homepagina en Over ons is ontstaan, geldt nu overal: kleine labels
   met de gele lijn, koppen op gewicht 700, donkere openingen met paarse gloed,
   en lijsten met dunne lijnen in plaats van kaarten op paars. */
h1, h2, h3, h4 { font-weight: 700; }
h1, h2 { letter-spacing: -0.03em; text-wrap: balance; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0;
  border-radius: 0;
  background: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-yellow);
}
.page-hero .eyebrow,
.section--purple .eyebrow,
.section--purple-deep .eyebrow,
.section.vast .eyebrow,
.podcast-detail .podcast-cat.eyebrow { background: none; color: rgba(255, 255, 255, 0.72); }
.podcast-detail .podcast-cat.eyebrow { color: var(--color-purple); }

/* Openingen van de subpagina's: dezelfde donkere basis als de homepagina */
.page-hero {
  padding: 152px 0 80px;
  background: #14101E;
}
.page-hero::after {
  background:
    radial-gradient(45% 70% at 0% 0%, rgba(138, 114, 208, 0.30), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(76, 40, 130, 0.55), transparent 70%);
}
.page-hero h1 {
  margin: 0 0 18px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
.page-hero p {
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}

/* Koppen boven secties en afsluiters */
.section-head h2 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; }
.page-cta h2 { font-size: clamp(28px, 2.9vw, 40px); line-height: 1.1; }

/* Paarse secties: donkerder en rustiger, met dezelfde gloed */
.section--purple {
  position: relative;
  isolation: isolate;
  background: #1E1236;
}
.section--purple::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(50% 70% at 0% 0%, rgba(138, 114, 208, 0.28), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, rgba(76, 40, 130, 0.6), transparent 70%);
}

/* Voordelen op locatie: een lijst met vinkjes en dunne lijnen */
.benefits-grid {
  gap: 0 48px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.benefits-grid li {
  padding: 18px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #fff;
  font-size: 15.5px;
  font-weight: 500;
}
.benefit-check { background: var(--color-yellow); color: var(--color-ink); }

/* Twijfels over een podcast: vraag en antwoord onder elkaar, zonder kaarten */
.why-grid { gap: 8px 48px; }
.why-card {
  padding: 22px 0 8px;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.why-card .q-mark {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin: 0 0 14px;
  border-radius: 50%;
  background: var(--color-yellow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  color: var(--color-ink);
}
.section--purple .why-card h3 { color: #fff; font-size: 17px; line-height: 1.3; }
.section--purple .why-card p { color: rgba(255, 255, 255, 0.74); font-size: 15px; line-height: 1.65; }

/* FAQ-pagina: twee kolommen op wit, met dunne lijnen */
#faq-section .faq-list {
  max-width: 1080px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
#faq-section .faq-item { border-bottom: 1px solid var(--color-line); }
#faq-section .faq-item.open .faq-question .plus { background: var(--color-yellow); color: var(--color-ink); }
#faq-section .faq-answer a { color: var(--color-purple); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  #faq-section .faq-list { grid-template-columns: minmax(0, 1fr); }
}

/* 404 */
.niet-gevonden {
  position: relative;
  isolation: isolate;
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 160px 0 120px;
  background: #14101E;
  color: #fff;
}
.niet-gevonden::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 70% at 0% 0%, rgba(138, 114, 208, 0.30), transparent 70%),
    radial-gradient(40% 60% at 100% 100%, rgba(76, 40, 130, 0.55), transparent 70%);
}
.niet-gevonden .intro-label { color: rgba(255, 255, 255, 0.72); }
.niet-gevonden h1 { margin: 0 0 16px; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; letter-spacing: -0.035em; color: #fff; }
.niet-gevonden-lead { max-width: 46ch; margin: 0 0 30px; font-size: 17px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.niet-gevonden-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.niet-gevonden .intro-link { color: #fff; }
.niet-gevonden .intro-link:hover { color: var(--color-yellow); }

@media (max-width: 760px) {
  .page-hero { padding: 120px 0 56px; }
}

/* Klantlogo's als laatste blok boven de footer: ruimte voor het microfoonteken
   dat uit de footer omhoogsteekt. */
main > section.section--tight.klanten-slot:last-child { padding: 72px 0 156px; }
@media (max-width: 760px) {
  /* Op de telefoon steekt het teken minder ver omhoog, dus minder ruimte nodig. */
  section:has(+ .site-footer),
  main:has(+ .site-footer) > section:last-child { padding-bottom: 20px; }
  main.section:has(+ .site-footer) { padding-bottom: 144px; }
  main > section.section--tight.klanten-slot:last-child { padding: 56px 0 20px; }
}

/* ============================================
   Homepagina: impressie van de studio
   ============================================ */
/* Op donkerpaars: kop en korte tekst naast elkaar, daaronder een mozaiek van
   vier studiofoto's over de volle breedte, met een klein bijschrift per foto. */
#studio.studio-impressie {
  position: relative;
  isolation: isolate;
  background: #1E1236;
}
#studio.studio-impressie::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 114, 208, 0.26), transparent 70%),
    radial-gradient(40% 55% at 100% 100%, rgba(76, 40, 130, 0.55), transparent 70%);
}
.studio-impressie-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 40px;
  margin-bottom: 22px;
}
.studio-impressie-kop .eyebrow { margin-bottom: 12px; }
.studio-impressie-kop h2 {
  margin: 0;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.15;
  color: #fff;
}
.studio-impressie-link {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
.studio-impressie-link:hover { color: var(--color-yellow); }
.studio-impressie-link svg { transition: transform .2s ease; }
.studio-impressie-link:hover svg { transform: translateX(4px); }
.studio-impressie a:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 4px; }

/* Eén rustige rij van vier even grote foto's, zodat de homepagina compact blijft. */
#studio.studio-impressie { padding: 80px 0; }
.studio-impressie-fotos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.studio-impressie-fotos img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
  background: #241B33;
}
.studio-foto-a { object-position: center 62%; }
.studio-foto-c { object-position: 35% center; }
.studio-foto-d { object-position: 20% center; }

@media (max-width: 760px) {
  #studio.studio-impressie { padding: 56px 0; }
  .studio-impressie-kop { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
  .studio-impressie-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .studio-impressie-fotos img { border-radius: 7px; }
}

/* ============================================
   Homepagina: showreel
   ============================================ */
/* Donker blok tussen Wie wij zijn en de pakketten. De video staat groot in
   beeld met de poster en een knop linksonder; er laadt niets tot iemand klikt. */
.section.showreel {
  position: relative;
  isolation: isolate;
  padding: 96px 0;
  background: #14101E;
  color: #fff;
}
.section.showreel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(45% 60% at 0% 0%, rgba(138, 114, 208, 0.26), transparent 70%),
    radial-gradient(40% 55% at 100% 100%, rgba(76, 40, 130, 0.5), transparent 70%);
}
.showreel .eyebrow { color: rgba(255, 255, 255, 0.72); }
.showreel-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 64px;
  margin-bottom: 30px;
}
.showreel-kop h2 {
  margin: 0;
  font-size: clamp(28px, 2.9vw, 40px);
  line-height: 1.1;
  color: #fff;
}
.showreel-kop p {
  max-width: 44ch;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  text-wrap: pretty;
}
.showreel-speler {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: #000;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8);
}
.showreel-speler video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.showreel-speler video:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: -3px; }
.showreel-bediening {
  position: absolute;
  right: 20px;
  bottom: 20px;
  flex-direction: row-reverse;
  display: flex;
  align-items: center;
  gap: 10px;
}
.showreel-geluid,
.showreel-opnieuw,
.showreel-pauze {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.showreel-geluid { padding: 0 20px 0 16px; background: var(--color-yellow); color: var(--color-ink); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.6); }
.showreel-geluid:hover { transform: translateY(-1px); }
.showreel-opnieuw,
.showreel-pauze { width: 48px; background: rgba(20, 16, 30, 0.6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.showreel-opnieuw:hover,
.showreel-pauze:hover { background: rgba(20, 16, 30, 0.85); }
.showreel-geluid:focus-visible,
.showreel-opnieuw:focus-visible,
.showreel-pauze:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.showreel-geluid .icoon-aan,
.showreel-speler.met-geluid .showreel-geluid .icoon-uit { display: none; }
.showreel-speler.met-geluid .showreel-geluid .icoon-aan { display: block; }
.showreel-speler.met-geluid .showreel-geluid { background: rgba(20, 16, 30, 0.6); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.showreel-pauze .icoon-speel,
.showreel-speler:not(.speelt) .showreel-pauze .icoon-pauze { display: none; }
.showreel-speler:not(.speelt) .showreel-pauze .icoon-speel { display: block; }
@media (prefers-reduced-motion: reduce) {
  .showreel-geluid, .showreel-opnieuw, .showreel-pauze { transition: none; }
}
@media (max-width: 760px) {
  .section.showreel { padding: 64px 0; }
  .showreel-kop { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 22px; }
  .showreel-kop p { font-size: 15px; }
  .showreel-speler { border-radius: 10px; }
  .showreel-bediening { right: 10px; bottom: 10px; gap: 8px; }
  .showreel-geluid, .showreel-opnieuw, .showreel-pauze { height: 40px; font-size: 13.5px; }
  .showreel-geluid { padding: 0 14px 0 12px; }
  .showreel-opnieuw, .showreel-pauze { width: 40px; }
}

/* ============================================
   Op locatie: commercial in de kop, praktijkfoto's
   ============================================ */
.loc-hero { padding-bottom: 96px; }
.loc-hero-raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px 64px;
  align-items: center;
}
.loc-hero h1 { max-width: none; font-size: clamp(28px, 3.5vw, 48px); }
@media (max-width: 980px) { .loc-hero h1 { font-size: clamp(28px, 8.4vw, 40px); } }
.loc-hero h1 .regel { display: block; white-space: nowrap; color: #fff; }
.loc-hero h1 .regel span { color: var(--color-yellow); }
.loc-hero-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }
.loc-hero-acties .btn { min-height: 50px; padding: 0 24px; font-size: 15px; }
.loc-hero-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-display); font-weight: 700; font-size: 15px; color: #fff; }
.loc-hero-link:hover { color: var(--color-yellow); }
.loc-hero-link:focus-visible { outline: 3px solid var(--color-yellow); outline-offset: 4px; border-radius: 4px; }
.loc-video { border-radius: 13px; }

.section.loc-praktijk { padding: 80px 0 40px; }
.loc-kop { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin-bottom: 22px; }
.loc-kop .eyebrow { margin-bottom: 12px; }
.loc-kop h2 { margin: 0; font-size: clamp(22px, 1.9vw, 26px); line-height: 1.15; }
.loc-kop-link { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-purple); }
.loc-kop-link svg { transition: transform .2s ease; }
.loc-kop-link:hover svg { transform: translateX(4px); }
.loc-kop-link:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 4px; border-radius: 4px; }
.loc-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.loc-foto { position: relative; display: block; overflow: hidden; border-radius: 8px; background: #241B33; }
.loc-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .6s ease; }
.loc-foto:hover img { transform: scale(1.03); }
.loc-foto:focus-visible { outline: 3px solid var(--color-purple); outline-offset: 3px; }
.loc-foto span {
  position: absolute; left: 10px; bottom: 10px; padding: 4px 10px; border-radius: 999px;
  background: rgba(20, 16, 30, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: #fff; font-family: var(--font-display); font-weight: 600; font-size: 11px; letter-spacing: 0.02em;
}
.section.loc-werkwijze { padding: 72px 0 88px; }
.loc-voordelen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px;
  margin: 44px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--color-line);
}
.loc-voordelen li {
  display: flex; align-items: flex-start; gap: 12px; padding: 16px 0;
  border-bottom: 1px solid var(--color-line); font-size: 14.5px; line-height: 1.5; color: var(--color-ink);
}
.loc-vink { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%; background: var(--color-yellow); color: var(--color-ink); }
@media (prefers-reduced-motion: reduce) { .loc-foto img { transition: none; } }

@media (max-width: 980px) {
  .loc-hero-raster { grid-template-columns: minmax(0, 1fr); }
  .loc-hero { padding-bottom: 72px; }
  .loc-voordelen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .loc-hero { padding-bottom: 56px; }
  .loc-video { border-radius: 10px; }
  .section.loc-praktijk { padding: 56px 0 24px; }
  .section.loc-werkwijze { padding: 48px 0 64px; }
  .loc-kop { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 18px; }
  .loc-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .loc-foto:first-child { grid-column: 1 / -1; }
  .loc-foto:first-child img { aspect-ratio: 16 / 9; }
  .loc-foto { border-radius: 7px; }
  .loc-foto span { left: 8px; bottom: 8px; font-size: 10.5px; padding: 3px 8px; }
  .loc-voordelen { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
}

/* Podcasts: aanbevolen kaart iets gekanteld, het label beweegt mee */
.uitgelicht-kaart { transform: rotate(2deg); box-shadow: 0 34px 60px -26px rgba(10, 6, 20, 0.75); }
.uitgelicht:hover .uitgelicht-kaart { transform: rotate(2deg) translateY(-3px); }
.page-hero .uitgelicht-label { transform: rotate(2deg); transform-origin: left center; }
@media (max-width: 760px) {
  .uitgelicht-kaart, .uitgelicht:hover .uitgelicht-kaart { transform: rotate(1.5deg); }
  .page-hero .uitgelicht-label { transform: rotate(1.5deg); }
}
/* In de commercial staat eigen tekst linksonder; de knoppen staan hier rechts. */


/* Kwaliteitsronde 30-09-2026: compacter en rustiger */
/* Knoppen van de video's rechtsonder: links staan de namen en teksten in beeld. */
/* Showreel: gecentreerd en smaller, zodat de homepagina niet te lang wordt. */
.section.showreel { padding: 80px 0 88px; }
.showreel-kop { justify-content: center; text-align: center; margin-bottom: 26px; }
.showreel-kop .eyebrow { justify-content: center; }
.showreel-speler { max-width: 960px; margin: 0 auto; }

/* Homepagina: zes covers per rij, dan staan alle podcasts in twee rijen. */
.home #producties .podcast-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px 18px; }
.home #producties .podcast-meta h3 { font-size: 13px; line-height: 1.3; }
.home #producties .podcast-cat { font-size: 10px; }
@media (max-width: 1100px) { .home #producties .podcast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home #producties .podcast-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 12px; } }
@media (max-width: 760px) {
  .home #producties .podcast-meta { margin-top: 8px; padding-top: 0; }
  .home #producties .podcast-meta h3 { font-size: 11.5px; letter-spacing: -0.015em; }
  .home #producties .podcast-cat { font-size: 9px; letter-spacing: .06em; }
}
@media (max-width: 350px) { .home #producties .podcast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Galerij met dezelfde donkere kop als de andere pagina's */
.section.galerij-foto { padding: 72px 0 96px; }
@media (max-width: 760px) { .section.galerij-foto { padding: 40px 0 64px; } }

/* Videoknoppen: rechtsonder, en na een paar seconden weg zolang de video speelt */
.showreel-bediening { transition: opacity .35s ease, transform .35s ease; }
.showreel-speler.rust .showreel-bediening { opacity: 0; transform: translateY(6px); }
.showreel-speler.rust { cursor: none; }
@media (prefers-reduced-motion: reduce) { .showreel-bediening { transition: none; } }
#locatie-case { padding: 72px 0 88px; border-top: 1px solid var(--color-line); }
@media (max-width: 760px) { #locatie-case { padding: 56px 0 64px; } }

/* ============================================================
   Voor organisaties (zakelijke-podcast.html) en de keuze studio
   of locatie, ook op de homepagina. Bouwt voort op de stijl van
   de locatiepagina.
   ============================================================ */
.org-foto { overflow: hidden; border-radius: 13px; }
.org-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 45%; }
.section.org-toepassingen { padding: 80px 0 72px; }
.org-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.org-raster li {
  display: flex; flex-direction: column; gap: 10px; padding: 24px 24px 22px;
  border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: #fff;
}
.org-raster h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.org-raster p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-ink-soft); }
.org-raster a {
  display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--color-purple);
}
.org-raster a svg { transition: transform .2s ease; }
.org-raster a:hover svg { transform: translateX(4px); }
.org-stappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin: 44px 0 0; padding: 0; list-style: none; counter-reset: none; }
.org-stappen li { display: flex; flex-direction: column; gap: 12px; }
.org-stap-nr {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-yellow); color: var(--color-ink); font-family: var(--font-display); font-weight: 800; font-size: 15px;
}
.org-stappen h3 { margin: 0 0 6px; font-size: 17px; }
.org-stappen p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--color-ink-soft); }
.section.org-keuze { padding: 80px 0; }
.org-keuze-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.org-keuze-kaart {
  display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 26px; border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #2A1A4D 0%, #1E1236 100%); color: rgba(255, 255, 255, 0.78);
}
.org-keuze-kaart h3 { margin: 0; color: #fff; font-size: 21px; }
.org-keuze-kaart p { margin: 0; font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.78); }
.org-keuze-kaart .loc-hero-link { margin-top: auto; }
.org-vragen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin: 0; border-top: 1px solid var(--color-line); }
.org-vragen div { padding: 20px 0; border-bottom: 1px solid var(--color-line); }
.org-vragen dt { margin-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: 16.5px; color: var(--color-ink); }
.org-vragen dd { margin: 0; font-size: 15px; line-height: 1.65; color: var(--color-ink-soft); }
.org-vragen a { color: var(--color-purple); text-decoration: underline; text-underline-offset: 3px; }

/* Podcastpagina's: kruimelpad en wie hem maakte */
.podcast-kruimel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 14px; color: var(--color-ink-soft); }
.podcast-kruimel a { color: var(--color-purple); }
.podcast-kruimel a:hover { text-decoration: underline; }
.podcast-maker { font-size: 14.5px; color: var(--color-ink-soft); }

@media (max-width: 1100px) {
  .org-stappen { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
}
@media (max-width: 980px) {
  .org-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .section.org-toepassingen, .section.org-keuze { padding: 56px 0; }
  .org-raster, .org-keuze-raster, .org-vragen { grid-template-columns: minmax(0, 1fr); }
  .org-stappen { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 32px; }
  .org-stappen li { flex-direction: row; align-items: flex-start; }
  .org-stap-nr { flex: none; }
  .org-keuze-kaart { padding: 24px 22px 22px; }
}
/* De algemene .section-marge overschreef de ruimte onder de vaste menubalk. */
.section.podcast-detail { padding-top: 124px; }
@media (max-width: 760px) { .section.podcast-detail { padding-top: 108px; } }
.podcast-maker a { color: var(--color-purple); text-decoration: underline; text-underline-offset: 3px; }

/* Video en Spotify pas laden na een klik (privacy: geen verbinding met
   YouTube of Spotify zonder dat de bezoeker daarvoor kiest). */
.embed-laden { position: relative; display: grid; place-items: center; min-height: 100%; background: #14101E; }
.case-video .embed-laden { position: absolute; inset: 0; }
.embed-laden > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.embed-laden-inhoud { position: relative; display: grid; justify-items: center; gap: 12px; max-width: 420px; padding: 24px; text-align: center; }
.embed-laden-inhoud p { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.85); }
.embed-laden-inhoud a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.embed-laden-knop { display: inline-flex; align-items: center; gap: 8px; }
.embed-laden--spotify { min-height: 260px; border-radius: var(--radius-lg); }
.embed-laden iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-laden--spotify iframe { position: static; display: block; height: 520px; }

/* Tekstpagina (privacyverklaring) */
.tekstpagina { max-width: 760px; }
.tekstpagina h2 { margin: 40px 0 12px; font-size: clamp(20px, 2vw, 24px); }
.tekstpagina h2:first-child { margin-top: 0; }
.tekstpagina p { margin: 0 0 14px; font-size: 16px; line-height: 1.7; color: var(--color-ink-soft); }
.tekstpagina a, .kennis-noot a { text-decoration: underline; text-underline-offset: 3px; }
.tekstpagina a { color: var(--color-purple); }
.footer-privacy { margin-left: 10px; color: inherit; text-decoration: underline; text-underline-offset: 3px; }