/* SEMANU Modern Premium light theme */

:root {
  --bg: #FFFFFF;
  --bg-elev: #F5F5F7;
  --bg-card: #FFFFFF;
  --bg-soft: #FAFAFA;
  --border: #E5E5E7;
  --border-strong: #D2D2D7;
  --text: #0A0A0A;
  --text-dim: #5C5C5E;
  --text-muted: #6E6E73;
  --accent: #FF5A1F;
  --accent-dim: #CC4516;
  --accent-bg: #FFF1EC;
  /* Wit op #FF5A1F geeft 3,12:1 en zakt daarmee onder de WCAG-AA-eis van 4,5.
     Deze twee zijn narekend met de luminantieformule en halen die wel:
     #CC4516 met witte tekst 4,74:1, #C43F0E op wit 5,17:1. Het accent zelf
     blijft ongewijzigd voor vlakken, randen, iconen en hover. */
  --accent-solid: #CC4516;
  --accent-solid-hover: #A83811;   /* 6,48:1 met wit — hover van accent-solid */
  --accent-text: #C43F0E;
  --accent-glow: rgba(255, 90, 31, 0.12);

  /* Status / score-tier colors */
  --success: #16A34A;
  --success-dim: #047857;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-dim: #92400E;
  --warning-bg: #FFFBEB;
  --danger: #DC2626;
  --danger-dim: #B91C1C;
  --danger-bg: #FEF2F2;

  /* WhatsApp brand */
  --wa: #25D366;
  --wa-dim: #128C7E;

  --radius: 6px;
  --radius-lg: 12px;
  --maxw: 1180px;
  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: "Schibsted Grotesk", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

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

/* A11y: skip-link — onzichtbaar tot keyboard-focus (WCAG 2.4.1 bypass blocks) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 2000;
  background: var(--accent-solid, #CC4516);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { left: 0; outline: 2px solid #0A0A0A; outline-offset: 2px; }

/* A11y: visually-hidden — onzichtbaar voor sighted users, wel voor screen readers
   en crawlers (gebruikt om heading-hiërarchie compleet te houden, zie audit). */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html {
  scroll-behavior: smooth;
  /* Houd rekening met sticky site-header (~80px) bij anchor-jumps, zodat de
     section-titel niet onder de header verdwijnt. */
  scroll-padding-top: 96px;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

img, svg { display: block; max-width: 100%; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;
}

/* ---------- Header / Nav ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.85);
  border-bottom: 1px solid var(--border);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.brand-mark {
  width: 14px;
  height: 20px;
  display: inline-block;
  background: no-repeat center / contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 20' fill='none' stroke='%23FF5A1F' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'><path d='M3 3 L11 10 L3 17'/></svg>");
}

.brand-name { color: var(--text); }
.brand-name span { color: var(--text); }

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

.nav-links a {
  font-size: 14.5px;
  color: var(--text-dim);
  transition: color 0.2s;
  position: relative;
  font-weight: 500;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

.nav-links a.active::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.lang-switcher {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: transparent;
  padding: 0;
  font-family: var(--font-mono);
  /* Container heeft GEEN eigen kader/achtergrond meer (Tom juni 2026):
     alleen de active button (zwart vierkant) is zichtbaar. Bij hover/focus
     verschijnen de overige talen ernaast als vierkante knopjes. */
}

.lang-switcher button {
  background: transparent;
  color: var(--text-dim);
  border: 0;
  padding: 0;
  width: 0;
  height: 28px;
  overflow: hidden;
  opacity: 0;
  font-size: 11px;
  cursor: pointer;
  border-radius: 6px;
  font-family: inherit;
  letter-spacing: 0.04em;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: width 0.25s ease, opacity 0.2s ease,
              background 0.2s, color 0.2s;
  font-weight: 500;
}

.lang-switcher button:hover { color: var(--text); }

/* Collapsed by default: only the active language is shown. On hover or
   keyboard focus the switcher expands leftward to reveal all three. */
.lang-switcher button.active {
  background: var(--text);
  color: #FFF;
  width: 28px;
  opacity: 1;
}

.lang-switcher:hover button,
.lang-switcher:focus-within button {
  width: 28px;
  opacity: 1;
}

/* ---------- Header "Over" dropdown ---------- */

.nav-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-trigger {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--text-dim);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s;
}

.nav-dropdown-trigger::after {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.2s;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown.is-open .nav-dropdown-trigger,
.nav-dropdown-trigger.active {
  color: var(--text);
}

.nav-dropdown:hover .nav-dropdown-trigger::after,
.nav-dropdown.is-open .nav-dropdown-trigger::after {
  transform: rotate(225deg) translateY(2px);
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  margin-top: 16px;
  min-width: 184px;
  list-style: none;
  background: #ffffff;
  /* Voorkomt dat de semi-transparante header-bg (backdrop-filter) door de
     dropdown lekt — eigen stacking context + geforceerd pure-wit. */
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.10);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

/* invisible bridge so the hover is not lost in the gap below the trigger */
.nav-dropdown-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -16px;
  height: 16px;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:has(:focus-visible) .nav-dropdown-menu,
.nav-dropdown.is-open .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-menu li { width: 100%; }

.nav-dropdown-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-dim);
  white-space: nowrap;
}

.nav-dropdown-menu a:hover,
.nav-dropdown-menu a.active {
  background: var(--bg-elev);
  color: var(--text);
}

.nav-dropdown-menu a.active::after { display: none; }


/* ---------- Header "Klantenzone" portal link ---------- */

.nav-portal-link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
  padding: 6px 8px;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

.nav-portal-link:hover {
  color: var(--accent);
  background: var(--accent-bg);
}

.nav-portal-link svg { flex-shrink: 0; }

/* Icon only by default; the label slides out to the left on hover. */
.nav-portal-label {
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  margin-left: 0;
  white-space: nowrap;
  transition: max-width 0.28s ease, opacity 0.2s ease, margin-left 0.28s ease;
}

.nav-portal-link:hover .nav-portal-label,
.nav-portal-link:focus-visible .nav-portal-label {
  max-width: 170px;
  opacity: 1;
  margin-left: 6px;
}

.menu-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  /* 36px haalt WCAG (24px) maar ligt onder de 44px van Apple en de 48dp van
     Android — krap voor de knop die het vaakst wordt aangeraakt. */
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.2s;
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* Fel oranje als primaire knopkleur over de hele site (aug 2026, wens Tom).
   Hover verdiept naar accent-solid; let op: wit op #FF5A1F haalt formeel geen
   WCAG-AA voor kleine tekst, vandaar het zwaardere lettergewicht. */
.btn-primary {
  background: var(--accent);
  color: #FFF;
  font-weight: 600;
}

.btn-primary:hover {
  background: var(--accent-solid, #CC4516);
}

/* Oranje variant van de primaire knop (gericht, niet site-breed). */
.btn-primary--accent {
  background: var(--accent);
  color: #FFF;
}

.btn-primary--accent:hover {
  background: var(--accent-solid, #CC4516);
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-secondary:hover {
  border-color: var(--text);
}

.btn-arrow::after {
  content: "→";
  transition: transform 0.2s;
}

.btn-arrow:hover::after { transform: translateX(3px); }

/* ---------- Hero ---------- */

.hero {
  padding: 112px 0 96px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

.hero-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(10, 10, 10, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
  pointer-events: none;
}

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

/* De .eyebrow-pil boven de h1 is in september 2026 van alle dertien pagina's
   verwijderd. Hij stond vlak onder de navigatie en vlak boven een grote kop,
   met op de startpagina ook nog een oranje knop eronder: drie oranje elementen
   kort na elkaar. De regels zijn geschrapt in plaats van uitgezet, want er is
   geen enkele pagina meer die de class gebruikt. .check-gate-eyebrow verderop
   is een andere component en blijft staan. */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
}

.hero h1 {
  font-size: clamp(36px, 5.2vw, 62px);
  margin-bottom: 28px;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

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

.hero-sub {
  font-size: 20px;
  color: var(--text-dim);
  max-width: 680px;
  margin-bottom: 40px;
  line-height: 1.55;
}

.hero-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- Sections ---------- */

section {
  padding: 96px 0;
}

.section-head {
  margin-bottom: 64px;
  max-width: 760px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}

.section-title {
  font-size: clamp(30px, 4vw, 44px);
  margin-bottom: 18px;
  line-height: 1.1;
}

.section-sub {
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1.55;
}

/* alternate section background for rhythm */
.bg-soft { background: var(--bg-elev); }

/* ---------- Pillars grid ---------- */

.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.pillar {
  padding: 32px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.25s;
  position: relative;
}

.pillar:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

.pillar-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  margin-bottom: 18px;
  font-weight: 500;
}

.pillar h3 {
  font-size: 20px;
  margin-bottom: 12px;
}

.pillar p {
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.6;
}

/* ---------- Service cards ---------- */

.service-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.service-card {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  column-gap: 32px;
  row-gap: 0;
  align-items: start;
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  border-color: var(--accent);
  background: linear-gradient(180deg, var(--bg-card) 0%, var(--accent-bg) 100%);
  box-shadow: 0 8px 24px var(--accent-glow);
}

.service-card:hover .service-num {
  color: var(--accent-dim);
}

/* Case study reveal on hover */
.case-study {
  grid-column: 1 / -1;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px solid transparent;
  transition: max-height 0.5s cubic-bezier(0.2, 0.7, 0.2, 1),
              opacity 0.35s ease 0.1s,
              margin-top 0.4s ease,
              padding-top 0.4s ease,
              border-top-color 0.4s ease;
}

.service-card:hover .case-study {
  max-height: 420px;
  opacity: 1;
  margin-top: 28px;
  padding-top: 24px;
  border-top-color: var(--accent);
}

.case-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}

.case-body {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 16px;
  max-width: 780px;
}

.case-invest {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  letter-spacing: 0.02em;
  font-weight: 500;
  display: inline-block;
  padding: 6px 12px;
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: 999px;
}

@media (hover: none) {
  .case-study {
    max-height: none;
    opacity: 1;
    margin-top: 28px;
    padding-top: 24px;
    border-top-color: var(--border);
  }
}

.service-num {
  font-family: var(--font-mono);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  font-weight: 500;
}

.service-body { position: relative; }

.service-card h3 {
  font-size: 24px;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}

.service-meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  margin-bottom: 18px;
  letter-spacing: 0.02em;
}

.service-body p {
  color: var(--text-dim);
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.service-deliverables {
  list-style: none;
}

.service-deliverables li {
  /* "Managementrapportering" vraagt 189px in een kolom van 150. Zonder deze
     regel scrolt de homepage 18px naar rechts. */
  overflow-wrap: anywhere;
  hyphens: auto;
  padding: 7px 0;
  font-size: 14.5px;
  color: var(--text-dim);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.service-deliverables li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 9px;
}

.service-price {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  text-align: right;
  position: relative;
  letter-spacing: 0.02em;
}

/* ---------- Domain grid (homepage + domains page top) ---------- */

/* Vijf domeinen op één rij (augustus 2026). auto-fit met minmax liet de
   vijfde op een tweede rij vallen zodra de kolom onder 240px zakte; een vast
   aantal kolommen houdt de reeks als geheel leesbaar. Onder 1100px wordt het
   een horizontale strook waar je doorheen veegt, in plaats van vijf kaarten
   die tot briefkaartformaat krimpen. */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 1100px) {
  .domain-grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    /* Randen van de container overbruggen zodat de strook echt doorloopt. */
    margin: 0 -22px;
    padding: 4px 22px 14px;
    scrollbar-width: thin;
  }
  .domain-grid > .domain-card-wrap {
    flex: 0 0 clamp(230px, 74vw, 300px);
    scroll-snap-align: start;
  }
}

