/* ============================================================================
 * ONE Risk Advisory — Full inline CSS uit preview-v2.html (extracted)
 *
 * Bevat ALLE component-styling die in preview-v2.html inline staat:
 * .hero, .svc, .svc__*, .trust, .trust__*, .spread,
 * .pull, .cases, .careers-teaser, .why, .cta, .diag, .primary-nav,
 * .submenu, etc. — site-brede styling voor klassieke PHP-templates.
 *
 * GENERATED van preview-v2.html. Bij wijziging: regenereer via
 * scripts/extract-preview-css.sh.
 * ========================================================================== */

/* ============================================================
   Preview v2 — Homepage canonical · Brandbook v3.1 Continuum
   Motion-hero (hero-amsterdam.mp4) als signature treatment, met
   prefers-reduced-motion fallback (video opacity 0.45 + statisch).
   Fonts: tokens (--font-display Inter Tight, --font-body Inter, --font-mono JetBrains Mono)
   Colors: tokens only — petrol-900, white, yellow-500, greys
   Layers: white default, petrol via data-layer="petrol"
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* Skip-link — verborgen tot keyboard-focus. Zonder deze regel rendert de
 * <a class="skip-link"> als normale inline-link bovenaan body, duwt content
 * omlaag en toont een witte strip (body bg) boven het logo. */
.skip-link {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--color-petrol-900);
  color: var(--color-yellow-500);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--color-yellow-500);
  transition: top 200ms ease;
}
.skip-link:focus {
  top: 8px;
  outline: 2px solid var(--color-yellow-500);
  outline-offset: 2px;
}

/* Layer activation — petrol-secties via data-attribute (skill-rule) */
[data-layer="petrol"] {
  background: var(--color-bg-base);
  color: var(--color-text-primary);
}

.container { max-width: 1440px; margin: 0 auto; padding: 0 var(--space-2xl); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex; align-items: center; gap: var(--space-sm);
}
.eyebrow .ser { color: var(--color-accent); }
[data-layer="petrol"] .eyebrow .ser { color: var(--color-yellow-500); }

.btn {
  font-family: var(--font-display);
  font-size: var(--text-base); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 14px 26px;
  border-radius: var(--radius-full);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all var(--duration-base) var(--ease-standard);
  border: 1px solid transparent;
  cursor: pointer;
}
.btn--solid {
  background: var(--color-text-primary);
  color: var(--color-bg-base);
  border-color: var(--color-text-primary);
}
.btn--solid:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-petrol-900); }
.btn--accent {
  background: var(--color-accent);
  color: var(--color-petrol-900);
  border-color: var(--color-accent);
}
.btn--accent:hover { background: var(--color-bg-base); color: var(--color-text-primary); }
.btn--ghost {
  background: transparent;
  color: var(--color-text-primary);
  border-color: var(--color-border-strong);
}
.btn--ghost:hover { background: var(--color-text-primary); color: var(--color-bg-base); }
.btn--text {
  background: transparent;
  color: var(--color-text-primary);
  border: 0; border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: 14px 0;
}
.btn--text:hover { border-bottom-color: var(--color-text-primary); }

/* ============================================================
   HEADER
   ============================================================ */
/* HEADER — SOLID GREY-700 (#465359) single-state (sessie 23 user-decision):
 * Vervangt frosted-petrol uit sessie 18. Reden: frosted-petrol-over-wit was
 * onleesbaar (logos achter header schemerden door). Solid huiskleur-grijs
 * geeft rust en hoge tekst-contrast op elke achtergrond. Logo + nav blijven
 * in light-variant. body.is-scrolled wordt nog steeds niet gebruikt voor
 * styling, geen wit-bg-switch. Consistent over alle URLs. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  background: var(--color-petrol-900);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transition: box-shadow var(--duration-slow) var(--ease-standard);
}
.site-header__inner {
  max-width: 1440px; margin: 0 auto;
  /* Compactere padding na user-feedback 100% laptop-zoom (dev was 75%) */
  padding: 12px var(--space-xl);
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: var(--space-xl);
}
.site-logo img {
  width: 132px; max-width: 132px; height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.30));
}
/* Always-petrol: altijd de white-on-dark logo-variant. */
.site-logo .logo--white { display: block; }
.site-logo .logo--dark { display: none; }

/* Direct-child selector zodat alleen de top-level nav-ul flex-horizontaal wordt,
 * niet de geneste .submenu ul (die moet vertikaal stapelen). */
/* Mobile-nav hamburger button — verborgen op desktop, getoond op < 900px. */
.nav-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px; width: 44px; height: 44px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 5px;
}
.nav-toggle__bar {
  display: block; width: 22px; height: 2px;
  background: #fff;
  transition: transform 200ms ease, opacity 200ms ease;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.primary-nav > ul { list-style: none; margin: 0; padding: 0 0 0 var(--space-2xl); display: flex; gap: var(--space-lg); align-items: center; }
.primary-nav .submenu { list-style: none; }
.primary-nav a {
  font-family: var(--font-display);
  /* Groter voor betere balans met het logo (user-feedback 2026-05-30). */
  font-size: clamp(20px, 1.45vw, 23px);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.96);
  text-shadow: 0 1px 6px rgba(0,0,0,0.32);
  text-decoration: none;
  position: relative;
  padding: 8px 0;
  transition: color var(--duration-base) var(--ease-standard);
}
.primary-nav a:hover { color: var(--color-yellow-500); }
.primary-nav a::after {
  content:""; position: absolute; left: 0; right: 100%; bottom: 4px;
  height: 1px; background: var(--color-yellow-500);
  transition: right var(--duration-slow) var(--ease-standard);
}
.primary-nav a:hover::after { right: 0; }
.primary-nav .has-children { position: relative; }
/* Inklap-pijl voor submenu's bestaat alleen op mobiel (JS injecteert 'm); op
   desktop verborgen — daar opent het submenu via hover. */
.submenu-toggle { display: none; }
/* SUBMENU — brand-signature treatment per Brandbook signature-elements.md:
 * top-bar mustard accent (pattern #1), mono-numerals (#7), dashed-divider (#4),
 * hover-lift met left-indicator (#3). Sessie 23: solid grey-700 (was frosted
 * petrol) — consistent met de .site-header solid-grey beslissing. */
