/* ============================================================================
   TMD Advies — stylesheet
   Gegenereerd uit design-system/ (Claude Design, design-system-34af532b).
   Volgorde volgt design-system/styles.css. Eén bestand, één request.
   Bewerk de bronbestanden in design-system/ en genereer dit bestand opnieuw
   (zie README.md) in plaats van hier te wijzigen — behalve de SITE-LAAG
   onderaan, die alleen bij deze website hoort.
   ============================================================================ */

/* ===== design-system/tokens/colors.css ===== */
/* Colors — sampled from the TMD Advies kingfisher logo.
   Base ramps first, semantic aliases below. Never hard-code a hex in a component. */
:root {
  /* Navy — the wordmark colour. Primary brand voice. */
  --navy-900: #071e2a;
  --navy-800: #0b2a3a;
  --navy-700: #0d3346; /* wordmark "TMD" */
  --navy-600: #17475e;
  --navy-500: #235f79;
  --navy-100: #e2e8ec;

  /* Petrol — the kingfisher's back. Interactive / link colour. */
  --petrol-800: #0b4659;
  --petrol-700: #146078;
  --petrol-500: #1b6e8c;
  --petrol-400: #3a8aa6;
  --petrol-200: #c3dae2;
  --petrol-100: #edf3f6;

  /* Water — the reflection. Cool structural blue-grey. */
  --water-600: #5a8593;
  --water-500: #6f9baa;
  --water-300: #a9c3cd;
  --water-100: #e7eef1;

  /* Sage — the reeds and the "ADVIES" line. Quiet secondary. */
  --sage-700: #44624a;
  --sage-600: #4f694e;
  --sage-500: #6a826d;
  --sage-200: #d3dcd2;
  --sage-100: #eef1ed;

  /* Amber — the kingfisher's breast. Accent only, never a surface. */
  --amber-700: #a85c17;
  --amber-600: #c46f22;
  --amber-500: #e98a39;
  --amber-200: #f6d9b8;
  --amber-100: #fbeee0;

  /* Neutrals — cool-leaning greys so they sit under the navy. */
  --white: #ffffff;
  --grey-25: #fafbfb;
  --grey-50: #f4f6f7;
  --grey-100: #e8ecee;
  --grey-200: #d6dcdf;
  --grey-300: #b9c2c7;
  --grey-400: #94a0a6;
  --grey-500: #66727a;
  --grey-700: #435057;
  --grey-800: #2b383f;
  --grey-900: #1c2529;

  /* ── Semantic: text ───────────────────────────────────────── */
  --text-strong: var(--navy-700);
  --text-body: var(--grey-800);
  --text-muted: var(--grey-500);
  --text-faint: var(--grey-400);
  --text-inverse: var(--white);
  --text-inverse-muted: var(--water-300);
  --text-link: var(--petrol-700);
  --text-link-hover: var(--navy-700);
  --text-on-accent: var(--navy-900);

  /* ── Semantic: surfaces ───────────────────────────────────── */
  --surface-page: var(--white);
  --surface-subtle: var(--grey-50);
  --surface-tint: var(--petrol-100);
  --surface-tint-sage: var(--sage-100);
  --surface-card: var(--white);
  --surface-card-subtle: var(--grey-25);
  --surface-inverse: var(--navy-700);
  --surface-inverse-deep: var(--navy-900);
  --surface-accent: var(--amber-500);
  --surface-hover: var(--grey-50);
  --surface-active: var(--grey-100);

  /* ── Semantic: borders ────────────────────────────────────── */
  --border-subtle: var(--grey-100);
  --border-default: var(--grey-200);
  --border-strong: var(--grey-300);
  --border-inverse: rgba(255, 255, 255, 0.18);
  --border-focus: var(--petrol-500);
  --rule-accent: var(--amber-500);

  /* ── Semantic: interactive ────────────────────────────────── */
  --action-primary: var(--navy-700);
  --action-primary-hover: var(--navy-800);
  --action-primary-active: var(--navy-900);
  --action-secondary-border: var(--grey-300);
  --action-secondary-hover: var(--grey-50);

  /* ── Semantic: status (used only for factual state, never decoration) */
  --status-confirmed-fg: var(--sage-700);
  --status-confirmed-bg: var(--sage-100);
  --status-confirmed-border: var(--sage-200);
  --status-pending-fg: var(--amber-700);
  --status-pending-bg: var(--amber-100);
  --status-pending-border: var(--amber-200);
  --status-neutral-fg: var(--grey-700);
  --status-neutral-bg: var(--grey-50);
  --status-neutral-border: var(--grey-200);

  /* Editorial placeholder — an unresolved decision in the copy ([[ ]] markers). */
  --open-decision-fg: var(--amber-700);
  --open-decision-bg: #fdf6ec;
  --open-decision-border: var(--amber-200);
}

