/* §354e — DEZELFDE LETTER ALS karibuone.com. Deze site draaide op systeemfallbacks, en die
   verschillen per apparaat: op een Android-telefoon zie je iets anders dan op een Mac. Eén zelf
   gehoste variabele letter (Inter, SIL Open Font License) maakt de twee sites herkenbaar familie.
   Het bestand staat in de gedeelde assets van het hoofddomein en wordt dus maar één keer geladen
   voor wie beide sites bezoekt. */
@font-face {
  font-family: "Inter var";
  src: url("/assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* §285 — KaribuOne Hospitality: het ontwerpsysteem van de branchesite.
 *
 * Familie van karibuone.com (zelfde warme basis, zelfde ritme) maar met een eigen stem: donkerder,
 * rustiger, met savannegoud in plaats van Kenia-rood. Een hotelier die van de hub hierheen klikt
 * moet voelen dat hij bij dezelfde firma is en tegelijk dat dit ZIJN hoek is.
 *
 * EÉN bestand voor alle zeven pagina's — de header en de voettekst worden door hospitality.js
 * geïnjecteerd, dus er is nergens een tweede kopie die uit de pas kan lopen.
 *
 * Mobiel is de norm, niet de uitzondering: de markt is Kenia en die kijkt op een telefoon, vaak op
 * een matige verbinding. Alles is daarom fluid getypeerd (clamp) en er zit geen enkel vast
 * pixelformaat in de layout.
 */

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #fbf9f5;
  --ink: #17130f;
  --ink-2: #3b332a;
  --muted: #6f6558;
  --line: #e4ddd0;
  --gold: #a16207;         /* savannegoud — het hotel-accent uit de hub */
  --gold-soft: #c98a1a;
  --deep: #1a1611;         /* diepe aardetoon voor donkere secties */
  --deep-2: #100d0a;
  --green: #1e7a3c;
  --red: #be1e2d;
  /* §354e — 16px/10px waren zacht en vriendelijk; 8px/5px leest als gereedschap. Dezelfde
     stap als op karibuone.com, zodat de twee sites familie zijn. */
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(23,19,15,.05), 0 8px 28px rgba(23,19,15,.06);
  --shadow-lg: 0 24px 70px rgba(23,19,15,.18);
  --wrap: 1180px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12100c; --surface: #1c1811; --surface-2: #221d15; --ink: #f7f2e9;
    --ink-2: #ded5c6; --muted: #b3a795; --line: #362e24; --gold: #d9a441; --gold-soft: #e8bd6a;
  }
}
:root[data-theme="dark"] {
  --bg: #12100c; --surface: #1c1811; --surface-2: #221d15; --ink: #f7f2e9;
  --ink-2: #ded5c6; --muted: #b3a795; --line: #362e24; --gold: #d9a441; --gold-soft: #e8bd6a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter var", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, video { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }
@media (max-width: 600px) { .wrap { width: min(100% - 28px, var(--wrap)); } }

/* ── typografie ────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.15rem, 6.2vw, 4.1rem); letter-spacing: -0.035em; }
h2 { font-size: clamp(1.65rem, 3.6vw, 2.6rem); }
h3 { font-size: clamp(1.12rem, 1.7vw, 1.36rem); font-weight: 700; }
p { margin: 0 0 1.1em; color: var(--ink-2); }
.lead { font-size: clamp(1.05rem, 1.9vw, 1.28rem); color: var(--ink-2); max-width: 62ch; }
.muted { color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .78rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin: 0 0 1rem;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; opacity: .7; }

/* ── knoppen ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  /* §354e — pilvorm eruit (999px → 6px) en de zweefsprong ook. Een knop die omhoog wipt leest
     als een consumenten-app; een leverancier die beoordeelt of wij een sleutelsysteem aankunnen
     leest liever precisie. Zelfde stap als op karibuone.com. */
  padding: .82em 1.35em; border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  font-weight: 650; font-size: .95rem; letter-spacing: -.006em; text-decoration: none; cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  /* 48px raakvlak: dit wordt met een duim bediend, staand in een lobby. */
  min-height: 48px;
}
.btn:hover { border-color: var(--ink); }
/* De hoofdknop is INKT, niet goud. Een groot goudvlak leest als een aanbieding; bijna-zwart op
   ivoor leest als een bedrijf. Het savannegoud blijft waar een accent hoort: de bovenregel, de
   actieve pagina, de links. */
.btn-primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--ink) 84%, var(--gold)); border-color: color-mix(in srgb, var(--ink) 84%, var(--gold)); }