.primary-nav .submenu {
  position: absolute; top: calc(100% + 14px); left: -20px;
  display: block;
  background: var(--color-petrol-900);
  border: 1px solid rgba(255,255,255,0.08);
  border-top: 2px solid var(--color-accent);  /* signature top-bar */
  padding: 6px 0; min-width: 260px;
  list-style: none; margin: 0;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 220ms cubic-bezier(.2,0,0,1), visibility 220ms, transform 220ms cubic-bezier(.2,0,0,1);
  box-shadow: 0 24px 56px rgba(0,0,0,0.42);
}
.primary-nav .submenu li { display: block; }
.primary-nav .submenu li + li {
  border-top: 1px dashed rgba(255,255,255,0.08);  /* signature dashed-divider */
}
.primary-nav .has-children:hover .submenu,
.primary-nav .has-children:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav .submenu a {
  display: grid;
  grid-template-columns: 1fr 16px;
  align-items: baseline;
  gap: 12px;
  padding: 14px 22px;
  font-size: var(--text-lg);
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
  text-shadow: none;
  position: relative;
  transition: padding 200ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1);
}
.primary-nav .submenu a::before {
  /* Mono-numeral verborgen: de huidige nav-items hebben geen data-num, dus de
     lege kolom veroorzaakte een te grote inspring. Tekst lijnt nu links uit. */
  display: none;
}
.primary-nav .submenu a::after {
  /* Override de top-nav underline-hover, gebruik arrow ipv */
  display: block !important;
  position: static; right: auto; bottom: auto; left: auto;
  content: "→";
  height: auto; background: transparent;
  font-family: var(--font-mono); font-size: 14px;
  color: rgba(255,255,255,0.32);
  transform: translateX(0);
  transition: transform 200ms cubic-bezier(.2,0,0,1), color 180ms cubic-bezier(.2,0,0,1);
}
.primary-nav .submenu a:hover {
  /* Signature hover-lift (#3): subtle padding-shift + accent left-bar */
  padding-left: 28px;
  color: #FFFFFF;
  background: linear-gradient(to right, rgba(245,183,9,0.10), transparent 60%);
}
.primary-nav .submenu a:hover::before { color: var(--color-yellow-500); }
.primary-nav .submenu a:hover::after { transform: translateX(4px); color: var(--color-accent); }
/* Left-edge mustard indicator op hover */
.primary-nav .submenu li { position: relative; }
.primary-nav .submenu li::before {
  content: ""; position: absolute; top: 14px; bottom: 14px; left: 0;
  width: 2px; background: var(--color-accent);
  transform: scaleY(0); transform-origin: center;
  transition: transform 200ms cubic-bezier(.2,0,0,1);
}
.primary-nav .submenu li:hover::before { transform: scaleY(1); }

/* On scroll: submenu past zich aan naar witte-layer petrol-elevated tint */





.lang { display: inline-flex; align-items: center; gap: 12px; }
.lang a { display: inline-flex; padding: 4px; border-radius: 3px; line-height: 0; opacity: 0.70; transition: opacity var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); }
.lang a:hover { opacity: 1; }
.lang a.is-active { opacity: 1; box-shadow: 0 0 0 1px var(--color-yellow-500); }
/* Vlaggen iets groter (was 26x18 → 32x22) voor readability/scanability naast de grotere nav-font */
.lang a svg { width: 32px; height: 22px; display: block; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,0.30); }
/* Header CTA button — invert over hero */
.site-header .btn--solid {
  background: #FFFFFF;
  color: var(--color-petrol-900);
  border-color: #FFFFFF;
  padding: 11px 22px;
  font-size: var(--text-sm);
}
.site-header .btn--solid:hover { background: var(--color-yellow-500); border-color: var(--color-yellow-500); color: var(--color-petrol-900); }

/* ============================================================
   1. HERO — petrol layer, editorial split, orbital SVG (no video)
   ============================================================ */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(80px, 12vw, 160px) var(--space-2xl) clamp(64px, 10vw, 120px);
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.1) brightness(0.5);
  opacity: 0.32;
}
.hero::before {
  content:""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(80% 60% at 88% 22%, rgba(245, 183, 9, 0.12), transparent 60%),
    radial-gradient(60% 80% at 0% 100%, rgba(245, 183, 9, 0.08), transparent 55%);
}
.hero__grid {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 30% 40%, black 0%, transparent 80%);
}
.hero__inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: var(--space-5xl); align-items: center;
}
.hero__meta {
  display: flex; gap: var(--space-lg); align-items: center;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--space-3xl);
}
.hero__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent); box-shadow: 0 0 16px var(--color-accent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.85); } }

.hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(48px, 7vw, 112px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--color-text-primary);
}
.hero__title em {
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
}
.hero__title .punct { color: var(--color-accent); }

.hero__lead {
  font-family: var(--font-body);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 60ch;
  margin: var(--space-2xl) 0 var(--space-2xl);
}

.hero__ctas { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }

.hero__stats {
  margin-top: var(--space-4xl);
  display: grid; grid-template-columns: repeat(4, auto);
  gap: var(--space-3xl);
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: var(--space-xl);
}
.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px); line-height: 1;
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  display: block;
  letter-spacing: -0.02em;
}
.hero__stat-num small { font-size: 0.5em; color: var(--color-accent); margin-left: 4px; }
.hero__stat-lbl {
  margin-top: var(--space-sm);
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
  display: block;
}

/* Right: orbital + credentials-card stacked vertically, beide horizontaal
   gecentreerd t.o.v. elkaar (zelfde max-width, align-items:center), en het
   hele blok iets naar links via padding-right op de visual-cel. */
.hero__visual {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: var(--space-2xl);
  min-height: 520px;
  padding-right: var(--space-3xl);
}
.orbit {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex: 1; min-height: 460px;
  width: 100%;
}
.orbit svg { width: 100%; max-width: 520px; height: auto; overflow: visible; }
.orbit .ring { fill: none; stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.orbit .ring--accent { stroke: var(--color-accent); stroke-dasharray: 2 6; opacity: 0.55; }
.orbit .node { fill: var(--color-text-primary); }
.orbit .node--accent { fill: var(--color-accent); }
.orbit .node-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  fill: rgba(255,255,255,0.55);
}
.orbit .core-tx {
  font-family: var(--font-display);
  font-size: 32px; font-weight: var(--weight-semibold);
  fill: var(--color-text-primary);
  text-anchor: middle;
  letter-spacing: 0.02em;
}
.orbit .ring-spin { transform-origin: 50% 50%; animation: spin 60s linear infinite; }
.orbit .ring-spin--rev { animation-direction: reverse; animation-duration: 90s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Erkenningen-card — vervangt de eerdere live-feed (geen SaaS-feel).
   Statisch, professioneel; toont toetsingskaders en team-certificeringen. */
.creds {
  position: relative;
  width: 100%; max-width: 520px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  padding: var(--space-xl) var(--space-2xl);
}
.creds__title {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-md);
}
.creds__row {
  display: grid; grid-template-columns: 116px 1fr;
  gap: var(--space-md);
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,0.10);
  font-family: var(--font-mono); font-size: var(--text-xs); line-height: 1.55;
}
.creds__row:first-of-type { border-top: 0; }
.creds__row dt {
  margin: 0;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.creds__row dd {
  margin: 0;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
}
.creds__row dd em { color: var(--color-accent); font-style: normal; }

/* Reveal-on-load */
.reveal { opacity: 0; transform: translateY(18px); animation: rise 1100ms var(--ease-standard) forwards; }
.reveal-1 { animation-delay: 100ms; }
.reveal-2 { animation-delay: 240ms; }
.reveal-3 { animation-delay: 380ms; }
.reveal-4 { animation-delay: 520ms; }
.reveal-5 { animation-delay: 660ms; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; animation: none; }
  .ring-spin { animation: none; }
  .hero__dot { animation: none; }
}