/* ===== design-system/tokens/typography.css ===== */
/* Typography. Two families, no serif, no monospace.
   Archivo carries structure (headings, labels, figures); Source Sans 3 carries prose. */
:root {
  --font-display: "Archivo", "Helvetica Neue", Helvetica, sans-serif;
  --font-body: "Source Sans 3", "Segoe UI", "Helvetica Neue", sans-serif;
  --font-ui: var(--font-display);
  --font-numeric: var(--font-display);

  --fw-regular: 400; /* @kind other */
  --fw-medium: 500; /* @kind other */
  --fw-semibold: 600; /* @kind other */
  --fw-bold: 700; /* @kind other */

  /* Step scale — 12 → 56. Names are stable; values may be retuned. */
  --fs-100: 12px;
  --fs-200: 13px;
  --fs-300: 14px;
  --fs-400: 15px;
  --fs-500: 17px; /* body default */
  --fs-600: 19px;
  --fs-700: 21px;
  --fs-800: 24px;
  --fs-900: 28px;
  --fs-1000: 34px;
  --fs-1100: 40px;
  --fs-1200: 48px;
  --fs-1300: 56px;

  --lh-tight: 1.12; /* @kind other */
  --lh-snug: 1.24; /* @kind other */
  --lh-heading: 1.3; /* @kind other */
  --lh-normal: 1.5; /* @kind other */
  --lh-relaxed: 1.65; /* @kind other */

  --ls-tighter: -0.02em; /* @kind other */
  --ls-tight: -0.01em; /* @kind other */
  --ls-normal: 0; /* @kind other */
  --ls-wide: 0.04em; /* @kind other */
  --ls-widest: 0.16em; /* @kind other */ /* wordmark / small all-caps labels */

  /* Composite roles */
  --type-display: var(--fw-semibold) var(--fs-1200) / var(--lh-tight) var(--font-display);
  --type-h1: var(--fw-semibold) var(--fs-1100) / var(--lh-snug) var(--font-display);
  --type-h2: var(--fw-semibold) var(--fs-900) / var(--lh-heading) var(--font-display);
  --type-h3: var(--fw-semibold) var(--fs-700) / var(--lh-heading) var(--font-display);
  --type-h4: var(--fw-semibold) var(--fs-600) / var(--lh-heading) var(--font-display);
  --type-lead: var(--fw-regular) var(--fs-700) / var(--lh-normal) var(--font-body);
  --type-body: var(--fw-regular) var(--fs-500) / var(--lh-relaxed) var(--font-body);
  --type-body-sm: var(--fw-regular) var(--fs-400) / var(--lh-normal) var(--font-body);
  --type-fine: var(--fw-regular) var(--fs-300) / var(--lh-normal) var(--font-body);
  --type-label: var(--fw-semibold) var(--fs-300) / var(--lh-normal) var(--font-display);
  --type-overline: var(--fw-semibold) var(--fs-200) / var(--lh-normal) var(--font-display);
  --type-figure: var(--fw-semibold) var(--fs-1100) / var(--lh-tight) var(--font-numeric);

  --measure: 68ch; /* @kind other */ /* max reading width for running copy */
  --measure-narrow: 58ch; /* @kind other */
}

/* ===== design-system/tokens/spacing.css ===== */
/* Spacing — 4px base. Section rhythm tokens at the bottom. */
:root {
  --space-0: 0;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 8px;
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --space-14: 120px;
  --space-15: 160px;

  --section-y: var(--space-13);
  --section-y-tight: var(--space-11);
  --section-y-loose: var(--space-14);
  --stack-text: var(--space-5); /* gap between paragraphs */
  --stack-heading: var(--space-6); /* heading → first paragraph */
  --grid-gap: var(--space-8);
  --card-pad: var(--space-8);
  --card-pad-sm: var(--space-6);
}

/* ===== design-system/tokens/layout.css ===== */
/* Layout — one 1200px content frame, one narrow prose frame, fixed header height. */
:root {
  --container-max: 1200px;
  --container-narrow: 780px;
  --container-wide: 1360px;
  --gutter: var(--space-7);
  --gutter-lg: var(--space-9);
  --header-h: 76px;
  --header-h-compact: 64px;
  --sticky-offset: calc(var(--header-h) + var(--space-7));
  --col-gap: var(--space-10);
  --z-base: 0; /* @kind other */
  --z-sticky: 20; /* @kind other */
  --z-header: 40; /* @kind other */
  --z-overlay: 60; /* @kind other */
  --z-dialog: 70; /* @kind other */
}

/* ===== design-system/tokens/borders.css ===== */
/* Borders & radii — near-square. Nothing in this brand is a pill. */
:root {
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-max: 6px; /* hard ceiling: no rounder than this */

  --border-w-hairline: 1px;
  --border-w-thick: 2px;
  --border-w-rule: 3px; /* accent rule under section headings */

  --border-hairline: var(--border-w-hairline) solid var(--border-default);
  --border-hairline-subtle: var(--border-w-hairline) solid var(--border-subtle);
  --border-hairline-strong: var(--border-w-hairline) solid var(--border-strong);
}

