/* ═══════════════════════════════════════════════════════════════
   AUDIRIUM, Dienstverlening-first. Vertrouwen. Warmte.
   Navy + Orange. Premium consultancy feel.
   ═══════════════════════════════════════════════════════════════ */

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

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

/* Skip-to-content (a11y) */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  background: var(--orange);
  color: #fff;
  padding: 12px 24px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 0;
}

/* Focus-visible (keyboard a11y) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 4px;
}

:root {
  --navy: #0A0E27;
  --navy-deep: #060A1F;
  --navy-mid: #111540;
  --navy-light: #1A1F52;
  --orange: #C74805;
  --orange-hot: #E85D15;
  --orange-soft: rgba(199,72,5,0.08);
  --orange-glow: rgba(199,72,5,0.15);
  --slate: #8892B0;
  --slate-light: #A8B2D1;
  --chalk: #CCD6F6;
  --white: #E6F1FF;
  --surface: #FFFFFF;
  --surface-2: #F7F8FB;
  --surface-3: #EEF0F5;
  --text: #3B3F51;
  --text-heading: #0A0E27;
  --text-dim: #6B7185;
  --border: #E2E5EE;
  --radius: 12px;
  --radius-lg: 20px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s, color 0.4s;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  background: var(--surface);
  line-height: 1.65;
  overflow-x: hidden;
  animation: pageLoad 0.5s ease;
}

/* Text selection */
::selection {
  background: rgba(199,72,5,0.15);
  color: var(--text-heading);
}
::-moz-selection {
  background: rgba(199,72,5,0.15);
  color: var(--text-heading);
}
@keyframes pageLoad {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── SECTION HELPERS ───────────────────────────────────────────── */
.section-label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 12px;
}
.section-label.center { text-align: center; }

.section-title {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-heading);
  text-align: center;
  line-height: 1.2;
  margin-bottom: 16px;
}

.section-sub {
  font-size: 1.1rem;
  color: var(--text-dim);
  text-align: center;
  max-width: 600px;
  margin: 0 auto 48px;
  line-height: 1.6;
}

/* ── NAV ────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0 40px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(10,14,39,0.88);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: height 0.3s var(--ease), background 0.3s, box-shadow 0.3s;
}

.nav.scrolled {
  background: rgba(6,10,31,0.96);
  box-shadow: 0 2px 24px rgba(0,0,0,0.15);
  height: 64px;
}

.nav-logo img { height: 28px; display: block; }

.nav-links {
  display: flex;
  gap: 32px;
  align-items: center;
}

.nav-links a {
  color: var(--slate-light);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.2s;
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--orange);
  border-radius: 1px;
  transition: width 0.25s var(--ease), left 0.25s var(--ease);
}
.nav-links a:hover::after {
  width: 100%;
  left: 0;
}
.nav-links a:hover { color: #fff; }
.nav-links a.active { color: #fff; }
.nav-links a.active::after {
  width: 100%;
  left: 0;
  background: var(--orange);
}
.nav-links .nav-cta::after { display: none; }

/* Tools + Beta highlight group */
.nav-highlight-group {
  display: flex;
  gap: 0;
  align-items: center;
  border: 1px solid rgba(199,72,5,0.55);
  border-radius: 8px;
  padding: 3px 4px;
  background: rgba(199,72,5,0.06);
}
.nav-highlight-group a {
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  /* a11y: --orange (#C74805) fails WCAG AA (4.5:1) op donkere app-achtergronden (~#312d3d, CR 2.96).
     Default (portal licht thema): var(--text-heading, #0A0E27) = 19:1 op wit.
     Dark-theme override (body:not(.theme-light)) zie hieronder: #CCD6F6 = 9.23:1 op #312d3d.
     Oranje branding behouden via border (rgba(199,72,5,0.55)) en background-tint. */
  color: var(--text-heading, #0A0E27) !important;
  transition: background 0.2s, color 0.2s;
}
/* a11y: Dark apps (geen .theme-light op body) hebben donkere nav-bg → lichte tekstkleur */
body:not(.theme-light) .nav-highlight-group a {
  color: #CCD6F6 !important;
}
.nav-highlight-group a::after { display: none; }
.nav-highlight-group a:hover {
  background: rgba(199,72,5,0.12);
  color: #fff !important;
}
.nav-highlight-group a.active {
  background: rgba(199,72,5,0.18);
  color: #fff !important;
}

.nav-cta {
  background: var(--orange) !important;
  color: #fff !important;
  padding: 9px 20px;
  border-radius: 8px;
  font-weight: 600 !important;
  font-size: 0.8125rem !important;
  transition: background 0.2s, transform 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nav-cta:hover {
  background: var(--orange-hot) !important;
  transform: translateY(-1px);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--slate-light);
  font-size: 1.25rem;
  cursor: pointer;
}

/* ── HERO ──────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #1a1a1a;
  overflow: hidden;
  padding: 160px 40px 80px;
  text-align: center;
}

.hero-bg {
  position: absolute;
  inset: 0 0 -30% 0;
  will-change: transform, opacity;
}

/* Slideshow images, Ken Burns continuous (no reset on slide change) */
.hero-slide-img {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  will-change: transform, opacity;
}
.hero-slide-img.active { opacity: 1; }

/* All slides animate continuously, alternate = zoom in then back out */
.hero-slide-img:nth-child(odd)  { animation: kenBurnsA 24s ease-in-out infinite alternate; }
.hero-slide-img:nth-child(even) { animation: kenBurnsB 24s ease-in-out infinite alternate; }

/* Stagger so each slide is at a different zoom point when revealed */
.hero-slide-img:nth-child(2) { animation-delay: -4s; }
.hero-slide-img:nth-child(3) { animation-delay: -8s; }
.hero-slide-img:nth-child(4) { animation-delay: -12s; }
.hero-slide-img:nth-child(5) { animation-delay: -16s; }

@keyframes navSlideIn {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes kenBurnsA {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.18) translate(-3%, -1.5%); }
}
@keyframes kenBurnsB {
  0%   { transform: scale(1.08) translate(1.5%, 0); }
  100% { transform: scale(1) translate(-1.5%, 1.5%); }
}

/* Overlay for text readability */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(10,14,39,0.55) 0%,
    rgba(10,14,39,0.65) 45%,
    rgba(10,14,39,0.78) 100%
  );
}


.hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
}

.hero-label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  margin-bottom: 24px;
  transition: opacity 0.4s ease;
  text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.hero h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.8rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 24px;
  transition: opacity 0.4s ease;
}

.hero h1 .accent {
  color: var(--orange);
  display: block;
}

.hero-sub-row {
  position: relative;
}
.hero-sub {
  font-size: 1.0625rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.65;
  max-width: 560px;
  margin: 0 auto 36px;
  transition: opacity 0.4s ease;
  text-shadow: 0 1px 12px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.5);
}

.hero-lees-meer {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  padding: 9px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 0;
}
.hero-lees-meer:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.5);
}
.hero-lees-meer .fa-arrow-right {
  font-size: 0.75rem;
  transition: transform 0.15s;
}
.hero-lees-meer:hover .fa-arrow-right { transform: translateX(3px); }

.hero-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 56px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s var(--ease);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--orange);
  color: #fff;
}
.btn-primary:hover {
  background: var(--orange-hot);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(199,72,5,0.3);
}

.btn-outline {
  background: transparent;
  color: var(--slate-light);
  border: 1.5px solid rgba(255,255,255,0.15);
}
.btn-outline:hover {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
  transform: translateY(-2px);
}

.btn-lg {
  padding: 16px 36px;
  font-size: 1rem;
}

/* Hero stats */
.hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  align-items: center;
}

.hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-stat-num {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--white);
  line-height: 1;
}

.hero-stat-label {
  font-size: 0.8rem;
  color: var(--slate);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hero-stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(255,255,255,0.1);
}

/* ── Hero slide indicator dots ─────────────────────────────────── */
/* ── Hero segmented progress ────────────────────────────────────── */
.hero-segs {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  gap: 6px;
}
.hero-seg {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.20);
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.hero-seg::before {
  content: '';
  position: absolute;
  inset: -10px -4px;
}
.hero-seg-fill {
  display: block;
  height: 100%;
  width: 0;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
}

/* ── Hero ghost prev/next slides ───────────────────────────────── */
.hero-ghost {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  color: rgba(255,255,255,0.28);
  transition: color 0.35s ease, transform 0.35s ease;
  max-width: 200px;
}
.hero-ghost--prev { right: 100%; flex-direction: row; text-align: left; }
.hero-ghost--next { left: 100%; flex-direction: row-reverse; text-align: right; }
.hero-ghost:hover { color: rgba(255,255,255,0.72); }
.hero-ghost--prev:hover { transform: translateY(-50%) translateX(-4px); }
.hero-ghost--next:hover { transform: translateY(-50%) translateX(4px); }
.hg-arrow {
  font-size: 2.25rem;
  font-weight: 200;
  line-height: 1;
  flex-shrink: 0;
  transition: opacity 0.3s;
  opacity: 0.7;
}
.hero-ghost:hover .hg-arrow { opacity: 1; }
.hg-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: hidden;
  max-width: 160px;
}
.hg-title {
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hg-accent {
  font-size: 0.6875rem;
  font-weight: 400;
  color: rgba(232,160,53,0.45);
  transition: color 0.3s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-ghost:hover .hg-accent { color: rgba(232,160,53,0.9); }
@media (max-width: 1024px) {
  .hero-ghost { max-width: 160px; padding: 8px 8px; }
  .hg-title { font-size: 0.75rem; }
}
@media (max-width: 768px) { .hero-ghost { display: none; } }

/* ── TENSION ────────────────────────────────────────────────────── */
.tension {
  padding: 80px 0;
  background: var(--surface);
}

.tension-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.tension-text h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}

.tension-text .lead {
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 32px;
}

.tension-points {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.tension-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.tension-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.875rem;
  font-weight: 700;
}

.tension-point.no .tension-icon {
  background: rgba(220,38,38,0.1);
  color: #DC2626;
}

.tension-point.yes .tension-icon {
  background: rgba(5,150,105,0.1);
  color: #059669;
}

.tension-point strong {
  display: block;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 4px;
}

.tension-point p {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.tension-box {
  padding: 40px;
  background: var(--surface-2);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  align-self: start;
  position: sticky;
  top: 100px;
}
.tension-box h3 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}
.tension-box p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
}

/* ── PILLARS ────────────────────────────────────────────────────── */
.pillars {
  padding: 80px 0;
  background: var(--surface-2);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.pillar {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}

.pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(10,14,39,0.1);
  border-color: var(--orange);
}

.pillar-icon {
  width: 84px;
  height: 84px;
  border-radius: 16px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  margin-bottom: 20px;
}

.pillar h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 10px;
}

.pillar p {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.55;
}

/* ── SERVICES ──────────────────────────────────────────────────── */
.services {
  padding: 80px 0;
  background: var(--surface);
}

.services-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

.service-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  position: relative;
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--orange);
}

.service-card.alt::before {
  background: var(--navy);
}

.service-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--orange);
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
}

.service-badge.alt {
  background: var(--navy);
}

.service-card h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.service-sub {
  font-size: 1rem;
  color: var(--text-dim);
  margin-bottom: 24px;
  line-height: 1.5;
}

.service-list {
  list-style: none;
  margin-bottom: 24px;
}

.service-list li {
  padding: 8px 0;
  padding-left: 24px;
  position: relative;
  font-size: 0.9375rem;
  color: var(--text);
  border-bottom: 1px solid rgba(0,0,0,0.04);
}

.service-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 600;
}

.service-result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px;
  background: var(--surface);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
}

.service-result i {
  color: #059669;
  margin-top: 2px;
  flex-shrink: 0;
}

/* ── TIMELINE ──────────────────────────────────────────────────── */
.timeline {
  padding: 80px 0;
  background: var(--navy);
  color: var(--white);
}

.timeline .section-label { color: var(--orange); }
.timeline .section-title { color: var(--white); }
.timeline .section-sub { color: var(--slate); }

.timeline-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-top: 40px;
}

.timeline-line {
  position: absolute;
  top: 18px;
  left: 10%;
  right: 10%;
  height: 2px;
  background: rgba(255,255,255,0.1);
}

.timeline-step {
  text-align: center;
  position: relative;
}

.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange);
  margin: 0 auto 24px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px rgba(199,72,5,0.2);
}

.timeline-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  padding: 28px 20px;
}

.timeline-week {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 12px;
}

.timeline-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: 8px;
}

.timeline-card p {
  font-size: 0.9rem;
  color: var(--slate-light);
  line-height: 1.5;
}

/* ── EVENTS ────────────────────────────────────────────────────── */
.events {
  padding: 80px 0;
  background: var(--surface-2);
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.event-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  text-align: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}

.event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(10,14,39,0.06);
  border-color: var(--orange);
}

.event-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  margin: 0 auto 16px;
}

.event-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.event-card p {
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.45;
}

/* ── TOOLS BAR (compact) ──────────────────────────────────────── */
.tools-bar {
  padding: 80px 0;
  background: var(--surface);
}

/* ── TOOLS PANEL (homepage mission-control visual) ───────────── */
.ts-panel-link {
  display: block;
  text-decoration: none;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
  box-shadow: 0 4px 32px rgba(10,14,39,0.22), 0 24px 80px rgba(10,14,39,0.18);
}
.ts-panel-link:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 48px rgba(10,14,39,0.32), 0 40px 100px rgba(10,14,39,0.28);
}

.ts-panel {
  background: #0b0f20;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
}

/* Subtle grid overlay */
.ts-panel-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}

.ts-panel-row {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px 32px;
  position: relative;
  z-index: 1;
}

/* Left accent strip per category */
.ts-panel-row--audit { border-left: 3px solid rgba(100,200,255,0.55); }
.ts-panel-row--risk  { border-left: 3px solid rgba(255,120,60,0.55); }
.ts-panel-row--sec   { border-left: 3px solid rgba(80,200,140,0.55); }

.ts-panel-cat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 210px;
  flex-shrink: 0;
}

.ts-panel-num {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.25);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.ts-panel-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  flex-shrink: 0;
}
.ts-panel-row--audit .ts-panel-icon { background: rgba(100,200,255,0.12); color: rgba(100,200,255,0.9); }
.ts-panel-row--risk  .ts-panel-icon { background: rgba(255,120,60,0.12);  color: rgba(255,120,60,0.9); }
.ts-panel-row--sec   .ts-panel-icon { background: rgba(80,200,140,0.12);  color: rgba(80,200,140,0.9); }

.ts-panel-cat-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  line-height: 1.2;
}

.ts-panel-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}

.ts-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.ts-panel-row--audit .ts-pill {
  background: rgba(100,200,255,0.08);
  color: rgba(100,200,255,0.75);
  border: 1px solid rgba(100,200,255,0.15);
}
.ts-panel-row--risk .ts-pill {
  background: rgba(255,120,60,0.08);
  color: rgba(255,120,60,0.8);
  border: 1px solid rgba(255,120,60,0.15);
}
.ts-panel-row--sec .ts-pill {
  background: rgba(80,200,140,0.08);
  color: rgba(80,200,140,0.8);
  border: 1px solid rgba(80,200,140,0.15);
}
.ts-panel-link:hover .ts-panel-row--audit .ts-pill { background: rgba(100,200,255,0.14); }
.ts-panel-link:hover .ts-panel-row--risk  .ts-pill { background: rgba(255,120,60,0.14); }
.ts-panel-link:hover .ts-panel-row--sec   .ts-pill { background: rgba(80,200,140,0.14); }

.ts-panel-sep {
  height: 1px;
  background: rgba(255,255,255,0.06);
  margin: 0 32px;
}

.ts-panel-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 32px;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(255,255,255,0.06);
  transition: color 0.2s;
  position: relative;
  z-index: 1;
}
.ts-panel-cta i { transition: transform 0.3s var(--ease); }
.ts-panel-link:hover .ts-panel-cta { color: rgba(255,255,255,0.85); }
.ts-panel-link:hover .ts-panel-cta i { transform: translateX(4px); }

@media (max-width: 700px) {
  .ts-panel-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 20px; }
  .ts-panel-cat { min-width: unset; }
  .ts-panel-sep { margin: 0 20px; }
  .ts-panel-cta { padding: 14px 20px; }
}

