/* ============================================================
   Aither Network — design system (Handboek 1.8)
   Cream domineert. Ink voor tekst. Koper is het accent.
   Petrol uiterst spaarzaam. Eén easing.
   ============================================================ */

:root {
  --cream:      #F2ECE3;  /* basis-achtergrond, dominant */
  --cream-wit:  #FAF7F1;  /* lichtere ademsectie */
  --ink:        #12100F;  /* tekst, bijna-zwart warm */
  --koper:      #B5734A;  /* HET accent: knoppen, links, snede, lijnen */
  --petrol:     #5A8A8F;  /* alleen techniek/toekomst, uiterst spaarzaam */

  --dim:        #6B6258;  /* gedimde tekst, bijschriften */
  --lijn:       #E2DACE;  /* subtiele scheidingslijn op cream */

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  --space-xs: 0.5rem;
  --space-s:  1rem;
  --space-m:  2rem;
  --space-l:  3rem;
  --space-xl: 5rem;
  --space-xxl: 8rem;

  --wrap: 1200px;
  --radius: 2px;
  --kop-h: 64px;          /* vaste navbar-hoogte — gereserveerd in de hero */

  --easing: cubic-bezier(.33, 1, .68, 1);

  /* SVG grain via feTurbulence — geen externe afbeelding */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a { color: var(--koper); text-decoration: none; transition: color .4s var(--easing); }
a:hover, a:focus { color: var(--petrol); }

main { flex: 1 0 auto; }

/* ---------- typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 var(--space-m);
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); font-weight: 400; }
h2 { font-size: clamp(1.9rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }

p { margin: 0 0 var(--space-m); }
p:last-child { margin-bottom: 0; }

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

.tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--petrol);
  margin-bottom: var(--space-m);
}

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--space-m); }
.wrap--smal { max-width: 760px; }

.sectie { padding: var(--space-xxl) 0; border-top: 1px solid var(--lijn); }
.sectie--ruim { padding: calc(var(--space-xxl) * 1.3) 0; }

/* Lichtere ademsectie */
.sectie--wit { background-color: var(--cream-wit); position: relative; }
.sectie--wit::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); opacity: 0.03; mix-blend-mode: multiply;
}
.sectie--wit > .wrap { position: relative; z-index: 1; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-s) var(--space-m);
  background: transparent;
  transition: background-color .5s var(--easing), border-color .5s var(--easing);
  border-bottom: 1px solid transparent;
}
.nav.scrolled { background-color: var(--cream); border-bottom-color: var(--lijn); }
.nav-logo { display: inline-flex; align-items: center; }
.nav-logo img, .nav-logo svg { height: 36px; width: auto; }

.nav__midden { display: flex; gap: var(--space-m); align-items: center; }
.nav__midden a { color: var(--ink); font-size: 0.9rem; font-weight: 400; letter-spacing: 0.01em; }
.nav__midden a:hover, .nav__midden a.actief { color: var(--koper); }

.nav__rechts { display: flex; gap: var(--space-m); align-items: center; }
.nav__taal { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--dim); }
.nav__taal .uit { color: var(--lijn); }

.nav__hamburger {
  display: none; background: none; border: 0; cursor: pointer;
  width: 28px; height: 22px; padding: 0; position: relative;
}
.nav__hamburger span {
  position: absolute; left: 0; width: 100%; height: 2px;
  background: var(--ink); transition: transform .4s var(--easing), opacity .4s var(--easing);
}
.nav__hamburger span:nth-child(1) { top: 0; }
.nav__hamburger span:nth-child(2) { top: 10px; }
.nav__hamburger span:nth-child(3) { top: 20px; }

/* ---------- knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 500;
  letter-spacing: 0.02em; padding: 0.85em 1.5em; border-radius: var(--radius);
  cursor: pointer; transition: background-color .4s var(--easing), color .4s var(--easing), border-color .4s var(--easing);
  border: 1px solid var(--koper);
}
.knop__pijl { display: inline-block; transition: transform .4s var(--easing); }
.knop:hover .knop__pijl { transform: translateX(5px); }

.knop--primair { background-color: var(--koper); color: var(--cream-wit); }
.knop--primair:hover { background-color: var(--petrol); border-color: var(--petrol); color: var(--cream-wit); }

.knop--outline { background-color: transparent; color: var(--koper); }
.knop--outline:hover { background-color: var(--koper); color: var(--cream-wit); }

.knoppen { display: flex; flex-wrap: wrap; gap: var(--space-s); margin-top: var(--space-l); }

/* ============================================================
   HERO — split mechanic (tekst links, gradient-vlak rechts)
   ============================================================ */
.hero { position: relative; min-height: 92vh; }

/* Rechterhelft: hero-beeld met de misty gradient als fallback eronder */
.hero-vlak {
  position: fixed; top: 0; right: 0; z-index: 1;
  width: 100vw; height: 100vh; overflow: hidden;
  background: url('/assets/img/hero-home.jpg') center right / cover no-repeat,
              linear-gradient(135deg, #D8B89E 0%, var(--cream) 50%, #AEC4C6 100%);
  transition: width 1.4s var(--easing);
}
/* fusie-gradient OVER het beeld: cream links loopt naadloos over in het beeld rechts */
.hero-vlak::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right,
    var(--cream) 0%,
    rgba(242,236,227,0.6) 30%,
    rgba(181,115,74,0.25) 60%,
    rgba(90,138,143,0.15) 100%);
}
/* grain bovenop alles */
.hero-vlak::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background-image: var(--grain); opacity: 0.10; mix-blend-mode: multiply;
}
.hero-vlak.scrolled { width: 50vw; }

.hero__inhoud {
  position: relative; z-index: 2;
  min-height: 92vh; display: flex; flex-direction: column; justify-content: center;
  width: 50vw; margin-right: auto;
  padding: var(--space-xl) var(--space-l) var(--space-xl) var(--space-xl);
}
.hero__inhoud .tag { font-size: 0.7rem; letter-spacing: 0.12em; }
.hero__inhoud h1 { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 400; line-height: 1.15; }
.hero__inhoud .sub { max-width: 40ch; font-size: 0.95rem; letter-spacing: 0.01em; color: rgba(18, 16, 15, 0.65); }
.hero__inhoud .knoppen { margin-top: 1.5rem; }
.hero__inhoud .knop { padding: 0.7rem 1.6rem; font-size: 0.9rem; }

/* scroll-indicator */
.scroll-ind {
  position: fixed; bottom: var(--space-m); left: 50%; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: var(--space-xs);
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
  transition: opacity .8s var(--easing); pointer-events: none;
}
.scroll-ind.weg { opacity: 0; }
.scroll-ind__stip { width: 5px; height: 5px; border-radius: 50%; background: var(--koper); animation: stip 1.8s var(--easing) infinite; }
@keyframes stip { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(8px); opacity: .4; } }

.na-hero { position: relative; z-index: 2; background-color: var(--cream); }

/* ============================================================
   SCROLL REVEALS
   ============================================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--easing), transform .8s var(--easing); }
.reveal.in-view { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: .08s; }
.reveal[data-delay="2"] { transition-delay: .16s; }
.reveal[data-delay="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-vlak, .knop__pijl, .scroll-ind__stip { transition: none; animation: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   SECTIE-COMPONENTEN
   ============================================================ */
.groot-citaat {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.3; max-width: 24ch;
}

/* principes / genummerde blokken */
.principe { padding-top: var(--space-l); border-top: 1px solid var(--lijn); }
.principe + .principe { margin-top: var(--space-l); }
.principe__nr { font-family: var(--font-display); color: var(--koper); font-size: 1.5rem; }
.principe__grid { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-l); }
.principe h3 { margin-bottom: var(--space-s); }
.principe__label { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--petrol); }

