/* ============================================================================
 * ONE Risk Advisory — preview-shared.css
 * Utility-stack gedeeld door alle preview-pagina's (Brandbook v3.1 Continuum).
 * Page-specific styles blijven inline in elke preview-*.html.
 *
 * Imports nodig: /wp-content/themes/one-risk-theme/assets/css/tokens.css (single source of truth voor tokens).
 * ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Skip-to-content link voor a11y (WCAG 2.2 SC 2.4.1).
 * Verborgen tot keyboard-focus; verschijnt links-bovenin met goud-accent. */
.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;
}
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; }

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

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  font-family: var(--font-display);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
  letter-spacing: 0.02em;
  padding: 14px 24px;
  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); }
[data-layer="petrol"] .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.32); }
[data-layer="petrol"] .btn--ghost:hover { background: var(--color-accent); color: var(--color-petrol-900); border-color: var(--color-accent); }
.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); }

/* ============================================================
   Site header — INTENTIONALLY EMPTY in WP-context.
   Header/nav/submenu/lang styling komt volledig uit preview-main.css
   (frosted-petrol default + body.is-scrolled solid-white state-machine).
   Eerder gaf preview-shared.css conflicting rules waardoor inner-pages
   wit-op-wit submenu + onzichtbare logo kregen. De _preview/preview-shared.css
   bevat nog wel deze regels voor standalone HTML-previews.
   ============================================================ */

/* ============================================================
   Generic page-hero (petrol, full-bleed)
   Voor service-pagina's en content-pagina's. preview-v2/about
   gebruiken hun eigen verfijnde varianten — die overschrijven via
   inline style block.
   ============================================================ */
.page-hero {
  position: relative; overflow: hidden;
  /* Sessie 18 update 3: compactere padding voor 100% laptop-zoom. */
  padding: clamp(56px, 7vw, 96px) var(--space-2xl) clamp(40px, 6vw, 72px);
}
.page-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%);
}
.page-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%);
}

/* 3-pijler rebuild (sessie 23): pillar-foto als sfeer-laag achter hero-content.
   Activeer met data-pillar="ia|rm|ic" op .page-hero. Petrol-overlay blijft staan
   via existing .page-hero::before; deze ::after legt de foto eronder met grayscale
   en lage opacity zodat tekst-contrast WCAG-AA blijft.                          */
.page-hero[data-pillar] { position: relative; }
.page-hero[data-pillar]::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  opacity: 0.32;
  filter: grayscale(0.35) brightness(0.78) contrast(1.05);
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.page-hero[data-pillar="ia"]::after { background-image: url("../images/services/ia-pillar-1600.jpg"); }
.page-hero[data-pillar="rm"]::after { background-image: url("../images/services/rm-pillar-1600.jpg"); }
.page-hero[data-pillar="ic"]::after { background-image: url("../images/services/ic-pillar-1600.jpg"); }
/* Houd content-laag boven de pillar-foto */
.page-hero[data-pillar] .page-hero__inner { position: relative; z-index: 2; }
.page-hero[data-pillar] .continuum-bols   { z-index: 3; }

/* Pillar-visual: full-bleed foto als hero-achtergrond, tekst eroverheen
   (sessie 25 user-mandaat). Dark overlay voor WCAG AA tekst-contrast. */
.page-hero--with-visual { position: relative; isolation: isolate; }
.page-hero__visual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}
/* Override de standaard yellow-glow ::before met een dark overlay zodat
   tekst leesbaar blijft over de foto. Behoud subtiele yellow-accent
   onderlaag voor brand-warmte. */
.page-hero--with-visual::before {
  background:
    linear-gradient(105deg, rgba(31, 58, 68, 0.50) 0%, rgba(31, 58, 68, 0.25) 65%, rgba(31, 58, 68, 0.08) 100%),
    radial-gradient(80% 60% at 88% 22%, rgba(245, 183, 9, 0.10), transparent 60%) !important;
  z-index: 1 !important;
}
.page-hero--with-visual .page-hero__grid { z-index: 1; }
.page-hero--with-visual .continuum-bols  { z-index: 2; }
.page-hero--with-visual .page-hero__inner { position: relative; z-index: 2; }