/* ===== design-system/tokens/elevation.css ===== */
/* Elevation — deliberately shallow. Structure comes from hairlines, not shadow. */
:root {
  --shadow-none: none;
  --shadow-xs: 0 1px 1px rgba(13, 51, 70, 0.05);
  --shadow-sm: 0 1px 3px rgba(13, 51, 70, 0.07);
  --shadow-md: 0 2px 10px rgba(13, 51, 70, 0.07);
  --shadow-lg: 0 8px 28px rgba(13, 51, 70, 0.1);
  --shadow-header: 0 1px 0 var(--border-subtle);
  --focus-ring: 0 0 0 3px rgba(27, 110, 140, 0.28);
  --focus-ring-inverse: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

/* ===== design-system/tokens/motion.css ===== */
/* Motion — short, linear-feeling, colour and opacity only. No bounce, no scale-in. */
:root {
  --dur-instant: 90ms; /* @kind other */
  --dur-fast: 130ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 260ms; /* @kind other */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --transition-color: color var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); /* @kind other */
  --transition-shadow: box-shadow var(--dur-base) var(--ease-standard); /* @kind other */
}

/* ===== design-system/base/reset.css ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }
img, svg, picture, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
:where(:focus-visible) { outline: 2px solid var(--border-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* ===== design-system/base/elements.css ===== */
body { font: var(--type-body); color: var(--text-body); background: var(--surface-page); text-wrap: pretty; -webkit-font-smoothing: antialiased; }
h1 { font: var(--type-h1); color: var(--text-strong); letter-spacing: var(--ls-tight); }
h2 { font: var(--type-h2); color: var(--text-strong); letter-spacing: var(--ls-tight); }
h3 { font: var(--type-h3); color: var(--text-strong); }
h4 { font: var(--type-h4); color: var(--text-strong); }
p { max-width: var(--measure); }
strong, b { font-weight: var(--fw-semibold); color: var(--text-strong); }
small { font: var(--type-fine); color: var(--text-muted); }
a { color: var(--text-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--petrol-200); transition: var(--transition-color), text-decoration-color var(--dur-fast) var(--ease-standard); }
a:hover { color: var(--text-link-hover); text-decoration-color: currentColor; }
a:active { color: var(--navy-900); }
a:visited { color: var(--petrol-800); }
hr { border: 0; border-top: var(--border-hairline); margin: var(--space-9) 0; }
::selection { background: var(--petrol-200); color: var(--navy-900); }

/* ===== design-system/base/utilities.css ===== */
/* Layout utilities used by UI kits and cards. Kept tiny on purpose. */
.tmd-container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter-lg); }
.tmd-container--narrow { max-width: var(--container-narrow); }
.tmd-section { padding-block: var(--section-y); }
.tmd-section--tight { padding-block: var(--section-y-tight); }
.tmd-section--subtle { background: var(--surface-subtle); }
.tmd-section--tint { background: var(--surface-tint); }
.tmd-section--sage { background: var(--surface-tint-sage); }
.tmd-stack { display: flex; flex-direction: column; gap: var(--stack-text); }
.tmd-stack--lg { gap: var(--space-8); }
.tmd-stack--sm { gap: var(--space-3); }
.tmd-row { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.tmd-grid { display: grid; gap: var(--grid-gap); }
.tmd-grid--3 { grid-template-columns: repeat(3, 1fr); }
.tmd-grid--2 { grid-template-columns: repeat(2, 1fr); }
.tmd-grid--4 { grid-template-columns: repeat(4, 1fr); }
.tmd-cols-text { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-9); }
.tmd-lead { font: var(--type-lead); color: var(--grey-700); max-width: var(--measure); }
.tmd-fine { font: var(--type-fine); color: var(--text-muted); max-width: var(--measure); }
.tmd-measure { max-width: var(--measure); }
.tmd-measure-narrow { max-width: var(--measure-narrow); }
@media (max-width: 900px) {
  .tmd-grid--3, .tmd-grid--2, .tmd-grid--4, .tmd-cols-text { grid-template-columns: 1fr; }
}

/* ===== design-system/components/components.css ===== */
/* TMD Advies component styles. One class namespace: .tmd-.
   All values come from tokens; no hard-coded colours. */

/* ── Logo ─────────────────────────────────────────────────── */
.tmd-logo { display: inline-flex; align-items: center; gap: var(--space-4); text-decoration: none; }
.tmd-logo:hover { text-decoration: none; }
.tmd-logo__mark { display: block; width: auto; }
.tmd-logo__text { display: flex; flex-direction: column; gap: 2px; }
.tmd-logo__name { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--navy-700); letter-spacing: var(--ls-widest); line-height: 1; }
.tmd-logo__sub { font-family: var(--font-display); font-weight: var(--fw-medium); color: var(--sage-600); letter-spacing: var(--ls-widest); line-height: 1; font-size: var(--fs-100); }
.tmd-logo--inverse .tmd-logo__name { color: var(--white); }
.tmd-logo--inverse .tmd-logo__sub { color: var(--water-300); }