/* §354e — OP EEN DONKERE ONDERGROND KEERT HIJ OM. Een bijna-zwarte knop op de donkere hero-foto
   is wel leesbaar (16,9:1 binnen de knop) maar valt niet óp — en een hoofdknop hoort het helderste
   element te zijn. Op licht is dat inkt, op donker is dat licht. */
.hero .btn-primary, .dark .btn-primary, .hiring .btn-primary {
  background: var(--bg); border-color: var(--bg); color: var(--ink);
}
.hero .btn-primary:hover, .dark .btn-primary:hover, .hiring .btn-primary:hover {
  background: #fff; border-color: #fff;
}
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.32); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.10); }

/* ── header ────────────────────────────────────────────────────────────── */
.hdr {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hdr-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; }
.brand img { height: 30px; width: auto; }
.brand span { font-size: 1.02rem; }
.brand small { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); line-height: 1; margin-top: 2px; }
.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
/* §354 — `:not(.btn)` is geen opmaakdetail maar een reparatie. `.nav a` heeft een hogere
   specificiteit dan `.btn-primary`, dus deze regel overschreef de witte letter van de hoofdknop
   met var(--ink-2): donkerbruin op goud, gemeten 2,52:1 waar 4,5:1 de eis is. Dat gold op élke
   pagina van deze site, en juist op de knop die het meest wordt aangeklikt. Wit op goud is 5,4:1
   en is ook wat .btn-primary altijd al bedoelde. */
.nav a:not(.btn) {
  padding: .5em .8em; border-radius: 5px; text-decoration: none;
  font-size: .93rem; font-weight: 600; color: var(--ink-2);
}
.nav a:not(.btn):hover, .nav a:not(.btn)[aria-current="page"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.hdr .btn { padding: .62em 1.1em; min-height: 42px; }
.langs { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 3px; }
.langs button {
  border: 0; background: transparent; color: var(--muted); cursor: pointer;
  font: inherit; font-size: .78rem; font-weight: 700; padding: .28em .62em; border-radius: 4px;
  min-height: 32px;
}
.langs button[aria-pressed="true"] { background: var(--gold); color: #fff; }
.burger { display: none; margin-left: auto; border: 1px solid var(--line); background: var(--surface); border-radius: 6px; width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; }
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--ink); }
.burger span::before { top: -6px; } .burger span::after { top: 6px; }

@media (max-width: 940px) {
  .burger { display: inline-flex; }
  .nav {
    position: fixed; inset: 68px 0 auto; margin: 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 20px 20px;
    box-shadow: var(--shadow-lg); display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: .85em 1em; font-size: 1.02rem; }
  .nav .btn { margin-top: 8px; }
}

