/* =====================================================================
   PATRONZ — production stylesheet
   Design tokens + component styles, merged from the PATRONZ design system
   (colors_and_type.css + ui_kits/website/site.css). Self-hosted fonts.
   ===================================================================== */

/* ============================================================
   PATRONZ - Design System Foundations
   colors_and_type.css
   Brand: navy + champagne gold, warm editorial.
   "Supporting your success." - trust, experience, warmth, safety.
   ============================================================ */

/* ---------- FONTS (self-hosted, user-supplied brand files) ---------- */
/* Jost - geometric sans (variable). Echoes the PATRONZ wordmark.
   Used for eyebrows, labels, nav, buttons, UI, tracked caps. */
@font-face {
  font-family: "Jost";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Jost-VariableFont_wght.woff2") format("woff2"),
       url("fonts/Jost-VariableFont_wght.ttf") format("truetype");
}
@font-face {
  font-family: "Jost";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Jost-Italic-VariableFont_wght.woff2") format("woff2"),
       url("fonts/Jost-Italic-VariableFont_wght.ttf") format("truetype");
}
/* Spectral - warm editorial serif. Headlines, lead copy, quotes, body. */
@font-face {
  font-family: "Spectral";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/Spectral-Regular.woff2") format("woff2"),
       url("fonts/Spectral-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/Spectral-Italic.woff2") format("woff2"),
       url("fonts/Spectral-Italic.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/Spectral-Medium.woff2") format("woff2"),
       url("fonts/Spectral-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: italic; font-weight: 500; font-display: swap;
  src: url("fonts/Spectral-MediumItalic.woff2") format("woff2"),
       url("fonts/Spectral-MediumItalic.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/Spectral-SemiBold.woff2") format("woff2"),
       url("fonts/Spectral-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Spectral";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/Spectral-Bold.woff2") format("woff2"),
       url("fonts/Spectral-Bold.ttf") format("truetype");
}

:root {
  /* ========== COLOR - BRAND ========== */
  /* Navy - primary. Sampled from the logo (#1D2038). The voice of trust. */
  --navy-900: #14162A;   /* deepest - section grounds, footers */
  --navy-800: #1D2038;   /* base - logo navy, primary dark surface */
  --navy-700: #272B49;   /* raised dark surface */
  --navy-600: #353A60;   /* hairlines on dark, hover */
  --navy-500: #4A4F78;   /* muted accent on dark */

  /* Champagne gold - accent. Sampled from the logo mark (#EED090). Warmth + prestige. */
  --gold-200: #F6E6C2;   /* faintest wash, glows */
  --gold-300: #F0D9A6;   /* light champagne */
  --gold-400: #EED090;   /* BRAND gold - the logo champagne */
  --gold-500: #DDB668;   /* mid gold - fills, icons on dark */
  --gold-600: #C49A47;   /* deep gold - borders, accents on light */
  --gold-700: #A47C30;   /* dark gold - gold text on light (AA on cream) */

  /* ========== COLOR - WARM NEUTRALS (the welcome) ========== */
  --cream-50:  #FBF8F2;  /* page background - warm ivory, NOT stark white */
  --cream-100: #F5F0E6;  /* raised warm panel */
  --sand-200:  #ECE4D4;  /* muted warm fill, alternating sections */
  --sand-300:  #E0D5C0;  /* warm hairline / border */
  --taupe-400: #C8BBA2;  /* decorative warm line */

  /* ========== COLOR - INK & TEXT ========== */
  --ink:        #1D2038; /* primary text on light = navy */
  --ink-soft:   #3C4058; /* secondary text */
  --ink-muted:  #6A6E84; /* tertiary / captions */
  --ink-faint:  #9A9DAE; /* disabled */
  --on-dark:        #F7F3EA; /* primary text on navy = warm white */
  --on-dark-soft:   #C9CBD8; /* secondary on navy */
  --on-dark-muted:  #8A8FA6; /* tertiary on navy */

  /* ========== COLOR - COOL SUPPORT (from brand photography) ========== */
  --slate-400: #78909C;  /* cool slate - sparing infographic / chart accent */
  --slate-200: #B9C4CB;

  /* ========== SEMANTIC SURFACES ========== */
  --bg:            var(--cream-50);
  --bg-raised:     #FFFFFF;
  --bg-alt:        var(--cream-100);
  --bg-dark:       var(--navy-800);
  --bg-dark-deep:  var(--navy-900);
  --surface-line:  var(--sand-300);
  --surface-line-dark: var(--navy-600);
  --accent:        var(--gold-500);
  --accent-strong: var(--gold-600);
  --accent-text:   var(--gold-700);

  /* ========== STATUS (muted, brand-aligned) ========== */
  --positive: #4F7A5B;
  --caution:  #B6822E;
  --critical: #9E4A3C;
  --info:     var(--slate-400);

  /* ========== TYPE - FAMILIES ========== */
  --font-display: "Spectral", Georgia, "Times New Roman", serif;
  --font-sans:    "Jost", "Century Gothic", "Avenir Next", system-ui, sans-serif;
  --font-body:    "Spectral", Georgia, serif;        /* editorial body */
  --font-ui:      "Jost", system-ui, sans-serif;     /* UI / small text */

  /* ========== TYPE - FLUID SCALE ========== */
  --text-eyebrow: 0.78rem;   /* tracked caps label */
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;    /* 17px body */
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.9375rem;
  --text-3xl:  2.5rem;
  --text-4xl:  3.25rem;
  --text-5xl:  4.25rem;
  --text-6xl:  5.5rem;

  /* ========== TYPE - TOKENS ========== */
  --tracking-eyebrow: 0.22em;  /* wide-tracked caps, echoes the logo tagline */
  --tracking-wordmark: 0.18em;
  --tracking-tight: -0.01em;
  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.62;

  /* ========== RADII ========== */
  --r-xs: 3px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ========== SPACING (8pt base) ========== */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;

  /* ========== ELEVATION - soft, warm-tinted ========== */
  --shadow-xs: 0 1px 2px rgba(29,32,56,0.06);
  --shadow-sm: 0 2px 8px rgba(29,32,56,0.07);
  --shadow-md: 0 10px 28px -12px rgba(29,32,56,0.18);
  --shadow-lg: 0 26px 60px -24px rgba(29,32,56,0.28);
  --shadow-gold: 0 16px 40px -18px rgba(196,154,71,0.45);

  /* ========== MOTION ========== */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);   /* calm, confident ease-out */
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 140ms;
  --dur: 240ms;
  --dur-slow: 520ms;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.ds-eyebrow {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-text);
}
.ds-eyebrow--on-dark { color: var(--gold-400); }

.ds-display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-5xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
h1, .ds-h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
  text-wrap: balance;
}
h2, .ds-h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  color: var(--ink);
  text-wrap: balance;
}
h3, .ds-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  color: var(--ink);
}
h4, .ds-h4 {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-lg);
  line-height: 1.35;
  color: var(--ink);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-xl);
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}
p, .ds-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--ink-soft);
  text-wrap: pretty;
}
.ds-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--text-3xl);
  line-height: 1.32;
  color: var(--ink);
  text-wrap: balance;
}
.ds-label {            /* UI labels, nav, captions */
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.ds-caption {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.ds-wordmark {         /* PATRONZ text lockup */
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: var(--tracking-wordmark);
  text-transform: uppercase;
}

/* ===================== COMPONENT STYLES ===================== */
/* PATRONZ website UI kit - component styles. Tokens from root colors_and_type.css */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 32px; }
.section { padding: 104px 0; }
.section-sm { padding: 72px 0; }

/* ---- shared bits ---- */
.eyebrow { font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-700); display: inline-flex; align-items: center; gap: 14px; }
.eyebrow::after { content: ""; width: 44px; height: 2px; background: var(--gold-600); }
.eyebrow--center { justify-content: center; }
.eyebrow--dark { color: var(--gold-400); }
.eyebrow--dark::after { background: var(--gold-500); }
.eyebrow--noline::after { display: none; }

