/* ClearLine — production stylesheet.
   Design tokens follow the 2026 brand identity: white is the primary surface,
   Fog separates, navy anchors, and the two accents appear once each.
   Fonts self-hosted in /fonts. */

/* ============ Fonts ============ */
/* IBM Plex Sans vervangt Bricolage Grotesque, Archivo en Hanken Grotesk.
   Omgezet 9 september 2026: de site moest corporate klinken en Bricolage was
   de jonge factor. Plex Sans hoort bij de IBM Plex Mono die er al stond, dus
   de hele site draait nu op een familie. */
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plexsans-400-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plexsans-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plexsans-500-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plexsans-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plexsans-600-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plexsans-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/plexsans-700-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/plexsans-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* IBM Plex Sans — het hele merk. Mono blijft IBM Plex Mono. */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plexmono-400-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plexmono-500-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plexmono-600-latinext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/plexmono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/plexmono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/plexmono-600-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ============================================================
   Brand tokens — colour
   White carries the pages, Fog separates them, navy anchors, and
   the two accents appear once each. Target mix: white ~62%,
   fog ~22%, navy ~13%, accents ~1% combined.
   ============================================================ */
:root {
  /* ---- The eight ---- */
  --cl-white:      #FFFFFF;   /* primary surface — pages, cards, tables */
  --cl-fog:        #EAF0F4;   /* secondary surface — bands, insets, wells */
  --cl-navy:       #12263A;   /* body text, the mark, dark sections */
  --cl-slate:      #5A7285;   /* secondary text/labels — 5.1:1 on white */
  --cl-blue-deep:  #2E7EB4;   /* links/interactive on light */
  --cl-blue:       #5EA8D9;   /* accent, NAVY BACKGROUNDS ONLY — 2.6:1 on white */
  --cl-amber-deep: #D98328;   /* mark module on light surfaces */
  --cl-amber:      #F2A65A;   /* mark module on navy surfaces */

  /* ---- Derived (lightness shifts of the above — no new hue families) ---- */
  --cl-fog-deep:    #DCE5EC;  /* hairline rules and card borders on white */
  --cl-fog-edge:    #C3D2DD;  /* stronger rules, inputs, outline buttons */
  --cl-slate-light: #9FB4C4;  /* secondary text on navy — 7.2:1 */
  --cl-ink-soft:    #23405A;  /* body copy one step off pure navy — 11.2:1 */
  /* Brand Slate is 5.0:1 on white but only 4.4:1 on Fog, and plenty of
     secondary text sits on Fog. This is Slate one step down the same ramp:
     5.7:1 on white, 5.0:1 on Fog. Slate itself stays the brand swatch. */
  --cl-slate-deep:  #53697B;

  /* ---- Status (tuned to read on white) ---- */
  --cl-success:  #2E7D5B;  /* 5.0:1 on white */
  --cl-danger:   #B4443A;  /* 5.5:1 on white */

  /* ============ Contextual roles — light surface (default) ============ */
  --cl-surface:        var(--cl-white);
  --cl-surface-raised: var(--cl-white);
  --cl-surface-well:   var(--cl-fog);
  --cl-text:           var(--cl-navy);
  --cl-text-body:      var(--cl-ink-soft);
  --cl-text-muted:     var(--cl-slate-deep);
  --cl-link:           var(--cl-blue-deep);
  --cl-accent:         var(--cl-blue-deep);   /* icons, rules, the line motif */
  --cl-border:         var(--cl-fog-deep);
  --cl-border-strong:  var(--cl-fog-edge);
  --cl-logo:           var(--cl-navy);
  --cl-logo-amber:     var(--cl-amber-deep);
  --cl-solid-bg:       var(--cl-navy);        /* the one solid button */
  --cl-solid-fg:       var(--cl-white);
  --cl-solid-bg-hover: #1D3A55;
  --cl-focus:          0 0 0 3px rgba(46, 126, 180, 0.38);
}

/* The navy context. Applied to dark sections and the footer. Every role above
   flips; nothing else changes. The footer opts in by element so the lockup
   there resolves to the white mark rather than navy-on-navy. */
.on-navy, .site-footer {
  --cl-surface:        var(--cl-navy);
  --cl-surface-raised: rgba(255, 255, 255, 0.05);
  --cl-surface-well:   rgba(255, 255, 255, 0.05);
  --cl-text:           var(--cl-white);
  --cl-text-body:      #D5E0E8;
  --cl-text-muted:     var(--cl-slate-light);
  --cl-link:           var(--cl-blue);
  --cl-accent:         var(--cl-blue);
  --cl-border:         rgba(255, 255, 255, 0.14);
  --cl-border-strong:  rgba(255, 255, 255, 0.28);
  --cl-logo:           var(--cl-white);
  --cl-logo-amber:     var(--cl-amber);
  --cl-solid-bg:       var(--cl-white);
  --cl-solid-fg:       var(--cl-navy);
  --cl-solid-bg-hover: var(--cl-fog);
  --cl-focus:          0 0 0 3px rgba(94, 168, 217, 0.5);

  background: var(--cl-surface);
  color: var(--cl-text);
}

/* ============================================================
   Typography tokens
     IBM Plex Sans 600 — page headlines, section headings, subheads, wordmark.
     IBM Plex Sans 400/500 — all body copy, UI, forms, buttons.
     IBM Plex Mono — the small tracked label device (eyebrows, figures).
   ============================================================ */