/* ── Schone foto-hero (.page-hero--contact) — zelfde opmaak als /over-ons/
   missie-visie/. Gebruikt door de contactpagina-hero ÉN de homepage-contact-CTA
   (home-contact-cta.php). Staat hier (globaal geladen) i.p.v. in page-contact.css
   omdat de homepage die conditionele sheet niet laadt.
   Geen scrim/sluier (::before uit), geen grid/bols in de markup. Foto vult de
   hero; links-uitgelijnde tekst leesbaar via tweelaagse text-shadow (geen overlay).
   Hogere min-height zoomt de foto minder ver in (gezicht in beeld); inner
   width:100% houdt de tekst tegen de 1440px-grid-linkerrand; row-flex centreert
   verticaal zonder de inner te laten krimpen. */
.page-hero--contact {
  background: var(--color-petrol-900);
  min-height: clamp(480px, 60vh, 660px);
  display: flex; align-items: center;
}
.page-hero--contact .page-hero__inner { width: 100%; }
.page-hero--contact.page-hero--with-visual::before { background: none !important; }
.page-hero--contact .page-hero__visual { object-position: center 26%; }
.page-hero--contact .page-hero__meta,
.page-hero--contact .page-hero__title,
.page-hero--contact .page-hero__lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72), 0 3px 30px rgba(0, 0, 0, 0.62);
}
.page-hero--contact .page-hero__lead { color: #fff; }
@media (max-width: 768px) {
  .page-hero--contact { min-height: clamp(420px, 70vh, 560px); }
  .page-hero--contact .page-hero__visual { object-position: 64% 24%; }
}

/* ── Nieuws-header foto-hero (page-nieuws.php). Zelfde schone aanpak als
   .page-hero--contact: GEEN scrim/sluier (::before uit), witte tekst leesbaar via
   text-shadow. Het beeld heeft links een donkere petrol-zone waar de tekst op valt;
   de tekst is smal gehouden zodat hij binnen die zone blijft. ── */
.page-hero--news {
  background: var(--color-petrol-900);
  min-height: clamp(380px, 48vh, 560px);
  display: flex; align-items: center;
}
.page-hero--news .page-hero__inner { width: 100%; }
.page-hero--news.page-hero--with-visual::before { background: none !important; }
.page-hero--news .page-hero__visual { object-position: center center; }
.page-hero--news .page-hero__meta,
.page-hero--news .page-hero__title,
.page-hero--news .page-hero__lead {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.74), 0 3px 30px rgba(0, 0, 0, 0.55);
}
.page-hero--news .page-hero__title { max-width: 15ch; }
.page-hero--news .page-hero__lead { color: #fff; max-width: 34ch; }
@media (max-width: 768px) {
  .page-hero--news { min-height: clamp(380px, 60vh, 540px); }
  /* Op mobiel naar de krantenjongen/scène schuiven zodat het beeld zichtbaar is
     (i.p.v. alleen de donkere linkerzone). Sterkere text-shadow houdt de tekst
     leesbaar over de drukkere achtergrond, zonder scrim/sluier. */
  .page-hero--news .page-hero__visual { object-position: 52% center; }
  .page-hero--news .page-hero__meta,
  .page-hero--news .page-hero__title,
  .page-hero--news .page-hero__lead {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.88), 0 2px 16px rgba(0, 0, 0, 0.72);
  }
}

/* Nieuws- + Blogs-hub: het zichtbare "Recent"-kopblok is weg, dus de lijst sluit
   strakker op de hero aan. Kortere top-padding (specifieker dan de basis .ins-regel
   zodat hij wint, ongeacht welke .ins-sheet laadt). */
.page-nieuws .ins,
.page-inzichten .ins { padding-top: var(--space-2xl); }

/* 3-regel pillar-hero typografie (sessie 25 — Remotion-inspired).
   Regel 1 (groot wit) + regel 2 (lichter klein) + regel 3 (groot goud-accent).
   Vervangt de standaard .page-hero__title em-mix. */