.rule-gold { width: 48px; height: 2px; background: var(--gold-600); border: 0; margin: 0; }

/* ---- buttons ---- */
.btn { font-family: var(--font-ui); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.02em; border-radius: var(--r-pill); padding: 14px 28px; border: 1px solid transparent; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; transition: all var(--dur) var(--ease); }
.btn:active { transform: scale(0.99); }
.btn-primary { background: var(--navy-800); color: var(--gold-300); }
.btn-primary:hover { background: var(--navy-900); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-gold { background: var(--gold-400); color: var(--navy-800); }
.btn-gold:hover { background: var(--gold-500); box-shadow: var(--shadow-gold); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: rgba(29,32,56,0.28); }
.btn-ghost:hover { border-color: var(--navy-800); background: var(--navy-800); color: var(--gold-300); }
.btn-ghost--dark { color: var(--on-dark); border-color: rgba(247,243,234,0.3); }
.btn-ghost--dark:hover { background: var(--gold-400); color: var(--navy-800); border-color: var(--gold-400); }
.btn-link { background: none; padding: 6px 0; color: var(--gold-700); font-family: var(--font-ui); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; transition: gap var(--dur) var(--ease); }
.btn-link:hover { gap: 12px; }
.btn-link .lb { box-shadow: inset 0 -1px 0 var(--gold-600); }

/* ---- nav ---- */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; max-width: 1180px; margin: 0 auto; }
.nav--solid { background: rgba(29,32,56,0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--navy-600); }
.nav--top { background: transparent; border-bottom: 1px solid transparent; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-brand img { height: 32px; width: auto; }
.nav-word { font-family: var(--font-ui); font-weight: 500; font-size: 1.15rem; letter-spacing: 0.18em; color: var(--gold-300); }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-link { font-family: var(--font-ui); font-size: 0.95rem; letter-spacing: 0.02em; color: var(--on-dark-soft); background: none; border: 0; padding: 4px 0; position: relative; transition: color var(--dur) var(--ease); }
.nav-link:hover { color: var(--on-dark); }
.nav-link--active { color: var(--gold-300); }
.nav-link--active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--gold-500); }