:root {
  --font-display: 'IBM Plex Sans', system-ui, sans-serif;
  --font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Type scale (root 16px). Body never falls below 14px. */
  --text-xs: 0.75rem;     /* 12 — mono labels only */
  --text-sm: 0.875rem;    /* 14 */
  --text-base: 1rem;      /* 16 — body floor */
  --text-md: 1.0625rem;   /* 17 */
  --text-lg: 1.1875rem;   /* 19 */
  --text-xl: 1.375rem;    /* 22 */
  --text-2xl: 1.75rem;    /* 28 */
  --text-3xl: 2.25rem;    /* 36 */
  --text-4xl: 3rem;       /* 48 */

  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  --tracking-wordmark: -0.03em;  /* fixed at every size — never loosens */
  --tracking-tight: -0.025em;
  --tracking-label: 0.08em;
}

/* ============ Spacing, radii, sizing. 4px base grid. ============ */
:root {
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

  --container-max: 1200px;
  --container-narrow: 760px;

  /* Radii — precise, never pill-happy. Cards top out at 14px. */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 9px;
  --radius-lg: 14px;
  --radius-full: 999px;

  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 54px;
}

/* ============ Elevation & motion ============
   On white, elevation reads through a hairline rule, not a drop shadow.
   Shadows appear only where something genuinely floats (the open mobile nav). */
:root {
  --shadow-overlay: 0 8px 24px rgba(18, 38, 58, 0.10);

  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 200ms; /* @kind other */
  --dur-slow: 380ms; /* @kind other */

  --line-weight: 2px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--cl-text-body);
  background: var(--cl-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* height: auto hoort hier verplicht bij. Zonder die regel blijft het
   height-attribuut uit de HTML gelden zodra max-width de breedte inperkt, en
   wordt het beeld in elkaar gedrukt. Dat was de oorzaak van de uitgerekte
   foto's. Toegevoegd 9 september 2026. */
img { max-width: 100%; height: auto; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--cl-link); outline-offset: 2px; }

/* Page headlines — Plex Sans 600, 32px and up. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--cl-text);
  margin: 0;
  text-wrap: balance;
}
/* Subheads — everything below the display threshold. */
h3, h4, h5 {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--cl-text);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--cl-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--cl-text); }

/* Links sitting inside running text are underlined, so colour is never the
   only thing marking them — Clarity Blue Deep is 4.4:1 on white, close enough
   to the floor that it should not be carrying the signal alone. */
p a, .prose li a, .faq__a-inner a, .callout__text a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
p a:hover, .prose li a:hover, .faq__a-inner a:hover, .callout__text a:hover {
  text-decoration-color: currentColor;
}
/* Navigation is not running text — it reads as a list, so it needs no rule. */
.footer-col a, .nav a, .footer-bottom a { text-decoration: none; }

code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }

::selection { background: rgba(46, 126, 180, 0.18); color: var(--cl-navy); }
.on-navy ::selection { background: rgba(94, 168, 217, 0.32); color: var(--cl-white); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* skip link */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--cl-navy); color: var(--cl-white);
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: var(--weight-semibold);
}
.skip-link:focus { left: 16px; top: 16px; color: var(--cl-white); }

/* ============================================================
   The lockup — a mark SVG plus a styled span, so the word stays
   selectable and translatable. One variable, --H, drives everything.
   ============================================================ */
.cl-lockup {
  --H: 26px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--H) * 0.36);
  color: var(--cl-logo);
  text-decoration: none;
}
.cl-lockup:hover { color: var(--cl-logo); }
.cl-lockup .cl-mark { height: var(--H); width: auto; display: block; flex: none; }
.cl-lockup span {
  font-family: var(--font-heading);
  font-weight: var(--weight-semibold);
  font-size: calc(var(--H) * 0.75);
  letter-spacing: var(--tracking-wordmark);
  line-height: 1;
  white-space: nowrap;
}
/* Clear space: 0.28 × mark height on every side. Nothing enters it. */
.cl-lockup { padding: calc(var(--H) * 0.28) 0; }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.section { padding-top: 84px; padding-bottom: 84px; background: var(--cl-surface); }

/* Fog band — a separating surface, never the whole page. */
.section--fog { background: var(--cl-fog); }
/* Fog inset — a band that stops at the container edge instead of bleeding.
   Preferred over a full-bleed band when the page already has one. */
.band {
  background: var(--cl-fog); border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 52px);
}
/* Navy anchor — at most one per page, and it earns its place. */
.section--navy { padding-top: 104px; padding-bottom: 104px; }

.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--cl-text-body); max-width: 62ch; }
.muted { color: var(--cl-text-muted); }

/* ---- eyebrow / labels — the small tracked mono device ----
   Set in the muted role, matching how the brand page labels its own sections.
   Blue Deep is 3.8:1 on Fog, which is too thin for 12px type; the blue accent
   carries in the icons, the line motif and the links instead. */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--cl-text-muted); margin: 0;
}
.eyebrow .icon { color: var(--cl-accent); }
.monolabel {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cl-text-muted);
}

