/* BRMO Studio — production stylesheet.
   Huisstijl "Ink & Teal", 15 september 2026: papier draagt de pagina,
   Mist scheidt, Ink verankert, en er is één accent dat spaarzaam verschijnt.
   Lettertypes staan zelf in /fonts; er wordt niets extern geladen. */

/* ============ Fonts ============ */
/* Archivo vervangt IBM Plex Sans. Omgezet 15 september 2026 bij de overgang
   naar BRMO Studio: de huisstijl schrijft Archivo voor als display- en
   UI-schrift. Archivo is een variabel lettertype, dus twee bestanden dekken
   het hele gewichtsbereik 100-900 — waar Plex Sans er tien nodig had.
   IBM Plex Mono blijft; die draagt de kleine tracked labels. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-var-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:"Archivo";font-style:normal;font-weight:100 900;font-display:swap;src:url("fonts/archivo-var-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 Mono — alleen voor de kleine tracked labels (eyebrows, cijfers). */
@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 — kleur (BRMO Studio, schema "Ink & Teal")
   Papier draagt de pagina's, Mist scheidt, Ink verankert, en het accent
   verschijnt hooguit één keer per beeld. Streefverhouding uit de huisstijl:
   paper 70% · ink 16% · neutraal 9% · accent 5%.
   ============================================================ */
:root {
  /* ---- De zeven uit de huisstijl ---- */
  --brmo-ink:    #10161C;   /* tekst, donkere panelen, primaire knop */
  --brmo-accent: #0E7C6B;   /* één accentmoment: links, de ene CTA */
  --brmo-tint:   #E7F1EF;   /* rustige accentvlakken, tags, focusring */
  --brmo-paper:  #FFFFFF;   /* hoofdoppervlak — ~70% van elke pagina */
  --brmo-mist:   #F5F6F7;   /* tweede oppervlak, hover-vulling */
  --brmo-line:   #E3E6E9;   /* 1px randen en lijnen */
  --brmo-gray:   #6C737B;   /* secundaire tekst, bijschriften */

  /* ---- Afgeleid ----
     De huisstijl geeft zeven waarden; een website heeft er meer nodig.
     Alles hieronder is een lichtheidstrap op exact dezelfde tint als het
     token waar het van afstamt — geen nieuwe kleurfamilies. Elke waarde is
     gekozen op contrast, niet op gevoel; de gemeten verhouding staat erbij. */

  /* Accent #0E7C6B haalt op ink maar 3,57:1 en mag daar dus geen tekst zijn.
     Dit is hetzelfde accent, lichter en iets minder verzadigd: 7,59:1. */
  --brmo-accent-on-ink: #46B9A7;
  /* Accent op tint haalt 4,43:1 — net te weinig. Deze donkerdere trap haalt
     5,72:1 op tint en 6,59:1 op papier. Ook de hover-kleur van links. */
  --brmo-accent-deep:   #0C695B;

  /* Gray #6C737B is 4,80:1 op papier maar zakt naar 4,44:1 op mist en
     4,17:1 op tint, en juist dáár staat veel secundaire tekst. Deze trap
     haalt overal AA: papier 5,40:1 · mist 4,99:1 · tint 4,69:1. */
  --brmo-gray-deep:    #646B72;
  /* Secundaire tekst op ink: 7,15:1. */
  --brmo-gray-on-ink:  #9DA3A9;
  /* Lopende tekst op ink. */
  --brmo-text-on-ink:  #DDE1E5;

  /* Line #E3E6E9 is 1,28:1 — prima voor een haarlijn tussen secties of om
     een kaart, want dat zijn geen bedieningselementen. Een invoerveld is dat
     wél: WCAG 1.4.11 wil daar 3:1. Vandaar deze tweede lijnkleur, alleen
     voor randen van formuliervelden en outline-knoppen. 3,01:1 op papier. */
  --brmo-line-strong:  #8A96A3;

  /* ---- Status ----
     Geslaagd is het merkaccent: teal ís de bevestigingskleur, dat scheelt een
     kleur die nergens anders voorkomt. Rood blijft apart — een foutmelding
     moet zich juist niet als huisstijl voordoen. */
  --brmo-success: var(--brmo-accent-deep);
  --brmo-danger:  #B4443A;   /* 5,49:1 op papier */

  /* ============ Rollen — licht oppervlak (standaard) ============ */
  --brmo-surface:        var(--brmo-paper);
  --brmo-surface-raised: var(--brmo-paper);
  --brmo-surface-well:   var(--brmo-mist);
  --brmo-text:           var(--brmo-ink);
  --brmo-text-body:      var(--brmo-ink);
  --brmo-text-muted:     var(--brmo-gray-deep);
  --brmo-link:           var(--brmo-accent);
  --brmo-accent-role:    var(--brmo-accent);
  --brmo-border:         var(--brmo-line);
  --brmo-border-strong:  var(--brmo-line-strong);
  --brmo-logo:           var(--brmo-ink);
  --brmo-logo-dot:       var(--brmo-accent);
  --brmo-solid-bg:       var(--brmo-ink);        /* de ene massieve knop */
  --brmo-solid-fg:       var(--brmo-paper);
  --brmo-solid-bg-hover: #232B33;
  --brmo-focus:          0 0 0 3px var(--brmo-tint);
}