/* ---- hero ---- */
.hero { position: relative; background: var(--navy-800); color: var(--on-dark); overflow: hidden; }
.hero-photo { position: absolute; inset: 0; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(20,22,42,0.96) 38%, rgba(20,22,42,0.55) 72%, rgba(20,22,42,0.35)); }
.hero-glow { position: absolute; right: -120px; top: -120px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(221,182,104,0.22), transparent 64%); pointer-events: none; }
.hero-inner { position: relative; padding-top: 132px; padding-bottom: 116px; }
.hero h1 { font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1.06; color: var(--on-dark); max-width: 16ch; margin: 22px 0 0; }
.hero .gold-word { color: var(--gold-400); font-style: italic; }
.hero-lead { font-size: 1.3rem; line-height: 1.55; color: var(--on-dark-soft); max-width: 46ch; margin: 26px 0 0; }
.hero-actions { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; }

/* ---- audience banner ---- */
.aud { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--sand-300); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-raised); }
.aud-item { padding: 28px 30px; display: flex; align-items: center; gap: 18px; }
.aud-item + .aud-item { border-left: 1px solid var(--sand-300); }
.aud-ico { width: 44px; height: 44px; flex: none; border-radius: var(--r-md); background: var(--cream-100); display: flex; align-items: center; justify-content: center; color: var(--gold-700); }
.aud-ico svg { width: 22px; height: 22px; stroke-width: 1.5; }
.aud-t { font-family: var(--font-ui); font-weight: 500; font-size: 1.02rem; color: var(--ink); letter-spacing: 0.01em; }
.aud-s { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-muted); margin-top: 3px; }

/* ---- recognition feature image ---- */
.recog-feature { position: relative; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); min-height: 360px; display: flex; align-items: center; }
.recog-feature img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 28% center; }
.recog-feature::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(29,32,56,0.12) 0%, rgba(29,32,56,0.5) 50%, rgba(29,32,56,0.9) 100%); }
.recog-feature-text { position: relative; z-index: 1; margin-left: auto; max-width: 52%; padding: 48px 44px; }
.recog-feature-text h2 { color: #fff; margin-top: 18px; font-size: clamp(1.7rem, 2.4vw, 2.1rem); line-height: 1.16; overflow-wrap: break-word; }

/* ---- recognition cards ---- */
.recog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.rcard { background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); padding: 30px 30px 32px; box-shadow: var(--shadow-sm); transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.rcard:hover { box-shadow: var(--shadow-md); border-color: var(--gold-400); transform: translateY(-2px); }
.rcard-ico { width: 40px; height: 40px; color: var(--gold-600); margin-bottom: 18px; }
.rcard-ico svg { width: 32px; height: 32px; stroke-width: 1.5; }
.rcard h4 { font-family: var(--font-ui); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-700); margin: 0 0 10px; }
.rcard p { margin: 0; font-size: 1.08rem; line-height: 1.5; color: var(--ink); }

/* ---- services ---- */
.svc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--sand-300); }
.svc-item { padding: 36px 26px 40px; border-bottom: 1px solid var(--sand-300); }
.svc-item:not(:last-child) { border-right: 1px solid var(--sand-300); }
.svc-ico { color: var(--gold-600); margin-bottom: 20px; }
.svc-ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.svc-item h3 { font-family: var(--font-ui); font-weight: 500; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
.svc-item p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-muted); }

/* ---- kompas wheel ---- */
.kompas { background: var(--navy-800); color: var(--on-dark); position: relative; overflow: hidden; }
.kompas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.ksess { background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: var(--r-lg); padding: 26px 24px 28px; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; overflow: hidden; }
.ksess::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--gold-500); transition: width var(--dur-slow) var(--ease); }
.ksess:hover { border-color: var(--navy-500); transform: translateY(-2px); }
.ksess:hover::before { width: 100%; }
.ksess-n { font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; color: var(--gold-400); }
.ksess-q { font-family: var(--font-ui); font-size: 0.74rem; color: var(--on-dark-muted); float: right; letter-spacing: 0.08em; }
.ksess h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; color: var(--on-dark); margin: 14px 0 10px; }
.ksess p { margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--on-dark-soft); }

