/* ==========================================================================
   Scout — website

   HUISSTIJL: 1-op-1 uit Figma > Scout > scout-brandsheet (node 9:4).
   Kleuren, typografie, knopstijlen, logo en de organische merkvorm komen
   daar letterlijk vandaan. Tinten worden hier afgeleid met color-mix, zodat
   er geen kleuren bij verzonnen zijn.

   LAYOUT: opbouw naar het model van Brout (home / leiderschapsontwikkeling /
   werkwijze), op verzoek van de klant:
   - hero met grote kop en beeld op een merkvorm
   - logostrip direct onder de vouw
   - drie gekleurde diensten­kaarten
   - accordeon naast beeld
   - donkere band met programmakaarten en meta-regels
   - tabs voor de fasen van een traject
   - testimonials, publicatiekaarten
   - contactblok: donker tekstvlak naast licht formulier
   - footer met nieuwsbriefkaart

   De brandsheet schrijft voor: "warm, menselijk, professioneel". Vandaar de
   opbouw van Brout, maar niet hun felheid.
   ========================================================================== */

/* --------------------------------------------------------------- tokens - */
:root {
  /* Figma > scout-brandsheet > KLEUR */
  --sage:  #6D8B85;   /* hoofdkleur, vlakken, covers   */
  --mist:  #C5E5E9;   /* logo, zachte accenten         */
  --tan:   #D5B2A0;   /* warmte, menselijke kant       */
  --taupe: #8F7F71;   /* labels, onderschriften        */
  --navy:  #010A4F;   /* tekst, diepte, contrast       */
  --mocha: #C4A490;   /* warme steunkleur              */
  --creme: #FBFDF4;   /* basis, ademruimte             */
  --white: #FFFFFF;

  /* Afgeleid */
  --sage-deep:  color-mix(in srgb, var(--sage) 82%, var(--navy));
  --sage-soft:  color-mix(in srgb, var(--sage) 24%, var(--creme));
  --navy-deep:  color-mix(in srgb, var(--navy) 82%, #000);
  --mist-soft:  color-mix(in srgb, var(--mist) 38%, var(--creme));
  --tan-soft:   color-mix(in srgb, var(--tan) 34%, var(--creme));
  --line:       color-mix(in srgb, var(--navy) 13%, transparent);
  --line-light: color-mix(in srgb, var(--creme) 24%, transparent);

  /* Typografie: display bewust afgeweken van de brandsheet (Abril Fatface was
     te sierlijk, call 28-08 en 11-09) — Bricolage Grotesque: stoer maar warm. */
  --ff-display: "Bricolage Grotesque", "Avenir Next", "Arial Black", sans-serif;
  --ff-body: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --maxw: 1240px;
  --gut: clamp(1.25rem, 4vw, 3.5rem);

  --r-btn: 6px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22,1,.36,1);
}

/* ---------------------------------------------------------------- reset - */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--ff-body);
  font-size: clamp(1rem, .4vw + .92rem, 1.06rem);
  line-height: 1.65;
  color: var(--navy);
  background: var(--creme);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
ul { padding: 0; margin: 0; }

h1, h2, h3, h4 { margin: 0 0 .55em; line-height: 1.1; text-wrap: balance; }
h1, h2, h3 { font-family: var(--ff-display); font-weight: 700; letter-spacing: -.015em; }
h2 { font-size: clamp(1.75rem, 3.1vw, 2.75rem); }
h3 { font-size: clamp(1.15rem, 1.5vw, 1.45rem); }
h4 { font-size: 1rem; font-family: var(--ff-body); font-weight: 800; }
p { margin: 0 0 1.05em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------- layout - */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.narrow { max-width: 780px; }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); position: relative; }
.section--tight { padding-block: clamp(2.25rem, 4vw, 3.75rem); }

/* Vlakken uit de brandsheet: sage en navy als dragers, lichtblauw en tan als
   zachte/warme accenten, crème als ademruimte. */
.band--creme { background: var(--creme); color: var(--navy); }
.band--mist  { background: var(--mist-soft); color: var(--navy); }
.band--tan   { background: var(--tan-soft); color: var(--navy); }
.band--sage  { background: var(--sage); color: var(--creme); }
.band--navy  { background: var(--navy); color: var(--creme); }
.band--deep  { background: var(--navy-deep); color: var(--creme); }

.row { display: grid; gap: clamp(2rem, 5vw, 5.5rem); align-items: center; }
@media (min-width: 900px) {
  .row { grid-template-columns: 1fr 1fr; }
  .row--flip > *:first-child { order: 2; }
  .row--text-wide { grid-template-columns: 1.15fr .85fr; }
  /* min-width:0 zodat de kolombreedte de fr-verhouding volgt en niet door een
     lang woord wordt opgerekt. */
  .row--tabel { grid-template-columns: .82fr 1.18fr; }
  .row--tabel > * { min-width: 0; }
}

/* --------------------------------------------------------- typografie - */
.display {
  font-family: var(--ff-display); font-weight: 800;
  font-size: clamp(2.5rem, 6.6vw, 5.25rem);
  line-height: .98; letter-spacing: -.015em;
  margin: 0 0 1.35rem; text-wrap: balance;
}

/* Eén woord in een andere kleur — het patroon uit de social-sjablonen
   ("Het is gedrag."). Navy op licht, lichtblauw op donker. */
.em { color: var(--navy); }
.band--sage .em, .band--navy .em, .band--deep .em { color: var(--mist); }
.band--sage .display, .band--navy .display, .band--deep .display,
.band--sage h2, .band--navy h2, .band--deep h2,
.band--sage h3, .band--navy h3, .band--deep h3 { color: var(--creme); }