/* ── Button ───────────────────────────────────────────────── */
.tmd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-semibold); letter-spacing: var(--ls-normal); border-radius: var(--radius-md); border: var(--border-w-hairline) solid transparent; text-decoration: none; cursor: pointer; transition: var(--transition-color), var(--transition-shadow); white-space: nowrap; }
.tmd-btn:hover { text-decoration: none; }
.tmd-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.tmd-btn--sm { font-size: var(--fs-300); padding: 8px 14px; }
.tmd-btn--md { font-size: var(--fs-400); padding: 11px 20px; }
.tmd-btn--lg { font-size: var(--fs-500); padding: 14px 26px; }
.tmd-btn--primary { background: var(--action-primary); color: var(--text-inverse); }
.tmd-btn--primary:hover { background: var(--action-primary-hover); color: var(--text-inverse); }
.tmd-btn--primary:active { background: var(--action-primary-active); }
.tmd-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--action-secondary-border); }
.tmd-btn--secondary:hover { background: var(--action-secondary-hover); border-color: var(--grey-400); color: var(--text-strong); }
.tmd-btn--secondary:active { background: var(--surface-active); }
.tmd-btn--ghost { background: transparent; color: var(--text-link); }
.tmd-btn--ghost:hover { background: var(--surface-hover); color: var(--navy-700); }
.tmd-btn--inverse { background: var(--white); color: var(--navy-700); }
.tmd-btn--inverse:hover { background: var(--water-100); color: var(--navy-900); }
.tmd-btn--inverse-outline { background: transparent; color: var(--white); border-color: var(--border-inverse); }
.tmd-btn--inverse-outline:hover { background: rgba(255, 255, 255, 0.1); color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.tmd-btn--inverse-outline:focus-visible { box-shadow: var(--focus-ring-inverse); }
.tmd-btn[disabled], .tmd-btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.tmd-btn--block { width: 100%; }

/* ── Text link with trailing arrow ────────────────────────── */
.tmd-textlink { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-400); color: var(--text-link); text-decoration: none; }
.tmd-textlink:hover { color: var(--navy-700); text-decoration: none; }
.tmd-textlink__label { border-bottom: 1px solid var(--petrol-200); padding-bottom: 1px; transition: border-color var(--dur-fast) var(--ease-standard); }
.tmd-textlink:hover .tmd-textlink__label { border-bottom-color: currentColor; }
.tmd-textlink__arrow { transition: transform var(--dur-base) var(--ease-standard); flex: none; }
.tmd-textlink:hover .tmd-textlink__arrow { transform: translateX(3px); }
.tmd-textlink--inverse { color: var(--white); }
.tmd-textlink--inverse .tmd-textlink__label { border-bottom-color: rgba(255, 255, 255, 0.35); }
.tmd-textlink--inverse:hover { color: var(--white); }

/* ── Card ─────────────────────────────────────────────────── */
.tmd-card { background: var(--surface-card); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--card-pad); }
.tmd-card--flat { border-radius: var(--radius-md); box-shadow: none; }
.tmd-card--raised { box-shadow: var(--shadow-sm); }
.tmd-card--subtle { background: var(--surface-card-subtle); }
.tmd-card--inverse { background: var(--surface-inverse); border-color: transparent; color: var(--text-inverse); }
.tmd-card--pad-sm { padding: var(--card-pad-sm); }
.tmd-card--interactive { transition: var(--transition-color), var(--transition-shadow); }
.tmd-card--interactive:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* ── Status badge (factual state only) ────────────────────── */
.tmd-badge { display: inline-flex; align-items: center; font-family: var(--font-display); font-size: var(--fs-200); font-weight: var(--fw-semibold); line-height: 1; padding: 5px 8px; border-radius: var(--radius-xs); border: 1px solid; white-space: nowrap; }
.tmd-badge--confirmed { color: var(--status-confirmed-fg); background: var(--status-confirmed-bg); border-color: var(--status-confirmed-border); }
.tmd-badge--pending { color: var(--status-pending-fg); background: var(--status-pending-bg); border-color: var(--status-pending-border); }
.tmd-badge--neutral { color: var(--status-neutral-fg); background: var(--status-neutral-bg); border-color: var(--status-neutral-border); }
.tmd-badge--plain { color: var(--text-muted); background: transparent; border-color: var(--border-default); }

/* ── Category label (reference list) ──────────────────────── */
.tmd-catlabel { display: inline-block; font-family: var(--font-display); font-size: var(--fs-100); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--petrol-700); }