/* ---- founders ---- */
.founders { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.fcard { background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; }
.fcard-photo { background: linear-gradient(160deg, var(--cream-100), var(--sand-200)); display: flex; align-items: flex-end; justify-content: center; height: 290px; overflow: hidden; }
.fcard-photo img { height: 290px; width: auto; object-fit: contain; }
.fcard-body { padding: 26px 30px 30px; }
.fcard-body h3 { margin: 0; font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); }
.fcard-role { font-family: var(--font-ui); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); margin-top: 6px; }
.fcard-body p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* ---- quote band ---- */
.qband { background: var(--navy-900); color: var(--on-dark); text-align: center; }
.qband .mark { font-family: var(--font-display); font-size: 4rem; line-height: 0.5; color: var(--gold-400); }
.qband blockquote { font-family: var(--font-display); font-style: italic; font-size: clamp(1.6rem, 3.2vw, 2.5rem); line-height: 1.32; color: var(--on-dark); max-width: 20ch; margin: 28px auto 0; }
.qband .cite { font-family: var(--font-ui); font-size: 0.9rem; letter-spacing: 0.04em; color: var(--on-dark-soft); margin-top: 28px; display: inline-flex; align-items: center; gap: 12px; }
.qband .cite::before { content: ""; width: 30px; height: 1px; background: var(--gold-500); }

/* ---- CTA ---- */
.cta { background: var(--gold-400); color: var(--navy-800); text-align: center; }
.cta h2 { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3rem); color: var(--navy-900); margin: 0 0 14px; }
.cta p { font-size: 1.2rem; color: var(--navy-700); max-width: 44ch; margin: 0 auto 32px; }

/* ---- #3 verschil / compare table ---- */
.compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r-lg); }
.compare { display: grid; grid-template-columns: 200px 1fr 1fr; background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.compare > div { padding: 16px 22px; border-top: 1px solid var(--sand-200); font-family: var(--font-body); font-size: 1rem; line-height: 1.5; }
.compare-corner, .compare-head { border-top: 0 !important; }
.compare-corner { background: transparent; }
.compare-k { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-muted); align-self: center; }
.compare-head { font-family: var(--font-ui); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 22px; padding-bottom: 18px; }
.compare-head--a { color: var(--ink-muted); }
.compare-head--b { color: var(--gold-400); background: var(--navy-800); display: flex; align-items: center; gap: 10px; }
.compare-head--b img { height: 22px; width: auto; }
.compare-a { color: var(--ink-muted); border-left: 1px solid var(--sand-200); }
.compare-b { color: var(--cream-50); background: var(--navy-800); border-left: 1px solid var(--navy-700); }

/* ---- #4 wat het oplevert ---- */
.oplevert { background: var(--navy-800); color: var(--on-dark); position: relative; overflow: hidden; }
.oplevert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 48px; }
.ocard { background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: var(--r-lg); padding: 28px 26px 30px; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.ocard:hover { border-color: var(--navy-500); transform: translateY(-2px); }
.ocard-ico { color: var(--gold-400); margin-bottom: 16px; }
.ocard-ico svg { width: 30px; height: 30px; stroke-width: 1.5; }
.ocard h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--on-dark); margin: 0 0 10px; }
.ocard p { margin: 0; font-size: 0.96rem; line-height: 1.55; color: var(--on-dark-soft); }

/* ---- #5 zo starten we ---- */
.startsteps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--sand-300); margin-top: 44px; }
.stepcard { padding: 32px 26px 8px; }
.stepcard:not(:last-child) { border-right: 1px solid var(--sand-300); }
.step-n { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--gold-600); display: block; }
.stepcard h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.35rem; color: var(--ink); margin: 16px 0 10px; }
.stepcard p { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--ink-muted); }

/* ---- kompas questions teaser ---- */
.kq-teaser { background: var(--navy-800); color: var(--on-dark); position: relative; overflow: hidden; }
.kq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 48px; }
.kq-card { background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: var(--r-lg); padding: 30px 32px 34px; position: relative; overflow: hidden; transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.kq-card::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--gold-500); transition: width var(--dur-slow) var(--ease); }
.kq-card:hover { border-color: var(--navy-500); transform: translateY(-2px); }
.kq-card:hover::before { width: 100%; }
.kq-tag { font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-400); }
.kq-q { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.32; color: var(--on-dark); margin: 16px 0 0; text-wrap: pretty; }
.kq-locked { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; cursor: pointer; background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); border-style: dashed; border-color: var(--navy-500); }
.kq-locked:hover { border-color: var(--gold-600); transform: translateY(-2px); }
.kq-lock { color: var(--gold-400); display: inline-flex; margin-bottom: 14px; }
.kq-lock svg { width: 28px; height: 28px; stroke-width: 1.5; }
.kq-locked .kq-q { margin: 0; color: var(--on-dark-soft); }
.kq-unlock { font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem; color: var(--gold-300); margin-top: 16px; display: inline-flex; gap: 6px; transition: color var(--dur) var(--ease); }
.kq-locked:hover .kq-unlock { color: var(--gold-200); }