.kicker {
  font-family: var(--ff-body); font-weight: 700; font-size: .95rem;
  margin: 0 0 1.1rem; color: var(--taupe);
  display: flex; align-items: center; gap: .5rem;
}
.kicker__s { width: 17px; height: 17px; flex: none; color: var(--sage); display: inline-grid; }
.kicker__s svg { width: 100%; height: 100%; }
.kicker--center { justify-content: center; }
.band--sage .kicker, .band--navy .kicker, .band--deep .kicker { color: var(--mist); }
.band--sage .kicker__s, .band--navy .kicker__s, .band--deep .kicker__s { color: var(--mist); }

/* Bricolage heeft, anders dan Abril, echte gewichten: overal stevig neerzetten. */
.stat__num, .acc__q, .tcard blockquote, .word-marquee__w, .team-card__naam,
.logo-item, .mobile-nav__links > a, .mobile-nav__links li > a,
.boekkaart__body h4, .dcard h3, .pitem h3, .post h3 { font-weight: 700; }

.lead { font-size: clamp(1.05rem, 1.1vw, 1.2rem); line-height: 1.6; max-width: 54ch; }
.muted { opacity: .8; }
.center { text-align: center; }
.center p, .center .lead { margin-inline: auto; }

/* Dunne scheidingslijn met bijschrift, zoals onderaan de social-sjablonen. */
.rule { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0 1rem; }
.band--sage .rule, .band--navy .rule, .band--deep .rule { border-color: var(--line-light); }

/* -------------------------------------------------------------- knoppen - */
/* Figma > scout-brandsheet > KNOPPEN: rechthoekig met kleine radius. */
.btn {
  --bg: var(--sage); --fg: var(--creme); --bd: var(--sage);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.35rem;
  background: var(--bg); color: var(--fg);
  border: 2px solid var(--bd);
  /* Organisch afgerond, in lijn met de merkvorm: elke hoek net anders. */
  border-radius: 1.15em .5em 1.05em .55em / .65em 1.15em .55em 1.05em;
  font-weight: 800; font-size: .95rem; text-decoration: none; cursor: pointer;
  transition: background .22s var(--ease), color .22s var(--ease),
              border-color .22s var(--ease);
}
.btn:hover { --bg: var(--navy); --bd: var(--navy); --fg: var(--creme); }

/* De S uit het logo als badge in de knop; draait aan zodra je hovert. */
.btn:has(.btn__s) { padding: .5rem .55rem .5rem 1.35rem; }
.btn__s {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fg); color: var(--bg);
  transition: background .22s var(--ease), color .22s var(--ease);
}
.btn__s svg { width: 17px; height: 17px; transition: transform .6s var(--ease); }
.btn:hover .btn__s svg { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) { .btn:hover .btn__s svg { transform: none; } }

.btn--secundair { --bg: transparent; --fg: var(--sage); --bd: var(--sage); }
.btn--secundair:hover { --bg: var(--sage); --fg: var(--creme); }
.btn--accent { --bg: var(--navy); --fg: var(--creme); --bd: var(--navy); }
.btn--accent:hover { --bg: var(--sage); --bd: var(--sage); }
.btn--donker { --bg: var(--creme); --fg: var(--navy); --bd: var(--creme); }
.btn--donker:hover { --bg: var(--mist); --bd: var(--mist); --fg: var(--navy); }

.cta-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

.link-arw {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.link-arw svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.link-arw:hover svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- header - */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--creme) 93%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 1.25rem; min-height: 78px; }

.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; margin-right: auto; color: var(--navy); }
.brand__mark { width: 36px; height: 36px; flex: none; color: var(--sage); }
.brand__word { width: 104px; flex: none; color: var(--navy); }

.nav { display: none; gap: 1.5rem; align-items: center; }
@media (min-width: 1020px) { .nav { display: flex; } }
.nav li, .mobile-nav li { list-style: none; margin: 0; display: block; }
.nav ul, .mobile-nav ul { list-style: none; margin: 0; padding: 0; display: contents; }
.nav a { text-decoration: none; font-weight: 700; font-size: .94rem; padding: .3rem 0; position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--sage); transform: scaleX(0); transform-origin: right;
  transition: transform .3s var(--ease);
}
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

/* Submenu: klein crème paneel onder het menu-item, ook via toetsenbord bereikbaar.
   De li/.sub-menu-varianten dekken het WordPress-menu af. */
.nav__sub, .nav li.menu-item-has-children { position: relative; }
.nav__sub > a { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.nav__sub > a svg { width: 12px; height: 12px; flex: none; transition: transform .25s var(--ease); }
.nav__sub:hover > a svg, .nav__sub:focus-within > a svg { transform: rotate(180deg); }
.nav__panel, .nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: -1rem; min-width: 215px;
  display: grid; gap: .1rem; padding: .55rem;
  background: var(--creme); color: var(--navy);
  border: 1px solid var(--line);
  border-radius: 1em .5em .95em .55em / .6em 1em .55em .95em;
  box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--navy) 35%, transparent);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.nav__panel::before, .nav .sub-menu::before { content: ""; position: absolute; inset: -12px 0 auto 0; height: 12px; }
.nav__sub:hover .nav__panel, .nav__sub:focus-within .nav__panel,
.nav li.menu-item-has-children:hover > .sub-menu,
.nav li.menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.nav__panel a, .nav .sub-menu a { padding: .5rem .75rem; border-radius: var(--r-sm); font-size: .92rem; }
.nav__panel a::after, .nav .sub-menu a::after { display: none; }
.nav__panel a:hover, .nav .sub-menu a:hover { background: var(--mist-soft); }

.header-cta { display: none; }
@media (min-width: 1020px) { .header-cta { display: inline-flex; } }

.burger {
  margin-left: auto; position: relative;
  width: 46px; height: 46px; background: none; border: 1px solid var(--line);
  border-radius: 50%; cursor: pointer;
}
@media (min-width: 1020px) { .burger { display: none; } }
.burger span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 2px;
  margin: -1px 0 0 -9px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1) { transform: translateY(-6px); }