/* ---- headings ---- */
.h-display { font-size: clamp(42px, 6vw, 76px); font-weight: var(--weight-bold); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.h-page { font-size: clamp(34px, 5vw, 56px); font-weight: var(--weight-bold); letter-spacing: -0.028em; line-height: 1.05; margin: 0; }
.h-section { font-size: clamp(32px, 4vw, 44px); font-weight: var(--weight-bold); letter-spacing: -0.025em; line-height: 1.1; margin: 0; }
.text-accent { color: var(--cl-blue-deep); }
.on-navy .text-accent { color: var(--cl-blue); }

/* ============================================================
   Buttons — one solid, one outline, one ghost. Both flip with context.
   The amber module belongs to the mark; it is never a button.
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--control-md); padding: 0 22px;
  font-family: var(--font-body); font-size: var(--text-base); font-weight: var(--weight-semibold);
  line-height: 1; letter-spacing: 0.005em;
  border-radius: var(--radius-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none; text-align: center;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn--sm { height: var(--control-sm); padding: 0 15px; font-size: var(--text-sm); gap: 6px; }
.btn--lg { height: var(--control-lg); padding: 0 30px; font-size: var(--text-md); gap: 10px; }
.btn--full { width: 100%; }

/* .btn--primary and .btn--accent are the same solid button; the pages use
   both names and the brand only wants one. Hierarchy comes from size. */
.btn--primary, .btn--accent {
  background: var(--cl-solid-bg); color: var(--cl-solid-fg); border-color: var(--cl-solid-bg);
}
.btn--primary:hover, .btn--accent:hover {
  background: var(--cl-solid-bg-hover); border-color: var(--cl-solid-bg-hover); color: var(--cl-solid-fg);
}
.btn--secondary { background: transparent; color: var(--cl-text); border-color: var(--cl-border-strong); }
.btn--secondary:hover { border-color: var(--cl-text); color: var(--cl-text); }
.btn--ghost { background: transparent; color: var(--cl-text-body); }
.btn--ghost:hover { background: var(--cl-surface-well); color: var(--cl-text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: var(--cl-focus); }
.btn svg { display: block; flex-shrink: 0; }

.icon { display: block; flex-shrink: 0; }

/* ============================================================
   Header — white, always. A hairline appears once you scroll.
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--cl-white);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: var(--cl-border); }
.nav {
  max-width: var(--container-max); margin: 0 auto; padding: 0 32px;
  height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__link {
  padding: 9px 14px; font-family: var(--font-body); font-size: var(--text-base);
  font-weight: var(--weight-medium); color: var(--cl-text-body); border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--cl-navy); }
.nav__link[aria-current="page"] { color: var(--cl-navy); font-weight: var(--weight-semibold); }
.nav__cta { margin-left: 10px; }
.nav__toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--cl-border-strong); border-radius: var(--radius-md);
  color: var(--cl-navy); cursor: pointer;
}

/* ============================================================
   Hero — the Fog band under the white header, per the approved
   header comp. Interior pages use the same band at a smaller scale.
   ============================================================ */
.hero, .page-hero { position: relative; overflow: hidden; background: var(--cl-fog); }
.hero__inner { max-width: var(--container-max); margin: 0 auto; padding: 88px 32px 80px; }
.hero__col { max-width: 820px; }
.hero h1 { margin: 22px 0 0; }
.hero__sub { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--cl-ink-soft); margin: 26px 0 0; max-width: 58ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero__points { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 44px; }
.point { display: flex; gap: 12px; align-items: flex-start; }
.point__icon { color: var(--cl-blue-deep); margin-top: 2px; }
.on-navy .point__icon { color: var(--cl-blue); }
.point__t { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--cl-text); }
.point__s { font-size: var(--text-sm); color: var(--cl-text-muted); font-family: var(--font-mono); letter-spacing: .02em; }
.hero__divider { margin-top: 68px; max-width: 640px; }

.page-hero { padding: 76px 0 68px; }
.page-hero p { margin-top: 20px; }

/* ---- Broodkruimels: waar je bent, in de mono-labelstijl van de eyebrows. ---- */
.crumbs { margin: 0 0 20px; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--cl-text-muted);
}
.crumbs li { display: flex; align-items: center; gap: 9px; }
.crumbs li + li::before { content: "/"; opacity: 0.45; }
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover, .crumbs a:focus-visible { color: var(--cl-blue-deep); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--cl-text); }
.on-navy .crumbs a:hover, .on-navy .crumbs a:focus-visible { color: var(--cl-blue); }

/* signature resolving line */
.line-divider { display: block; width: 100%; height: 24px; overflow: visible; }
.line-straight { display: flex; align-items: center; width: 100%; }
.line-straight__bar { flex: 1; height: var(--line-weight); background: var(--cl-blue-deep); border-radius: var(--radius-full); }
.line-straight__dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--cl-amber-deep); margin-left: 9px; flex-shrink: 0; }
.on-navy .line-straight__bar { background: var(--cl-blue); }
.on-navy .line-straight__dot { background: var(--cl-amber); }

/* ---- section header row ---- */
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.section-head__title { max-width: 620px; }
.section-head h2 { margin: 18px 0 0; }
.section-head__meta { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--cl-text-muted); letter-spacing: .04em; }

/* ============================================================
   Cards — white, with a hairline. Never filled, never shadowed.
   ============================================================ */
.card {
  border-radius: var(--radius-lg); padding: var(--space-6);
  background: var(--cl-surface-raised);
  border: 1px solid var(--cl-border);
  color: var(--cl-text-body);
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
.card--interactive:hover { border-color: var(--cl-border-strong); transform: translateY(-2px); }
.section--fog .card, .card--light { background: var(--cl-white); }

.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; }
/* Two columns, deliberately — these cells hold running paragraphs and need the
   width. auto-fit would let a wide viewport pull them into three. */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.grid-2 > *, .grid-3 > * { min-width: 0; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---- badges & tags ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px;
  border-radius: var(--radius-full); font-family: var(--font-mono); font-size: var(--text-xs);
  font-weight: var(--weight-medium); letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
  color: var(--cl-text-muted); background: var(--cl-fog); border: 1px solid var(--cl-fog-deep);
}
/* Opaque fill, not a tint — a translucent badge sitting on an unknown surface
   is how contrast silently drifts. The blue reads in the border. */
.badge--primary { color: var(--cl-navy); background: var(--cl-fog); border-color: rgba(46, 126, 180, 0.34); }
.on-navy .badge { color: var(--cl-slate-light); background: rgba(255,255,255,0.06); border-color: var(--cl-border); }
.on-navy .badge--primary { color: var(--cl-blue); background: rgba(94,168,217,0.14); border-color: rgba(94,168,217,0.3); }
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: var(--radius-full); font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-medium); color: var(--cl-text-muted);
  background: transparent; border: 1px solid var(--cl-border);
}
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