/* ============================================================
   1b. HERO — motion treatment (video bg, single column)
   ============================================================ */
.hero--motion {
  min-height: 100vh;
  display: flex; align-items: center;
  /* Geen horizontale padding op de sectie — video moet full-bleed lopen
   * tot de viewport-randen. Padding zit in .hero__inner zodat tekst-content
   * exact dezelfde inset heeft als de header (zie .site-header__inner). */
  padding: 110px 0 70px;
}
.hero__video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Tuned voor Amsterdam-canal daglight (hero-amsterdam.mp4): brighter dan
   * lobby-tuning, lichte desaturatie voor sobere boardroom-look, contrast-bump
   * voor scherpere canal-architectuur. */
  filter: brightness(0.78) saturate(0.92) contrast(1.04);
}
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* Gradient: linker-kant donkerder achter de tekst, rechts open zodat de
     * canal-architectuur zichtbaar blijft. Hoek 105deg vangt het diagonale
     * pad van een typische drone-pan. */
    linear-gradient(105deg, rgba(31,58,68,0.78) 0%, rgba(31,58,68,0.52) 45%, rgba(31,58,68,0.28) 70%, rgba(31,58,68,0.46) 100%),
    /* Subtiele mustard-accent vignet rechtsboven */
    radial-gradient(80% 60% at 88% 18%, rgba(245,183,9,0.10), transparent 60%);
}
.hero--motion .hero__grid { z-index: 1; }
.hero--motion .continuum-bols { z-index: 1; }
.hero--motion .hero__inner {
  /* EXACT zelfde recipe als .site-header__inner — display:block ipv grid,
   * margin:0 auto voor centering, padding-left = var(--space-2xl) zodat
   * content-start exact onder het logo zit. !important om base-rule
   * `display: grid; grid-template-columns: 1.1fr 1fr; align-items: center`
   * volledig te neutraliseren. */
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 0 var(--space-2xl) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  align-items: initial !important;
}
.hero--motion .hero__inner > div {
  margin: 0; padding: 0;
}
.hero--motion .hero__meta { margin-bottom: var(--space-lg); color: rgba(255,255,255,0.78); }
.hero--motion .hero__title {
  /* Groter font per Hans-review: van clamp(44/6.4vw/96) → clamp(56/8vw/132).
   * Behoud line-height 1.02 voor compacte stelling. */
  font-size: clamp(56px, 8vw, 132px);
  line-height: 1.00;
  font-weight: var(--weight-semibold);
  max-width: 22ch;
  text-wrap: balance;
  text-shadow: 0 2px 24px rgba(0,0,0,0.32);
  color: #FFFFFF;
}
.hero--motion .hero__title em { color: var(--color-yellow-500); }
.hero--motion .hero__title .punct { color: var(--color-yellow-500); }
.hero--motion .hero__lead {
  color: rgba(255,255,255,0.90);
  /* Breder per Hans-review: van 56ch → 88ch zodat de lead over ~3 regels loopt
   * ipv 5. Tekst-grootte iets opgehoogd voor balans met de grotere titel. */
  max-width: 88ch;
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: 1.55;
  margin: var(--space-xl) 0 var(--space-2xl);
  text-shadow: 0 1px 12px rgba(0,0,0,0.30);
}
.hero--motion .hero__stats {
  margin-top: var(--space-2xl);
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2xl);
  /* Verwijder max-width zodat de 4 stats over de volle hero-breedte
   * verdeeld worden ipv geclusterd-links. Voorkomt ook overlap met
   * de centrale scroll-cue (Europa-stat schuift nu naar de rechter
   * rand, ver van de center-positioned SCROLL). */
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding-top: var(--space-xl);
}
.hero--motion .hero__stat-num {
  /* Iets groter (was clamp 32/3.4vw/44 → clamp 36/4vw/56) voor balans
   * met de grotere hero-titel. */
  font-size: clamp(36px, 4vw, 56px);
  font-weight: var(--weight-semibold);
  text-shadow: 0 1px 12px rgba(0,0,0,0.32);
}
.hero--motion .hero__stat-num small {
  color: var(--color-yellow-500);
  font-weight: var(--weight-semibold);
  margin-left: 2px;
  vertical-align: top;
  font-size: 0.55em;
}
.hero--motion .hero__stat-lbl {
  color: rgba(255,255,255,0.72);
  /* Iets groter (was 10px → 12px) voor readability. */
  font-size: 12px;
  letter-spacing: 0.18em;
  line-height: 1.4;
}