/* ── Open decision marker ([[ ]] in the copy) ─────────────── */
.tmd-open { display: block; font: var(--type-body-sm); color: var(--open-decision-fg); background: var(--open-decision-bg); border: 1px dashed var(--open-decision-border); border-radius: var(--radius-xs); padding: var(--space-4) var(--space-5); max-width: var(--measure); }
.tmd-open--inline { display: inline; padding: 1px 5px; border-radius: var(--radius-xs); }

/* ── Section heading ──────────────────────────────────────── */
.tmd-sectionhead { display: flex; flex-direction: column; gap: var(--space-5); }
.tmd-sectionhead__rule { width: 40px; height: var(--border-w-rule); background: var(--rule-accent); }
.tmd-sectionhead__title { font: var(--type-h2); color: var(--text-strong); letter-spacing: var(--ls-tight); max-width: 22ch; }
.tmd-sectionhead__title--wide { max-width: 34ch; }
.tmd-sectionhead__intro { font: var(--type-body); color: var(--grey-700); max-width: var(--measure); }
.tmd-sectionhead--inverse .tmd-sectionhead__title { color: var(--white); }
.tmd-sectionhead--inverse .tmd-sectionhead__intro { color: var(--water-300); }

/* ── Service card ─────────────────────────────────────────── */
.tmd-service { display: flex; flex-direction: column; gap: var(--space-5); background: var(--surface-card); border: var(--border-hairline); border-top: var(--border-w-thick) solid var(--navy-700); border-radius: var(--radius-md); padding: var(--card-pad); height: 100%; transition: var(--transition-color), var(--transition-shadow); }
.tmd-service:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); border-top-color: var(--petrol-500); }
.tmd-service__title { font: var(--type-h4); color: var(--text-strong); }
.tmd-service__body { font: var(--type-body-sm); color: var(--grey-700); }
.tmd-service__list { display: flex; flex-direction: column; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hairline-subtle); margin-top: auto; }
.tmd-service__item { display: flex; gap: var(--space-4); font: var(--type-body-sm); color: var(--grey-700); }
.tmd-service__item::before { content: "·"; color: var(--water-500); font-weight: var(--fw-bold); }
.tmd-service__foot { padding-top: var(--space-5); }

/* ── Product card (sticky "Concreet") ─────────────────────── */
.tmd-product { background: var(--surface-subtle); border: var(--border-hairline); border-radius: var(--radius-md); padding: var(--card-pad-sm); display: flex; flex-direction: column; gap: var(--space-5); }
.tmd-product__kicker { font: var(--type-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--petrol-700); }
.tmd-product__title { font: var(--type-h4); color: var(--text-strong); }
.tmd-product__body { font: var(--type-body-sm); color: var(--grey-700); }
.tmd-product__specs { display: flex; flex-direction: column; gap: var(--space-4); border-top: var(--border-hairline); padding-top: var(--space-5); }
.tmd-product__spec { display: grid; grid-template-columns: 96px 1fr; gap: var(--space-4); font: var(--type-body-sm); }
.tmd-product__spec dt { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-300); color: var(--text-strong); }
.tmd-product__spec dd { margin: 0; color: var(--grey-700); }
.tmd-product--sticky { position: sticky; top: var(--sticky-offset); }

/* ── Stat figure ──────────────────────────────────────────── */
.tmd-stat { display: flex; flex-direction: column; gap: var(--space-4); }
.tmd-stat__value { font: var(--type-figure); color: var(--navy-700); letter-spacing: var(--ls-tighter); font-variant-numeric: tabular-nums; }
.tmd-stat__label { font: var(--type-body-sm); color: var(--grey-700); max-width: 30ch; }
.tmd-stat--ruled { padding-top: var(--space-5); border-top: var(--border-w-thick) solid var(--navy-700); }
.tmd-stat--inverse .tmd-stat__value { color: var(--white); }
.tmd-stat--inverse .tmd-stat__label { color: var(--water-300); }
.tmd-stat--inverse.tmd-stat--ruled { border-top-color: var(--amber-500); }

/* ── Step list (werkwijze) ────────────────────────────────── */
.tmd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-8); }
.tmd-step { display: flex; flex-direction: column; gap: var(--space-4); position: relative; padding-top: var(--space-7); }
.tmd-step::before { content: ""; position: absolute; top: 0; left: 0; right: calc(var(--space-8) * -1); height: 1px; background: var(--border-default); }
.tmd-step:last-child::before { right: 0; }
.tmd-step__num { position: absolute; top: -6px; left: 0; width: 13px; height: 13px; background: var(--surface-page); border-top: var(--border-w-thick) solid var(--amber-500); }
.tmd-step__index { font-family: var(--font-display); font-size: var(--fs-300); font-weight: var(--fw-semibold); color: var(--petrol-700); font-variant-numeric: tabular-nums; }
.tmd-step__title { font: var(--type-h4); color: var(--text-strong); }
.tmd-step__body { font: var(--type-body-sm); color: var(--grey-700); }
@media (max-width: 900px) { .tmd-steps { grid-template-columns: 1fr; } .tmd-step::before { right: 0; } }