.pillar-hero__title {
  display: flex;
  flex-direction: column;
  gap: 0.18em;
  max-width: 22ch;
  margin: var(--space-md) 0 var(--space-xl);
}
.pillar-hero__line {
  display: block;
  font-family: var(--font-display);
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}
.pillar-hero__line--1 {
  font-size: clamp(40px, 6vw, 96px);
  font-weight: 700;
  color: #FFFFFF;
}
.pillar-hero__line--2 {
  font-size: clamp(18px, 1.8vw, 30px);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 0.4em;
}
.pillar-hero__line--3 {
  font-size: clamp(32px, 4.8vw, 76px);
  font-weight: 700;
  color: var(--color-yellow-500);
  margin-top: 0.2em;
}
/* Accent-tegenkleur binnen een regel: wit-binnen-goud (of vice versa)
   via <span class="alt"> in ACF veld. */
.pillar-hero__line--1 .alt,
.pillar-hero__line--2 .alt { color: var(--color-yellow-500); }
.pillar-hero__line--3 .alt { color: #FFFFFF; }

/* White-emphasis kleurschema (Internal Audit pijler): regel 1+2 wit (puur),
   regel 3 goud. Verschilt van standaard schema alleen op regel 2 (puur wit
   ipv 78% lichtgrijs). Standaard schema (Risk Management) blijft wit/grijs/goud. */
.page-hero--colors-white-emph .pillar-hero__line--1 { color: #FFFFFF; }
.page-hero--colors-white-emph .pillar-hero__line--2 { color: #FFFFFF; }
.page-hero--colors-white-emph .pillar-hero__line--3 { color: var(--color-yellow-500); }
/* Accent-tegenkleur in white-emph: regel 1+2 goud-binnen-wit, regel 3 wit-binnen-goud. */
.page-hero--colors-white-emph .pillar-hero__line--1 .alt,
.page-hero--colors-white-emph .pillar-hero__line--2 .alt { color: var(--color-yellow-500); }
.page-hero--colors-white-emph .pillar-hero__line--3 .alt { color: #FFFFFF; }

/* Staggered reveal (eyebrow → regel 1 → regel 2 → regel 3 → CTAs).
   Timing matched de Remotion-comp: 0.6s/1.0s/2.0s/2.6s/3.4s frames. */
.pillar-reveal {
  opacity: 0;
  transform: translateY(28px);
  animation: pillar-reveal-in 900ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.pillar-reveal--1 { animation-delay: 200ms; }
.pillar-reveal--2 { animation-delay: 600ms; }
.pillar-reveal--3 { animation-delay: 1400ms; }
.pillar-reveal--4 { animation-delay: 2000ms; }
.pillar-reveal--5 { animation-delay: 2700ms; }

@keyframes pillar-reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-reveal {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Pillar intro — 1-koloms lead-blok in dezelfde opmaak als de Missie-tekst op
 * /over-ons/missie-visie/ (sessie 34): wit, geen omkaderde kaart, titel boven
 * de body, leesblok 75% breed en gecentreerd, grote display-titel, eerste
 * alinea iets groter. Titel met goud-italic accent (<em>). */
.pillar-intro { padding: clamp(44px, 5vw, 76px) var(--space-2xl); background: var(--color-bg-base); }
.pillar-intro__inner {
  width: 75%; max-width: 75%; margin: 0 auto;
}
.pillar-intro__head { margin: 0 0 var(--space-lg); }
.pillar-intro__title {
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(40px, 5vw, 68px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-text-primary); margin: 0;
}
.pillar-intro__title em { font-style: italic; color: var(--color-accent); }
.pillar-intro__subtitle {
  font-family: var(--font-mono);
  font-size: var(--text-2xs); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-accent);
  margin: var(--space-md) 0 0;
}
.pillar-intro__body {
  font-family: var(--font-body); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
}
.pillar-intro__body p { margin: 0 0 var(--space-md); }
.pillar-intro__body p:first-child { margin-top: 0; font-size: var(--text-lg); }
.pillar-intro__body p:last-child { margin-bottom: 0; }
.pillar-intro__body strong { color: var(--color-text-primary); font-weight: var(--weight-semibold); }
@media (max-width: 768px) {
  .pillar-intro { padding: clamp(40px, 9vw, 64px) var(--space-lg); }
  .pillar-intro__inner { width: 100%; max-width: 100%; }
}

.page-hero__inner {
  position: relative; z-index: 2;
  max-width: 1440px; margin: 0 auto;
}
.page-hero__meta {
  display: flex; gap: var(--space-lg); align-items: center;
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.55); margin-bottom: var(--space-lg);
}
.page-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); } }

.page-hero__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  /* Sessie 18 update 3: scaled down voor 100% laptop. */
  font-size: clamp(32px, 4.4vw, 64px);
  line-height: 1.04; letter-spacing: -0.025em;
  color: #fff; margin: 0 0 var(--space-md);
  max-width: 22ch;
}
.page-hero__title em { font-style: italic; color: var(--color-accent); }
.page-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: rgba(255,255,255,0.78);
  max-width: 60ch; margin: 0 0 var(--space-lg);
}
.page-hero__lead strong { color: #fff; font-weight: var(--weight-semibold); }

.page-hero__facts {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg); margin: 0 0 var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.14);
}
.page-hero__fact { display: flex; flex-direction: column; gap: 6px; }
.page-hero__fact-lbl {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.page-hero__fact-val {
  font-family: var(--font-display); font-size: var(--text-md);
  font-weight: var(--weight-medium); color: #fff;
  letter-spacing: -0.005em;
}
.page-hero__ctas { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }

/* ============================================================
   Generic section primitives
   ============================================================ */
.sec { padding: var(--space-4xl) var(--space-2xl); }
.sec--white { background: var(--color-bg-base); }
.sec--subtle { background: var(--color-bg-subtle); }
.sec__inner { max-width: 1440px; margin: 0 auto; position: relative; z-index: 2; }
.sec__head { max-width: 920px; margin-bottom: var(--space-3xl); }
.sec__title {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: clamp(34px, 4.2vw, 64px);
  line-height: 1.02; letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: var(--space-md) 0 var(--space-lg); max-width: 22ch;
}
.sec__title em { font-style: italic; color: var(--color-accent); }
[data-layer="petrol"] .sec__title { color: #fff; }
.sec__lead {
  font-family: var(--font-body);
  font-size: var(--text-md); line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  margin: 0; max-width: 62ch;
}
[data-layer="petrol"] .sec__lead { color: rgba(255,255,255,0.78); }

/* ============================================================
   Footer
   ============================================================ */
.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; position: relative; z-index: 2; }
.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;
}