/* Scroll-cue */
.hero__scroll {
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.62), rgba(255,255,255,0));
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 1px; height: 50%;
  background: var(--color-yellow-500);
  animation: scrollDrop 2.4s ease-in-out infinite;
}
@keyframes scrollDrop {
  0% { top: -50%; opacity: 0; }
  30% { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line::after { animation: none; }
  .hero__video { opacity: 0.45; }
}
@media (max-width: 960px) {
  /* 960 = zelfde breakpoint waar de desktop-nav verdwijnt (regel ~1808), zodat de
     hamburger meteen verschijnt en er geen dode zone 901–960px ontstaat. */
  .hero--motion .hero__stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); max-width: none; }
  .hero--motion .hero__stat-num { font-size: clamp(28px, 7vw, 36px); }

  /* Mobile-nav: hamburger + compact dropdown-panel met INKLAPBARE submenu's.
     (Eerder stonden alle submenu's open = lang "blauw vlak"; nu dicht met een
     pijl-knop per item, zoals de live Astra-site. JS injecteert .submenu-toggle.) */
  .nav-toggle { display: inline-flex; }
  .site-header__inner { grid-template-columns: auto 1fr auto; gap: var(--space-md); padding: 10px var(--space-lg); }
  .site-header__inner > .btn { display: none; }
  .primary-nav {
    position: fixed; top: 60px; left: 0; right: 0;
    max-height: calc(100vh - 60px); overflow-y: auto;
    background: var(--color-petrol-900);
    padding: var(--space-sm) var(--space-lg) var(--space-lg);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.34);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 90;
  }
  /* Gesloten = display:none (leftover-regels); is-open zet display:block
     (specificiteit 0,2,0 wint) zodat het panel echt opent. */
  .primary-nav.is-open { display: block; }
  .primary-nav > ul { flex-direction: column; gap: 0; align-items: stretch; padding: 0; }
  .primary-nav > ul > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
  .primary-nav > ul > li:last-child { border-bottom: 0; }
  .primary-nav > ul > li > a { font-size: 18px; padding: 15px 0; display: block; }

  /* Parent-rij: link links, inklap-pijl rechts; .submenu wrapt naar nieuwe regel. */
  .primary-nav .has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav .has-children > a { flex: 1 1 auto; }
  .submenu-toggle {
    flex: 0 0 auto; width: 48px; height: 52px; margin: 0; padding: 0;
    background: transparent; border: 0; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .submenu-toggle::before {
    content: ""; width: 9px; height: 9px; margin-top: -3px;
    border-right: 2px solid rgba(255, 255, 255, 0.7);
    border-bottom: 2px solid rgba(255, 255, 255, 0.7);
    transform: rotate(45deg); transition: transform .25s ease;
  }
  .has-children.is-expanded .submenu-toggle::before { transform: rotate(-135deg); margin-top: 3px; }

  /* Submenu: standaard dicht, klapt open bij .is-expanded (accordion). */
  .primary-nav .submenu {
    position: static; flex-basis: 100%;
    opacity: 1; visibility: visible; transform: none;
    background: transparent; border: 0; box-shadow: none; min-width: 0;
    padding: 0; margin: 0;
    max-height: 0; overflow: hidden; transition: max-height .28s ease;
  }
  .has-children.is-expanded .submenu { max-height: 300px; }
  .primary-nav .submenu li + li { border: 0; }
  .primary-nav .submenu a {
    font-size: 15px; padding: 11px 0 11px var(--space-md);
    color: rgba(255, 255, 255, 0.74); display: block; grid-template-columns: 1fr;
  }
  .primary-nav .submenu li:last-child a { padding-bottom: var(--space-md); }
  .primary-nav .submenu a::before, .primary-nav .submenu a::after { display: none !important; }
  body.menu-open { overflow: hidden; }
}

/* Hide page-padding on body to use full-bleed motion-hero */
body { padding-top: 0 !important; }

/* ============================================================
   2. TRUST — logo-grid, white layer
   ============================================================ */
.trust {
  padding: calc(var(--space-4xl) * 0.75) var(--space-2xl) var(--space-4xl);
  border-bottom: 1px solid var(--color-border-default);
}
.trust__accent { color: var(--color-accent); }
.trust__inner { max-width: 1440px; margin: 0 auto; }
.trust__h {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-xl); align-items: end;
  margin-bottom: var(--space-3xl);
}
.trust__lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.trust__lbl em {
  display: block; margin-top: var(--space-md);
  font-family: var(--font-display); font-style: normal;
  font-weight: var(--weight-medium);
  font-size: clamp(22px, 2.4vw, 36px);
  color: var(--color-text-primary);
  letter-spacing: -0.015em; text-transform: none;
  line-height: var(--leading-tight);
  max-width: 28ch;
}
.trust__meta {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted); text-align: right;
}
.trust__meta em { color: var(--color-text-primary); font-style: normal; font-weight: var(--weight-semibold); }

/* Ticker-tape: twee rijen die tegen elkaar in scrollen. Vaste pixel-breedte
 * per cell zorgt dat de track stabiel rendert (percentage-flex-basis bleek
 * onvoorspelbaar in deze container-context). Rij 1 LTR, rij 2 RTL. */
.trust__ticker {
  border-style: solid;
  border-color: var(--color-accent);
  border-width: 4px 2px;
  box-shadow:
    0 -6px 18px -4px color-mix(in srgb, var(--color-accent) 60%, transparent),
    0  6px 18px -4px color-mix(in srgb, var(--color-accent) 60%, transparent);
  background: var(--color-bg-base);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  --trust-fade: 72px;
  --trust-cell-w: 200px;
  --trust-cell-h: 150px;
}
/* Logo's lossen zacht op tegen de witte band aan de randen (geen mask meer naar
   petrol, zodat het gele kader strak blijft). */
.trust__ticker::before,
.trust__ticker::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: var(--trust-fade); z-index: 3; pointer-events: none;
}
.trust__ticker::before { left: 0; background: linear-gradient(to right, var(--color-white), transparent); }
.trust__ticker::after  { right: 0; background: linear-gradient(to left, var(--color-white), transparent); }
.trust__row {
  display: flex;
  background: var(--color-bg-base);
  overflow: hidden;
  border-bottom: 2px solid var(--color-accent);
}
.trust__row:last-child { border-bottom: 0; }
.trust__row:hover .trust__track { animation-play-state: paused; }

.trust__track {
  display: flex;
  flex: 0 0 auto;
  animation: trust-scroll var(--trust-duration, 60s) linear infinite;
  will-change: transform;
}
.trust__row--ltr .trust__track { animation-name: trust-scroll-ltr; }
.trust__row--rtl .trust__track { animation-name: trust-scroll-rtl; }