/* ---- footer ---- */
.footer { background: var(--navy-900); color: var(--on-dark-soft); padding: 72px 0 36px; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 44px; border-bottom: 1px solid var(--navy-700); }
.footer-brand img { height: 120px; width: auto; margin-bottom: 18px; }
.footer-brand p { max-width: 30ch; font-size: 0.98rem; line-height: 1.6; color: var(--on-dark-muted); }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-col h5 { font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 16px; }
.footer-col a, .footer-col span { display: block; font-family: var(--font-ui); font-size: 0.95rem; color: var(--on-dark-soft); margin-bottom: 11px; transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--gold-300); }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 26px; font-family: var(--font-ui); font-size: 0.84rem; color: var(--on-dark-muted); flex-wrap: wrap; gap: 8px; }
.footer-offices { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--navy-700); }
.foffice { display: flex; gap: 20px; align-items: center; }
.foffice-img { width: 132px; height: 92px; flex: none; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--navy-600); }
.foffice-img img { width: 100%; height: 100%; object-fit: cover; }
.foffice-body { display: flex; flex-direction: column; }
.foffice-body h5 { font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-400); margin: 0 0 8px; }
.foffice-body span { font-family: var(--font-body); font-size: 1rem; line-height: 1.45; color: var(--on-dark-soft); }
.foffice-route { font-family: var(--font-ui); font-size: 0.84rem; font-weight: 500; color: var(--gold-300); margin-top: 10px; transition: gap var(--dur) var(--ease); }
.foffice-route:hover { color: var(--gold-200); }

/* ---- contact form ---- */
.cform { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.cfield { display: flex; flex-direction: column; gap: 7px; }
.cfield.full { grid-column: 1 / -1; }
.cfield label { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.cfield input, .cfield textarea { font-family: var(--font-body); font-size: 1.05rem; color: var(--ink); background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-md); padding: 13px 15px; outline: none; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.cfield input::placeholder, .cfield textarea::placeholder { color: var(--ink-faint); }
.cfield input:focus, .cfield textarea:focus { border-color: var(--gold-600); box-shadow: 0 0 0 3px rgba(196,154,71,0.16); }

/* ---- misc page ---- */
.pagehead { background: var(--navy-800); color: var(--on-dark); padding: 132px 0 76px; position: relative; overflow: hidden; }
.pagehead .wrap { position: relative; z-index: 2; }
.pagehead-photo { position: absolute; inset: 0; z-index: 0; }
.pagehead-photo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.42; }
.pagehead-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(20,22,42,0.95) 30%, rgba(20,22,42,0.62) 70%, rgba(20,22,42,0.42)); }
.pagehead h1 { font-size: clamp(2.4rem, 4.5vw, 3.6rem); color: var(--on-dark); margin: 20px 0 0; max-width: 20ch; }
.pagehead p { font-size: 1.25rem; color: var(--on-dark-soft); max-width: 50ch; margin: 22px 0 0; line-height: 1.55; }
.pagehead--gold-eyebrow .eyebrow { color: var(--gold-400); }