/* index.php fallback-lijst (archive/search/single) */
.index-list { max-width: 900px; margin: 0 auto; padding: var(--space-4xl) var(--space-2xl); }
.index-list__item { padding: var(--space-xl) 0; border-bottom: 1px solid var(--color-rule); }
.index-list__item:last-child { border-bottom: 0; }
.index-list__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(22px, 2vw, 30px); line-height: 1.15; margin: 0 0 var(--space-sm); }
.index-list__title a { color: var(--color-text-primary); text-decoration: none; }
.index-list__title a:hover { color: var(--color-accent); }
.index-list__excerpt { font-family: var(--font-body); color: var(--color-text-secondary); line-height: var(--leading-relaxed); }
.index-list__empty { max-width: 900px; margin: 0 auto; padding: var(--space-4xl) var(--space-2xl); font-family: var(--font-body); color: var(--color-text-secondary); }
/* Partner van (IIA) + Volg ons (LinkedIn) — onder de brand-tagline.
   Beide monochroom lichtgrijs (currentColor), wit op hover. */
.ft__partners { display: flex; flex-wrap: wrap; gap: var(--space-2xl); margin-top: var(--space-xl); }
.ft__partner { display: flex; flex-direction: column; gap: var(--space-sm); }
.ft__partner-label {
  font-family: var(--font-mono); font-size: var(--text-2xs);
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--color-yellow-500);
}
.ft__iia { display: inline-flex; align-items: center; color: rgba(255,255,255,0.72); transition: color var(--duration-base) var(--ease-standard); }
.ft__iia svg { display: block; width: auto; height: 46px; }
.ft__iia:hover { color: #fff; }
.ft__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  color: rgba(255,255,255,0.72);
  border: 1px solid rgba(255,255,255,0.22);
  transition: color var(--duration-base) var(--ease-standard), background var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.ft__social svg { display: block; width: 22px; height: 22px; }
.ft__social:hover { color: var(--color-petrol-900); background: #fff; border-color: #fff; }
.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); }