.domain-card-wrap {
  display: flex;
  flex-direction: column;
  position: relative;
}

.domain-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 12px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.25s;
  text-decoration: none;
  color: inherit;
}

.domain-card:hover,
.domain-card-wrap:hover .domain-card {
  border-color: var(--text);
  transform: translateY(-2px);
}

.domain-card .domain-tag {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 4px;
}

.domain-card h3 {
  font-size: 19px;
  margin-bottom: 0;
  letter-spacing: -0.02em;
}

.domain-card p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.domain-card .domain-arrow {
  color: var(--text-muted);
  font-size: 18px;
  margin-top: 4px;
  transition: transform 0.2s, color 0.2s;
}

.domain-card:hover .domain-arrow {
  color: var(--accent);
  transform: translateX(4px);
}

.domain-cta-row {
  margin-top: 32px;
  display: flex;
  justify-content: center;
}

/* ---------- Domain detail blocks (on domains page) ---------- */

.domain-block {
  padding: 56px 0;
  border-bottom: 1px solid var(--border);
}

.domain-block:last-child { border-bottom: 0; }

.domain-block-head {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  align-items: start;
}

.domain-block-num {
  font-family: var(--font-mono);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  font-weight: 500;
}

.domain-block h2 {
  font-size: 32px;
  margin-bottom: 12px;
  letter-spacing: -0.025em;
}

.domain-block-head p {
  color: var(--text-dim);
  font-size: 17px;
  line-height: 1.6;
  max-width: 760px;
}

.domain-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding-left: 112px;
}

.domain-detail h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}

.domain-detail ul {
  list-style: none;
}

.domain-detail li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.domain-detail .do-list li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 9px;
}

.domain-detail .risk-list li::before {
  content: "";
  width: 14px;
  height: 1px;
  background: var(--text-muted);
  flex-shrink: 0;
  margin-top: 12px;
}

/* Knoppenrij per domein: een lichte strook in plaats van losse knoppen in
   witruimte, met de leesmeer-link in dezelfde groep. De hover-regel die de
   check-knop liet oplichten zodra je ergens in het blok stond is weg
   (augustus 2026): die kleurde ook als je de tekstlink eronder aanwees. */
.domain-block-cta-row {
  margin-top: 28px;
  margin-left: 112px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* De leesmeer-link sluit visueel aan op de strook erboven. */
.domain-block .svc-detail-teaser {
  margin: 10px 0 0;
  padding-left: 112px;
  font-size: 14.5px;
}
.domain-block .svc-detail-teaser a { color: var(--text-dim); }
.domain-block .svc-detail-teaser a:hover { color: var(--accent); }

@media (max-width: 880px) {
  .domain-block-cta-row { margin-left: 0; }
  .domain-block .svc-detail-teaser { padding-left: 0; }
  .domain-block-head { grid-template-columns: 1fr; gap: 12px; }
  .domain-block-num { font-size: 24px; }
  .domain-detail { grid-template-columns: 1fr; gap: 28px; padding-left: 0; }
  .domain-block h2 { font-size: 26px; }
}

/* ---------- Approach blocks ---------- */

.approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 40px;
}

@media (max-width: 720px) {
  .approach-grid {
    grid-template-columns: 1fr;
  }
}

.approach-card {
  padding: 36px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  transition: all 0.25s;
}

.approach-card:hover {
  border-color: var(--border-strong);
}

.approach-card .pillar-num { font-size: 12.5px; }

.approach-card h3 { font-size: 22px; margin-bottom: 14px; }

.approach-card p {
  color: var(--text-dim);
  font-size: 15.5px;
  line-height: 1.65;
}

/* ---------- About ---------- */

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

.about-text p {
  color: var(--text-dim);
  margin-bottom: 22px;
  font-size: 17px;
  line-height: 1.7;
}

.about-text p strong { color: var(--text); font-weight: 500; }

.about-visual {
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
}

.about-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------- Blog post ---------- */

.blog-post {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px;
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  align-items: center;
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--text-dim);
}

.blog-meta .blog-meta-dot { color: var(--text-muted); }

.blog-author-mini {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blog-author-mini-img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  object-fit: cover;
}

.blog-hero-visual {
  aspect-ratio: 16 / 9;
  max-width: 900px;
  margin: 16px auto 48px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  position: relative;
  overflow: hidden;
}

.blog-hero-visual svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blog-post h2 {
  font-size: 26px;
  margin: 48px 0 16px;
  line-height: 1.25;
}

.blog-post h3 {
  font-size: 18px;
  margin: 28px 0 10px;
  line-height: 1.35;
}

.blog-post p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 0 0 18px;
}

.blog-post p strong { color: var(--text); font-weight: 500; }

.blog-post ul {
  margin: 0 0 22px;
  padding: 0 0 0 20px;
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
}

.blog-post ul li { margin-bottom: 8px; }

.blog-post blockquote {
  margin: 28px 0;
  padding: 18px 22px;
  border-left: 3px solid var(--accent);
  background: var(--bg-elev);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
}

.blog-cost-table {
  margin: 24px 0 32px;
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* Vier kolommen vragen 466px; op een telefoon van 375 sleepte dat de hele
     pagina mee. Nu scrolt alleen de tabel. */
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.blog-cost-table > thead,
.blog-cost-table > tbody {
  display: table;
  width: 100%;
  min-width: 460px;
}

.blog-cost-table th,
.blog-cost-table td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
}

.blog-cost-table th {
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elev);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.blog-cost-table td { color: var(--text-dim); }

.blog-cta-card {
  margin: 48px 0;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-cta-card h3 { margin: 0; font-size: 18px; color: var(--text); }
.blog-cta-card p { margin: 0; font-size: 15px; color: var(--text-dim); }
.blog-cta-card .blog-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.blog-faq { margin: 40px 0; }
.blog-faq h3 { margin-top: 24px; }

.blog-author-card {
  margin: 56px 0 0;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-elev);
  display: flex;
  gap: 18px;
  align-items: center;
}

.blog-author-card-photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--border);
  flex-shrink: 0;
  object-fit: cover;
}

.blog-author-card-info { flex: 1; }
.blog-author-card-info .name { font-weight: 600; color: var(--text); font-size: 15px; }
.blog-author-card-info .role { color: var(--text-dim); font-size: 13px; margin-top: 2px; }
.blog-author-card-info .bio { color: var(--text-dim); font-size: 14px; line-height: 1.55; margin-top: 8px; }

/* Multi-language inline content (one HTML, four language blocks toggled via CSS) */
.blog-lang { display: none; }
html[lang="nl"] .blog-lang[data-lang="nl"],
html[lang="en"] .blog-lang[data-lang="en"],
html[lang="de"] .blog-lang[data-lang="de"],
html[lang="fr"] .blog-lang[data-lang="fr"] { display: block; }

/* SVG-versie: <g> kan geen `display:block` aan, daarom `display:inline`.
   Werkt cross-browser voor groepen tekst-elementen in inline SVG. */
.svg-lang { display: none; }
html[lang="nl"] .svg-lang[data-lang="nl"],
html[lang="en"] .svg-lang[data-lang="en"],
html[lang="de"] .svg-lang[data-lang="de"],
html[lang="fr"] .svg-lang[data-lang="fr"] { display: inline; }

/* Blog index — post cards */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 28px;
}

.blog-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  padding: 22px 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.blog-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.blog-card-meta {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.blog-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.35;
}

.blog-card-excerpt {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0 0 12px;
  flex: 1;
}

.blog-card-read {
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

@media (max-width: 720px) {
  .blog-hero-visual { aspect-ratio: 4 / 3; }
  .blog-author-card { flex-direction: column; align-items: flex-start; }
}

/* ---------- Process steps ---------- */

.process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  margin-top: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.process-step {
  padding: 32px;
  border-right: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
}

.process-step:last-child { border-right: 0; }

.process-step .step-num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
  margin-bottom: 14px;
  font-weight: 500;
}

.process-step h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.process-step p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

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

.contact-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
}

/* Smartphone: toon het invulformulier eerst, het info-blok (incl. contactlijst) eronder. */
@media (max-width: 520px) {
  .contact-grid > #contact-form { order: -1; }
}

.contact-info > h3 {
  font-size: 22px;
  margin-bottom: 14px;
}

.contact-info p {
  color: var(--text-dim);
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.65;
}

.contact-list {
  list-style: none;
  margin-top: 36px;
}

.contact-list li {
  padding: 18px 0;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 14px;
}

.contact-list li:last-child { border-bottom: 1px solid var(--border); }

.contact-list .label {
  color: var(--text-muted);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.contact-list a { color: var(--accent); }

form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.form-row { display: flex; flex-direction: column; gap: 7px; }

.form-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}

.form-row input,
.form-row textarea,
.form-row select {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 12px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color 0.2s;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 90, 31, 0.12));
}

.form-row textarea { resize: vertical; min-height: 120px; }

/* ---------- Gestileerde keuzelijsten (styled select) ----------
   Vervangt het native dropdownvenster van de browser. De logica staat in
   src/site/select.js en draait op de publieke site én in het dashboard.

   Het <select> blijft in de DOM en blijft het element dat verzonden wordt:
   JS wikkelt er .styled-select omheen, verbergt het native element visueel
   (opacity 0, géén display:none, zodat het focusbaar blijft voor de
   ingebouwde formuliervalidatie) en legt er een knop + lijst overheen.
   Zonder JS bestaat de wrapper niet en blijft alles native werken.

   Onder 640px valt de module terug op het native element (.is-native +
   de mediaquery onderaan deze sectie): de OS-kiezer is daar beter.

   Kleuren erven van de huisstijlvariabelen; maten lopen via --ss-*, zodat
   een context (dashboard) enkel die hoeft te overschrijven. */

.styled-select {
  --ss-pad-y: 12px;
  --ss-pad-x: 14px;
  --ss-font-size: 15px;
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
}

/* Het echte <select>: onzichtbaar, vangt geen muis, maar blijft in de flow
   van het formulier (naam + waarde gaan gewoon mee bij verzenden). */
.styled-select > select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}

.styled-select.is-native > select {
  position: static;
  width: 100%;
  height: auto;
  opacity: 1;
  pointer-events: auto;
}

/* Gesloten veld — exact het uiterlijk van de andere .form-row-velden. */
.styled-select__field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: var(--ss-pad-y) var(--ss-pad-x);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
  font-size: var(--ss-font-size);
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.styled-select__field[hidden] { display: none; }
.styled-select__field:hover { border-color: var(--text-dim); }
.styled-select__field:disabled { opacity: 0.6; cursor: default; }