@keyframes trust-scroll-ltr { from { transform: translateX(-50%); } to   { transform: translateX(0); } }
@keyframes trust-scroll-rtl { from { transform: translateX(0); }     to   { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .trust__track { animation: none; }
  .trust__ticker {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

.trust__cell {
  flex: 0 0 var(--trust-cell-w);
  height: var(--trust-cell-h);
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-lg);
  position: relative;
  border-right: 2px solid var(--color-accent);
  transition: background var(--duration-base) var(--ease-standard), filter var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
  filter: grayscale(1);
  opacity: 0.78;
}
.trust__cell:hover { filter: grayscale(0); opacity: 1; background: var(--color-bg-subtle); }
.trust__cell img { max-width: 100%; max-height: 100px; width: auto; height: auto; object-fit: contain; }

/* Per-logo size-overrides — geconsolideerd uit sessie 18-20 logo-tuning.
   Default = 100px; portrait/tall emblems mogen hoger, brede wordmarks lager. */

/* Tall emblems / portrait shields — tot 115-130px */
.trust__cell img[src*="aalberts"]             { max-height: 115px; }
.trust__cell img[src*="alliander"]            { max-height: 115px; }
/* Radboud-PNG heeft 3.1:1 ratio + niet-transparante witte achtergrond.
   `mix-blend-mode: multiply` maakt het wit visueel onzichtbaar tegen de
   witte trust-cel. Vervang door transparante PNG en haal mix-blend weg
   zodra een betere asset is aangeleverd. */
.trust__cell img[src*="radboud"]              { max-height: 85px; max-width: 100%; mix-blend-mode: multiply; }
.trust__cell img[src*="almarai"]              { max-height: 115px; max-width: 95%; }
.trust__cell img[src*="arab-national-bank"]   { max-height: 115px; max-width: 95%; }
.trust__cell img[src*="saudi-investment-bank"] { max-height: 115px; max-width: 95%; }
.trust__cell img[src*="audit-vlaanderen"]     { max-height: 95px; }
.trust__cell img[src*="saudi-energy"]         { max-height: 105px; max-width: 95%; }
.trust__cell img[src*="wtco"]                 { max-height: 130px; max-width: 100%; }
.trust__cell img[src*="euroclear"]            { max-height: 105px; }
.trust__cell img[src*="postnl"]               { max-height: 110px; }
.trust__cell img[src*="amsterdam-umc"]        { max-height: 105px; }
.trust__cell img[src*="schiphol"]             { max-height: 100px; }

/* Mid-tier — 80-90px (wide wordmarks) */
.trust__cell img[src*="ns.jpg"]               { max-height: 88px; }
.trust__cell img[src*="ret.png"]              { max-height: 82px; }
.trust__cell img[src*="mn.png"]               { max-height: 86px; }
.trust__cell img[src*="nupco"]                { max-height: 90px; }
.trust__cell img[src*="tennet"]               { max-height: 88px; max-width: 96%; }
.trust__cell img[src*="mumc"]                 { max-height: 86px; }
.trust__cell img[src*="prosus"]               { max-height: 84px; }
.trust__cell img[src*="caceis"]               { max-height: 85px; }
.trust__cell img[src*="erasmus"]              { max-height: 84px; }
.trust__cell img[src*="apg"]                  { max-height: 82px; }
.trust__cell img[src*="afm"]                  { max-height: 88px; }
.trust__cell img[src*="adyen"]                { max-height: 80px; }
.trust__cell img[src*="action"]               { max-height: 80px; }
.trust__cell img[src*="ahold-delhaize"]       { max-height: 80px; }
.trust__cell img[src*="arcadis"]              { max-height: 82px; }
.trust__cell img[src*="booking"]              { max-height: 80px; }
.trust__cell img[src*="deloitte"]             { max-height: 78px; }
.trust__cell img[src*="heineken"]             { max-height: 80px; }
.trust__cell img[src*="magnum"]               { max-height: 88px; }
.trust__cell img[src*="philips"]              { max-height: 78px; }
.trust__cell img[src*="achmea"]               { max-height: 80px; }
.trust__cell img[src*="athora"]               { max-height: 82px; }
.trust__cell img[src*="quooker"]              { max-height: 78px; }
.trust__cell img[src*="salland"]              { max-height: 80px; }
.trust__cell img[src*="signify"]              { max-height: 70px; }
.trust__cell img[src*="enexis"]               { max-height: 80px; max-width: 95%; }
.trust__cell img[src*="nederlandse-loterij"]  { max-height: 72px; max-width: 95%; }
.trust__cell img[src*="pggm"]                 { max-height: 82px; }
.trust__cell img[src*="blauwtrust"]           { max-height: 80px; }
.trust__cell img[src*="mollie"]               { max-height: 70px; }
.trust__cell img[src*="nyenrode"]             { max-height: 80px; }
.trust__cell img[src*="stc"]                  { max-height: 82px; }

@media (max-width: 900px) {
  .trust__ticker { --trust-cell-w: 160px; --trust-cell-h: 120px; }
  .trust__cell img { max-height: 70px; }
}

/* Cell-modifier voor logo's die op een lichte achtergrond niet leesbaar zijn
   (bv. wit-op-transparant). Render-treatment via CSS — asset blijft origineel. */
.trust__cell--dark img { filter: brightness(0); }
.trust__cell--dark { filter: none; opacity: 1; }
.trust__cell--dark:hover img { filter: brightness(0); }

/* Typografische fallback voor wanneer ../assets/clients/<slug>.svg ontbreekt */
.trust__wordmark {
  display: inline-flex; flex-direction: column; align-items: center;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-lg);
  letter-spacing: -0.015em;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.trust__wordmark small {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.22em;
  color: var(--color-text-muted); margin-top: 6px; text-transform: uppercase;
  font-weight: var(--weight-regular);
}

/* ============================================================
   3. SERVICES — 3 pijlers, white layer, 3-col grid
   ============================================================ */
.svc {
  padding: var(--space-4xl) var(--space-2xl);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* Atmospheric grid + subtle gradient mesh, brandbook tokens */
.svc::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, var(--color-border-default) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border-default) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.3;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 100%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 100%, black 0%, transparent 75%);
}
.svc::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 40% at 80% 20%, rgba(245, 183, 9, 0.06), transparent 60%),
    radial-gradient(40% 50% at 10% 60%, rgba(10,42,51,0.04), transparent 60%);
}
.svc__inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 1; }
.svc__h {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-4xl); align-items: end;
  margin-bottom: var(--space-4xl);
}
.svc__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  margin: var(--space-md) 0 0;
  color: var(--color-text-primary);
}
.svc__title em { color: var(--color-accent); font-style: italic; }
.svc__intro {
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-width: 50ch;
  margin: 0;
}
.svc__intro em { color: var(--color-text-primary); font-style: italic; }

.svc__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--color-border-default);
  border: 1px solid var(--color-border-default);
}
@media (max-width: 1280px) { .svc__grid { grid-template-columns: repeat(2, 1fr); } }
.svc__card {
  background: var(--color-bg-base);
  padding: 0;
  position: relative;
  text-decoration: none;
  color: var(--color-text-primary);
  display: flex; flex-direction: column;
  min-height: 720px;
  transition: background var(--duration-base) var(--ease-standard);
  isolation: isolate;
  overflow: hidden;
}
.svc__card::before {
  content:""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 50% 100%, rgba(245,183,9,0.10), transparent 70%);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-standard);
}
.svc__card:hover::before { opacity: 1; }

/* Card body content wrapper (under illustration) */
.svc__inner-card {
  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
  display: flex; flex-direction: column;
  flex: 1;
}

/* Illustration area — top of card, themed SVG per pijler */
.svc__illustration {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--color-petrol-900);
  overflow: hidden;
  border-bottom: 1px solid var(--color-border-default);
}
.svc__illustration svg,
.svc__illustration img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}
/* Rustig, sophisticated zoom-effect bij hover op de foto-pijlerkaarten
 * (Internal Audit / Risk Management, homepage + /diensten/). */