/* ---- cases ---- */
.case__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.case h3 { font-size: var(--text-xl); line-height: 1.25; margin: 0 0 10px; }
.case p { font-size: var(--text-base); line-height: 1.6; color: var(--cl-text-body); margin: 0 0 22px; }
.case__stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; padding-top: 20px; border-top: 1px solid var(--cl-border); }
.case__stat-num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--cl-navy); letter-spacing: -0.03em; white-space: nowrap; }
.case__stat-label { font-size: var(--text-sm); color: var(--cl-text-muted); }
.case__icon { color: var(--cl-fog-edge); }

/* ---- werkwijze steps ---- */
.step__head { display: flex; align-items: center; justify-content: space-between; }
.step__icon { color: var(--cl-blue-deep); display: inline-flex; }
.step__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--cl-text-muted); letter-spacing: .08em; }
.step h3 { font-size: var(--text-xl); margin: 20px 0 8px; }
.step p { font-size: var(--text-base); line-height: 1.6; color: var(--cl-text-body); margin: 0; }

.idea-panel {
  margin-top: 40px; background: var(--cl-fog);
  border-radius: var(--radius-lg); padding: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: 1fr 1.3fr; gap: 44px; align-items: center;
}
.idea-panel__big { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: 1.2; letter-spacing: -0.02em; margin: 12px 0 0; color: var(--cl-navy); }
.beforeafter { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.beforeafter svg { display: block; width: 100%; }
.beforeafter__labels { display: flex; justify-content: space-between; gap: 12px; }
.beforeafter__labels .monolabel.after { color: var(--cl-navy); font-weight: var(--weight-semibold); }

/* ============================================================
   Forms
   ============================================================ */
.intake-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.intake__contacts { display: flex; flex-direction: column; gap: 16px; }
.intake__contact { display: flex; align-items: center; gap: 12px; color: var(--cl-text-body); }
.intake__contact span { color: var(--cl-blue-deep); display: inline-flex; }
.on-navy .intake__contact span { color: var(--cl-blue); }

/* A well, not a floating card. Fog on white pages; white when it sits on a Fog band. */
.form-card { background: var(--cl-fog); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 34px; }
.section--fog .form-card { background: var(--cl-white); border-color: var(--cl-border); }
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; width: 100%; }
.field > label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cl-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--cl-navy);
  background: var(--cl-white); border: 1px solid var(--cl-fog-edge); border-radius: var(--radius-md);
  outline: none; box-sizing: border-box; height: var(--control-md); padding: 0 14px;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
/* Placeholders carry the same 4.5:1 floor as body text. */
.field input::placeholder, .field textarea::placeholder { color: var(--cl-text-muted); opacity: 1; }
.field textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--cl-blue-deep); box-shadow: var(--cl-focus); }
.field select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2353697B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
}
.checkbox { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; font-family: var(--font-body); font-size: var(--text-base); color: var(--cl-text-body); line-height: 1.45; }
.checkbox input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--cl-navy); margin: 0; cursor: pointer; }
.form__success { padding: 32px 8px; text-align: center; }
.form__success-badge { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: var(--radius-full); background: rgba(46, 125, 91, 0.12); color: var(--cl-success); margin-bottom: 20px; }
.form__success h3 { font-size: var(--text-2xl); }
.form__inline-msg { color: var(--cl-danger); font-size: var(--text-sm); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Footer — the navy anchor. Sits flush against the navy CTA above
   it so the page resolves into one dark block at the foot.
   ============================================================ */
/* background/colour come from the .on-navy context block above */
.site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 64px 32px 44px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 44px; }
.footer-brand p { font-size: var(--text-base); color: var(--cl-slate-light); margin: 20px 0 0; max-width: 30ch; line-height: 1.6; }
.footer-brand__tag { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cl-blue); margin: 22px 0 0; }
.footer-col__h { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-base); letter-spacing: -0.01em; color: var(--cl-white); margin-bottom: 18px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col span { color: var(--cl-slate-light); font-size: var(--text-base); }
.footer-col a:hover { color: var(--cl-white); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--cl-border); flex-wrap: wrap; gap: 12px; }
.footer-bottom span, .footer-bottom a { font-size: var(--text-sm); color: var(--cl-slate-light); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--cl-border); }
.faq__item:first-child { border-top: 1px solid var(--cl-border); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 24px 0; background: transparent; border: 0; cursor: pointer; text-align: left;
  color: var(--cl-text); font-family: var(--font-heading); font-size: var(--text-lg);
  font-weight: var(--weight-semibold); letter-spacing: -0.012em;
}
.faq__q .icon { color: var(--cl-blue-deep); transition: transform var(--dur-base) var(--ease-standard); }
.on-navy .faq__q .icon { color: var(--cl-blue); }
.faq__q[aria-expanded="true"] .icon { transform: rotate(45deg); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-base) var(--ease-standard); }
.faq__a-inner { padding: 0 0 24px; color: var(--cl-text-body); line-height: 1.65; max-width: 70ch; }

/* ============================================================
   Proof strip — Fog wells on the white page.
   ============================================================ */
.proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; margin-top: 48px; }
.proof__item { text-align: left; padding: 26px; border-radius: var(--radius-lg); background: var(--cl-fog); }
.proof__num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--cl-navy); letter-spacing: -0.02em; }
.proof__label { font-size: var(--text-sm); color: var(--cl-text-muted); margin-top: 8px; line-height: 1.5; }
.band .proof__item { background: transparent; padding: 20px 0 0; border-radius: 0; border-top: 1px solid var(--cl-fog-edge); }