.burger span:nth-child(3) { transform: translateY(6px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* Mobiel menu: rustig navy vlak met ademende merkvorm, links die na elkaar
   binnenkomen en contact onderin. */
.mobile-nav {
  position: fixed; inset: 78px 0 0; z-index: 55;
  background: var(--navy); color: var(--creme);
  padding: 2.5rem var(--gut) 2.25rem;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 2.5rem;
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
  overflow: hidden auto;
}
.mobile-nav.is-open {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity .3s var(--ease), visibility 0s;
}

/* De merkvorm zat deels onder de onderrand en maakte het menu daardoor
   scrollbaar terwijl de links gewoon passen. In een eigen laag wordt hij
   netjes afgesneden. */
.mobile-nav__deco { position: absolute; inset: 0; overflow: clip; pointer-events: none; }
.mobile-nav__links { display: flex; flex-direction: column; position: relative; z-index: 1; }
.mobile-nav__links > a {
  font-family: var(--ff-display); font-size: clamp(1.7rem, 7vw, 2.2rem);
  line-height: 1.35; text-decoration: none;
}
.mobile-nav__links > a:hover, .mobile-nav__links > a[aria-current="page"] { color: var(--mist); }
.mobile-nav__links > a { padding-block: .12rem; }
.mobile-nav__sub { display: flex; flex-direction: column; gap: .1rem; padding: .3rem 0 .75rem 1.05rem; }
.mobile-nav__sub a { font-size: 1rem; font-weight: 700; text-decoration: none; opacity: .85; padding: .2rem 0; }
.mobile-nav__sub a::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--mist); margin-right: .55rem; vertical-align: 2px; }

