/* =========================================================
   IBI — Institutional Benchmarking Institute
   Design system / shared stylesheet
   ========================================================= */

:root {
  /* Brand */
  --navy: #18376d;
  --navy-700: #1d4183;
  --navy-800: #122c58;
  --navy-900: #0f2547;
  --navy-950: #0a1628;
  --gold: #926126;
  --gold-light: #b8843a;
  --gold-pale: #e3d2ba;
  --cream: #faf8f5;
  --sand: #f2eee8;

  /* Ink */
  --text: #1e293b;
  --muted: #5b6779;
  --muted-soft: #8a94a4;
  --line: rgba(24, 55, 109, .12);
  --line-strong: rgba(24, 55, 109, .22);

  /* Layout */
  --wrap: 1220px;
  --wrap-wide: 1480px;
  --wrap-narrow: 820px;
  --header-h: 78px;
  --gut: clamp(20px, 5vw, 48px);

  /* Shape */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;

  /* Depth */
  --sh-sm: 0 2px 10px rgba(15, 37, 71, .06);
  --sh: 0 14px 44px rgba(15, 37, 71, .10);
  --sh-lg: 0 30px 80px rgba(15, 37, 71, .18);

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

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 76px); }

/* Eén element dat buiten beeld steekt -- een nog niet getoonde
   reveal-verschuiving van 26px is al genoeg -- en een telefoon laat de hele
   pagina zijwaarts meeslepen. clip snijdt dat af zonder een scrollcontainer
   te maken (dan blijft de plakkende subnavigatie werken); hidden is het
   vangnet voor oude browsers. */
html { overflow-x: hidden; overflow-x: clip; }