/* ── HOMEPAGE SECTIONS ────────────────────────────────────────── */
.hp-section {
  padding: 80px 0;
  background: var(--surface);
}
.hp-section-alt {
  background: var(--surface-2);
}
/* De marketingsite kent geen donker thema: dit bestand houdt een vast licht
   palet aan en pint deze secties op wit. au-tokens.css draait --au-text-dim in
   prefers-color-scheme: dark wel om naar #8A93AC, en dat staat dan op wit:
   3,06:1, onder de 4,5:1 van WCAG AA. Binnen de secties die hier hun
   achtergrond krijgen, houden de tekstkleuren daarom hun lichte waarde. */
.hp-section,
.hp-section-alt {
  --au-text: #3B3F51;
  --au-text-heading: #0A0E27;
  --au-text-dim: #6B7185;
}
.hp-section-header {
  text-align: center;
  margin-bottom: 48px;
}

/* Wat is Audirium */
.hp-about-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hp-about-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
.hp-about-text {
  color: var(--text-muted);
  font-size: 1.0625rem;
  line-height: 1.75;
}
.hp-about-quote {
  border-left: 4px solid var(--orange);
  padding-left: 32px;
}
.hp-about-quote blockquote {
  font-size: 1.375rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 768px) {
  .hp-about-inner { grid-template-columns: 1fr; gap: 32px; }
  .hp-about-title { font-size: 1.5rem; }
  .hp-about-quote blockquote { font-size: 1.125rem; }
}
.hp-section-more {
  text-align: center;
  margin-top: 40px;
}
.section-more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: var(--radius);
  transition: all 0.25s var(--ease);
}
.section-more-link:hover {
  background: var(--orange-soft);
  gap: 12px;
}
.section-more-link i {
  transition: transform 0.25s var(--ease);
}
.section-more-link:hover i {
  transform: translateX(3px);
}

/* ── CTA ──────────────────────────────────────────────────────── */
.cta {
  padding: 96px 0;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  transition: background 0.3s;
}

.cta-inner {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}

.cta h2 {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 16px;
}

.cta p {
  font-size: 1.1rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 32px;
}

.cta .btn-primary {
  background: var(--orange);
  color: #fff;
}
.cta .btn-primary:hover {
  background: var(--orange-hot);
  box-shadow: 0 12px 32px rgba(199,72,5,0.25);
}

.cta-note {
  font-size: 0.9375rem;
  color: var(--text-dim);
  margin-top: 16px;
  margin-bottom: 0 !important;
}

/* ── WIP BANNER ────────────────────────────────────────────────── */
/* WIP overlay, sticky callout badge under logo (top-left) */
.wip-overlay {
  position: absolute;
  top: 80px;
  right: 12px;
  z-index: 999;
  background: var(--orange);
  color: #fff;
  padding: 9px 14px;
  border-radius: 10px;
  font-size: 0.775rem;
  font-weight: 500;
  line-height: 1.45;
  max-width: 220px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.30);
}
.wip-overlay::before {
  content: '';
  position: absolute;
  top: -7px;
  right: 48px;
  left: auto;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid var(--orange);
}

.wip-overlay a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.wip-overlay a:hover { opacity: 0.85; }
@media (max-width: 600px) {
  .wip-overlay { left: 12px; max-width: calc(100vw - 24px); top: 68px; }
}

/* ── BETA CTA SECTION ──────────────────────────────────────────── */
.beta-section {
  text-align: center;
  position: relative;
  overflow: hidden;
  background: var(--navy) !important;
}
.beta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(199,72,5,0.06), transparent);
}
.beta-content { position: relative; }
.beta-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.beta-desc {
  font-size: 1.0625rem;
  color: var(--slate-light);
  max-width: 520px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.beta-form {
  display: flex;
  gap: 12px;
  max-width: 440px;
  margin: 0 auto;
}
.beta-input {
  flex: 1;
  padding: 14px 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 10px;
  color: var(--white);
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  transition: border-color 0.2s;
}
.beta-input::placeholder { color: var(--slate); }
.beta-input:focus { border-color: var(--orange); }
.beta-toast {
  margin-top: 16px;
  font-size: 0.875rem;
  min-height: 1.5em;
}

/* ── FOOTER ───────────────────────────────────────────────────── */
.footer {
  background: var(--navy-deep);
  padding: 64px 0 32px;
  color: var(--slate);
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo { margin-bottom: 16px; opacity: 0.8; }

.footer-col p {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--slate);
}

.footer-col :is(h2, h3, h4) {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--slate-light);
  margin-bottom: 16px;
}

.footer-col a {
  display: block;
  color: var(--slate);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 4px 0;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
  text-align: center;
}

.footer-bottom p {
  font-size: 0.8125rem;
  color: var(--slate);
}

/* ── INLINE EDIT (admin) ──────────────────────────────────────── */
.editable {
  position: relative;
  cursor: default;
  transition: outline 0.15s;
  border-radius: 4px;
}

.editable:hover {
  outline: 2px dashed rgba(199,72,5,0.3);
  outline-offset: 4px;
}

/* Het potlood hangt aan de LAATSTE regel, niet aan de eerste. Bij een veld van
   meerdere regels is het containing block van een inline span de rechthoek van de
   eerste tot de laatste regelfragment: `top` zette het potlood dan boven op regel 1,
   dwars over de tekst die je wilde lezen. Gemeten over 508 velden op vijf pagina's:
   77 potloden bedekten tekst, met deze plaatsing nog 11 (korte navigatielabels). */
.editable .edit-pencil {
  position: absolute;
  bottom: 2px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: var(--orange);
  color: #fff;
  border-radius: 50%;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  cursor: pointer;
  z-index: 50;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border: 2px solid #fff;
  transition: transform 0.15s;
}

/* Een inline span eindigt precies waar de tekst ophoudt, dus daar hoort het potlood
   ernaast en niet eroverheen. Alleen als er rechts ruimte is: `inline-edit.js` zet
   deze klasse bij hover, anders zou het potlood buiten het scherm vallen. Blok-velden
   (een alinea, een kop) houden het potlood binnen: rechtsonder is daar witruimte. */
.editable.pencil-buiten .edit-pencil {
  bottom: -2px;
  right: -26px;
}

.editable:hover .edit-pencil,
.edit-pencil:hover {
  display: flex;
}

.edit-pencil:hover {
  transform: scale(1.15);
}

.editable.editing {
  outline: 2px solid var(--orange);
  outline-offset: 4px;
  background: rgba(199,72,5,0.04);
}

.editable.editing .edit-pencil {
  display: flex;
  background: #059669;
}

.edit-save-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #059669;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2);
  transform: translateY(80px);
  opacity: 0;
  transition: all 0.3s var(--ease);
  z-index: 9999;
}

.edit-save-toast.show {
  transform: translateY(0);
  opacity: 1;
}

/* ── BACK TO TOP ──────────────────────────────────────────────── */
.back-to-top {
  position: fixed;
  bottom: 74px;   /* boven de gedeelde fab-dock (review-pin, right:18/bottom:18); geen overlap */
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;          /* verborgen = niet klikbaar (overlay-hygiëne) */
  transform: translateY(12px);
  transition: all 0.3s var(--ease);
  z-index: 900;
  box-shadow: 0 4px 16px rgba(10,14,39,0.2);
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--orange);
  transform: translateY(-2px);
}
@media (max-width: 600px) {
  .back-to-top { bottom: 74px; right: 18px; width: 40px; height: 40px; }
  .beta-form { flex-direction: column; }
}

/* ── REVEAL ANIMATION ──────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside grids */
.pillars-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.pillars-grid .reveal:nth-child(3) { transition-delay: 0.2s; }
.pillars-grid .reveal:nth-child(4) { transition-delay: 0.15s; }
.pillars-grid .reveal:nth-child(5) { transition-delay: 0.25s; }
.pillars-grid .reveal:nth-child(6) { transition-delay: 0.3s; }

.diensten-grid .dienst-card:nth-child(2) { transition-delay: 0.08s; }
.diensten-grid .dienst-card:nth-child(3) { transition-delay: 0.16s; }

/* Service card stagger */
.services-grid .service-card.alt.reveal { transition-delay: 0.15s; }
.diensten-grid .dienst-card:nth-child(4) { transition-delay: 0.24s; }
.diensten-grid .dienst-card:nth-child(5) { transition-delay: 0.32s; }
.diensten-grid .dienst-card:nth-child(6) { transition-delay: 0.4s; }

/* ── RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav { padding: 0 20px; }
  .nav-links { display: none; }
  .nav-links.open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100vh - 72px);
    height: calc(100dvh - 72px);
    background: #060A1F;
    padding: 32px 24px;
    gap: 8px;
    z-index: 9999;
    overflow-y: auto;
    animation: navSlideIn 0.25s var(--ease);
  }
  .nav-links.open a {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 1rem;
    transition: background 0.15s;
  }
  .nav-links.open a:hover,
  .nav-links.open a.active {
    background: rgba(255,255,255,0.06);
  }
  .nav-links.open .nav-cta {
    margin-top: 12px;
    text-align: center;
    justify-content: center;
  }
  .nav-toggle { display: block; }

  /* svh i.p.v. vh: voorkomt reflow als de mobiele adresbalk tijdens scrollen toont/verbergt.
     De roterende slide-tekst heeft wisselende lengte; met top-verankering (flex-start) +
     gereserveerde min-height voor de langste titel (4 regels) en subtitel staan label,
     titel, subtitel en CTA op VASTE posities → nul beweging bij elke slide-wissel.
     Trade-off: korte slides hebben extra witruimte onder titel/subtitel (bewust gekozen). */
  .hero { padding: 100px 24px 60px; min-height: 80svh; align-items: flex-start; }
  .hero h1 { font-size: 2rem; min-height: 9.25rem; }   /* dekt de langste titel (147px @320/375px) */
  .hero-sub { min-height: 10rem; }                     /* dekt de langste subtitel (158px @320px) */
  .hero-bg::after {
    background: linear-gradient(
      180deg,
      rgba(10,14,39,0.7) 0%,
      rgba(10,14,39,0.6) 40%,
      rgba(10,14,39,0.8) 100%
    );
  }
  .hero-sub { font-size: 1rem; }

  .tension-grid { grid-template-columns: 1fr; gap: 40px; }
  .pillars-grid { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: 1fr; }
  .timeline-track { grid-template-columns: 1fr; }
  .timeline-line { display: none; }
  .events-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .hero-stats { gap: 24px; }
  .hero-stat-num { font-size: 1.4rem; }

  .pub-grid { grid-template-columns: 1fr; }
  .tools-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .events-grid { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-stats { flex-wrap: wrap; }
  .pillars-grid { gap: 16px; }
  .pillar { padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   PILLAR PAGES, diensten detail
   ═══════════════════════════════════════════════════════════════ */

/* ── PILLAR HERO ──────────────────────────────────────────────── */
.pillar-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  padding: 0;
}

.pillar-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,14,39,0.3) 0%,
    rgba(10,14,39,0.65) 60%,
    rgba(10,14,39,0.85) 100%
  );
}

.pillar-hero-content {
  position: relative;
  z-index: 1;
  max-width: 780px;
  width: 100%;
  margin: 0 auto;
  padding: 80px 24px 48px;
}

.pillar-back-top {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate-light);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
  transition: color 0.2s;
}
.pillar-back-top:hover { color: #fff; }

.pillar-hero-content h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
  margin-bottom: 16px;
}

.pillar-lead {
  font-size: 1.15rem;
  color: var(--slate-light);
  line-height: 1.65;
  max-width: 640px;
}

/* ── PILLAR BODY ──────────────────────────────────────────────── */
.pillar-body {
  max-width: 1170px;
  margin: 0 auto;
  padding: 56px 24px 40px;
  color: var(--text);
  line-height: 1.7;
}

.pillar-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 48px 0 16px;
  line-height: 1.25;
}

.pillar-body > h2:first-child {
  margin-top: 0;
}

.pillar-section + .pillar-section {
  padding-top: 16px;
}

.pillar-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 32px 0 12px;
}

.pillar-body p {
  font-size: 1rem;
  margin-bottom: 16px;
}

.pillar-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}

.pillar-body ul li {
  position: relative;
  padding: 6px 0 6px 24px;
  font-size: 1rem;
  line-height: 1.6;
}

.pillar-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 600;
}

.pillar-body .usp-mid-img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: 32px 0;
  box-shadow: 0 16px 48px rgba(10,14,39,0.08);
}

.pillar-body blockquote {
  border-left: 4px solid var(--orange);
  margin: 32px 0;
  padding: 20px 24px;
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.7;
}

/* ── PILLAR TABLES ────────────────────────────────────────────── */
.pillar-body .table-responsive {
  overflow-x: auto;
  margin: 24px 0 32px;
  -webkit-overflow-scrolling: touch;
}

.pillar-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  min-width: 500px;
}

.pillar-body table thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 16px;
  text-align: left;
  white-space: nowrap;
}

.pillar-body table thead th:first-child {
  border-radius: var(--radius) 0 0 0;
}

.pillar-body table thead th:last-child {
  border-radius: 0 var(--radius) 0 0;
}

.pillar-body table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.5;
}

.pillar-body table tbody tr:last-child td {
  border-bottom: none;
}

.pillar-body table tbody tr:nth-child(even) {
  background: var(--surface-2);
}

.pillar-body table tbody td strong {
  color: var(--text-heading);
  font-weight: 600;
}

/* ── PILLAR CTA ───────────────────────────────────────────────── */
.pillar-cta {
  padding: 64px 0;
  background: var(--surface-2);
}

.pillar-cta-inner {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.pillar-cta-inner h2 {
  font-size: clamp(1.5rem, 3.5vw, 2rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 12px;
}

.pillar-cta-inner p {
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 28px;
}

.pillar-cta-btns {
  display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;
}

/* ── PILLAR BACK LINK ─────────────────────────────────────────── */
.pillar-back {
  text-align: center;
  padding: 32px 24px;
  background: var(--surface);
}

.pillar-back a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: color 0.2s, gap 0.2s;
}

.pillar-back a:hover {
  color: var(--orange-hot);
  gap: 12px;
}

/* ── PILLAR RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  .pillar-hero {
    min-height: 320px;
  }
  .pillar-hero-content {
    padding: 60px 20px 36px;
  }
  .pillar-body {
    padding: 40px 20px 32px;
  }
}

@media (max-width: 600px) {
  .pillar-hero {
    min-height: 280px;
  }
  .pillar-hero-content h1 {
    font-size: 1.75rem;
  }
  .pillar-body table {
    font-size: 0.875rem;
  }
  .pillar-body table thead th,
  .pillar-body table tbody td {
    padding: 10px 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DIENSTEN OVERVIEW
   ═══════════════════════════════════════════════════════════════════ */

/* ── Subpage Hero (shared base) ──────────────────────────────────── */

.subpage-hero {
  position: relative;
  padding: 160px 0 80px;
  overflow: hidden;
  color: #fff;
}
.subpage-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 8s ease-out;
}
.subpage-hero.revealed .subpage-hero-bg {
  transform: scale(1);
}
.subpage-hero-overlay {
  position: absolute;
  inset: 0;
}
.subpage-hero-content {
  position: relative;
  z-index: 2;
}
.subpage-hero .section-label {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.8rem;
  margin-bottom: 12px;
}
.subpage-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 16px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.subpage-hero-sub {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  max-width: 680px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.2);
}

/* ── Diensten: zakelijk/vertrouwen ────────────────────────────────── */
.subpage-hero--diensten .subpage-hero-overlay {
  background: linear-gradient(135deg, rgba(15,23,42,0.78) 0%, rgba(15,23,42,0.55) 100%);
}
.subpage-hero--diensten .section-label {
  color: var(--orange);
}

/* ── Tools: cinematic tech ────────────────────────────────────────── */
.subpage-hero--tools {
  padding-bottom: 100px;
  display: flex;
  align-items: center;
}
.subpage-hero--tools .container {
  padding-left: 8vw;
  padding-right: 8vw;
  text-align: left;
}
.subpage-hero--tools .subpage-hero-overlay {
  background: linear-gradient(160deg, rgba(5,8,20,0.9) 0%, rgba(10,25,60,0.65) 100%);
}
.subpage-hero--tools .section-label {
  color: #4A9EFF;
  letter-spacing: 0.28em;
  opacity: 0.8;
}
.subpage-hero--tools .subpage-hero-sub {
  max-width: 500px;
  margin: 0;
}
@keyframes tools-slowzoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
.subpage-hero--case .subpage-hero-bg {
  background-position: top center;
}
.subpage-hero--tools .subpage-hero-bg {
  animation: tools-slowzoom 20s ease-in-out infinite alternate;
  transition: none;
}