/* Links komen gefaseerd binnen. */
.mobile-nav__links > *, .mobile-nav__foot { opacity: 0; transform: translateY(14px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.mobile-nav.is-open .mobile-nav__links > *, .mobile-nav.is-open .mobile-nav__foot { opacity: 1; transform: none; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(1) { transition-delay: .05s; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(2) { transition-delay: .1s; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(3) { transition-delay: .15s; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(4) { transition-delay: .2s; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(5) { transition-delay: .25s; }
.mobile-nav.is-open .mobile-nav__links > :nth-child(6) { transition-delay: .3s; }
.mobile-nav.is-open .mobile-nav__foot { transition-delay: .35s; }

.mobile-nav__foot { position: relative; z-index: 1; display: grid; gap: 1.1rem; justify-items: start; }
.mobile-nav__contact { margin: 0; font-size: .95rem; line-height: 1.7; }
.mobile-nav__contact a { text-decoration: none; opacity: .9; }
@media (prefers-reduced-motion: reduce) {
  .mobile-nav__links > *, .mobile-nav__foot { transition: none; transform: none; opacity: 1; }
}

/* ------------------------------------------------------------------ hero - */
.hero { padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(2.5rem, 5vw, 4.5rem); position: relative; overflow: hidden; }
.hero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero__grid--split { grid-template-columns: 1.05fr .95fr; } }

.hero__stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line);
}
.band--sage .hero__stats, .band--navy .hero__stats { border-color: var(--line-light); }
.stat__num { font-family: var(--ff-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1; color: var(--sage); }
.band--sage .stat__num, .band--navy .stat__num { color: var(--mist); }
.stat__lbl { font-size: .87rem; opacity: .8; max-width: 22ch; margin: .3rem 0 0; }

/* ------------------------------------------------------------------ beeld - */
.media { position: relative; overflow: hidden; border-radius: var(--r-lg); background: var(--sage); aspect-ratio: 4 / 3; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
.media--wide { aspect-ratio: 16 / 9; }
.media--band { aspect-ratio: 32 / 9; border-radius: 0; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }

/* De organische merkvorm uit Figma (scout-vorm-vlak-a-sage), als clip-path.
   Het pad staat in de <svg> defs bovenaan de pagina. */
.media--vorm { border-radius: 0; clip-path: url(#scout-vorm); }

.media__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .45rem; text-align: center; padding: 1.5rem;
  background: linear-gradient(155deg, var(--sage) 0%, var(--sage-deep) 100%);
  color: color-mix(in srgb, var(--creme) 85%, transparent);
  font-size: .74rem; font-weight: 700;
}
.media__ph svg { margin-inline: auto; width: 28px; height: 28px; opacity: .7; }
.media__ph em { font-style: normal; font-weight: 600; letter-spacing: .03em; text-transform: none; opacity: .8; max-width: 22ch; }

/* Zachte cirkel achter beeld, zoals in de social-sjablonen. */
.shaped { position: relative; }
.shaped::before {
  content: ""; position: absolute; z-index: 0; inset: -12% -14% 18% 16%;
  border-radius: 50%; background: var(--mist); opacity: .75;
}
.shaped > * { position: relative; z-index: 1; }
.band--sage .shaped::before { background: color-mix(in srgb, var(--creme) 22%, transparent); }

/* --------------------------------------------------------------- logostrip - */
.logos { padding-block: clamp(1.5rem, 3vw, 2.25rem); overflow: hidden; border-block: 1px solid var(--line); }
.logos__head { text-align: center; font-size: .88rem; font-weight: 700; color: var(--taupe); margin: 0 auto 1rem; max-width: none; }
.marquee { display: flex; gap: 3.5rem; width: max-content; align-items: center; animation: slide 42s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee { animation: none; } }
@keyframes slide { to { transform: translateX(-50%); } }
.logo-item { font-family: var(--ff-display); font-size: 1.2rem; white-space: nowrap; color: var(--taupe); opacity: .7; transition: opacity .3s var(--ease); }
.logo-item:hover { opacity: 1; }

/* --------------------------------------------------------- dienstenkaarten - */
.cards3 { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 820px) { .cards3 { grid-template-columns: repeat(3, 1fr); } }

/* Kaartkleuren volgen de VOORBEELDEN op de brandsheet: sage, tan, lichtblauw. */
.dcard {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 270px; padding: clamp(1.5rem, 2.4vw, 2rem);
  border-radius: var(--r-md); text-decoration: none;
  background: var(--sage); color: var(--creme);
  transition: transform .35s var(--ease);
}
.dcard:nth-child(2) { background: var(--tan); color: var(--navy); }
.dcard:nth-child(3) { background: var(--mist); color: var(--navy); }
.dcard:hover { transform: translateY(-5px); }
.dcard::before {
  content: ""; position: absolute; top: -32%; right: -18%; width: 64%; aspect-ratio: 1;
  border-radius: 50%; background: color-mix(in srgb, var(--creme) 18%, transparent);
}
.dcard h3 { font-size: clamp(1.4rem, 2.3vw, 1.85rem); margin: 0 0 .3rem; color: inherit; }
.dcard__sub { font-size: .92rem; font-weight: 700; opacity: .9; margin: 0 0 .8rem; }
.dcard p { font-size: .94rem; opacity: .95; margin: 0 0 1.2rem; }
.dcard__go {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 800; font-size: .93rem;
  color: inherit; text-decoration: none;
}
.dcard__go svg { width: 14px; height: 14px; transition: transform .22s var(--ease); }
.dcard:hover .dcard__go svg { transform: translateX(3px); }

/* ---------------------------------------------------------------- mini-cta - */
.mini-cta { text-align: center; }
.mini-cta h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); margin-bottom: .35rem; }
.mini-cta p { margin-inline: auto; margin-bottom: 1.2rem; }

/* -------------------------------------------------------------- accordeon - */
.acc { border-top: 1px solid var(--line); }
.band--sage .acc, .band--navy .acc, .band--deep .acc { border-color: var(--line-light); }
.acc__item { border-bottom: 1px solid var(--line); }
.band--sage .acc__item, .band--navy .acc__item, .band--deep .acc__item { border-color: var(--line-light); }
.acc__q {
  width: 100%; display: flex; align-items: center; gap: .9rem;
  padding: .95rem 0; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--ff-display); font-size: clamp(1.05rem, 1.4vw, 1.22rem);
}
.acc__sign {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--mist); color: var(--navy);
  transition: transform .3s var(--ease);
}
.acc__sign svg { width: 13px; height: 13px; }
.acc__item.is-open .acc__sign { transform: rotate(45deg); }
.acc__a { overflow: hidden; height: 0; transition: height .35s var(--ease); }
.acc__a > div { padding-bottom: 1.1rem; }
.acc__a p { font-size: .96rem; opacity: .85; }

/* --------------------------------------------------------------- checklist - */
.checks { list-style: none; display: grid; gap: .65rem; margin: 1.4rem 0 0; }
.checks li { display: flex; gap: .7rem; align-items: flex-start; font-weight: 600; }
.checks svg { flex: none; width: 17px; height: 17px; margin-top: .32rem; color: var(--sage); }
.band--sage .checks svg, .band--navy .checks svg, .band--deep .checks svg { color: var(--mist); }

/* -------------------------------------------------------- programmakaarten - */
.plist { display: grid; gap: 1rem; }
.pitem {
  background: var(--creme); color: var(--navy);
  border-radius: var(--r-md); padding: clamp(1.25rem, 2vw, 1.75rem);
  display: grid; gap: 1.25rem; align-items: center;
}
@media (min-width: 880px) { .pitem { grid-template-columns: 1.6fr 1.1fr auto; gap: clamp(1.5rem, 3vw, 3rem); } }
/* Programmakaarten staan naast elkaar; de inhoud zelf stapelt dan binnen de
   kaart, met de knop onderaan zodat de drie knoppen op één lijn staan. */
.plist--naast { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.plist--naast .pitem {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 1.25rem; height: 100%;
}
.plist--naast .pitem > :last-child { margin-top: auto; }
/* De kaarten zijn licht, ook in een donkere band; koppen erven daarom de
   kaartkleur in plaats van de bandkleur. Zonder dit staat de titel creme op
   creme en is hij onzichtbaar. */
.band--sage .pitem h3, .band--navy .pitem h3, .band--deep .pitem h3 { color: inherit; }
.pitem__eyebrow { font-size: .88rem; font-weight: 700; color: var(--taupe); margin: 0 0 .25rem; }
.pitem h3 { margin: 0 0 .35rem; }
.pitem p { font-size: .93rem; margin: 0; }
.pitem__meta { list-style: none; display: grid; gap: .4rem; font-size: .87rem; font-weight: 700; }
.pitem__meta li { display: flex; gap: .5rem; align-items: center; }
.pitem__meta svg { width: 15px; height: 15px; flex: none; color: var(--sage); }

/* ------------------------------------------------------------------- tabs - */
.tabs__list { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--line-light); margin-bottom: 2rem; }
.tabs__btn {
  background: none; border: 0; cursor: pointer;
  padding: .7rem 1.1rem; font-weight: 800; font-size: .93rem; opacity: .6;
  border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tabs__btn[aria-selected="true"] { opacity: 1; border-bottom-color: var(--mist); }
.tabs__panel[hidden] { display: none; }

/* ---------------------------------------------------------- testimonials - */
.tcards {
  display: grid; gap: 1.25rem; grid-auto-flow: column; grid-auto-columns: minmax(285px, 1fr);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
}
.tcards::-webkit-scrollbar { display: none; }
.tcard { background: var(--creme); color: var(--navy); border-radius: var(--r-md); padding: clamp(1.25rem, 2vw, 1.7rem); scroll-snap-align: start; }
.tcard blockquote { margin: 0 0 1.2rem; font-family: var(--ff-display); font-size: 1.15rem; line-height: 1.32; }
.tcard__head { display: flex; align-items: flex-start; gap: .7rem; }
.tcard__wie { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.tcard__ava { width: 44px; height: 44px; border-radius: 50%; flex: none; overflow: hidden; background: var(--mist); color: var(--navy); display: grid; place-items: center; font-family: var(--ff-display); font-size: .95rem; }
.tcard__ava img { width: 100%; height: 100%; object-fit: cover; }
.tcard__logo { margin-top: .45rem; }
.tcard__logo img { height: 20px; width: auto; max-width: 110px; object-fit: contain; object-position: left center; filter: grayscale(1); opacity: .7; display: block; }
.tcard__logo--scout svg { width: 22px; height: 22px; color: var(--sage); opacity: .8; display: block; }
.tcard__name { font-weight: 800; font-size: .92rem; }
.tcard__role { font-size: .8rem; opacity: .7; }

.carousel-nav { display: flex; gap: .5rem; justify-content: center; margin-top: 1.25rem; }
.carousel-nav button { width: 42px; height: 42px; border-radius: 50%; cursor: pointer; border: 2px solid currentColor; background: none; display: grid; place-items: center; }
.carousel-nav svg { width: 15px; height: 15px; }

/* ------------------------------------------------------------ publicaties - */
.posts { display: grid; gap: clamp(1.25rem, 2vw, 2rem); }
@media (min-width: 820px) { .posts { grid-template-columns: repeat(3, 1fr); } }
.post { display: flex; flex-direction: column; text-decoration: none; background: var(--creme); border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); transition: transform .3s var(--ease); }
.post:hover { transform: translateY(-4px); }
.post .media { border-radius: 0; aspect-ratio: 16 / 10; }
.post__body { padding: 1.1rem 1.25rem 1.45rem; display: flex; flex-direction: column; flex: 1; }
.post__meta { display: flex; gap: .6rem; align-items: center; font-size: .8rem; font-weight: 700; margin-bottom: .55rem; }
.post__tag { background: var(--mist); color: var(--navy); padding: .18rem .6rem; border-radius: 999px; }
.post__date { color: var(--taupe); }
.post h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.post p { font-size: .92rem; }
.post__go { margin-top: auto; padding-top: 1rem; font-weight: 800; font-size: .92rem; display: inline-flex; align-items: center; gap: .45rem; }
.post__go svg { width: 14px; height: 14px; }

/* ------------------------------------------------------------ contactblok - */
.contact { display: grid; border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .contact { grid-template-columns: 1fr 1fr; } }
.contact__intro { background: var(--navy); color: var(--creme); padding: clamp(1.75rem, 3vw, 3rem); }
.contact__form { background: var(--creme); color: var(--navy); padding: clamp(1.75rem, 3vw, 3rem); }
.contact__intro h2 { color: var(--creme); }

.form { display: grid; gap: .85rem; }
.form__row { display: grid; gap: .85rem; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .3rem; }
.field label { font-size: .77rem; font-weight: 800; letter-spacing: .05em; }
.field input, .field textarea {
  font: inherit; font-size: .96rem; padding: .72rem .85rem;
  border: 2px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: inherit;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--sage); }
.form__note { font-size: .81rem; opacity: .75; margin: 0; }

/* ---------------------------------------------------------------- footer - */
.site-footer { background: var(--navy); color: var(--creme); padding-block: clamp(2.5rem, 5vw, 4rem) 1.75rem; }
.site-footer .brand { color: var(--creme); }
.site-footer .brand__mark { color: var(--mist); }
.site-footer .brand__word { color: var(--creme); }
.footer__grid { display: grid; gap: clamp(2.5rem, 4vw, 4rem); }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.1fr .7fr .7fr 1.4fr; } }
.footer__grid h4 { font-size: .73rem; opacity: .6; margin-bottom: .9rem; }
.footer__list { list-style: none; display: grid; gap: .5rem; }
.footer__list a { text-decoration: none; opacity: .85; font-size: .93rem; }
.footer__list a:hover { opacity: 1; text-decoration: underline; }
.footer__list li { list-style: none; }
.footer__list .sub-menu { list-style: none; display: grid; gap: .45rem; padding: .45rem 0 .15rem .9rem; }
.footer__list .sub-menu a { font-size: .88rem; opacity: .75; }
.footer__bar { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: .82rem; opacity: .7; }

.newsletter { background: var(--mist); color: var(--navy); border-radius: var(--r-md); padding: clamp(1.25rem, 2vw, 1.7rem); }
.newsletter h4 { font-family: var(--ff-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; text-transform: none; opacity: 1; margin-bottom: .35rem; }
.newsletter p { font-size: .89rem; margin-bottom: .9rem; }
.newsletter .field input { border-color: color-mix(in srgb, var(--navy) 18%, transparent); }

/* ------------------------------------------------------------- utilities - */
.note { border-left: 3px solid var(--sage); padding: .5rem 0 .5rem 1rem; font-size: .86rem; opacity: .72; font-style: italic; max-width: 58ch; }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 1.25rem 0 0; }
.tag-list li { padding: .32rem .8rem; border: 1px solid currentColor; border-radius: 999px; font-size: .81rem; font-weight: 700; opacity: .8; }
.mt-2 { margin-top: 1.75rem; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--mist); color: var(--navy); padding: .8rem 1.2rem; z-index: 100; font-weight: 800; }
.skip:focus { left: 0; }
:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; border-radius: 2px; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* --------------------------------------------------------------- reveal - */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.rv .media__ph, .rv .media img, .rv .media video { transform: scale(1.08); transition: transform 1.2s var(--ease); }
.rv.is-in .media__ph, .rv.is-in .media img, .rv.is-in .media video { transform: scale(1); }
.rv.is-in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   Merkbeweging — reactie op feedback 11-09: meer animatie, unieke secties,
   contactpersoon bij elke CTA. Alles binnen de huisstijl.
   ========================================================================== */