/* ── hero met film ─────────────────────────────────────────────────────── */
.hero { position: relative; overflow: hidden; background: var(--deep); color: #fff; }
.hero video, .hero .hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero video.on, .hero .hero-img.on { opacity: 1; }
.hero::after {
  content: ""; position: absolute; inset: 0;
  /* Twee lagen: een donkere basis voor leesbaarheid en een verloop dat de tekst draagt. */
  background:
    linear-gradient(to top, rgba(16,13,10,.94) 0%, rgba(16,13,10,.55) 46%, rgba(16,13,10,.30) 100%),
    radial-gradient(120% 80% at 20% 100%, rgba(161,98,7,.30), transparent 60%);
}
.hero-in { position: relative; z-index: 2; padding: clamp(88px, 15vh, 168px) 0 clamp(56px, 9vh, 104px); }
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lead { color: rgba(255,255,255,.90); max-width: 56ch; }
.hero .eyebrow { color: var(--gold-soft); }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.hero-foot { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); }
.hero-foot div { min-width: 128px; }
.hero-foot b { display: block; font-size: clamp(1.3rem, 2.4vw, 1.85rem); color: #fff; letter-spacing: -.02em; }
.hero-foot span { font-size: .84rem; color: rgba(255,255,255,.72); }

/* ── secties ───────────────────────────────────────────────────────────── */
section { padding: clamp(54px, 8vw, 104px) 0; }
section.tight { padding: clamp(36px, 5vw, 64px) 0; }
.dark { background: var(--deep); color: #fff; }
.dark h2, .dark h3 { color: #fff; }
.dark p, .dark li { color: rgba(255,255,255,.80); }
.dark .eyebrow { color: var(--gold-soft); }
.soft { background: var(--surface-2); }

.head { max-width: 68ch; margin-bottom: clamp(28px, 4vw, 52px); }

/* ── kaarten ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(20px, 2.4vw, 30px); box-shadow: var(--shadow);
  display: flex; flex-direction: column; gap: 2px;
}
.card h3 { margin-bottom: .35em; }
.card p:last-child { margin-bottom: 0; }
.card .ic { color: var(--gold); margin-bottom: 14px; }
/* §354e — GEEN KAARTJES IN DE DONKERE BAND. Drie roosters van gelijke tegels achter elkaar
   geven geen hiërarchie; dit blok wordt een specificatielijst met alleen haarlijnen — de vorm
   waarin een technische lezer een functielijst verwacht. Zelfde ingreep als op karibuone.com,
   en bewust alleen CSS zodat de markup en de server-side render niet mee hoeven. */
.dark .grid { grid-template-columns: repeat(2, 1fr); gap: 0 44px; }
@media (max-width: 760px) { .dark .grid { grid-template-columns: 1fr; gap: 0; } }
.dark .card { background: none; border: 0; border-top: 1px solid rgba(255,255,255,.16);
  border-radius: 0; padding: 17px 0 18px; box-shadow: none; }
.dark .card h3 { font-size: 1.02rem; }
.dark .card p { font-size: .92rem; line-height: 1.55; }

a.card { text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { a.card:hover { transform: none; } }
.card-more { margin-top: auto; padding-top: 14px; color: var(--gold); font-weight: 700; font-size: .92rem; }

/* De vier pijlers: genummerd, want het is een verhaal en geen lijstje. */
.pillar { position: relative; padding-top: 26px; }
/* §354e — het nummer was een groot spookcijfer van 3,4rem op 16% dekking: decoratie die het
   oog eerst naar zichzelf trekt. Nu een klein, leesbaar volgnummer dat doet waar het voor is —
   aangeven dat dit een volgorde is. */
.pillar::before {
  content: attr(data-n); position: absolute; top: 0; left: 0;
  font-size: .8rem; font-weight: 700; line-height: 1; color: var(--gold);
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}

/* ── tweekoloms verhaal ────────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(26px, 4vw, 58px); align-items: center; }
.split.rev > *:first-child { order: 2; }
@media (max-width: 700px) { .split.rev > *:first-child { order: 0; } }
.shot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); }
.dark .shot { border-color: rgba(255,255,255,.14); }

/* ── lijst met vinkjes ─────────────────────────────────────────────────── */
.checks { list-style: none; padding: 0; margin: 0 0 1.2em; display: grid; gap: 11px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: var(--ink-2); }
.checks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 4px; border-radius: 50%;
  background: var(--gold); opacity: .16;
  box-shadow: inset 0 0 0 2px var(--gold);
}
.dark .checks li { color: rgba(255,255,255,.82); }

/* ── telefoon- en tabletomlijsting voor de schermafbeeldingen ──────────── */
.device { display: grid; place-items: center; }
.phone {
  width: min(300px, 78vw); border-radius: 34px; padding: 11px;
  background: linear-gradient(160deg, #2a231b, #14100c);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.10);
}
.phone > * { border-radius: 24px; overflow: hidden; display: block; background: #fff; }
.tablet {
  width: min(560px, 92%); border-radius: 22px; padding: 13px;
  background: linear-gradient(160deg, #2a231b, #14100c);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.10);
}
.tablet > * { border-radius: 12px; overflow: hidden; display: block; background: #fff; }

/* ── demo-kaarten (halen zichzelf op bij het platform) ─────────────────── */
.demos { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.demo {
  position: relative; overflow: hidden; border-radius: var(--radius); text-decoration: none;
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow);
  display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease;
}
.demo:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.demo-img { aspect-ratio: 16 / 10; background: var(--surface-2) center/cover no-repeat; }
.demo-body { padding: 18px 20px 20px; }
.demo-body b { display: block; font-size: 1.06rem; letter-spacing: -.01em; }
.demo-body span { font-size: .88rem; color: var(--muted); }
.demo-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

/* ── we're hiring-strook ───────────────────────────────────────────────── */
.hiring {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, var(--deep), #2a2118);
  color: #fff; border-radius: var(--radius); padding: clamp(20px, 3vw, 30px);
}
.hiring .pill {
  display: inline-flex; align-items: center; gap: .5em; padding: .34em .8em; border-radius: 999px;
  background: var(--gold); color: #fff; font-size: .76rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.hiring p { color: rgba(255,255,255,.86); margin: 0; flex: 1 1 320px; }

/* ── formulier ─────────────────────────────────────────────────────────── */
.form { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.form .full { grid-column: 1 / -1; }
.form label { display: block; font-size: .84rem; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.form input, .form textarea, .form select {
  width: 100%; padding: .85em 1em; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 1rem; min-height: 50px;
}
.form textarea { min-height: 150px; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); }
.form-note { font-size: .86rem; color: var(--muted); }
.form-ok, .form-err { border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; }
.form-ok { background: color-mix(in srgb, var(--green) 12%, var(--surface)); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 30%, transparent); }
.form-err { background: color-mix(in srgb, var(--red) 10%, var(--surface)); color: var(--red); border: 1px solid color-mix(in srgb, var(--red) 30%, transparent); }

/* ── voettekst ─────────────────────────────────────────────────────────── */
.foot { background: var(--deep-2); color: rgba(255,255,255,.74); padding: clamp(42px, 6vw, 70px) 0 30px; }
/* §354 — `p { color: var(--ink-2) }` staat verderop in dit bestand en wint van de kleur die .foot
   hierboven overerft, want een directe regel verslaat overerving altijd. Daardoor stond de zin
   onder "KaribuOne Hospitality" donkerbruin op bijna zwart: gemeten 1,56:1, feitelijk onleesbaar,
   op elke pagina en alleen in de LICHTE modus (in het donker is --ink-2 juist licht — daarom viel
   het niet op). Iemand liep hier eerder tegenaan en gaf `.hiring p` een eigen kleur; dit repareert
   de oorzaak in plaats van het volgende geval. */
.foot p { color: inherit; }
.foot h4 { color: #fff; font-size: .82rem; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 1em; }
.foot a { color: rgba(255,255,255,.74); text-decoration: none; display: block; padding: 5px 0; }
.foot a:hover { color: #fff; }
.foot-grid { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foot-bottom { margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; }

/* ── zachte verschijning bij scrollen ──────────────────────────────────── */
/* ── scroll-reveal: WEGGEHAALD (§354) ───────────────────────────────────────────────────────
 * Hier stond `.rv { opacity: 0 }` met een IntersectionObserver die blokken liet opkomen tijdens
 * het scrollen. Twee redenen om dat te schrappen, allebei gemeten en niet bedacht:
 *
 * 1. Zonder JavaScript was de HELE site onzichtbaar. De tekst stond wel in de pagina, maar er
 *    viel niets te lezen. Een scriptblokkering, een JS-fout of een previewtool leverde een
 *    blanco pagina op — bij de site die een leverancier moet overtuigen dat wij een sleutel-
 *    systeem aankunnen.
 * 2. Ook MÉT JavaScript bleef bij het laden 5.004 van de 5.758 tekens onzichtbaar tot je scrolde.
 *    Een schermafdruk over de hele pagina, een linkpreview of iemand die snel doorscrolt ziet
 *    dus lege banden. Dat was ook de "lege secties" die in de vorige sessie werden opgemerkt.
 *
 * De opdracht voor deze site is minder beweging en meer bewijs. Inhoud die er is, hoort te staan.
 * De `.rv`-klasse blijft in de HTML staan zodat er niets omvalt; ze doet alleen niets meer.
 */

/* Overslaan-link: verplicht voor toetsenbordgebruik, en gratis. */
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: var(--surface); padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow-lg); }

/* ── §354 — integratiepagina ──────────────────────────────────────────────────────────────────
 * Een lijst met per regel een STATUS, en dat is de hele vormgeving: deze pagina bestaat om een
 * leverancier te laten zien wat er wél en niet draait. Drie kleuren, geen iconen, geen beweging.
 */
.intlist { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line); }
.intlist li {
  display: grid; grid-template-columns: 110px minmax(11ch, 22ch) 1fr; gap: 18px;
  align-items: baseline; padding: 16px 2px; border-bottom: 1px solid var(--line);
}
.intlist b { font-size: 1.02rem; }
.intlist li > span:last-child { color: var(--muted); font-size: .95rem; line-height: 1.55; }

.int-st {
  justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  border: 1px solid currentColor;
}
/* In gebruik krijgt als enige een gevulde achtergrond. Dat is de bedoeling: het oog moet in één
   blik zien wat er draait, en de rest mag niet even hard schreeuwen. */
.st-live  { background: #1e7a3c; border-color: #1e7a3c; color: #fff; }
.st-ready { color: #a16207; }
.st-build { color: var(--muted); }

@media (max-width: 720px) {
  .intlist li { grid-template-columns: 1fr; gap: 6px; padding: 15px 2px; }
  .int-st { margin-bottom: 2px; }
}

/* ── referenties (module, aan/uit via marketing-site/site-config.mjs) ───────────────────────── */
.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 26px; }
.ref {
  display: block; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px;
  text-decoration: none; color: inherit; background: var(--surface);
  transition: border-color .2s ease, transform .2s ease;
}
.ref:hover { border-color: var(--muted); transform: translateY(-2px); }
.ref b { display: block; font-size: 1.06rem; margin-bottom: 5px; }
.ref span { color: var(--muted); font-size: .93rem; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .ref:hover { transform: none; } }