/* ==========================================================================
   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 {
  /* Palet (bron: design/tokens/tokens.json, dat na deze file laadt en wint) */
  --navy:       #010A4F;   /* Deep Twilight — koppen, tekst, diepte     */
  --periwinkle: #9381FF;   /* Soft Periwinkle — subtitels, accenten     */
  --groen:      #D0FCB3;   /* Tea Green — knoppen en CTA's              */
  --white:      #FFFFFF;   /* achtergrond, lichte tekst op donker        */

  /* Afgeleid. Periwinkle zelf haalt als tekst op de witte achtergrond maar
     2,6:1. De inktvariant (60% periwinkle, 40% navy) haalt AA op alle drie de
     lichte vlakken: achtergrond 5,7 — groene band 5,5 — lila band 4,8. */
  --periwinkle-ink:  color-mix(in srgb, var(--periwinkle) 60%, var(--navy));
  --periwinkle-soft: #FCF0FA;
  --navy-deep:  color-mix(in srgb, var(--navy) 82%, #000);
  --line:       color-mix(in srgb, var(--navy) 13%, transparent);
  --line-light: color-mix(in srgb, var(--white) 24%, transparent);

  /* De oude rolnamen wijzen naar het nieuwe palet, zodat alles wat ze gebruikt
     vanzelf meekleurt. Waar een oude kleur twee rollen had (sage was zowel
     knopkleur als icoonkleur) is de afwijkende rol hieronder expliciet gezet. */
  --creme:     var(--white);            /* achtergrond, lichte tekst op donker */
  --sage:      var(--periwinkle-ink);   /* iconen, vinkjes, cijfers, focus     */
  --sage-deep: var(--navy);
  --sage-soft: var(--periwinkle-soft);
  --mist:      var(--periwinkle);       /* accent op navy, lichte vlakken      */
  --mist-soft: var(--periwinkle-soft);
  --tan:       var(--groen);
  --tan-soft:  var(--groen);
  --taupe:     var(--periwinkle-ink);   /* subtitels, labels, onderschriften   */
  --mocha:     var(--periwinkle);

  /* 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. */
/* Vijf vlakken om blokken van elkaar te scheiden. Periwinkle en groen zijn
   licht genoeg dat de tekst erop navy blijft; alleen navy en deep zijn donker. */
.band--creme { background: var(--white); color: var(--navy); }
.band--mist  { background: var(--periwinkle-soft); color: var(--navy); }
.band--tan   { background: var(--groen); color: var(--navy); }
.band--sage  { background: var(--periwinkle); color: var(--navy); }
.band--navy  { background: var(--navy); color: var(--white); }
.band--deep  { background: var(--navy-deep); color: var(--white); }

.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--navy .em, .band--deep .em { color: var(--mist); }
.band--navy .display, .band--deep .display,
.band--navy h2, .band--deep h2,
.band--navy h3, .band--deep h3 { color: var(--creme); }
/* Op periwinkle wordt het accentwoord wit: 3,1:1, genoeg voor de grote koppen
   waar .em in staat. Navy zou als accent wegvallen tegen de navy kop. */
.band--sage .em { color: var(--white); }

.kicker {
  font-family: var(--ff-body); font-weight: 700; font-size: .95rem;
  text-transform: lowercase;
  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--navy .kicker, .band--deep .kicker { color: var(--mist); }
.band--navy .kicker__s, .band--deep .kicker__s { color: var(--mist); }
/* Het contactpaneel is navy zonder een band te zijn; ook daar pure periwinkle
   (5,9:1). De inktvariant is voor lichte vlakken en haalt op navy maar 2,9:1. */
.contact__intro .kicker, .contact__intro .kicker__s { color: var(--periwinkle); }
.band--sage .kicker, .band--sage .kicker__s { color: var(--navy); }

/* 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--navy .rule, .band--deep .rule { border-color: var(--line-light); }

/* -------------------------------------------------------------- knoppen - */
/* Knoppen zijn Tea Green met navy tekst, zonder rand (01-10). De rand blijft
   2px maar transparant, zodat alle knoppen even groot blijven als voorheen. */
.btn {
  --bg: var(--groen); --fg: var(--navy); --bd: var(--navy);
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .72rem 1.35rem;
  background: var(--bg); color: var(--fg);
  border: 2px solid transparent;
  /* 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(--white); }

/* 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; } }

/* Zonder rand zou de secundaire knop losse tekst worden; daarom een zacht vlak. */
.btn--secundair { --bg: var(--periwinkle-soft); --fg: var(--navy); }
.btn--secundair:hover { --bg: var(--groen); --fg: var(--navy); }
/* Accent was de donkere variant; nu is elke CTA groen, dus gelijk aan .btn. */
.btn--accent { --bg: var(--groen); --fg: var(--navy); --bd: var(--navy); }
.btn--accent:hover { --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.btn--donker { --bg: var(--groen); --fg: var(--navy); --bd: var(--groen); }
.btn--donker:hover { --bg: var(--white); --fg: var(--navy); --bd: var(--white); }
/* Op een navy band hoeft de groene knop geen rand: 15,8:1 tegen de achtergrond. */
.band--navy .btn, .band--deep .btn { --bd: var(--groen); }
.band--navy .btn:hover, .band--deep .btn:hover { --bg: var(--white); --fg: var(--navy); --bd: var(--white); }
/* Op de groene band zou een groene knop verdwijnen; daar wordt hij navy. */
.band--tan .btn { --bg: var(--navy); --fg: var(--white); --bd: var(--navy); }
.band--tan .btn:hover { --bg: var(--periwinkle); --fg: var(--navy); --bd: var(--periwinkle); }
.band--tan .btn--secundair { --bg: var(--white); --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; } }
/* Met de teamvideo krijgt het beeld wat meer ruimte dan bij een foto. De drie
   cijfers blijven dan op één regel, met iets minder tussenruimte. */
@media (min-width: 900px) {
  .hero__grid--video { grid-template-columns: .9fr 1.1fr; }
  .hero__grid--video .hero__stats { grid-template-columns: repeat(3, 1fr); column-gap: clamp(1rem, 2vw, 2rem); }
}

.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--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--navy .stat__num { color: var(--mist); }
.band--sage .stat__num { color: var(--navy); }
.stat__lbl { font-size: .87rem; opacity: .8; max-width: 22ch; margin: .3rem 0 0; }

/* ------------------------------------------------------------------ beeld - */
/* margin: 0 omdat .media een <figure> is: de browser zet daar standaard 40px
   links en rechts, en dan vult het beeld zijn kolom niet. */
.media { position: relative; overflow: hidden; margin: 0; border-radius: var(--r-lg); background: var(--periwinkle-soft); aspect-ratio: 4 / 3; }
.media--portrait { aspect-ratio: 3 / 4; }
.media--square { aspect-ratio: 1 / 1; }
/* Heroevideo: breed, zodat het hele team in beeld blijft. */
.media--video { aspect-ratio: 3 / 2; }
.media--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.video-knop {
  position: absolute; right: .9rem; bottom: .9rem; z-index: 2;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--white) 90%, transparent); color: var(--navy);
  box-shadow: 0 4px 16px rgb(1 10 79 / .18);
  transition: transform .2s var(--ease);
}
.video-knop:hover { transform: scale(1.06); }
.video-knop svg { width: 18px; height: 18px; }
.video-knop__speel { display: none; }
.video-knop[aria-pressed="true"] .video-knop__pauze { display: none; }
.video-knop[aria-pressed="true"] .video-knop__speel { display: grid; }
.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; }