/* Drijvende merkvorm als achtergrondlaag in kleurbanden. */
.section--vorm { overflow: hidden; }
.section .wrap { position: relative; z-index: 1; }
.vorm-bg {
  position: absolute; z-index: 0; aspect-ratio: 1;
  clip-path: url(#scout-vorm);
  background: color-mix(in srgb, var(--creme) 14%, transparent);
  pointer-events: none;
  animation: vormdrift 26s ease-in-out infinite alternate;
}
@keyframes vormdrift {
  from { transform: translate(0, 0) rotate(0deg) scale(1); }
  to   { transform: translate(4%, -6%) rotate(14deg) scale(1.08); }
}

/* Zachte cirkel achter beeld krijgt dezelfde langzame adem. */
.shaped::before { animation: vormadem 14s ease-in-out infinite alternate; }
@keyframes vormadem {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-2.5%, 2.5%) scale(1.05); }
}

/* Merkband: kernzinnen in Abril Fatface, doorschuivend, met de S ertussen. */
.word-marquee { overflow: hidden; padding-block: clamp(1.75rem, 3.5vw, 3rem); border-block: 1px solid var(--line); background: var(--creme); }
.marquee--words { gap: clamp(1.75rem, 3.5vw, 3rem); animation-duration: 36s; }
.word-marquee__w {
  font-family: var(--ff-display); white-space: nowrap;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem); line-height: 1; color: var(--navy);
}
.word-marquee__w:nth-child(4n+3) { color: var(--sage); }
.word-marquee__s { width: clamp(22px, 2.6vw, 34px); flex: none; align-self: center; color: var(--mist); }
.word-marquee__s svg { width: 100%; height: auto; animation: sdraai 18s linear infinite; }
@keyframes sdraai { to { transform: rotate(360deg); } }