/* Grid lines overlay */
.tools-hero-grid {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(74,158,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,158,255,0.06) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Starfield canvas */
.tools-hero-stars {
  position: absolute; inset: 0; z-index: 3;
  width: 100%; height: 100%; pointer-events: none;
}

/* Scan lines */
.tools-hero-scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
  );
}

/* Cinematic h1, exact /richard V4 */
.tools-hero-h1 {
  font-size: clamp(1.75rem, 6vw, 8rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  margin-bottom: 1.5rem !important;
  text-shadow: none !important;
  font-family: Arial, sans-serif !important;
}
.tools-h1-line1 {
  display: block;
  color: #fff;
}
.tools-h1-line2 {
  display: block;
  color: #4A9EFF;
  text-shadow: 0 0 40px rgba(74,158,255,0.5), 0 0 80px rgba(74,158,255,0.2);
}

/* Glitch driven by JS, no CSS animation */

/* Label pulse */
.tools-hero-label {
  animation: label-pulse 3s ease-in-out infinite;
}
@keyframes label-pulse {
  0%,100% { text-shadow: 0 0 0 transparent; }
  50%      { text-shadow: 0 0 16px rgba(100,200,255,0.6); }
}

/* Typing cursor, exact /richard V4 style */
.tools-cursor {
  display: inline-block; width: 3px; height: 0.85em;
  background: #4A9EFF; margin-left: 2px;
  animation: tools-blink 0.8s step-end infinite;
  vertical-align: middle;
}
@keyframes tools-blink { 50% { opacity: 0; } }

/* ── Kennis: academisch/warm ──────────────────────────────────────── */
.subpage-hero--kennis .subpage-hero-overlay {
  background: linear-gradient(135deg, rgba(30,20,10,0.75) 0%, rgba(50,30,15,0.55) 100%);
}
.subpage-hero--kennis .section-label {
  color: rgba(255,210,150,0.9);
}

.diensten-overview {
  padding: 20px 0 80px;
}

/* ── Feature blocks (pillar tiles, non-clickable) ─────────────────────── */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px 24px;
}
.feature-block {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 22px 22px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}
.feature-block-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.375rem;
}
.feature-block-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.feature-block-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 0;
  line-height: 1.3;
}
.feature-block-desc {
  font-size: 0.8125rem;
  color: var(--text-dim);
  line-height: 1.6;
}
a.feature-block--link {
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
a.feature-block--link:hover {
  border-color: rgba(199,72,5,0.35);
  box-shadow: 0 4px 18px rgba(199,72,5,0.08);
}
a.feature-block--link:hover .feature-block-more {
  color: #E85D15;
}
.feature-block-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 600;
  color: #C74805;
  margin-top: 6px;
  transition: color 0.15s;
}
.feature-block-more .fa-arrow-right {
  font-size: 0.7rem;
  transition: transform 0.15s;
}
a.feature-block--link:hover .feature-block-more .fa-arrow-right {
  transform: translateX(3px);
}
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .feature-grid { grid-template-columns: 1fr; }
}


.diensten-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.diensten-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

.dienst-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
  text-decoration: none;
  color: inherit;
  position: relative;
}

.dienst-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(10,14,39,0.1);
  border-color: var(--orange);
}

.dienst-card-img {
  height: 110px;
  background-size: cover;
  background-position: center;
  position: relative;
  transition: transform 0.5s var(--ease);
}

.dienst-card:hover .dienst-card-img {
  transform: scale(1.05);
}

.dienst-card-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10,14,39,0.4) 100%);
}

.dienst-card-body {
  padding: 14px 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dienst-card-icon { display: none; }

.dienst-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 6px;
}

.dienst-card p {
  font-size: 0.875rem;
  color: var(--text-dim);
  line-height: 1.5;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dienst-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 10px;
  transition: gap 0.2s;
}

.dienst-card:hover .dienst-card-arrow {
  gap: 10px;
}

@media (max-width: 1024px) {
  .diensten-grid--3col { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .diensten-grid { grid-template-columns: 1fr; }
  .diensten-grid--3col { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .subpage-hero { padding: 120px 0 50px; }
  .dienst-card-img { height: 120px; }
}

/* ═══════════════════════════════════════════════════════════════════
   404 ERROR PAGE
   ═══════════════════════════════════════════════════════════════════ */

.error-page {
  padding: 180px 0 120px;
  text-align: center;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.error-content {
  max-width: 520px;
  margin: 0 auto;
}

.error-code {
  font-size: clamp(4rem, 12vw, 8rem);
  font-weight: 800;
  /* a11y: opacity:0.3 op --orange (#C74805) over witte bg → blended #f1c9b3 = 1.52:1 (fails 3:1 voor grote tekst).
     Vaste kleur var(--text-dim, #6B7185) = 4.96:1 op wit; visueel subtiel maar WCAG-compliant. */
  color: var(--text-dim, #6B7185);
  line-height: 1;
  margin-bottom: 16px;
}

.error-content h1 {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 12px;
}

.error-content p {
  font-size: 1.05rem;
  color: var(--text);
  margin-bottom: 32px;
}

.error-links {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.btn-outline:hover {
  border-color: var(--orange);
  color: var(--orange);
}

/* ═══════════════════════════════════════════════════════════════════
   KENNIS / PUBLICATIES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Homepage kennis section ───────────────────────────────────── */
.kennis {
  padding: 80px 0;
  background: var(--surface-2);
}
.kennis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.kennis-more {
  text-align: center;
  margin-top: 40px;
}

/* ── Publication cards (shared between homepage + listing) ────── */
.pub-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-2);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.pub-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: var(--orange);
}
.pub-card-img {
  overflow: hidden;
  height: 200px;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s var(--ease);
  position: relative;
}
.pub-card:hover .pub-card-img {
  transform: scale(1.05);
}
.pub-card-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.pub-card-body h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.35;
}
.pub-card-body p {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.55;
  flex: 1;
}
.pub-card-date {
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pub-card-date i {
  font-size: 0.7rem;
  color: var(--orange);
}

/* ── Publicaties listing page ──────────────────────────────────── */
/* pub-header → now uses .subpage-hero--kennis */
.pub-listing {
  padding: 60px 0 80px;
}
.pub-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* ── Reading progress bar ────────────────────────────────────── */
.reading-progress {
  position: fixed;
  top: 72px;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 999;
  transition: transform 0.1s linear;
}

/* ── Publication hero ──────────────────────────────────────────── */
/* De band is 'cover': bij een vaste hoogte wordt de uitsnede smaller naarmate het
   scherm breder is, want de afbeelding schaalt mee met de breedte en de band niet.
   Op 3440px bleef 28% van de beeldhoogte over en sneuvelden op elk artikel de
   hoofden. Daarom groeit de hoogte mee (34vw), met 560px als ondergrens zodat
   gewone schermen ongemoeid blijven en 900px als plafond zodat de hero op een
   ultrawide niet het hele venster opeet. */
.pub-hero {
  width: 100%;
  height: clamp(560px, 34vw, 900px);
  overflow: hidden;
  position: relative;
  margin-top: 64px;
}
/* 45% i.p.v. 60%: het onderwerp van een artikelbeeld zit in de bovenste helft
   (gezichten, handen); de onderste helft is bureau en vloer. */
.pub-hero-img {
  position: absolute;
  inset: -100px 0 -100px;
  background-size: cover;
  background-position: center 45%;
  will-change: transform;
}
.pub-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.7) 100%);
}
.pub-hero-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0 48px 36px;
  max-width: 900px;
}
.pub-hero-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  margin: 0;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4);
}
@media (max-width: 768px) {
  .pub-hero { height: 400px; }
  .pub-hero-text { padding: 0 20px 24px; }
  .pub-hero-title { font-size: 1.5rem; }
}

/* ── Publication detail page ───────────────────────────────────── */
.pub-article {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 24px 60px;
}

/* ── Slot-CTA: één blok onder élk artikel ───────────────────────────
   Stond eerder als losse <h2>-sectie in de artikeltekst van dertien
   artikelen (elk in een eigen vorm) en op de overige twintig helemaal
   niet. Nu één kaart, gerenderd door het sjabloon; alleen de tekst
   erin is per artikel. Donker blok tegen de witte artikelpagina, zodat
   hij opvalt zonder te schreeuwen. */
.pub-cta {
  display: block;
  margin: 56px 0 8px;
  padding: 40px 44px;
  border-radius: 14px;
  border-left: 6px solid var(--orange, #C74805);
  background: linear-gradient(135deg, #071940 0%, #0d285c 100%);
  color: #fff;
  box-shadow: 0 18px 40px rgba(7, 25, 64, 0.18);
}
.pub-cta-title {
  margin: 0 0 14px;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
}
.pub-cta-body { color: #cfd9ea; font-size: 1rem; line-height: 1.65; }
.pub-cta-body > :first-child { margin-top: 0; }
.pub-cta-body > :last-child { margin-bottom: 0; }
.pub-cta-body p { margin: 0 0 14px; color: inherit; }
.pub-cta-body ul { margin: 0 0 14px; padding-left: 22px; }
.pub-cta-body li { margin-bottom: 8px; color: inherit; }
.pub-cta-body strong { color: #fff; }
.pub-cta-body a { color: #ffb787; text-decoration: underline; }
.pub-cta-body a:hover { color: #fff; }
.pub-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: 26px;
}
.pub-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 8px;
  background: var(--orange, #C74805);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.pub-cta-btn:hover { background: #b03f02; transform: translateY(-1px); color: #fff; }
.pub-cta-btn i { font-size: .85em; }
.pub-cta-alt { color: #cfd9ea; font-weight: 600; text-decoration: underline; }
.pub-cta-alt:hover { color: #fff; }
@media (max-width: 768px) {
  .pub-cta { margin: 40px 0 4px; padding: 28px 22px; border-radius: 12px; }
  .pub-cta-title { font-size: 1.25rem; }
  .pub-cta-actions { gap: 12px 18px; }
  .pub-cta-btn { width: 100%; justify-content: center; }
}
/* ── Publication summary block ──────────────────────────────────── */
.pub-summary {
  margin: 0 0 40px;
  border-radius: 12px;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
  border: 1px solid #c8e0f5;
  overflow: hidden;
}
.pub-summary-inner {
  padding: 24px 28px 20px;
}
.pub-summary-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 16px;
}
.pub-summary-label i {
  font-size: 0.8rem;
}
.pub-summary-text {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #1e293b;
}
.pub-summary-read-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.pub-summary-read-btn:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}
.pub-summary-read-btn i {
  font-size: 0.8rem;
}
@media (prefers-color-scheme: dark) {
  .pub-summary {
    background: linear-gradient(135deg, #1e2d45 0%, #162236 100%);
    border-color: #2d4a6e;
  }
  .pub-summary-text {
    color: #e2e8f0;
  }
}
/* Dark theme class (Audirium theme switcher) */
.theme-dark .pub-summary {
  background: linear-gradient(135deg, #1e2d45 0%, #162236 100%);
  border-color: #2d4a6e;
}
.theme-dark .pub-summary-text {
  color: #e2e8f0;
}
/* ─────────────────────────────────────────────────────────────────── */
.pub-article-header {
  margin-bottom: 48px;
}
.pub-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--orange);
  text-decoration: none;
  margin-bottom: 16px;
}
.pub-back:hover {
  text-decoration: underline;
}
.pub-article-date {
  font-size: 0.85rem;
  color: var(--text-dim);
}
.pub-article-header h1 {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
}
.pub-article-body {
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--text);
}
.pub-article-body h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 48px 0 16px;
  color: var(--dark);
  scroll-margin-top: 100px;
  clear: both;
}
.pub-article-body h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--dark);
  scroll-margin-top: 100px;
}
.pub-article-body p {
  margin-bottom: 20px;
}
.pub-article-body ul,
.pub-article-body ol {
  margin: 0 0 20px 24px;
}
.pub-article-body li {
  margin-bottom: 8px;
}
.pub-article-body blockquote {
  border-left: 4px solid var(--orange);
  padding: 16px 24px;
  margin: 32px 0;
  background: var(--surface-2);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: italic;
  color: var(--text-dim);
}
.pub-article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 2rem 0;
  font-size: 0.875rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,0.07);
}
.pub-article-body table th,
.pub-article-body table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid #eef0f4;
}
.pub-article-body table td {
  color: #374151;
  vertical-align: top;
}
.pub-article-body table thead th {
  background: #1a2540;
  color: #fff;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-bottom: 2px solid #e8611a;
}
.pub-article-body table tbody tr:nth-child(even) {
  background: #f8f9fb;
}
.pub-article-body table tbody tr:hover {
  background: #f0f4ff;
}
.pub-article-body table tbody tr:last-child td {
  border-bottom: none;
}
.pub-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 24px 0;
}
.pub-figure {
  margin: 32px 0;
  text-align: center;
}
.pub-figure img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--border, #e2e8f0);
  margin: 0;
}
.pub-figure--sm {
  float: right;
  width: 40%;
  margin: 4px 0 20px 28px;
  clear: right;
  text-align: center;
}
.pub-figure--sm img {
  max-width: 100%;
}
@media (max-width: 768px) {
  .pub-figure--sm {
    float: none;
    width: auto;
    margin: 0 0 20px;
  }
}
.pub-figure figcaption {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--text-dim, #64748b);
  font-style: italic;
}
.pub-article-body sup a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 600;
}

/* ── Publicatie: info-box (citaten) ─────────────────────────────── */
.pub-article-body .info-box {
  background: var(--surface-2);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 28px;
  margin: 32px 0;
  font-size: 0.975rem;
  color: var(--text);
}
.pub-article-body .info-box strong {
  display: block;
  margin-bottom: 10px;
  color: var(--dark);
  font-size: 1rem;
}

/* ── Publicatie: help-box ("Hoe kan Audirium u helpen?") ─────────── */
.pub-article-body table td.sev-high {
  background: #FEE2E2;
  color: #B91C1C;
  font-weight: 600;
  white-space: nowrap;
}
.pub-article-body table td.sev-mid {
  background: #FDEEE5;
  color: #C24000;
  font-weight: 600;
  white-space: nowrap;
}

/* Concept card badge (tegel in lijst) */
.pub-card-concept-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #ca8a04;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
  z-index: 2;
}
.dienst-card-img {
  position: relative;
}
.pub-card--concept,
.pub-card--concept.dienst-card {
  opacity: 0.85;
  outline: 2px dashed rgba(202,138,4,0.5);
  outline-offset: -2px;
}

/* Concept banner */
/* ── Verwijzing naar een verwant artikel ──────────────────────────────────────
   Twee artikelen kunnen over hetzelfde onderwerp gaan en toch een andere vraag
   beantwoorden. Wie via een zoekmachine op de verkeerde van de twee landt, hoort
   dat meteen te zien in plaats van het hele stuk door te moeten. Dit blok stuurt
   die lezer door, en vertelt tegelijk aan een zoekmachine welke pagina waarvoor
   bedoeld is, het cluster "auditrapport" landde tot 02-08-2026 op het essay over
   advies in plaats van op de praktische handleiding. */
/* Bewust GEEN flex: dan wordt elke tekstknoop een eigen flex-item en breekt de zin
   in kolommen naast de link. De pijl staat daarom absoluut in de padding-ruimte. */
.pub-seealso {
  position: relative;
  margin: 0 0 28px;
  padding: 14px 18px 14px 42px;
  background: var(--surface-2);
  border-left: 3px solid var(--orange);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text);
}
.pub-seealso::before {
  content: "\2192";
  position: absolute;
  left: 18px;
  top: 14px;
  color: var(--orange);
  font-weight: 700;
}
.pub-seealso a { font-weight: 600; }
@media (max-width: 560px) {
  .pub-seealso { padding: 12px 14px 12px 34px; font-size: .92rem }
  .pub-seealso::before { left: 13px; top: 12px }
}

.pub-concept-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: repeating-linear-gradient(
    -45deg,
    rgba(234,179,8,0.08),
    rgba(234,179,8,0.08) 10px,
    transparent 10px,
    transparent 20px
  );
  border: 1.5px solid rgba(234,179,8,0.55);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 28px;
  color: var(--text, #e2e8f0);
}
.pub-concept-badge {
  flex-shrink: 0;
  background: #ca8a04;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 4px;
}
.pub-concept-text {
  font-size: 0.875rem;
  color: #d4a017;
  line-height: 1.5;
}