/* ── Data table (deadlines) ───────────────────────────────── */
.tmd-table-wrap { border: var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.tmd-table { font: var(--type-body-sm); }
.tmd-table th, .tmd-table td { text-align: left; vertical-align: top; padding: var(--space-5) var(--space-6); border-bottom: var(--border-hairline-subtle); }
.tmd-table thead th { font-family: var(--font-display); font-size: var(--fs-200); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); background: var(--navy-700); border-bottom: 0; white-space: nowrap; }
.tmd-table tbody tr:last-child td { border-bottom: 0; }
.tmd-table tbody tr:nth-child(even) { background: var(--grey-25); }
.tmd-table tbody tr:hover { background: var(--petrol-100); }
.tmd-table td:first-child { color: var(--text-strong); font-weight: var(--fw-semibold); max-width: 30ch; }
.tmd-table__date { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tmd-table__note { font: var(--type-fine); color: var(--text-muted); max-width: var(--measure); margin-top: var(--space-5); }
.tmd-table td:last-child .tmd-badge { white-space: normal; }
@media (max-width: 1000px) {
  .tmd-table thead { display: none; }
  .tmd-table tr { display: block; border-bottom: var(--border-hairline); padding: var(--space-5) 0; }
  .tmd-table td { display: grid; grid-template-columns: 110px 1fr; gap: var(--space-4); border: 0; padding: var(--space-2) var(--space-6); max-width: none; }
  .tmd-table td::before { content: attr(data-label); font-family: var(--font-display); font-size: var(--fs-200); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); }
  .tmd-table td .tmd-badge { width: fit-content; }
}

/* ── Accordion (FAQ) ──────────────────────────────────────── */
.tmd-accordion { border-top: var(--border-hairline); }
.tmd-accordion__item { border-bottom: var(--border-hairline); }
.tmd-accordion__trigger { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); width: 100%; text-align: left; padding: var(--space-6) 0; font-family: var(--font-display); font-size: var(--fs-600); font-weight: var(--fw-semibold); color: var(--text-strong); transition: var(--transition-color); }
.tmd-accordion__trigger:hover { color: var(--petrol-700); }
.tmd-accordion__icon { flex: none; margin-top: 3px; color: var(--water-600); transition: transform var(--dur-base) var(--ease-standard); }
.tmd-accordion__item[data-open="true"] .tmd-accordion__icon { transform: rotate(180deg); }
.tmd-accordion__panel { padding-bottom: var(--space-7); font: var(--type-body); color: var(--grey-700); max-width: var(--measure); }

/* ── Quote ────────────────────────────────────────────────── */
.tmd-quote { border-left: var(--border-w-rule) solid var(--amber-500); padding-left: var(--space-8); display: flex; flex-direction: column; gap: var(--space-6); }
.tmd-quote__text { font-family: var(--font-body); font-size: var(--fs-900); line-height: var(--lh-heading); color: var(--text-strong); font-weight: var(--fw-regular); max-width: 44ch; }
.tmd-quote__attr { font: var(--type-body-sm); color: var(--text-muted); }

/* ── Reference list ───────────────────────────────────────── */
.tmd-reflist { display: flex; flex-direction: column; }
.tmd-reflist__group { border-top: var(--border-hairline); padding: var(--space-6) 0; display: grid; grid-template-columns: 200px 1fr; gap: var(--space-8); }
.tmd-reflist__heading { font-family: var(--font-display); font-size: var(--fs-400); font-weight: var(--fw-semibold); color: var(--text-strong); }
.tmd-reflist__items { display: flex; flex-direction: column; gap: var(--space-4); }
.tmd-reflist__item { display: flex; gap: var(--space-4); font: var(--type-body-sm); color: var(--grey-700); }
.tmd-reflist__item::before { content: ""; flex: none; width: 12px; height: 1px; background: var(--water-500); margin-top: 11px; }
@media (max-width: 780px) { .tmd-reflist__group { grid-template-columns: 1fr; gap: var(--space-5); } }

/* ── CTA band ─────────────────────────────────────────────── */
.tmd-cta { background: var(--surface-inverse); color: var(--text-inverse); padding-block: var(--space-12); }
.tmd-cta__inner { display: flex; flex-direction: column; gap: var(--space-7); align-items: flex-start; }
.tmd-cta__title { font: var(--type-h2); color: var(--white); letter-spacing: var(--ls-tight); max-width: 30ch; }
.tmd-cta__body { font: var(--type-body); color: var(--water-300); max-width: var(--measure-narrow); }