/* Filmstrook: foto's die traag voorbij schuiven, volle breedte. */
.filmstrip { overflow: hidden; background: var(--creme); padding-block: clamp(1rem, 2vw, 1.75rem); }
.marquee--film { gap: clamp(.9rem, 1.5vw, 1.5rem); animation-duration: 70s; }
.filmstrip__item { width: clamp(240px, 26vw, 380px); flex: none; }
.filmstrip__item .media { aspect-ratio: 4 / 3; border-radius: var(--r-md); }
.filmstrip__item:nth-child(odd) .media { border-radius: 0; clip-path: url(#scout-vorm); }

/* Contactpersoon: foto, naam en functietitel bij een CTA. */
.persoon { display: flex; align-items: center; gap: .85rem; }
.persoon--intro { margin-top: 1.75rem; }
.persoon__foto {
  position: relative; width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden; flex: none;
}
.persoon__foto .media__ph { font-size: 0; gap: 0; padding: 0; }
.persoon__foto .media__ph svg { width: 18px; height: 18px; }
.persoon__wie { font-size: .88rem; line-height: 1.4; opacity: .95; }
.persoon__wie strong { font-size: .95rem; }

/* CTA-band met gezicht: foto in de merkvorm naast tekst en knop. */
.pcta { display: grid; gap: clamp(1.75rem, 3.5vw, 3.5rem); align-items: center; }
@media (min-width: 760px) { .pcta { grid-template-columns: 230px 1fr; } }
.pcta__foto {
  position: relative; overflow: hidden; aspect-ratio: 1;
  clip-path: url(#scout-vorm); max-width: 230px;
}
.pcta h2 { font-size: clamp(1.45rem, 2.3vw, 2rem); margin-bottom: .4rem; }
.pcta p { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .vorm-bg, .shaped::before, .word-marquee__s svg { animation: none; }
}

/* ==========================================================================
   Echte foto's, team en contactgegevens — aanvulling 11-09.
   ========================================================================== */

/* Portretfoto in de persoon-elementen. */
.persoon__foto img, .pcta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcta__foto img { position: absolute; inset: 0; }

/* Teamstrook: doorbladerbaar, foto's om en om in de merkvorm. */
.team-cards { grid-auto-columns: clamp(190px, 21vw, 250px); gap: clamp(1.1rem, 2vw, 1.75rem); }
.team-card { scroll-snap-align: start; }
.team-card .media { margin-bottom: .8rem; }
.team-card__naam { font-family: var(--ff-display); font-size: 1.1rem; margin: 0; }
.team-card__rol { font-size: .85rem; color: var(--taupe); margin: .1rem 0 0; min-height: 1.2em; }
.carousel-nav--links { justify-content: flex-start; }

/* Socials in de footer. */
.socials { display: flex; gap: .6rem; margin-top: 1.1rem; }
.socials a {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-light); opacity: .85;
  transition: opacity .22s var(--ease), background .22s var(--ease);
}
.socials a:hover { opacity: 1; background: color-mix(in srgb, var(--creme) 12%, transparent); }
.socials svg { width: 17px; height: 17px; }
.footer__bar a { opacity: .85; }

/* ==========================================================================
   Boekkaart — leadgenerator in de footer, op elke pagina.
   ========================================================================== */
.boekkaart {
  background: var(--creme); color: var(--navy);
  border-radius: var(--r-md); padding: clamp(1.25rem, 2vw, 1.6rem);
  display: grid; gap: 1.25rem; align-content: start;
}
.media--boek {
  aspect-ratio: 7 / 10; border-radius: 4px; background: var(--tan-soft);
  width: 120px; justify-self: start; align-self: start;
  box-shadow: 8px 10px 26px -10px color-mix(in srgb, var(--navy) 45%, transparent);
  transform: rotate(-2.5deg);
}
.boekkaart__label { font-size: .8rem; font-weight: 700; color: var(--taupe); margin: 0 0 .3rem; }
.boekkaart__body h4 { font-family: var(--ff-display); font-weight: 700; font-size: 1.2rem;
  margin-bottom: .4rem; text-transform: none; letter-spacing: 0; opacity: 1; }
.boekkaart__body p { font-size: .89rem; margin-bottom: .9rem; }
.form--boek { gap: .6rem; margin-bottom: .9rem; }
.form--boek label { position: absolute; left: -9999px; }
.boekkaart .link-arw { font-size: .88rem; }
/* De cover is op elk formaat 120px: gelijk aan zijn desktopkolom, en op mobiel
   niet meer kaartvullend. */

/* WordPress-menu in het mobiele paneel (li-structuur van wp_nav_menu). */
.mobile-nav__links li { list-style: none; }
.mobile-nav__links li > a { font-family: var(--ff-display); font-size: clamp(1.7rem, 7vw, 2.2rem); line-height: 1.35; text-decoration: none; }
.mobile-nav__links .sub-menu { display: flex; flex-direction: column; padding: .2rem 0 .6rem 1.4rem; }
.mobile-nav__links .sub-menu a { font-family: var(--ff-body); font-size: 1.02rem; font-weight: 700; opacity: .85; padding: .22rem 0; }

/* Klantlogo's als beeld in de slider: rustig grijs, kleur bij hover. */
.logo-item--img {
  height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: .6;
  transition: filter .3s var(--ease), opacity .3s var(--ease);
}
.logo-item--img:hover { filter: none; opacity: 1; }

/* Socials op een lichte achtergrond (contactpagina). */
.socials--licht a { border-color: var(--line); }
.socials--licht a:hover { background: var(--mist-soft); }
.checks a { text-decoration: none; }


/* ---- Fluent Forms in de huisstijl (WordPress) ---------------------------- */
/* Fluent Forms laadt zijn eigen css na die van het thema; vandaar de extra
   specificiteit, en op de knop !important tegen eventuele inline-styles. */
.form--ff .fluentform .ff-el-group { margin-bottom: .85rem; }
.form--ff .fluentform .ff-el-input--label { padding: 0; }
.form--ff .fluentform .ff-el-input--label label {
  font-size: .77rem; font-weight: 800; letter-spacing: .05em;
  margin-bottom: .3rem; display: inline-block; color: inherit;
}
.form--ff .fluentform .ff-el-is-required.asterisk-right .ff-el-input--label label:after,
.form--ff .fluentform .ff-el-is-required.asterisk-left .ff-el-input--label label:before { color: #b23a26; }
.form--ff .fluentform .ff-el-form-control {
  width: 100%; height: auto; font: inherit; font-size: .96rem; line-height: 1.5;
  padding: .72rem .85rem;
  border: 2px solid var(--line); border-radius: var(--r-btn);
  background: var(--white); color: inherit; box-shadow: none;
}
.form--ff .fluentform .ff-el-form-control::placeholder { color: inherit; opacity: .45; }
.form--ff .fluentform .ff-el-form-control:focus { outline: none; border-color: var(--sage); box-shadow: none; }
.form--ff .fluentform textarea.ff-el-form-control { min-height: 6.5em; resize: vertical; }
.form--ff .fluentform .ff-btn-submit {
  --bg: var(--navy); --fg: var(--creme);
  display: inline-flex !important; align-items: center; gap: .55rem;
  padding: .72rem 1.35rem !important;
  background: var(--bg) !important; color: var(--fg) !important;
  border: 2px solid var(--bg) !important;
  border-radius: 1.15em .5em 1.05em .55em / .65em 1.15em .55em 1.05em !important;
  font-family: inherit !important; font-weight: 800 !important; font-size: .95rem !important;
  min-height: 0 !important; text-transform: none !important; cursor: pointer;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.form--ff .fluentform .ff-btn-submit:has(.btn__s) { padding: .5rem .55rem .5rem 1.35rem !important; }
.form--ff .fluentform .ff-btn-submit:hover {
  --bg: var(--sage);
  background: var(--sage) !important; border-color: var(--sage) !important;
}
.form--ff .fluentform .ff-btn-submit:hover .btn__s svg { transform: rotate(360deg); }
@media (prefers-reduced-motion: reduce) {
  .form--ff .fluentform .ff-btn-submit:hover .btn__s svg { transform: none; }
}
.form--ff .ff-message-success {
  border: 2px solid var(--sage); border-radius: var(--r-btn);
  padding: .85rem 1rem; font-size: .93rem;
  background: color-mix(in srgb, var(--sage) 12%, transparent);
}
.form--ff .fluentform .error,
.form--ff .fluentform .text-danger { font-size: .8rem; color: #b23a26; }
.form--boek.form--ff .fluentform .ff-el-group { margin-bottom: .6rem; }


/* ---- Casedetail: tekst uit de WordPress-editor --------------------------- */
.prose { max-width: 68ch; }
.prose h2 { margin: 2.4rem 0 .8rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8rem 0 .6rem; }
.prose p { margin: 0 0 1.05rem; }
.prose ul { list-style: none; padding: 0; margin: 0 0 1.05rem; display: grid; gap: .55rem; }
.prose ul li { padding-left: 1.7rem; position: relative; }
.prose ul li::before {
  content: ""; position: absolute; left: 0; top: .32em; width: 1.05em; height: 1.05em;
  border-radius: 50%; background: color-mix(in srgb, var(--sage) 22%, transparent);
}
.prose ul li::after {
  content: ""; position: absolute; left: .3em; top: .58em; width: .48em; height: .26em;
  border-left: 2px solid var(--sage); border-bottom: 2px solid var(--sage);
  transform: rotate(-45deg);
}
.prose blockquote {
  margin: 2rem 0; padding-left: 1.4rem; border-left: 3px solid var(--sage);
  font-family: var(--ff-display); font-size: 1.3rem; line-height: 1.4;
}
.prose img { border-radius: var(--r-md); max-width: 100%; height: auto; }


/* ---- Doorlinkkaarten ("Ontdek meer") ------------------------------------- */
.dcard--link { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: .55rem; transition: transform .3s var(--ease); }
.dcard--link:hover { transform: translateY(-3px); }
.dcard--link .dcard__go { margin-top: auto; padding-top: .6rem; }


/* ---- Juridische pagina's: inhoudsopgave, genummerde leden, tabellen ------ */
.hero--kort { padding-bottom: clamp(2rem, 4vw, 3.5rem); }

.toc {
  border: 2px solid var(--line); border-radius: var(--r-md);
  padding: clamp(1.1rem, 2vw, 1.6rem); margin-bottom: 2.5rem;
  background: color-mix(in srgb, var(--mist) 35%, transparent);
}
.toc__kop { font-size: .77rem; font-weight: 800; letter-spacing: .05em; margin: 0 0 .7rem; }
.toc__lijst { list-style: decimal; padding-left: 1.3rem; margin: 0; display: grid; gap: .35rem; }
.toc__lijst li::marker { font-weight: 800; }
.toc__lijst a { font-size: .93rem; text-decoration: none; border-bottom: 1px solid transparent; }
.toc__lijst a:hover { border-bottom-color: currentColor; }

.prose .leden { list-style: decimal; padding-left: 1.5rem; display: grid; gap: .75rem; margin: 0 0 1.4rem; }
.prose .leden li { padding-left: .25rem; position: static; }
.prose .leden li::before, .prose .leden li::after { content: none; }
.prose .leden li::marker { font-weight: 800; color: var(--sage); }

.tabel-wrap { overflow-x: auto; margin: .9rem 0 .2rem; }
.tabel { border-collapse: collapse; width: 100%; font-size: .92rem; }
.tabel th, .tabel td {
  text-align: left; vertical-align: top; padding: .55rem .8rem;
  border-bottom: 1px solid var(--line);
}
.tabel th { font-size: .77rem; font-weight: 800; letter-spacing: .05em; }
.tabel td:last-child { white-space: nowrap; }
@media (max-width: 560px) { .tabel td:last-child { white-space: normal; } }


/* ---- Van -> naar: vergelijking als document ------------------------------ */
.vannaar {
  background: var(--white); border: 2px solid var(--line);
  border-radius: var(--r-md); overflow: hidden; max-width: 820px;
}
.vannaar__kop, .vannaar__rij {
  display: grid; align-items: center;
  grid-template-columns: 2.1rem 1fr 2.1rem 1fr;
  gap: clamp(.5rem, 1.2vw, .9rem);
  padding: clamp(.8rem, 1.4vw, 1rem) clamp(1rem, 2vw, 1.5rem);
}
/* Twee groottes in de hele tabel: labels (.75rem) en regels (1rem), allebei in
   de tekstfont. Het onderscheid zit in kleur en gewicht, niet in lettertype. */
.vannaar__kop {
  background: var(--navy); color: var(--creme);
  font-size: .75rem; font-weight: 800; letter-spacing: .05em;
}
.vannaar__rijen { list-style: none; margin: 0; padding: 0; }
.vannaar__rij + .vannaar__rij { border-top: 1px solid var(--line); }
.vannaar__nr {
  font-size: .75rem; font-weight: 800; letter-spacing: .04em;
  color: color-mix(in srgb, currentColor 40%, transparent);
}
.vannaar__van { font-size: 1rem; color: color-mix(in srgb, currentColor 60%, transparent); }
.vannaar__pijl {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--sage) 16%, transparent); color: var(--sage);
}
.vannaar__pijl svg { width: 14px; height: 14px; }
.vannaar__naar { font-size: 1rem; font-weight: 800; line-height: 1.3; color: var(--navy); }
@media (max-width: 620px) {
  .vannaar__kop { display: none; }
  .vannaar__rij {
    grid-template-columns: 2.1rem 1fr;
    grid-template-areas: "nr van" ". pijl" ". naar";
    gap: .35rem clamp(.5rem, 2vw, 1rem);
    padding-top: 1.1rem; padding-bottom: 1.1rem;
  }
  .vannaar__nr { grid-area: nr; }
  .vannaar__van { grid-area: van; }
  .vannaar__pijl { grid-area: pijl; width: 1.9rem; height: 1.9rem; transform: rotate(90deg); }
  .vannaar__naar { grid-area: naar; }
}

/* Vraag boven een opsomming, iets nadrukkelijker dan een gewone alinea. */
.vraag { font-weight: 800; margin-bottom: .7rem; }

/* Breed videovlak, voor een clip die de hele kolom mag vullen. */
.media--breed { aspect-ratio: 16 / 9; border-radius: var(--r-md); }

.media { position: relative; }
.media__play {
  position: absolute; inset: 0; margin: auto;
  width: clamp(54px, 7vw, 74px); height: clamp(54px, 7vw, 74px);
  border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--creme) 88%, transparent); color: var(--navy);
  box-shadow: 0 6px 24px rgb(1 10 79 / .18);
  transition: transform .25s var(--ease);
}
.media__play svg { width: 26px; height: 26px; margin-left: 3px; }
.media:hover .media__play { transform: scale(1.06); }

/* Boven het navigatiebreekpunt is het mobiele menu niet te openen; dan hoort
   het ook niet in de opmaak mee te tellen. Deze regel staat achteraan omdat
   een media query de specificiteit niet verhoogt. */
@media (min-width: 1020px) { .mobile-nav { display: none; } }