.pub-help-box {
  background: var(--orange-soft);
  border: 1px solid rgba(199,72,5,0.18);
  border-radius: var(--radius);
  padding: 32px 36px;
  margin: 48px 0 32px;
}
.pub-help-box h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--orange);
  margin: 0 0 14px !important;
}
.pub-help-box p {
  margin-bottom: 16px;
  color: var(--text);
}
.pub-help-box ul {
  margin: 0 0 20px 20px;
}
.pub-help-box li {
  margin-bottom: 10px;
  color: var(--text);
}
.pub-help-box a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
}
.pub-help-box a:hover {
  text-decoration: underline;
}

/* ── Responsive: kennis + publicaties ──────────────────────────── */
@media (max-width: 900px) {
  .kennis-grid,
  .pub-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .kennis-grid,
  .pub-grid {
    grid-template-columns: 1fr;
  }
  .pub-article-header h1 {
    font-size: 1.75rem;
  }
  .subpage-hero h1 {
    font-size: 1.75rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN: BODY EDITOR
   ═══════════════════════════════════════════════════════════════════ */

/* ── WYSIWYG toolbar ────────────────────────────────────────────── */
.pub-wysiwyg-toolbar {
  display: none;
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  z-index: 500;
  background: #12172b;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 8px 20px;
  align-items: center;
  gap: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  flex-wrap: wrap;
}
.pub-wysiwyg-toolbar.visible { display: flex; }
.pwt-group { display: flex; gap: 2px; }
.pwt-btn {
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.65);
  border-radius: 5px;
  padding: 5px 9px;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: Inter, sans-serif;
  cursor: pointer;
  min-width: 30px;
  transition: background 0.12s, color 0.12s;
}
.pwt-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.pwt-sep { width: 1px; background: rgba(255,255,255,0.1); margin: 2px 6px; align-self: stretch; }
.pwt-link-bar {
  display: none;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.pwt-link-bar.open { display: flex; }
.pwt-link-input {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 5px;
  color: #fff;
  font-size: 0.8rem;
  padding: 4px 10px;
  width: 220px;
  font-family: Inter, sans-serif;
}
.pwt-link-input:focus { outline: none; border-color: var(--orange); }
.pwt-link-ok, .pwt-link-x {
  background: none;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.7);
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 0.8rem;
  cursor: pointer;
}
.pwt-link-ok:hover { border-color: var(--orange); color: var(--orange); }
.pwt-spacer { flex: 1; }
.pwt-cancel {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.6);
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  cursor: pointer;
  font-family: Inter, sans-serif;
  margin-right: 6px;
  transition: all 0.12s;
}
.pwt-cancel:hover { border-color: rgba(255,255,255,0.4); color: #fff; }
.pwt-save {
  background: var(--orange);
  border: none;
  color: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Inter, sans-serif;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: opacity 0.12s;
}
.pwt-save:hover { opacity: 0.88; }

/* Bewerken toggle (admin only, in article header) */
.pub-edit-toggle {
  background: var(--orange);
  border: 1px solid var(--orange);
  color: #fff;
  border-radius: 6px;
  padding: 5px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  font-family: Inter, sans-serif;
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 4px rgba(199,72,5,0.25);
  transition: all 0.2s;
}
.pub-edit-toggle:hover { background: #AB3E04; border-color: #AB3E04; box-shadow: 0 2px 8px rgba(199,72,5,0.35); }

/* Excerpt admin field */
.pub-excerpt-admin {
  font-size: 0.9rem;
  color: var(--text-dim);
  font-style: italic;
  margin-top: 12px;
  border: 1px dashed rgba(0,0,0,0.15);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: default;
}
.pub-excerpt-admin:empty::before {
  content: attr(data-placeholder);
  color: rgba(0,0,0,0.25);
}
.pub-summary-admin {
  font-size: 0.875rem;
  color: #2563eb;
  font-style: italic;
  margin-top: 8px;
  border: 1px dashed #93c5fd;
  border-radius: 4px;
  padding: 6px 10px;
  cursor: default;
  background: #f0f7ff;
}
.pub-summary-admin:empty::before {
  content: attr(data-placeholder);
  color: rgba(37,99,235,0.35);
}
.pub-summary-ai-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
}
.pub-summary-ai-input {
  flex: 1;
  font-size: 0.8125rem;
  border: 1px solid #93c5fd;
  border-radius: 4px;
  padding: 5px 8px;
  background: #fff;
  color: #1e293b;
  outline: none;
}
.pub-summary-ai-input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.pub-summary-ai-go {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #2563eb;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 5px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.pub-summary-ai-go:disabled { opacity: 0.6; cursor: default; }
.pub-summary-ai-close {
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 4px 6px;
  border-radius: 4px;
}
.pub-summary-ai-close:hover { background: #e2e8f0; }
.pwt-ai-summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  background: #eff6ff;
  color: #2563eb;
  border: 1px solid #bfdbfe;
  border-radius: 4px;
  padding: 4px 10px;
  cursor: pointer;
  font-weight: 600;
}
.pwt-ai-summary:hover { background: #dbeafe; }

/* Date input in edit mode */
.pub-date-input {
  font-size: 0.85rem;
  color: var(--text-dim);
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: Inter, sans-serif;
  background: transparent;
}

/* Active edit areas */
.wysiwyg-active {
  outline: 2px solid rgba(199,72,5,0.35) !important;
  border-radius: 4px;
  caret-color: var(--orange);
}

/* ── Edit save toast ───────────────────────────────────────────── */
.edit-save-toast {
  position: fixed;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 10px 24px;
  border-radius: var(--radius);
  color: #fff;
  font-size: 0.85rem;
  font-family: 'Inter', sans-serif;
  z-index: 10001;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
}
.edit-save-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   PUBLICATION: TOC SIDEBAR + FOOTNOTES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Layout: TOC left, article right ───────────────────────────── */
.pub-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 40px;
  max-width: 1300px;
  margin: 0 auto;
  padding: 32px 24px 0;
}
.pub-layout.no-toc {
  grid-template-columns: 1fr;
  max-width: 760px;
}
.pub-layout.no-toc .pub-article {
  max-width: 860px;
  padding: 20px 0 60px;
}

/* ── TOC sidebar ───────────────────────────────────────────────── */
.pub-toc {
  position: relative;
}
.pub-toc-inner {
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  padding-right: 16px;
  padding-top: 5px;
}
.pub-toc-inner h4 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--orange);
  margin-bottom: 16px;
}
.pub-toc-link {
  display: block;
  padding: 6px 0 6px 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid var(--border);
  transition: color 0.2s, border-color 0.2s;
  line-height: 1.4;
  margin-bottom: 2px;
}
.pub-toc-link:hover {
  color: var(--text);
}
.pub-toc-link.active {
  color: var(--orange);
  border-left-color: var(--orange);
  font-weight: 500;
}
.pub-toc-link.toc-h2 {
  font-weight: 500;
  font-size: 0.85rem;
}
.pub-toc-link.toc-sub {
  padding-left: 28px;
  font-size: 0.8rem;
  border-left-color: transparent;
}
.toc-group {
  margin-bottom: 2px;
}
.toc-h2-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.toc-h2-row .pub-toc-link {
  flex: 1;
  min-width: 0;
}
.toc-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-dim);
  padding: 0;
  transition: transform 0.2s, color 0.2s;
  margin-top: 7px;
}
.toc-chevron:hover {
  color: var(--orange);
}
.toc-group.expanded .toc-chevron {
  transform: rotate(180deg);
  color: var(--orange);
}
.toc-children {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}
.toc-group.expanded .toc-children {
  max-height: 600px;
}

/* ── Article adjustments for sidebar layout ────────────────────── */
.pub-layout .pub-article {
  max-width: none;
  padding: 0 0 60px;
  min-width: 0; /* laat grid-track krimpen onder min-content (brede tabellen) → geen mobiele overflow */
}

/* ── Footnote citations ────────────────────────────────────────── */
sup.adv-cite {
  font-size: 0.7em;
  line-height: 0;
  vertical-align: super;
}
sup.adv-cite a {
  color: var(--orange);
  text-decoration: none;
  font-weight: 700;
  padding: 0 2px;
  border-radius: 3px;
  transition: background 0.15s;
}
sup.adv-cite a:hover {
  background: var(--orange-soft);
}

/* ── Footnote tooltip ──────────────────────────────────────────── */
.cite-tooltip {
  position: absolute;
  z-index: 9999;
  max-width: 420px;
  padding: 12px 16px;
  background: var(--navy);
  color: var(--white);
  font-size: 0.85rem;
  line-height: 1.5;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
  pointer-events: auto;
  animation: tooltipFadeIn 0.15s ease;
}
@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Reference list styling ────────────────────────────────────── */
ol.adv-references,
ol.adv-ref-list {
  padding-left: 24px;
  margin-top: 16px;
}
.adv-ref-entry {
  font-size: 0.9rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.3s;
}
.adv-ref-entry.ref-highlight {
  background: var(--orange-soft);
}

/* ── Responsive: collapse TOC on mobile ────────────────────────── */
@media (max-width: 900px) {
  .pub-layout {
    grid-template-columns: 1fr;
    padding-top: 80px;
  }
  .pub-toc {
    display: none;
  }
  .pub-layout .pub-article {
    max-width: 760px;
    margin: 0 auto;
    width: 100%; /* anker aan grid-track: breekt circulaire auto-sizing rond brede tabellen */
  }
  .pub-article-body { overflow-wrap: break-word; }
  /* brede tabellen horizontaal scrollbaar i.p.v. de pagina laten overlopen */
  .pub-article-body table { display: block; overflow-x: auto; width: 100%; }

  /* Opt-in: matrixtabellen (3 kolommen, veel tekst) stapelen tot kaarten i.p.v.
     horizontaal te scrollen; de kolomkop komt terug als label boven de cel.
     Alleen actief op tabellen met class="euc-matrix", de rest blijft scrollen. */
  .pub-article-body table.euc-matrix { display: block; overflow-x: visible; box-shadow: none; }
  .pub-article-body table.euc-matrix thead { display: none; }
  .pub-article-body table.euc-matrix tbody,
  .pub-article-body table.euc-matrix tr,
  .pub-article-body table.euc-matrix td { display: block; width: 100%; }
  .pub-article-body table.euc-matrix tbody tr {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 10px;
    margin-bottom: 14px;
    padding: 6px 0 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  }
  .pub-article-body table.euc-matrix td { border-bottom: none; padding: 6px 16px; }
  .pub-article-body table.euc-matrix td:first-child {
    font-weight: 700;
    font-size: 1rem;
    color: #1a2540;
    padding-top: 10px;
  }
  .pub-article-body table.euc-matrix td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.6875rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #e8611a;
    font-weight: 700;
    margin-bottom: 3px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   TOOLS PAGES
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tools header ────────────────────────────────────────────────── */
/* tools-header → now uses .subpage-hero--tools */

/* ══════════════════════════════════════════════════════
   STATS BAR
══════════════════════════════════════════════════════ */
.tools-stats-bar {
  background: #080D1A;
  border-top: 1px solid rgba(74,158,255,0.15);
  border-bottom: 1px solid rgba(74,158,255,0.15);
  padding: 1.5rem 2rem;
}
.tools-stats-inner {
  max-width: 800px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  gap: 0; flex-wrap: wrap;
}
.tsb-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 2.5rem; text-align: center;
}
.tsb-num {
  font-size: 2.25rem; font-weight: 800; color: rgba(100,200,255,1);
  line-height: 1; display: block;
  text-shadow: 0 0 20px rgba(74,158,255,0.5);
}
.tsb-lbl {
  font-size: 0.75rem; color: rgba(255,255,255,0.45);
  letter-spacing: 0.1em; text-transform: uppercase;
  margin-top: 0.25rem; font-family: 'Inter', sans-serif;
}
.tsb-sep {
  width: 1px; height: 2.5rem;
  background: rgba(74,158,255,0.2);
}

/* Stagger reveal animation */
.ts-stagger { opacity: 0; transform: translateY(28px); }
.ts-stagger.visible { opacity: 1; transform: none; }
.ts-stagger { transition: opacity 0.6s cubic-bezier(.4,0,.2,1), transform 0.6s cubic-bezier(.4,0,.2,1); }

/* ── /tools, derde domein: de zes beveiligingsfeiten ──────────────
   Waren zes regels in een zwarte terminal met groene monospace en een
   '> '-prefix. Nu dezelfde kaartvorm als de tools erboven, zodat de
   sectie bij de rest van de pagina hoort. Twee kolommen: het zijn hele
   zinnen, en op drie kolommen worden dat vier regels per kaart. */
.ts-facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ts-fact {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.ts-fact:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 32px rgba(10,14,39,0.08);
}
.ts-fact-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.ts-fact-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 2px 0 6px;
}
.ts-fact-body {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .ts-facts { grid-template-columns: 1fr; }
}

/* ── Tools sections (legacy, keep for non-section pages) ──── */
.tools-section {
  padding: 64px 0;
  background: var(--surface);
}
.tools-section.alt {
  background: var(--surface-2);
}

.tools-section-header {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 40px;
}
.tools-section-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
}
.tools-section-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 4px;
}
.tools-section-header p {
  font-size: 1rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ── Tools grid ──────────────────────────────────────────────────── */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 24px 24px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
  position: relative;
}
.tools-section.alt .tool-card {
  background: var(--surface);
}
.tool-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 56px rgba(10,14,39,0.1);
  border-color: var(--orange);
}

.tool-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.tool-card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 8px;
}

.tool-card p {
  font-size: 0.9375rem;
  color: var(--text-dim);
  line-height: 1.55;
  flex: 1;
}

.tool-card-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--orange);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 16px;
  transition: gap 0.2s;
}
.tool-card:hover .tool-card-arrow {
  gap: 10px;
}

/* ── Tool detail hero ────────────────────────────────────────────── */
.tool-hero {
  padding: 120px 0 48px;
  background: var(--surface-2);
}
.tool-hero .pillar-back-top {
  color: var(--text-dim);
  margin-bottom: 24px;
  display: inline-flex;
}
.tool-hero .pillar-back-top:hover {
  color: var(--orange);
}
.tool-hero-inner {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.tool-hero-icon {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  flex-shrink: 0;
}
.tool-hero-inner h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.tool-hero-short {
  font-size: 1.1rem;
  color: var(--text-dim);
  line-height: 1.6;
  margin-bottom: 20px;
  max-width: 600px;
}

/* ── Tool body reuses .pillar-body ───────────────────────────────── */
.tool-body {
  max-width: 1170px;
}

/* ── Nav active state ────────────────────────────────────────────── */
.nav-links a.active {
  color: #fff;
}

/* ── Responsive tools ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tool-hero-inner {
    flex-direction: column;
  }
}
@media (max-width: 600px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }
  /* tools-header → .subpage-hero handles this */
}

/* ═══════════════════════════════════════════════════════════════════
   CONTACT PAGE
   ═══════════════════════════════════════════════════════════════════ */

.contact-header {
  padding: 160px 0 72px;
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 40%, var(--navy-mid) 100%);
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.contact-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 70%, rgba(199,72,5,0.08) 0%, transparent 50%),
              radial-gradient(circle at 70% 30%, rgba(199,72,5,0.05) 0%, transparent 40%);
  pointer-events: none;
}
.contact-header h1 {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: 12px;
  position: relative;
}
.contact-header-sub {
  font-size: 1.1rem;
  color: var(--slate-light);
  max-width: 500px;
  margin: 0 auto;
  position: relative;
}

.contact-content {
  padding: 64px 0 80px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: flex-start;
}

/* ── Form ────────────────────────────────────────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-heading);
}
.form-group .required {
  color: var(--orange);
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.9375rem;
  color: var(--text);
  background: var(--surface);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-soft);
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

.contact-submit {
  align-self: flex-start;
  margin-top: 8px;
}

/* ── Success/Error ───────────────────────────────────────────────── */
.contact-success {
  text-align: center;
  padding: 48px 24px;
}
.contact-success-icon {
  font-size: 3rem;
  color: #059669;
  margin-bottom: 16px;
}
.contact-success h3 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 8px;
}
.contact-success p {
  color: var(--text-dim);
  font-size: 1rem;
}

.contact-error {
  padding: 16px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.2);
  border-radius: var(--radius);
  color: #DC2626;
  font-size: 0.9375rem;
  margin-top: 12px;
}