/* sector-grid (vijf sectoren) */
.sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
.sector-blok {
  display: flex; flex-direction: column; gap: var(--space-s);
  padding: var(--space-l); background: var(--cream);
  transition: background-color .4s var(--easing); color: var(--ink);
}
.sector-blok:hover { background: #ece4d8; }
.sectie--wit .sector-grid { background: var(--lijn); border-color: var(--lijn); }
.sectie--wit .sector-blok { background: var(--cream-wit); }
.sectie--wit .sector-blok:hover { background: #f3ece1; }
.sector-blok__icon { font-family: var(--font-display); font-size: 1.1rem; letter-spacing: 0.1em; color: var(--koper); }
.sector-blok h3 { margin: 0; }
.sector-blok__meer { margin-top: auto; font-size: 0.85rem; color: var(--koper); }

/* kaarten */
.kaart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-m); }
.kaart {
  display: flex; flex-direction: column; background: var(--cream-wit);
  border: 1px solid var(--lijn); border-radius: var(--radius); overflow: hidden;
  transition: border-color .4s var(--easing), transform .4s var(--easing), box-shadow .4s var(--easing);
}
.kaart:hover { border-color: var(--koper); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(18,16,15,0.07); }
.kaart__thumb { height: 150px; position: relative; overflow: hidden; }
.kaart__thumb::after { content: ""; position: absolute; inset: 0; background-image: var(--grain); opacity: 0.10; mix-blend-mode: multiply; }
.kaart__thumb--1 { background: linear-gradient(135deg, #D8B89E, var(--koper)); }
.kaart__thumb--2 { background: linear-gradient(135deg, #AEC4C6, var(--petrol)); }
.kaart__thumb--3 { background: linear-gradient(135deg, #D8C7B0, var(--ink)); }
.kaart__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-s); flex: 1; }
.kaart__body h3 { margin: 0; font-size: 1.4rem; text-wrap: balance; }
.kaart__meer { margin-top: auto; font-size: 0.85rem; color: var(--koper); }
.kaart__datum { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* stappen */
.stap { display: grid; grid-template-columns: auto 1fr; gap: var(--space-m); padding: var(--space-l) 0; border-top: 1px solid var(--lijn); }
.stap__nr { font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--koper); }

/* artikel */
.artikel { max-width: 720px; }
.artikel__meta { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--space-m); }
.artikel p { font-size: 1.1rem; }
.artikel__intro { font-family: var(--font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); line-height: 1.4; color: var(--ink); }

/* lijst criteria */
.criteria { list-style: none; padding: 0; margin: var(--space-m) 0; }
.criteria li { padding: var(--space-s) 0; padding-left: var(--space-m); border-bottom: 1px solid var(--lijn); position: relative; }
.criteria li::before { content: "—"; position: absolute; left: 0; color: var(--koper); }

/* contactblok */
.contact-blok { padding: var(--space-l) 0; border-top: 1px solid var(--lijn); }
.contact-blok a { font-size: 1.2rem; }

/* paginakop binnenpagina's */
.pagina-kop { padding: calc(var(--space-xxl) + 4rem) 0 var(--space-xl); }

/* ============================================================
   BEELDEN — warme cream-overlay smelt elke foto in de basis
   ============================================================ */
.beeld { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--lijn); }
.beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.beeld::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--cream); opacity: 0.10; mix-blend-mode: multiply;
}
.beeld-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-l); align-items: center; }
.beeld-split .beeld { height: clamp(280px, 32vh, 380px); }
.beeld--breed { height: clamp(220px, 38vh, 420px); }
.pagina-kop .beeld--breed { margin-top: var(--space-xl); }
.beeld-naast { display: grid; grid-template-columns: 180px 1fr; gap: var(--space-l); align-items: center; }
.beeld-naast .beeld { width: 180px; height: 180px; }

/* ============================================================
   HERO-KEERPUNT, CIJFERBALK, PERSOON, GERELATEERD
   ============================================================ */
.hero__keerpunt { font-family: var(--font-display); font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--koper); margin: 0 0 var(--space-m); }
.hero__tagline { font-family: var(--font-display); font-size: clamp(1.25rem, 2vw, 1.6rem); color: var(--ink); margin: 0 0 var(--space-xs); }

/* concrete maatstaven-balk */
.cijferbalk { border-bottom: 1px solid var(--koper); }
.cijferbalk__rij { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-xl); padding: var(--space-m) 0; }
.cijferbalk__rij span { font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--petrol); }

/* menselijk gezicht */
.persoon { display: grid; grid-template-columns: 280px 1fr; gap: 3rem; align-items: start; }
.persoon__foto { position: relative; width: 280px; border-radius: var(--radius); overflow: hidden; }
.persoon__foto img { display: block; width: 100%; height: auto; }
.persoon__foto::after { content: ""; position: absolute; inset: 0; background: rgba(242, 236, 227, 0.12); pointer-events: none; }
.persoon__naam { font-size: 1.8rem; margin-bottom: var(--space-xs); }
.persoon__cred { font-size: 0.8rem; letter-spacing: 0.08em; color: var(--koper); margin-bottom: var(--space-m); }
.persoon__bio p { font-size: 1rem; line-height: 1.8; color: var(--ink); margin: 0 0 1.5rem; }
.persoon__bio p:last-child { margin-bottom: 0; }
.foto-placeholder {
  width: 220px; height: 260px; border-radius: var(--radius);
  border: 1px solid var(--lijn); background: #E7E0D5;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 3rem; letter-spacing: 0.05em; color: var(--dim);
}

/* gerelateerde sectoren onder artikel */
.gerelateerd { margin-top: var(--space-xl); padding-top: var(--space-l); border-top: 1px solid var(--lijn); }
.gerelateerd h4 { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); margin-bottom: var(--space-s); }
.gerelateerd__links { display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); }

/* auteursbalk onder artikel */
.auteur { display: flex; align-items: center; gap: 1rem; margin-top: var(--space-xl); }
.auteur__foto { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--lijn); object-fit: cover; flex-shrink: 0; }
.auteur__tekst { display: flex; flex-direction: column; }
.auteur__naam { font-size: 0.875rem; font-weight: 700; color: var(--ink); }
.auteur__datum { font-size: 0.8rem; color: rgba(18, 16, 15, 0.6); }

/* ============================================================
   LEDEN — login-placeholder (Zone 3)
   ============================================================ */
.leden-poort { max-width: 420px; margin: 0 auto; text-align: center; }
.leden-poort form { display: flex; flex-direction: column; gap: var(--space-s); margin-top: var(--space-l); text-align: left; }
.leden-poort label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); }
.leden-poort input { padding: 0.8em 1em; border: 1px solid var(--lijn); border-radius: var(--radius); background: var(--cream-wit); font-family: var(--font-body); font-size: 1rem; color: var(--ink); }
.leden-poort input:focus { outline: none; border-color: var(--koper); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { flex-shrink: 0; background: #EAE4DA; color: var(--ink); }
.footer__grid {
  width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 4rem 2rem 2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-l);
}
.footer__merk img, .footer__merk svg { width: 150px; height: auto; margin-bottom: var(--space-m); }
.footer__tagline { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.3; margin: 0 0 var(--space-s); }
.footer__sub { font-size: 0.85rem; opacity: 0.75; margin: 0; }
.footer__kol h4 { font-family: var(--font-body); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--koper); margin: 0 0 var(--space-m); font-weight: 500; }
.footer__kol ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-xs); }
.footer__kol a { color: var(--ink); font-size: 0.9rem; text-decoration: none; }
.footer__kol a:hover { color: var(--ink); text-decoration: underline; }