.svc__illustration img {
  transition: transform 1400ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.svc__card:hover .svc__illustration img,
.svc__card:focus-visible .svc__illustration img {
  transform: scale(1.06);
}
@media (prefers-reduced-motion: reduce) {
  .svc__illustration img { transition: none; }
  .svc__card:hover .svc__illustration img,
  .svc__card:focus-visible .svc__illustration img { transform: none; }
}
.svc__illustration::after {
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 50% 110%, rgba(245, 183, 9, 0.18), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(10,42,51,0.4) 100%);
  pointer-events: none;
}
/* Illustration animates subtly on hover */
.svc__card:hover .svc__illustration svg .ill-anim {
  animation: illPulse 2s ease-in-out infinite;
}
@keyframes illPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}
.svc__card:hover .svc__illustration svg .ill-rotate {
  animation: illRotate 18s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes illRotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .svc__card:hover .svc__illustration svg .ill-anim,
  .svc__card:hover .svc__illustration svg .ill-rotate { animation: none; }
}
.svc__num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xl);
  display: flex; gap: var(--space-xs); align-items: center;
}
.svc__num em { color: var(--color-accent); font-style: normal; }
.svc__name {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(24px, 2.4vw, 32px);
  line-height: var(--leading-tight);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-md);
  color: var(--color-text-primary);
}
.svc__desc {
  font-family: var(--font-body);
  font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl);
}
.svc__list {
  list-style: none; padding: 0; margin: 0 0 var(--space-2xl);
  display: grid; gap: 10px;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-md);
}
.svc__list li { padding-left: var(--space-md); position: relative; }
.svc__list li::before { content:"+"; position: absolute; left: 0; color: var(--color-accent); }
.svc__cta {
  margin-top: auto;
  font-family: var(--font-display); font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  display: inline-flex; gap: 10px; align-items: center;
}
.svc__cta::after { content:" →"; transition: transform var(--duration-base) var(--ease-standard); }
.svc__card:hover .svc__cta::after { transform: translateX(8px); }

/* ============================================================
   3b. PULL-QUOTE — editorial breakpoint, white-subtle layer
   ============================================================ */
.pull {
  background: var(--color-bg-base);
  padding: var(--space-4xl) var(--space-2xl);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
  position: relative;
  isolation: isolate;
}
.pull::before {
  content:""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to right, var(--color-border-default) 1px, transparent 1px),
    linear-gradient(to bottom, var(--color-border-default) 1px, transparent 1px);
  background-size: 96px 96px;
  opacity: 0.45;
  mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 50% at 50% 50%, black 0%, transparent 80%);
}
.pull__inner {
  max-width: 1100px; margin: 0 auto;
  text-align: center;
}
.pull__mark {
  font-family: var(--font-display);
  font-size: clamp(80px, 10vw, 160px);
  line-height: 0.6;
  font-weight: var(--weight-medium);
  color: var(--color-accent);
  letter-spacing: -0.04em;
  display: block;
  margin: 0 0 var(--space-md);
  user-select: none;
}
.pull__q {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-regular);
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2xl);
  max-width: 28ch;
  margin-left: auto; margin-right: auto;
}
.pull__cite {
  display: inline-flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-style: normal;
}
.pull__cite strong {
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: 0.12em;
}

/* ============================================================
   3c. DIAG — Risk Health Check banner (white layer)
   ============================================================ */
.diag {
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-rule);
  border-bottom: 1px solid var(--color-rule);
}
.diag__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.15fr);
  gap: var(--space-4xl); align-items: center;
}
@media (max-width: 1024px) {
  .diag__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
}
.diag__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: 1.02; letter-spacing: -0.02em;
  margin: var(--space-md) 0 var(--space-lg);
  color: var(--color-text-primary);
  max-width: 18ch;
}
.diag__title em { font-style: italic; color: var(--color-accent); }
.diag__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-xl); max-width: 52ch;
}
.diag__cta { color: var(--color-text-primary); border-color: var(--color-text-primary); }
.diag__cta:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-petrol-900); }

.diag__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}
@media (max-width: 640px) {
  .diag__grid { grid-template-columns: 1fr; }
}
.diag__card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-rule);
  padding: var(--space-lg);
  display: flex; flex-direction: column; gap: var(--space-sm);
  position: relative;
  transition: transform var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.diag__card::before {
  content:""; position: absolute; top: 0; left: 0; right: 0;
  height: 2px; background: var(--color-accent);
  transform: scaleX(0.18); transform-origin: 0 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.diag__card:hover { transform: translateY(-2px); border-color: var(--color-text-primary); }
.diag__card:hover::before { transform: scaleX(1); }
.diag__code {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent);
}
.diag__variant {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(18px, 1.4vw, 22px);
  line-height: var(--leading-tight); letter-spacing: -0.01em;
  margin: 0; color: var(--color-text-primary);
}
.diag__meta {
  margin-top: auto;
  display: flex; gap: var(--space-md); align-items: baseline;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--color-rule);
}
.diag__price {
  font-family: var(--font-mono); font-size: var(--text-sm);
  letter-spacing: 0.04em; color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}