.styled-select__field:focus-visible,
.styled-select.is-open > .styled-select__field {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

.styled-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.styled-select.is-empty .styled-select__value { color: var(--text-dim); }

/* Eigen chevron in plaats van de OS-pijl. */
.styled-select__chevron {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--text-dim);
  transition: transform 0.2s;
}

.styled-select.is-open > .styled-select__field .styled-select__chevron {
  transform: rotate(180deg);
}

/* De open lijst: witte kaart, hairline rand, zachte schaduw. */
.styled-select__list {
  position: absolute;
  z-index: 900;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 300px;
  overflow-y: auto;
  padding: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Te weinig ruimte onder de knop → de lijst klapt naar boven open. */
.styled-select.is-above > .styled-select__list {
  top: auto;
  bottom: calc(100% + 6px);
}

/* Nodig omdat de regel hierboven de display:none van [hidden] overschrijft. */
.styled-select__list[hidden] { display: none; }

.styled-select__option {
  padding: 9px 10px;
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--ss-font-size);
  line-height: 1.35;
  cursor: pointer;
}

.styled-select__option.is-selected { font-weight: 600; }

/* Actief item = het item onder de muis of onder aria-activedescendant. */
.styled-select__option.is-active {
  background: var(--accent-bg);
  color: var(--accent);
}

.styled-select__option[aria-disabled="true"] {
  color: var(--text-dim);
  opacity: 0.55;
  cursor: default;
  background: transparent;
}

/* Groepskoppen (optgroup): niet selecteerbaar, mono en in hoofdletters
   zoals .section-label. */
.styled-select__group-label {
  padding: 8px 10px 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.styled-select__group + .styled-select__group,
.styled-select__option + .styled-select__group {
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--border);
}

/* Zoekbalk bovenaan een doorzoekbare lijst ([data-search] of meer dan 12
   opties). Geen echt invoerveld: de focus blijft op de knop en JS toont hier
   de getypte zoekterm. Plakt bovenaan tijdens het scrollen; de negatieve
   marge en top heffen de padding van de lijst op. */
.styled-select__search {
  position: sticky;
  top: -6px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px -6px 6px;
  padding: 10px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  color: var(--text);
  font-size: var(--ss-font-size);
  line-height: 1.3;
}

.styled-select__search-icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--text-dim);
}

.styled-select__search-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

/* Tekstcursor achter de zoekterm, zodat duidelijk is dat typen werkt. */
.styled-select__search-text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: currentColor;
  animation: styled-select-caret 1s steps(1) infinite;
}

.styled-select__search.is-empty .styled-select__search-text { color: var(--text-dim); }
.styled-select__search.is-empty .styled-select__search-text::after { display: none; }

@keyframes styled-select-caret {
  50% { opacity: 0; }
}

.styled-select__empty {
  padding: 9px 10px;
  color: var(--text-dim);
  font-size: var(--ss-font-size);
}

.styled-select__option[hidden],
.styled-select__group[hidden],
.styled-select__empty[hidden] { display: none; }

/* Contextmaten: het dashboard heeft compactere velden dan de publieke site. */
.dash-body .styled-select {
  --ss-pad-y: 6px;
  --ss-pad-x: 12px;
  --ss-font-size: 13.5px;
}

.dash-body .dash-form-row .styled-select,
.dash-body .doc-upload .styled-select {
  --ss-pad-y: 9px;
  --ss-font-size: 14px;
}

/* In filterbalken en de timer staan de velden naast elkaar en zijn ze
   shrink-to-fit; daar mag de wrapper niet de volle breedte pakken. */
.dash-filters .styled-select,
.time-timer .styled-select {
  width: auto;
  min-width: 150px;
  max-width: 100%;
}

/* Onder 640px altijd native, ook als JS traag is of faalt. */
@media (max-width: 639px) {
  .styled-select > select {
    position: static;
    width: 100%;
    height: auto;
    opacity: 1;
    pointer-events: auto;
  }
  .styled-select__field,
  .styled-select__list { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .styled-select__field,
  .styled-select__chevron { transition: none; }
  .styled-select__search-text::after { animation: none; }
}

/* ---------- Praktijkkader in blogartikels ----------
   Eerstehands ervaring uit een echte opdracht, visueel apart van het
   algemene advies eromheen. Zo ziet zowel de lezer als een taalmodel dat dit
   geen samenvatting van andermans tekst is. */

.blog-praktijk {
  margin: 36px 0;
  padding: 26px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.blog-praktijk-kop {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 12px;
  font-weight: 500;
}

.blog-praktijk p { margin: 0 0 12px; }
.blog-praktijk p:last-child { margin: 0; }

.blog-praktijk-noot {
  font-size: 14px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 12px;
  margin-top: 16px;
}

/* ---------- CTA banner ---------- */

.cta-banner {
  margin-top: 56px;
  padding: 56px;
  border: 1px solid var(--border);
  /* Wit kader met oranje lijn bovenaan in plaats van het grijze vlak
     (augustus 2026) — vrolijker en consistent op elke ondergrond. */
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, var(--accent-glow), transparent 70%);
  pointer-events: none;
}

.cta-banner > * { position: relative; }
.cta-banner h2 { font-size: 28px; margin-bottom: 8px; }
.cta-banner p { color: var(--text-dim); font-size: 16px; }

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

.site-footer {
  border-top: 1px solid var(--border);
  padding: 56px 0 28px;
  margin-top: 96px;
  color: var(--text-muted);
  font-size: 13px;
  background: var(--bg);
}

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

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 18px;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col a {
  color: var(--text-dim);
  font-size: 14px;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--text); }

.footer-col li {
  font-size: 14px;
  color: var(--text-dim);
}

.footer-brand-col .brand { margin-bottom: 16px; }

.footer-brand-line {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 280px;
}

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent-dim);
  letter-spacing: 0.02em;
  font-weight: 500;
}

/* Social icoontjes (juni 2026 — momenteel enkel LinkedIn) */
.footer-social {
  margin-top: 14px;
  display: flex;
  gap: 8px;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--border, #E5E5E7);
  background: #ffffff;
  color: var(--text-muted, #5F5E5A);
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, background 0.15s ease;
}
.footer-social-link:hover {
  border-color: var(--accent, #FF5A1F);
  color: var(--accent, #FF5A1F);
  background: #FFF7F2;
  transform: translateY(-1px);
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 880px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 28px; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .site-footer { padding: 40px 0 24px; }
}

/* legacy single-row footer (kept for fallback) */
.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-row .brand { opacity: 0.85; font-size: 14px; }

.footer-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
}

/* ---------- Page header ---------- */

.page-head {
  padding: 96px 0 48px;
  background: var(--bg);
}

.page-head h1 {
  font-size: clamp(38px, 5vw, 60px);
  margin-bottom: 18px;
  line-height: 1.05;
}

.page-head p {
  font-size: 19px;
  color: var(--text-dim);
  max-width: 760px;
  line-height: 1.55;
}

/* ---------- Tag chips ---------- */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}

.chip {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  color: var(--text-dim);
  letter-spacing: 0.03em;
  background: var(--bg-card);
  transition: all 0.2s;
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

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

@media (max-width: 880px) {
  .nav-links {
    position: fixed;
    inset: 60px 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s;
  }

  /* Vul de beschikbare hoogte onder de header en scroll als het langer wordt
     dan het scherm. De oude vaste cap (360px) kapte het menu af zodra een
     dropdown openklapte, waardoor onderste items onbereikbaar werden. */
  .nav-links.open {
    max-height: calc(100vh - 60px);
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
  }

  .nav-links li {
    width: 100%;
    border-top: 1px solid var(--border);
  }

  .nav-links a {
    display: block;
    padding: 16px 28px;
  }

  .nav-links a.active::after { display: none; }

  .menu-toggle { display: inline-flex; }

  /* The "Over" dropdown becomes a static, always-open sub-list on mobile */
  .nav-dropdown {
    display: block;
    width: 100%;
  }
  .nav-dropdown-trigger {
    display: flex;
    width: 100%;
    justify-content: space-between;
    padding: 16px 28px;
    font-size: 14.5px;
  }
  /* Op mobiel een echte accordion: standaard ingeklapt, openklappen via de
     chevron (JS togglet .is-open). Zo blijft het menu compact en betekent het
     pijltje wat het suggereert. opacity/visibility blijven 'aan' zodat de
     items zichtbaar zijn zodra max-height opengaat. */
  .nav-dropdown-menu {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    opacity: 1;
    visibility: visible;
    margin: 0;
    min-width: 0;
    width: 100%;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: var(--bg-elev);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  /* De desktop-regels voor :hover/:focus-within/.is-open zetten
     transform: translateX(-50%) en staan BUITEN de media query met
     specificiteit 0,3,0. Media queries verhogen specificiteit niet, dus een
     reset op de basis-selector (0,1,0) verliest. Daarom hier dezelfde 0,3,0
     selectoren — later in de bron → die winnen op mobiel en houden het
     submenu netjes in-flow i.p.v. links-omlaag geschoven. */
  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:has(:focus-visible) .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    transform: none;
    left: auto;
    right: auto;
  }
  .nav-dropdown.is-open .nav-dropdown-menu {
    max-height: 400px;
  }
  .nav-dropdown-menu::before { display: none; }
  .nav-dropdown-menu a { padding: 14px 28px 14px 44px; }

  /* Een aanraakscherm kent geen hover. Daarom stond de kiezer hier altijd
     open en nam hij vier plaatsen in de balk in, naast het logo, de
     Readiness Check, het accountpictogram en het menu. Nu blijft hij
     ingeklapt en klapt hij open bij een tik; i18n.js zet .is-open. */
  .lang-switcher button,
  .lang-switcher a {
    width: 0;
    opacity: 0;
  }
  .lang-switcher button.active,
  .lang-switcher a.active,
  .lang-switcher.is-open button,
  .lang-switcher.is-open a {
    width: 30px;
    opacity: 1;
  }
  .nav-portal-label { display: none; }
  .nav-portal-link { padding: 6px; }

  .service-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 28px;
  }

  .service-num { font-size: 24px; }

  .service-price { text-align: left; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; }

  .about-visual { max-width: 360px; }

  .contact-grid { grid-template-columns: 1fr; gap: 40px; }

  .cta-banner { padding: 36px 28px; flex-direction: column; align-items: flex-start; }

  .process-step { border-right: 0; border-bottom: 1px solid var(--border); }
  .process-step:last-child { border-bottom: 0; }

  section { padding: 72px 0; }
  .hero { padding: 80px 0 72px; }
  .page-head { padding: 72px 0 32px; }
}

@media (max-width: 520px) {
  .hero { padding: 56px 0 56px; }
  section { padding: 56px 0; }
  .page-head { padding: 56px 0 24px; }
  .container { padding: 0 22px; }
  .nav { padding: 14px 0; }
  .cta-banner { padding: 28px 22px; margin-top: 40px; }
  form { padding: 24px; }
}

/* ---------- Readiness Check ---------- */

.check-page-head {
  padding: 80px 0 14px;
}

/* Tighter gap between the intro head and the check card (reduced ~40%) */
.check-page-head + section {
  padding-top: 58px;
}

.check-page-head h1 {
  font-size: clamp(30px, 3.6vw, 42px);
  margin-bottom: 14px;
  max-width: 800px;
}

.check-page-head p {
  font-size: 17px;
  color: var(--text-dim);
  max-width: 680px;
  line-height: 1.55;
}

.check-container {
  max-width: 760px;
  margin: 0 auto;
  padding: 19px 28px 96px;
  scroll-margin-top: 88px;
}

.check-progress {
  margin-bottom: 36px;
}

.check-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}