/* ============================================================
   Continuum-bollen — signature cover-element
   ============================================================ */
.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(31, 58, 68, 0.045); }
.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%; }
.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; }
.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; }
.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; } }

/* ============================================================
   Preview banner (info-strip, fixed bottom-left)
   ============================================================ */
.preview-banner {
  position: fixed; bottom: 16px; left: 16px; z-index: 9999;
  background: var(--color-petrol-900); color: #fff;
  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; }

/* ============================================================
   Section primitives — anatomy / approach / deliverables / faq / cta
   Voor service-pagina's en content-pagina's. Page-specifieke
   variaties via inline overrides.
   ============================================================ */

/* Anatomy: prose + sticky sidebar */
.anat { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-base); }
.anat__inner {
  max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-4xl); align-items: start;
}
.anat__head { grid-column: 1 / -1; max-width: 720px; margin-bottom: var(--space-xl); }
.anat__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0 0; max-width: 22ch; }
.anat__title em { font-style: italic; color: var(--color-accent); }
.anat__body p { 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); max-width: 60ch; }
.anat__body p.lede { font-size: var(--text-lg); color: var(--color-text-primary); margin-bottom: var(--space-lg); }
.anat__body p.lede em { font-style: italic; color: var(--color-accent); }
.anat__side { background: var(--color-bg-subtle); padding: var(--space-xl); border-top: 2px solid var(--color-accent); position: sticky; top: 100px; }
.anat__side-kicker { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); display: block; margin-bottom: var(--space-md); }
.anat__side dl { margin: 0; display: grid; gap: var(--space-sm); }
.anat__side dl > div { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.anat__side dl > div:last-child { border-bottom: 0; padding-bottom: 0; }
.anat__side dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-muted); }
.anat__side dd { margin: 0; font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-primary); }

/* Approach: petrol fases */
.ap { position: relative; overflow: hidden; padding: var(--space-4xl) var(--space-2xl); }
.ap::before {
  content:""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 60% at 80% 20%, rgba(245,183,9,0.10), transparent 60%),
    radial-gradient(50% 60% at 10% 80%, rgba(245, 183, 9, 0.06), transparent 55%);
}
.ap__inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; }
.ap__head { max-width: 920px; margin-bottom: var(--space-4xl); }
.ap__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: #fff; margin: var(--space-md) 0 var(--space-lg); }
.ap__title em { font-style: italic; color: var(--color-accent); }
.ap__lead { font-family: var(--font-body); font-size: var(--text-md); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.78); margin: 0; max-width: 62ch; }
.ap__phases { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,0.14); }
.phase { display: grid; grid-template-columns: 220px 1fr; gap: var(--space-2xl); padding: var(--space-xl) 0; border-bottom: 1px solid rgba(255,255,255,0.14); }
.phase__marker { display: flex; flex-direction: column; gap: 8px; }
.phase__roman { font-family: var(--font-display); font-style: italic; font-size: clamp(48px, 5vw, 80px); line-height: 1; color: var(--color-accent); font-weight: var(--weight-medium); }
.phase__label { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
.phase__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 var(--space-sm); color: #fff; }
.phase__desc { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-relaxed); color: rgba(255,255,255,0.78); margin: 0 0 var(--space-md); max-width: 60ch; }
.phase__out { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.04em; display: inline-flex; gap: var(--space-sm); align-items: baseline; padding-top: var(--space-sm); border-top: 1px dashed rgba(255,255,255,0.18); }
.phase__out-lbl { color: var(--color-accent); text-transform: uppercase; letter-spacing: 0.18em; }
.phase__out-val { color: rgba(255,255,255,0.85); }