/* ---- lead magnet / download ---- */
.lm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lm-card { background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); padding: 32px 32px 28px; cursor: pointer; box-shadow: var(--shadow-xs); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; }
.lm-card:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.lm-card.sel { border-color: var(--gold-600); box-shadow: 0 0 0 2px var(--gold-400), var(--shadow-md); }
.lm-check { position: absolute; top: 22px; right: 22px; width: 26px; height: 26px; border-radius: var(--r-pill); border: 1.5px solid var(--sand-300); display: flex; align-items: center; justify-content: center; color: #fff; background: transparent; transition: all var(--dur) var(--ease); }
.lm-card.sel .lm-check { background: var(--gold-600); border-color: var(--gold-600); }
.lm-check svg { width: 15px; height: 15px; stroke-width: 2.5; opacity: 0; transition: opacity var(--dur) var(--ease); }
.lm-card.sel .lm-check svg { opacity: 1; }
.lm-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--cream-100); display: flex; align-items: center; justify-content: center; color: var(--gold-700); margin-bottom: 20px; }
.lm-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.lm-tag { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); }
.lm-card h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--ink); margin: 6px 0 12px; max-width: 18ch; }
.lm-card p { margin: 0; font-size: 1rem; line-height: 1.55; color: var(--ink-muted); }
.lm-meta { display: flex; gap: 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--sand-200); }
.lm-meta span { font-family: var(--font-ui); font-size: 0.82rem; color: var(--ink-muted); display: inline-flex; align-items: center; gap: 7px; }
.lm-meta svg { width: 16px; height: 16px; stroke-width: 1.5; color: var(--gold-600); }
.lm-panel { background: var(--navy-800); color: var(--on-dark); border-radius: var(--r-lg); padding: 40px; position: relative; overflow: hidden; }
.lm-selected { font-family: var(--font-ui); font-size: 0.92rem; color: var(--on-dark-soft); background: var(--navy-700); border: 1px solid var(--navy-600); border-radius: var(--r-md); padding: 14px 16px; }
.lm-selected strong { color: var(--gold-300); font-weight: 500; }
.lm-privacy { font-family: var(--font-ui); font-size: 0.82rem; color: var(--on-dark-muted); display: flex; align-items: center; gap: 8px; margin: 18px 0 0; }
.lm-privacy svg { width: 15px; height: 15px; stroke-width: 1.5; color: var(--gold-400); flex: none; }
.lm-peek { list-style: none; padding: 0; margin: 0; }
.lm-peek li { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid var(--sand-200); font-family: var(--font-body); font-size: 1.08rem; line-height: 1.45; color: var(--ink-soft); }
.lm-peek li:first-child { border-top: 0; }
.lm-peek .qn { font-family: var(--font-ui); font-weight: 500; color: var(--gold-700); flex: none; font-variant-numeric: tabular-nums; }

/* ---- blog ---- */
.blog-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.blog-feat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-feat-photo { position: relative; min-height: 340px; background: var(--navy-800); overflow: hidden; }
.blog-feat-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.62; }
.blog-feat-photo .sc { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(20,22,42,0.7), rgba(20,22,42,0.2)); }
.blog-feat-body { padding: 44px 44px; display: flex; flex-direction: column; justify-content: center; }
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.bpost { background: var(--bg-raised); border: 1px solid var(--sand-300); border-radius: var(--r-lg); padding: 0; overflow: hidden; box-shadow: var(--shadow-xs); cursor: pointer; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); display: flex; flex-direction: column; }
.bpost-img { aspect-ratio: 16 / 10; background: var(--navy-800); overflow: hidden; flex: none; }
.bpost-img img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); }
.bpost:hover .bpost-img img { transform: scale(1.04); }
.bpost-pad { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.article-hero { max-width: 1010px; margin: -56px auto 0; padding: 0 32px; position: relative; z-index: 2; }
.article-hero img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--navy-700); }
.bpost:hover { border-color: var(--gold-400); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bcat { font-family: var(--font-ui); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-700); }
.bpost h3, .blog-feat-body h2 { font-family: var(--font-display); color: var(--ink); margin: 12px 0 10px; line-height: 1.18; }
.bpost h3 { font-size: 1.4rem; }
.blog-feat-body h2 { font-size: 2.1rem; max-width: 18ch; }
.bpost p, .blog-feat-body p { font-size: 1rem; line-height: 1.58; color: var(--ink-soft); margin: 0; }
.bmeta { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sand-200); font-family: var(--font-ui); font-size: 0.84rem; color: var(--ink-muted); }
.bmeta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--taupe-400); }
.bmeta .auth { color: var(--ink-soft); font-weight: 500; }
.bpost .bmeta { margin-top: auto; }