/* ============================================================
   ROI calculator
   ============================================================ */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.roi__panel { background: var(--cl-white); border: 1px solid var(--cl-border); border-radius: var(--radius-lg); padding: 34px; }
.roi__result { background: var(--cl-fog); border-radius: var(--radius-lg); padding: 34px; position: sticky; top: 100px; }
.roi__field { margin-bottom: 24px; }
.roi__field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cl-text-muted); margin-bottom: 10px; }
.roi__field .val { color: var(--cl-navy); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.roi__field input[type="range"] { width: 100%; accent-color: var(--cl-blue-deep); }
.roi__field input[type="number"] {
  width: 100%; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--cl-navy); background: var(--cl-white); border: 1px solid var(--cl-fog-edge);
  border-radius: var(--radius-md); height: var(--control-md); padding: 0 14px; outline: none;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.roi__field input[type="number"]:focus { border-color: var(--cl-blue-deep); box-shadow: var(--cl-focus); }
.roi__result .field input { background: var(--cl-white); }
.roi__big { font-family: var(--font-mono); font-size: clamp(38px, 6vw, 56px); font-weight: var(--weight-semibold); color: var(--cl-navy); letter-spacing: -0.03em; line-height: 1; }
.roi__big-label { font-size: var(--text-sm); color: var(--cl-text-muted); margin-top: 10px; }
.roi__secondary { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--cl-fog-edge); display: flex; flex-direction: column; gap: 14px; }
.roi__metric { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.roi__metric .num { font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--cl-navy); }
.roi__metric .lbl { font-size: var(--text-sm); color: var(--cl-text-muted); }
.roi__disclaimer { font-size: var(--text-sm); color: var(--cl-text-muted); margin-top: 20px; line-height: 1.55; }
.roi__capture { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--cl-fog-edge); }

/* ============================================================
   Callout — a Fog well with a full hairline. No side stripe.
   ============================================================ */
.callout {
  display: flex; gap: 15px; padding: 18px 20px;
  background: var(--cl-fog); border: 1px solid var(--cl-fog-deep);
  border-radius: var(--radius-md); margin: 26px 0;
}
/* Fog on Fog has no edge — flip to white wherever the callout sits on a band. */
.section--fog .callout, .hero .callout, .page-hero .callout, .band .callout {
  background: var(--cl-white); border-color: var(--cl-border);
}
.callout__icon { flex-shrink: 0; color: var(--cl-blue-deep); display: inline-flex; margin-top: 1px; }
.callout--warning .callout__icon { color: var(--cl-amber-deep); }
.callout__body { display: flex; flex-direction: column; gap: 5px; }
.callout__title { font-family: var(--font-heading); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--cl-navy); letter-spacing: -0.012em; }
.callout__text { font-size: var(--text-base); color: var(--cl-ink-soft); line-height: var(--leading-normal); }
/* On navy the callout is a well, not a light card dropped onto the dark band. */
.on-navy .callout { background: var(--cl-surface-well); border-color: var(--cl-border-strong); }
.on-navy .callout__title { color: var(--cl-text); }
.on-navy .callout__text { color: var(--cl-text-body); }
.on-navy .callout__icon { color: var(--cl-blue); }
.on-navy .callout--warning .callout__icon { color: var(--cl-amber); }

/* ============================================================
   Prose
   ============================================================ */
.prose { max-width: 70ch; }
.prose h2 { font-family: var(--font-heading); font-size: var(--text-2xl); letter-spacing: -0.02em; margin: 44px 0 14px; }
.prose h3 { font-size: var(--text-xl); margin: 30px 0 8px; }
.prose p, .prose li { color: var(--cl-text-body); line-height: 1.7; font-size: var(--text-base); }
.prose ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.prose strong { color: var(--cl-navy); font-weight: var(--weight-semibold); }
.prose a { text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--cl-text-muted); }

/* ============================================================
   Feature list — the icon sits inline in Clarity Blue Deep.
   No tinted rounded container; that reads as template.
   ============================================================ */
.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature__icon { color: var(--cl-blue-deep); flex-shrink: 0; display: inline-flex; margin-top: 3px; }
.on-navy .feature__icon { color: var(--cl-blue); }
.feature h3 { font-size: var(--text-lg); margin: 0 0 8px; }
.feature p { font-size: var(--text-base); color: var(--cl-text-body); line-height: 1.6; margin: 0; }

/* ---- CTA band ---- */
.cta-band { text-align: center; max-width: 640px; margin: 0 auto; }
.cta-band h2 { margin: 18px 0 0; }
.cta-band p { margin: 18px auto 30px; max-width: 480px; }
.cta-band .btn { margin: 0 auto; }

/* ============================================================
   Reveal — enhances an already-visible default. Content is only
   hidden where scripting is genuinely available to reveal it.
   ============================================================ */
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ============================================================
   Scroll line motif (homepage). The layer sits above section
   backgrounds but below section content.
   ============================================================ */
#main { position: relative; isolation: isolate; }
/* No blanket opacity on the layer — the amber terminus is the page's single
   accent and must land at full strength. Damping is per element instead. */
.scroll-line { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.scroll-line__svg { display: block; width: 100%; height: 100%; }
#main .hero__inner, #main > .section > .container, #main > .page-hero > .container { position: relative; z-index: 1; }

/* ---- 404 ---- */
.notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 96px 32px; }
.notfound__code { font-family: var(--font-mono); font-size: clamp(64px, 12vw, 120px); font-weight: var(--weight-semibold); color: var(--cl-blue-deep); line-height: 1; }