body {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #fff;
  color: var(--text);
  line-height: 1.7;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

::selection { background: var(--gold); color: #fff; }

:focus-visible {
  outline: 3px solid var(--gold-light);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 3000;
  background: var(--navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 8px 0;
  font-size: 14px;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   Typography
   --------------------------------------------------------- */

h1, h2, h3, h4 { font-weight: 600; line-height: 1.22; letter-spacing: -.02em; color: var(--navy); }

h1 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 700; }
h2 { font-size: clamp(26px, 2.9vw, 34px); }
h3 { font-size: clamp(19px, 1.5vw, 22px); }
h4 { font-size: 17px; letter-spacing: -.01em; }

/* The home hero carries a little more weight than the sub-page titles */
.hero h1 { font-size: clamp(28px, 3.5vw, 41px); line-height: 1.18; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.lead { font-size: clamp(17px, 1.3vw, 18.5px); color: var(--muted); line-height: 1.75; }

.prose p { color: var(--muted); margin-bottom: 20px; font-size: 16.5px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--navy); font-weight: 600; }
.prose em { color: var(--text); }
.prose a:not(.btn) {
  color: var(--navy);
  text-decoration: underline;
  text-decoration-color: var(--gold-pale);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  transition: color .25s var(--ease), text-decoration-color .25s var(--ease);
}
.prose a:not(.btn):hover { color: var(--gold); text-decoration-color: var(--gold); }
.prose h3 { margin: 40px 0 14px; }
.prose h3:first-child { margin-top: 0; }
.prose h4 { margin: 28px 0 10px; color: var(--navy); font-size: 18px; font-weight: 600; }

.measure { max-width: 72ch; }

/* ---------------------------------------------------------
   Layout helpers
   --------------------------------------------------------- */

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.wrap-wide { width: 100%; max-width: var(--wrap-wide); margin: 0 auto; padding: 0 var(--gut); }
.wrap-narrow { width: 100%; max-width: var(--wrap-narrow); margin: 0 auto; padding: 0 var(--gut); }

.section { padding: clamp(64px, 8vw, 112px) 0; position: relative; }
.section--tight { padding: clamp(48px, 5vw, 72px) 0; }
.section--cream { background: var(--cream); }
.section--sand { background: linear-gradient(160deg, var(--cream) 0%, var(--sand) 100%); }
.section--navy {
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-900) 100%);
  color: rgba(255, 255, 255, .85);
}
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section--navy .lead, .section--navy .prose p { color: rgba(255, 255, 255, .78); }
.section--navy .eyebrow { color: var(--gold-light); }
.section--navy .eyebrow::before { background: var(--gold-light); }
.section--navy .prose strong { color: #fff; }
.section--navy .prose em { color: rgba(255, 255, 255, .9); }
.section--navy .prose a:not(.btn) { color: var(--gold-light); text-decoration-color: rgba(184, 132, 58, .5); }
.section--navy .prose a:not(.btn):hover { color: #fff; text-decoration-color: #fff; }

.section-head { max-width: 780px; margin-bottom: clamp(36px, 4vw, 56px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
/* Een tussenkop krijgt dezelfde lucht onder zich als een sectiekop; zonder deze
   regel plakte de inleiding tegen de h3 aan. */
.section-head h2 + .lead,
.section-head h3 + .lead { margin-top: 18px; }

.grid { display: grid; gap: clamp(20px, 2.4vw, 32px); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.split--top { align-items: start; }
.split--wide-left { grid-template-columns: 1.15fr .85fr; }
.split--wide-right { grid-template-columns: .85fr 1.15fr; }

.divider { height: 1px; background: var(--line); border: 0; margin: clamp(40px, 5vw, 64px) 0; }

/* ---------------------------------------------------------
   Buttons
   --------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--r-sm);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease),
              box-shadow .3s var(--ease), border-color .3s var(--ease);
  white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; flex: none; }

.btn--gold { background: var(--gold); color: #fff; box-shadow: 0 6px 20px rgba(146, 97, 38, .25); }
.btn--gold:hover { background: var(--gold-light); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(146, 97, 38, .34); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); transform: translateY(-2px); box-shadow: 0 10px 28px rgba(24, 55, 109, .28); }

.btn--outline { border-color: var(--line-strong); color: var(--navy); background: transparent; }
.btn--outline:hover { border-color: var(--navy); background: var(--navy); color: #fff; transform: translateY(-2px); }

.btn--ghost { border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn--ghost:hover { background: #fff; color: var(--navy); border-color: #fff; transform: translateY(-2px); }

.btn--sm { padding: 9px 18px; font-size: 13.5px; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 15px;
  color: var(--gold);
  text-decoration: none;
  transition: gap .3s var(--ease), color .3s var(--ease);
}
.link-arrow::after { content: "→"; transition: transform .3s var(--ease); }
.link-arrow:hover { color: var(--gold-light); }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------
   Header + navigation
   --------------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 6px 26px rgba(15, 37, 71, .07);
}

.header-inner {
  width: 100%;
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 42px; width: auto; }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 4px; list-style: none; }

.nav-item { position: relative; }

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  border-radius: 8px;
  transition: color .25s var(--ease), background .25s var(--ease);
}
.nav-link:hover { color: var(--gold); background: rgba(146, 97, 38, .07); }
.nav-link .caret {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  opacity: .5;
  transition: transform .25s var(--ease);
}
.nav-item:hover .caret, .nav-item:focus-within .caret { transform: translateY(1px) rotate(225deg); opacity: .9; }

.nav-link.is-active { color: var(--gold); }
.nav-link.is-active::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 2px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
}

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 320px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--sh-lg);
  padding: 10px;
  list-style: none;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
}
.dropdown::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}
.dropdown a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  color: var(--text);
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), padding-left .2s var(--ease);
}
.dropdown a:hover { background: var(--cream); color: var(--navy); padding-left: 20px; }
.dropdown .dropdown-lead {
  display: block;
  padding: 10px 14px 12px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
  border-radius: 10px 10px 0 0;
  font-weight: 600;
  color: var(--navy);
}
.dropdown .dropdown-lead:hover { padding-left: 14px; background: var(--cream); }
.dropdown .dropdown-lead small {
  display: block;
  font-weight: 400;
  font-size: 12.5px;
  color: var(--muted-soft);
  letter-spacing: .01em;
}

.header-cta { flex: none; display: flex; gap: 10px; align-items: center; }

/* Language switch */
.lang-switch {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
}
.lang-switch a {
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--muted);
  text-decoration: none;
  line-height: 1;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.lang-switch a:hover { color: var(--navy); background: var(--cream); }
.lang-switch a[aria-current="true"] { background: var(--navy); color: #fff; }
.lang-switch a[aria-current="true"]:hover { background: var(--navy-700); color: #fff; }

/* Burger */
.burger {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  position: relative;
  flex: none;
}
.burger span {
  position: absolute;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--navy);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile panel */
.mobile-nav {
  position: fixed;
  inset: var(--header-h) 0 0 0;
  z-index: 999;
  background: #fff;
  overflow-y: auto;
  padding: 24px var(--gut) 64px;
  transform: translateY(-8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
}
.mobile-nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-group { border-bottom: 1px solid var(--line); padding: 6px 0 14px; }
.mobile-group > a {
  display: block;
  font-size: 17px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  padding: 12px 0 6px;
}
.mobile-group ul { list-style: none; }
.mobile-group ul a {
  display: block;
  padding: 8px 0 8px 16px;
  border-left: 2px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font-size: 15px;
}
.mobile-group ul a:hover { color: var(--gold); border-left-color: var(--gold); }
.mobile-nav .btn { width: 100%; margin-top: 26px; }

body.nav-open { overflow: hidden; }

/* ---------------------------------------------------------
   Hero (home)
   --------------------------------------------------------- */

.hero {
  position: relative;
  margin-top: var(--header-h);
  padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 96px);
  background:
    radial-gradient(900px 520px at 88% 12%, rgba(146, 97, 38, .10), transparent 62%),
    radial-gradient(760px 520px at 4% 88%, rgba(24, 55, 109, .08), transparent 60%),
    linear-gradient(160deg, #fff 0%, var(--cream) 55%, #fff 100%);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent 78%);
  opacity: .5;
  pointer-events: none;
}
.hero .wrap-wide { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}
.hero h1 { margin-bottom: 24px; }
.hero .lead { max-width: 620px; margin-bottom: 16px; }

.hero-media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1px solid rgba(255, 255, 255, .6);
}
.hero-media video { width: 100%; height: auto; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }

/* ---------------------------------------------------------
   Page hero (sub pages)
   --------------------------------------------------------- */

.page-hero {
  margin-top: var(--header-h);
  position: relative;
  padding: clamp(52px, 6vw, 88px) 0 clamp(48px, 5.5vw, 76px);
  background: linear-gradient(150deg, var(--navy) 0%, var(--navy-900) 62%, var(--navy-950) 100%);
  color: #fff;
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  top: -30%;
  right: -12%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 97, 38, .30) 0%, transparent 66%);
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 68px 68px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  mask-image: linear-gradient(180deg, #000, transparent 85%);
}
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero h1 { color: #fff; max-width: 20ch; }
.page-hero .lead { color: rgba(255, 255, 255, .8); max-width: 66ch; margin-top: 22px; }
.page-hero .eyebrow { color: var(--gold-light); }
.page-hero .eyebrow::before { background: var(--gold-light); }

.crumbs { font-size: 13px; color: rgba(255, 255, 255, .55); margin-bottom: 18px; }
.crumbs a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.crumbs a:hover { color: var(--gold-light); }
.crumbs span { margin: 0 8px; opacity: .5; }

/* ---------------------------------------------------------
   Sticky sub navigation
   --------------------------------------------------------- */

.subnav {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.subnav-inner {
  max-width: var(--wrap-wide);
  margin: 0 auto;
  padding: 0 var(--gut);
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a {
  flex: none;
  padding: 15px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .25s var(--ease), border-color .25s var(--ease);
  white-space: nowrap;
}
.subnav a:hover { color: var(--navy); }
.subnav a.is-current { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(24px, 2.6vw, 34px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  position: relative;
  overflow: hidden;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: var(--gold-pale); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--muted); font-size: 15.5px; }
.card p + p { margin-top: 14px; }
.card .link-arrow { margin-top: 20px; }

.card--flat:hover { transform: none; box-shadow: var(--sh-sm); }
.card--cream { background: var(--cream); border-color: transparent; }

.card--dark {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  backdrop-filter: blur(6px);
}
.card--dark h3 { color: #fff; }
.card--dark p { color: rgba(255, 255, 255, .78); }
.card--dark:hover { background: rgba(255, 255, 255, .09); border-color: var(--gold-light); box-shadow: 0 18px 50px rgba(0, 0, 0, .28); }

.card-num {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  color: var(--gold);
  display: block;
  margin-bottom: 14px;
}

.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgba(146, 97, 38, .14), rgba(146, 97, 38, .04));
  color: var(--gold);
  margin-bottom: 18px;
}
.card-icon svg { width: 22px; height: 22px; }
.card--dark .card-icon { background: rgba(184, 132, 58, .18); color: var(--gold-light); }

.card-top-rule::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  transform: scaleX(.18);
  transform-origin: left;
  transition: transform .45s var(--ease);
}
.card-top-rule:hover::before { transform: scaleX(1); }

/* ---------------------------------------------------------
   Stats
   --------------------------------------------------------- */

.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--r);
  padding: 26px 24px;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.stat:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.stat-num {
  font-size: clamp(28px, 2.7vw, 37px);
  font-weight: 700;
  color: var(--navy);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.stat-label {
  margin-top: 8px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}
.section--navy .stat { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); border-left-color: var(--gold-light); }
.section--navy .stat-num { color: #fff; }
.section--navy .stat-label { color: rgba(255, 255, 255, .65); }

/* ---------------------------------------------------------
   Lists
   --------------------------------------------------------- */

.checklist { list-style: none; display: grid; gap: 14px; }
.checklist li {
  position: relative;
  padding-left: 36px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: rgba(146, 97, 38, .12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23926126' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}
.checklist strong { color: var(--navy); font-weight: 600; }
.section--navy .checklist li { color: rgba(255, 255, 255, .8); }
.section--navy .checklist li::before { background-color: rgba(184, 132, 58, .22); }
.section--navy .checklist strong { color: #fff; }

.bullets { list-style: none; display: grid; gap: 12px; }
.bullets li { position: relative; padding-left: 24px; color: var(--muted); }
.bullets li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 12px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--gold);
  transform: rotate(45deg);
}
.section--navy .bullets li { color: rgba(255, 255, 255, .78); }
.callout .bullets li { color: rgba(255, 255, 255, .82); }
.callout .bullets li::before { background: var(--gold-light); }

.tag-list { display: flex; flex-wrap: wrap; gap: 9px; }
.tag {
  display: inline-block;
  padding: 7px 15px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 13px;
  color: var(--navy);
  font-weight: 500;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.tag:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.section--navy .tag { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .9); }
.section--navy .tag:hover { background: var(--gold); border-color: var(--gold); color: #fff; }

/* Numbered steps */
.steps { display: grid; gap: 18px; counter-reset: step; }
.steps li {
  list-style: none;
  position: relative;
  padding: 22px 26px 22px 74px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.steps li:hover { transform: translateX(5px); box-shadow: var(--sh-sm); }
.steps li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 26px;
  top: 22px;
  font-size: 13px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
}
.steps h4 { margin-bottom: 4px; }
.steps p { color: var(--muted); font-size: 15px; }
.section--navy .steps li { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.section--navy .steps p { color: rgba(255, 255, 255, .75); }

/* Definition rows */
.deflist { display: grid; gap: 0; border-top: 1px solid var(--line); }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(180px, 260px) 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.deflist dt { font-weight: 600; color: var(--navy); font-size: 15.5px; }
.deflist dd { color: var(--muted); font-size: 15.5px; }

/* ---------------------------------------------------------
   Quote
   --------------------------------------------------------- */

.quote {
  position: relative;
  background: var(--cream);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r) var(--r) 0;
  padding: clamp(22px, 2.2vw, 30px) clamp(22px, 2.4vw, 32px);
}
.quote p {
  font-size: clamp(14.5px, 1.05vw, 15.5px);
  line-height: 1.6;
  color: var(--navy);
  font-weight: 400;
  letter-spacing: 0;
}
.quote p + p { margin-top: 12px; }
.quote footer {
  margin-top: 16px;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.5;
}
.quote footer strong { color: var(--navy); display: block; font-weight: 600; }
.section--navy .quote { background: rgba(255, 255, 255, .06); border-left-color: var(--gold-light); }
.section--navy .quote p { color: #fff; }
.section--navy .quote footer { color: rgba(255, 255, 255, .65); }
.section--navy .quote footer strong { color: var(--gold-light); }

.callout {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.4vw, 46px);
  position: relative;
  overflow: hidden;
}
.callout::before {
  content: "";
  position: absolute;
  top: -60%;
  right: -20%;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 97, 38, .35), transparent 65%);
}
.callout > * { position: relative; z-index: 1; }
.callout h3 { color: #fff; margin-bottom: 16px; }
.callout p { color: rgba(255, 255, 255, .82); }

/* Steps inside a callout sit side by side, so the block stays compact */
.callout .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.callout .steps li {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .14);
  padding: 20px 22px 22px;
}
.callout .steps li::before { position: static; display: block; margin-bottom: 8px; }
.callout .steps li:hover { transform: translateY(-4px); }
.callout .steps h4 { color: #fff; }
.callout .steps p { color: rgba(255, 255, 255, .76); font-size: 14.5px; }

/* ---------------------------------------------------------
   Tijdlijn — de chronologie van wetgeving, normen en toezicht
   Een verticale rail met een gouden stip per jaartal. De rail is
   decoratief; de volgorde staat al in de lijst zelf.
   --------------------------------------------------------- */

.timeline { list-style: none; position: relative; display: grid; gap: clamp(30px, 3.4vw, 46px); max-width: 900px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--line-strong) 70%, transparent 100%);
}
.timeline > li { position: relative; padding-left: clamp(38px, 4vw, 54px); }
.timeline > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 5px rgba(146, 97, 38, .09);
}

.tl-year {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold);
}
.timeline h3 { margin: 7px 0 12px; font-size: clamp(19px, 1.7vw, 23px); }
.timeline p { color: var(--muted); margin-bottom: 16px; }
.timeline p:last-child { margin-bottom: 0; }
.timeline .bullets { margin: 16px 0; }
.timeline .quote { margin: 18px 0; }
.timeline .link-arrow { margin-top: 4px; }

/* Bronvermelding onder een tijdlijnpunt: kleiner en grijzer dan de tekst,
   zodat het kamerstuknummer de lezer niet uit de zin trekt. */
.tl-source { display: block; margin-top: 16px; font-size: 13.5px; color: var(--muted-soft); line-height: 1.6; }
.tl-source strong { color: var(--muted); font-weight: 600; }
.tl-source a { color: var(--gold); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(146, 97, 38, .3); }
.tl-source a:hover { border-bottom-color: var(--gold); }

.section--navy .timeline::before { background: linear-gradient(180deg, var(--gold-light) 0%, rgba(255, 255, 255, .2) 70%, transparent 100%); }
.section--navy .timeline > li::before { background: var(--navy-900); border-color: var(--gold-light); box-shadow: 0 0 0 5px rgba(184, 132, 58, .16); }
.section--navy .timeline h3 { color: #fff; }
.section--navy .timeline p { color: rgba(255, 255, 255, .78); }
.section--navy .tl-source { color: rgba(255, 255, 255, .55); }
.section--navy .tl-source strong { color: rgba(255, 255, 255, .72); }
.section--navy .tl-source a { color: var(--gold-light); }

/* ---------------------------------------------------------
   Keten — de stappen van meten naar bijsturen
   --------------------------------------------------------- */

.chain { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.chain li { display: inline-flex; align-items: center; gap: 10px; }
.chain b {
  display: inline-block;
  padding: 9px 17px;
  border-radius: 999px;
  background: var(--cream);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
  white-space: nowrap;
}
/* De pijl staat vóór elke stap behalve de eerste, niet erachter. Zo blijft hij bij
   het afbreken van de regel bij de stap waar hij naartoe wijst; een pijl aan het
   einde van een regel zou nergens meer naar verwijzen. Hij is decoratief: de
   leesvolgorde van de lijst draagt dezelfde betekenis. */
.chain li + li::before { content: "→"; color: var(--gold); font-size: 16px; line-height: 1; }

.section--navy .chain b,
.callout .chain b { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }
.section--navy .chain li + li::before,
.callout .chain li + li::before { color: var(--gold-light); }

/* Op een smal scherm past er nog een pil per regel. De keten staat daar rechtop,
   met de pijl boven de stap in plaats van ervoor. */
@media (max-width: 620px) {
  .chain { flex-direction: column; align-items: stretch; gap: 4px; }
  .chain li { flex-direction: column; gap: 4px; }
  .chain b { width: 100%; text-align: center; }
  .chain li + li::before { content: "↓"; }
}

/* ---------------------------------------------------------
   Publication lists (articles, blogs, presentations)
   --------------------------------------------------------- */

.pubs { list-style: none; border-top: 1px solid var(--line); }
.pubs > li { border-bottom: 1px solid var(--line); padding: 20px 0; }
.pub-title { display: block; font-weight: 600; color: var(--navy); font-size: 16.5px; line-height: 1.45; }
a.pub-title { text-decoration: none; transition: color .25s var(--ease); }
a.pub-title:hover { color: var(--gold); }
.pub-meta { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted-soft); }
.pub-note { display: block; margin-top: 10px; font-size: 14.5px; color: var(--muted); }
.pub-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.section--navy .pubs { border-top-color: rgba(255, 255, 255, .14); }
.section--navy .pubs > li { border-bottom-color: rgba(255, 255, 255, .14); }
.section--navy .pub-title { color: #fff; }
.section--navy .pub-meta { color: rgba(255, 255, 255, .58); }
.section--navy .pub-note { color: rgba(255, 255, 255, .75); }

/* ---------------------------------------------------------
   Document reference markers
   Temporary badges: replace with the real blob link once known.
   Search on data-doc="…" to find every occurrence.
   --------------------------------------------------------- */

.docref {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border-radius: 6px;
  background: rgba(146, 97, 38, .12);
  border: 1px dashed rgba(146, 97, 38, .45);
  color: var(--gold);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.4;
}
.docref--inline { margin-left: 8px; vertical-align: middle; }
.section--navy .docref,
.callout .docref,
.card--dark .docref,
.doc-cover .docref {
  background: rgba(184, 132, 58, .22);
  border-color: rgba(184, 132, 58, .6);
  color: var(--gold-light);
}

/* ---------------------------------------------------------
   Figures / media
   --------------------------------------------------------- */

.figure {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(18px, 2vw, 28px);
  box-shadow: var(--sh);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.figure:hover { transform: translateY(-6px); box-shadow: var(--sh-lg); }
.figure img { width: 100%; height: auto; border-radius: 8px; }
.figure figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted-soft);
  text-align: center;
}
.figure--bare { padding: 0; overflow: hidden; }
.figure--bare figcaption { padding: 0 18px 16px; margin-top: 12px; }
/* De twee radargrafieken naast elkaar even groot: de afbeeldingen hebben een
   andere verhouding (VB 1245x1115, PB 1289x1221). Een vast vlak in de
   verhouding van VB met contain maakt de kaders gelijk, en toevallig ook de
   buitenste ring (76,4% van de breedte bij VB, 80,9% bij PB, geschaald 76,5%). */
.figure--radar img { aspect-ratio: 1245 / 1115; object-fit: contain; }

.media-frame {
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
}

/* Embedded video (YouTube, Brightcove) inside a media frame */
.video-embed { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }

/* ---------------------------------------------------------
   Document cards (whitepapers, reports)
   --------------------------------------------------------- */

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: clamp(20px, 2.4vw, 30px); }

.doc {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.doc:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: var(--gold-pale); }

.doc-cover {
  aspect-ratio: 1 / 1.414;
  background: linear-gradient(155deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.doc-cover::after {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -30%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 97, 38, .38), transparent 62%);
}
.doc-cover > * { position: relative; z-index: 1; }
.doc-kind {
  font-size: 11.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-light);
  font-weight: 600;
}
.doc-cover-title {
  margin-top: auto;
  font-size: 17.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.doc-cover-meta { margin-top: 12px; font-size: 12px; color: rgba(255, 255, 255, .6); }
.doc-cover--gold { background: linear-gradient(155deg, var(--gold) 0%, #6f4a1d 100%); }
.doc-cover--gold .doc-kind { color: rgba(255, 255, 255, .85); }
.doc-cover--light {
  background: linear-gradient(155deg, #fff 0%, var(--sand) 100%);
  color: var(--navy);
  border-bottom: 1px solid var(--line);
}
.doc-cover--light::after { background: radial-gradient(circle, rgba(24, 55, 109, .10), transparent 62%); }
.doc-cover--light .doc-kind { color: var(--gold); }
.doc-cover--light .doc-cover-meta { color: var(--muted-soft); }

.doc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.doc-body h3 { font-size: 17px; margin-bottom: 10px; }
.doc-body p { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.doc-body .btn, .doc-body .pending { margin-top: auto; align-self: flex-start; }

.pending {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(146, 97, 38, .10);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------
   Accordion
   --------------------------------------------------------- */

.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 44px 20px 0;
  position: relative;
  font-weight: 600;
  color: var(--navy);
  font-size: 16.5px;
  transition: color .25s var(--ease);
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary:hover { color: var(--gold); }
.accordion summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 27px;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.accordion details[open] summary::after { transform: rotate(225deg); top: 30px; }
.accordion .acc-body { padding: 0 44px 24px 0; color: var(--muted); font-size: 15.5px; }
.accordion .acc-body p + p { margin-top: 14px; }
.accordion .acc-num {
  display: inline-block;
  min-width: 30px;
  color: var(--gold);
  font-weight: 700;
  font-size: 13px;
}

/* Ordered reference list */
.ref-list { counter-reset: ref; list-style: none; display: grid; gap: 16px; }
.ref-list > li {
  counter-increment: ref;
  position: relative;
  padding: 18px 22px 18px 62px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 15.5px;
  line-height: 1.65;
}
.ref-list > li::before {
  content: counter(ref);
  position: absolute;
  left: 18px;
  top: 17px;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: rgba(146, 97, 38, .10);
  color: var(--gold);
  font-size: 13px;
  font-weight: 700;
}
.ref-list ul { margin-top: 10px; }

/* Op een telefoon nemen de marges van de uitklapper te veel ruimte in: de gutter,
   de rechtermarge van het paneel, de plek voor het nummer en de inspringing van de
   opsomming lieten samen een tekstkolom van ruim tweehonderd pixels over. Daar
   breekt de zin na drie woorden af. Hieronder vervalt de rechtermarge en staat het
   nummer op een eigen regel boven de tekst, zodat de zin de volle breedte krijgt. */
@media (max-width: 700px) {
  .accordion summary { padding-right: 32px; }
  .accordion summary::after { right: 4px; }
  .accordion .acc-body { padding-right: 0; }

  .ref-list { gap: 12px; }
  .ref-list > li { padding: 16px 18px 18px; }
  .ref-list > li::before { position: static; margin-bottom: 10px; }
  .ref-list .bullets li { padding-left: 20px; }
}

/* ---------------------------------------------------------
   Contact
   --------------------------------------------------------- */

.contact-card {
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 38px);
  backdrop-filter: blur(8px);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.contact-card:hover { transform: translateY(-5px); border-color: var(--gold-light); background: rgba(255, 255, 255, .09); }
.contact-card h3 { color: var(--gold-light); font-size: 21px; margin-bottom: 4px; }
.contact-role {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 22px;
}
.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  font-size: 15px;
  border-bottom: 1px solid transparent;
  transition: color .25s var(--ease), padding-left .25s var(--ease), border-color .25s var(--ease);
  overflow-wrap: anywhere;
}
.contact-link:hover { color: var(--gold-light); padding-left: 6px; border-bottom-color: rgba(184, 132, 58, .4); }
.contact-link svg { width: 17px; height: 17px; flex: none; opacity: .8; }

/* CTA band */
.cta-band {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%);
  color: #fff;
  border-radius: var(--r-lg);
  padding: clamp(34px, 4vw, 56px);
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 32px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -8%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(146, 97, 38, .32), transparent 64%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; font-size: clamp(23px, 2.1vw, 29px); }
.cta-band p { color: rgba(255, 255, 255, .78); margin-top: 12px; max-width: 60ch; }

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */

.site-footer { background: var(--navy-950); color: rgba(255, 255, 255, .6); padding: clamp(48px, 6vw, 76px) 0 32px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 48px);
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.site-footer img.footer-logo { height: 40px; width: auto; margin-bottom: 20px; filter: brightness(0) invert(1); opacity: .92; }
.site-footer h4 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .11em;
  margin-bottom: 16px;
  font-weight: 600;
}
.site-footer p { font-size: 14px; line-height: 1.75; }
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer ul a { font-size: 14px; text-decoration: none; color: rgba(255, 255, 255, .62); transition: color .25s var(--ease), padding-left .25s var(--ease); }
.site-footer ul a:hover { color: var(--gold-light); padding-left: 4px; }
.footer-bottom {
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: rgba(255, 255, 255, .45);
}
.footer-bottom a { color: rgba(255, 255, 255, .6); text-decoration: none; }
.footer-bottom a:hover { color: var(--gold-light); }

/* Back to top */
.to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 950;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--navy);
  display: grid;
  place-items: center;
  box-shadow: var(--sh);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s, background .25s var(--ease), color .25s var(--ease);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--navy); color: #fff; }
.to-top svg { width: 18px; height: 18px; }

/* ---------------------------------------------------------
   Reveal animations
   --------------------------------------------------------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
[data-reveal="left"] { transform: translateX(-26px); }
[data-reveal="right"] { transform: translateX(26px); }
[data-reveal="scale"] { transform: scale(.97); }
[data-reveal].is-revealed { opacity: 1; transform: none; }

[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

/* Met zeven tabs is de balk breder dan voorheen. Tussen 1300 en 1440 px staat
   zij daarom strakker: minder ruimte om de labels heen en een smallere
   buitenmarge, zodat "Neem contact op" heel in beeld blijft. */
@media (max-width: 1440px) {
  .header-inner { gap: 16px; padding-left: 32px; padding-right: 32px; }
  .nav-list { gap: 0; }
  .nav-link { padding: 10px 10px; font-size: 14px; }
}

/* Daaronder past de volledige balk niet meer zonder dat labels gaan afbreken;
   vanaf hier neemt het hamburgermenu het over. */
@media (max-width: 1340px) {
  .nav, .header-cta { display: none; }
  .burger { display: block; }
  .lang-switch { margin-left: auto; }
  .header-inner { gap: 12px; }
}

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 68px; }
  /* Op een smal scherm schuiven blokken bij het verschijnen omhoog in plaats
     van opzij: zijwaartse aanloop steekt daar buiten beeld. */
  [data-reveal="left"], [data-reveal="right"] { transform: translateY(24px); }
  .split, .split--wide-left, .split--wide-right { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band { grid-template-columns: 1fr; }
  .deflist > div { grid-template-columns: 1fr; gap: 6px; }
  .callout .steps { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 15.5px; }
  .stats { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  /* Een lange knoptekst mag hier wrappen: nowrap zou de knop breder maken
     dan het scherm en de hele pagina opzij laten schuiven. */
  .btn { white-space: normal; }
  .doc-grid { grid-template-columns: 1fr; }
  .brand img { height: 34px; }
}

/* Print */
@media print {
  .site-header, .subnav, .to-top, .mobile-nav, .cta-band, .site-footer { display: none !important; }
  .page-hero, .section--navy { background: #fff !important; color: #000 !important; }
  .page-hero h1, .section--navy h2, .section--navy h3 { color: #000 !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  body { font-size: 11pt; }
}

/* ---------------------------------------------------------
   Inloggen — knop naar het klantportaal
   --------------------------------------------------------- */

/* Omlijnd en niet goud: de gouden knop blijft de primaire actie voor een
   bezoeker die IBI nog niet kent. Wie moet inloggen, weet dat hij zoekt. */
.header-login { gap: 8px; }
.header-login svg { width: 15px; height: 15px; opacity: .75; }
.header-login:hover svg { opacity: 1; }

/* Op smalle schermen zit de inlog in het mobiele menu; de knop in de kop zou
   daar met de taalwissel en de burger om dezelfde ruimte vechten. */
@media (max-width: 1080px) {
  .header-login { display: none; }
}

.mobile-login {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 4px;
}
.mobile-login > a { color: var(--gold); font-weight: 600; }

/* =========================================================
   CONTACTWIZARD
   ---------------------------------------------------------
   Eén vraag per scherm in plaats van een lang formulier: een bestuurder die
   contact zoekt, hoeft dan niet eerst te bedenken welke velden voor hem
   gelden. De wizard staat op donker (section--navy) maar is zelf licht: het
   formulier is de handeling op de pagina, niet nog een blok tekst.
   ========================================================= */

.wizard {
  position: relative;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  color: var(--text);
  max-width: 940px;
  margin: 0 auto clamp(40px, 5vw, 64px);
}

/* ---- Kop met voortgang ---- */
.wz-head {
  padding: clamp(24px, 3vw, 34px) clamp(24px, 3.4vw, 40px) 0;
}
.wz-head h3 { font-size: clamp(19px, 1.7vw, 23px); color: var(--navy); }
.wz-head p { color: var(--muted); font-size: 15px; margin-top: 6px; }

.wz-progress { margin-top: 22px; }
.wz-bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: var(--sand);
  overflow: hidden;
}
.wz-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 20%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transition: width .5s var(--ease);
}
.wz-steps {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  list-style: none;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-soft);
}
.wz-steps li { display: flex; align-items: center; gap: 7px; transition: color .3s var(--ease); }
.wz-steps li::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.wz-steps li.is-current { color: var(--navy); font-weight: 600; }
.wz-steps li.is-current::before { background: var(--gold); transform: scale(1.35); }
.wz-steps li.is-done { color: var(--gold); }
.wz-steps li.is-done::before { background: var(--gold-light); }

/* Op smalle schermen is de balk genoeg; de labels zouden er alleen maar
   afgeknepen bij staan. */
@media (max-width: 700px) {
  .wz-steps { display: none; }
}

/* ---- Stappen ---- */
.wz-body { padding: clamp(22px, 2.6vw, 32px) clamp(24px, 3.4vw, 40px) 0; }

/* fieldset heeft van zichzelf een rand en een minimumbreedte; allebei staan
   een rustige kaart in de weg. En [hidden] verliest het van .btn zolang die
   display:inline-flex zet — vandaar de expliciete regel. */
.wz-step { border: 0; padding: 0; min-width: 0; }
.wizard [hidden] { display: none !important; }

.wz-step { display: none; }
.wz-step.is-active { display: block; animation: wzIn .45s var(--ease) both; }
.wz-step.is-active.is-back { animation-name: wzInBack; }

@keyframes wzIn {
  from { opacity: 0; transform: translateX(26px); }
  to { opacity: 1; transform: none; }
}
@keyframes wzInBack {
  from { opacity: 0; transform: translateX(-26px); }
  to { opacity: 1; transform: none; }
}

.wz-step > legend,
.wz-legend {
  display: block;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
  margin-bottom: 6px;
}
.wz-help { color: var(--muted); font-size: 14.5px; margin-bottom: 20px; }

/* ---- Keuzekaarten ---- */
.wz-options { display: grid; gap: 12px; }
.wz-options--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .wz-options--2 { grid-template-columns: 1fr; } }

.wz-option {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  background: #fff;
  transition: border-color .25s var(--ease), background .25s var(--ease),
              transform .25s var(--ease), box-shadow .25s var(--ease);
}
.wz-option:hover { border-color: var(--gold-pale); transform: translateY(-2px); box-shadow: var(--sh-sm); }
.wz-option input { position: absolute; opacity: 0; pointer-events: none; }
.wz-option .wz-mark {
  flex: none;
  width: 22px; height: 22px;
  margin-top: 2px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.wz-option input[type="checkbox"] ~ .wz-mark { border-radius: 6px; }
.wz-option .wz-mark::after {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .25s var(--ease);
}
.wz-option input[type="checkbox"] ~ .wz-mark::after { border-radius: 2px; }
.wz-option strong { display: block; color: var(--navy); font-weight: 600; font-size: 15.5px; line-height: 1.4; }
.wz-option span.wz-sub { display: block; color: var(--muted); font-size: 13.5px; margin-top: 3px; }

.wz-option:has(input:checked) {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(146, 97, 38, .05), rgba(146, 97, 38, .02));
  box-shadow: var(--sh-sm);
}
.wz-option:has(input:checked) .wz-mark { border-color: var(--gold); background: var(--gold); }
.wz-option:has(input:checked) .wz-mark::after { transform: scale(1); }
.wz-option:has(input:focus-visible) { outline: 3px solid var(--gold-light); outline-offset: 3px; }

/* ---- Velden ---- */
.wz-fields { display: grid; gap: 16px; }
.wz-fields--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .wz-fields--2 { grid-template-columns: 1fr; } }

.wz-field label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.wz-field input,
.wz-field select,
.wz-field textarea {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--cream);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
}
.wz-field textarea { min-height: 116px; resize: vertical; }
.wz-field input:focus,
.wz-field select:focus,
.wz-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--gold);
  box-shadow: 0 0 0 4px rgba(146, 97, 38, .12);
}
.wz-field .wz-error { display: none; color: #a3311f; font-size: 13px; margin-top: 6px; }
.wz-field.has-error input,
.wz-field.has-error select { border-color: #c0492f; }
.wz-field.has-error .wz-error { display: block; }

/* ---- Tariefindicatie ---- */
.wz-hint {
  margin-top: 18px;
  padding: 16px 18px;
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--cream);
  font-size: 14.5px;
  color: var(--muted);
  animation: wzFade .4s var(--ease) both;
}
.wz-hint strong { color: var(--navy); }
@keyframes wzFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Samenvatting ---- */
.wz-summary { display: grid; gap: 0; border-top: 1px solid var(--line); margin-bottom: 20px; }
.wz-summary > div {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.wz-summary dt { color: var(--muted); }
.wz-summary dd { color: var(--navy); font-weight: 500; }
@media (max-width: 700px) { .wz-summary > div { grid-template-columns: 1fr; gap: 2px; } }

/* De legenda krijgt bij het wisselen van stap focus zodat een schermlezer
   meeleest; een zichtbare ring hoort daar niet bij, die is voor toetsenbord. */
.wz-legend:focus,
.wz-done h3:focus { outline: none; }

.wz-consent,
.wz-field label.wz-consent {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
  margin-bottom: 0;
}
.wz-consent input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--gold); flex: none; }