/* article detail */
.article { max-width: 720px; margin: 0 auto; }
.article-body p { font-size: 1.18rem; line-height: 1.72; color: var(--ink-soft); margin: 0 0 24px; }
.article-body p.first::first-letter { font-family: var(--font-display); font-size: 3.4rem; font-weight: 500; float: left; line-height: 0.82; padding: 6px 12px 0 0; color: var(--gold-700); }
.article-body h3 { font-family: var(--font-display); font-size: 1.7rem; color: var(--ink); margin: 40px 0 14px; }
.article-body ul.article-list, .article-body ol.article-olist { margin: 0 0 24px; padding-left: 0; list-style: none; }
.article-body ul.article-list li, .article-body ol.article-olist li { position: relative; font-size: 1.12rem; line-height: 1.6; color: var(--ink-soft); padding: 8px 0 8px 38px; border-top: 1px solid var(--sand-200); }
.article-body ul.article-list li:first-child, .article-body ol.article-olist li:first-child { border-top: 0; }
.article-body ul.article-list li::before { content: ""; position: absolute; left: 8px; top: 18px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-500); }
.article-body ol.article-olist { counter-reset: ol; }
.article-body ol.article-olist li { counter-increment: ol; }
.article-body ol.article-olist li::before { content: counter(ol); position: absolute; left: 0; top: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 0.95rem; color: var(--gold-700); }
.article-body dl.article-defs { margin: 0 0 24px; }
.article-body dl.article-defs > div { padding: 16px 0; border-top: 1px solid var(--sand-200); }
.article-body dl.article-defs dt { font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; color: var(--ink); margin-bottom: 5px; }
.article-body dl.article-defs dd { margin: 0; font-size: 1.08rem; line-height: 1.6; color: var(--ink-soft); }
.article-body table.article-table { width: 100%; border-collapse: collapse; margin: 8px 0 28px; font-family: var(--font-body); }
.article-body table.article-table th { text-align: left; font-family: var(--font-ui); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 12px 16px; color: var(--gold-700); border-bottom: 2px solid var(--gold-400); }
.article-body table.article-table th:first-child { color: var(--ink-muted); border-bottom-color: var(--sand-300); }
.article-body table.article-table td { padding: 13px 16px; font-size: 1.04rem; color: var(--ink-soft); border-bottom: 1px solid var(--sand-200); vertical-align: top; }
.article-body table.article-table td:first-child { color: var(--ink-muted); }
.article-pull { font-family: var(--font-display); font-style: italic; font-size: 1.7rem; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--gold-500); padding-left: 26px; margin: 36px 0; }
.article-author { display: flex; align-items: center; gap: 16px; padding: 24px 0; border-top: 1px solid var(--sand-300); border-bottom: 1px solid var(--sand-300); margin: 8px 0 40px; }
.article-author img { width: 56px; height: 56px; border-radius: var(--r-pill); object-fit: cover; object-position: top center; background: var(--cream-100); }
.article-author .an { font-family: var(--font-ui); font-weight: 500; color: var(--ink); }
.article-author .ar { font-family: var(--font-ui); font-size: 0.84rem; color: var(--ink-muted); }
.backlink { font-family: var(--font-ui); font-weight: 500; font-size: 0.9rem; color: var(--gold-700); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: gap var(--dur) var(--ease); }
.backlink:hover { gap: 12px; }

.pagehead p { font-size: 1.25rem; color: var(--on-dark-soft); max-width: 50ch; margin: 22px 0 0; line-height: 1.55; }

.reveal { opacity: 1; }
.reveal.in { animation: riseIn 0.55s var(--ease); }
@keyframes riseIn { from { transform: translateY(18px); } to { transform: none; } }

@media (max-width: 920px) {
  .recog, .founders, .cform { grid-template-columns: 1fr; }
  .recog-feature-text { max-width: 60%; padding: 36px 38px; }
  .aud, .svc, .kompas-grid { grid-template-columns: 1fr; }
  .nav-links { gap: 18px; }
  .lm-cards, .lm-split, .blog-grid, .blog-feat, .dl-teaser, .kompas-detail-grid, .method-grid, .benefit-grid, .welniet-grid, .founder-row, .footer-offices, .oplevert-grid, .kq-grid, .cform-grid { grid-template-columns: 1fr !important; }
  .startsteps { grid-template-columns: 1fr 1fr; }
  .stepcard { border-right: 0 !important; border-top: 1px solid var(--sand-300); }
  /* compare behoudt 3-koloms layout en scrollt horizontaal via .compare-scroll */
  .compare { min-width: 520px; }
  .compare-head { padding-top: 14px; padding-bottom: 12px; }
  .article-body p { font-size: 1.08rem; }
}
@media (max-width: 1180px) {
  .nav-links { gap: 16px; }
  .nav-dl { display: none; }
}