/* ---- calendly ---- */
.calendly-inline-widget { min-width: 0; height: 680px; border-radius: var(--radius-lg); overflow: hidden; }
.calendly-placeholder { background: var(--cl-fog); border: 1px dashed var(--cl-fog-edge); border-radius: var(--radius-lg); padding: 44px 34px; text-align: center; color: var(--cl-text-muted); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  .intake-grid, .roi, .idea-panel { grid-template-columns: 1fr; gap: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .roi__result { position: static; }
  .nav__links { display: none; }
  .nav__links.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px;
    position: absolute; top: 76px; left: 0; right: 0;
    background: var(--cl-white); border-bottom: 1px solid var(--cl-border);
    box-shadow: var(--shadow-overlay);
    padding: 16px 32px 24px;
  }
  .nav__links.is-open .nav__link { padding: 12px 8px; font-size: var(--text-md); }
  .nav__links.is-open .nav__cta { margin-left: 0; margin-top: 10px; }
  .nav__toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .container, .nav, .hero__inner, .site-footer__inner { padding-left: 20px; padding-right: 20px; }
  .section { padding-top: 68px; padding-bottom: 68px; }
  .section--navy { padding-top: 76px; padding-bottom: 76px; }
  .hero__inner { padding: 64px 20px 60px; }
  .page-hero { padding: 56px 0 52px; }
  .form__row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-card, .roi__panel, .roi__result { padding: 24px; }
  .idea-panel { padding: 26px; }
  .footer-bottom { justify-content: flex-start; }
  .cl-lockup { --H: 24px; }
}

/* ============================================================
   Browser surfaces — the parts we did not draw still carry the
   brand. Caret, scrollbar and tabular figures ship with defaults
   that belong to no design system.
   ============================================================ */
input, textarea, select { caret-color: var(--cl-blue-deep); }
* { scrollbar-color: var(--cl-fog-edge) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--cl-fog-edge); border-radius: var(--radius-full);
  border: 3px solid var(--cl-white);
}
*::-webkit-scrollbar-thumb:hover { background: var(--cl-slate-light); }
.on-navy *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.24); border-color: var(--cl-navy); }

/* ============================================================
   ClearCodes — the product pages carry three components the
   service pages do not need: the pipeline, the spec table and
   the response sample. All three exist because the product is
   a mechanism, and a mechanism is worth drawing once properly.
   ============================================================ */

/* ---- Pipeline. The brand line runs left to right through four
        stations and resolves in the amber terminus, exactly as the
        scroll motif does. It stacks to a vertical rail below 760px
        so it never shrinks into an illegible strip. ---- */
.pipe {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0;
}
.pipe__node { position: relative; padding: 0 18px 0 0; }
/* the connector: a hairline rail from this node's glyph to the next */
.pipe__node::after {
  content: ""; position: absolute; left: 44px; right: -2px; top: 21px;
  height: var(--line-weight); background: var(--cl-blue-deep); border-radius: var(--radius-full);
}
.pipe__node:last-child::after { display: none; }
.pipe__glyph {
  position: relative; z-index: 1;
  width: 44px; height: 44px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cl-white); border: 1px solid var(--cl-border-strong);
  color: var(--cl-blue-deep);
}
.pipe__node--end .pipe__glyph { border-color: var(--cl-amber-deep); color: var(--cl-amber-deep); }
.pipe__t {
  display: block; margin-top: 18px;
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-md); letter-spacing: -0.015em; color: var(--cl-navy);
}
.pipe__s { display: block; margin-top: 6px; font-size: var(--text-sm); line-height: 1.55; color: var(--cl-text-muted); max-width: 26ch; }
.band .pipe__glyph { background: var(--cl-white); }
@media (max-width: 760px) {
  .pipe { grid-template-columns: 1fr; gap: 26px; }
  .pipe__node { padding: 0 0 0 62px; }
  .pipe__node::after {
    left: 21px; right: auto; top: 44px; bottom: -26px; height: auto; width: var(--line-weight);
  }
  .pipe__glyph { position: absolute; left: 0; top: 0; }
  .pipe__t { margin-top: 2px; }
  .pipe__s { max-width: none; }
}

/* ---- Spec table. Measured figures, so the numerals are tabular
        and the rules are hairlines rather than boxes. ---- */
.spec-table { width: 100%; border-collapse: collapse; margin-top: 26px; }
.spec-table caption {
  text-align: left; font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--cl-text-muted); padding-bottom: 14px;
}
.spec-table th, .spec-table td {
  text-align: left; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--cl-border); font-size: var(--text-base);
}
.spec-table thead th {
  font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-sm); color: var(--cl-text-muted);
  letter-spacing: 0.01em; border-bottom-color: var(--cl-border-strong);
}
.spec-table tbody th { font-family: var(--font-body); font-weight: var(--weight-medium); color: var(--cl-text); }
.spec-table td { color: var(--cl-text-body); }
.spec-table .num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold); color: var(--cl-text);
  letter-spacing: -0.02em; white-space: nowrap;
}
.spec-table tbody tr:last-child th, .spec-table tbody tr:last-child td { border-bottom: none; }
.table-scroll { overflow-x: auto; }

/* ---- Response sample. Mono here is code, not costume. ---- */
.sample {
  margin: 0; padding: 22px 24px; overflow-x: auto;
  background: var(--cl-navy); border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75;
  color: #D5E0E8; tab-size: 2;
}
.sample .k { color: var(--cl-blue); }
.sample .s { color: var(--cl-amber); }
.sample .b { color: var(--cl-slate-light); }
.band .sample, .section--fog .sample { box-shadow: none; }

/* ---- Price. One line, stated plainly, no card around it. ---- */
.price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px;
  padding-bottom: 20px; border-bottom: 1px solid var(--cl-border-strong);
}
.price__num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(34px, 4.5vw, 48px); font-weight: var(--weight-semibold);
  letter-spacing: -0.04em; color: var(--cl-navy); line-height: 1;
}
.on-navy .price__num { color: var(--cl-white); }
.price__unit { font-size: var(--text-lg); color: var(--cl-text-muted); }