/* ---- Voet met knoppen ---- */
.wz-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: clamp(20px, 2.4vw, 28px) clamp(24px, 3.4vw, 40px) clamp(24px, 3vw, 32px);
}
.wz-foot .wz-spacer { flex: 1 1 auto; }
.wz-foot .btn { flex: none; }
@media (max-width: 560px) {
  .wz-foot { flex-direction: column-reverse; align-items: stretch; }
  .wz-foot .wz-spacer { display: none; }
}

.wz-status { font-size: 13.5px; color: var(--muted); }

/* ---- Bevestiging ---- */
.wz-done { display: none; padding: clamp(34px, 4vw, 56px) clamp(24px, 3.4vw, 40px); text-align: center; }
.wizard.is-done .wz-head,
.wizard.is-done .wz-body,
.wizard.is-done .wz-foot { display: none; }
.wizard.is-done .wz-done { display: block; animation: wzFade .5s var(--ease) both; }
.wz-done h3 { color: var(--navy); font-size: clamp(21px, 2vw, 26px); margin-bottom: 10px; }
.wz-done p { color: var(--muted); max-width: 56ch; margin: 0 auto; }

.wz-check { width: 74px; height: 74px; margin: 0 auto 20px; }
.wz-check circle,
.wz-check path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}
.wz-check circle { stroke: var(--gold-pale); stroke-dasharray: 166; stroke-dashoffset: 166; animation: wzStroke .7s var(--ease) forwards; }
.wz-check path { stroke: var(--gold); stroke-dasharray: 48; stroke-dashoffset: 48; animation: wzStroke .45s var(--ease) .5s forwards; }
@keyframes wzStroke { to { stroke-dashoffset: 0; } }

