/* Halden Voss — shared design system */
:root {
  --bg: #F5F2EC;
  --bg-2: #ECE7DD;
  --ink: #14110D;
  --ink-2: #2A2620;
  --muted: #6B645A;
  --line: #D9D3C7;
  --line-2: #CFC8B9;
  --accent: #2240FF;
  --accent-ink: #FFFFFF;

  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --sans: "Geist", "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --pad-x: clamp(20px, 4vw, 64px);
  --gap-y: clamp(80px, 10vw, 160px);

  --maxw: 1400px;
}

/* Themes */
[data-theme="dark"] {
  --bg: #0F0D0A;
  --bg-2: #17140F;
  --ink: #F2EEE5;
  --ink-2: #D9D3C7;
  --muted: #8A8275;
  --line: #2A2620;
  --line-2: #3A342C;
}

/* Density */
[data-density="compact"] {
  --gap-y: clamp(56px, 7vw, 110px);
}

/* Accent palettes */
[data-accent="cobalt"]  { --accent: #2240FF; --accent-ink: #FFF; }
[data-accent="oxblood"] { --accent: #7A1F2B; --accent-ink: #FFF; }
[data-accent="saffron"] { --accent: #E0A82E; --accent-ink: #14110D; }
[data-accent="forest"]  { --accent: #1F5D3A; --accent-ink: #FFF; }
[data-accent="plum"]    { --accent: #5A2A6B; --accent-ink: #FFF; }

/* Font pairings */
[data-fonts="editorial"] { --serif: "Instrument Serif", Georgia, serif; --sans: "Geist", system-ui, sans-serif; }
[data-fonts="classic"]   { --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", system-ui, sans-serif; }
[data-fonts="modern"]    { --serif: "Fraunces", Georgia, serif; --sans: "DM Sans", system-ui, sans-serif; }

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; padding: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; letter-spacing: -0.01em; }
p { margin: 0; text-wrap: pretty; }

/* Type scale */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--serif);
  font-size: clamp(56px, 9vw, 144px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.h1 {
  font-family: var(--serif);
  font-size: clamp(42px, 6vw, 88px);
  line-height: 1.0;
  letter-spacing: -0.02em;
}
.h2 {
  font-family: var(--serif);
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.h3 {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.15;
}
.lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 56ch;
}
.small { font-size: 13px; color: var(--muted); }
.mono { font-family: var(--mono); }
em.serif-italic { font-family: var(--serif); font-style: italic; }

/* Layout */
.shell { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad-x); }
.section { padding: var(--gap-y) 0; }
.section + .section { border-top: 1px solid var(--line); }
.rule { border-top: 1px solid var(--line); }

.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
@media (max-width: 760px) { .grid-12 { grid-template-columns: repeat(6, 1fr); gap: 16px; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: transform .15s ease, background .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-ink     { background: var(--ink); color: var(--bg); }
.btn-ghost   { border: 1px solid var(--line-2); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn .arrow { display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* Tag chip */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
}
.chip-solid { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); display: inline-block;
}

/* Striped placeholder */
.placeholder {
  position: relative;
  background:
    repeating-linear-gradient(135deg,
      var(--line) 0 1px, transparent 1px 14px),
    var(--bg-2);
  border: 1px solid var(--line);
  overflow: hidden;
  border-radius: 4px;
}
.placeholder .ph-label {
  position: absolute;
  left: 16px; bottom: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--bg);
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.placeholder .ph-tag {
  position: absolute; top: 14px; left: 16px;
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Cards */
.card {
  border: 1px solid var(--line);
  background: var(--bg);
  padding: 28px;
  border-radius: 4px;
  transition: border-color .15s ease, transform .15s ease;
}
.card:hover { border-color: var(--ink-2); }

.kpi { font-family: var(--serif); font-size: clamp(40px, 5vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.kpi-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-top: 12px; display: block; }

/* Hover link */
.link-ul {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 3px;
  transition: gap .2s ease;
}
.link-ul:hover { gap: 14px; }

/* Page intro block reused everywhere */
.page-hat {
  padding: 120px 0 64px;
  border-bottom: 1px solid var(--line);
}
.page-hat .crumbs {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 32px;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.page-hat .crumbs a:hover { color: var(--ink); }
.page-hat .crumbs span { color: var(--line-2); }

/* Footer & Nav handled by chrome.css */

/* ── Long-word safety (NL/FR compounds) ─────────────────────────────────
   Grid children default to min-width:auto, so a word wider than its column
   (e.g. "Hospitalisatieverzekering") pushes out of its track and overlaps
   the next one. Let tracks shrink, and let long words break inside them. */
.grid-12 > * { min-width: 0; }
.display, .h1, .h2, .h3, .lead, .svc-list strong, .big-num {
  overflow-wrap: break-word;
  /* <html lang> matches the build's language, so browsers hyphenate NL/FR
     compounds at real syllable breaks instead of chopping mid-word. */
  hyphens: auto;
}