/* De ink-context. Voor donkere secties, de voettekst en de ClearCodes-pagina.
   Elke rol hierboven draait om; verder verandert er niets. De voettekst kiest
   er per element voor, zodat het lockup daar wit wordt in plaats van
   ink-op-ink. */
.on-ink, .site-footer {
  --brmo-surface:        var(--brmo-ink);
  --brmo-surface-raised: rgba(255, 255, 255, 0.05);
  --brmo-surface-well:   rgba(255, 255, 255, 0.05);
  --brmo-text:           var(--brmo-paper);
  --brmo-text-body:      var(--brmo-text-on-ink);
  --brmo-text-muted:     var(--brmo-gray-on-ink);
  --brmo-link:           var(--brmo-accent-on-ink);
  --brmo-accent-role:    var(--brmo-accent-on-ink);
  --brmo-border:         rgba(255, 255, 255, 0.14);
  --brmo-border-strong:  rgba(255, 255, 255, 0.34);
  --brmo-logo:           var(--brmo-paper);
  --brmo-logo-dot:       var(--brmo-accent-on-ink);
  --brmo-solid-bg:       var(--brmo-paper);
  --brmo-solid-fg:       var(--brmo-ink);
  --brmo-solid-bg-hover: var(--brmo-mist);
  --brmo-focus:          0 0 0 3px rgba(70, 185, 167, 0.45);

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

/* ============================================================
   Typografie-tokens
     Archivo 600/700 — paginakoppen, sectiekoppen, subkoppen, het woordmerk.
     Archivo 400/500 — alle lopende tekst, UI, formulieren, knoppen.
     IBM Plex Mono — het kleine tracked label (eyebrows, cijfers).
   ============================================================ */
:root {
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-heading: 'Archivo', system-ui, sans-serif;
  --font-body: 'Archivo', 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.02em;
  /* De huisstijl zet labels op 0,14em. Ze staan op 12px in plaats van de
     voorgeschreven 11px: op 11px wordt een tracked hoofdletterlabel op een
     telefoon slecht leesbaar, en het verschil is in het merkbeeld niet te
     zien. Bewuste afwijking, 15 september 2026. */
  --tracking-label: 0.14em;
}

/* ============ 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;

  /* Hoeken. De huisstijl schrijft 2px voor, bewust bijna vierkant: knoppen,
     kaarten, velden en tags allemaal gelijk. De vier trappen blijven als
     naam bestaan zodat de rest van het blad niet herschreven hoeft, maar ze
     wijzen nu alle vier naar dezelfde waarde.
     --radius-full blijft 999px en is er alleen nog voor dingen die écht rond
     zijn: de punt in een lijn en de ronde bevestigingsbadge. */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-full: 999px;

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

/* ============ Elevation & motion ============
   Op papier leest hoogte als een haarlijn, niet als een slagschaduw.
   Shadows appear only where something genuinely floats (the open mobile nav). */
:root {
  --shadow-overlay: 0 8px 24px rgba(16, 22, 28, 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(--brmo-text-body);
  background: var(--brmo-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(--brmo-link); outline-offset: 2px; }

/* Paginakoppen — Archivo 600, vanaf 32px. */
h1, h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--brmo-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(--brmo-text);
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a {
  color: var(--brmo-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--brmo-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(14, 124, 107, 0.18); color: var(--brmo-ink); }
.on-ink ::selection { background: rgba(70, 185, 167, 0.32); color: var(--brmo-paper); }

@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(--brmo-ink); color: var(--brmo-paper);
  padding: 10px 16px; border-radius: var(--radius-md); font-weight: var(--weight-semibold);
}
.skip-link:focus { left: 16px; top: 16px; color: var(--brmo-paper); }

/* ============================================================
   The lockup — a mark SVG plus a styled span, so the word stays
   selectable and translatable. One variable, --H, drives everything.
   ============================================================ */
/* Het BRMO Studio-lockup. Gestapeld en links uitgelijnd: BRMO in Archivo 700
   met een vierkant accentpuntje, STUDIOS eronder met ruime letterafstand.
   Het is markup en geen plaatje, zodat het woord selecteerbaar en vertaalbaar
   blijft. Alles hangt aan één variabele — --lockup-size — dus zet lettergrootte
   en tussenruimte nooit met de hand. De verhoudingen komen uit de huisstijl en
   zijn daar opgemeten; niet opnieuw op het oog bepalen. */
.brmo-logo {
  --lockup-size: 34px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(var(--lockup-size) * 0.16);
  color: var(--brmo-logo);
  text-decoration: none;
  /* Vrije ruimte rondom: één kapitaalhoogte. Daar komt niets in. */
  padding: calc(var(--lockup-size) * 0.20) 0;
}
.brmo-logo:hover { color: var(--brmo-logo); }
.brmo-logo__row {
  display: flex;
  align-items: flex-end;
  font-family: var(--font-display);
  font-size: calc(var(--lockup-size) * 0.58);
  line-height: 0.73;
  letter-spacing: 0.02em;
}
.brmo-logo__word { font-weight: var(--weight-bold); color: var(--brmo-logo); }
/* Een vierkantje, geen punt-teken: een echte punt verschilt per lettertype. */
.brmo-logo__dot {
  display: block; flex: none;
  width: 0.2em; height: 0.2em;
  background: var(--brmo-logo-dot);
  margin-left: 0.07em;
}
.brmo-logo__sub {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  font-size: max(10px, calc(var(--lockup-size) * 0.30));
  line-height: 1;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brmo-text-muted);
  margin-left: 0.03em;
  /* haalt de letterafstand achter de laatste S weer weg, zodat het blok
     links én rechts netjes uitlijnt */
  margin-right: -0.26em;
}
/* Op ink zijn woordmerk én STUDIOS zuiver wit; alleen het puntje houdt kleur. */
.on-ink .brmo-logo__sub, .site-footer .brmo-logo__sub { color: var(--brmo-paper); }

/* ============================================================
   Layout
   ============================================================ */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: 32px; padding-right: 32px; }
/* 104px is de sectiehoogte uit de huisstijl ("airy"). Gold hiervoor alleen
   voor donkere secties; nu voor alle. */
.section { padding-top: 104px; padding-bottom: 104px; background: var(--brmo-surface); }

/* Mist-band — a separating surface, never the whole page. */
.section--mist { background: var(--brmo-mist); }
/* Mist-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(--brmo-mist); border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px) clamp(24px, 4vw, 52px);
}
/* Ink-anker — hooguit één per pagina, en hij verdient zijn plek. */

.lead { font-size: var(--text-lg); line-height: 1.55; color: var(--brmo-text-body); max-width: 62ch; }
.muted { color: var(--brmo-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 Mist, 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(--brmo-text-muted); margin: 0;
}
.eyebrow .icon { color: var(--brmo-accent-role); }
.monolabel {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--brmo-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(--brmo-accent); }
.on-ink .text-accent { color: var(--brmo-accent-on-ink); }

/* ============================================================
   Buttons — one solid, one outline, one ghost. Both flip with context.
   Het accent is er voor één moment per beeld; het is nooit een tweede knop.
   ============================================================ */
.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(--brmo-solid-bg); color: var(--brmo-solid-fg); border-color: var(--brmo-solid-bg);
}
.btn--primary:hover, .btn--accent:hover {
  background: var(--brmo-solid-bg-hover); border-color: var(--brmo-solid-bg-hover); color: var(--brmo-solid-fg);
}
.btn--secondary { background: transparent; color: var(--brmo-text); border-color: var(--brmo-border-strong); }
.btn--secondary:hover { border-color: var(--brmo-text); color: var(--brmo-text); }
.btn--ghost { background: transparent; color: var(--brmo-text-body); }
.btn--ghost:hover { background: var(--brmo-surface-well); color: var(--brmo-text); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: none; box-shadow: var(--brmo-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(--brmo-paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-standard);
}
.site-header.is-scrolled { border-bottom-color: var(--brmo-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(--brmo-text-body); border-radius: var(--radius-sm);
}
.nav__link:hover { color: var(--brmo-ink); }
.nav__link[aria-current="page"] { color: var(--brmo-ink); 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(--brmo-border-strong); border-radius: var(--radius-md);
  color: var(--brmo-ink); cursor: pointer;
}

/* ============================================================
   Hero — the Mist-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(--brmo-mist); }
.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(--brmo-ink); 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(--brmo-accent); margin-top: 2px; }
.on-ink .point__icon { color: var(--brmo-accent-on-ink); }
.point__t { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--brmo-text); }
.point__s { font-size: var(--text-sm); color: var(--brmo-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(--brmo-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(--brmo-accent); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--brmo-text); }
.on-ink .crumbs a:hover, .on-ink .crumbs a:focus-visible { color: var(--brmo-accent-on-ink); }

/* Haarlijn. Stond hier tot 15 september 2026 als .line-straight: een balkje
   met een amberen punt erachter — dat wás het ClearLine-merkteken. BRMO
   scheidt met een gewone 1px-regel in Line; rustiger, en het draagt geen
   merkteken van het vorige bedrijf mee. */
.rule { border: 0; border-top: 1px solid var(--brmo-border); margin: 0; width: 100%; }

/* ---- 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(--brmo-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(--brmo-surface-raised);
  border: 1px solid var(--brmo-border);
  color: var(--brmo-text-body);
  transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-out);
}
.card--interactive:hover { border-color: var(--brmo-border-strong); transform: translateY(-2px); }
.section--mist .card, .card--light { background: var(--brmo-paper); }

.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-sm); 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(--brmo-text-muted); background: var(--brmo-mist); border: 1px solid var(--brmo-line);
}
/* 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(--brmo-ink); background: var(--brmo-mist); border-color: rgba(14, 124, 107, 0.34); }
.on-ink .badge { color: var(--brmo-gray-on-ink); background: rgba(255,255,255,0.06); border-color: var(--brmo-border); }
.on-ink .badge--primary { color: var(--brmo-accent-on-ink); background: rgba(70, 185, 167,0.14); border-color: rgba(70, 185, 167,0.3); }
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--text-sm);
  font-weight: var(--weight-medium); color: var(--brmo-text-muted);
  background: transparent; border: 1px solid var(--brmo-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(--brmo-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(--brmo-border); }
.case__stat-num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--brmo-ink); letter-spacing: -0.03em; white-space: nowrap; }
.case__stat-label { font-size: var(--text-sm); color: var(--brmo-text-muted); }
.case__icon { color: var(--brmo-line-strong); }

/* ---- werkwijze steps ---- */
.step__head { display: flex; align-items: center; justify-content: space-between; }
.step__icon { color: var(--brmo-accent); display: inline-flex; }
.step__n { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--brmo-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(--brmo-text-body); margin: 0; }

.idea-panel {
  margin-top: 40px; background: var(--brmo-mist);
  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(--brmo-ink); }
.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(--brmo-ink); 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(--brmo-text-body); }
.intake__contact span { color: var(--brmo-accent); display: inline-flex; }
.on-ink .intake__contact span { color: var(--brmo-accent-on-ink); }

/* A well, not a floating card. Mist on white pages; white when it sits on a Mist-band. */
.form-card { background: var(--brmo-mist); border: 1px solid transparent; border-radius: var(--radius-lg); padding: 34px; }
.section--mist .form-card { background: var(--brmo-paper); border-color: var(--brmo-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(--brmo-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--font-body); font-size: var(--text-base); color: var(--brmo-ink);
  background: var(--brmo-paper); border: 1px solid var(--brmo-line-strong); 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(--brmo-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(--brmo-accent); box-shadow: var(--brmo-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(--brmo-text-body); line-height: 1.45; }
.checkbox input { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--brmo-ink); 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(12, 105, 91, 0.12); color: var(--brmo-success); margin-bottom: 20px; }
.form__success h3 { font-size: var(--text-2xl); }
.form__inline-msg { color: var(--brmo-danger); font-size: var(--text-sm); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Voettekst — het ink-anker. Sluit aan op de donkere CTA erboven, zodat de
   pagina onderaan uitkomt in één donker blok.
   ============================================================ */
/* background/colour come from the .on-ink 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(--brmo-gray-on-ink); 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(--brmo-accent-on-ink); 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(--brmo-paper); 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(--brmo-gray-on-ink); font-size: var(--text-base); }
.footer-col a:hover { color: var(--brmo-paper); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--brmo-border); flex-wrap: wrap; gap: 12px; }
.footer-bottom span, .footer-bottom a { font-size: var(--text-sm); color: var(--brmo-gray-on-ink); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { max-width: 820px; }
.faq__item { border-bottom: 1px solid var(--brmo-border); }
.faq__item:first-child { border-top: 1px solid var(--brmo-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(--brmo-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(--brmo-accent); transition: transform var(--dur-base) var(--ease-standard); }
.on-ink .faq__q .icon { color: var(--brmo-accent-on-ink); }
.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(--brmo-text-body); line-height: 1.65; max-width: 70ch; }

/* ============================================================
   Proof strip — Mist 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(--brmo-mist); }
.proof__num { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-semibold); color: var(--brmo-ink); letter-spacing: -0.02em; }
.proof__label { font-size: var(--text-sm); color: var(--brmo-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(--brmo-line-strong); }

/* ============================================================
   ROI calculator
   ============================================================ */
.roi { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.roi__panel { background: var(--brmo-paper); border: 1px solid var(--brmo-border); border-radius: var(--radius-lg); padding: 34px; }
.roi__result { background: var(--brmo-mist); 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(--brmo-text-muted); margin-bottom: 10px; }
.roi__field .val { color: var(--brmo-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.roi__field input[type="range"] { width: 100%; accent-color: var(--brmo-accent); }
.roi__field input[type="number"] {
  width: 100%; font-family: var(--font-body); font-size: var(--text-md); font-weight: var(--weight-medium);
  color: var(--brmo-ink); background: var(--brmo-paper); border: 1px solid var(--brmo-line-strong);
  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(--brmo-accent); box-shadow: var(--brmo-focus); }
.roi__result .field input { background: var(--brmo-paper); }
.roi__big { font-family: var(--font-mono); font-size: clamp(38px, 6vw, 56px); font-weight: var(--weight-semibold); color: var(--brmo-ink); letter-spacing: -0.03em; line-height: 1; }
.roi__big-label { font-size: var(--text-sm); color: var(--brmo-text-muted); margin-top: 10px; }
.roi__secondary { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--brmo-line-strong); 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(--brmo-ink); }
.roi__metric .lbl { font-size: var(--text-sm); color: var(--brmo-text-muted); }
.roi__disclaimer { font-size: var(--text-sm); color: var(--brmo-text-muted); margin-top: 20px; line-height: 1.55; }
.roi__capture { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--brmo-line-strong); }

/* ============================================================
   Callout — a Mist well with a full hairline. No side stripe.
   ============================================================ */
.callout {
  display: flex; gap: 15px; padding: 18px 20px;
  background: var(--brmo-mist); border: 1px solid var(--brmo-line);
  border-radius: var(--radius-md); margin: 26px 0;
}
/* Mist on Mist has no edge — flip to white wherever the callout sits on a band. */
.section--mist .callout, .hero .callout, .page-hero .callout, .band .callout {
  background: var(--brmo-paper); border-color: var(--brmo-border);
}
.callout__icon { flex-shrink: 0; color: var(--brmo-accent); display: inline-flex; margin-top: 1px; }
.callout--warning .callout__icon { color: var(--brmo-accent); }
.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(--brmo-ink); letter-spacing: -0.012em; }
.callout__text { font-size: var(--text-base); color: var(--brmo-ink); line-height: var(--leading-normal); }
/* Op ink is de callout een verdieping, geen lichte kaart op een donkere band. */
.on-ink .callout { background: var(--brmo-surface-well); border-color: var(--brmo-border-strong); }
.on-ink .callout__title { color: var(--brmo-text); }
.on-ink .callout__text { color: var(--brmo-text-body); }
.on-ink .callout__icon { color: var(--brmo-accent-on-ink); }
.on-ink .callout--warning .callout__icon { color: var(--brmo-accent-on-ink); }

/* ============================================================
   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(--brmo-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(--brmo-ink); 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(--brmo-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(--brmo-accent); flex-shrink: 0; display: inline-flex; margin-top: 3px; }
.on-ink .feature__icon { color: var(--brmo-accent-on-ink); }
.feature h3 { font-size: var(--text-lg); margin: 0 0 8px; }
.feature p { font-size: var(--text-base); color: var(--brmo-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; }
}

/* Het lijnmotief — een lijn die door de homepage liep en eindigde in een
   amberen punt — is op 15 september 2026 verwijderd: dat motief wás het
   ClearLine-merkteken, en in een andere kleur blijft het dat. De laag die
   eromheen zat is hier mee weggehaald.
   #main houdt zijn stacking context: de fotohero leunt erop. */
#main { position: relative; isolation: isolate; }

/* ---- 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(--brmo-accent); line-height: 1; }

/* ---- calendly ---- */
.calendly-inline-widget { min-width: 0; height: 680px; border-radius: var(--radius-lg); overflow: hidden; }
.calendly-placeholder { background: var(--brmo-mist); border: 1px dashed var(--brmo-line-strong); border-radius: var(--radius-lg); padding: 44px 34px; text-align: center; color: var(--brmo-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(--brmo-paper); border-bottom: 1px solid var(--brmo-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--ink { 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; }
  .brmo-logo { --lockup-size: 30px; }
}

/* ============================================================
   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(--brmo-accent); }
* { scrollbar-color: var(--brmo-line-strong) transparent; scrollbar-width: thin; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--brmo-line-strong); border-radius: var(--radius-full);
  border: 3px solid var(--brmo-paper);
}
*::-webkit-scrollbar-thumb:hover { background: var(--brmo-gray-on-ink); }
.on-ink *::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.24); border-color: var(--brmo-ink); }

/* ============================================================
   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. Vier stations, van links naar rechts verbonden door een
        haarlijn. Onder 760px stapelt hij tot een verticale rail, zodat hij
        nooit tot een onleesbaar streepje krimpt. ---- */
.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: 1px; background: var(--brmo-border);
}
.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(--brmo-paper); border: 1px solid var(--brmo-border-strong);
  color: var(--brmo-accent);
}
.pipe__node--end .pipe__glyph { border-color: var(--brmo-accent); color: var(--brmo-accent); }
.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(--brmo-ink);
}
.pipe__s { display: block; margin-top: 6px; font-size: var(--text-sm); line-height: 1.55; color: var(--brmo-text-muted); max-width: 26ch; }
.band .pipe__glyph { background: var(--brmo-paper); }
@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(--brmo-text-muted); padding-bottom: 14px;
}
.spec-table th, .spec-table td {
  text-align: left; padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--brmo-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(--brmo-text-muted);
  letter-spacing: 0.01em; border-bottom-color: var(--brmo-border-strong);
}
.spec-table tbody th { font-family: var(--font-body); font-weight: var(--weight-medium); color: var(--brmo-text); }
.spec-table td { color: var(--brmo-text-body); }
.spec-table .num {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold); color: var(--brmo-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(--brmo-ink); border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75;
  color: var(--brmo-text-on-ink); tab-size: 2;
}
.sample .k { color: var(--brmo-accent-on-ink); }
.sample .s { color: var(--brmo-accent-on-ink); }
.sample .b { color: var(--brmo-gray-on-ink); }
.band .sample, .section--mist .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(--brmo-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(--brmo-ink); line-height: 1;
}
.on-ink .price__num { color: var(--brmo-paper); }
.price__unit { font-size: var(--text-lg); color: var(--brmo-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(--brmo-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(--brmo-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(--brmo-text); line-height: 1.3;
}
.facts p { margin: 8px 0 0; font-size: var(--text-sm); line-height: 1.6; color: var(--brmo-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: var(--radius-sm); }
.coded__frame img { border-radius: var(--radius-sm); }
.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(--brmo-accent);
  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(16, 22, 28, 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(--brmo-border);
}
.coded__n {
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
  color: var(--brmo-accent);
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--brmo-border-strong);
  display: grid; place-items: center;
}
.coded__naam { display: block; font-weight: 600; color: var(--brmo-text); font-size: 0.9375rem; }
.coded__codes {
  display: block; margin-top: 0.15rem;
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--brmo-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(--brmo-accent), var(--brmo-accent));
  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(--brmo-surface); color: var(--brmo-accent);
  border: 2px solid var(--brmo-accent);
  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(--brmo-accent); border-color: var(--brmo-accent); }
.tl__item h3 { margin: 4px 0 6px; }
.tl__item p { margin: 0; color: var(--brmo-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(--brmo-accent), var(--brmo-accent)); }
  .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(--brmo-ink); }

.coded__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  background: var(--brmo-ink); color: #fff;
  padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  width: max-content; max-width: 15rem;
  text-align: left; line-height: 1.35;
  box-shadow: 0 4px 16px rgba(16, 22, 28, 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(--brmo-ink);
}
.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(--brmo-gray-on-ink); }

/* 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(--brmo-ink); }

/* ============================================================
   Hero met foto op de lichte pagina's
   De homepage voelde te wit. Deze modifier zet er een foto achter
   met een donkere 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(16, 22, 28,0.30) 0%, rgba(16, 22, 28,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(--brmo-gray-on-ink); }
.hero--foto .hero__sub { color: #E8F0F6; }
.hero--foto .text-accent { color: var(--brmo-accent-on-ink); }
.hero--foto .point__icon { color: var(--brmo-accent-on-ink); }
.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 ink. In de fotohero staat hij op een
   donkere waas en verdwijnt hij. Hier het accent, net als op clearcodes.nl. */
.hero--foto .btn--accent,
.hero--foto .btn--primary {
  background: var(--brmo-accent-on-ink); color: var(--brmo-ink); border-color: transparent;
}
.hero--foto .btn--accent:hover,
.hero--foto .btn--primary:hover { background: #5CC1B2; }

/* 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(16, 22, 28,0.30) 0%, rgba(16, 22, 28,0.72) 100%);
}
.page-hero.hero--foto .h-page { color: #fff; }
.page-hero.hero--foto .crumbs, .page-hero.hero--foto .crumbs a { color: var(--brmo-gray-on-ink); }
.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(--brmo-gray-on-ink); }
.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 donker. Die overgang
   sneed het scherm doormidden. De balk staat nu op Mist in plaats van
   papier: 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(245, 246, 247, 0.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom-color: var(--brmo-line-strong);
}

/* ============================================================
   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(--brmo-border); border: 1px solid var(--brmo-border); border-radius: var(--radius-sm); 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(--brmo-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(--brmo-accent); margin-bottom: 0.45rem;
}
.voorwie__t { display: block; font-family: var(--font-heading); font-weight: 600; font-size: 1rem; color: var(--brmo-text); margin-bottom: 0.2rem; }
.voorwie__s { display: block; font-size: 0.875rem; color: var(--brmo-text-muted); line-height: 1.45; }