/* ---- Fact list — a definition list, not another card grid. ---- */
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 32px 28px; margin: 0; }
.facts > div { border-top: 1px solid var(--cl-border); padding-top: 18px; }
.facts dt {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--cl-text-muted);
}
.facts dd {
  margin: 10px 0 0; font-family: var(--font-heading); font-weight: var(--weight-semibold);
  font-size: var(--text-lg); letter-spacing: -0.015em; color: var(--cl-text); line-height: 1.3;
}
.facts p { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.6; color: var(--cl-text-muted); }
/* Zes items vallen met auto-fit in 4+2 en laten een rafelige tweede rij achter.
   Deze modifier dwingt 3+3 af zodra er ruimte voor is. */
@media (min-width: 900px) { .facts--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---- Product strip on the homepage: the mark, the claim, the route. ---- */
.product-strip { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .product-strip { grid-template-columns: 1fr; gap: 34px; } }

/* ============================================================
   Gecodeerde foto — het showcase-blok
   Eén foto met genummerde punten op de objecten, en daaronder een
   legenda met de codes die ClearCodes eruit haalt.

   Waarom punten plus legenda, en geen labels op de foto zelf: labels
   over een foto vallen op een telefoon over elkaar heen. De punten
   staan altijd goed, de legenda leest altijd, en een schermlezer
   krijgt de hele lijst.

   De codes zijn echt en komen uit data/catalog.seed.csv van de API.
   Verzin er nooit een bij.
   Toegevoegd 9 september 2026.
   ============================================================ */
.coded { margin: 0; }

/* overflow: hidden hoorde hier, maar knipte de tooltip af zodra een punt
   dicht bij de rand stond. De afronding zit nu op de foto zelf, zodat het
   kader niets meer wegsnijdt. Gerepareerd 9 september 2026. */
.coded__frame { position: relative; border-radius: 12px; }
.coded__frame img { border-radius: 12px; }
.coded__frame img { display: block; width: 100%; height: auto; }

.coded__dot {
  position: absolute;
  width: 30px; height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--cl-amber-deep);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 0.8125rem; font-weight: 600;
  display: grid; place-items: center;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 2px 8px rgba(18, 38, 58, 0.45);
}

.coded__legend {
  display: grid; gap: 0.75rem;
  margin: 1.25rem 0 0; padding: 0;
  list-style: none;
}
@media (min-width: 40rem) { .coded__legend { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } }
@media (min-width: 64rem) { .coded__legend { grid-template-columns: repeat(3, 1fr); } }

.coded__item {
  display: grid; grid-template-columns: 26px 1fr; gap: 0.65rem;
  align-items: start;
  padding-top: 0.7rem;
  border-top: 1px solid var(--cl-border);
}
.coded__n {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--cl-amber-deep);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--cl-border-strong);
  display: grid; place-items: center;
}
.coded__naam { display: block; font-weight: 600; color: var(--cl-text); font-size: 0.9375rem; }
.coded__codes {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--cl-text-muted); letter-spacing: 0.01em;
}

/* ============================================================
   Tijdlijn — de werkwijze in drie stappen
   Vervangt de drie losse kaarten op diensten.html. Eén doorlopende
   lijn in de merkkleur, met genummerde knopen erop.

   Liggend vanaf 52rem, staand daaronder. De lijn is een pseudo-element
   zodat er geen extra markup voor nodig is.
   Toegevoegd 9 september 2026.
   ============================================================ */
.tl { list-style: none; margin: 40px 0 0; padding: 0; position: relative; }

/* Staand: lijn links, knopen erop. */
.tl::before {
  content: ""; position: absolute;
  left: 17px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--cl-blue-deep), var(--cl-amber-deep));
  border-radius: 2px;
}
.tl__item { position: relative; padding: 0 0 32px 52px; }
.tl__item:last-child { padding-bottom: 0; }
.tl__n {
  position: absolute; left: 0; top: 0;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--cl-surface); color: var(--cl-blue-deep);
  border: 2px solid var(--cl-blue-deep);
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 600;
  display: grid; place-items: center;
}
.tl__item:last-child .tl__n { color: var(--cl-amber-deep); border-color: var(--cl-amber-deep); }
.tl__item h3 { margin: 4px 0 6px; }
.tl__item p { margin: 0; color: var(--cl-text-body); }

/* Liggend vanaf 52rem: lijn boven, knopen eronder. */
@media (min-width: 52rem) {
  .tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
  /* De lijn loopt van knoop 01 tot knoop 03, niet door tot de paginarand.
     Drie gelijke kolommen, dus de laatste knoop staat op 2/3 plus 18px. */
  .tl::before { left: 18px; right: calc(33.333% - 18px); top: 17px; bottom: auto; width: auto; height: 2px;
    background: linear-gradient(90deg, var(--cl-blue-deep), var(--cl-amber-deep)); }
  .tl__item { padding: 56px 0 0 0; }
  .tl__item:last-child { padding-bottom: 0; }
}

/* Tooltip op de gecodeerde foto. Verschijnt bij hover en bij toetsenbordfocus,
   zodat het ook zonder muis werkt. De punt is daarom een button, geen span. */
.coded__dot { border: 0; cursor: help; padding: 0; font: inherit; z-index: 2; }
.coded__dot:hover, .coded__dot:focus-visible { background: var(--cl-navy); }

.coded__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: var(--cl-navy); color: #fff;
  padding: 0.5rem 0.7rem; border-radius: 8px;
  width: max-content; max-width: 15rem;
  text-align: left; line-height: 1.35;
  box-shadow: 0 4px 16px rgba(18, 38, 58, 0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
  pointer-events: none; z-index: 30;
}
.coded__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: var(--cl-navy);
}
.coded__dot:hover .coded__tip,
.coded__dot:focus-visible .coded__tip { opacity: 1; visibility: visible; }