.check-progress-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.check-progress-pct {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent-dim);
  font-weight: 500;
}

.check-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}

.check-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.check-question {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  position: relative;
}

.check-q-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  font-weight: 500;
}

.check-q-title {
  font-size: 14px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}

.check-q-text {
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 28px;
  font-weight: 500;
}

.check-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.check-option {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.15s;
  background: var(--bg);
  align-items: center;
}

.check-option:hover {
  border-color: var(--text);
  background: var(--bg-elev);
}

.check-option.is-selected {
  border-color: var(--accent);
  background: var(--accent-bg);
  box-shadow: 0 0 0 1px var(--accent);
}

.check-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.check-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  color: var(--text-dim);
}

.check-option.is-selected .check-option-letter {
  background: var(--accent-solid, #CC4516);
  color: #FFF;
  border-color: var(--accent-solid, #CC4516);
}

.check-option-text {
  font-size: 15.5px;
  color: var(--text);
  line-height: 1.5;
}

.check-feedback {
  background: var(--bg-elev);
  border-left: 3px solid var(--accent);
  padding: 16px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin-bottom: 28px;
}

.check-feedback-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
  font-weight: 500;
  margin-bottom: 6px;
}

.check-feedback-text {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
  font-style: italic;
}

.check-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}

.check-nav .btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Intro screen ---- */

.check-intro {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
}

.check-intro-lede {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 26px;
}

.check-intro-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 30px;
}

.check-intro-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text);
}

.check-intro-points li svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 1px;
}

.check-intro-start {
  width: 100%;
  justify-content: center;
  background: var(--accent);
  animation: check-buzz 4s ease-in-out infinite;
}

.check-intro-start:hover {
  background: var(--accent-solid, #CC4516);
}

/* Lichte buzzer: korte, subtiele trilling met oranje gloed, elke 4 seconden */
@keyframes check-buzz {
  0%, 86%, 100% { transform: none; box-shadow: none; }
  88% { transform: rotate(-0.8deg) scale(1.015); }
  90% { transform: rotate(0.9deg) scale(1.025); box-shadow: 0 6px 20px var(--accent-glow), 0 0 0 4px var(--accent-glow); }
  92% { transform: rotate(-0.6deg) scale(1.015); }
  94% { transform: none; box-shadow: none; }
}

@media (prefers-reduced-motion: reduce) {
  .check-intro-start { animation: none; }
}

/* ---- End gate: name + e-mail ---- */

.check-gate {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--accent);
  padding: 40px;
}

/* E-mail gate over the result — the report is rendered, then blurred, with
   the gate card overlaid on top. Blurred just enough that it clearly is a
   report but cannot be read. */
.result-page.is-locked {
  filter: blur(7px);
  pointer-events: none;
  user-select: none;
}
.check-result-lock {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(245, 245, 247, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  animation: lock-fade-in 0.25s ease;
}
.check-result-lock-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  border-top: 4px solid var(--accent);
  padding: 40px;
  max-width: 520px;
  width: 100%;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
}
@keyframes lock-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body.is-check-locked { overflow: hidden; }
@media (max-width: 560px) {
  .check-result-lock-card { padding: 28px 22px; }
}

.check-gate-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-dim);
  font-weight: 500;
  margin-bottom: 10px;
}

.check-gate-title {
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-bottom: 10px;
}

.check-gate-lede {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-dim);
  margin-bottom: 26px;
}

.check-gate-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.check-field {
  margin-bottom: 14px;
}

.check-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  margin-bottom: 6px;
}

.check-field input {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--text);
}

.check-field input:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 90, 31, 0.12));
}

.check-gate-error {
  font-size: 13.5px;
  color: var(--danger-dim, #B91C1C);
  background: var(--danger-bg, rgba(248, 113, 113, 0.08));
  border: 1px solid var(--danger, #F87171);
  border-radius: var(--radius);
  padding: 9px 12px;
  margin: 4px 0 14px;
}

.check-gate-actions {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.check-gate-actions .btn { flex: 1; justify-content: center; }
.check-gate-actions .btn-secondary { flex: 0 0 auto; }

.check-gate-privacy {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 16px;
}

.result-emailed-note {
  font-size: 13.5px;
  color: var(--text-dim);
  margin-top: 14px;
}
.result-emailed-note strong { color: var(--text); }

@media (max-width: 560px) {
  .check-intro,
  .check-gate { padding: 28px 22px; }
  .check-gate-row { grid-template-columns: 1fr; gap: 0; }
  .check-gate-actions { flex-direction: column-reverse; }
  .check-gate-actions .btn { width: 100%; }
}

/* ---- Result screen ---- */

.check-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.check-result.tier-green { border-top: 4px solid var(--success); }
.check-result.tier-amber { border-top: 4px solid #D97706; }
.check-result.tier-red { border-top: 4px solid var(--danger); }

.check-result-head {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 36px;
  align-items: center;
}

.check-score-badge {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--border);
}

.tier-green .check-score-badge { border-color: var(--success); background: rgba(52, 211, 153, 0.06); }
.tier-amber .check-score-badge { border-color: #D97706; background: rgba(217, 119, 6, 0.06); }
.tier-red .check-score-badge { border-color: var(--danger); background: rgba(248, 113, 113, 0.06); }

.check-score-num {
  font-family: var(--font-sans);
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 10px;
}

.check-tier-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
}

.tier-green .check-tier-label { color: #047857; }
.tier-amber .check-tier-label { color: #92400E; }
.tier-red .check-tier-label { color: #B91C1C; }

.check-result-summary h2 {
  font-size: 26px;
  margin-bottom: 10px;
  letter-spacing: -0.025em;
}

.check-result-summary p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.55;
}

.check-attention h3,
.check-advice h3,
.check-cta h3 {
  font-size: 13px;
  font-family: var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 16px;
}

.check-attention ul {
  list-style: none;
  padding: 0;
}

.check-attention li {
  padding: 14px 0;
  border-top: 1px solid var(--border);
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
}

.check-attention li:last-child { border-bottom: 1px solid var(--border); }

.check-attention li strong {
  color: var(--text);
  font-weight: 500;
}

.check-advice p {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--text);
}

.check-cta {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--border);
}

.check-cta p {
  color: var(--text-dim);
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.55;
}

.check-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.check-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.check-form-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

.check-form-row input,
.check-form-row textarea {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  padding: 10px 14px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  transition: border-color 0.2s;
}

.check-form-row input:focus,
.check-form-row textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow, rgba(255, 90, 31, 0.12));
}

.check-form-row textarea {
  resize: vertical;
  min-height: 80px;
}

.check-form-thanks {
  background: var(--bg);
  border: 1px solid var(--success);
  border-radius: var(--radius);
  padding: 18px;
  color: var(--text);
  font-size: 15px;
}

.check-retake-row {
  border-top: 1px solid var(--border);
  padding-top: 28px;
  display: flex;
  justify-content: center;
}

@media (max-width: 720px) {
  .check-container { padding: 24px 18px 64px; }
  .check-question { padding: 28px 22px; }
  .check-q-text { font-size: 19px; }
  .check-result { padding: 28px 22px; }
  .check-result-head { grid-template-columns: 1fr; gap: 24px; text-align: center; }
  .check-result-head .check-score-badge { max-width: 280px; margin: 0 auto; }
  .check-nav { flex-direction: row; }
  .check-nav .btn { flex: 1; justify-content: center; }
}

/* ---------- Check hub page ---------- */

.check-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 32px;
}

@media (max-width: 720px) {
  .check-hub-grid {
    grid-template-columns: 1fr;
  }
}

.check-hub-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: all 0.25s;
  text-decoration: none;
  color: inherit;
}

.check-hub-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--accent-glow);
}

.check-hub-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  font-weight: 500;
}

.check-hub-card h3 {
  font-size: 20px;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.check-hub-card p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  flex-grow: 1;
}

.check-hub-card .arrow {
  color: var(--accent);
  font-size: 18px;
  margin-top: 4px;
}

/* ---------- Cookie consent banner ---------- */