.footer__adres { font-style: normal; font-size: 0.9rem; line-height: 1.7; opacity: 0.75; margin: 0 0 var(--space-m); }
.footer__contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-s); }
.footer__contact li { display: flex; align-items: center; gap: 0.6rem; }
.footer__contact a { font-size: 0.9rem; color: var(--ink); text-decoration: none; word-break: break-word; }
.footer__contact a:hover { text-decoration: underline; }
.footer__icon { color: var(--koper); flex-shrink: 0; display: block; }

.footer__onderbalk { border-top: 1px solid var(--lijn); }
.footer__onderbalk-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 1.5rem 2rem;
  display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-l);
  justify-content: space-between; align-items: center;
  font-size: 0.78rem; opacity: 0.75;
}
.footer__onderbalk-inner a { color: var(--ink); }

@media (max-width: 1024px) {
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr; padding: 3rem 1.5rem 1.5rem; }
  .footer__onderbalk-inner { flex-direction: column; align-items: flex-start; gap: var(--space-xs); padding: 1.5rem; }
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 860px) {
  .nav__midden, .nav__rechts { display: none; }
  .nav__hamburger { display: block; }

  .nav__overlay {
    position: fixed; inset: 0; z-index: 90;
    background: var(--cream);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-m);
    opacity: 0; visibility: hidden; transition: opacity .5s var(--easing), visibility .5s var(--easing);
  }
  .nav__overlay.open { opacity: 1; visibility: visible; }
  .nav__overlay a { color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; }
  .nav__overlay a:hover { color: var(--koper); }

  body.menu-open .nav__hamburger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  body.menu-open .nav__hamburger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav__hamburger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

  .hero-vlak, .hero-vlak.scrolled { width: 100vw; opacity: 0.5; }
  .hero__inhoud { width: 100%; padding: var(--space-xxl) var(--space-m); }

  .beeld-split { grid-template-columns: 1fr; }
  .beeld-split .beeld { height: clamp(220px, 40vw, 300px); }
  .beeld-naast { grid-template-columns: 1fr; justify-items: start; }
  .persoon { grid-template-columns: 1fr; }
  .persoon__foto { width: 100%; max-width: 320px; }
  .foto-placeholder { width: 100%; max-width: 220px; }
  .cijferbalk__rij { gap: var(--space-s) var(--space-l); }

  .principe__grid { grid-template-columns: 1fr; gap: var(--space-s); }
  .sector-grid { grid-template-columns: 1fr; }
  .stap { grid-template-columns: 1fr; gap: var(--space-s); }
}

.nav__overlay { display: none; }
@media (max-width: 860px) { .nav__overlay { display: flex; } }

/* ============================================================
   HERO-BODY (homepage)
   ============================================================ */
.hero__inhoud .hero__body { max-width: 48ch; font-size: 1rem; color: var(--ink); margin-top: var(--space-s); }

/* ============================================================
   PITCH-SECTIES — Voor raden / Voor toezichthouders (homepage)
   ============================================================ */
.pitch__intro {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.7rem);
  line-height: 1.3;
  color: var(--koper);
  margin: 0 0 var(--space-l);
}
/* killer-lead (toezichthouders) — groter, niet cursief */
.pitch__intro--kop {
  font-style: normal;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 22ch;
}

/* bullets met koper-accent, via ::before — geen unicode */
.pitch-lijst { list-style: none; padding: 0; margin: 0 0 var(--space-xl); display: flex; flex-direction: column; gap: var(--space-m); }
.pitch-lijst li { position: relative; padding-left: var(--space-l); max-width: 72ch; }
.pitch-lijst li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--koper);
}

/* gespiegelde donkere sectie (toezichthouders) */
.sectie--ink { background: var(--ink); color: var(--cream); border-top-color: rgba(242, 236, 227, 0.14); }
.sectie--ink h2 { color: var(--cream); }
.sectie--ink .pitch__intro--kop { color: var(--koper); }
.sectie--ink .pitch-lijst li::before { background: var(--cream); }

/* CTA gecentreerd onder de sectie */
.pitch__cta { display: flex; justify-content: center; margin-top: var(--space-l); }
.knop--breed { padding: 1em 2.4em; }
.knop--cream { background: var(--cream); border-color: var(--cream); color: var(--ink); }
.knop--cream:hover { background: var(--koper); border-color: var(--koper); color: var(--cream); }

/* ============================================================
   VERGELIJKINGSTABEL — responsive, horizontaal scrollbaar op mobiel
   ============================================================ */
.vergelijk-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--space-l) 0 var(--space-xl); }
.vergelijk { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 0.9rem; }
.vergelijk th, .vergelijk td { padding: 0.85em 1em; text-align: left; vertical-align: top; border: 1px solid var(--lijn); }
.vergelijk thead th { background: var(--ink); color: var(--cream); font-family: var(--font-body); font-weight: 500; letter-spacing: 0.03em; }
.vergelijk tbody th { background: var(--cream); color: var(--ink); font-family: var(--font-body); font-weight: 600; }
.vergelijk tbody td { background: var(--cream); color: var(--ink); }
.vergelijk .vergelijk__aither { background: var(--koper); color: var(--cream); font-weight: 600; }
.vergelijk thead th.vergelijk__aither { background: var(--koper); color: var(--cream); }
.vergelijk__hoek { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }

/* ════════════════════════════════════════════════════════════
   UPGRADE v2 — Bovenlucht-hero, filmische beelden, split, grid
   Geadapteerd op het bestaande palet (--cream/--ink/--koper/--lijn).
   Geen herdefinitie van .knop of .reveal — die blijven intact.
   ════════════════════════════════════════════════════════════ */

/* ── Body fade-in bij paginastart ── */
body { opacity: 0; animation: pagina-in 0.55s var(--easing) forwards; }
@keyframes pagina-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body { opacity: 1; animation: none; } }

/* extra reveal-vertraging (systeem gebruikt .in-view) */
.reveal[data-delay="4"] { transition-delay: .32s; }

/* ── Annotatie — persoonlijk spoor ── */
.annotatie { padding-left: 1.4rem; border-left: 1.5px solid var(--koper); }
.annotatie__label {
  display: block; font-family: var(--font-body); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--koper); margin-bottom: 0.45rem;
}
.annotatie__tekst {
  font-family: var(--font-display); font-size: 1.08rem; font-weight: 300; font-style: italic;
  line-height: 1.52; color: var(--dim); margin: 0;
}
.annotatie--licht .annotatie__tekst { color: rgba(242, 236, 227, 0.78); }
.annotatie--licht .annotatie__label { opacity: 0.85; }