/* ── Forms ────────────────────────────────────────────────── */
.tmd-field { display: flex; flex-direction: column; gap: var(--space-3); }
.tmd-field__label { font: var(--type-label); color: var(--text-strong); }
.tmd-field__hint { font: var(--type-fine); color: var(--text-muted); }
.tmd-field__error { font: var(--type-fine); color: var(--amber-700); }
.tmd-input { font: var(--type-body); color: var(--text-body); background: var(--white); border: var(--border-w-hairline) solid var(--border-strong); border-radius: var(--radius-sm); padding: 10px var(--space-4); width: 100%; transition: var(--transition-color), var(--transition-shadow); }
.tmd-input::placeholder { color: var(--text-faint); }
.tmd-input:hover { border-color: var(--grey-400); }
.tmd-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.tmd-input[aria-invalid="true"] { border-color: var(--amber-600); }
.tmd-input--textarea { min-height: 120px; resize: vertical; line-height: var(--lh-normal); }
.tmd-input[disabled] { background: var(--grey-50); color: var(--text-faint); }

/* ── Site header ──────────────────────────────────────────── */
.tmd-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--white); box-shadow: var(--shadow-header); }
.tmd-header__inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); }
.tmd-header__nav { display: flex; align-items: center; gap: var(--space-8); }
.tmd-header__link { font-family: var(--font-display); font-size: var(--fs-400); font-weight: var(--fw-medium); color: var(--grey-700); text-decoration: none; padding-block: var(--space-2); border-bottom: var(--border-w-thick) solid transparent; transition: var(--transition-color); }
.tmd-header__link:hover { color: var(--navy-700); text-decoration: none; }
.tmd-header__link[aria-current="page"] { color: var(--navy-700); border-bottom-color: var(--amber-500); }
.tmd-header__tel { font-family: var(--font-display); font-size: var(--fs-400); font-weight: var(--fw-medium); color: var(--petrol-700); text-decoration: none; }
.tmd-header__tel:hover { color: var(--navy-700); }

/* ── Anchor nav ("Op deze pagina") ────────────────────────── */
.tmd-anchornav { border-top: var(--border-hairline); border-bottom: var(--border-hairline); padding-block: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5); }
.tmd-anchornav__label { font: var(--type-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-muted); }
.tmd-anchornav__list { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
.tmd-anchornav__link { font: var(--type-body-sm); color: var(--text-link); text-decoration: none; border-bottom: 1px solid var(--petrol-200); }
.tmd-anchornav__link:hover { color: var(--navy-700); border-bottom-color: currentColor; }

/* ── Site footer ──────────────────────────────────────────── */
.tmd-footer { background: var(--surface-inverse-deep); color: var(--water-300); padding-block: var(--space-11) var(--space-8); }
.tmd-footer__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-9); padding-bottom: var(--space-9); border-bottom: 1px solid var(--border-inverse); }
.tmd-footer__blurb { font: var(--type-body-sm); color: var(--water-300); max-width: 40ch; }
.tmd-footer__coltitle { font: var(--type-overline); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--white); margin-bottom: var(--space-5); }
.tmd-footer__list { display: flex; flex-direction: column; gap: var(--space-3); }
.tmd-footer a { color: var(--water-300); font-size: var(--fs-400); text-decoration: none; }
.tmd-footer a:hover { color: var(--white); text-decoration: underline; text-decoration-color: currentColor; }
.tmd-footer__legal { padding-top: var(--space-7); font: var(--type-fine); color: var(--water-600); display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
@media (max-width: 900px) { .tmd-footer__top { grid-template-columns: 1fr; } }

/* ============================================================================
   SITE-LAAG — alleen voor deze website.
   Bevat de paginalayouts uit "TMD Advies Website.dc.html" plus de CSS die de
   interacties overneemt die in het ontwerp door JavaScript werden verzorgd.
   De site draait volledig zonder JavaScript.
   ============================================================================ */

/* ── Paginalayouts (uit het ontwerpbestand) ───────────────── */
.site-hero { display:grid; grid-template-columns:1.15fr 0.85fr; gap:var(--space-14); align-items:center; }
.site-split-08 { display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--space-12); }
.site-split-11 { display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--space-12); align-items:start; }
.site-split-service { display:grid; grid-template-columns:1.35fr 0.65fr; gap:var(--space-12); align-items:start; }
.site-split-contact { display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--space-12); align-items:start; }
.site-cols2 { column-count:2; column-gap:var(--space-9); }
.site-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5); }
.site-dlrow { display:grid; grid-template-columns:150px 1fr; gap:var(--space-4); padding-bottom:var(--space-4); border-bottom:var(--border-hairline-subtle); align-items:center; }
.site-vw-item { display:flex; gap:var(--space-4); font:var(--type-body); padding-bottom:var(--space-4); border-bottom:1px solid var(--sage-200); }
.site-vw-term { min-width:22ch; }
.site-photo { aspect-ratio:4 / 5; background:var(--grey-50); border:var(--border-hairline); border-radius:var(--radius-md); display:flex; align-items:flex-end; padding:var(--space-6); }
.site-photo img { width:100%; height:100%; object-fit:cover; border-radius:var(--radius-md); }
[id] { scroll-margin-top:120px; }