/* Geen organische uitsneden meer (30-09): alle foto's zijn afgerond. De S uit
   het beeldmerk in de achtergrond is het terugkerende vormelement. */

.media__ph {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .45rem; text-align: center; padding: 1.5rem;
  background: linear-gradient(155deg, var(--periwinkle) 0%, var(--periwinkle-ink) 100%);
  color: color-mix(in srgb, var(--creme) 85%, transparent);
  font-size: .74rem; font-weight: 700; text-transform: lowercase;
}
.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; }

/* .shaped droeg eerst een zachte cirkel achter elk beeld. Die is weg: de S in de
   achtergrond neemt die rol over en er staan minder organische vormen. */
.shaped { position: relative; }

/* --------------------------------------------------------------- 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; text-transform: lowercase; 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-start;
  min-height: 270px; padding: clamp(1.5rem, 2.4vw, 2rem);
  /* Titels beginnen in elke kaart op dezelfde hoogte, onder de cirkel; de
     link staat onderaan. In een rij zijn de kaarten even hoog (grid). */
  padding-top: clamp(4rem, 6.5vw, 5.5rem);
  border-radius: var(--r-md); text-decoration: none;
  background: var(--periwinkle); color: var(--navy);
  transition: transform .35s var(--ease);
}
.dcard:nth-child(2) { background: var(--groen); color: var(--navy); }
.dcard:nth-child(3) { background: var(--periwinkle-soft); 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; text-transform: lowercase; opacity: .9; margin: 0 0 .8rem; }
.dcard p { font-size: .94rem; opacity: .95; margin: 0 0 1.2rem; }
.dcard__go {
  margin-top: auto;
  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--navy .acc, .band--deep .acc { border-color: var(--line-light); }
.acc__item { border-bottom: 1px solid var(--line); }
.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--navy .checks svg, .band--deep .checks svg { color: var(--mist); }
.band--sage .checks svg { color: var(--navy); }

/* -------------------------------------------------------- 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; }
/* Mobiel: de programma's schuiven zijwaarts in plaats van een lange stapel.
   De volgende kaart steekt een stukje uit, zodat duidelijk is dat er meer is. */
@media (max-width: 819px) {
  .plist--naast {
    display: grid; grid-auto-flow: column; grid-template-columns: none;
    grid-auto-columns: min(82%, 21rem); gap: 1rem;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut, 1.25rem);
    margin-inline: calc(var(--gut, 1.25rem) * -1); padding-inline: var(--gut, 1.25rem);
    padding-bottom: .5rem; -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .plist--naast::-webkit-scrollbar { display: none; }
  .plist--naast .pitem { scroll-snap-align: start; }
}
/* 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; text-transform: lowercase; 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; text-transform: lowercase; 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; letter-spacing: .16em; text-transform: uppercase; 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; }
/* De S uit het beeldmerk, in losse streken, als achtergrondlaag. Toon op toon:
   hij moet te herkennen zijn, niet om aandacht vragen. */
.vorm-bg {
  position: absolute; z-index: 0; height: auto; overflow: visible;
  fill: currentColor; color: var(--periwinkle); opacity: .16;
  pointer-events: none;
  animation: vormdrift 30s ease-in-out infinite alternate;
}
.vorm-bg--boven { aspect-ratio: 357.6 / 277.6; }
.vorm-bg--onder { aspect-ratio: 356.3 / 277.6; }
.vorm-bg--letter { aspect-ratio: 436.3 / 388.7; }
.vorm-bg use { width: 100%; height: 100%; }
@keyframes vormdrift {
  from { transform: translate(0, 0) rotate(0deg); }
  to   { transform: translate(2%, -3%) rotate(5deg); }
}
.band--sage .vorm-bg { color: var(--white); opacity: .2; }
.band--navy .vorm-bg, .band--deep .vorm-bg { color: var(--periwinkle); opacity: .22; }
.band--mist .vorm-bg { color: var(--white); opacity: 1; }
.band--creme .vorm-bg { color: var(--periwinkle-soft); opacity: 1; }
.band--tan .vorm-bg { color: var(--white); opacity: .45; }
.hero.band--creme .vorm-bg { color: var(--periwinkle-soft); opacity: 1; }
.site-footer { position: relative; overflow: hidden; }
.site-footer .vorm-bg { color: var(--periwinkle); opacity: .14; }
.site-footer > .wrap, .hero .wrap { position: relative; z-index: 1; }



/* 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); }

/* 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;
  border-radius: var(--r-lg); 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, .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); text-transform: lowercase; 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(--groen); --fg: var(--navy);
  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 transparent !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(--navy); --fg: var(--white);
  background: var(--navy) !important; color: var(--white) !important;
  border-color: var(--navy) !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; } }

/* ----------------------------------------------- bewijs als kaartenstapel - */
/* Meer dan één bewijs op een pagina: dezelfde opmaak als een los bewijsblok
   (beeld links, tekst rechts), maar dan op kaarten die op elkaar liggen. De
   volgende kaart schuift naar voren, de vorige schuift weg naar links. Alle
   kaarten staan in één rastercel, zo is de stapel even hoog als de hoogste. */
.deck__stapel { display: grid; padding: 0 22px 22px 0; touch-action: pan-y; }
.deck__kaart {
  grid-area: 1 / 1; background: var(--white); color: var(--navy);
  border-radius: var(--r-lg, 24px); border: 1px solid var(--line);
  padding: clamp(1rem, 2.4vw, 2rem);
  box-shadow: 0 22px 44px -30px color-mix(in srgb, var(--navy) 55%, transparent);
  transition: transform .6s var(--ease), opacity .3s var(--ease);
  transform-origin: 50% 100%;
}
.deck__kaart[data-pos="0"] { z-index: 3; }
.deck__kaart[data-pos="1"] { z-index: 2; transform: translate(11px, 11px) scale(.985); }
.deck__kaart[data-pos="2"] { z-index: 1; transform: translate(22px, 22px) scale(.97); }
.deck__kaart[data-pos="x"] { z-index: 0; transform: translate(22px, 22px) scale(.97); opacity: 0; }
/* De kaarten achter de bovenste laten alleen hun rand zien. */
.deck__kaart:not([data-pos="0"]) > * { visibility: hidden; }
/* Wegschuiven: de kaart blijft dicht tot hij grotendeels weg is, zodat de
   teksten van twee kaarten nooit door elkaar heen te lezen zijn. Terugkomen
   start vanuit dezelfde plek links buiten de stapel. */
.deck__kaart.is-weg, .deck__kaart.is-komt { z-index: 4; transform: translate(-108%, 3%) rotate(-5deg); opacity: 0; }
.deck__kaart.is-weg { transition: transform .6s var(--ease), opacity .2s linear .4s; }
.deck__kaart.is-weg > *, .deck__kaart.is-komt > * { visibility: visible; }
.deck__nav { align-items: center; justify-content: flex-start; margin-top: 1.5rem; }
.deck__teller { font-weight: 700; font-size: .9rem; min-width: 3.2em; text-align: center; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .deck__kaart, .deck__kaart.is-weg { transition: none; } }

/* Bouwafspraak copydocument v2: een titel past op een telefoon in twee regels.
   De inline maten op de grote h2's zijn een clamp; op smalle schermen gaat
   deze regel daarom voor. */
@media (max-width: 560px) {
  h1.display { font-size: 1.95rem; }
  .hero__grid--video h1.display { font-size: 2.6rem; }
  h2, h2.display { font-size: 1.55rem !important; }
}


/* ------------------------------------------------ kleurvariant B (voorbeeld) -
   Tweede kleurindeling van de homepage. De secties krijgen de klasse .b; hier
   staan alleen de kleuraanpassingen en de geschreven tekstjes. */
:root { --ff-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive; }
.b > .wrap { position: relative; }
.b.band--navy .em { color: var(--periwinkle); }
.b.hero.band--navy { color: var(--white); }
.b.band--navy .kicker { color: var(--mist); }
.b.band--navy .btn--secundair { --bg: transparent; --fg: var(--white); border-color: var(--white); }
.b.band--navy .btn--secundair:hover { --bg: var(--white); --fg: var(--navy); }
.b .dcard:nth-child(3) { background: var(--navy); color: var(--white); }
.b.band--mist .em, .b.band--creme .em { color: var(--navy); }
.b.hero .vorm-bg { top: -26% !important; bottom: auto !important; right: -12% !important; left: auto !important; width: 48% !important; opacity: .5; }

/* Geschreven tekstje: een label linksonder op de foto (bij "drie routes"
   rechtsboven in het blok). Het label heeft een eigen wit vlak, zodat het op
   elke foto en elke achtergrond leesbaar is. De tekst staat hier in de css,
   zodat opbouw en velden gelijk blijven aan de homepage. */
.b .notitie { position: relative; }
.b .notitie::after {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 3; pointer-events: none;
  font-family: var(--ff-hand); font-weight: 700; font-size: clamp(1.2rem, 1.8vw, 1.55rem); line-height: 1.1;
  padding: .28em .7em .36em; border-radius: .45em; max-width: 14em;
  background: var(--white); color: var(--navy); box-shadow: 0 6px 18px rgba(25, 25, 60, .18);
  transform: rotate(-3deg);
}
.b .notitie-1::after { content: "People make progress"; }
.b .notitie-2::after { content: "Drie routes. Eén ambitie: vooruit."; left: auto; bottom: auto; right: var(--gut); top: -1.4rem; background: var(--navy); color: var(--white); }
.b .notitie-3::after { content: "Gedrag is de motor van groei."; }
.b .notitie-4::after { content: "Resultaten die blijven hangen."; }
@media (max-width: 899px) { .b .notitie::after { font-size: 1.15rem; left: .7rem; bottom: .7rem; } .b .notitie-2::after { left: auto; bottom: auto; right: var(--gut); top: -1.6rem; } }