.coded__tip b { display: block; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; }
.coded__tip span { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 0.6875rem; color: var(--cl-slate-light); }

/* Punten dicht bij de bovenrand klappen de tooltip naar onderen. */
.coded__dot--laag .coded__tip { bottom: auto; top: calc(100% + 10px); }
.coded__dot--laag .coded__tip::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--cl-navy); }

/* ============================================================
   Hero met foto op de lichte pagina's
   De homepage voelde te wit. Deze modifier zet er een foto achter
   met een navy waas eroverheen, zodat de tekst wit kan worden.

   object-fit: cover snijdt bij in plaats van uit te rekken. Nooit
   width en height allebei op 100% zonder object-fit; dan trekt de
   foto scheef, en dat is precies wat er eerder misging.
   Toegevoegd 9 september 2026.
   ============================================================ */
.hero--foto { position: relative; overflow: hidden; isolation: isolate; }

.hero--foto .hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero--foto .hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 58%;
  display: block;
}
.hero--foto .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,27,41,0.96) 0%, rgba(12,27,41,0.88) 48%, rgba(12,27,41,0.58) 100%),
    linear-gradient(180deg, rgba(18,38,58,0.30) 0%, rgba(18,38,58,0.72) 100%);
}

/* Tekstkleuren binnen de fotohero. Alleen hier, de rest van de pagina blijft licht. */
.hero--foto { color: #DCE7EF; }
.hero--foto .h-display,
.hero--foto .point__t { color: #fff; }
.hero--foto .eyebrow,
.hero--foto .point__s { color: var(--cl-slate-light); }
.hero--foto .hero__sub { color: #E8F0F6; }
.hero--foto .text-accent { color: var(--cl-amber); }
.hero--foto .point__icon { color: var(--cl-amber); }
.hero--foto .btn--secondary {
  border-color: rgba(255,255,255,0.4); color: #fff; background: transparent;
}
.hero--foto .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
/* De golvende scheidingslijn onderaan de hero heeft op een foto geen functie meer. */
.hero--foto .hero__divider { display: none; }

/* De hoofdknop is op lichte pagina's navy. In de fotohero staat hij op een
   navy waas en verdwijnt hij. Hier amber, net als op clearcodes.nl. */
.hero--foto .btn--accent,
.hero--foto .btn--primary {
  background: var(--cl-amber); color: var(--cl-navy); border-color: transparent;
}
.hero--foto .btn--accent:hover,
.hero--foto .btn--primary:hover { background: #F7BC7E; }

/* De fotohero ook voor .page-hero (cases, over ons). Zelfde behandeling als
   .hero--foto op de homepage; de tokens staan daar. */
.page-hero.hero--foto { position: relative; overflow: hidden; isolation: isolate; }
.page-hero.hero--foto .hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero.hero--foto .hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 55%; }
.page-hero.hero--foto .hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(12,27,41,0.96) 0%, rgba(12,27,41,0.88) 48%, rgba(12,27,41,0.58) 100%),
    linear-gradient(180deg, rgba(18,38,58,0.30) 0%, rgba(18,38,58,0.72) 100%);
}
.page-hero.hero--foto .h-page { color: #fff; }
.page-hero.hero--foto .crumbs, .page-hero.hero--foto .crumbs a { color: var(--cl-slate-light); }
.page-hero.hero--foto .crumbs a:hover { color: #fff; }

/* Het kruimelpad staat in styles.css op een donkere tekstkleur. Op een fotohero
   valt het weg. Hier lichter, inclusief het niet-klikbare laatste item. */
.hero--foto .crumbs,
.hero--foto .crumbs a,
.hero--foto .crumbs span,
.hero--foto .crumbs li { color: var(--cl-slate-light); }
.hero--foto .crumbs a:hover { color: #fff; }
.hero--foto .crumbs [aria-current="page"] { color: #E8F0F6; }



/* ============================================================
   Gedempte kopbalk
   De kopbalk was helder wit en de fotohero eronder navy. Die overgang
   sneed het scherm doormidden. De balk staat nu op Fog in plaats van
   wit: nog steeds licht, maar de sprong is kleiner.

   Aangezet met class="gedempte-kop" op <body>, op de vier pagina's met
   een fotohero. Toegevoegd 9 september 2026.
   ============================================================ */
body.gedempte-kop .site-header {
  background: rgba(226, 233, 239, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--cl-fog-edge);
}

/* ============================================================
   Voor wie — de sectorband
   Alle vier de sector-sites die we bekeken hebben (Insert, ReuseMate,
   Dusseldorp, BOOT) zeggen direct onder de hero voor wie ze er zijn.
   Dit is onze versie: vier afnemers op een rij, met daaronder wat we
   voor ze bouwen.
   Toegevoegd 9 september 2026. Achtergrond in TOON.md.
   ============================================================ */
.voorwie { display: grid; gap: 1px; margin-top: 28px; background: var(--cl-border); border: 1px solid var(--cl-border); border-radius: 12px; overflow: hidden; }
@media (min-width: 40rem) { .voorwie { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .voorwie { grid-template-columns: repeat(4, 1fr); } }

.voorwie__item { background: var(--cl-surface); padding: 1.1rem 1.25rem; }
.voorwie__n {
  display: block; font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--cl-amber-deep); margin-bottom: 0.45rem;
}
.voorwie__t { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--cl-text); margin-bottom: 0.2rem; }
.voorwie__s { display: block; font-size: 0.875rem; color: var(--cl-text-muted); line-height: 1.45; }