/* Blok met een dikke navy kop-rand (waarderingen op de homepage) */
.site-valueblock { padding-top:var(--space-5); border-top:var(--border-w-thick) solid var(--navy-700); }
.site-eed-item { display:flex; gap:var(--space-4); max-width:var(--measure); }
.site-eed-item::before { content:""; width:1px; background:var(--water-300); flex:none; }
.site-motto { font:var(--type-h4); color:var(--text-strong); max-width:var(--measure-narrow); }

/* ── Toegankelijkheid: skiplink ───────────────────────────── */
.site-skiplink { position:absolute; left:var(--space-5); top:var(--space-5); z-index:var(--z-overlay); transform:translateY(-200%); background:var(--navy-700); color:var(--white); font:var(--type-label); padding:var(--space-4) var(--space-5); border-radius:var(--radius-md); text-decoration:none; transition:transform var(--dur-fast) var(--ease-standard); }
.site-skiplink:focus { transform:translateY(0); color:var(--white); }

/* ── FAQ-accordeon zonder JavaScript ──────────────────────────
   In het ontwerp is dit een React-component met state. Hier is het een
   <details>/<summary>-paar: dezelfde opmaak, native gedrag, nul JavaScript. */
details.tmd-accordion__item > summary.tmd-accordion__trigger { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-6); width:100%; text-align:left; padding:var(--space-6) 0; font-family:var(--font-display); font-size:var(--fs-600); font-weight:var(--fw-semibold); color:var(--text-strong); cursor:pointer; list-style:none; transition:var(--transition-color); }
details.tmd-accordion__item > summary.tmd-accordion__trigger::-webkit-details-marker { display:none; }
details.tmd-accordion__item > summary.tmd-accordion__trigger::marker { content:""; }
details.tmd-accordion__item > summary.tmd-accordion__trigger:hover { color:var(--petrol-700); }
details.tmd-accordion__item > summary.tmd-accordion__trigger:focus-visible { outline:2px solid var(--border-focus); outline-offset:2px; }
details.tmd-accordion__item[open] > summary .tmd-accordion__icon { transform:rotate(180deg); }

/* ── Formulier ────────────────────────────────────────────── */
.site-form { border:var(--border-hairline); border-radius:var(--radius-md); padding:var(--space-8); background:var(--surface-card-subtle); }
.site-form-note { font:var(--type-fine); color:var(--text-muted); }
.site-confirm { border:var(--border-hairline); border-top:var(--border-w-thick) solid var(--sage-700); border-radius:var(--radius-md); padding:var(--space-8); background:var(--sage-100); }

/* ── Responsief ───────────────────────────────────────────── */
@media (max-width: 1000px) {
  .site-split-service, .site-split-contact, .site-split-11 { grid-template-columns:1fr; gap:var(--space-9); }
  .tmd-product--sticky { position:static; }
}
@media (max-width: 900px) {
  .site-hero, .site-split-08 { grid-template-columns:1fr; gap:var(--space-8); }
  .site-cols2 { column-count:1; }
  .site-form-grid { grid-template-columns:1fr; }
}
@media (max-width: 760px) {
  .tmd-header__inner { position:relative; height:auto; padding-block:var(--space-4); flex-wrap:wrap; gap:var(--space-4); }
  .tmd-header__nav { width:100%; order:2; gap:var(--space-6); flex-wrap:nowrap; justify-content:flex-start; }
  .tmd-header__nav .tmd-btn { position:absolute; top:var(--space-4); right:var(--space-6); }
  .tmd-header__link { font-size:var(--fs-300); }
  .tmd-header__tel, .site-header-tel { display:none; }
  .site-photo { aspect-ratio:3 / 2; }
  .site-vw-item { flex-direction:column; gap:var(--space-2); }
  .site-vw-term { min-width:0; }
  .site-dlrow { grid-template-columns:1fr; gap:var(--space-2); }
  .tmd-section, .tmd-section--tight { padding-block:var(--space-11); }
  .tmd-container { padding-inline:var(--space-6); }
  .tmd-row > * { flex:1 1 100%; justify-content:center; }
  :root { --fs-1300:38px; --fs-1200:32px; --fs-1100:26px; --fs-1000:24px; --fs-900:22px; --fs-800:20px; --fs-700:19px; }
  [id] { scroll-margin-top:132px; }
}

/* ── Afdrukken ────────────────────────────────────────────── */
@media print {
  .tmd-header, .tmd-cta, .site-skiplink, .tmd-anchornav, .site-form { display:none; }
  .tmd-footer { background:none; color:var(--text-body); }
  .tmd-footer a { color:var(--text-body); }
  details.tmd-accordion__item > .tmd-accordion__panel { display:block; }
  a[href^="http"]::after { content:" (" attr(href) ")"; font-size:var(--fs-200); }
}