*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; background: #D8E2EA; color: #0A1628; line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   TOKENS
============================================================ */
:root {
  --lila: #7C3AED;
  --lila-mid: #7C3AED;
  --lila-light: #A78BFA;
  --blue-dark: #1E2A35;
  --blue-mid: #173580;
  --blue-footer: #111C24;
  --light1: #D8E2EA;
  --light2: #C4CDD6;
  --navy-text: #0A1628;
  --text-sec: #2D4268;
  --text-muted: #5070A0;
  --border: rgba(10,22,40,0.10);
  --radius: 6px;
}

/* ============================================================
   NAV
============================================================ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px;
  border-bottom: 1px solid var(--border);
  background: #fff;
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 1px 3px rgba(15,30,54,0.06);
}
.logo { font-size: 22px; font-weight: 800; color: var(--navy-text); letter-spacing: -0.5px; cursor: pointer; }
.logo span { color: var(--lila); }
.nav-links { display: flex; gap: 20px; }
.nav-links a { font-size: 16px; color: var(--text-muted); cursor: pointer; font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--navy-text); }
/* Tweede menuniveau. De padding onder .nav-groep overbrugt het gat naar het uitklapmenu,
   anders valt de hover weg zodra de muis de ruimte ertussen raakt. */
.nav-groep { position: relative; padding-bottom: 22px; margin-bottom: -22px; }
.nav-groep-link::after { content: '›'; display: inline-block; margin-left: 5px; transform: rotate(90deg); font-size: 13px; }
.nav-sub {
  display: none; position: absolute; top: 100%; left: -12px; min-width: 210px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(15,30,54,0.12); padding: 6px; z-index: 101;
}
.nav-groep:hover .nav-sub, .nav-groep:focus-within .nav-sub { display: block; }
.nav-sub a { display: block; padding: 9px 12px; border-radius: 4px; font-size: 15px; color: var(--text-muted); font-weight: 500; }
.nav-sub a:hover { background: rgba(124,58,237,0.07); color: var(--lila); }
.nav-sub a.active { color: var(--lila); font-weight: 600; }
/* Op mobiel springt het tweede niveau in in plaats van uit te klappen. */
.nav-mobile a.nav-mobile-sub { padding-left: 18px; font-size: 15px; color: var(--text-muted); }
.nav-mobile a.nav-mobile-sub::before { content: '– '; color: var(--lila); }
.nav-cta {
  background: var(--lila); color: #fff; border: none;
  padding: 11px 26px; border-radius: var(--radius);
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: background .2s; margin-left: auto;
}
.nav-cta:hover { background: #7C3AED; }

/* Mobile nav toggle */
.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--navy-text); border-radius: 2px; transition: all .25s; }
.nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
.nav-mobile {
  display: none; flex-direction: column;
  background: #fff; border-top: 1px solid var(--border);
  padding: 16px 24px 24px; gap: 4px;
  position: sticky; top: 61px; z-index: 99;
  box-shadow: 0 4px 12px rgba(15,30,54,0.08);
}
.nav-mobile.open { display: flex; }
.nav-mobile a { font-size: 16px; color: var(--text-sec); font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile a.active { color: var(--lila); }
.nav-mobile .nav-cta-mobile {
  margin-top: 12px; width: 100%; background: var(--lila); color: #fff;
  border: none; padding: 13px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; cursor: pointer;
}

/* ============================================================
   PAGE SYSTEM
============================================================ */
.dex-page { display: none; }
.dex-page.active { display: block; }

/* ============================================================
   SECTION EYEBROW
============================================================ */
.section-eyebrow {
  font-size: 15px; letter-spacing: 3px; color: var(--lila);
  font-weight: 700; text-transform: uppercase; margin-bottom: 36px;
  display: flex; align-items: center; gap: 12px;
}

.section-eyebrow.light { color: var(--lila-light); }
.section-eyebrow.light::before { background: var(--lila-mid); }
.section-eyebrow.centered { justify-content: center; }
.section-eyebrow.centered::before, .section-eyebrow.centered::after { content: ''; display: block; width: 32px; height: 1px; background: var(--lila-mid); }

/* ============================================================
   BUTTONS — beide lila achtergrond, witte tekst
============================================================ */
.btn-cta {
  background: var(--lila); color: #fff; border: none;
  padding: 15px 32px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s; display: inline-block;
  text-decoration: none;
}
.btn-cta:hover { background: #7C3AED; color: #fff; }
.btn-cta-sec {
  background: var(--lila); color: #fff; border: none;
  padding: 15px 32px; border-radius: var(--radius);
  font-size: 15px; font-weight: 700; cursor: pointer;
  opacity: 0.72; transition: opacity .2s, background .2s;
  display: inline-block; text-decoration: none;
}
.btn-cta-sec:hover { opacity: 1; background: #7C3AED; color: #fff; }

/* ============================================================
   LAYOUT
============================================================ */
.inner { max-width: 900px; margin: 0 auto; }
.section-pad { padding: 100px 48px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }

/* ============================================================
   HERO
============================================================ */
.hero {
  padding: 110px 48px 100px;
  position: relative; overflow: hidden;
  background: var(--blue-dark);
}
.hero-inner { max-width: 900px; margin: 0 auto; position: relative; z-index: 2; }
.hero-eyebrow {
  font-size: 15px; letter-spacing: 3px; color: rgba(255,255,255,0.5);
  font-weight: 700; text-transform: uppercase; margin-bottom: 32px;
  display: flex; align-items: center; gap: 12px;
}
.section-eyebrow::before, .hero-eyebrow::before {
  content: ''; display: block; height: 1px; width: 32px; margin-bottom: 10px;
}
.section-eyebrow::before { background: var(--lila); }
.hero-eyebrow::before { background: var(--lila-mid); }
.hero h1 { font-size: 64px; font-weight: 900; line-height: 1.05; letter-spacing: -2.5px; margin-bottom: 32px; color: #fff; }
.hero h1 .accent { color: var(--lila-light); }
.hero h1 .dim { color: rgba(255,255,255,0.25); }
.hero-sub { font-size: 18px; color: rgba(255,255,255,0.55); line-height: 1.7; max-width: 520px; margin-bottom: 48px; }
.hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero-deco { position: absolute; top: 0; right: -40px; width: 52%; height: 100%; z-index: 1; opacity: 0.1; pointer-events: none; }

/* ============================================================
   STATEMENT — lichtblauw
============================================================ */
.statement { padding: 100px 48px; background: var(--light1); border-top: 1px solid var(--border); }
.statement h2 { font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -1px; color: var(--navy-text); max-width: 740px; }
.statement h2 em { color: var(--lila); font-style: normal; }
.statement-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; margin-top: 56px; }
.statement-col p { font-size: 16px; color: var(--text-sec); line-height: 1.8; }
.statement-col p + p { margin-top: 16px; }

/* ============================================================
   DISCIPLINES — middenblauw
============================================================ */
.disciplines { padding: 100px 48px; background: var(--blue-mid); border-top: 1px solid rgba(255,255,255,0.06); }
.disciplines-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 56px; }
.disciplines-header h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; line-height: 1.15; color: #fff; }
.disciplines-header h2 em { color: var(--lila-light); font-style: normal; }
.disciplines-header p { font-size: 13px; color: rgba(255,255,255,0.4); max-width: 260px; text-align: right; line-height: 1.7; }
.disc-items, .waarom-items { display: flex; flex-direction: column; }
.disc-item { display: grid; grid-template-columns: 56px 1fr 1fr; gap: 40px; padding: 36px 0; border-top: 1px solid rgba(255,255,255,0.1); align-items: start; }
.disc-item:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
.disc-num { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 700; letter-spacing: 2px; padding-top: 4px; }
.disc-title { font-size: 22px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; color: #fff; }
.disc-tag { display: inline-block; font-size: 10px; letter-spacing: 1.5px; color: var(--lila-light); font-weight: 700; text-transform: uppercase; margin-bottom: 8px; }
.disc-body { font-size: 14px; color: rgba(255,255,255,0.7); line-height: 1.75; padding-top: 4px; }
.disc-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--lila-light); font-weight: 600; cursor: pointer; }
.disc-link:hover { color: #fff; }
.disc-link:focus-visible { color: #fff; outline: 2px solid var(--lila-light); outline-offset: 3px; border-radius: 2px; }

/* ============================================================
   CYCLUS — lichtblauw
============================================================ */
.cyclus { padding: 100px 48px; background: var(--light2); border-top: 1px solid var(--border); }
.cyclus h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin-bottom: 56px; line-height: 1.2; color: var(--navy-text); }
.cyclus-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 2px; }
.cyclus-step { background: rgba(255,255,255,0.55); border: 1px solid var(--border); padding: 32px 24px; }
.cyclus-step.active, .step-lila { background: #fff; border-color: var(--lila); }
.cyclus-step-num { font-size: 48px; font-weight: 900; color: rgba(15,30,54,0.18); letter-spacing: -2px; line-height: 1; margin-bottom: 20px; display: block; }
.cyclus-step.active .cyclus-step-num { color: rgba(124,58,237,0.30); }
.cyclus-step-tag { font-size: 9px; letter-spacing: 1.5px; color: #6B80A0; font-weight: 700; text-transform: uppercase; margin-bottom: 10px; display: block; }
.cyclus-step.active .cyclus-step-tag { color: var(--lila); }
.cyclus-step h3 { font-size: 15px; font-weight: 700; margin-bottom: 10px; color: var(--navy-text); }
.cyclus-step p { font-size: 12px; color: var(--text-muted); line-height: 1.65; }

/* ============================================================
   STATS — blauw-donker
============================================================ */
.stats-strip { background: var(--blue-dark); padding: 60px 48px; }
.stats-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(4,1fr); }
.stat { padding: 0 32px; border-right: 1px solid rgba(255,255,255,0.12); }
.stat:first-child { padding-left: 0; }
.stat:last-child { border-right: none; }
.stat-num { font-size: 40px; font-weight: 900; color: var(--lila-light); letter-spacing: -1px; margin-bottom: 6px; display: block; }
.stat-label { font-size: 13px; color: rgba(255,255,255,0.4); line-height: 1.5; }

/* ============================================================
   WAAROM — lichtblauw
============================================================ */
.waarom { padding: 100px 48px; background: var(--light1); border-top: 1px solid var(--border); }
.waarom h2 { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin-bottom: 56px; color: var(--navy-text); }
.waarom-item { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; padding: 36px 0; border-top: 1px solid var(--border); align-items: start; }
.waarom-item:last-child { border-bottom: 1px solid var(--border); }
.waarom-item h3 { font-size: 17px; font-weight: 700; color: var(--navy-text); line-height: 1.3; }
.waarom-item p { font-size: 14px; color: var(--text-sec); line-height: 1.75; }

/* ============================================================
   CTA FINAL — middenblauw
============================================================ */
.cta-final { padding: 120px 48px; background: var(--blue-mid); border-top: 1px solid rgba(255,255,255,0.06); text-align: center; }
.cta-final h2 { font-size: 50px; font-weight: 900; letter-spacing: -2px; line-height: 1.1; margin-bottom: 24px; color: #fff; }
.cta-final p { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 48px; line-height: 1.7; }
.cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   TIJDLIJN
============================================================ */
.tl-items { display: flex; flex-direction: column; }
.tl-item { display: grid; grid-template-columns: 80px 1fr; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--border); align-items: start; }
.tl-item:last-child { border-bottom: none; }
.tl-year { font-size: 13px; font-weight: 700; color: var(--lila); padding-top: 2px; }
.tl-item h4 { font-size: 15px; font-weight: 600; margin-bottom: 4px; color: var(--navy-text); }
.tl-item p { font-size: 13px; color: var(--text-muted); line-height: 1.65; }

/* ============================================================
   WAARDEN
============================================================ */
.waarden-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 14px; }
.waarde-card { background: rgba(255,255,255,0.55); border: 1px solid var(--border); border-radius: 10px; padding: 22px 18px; text-align: center; }
.waarde-card.accent { background: #fff; border-color: rgba(124,58,237,0.2); }
.waarde-icon { width: 40px; height: 40px; border-radius: 50%; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.waarde-card h3 { font-size: 14px; font-weight: 700; margin-bottom: 8px; color: var(--navy-text); }
.waarde-card p { font-size: 12px; color: var(--text-muted); line-height: 1.6; }

/* ============================================================
   USE CASE ACCORDION
============================================================ */
.uc-grid { display: flex; flex-direction: column; gap: 8px; }
.uc-card { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; cursor: pointer; background: #fff; align-self: flex-start; width: 100%; }
.uc-card.featured { border-color: rgba(124,58,237,0.35); }
.uc-card.ai-uc { border-color: rgba(124,58,237,0.3); background: rgba(124,58,237,0.04); }
.uc-header { padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; background: #F1F6FB; }
.uc-card.featured .uc-header { background: rgba(124,58,237,0.14); }
.uc-card.ai-uc .uc-header { background: rgba(124,58,237,0.08); }
.uc-title { font-size: 15px; font-weight: 600; color: var(--navy-text); }
.uc-tag { font-size: 10px; letter-spacing: .8px; color: var(--lila); font-weight: 700; background: rgba(124,58,237,0.08); border-radius: 4px; padding: 3px 10px; margin-bottom: 6px; display: inline-block; }
.uc-toggle { font-size: 20px; color: var(--text-muted); transition: transform .2s; flex-shrink: 0; margin-left: 12px; }
.uc-card.open .uc-toggle { transform: rotate(45deg); color: var(--lila); }
.uc-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.uc-card.open .uc-body { max-height: 380px; }
/* De padding zit op .uc-scroll en niet op .uc-body, zodat de scrollbalk tegen de
   rand van de kaart loopt en de hoogtemeting in de JS de padding meetelt. */
.uc-scroll { padding: 0 24px 24px; font-size: 13px; color: var(--text-sec); line-height: 1.75; }
/* has-scroll wordt door dex-it.js gezet, en alleen wanneer de inhoud niet past. */
.uc-card.has-scroll .uc-scroll { max-height: 380px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(124,58,237,0.3) var(--light2); }
.uc-body p { font-size: 13px; color: var(--text-sec); line-height: 1.75; margin-bottom: 12px; }
.uc-body p:last-child { margin-bottom: 0; }
.uc-body ul { list-style: none; margin: 0; }
.uc-body ul li { font-size: 13px; color: var(--text-muted); line-height: 1.7; padding-left: 18px; position: relative; margin-bottom: 4px; }
.uc-body ul li::before { content: '→'; position: absolute; left: 0; color: var(--lila); font-size: 11px; top: 2px; }
.scroll-hint { display: none; font-size: 11px; color: var(--lila); padding: 6px 24px 0; font-weight: 500; }
.uc-card.open.has-scroll .scroll-hint { display: block; }
.uc-pills { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.pill { background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.2); border-radius: 20px; padding: 4px 12px; font-size: 11px; color: var(--lila); font-weight: 600; }

/* ============================================================
   PLATFORMS
============================================================ */
.platform-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.platform-card { background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.28); border-radius: 10px; padding: 28px; }
.platform-tag { font-size: 10px; letter-spacing: .8px; color: rgba(255,255,255,0.35); text-transform: uppercase; margin-bottom: 12px; font-weight: 600; display: block; }
.platform-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; color: #fff; }
.platform-card p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* ============================================================
   ROUTES
============================================================ */
.routes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.route-card { border-radius: 10px; padding: 28px; border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.16); }
.route-card.hl { border-color: rgba(196,181,253,0.45); background: rgba(124,58,237,0.22); }
.route-num, .step-num { font-size: 10px; letter-spacing: 1px; color: var(--lila-light); font-weight: 700; margin-bottom: 12px; display: block; }
.route-card h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; color: #fff; }
.route-card p { font-size: 13px; color: rgba(255,255,255,0.5); line-height: 1.7; }
.route-link { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--lila-light); font-weight: 600; cursor: pointer; }

/* ============================================================
   STAPPEN
============================================================ */
.steps-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.steps-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.steps-5 { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.step { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 24px; }
.step.accent { border-color: rgba(196,181,253,0.3); background: rgba(124,58,237,0.1); }
.step h3 { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #fff; }
.step p { font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.65; }

/* ============================================================
   CONTACT FORM
============================================================ */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; font-size: 12px; color: var(--text-sec); margin-bottom: 8px; font-weight: 600; }
.form-group input, .form-group textarea {
  width: 100%; background: #fff; border: 1.5px solid rgba(15,30,54,0.15);
  border-radius: 8px; padding: 12px 16px;
  font-size: 14px; color: var(--navy-text); font-family: inherit;
  outline: none; transition: border-color .2s;
}
.form-group input:focus, .form-group textarea:focus { border-color: var(--lila); }
.form-group textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.submit-btn { width: 100%; background: var(--lila); color: #fff; border: none; padding: 14px; border-radius: 8px; font-size: 15px; font-weight: 700; cursor: pointer; }
.form-note { font-size: 12px; color: var(--text-muted); margin-top: 12px; text-align: center; }

/* ============================================================
   UMBRACO FORMS
   Het standaardthema rendert Bootstrap-achtige klassen (btn, primary, col-md-12)
   die dit stylesheet niet kent. Hieronder krijgt die opmaak dezelfde vormgeving
   als de handgemaakte .form-group velden hierboven.
============================================================ */
.umbraco-forms-form { margin: 0; }
.umbraco-forms-form fieldset { border: none; padding: 0; margin: 0; }
.umbraco-forms-caption { font-size: 18px; font-weight: 700; color: var(--navy-text); margin-bottom: 8px; }
.umbraco-forms-field { margin-bottom: 18px; }
.umbraco-forms-label { display: block; font-size: 12px; color: var(--text-sec); margin-bottom: 8px; font-weight: 600; }
.umbraco-forms-indicator { color: var(--lila); margin-left: 2px; }
.umbraco-forms-tooltip { display: block; font-size: 12px; color: var(--text-muted); margin-top: 6px; }

.umbraco-forms-field input[type="text"],
.umbraco-forms-field input[type="email"],
.umbraco-forms-field input[type="tel"],
.umbraco-forms-field input[type="number"],
.umbraco-forms-field input[type="date"],
.umbraco-forms-field textarea,
.umbraco-forms-field select {
  width: 100%; background: #fff; border: 1.5px solid rgba(15,30,54,0.15);
  border-radius: 8px; padding: 12px 16px;
  font-size: 14px; color: var(--navy-text); font-family: inherit;
  outline: none; transition: border-color .2s;
}
.umbraco-forms-field input:focus,
.umbraco-forms-field textarea:focus,
.umbraco-forms-field select:focus { border-color: var(--lila); }
.umbraco-forms-field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }

/* De verstuurknop; zelfde vorm als .submit-btn van het oorspronkelijke ontwerp. */
.umbraco-forms-navigation input[type="submit"],
.umbraco-forms-navigation button[type="submit"] {
  width: 100%; background: var(--lila); color: #fff; border: none;
  padding: 14px; border-radius: 8px;
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .2s; font-family: inherit;
}
.umbraco-forms-navigation input[type="submit"]:hover,
.umbraco-forms-navigation button[type="submit"]:hover { background: #7C3AED; }
/* Het thema zet de knop in een Bootstrap-kolom die hier niets doet. */
.umbraco-forms-navigation [class*="col-"] { padding: 0; width: 100%; }

/* Validatie: rood genoeg om op te vallen, niet schreeuwerig. */
.umbraco-forms-field .field-validation-error,
.umbraco-forms-form .field-validation-error { display: block; font-size: 12px; color: #B91C1C; margin-top: 6px; }
.umbraco-forms-field.has-error input,
.umbraco-forms-field.has-error textarea,
.umbraco-forms-field input.input-validation-error,
.umbraco-forms-field textarea.input-validation-error { border-color: #B91C1C; }
.validation-summary-errors { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 18px; color: #991B1B; font-size: 13px; }
.validation-summary-errors ul { list-style: none; margin: 0; }

/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. Umbraco Forms zet de alias
   van een veld als klasse op de wrapper, dus een veld met de naam "Website" of "Honeypot"
   wordt hier verborgen en door SpamGuardNotificationHandler herkend. Niet met display:none:
   sommige bots slaan verborgen velden over. */
.umbraco-forms-field.honeypot,
.umbraco-forms-field.website {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* Bevestiging na verzenden. */
.umbraco-forms-submitmessage { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.35);
  border-radius: 8px; padding: 14px 18px; color: #065F46; font-size: 14px; line-height: 1.6; }

/* ============================================================
   AGENDA
============================================================ */
.agenda-card { background: rgba(124,58,237,0.08); border: 1.5px solid rgba(124,58,237,0.25); border-radius: 10px; padding: 28px; }
.agenda-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; color: var(--navy-text); }
.agenda-card > p { font-size: 13px; color: var(--text-muted); margin-bottom: 18px; }
.agenda-btn { display: flex; align-items: center; gap: 8px; background: var(--lila); color: #fff; border: none; padding: 11px 20px; border-radius: 7px; font-size: 14px; font-weight: 600; cursor: pointer; width: 100%; justify-content: center; margin-bottom: 16px; }
.slots { display: flex; flex-direction: column; gap: 8px; }
.slot { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; cursor: pointer; transition: border-color .2s; }
.slot:hover { border-color: var(--lila); }
.slot-date { font-size: 13px; color: var(--navy-text); font-weight: 500; }
.slot-time { font-size: 12px; color: var(--text-muted); }
.slot-pick { font-size: 11px; color: var(--lila); font-weight: 600; }
/* Boekingsformulier: het tijdslot is een radio, visueel verborgen zodat de hele rij klikbaar is. */
.slot input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.slot:has(input:checked) { border-color: var(--lila); background: rgba(124,58,237,0.06); }
.slot:has(input:checked) .slot-pick::after { content: 'gekozen'; }
.slot:has(input:checked) .slot-pick { font-size: 0; }
.slot:has(input:checked) .slot-pick::after { font-size: 11px; }
.slot:focus-within { outline: 2px solid var(--lila); outline-offset: 2px; }
/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Cloudflare Turnstile, ingevoegd door dex-it.js. De verzendknop blijft uit tot de controle geslaagd is;
   dat moet zichtbaar zijn, anders lijkt de knop gewoon kapot. */
/* Geen vaste hoogte: de widget is onzichtbaar tot de bezoeker het formulier gaat invullen, en
   een gereserveerd vak van 65px zou tot die tijd een gat in het formulier zijn. */
.turnstile-houder { margin: 4px 0 14px; }
.turnstile-fout { min-height: 0; font-size: 13px; color: #9B2C2C; }
.agenda-btn:disabled,
.umbraco-forms-navigation input[type="submit"]:disabled,
.umbraco-forms-navigation button[type="submit"]:disabled { opacity: .5; cursor: not-allowed; }
/* Weeknavigatie boven de tijdsloten. */
.week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: 12px; }
.week-nav a { color: var(--lila); font-weight: 600; }
.week-nav a:hover { text-decoration: underline; }
.week-nav .uit { color: var(--text-muted); opacity: .45; }
.week-nav-titel { font-weight: 600; color: var(--navy-text); }
.maand-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.maand-nav a { font-size: 11px; padding: 3px 9px; border-radius: 20px; border: 1px solid var(--border); color: var(--text-muted); }
.maand-nav a:hover { border-color: var(--lila); color: var(--lila); }
.maand-nav a.actief { background: rgba(124,58,237,0.10); border-color: rgba(124,58,237,0.35); color: var(--lila); font-weight: 600; }
/* Inklapbare dag. De standaard driehoek gaat weg; het chevron hieronder vervangt hem. */
.dag { border-top: 1px solid var(--border); }
.dag:last-of-type { border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.dag-kop { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
           font-size: 12px; font-weight: 700; color: var(--navy-text); padding: 10px 2px; text-transform: capitalize; }
.dag-kop::-webkit-details-marker { display: none; }
.dag-kop::after { content: '›'; margin-left: auto; font-size: 16px; font-weight: 400; color: var(--lila);
                  transition: transform .2s; }
.dag[open] > .dag-kop::after { transform: rotate(90deg); }
.dag-kop:hover { color: var(--lila); }
.dag-aantal { font-size: 10px; font-weight: 600; color: var(--lila); background: rgba(124,58,237,0.10);
              border-radius: 20px; padding: 2px 8px; }
.dag .slots { padding-bottom: 12px; }
.geen-slots { font-size: 13px; color: var(--text-muted); line-height: 1.6; }
.booking-msg { border-radius: 8px; padding: 12px 16px; font-size: 13px; line-height: 1.6; margin-bottom: 16px; }
.booking-msg.ok { background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.35); color: #065F46; }
.booking-msg.ok strong { display: block; font-size: 15px; margin-bottom: 4px; }
.booking-msg.ok strong::before { content: '✓ '; }
.booking-msg.nok { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.30); color: #991B1B; }

/* ============================================================
   VERGELIJK TABEL
============================================================ */
.v-wrap { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 24px; }
.v-wrap h3 { font-size: 15px; font-weight: 600; color: rgba(255,255,255,0.5); margin-bottom: 20px; }
.v-table { width: 100%; border-collapse: collapse; }
.v-table th { font-size: 10px; letter-spacing: 1px; color: rgba(255,255,255,0.3); padding: 8px 12px; text-align: left; border-bottom: 1px solid rgba(255,255,255,0.08); font-weight: 700; }
.v-table td { font-size: 13px; padding: 12px; border-bottom: 1px solid rgba(255,255,255,0.06); color: rgba(255,255,255,0.5); line-height: 1.6; }
.v-table tr:last-child td { border-bottom: none; }
.v-table td:first-child { color: #fff; font-weight: 600; }
.v-table td.bad { color: #F87171; }
.v-table td.good { color: var(--lila-light); font-weight: 600; }

/* ============================================================
   W-ITEMS
============================================================ */
.w-items { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.w-item { display: flex; gap: 14px; align-items: flex-start; }
.w-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lila); margin-top: 6px; flex-shrink: 0; }
.w-item p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.65; margin: 0; }

/* ============================================================
   BREADCRUMB
============================================================ */
.breadcrumb { font-size: 15px; color: rgba(255,255,255,0.35); margin-bottom: 22px; }
.breadcrumb span { color: var(--lila-light); }

/* ============================================================
   AI CARDS
============================================================ */
.ai-cards { display: flex; flex-direction: column; gap: 12px; }
.ai-card { display: flex; gap: 16px; align-items: flex-start; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 16px 20px; }
.ai-card.accent { border-color: rgba(196,181,253,0.3); background: rgba(124,58,237,0.1); }
.ai-card-icon { width: 32px; height: 32px; border-radius: 8px; background: rgba(124,58,237,0.2); border: 1px solid rgba(196,181,253,0.3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--lila-light); }
.ai-card h4 { font-size: 13px; font-weight: 600; margin-bottom: 4px; color: #fff; }
.ai-card p { font-size: 12px; color: rgba(255,255,255,0.45); line-height: 1.6; margin: 0; }

/* ============================================================
   CALLOUT
============================================================ */
.callout { border-left: 3px solid var(--lila); padding: 14px 20px; margin-top: 20px; background: rgba(124,58,237,0.08); border-radius: 0 8px 8px 0; }
.callout p { font-size: 14px; color: rgba(255,255,255,0.65); line-height: 1.7; margin: 0; }
.callout strong { color: var(--lila-light); font-weight: 600; }

/* ============================================================
   404 — paginasuggesties
============================================================ */
.nf-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.nf-link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 18px 20px; transition: border-color .2s, background .2s;
}
.nf-link:hover { border-color: rgba(196,181,253,0.45); background: rgba(124,58,237,0.12); }
.nf-link-naam { font-size: 15px; font-weight: 600; color: #fff; }
.nf-link-pijl { color: var(--lila-light); font-size: 15px; }

/* ============================================================
   LINKS IN LOPENDE TEKST
   De globale regel zet a op color: inherit zonder onderstreping. Prima voor knoppen
   en kaarten, maar dan is een link middenin een alinea niet te herkennen. Hieronder
   staan de plekken waar redacteuren tekst met links kunnen invoeren.
============================================================ */
.callout a, .section-sub a, .w-item a, .body-text a {
  color: var(--lila-light); text-decoration: underline; text-underline-offset: 2px;
}
.callout a:hover, .section-sub a:hover, .w-item a:hover, .body-text a:hover { color: #fff; }
/* De use-case kaarten staan op wit, daar is het lichte lila te bleek. */
.uc-body a { color: var(--lila); text-decoration: underline; text-underline-offset: 2px; }
.uc-body a:hover { color: var(--navy-text); }

/* ============================================================
   FOOTER
============================================================ */
/* Witte achtergrond met dezelfde rand als .nav, zodat kop en voet één geheel vormen. */
footer { background: #fff; padding: 28px 48px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--border); }
.footer-logo { font-size: 16px; font-weight: 800; color: var(--navy-text); }
.footer-logo span { color: var(--lila); }
.footer-copy { font-size: 12px; color: var(--text-muted); }
.footer-sep { margin: 0 6px; opacity: 0.5; }
.footer-link { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.footer-link:hover { color: var(--lila); }

/* ============================================================
   COOKIEMELDING
   Vaste balk onderin met de donkere huisstijlkleur. Alleen functionele cookies,
   dus één informatieve melding met een akkoordknop.
============================================================ */
.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
  padding: 16px 48px; background: var(--blue-footer); color: rgba(255,255,255,0.85);
  border-top: 1px solid rgba(167,139,250,0.35); box-shadow: 0 -6px 24px rgba(10,22,40,0.25);
}
/* Wint van de globale [hidden]-regel, zodat de balk verborgen blijft tot het script hem toont. */
.cookie-notice[hidden] { display: none; }
.cookie-notice-text { font-size: 13px; line-height: 1.6; margin: 0; max-width: 760px; }
.cookie-notice-text a { color: var(--lila-light); text-decoration: underline; text-underline-offset: 2px; }
.cookie-notice-btn {
  flex-shrink: 0; background: var(--lila); color: #fff; border: none;
  padding: 10px 22px; border-radius: 7px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.cookie-notice-btn:hover { background: var(--lila-light); }
@media (max-width: 600px) {
  .cookie-notice { padding: 14px 20px; gap: 12px; }
  .cookie-notice-btn { width: 100%; }
}

/* ============================================================
   JURIDISCHE PROZA (privacyverklaring e.d.)
   Leesbare tekstkolom op de lichte .statement-achtergrond.
============================================================ */
.legal-prose { max-width: 760px; color: var(--text-sec); font-size: 16px; line-height: 1.8; }
.legal-prose h2 { font-size: 22px; font-weight: 700; color: var(--navy-text); margin: 36px 0 12px; letter-spacing: -.3px; }
.legal-prose p { margin-bottom: 16px; }
.legal-prose ul { margin: 0 0 16px; padding-left: 22px; }
.legal-prose li { margin-bottom: 8px; }
.legal-prose li::marker { color: var(--lila); }
.legal-prose a { color: var(--lila); text-decoration: underline; text-underline-offset: 2px; }
.legal-prose strong { color: var(--navy-text); font-weight: 600; }
.legal-updated { margin-top: 32px; font-size: 13px; color: var(--text-muted); }

/* ============================================================
   KENNISARTIKELEN
   De tekstkolom van .legal-prose, met wat een artikel extra nodig heeft: koppen op drie
   niveaus, een beeld, een tabel en het FAQ-blok. De opmaak binnen .artikel-prose komt uit de
   HTML die de redacteur in het veld zet, dus alles wat daar kan voorkomen krijgt hier stijl.
============================================================ */
.artikel-meta { font-size: 13px; color: rgba(255,255,255,0.45); margin-top: 18px; }
.breadcrumb a { color: rgba(255,255,255,0.55); text-decoration: none; }
.breadcrumb a:hover { color: var(--lila-light); }
.artikel-prose h3 { font-size: 17px; font-weight: 700; color: var(--navy-text); margin: 26px 0 10px; }
.artikel-prose ol { margin: 0 0 16px; padding-left: 22px; }
.artikel-prose ol li { margin-bottom: 8px; }
.artikel-prose ol li::marker { color: var(--lila); font-weight: 600; }
.artikel-prose blockquote {
  margin: 24px 0; padding: 14px 20px; border-left: 3px solid var(--lila);
  background: rgba(124,58,237,0.05); border-radius: 0 8px 8px 0; color: var(--navy-text);
}
.artikel-prose blockquote p:last-child { margin-bottom: 0; }
/* Een brede tabel mag zelf schuiven; de pagina hoort niet horizontaal te scrollen. */
.artikel-prose table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 15px; display: block; overflow-x: auto; }
.artikel-prose th, .artikel-prose td { border-bottom: 1px solid var(--border); padding: 10px 12px; text-align: left; vertical-align: top; }
.artikel-prose th { color: var(--navy-text); font-weight: 600; white-space: nowrap; }
.artikel-beeld { display: block; width: 100%; height: auto; border-radius: 10px; margin: 0 0 28px; }
.artikel-faq { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--border); }

/* Overzichtspagina: de artikelen als lijst van kaarten. */
.kennis-lijst { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; max-width: 760px; }
.kennis-link {
  display: block; background: #fff; border: 1px solid var(--border); border-radius: 10px;
  padding: 20px 22px; transition: border-color .2s, transform .2s;
}
.kennis-link:hover { border-color: var(--lila); transform: translateY(-2px); }
.kennis-link:focus-visible { outline: 2px solid var(--lila); outline-offset: 3px; }
.kennis-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--lila); margin-bottom: 6px; }
.kennis-titel { display: block; font-size: 19px; font-weight: 700; color: var(--navy-text); letter-spacing: -.3px; line-height: 1.35; }
.kennis-tekst { display: block; margin-top: 8px; font-size: 15px; line-height: 1.7; color: var(--text-sec); }
.kennis-datum { display: block; margin-top: 12px; font-size: 12px; color: var(--text-muted); }
.kennis-leeg { margin-top: 28px; font-size: 15px; color: var(--text-muted); }

/* ============================================================
   HELPERS
============================================================ */
h1.hero-title { font-size: 38px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; margin-bottom: 20px; color: #fff; }
h1.hero-title em { color: var(--lila-light); font-style: normal; }
h2.section-h { font-size: 30px; font-weight: 700; letter-spacing: -.5px; margin-bottom: 14px; color: #fff; }
p.section-sub { font-size: 15px; color: rgba(255,255,255,0.5); margin-bottom: 36px; line-height: 1.7; }
p.body-text { font-size: 15px; color: rgba(255,255,255,0.6); line-height: 1.8; margin-bottom: 14px; }
p.body-sm { font-size: 13px; color: rgba(255,255,255,0.45); line-height: 1.75; margin-bottom: 12px; }
.light-text { color: var(--navy-text) !important; }
.light-sub { color: var(--text-sec) !important; }
.light-muted { color: var(--text-muted) !important; }

/* ============================================================
   RESPONSIVE — Tablet (≤900px)
============================================================ */
@media (max-width: 900px) {
  .section-pad, .statement, .disciplines, .cyclus, .waarom, .cta-final, .hero { padding-left: 32px; padding-right: 32px; }
  .hero { padding-top: 80px; padding-bottom: 80px; }
  .hero h1 { font-size: 44px; }
  h1.hero-title { font-size: 30px; }
  h2.section-h { font-size: 24px; }
  .grid-2 { grid-template-columns: 1fr; gap: 36px; }
  .statement-cols { grid-template-columns: 1fr; gap: 24px; }
  .disciplines-header { flex-direction: column; align-items: flex-start; gap: 16px; }
  .disciplines-header p { text-align: left; }
  .disc-item { grid-template-columns: 40px 1fr; gap: 20px; }
  .disc-item > div:last-child { grid-column: 2; }
  .cyclus-steps { grid-template-columns: 1fr 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
  .stat { padding: 0 0 24px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  .stat:nth-child(odd) { border-right: 1px solid rgba(255,255,255,0.1); padding-right: 24px; }
  .stat:nth-child(3), .stat:nth-child(4) { border-bottom: none; }
  .stats-strip { padding: 40px 32px; }
  .waarom-item { grid-template-columns: 1fr; gap: 10px; }
  .waarden-grid { grid-template-columns: 1fr 1fr; }
  .platform-grid { grid-template-columns: 1fr; }
  .uc-grid { grid-template-columns: 1fr; }
  .routes-grid { grid-template-columns: 1fr; }
  .steps-5 { grid-template-columns: 1fr 1fr; }
  .steps-4 { grid-template-columns: 1fr 1fr; }
  .cta-btns { justify-content: flex-start; }
  footer { padding: 24px 32px; }
}

/* ============================================================
   RESPONSIVE — Navigatie tussen mobiel en breed beeld
   De menubalk paste alleen boven ongeveer 1200px. Daaronder kon .nav-links niet krimpen:
   items braken over twee regels en "Contact" schoof onder de knop "Plan een gesprek".
   Een laptop met 125% schaling op een 1440-scherm valt precies in dat gat.
   Daarom in twee stappen smaller, en onder 900px helemaal inklappen tot de hamburger.
   Volgorde telt: het blok voor ≤600px staat hierna, zodat dat op een telefoon wint.
============================================================ */
@media (max-width: 1200px) {
  .nav { padding: 18px 28px; }
  .nav-links { gap: 14px; }
  /* Zonder nowrap breekt "BPM-automatisering" binnen het item over twee regels. */
  .nav-links a { font-size: 15px; white-space: nowrap; }
  .nav-cta { margin-left: 20px; padding: 10px 18px; font-size: 15px; white-space: nowrap; }
}
@media (max-width: 1050px) {
  .nav { padding: 16px 20px; }
  .nav-links { gap: 10px; }
  .nav-links a { font-size: 14px; }
  .nav-cta { margin-left: 12px; padding: 9px 14px; font-size: 14px; }
}
@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
/* Blijft het uitklapmenu openstaan terwijl het venster groeit, verberg het dan alsnog. */
@media (min-width: 901px) {
  .nav-mobile.open { display: none; }
}

/* ============================================================
   RESPONSIVE — Mobiel (≤600px)
============================================================ */
@media (max-width: 600px) {
  .nav { padding: 14px 20px; }
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .hero, .statement, .disciplines, .cyclus, .waarom, .cta-final { padding-left: 20px; padding-right: 20px; }
  .stats-strip { padding: 32px 20px; }
  .hero { padding-top: 60px; padding-bottom: 60px; }
  .hero h1 { font-size: 34px; letter-spacing: -1px; }
  .hero h1 br { display: none; }
  h1.hero-title { font-size: 26px; }
  h2.section-h { font-size: 22px; }
  .disc-item { grid-template-columns: 1fr; gap: 12px; }
  .disc-num { display: none; }
  .cyclus-steps, .steps-3, .steps-4, .steps-5, .waarden-grid, .platform-grid, .uc-grid, .routes-grid { grid-template-columns: 1fr; }
  .stats-inner { grid-template-columns: 1fr 1fr; }
  .stat-num { font-size: 30px; }
  .hero-actions, .cta-btns { flex-direction: column; align-items: stretch; }
  .btn-cta, .btn-cta-sec { text-align: center; width: 100%; }
  footer { flex-direction: column; gap: 8px; text-align: center; padding: 20px; }
}
/* ============================================================
   RESPONSIVE — Process Mining hero & Contact grid
============================================================ */
.pm-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 420px;
  padding: 0;
}
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: start;
}
.klanten-rij {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .pm-hero { grid-template-columns: 1fr; }
  .pm-hero > div:last-child { display: none; }
  .pm-hero > div:first-child { padding: 48px 32px; }
  .contact-grid { grid-template-columns: 1fr; gap: 32px; }
  .klanten-rij { gap: 32px; }
}

@media (max-width: 600px) {
  .pm-hero > div:first-child { padding: 40px 20px; }
  .klanten-rij { gap: 24px; }
  .klanten-rij img { max-height: 36px !important; }
}

/* ============================================================
   VACATURES — Overzicht & Detail
============================================================ */

/* Sfeer-fotobalk */
.sfeer-balk { display: grid; grid-template-columns: 2fr 1fr 1fr; height: 300px; overflow: hidden; }
.sfeer-item { position: relative; overflow: hidden; background: #C8DDEF; }
.sfeer-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sfeer-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; color: #5070A0; letter-spacing: 0.5px; }
.sfeer-item:nth-child(2) .sfeer-placeholder { background: #AECCE6; }
.sfeer-item:nth-child(3) .sfeer-placeholder { background: #BFCFE3; }

/* Waarden strip */
.vac-waarden-strip { background: var(--blue); padding: 28px 48px; }
.vac-waarden-rij { display: flex; align-items: center; justify-content: center; gap: 40px; flex-wrap: wrap; }
.vac-waarde { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 600; }
.vac-waarde-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lila-mid); flex-shrink: 0; }

/* Intro grid */
.vac-intro { padding: 72px 48px; background: #fff; }
.vac-intro-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.vac-intro-tekst h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.2; color: var(--navy); margin-bottom: 16px; }
.vac-intro-tekst p { font-size: 15px; color: #5070A0; line-height: 1.8; margin-bottom: 12px; }
.vac-intro-punten, .det-sidebar-facts { display: flex; flex-direction: column; gap: 12px; }
.vac-punt { display: flex; gap: 14px; align-items: flex-start; background: #F7FAFD; border-radius: 10px; padding: 14px 18px; border: 1px solid rgba(23,53,128,0.07); }
.vac-punt-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vac-punt-tekst strong { display: block; font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.vac-punt-tekst span { font-size: 13px; color: #5070A0; line-height: 1.6; }

/* Vacature lijst */
.vac-lijst { background: #0F1E36; padding: 72px 48px; }
.vac-lijst .inner { max-width: 900px; margin: 0 auto; }
.vac-cards, .contact-info-items { display: flex; flex-direction: column; gap: 14px; }
.vac-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 26px 30px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; text-decoration: none; color: inherit; transition: border-color 0.2s, background 0.2s; }
.vac-card:hover { border-color: rgba(124,58,237,0.4); background: rgba(124,58,237,0.04); }
.vac-card-tag { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: var(--lila-mid); background: rgba(124,58,237,0.12); border-radius: 4px; padding: 3px 10px; display: inline-block; margin-bottom: 10px; }
.vac-card h3 { font-size: 19px; font-weight: 700; color: #fff; margin-bottom: 8px; }
.vac-card p { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 1.6; }
.vac-card-meta { display: flex; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.vac-meta-pill { font-size: 12px; color: rgba(255,255,255,0.45); font-weight: 500; display: flex; align-items: center; gap: 6px; }
.vac-meta-pill::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(167,139,250,0.5); display: block; }
.vac-card-arrow { width: 42px; height: 42px; border-radius: 50%; background: rgba(124,58,237,0.1); border: 1px solid rgba(124,58,237,0.2); display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--lila-mid); flex-shrink: 0; transition: background 0.2s, color 0.2s; }
.vac-card:hover .vac-card-arrow { background: var(--lila); color: #fff; }
.vac-geen { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 40px; text-align: center; }
.vac-geen p { font-size: 15px; color: rgba(255,255,255,0.5); line-height: 1.75; }

/* Spontaan solliciteren */
.vac-spontaan { background: var(--navy); padding: 52px 48px; }
.vac-spontaan-grid { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: center; }
.vac-spontaan h3 { font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.vac-spontaan p { font-size: 15px; color: rgba(255,255,255,0.55); line-height: 1.7; }

/* Quote */
.vac-quote { background: var(--light1); padding: 56px 48px; }
.vac-quote-inner { max-width: 680px; margin: 0 auto; text-align: center; }
.vac-quote-inner blockquote { font-size: 21px; font-weight: 700; line-height: 1.5; color: var(--navy); margin-bottom: 18px; font-style: italic; }
.vac-quote-naam { font-size: 14px; font-weight: 700; color: var(--blue); }
.vac-quote-functie { font-size: 13px; color: #5070A0; margin-top: 3px; }

/* ─── VACATURE DETAIL ─── */
.det-breadcrumb { font-size: 12px; color: rgba(255,255,255,0.4); margin-bottom: 18px; display: flex; align-items: center; gap: 8px; }
.det-breadcrumb a { color: rgba(255,255,255,0.4); text-decoration: none; }
.det-breadcrumb a:hover { color: rgba(255,255,255,0.7); }
.det-tag-pill { font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; color: var(--lila-mid); background: rgba(167,139,250,0.15); border-radius: 4px; padding: 4px 12px; display: inline-block; margin-bottom: 16px; }
.det-meta-rij { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.det-meta-item { font-size: 14px; color: rgba(255,255,255,0.6); font-weight: 500; }

.det-content-wrap { max-width: 900px; margin: 0 auto; padding: 60px 48px; display: grid; grid-template-columns: 1fr 290px; gap: 56px; align-items: start; }
.det-main-col { }
.det-sectie { margin-bottom: 40px; }
.det-sectie h2 { font-size: 22px; font-weight: 800; color: var(--navy); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 2px solid var(--light1); }
.det-sectie p { font-size: 15px; color: #3D5070; line-height: 1.8; margin-bottom: 12px; }
.det-sectie ul { list-style: none; padding: 0; }
.det-sectie ul li { font-size: 15px; color: #3D5070; line-height: 1.7; padding: 8px 0 8px 22px; position: relative; border-bottom: 1px solid rgba(23,53,128,0.06); }
.det-sectie ul li:last-child { border-bottom: none; }
.det-sectie ul li::before { content: '→'; position: absolute; left: 0; color: var(--lila); font-size: 13px; top: 10px; }
.det-energie { background: rgba(124,58,237,0.05); border: 1px solid rgba(124,58,237,0.15); border-radius: 12px; padding: 22px 24px; margin: -12px 0 36px; }
.det-energie p { font-size: 15px; color: var(--navy); line-height: 1.75; margin: 0; }
.det-energie strong { color: var(--lila); }

.det-sidebar-col { }
.det-sidebar-card { background: var(--navy); border-radius: 14px; padding: 26px; position: sticky; top: 90px; }
.det-sidebar-card h3 { font-size: 18px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.det-sidebar-sub { font-size: 13px; color: rgba(255,255,255,0.45); margin-bottom: 22px; line-height: 1.6; }
.det-sidebar-divider { border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 18px 0; }
.det-sidebar-fact-label { font-size: 10px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; color: rgba(255,255,255,0.3); margin-bottom: 2px; }
.det-sidebar-fact-val { font-size: 14px; color: rgba(255,255,255,0.8); font-weight: 500; }

/* Responsive */
@media (max-width: 900px) {
  .sfeer-balk { grid-template-columns: 1fr; height: 200px; }
  .sfeer-item:nth-child(2), .sfeer-item:nth-child(3) { display: none; }
  .vac-intro-grid { grid-template-columns: 1fr; gap: 32px; }
  .vac-spontaan-grid { grid-template-columns: 1fr; gap: 20px; }
  .det-content-wrap { grid-template-columns: 1fr; }
  .det-sidebar-col { order: -1; }
  .det-sidebar-card { position: static; }
}
@media (max-width: 600px) {
  .vac-waarden-rij { gap: 20px; }
  .vac-intro, .vac-lijst, .vac-spontaan, .vac-quote { padding-left: 20px; padding-right: 20px; }
  .det-content-wrap { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   HOMEPAGE — classes ter vervanging van inline stijlen
============================================================ */

/* Statement sectie */
.statement-h2 { font-size: 40px; font-weight: 800; line-height: 1.2; letter-spacing: -1px; max-width: 740px; }

/* Disciplines subtext */
/* De header is een flex-rij met maar één kind, dat dus tot de breedte van de h2 krimpt.
   Zonder onderstaande flex-regel heeft een max-width op de <p> geen effect: de ouder is al smaller. */
.disciplines-header > div { flex: 1 1 100%; min-width: 0; }
/* Selector op .disciplines-header omdat die p op max-width 260px en text-align right zet. */
.disciplines-header p.disc-subtext { font-size: 16px; color: rgba(255,255,255,0.9); line-height: 1.9; margin-top: 16px; max-width: 640px; text-align: left; }

/* Generieke sectie-heading (cyclus, waarom) */
.section-h { font-size: 38px; font-weight: 800; letter-spacing: -1px; margin-bottom: 56px; }

/* Cyclus stappen */
.cyclus-step { background: #F1F6FB; border-color: rgba(15,30,54,0.08); }
.cyclus-step.active, .step-lila { background: #EDE0FF; border-color: rgba(124,58,237,0.45); }

/* Klanten sectie */
.klanten-sectie { padding: 64px 48px; background: #fff; border-top: 1px solid rgba(15,30,54,0.07); }
.klanten-label { font-size: 11px; letter-spacing: 2.5px; color: #5070A0; font-weight: 700; text-transform: uppercase; text-align: center; margin-bottom: 44px; }

/* Klant logo's met vaste hoogtes */
.klant-logo { width: auto; object-fit: contain; display: block; }
.klant-logo-sm  { height: 41px; }
.klant-logo-md  { height: 54px; }
.klant-logo-md2 { height: 61px; }
.klant-logo-lg  { height: 70px; }

/* CTA final sectie */
.cta-inner-narrow { max-width: 680px; }
.cta-h2 { font-size: 50px; font-weight: 900; letter-spacing: -2px; margin-bottom: 24px; }
.cta-sub { font-size: 17px; color: rgba(255,255,255,0.5); margin-bottom: 48px; line-height: 1.7; }
.cta-btns-center { justify-content: center; }

/* ============================================================
   VACATURES — classes ter vervanging van inline stijlen
============================================================ */

/* Overzichtspagina */
.vac-lijst-h2 { margin-bottom: 10px; }
.vac-lijst-sub { font-size: 16px; color: rgba(255,255,255,0.5); margin-bottom: 48px; }
.vac-geen-cta { margin-top: 20px; display: inline-block; }

/* Detailpagina */
.hero-inner-wide { max-width: 900px; }
.btn-block { display: block; text-align: center; margin-bottom: 10px; }
.btn-block + .btn-block { margin-bottom: 0; }

/* Responsive aanpassingen voor nieuwe classes */
@media (max-width: 900px) {
  .statement-h2 { font-size: 28px; }
  .section-h { font-size: 28px; margin-bottom: 36px; }
  .cta-h2 { font-size: 34px; }
}
@media (max-width: 600px) {
  .statement-h2 { font-size: 22px; }
  .section-h { font-size: 22px; }
  .cta-h2 { font-size: 26px; }
  .klanten-sectie { padding: 40px 20px; }
}

/* ============================================================
   OVER ONS — classes ter vervanging van inline stijlen
============================================================ */
.hero-pb { padding-bottom: 80px; }

.hero-h1-lg, .hero-h1-xl {
  font-size: 52px; font-weight: 900; line-height: 1.08;
  letter-spacing: -2px; margin-bottom: 24px; color: #fff;
}
.hero-h1-xl { max-width: 780px; }
.hero-sub-wide { max-width: 580px; }
.hero-sub-narrow { max-width: 520px; }
.cyclus-alt { background: var(--light2); }
.waarom-alt { background: var(--light1); }

/* ============================================================
   BPM — classes ter vervanging van inline stijlen
============================================================ */
.body-text-narrow { max-width: 520px; }
.step-light { background: #F0F2F5; border-color: #DDE1E7; }
.step-num-light { color: rgba(15,30,54,0.18); font-size: 48px; }
.step-num-lila  { color: rgba(124,58,237,0.30); font-size: 48px; }
/* Selector op .step erbij: `.step h3` en `.step p` zetten wit met specificiteit (0,1,1)
   en wonnen daardoor van deze klassen op (0,1,0), ongeacht de volgorde hier.
   Zonder die extra .step bleef de tekst wit op de lichte kaarten. */
.step h3.step-h3-dark { color: var(--navy-text); }
.step p.step-p-dark   { color: var(--navy-text); }
/* De oplichtende stap. dex-it.js laat .active door de vijf stappen lopen; de selectors
   staan een niveau hoger dan de -dark regels hierboven, anders winnen die. */
.step { transition: background .4s ease, border-color .4s ease; }
.step.active { background: #EDE0FF; border-color: rgba(124,58,237,0.45); }
.step.active .cyclus-step-num.step-num-light { color: rgba(124,58,237,0.35); }
.step.active h3.step-h3-dark { color: #3B0764; }
.step.active p.step-p-dark   { color: #5B21B6; }
.step h3.step-h3-lila { color: #3B0764; }
.step p.step-p-lila   { color: #5B21B6; }
.disciplines-dark { background: var(--blue-dark); }
.cta-h2-sm { font-size: 36px; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px; }

/* ============================================================
   PROCESS MINING — classes ter vervanging van inline stijlen
============================================================ */
.pm-hero-col { padding: 80px 48px; display: flex; flex-direction: column; justify-content: center; }
.pm-hero-sub { max-width: 420px; }
.pm-hero-h2  { font-size: 52px; font-weight: 800; letter-spacing: -2px; margin-bottom: 36px; }
.hero-label-pill { font-size: 11px; letter-spacing: 2px; color: var(--lila-light); font-weight: 700; text-transform: uppercase; margin-bottom: 18px; display: inline-block; background: rgba(124,58,237,0.15); border: 1px solid rgba(196,181,253,0.3); padding: 5px 14px; border-radius: 20px; }
.pm-graaf { width: 100%; max-width: 340px; }
.pm-graaf-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase;
                  color: rgba(255,255,255,0.35); margin-bottom: 14px; }
.pm-graaf-svg { width: 100%; height: auto; display: block; font-family: inherit; }
.pm-node-tekst { font-size: 13px; font-weight: 600; fill: rgba(255,255,255,0.85); }
.pm-edge-tekst { font-size: 10px; fill: rgba(255,255,255,0.4); }
.pm-edge-tekst.pm-afwijking { fill: #F87171; }
/* Blauwdruklijnen op de achtergrond, net aanwezig genoeg om diepte te geven. */
.pm-raster line { stroke: rgba(255,255,255,0.06); stroke-width: 1; }
/* Dezelfde kleur als de hero ernaast, zodat de twee kolommen één doorlopend vlak vormen. */
.pm-hero-visual { background: var(--blue-dark); display: flex; align-items: center; justify-content: center; padding: 40px; overflow: hidden; }
.step-glass { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.25); }
.step-h3-lg { font-size: 28px; letter-spacing: -0.5px; }

/* ============================================================
   CONTACT — classes ter vervanging van inline stijlen
============================================================ */
.statement-pt { padding-top: 72px; }
.form-sub { font-size: 14px; margin-bottom: 28px; }
.contact-info-col { display: flex; flex-direction: column; gap: 16px; }
.section-eyebrow-mb { margin-bottom: 20px; }
.contact-info-card { background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 20px; }
.contact-info-item { display: flex; gap: 12px; align-items: center; }
.contact-info-icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(124,58,237,0.08); border: 1px solid rgba(124,58,237,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; }
.contact-info-label { font-size: 11px; color: var(--text-muted); margin: 0 0 2px; }
.contact-info-link { font-size: 14px; color: var(--lila); font-weight: 500; text-decoration: none; }
.contact-info-link:hover { text-decoration: underline; }

/* ============================================================
   VACATURES — vac-card-body (hernoemd van vac-card-content)
============================================================ */
.vac-card-body { }
.det-sidebar-fact { }

/* Responsive for new classes */
@media (max-width: 600px) {
  .hero-h1-lg, .hero-h1-lg, .hero-h1-xl {
  font-size: 52px; font-weight: 900; line-height: 1.08;
  letter-spacing: -2px; margin-bottom: 24px; color: #fff;
}
.hero-h1-xl { max-width: 780px; }
  .pm-hero-h2 { font-size: 34px; }
  .pm-hero-col { padding: 40px 20px; }
  .step-num-light, .step-num-lila { font-size: 32px; }
}