.diag__lead-time {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.diag__note {
  font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   Continuum-bollen — signature brand-element (cover-DNA)
   Single source = one-risk-theme/assets/css/components.css.
   Hier inline gedupliceerd omdat preview-v2 standalone is.
   ============================================================ */
.continuum-bols {
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.continuum-bols__a,
.continuum-bols__b {
  position: absolute;
  display: block;
  border-radius: 50%;
  aspect-ratio: 1 / 1;
}
[data-layer="petrol"] .continuum-bols__a,
[data-layer="petrol"] .continuum-bols__b,
.ft .continuum-bols__a,
.ft .continuum-bols__b {
  background: rgba(0, 0, 0, 0.18);
}
[data-layer="white"] .continuum-bols__a,
[data-layer="white"] .continuum-bols__b {
  background: rgba(10, 42, 51, 0.045);
}

/* Variant: hero-pair (cover-replica) */
.continuum-bols[data-bols="hero-pair"] .continuum-bols__a {
  width: 72vw; max-width: 1080px;
  top: -18%; right: -16%;
}
.continuum-bols[data-bols="hero-pair"] .continuum-bols__b {
  width: 42vw; max-width: 580px;
  bottom: -22%; left: -10%;
}
/* Variant: single-tr */
.continuum-bols[data-bols="single-tr"] .continuum-bols__a {
  width: 56vw; max-width: 780px;
  top: -18%; right: -14%;
}
.continuum-bols[data-bols="single-tr"] .continuum-bols__b { display: none; }
/* Variant: single-br */
.continuum-bols[data-bols="single-br"] .continuum-bols__a {
  width: 64vw; max-width: 880px;
  bottom: -28%; right: -14%;
}
.continuum-bols[data-bols="single-br"] .continuum-bols__b { display: none; }
/* Variant: single-bl */
.continuum-bols[data-bols="single-bl"] .continuum-bols__a {
  width: 56vw; max-width: 760px;
  bottom: -24%; left: -12%;
}
.continuum-bols[data-bols="single-bl"] .continuum-bols__b { display: none; }

@media (max-width: 720px) {
  .continuum-bols[data-bols="hero-pair"] .continuum-bols__a { width: 92vw; top: -12%; right: -22%; }
  .continuum-bols[data-bols="hero-pair"] .continuum-bols__b { width: 60vw; bottom: -18%; left: -18%; }
}
@media print { .continuum-bols { display: none !important; } }

/* ============================================================
   5. CASES — geometric SVG thumbs (no stock photos)
   ============================================================ */
.cases {
  background: var(--color-bg-subtle);
  padding: var(--space-4xl) var(--space-2xl);
}
.cases__inner { max-width: 1440px; margin: 0 auto; }
.cases__h {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-2xl); align-items: end;
  margin-bottom: var(--space-3xl);
}
.cases__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.025em; margin: var(--space-md) 0 0;
}
.cases__title em { font-style: italic; color: var(--color-accent); }
.cases__all {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary); padding-bottom: 4px;
}
.cases__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); }
.case {
  display: flex; flex-direction: column;
  text-decoration: none; color: var(--color-text-primary);
  background: var(--color-bg-base);
  border: 1px solid var(--color-border-default);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.case:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.case__art {
  position: relative; aspect-ratio: 4 / 3;
  background: var(--color-petrol-900);
  overflow: hidden;
  isolation: isolate;
}
.case__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(0.20) brightness(0.85);
  z-index: 0;
}
.case__art svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; }
.case__art > .case__art-tag { z-index: 3; }
.case__art-tag {
  position: absolute; left: 16px; bottom: 16px; z-index: 2;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-white);
  background: rgba(10,42,51,0.65);
  padding: 6px 10px; backdrop-filter: blur(6px);
}
.case__body { padding: var(--space-xl) var(--space-xl) var(--space-xl); display: flex; flex-direction: column; flex: 1; }
.case__meta {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-md);
}
.case__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(20px, 1.6vw, 24px);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-xl); color: var(--color-text-primary);
}
.case__metric {
  border-top: 1px solid var(--color-border-default);
  padding-top: var(--space-md); margin-top: auto;
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: var(--space-md);
}
.case__metric-num {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-2xl); line-height: 1;
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}
.case__metric-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.case__link {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-primary);
}
.case__link::after { content:" →"; transition: padding var(--duration-base) var(--ease-standard); }
.case:hover .case__link::after { padding-left: 8px; }

/* ============================================================
   5b. SPREAD — magazine-style "Hoe wij werken", white layer
   ============================================================ */
.spread {
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-base);
}
.spread__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: var(--space-5xl); align-items: stretch;
}
.spread__copy { display: flex; flex-direction: column; }
.spread__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(36px, 4.5vw, 72px);
  line-height: 1;
  letter-spacing: -0.025em;
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--color-text-primary);
}
.spread__title em { font-style: italic; color: var(--color-accent); }
.spread__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2xl);
  max-width: 50ch;
}
.spread__phases {
  margin-top: auto;
  list-style: none; padding: 0; display: grid;
  border-top: 1px solid var(--color-border-default);
}
.spread__phase {
  display: grid; grid-template-columns: 80px 1fr auto;
  gap: var(--space-lg); align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.spread__phase-num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; color: var(--color-accent);
  text-transform: uppercase;
}
.spread__phase-name {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: -0.005em;
  color: var(--color-text-primary);
}
.spread__phase-time {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; color: var(--color-text-muted);
  text-transform: uppercase;
}
/* Visual pane right — editorial photo + curve overlay */
.spread__visual {
  position: relative;
  background: var(--color-petrol-900);
  min-height: 520px;
  overflow: hidden;
  isolation: isolate;
}
.spread__visual img.spread__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.65);
  z-index: 0;
}
.spread__visual::before {
  content:""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,42,51,0.55) 0%, rgba(10,42,51,0.85) 100%),
    radial-gradient(60% 50% at 75% 30%, rgba(245,183,9,0.20), transparent 60%),
    radial-gradient(50% 50% at 20% 90%, rgba(245,183,9,0.10), transparent 60%);
}
.spread__visual svg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2;
}
.spread__visual-tag {
  position: absolute; top: var(--space-lg); left: var(--space-lg); z-index: 3;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.spread__visual-meta {
  position: absolute; bottom: var(--space-lg); left: var(--space-lg); right: var(--space-lg); z-index: 3;
  display: flex; justify-content: space-between; gap: var(--space-md);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.spread__visual-meta strong {
  display: block;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  font-size: var(--text-2xl); letter-spacing: -0.02em;
  color: var(--color-white); text-transform: none;
  margin-top: 4px;
}

/* ============================================================
   6. INSIGHTS — editorial reading list, white layer
   ============================================================ */
.ins {
  padding: var(--space-4xl) var(--space-2xl);
  border-top: 1px solid var(--color-border-default);
}
.ins__inner { max-width: 1440px; margin: 0 auto; }
.ins__h {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--space-xl); align-items: end;
  margin-bottom: var(--space-3xl);
}
.ins__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(28px, 3.5vw, 56px);
  line-height: 0.98;
  letter-spacing: -0.025em; margin: var(--space-md) 0 0;
}
.ins__title em { font-style: italic; color: var(--color-accent); }
.ins__all {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary); padding-bottom: 4px;
}
.ins__list { display: grid; gap: 0; border-top: 1px solid var(--color-border-default); }
.ins__row {
  display: grid; grid-template-columns: 100px 140px 1fr 100px;
  gap: var(--space-xl); align-items: center;
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--color-border-default);
  text-decoration: none; color: var(--color-text-primary);
  transition: padding var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.ins__row:hover { padding-left: var(--space-md); padding-right: var(--space-md); background: var(--color-bg-subtle); }
.ins__cat {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
}
.ins__date {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-muted); letter-spacing: 0.05em;
}
.ins__h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(20px, 2vw, 28px);
  line-height: var(--leading-snug);
  margin: 0; letter-spacing: -0.015em;
}
.ins__time {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; color: var(--color-text-muted);
  text-align: right;
}

/* ============================================================
   7. WHY-US — 5 principes, white layer
   ============================================================ */
.why {
  background: var(--color-bg-subtle);
  padding: var(--space-4xl) var(--space-2xl);
}
.why__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-5xl); align-items: start;
}
.why__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(32px, 4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.025em; margin: var(--space-md) 0 var(--space-xl);
}
.why__title em { font-style: italic; color: var(--color-accent); }
.why__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}
.why__lead em { color: var(--color-text-primary); font-style: italic; }
.why__body {
  font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary); margin: 0 0 var(--space-2xl);
}
.why__list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-border-default); }
.why__item {
  display: grid; grid-template-columns: 64px 1fr;
  gap: var(--space-xl);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--color-border-default);
}
.why__num {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-3xl); line-height: 1;
  color: var(--color-accent);
  letter-spacing: -0.04em;
}
.why__h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.why__p {
  font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal);
  color: var(--color-text-secondary); margin: 0;
}