.cookie-banner {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 40px);
  max-width: 760px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  padding: 22px 26px;
  z-index: 100;
  display: block;
  animation: cookieGlijIn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cookie-banner .cookie-titel {
  font-family: var(--font-head, inherit);
  font-weight: 700;
  font-size: 19px;
  margin: 0 0 8px;
}
.cookie-banner .cookie-soorten {
  list-style: none;
  margin: 12px 0 4px;
  padding: 0;
}
.cookie-banner .cookie-soorten li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-dim);
}
.cookie-banner .cookie-soorten li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.cookie-banner .cookie-soorten strong { color: var(--text); }
.cookie-banner .cookie-privacy {
  margin-left: auto;
  align-self: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner .cookie-privacy:hover { color: var(--accent-solid, #CC4516); }

.cookie-banner.is-hidden {
  display: none;
}

.cookie-banner .cookie-text {
  flex: 1;
  margin: 0;
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  min-width: 280px;
}

.cookie-banner .cookie-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cookie-banner .btn {
  font-size: 13.5px;
  padding: 9px 16px;
}

/* De drie keuzes zijn visueel gelijk (september 2026).
   Daarvoor was "Alles aanvaarden" een gevulde oranje knop van 5337 px² en
   "Weigeren" een omlijnde van 3458 px², een derde kleiner en zonder kleur.
   De EDPB vraagt gelijke prominentie: weigeren moet even makkelijk en even
   zichtbaar zijn als aanvaarden. Daarom dragen de drie knoppen nu dezelfde
   stijl en dezelfde minimumbreedte, en stuurt niets de bezoeker één kant op. */
.cookie-banner .cookie-keuze {
  flex: 1 1 auto;
  min-width: 132px;
  justify-content: center;
  background: var(--bg-card, #fff);
  color: var(--text, #0A0A0A);
  border: 1px solid var(--border-strong, #D2D2D7);
  font-weight: 600;
}
.cookie-banner .cookie-keuze:hover {
  border-color: var(--accent, #FF5A1F);
  color: var(--accent-solid, #CC4516);
}

/* De scrim is weg (september 2026). Er lag een waas over de hele pagina met
   een scrollslot tot er gekozen was. Dat ontneemt de bezoeker de mogelijkheid
   om de banner te negeren, en niets kiezen hoort te kunnen: het betekent
   gewoon geen niet-noodzakelijke cookies. De kaart blijft staan tot er
   gekozen is, de pagina blijft ondertussen bruikbaar.
   De regels hieronder blijven staan zodat een pagina die nog uit de cache
   komt met een oude scrim erin niet blijft haken. */
.cookie-scrim { display: none !important; }
html.cookie-open, html.cookie-open body { overflow: visible; }

/* Schuift van links het beeld in en landt in het midden (aug 2026). */
@keyframes cookieGlijIn {
  from { transform: translate(calc(-50% - 80px), -50%); opacity: 0; }
  to { transform: translate(-50%, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-banner { animation: none; }
}

@media (max-width: 520px) {
  /* Mobiel blijft het een onderblad: gecentreerd zweven oogt daar als een
     foutmelding en de knoppen horen binnen duimbereik. */
  .cookie-banner {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform: none;
    animation: none;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 16px 18px;
  }
  .cookie-banner .cookie-actions { width: 100%; flex-direction: column; }
  .cookie-banner .cookie-privacy { margin: 6px auto 0; }
  .cookie-banner .btn { width: 100%; justify-content: center; }
}

/* ---------- Privacy page ---------- */

.privacy-content {
  max-width: 780px;
  margin: 0 auto;
  padding: 24px 24px 80px;
}

.privacy-content section {
  padding: 0 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 32px;
}

.privacy-content section:last-of-type {
  border-bottom: 0;
}

.privacy-content h2 {
  font-size: 22px;
  margin-bottom: 14px;
  letter-spacing: -0.02em;
}

.privacy-content p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.7;
}

.privacy-updated {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: 16px;
}

.privacy-manage-row {
  margin-top: 24px;
}

/* ---------- Readiness Check — full-width result page ---------- */

/* When the wizard renders the result, the body gets .is-result-mode.
   This hides the narrow page-head and lets the result break out to full width. */
body.is-result-mode .check-page-head { display: none; }
body.is-result-mode .check-container {
  max-width: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.result-page {
  width: 100%;
}

/* --- Hero --- */

.result-hero {
  padding: 64px 0 56px;
  position: relative;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
/* Tier coloring is carried by the score ring and the CTA accent edge —
   the hero stays on the neutral page background for a calmer feel. */

.result-hero-inner {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 48px;
  align-items: center;
}

.result-hero-text .section-label { margin-bottom: 18px; }

.result-hero-title {
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 16px;
  max-width: 720px;
}

.result-hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-dim);
  max-width: 680px;
  margin-bottom: 18px;
}

.result-hero-invite {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  font-weight: 500;
  max-width: 680px;
  margin: 0 0 28px;
  padding-left: 14px;
  border-left: 3px solid var(--brand, #ff5a1f);
}

.result-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.result-hero-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.result-hero-score-meta {
  text-align: center;
}

.result-hero-score-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.result-hero-score-tier {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.tier-green .result-hero-score-tier { color: var(--success-dim); }
.tier-amber .result-hero-score-tier { color: var(--warning-dim); }
.tier-red .result-hero-score-tier { color: var(--danger-dim); }

/* --- Score ring --- */

.result-score-ring {
  width: 220px;
  height: 220px;
  position: relative;
}

.result-score-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.result-score-ring circle {
  fill: none;
  stroke-width: 14;
  stroke-linecap: round;
}

.result-score-ring .ring-track {
  stroke: var(--border);
}

.result-score-ring--green .ring-fill { stroke: var(--success); }
.result-score-ring--amber .ring-fill { stroke: var(--warning); }
.result-score-ring--red .ring-fill { stroke: var(--danger); }

.result-score-ring-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.result-score-num {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--text);
}

.result-score-max {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

/* --- Result sections --- */

.result-section {
  padding: 64px 0;
  border-bottom: 1px solid var(--border);
}

.result-section:last-child {
  border-bottom: 0;
}

.result-section--soft {
  background: var(--bg-elev);
}

.result-section--cta {
  background: var(--bg);
}

.result-section--retake {
  padding: 40px 0 96px;
}

.result-section-title {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}

.result-section-lede {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  max-width: 640px;
  margin-bottom: 28px;
}

.result-section-lede--wide { max-width: 820px; }

/* --- Attention + Breakdown two-column block --- */

.result-two-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

.result-attention-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.result-attention-list li {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 16px 18px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  align-items: start;
}

.result-attention-list li.result-attention-empty {
  display: block;
  padding: 18px 20px;
  color: var(--text-dim);
  background: var(--success-bg);
  border-color: var(--success);
}

.result-attention-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
}

.result-attention-tag--gap {
  background: var(--warning-bg);
  color: var(--warning-dim);
  border: 1px solid var(--warning);
}
.result-attention-tag--critical {
  background: var(--danger-bg);
  color: var(--danger-dim);
  border: 1px solid var(--danger);
}

.result-attention-body strong {
  display: block;
  font-size: 15.5px;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 600;
}

.result-attention-body p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* --- Breakdown list --- */

.result-breakdown-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}

.result-breakdown-item {
  padding: 12px 0;
  border-bottom: 1px dashed var(--border);
}

.result-breakdown-item:last-child {
  border-bottom: 0;
}

.result-breakdown-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}

.result-breakdown-num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  font-weight: 500;
}

.result-breakdown-title {
  font-size: 14.5px;
  color: var(--text);
  font-weight: 500;
}

.result-breakdown-level {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.result-breakdown-level--strong   { background: var(--success-bg); color: var(--success-dim); }
.result-breakdown-level--solid    { background: var(--accent-bg);  color: var(--accent-dim); }
.result-breakdown-level--gap      { background: var(--warning-bg); color: var(--warning-dim); }
.result-breakdown-level--critical { background: var(--danger-bg);  color: var(--danger-dim); }
.result-breakdown-level--na       { background: var(--bg-elev);    color: var(--text-muted); }

.result-breakdown-bar {
  height: 6px;
  background: var(--bg-elev);
  border-radius: 999px;
  overflow: hidden;
}

.result-breakdown-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.result-breakdown-fill--strong   { background: var(--success); }
.result-breakdown-fill--solid    { background: var(--accent); }
.result-breakdown-fill--gap      { background: var(--warning); }
.result-breakdown-fill--critical { background: var(--danger); }
.result-breakdown-fill--na       { background: var(--border); }

/* --- "Why this matters" head --- */

.result-why-head { max-width: 820px; margin-bottom: 40px; }
.result-help-head { margin-top: 32px; margin-bottom: 18px; }

/* --- Help cards grid --- */

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

@media (max-width: 880px) {
  .result-help-grid { grid-template-columns: 1fr; }
}

.result-help-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.result-help-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.result-help-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.08em;
  font-weight: 500;
  margin-bottom: 4px;
}

.result-help-card h3 {
  font-size: 18px;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.result-help-card p {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

/* --- CTA block --- */

.result-cta-block {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  padding: 44px 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--bg-card);
  position: relative;
  overflow: hidden;
}

.result-cta-block::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
}

.result-cta-block--green::before { background: var(--success); }
.result-cta-block--amber::before { background: var(--warning); }
.result-cta-block--red::before   { background: var(--danger); }

.result-cta-text h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  max-width: 600px;
}

.result-cta-text p {
  color: var(--text-dim);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  max-width: 600px;
}

.result-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.result-cta-meta {
  padding-top: 4px;
}

.result-cta-meta ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.result-cta-meta li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border);
  font-size: 14.5px;
  color: var(--text);
}

.result-cta-meta li:last-child { border-bottom: 0; }

.result-cta-meta li .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
}

/* --- Retake row --- */

.result-retake {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* --- WhatsApp button styling (used inline & floating) --- */

.btn-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.5px;
  background: var(--accent);
  color: #FFF;
  border: 1px solid var(--accent-solid, #CC4516);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  text-decoration: none;
  line-height: 1;
}

.btn-whatsapp:hover {
  background: var(--accent-solid, #CC4516);
  border-color: var(--accent-dim);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--accent-glow);
}

.btn-whatsapp .wa-glyph {
  width: 18px;
  height: 18px;
}

/* --- Responsive --- */

@media (max-width: 880px) {
  .result-hero { padding: 48px 0 40px; }
  .result-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .result-hero-score { order: -1; }
  .result-score-ring { width: 180px; height: 180px; }
  .result-score-num { font-size: 44px; }
  .result-two-cols { grid-template-columns: 1fr; gap: 40px; }
  .result-section { padding: 48px 0; }
  .result-cta-block { grid-template-columns: 1fr; gap: 28px; padding: 28px 24px; }
}

@media (max-width: 520px) {
  .result-attention-list li {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .result-attention-tag { justify-self: start; }
  .result-breakdown-row {
    grid-template-columns: 28px 1fr auto;
    gap: 8px;
  }
  .result-breakdown-title { font-size: 13.5px; }
}

/* ---------- Floating WhatsApp button ---------- */

.wa-float {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px 12px 14px;
  background: var(--accent);
  color: #FFF;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 90, 31, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.wa-float:hover {
  transform: translateY(-2px) scale(1.02);
  background: var(--accent-solid, #CC4516);
  box-shadow: 0 14px 32px rgba(255, 90, 31, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.wa-float:focus-visible {
  outline: 3px solid rgba(255, 90, 31, 0.45);
  outline-offset: 2px;
}

.wa-float-icon {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
}

.wa-float-icon svg {
  width: 22px;
  height: 22px;
}

.wa-float-label {
  white-space: nowrap;
}

/* Sit clear of the cookie banner when it's visible */
.cookie-banner:not(.is-hidden) ~ .wa-float {
  bottom: 110px;
}

@media (max-width: 520px) {
  .wa-float {
    padding: 12px;
    gap: 0;
    right: 16px;
    bottom: 16px;
  }
  .wa-float-icon { background: transparent; }
  .wa-float-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    margin: -1px;
  }
  .cookie-banner:not(.is-hidden) ~ .wa-float { bottom: 120px; }
}

/* ---------- Hero trust strip (homepage) ---------- */

.hero-trust {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  color: var(--text-dim);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
}

.hero-trust svg {
  color: var(--accent);
  flex-shrink: 0;
}

@media (max-width: 720px) {
  .hero-trust { flex-direction: column; gap: 10px; }
}

/* ---------- Testimonials (homepage) ---------- */

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 28px;
}

@media (max-width: 880px) {
  .testimonial-grid { grid-template-columns: 1fr; }
}

.testimonial {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  margin: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-quote-mark {
  font-family: var(--font-mono);
  font-size: 48px;
  color: var(--accent);
  line-height: 0.8;
  letter-spacing: -0.04em;
  height: 24px;
  font-weight: 600;
}

.testimonial blockquote {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}

.testimonial figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: auto;
}

.testimonial-role {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.testimonial-sector {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* ---------- Founder card (about page) ---------- */

.founder-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 36px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  margin-top: 28px;
  align-items: start;
}

@media (max-width: 720px) {
  .founder-card { grid-template-columns: 1fr; gap: 22px; }
}

.founder-portrait {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--bg-elev);
  border: 1px solid var(--border);
}

.founder-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.founder-photo-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-family: var(--font-sans);
  font-size: 54px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-solid, #CC4516) 0%, var(--accent-dim) 100%);
}

.founder-body {
  padding-top: 8px;
}

.founder-name {
  font-size: 24px;
  letter-spacing: -0.025em;
  font-weight: 600;
  margin-bottom: 2px;
}

.founder-role {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin-bottom: 18px;
  font-weight: 500;
}

.founder-bio {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 12px;
}

.founder-bio--alt { margin-bottom: 18px; }

.founder-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-top: 1px solid var(--border);
  padding-top: 16px;
  margin-top: 4px;
}

.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.founder-link:hover { color: var(--accent); }

.founder-link svg { color: var(--accent); }

/* ---------- Contact trust + Calendly (contact page) ---------- */

.contact-trust {
  margin: 16px 0 22px;
  padding: 14px 16px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text);
}

.contact-trust-item svg { color: var(--accent); flex-shrink: 0; }

.form-alt-cta {
  font-size: 13.5px;
  color: var(--text-dim);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  line-height: 1.5;
}

.form-alt-cta a {
  color: var(--accent);
  font-weight: 500;
}

.form-alt-cta a:hover { text-decoration: underline; }

.form-disclaimer {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 10px;
  line-height: 1.5;
}

.calendly-wrap {
  margin-top: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px;
  overflow: hidden;
}

.calendly-inline-widget { width: 100%; }

/* ---------- Resources page ---------- */

.resources-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 16px;
}

@media (max-width: 880px) {
  .resources-grid { grid-template-columns: 1fr; }
}

.resource-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.resource-card:hover {
  border-color: var(--text);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

.resource-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.resource-tag {
  display: inline-flex;
  padding: 4px 12px;
  background: var(--accent-bg);
  color: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}

.resource-pages {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}

.resource-title {
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 0;
}

.resource-body {
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}

.resource-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.resource-points li {
  position: relative;
  padding-left: 18px;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.5;
}

.resource-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}

.resource-cta {
  margin-top: auto;
  align-self: flex-start;
}

.resource-disclaimer {
  color: var(--text-dim);
  font-size: 15px;
  line-height: 1.65;
  max-width: 720px;
  margin-bottom: 22px;
}

/* ---------- Utilities ---------- */

.hidden { display: none !important; }


/* ---------- Lead-magnet modal (resources page) ---------- */
.lm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.lm-modal[hidden] { display: none !important; }
.lm-modal-backdrop { position: absolute; inset: 0; background: rgba(10, 10, 10, 0.5); }
.lm-modal-panel {
  position: relative;
  width: 100%;
  max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
}
.lm-modal-close {
  position: absolute; top: 12px; right: 16px;
  background: none; border: 0; font-size: 24px; line-height: 1;
  color: var(--text-muted); cursor: pointer;
}
.lm-modal-close:hover { color: var(--text); }
.lm-modal-panel h2 { font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; }
.lm-modal-sub { font-size: 14px; color: var(--text-dim); line-height: 1.55; margin: 0 0 20px; }
.lm-form { display: grid; gap: 14px; }
.lm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lm-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .lm-field-row { grid-template-columns: 1fr; } }
.lm-field label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted);
}
.lm-field input {
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius); padding: 10px 12px;
  font: inherit; font-size: 14px; color: var(--text);
}
.lm-field input:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.lm-submit { width: 100%; justify-content: center; margin-top: 4px; }
.lm-modal-error {
  margin: 0; font-size: 13px; color: var(--danger-dim);
  background: var(--danger-bg); border: 1px solid var(--danger);
  border-radius: var(--radius); padding: 8px 12px;
}