/* ════════════ HERO — Bovenlucht als volledig canvas (v3) ════════════ */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: 0; }
.hero__beeld { position: absolute; inset: 0; z-index: 0; background: var(--ink); }
.hero__beeld img {
  position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; object-position: center 40%;
  filter: sepia(8%) saturate(88%) brightness(0.9);
  animation: wolken-drift 28s cubic-bezier(.45,0,.55,1) infinite alternate; animation-play-state: paused;
}
.hero__beeld.geladen img { animation-play-state: running; }
@keyframes wolken-drift {
  0%   { transform: scale(1.08) translate(0,0); }
  33%  { transform: scale(1.06) translate(-12px,-4px); }
  66%  { transform: scale(1.04) translate(-6px,4px); }
  100% { transform: scale(1.10) translate(-18px,-2px); }
}
.hero__beeld::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(18,16,15,0) 0%, rgba(18,16,15,.08) 30%, rgba(18,16,15,.52) 68%, rgba(18,16,15,.80) 100%),
    linear-gradient(to left, rgba(18,16,15,.42) 0%, rgba(18,16,15,.18) 35%, transparent 60%);
}
.hero__tekst {
  position: relative; z-index: 3; width: 100%; max-width: var(--wrap); margin: 0 auto;
  padding: 0 clamp(1.5rem,5vw,4rem) clamp(4rem,8vh,7rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); align-items: end;
}
.hero__zij { padding-bottom: 0.2rem; }
.hero__eyebrow {
  font-family: var(--font-body); font-size: .68rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--petrol, #5A8A8F); margin: 0 0 1.4rem; display: flex; align-items: center; gap: .7rem;
  text-shadow: 0 1px 10px rgba(18,16,15,.45);
}
.hero__eyebrow::before { content: ''; display: block; width: 22px; height: 1px; background: var(--petrol, #5A8A8F); flex-shrink: 0; }
.hero h1 {
  font-family: var(--font-display); font-size: clamp(2.8rem,5.5vw,5.6rem); font-weight: 300;
  line-height: 1.04; letter-spacing: -.015em; color: var(--cream); max-width: 13ch; margin: 0;
  text-shadow: 0 2px 20px rgba(18,16,15,.35);
}
.hero h1 em { font-style: italic; color: #CE9C77; }
.hero__sub {
  font-family: var(--font-body); font-size: .9rem; font-weight: 300; line-height: 1.75;
  color: rgba(242,236,227,.78); max-width: 40ch; margin-bottom: 1.8rem; text-shadow: 0 1px 6px rgba(18,16,15,.4);
}
.hero__acties { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }
.hero .annotatie { margin-bottom: var(--space-m); border-left-color: rgba(181,115,74,.55); }
.hero .annotatie .annotatie__label { color: #CE9C77; opacity: .85; }
.hero .annotatie .annotatie__tekst { color: rgba(242,236,227,.85); font-size: 1rem; text-shadow: 0 1px 8px rgba(18,16,15,.45); }
.hero .knop--vol { background: var(--koper); border-color: var(--koper); color: #FBF9F5; font-size: .8rem; font-weight: 500; box-shadow: 0 2px 16px rgba(154,94,58,.28); }
.hero .knop--vol:hover { background: var(--koper-diep, #8E5733); border-color: var(--koper-diep, #8E5733); color: #fff; }
.hero .knop { border-color: rgba(242,236,227,.4); color: var(--cream); font-size: .8rem; }
.hero .knop:hover { border-color: #CE9C77; color: #CE9C77; }
.hero__scroll {
  position: absolute; bottom: 1.8rem; left: 25%; transform: translateX(-50%); z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: .35rem; opacity: 0;
  animation: verschijnen 1s ease 2.5s forwards; pointer-events: none;
}
@keyframes verschijnen { to { opacity: .45; } }
.hero__scroll.weg { opacity: 0 !important; transition: opacity .5s ease; }
.hero__scroll span { font-family: var(--font-body); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(242,236,227,.6); }
.hero__scroll-lijn { width: 1px; height: 28px; background: linear-gradient(180deg, rgba(181,115,74,.8), transparent); animation: puls-lijn 2.4s ease-in-out 2.5s infinite; }
@keyframes puls-lijn { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
@media (max-width: 860px) {
  .hero__tekst { grid-template-columns: 1fr; gap: var(--space-m); padding-bottom: clamp(5rem,12vh,8rem); }
  .hero h1 { font-size: clamp(2.4rem,9vw,3.4rem); }
  .hero__scroll { left: 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__beeld img { animation: none; transform: scale(1.04); }
  .hero__scroll { animation: none; opacity: .35; }
  .hero__scroll-lijn { animation: none; }
}

/* ════════════ Stats-balk ════════════ */
.stats-balk { background: var(--ink); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(181,115,74,0.2); }
.stat { padding: 2rem clamp(1.5rem, 3vw, 2.8rem); border-right: 1px solid rgba(255,255,255,0.06); position: relative; }
.stat:last-child { border-right: none; }
.stat::before { content: ''; position: absolute; top: 0; left: clamp(1.5rem, 3vw, 2.8rem); width: 30px; height: 1.5px; background: var(--koper); opacity: 0.6; }
.stat__getal { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; color: var(--cream); line-height: 1; letter-spacing: -0.02em; margin: 0 0 0.35rem; }
.stat__accent { font-family: var(--font-body); font-size: 0.82rem; font-weight: 300; color: var(--koper); vertical-align: super; margin-left: 0.05em; }
.stat__label { font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.09em; color: rgba(242, 236, 227, 0.72); text-transform: uppercase; margin: 0; }
@media (max-width: 640px) {
  .stats-balk { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .stat:last-child { border-bottom: none; }
}

/* ════════════ Filmisch — beeld met parallax + citaat ════════════ */
.filmisch { position: relative; height: clamp(340px, 50vw, 580px); overflow: hidden; display: flex; align-items: flex-end; background: var(--ink); }
.filmisch__beeld { position: absolute; inset: 0; width: 100%; height: 114%; top: -7%; object-fit: cover; object-position: center 30%; filter: sepia(12%) saturate(82%) brightness(0.86); will-change: transform; }
.filmisch__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,15,0.02) 0%, rgba(18,16,15,0.22) 45%, rgba(18,16,15,0.78) 100%); }
.filmisch__inhoud { position: relative; z-index: 2; padding: 2.5rem clamp(1.5rem, 5vw, 4.5rem); width: 100%; max-width: var(--wrap); margin: 0 auto; }
.filmisch__tekst { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.8rem); font-weight: 300; font-style: italic; color: var(--cream); max-width: 28ch; line-height: 1.22; letter-spacing: -0.01em; margin: 0; }
.filmisch__bron { margin: 1rem 0 0; font-family: var(--font-body); font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--koper); }

/* ════════════ Split — beeld naast inhoud ════════════ */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 500px; }
.split--2-3 { grid-template-columns: 2fr 3fr; }
.split--3-2 { grid-template-columns: 3fr 2fr; }
.split__beeld { position: relative; overflow: hidden; background: var(--lijn); min-height: 320px; }
.split__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(10%) saturate(86%) brightness(0.9); transition: transform 0.9s var(--easing); }
.split:hover .split__beeld img { transform: scale(1.025); }
.split__beeld--rechts-blend img {
  -webkit-mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0,0,0,0.55) 80%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 58%, rgba(0,0,0,0.55) 80%, transparent 100%);
}
.split__beeld--portret img { object-position: center 12%; }
.split__beeld--portret {
  -webkit-mask-image: linear-gradient(to right, black 0%, black 65%, rgba(0,0,0,0.4) 85%, transparent 100%);
  mask-image: linear-gradient(to right, black 0%, black 65%, rgba(0,0,0,0.4) 85%, transparent 100%);
}
.split__inhoud { padding: clamp(2.5rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; gap: var(--space-m); }
.split__inhoud--donker { background: var(--ink); color: var(--cream); }
.split__inhoud--donker h2 { color: var(--cream); }
.split__inhoud--warm { background: #ECE4D8; }
.split__inhoud .split__eyebrow { font-family: var(--font-body); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--koper); margin: 0; }
.split__inhoud h1, .split__inhoud h2 { font-family: var(--font-display); font-weight: 300; font-style: italic; margin: 0; }
@media (max-width: 860px) {
  .split, .split--2-3, .split--3-2 { grid-template-columns: 1fr; }
  .split__beeld { min-height: 260px; }
  .split__beeld--rechts-blend img, .split__beeld--portret { -webkit-mask-image: none; mask-image: none; }
}

/* ════════════ Beeld-grid — drie panelen met hover-label ════════════ */
.beeld-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--lijn); }
.beeld-grid__paneel { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--lijn); }
.beeld-grid__paneel img { width: 100%; height: 100%; object-fit: cover; filter: sepia(10%) saturate(84%); transition: transform 0.7s var(--easing); }
.beeld-grid__paneel:hover img { transform: scale(1.04); }
.beeld-grid__paneel::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 38%, rgba(18,16,15,0.38) 100%); pointer-events: none; }
.beeld-grid__label {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 1.6rem 1.1rem 0.9rem;
  background: linear-gradient(transparent, rgba(18,16,15,0.65)); font-family: var(--font-body);
  font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream);
  opacity: 0; transition: opacity 0.38s ease;
}
.beeld-grid__paneel:hover .beeld-grid__label { opacity: 1; }
@media (max-width: 640px) {
  .beeld-grid { grid-template-columns: 1fr; }
  .beeld-grid__paneel { aspect-ratio: 16/9; }
}