/* ── Info cards ──────────────────────────────────────────────────── */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.contact-info-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.contact-info-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10,14,39,0.06);
}
.contact-info-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.contact-info-card h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-heading);
  margin-bottom: 6px;
}
.contact-info-card p {
  font-size: 0.9375rem;
  color: var(--text);
  line-height: 1.5;
}
.contact-dim {
  font-size: 0.85rem !important;
  color: var(--text-dim) !important;
  margin-top: 4px;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   PRIVACY PAGE
   ═══════════════════════════════════════════════════════════════════ */

.privacy-body {
  max-width: 780px;
  margin: 0 auto;
  padding: 120px 24px 60px;
}
.privacy-body h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--text-heading);
  margin-bottom: 32px;
}
.privacy-body h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-heading);
  margin: 40px 0 12px;
}
.privacy-body p {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
}
.privacy-body ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.privacy-body ul li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}
.privacy-body ul li::before {
  content: '\2022';
  position: absolute;
  left: 0;
  color: var(--orange);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════
   DOCX UPLOAD BAR (admin only)
   ═══════════════════════════════════════════════════════════════════ */

.docx-upload-bar {
  padding: 20px 0;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.docx-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.docx-title {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--text);
  background: var(--surface);
}
.docx-title:focus {
  outline: none;
  border-color: var(--orange);
}
.docx-file-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.875rem;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s;
}
.docx-file-label:hover {
  border-color: var(--orange);
}
.docx-result {
  margin-top: 12px;
  font-size: 0.9rem;
  color: var(--text);
}
.docx-result a {
  color: var(--orange);
  font-weight: 600;
  text-decoration: none;
}

/* ── CASES ────────────────────────────────────────────────── */

/* Cases listing */
.cases-listing {
  padding: 60px 0 80px;
  background: var(--surface);
}
/* cases-grid inherits from diensten-grid */
.case-card {
  display: flex;
  gap: 24px;
  padding: 32px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.3s var(--ease), box-shadow 0.3s, border-color 0.3s;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(10,14,39,0.10);
  border-color: var(--orange);
}
.case-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 14px;
  font-size: 1.25rem;
}
.case-card-body {
  flex: 1;
  min-width: 0;
}
.case-card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 8px;
  font-size: 0.8rem;
  color: var(--slate);
}
.case-card-sector {
  font-weight: 600;
  color: var(--orange);
}
.case-card-duration {
  color: var(--slate-light);
}
.case-card-body h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.35;
}
.case-card-body p {
  margin: 0 0 12px;
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.55;
}
.case-card-services {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--slate-light);
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

/* Stagger case card reveals */
.cases-grid .case-card:nth-child(2) { transition-delay: 0.08s; }
.cases-grid .case-card:nth-child(3) { transition-delay: 0.16s; }
.cases-grid .case-card:nth-child(4) { transition-delay: 0.24s; }
.cases-grid .case-card:nth-child(5) { transition-delay: 0.32s; }

/* Case detail */
.case-hero-meta {
  display: flex;
  gap: 24px;
  margin-top: 16px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.8);
}
.case-hero-meta i {
  margin-right: 6px;
  color: var(--orange);
}
.breadcrumb-back {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  transition: color 0.2s;
}
.breadcrumb-back:hover {
  color: var(--orange);
}
.breadcrumb-back i {
  margin-right: 4px;
}
.case-detail {
  padding: 60px 0 80px;
}
.case-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 48px;
  align-items: start;
}
.case-section {
  margin-bottom: 48px;
}
.case-section-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--orange-soft);
  color: var(--orange);
  border-radius: 10px;
  font-size: 1rem;
  margin-bottom: 16px;
}
.case-section h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 16px;
}
.case-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate);
}
.case-quote {
  margin: 48px 0;
  padding: 32px 32px 32px 40px;
  background: var(--surface-2);
  border-left: 4px solid var(--orange);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  position: relative;
}
.case-quote-icon {
  position: absolute;
  top: -12px;
  left: 16px;
  font-size: 1.5rem;
  color: var(--orange);
  background: var(--surface);
  padding: 4px 8px;
  border-radius: 8px;
}
.case-quote p {
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 12px;
}
.case-quote cite {
  font-size: 0.9rem;
  font-style: normal;
  color: var(--slate);
  font-weight: 500;
}
.case-sidebar-card {
  padding: 28px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  position: sticky;
  top: 80px;
}
.case-sidebar-card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--orange);
}
.case-meta-list {
  margin: 0;
}
.case-meta-list dt {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--slate-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 16px;
}
.case-meta-list dt i {
  font-size: 0.85rem;
  color: var(--orange);
  width: 14px;
  text-align: center;
  flex-shrink: 0;
}
.case-meta-list dt:first-child {
  margin-top: 0;
}
.case-meta-list dd {
  margin: 4px 0 0;
  font-size: 0.95rem;
  color: var(--text);
}

/* ── Case body (rich pillar content) ────────────────────────────── */
.case-body {
  min-width: 0;
}
.case-body h2 {
  font-size: 1.35rem;
  font-weight: 600;
  margin: 40px 0 14px;
  color: var(--text);
}
.case-body h2:first-child { margin-top: 0; }
.case-body h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 28px 0 10px;
  color: var(--text);
}
.case-body p {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--slate);
  margin: 0 0 14px;
}
.case-body ul, .case-body ol {
  margin: 0 0 20px 0;
  padding-left: 1.4rem;
}
.case-body li {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--slate);
  margin-bottom: 6px;
}
.case-body img.usp-mid-img {
  width: 100%;
  border-radius: var(--radius-lg);
  margin: 32px 0;
  box-shadow: 0 12px 40px rgba(10,14,39,0.1);
}
.case-body .table-responsive {
  overflow-x: auto;
  margin: 20px 0 28px;
}
.case-body table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.case-body th {
  background: var(--navy);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
}
.case-body td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  line-height: 1.55;
  color: var(--slate);
}
.case-body tr:nth-child(even) td {
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .case-card {
    flex-direction: column;
    gap: 16px;
  }
  .case-grid {
    grid-template-columns: 1fr;
  }
  .case-main { min-width: 0; } /* laat grid-track krimpen onder min-content → geen mobiele overflow */
  .case-body { overflow-wrap: break-word; }
  .case-sidebar-card {
    position: static;
  }
  .case-hero-meta {
    flex-wrap: wrap;
    gap: 12px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   WOW-FACTOR ENHANCEMENTS, v0.11.0
   ═══════════════════════════════════════════════════════════════════ */

/* ── Gradient accent text in hero ────────────────────────────────── */
.hero h1 .accent,
.hero h1 .accent .editable {
  background: linear-gradient(135deg, var(--orange) 0%, #FF8A50 50%, var(--orange-hot) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Animated gradient border on service cards hover ─────────────── */
.service-card {
  background: var(--surface-2);
  position: relative;
  z-index: 0;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(10,14,39,0.1);
}

.service-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: linear-gradient(135deg, var(--orange), var(--orange-hot), var(--navy-light), var(--orange));
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: -1;
  pointer-events: none;
}
.service-card:hover::after {
  opacity: 1;
  animation: gradientBorder 3s ease infinite;
}

@keyframes gradientBorder {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Tool tags float animation ───────────────────────────────────── */
.tool-tag {
  transition: all 0.3s var(--ease);
}
.tool-tag:hover {
  border-color: var(--orange);
  color: var(--orange);
  background: var(--orange-soft);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(199,72,5,0.12);
}

/* ── Glow pulse on hero primary button ───────────────────────────── */
.hero .btn-primary {
  position: relative;
  overflow: visible;
}
.hero .btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--orange);
  z-index: -1;
  animation: btnPulse 3s ease-in-out infinite;
}
@keyframes btnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,72,5,0.4); }
  50% { box-shadow: 0 0 0 12px rgba(199,72,5,0); }
}
.hero .btn-primary {
  animation: btnPulse 3s ease-in-out infinite;
}

/* ── Hero outline buttons, high contrast over background image ──── */
.hero .btn-outline {
  background: rgba(255,255,255,0.10);
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.4);
  backdrop-filter: blur(4px);
}
.hero .btn-outline:hover {
  background: rgba(255,255,255,0.20);
  border-color: rgba(255,255,255,0.6);
  color: #fff;
  transform: translateY(-2px);
}

/* ── CTA section: animated gradient background ───────────────────── */
.cta {
  background: linear-gradient(-45deg, var(--surface), var(--surface-2), var(--orange-soft), var(--surface));
  background-size: 400% 400%;
  animation: ctaGradient 12s ease infinite;
}
@keyframes ctaGradient {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── Kennis / pub cards: image zoom on hover ─────────────────────── */
.pub-card {
  overflow: hidden;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.pub-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(10,14,39,0.12);
}
.pub-card-img {
  transition: transform 0.6s var(--ease);
}
.pub-card:hover .pub-card-img {
  transform: scale(1.08);
}

/* ── Hero stats: glow effect ─────────────────────────────────────── */
.hero-stat-num {
  text-shadow: 0 0 20px rgba(199,72,5,0.3);
}

/* ── Section divider lines ───────────────────────────────────────── */
.hp-section-header::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, var(--orange), var(--orange-hot));
  margin: 20px auto 0;
  border-radius: 2px;
}

/* ── Tools dashboard image: hover tilt ───────────────────────────── */
.tools-visual img {
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.tools-visual:hover img {
  transform: perspective(800px) rotateY(-3deg) rotateX(2deg) scale(1.02);
  box-shadow: 0 32px 72px rgba(10,14,39,0.18);
}

/* ── Smooth entrance for case cards ──────────────────────────────── */
.case-card {
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.3s;
}
.case-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(10,14,39,0.12);
  border-color: var(--orange);
}

/* ── Footer: subtle top border glow ──────────────────────────────── */
.footer {
  border-top: 1px solid transparent;
  border-image: linear-gradient(90deg, transparent, var(--orange), transparent) 1;
}

/* ── Animated orange line under section labels ───────────────────── */
.section-label {
  display: inline-block;
  position: relative;
}

/* ══ POLISH RONDE 2 ══════════════════════════════════════════════ */

/* ── Reading time badge ─────────────────────────────────────────── */
.pub-reading-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-left: 16px;
  padding-left: 16px;
  border-left: 1px solid var(--border);
}
.pub-reading-time i {
  color: var(--orange);
  font-size: 0.75rem;
}

/* ── Article meta row ──────────────────────────────────────────── */
.pub-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  /* Auteur en datum staan als losse elementen naast elkaar; met gap:0 plakten ze
     aan elkaar ("Audirium28 juli 2026"). De leestijd houdt zijn eigen scheiding
     via margin-left/padding-left, dus alleen de kolomruimte hoeft hier terug. */
  gap: 0 10px;
  margin-bottom: 16px;
}
/* De auteur is sinds de Person-attributie een link naar /over-ons. Zonder deze
   regel pakt hij de globale link-kleur + underline en springt de meta-regel eruit;
   we houden hem visueel gelijk aan de datum en tonen alleen op hover dat hij klikt. */
.pub-article-author {
  color: inherit;
  text-decoration: none;
}
.pub-article-author:hover {
  color: var(--orange);
}

/* ── Pub card: orange left accent on hover ──────────────────────── */
.pub-card {
  border-left: 3px solid transparent;
}
.pub-card:hover {
  border-left-color: var(--orange);
}

/* ── Case card: left accent ────────────────────────────────────── */
.case-card {
  border-left: 4px solid transparent;
}
.case-card:hover {
  border-left-color: var(--orange);
}

/* ── Pillar CTA: animated gradient like homepage ────────────────── */
.pillar-cta {
  background: linear-gradient(-45deg, var(--surface), var(--surface-2), var(--orange-soft), var(--surface));
  background-size: 400% 400%;
  animation: ctaGradient 12s ease infinite;
}

/* ── Contact info cards: hover lift ────────────────────────────── */
.contact-info-card {
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(10,14,39,0.08);
}

/* ── Footer: social links ──────────────────────────────────────── */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--slate);
  font-size: 1rem;
  transition: all 0.2s;
  padding: 0;
}
.footer-social a:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}

/* ── Service card: subtle inner glow on hover ───────────────────── */
.service-card:hover {
  background: var(--surface);
  box-shadow: 0 20px 56px rgba(10,14,39,0.08), inset 0 1px 0 rgba(199,72,5,0.1);
}

/* ── Kennis grid shimmer placeholder ────────────────────────────── */
.kennis-grid:empty::before {
  content: '';
  display: block;
  height: 280px;
  grid-column: 1 / -1;
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius);
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Arrow animations on hover ─────────────────────────────────── */
.dienst-card-arrow i,
.pub-back i,
.pillar-back a i {
  transition: transform 0.25s var(--ease);
}
.dienst-card:hover .dienst-card-arrow i { transform: translateX(4px); }
.pub-back:hover i { transform: translateX(-3px); }
.pillar-back a:hover i { transform: translateX(-3px); }

/* ── Smooth cursor trail on "Meer over" links ────────────────────── */
.section-more-link {
  position: relative;
  overflow: hidden;
}
.section-more-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
.section-more-link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
}

/* ── Magnetic hover on nav links (subtle scale) ──────────────────── */
.nav-links a:not(.nav-cta):hover {
  transform: translateY(-1px);
}

/* ── Loading shimmer for kennis grid placeholder ─────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.kennis-grid:empty::before {
  content: '';
  display: block;
  height: 200px;
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease infinite;
}

/* ═══════════════════════════════════════════════
   TOOLS PAGE, High-tech CTA + Footer override
   Only applies on body.page-tools
════════════════════════════════════════════════ */

/* ── CTA section ─────────────────────────────── */
.page-tools .pillar-cta {
  position: relative;
  background: #040B18 !important;
  overflow: hidden;
  padding: 100px 0;
}

/* Animated deep-space gradient background */
.page-tools .pillar-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(74,158,255,0.1) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 30%, rgba(100,60,255,0.07) 0%, transparent 50%);
  animation: cta-nebula 8s ease-in-out infinite alternate;
}
@keyframes cta-nebula {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.08); }
}

/* Grid overlay */
.page-tools .pillar-cta::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(74,158,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74,158,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
}

.page-tools .pillar-cta-inner {
  position: relative; z-index: 2;
}

.page-tools .pillar-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(74,158,255,0.3);
}

.page-tools .pillar-cta-inner p {
  color: rgba(160,200,255,0.65);
  font-size: 1.05rem;
}

/* Glowing CTA button */
.page-tools .pillar-cta .btn-primary {
  background: linear-gradient(135deg, #1A6FD4 0%, #4A9EFF 100%);
  box-shadow: 0 0 0 0 rgba(74,158,255,0.4);
  border: none;
  animation: cta-pulse 2.5s ease-in-out infinite;
  color: #fff;
}
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74,158,255,0.4), 0 4px 24px rgba(74,158,255,0.25); }
  50%       { box-shadow: 0 0 0 10px rgba(74,158,255,0), 0 4px 32px rgba(74,158,255,0.4); }
}
.page-tools .pillar-cta .btn-primary:hover {
  background: linear-gradient(135deg, #2280E8 0%, #6AB4FF 100%);
  transform: translateY(-2px) scale(1.02);
}

/* ── Footer ──────────────────────────────────── */
.page-tools .footer {
  background: #020810 !important;
  border-top: 1px solid rgba(74,158,255,0.12);
  position: relative;
  overflow: hidden;
}

/* Subtle scanline texture */
.page-tools .footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(74,158,255,0.015) 3px,
    rgba(74,158,255,0.015) 4px
  );
}

.page-tools .footer-col :is(h2, h3, h4) {
  color: rgba(74,158,255,0.7);
  letter-spacing: 0.1em;
}

.page-tools .footer-col a {
  color: rgba(160,200,255,0.5);
  transition: color 0.2s, text-shadow 0.2s;
}
.page-tools .footer-col a:hover {
  color: #4A9EFF;
  text-shadow: 0 0 10px rgba(74,158,255,0.4);
}

.page-tools .footer-col p {
  color: rgba(160,200,255,0.45);
}

.page-tools .footer-bottom {
  border-top-color: rgba(74,158,255,0.1);
}
.page-tools .footer-bottom p {
  color: rgba(100,160,255,0.35);
}
.page-tools .footer-bottom a {
  color: rgba(100,160,255,0.45) !important;
}
.page-tools .footer-bottom a:hover {
  color: rgba(74,158,255,0.8) !important;
}

/* LinkedIn icon glow */
.page-tools .footer-social a {
  border-color: rgba(74,158,255,0.2);
  color: rgba(74,158,255,0.6);
}
.page-tools .footer-social a:hover {
  background: rgba(74,158,255,0.1);
  border-color: rgba(74,158,255,0.5);
  color: #4A9EFF;
  box-shadow: 0 0 12px rgba(74,158,255,0.3);
}

/* ═══════════════════════════════════════════════
   DIENSTEN PAGE, Strategic Command / Amber Gold
   body.page-diensten
════════════════════════════════════════════════ */