/* ============================================================
   Mobile UX hardening (mei 2026)
   ----------------------------------------------------------------
   Doel: elke afhaakreden op smartphones wegnemen — geen iOS-zoom op
   inputs, voldoende tap-targets, leesbare hero, brand-kleurige
   browser-chrome, touch-feedback, ruimte tussen items.
   ============================================================ */

/* iOS zoomt automatisch in op inputs < 16px → forceer 16px */
input, textarea, select { font-size: 16px; font-family: inherit; }

/* WCAG-tap-target minimum (44×44). Geldt voor alle interactieve
   controls die de gebruiker met een vinger moet kunnen aantikken.
   Uitsluitingen: menu-toggle, nav-portal-link (eigen iconen-knoppen),
   .semanu-cta-x (compacte dismiss-X van slide-in CTA — 22×22 rond,
   zou anders 22×44 ovaal worden). */
input[type="text"], input[type="email"], input[type="tel"], input[type="search"],
input[type="url"], input[type="password"], input[type="number"], input[type="date"],
textarea, select, .btn,
button:not(.menu-toggle):not(.nav-portal-link):not(.semanu-cta-x) {
  min-height: 44px;
  box-sizing: border-box;
}

/* Schakel de 300ms-tap-delay uit op oudere mobile browsers. */
a, button, .btn, input, label, .nav-dropdown-trigger { touch-action: manipulation; }

/* Brand-oranje tap-highlight in plaats van de iOS-standaard blauw.
   Voorkomt blauwe flits over onze oranje knoppen bij touch. */
* { -webkit-tap-highlight-color: rgba(255, 90, 31, 0.15); }

/* Hero op kleine schermen: hef het clamp-minimum van 36px op, want
   met de lange NL-titels zou dat 6+ regels worden op een iPhone SE.
   text-wrap: balance zorgt voor mooiere line-breaks. */
@media (max-width: 560px) {
  .hero { padding: 72px 0 64px; }
  .hero h1 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.18;
    letter-spacing: -0.02em;
    text-wrap: balance;
    margin-bottom: 20px;
  }
  .hero-sub { font-size: 16px; line-height: 1.5; }
}

/* Hero-trust bullets: 14px gap i.p.v. de eerdere 10px op mobile, zodat
   dichte tikfouten tussen "Geen leveranciersbinding" en "Wederzijdse
   NDA" niet meer voorkomen. */
@media (max-width: 720px) {
  .hero-trust { gap: 14px; }
}

/* Touch-feedback: elke clickable krijgt een korte schaal/opacity-druk
   omdat hover-states op touch niet bestaan en de gebruiker bevestiging
   moet voelen dat zijn tik geregistreerd is. */
.btn:active,
.nav-links a:active,
.nav-dropdown-trigger:active,
.nav-portal-link:active,
.menu-toggle:active,
.lang-switcher button:active {
  opacity: 0.7;
  transform: scale(0.98);
  transition: transform 0.05s, opacity 0.05s;
}

/* Toegankelijke focus-state (toetsenbord-navigatie + iOS VoiceOver).
   :focus-visible toont alleen bij toetsenbord/AT, niet bij muis-clicks. */
.btn:focus-visible,
.nav-links a:focus-visible,
.nav-dropdown-trigger:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Cookie-banner op mobile: COMPACT (mei 2026) — neemt ~halve schermruimte
   in t.o.v. de eerdere mobile-versie. Padding/tekst/knoppen alle
   ~50% kleiner. Layout: tekst en knoppen onder elkaar, knoppen rechts
   uitgelijnd. Min-tap-target van 36px (cookie-knoppen zijn eenmalig en
   visueel duidelijk afgelijnd, dus de WCAG-44 mag hier wijken voor
   compactheid). */
@media (max-width: 720px) {
  .cookie-banner {
    bottom: 8px;
    left: 8px;
    right: 8px;
    padding: 9px 12px;
    gap: 8px;
    flex-direction: column;
    align-items: stretch;
    border-radius: var(--radius);
  }
  .cookie-banner .cookie-text {
    min-width: 0;
    font-size: 12px;
    line-height: 1.4;
  }
  .cookie-banner .cookie-actions {
    justify-content: flex-end;
    gap: 6px;
  }
  .cookie-banner .btn {
    min-height: 36px;
    padding: 5px 12px;
    font-size: 12px;
  }
}

/* Sticky bottom-CTA voor lange pagina's (verschijnt onder ~600px
   scroll, blijft uit op desktop). Op pagina's die zijn voorzien van
   <a class="sticky-mobile-cta"> die script in visit-track.js
   het verschijnen na 600px scroll triggert. */
.sticky-mobile-cta { display: none; }
@media (max-width: 720px) {
  .sticky-mobile-cta {
    display: flex;
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 90;
    background: var(--accent-solid, #CC4516);
    color: #fff;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(255, 90, 31, 0.35);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    transform: translateY(140%);
    transition: transform 0.3s ease;
    min-height: 48px;
  }
  .sticky-mobile-cta.is-visible { transform: translateY(0); }
  /* Cookie-banner schuift omhoog wanneer de sticky-CTA actief is. */
  body.has-sticky-cta .cookie-banner { bottom: 76px; }
  /* Zonder deze twee overlappen de WhatsApp-knop en het taalvoorstel de CTA
     rechtsonder; ze staan op dezelfde z-index, dus de DOM-volgorde besliste. */
  body.has-sticky-cta .wa-float { bottom: 76px; }
  body.has-sticky-cta .taalvoorstel { bottom: 64px; }
  /* Voeg onderaan content padding toe zodat de CTA geen content overlapt. */
  body.has-sticky-cta { padding-bottom: 80px; }
}

/* ===========================================================================
   Homepage v2 visuele opsmuk — pillars 2x2, problem stats, indep cards, FAQ
   =========================================================================== */

/* Pillars als 2x2 grid op desktop, 1 kolom op mobiel */
.pillars-2x2 {
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .pillars-2x2 { grid-template-columns: 1fr; }
}

/* Pillar als klikbare card: zonder underline, met hover-accent */
.pillar-link {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.pillar-link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.pillar-link:hover::before { transform: scaleX(1); }
.pillar-link:hover { border-color: var(--accent); transform: translateY(-4px); }

/* Icoon-cirkel boven elke pillar */
.pillar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255, 90, 31, 0.08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 8px 0 16px;
}

/* CTA-zin in pillar */
.pillar-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.pillar-cta::after { content: " \2192"; transition: transform 0.2s; }
.pillar-link:hover .pillar-cta::after { transform: translateX(4px); }

/* Probleem-sectie: stats links, tekst rechts */
.problem-block {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 880px) {
  .problem-block { grid-template-columns: 1fr; gap: 32px; }
}
.problem-stats {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.problem-stat {
  display: flex;
  flex-direction: column;
  padding: 22px 26px;
  background: #fff;
  border-left: 4px solid var(--accent);
  border-radius: 0 12px 12px 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.problem-stat-num {
  font-size: 38px;
  font-weight: 700;
  color: var(--accent);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.problem-stat-label {
  font-size: 14px;
  color: var(--text-dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* Mobiel: de drie cijfers naast elkaar als compacte reeks. Deze blok MOET na
   de basisregels hierboven staan: gelijke specificiteit, dus anders wint de
   laatste declaratie en blijft de kolomstand staan (augustus 2026). */
@media (max-width: 880px) {
  /* De kop breekt op mobiel vast na "niet" (de <br> uit de bron). Op de
     standaardgrootte paste "Softwareprojecten falen niet" niet op een regel
     en werden het er drie; net klein genoeg maken zodat het er twee blijven. */
  .problem-text .section-title { font-size: clamp(21px, 7vw, 30px); }
  .problem-stats { flex-direction: row; gap: 8px; align-items: stretch; }
  .problem-stat {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px 6px 12px;
    border-left: 0;
    border-top: 3px solid var(--accent);
    border-radius: 0 0 10px 10px;
    text-align: center;
    align-items: center;
  }
  .problem-stat-num { font-size: 21px; }
  .problem-stat-label { font-size: 10.5px; margin-top: 3px; line-height: 1.25; }
}
.problem-text .section-title { margin-bottom: 16px; text-align: left; }
.problem-text p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-dim);
  margin-bottom: 16px;
}
.problem-closer {
  font-size: 18px;
  font-weight: 500;
  color: var(--text) !important;
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin-top: 24px !important;
}

/* De kleurregel hierboven staat op !important en overschreef ook de link
   erin, waardoor de interne verwijzing naar het advieskantoor er als gewone
   tekst uitzag. Een link die niemand als link herkent, wordt niet geklikt. */
.problem-closer a {
  color: var(--accent) !important;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.problem-closer a:hover { border-bottom-color: transparent; }

/* Onafhankelijkheid: 3 cards naast elkaar */
/* auto-fit in plaats van een vast aantal van drie: sinds september 2026 staan
   er twee kaarten (de derde ging over het niet hebben van een bouwteam en is
   met de positionering meeverdwenen). Zo vult elk aantal de rij netjes. */
.indep-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  max-width: 980px;
  margin: 32px auto 0;
}
@media (max-width: 720px) {
  .indep-cards { grid-template-columns: 1fr; }
}
.indep-card {
  padding: 24px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
}
.indep-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.indep-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  color: var(--accent);
}
.indep-card p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}
.indep-closer {
  max-width: 720px;
  margin: 40px auto 0;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  font-style: italic;
}

/* FAQ-styling: card-look met custom chevron */
.faq-list .faq-item {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.faq-list .faq-item:hover {
  border-color: var(--border-strong);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.faq-list .faq-item[open] {
  border-color: var(--accent);
}
.faq-list .faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 56px 20px 24px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text);
  position: relative;
  user-select: none;
}
.faq-list .faq-item summary::-webkit-details-marker { display: none; }
.faq-list .faq-item summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: translateY(-65%) rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-list .faq-item[open] summary::after {
  transform: translateY(-25%) rotate(-135deg);
}
.faq-list .faq-item p {
  padding: 0 24px 22px;
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text-dim);
}

/* ===========================================================================
   Check-hub visuele opsmuk
   =========================================================================== */

/* "Hoe het werkt" 3-stappen rij */
.check-howit {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 16px 0;
}
@media (max-width: 880px) {
  .check-howit { grid-template-columns: 1fr; gap: 20px; }
}
.check-howit-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.check-howit-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--accent-solid, #CC4516);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.check-howit-step h3 {
  font-size: 17px;
  margin: 0 0 6px;
  color: var(--text);
}
.check-howit-step p {
  font-size: 14.5px;
  color: var(--text-dim);
  margin: 0;
  line-height: 1.5;
}