/* ════════════ Magnetische knop reset (JS zet transform) ════════════ */
.knop--primair { transition: background-color .4s var(--easing), color .4s var(--easing), border-color .4s var(--easing), transform .3s var(--easing); }
.hero .knop--vol { transition: background-color .4s var(--easing), color .4s var(--easing), border-color .4s var(--easing), transform .3s var(--easing); }

/* knop-pijl (nieuwe hero gebruikt .pijl) */
.knop .pijl { display: inline-block; transition: transform .28s var(--easing); }
.knop:hover .pijl { transform: translateX(3px); }

/* ════════════════════════════════════════════════════════════
   PAGINAHERO — uniforme cinematische kop op alle binnenpagina's
   ════════════════════════════════════════════════════════════ */
.paginahero { position: relative; height: clamp(280px,42vw,520px); overflow: hidden; display: flex; align-items: flex-end; background: var(--ink); }
.paginahero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(181,115,74,.5), transparent); z-index: 3; }
.paginahero__beeld { position: absolute; inset: -5%; width: 110%; height: 110%; z-index: 0; }
.paginahero__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: sepia(10%) saturate(84%) brightness(.82); animation: pagina-drift 22s ease-in-out infinite alternate; }
@keyframes pagina-drift { 0% { transform: scale(1.05) translate(0,0); } 100% { transform: scale(1.08) translate(-8px,-3px); } }
@media (prefers-reduced-motion: reduce) { .paginahero__beeld img { animation: none; transform: scale(1.04); } }
.paginahero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,15,.05) 0%, rgba(18,16,15,.30) 50%, rgba(18,16,15,.75) 100%), linear-gradient(to right, rgba(18,16,15,.15) 0%, transparent 60%); z-index: 1; }
.paginahero__inhoud { position: relative; z-index: 2; width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 2.5rem clamp(1.5rem,5vw,4rem); }
.paginahero__eyebrow { font-family: var(--font-body); font-size: .65rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: #CE9C77; margin-bottom: .9rem; display: flex; align-items: center; gap: .6rem; opacity: .9; }
.paginahero__eyebrow::before { content: ''; display: block; width: 18px; height: 1px; background: #CE9C77; }
.paginahero__h1 { font-family: var(--font-display); font-size: clamp(1.9rem,4vw,3.4rem); font-weight: 300; line-height: 1.1; color: var(--cream); max-width: 20ch; margin: 0; text-shadow: 0 2px 16px rgba(18,16,15,.4); }
.paginahero__h1 em { font-style: italic; color: #CE9C77; }
.paginahero__sub { margin: .8rem 0 0; font-family: var(--font-body); font-size: .88rem; font-weight: 300; line-height: 1.65; color: rgba(242,236,227,.72); max-width: 52ch; }
@media (max-width: 640px) {
  .paginahero { height: clamp(240px,55vw,360px); }
  .paginahero__h1 { font-size: clamp(1.6rem,7vw,2.2rem); }
}

/* ════════════════════════════════════════════════════════════
   UPGRADE v4 — content-architectuur (rotator, mega-menu,
   vacatures, koper-scheiding, compactere ritmiek)
   ════════════════════════════════════════════════════════════ */

/* ── Roulerende hero-annotatie ── */
.hero-rotator { display: grid; }
.hero-rotator__item { grid-area: 1/1; opacity: 0; transition: opacity .8s ease; pointer-events: none; }
.hero-rotator__item.actief { opacity: 1; pointer-events: auto; }
.hero-rotator-dots { display: flex; gap: .5rem; margin-top: 1.2rem; }
.hero-rotator-dots button { width: 6px; height: 6px; border-radius: 50%; background: rgba(242,236,227,.25); border: none; padding: 0; cursor: pointer; transition: background .4s; }
.hero-rotator-dots button.actief { background: #CE9C77; }
.paginahero .hero-rotator-dots button { background: rgba(18,16,15,.18); }
.paginahero .hero-rotator-dots button.actief { background: var(--koper); }
@media (prefers-reduced-motion: reduce) { .hero-rotator__item { transition: none; } }

/* ── Koper-scheiding ── */
.koper-scheiding { display: flex; align-items: center; gap: 1rem; margin-block: var(--space-l); opacity: .5; }
.koper-scheiding::before, .koper-scheiding::after { content: ''; flex: 1; height: 1px; background: var(--koper); }
.koper-scheiding span { font-family: var(--font-body); font-size: .65rem; letter-spacing: .16em; text-transform: uppercase; color: var(--koper); white-space: nowrap; }

/* ── Compactere verticale ritmiek (Bijlage C) ── */
.sectie { padding-block: clamp(3rem,5vw,4.5rem); }
.sectie--ruim { padding-block: clamp(4rem,7vw,6rem); }
.sectie__intro { margin-bottom: var(--space-m); }

/* ── Mega-menu ── */
.nav__item { position: relative; }
.nav__item-knop { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-body); font-size: .9rem; color: var(--ink); cursor: pointer; padding-block: .4rem; background: none; border: none; letter-spacing: .01em; }
.nav__item-knop:hover, .nav__item:hover .nav__item-knop { color: var(--koper); }
.nav__chev { font-size: .65rem; opacity: .6; transition: transform .25s; }
.nav__item:hover .nav__chev, .nav__item.open .nav__chev { transform: rotate(180deg); }
.megamenu { position: absolute; top: calc(100% + .6rem); left: 50%; transform: translateX(-50%) translateY(-6px); min-width: 540px; background: var(--cream-wit); border: 1px solid var(--lijn); box-shadow: 0 14px 36px rgba(18,16,15,.09); padding: 2rem 2.2rem; opacity: 0; visibility: hidden; transition: opacity .25s ease, transform .25s ease, visibility .25s; z-index: 200; }
.nav__item:hover .megamenu, .nav__item:focus-within .megamenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.megamenu__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.megamenu__label { font-family: var(--font-body); font-size: .62rem; letter-spacing: .16em; text-transform: uppercase; color: var(--koper); margin-bottom: 1rem; font-weight: 500; }
.megamenu__link { display: block; font-family: var(--font-display); font-size: 1.2rem; font-weight: 400; color: var(--ink); text-decoration: none; margin-bottom: .7rem; transition: color .18s; }
.megamenu__link:hover { color: var(--koper); }
.megamenu__link em { display: block; font-family: var(--font-body); font-style: normal; font-size: .74rem; color: var(--dim); margin-top: .05rem; }
@media (max-width: 860px) {
  .megamenu { position: static; transform: none; min-width: 0; box-shadow: none; border: none; border-left: 1.5px solid var(--koper); padding: .5rem 0 .5rem 1rem; opacity: 1; visibility: visible; display: none; }
  .nav__item.open .megamenu { display: block; }
  .megamenu__cols { grid-template-columns: 1fr; gap: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .megamenu, .nav__chev { transition: none; } }

/* ── Vacatures ── */
.vacatures-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap: 16px; }
.vacature { position: relative; display: flex; flex-direction: column; background: var(--cream-wit); border: 1px solid var(--lijn); padding: 1.5rem 1.6rem; text-decoration: none; transition: border-color .2s, transform .3s cubic-bezier(.16,1,.3,1); }
.vacature:hover { border-color: #CE9C77; transform: translateY(-3px); }
.vacature::before { content: ''; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--koper); opacity: .7; }
.vacature__type { font-family: var(--font-body); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; color: var(--koper); margin-bottom: .8rem; }
.vacature__rol { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; color: var(--ink); line-height: 1.15; margin: 0 0 .8rem; }
.vacature__meta { font-family: var(--font-body); font-size: .78rem; font-weight: 300; color: var(--dim); margin: 0 0 1.2rem; flex-grow: 1; }
.vacature__link { font-family: var(--font-body); font-size: .74rem; letter-spacing: .04em; color: var(--ink); border-top: 1px solid var(--lijn); padding-top: .9rem; transition: color .18s; }
.vacature:hover .vacature__link { color: var(--koper); }
.vacature__badge { position: absolute; top: 1.5rem; right: 1.6rem; font-family: var(--font-body); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border: 1px solid var(--lijn); padding: .2rem .5rem; }

/* ════════════════════════════════════════════════════════════
   CORRECTIES — smal mega-menu, breadcrumb, vacature-scheiding, footer-meta
   ════════════════════════════════════════════════════════════ */
.megamenu--smal { min-width: 220px; padding: 1.2rem 1.6rem; }
.megamenu--smal .megamenu__cols { display: block; }
.megamenu--smal .megamenu__link { font-size: 1rem; margin-bottom: .55rem; }
.megamenu--smal .megamenu__link:last-child { margin-bottom: 0; }

.breadcrumb { max-width: var(--wrap); margin: 0 auto; padding: calc(var(--space-xxl) - 2rem) clamp(1.5rem,5vw,4rem) 0; font-family: var(--font-body); font-size: .72rem; color: var(--dim); letter-spacing: .04em; }
.breadcrumb a { color: var(--koper); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

.vacatures-scheiding { height: 2.4rem; }

.footer__meta { display: inline-flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.footer__meta a { color: var(--dim); font-size: .72rem; text-decoration: none; letter-spacing: .03em; }
.footer__meta a:hover { color: var(--koper); }
.footer__meta span { color: var(--dim); font-size: .72rem; opacity: .5; }
.nav__item-knop.actief { color: var(--koper); }

/* ════════════════════════════════════════════════════════════
   SECTOR-SECTIE (minimaal) — gedeeld door alle vijf sectoren:
   .awc (woningcorporaties) · .abf (beursfonds) · .afi (financiële
   instellingen) · .afa (familiebedrijven) · .ape (private equity).
   Kleine typografie, veel wit, hairline-scheidingen i.p.v. kaders.
   ════════════════════════════════════════════════════════════ */
.awc, .abf, .afi, .afa, .ape { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem; color: var(--ink); }
.awc__label, .abf__label, .afi__label, .afa__label, .ape__label { font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--koper); margin: 0 0 .6rem; }
.awc__titel, .abf__titel, .afi__titel, .afa__titel, .ape__titel { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; line-height: 1.1; margin: 0 0 .3rem; }
.awc__sub, .abf__sub, .afi__sub, .afa__sub, .ape__sub { font-family: var(--font-body); font-size: .9rem; color: #6B6560; margin: 0; }
.awc__context, .abf__context, .afi__context, .afa__context, .ape__context { font-family: var(--font-body); font-size: .72rem; letter-spacing: .02em; color: #a8a299; margin: .9rem 0 0; }

.awc__regels, .abf__regels, .afi__regels, .afa__regels, .ape__regels { margin: 3rem 0; padding: 0; }
.awc__regel, .abf__regel, .afi__regel, .afa__regel, .ape__regel { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.5rem; padding: .95rem 0; border-top: 1px solid var(--lijn); }
.awc__regel:last-child, .abf__regel:last-child, .afi__regel:last-child, .afa__regel:last-child, .ape__regel:last-child { border-bottom: 1px solid var(--lijn); }
.awc__regel dt, .abf__regel dt, .afi__regel dt, .afa__regel dt, .ape__regel dt { font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.4; }
.awc__regel dd, .abf__regel dd, .afi__regel dd, .afa__regel dd, .ape__regel dd { font-family: var(--font-body); font-size: .85rem; line-height: 1.55; color: #57524c; margin: 0; }

.awc__dynamiek, .abf__dynamiek, .afi__dynamiek, .afa__dynamiek, .ape__dynamiek { margin: 3rem 0; }
.awc__dynamiek-kop, .abf__dynamiek-kop, .afi__dynamiek-kop, .afa__dynamiek-kop, .ape__dynamiek-kop { font-family: var(--font-display); font-size: 1.25rem; font-style: italic; color: var(--ink); margin: 0 0 1.6rem; }
.awc__kaarten, .abf__kaarten, .afi__kaarten, .afa__kaarten, .ape__kaarten { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.75rem; }
.awc__kaart h3, .abf__kaart h3, .afi__kaart h3, .afa__kaart h3, .ape__kaart h3 { font-family: var(--font-body); font-size: .82rem; font-weight: 600; color: var(--koper); margin: 0 0 .45rem; line-height: 1.35; }
.awc__kaart p, .abf__kaart p, .afi__kaart p, .afa__kaart p, .ape__kaart p { font-family: var(--font-body); font-size: .82rem; line-height: 1.55; color: #57524c; margin: 0; }
.awc__slot, .abf__slot, .afi__slot, .afa__slot, .ape__slot { font-family: var(--font-display); font-size: 1.15rem; font-style: italic; line-height: 1.45; color: var(--ink); margin: 2.25rem 0 0; max-width: 38rem; }

@media (max-width: 680px) {
  .awc, .abf, .afi, .afa, .ape { padding: 2.5rem 1.25rem; }
  .awc__regel, .abf__regel, .afi__regel, .afa__regel, .ape__regel { grid-template-columns: 1fr; gap: .3rem; }
  .awc__kaarten, .abf__kaarten, .afi__kaarten, .afa__kaarten, .ape__kaarten { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* ── Footer sfeerbeeld rechterbovenhoek (cloud-light) ── */
.site-footer { position: relative; overflow: hidden; }
.site-footer::after {
  content: ''; position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
  width: clamp(280px, 42vw, 580px); height: 100%;
  background-image: url('/assets/img/cloud-light.png');
  background-size: cover; background-position: center 65%; opacity: 0.6;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 45%, transparent 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,.35) 45%, transparent 100%);
}
.site-footer > * { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════
   CONTRAST-ADAPTIEVE NAV — wit logo + lichte tekst (met scrim)
   over een hero; donker logo + cream-balk daarna.
   ════════════════════════════════════════════════════════════ */
.nav .logo { height: 36px; width: auto; }
.logo--donker { display: block; }
.logo--wit { display: none; }

/* Lichte staat: over de hero. Scrim houdt wit leesbaar, ook op een lichte lucht. */
.nav--licht { background: linear-gradient(to bottom, rgba(18,16,15,.42), rgba(18,16,15,0)); border-bottom-color: transparent; }
.nav--licht .logo--donker { display: none; }
.nav--licht .logo--wit { display: block; }
.nav--licht .nav__midden > a, .nav--licht .nav__item-knop { color: rgba(242,236,227,.92); }
.nav--licht .nav__midden > a:hover, .nav--licht .nav__midden > a.actief,
.nav--licht .nav__item-knop:hover, .nav--licht .nav__item-knop.actief { color: #CE9C77; }
.nav--licht .nav__taal { color: rgba(242,236,227,.7); }
.nav--licht .nav__taal .uit { color: rgba(242,236,227,.32); }
.nav--licht .nav__hamburger span { background: var(--cream); }

/* Donkere staat: na de hero, op cream-inhoud. */
.nav--donker { background-color: rgba(250,247,241,.97); border-bottom-color: var(--lijn); box-shadow: 0 1px 0 rgba(18,16,15,.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.nav--donker .logo--donker { display: block; }
.nav--donker .logo--wit { display: none; }
.nav--donker .nav__midden > a, .nav--donker .nav__item-knop { color: var(--ink); }
.nav--donker .nav__hamburger span { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .nav { transition: none; } }

/* ════════════════════════════════════════════════════════════
   FASE 3 — RESPONSIVE AUDIT & TABLET-OPTIMALISATIE (blok 19)
   Vier canonieke breakpoints, mobile-first. Aangepast aan de
   echte repo: .nav / .nav__hamburger / .nav__overlay / --cream-wit.
   ─────────────────────────────────────────────
   geen bp →  390px   mobiel portrait (basis)
   560px   →  grote telefoon / kleine tablet
   768px   →  tablet portrait (iPad — de kritieke zone)
   1024px  →  tablet landscape / small laptop
   1280px  →  desktop
   1440px  →  ruime desktop
   ════════════════════════════════════════════════════════════ */
:root {
  --step--2: clamp(0.62rem, 0.58rem + 0.22vw, 0.72rem);
  --step--1: clamp(0.75rem, 0.70rem + 0.26vw, 0.88rem);
  --step-0:  clamp(0.88rem, 0.82rem + 0.30vw, 1.00rem);
  --step-1:  clamp(1.05rem, 0.96rem + 0.46vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.10rem + 0.76vw, 1.75rem);
  --step-3:  clamp(1.50rem, 1.24rem + 1.30vw, 2.50rem);
  --step-4:  clamp(1.80rem, 1.40rem + 2.00vw, 3.40rem);
  --step-5:  clamp(2.20rem, 1.60rem + 3.00vw, 5.00rem);
  --rand-h:  clamp(1.25rem, 5vw, 4rem);
}

/* Horizontale rand uniform via --rand-h */
.hero__tekst { padding-inline: var(--rand-h); }
.paginahero__inhoud { padding-inline: var(--rand-h); }
.filmisch__inhoud { padding-inline: var(--rand-h); }

/* ── Header: hamburger actief < 1024px (tablet meegenomen) ── */
@media (max-width: 1023px) {
  .nav__midden, .nav__rechts { display: none; }
  .nav__hamburger { display: block; }
  .nav__overlay {
    position: fixed; inset: 0; z-index: 90; background: var(--cream);
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-m);
    opacity: 0; visibility: hidden; transition: opacity .5s var(--easing), visibility .5s var(--easing);
  }
  .nav__overlay.open { opacity: 1; visibility: visible; }
  .nav__overlay a { color: var(--ink); font-family: var(--font-display); font-size: 1.6rem; }
  .nav__overlay a:hover { color: var(--koper); }
  body.menu-open .nav__hamburger span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
  body.menu-open .nav__hamburger span:nth-child(2) { opacity: 0; }
  body.menu-open .nav__hamburger span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
}
/* Desktop: vanaf 1024px nav zichtbaar, hamburger weg */
@media (min-width: 1024px) {
  .nav__midden, .nav__rechts { display: flex; }
  .nav__hamburger { display: none; }
}

/* ── Hero (homepage): mobiel + tablet verticaal centreren, navbar-ruimte vrij ── */
@media (max-width: 1023px) {
  .hero { flex-direction: column; justify-content: center; }
}

/* ── Hero (homepage): tablet 1-koloms met eigen ritmiek ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero__tekst { grid-template-columns: 1fr; gap: var(--space-l); padding-top: calc(var(--kop-h) + clamp(1.5rem,4vh,3rem)); padding-bottom: clamp(4rem, 8vh, 6rem); }
  .hero h1 { font-size: clamp(2.4rem, 6vw, 3.8rem); max-width: 18ch; }
  .hero__sub { max-width: 52ch; font-size: .92rem; }
  .hero__acties { flex-direction: row; flex-wrap: wrap; gap: .75rem; }
  .hero .annotatie { max-width: 48ch; }
}
@media (max-width: 767px) {
  .hero__tekst { grid-template-columns: 1fr; padding-top: calc(var(--kop-h) + clamp(1.5rem,4vh,3rem)); padding-bottom: clamp(5rem, 14vh, 9rem); gap: var(--space-m); }
  .hero h1 { font-size: clamp(2.2rem, 9vw, 3.0rem); }
  .hero__acties { flex-direction: column; align-items: flex-start; }
  .hero .knop, .hero .knop--vol { width: 100%; justify-content: center; }
  .hero__scroll { left: 50%; }
  /* Donkerder scrim op mobiel zodat de cream-tekst leesbaar blijft */
  .hero__beeld::after {
    background: linear-gradient(180deg, rgba(18,16,15,.30) 0%, rgba(18,16,15,.48) 45%, rgba(18,16,15,.82) 100%);
  }
  /* Rotator-stippen op mobiel horizontaal centreren (blijven in flow) */
  .hero-rotator-dots { justify-content: center; }
}

/* ── Stats-balk: 2+1 op tablet, 1-koloms op klein mobiel ── */
@media (min-width: 640px) and (max-width: 1023px) {
  .stats-balk { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.06); border-right: none; }
  .stat { padding: 1.8rem clamp(1.5rem, 3vw, 2.2rem); }
}

/* ── Paginahero: hoogte + h1 tablet-specifiek; sub weg op klein mobiel ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .paginahero { height: clamp(260px, 38vw, 400px); }
  .paginahero__inhoud { padding: 2rem var(--rand-h); }
  .paginahero__h1 { font-size: clamp(1.7rem, 3.5vw, 2.6rem); max-width: 24ch; }
  .paginahero .annotatie__tekst { font-size: .95rem; }
}
@media (max-width: 767px) {
  .paginahero { height: clamp(220px, 52vw, 320px); }
  .paginahero__inhoud { padding: 1.6rem var(--rand-h); }
  .paginahero__h1 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .paginahero__sub { display: none; }
}

/* ── Split: 2-koloms tot 767px, daarna 1-koloms ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--2-3 { grid-template-columns: 1fr 1.4fr; }
  .split--3-2 { grid-template-columns: 3fr 2fr; }
  .split__inhoud { padding: clamp(2rem, 4vw, 3.5rem); }
}
@media (max-width: 767px) {
  .split, .split--2-3, .split--3-2 { grid-template-columns: 1fr; }
  .split__beeld { min-height: 240px; }
  .split__beeld--portret { mask-image: none; -webkit-mask-image: none; }
}

/* ── Sectorkaarten (awc/abf/afi/afa/ape): 2-koloms op tablet, derde vol breedte ── */
@media (min-width: 640px) and (max-width: 900px) {
  .awc__kaarten, .abf__kaarten, .afi__kaarten, .afa__kaarten, .ape__kaarten { grid-template-columns: 1fr 1fr; }
  .awc__kaart:last-child, .abf__kaart:last-child, .afi__kaart:last-child, .afa__kaart:last-child, .ape__kaart:last-child { grid-column: 1 / -1; }
}
@media (max-width: 639px) {
  .awc__kaarten, .abf__kaarten, .afi__kaarten, .afa__kaarten, .ape__kaarten { grid-template-columns: 1fr; gap: 1.2rem; }
  .awc__regel, .abf__regel, .afi__regel, .afa__regel, .ape__regel { grid-template-columns: 1fr; gap: .3rem; }
}

/* ── Vacatures-grid: altijd 2-koloms op tablet, 1-koloms op mobiel ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .vacatures-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .vacatures-grid { grid-template-columns: 1fr; }
}

/* ════ FOUNDER-TRACKRECORD — light-moving naamregel (blok 20) ════ */
.referenties {
  padding-block: var(--space-l, 3rem);
  border-top: 1px solid rgba(242,236,227,.08);
}
.referenties__label {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--koper, #B5734A);
  margin: 0 0 var(--space-m, 2rem);
  padding-inline: var(--rand-h, clamp(1.25rem,5vw,4rem));
}
.referenties__marquee {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.referenties__spoor {
  list-style: none;
  margin: 0;
  padding: 0 var(--space-m, 2rem) 0 0;
  display: flex;
  flex-shrink: 0;
  gap: var(--space-m, 2rem);
  align-items: baseline;
  animation: referenties-schuif 52s linear infinite;
  will-change: transform;
}
.referenties__spoor li {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: .01em;
  color: rgba(242,236,227,.82);
  white-space: nowrap;
}
.referenties__marquee:hover .referenties__spoor,
.referenties__marquee:focus-within .referenties__spoor {
  animation-play-state: paused;
}
@keyframes referenties-schuif {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Tablet: iets sneller (smallere viewport = namen sneller zichtbaar) */
@media (min-width: 768px) and (max-width: 1023px) {
  .referenties__spoor { animation-duration: 42s; }
}
/* Mobiel: sneller + kleinere gap */
@media (max-width: 767px) {
  .referenties__spoor {
    animation-duration: 32s;
    gap: var(--space-s, 1rem);
  }
  .referenties__spoor li { font-size: 1.05rem; }
}
/* Reduced motion: statische wrappende rij, duplicaat verborgen */
@media (prefers-reduced-motion: reduce) {
  .referenties__marquee {
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .referenties__spoor {
    animation: none;
    flex-wrap: wrap;
    gap: var(--space-s, 1rem) var(--space-m, 2rem);
    padding-right: 0;
  }
  .referenties__spoor[aria-hidden="true"] { display: none; }
}

/* ════ BEWIJSBLOKKEN — gedeelde minimale stijl (blok 21) ════ */
.bewijs { max-width: var(--maxw, 1100px); margin: 0 auto; padding-inline: var(--rand-h, clamp(1.25rem,5vw,4rem)); }
.bewijs__label { font-family: var(--font-body); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--koper); margin: 0 0 .6rem; }
.bewijs__kop { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 300; line-height: 1.15; color: var(--ink); margin: 0 0 var(--space-m, 2rem); max-width: 22ch; }
.bewijs__kop em { font-style: italic; color: var(--koper); }
.sectie--ink .bewijs__kop { color: var(--cream); }
.sectie--ink .bewijs__label { color: var(--koper-licht, #C98A5C); }

/* genummerde stappen */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.stap__nr { font-family: var(--font-display); font-size: 2.2rem; font-weight: 300; color: var(--koper); line-height: 1; margin-bottom: .6rem; }
.stap__nr::before { content: ''; display: block; width: 28px; height: 1.5px; background: var(--koper); opacity: .55; margin-bottom: 1rem; }
.stap h3 { font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--ink); margin: 0 0 .4rem; }
.stap p { font-family: var(--font-body); font-size: .85rem; line-height: 1.55; color: var(--bronze, #6B5D49); margin: 0; }

/* lijst-rijen (use-cases, kwaliteitskader) */
.rijen { border-top: 1px solid var(--lijn, #E8DFD2); }
.rijen > div { display: grid; grid-template-columns: 1fr 1.7fr; gap: 1.5rem; padding: .95rem 0; border-bottom: 1px solid var(--lijn, #E8DFD2); }
.rijen dt, .rijen .rij__kop { font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--ink); line-height: 1.4; margin: 0; }
.rijen dd, .rijen .rij__tekst { font-family: var(--font-body); font-size: .85rem; line-height: 1.55; color: var(--bronze, #57524c); margin: 0; }
.sectie--ink .rijen { border-color: rgba(242,236,227,.12); }
.sectie--ink .rijen > div { border-color: rgba(242,236,227,.12); }
.sectie--ink .rijen .rij__kop { color: var(--cream); }
.sectie--ink .rijen .rij__tekst { color: rgba(242,236,227,.72); }

.bewijs__slot { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.45; color: var(--ink); margin: 1.8rem 0 0; max-width: 40ch; }
.sectie--ink .bewijs__slot { color: var(--cream); }

@media (max-width: 767px) {
  .stappen { grid-template-columns: 1fr; gap: 1.5rem; }
  .rijen > div { grid-template-columns: 1fr; gap: .3rem; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .stappen { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* tekst-knop (link met pijl, geen rand) */
.knop--tekst { border: none; padding-inline: 0; color: var(--koper); background: none; }
.knop--tekst:hover { color: var(--koper-diep, #9A5E3A); }

/* ── Sector-trustbalk (blok 21d) ── */
.sector-trust { text-align: center; }
.sector-trust__rij { list-style: none; margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem 2.4rem; max-width: 60rem; }
.sector-trust__rij li { font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.45rem); font-weight: 300; color: var(--ink); white-space: nowrap; position: relative; }
.sector-trust__rij li:not(:last-child)::after { content: '·'; position: absolute; right: -1.35rem; color: var(--koper); opacity: .5; }
.sector-trust__sub { font-family: var(--font-body); font-size: .85rem; color: var(--bronze, #6B5D49); margin: 1.4rem auto 0; max-width: 44ch; }
@media (max-width: 767px) {
  .sector-trust__rij { gap: .6rem 1.4rem; }
  .sector-trust__rij li:not(:last-child)::after { right: -.95rem; }
}

/* ════ FAQ-PAGINA (blok 22) ════ */
.faq__inner { max-width: 760px; margin: 0 auto; padding-inline: var(--rand-h, clamp(1.25rem,5vw,4rem)); }
.faq__item { padding: 1.6rem 0; border-bottom: 1px solid var(--cream-diep, #E8DFD2); }
.faq__item:first-child { border-top: 1px solid var(--cream-diep, #E8DFD2); }
.faq__item h2 {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(0.863rem, 1.5vw, 1.05rem);
  font-weight: 500;
  line-height: 1.25;
  color: var(--ink, #12100F);
  margin: 0 0 .6rem;
}
.faq__item p {
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: .9rem;
  line-height: 1.65;
  color: var(--ink-zacht, #2A2622);
  margin: 0;
  max-width: 60ch;
}

/* ════ TARIEVEN-PAGINA (blok 23) ════ */

/* Kring-figuur */
.kring-figuur { max-width: 520px; margin: var(--space-l) auto 0; }
.kring-figuur svg { display: block; width: 100%; height: auto; }
.kring-cap {
  text-align: center;
  margin: .9rem auto 0;
  max-width: 36ch;
  font-family: var(--font-body);
  font-size: .85rem;
  font-style: italic;
  color: var(--bronze, #6B5D49);
}

/* Drie diensten — responsive cards */
.diensten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin: var(--space-m) 0 0;
}
.dienst {
  background: var(--cream-wit);
  border: 1px solid var(--lijn);
  border-top: 3px solid var(--koper);
  border-radius: var(--radius);
  padding: 1.5rem 1.5rem 1.6rem;
}
.dienst--search { border-top-color: var(--petrol); }
.dienst__eyebrow {
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--koper-diep, #9A5E3A);
}
.dienst--search .dienst__eyebrow { color: var(--petrol-diep, #456A6E); }
.dienst__naam {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.15;
  margin: .35rem 0 .2rem;
  color: var(--ink);
}
.dienst__bedrag {
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 600;
  color: var(--koper-diep, #9A5E3A);
  margin-bottom: .7rem;
}
.dienst__bedrag em { font-style: italic; font-weight: 400; color: var(--dim); }
.dienst__tekst {
  font-family: var(--font-body);
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-zacht, #2A2622);
  margin: 0;
}

/* Tarieventabel */
.tarieven-tabel {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-m) 0 0;
  font-family: var(--font-body);
}
.tarieven-tabel td {
  padding: .9rem 0;
  border-top: 1px solid var(--lijn);
  font-size: 1rem;
  color: var(--ink-zacht, #2A2622);
  vertical-align: baseline;
}
.tarieven-tabel tr:first-child td { border-top: none; }
.tarieven-tabel td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .diensten { grid-template-columns: 1fr; }
}