/* Deliverables table */
.dl { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-base); }
.dl__inner { max-width: 1440px; margin: 0 auto; }
.dl__head { max-width: 720px; margin-bottom: var(--space-2xl); }
.dl__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0 var(--space-md); }
.dl__title em { font-style: italic; color: var(--color-accent); }
.dl__table { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.dl__row { display: grid; grid-template-columns: 1.5fr 1fr 1.4fr 2fr; gap: var(--space-md); padding: var(--space-md) 0; border-bottom: 1px solid var(--color-rule); align-items: baseline; }
.dl__row--head { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-accent); }
.dl__row span.out { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-md); color: var(--color-text-primary); }
.dl__row span:not(.out):not(.head) { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* FAQ with <details> + FAQPage-schema-ready markup */
.faq { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-subtle); }
.faq__inner { max-width: 1100px; margin: 0 auto; }
.faq__head { max-width: 720px; margin-bottom: var(--space-2xl); }
.faq__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.faq__title em { font-style: italic; color: var(--color-accent); }
.faq__items { display: grid; gap: 0; border-top: 1px solid var(--color-rule); }
.faq__items details { border-bottom: 1px solid var(--color-rule); padding: var(--space-md) 0; }
.faq__items summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.3; letter-spacing: -0.01em;
  color: var(--color-text-primary);
  display: flex; gap: var(--space-md); align-items: center;
  padding: var(--space-sm) 0;
}
.faq__items summary::-webkit-details-marker { display: none; }
.faq__items summary::before {
  content: "+"; font-family: var(--font-mono); font-size: 24px;
  color: var(--color-accent); width: 24px; flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-standard);
}
.faq__items details[open] summary::before { content: "−"; }
.faq__items details > p {
  font-family: var(--font-body); font-size: var(--text-md);
  line-height: var(--leading-relaxed); color: var(--color-text-secondary);
  margin: var(--space-sm) 0 0 40px; max-width: 60ch;
}

/* CTA — petrol closer with optional contact card */
.cta { position: relative; overflow: hidden; padding: var(--space-4xl) var(--space-2xl); }
.cta::before {
  content:""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(70% 60% at 90% 10%, rgba(245,183,9,0.10), transparent 60%),
    radial-gradient(50% 60% at 10% 90%, rgba(245, 183, 9, 0.06), transparent 55%);
}
.cta__inner {
  position: relative; z-index: 2; max-width: 1440px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  gap: var(--space-4xl); align-items: center;
}
.cta__inner--center { grid-template-columns: 1fr; text-align: center; max-width: 1100px; }
.cta__inner--center .cta__title,
.cta__inner--center .cta__lead { margin-left: auto; margin-right: auto; }
.cta__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(34px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.02em; color: #fff; margin: var(--space-md) 0 var(--space-lg); max-width: 18ch; }
.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: rgba(255,255,255,0.78); margin: 0 0 var(--space-xl); max-width: 56ch; }
.cta__ctas { display: flex; gap: var(--space-md); align-items: center; flex-wrap: wrap; }
.cta__inner--center .cta__ctas { justify-content: center; }

.contact-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.18);
  padding: var(--space-xl);
}
.contact-card__lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent); margin: 0 0 var(--space-md); display: block; }
.contact-card__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 4px; color: #fff; }
.contact-card__role { font-family: var(--font-body); font-size: var(--text-sm); color: rgba(255,255,255,0.65); margin: 0 0 var(--space-lg); }
.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: rgba(255,255,255,0.55); }
.contact-card dd { margin: 0; font-family: var(--font-mono); font-size: var(--text-2xs); color: #fff; }
.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); }