/* Het honeypotveld mag niet zichtbaar zijn en ook niet in de tabvolgorde
   staan: alleen een bot vult het in. */
.wz-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wz-step.is-active,
  .wz-hint,
  .wizard.is-done .wz-done { animation: none; }
  .wz-check circle,
  .wz-check path { animation: none; stroke-dashoffset: 0; }
}

/* Browsers zonder :has() krijgen dezelfde staat via een klasse die de JS zet. */
.wz-option.is-checked {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(146, 97, 38, .05), rgba(146, 97, 38, .02));
  box-shadow: var(--sh-sm);
}
.wz-option.is-checked .wz-mark { border-color: var(--gold); background: var(--gold); }
.wz-option.is-checked .wz-mark::after { transform: scale(1); }

/* Alleen voor schermlezers: de wizard meldt hiermee welke stap actief is. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------
   Taalwissel — zachte overgang tussen NL en EN
   --------------------------------------------------------- */

/* De NL/EN-knop opent een andere pagina. Zonder overgang knippert het beeld
   even wit; met een view transition vervaagt de ene taal in de andere.
   site.js laat de overgang alleen bij de taalwissel doorgaan en slaat hem bij
   gewone navigatie over, zodat de rest van de site zich niet anders gedraagt. */
@view-transition { navigation: auto; }

/* De kopbalk krijgt een eigen naam en blijft daardoor rustig staan terwijl de
   inhoud eronder van taal wisselt. Zij wisselt ineens van labels: twee sets
   menutekst die over elkaar heen vervagen leest rommelig. */
.site-header { view-transition-name: kopbalk; }

::view-transition-old(kopbalk) { animation: none; opacity: 0; }
::view-transition-new(kopbalk) { animation: none; opacity: 1; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .36s;
  animation-timing-function: cubic-bezier(.22, .8, .36, 1);
}

/* Wie minder beweging wil, krijgt de directe omslag. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Browsers zonder view transitions (onder meer Firefox) laten de pagina bij
   het openen kort invloeien, zodat de taalwissel ook daar niet hard omslaat. */
@supports not (view-transition-name: none) {
  @media (prefers-reduced-motion: no-preference) {
    body { animation: pagina-in .26s cubic-bezier(.22, .8, .36, 1) both; }
  }
}
@keyframes pagina-in { from { opacity: 0; } to { opacity: 1; } }