/* ---- hamburger toggle button (verborgen op desktop) ---- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  z-index: 60;
  flex: none;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--gold-300);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  transform-origin: center;
}
.nav--open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav-toggle span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav--open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- mobile nav (768px en kleiner) ---- */
@media (max-width: 768px) {
  .nav-toggle { display: flex; }
  .recog-feature { min-height: 300px; }
  .recog-feature img { object-position: 32% center; }
  .recog-feature::after { background: linear-gradient(180deg, rgba(29,32,56,0.25) 0%, rgba(29,32,56,0.45) 35%, rgba(29,32,56,0.9) 100%); }
  .recog-feature { align-items: flex-end; }
  .recog-feature-text { max-width: 100%; margin-left: 0; padding: 28px 24px; }
  .recog-feature-text h2 { font-size: 1.6rem; max-width: 100%; }
  .nav-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--navy-900);
    border-top: 1px solid var(--navy-600);
    border-bottom: 1px solid var(--navy-600);
    padding: 16px 24px 24px;
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    box-shadow: var(--shadow-lg);
  }
  .nav--open .nav-links { display: flex; }
  .nav-link {
    padding: 13px 0;
    border-bottom: 1px solid var(--navy-700);
    width: 100%;
    color: var(--on-dark-soft);
    font-size: 1rem;
  }
  .nav-link--active { color: var(--gold-300); }
  .nav-link--active::after { display: none; }
  .nav-dl { display: block !important; }
  .nav-links .btn { margin-top: 18px; align-self: stretch; justify-content: center; }

  /* section spacing */
  .section { padding: 64px 0; }
  .section-sm { padding: 48px 0; }
  .wrap, .wrap-narrow { padding: 0 20px; }
  .nav-inner { padding: 18px 20px; }

  /* hero & pagehead: genoeg ruimte voor de vaste nav (~68px) + ademruimte */
  .hero-inner { padding-top: 112px; padding-bottom: 72px; }
  .pagehead { padding-top: 112px; padding-bottom: 52px; }

  /* typography */
  h1, .ds-h1 { font-size: 2.2rem; }
  h2, .ds-h2 { font-size: 1.75rem; }
  .hero h1 { font-size: clamp(1.9rem, 7vw, 2.8rem); }
  .hero-lead { font-size: 1.1rem; }

  /* founder rows: stapel foto boven tekst */
  .founder-row { grid-template-columns: 1fr !important; }
  .founder-row > div:first-child { min-height: 260px !important; }
  .founder-row > div:first-child img { height: 260px !important; }
  .founder-row > div:last-child { padding: 24px 20px !important; }

  /* contact & gratis-download: form naast sidebar → gestapeld */
  .cform-grid { grid-template-columns: 1fr !important; }

  /* article hero geen negatieve margin op mobiel */
  .article-hero { margin-top: 0; }

  /* download teaser padding */
  .dl-teaser { padding: 36px 24px !important; }

  /* footer */
  .footer-cols { gap: 32px; }
  .footer { padding: 48px 0 28px; }

  /* lead magnet panel */
  .lm-panel { padding: 28px 20px; }

  /* vergelijk-tabel: gestapeld per criterium */
  .compare-scroll { overflow-x: visible; }
  .compare {
    min-width: 0;
    grid-template-columns: 1fr;
    border-radius: var(--r-lg);
  }
  .compare-corner { display: none; }
  /* Kolomkoppen: toon als twee naast elkaar staande labels bovenaan */
  .compare-head--a,
  .compare-head--b {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 0.72rem;
    border-top: 0 !important;
  }
  .compare-head--a { background: var(--sand-200); color: var(--ink-muted); }
  .compare-head--b { background: var(--cream-100); border-top: 1px solid var(--sand-300) !important; }
  /* Categorie-label: volle breedte, opvallend als scheidingslijn */
  .compare-k {
    grid-column: 1;
    background: var(--navy-800);
    color: var(--gold-400);
    font-family: var(--font-ui);
    font-weight: 600;
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 10px 16px;
    border-top: 0 !important;
  }
  /* RvA/RvC waarde: lichte achtergrond, label via ::before */
  .compare-a {
    border-left: 0;
    border-top: 0 !important;
    background: var(--bg-raised);
    padding: 12px 16px;
    font-size: 0.95rem;
  }
  .compare-a::before {
    content: "Raad van Advies / RvC";
    display: block;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 5px;
  }
  /* PATRONZ waarde: crème achtergrond, gouden label via ::before */
  .compare-b {
    border-left: 0;
    border-top: 0 !important;
    background: var(--cream-100);
    color: var(--ink);
    padding: 12px 16px 16px;
    font-size: 0.95rem;
  }
  .compare-b::before {
    content: "PATRONZ";
    display: block;
    font-family: var(--font-ui);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-700);
    margin-bottom: 5px;
  }

  /* blog meta wrappen netjes */
  .bmeta { flex-wrap: wrap; gap: 6px; }

  /* contact sidebar na formulier */
  .cform-grid > aside { order: -1; }
}
@media (max-width: 480px) {
  .startsteps { grid-template-columns: 1fr; }
  .stepcard { border-top: 1px solid var(--sand-300); }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .aud-item { padding: 20px; }
  /* founder tekst nóg compacter op kleine telefoon */
  .founder-row > div:first-child { min-height: 200px !important; }
  .founder-row > div:first-child img { height: 200px !important; }
}

/* ===================== PRODUCTION ENHANCEMENTS ===================== */
/* Audience banner: stack the title above its subtitle (spans, kept valid inside a span) */
.aud-t, .aud-s { display: block; }

/* Skip link for keyboard / screen-reader users */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy-900); color: var(--gold-300); font-family: var(--font-ui); font-size: 0.95rem; padding: 12px 18px; border-radius: 0 0 var(--r-md) 0; }
.skip-link:focus { left: 0; }

/* Visible, on-brand focus ring for keyboard navigation */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--gold-600); outline-offset: 3px; border-radius: var(--r-xs);
}

/* Scroll-reveal: only hide initially when JS is present, so no-JS users see everything. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}