/* Check-hub-cards aanvullingen */
.check-hub-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 90, 31, 0.08);
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 18px;
}
.check-hub-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.check-hub-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.check-hub-card:hover::before { transform: scaleX(1); }
.check-hub-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.check-hub-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
}
.check-hub-cta::after { content: " \2192"; transition: transform 0.2s; }
.check-hub-card:hover .check-hub-cta::after { transform: translateX(4px); }

/* ===========================================================================
   Check-hub v2 — sterke layout, klikbaarheid en visueel kader
   =========================================================================== */

/* Hoe-het-werkt sectie krijgt eigen achtergrond + kop (dunner dan default) */
.check-howit-section { padding: 36px 0 28px; }
.check-howit-section .section-title { font-size: 26px; margin-bottom: 24px !important; }

/* Scroll-cue: oranje pijl die naar beneden wijst met subtiele shadow-pulse */
.check-scroll-cue {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 24px auto 0;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  animation: scroll-cue-pulse 2.6s ease-in-out infinite;
}
.check-scroll-cue:hover { transform: translateY(2px); }
@keyframes scroll-cue-pulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(255, 90, 31, 0.45),
                0 4px 10px rgba(255, 90, 31, 0.18);
    transform: translateY(0);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(255, 90, 31, 0),
                0 8px 22px rgba(255, 90, 31, 0.35);
    transform: translateY(4px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .check-scroll-cue { animation: none; }
}

/* Grotere stappen-bollen met dieptewerking */
.check-howit {
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding: 0;
  position: relative;
}
.check-howit-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  position: relative;
}
.check-howit-step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--accent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.check-howit-num {
  width: 52px;
  height: 52px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 6px 14px rgba(255, 90, 31, 0.28);
}
.check-howit-step h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}
.check-howit-step p {
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}

/* Card-styling sterk verhoogd: vol kleurvlak op hover, knop-look op CTA */
.check-hub-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}
.check-hub-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: 0 14px 32px rgba(255, 90, 31, 0.12);
}
.check-hub-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  font-weight: 500;
}
.check-hub-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin: 8px 0 12px;
}
.check-hub-card h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 8px;
}
.check-hub-card p {
  font-size: 14.5px;
  color: var(--text-dim);
  line-height: 1.5;
  margin: 0 0 14px;
  flex-grow: 1;
}

/* CTA-zin omgetoverd naar echte knop-look */
.check-hub-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  background: var(--accent-solid, #CC4516);
  color: #fff !important;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}
.check-hub-cta::after { content: " \2192"; }
.check-hub-card:hover .check-hub-cta {
  background: #E84A0F;
}
.check-hub-card:hover .check-hub-cta::after { transform: translateX(4px); }

/* Grid 2x2 op desktop, 1 op mobiel */
.check-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) {
  .check-hub-grid { grid-template-columns: 1fr; }
  .check-howit { grid-template-columns: 1fr; gap: 20px; }
}

/* ---- Taalvoorstel voor anderstalige bezoekers (src/site/taalbalk.js) ----
   Zweeft en staat NIET in de flow: in de flow zou hij de layout verschuiven
   bij het verschijnen en dat kost Core Web Vitals. Dekt de inhoud nooit af,
   want overlays die de tekst verbergen zijn op mobiel een rankingprobleem. */
.taalvoorstel {
  position: fixed;
  z-index: 60;
  top: 86px;
  right: 20px;
  width: 288px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 0;
  padding: 14px 15px;
  box-shadow: 0 6px 24px rgba(10, 10, 10, 0.09);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.taalvoorstel.is-zichtbaar { opacity: 1; transform: translateY(0); }

.taalvoorstel-kop { display: flex; align-items: flex-start; gap: 9px; }

.taalvoorstel-stip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: 0 0 auto;
  margin-top: 6px;
}

.taalvoorstel-melding {
  flex: 1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text);
}

.taalvoorstel-sluit {
  flex: 0 0 auto;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 17px;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
}

.taalvoorstel-sluit:hover { color: var(--text); }

.taalvoorstel-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 0 15px;
}

.taalvoorstel-knop {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--text-dim);
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 7px 10px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}

.taalvoorstel-knop:hover { border-color: var(--border-strong); color: var(--text); }

.taalvoorstel-knop-primair {
  font-weight: 500;
  color: #FFF;
  background: var(--text);
  border-color: var(--text);
}