/* Related sub-services grid (3-card / 2-card) */
.rel { padding: var(--space-4xl) var(--space-2xl); background: var(--color-bg-base); }
.rel__inner { max-width: 1440px; margin: 0 auto; }
.rel__head { margin-bottom: var(--space-2xl); max-width: 720px; }
.rel__title { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(30px, 3.4vw, 48px); line-height: 1.05; letter-spacing: -0.02em; margin: var(--space-md) 0; }
.rel__title em { font-style: italic; color: var(--color-accent); }
.rel__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-lg); }
.rel-card {
  background: var(--color-bg-base); border: 1px solid var(--color-rule);
  padding: var(--space-lg); text-decoration: none;
  display: flex; flex-direction: column; gap: var(--space-sm);
  position: relative; transition: border-color var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard);
}
.rel-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-slow) var(--ease-standard);
}
.rel-card:hover { border-color: var(--color-text-primary); transform: translateY(-2px); }
.rel-card:hover::before { transform: scaleX(1); }
.rel-card__num { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.22em; color: var(--color-accent); }
.rel-card__name { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: clamp(20px, 1.7vw, 24px); line-height: 1.15; letter-spacing: -0.015em; color: var(--color-text-primary); margin: 0; }
.rel-card__desc { font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--color-text-secondary); margin: 0; flex: 1; }
.rel-card__arrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text-primary); border-bottom: 1px solid var(--color-accent); padding-bottom: 2px; align-self: flex-start; }

/* Pillar-hub kaarten (IA + RM): witte kaarten op subtiele surface met een
   zichtbaar kader. Scoped op .page-pillar zodat de artikel-.rel-cards ongemoeid
   blijven. Lost tevens het onzichtbare/ongedefinieerde --color-rule kader op en
   geeft de hub-secties (categorieën + modules) duidelijke structuur. */
.page-pillar .rel { background: var(--color-petrol-900); }
/* 2x2 grid i.p.v. 1x4 — kaarten vullen de volle inner-breedte (zelfde als de
   IA/RM-fotokaarten = 1440px container) met ruime tussenruimte. */
.page-pillar .rel__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl); }
.page-pillar .rel-card {
  background: var(--color-petrol-700);
  border: 1px solid rgba(255, 255, 255, 0.14);
  padding: var(--space-3xl);
  gap: var(--space-lg);
}
.page-pillar .rel-card:hover { border-color: var(--color-accent); }
.page-pillar .rel-card__num { color: var(--color-accent); font-size: var(--text-xs); }
.page-pillar .rel-card__name { color: #fff; font-size: clamp(24px, 2.2vw, 30px); }
.page-pillar .rel-card__desc { color: rgba(255, 255, 255, 0.80); font-size: var(--text-base); }
.page-pillar .rel-card__arrow { color: rgba(255, 255, 255, 0.92); }
/* §02 Aanvullende modules: grijze sectie met witte kaarten zodat het afwisselt
   met de petrol §01 (geen blauw-op-blauw). */
.page-pillar .rel--modules { background: var(--color-bg-subtle); }
.page-pillar .rel--modules .rel-card {
  background: var(--color-bg-base);
  border: 1px solid var(--color-grey-300);
}
.page-pillar .rel--modules .rel-card:hover { border-color: var(--color-accent); }
.page-pillar .rel--modules .rel-card__name { color: var(--color-text-primary); }
.page-pillar .rel--modules .rel-card__desc { color: var(--color-text-secondary); }
.page-pillar .rel--modules .rel-card__arrow { color: var(--color-text-primary); }
@media (max-width: 760px) {
  .page-pillar .rel__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Generic responsive
   ============================================================ */
@media (max-width: 1024px) {
  .page-hero__facts { grid-template-columns: repeat(2, 1fr); }
  .anat__inner { grid-template-columns: 1fr; }
  .anat__side { position: static; }
  .phase { grid-template-columns: 1fr; gap: var(--space-md); }
  .dl__row { grid-template-columns: 1fr; }
  .cta__inner { grid-template-columns: 1fr; gap: var(--space-2xl); }
}
@media (max-width: 720px) {
  .ft__top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }
  .site-header__inner { padding: 14px 20px; gap: 20px; }
  .primary-nav { display: none; }
}