/* ── Hero, frontpage style overrides ────────── */
.hero--diensten {
  min-height: 92vh;
}
.hero--diensten .hero-bg::after {
  background: linear-gradient(
    160deg,
    rgba(6,4,16,0.78) 0%,
    rgba(15,8,4,0.65) 50%,
    rgba(20,10,2,0.82) 100%
  );
}
.hero--diensten .accent {
  color: var(--orange);
}
.diensten-hero-net {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
/* Reuse dsb-num counter styling inside hero stats */
.hero--diensten .hero-stat-num {
  color: var(--orange);
  font-size: 2rem;
}
.hero--diensten .hero-stat-label {
  color: rgba(199,72,5,0.6);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
}

/* ── Stats bar ───────────────────────────────── */
.diensten-stats-bar {
  background: #09070F;
  border-bottom: 1px solid rgba(199,72,5,0.12);
  padding: 0;
}
.diensten-stats-inner {
  max-width: 900px; margin: 0 auto;
  display: flex; align-items: stretch;
}
.dsb-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 1.5rem 1rem; gap: 0.25rem;
}
.dsb-num {
  font-size: 2.5rem; font-weight: 900;
  color: #C74805; letter-spacing: -0.04em;
  line-height: 1;
}
.dsb-lbl {
  font-size: 0.7rem; text-transform: uppercase;
  letter-spacing: 0.12em; color: rgba(199,72,5,0.5);
  font-weight: 600;
}
.dsb-pct::after { content: '%'; display: none; }
.dsb-sep {
  width: 1px; background: rgba(199,72,5,0.12);
  margin: 1rem 0;
}

/* ── Diensten overview section ───────────────── */
.page-diensten .diensten-overview {
  background: #09070F !important;
  padding: 60px 0 100px;
  position: relative;
}
.page-diensten .diensten-overview::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(199,72,5,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 10% 80%, rgba(180,80,20,0.05) 0%, transparent 45%);
}

/* Ambient grid */
.page-diensten .diensten-overview::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(199,72,5,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,72,5,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
}

.page-diensten .diensten-grid { position: relative; z-index: 2; }

/* Dark glassmorphism dienst cards */
.page-diensten .dienst-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(199,72,5,0.12) !important;
  backdrop-filter: blur(8px);
  border-radius: 16px !important;
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s, border-color 0.35s !important;
}

/* Diagonal accent line */
.page-diensten .dienst-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(199,72,5,0.6) 50%, transparent 100%);
  opacity: 0; transition: opacity 0.3s;
}
.page-diensten .dienst-card:hover::before { opacity: 1; }

.page-diensten .dienst-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(199,72,5,0.4) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(199,72,5,0.15) !important;
}

/* Image overlay, amber tint on hover */
.page-diensten .dienst-card-img::after {
  background: linear-gradient(180deg, transparent 30%, rgba(6,4,16,0.65) 100%) !important;
  transition: background 0.4s;
}
.page-diensten .dienst-card:hover .dienst-card-img::after {
  background: linear-gradient(180deg, rgba(199,72,5,0.08) 0%, rgba(6,4,16,0.7) 100%) !important;
}

.page-diensten .dienst-card-body {
  background: transparent;
}

.page-diensten .dienst-card h3 {
  color: rgba(255,255,255,0.92) !important;
}

.page-diensten .dienst-card p {
  color: rgba(255,255,255,0.48) !important;
}

.page-diensten .dienst-card-arrow {
  color: #D04A02 !important;
}

/* ── Cases section binnen diensten ──────────── */
.diensten-cases-section {
  padding: 60px 0 80px;
  background: #09070F;
  border-top: 1px solid rgba(199,72,5,0.15);
}
.diensten-cases-header {
  margin-bottom: 2rem;
}
.diensten-cases-header h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  margin: 4px 0 8px;
}
.diensten-cases-sub {
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.45);
  max-width: 560px;
}

/* ── CTA + Footer ────────────────────────────── */
.page-diensten .pillar-cta {
  position: relative;
  background: #06040E !important;
  overflow: hidden;
  padding: 100px 0;
}
.page-diensten .pillar-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 25% 60%, rgba(199,72,5,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 25%, rgba(180,60,10,0.06) 0%, transparent 45%);
  animation: diensten-nebula 9s ease-in-out infinite alternate;
}
@keyframes diensten-nebula {
  0%   { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.06); }
}
.page-diensten .pillar-cta::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(199,72,5,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(199,72,5,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
}
.page-diensten .pillar-cta-inner { position: relative; z-index: 2; }
.page-diensten .pillar-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(199,72,5,0.25);
}
.page-diensten .pillar-cta-inner p { color: rgba(255,200,160,0.65); }
.page-diensten .pillar-cta .btn-primary {
  background: linear-gradient(135deg, #A03800 0%, #D04A02 100%);
  color: #fff; border: none;
  animation: diensten-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes diensten-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,72,5,0.4), 0 4px 24px rgba(199,72,5,0.2); }
  50%       { box-shadow: 0 0 0 10px rgba(199,72,5,0), 0 4px 32px rgba(199,72,5,0.35); }
}
.page-diensten .pillar-cta .btn-primary:hover {
  background: linear-gradient(135deg, #B84200 0%, #E85D15 100%);
  transform: translateY(-2px) scale(1.02);
}

.page-diensten .footer {
  background: #040209 !important;
  border-top: 1px solid rgba(199,72,5,0.1);
  position: relative; overflow: hidden;
}
.page-diensten .footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(199,72,5,0.012) 3px, rgba(199,72,5,0.012) 4px
  );
}
.page-diensten .footer-col :is(h2, h3, h4) { color: rgba(199,72,5,0.7); }
.page-diensten .footer-col a { color: rgba(220,180,100,0.5); transition: color 0.2s, text-shadow 0.2s; }
.page-diensten .footer-col a:hover { color: #D04A02; text-shadow: 0 0 10px rgba(199,72,5,0.4); }
.page-diensten .footer-col p { color: rgba(220,180,100,0.4); }
.page-diensten .footer-bottom { border-top-color: rgba(199,72,5,0.08); }
.page-diensten .footer-bottom p { color: rgba(200,160,80,0.3); }
.page-diensten .footer-bottom a { color: rgba(200,160,80,0.4) !important; }
.page-diensten .footer-bottom a:hover { color: rgba(199,72,5,0.7) !important; }
.page-diensten .footer-social a { border-color: rgba(199,72,5,0.2); color: rgba(199,72,5,0.6); }
.page-diensten .footer-social a:hover {
  background: rgba(199,72,5,0.08); border-color: rgba(199,72,5,0.5);
  color: #D04A02; box-shadow: 0 0 12px rgba(199,72,5,0.3);
}

/* ═══════════════════════════════════════════════
   KENNIS PAGE, Deep Ocean Intelligence / Cyan
   body.page-kennis
════════════════════════════════════════════════ */

/* ── Hero enhancements ───────────────────────── */
.page-kennis .subpage-hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(2,12,16,0.72) 0%,
    rgba(4,18,22,0.55) 50%,
    rgba(2,10,14,0.72) 100%
  ) !important;
}

.kennis-hero-aurora {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.kennis-hero-scan {
  position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,212,200,0.018) 3px,
    rgba(0,212,200,0.018) 4px
  );
}

.page-kennis .subpage-hero-content { position: relative; z-index: 5; }

.kennis-hero-label {
  color: rgba(0,212,200,0.85) !important;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.kennis-hero-h1 {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(135deg, #fff 30%, rgba(0,212,200,0.8) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: kennis-title-glow 5s ease-in-out infinite alternate;
}
@keyframes kennis-title-glow {
  0%   { filter: drop-shadow(0 0 20px rgba(0,212,200,0.1)); }
  100% { filter: drop-shadow(0 0 50px rgba(0,212,200,0.35)); }
}

/* ── Pub listing section ─────────────────────── */
.page-kennis .pub-listing {
  background: #020D10 !important;
  padding: 60px 0 64px;
  position: relative;
}
.page-kennis .pub-listing::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 15% 30%, rgba(0,212,200,0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 70%, rgba(0,100,150,0.07) 0%, transparent 45%);
}
.page-kennis .pub-listing::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,200,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,0.025) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-kennis .pub-grid { position: relative; z-index: 2; }

/* Editorial dark pub cards */
.page-kennis .pub-card {
  background: rgba(0,212,200,0.03) !important;
  border: 1px solid rgba(0,212,200,0.1) !important;
  border-radius: 16px !important;
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s, border-color 0.35s !important;
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column;
}
.page-kennis .pub-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(0,212,200,0.35) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(0,212,200,0.12) !important;
}
.page-kennis .pub-card-img {
  height: 200px; background-size: cover; background-position: center;
  position: relative; transition: transform 0.5s ease;
  overflow: hidden;
}
.page-kennis .pub-card:hover .pub-card-img { transform: scale(1.06); }
.page-kennis .pub-card-img::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(2,12,16,0.7) 100%);
}
.page-kennis .pub-card-body {
  padding: 24px;
  background: transparent;
  flex: 1; display: flex; flex-direction: column;
}
.page-kennis .pub-card-body h3 {
  color: rgba(255,255,255,0.9) !important;
  font-size: 1.05rem; font-weight: 700;
  margin-bottom: 8px;
}
.page-kennis .pub-card-body p {
  color: rgba(200,235,235,0.75) !important;
  font-size: 0.875rem; line-height: 1.55; flex: 1;
}
.page-kennis .pub-card-date {
  color: rgba(0,212,200,0.6) !important;
  font-size: 0.8rem; margin-top: 12px;
  font-weight: 500;
}
.page-kennis .pub-card-date i { color: rgba(0,212,200,0.5); }

/* Top border glow on hover */
.page-kennis .pub-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0,212,200,0.7), transparent);
  opacity: 0; transition: opacity 0.3s;
}
.page-kennis .pub-card:hover::before { opacity: 1; }

/* ── CTA + Footer ────────────────────────────── */
.page-kennis .pillar-cta {
  position: relative;
  background: #020D10 !important;
  overflow: hidden;
  padding: 100px 0;
}
.page-kennis .pillar-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 35% 55%, rgba(0,212,200,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 75% 25%, rgba(0,100,180,0.06) 0%, transparent 45%);
  animation: kennis-nebula 8s ease-in-out infinite alternate;
}
@keyframes kennis-nebula {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.08); }
}
.page-kennis .pillar-cta::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0,212,200,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,200,0.02) 1px, transparent 1px);
  background-size: 48px 48px;
}
.page-kennis .pillar-cta-inner { position: relative; z-index: 2; }
.page-kennis .pillar-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(0,212,200,0.2);
}
.page-kennis .pillar-cta-inner p { color: rgba(100,220,210,0.6); }
.page-kennis .pillar-cta .btn-primary {
  background: linear-gradient(135deg, #006B65 0%, #00C8C0 100%);
  color: #fff; border: none;
  animation: kennis-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes kennis-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,212,200,0.4), 0 4px 24px rgba(0,212,200,0.2); }
  50%       { box-shadow: 0 0 0 10px rgba(0,212,200,0), 0 4px 32px rgba(0,212,200,0.35); }
}
.page-kennis .pillar-cta .btn-primary:hover {
  background: linear-gradient(135deg, #008880 0%, #20D8D0 100%);
  transform: translateY(-2px) scale(1.02);
}

.page-kennis .footer {
  background: #010A0D !important;
  border-top: 1px solid rgba(0,212,200,0.1);
  position: relative; overflow: hidden;
}
.page-kennis .footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(0,212,200,0.012) 3px, rgba(0,212,200,0.012) 4px
  );
}
.page-kennis .footer-col :is(h2, h3, h4) { color: rgba(0,212,200,0.65); }
.page-kennis .footer-col a { color: rgba(100,220,210,0.5); transition: color 0.2s, text-shadow 0.2s; }
.page-kennis .footer-col a:hover { color: #00D4C8; text-shadow: 0 0 10px rgba(0,212,200,0.4); }
.page-kennis .footer-col p { color: rgba(100,200,200,0.4); }
.page-kennis .footer-bottom { border-top-color: rgba(0,212,200,0.08); }
.page-kennis .footer-bottom p { color: rgba(80,180,180,0.3); }
.page-kennis .footer-bottom a { color: rgba(80,180,180,0.4) !important; }
.page-kennis .footer-bottom a:hover { color: rgba(0,212,200,0.7) !important; }
.page-kennis .footer-social a { border-color: rgba(0,212,200,0.2); color: rgba(0,212,200,0.55); }
.page-kennis .footer-social a:hover {
  background: rgba(0,212,200,0.08); border-color: rgba(0,212,200,0.45);
  color: #00D4C8; box-shadow: 0 0 12px rgba(0,212,200,0.3);
}

/* ── DOCX upload bar, keep readable on dark bg ── */
.page-kennis .docx-upload-bar {
  background: rgba(0,212,200,0.05);
  border-bottom: 1px solid rgba(0,212,200,0.12);
}

/* ═══════════════════════════════════════════════
   CASES PAGE, Kennis & Macht / Deep Power Gold
   body.page-cases
════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────── */
.page-cases .subpage-hero-overlay {
  background: linear-gradient(
    160deg,
    rgba(4,2,12,0.92) 0%,
    rgba(8,4,20,0.78) 50%,
    rgba(4,2,12,0.92) 100%
  ) !important;
}

.cases-hero-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}

.cases-hero-vignette {
  position: absolute; inset: 0; z-index: 3;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(4,2,12,0.6) 100%);
  pointer-events: none;
}

.page-cases .subpage-hero-content { position: relative; z-index: 5; }

.cases-hero-label {
  color: rgba(199,72,5,0.9) !important;
  letter-spacing: 0.22em;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.cases-hero-h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #fff 40%, rgba(199,72,5,0.85) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: cases-title-glow 5s ease-in-out infinite alternate;
}
@keyframes cases-title-glow {
  0%   { filter: drop-shadow(0 0 20px rgba(199,72,5,0.15)); }
  100% { filter: drop-shadow(0 0 50px rgba(199,72,5,0.45)); }
}

.cases-hero-sub {
  color: rgba(220,195,140,0.65) !important;
}

/* ── Cases listing section ───────────────────── */
.page-cases .cases-listing {
  background: #06040E !important;
  padding: 60px 0 100px;
  position: relative;
}

.page-cases .cases-listing::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 20% 40%, rgba(109,40,217,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(199,72,5,0.07) 0%, transparent 45%);
}

/* Subtle grid */
.page-cases .cases-listing::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(199,72,5,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
}

.page-cases .cases-grid { position: relative; z-index: 2; }

/* ── Cases dienst-card dark styling (matches page-diensten) ── */
.page-cases .dienst-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(199,72,5,0.12) !important;
  backdrop-filter: blur(8px);
  border-radius: 16px !important;
  position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(.34,1.56,.64,1), box-shadow 0.35s, border-color 0.35s !important;
}
.page-cases .dienst-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(199,72,5,0.6) 50%, transparent 100%);
  opacity: 0; transition: opacity 0.3s;
}
.page-cases .dienst-card:hover::before { opacity: 1; }
.page-cases .dienst-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(199,72,5,0.4) !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(199,72,5,0.15) !important;
}
.page-cases .dienst-card-img::after {
  background: linear-gradient(180deg, transparent 30%, rgba(6,4,16,0.65) 100%) !important;
  transition: background 0.4s;
}
.page-cases .dienst-card:hover .dienst-card-img::after {
  background: linear-gradient(180deg, rgba(199,72,5,0.08) 0%, rgba(6,4,16,0.7) 100%) !important;
}
.page-cases .dienst-card-body { background: transparent; }
.page-cases .dienst-card-icon {
  background: rgba(199,72,5,0.1) !important;
  color: #D04A02 !important;
  border: 1px solid rgba(199,72,5,0.2);
  border-radius: 12px;
}
.page-cases .dienst-card h3 { color: rgba(255,255,255,0.92) !important; }
.page-cases .dienst-card p { color: rgba(255,255,255,0.48) !important; }
.page-cases .dienst-card-arrow { color: #D04A02 !important; }
.page-cases .case-card-meta {
  display: flex;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 0.78rem;
}
.page-cases .case-card-sector {
  color: #D04A02 !important;
  font-weight: 600;
}
.page-cases .case-card-duration {
  color: rgba(255,255,255,0.35) !important;
}

/* ── Flow animation: cards wipe L→R ────────── */
.case-card-flow {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  transition: none;
}
.case-card-flow.wipe-in {
  clip-path: inset(0 0% 0 0);
  transition: clip-path 0.75s cubic-bezier(0.77, 0, 0.175, 1);
}

/* Leading gold stripe, rides ahead of the wipe */
.case-card-flow::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(199,72,5,0.0) 0%, rgba(199,72,5,0.9) 30%, rgba(232,93,21,1) 50%, rgba(199,72,5,0.9) 70%, rgba(199,72,5,0.0) 100%);
  right: 0;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}