.taalvoorstel-knop-primair:hover { background: var(--accent-solid, #CC4516); border-color: var(--accent-solid, #CC4516); color: #FFF; }

/* Mobiel: strook onderaan. Bovenaan zou hij de titel wegduwen, en onderaan
   is hij met de duim bereikbaar. */
@media (max-width: 640px) {
  .taalvoorstel {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    border: 0;
    border-top: 3px solid var(--accent);
    padding: 12px 16px 14px;
    transform: translateY(12px);
    box-shadow: 0 -4px 18px rgba(10, 10, 10, 0.08);
  }
  .taalvoorstel.is-zichtbaar { transform: translateY(0); }
  .taalvoorstel-knoppen { margin-left: 15px; }

  /* Cookiebanner en taalvoorstel staan onder 520 px allebei op bottom: 0 en
     dus exact op elkaar; de banner heeft de hogere z-index en het taalvoorstel
     werd daardoor volledig onzichtbaar. Één tegelijk. */
  .cookie-banner:not(.is-hidden) ~ .taalvoorstel,
  body:has(.cookie-banner:not(.is-hidden)) .taalvoorstel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .taalvoorstel { transition: opacity 0.01s; transform: none; }
  .taalvoorstel.is-zichtbaar { transform: none; }
}

/* ---- Hero met beeldachtergrond (proef) --------------------------------
   Zet class="hero hero--visual" op de sectie om hem aan te zetten. Zonder
   die class blijft het oude CSS-stippenpatroon staan, dus terugdraaien is
   één woord in de HTML weghalen.

   Het beeld bevat zelf al een raster, dus het VERVANGT .hero-grid-bg in
   plaats van eroverheen te komen. Twee rasters over elkaar wordt vuil.

   Onder 900px laden we hem niet: daar zou de bol achter de titel vallen en
   het is precies het scherm waar de laadtijd het zwaarst telt. De preload in
   de HTML draagt dezelfde mediavoorwaarde, anders haalt de browser hem toch
   op. */
@media (min-width: 900px) {
  .hero--visual .hero-grid-bg,
  .hero--visual-soft .hero-grid-bg {
    background-image: url("../img/hero-visual.webp");
    background-repeat: no-repeat;
    /* Verticaal op 68 procent in plaats van gecentreerd. Op een breed scherm
       kwam de bol anders naast de titel te hangen en trok hij de blik weg van
       de eerste regel; nu zakt hij richting de knoppen en leest de kop eerst. */
    background-position: right 68%;
    background-size: contain;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* Tweede niveau, voor de vier domeinpagina's. Zelfde beeld, kleiner en
     zachter: herkenbaar zonder de aandacht van de tekst weg te trekken.
     Zo blijft de startpagina de enige die hem voluit draagt. */
  .hero--visual-soft .hero-grid-bg {
    background-size: 58% auto;
    background-position: right 2% center;
    opacity: 0.62;
  }
}

/* ---- Hero met fotoachtergrond (startpagina, augustus 2026) ------------
   Vervangt hero--visual op de startpagina: de foto vult de hele sectie
   (cover, gebouw rechts) en een wit verloop van links houdt de tekst
   leesbaar zonder de foto plat te slaan. Terugdraaien = de sectieclass
   in index.html weer op hero--visual zetten; deze regels doen dan niets.
   Onder 900px geen foto, om dezelfde reden als bij hero--visual: daar
   telt de laadtijd het zwaarst. De preload draagt dezelfde voorwaarde. */
@media (min-width: 900px) {
  .hero--foto .hero-grid-bg {
    background-image:
      /* Verticaal: bovenaan uit het wit van de header vloeien, onderaan
         oplossen in de bg-elev-tint van de sectie eronder. Zo is de
         overgang hero → pagina één geheel zonder harde snede. */
      linear-gradient(180deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0) 16%,
        rgba(255, 255, 255, 0) 70%,
        rgba(255, 255, 255, 0.72) 90%,
        #FFFFFF 100%),
      linear-gradient(90deg,
        rgba(255, 255, 255, 0.96) 0%,
        rgba(255, 255, 255, 0.88) 42%,
        rgba(255, 255, 255, 0.66) 62%,
        rgba(255, 255, 255, 0.22) 80%,
        rgba(255, 255, 255, 0) 94%),
      url("../img/hero-visual2.webp");
    background-repeat: no-repeat;
    background-size: cover;
    /* Iets onder het midden gesneden: de gevel en het pad blijven in beeld,
       de lege lucht bovenaan verdwijnt het eerst bij smallere schermen. */
    background-position: center 62%;
    mask-image: none;
    -webkit-mask-image: none;
  }
}

/* ---- Startpagina als één doorlopend canvas (augustus 2026) ------------
   Geen grijze tussensecties meer: de hele pagina is één verticaal verloop
   van wit dat richting de footer heel zacht opwarmt naar het huisoranje.
   De hero-foto lost onderaan op in wit en vloeit zo hetzelfde canvas in;
   witte kaarten en tegels blijven erop liggen voor het gelaagde effect.
   Actief via body.pagina-home of body.pagina-canvas. Die tweede class is
   dezelfde behandeling voor landingspagina's buiten de startpagina (eerst
   software-advieskantoor.html): één doorlopend canvas in plaats van harde
   grijze bg-soft-banden tussen de secties. Andere pagina's raken dit niet. */
.pagina-home,
.pagina-canvas {
  background: linear-gradient(180deg,
    #FFFFFF 0%,
    #FFFEFD 28%,
    #FFFCF9 62%,
    #FFFAF5 88%,
    #FFF8F1 100%);
}
.pagina-home .hero,
.pagina-canvas .hero { background: transparent; }
.pagina-home .bg-soft,
.pagina-canvas .bg-soft { background: transparent; }

/* De hero op zo'n canvas eindigt niet met een snede maar lost onderaan op in
   het verloop eronder. Het stippenraster heeft al een ellipsmasker, dus deze
   laag hoeft alleen de onderrand zacht te maken. */
.pagina-canvas .hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 254, 253, 0.9) 70%, #FFFEFD 100%);
  pointer-events: none;
  /* Onder de hero-inhoud: die staat op z-index 1. Zonder deze regel schildert
     het pseudo-element eroverheen en verbleekt de onderste vertrouwensregel. */
  z-index: 0;
}

/* ===========================================================================
   Rastercellen mogen krimpen (augustus 2026)
   ---------------------------------------------------------------------------
   Rastercellen hebben impliciet min-width: auto en kunnen daardoor niet onder
   hun intrinsieke breedte zakken. Op 3d-configurator.html liep de kolom
   daardoor op 517,5 px terwijl de container 331 px was — 164 px horizontale
   scroll over de hele pagina, ondanks een correct werkende media query en een
   overflow: hidden op de carrousel zelf.

   De regel geldt voor alle rasters van de dienstenpagina's; ze hebben nu geen
   van alle een probleem, maar krijgen het zodra er een carrousel, tabel of
   lange samenstelling in komt te staan.
   =========================================================================== */
.cfg-intro-grid > *, .cfg-photos > *, .cfg-kader > *, .cfg-docs > *,
.cfg-route > *, .cfg-screens > *,
.ba-intro-grid > *, .ai-blokken > *, .ai-duel > *, .ai-rails > *,
.erp-fouten > *, .erp-stats > *, .erp-tiles > *, .erp-valkuilen > *,
.svc-phase-obj > *, .svc-phases-row > *, .svc-related > *,
.svc-tiles-3 > *, .svc-yesno > * {
  min-width: 0;
}


/* ---- blogcomponenten (vaste artikelopmaak, zie CLAUDE.md) ----
   Verhuisd uit het pagina-lokale <style>-blok van
   blog/3d-configurator-laten-maken.html zodat elk artikel dezelfde
   opmaak deelt. */
.blog-head-inner{max-width:760px;margin:0 auto;padding:0 16px}.blog-head-inner h1,.blog-head-inner p{max-width:none}.blog-answer{background:var(--accent-bg);border-left:3px solid var(--accent);border-radius:0 12px 12px 0;padding:18px 22px;margin:26px 0}.blog-answer h2{margin-top:0;font-size:20px}.blog-tldr{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin:26px 0}.blog-tldr ul{margin:0 0 0 18px}.blog-keten{font-family:var(--font-mono);font-size:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:14px 18px;text-align:center;margin:20px 0}.blog-author{display:flex;gap:14px;align-items:flex-start;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:18px 22px;margin:32px 0 8px}.blog-author-avatar{width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}.blog-author p{margin:0;font-size:14px;color:var(--text-dim)}.blog-author strong{color:var(--text)}.blog-bronnen{font-size:14px;color:var(--text-dim)}

/* Herkomstnoot onder een cijfertabel (september 2026). Zegt waar de
   bandbreedtes vandaan komen. Bewust rustig en klein: het is een voetnoot bij
   de tabel, geen tweede blikvanger. Het streepje links koppelt hem visueel aan
   de tabel erboven. */
.blog-herkomst {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-dim);
  border-left: 2px solid var(--border-strong, #D2D2D7);
  padding: 2px 0 2px 14px;
  margin: -6px 0 26px;
}

/* ---- Tijdlijn diensten (startpagina, augustus 2026) -------------------
   Vervangt het 2x2-raster van pillars: vier stappen langs één verticale
   lijn die meevult naarmate je scrolt (tijdlijn.js zet --tl-vul).

   Desktop: kaarten wisselen links/rechts van de lijn in het midden.
   Mobiel (<=760px): de lijn staat links en alle kaarten ernaast, want
   afwisselen kost daar te veel breedte. Zonder JS blijft de lijn gewoon
   volledig gevuld staan; de tijdlijn is dan statisch maar compleet. */
.tijdlijn {
  position: relative;
  margin-top: 8px;
}
.tijdlijn-spoor {
  position: absolute;
  /* Begint in het midden van de eerste kaart en eindigt in het midden van
     de laatste; tijdlijn.js meet die twee halve kaarthoogtes. Zonder JS
     valt de lijn terug op een kleine marge boven en onder. */
  top: var(--tl-top, 12px);
  bottom: var(--tl-bot, 12px);
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.tijdlijn-vul {
  display: block;
  width: 100%;
  height: var(--tl-vul, 100%);
  background: var(--accent);
  border-radius: 2px;
  transition: height 0.15s linear;
}
.tijdlijn-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  margin-bottom: 14px;
}
.tijdlijn-item:last-child { margin-bottom: 0; }
/* Oneven kaarten links, even kaarten rechts van de lijn. */
.tijdlijn-item:nth-of-type(odd) .tijdlijn-kaart { grid-column: 1; }
.tijdlijn-item:nth-of-type(even) .tijdlijn-kaart { grid-column: 2; }
.tijdlijn-item:nth-of-type(odd) .tijdlijn-kaart { text-align: right; }

.tijdlijn-punt {
  position: absolute;
  /* Verticaal gecentreerd op de kaart: het item is precies zo hoog. */
  top: 50%;
  margin-top: -7px;
  left: 50%;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 2px solid var(--border);
  z-index: 1;
  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.tijdlijn-item.is-bereikt .tijdlijn-punt {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 5px rgba(255, 90, 31, 0.14);
}

.tijdlijn-kaart {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 30px;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.tijdlijn-kaart:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(10, 10, 10, 0.06);
}
.tijdlijn-kaart h3 { margin: 0 0 8px; font-size: 20px; }
.tijdlijn-kaart p { color: var(--text-dim); margin: 0; }
.tijdlijn-kaart .pillar-cta { margin-top: 14px; }

.tijdlijn-num {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
}
@media (max-width: 760px) {
  .tijdlijn-spoor { left: 13px; transform: none; }
  .tijdlijn-item {
    grid-template-columns: 1fr;
    column-gap: 0;
    padding-left: 40px;
    margin-bottom: 12px;
  }
  .tijdlijn-item:nth-of-type(odd) .tijdlijn-kaart,
  .tijdlijn-item:nth-of-type(even) .tijdlijn-kaart {
    grid-column: 1;
    text-align: left;
  }
  /* Mobiel staat het spoor op 13px met 2px breedte: hart op 14px. */
  .tijdlijn-punt { left: 14px; }
  .tijdlijn-kaart { padding: 22px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .tijdlijn-vul { transition: none; }
  .tijdlijn-kaart:hover { transform: none; }
}

/* ---- "Waar wij het verschil maken" op de domeinpagina's (augustus 2026) ----
   Verhuisd van de opgeheven domains.html. De opmaak stond daar onder
   .domain-detail en kwam dus niet mee; zonder deze regels valt de lijst terug
   op browserbolletjes en leest het blok als een Word-document.
   Twee kolommen: zes tot zeven korte punten onder elkaar maakt een smalle
   sliert met veel wit ernaast. */
.svc-diff-blok { max-width: 900px; }
.svc-diff-blok .section-head { margin-bottom: 18px; }

.svc-diff-lijst {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 40px;
}
.svc-diff-lijst li {
  break-inside: avoid;
  padding: 9px 0;
  font-size: 15px;
  color: var(--text-dim);
  line-height: 1.55;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.svc-diff-lijst li::before {
  content: "";
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 9px;
}
@media (max-width: 760px) {
  .svc-diff-lijst { columns: 1; }
}

/* ── Tabbladen voor gepaarde secties (cfg-tabs.js) ────────────────────────
   Zonder JavaScript staat .cfg-tabs er niet anders bij dan losse secties:
   geen enkele regel hieronder verbergt iets zolang .cfg-tabs-actief ontbreekt.
   Die klasse zet het script pas wanneer het de tabbalk heeft opgebouwd. */
.cfg-tabs-actief .cfg-tabbar {
  display: flex;
  gap: 4px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 28px;          /* gelijk aan .container, zodat de tabs uitlijnen */
  border-bottom: 2px solid var(--border-strong);
}
.cfg-tabs-actief .cfg-tab {
  appearance: none;
  position: relative;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 30px;
  font: 600 16px/1.2 var(--font-display);
  letter-spacing: .01em;
  color: var(--text-muted);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-bottom: 2px solid var(--border-strong);
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.cfg-tabs-actief .cfg-tab:hover { background: #fff; color: var(--text); }
.cfg-tabs-actief .cfg-tab:focus-visible {
  outline: 2px solid var(--accent-solid);
  outline-offset: 2px;
}
/* Het actieve tabblad loopt door in het paneel eronder: witte achtergrond en
   een onderrand in diezelfde kleur, zodat de scheidingslijn daar wegvalt. */
.cfg-tabs-actief .cfg-tab.is-actief {
  color: var(--text);
  background: #fff;
  border-bottom-color: #fff;
  box-shadow: inset 0 3px 0 0 var(--accent);
}
/* De sectielabel zit nu op het tabblad zelf, dus binnen het paneel weg. */
.cfg-tabs-actief .cfg-tabpanel .section-label { display: none; }
.cfg-tabs-actief .cfg-tabpanel[hidden] { display: none; }

@media (max-width: 640px) {
  .cfg-tabs-actief .cfg-tabbar { gap: 2px; }
  .cfg-tabs-actief .cfg-tab {
    flex: 1 1 0;
    justify-content: center;
    padding: 13px 10px;
    font-size: 14px;
    text-align: center;
  }
}
@media (max-width: 520px) {
  .cfg-tabs-actief .cfg-tabbar { padding: 0 22px; }   /* volgt .container */
}

/* Vette tussenkop boven een sectie-alinea (o.a. de tabbladen op 3d-configurator). */
.cfg-subkop {
  max-width: 780px;
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
}