/* ============================================================
   8. CONTACT-CTA — petrol layer
   ============================================================ */
.cta {
  position: relative; overflow: hidden;
  padding: var(--space-4xl) var(--space-2xl);
}
.cta::before {
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(245, 183, 9, 0.12), transparent 65%),
    radial-gradient(60% 60% at 0% 100%, rgba(245, 183, 9, 0.08), transparent 60%);
}
.cta__inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: var(--space-5xl); align-items: center;
}
.cta__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  margin: var(--space-md) 0 var(--space-xl);
  color: var(--color-text-primary);
}
.cta__title em { font-style: italic; color: var(--color-accent); }
.cta__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2xl);
  max-width: 50ch;
}
.cta__btns { display: flex; gap: var(--space-md); flex-wrap: wrap; }
.cta .btn--text { color: var(--color-text-primary); }
.cta .btn--text:hover { border-bottom-color: var(--color-text-primary); }

.contact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  padding: var(--space-2xl);
}
.contact-card__lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent); margin-bottom: var(--space-md);
}
.contact-card__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--color-text-primary);
}
.contact-card__role {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: var(--color-text-secondary); margin: 0 0 var(--space-xl);
}
.contact-card dl { margin: 0; display: grid; gap: var(--space-sm); border-top: 1px solid rgba(255,255,255,0.14); padding-top: var(--space-md); }
.contact-card dl > div { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-md); }
.contact-card dt {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-text-muted);
}
.contact-card dd {
  margin: 0;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  color: var(--color-text-primary);
}
.contact-card__foot {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-accent);
}

/* ============================================================
   FOOTER — petrol-900
   ============================================================ */
.ft {
  position: relative; overflow: hidden;
  background: var(--color-petrol-900);
  color: rgba(255,255,255,0.7);
  padding: var(--space-4xl) var(--space-2xl) var(--space-xl);
}
.ft__inner { max-width: 1440px; margin: 0 auto; }
.ft__top { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--space-3xl); }
.ft__brand p {
  font-family: var(--font-body);
  font-size: var(--text-sm); line-height: var(--leading-normal);
  color: rgba(255,255,255,0.6);
  margin: var(--space-md) 0 0; max-width: 32ch;
}
.ft__col h5 {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-yellow-500); margin: 0 0 var(--space-md);
}
.ft__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ft__col a {
  font-family: var(--font-body); font-size: var(--text-sm);
  color: rgba(255,255,255,0.7); text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}
.ft__col a:hover { color: var(--color-yellow-500); }
.ft__col li.sub a { color: rgba(255,255,255,0.45); padding-left: 12px; }
.ft__bot {
  margin-top: var(--space-4xl); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.10);
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); flex-wrap: wrap; gap: var(--space-md);
}
.ft__bot a { color: rgba(255,255,255,0.45); margin-right: var(--space-xl); text-decoration: none; }
.ft__bot a:hover { color: var(--color-yellow-500); }

/* ============================================================
   PREVIEW BANNER
   ============================================================ */
.preview-banner {
  position: fixed; bottom: 16px; left: 16px; z-index: 9999;
  background: var(--color-petrol-900); color: var(--color-white);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 10px 14px;
  display: flex; gap: 12px; align-items: center;
  border: 1px solid var(--color-accent);
}
.preview-banner a { color: var(--color-accent); text-decoration: none; }

/* ============================================================
   CAREERS TEASER (compact 2-col block, white layer)
   ============================================================ */
.careers-teaser {
  position: relative; overflow: hidden;
  padding: var(--space-4xl) var(--space-2xl);
  background: var(--color-bg-base);
  border-top: 1px solid var(--color-border-default);
  border-bottom: 1px solid var(--color-border-default);
}
.careers-teaser__inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-4xl); align-items: center;
}
.careers-teaser__copy { max-width: 56ch; }
.careers-teaser__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(32px, 3.4vw, 48px); line-height: 1.04;
  letter-spacing: -0.02em; margin: var(--space-md) 0 var(--space-md);
  color: var(--color-text-primary);
}
.careers-teaser__title em { font-style: italic; color: var(--color-accent); }
.careers-teaser__lead {
  font-family: var(--font-body); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
  margin: 0 0 var(--space-lg);
}
.careers-teaser__positions {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-top: 1px solid var(--color-border-default);
}
.careers-teaser__positions a {
  display: grid; grid-template-columns: 48px 1fr auto;
  gap: var(--space-md); align-items: baseline;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border-default);
  text-decoration: none;
  transition: padding var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard);
}
.careers-teaser__positions a:hover {
  background: var(--color-bg-elevated); padding-left: var(--space-md); padding-right: var(--space-md);
}
.careers-teaser__num {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; color: var(--color-accent);
}
.careers-teaser__role {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: var(--text-md); color: var(--color-text-primary);
}
.careers-teaser__meta {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .hero { padding: 80px 24px 60px; }
  .hero__inner { grid-template-columns: 1fr; gap: 60px; }
  .hero__visual { min-height: 360px; }
  .hero__stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .trust__h { grid-template-columns: 1fr; }
  .trust__meta { text-align: left; }
  .trust__grid { grid-template-columns: repeat(3, 1fr); }
  .svc__h, .cases__h { grid-template-columns: 1fr; gap: 24px; }
  .svc__grid { grid-template-columns: 1fr; }
  .cases__grid { grid-template-columns: 1fr; }
  .ins__row { grid-template-columns: 1fr; gap: 12px; }
  .ins__row > * { text-align: left !important; }
  .why__inner { grid-template-columns: 1fr; gap: 60px; }
  .cta__inner { grid-template-columns: 1fr; gap: 60px; }
  .careers-teaser__inner { grid-template-columns: 1fr; gap: 40px; }
  .careers-teaser__positions a { grid-template-columns: 36px 1fr; gap: 12px; }
  .careers-teaser__positions a .careers-teaser__meta { grid-column: 2; }
  .ft__top { grid-template-columns: 1fr 1fr; gap: 40px; }
  .site-header__inner { padding: 14px 20px; gap: 20px; }
  .primary-nav { display: none; }
}

/* ============================================================
   Homepage sectie-onderscheid (2026-05-30, user-mandaat)
   Meer onderscheid tussen de vakken via afwisselende achtergronden:
   - trust-strip = petrol (data-layer in home-trust.php), ticker blijft wit
   - "Een selectie uit ons werk" (cases) en why-us = grijze surface
   - careers-teaser ("we groeien") = petrol (data-layer in pattern)
   - contact-cta blijft petrol (laatste blok)
   ============================================================ */
.home-cases,
.why { background: var(--color-bg-subtle); }