.case-card-flow.wipe-in::after {
  opacity: 1;
  transition: opacity 0.1s 0.05s, right 0.75s cubic-bezier(0.77, 0, 0.175, 1);
  right: calc(100% - 3px);
  /* The stripe starts at right edge and moves to left edge */
  animation: stripe-travel 0.75s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes stripe-travel {
  0%   { right: calc(100% - 3px); opacity: 1; }
  80%  { right: 0; opacity: 1; }
  100% { right: 0; opacity: 0; }
}

/* Dark card styling */
.page-cases .case-card {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(199,72,5,0.12) !important;
  border-left: 3px solid rgba(199,72,5,0.5) !important;
  border-radius: 12px !important;
  color: #f0ece4;
  padding: 28px 28px 28px 28px;
  backdrop-filter: blur(6px);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s !important;
}
.page-cases .case-card:hover {
  border-color: rgba(199,72,5,0.4) !important;
  border-left-color: rgba(255,200,60,0.9) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(199,72,5,0.1) !important;
  transform: translateX(6px) !important;
}

.page-cases .case-card-icon {
  background: rgba(199,72,5,0.1) !important;
  color: #D04A02 !important;
  border: 1px solid rgba(199,72,5,0.25);
  border-radius: 12px;
}

.page-cases .case-card-sector {
  color: #D04A02 !important;
  font-weight: 700;
}

.page-cases .case-card-duration {
  color: rgba(220,195,140,0.5) !important;
}

.page-cases .case-card-meta {
  color: rgba(220,195,140,0.5);
}

.page-cases .case-card-body h3 {
  color: rgba(255,248,235,0.92) !important;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.page-cases .case-card-body p {
  color: rgba(200,180,140,0.55) !important;
}

.page-cases .case-card-services {
  color: rgba(199,72,5,0.55) !important;
  border-top-color: rgba(199,72,5,0.12) !important;
  font-weight: 500;
}

/* ── CTA + Footer ────────────────────────────── */
.page-cases .pillar-cta {
  position: relative;
  background: #04020A !important;
  overflow: hidden; padding: 100px 0;
}
.page-cases .pillar-cta::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(109,40,217,0.1) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(199,72,5,0.08) 0%, transparent 45%);
  animation: cases-nebula 8s ease-in-out infinite alternate;
}
@keyframes cases-nebula {
  0%   { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1;   transform: scale(1.07); }
}
.page-cases .pillar-cta::after {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(199,72,5,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,40,217,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}
.page-cases .pillar-cta-inner { position: relative; z-index: 2; }
.page-cases .pillar-cta-inner h2 {
  color: #fff;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.02em;
  text-shadow: 0 0 40px rgba(199,72,5,0.2);
}
.page-cases .pillar-cta-inner p { color: rgba(220,185,120,0.6); }
.page-cases .pillar-cta .btn-primary {
  background: linear-gradient(135deg, #7B4500 0%, #D04A02 100%);
  color: #fff; border: none;
  animation: cases-btn-pulse 2.5s ease-in-out infinite;
}
@keyframes cases-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199,72,5,0.4), 0 4px 24px rgba(199,72,5,0.2); }
  50%       { box-shadow: 0 0 0 10px rgba(199,72,5,0), 0 4px 32px rgba(199,72,5,0.35); }
}
.page-cases .pillar-cta .btn-primary:hover {
  background: linear-gradient(135deg, #9B5800 0%, #E0B030 100%);
  transform: translateY(-2px) scale(1.02);
}

.page-cases .footer {
  background: #020108 !important;
  border-top: 1px solid rgba(199,72,5,0.1);
  position: relative; overflow: hidden;
}
.page-cases .footer::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(
    0deg, transparent, transparent 3px,
    rgba(199,72,5,0.01) 3px, rgba(199,72,5,0.01) 4px
  );
}
.page-cases .footer-col :is(h2, h3, h4) { color: rgba(199,72,5,0.65); }
.page-cases .footer-col a { color: rgba(220,185,120,0.5); transition: color 0.2s; }
.page-cases .footer-col a:hover { color: #D04A02; text-shadow: 0 0 10px rgba(199,72,5,0.4); }
.page-cases .footer-col p { color: rgba(210,175,110,0.4); }
.page-cases .footer-bottom { border-top-color: rgba(199,72,5,0.08); }
.page-cases .footer-bottom p { color: rgba(180,150,90,0.3); }
.page-cases .footer-bottom a { color: rgba(180,150,90,0.4) !important; }
.page-cases .footer-bottom a:hover { color: rgba(199,72,5,0.7) !important; }
.page-cases .footer-social a { border-color: rgba(199,72,5,0.2); color: rgba(199,72,5,0.55); }
.page-cases .footer-social a:hover {
  background: rgba(199,72,5,0.08); border-color: rgba(199,72,5,0.45);
  color: #D04A02; box-shadow: 0 0 12px rgba(199,72,5,0.3);
}

/* ── OVER ONS MODAL ──────────────────────────────────────────────── */
.over-ons-overlay {
  position: fixed;
  inset: 0;
  z-index: 10200;
  background: rgba(6,10,31,0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: overOnsIn 0.25s var(--ease) both;
}
@keyframes overOnsIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.over-ons-modal {
  background: var(--navy-mid);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 0;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  position: relative;
  animation: overOnsSlide 0.3s var(--ease) both;
}
@keyframes overOnsSlide {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.over-ons-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: var(--slate-light);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s, color 0.2s;
  z-index: 1;
}
.over-ons-close:hover { background: rgba(255,255,255,0.14); color: var(--white); }
.over-ons-left {
  padding: 48px 40px 48px 48px;
  border-right: 1px solid rgba(255,255,255,0.07);
}
.over-ons-eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.over-ons-title {
  font-size: clamp(1.3rem, 2.5vw, 1.65rem);
  font-weight: 700;
  color: var(--white);
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 20px;
}
.over-ons-lead {
  font-size: 1rem;
  color: var(--chalk);
  line-height: 1.7;
  margin-bottom: 16px;
}
.over-ons-body {
  font-size: 0.9rem;
  color: var(--slate-light);
  line-height: 1.75;
  margin-bottom: 32px;
}
.over-ons-values { display: flex; flex-direction: column; gap: 16px; }
.over-ons-value {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.over-ons-value-icon {
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 8px;
  background: rgba(199,72,5,0.12);
  color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  margin-top: 2px;
}
.over-ons-value > div { display: flex; flex-direction: column; gap: 2px; }
.over-ons-value strong { font-size: 0.875rem; color: var(--white); font-weight: 600; }
.over-ons-value span  { font-size: 0.825rem; color: var(--slate); line-height: 1.5; }
.over-ons-right {
  padding: 48px 28px 48px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.over-ons-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.over-ons-card-icon { color: var(--orange); font-size: 0.9rem; margin-bottom: 4px; }
.over-ons-card-label { font-size: 0.7rem; color: var(--slate); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.over-ons-card-value { font-size: 1.1rem; color: var(--white); font-weight: 700; }
.over-ons-cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.over-ons-cta:hover { background: var(--orange-hot); transform: translateY(-1px); }
@media (max-width: 640px) {
  .over-ons-modal { grid-template-columns: 1fr; max-height: 85vh; }
  .over-ons-left { padding: 40px 24px 24px; border-right: none; }
}

/* ── Over Ons modal: single-column (right panel removed) ── */
.over-ons-modal { grid-template-columns: 1fr; max-width: 640px; }

/* ── Tool hero dark variant ─────────────────────────────── */
.tool-hero--dark {
  background: var(--navy);
  background-image: linear-gradient(160deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
}
.tool-hero--dark .pillar-back-top { color: var(--slate-light); }
.tool-hero--dark .pillar-back-top:hover { color: #fff; }
.tool-hero--dark .tool-hero-icon {
  background: rgba(199,72,5,0.15);
  color: var(--orange);
  border: 1px solid rgba(199,72,5,0.25);
}
.tool-hero--dark .tool-hero-inner h1 { color: var(--white); }
.tool-hero--dark .tool-hero-short { color: var(--slate-light); }

/* ── Tool hero label ─────────────────────────────────────── */
.tool-hero-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 6px;
}
.tool-hero--dark .tool-hero-label { color: rgba(199,72,5,0.85); }

/* ── Pillar hero label ───────────────────────────────────── */
.pillar-hero-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.65);
  margin-bottom: 8px;
}

/* ── Hero stat: empty number ─────────────────────────────── */
.hero-stat-num:empty { display: none; }
.hero-stat:has(.hero-stat-num:empty) .hero-stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--chalk);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── Tools stats bar: text-only item ────────────────────── */
.tsb-item--text {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tsb-item--text .tsb-lbl {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── Beta page ─────────────────────────────────────────────────────
   Sinds v0.70.0 staan de twee secties in het lichte hp-section-idioom
   van de homepage en /tools. De donkere overrides (witte labels, glazen
   invoervelden, kaarten op rgba-wit) zijn eruit: op een lichte sectie
   waren dat witte letters op wit. Het formulier erft nu de generieke
   .form-group-styling, de voordelen zijn .ts-fact-kaarten. */
/* Het formulier is één veld en een knop, de voordelenkolom is vier kaarten:
   op align-items:start liet dat een leeg wit vlak van een halve sectie onder
   het formulier achter. Vandaar een eigen kaart om het formulier, en de twee
   kolommen verticaal gecentreerd zodat de witruimte verdeeld wordt. */
.beta-signup-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  align-items: center;
}
@media (max-width: 900px) {
  .beta-signup-grid { grid-template-columns: 1fr; gap: 32px; }
}
.beta-signup-form-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 12px 32px rgba(10,14,39,0.06);
}
/* De form-group en de knop staan onder elkaar met lucht ertussen; die
   lucht kwam vroeger uit margin-bottom op het invoerveld. */
.beta-page-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.beta-signup-form-wrap .form-group { width: 100%; }
.beta-signup-form-wrap input[type="email"] { width: 100%; }
.beta-success { padding: 32px 24px; }
.beta-voordelen { display: flex; flex-direction: column; gap: 20px; }
/* Suite cards */
.beta-tools-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 768px) {
  .beta-tools-cards { grid-template-columns: repeat(2, 1fr); }
}
.beta-suite-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-heading);
  text-decoration: none;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.beta-suite-card:hover {
  border-color: var(--orange);
  box-shadow: 0 12px 32px rgba(10,14,39,0.08);
}
.beta-suite-card i { color: var(--orange); font-size: 1.25rem; }
.beta-suite-link {
  text-align: center;
  margin-top: 28px;
  color: var(--text-dim);
  font-size: 0.9375rem;
}
.beta-suite-link a { color: var(--orange); text-decoration: none; font-weight: 600; }
.beta-suite-link a:hover { text-decoration: underline; }

/* ── Over ons pagina ─────────────────────────────────────────────── */
.container--narrow { max-width: 760px; }
.page-section { padding: 80px 0; }
.page-section .lead-text {
  font-size: 1.125rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.page-section p {
  color: var(--text-muted);
  line-height: 1.8;
  margin-bottom: 1.25rem;
}
.page-section h2 {
  font-size: 1.5rem;
  color: var(--text);
  margin: 2.5rem 0 1.25rem;
}
.page-quote {
  border-left: 3px solid var(--orange);
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  color: var(--text);
  font-style: italic;
  font-size: 1.0625rem;
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 1rem;
}
@media (max-width: 600px) {
  .values-grid { grid-template-columns: 1fr; }
}
.value-block {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.value-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--orange-soft);
  color: var(--orange);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}
.value-block strong { display: block; color: var(--text); margin-bottom: 4px; font-size: 0.9375rem; }
.value-block p { color: var(--text-muted); font-size: 0.875rem; margin: 0; line-height: 1.6; }
.page-cta-section { padding: 64px 0; background: var(--surface-alt, var(--surface)); }
.page-cta-box {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.page-cta-box h2 { font-size: 1.75rem; color: var(--text); margin-bottom: 24px; }

/* ── UI Upgrade 2026-04-15 ── */
.btn:active { transform: scale(.97) !important; }
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.1) transparent; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }

/* ── SPOTLIGHT SECTIE ─────────────────────────────────────────── */
.spotlight-wrap {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 20px);
  padding: 28px 32px;
  box-shadow: 0 2px 16px rgba(10,14,39,0.07);
  max-width: 860px;
  margin: 0 auto;
}
.spotlight-visual-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(199,72,5,0.08);
  border: 1px solid rgba(199,72,5,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: #C04200;
  flex-shrink: 0;
}
.spotlight-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.spotlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(199,72,5,0.08);
  color: #C04200;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  width: fit-content;
  border: 1px solid rgba(199,72,5,0.18);
}
.spotlight-body h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-heading, #0A0E27);
  line-height: 1.3;
  margin: 0;
}
.spotlight-body p {
  font-size: 0.875rem;
  color: var(--text-dim, #6B7185);
  line-height: 1.6;
  margin: 0;
}
.spotlight-stats {
  display: flex;
  gap: 20px;
  padding-top: 10px;
}
.spotlight-stat-value {
  font-size: 0.9rem;
  font-weight: 700;
  color: #C74805;
}
.spotlight-stat-label {
  font-size: 0.68rem;
  color: var(--text-dim, #6B7185);
  margin-top: 2px;
}
.spotlight-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #C74805;
  color: #fff;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}
.spotlight-cta:hover { background: #E85D15; }
.spotlight-ctas {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.spotlight-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  color: #C74805;
  border: 1px solid rgba(199,72,5,0.35);
  padding: 8px 18px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s;
}
.spotlight-cta-secondary:hover { background: rgba(199,72,5,0.06); }
.eqa-tool-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.eqa-tool-links .eqa-tool-link { margin-top: 0; }
@media (max-width: 768px) {
  .spotlight-wrap { flex-direction: column; align-items: flex-start; padding: 24px; }
  .spotlight-cta { width: 100%; justify-content: center; }
  .spotlight-ctas { width: 100%; }
  .spotlight-cta-secondary { width: 100%; justify-content: center; }
}

/* ═══ EQA Verdieping ═══════════════════════════════════════════════ */
.eqa-deep-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.eqa-deep-h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-heading, #0A0E27);
  margin: 8px 0 0;
  line-height: 1.3;
}
.eqa-traj-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 24px;
}
.eqa-traj-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.eqa-step-num {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(199,72,5,0.09);
  border: 1px solid rgba(199,72,5,0.22);
  color: #C04200;
  font-weight: 700;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eqa-step-body-title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-heading, #0A0E27);
  margin-bottom: 3px;
}
.eqa-step-body-desc {
  font-size: 0.8125rem;
  color: var(--text-dim, #6B7185);
  line-height: 1.55;
  margin: 0;
}
.eqa-roles-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.eqa-role-card {
  background: var(--surface-2, #F2F3F8);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.eqa-role-card-head {
  font-weight: 700;
  font-size: 0.75rem;
  color: #C04200;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.eqa-role-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.eqa-role-card li {
  font-size: 0.8rem;
  color: var(--text-dim, #6B7185);
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.eqa-role-card li::before {
  content: '\2192';
  color: #C04200;
  flex-shrink: 0;
}
.eqa-tool-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #C04200;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  margin-top: 18px;
  padding: 8px 16px;
  border: 1px solid rgba(199,72,5,0.28);
  border-radius: 8px;
  transition: background 0.2s;
}
.eqa-tool-link:hover { background: rgba(199,72,5,0.06); }
@media (max-width: 768px) {
  .eqa-deep-grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ══ Publicatie: kaders ═══════════════════════════════════════════ */
.adv-kader {
  position: relative;
  background: #F2F3F8;
  border-left: 3px solid var(--navy);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 28px 22px 32px;
  margin: 36px 0;
  font-size: 0.95rem;
  overflow: hidden;
}
.adv-kader .kader-title {
  font-style: italic;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 10px;
  font-size: 0.9rem;
}
.adv-kader .kader-body {
  font-style: italic;
  color: var(--text);
  margin: 0;
  line-height: 1.75;
}
.adv-kader .kader-body + .kader-body { margin-top: 10px; }

/* A: Scroll-reveal */
.adv-kader-a {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.adv-kader-a.kader-visible { opacity: 1; transform: translateY(0) scale(1); }

/* B: Uitklapbaar */
.adv-kader-b .kader-full {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ease);
  overflow: hidden;
}
.adv-kader-b .kader-full > * { min-height: 0; }
.adv-kader-b.kader-open .kader-full { grid-template-rows: 1fr; }
.adv-kader-b .kader-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  background: none;
  border: none;
  color: var(--orange);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.adv-kader-b .kader-toggle i { transition: transform 0.3s ease; }
.adv-kader-b.kader-open .kader-toggle i { transform: rotate(180deg); }
.adv-kader-b .kader-toggle:hover { color: var(--orange-hot); }

/* C: Marge-noot */
.adv-kader-c {
  background: none;
  border-left: none;
  border-top: 2px solid var(--navy);
  border-radius: 0;
  padding: 14px 0 0;
  font-size: 0.875rem;
}
@media (min-width: 1100px) {
  .adv-kader-c { float: right; clear: right; width: 230px; margin: 4px 0 24px 36px; }
}
.adv-kader-c .kader-title { font-size: 0.8rem; color: var(--navy-light); margin-bottom: 8px; }
.adv-kader-c .kader-body  { font-size: 0.855rem; color: var(--text-dim); line-height: 1.65; }

/* D: Lightbox */
.adv-kader-d {
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  user-select: none;
}
.adv-kader-d:hover { background: #E8EAF2; border-left-color: var(--orange); transform: translateX(3px); }
.adv-kader-d .kader-expand-icon { font-size: 0.75rem; color: var(--orange); margin-left: 6px; vertical-align: middle; }
.adv-kader-d .kader-title::after {
  content: ', klik om te openen';
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--text-dim);
  font-style: normal;
}
.kader-overlay {
  position: fixed; inset: 0;
  background: rgba(10,14,39,0.65);
  backdrop-filter: blur(3px);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  animation: kaderOverlayIn 0.25s ease;
}
@keyframes kaderOverlayIn { from { opacity: 0; } to { opacity: 1; } }
.kader-overlay-box {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 40px 44px;
  max-width: 580px; width: 100%;
  position: relative;
  border-left: 4px solid var(--navy);
  animation: kaderBoxIn 0.3s var(--ease);
  box-shadow: 0 24px 64px rgba(10,14,39,0.25);
}
@keyframes kaderBoxIn {
  from { opacity: 0; transform: scale(0.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.kader-overlay-box .kader-title { font-style: italic; font-weight: 700; color: var(--navy); font-size: 1rem; margin-bottom: 16px; }
.kader-overlay-box .kader-body  { font-style: italic; color: var(--text); line-height: 1.8; margin-bottom: 12px; }
.kader-overlay-close {
  position: absolute; top: 16px; right: 18px;
  background: none; border: none;
  font-size: 1.1rem; color: var(--text-dim);
  cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: background 0.15s;
}
.kader-overlay-close:hover { background: var(--surface-3); }

/* E: Combinatie (reveal desktop + inklapbaar mobiel) */
.adv-kader-e {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
}
.adv-kader-e.kader-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (max-width: 700px) {
  .adv-kader-e .kader-full {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s var(--ease); overflow: hidden;
  }
  .adv-kader-e .kader-full > * { min-height: 0; }
  .adv-kader-e.kader-open .kader-full { grid-template-rows: 1fr; }
  .adv-kader-e .kader-toggle {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
    background: none; border: none; color: var(--orange);
    font-size: 0.85rem; font-weight: 600; cursor: pointer; padding: 0; font-family: inherit;
  }
  .adv-kader-e .kader-toggle i { transition: transform 0.3s ease; }
  .adv-kader-e.kader-open .kader-toggle i { transform: rotate(180deg); }
}
@media (min-width: 701px) {
  .adv-kader-e .kader-full { display: block; }
  .adv-kader-e .kader-toggle { display: none; }
}

/* ── Language switcher ─────────────────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 6px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.lang-btn {
  display: flex;
  align-items: center;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  border: 1.5px solid transparent;
  padding: 1px;
}
.lang-btn:hover { opacity: 1; }
/* De vlaggen hebben verschillende verhoudingen (NL 3:2, UK 2:1). Ze allebei in een
   22x15-vakje persen rekte de Britse vlag 27% uit; object-fit vult het vakje zonder
   te vervormen. */
.lang-btn img { display: block; border-radius: 2px; width: 22px; height: 15px; object-fit: cover; }
/* Active state set by JS via window.__lang */
.lang-btn.active { opacity: 1; border-color: var(--accent, #e8a035); }

/* Inside mobile nav dropdown */
@media (max-width: 900px) {
  .nav-links.open .lang-switcher {
    background: rgba(255,255,255,0.04);
    align-self: flex-start;
    margin: 4px 0;
  }
}

/* ── Annotatie-modus (admin) ──────────────────────────────────── */
.ann-toggle {
  position: fixed;
  bottom: 8rem;
  right: 1.25rem;
  z-index: 1200;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: none;
  background: var(--surface-2, #1e2533);
  color: var(--slate-light, #94a3b8);
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  transition: background .2s, color .2s;
}
.ann-toggle:hover, .ann-toggle.ann-active {
  background: var(--orange, #f97316);
  color: #fff;
}
.ann-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--orange, #f97316);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  min-width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .25rem;
  pointer-events: none;
}
.ann-toggle.ann-active .ann-badge { background: #fff; color: var(--orange, #f97316); }

/* Selectie-cursor in annotatiemodus */
body.ann-mode ::selection { background: rgba(249,115,22,.35); }
body.ann-mode { cursor: text; }

/* Popup */
.ann-popup {
  position: absolute;
  z-index: 1300;
  background: var(--surface-2, #1e2533);
  border: 1px solid var(--border, rgba(148,163,184,.15));
  border-radius: .75rem;
  padding: .75rem 1rem;
  width: 300px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  font-size: .85rem;
}
.ann-popup-selected {
  color: var(--slate-light, #94a3b8);
  font-style: italic;
  margin-bottom: .5rem;
  line-height: 1.4;
  border-left: 3px solid var(--orange, #f97316);
  padding-left: .5rem;
}
.ann-popup-note {
  width: 100%;
  box-sizing: border-box;
  background: var(--surface, #141923);
  border: 1px solid var(--border, rgba(148,163,184,.15));
  border-radius: .5rem;
  color: var(--text, #e2e8f0);
  font-size: .82rem;
  padding: .4rem .6rem;
  resize: vertical;
  font-family: inherit;
}
.ann-popup-actions {
  display: flex;
  gap: .5rem;
  margin-top: .5rem;
}
.ann-popup-save {
  background: var(--orange, #f97316);
  color: #fff;
  border: none;
  border-radius: .4rem;
  padding: .3rem .75rem;
  font-size: .82rem;
  cursor: pointer;
  font-weight: 600;
}
.ann-popup-save:disabled { opacity: .5; cursor: default; }
.ann-popup-cancel {
  background: transparent;
  border: 1px solid var(--border, rgba(148,163,184,.2));
  color: var(--slate-light, #94a3b8);
  border-radius: .4rem;
  padding: .3rem .75rem;
  font-size: .82rem;
  cursor: pointer;
}
.ann-popup-ok {
  color: #4ade80;
  font-weight: 600;
  text-align: center;
  padding: .25rem 0;
}
/* Highlighter button */
.ann-hl-btn {
  bottom: 11rem;
}
/* Yellow highlight marks */
mark.ai-mark {
  background: #fef08a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
  cursor: pointer;
}
mark.ai-mark:hover {
  background: #fde047;
  outline: 1px solid #ca8a04;
}
body.hl-mode {
  cursor: crosshair;
}
/* Annotation marks (orange underline) */
mark.ann-mark {
  background: transparent;
  color: inherit;
  border-bottom: 2px solid #f97316;
  border-radius: 0;
  padding: 0;
  cursor: help;
}
mark.ann-mark:hover {
  background: rgba(249, 115, 22, 0.1);
}
/* "Werk dit verder uit" expand button */
.ann-exp-btn {
  bottom: 14rem;
}
/* Expand marks (blue dashed underline) */
mark.exp-mark {
  background: transparent;
  color: inherit;
  border-bottom: 2px dashed #3b82f6;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
}
mark.exp-mark:hover {
  background: rgba(59, 130, 246, 0.1);
}
body.exp-mode {
  cursor: crosshair;
}

/* ── EQA twee-sporen layout ──────────────────────────────────────── */
.eqa-block {
  background: #d3dcea;
  border: 1px solid #b8c5d8;
  border-radius: 16px;
  padding: 24px;
  margin: 28px 0 8px;
}
.eqa-tracks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 0 0 16px;
}
.eqa-track {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 20px 18px;
  background: var(--bg-card, #fff);
}
.eqa-track-hdr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.eqa-track-badge { margin-bottom: 4px; }
.eqa-track-hdr strong { font-size: 1rem; color: var(--text); }
.eqa-track-sub { font-size: 0.78rem; color: var(--text-dim); }
.eqa-track-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 20px;
  width: fit-content;
  margin-bottom: 2px;
}
.eqa-track-badge--direct { background: rgba(199,72,5,0.1); color: #C04200; }
.eqa-track-badge--full { background: rgba(199,72,5,0.1); color: #C04200; }
.eqa-track-fit {
  font-size: 0.84rem;
  color: var(--text-dim);
  margin: 0 0 14px;
  font-style: italic;
}
.eqa-track-steps { padding-left: 18px; margin: 0; }
.eqa-track-steps li {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.eqa-track-steps li:last-child { margin-bottom: 0; }
@media (max-width: 768px) { .eqa-tracks { grid-template-columns: 1fr; } }
.eqa-vervolg {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
  background: var(--bg-card, #fff);
  margin-top: 0;
}
.eqa-vervolg strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-dim);
  margin-bottom: 8px;
}
.eqa-vervolg p { font-size: 0.9rem; color: var(--text); margin: 0; line-height: 1.6; }

/* EQA Forms (SAIV vs Full EQA) */
.eqa-forms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin: 2rem 0;
}
@media (max-width: 768px) { .eqa-forms { grid-template-columns: 1fr; } }
.eqa-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
}
.eqa-form h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0.75rem 0 0.6rem;
}
.eqa-form p { font-size: 0.925rem; margin-bottom: 0.75rem; }
.eqa-form ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.eqa-form ul li { font-size: 0.875rem; line-height: 1.5; color: var(--text); padding-left: 1.4em; position: relative; }
.eqa-form ul li::before { content: none !important; }
.eqa-form ul.pros li::before { content: '+' !important; position: absolute; left: 0; color: #2e7d32; font-weight: 700; }
.eqa-form ul.cons li::before { content: '−' !important; position: absolute; left: 0; color: var(--text-dim); font-weight: 700; }
.eqa-form-divider { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
.eqa-form-badge {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 1rem;
}
/* SAIV vs Full EQA vergelijking */
.eqa-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0 0;
}
@media (max-width: 768px) { .eqa-compare { grid-template-columns: 1fr; } }
.eqa-compare-col { display: flex; flex-direction: column; gap: 12px; }
.eqa-compare-hdr {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 8px;
  width: fit-content;
}
.eqa-compare-hdr--saiv { background: #e8f5e9; color: #2e7d32; }
.eqa-compare-hdr--eqa  { background: #e3f2fd; color: #1565c0; }
.eqa-compare-pros, .eqa-compare-cons {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.eqa-compare-pros li, .eqa-compare-cons li {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text);
  padding-left: 1.4em;
  position: relative;
}
.eqa-compare-pros li::before {
  content: '+';
  position: absolute; left: 0;
  color: #2e7d32; font-weight: 700;
}
.eqa-compare-cons li::before {
  content: '−';
  position: absolute; left: 0;
  color: var(--text-dim); font-weight: 700;
}
.eqa-form-badge--saiv { color: var(--text); }
.eqa-form-badge--full { color: var(--text); }
.eqa-form-badge--eqa  { color: var(--text); }

/* EQA Wizard pill link */
.eqa-wizard-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  border-radius: 100px;
  font-size: 0.78rem;
  font-weight: 500;
  background: #e8edff;
  color: #3d52b8;
  border: 1px solid #c2cdf8;
  text-decoration: none;
  vertical-align: middle;
  margin-left: 0.6rem;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.eqa-wizard-pill:hover { background: #d4dbff; border-color: #a0aef5; }

/* EQA Wizard */
.eqa-wizard {
  background: #f0f4ff;
  border: 1.5px solid #c5d0f5;
  border-radius: 16px;
  padding: 2rem 2rem 1.5rem;
  margin-top: 2.5rem;
  position: relative;
}
.eqa-wizard::before {
  content: 'Keuzehulp';
  position: absolute;
  top: -0.6rem;
  left: 1.5rem;
  background: #3d52b8;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
}
.eqa-wizard > h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.wizard-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 1.5rem;
  align-items: center;
}
.wz-dot {
  height: 4px;
  flex: 1;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.25s;
}
.wz-dot--active { background: var(--primary, #0A0E27); }
.wz-dot--done   { background: #22c55e; }
.wizard-step { display: none; }
.wizard-step--active { display: block; }
.wz-question {
  font-size: 1rem;
  font-weight: 500;
  margin: 0 0 1.1rem;
}
.wz-options {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.wz-btn {
  background: var(--bg, #fff);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 1.25rem;
  text-align: left;
  font-size: 0.925rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.45;
}
.wz-btn:hover {
  border-color: var(--primary, #0A0E27);
  background: rgba(10,14,39,0.04);
}
.wizard-result { display: none; margin-top: 0.5rem; }
.wizard-result--visible { display: block; }
.wz-result-badge {
  display: inline-flex;
  padding: 0.35rem 1rem;
  border-radius: 100px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 1rem;
}
.wz-result-badge--saiv { background: #e8f5e9; color: #2e7d32; }
.wz-result-badge--eqa  { background: #e3f2fd; color: #1565c0; }
.wz-cta { margin-top: 1.25rem; display: inline-flex; }
.wz-restart {
  background: none;
  border: none;
  color: var(--text-dim, #64748b);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0.75rem 0 0;
  font-family: inherit;
  display: block;
}
.wz-restart:hover { color: var(--text); }

/* ── FAQ-sectie (GEO) ──────────────────────────────────────────────── */
.hp-faq { background: var(--surface-2); }
.faq-list {
  max-width: 820px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.faq-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.2s var(--ease);
}
.faq-item[open] { border-color: var(--orange); }
.faq-q {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  position: relative;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text-heading);
  line-height: 1.4;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::after {
  content: '+';
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--orange);
  transition: transform 0.2s var(--ease);
}
.faq-item[open] .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.faq-q:hover { color: var(--orange); }
.faq-a {
  padding: 0 24px 22px;
  color: var(--text);
  line-height: 1.7;
}
.faq-a p { margin: 0; }
@media (max-width: 600px) {
  .faq-q { padding: 16px 48px 16px 18px; font-size: 1rem; }
  .faq-a { padding: 0 18px 18px; }
}

/* Actiebanner boven aan een dienstenpagina (nu: zomeractie EQA/IQA).
   Staat als sectie s0 in de pillar-content, dus per pagina aan of uit
   zonder codewijziging. Zelfde tokens als de rest van de site. */
.eqa-actie {
  background: linear-gradient(135deg, var(--navy, #0A0E27) 0%, #111540 100%);
  border-radius: 16px;
  padding: 28px 32px;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.eqa-actie-label {
  display: inline-block;
  background: rgba(199, 72, 5, .18);
  color: #E85D15;
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.eqa-actie h3 { color: #fff; font-size: 1.5rem; line-height: 1.25; font-weight: 900; margin: 0; }
.eqa-actie p { color: #CCD6F6; margin: 0; max-width: 46em; line-height: 1.6; }
.eqa-actie .btn { margin-top: 6px; }
@media (max-width: 720px) {
  .eqa-actie { padding: 22px 20px; }
  .eqa-actie h3 { font-size: 1.25rem; }
}

/* Fab-dock: het gedeelde /opt/shared/fab-dock.js valt terug op var(--accent,#d04a02),
   het OUDE merkoranje, want deze site definieert --accent niet. Wit op #D04A02 haalt
   precies 4,50:1, nul marge; wit op #C74805 haalt 4,82:1. De token wordt hier bewust
   alleen op de dock gezet en niet op :root: 259 plekken in de gedeelde laag lezen
   --accent met heel andere terugvallen (#0f6dbf, #e8a035), die zou je meeslepen.
   De fallback in fab-dock.js zelf is fleetbreed en staat als los incident open. */
#fab-dock { --accent: #C74805; --accent-fg: #fff; }