/* ═══════════════════════════════════════════════════════════
   furō solutions — site layer
   Bouwt op assets/furo-tokens.css (laad die eerst).
   Nav, hero, secties, footer + componenten die niet in de
   tokens zitten (input, alert, kaart, tabel, breadcrumb, case-
   pagina onderdelen). Zie docs/furo-design-system.html §07.
   ═══════════════════════════════════════════════════════════ */

/* TeX Gyre Heros vervangt Helvetica Neue LT Pro: die was gelicentieerd bij
   Monotype voor desktopgebruik, niet voor web, en de woff2's hier waren
   omgezet uit die desktop-OTF. TeX Gyre Heros (GUST Font License, vrij te
   gebruiken en herdistribueren, ook commercieel) houdt de vorm vrijwel
   gelijk. Zet dit niet terug naar Helvetica Neue LT Pro.
   Afwijking: TeX Gyre Heros heeft geen light-gewicht. Gewicht 300 (alle
   koppen op de site) draait daarom noodgedwongen op de Regular-snit, iets
   zwaarder dan het origineel. */
@font-face { font-family: 'HN'; src: url('../fonts/texgyreheros-regular.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'HN'; src: url('../fonts/texgyreheros-regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'HN'; src: url('../fonts/texgyreheros-bold.woff2') format('woff2'); font-weight: 600; font-display: swap; }

/* Alleen voor de kop in de hero. TeX Gyre Heros heeft geen light-snit, dus die
   kop stond op de Regular en werd te zwaar. Geist heeft een echte light en zit
   qua skelet dicht bij Helvetica, dus hij botst niet met de tekstletter.
   Bewust NIET sitebreed: de rest blijft op Heros staan.
   Geist Sans, (C) 2023 Vercel, SIL Open Font License. Zie fonts/LICENSE-geist.txt */
@font-face { font-family: 'HN Display'; src: url('../fonts/geist-light.woff2') format('woff2'); font-weight: 300; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--furo-font); font-weight: 400;
  background: var(--furo-white); color: var(--furo-black);
  line-height: 1.7; -webkit-font-smoothing: antialiased;
  /* clip en niet hidden: overflow-x:hidden maakt van body een scrollcontainer en
     daarmee breekt position:sticky in Safari, precies waar de hero op leunt.
     clip knipt wel af maar maakt geen container. hidden blijft als terugval
     voor browsers zonder clip. */
  overflow-x: hidden; overflow-x: clip;
  -webkit-tap-highlight-color: rgba(224,130,39,.18);
}
a[x-apple-data-detectors] { color: inherit !important; text-decoration: none !important; pointer-events: none !important; }
a { text-decoration: none; color: inherit; }
.furo-btn, .furo-btn.ghost { text-decoration: none; display: inline-block; }
::selection { background: var(--furo-black); color: var(--furo-white); }

/* ═══ de ankerlijn ═══
   Alle inhoud van de site begint op dezelfde linkerrand: het 1180-raster,
   gecentreerd in het venster, plus de zijmarge. Op 1440 is dat 186px, op een
   telefoon 20px. Elk blok dat een smallere leesbreedte nodig heeft (faq,
   documenten, casetekst) krijgt die als max-width op het blok zelf, en niet
   door de .wrap smaller te maken. Dat laatste centreert de kolom namelijk
   opnieuw en zet hem daarmee op een eigen linkerrand: zo ontstonden op de
   homepage zes verschillende randen naast elkaar. Leesbreedte begrenzen: ja.
   De kolom verschuiven: nee. */
:root {
  --furo-marge-l: max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
  --furo-marge-r: max(clamp(20px, 4vw, 56px), env(safe-area-inset-right));
}
.wrap, .hero-inner, .case-content {
  max-width: 1180px; margin-inline: auto; width: 100%;
  padding-left: var(--furo-marge-l); padding-right: var(--furo-marge-r);
}
/* width:100% is hier niet overbodig. De hero en de hero-cover zijn flex-
   containers, en een flex-item met auto-marges op de dwarsas krijgt zijn eigen
   inhoudsbreedte in plaats van de volle breedte. Zonder deze regel schoof de
   hero-kop 227px naar rechts in plaats van op de ankerlijn te landen. */
/* Binnen een .wrap: een smallere leeskolom die op de ankerlijn blijft staan. */
/* De blokken die een kortere regellengte willen. Ze stonden eerder als
   max-width op hun .wrap, en die centreert: dat is wat ze van de ankerlijn af
   duwde. Hier staat alleen de breedte, dus ze blijven links staan. */
.faq-list, #quiz, #quiz-uitkomst { max-width: 760px; }

/* ═══════════════════════════════════════════════════════════════════════════
   TWEE ASSEN: donker lijnt links uit, licht staat om het midden

   De site kent twee soorten sectie en die verdienen elk een eigen as.

   DONKER is een werkblok. De hero met de animatie ernaast, het ai-ready-blok,
   het beheerpaneel, morfee, het contactformulier, de voet: daar staat altijd
   iets naast de tekst. Die blijven links uitlijnen op de ankerlijn (186px op
   desktop, 20px op een telefoon).

   LICHT is een verhaalblok. De vijf stappen, de werkwijze, integraties, cases,
   voorwaarden, de faq-pagina: één kolom, je leest van boven naar beneden. Die
   staan om de verticale middenas.

   Zo heeft de pagina twee assen in plaats van de zes losse randen die er eerder
   waren, en het verschil valt samen met een scheiding die je toch al ziet: de
   achtergrond wisselt bij elke sectie.

   Centreren is hier meer dan text-align. Elk blok is echt symmetrisch gemaakt:
   een genummerde rij zet zijn nummer bóven de titel in plaats van ernaast, de
   opsommingen staan naast elkaar in plaats van onder elkaar met een marker aan
   de linkerkant, het oranje streepje van een kaart verhuist naar het midden van
   de bovenrand, en het mono-label krijgt zijn vierkantje aan beide zijden.

   Wat NIET meegaat: de faq-lijst en de quiz-antwoorden. Die staan als blok in
   het midden maar houden hun inhoud links, want een vraag of een keuzeknop die
   om het midden danst wordt onbruikbaar.
   ═══════════════════════════════════════════════════════════════════════════ */
section.s:not(.dark) .section-head { max-width: 720px; margin-inline: auto; text-align: center; }
/* Iets ruimer dan de 480px van een links uitgelijnde alinea. Gecentreerde tekst
   wordt zwaar zodra het meer dan een paar regels worden, en op 480 liep deze
   intro naar vijf regels. */
section.s:not(.dark) .section-head p { max-width: 620px; margin-inline: auto; }
section.s:not(.dark) .dienst-desc { max-width: 560px; }
section.s:not(.dark) .furo-label { justify-content: center; }
/* Losse noot onder een blok (bv. onder de integratie-keten): staat buiten de
   .section-head en moet in een gecentreerde sectie dus zijn eigen centrering
   meekrijgen. */
.sectie-noot { font-size: 13px; color: var(--furo-graphite); max-width: 480px; margin-top: var(--furo-s3); }
section.s:not(.dark) .sectie-noot { text-align: center; margin-inline: auto; }
/* De doorverwijzing onder een ingekorte lijst. Zelfde as als de rest van de
   sectie: op licht gecentreerd, op donker links. */
.sectie-actie { margin-top: var(--furo-s5); }
section.s:not(.dark) .sectie-actie { text-align: center; }

/* Genummerde rijen: nummer boven de titel, tekst in een gecentreerde leeskolom.
   De scheidingslijnen blijven over de volle breedte lopen; juist dat maakt de
   symmetrie afleesbaar. */
section.s:not(.dark) .dienst-row {
  grid-template-columns: 1fr; justify-items: center; text-align: center; gap: var(--furo-s2);
}
section.s:not(.dark) .dienst-num { padding-top: 0; }
section.s:not(.dark) .dienst-desc { margin-inline: auto; }
/* Opsomming naast elkaar in plaats van onder elkaar: het vierkantje wordt dan
   een scheidingsteken tussen de items in plaats van een marge aan de linkerkant. */
section.s:not(.dark) .dienst-items {
  flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--furo-s2) var(--furo-s4);
}
/* Op een telefoon passen ze niet naast elkaar en valt de rij uiteen in losse
   regels die elk apart centreren: dan staan de vierkantjes op drie verschillende
   plekken. Daar dus terug naar een kolom, als blok gecentreerd maar intern links
   uitgelijnd, zodat de markers wél onder elkaar staan. */
@media (max-width: 720px) {
  section.s:not(.dark) .dienst-items {
    flex-direction: column; align-items: flex-start;
    width: fit-content; margin-inline: auto;
  }
}
/* Voor/na-paren: de pijl staat op de middenas en niet ergens midden in de rij.
   Met alleen justify-content:center centreert elke rij zichzelf op zijn eigen
   tekstlengte, en dan zigzaggen de pijlen van rij tot rij. Een raster van
   1fr auto 1fr zet ze alle vijf exact onder elkaar; de tekst ervoor lijnt rechts
   uit en die erna links, dus het paar leest naar de pijl toe. */
section.s:not(.dark) .werkwijze-row {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline;
}
section.s:not(.dark) .werkwijze-before { text-align: right; }
section.s:not(.dark) .werkwijze-after { text-align: left; }
@media (max-width: 720px) {
  section.s:not(.dark) .werkwijze-row { grid-template-columns: 1fr; justify-items: center; }
  section.s:not(.dark) .werkwijze-before,
  section.s:not(.dark) .werkwijze-after { text-align: center; }
  /* De rij valt hier terug op één kolom, dus het paar leest van boven naar
     beneden en niet meer van links naar rechts. Een pijl die dan nog naar rechts
     wijst wijst de verkeerde kant op. Roteren in plaats van een ander teken:
     zo blijft het één pijl in de HTML. */
  .werkwijze-arrow { display: inline-block; transform: rotate(90deg); }
}

/* Kaarten: inhoud om het midden, en het oranje streepje mee naar het midden van
   de bovenrand. Laat je dat linksboven staan, dan wijst de kaart nog links
   terwijl zijn inhoud gecentreerd is. */
section.s:not(.dark) .furo-card { text-align: center; }
section.s:not(.dark) .furo-card::before { left: 50%; transform: translateX(-50%); }
section.s:not(.dark) .furo-card:hover::before { width: 64px; }
section.s:not(.dark) .card-link { justify-content: center; }

section.s:not(.dark) .integratie-flow { margin-inline: auto; }

/* De kentallen zijn drie losse cellen met een scheidingslijn ertussen, net als
   de kaarten. Die krijgen hun inhoud dus ook om het midden. */
section.s:not(.dark) .stat { text-align: center; }
section.s:not(.dark) .stat-label { margin-inline: auto; }

/* Blok in het midden, inhoud links: leesbaarheid gaat hier vóór symmetrie. */
section.s:not(.dark) .faq-list,
section.s:not(.dark) #quiz,
section.s:not(.dark) #quiz-uitkomst { margin-inline: auto; text-align: left; }

.skip-link {
  position: absolute; top: -48px; left: 12px; z-index: 999;
  background: var(--furo-orange); color: var(--furo-black);
  font-family: var(--furo-font); font-size: 13px; font-weight: 600;
  padding: 10px 18px; border-radius: var(--furo-r);
  text-decoration: none; transition: top var(--furo-dur-fast) var(--furo-ease-out);
}
.skip-link:focus { top: 12px; }

/* ═══ nav — fixed 64px, transparant op hero, blur+wit na 40px scroll ═══ */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-nav);
  height: 64px; display: flex; align-items: center; justify-content: space-between;
  /* iPhone in liggende stand: de inkeping eet anders de linkerkant op. */
  padding: 0 max(clamp(20px, 4vw, 56px), env(safe-area-inset-left)) 0 max(clamp(20px, 4vw, 56px), env(safe-area-inset-left));
  transition: background var(--furo-dur-base) var(--furo-ease-out), backdrop-filter var(--furo-dur-base), border-color var(--furo-dur-base);
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--furo-fog);
}
#nav .wordmark { font-size: 26px; padding: 9px 0; color: #fff; text-decoration: none; transition: opacity var(--furo-dur-fast); background: none; border: none; cursor: pointer; }
#nav .wordmark:hover { opacity: .7; }
#nav.scrolled .wordmark { color: var(--furo-black); }

.nav-links { display: flex; gap: var(--furo-s5); align-items: center; }
.nav-link {
  font-size: 13px; text-transform: lowercase; color: rgba(255,255,255,.78);
  text-decoration: none; background: none; border: none; cursor: pointer;
  position: relative; padding-bottom: 2px; transition: color var(--furo-dur-fast);
}
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--furo-orange); transition: width var(--furo-dur-base) var(--furo-ease-out); }
.nav-link:hover::after { width: 100%; }
.nav-link:hover { color: #fff; }
.nav-link.active { color: var(--furo-orange); }
#nav.scrolled .nav-link { color: var(--furo-graphite); }
#nav.scrolled .nav-link:hover { color: var(--furo-black); }
#nav.scrolled .nav-link.active { color: var(--furo-orange-deep); }

.nav-hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 15px 12px; }
.nav-hamburger span { display: block; width: 20px; height: 1.5px; background: #fff; transition: all var(--furo-dur-fast); }
#nav.scrolled .nav-hamburger span { background: var(--furo-black); }

#mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--furo-black); color: #fff;
  display: flex; flex-direction: column;
  padding: max(96px, calc(64px + env(safe-area-inset-top))) 32px max(40px, env(safe-area-inset-bottom));
  transform: translateX(100%); transition: transform var(--furo-dur-base) var(--furo-ease-out);
}
#mobile-menu.open { transform: translateX(0); }
.mobile-nav-link {
  font-family: var(--furo-font); font-weight: 300; font-size: 26px; color: rgba(255,255,255,.85);
  background: none; border: none; cursor: pointer; text-align: left; text-decoration: none;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1);
  opacity: 0; transform: translateY(12px);
  transition: color var(--furo-dur-fast), opacity var(--furo-dur-base) var(--furo-ease-out), transform var(--furo-dur-base) var(--furo-ease-out);
}
#mobile-menu.open .mobile-nav-link { opacity: 1; transform: none; }
#mobile-menu.open .mobile-nav-link:nth-child(1) { transition-delay: .07s; }
#mobile-menu.open .mobile-nav-link:nth-child(2) { transition-delay: .14s; }
#mobile-menu.open .mobile-nav-link:nth-child(3) { transition-delay: .21s; }
#mobile-menu.open .mobile-nav-link:nth-child(4) { transition-delay: .28s; }
#mobile-menu.open .mobile-nav-link:nth-child(5) { transition-delay: .35s; }
#mobile-menu.open .mobile-nav-link:nth-child(6) { transition-delay: .42s; }
/* Tot en met acht: er stonden vertragingen tot zes, waardoor contact als zevende
   item meteen verscheen in plaats van mee te komen in de reeks. */
#mobile-menu.open .mobile-nav-link:nth-child(7) { transition-delay: .49s; }
#mobile-menu.open .mobile-nav-link:nth-child(8) { transition-delay: .56s; }
.mobile-nav-link:hover { color: var(--furo-orange); }

/* ═══ hero — 100vh donker, macron-bump, gloed max 8% ═══ */
.hero {
  min-height: 100vh; min-height: 100svh;
  background: var(--furo-black); color: #fff;
  display: flex; flex-direction: column; justify-content: center;
  /* Horizontaal geen eigen padding meer: .hero-inner draagt de wrap-geometrie,
     zodat de hero-kop op dezelfde ankerlijn staat als elke sectiekop eronder.
     Eerder stond de kop op 56px en de rest van de site op 186px. */
  padding: 96px 0 var(--furo-s7);
  position: relative; overflow: hidden;
}
.hero-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 72% 45%, rgba(224,130,39,.08) 0%, transparent 62%);
}
/* max-width staat hierboven op 1180 (het raster). De leesbreedte van 720px zit
   nu op de tekst zelf, niet op de kolom, anders schuift de hele kop mee. */
.hero-inner { position: relative; z-index: 1; }
.hero-inner > * { max-width: 720px; }
.hero .furo-label { color: rgba(255,255,255,.48); margin-bottom: var(--furo-s4); }
.hero .furo-label::before { background: var(--furo-orange); }
.hero h1 {
  font-family: 'HN Display', var(--furo-font); font-weight: 300; color: #fff;
  font-size: clamp(38px, 6vw, 72px); line-height: 1.06; letter-spacing: -0.02em;
  margin-bottom: var(--furo-s4);
}
.hero h1 .strike { position: relative; color: var(--furo-orange); }
.hero h1 .strike::after { content: ''; position: absolute; left: -2%; right: -2%; top: 52%; height: 2px; background: var(--furo-orange); }
.hero-sub { font-size: 16px; color: rgba(255,255,255,.64); line-height: 1.7; max-width: 440px; margin-bottom: var(--furo-s5); }
.hero-actions { display: flex; gap: var(--furo-s3); flex-wrap: wrap; }
/* De drie harde toezeggingen stonden als staartzin in de hero-alinea. Als
   mono-regel onder de knoppen zijn het kentallen in plaats van proza, en dat is
   waar het ontwerpsysteem de mono-letter voor heeft. Scheelt ook drie regels
   tekst boven de vouw. */
.hero-kentallen {
  font-family: var(--furo-mono); font-size: 12px; letter-spacing: .08em;
  color: rgba(255,255,255,.5); margin-top: var(--furo-s4);
}
.hero-actions .furo-btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-actions .furo-btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }

/* ═══ hero-scroll-wrapper — hero blijft gepind, krijgt rust, dan schuift het volgende blok eroverheen ═══
   Geen doorschemer-trucs (die oogden altijd als een glitch: een
   half-transparant vlak of een los zwevend paneel over nog zichtbare
   hero-tekst). In plaats daarvan: de hero-tekst vervaagt zodra je
   scrollt (net als op de originele site), .hero-buffer geeft een
   korte, lege scroll-afstand om rustig te lezen, en pas daarna schuift
   een heel gewone, volledig dekkende sectie 'm af — identiek gedrag
   op elk schermformaat. */
.hero-scroll-wrapper { position: relative; }
.hero-scroll-wrapper .hero { position: sticky; top: 0; z-index: 0; }
.hero-buffer { height: 18vh; }
/* De cover is BEWUST doorzichtig: hij schuift over de gepinde hero heen terwijl
   de animatie zichtbaar blijft, in plaats van haar weg te dekken. De donkere
   laag loopt van dekkend links (waar de tekst staat) naar bijna helder rechts
   (waar de knopen samentrekken). Onder 900px staat de animatie in het midden,
   dus daar is een dekkend vlak de enige leesbare optie. */
.hero-cover {
  position: relative; z-index: 1;
  min-height: 100vh; min-height: 100svh;
  display: flex; align-items: center;
  padding: var(--furo-s7) 0;
  background: transparent; color: #fff;
}
.hero-cover::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(13,13,13,.97) 36%, rgba(13,13,13,.62) 54%, rgba(13,13,13,.06) 74%);
}
/* De volle breedte komt uit de gedeelde .wrap-regel bovenaan; zonder die stond
   dit blok 274px verder naar rechts dan elke andere sectiekop. */
.hero-cover > .wrap { position: relative; z-index: 1; }
/* Smaller dan de standaard 640px: de tekst mag niet vóór de ring komen te staan. */
.hero-cover .section-head { max-width: 520px; }
.hero-cover .section-head h2 { color: #fff; }
.hero-cover .section-head p { color: rgba(255,255,255,.64); }
.hero-cover .furo-label { color: rgba(255,255,255,.48); }
.hero-cover .furo-label::before { background: var(--furo-orange); }
.hero-cover .furo-btn.ghost { color: #fff; border-color: rgba(255,255,255,.35); }
.hero-cover .furo-btn.ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
@media (max-width: 900px) {
  .hero-cover::before { background: var(--furo-black); }
}

/* ═══ chip-hub — de zes tool-iconen als vast zeshoekje, dezelfde component in de
   hero én naast "diensten" (visuele rijm, geen letterlijke vlieg-animatie).
   Pure CSS: geen canvas, geen per-frame scroll-berekeningen, geen aparte
   collision-detectie per schermformaat — de browser lost dat zelf op via
   flex-wrap (diensten) en een simpele breakpoint (hero). ═══ */
.chip-hub { position: relative; width: 220px; height: 220px; flex: none; }
.chip-hub::before {
  content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px;
  margin: -22px 0 0 -22px; border: 1px solid var(--furo-fog); border-radius: 50%;
}
.chip-hub::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 18px; height: 3px;
  margin: -42px 0 0 -9px; background: var(--furo-orange-deep);
}
.hero .chip-hub::before { border-color: rgba(255,255,255,.35); }
.hero .chip-hub::after { background: var(--furo-orange); }
.chip-hub .furo-chip { position: absolute; top: 50%; left: 50%; margin: -26px 0 0 -26px; }
.chip-hub .furo-chip:nth-child(1) { transform: translate(0, -84px); }
.chip-hub .furo-chip:nth-child(2) { transform: translate(73px, -42px); }
.chip-hub .furo-chip:nth-child(3) { transform: translate(73px, 42px); }
.chip-hub .furo-chip:nth-child(4) { transform: translate(0, 84px); }
.chip-hub .furo-chip:nth-child(5) { transform: translate(-73px, 42px); }
.chip-hub .furo-chip:nth-child(6) { transform: translate(-73px, -42px); }
.hero .chip-hub .furo-chip { background: rgba(13,13,13,.5); border-color: rgba(255,255,255,.3); color: #fff; backdrop-filter: blur(2px); }
@media (max-width: 520px) {
  .chip-hub { width: 150px; height: 150px; transform: scale(.68); transform-origin: top center; }
}
@media (min-width: 900px) {
  .hero .chip-hub { transform: translateY(-50%) scale(1); animation: chip-float 7s ease-in-out infinite; }
  @keyframes chip-float {
    0%, 100% { transform: translateY(-50%) scale(1); }
    50% { transform: translateY(calc(-50% - 8px)) scale(1); }
  }
}


/* ═══ secties ═══ */
section.s { padding: var(--furo-s7) 0; }
section.s.raise { background: var(--furo-bg-raise); }
section.s.dark { background: var(--furo-black); color: #fff; }
section.s.dark .furo-label { color: rgba(255,255,255,.48); }
section.s.dark .furo-label::before { background: var(--furo-orange); }
.section-head { margin-bottom: var(--furo-s6); max-width: 640px; }
.section-head .furo-label { margin-bottom: var(--furo-s3); }
.section-head h2 {
  font-family: var(--furo-font); font-weight: 300;
  font-size: clamp(28px, 3.2vw, 42px); line-height: 1.15; letter-spacing: -0.015em;
}
section.s.dark .section-head h2 { color: #fff; }
.section-head p { font-size: 15px; color: var(--furo-thunder); line-height: 1.7; max-width: 480px; margin-top: var(--furo-s3); }
section.s.dark .section-head p { color: rgba(255,255,255,.64); }

@media (max-width: 720px) { section.s { padding: var(--furo-s6) 0; } }

/* ═══ diensten — genummerde rijen ═══ */
.diensten-list { border-top: 1px solid var(--furo-fog); }
.dienst-row { display: grid; grid-template-columns: 64px 1fr; gap: var(--furo-s5); padding: var(--furo-s5) 0; border-bottom: 1px solid var(--furo-fog); }
.dienst-num { font-family: var(--furo-mono); font-size: 12px; color: var(--furo-orange-deep); letter-spacing: .1em; padding-top: 4px; }
/* Drie duidelijk verschillende registers. Ze stonden op 20/15/13px en dat is te
   dicht op elkaar om als hiërarchie te lezen, zeker nu de tekst gecentreerd
   staat en de linkerrand het verschil niet meer verklapt. De titel is nu een
   echte kop, en de opsomming stapt over op de mono-letter: dat is volgens het
   ontwerpsysteem de letter voor meta en kentallen, en het onderscheidt zich
   daarmee van de bodytekst op iets anders dan alleen puntgrootte. Het gewicht
   kan dit werk niet doen: TeX Gyre Heros heeft geen light-snit, dus 300 en 400
   leveren precies hetzelfde beeld op. */
.dienst-title { font-family: var(--furo-font); font-weight: 400; font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--furo-s3); }
.dienst-desc { font-size: 15px; color: var(--furo-thunder); line-height: 1.7; max-width: 620px; margin-bottom: var(--furo-s3); }
.dienst-items { display: flex; flex-direction: column; gap: var(--furo-s2); margin-top: var(--furo-s4); }
.dienst-item { font-family: var(--furo-mono); font-size: 12px; letter-spacing: .04em; color: var(--furo-graphite); display: flex; gap: var(--furo-s2); align-items: baseline; }
.dienst-item::before { content: ''; width: 5px; height: 5px; background: var(--furo-orange); flex-shrink: 0; transform: translateY(-1px); }
@media (max-width: 720px) { .dienst-row { grid-template-columns: 1fr; gap: var(--furo-s2); } }
/* Twee varianten voor de ingekorte lijsten op de homepage.
   .kort: een rij is daar nog maar een titel plus één regel, en dan is de lucht
   van een volledige stapbeschrijving te veel. Op een telefoon stond er 490px
   tussen twee stapnummers voor twee regels tekst.
   .compact: bovendien een kleinere titel. Alleen voor de werkwijze, want die
   staat op dezelfde pagina onder de vijf stappen en moet daar niet mee
   concurreren; dit is de tijdlijn, niet het hoofdstuk. */
.diensten-list.kort .dienst-row { padding: var(--furo-s4) 0; }
.diensten-list.kort .dienst-title { margin-bottom: var(--furo-s2); }
.diensten-list.kort .dienst-desc { margin-bottom: 0; }
.diensten-list.compact .dienst-title { font-size: clamp(17px, 1.7vw, 20px); }
.diensten-list.compact .dienst-desc { font-size: 14px; }

/* ═══ werkwijze — voor/na paren ═══ */
.werkwijze-list { display: flex; flex-direction: column; }
.werkwijze-row {
  display: flex; align-items: center; gap: var(--furo-s4); padding: var(--furo-s4) 0;
  border-bottom: 1px solid var(--furo-fog); flex-wrap: wrap;
}
.werkwijze-before { font-size: clamp(15px, 1.8vw, 19px); font-weight: 300; color: var(--furo-stone); text-decoration: line-through; text-decoration-color: var(--furo-fog); }
.werkwijze-arrow { color: var(--furo-orange); flex-shrink: 0; }
.werkwijze-after { font-size: clamp(15px, 1.8vw, 19px); font-weight: 300; color: var(--furo-black); }

/* ═══ integraties — flow-keten (max. 1 per pagina) ═══ */
/* Links, onder de kop, in plaats van gecentreerd in het venster. */
.integratie-flow { display: flex; align-items: flex-start; gap: 0; max-width: 640px; margin: 0; padding: var(--furo-s3) 0; }
.integratie-node { display: flex; flex-direction: column; align-items: center; gap: var(--furo-s2); flex-shrink: 0; }
.integratie-node .furo-label { margin-bottom: 0; white-space: nowrap; }
.integratie-flow .furo-flow { margin-top: 25px; }
@media (max-width: 520px) { .integratie-node .furo-label span { display: none; } }
/* De keten krijgt een eigen binnenkomst. De standaard reveal zet er een blur
   van 6px op en doet er 0,8s over; op een spoor van 2px hoog betekent dat de
   eerste puls onzichtbaar voorbijkomt. Hier dus geen blur en korter. */
.integratie-flow.reveal { filter: none; transform: translateY(14px); transition-duration: .45s; }
.integratie-flow.reveal.in { filter: none; }

/* ═══ resultaten / cases — kaarten ═══ */
.cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--furo-fog); border: 1px solid var(--furo-fog); }
.furo-card {
  background: var(--furo-white); padding: var(--furo-s5); position: relative;
  text-decoration: none; color: inherit; display: block;
  transition: background var(--furo-dur-fast);
}
.furo-card::before { content: ''; position: absolute; top: -1px; left: -1px; width: 32px; height: 2px; background: var(--furo-orange); transition: width var(--furo-dur-base) var(--furo-ease-out); }
.furo-card:hover { background: var(--furo-bg-raise); }
.furo-card:hover::before { width: 64px; }
.card-branche { font-family: var(--furo-mono); font-size: 11px; color: var(--furo-stone); letter-spacing: .14em; text-transform: uppercase; margin-bottom: var(--furo-s3); }
.card-num { font-family: var(--furo-font); font-weight: 300; font-size: clamp(30px, 3.2vw, 40px); letter-spacing: -0.02em; margin-bottom: var(--furo-s2); }
.card-num small { font-family: var(--furo-mono); font-size: .4em; color: var(--furo-orange-deep); text-transform: uppercase; letter-spacing: .08em; }
.card-desc { font-size: 14px; color: var(--furo-thunder); line-height: 1.65; margin-bottom: var(--furo-s3); }
.card-link { font-size: 12px; font-weight: 600; color: var(--furo-orange-deep); letter-spacing: .04em; display: inline-flex; align-items: center; gap: 8px; transition: gap var(--furo-dur-base); }
.furo-card:hover .card-link { gap: 12px; }
.card-titel { font-family: var(--furo-font); font-weight: 400; font-size: 20px; line-height: 1.3; margin-bottom: var(--furo-s3); }
/* Het resultaat hoort op de kaart zelf. Het stond eerst in een aparte tabel
   onder deze sectie, met precies dezelfde drie projecten erin; dat las als een
   herhaling en dat was het ook. Mono, want het is een kental. */
.card-resultaat {
  display: flex; align-items: baseline; gap: var(--furo-s3); flex-wrap: wrap;
  font-family: var(--furo-mono); font-size: 12px; letter-spacing: .04em;
  padding-top: var(--furo-s3); margin-bottom: var(--furo-s3);
  border-top: 1px solid var(--furo-fog);
}
.card-resultaat .v { color: var(--furo-black); }
.card-resultaat .status { color: var(--furo-ok); text-transform: uppercase; letter-spacing: .12em; }
.card-resultaat .status::before { content: ''; display: inline-block; width: 5px; height: 5px; background: currentColor; margin-right: 7px; transform: translateY(-1px); }
.cards-grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Deze regel stond als inline style in cases.html en won daardoor van elke media
   query: op een telefoon bleef de rij drie kolommen breed en liep de pagina
   178px over de rand. Inline stijl slaat een media query altijd. */
@media (max-width: 900px) { .cards-grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) { .cards-grid, .cards-grid--3 { grid-template-columns: 1fr; } }

/* ═══ foto's ═══
   Geen ronding, geen schaduw, geen kader: een foto is een vlak, net als elk
   ander vlak in dit systeem. width/height staan in de HTML zodat de pagina niet
   verspringt terwijl de foto laadt. */
/* Op een breed scherm staat de foto op zijn eigen verhouding, dus onbesneden.
   Hij werd eerder tot 380px hoog geknepen met object-fit:cover en dan snijdt
   hij hoofd en scherm af. Alleen op een telefoon wordt hij wel bijgesneden,
   want anders is een band van 2.2:1 daar nog maar 170px hoog. */
.foto-band { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .foto-band { height: 300px; object-fit: cover; object-position: 38% 50%; } }
.foto-band-sectie { padding: 0; background: var(--furo-black); line-height: 0; }

/* De sectiekop staat boven dit blok, op de ankerlijn, net als bij elke andere
   sectie. Het blok pakt daardoor de volle rasterbreedte. De fotokolom is mee
   gegroeid van 300 naar 360px: anders wordt het invoerveld voor een e-mailadres
   ruim 700px breed, en dat is geen prettige maat om in te typen. */
.contact-blok { display: grid; grid-template-columns: 360px 1fr; gap: var(--furo-s6); align-items: start; text-align: left; }
.contact-portret { display: block; width: 100%; height: auto; }
.contact-wie { margin-top: var(--furo-s4); }
.contact-wie .naam { font-family: var(--furo-font); font-weight: 300; font-size: 22px; color: #fff; margin-top: var(--furo-s2); }
.contact-wie .rol { font-family: var(--furo-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.45); margin-top: 4px; }
.contact-gegevens { margin-top: var(--furo-s3); display: flex; flex-direction: column; gap: 2px; }
.contact-gegevens a { display: inline-block; font-size: 14px; color: rgba(255,255,255,.82); padding: 7px 0; border-bottom: 1px solid transparent; width: fit-content; transition: color var(--furo-dur-fast), border-color var(--furo-dur-fast); }
.contact-gegevens a:hover { color: #fff; border-bottom-color: var(--furo-orange); }
@media (max-width: 900px) {
  .contact-blok { grid-template-columns: 1fr; gap: var(--furo-s5); }
  .contact-portret { max-width: 220px; }
}

.case-foto { display: block; width: 100%; height: auto; margin: var(--furo-s5) 0; }
.case-foto-bijschrift { font-family: var(--furo-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: var(--furo-stone); display: flex; align-items: center; gap: 8px; margin-top: calc(var(--furo-s5) * -1 + var(--furo-s3)); margin-bottom: var(--furo-s5); }
.case-foto-bijschrift::before { content: ''; width: 5px; height: 5px; background: var(--furo-orange); flex-shrink: 0; }

/* ═══ hero-canvas — scroll-gedreven netwerkanimatie, ligt onder .hero-inner ═══ */
#hero-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }

/* ═══ ai-ready test — één vraag per scherm ═══ */
/* De nav is 64px en staat vast: zonder marge landt elke nieuwe vraag eronder. */
#quiz, #quiz-uitkomst, .quiz-q { scroll-margin-top: 88px; }
.quiz-meta { display: flex; align-items: center; gap: var(--furo-s3); margin-bottom: var(--furo-s5); }
.quiz-meta .furo-marking { flex-shrink: 0; }
.quiz-bar { flex: 1; height: 2px; background: var(--furo-fog); position: relative; }
.quiz-bar i { position: absolute; inset: 0 auto 0 0; background: var(--furo-orange); width: 0; transition: width var(--furo-dur-base) var(--furo-ease-out); }
.quiz-q { font-family: var(--furo-font); font-weight: 300; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; letter-spacing: -0.015em; margin-bottom: var(--furo-s5); }
/* De kop krijgt focus zodat een schermlezer de nieuwe vraag voorleest. Hij is
   niet met tab te bereiken, dus een zichtbare focusring zou hier alleen als
   een fout lezen. */
.quiz-q:focus, .quiz-q:focus-visible { outline: none; }
.quiz-options { display: flex; flex-direction: column; border-top: 1px solid var(--furo-fog); }
.quiz-opt {
  font-family: var(--furo-font); text-align: left; background: none; cursor: pointer;
  border: none; border-bottom: 1px solid var(--furo-fog); border-left: 2px solid transparent;
  padding: var(--furo-s4); width: 100%;
  transition: border-left-color var(--furo-dur-fast), background var(--furo-dur-fast);
}
/* Hover alleen voor een echte muis. Op een touchscreen slaat :hover aan bij een
   tik en blijft hij daarna plakken op de knop die onder je vinger stond, dus op de
   volgende vraag. Ook geen padding meer animeren: dat is een layout-eigenschap. */
@media (hover: hover) and (pointer: fine) {
  .quiz-opt:hover { background: var(--furo-bg-raise); border-left-color: var(--furo-orange); }
}
/* Bevestiging van je keuze, kort zichtbaar voordat de volgende vraag komt. */
.quiz-opt.gekozen { background: var(--furo-orange-soft); border-left-color: var(--furo-orange); }
.quiz-opt:active { background: var(--furo-bg-raise); }
.quiz-opt .t { display: block; font-size: 17px; font-weight: 300; color: var(--furo-black); }
.quiz-opt .h { display: block; font-size: 13px; color: var(--furo-graphite); margin-top: 4px; }
.quiz-back { font-family: var(--furo-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--furo-stone); background: none; border: none; cursor: pointer; padding: var(--furo-s4) 0 0; }
.quiz-back:hover { color: var(--furo-black); }
.quiz-back[hidden] { display: none; }

/* uitkomst */
.quiz-score { display: flex; align-items: baseline; gap: var(--furo-s3); margin-bottom: var(--furo-s3); }
.quiz-score .n { font-family: var(--furo-font); font-weight: 300; font-size: clamp(48px, 7vw, 76px); line-height: 1; letter-spacing: -0.02em; }
.quiz-score .n span { color: var(--furo-orange-deep); }
.quiz-advies { border-top: 1px solid var(--furo-fog); margin-top: var(--furo-s5); }
.advies { display: grid; grid-template-columns: 40px 1fr; gap: var(--furo-s4); padding: var(--furo-s5) 0; border-bottom: 1px solid var(--furo-fog); }
.advies .num { font-family: var(--furo-mono); font-size: 12px; color: var(--furo-orange-deep); letter-spacing: .1em; padding-top: 5px; }
.advies h3 { font-family: var(--furo-font); font-weight: 400; font-size: 19px; margin-bottom: var(--furo-s2); }
.advies p { font-size: 15px; color: var(--furo-thunder); line-height: 1.7; }
.advies .furo-tag { margin-top: var(--furo-s3); }
.advies a.meer { display: inline-block; margin-top: var(--furo-s3); font-size: 12px; font-weight: 600; color: var(--furo-orange-deep); letter-spacing: .04em; }
@media (max-width: 520px) { .advies { grid-template-columns: 1fr; gap: var(--furo-s2); } }

/* ═══ beheerpaneel — het rechterblok bij #beheer ═══
   Een magere lijst met drie regels vertelde niet waar de sectie over gaat. Dit
   is een bewakingsoverzicht: een omkaderd paneel met een kopregel, een rustig
   pulserend blokje, en drie genummerde rijen met 1px scheidingen. Binnen het
   systeem: geen ronding, geen schaduw, oranje alleen als accent. */
.beheer-paneel { border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.02); }
.beheer-kop {
  display: flex; align-items: center; gap: var(--furo-s3);
  padding: var(--furo-s3) var(--furo-s4);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.beheer-kop .furo-marking { color: var(--furo-orange); }
.beheer-kop-meta { margin-left: auto; font-family: var(--furo-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,.35); }
/* Alleen opacity animeren, en niets dat beweegt: dit staat lang in beeld. */
.beheer-puls { width: 7px; height: 7px; background: var(--furo-orange); flex-shrink: 0; animation: beheer-puls 2.4s ease-in-out infinite; }
@keyframes beheer-puls { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
@media (prefers-reduced-motion: reduce) { .beheer-puls { animation: none; } }

.beheer-lijst { list-style: none; }
.beheer-lijst li {
  position: relative; display: grid; grid-template-columns: 34px 1fr; gap: var(--furo-s3);
  padding: var(--furo-s4); border-bottom: 1px solid rgba(255,255,255,.09);
  transition: background var(--furo-dur-fast) var(--furo-ease-out);
}
.beheer-lijst li:last-child { border-bottom: none; }
/* Een balkje dat opschaalt in plaats van een randbreedte die de layout raakt. */
.beheer-lijst li::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--furo-orange); transform: scaleY(0); transform-origin: top;
  transition: transform var(--furo-dur-base) var(--furo-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .beheer-lijst li:hover { background: rgba(255,255,255,.035); }
  .beheer-lijst li:hover::before { transform: scaleY(1); }
}
.beheer-lijst .nr { font-family: var(--furo-mono); font-size: 12px; letter-spacing: .1em; color: var(--furo-orange-deep); padding-top: 3px; }
.beheer-lijst .t { font-family: var(--furo-font); font-weight: 400; font-size: 16px; color: #fff; margin-bottom: 4px; }
.beheer-lijst p { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,.6); }
@media (max-width: 520px) { .beheer-lijst li { grid-template-columns: 1fr; gap: var(--furo-s2); } }

/* De meta-regels onder een casekop hoorden te stapelen: het label heeft een
   margin-bottom, maar .furo-label is inline-flex en dus bleef de waarde
   ernaast hangen ("jij levertde praktijkkennis"). */
.case-meta-item { display: flex; flex-direction: column; align-items: flex-start; }

/* ═══ eigen product (morfee) — tekstkolom + drie stappen ═══ */
.product-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--furo-s6); align-items: center; }
.product-facts { list-style: none; border-top: 1px solid rgba(255,255,255,.12); }
.product-facts li {
  padding: var(--furo-s4) 0; border-bottom: 1px solid rgba(255,255,255,.12);
  font-size: 15px; font-weight: 300; color: rgba(255,255,255,.82); line-height: 1.6;
}
.product-facts .furo-marking { display: block; color: var(--furo-orange); margin-bottom: 6px; }
@media (max-width: 900px) { .product-row { grid-template-columns: 1fr; gap: var(--furo-s5); } }

/* ═══ stats-rij ═══ */
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--furo-fog); }
.stat { padding: var(--furo-s4) var(--furo-s3) var(--furo-s3); border-right: 1px solid var(--furo-fog); }
.stat:last-child { border-right: none; }
/* Alle drie de kentallen oranje. Op wit is dat --furo-orange-deep en niet
   #E08227: die haalt het contrast niet, zie CLAUDE.md. */
/* ═══ band — één regel plus één knop ═══
   Voor een blok dat alleen een aanbod hoeft te doen. Kwam in de plaats van een
   volledige sectie van 109 woorden voor de ai-ready test, die als knop ook al
   in de hero en in het menu stond. */
section.s.band { padding-top: var(--furo-s6); padding-bottom: var(--furo-s6); }
.band-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--furo-s5); flex-wrap: wrap;
}
.band-tekst { font-size: clamp(17px, 2vw, 21px); font-weight: 300; color: rgba(255,255,255,.82); max-width: 620px; margin: 0; }
.band .furo-label { color: rgba(255,255,255,.5); margin-bottom: var(--furo-s3); }
.band .furo-btn { flex-shrink: 0; }
@media (max-width: 720px) { .band-inner { align-items: flex-start; } }

.stat-num { font-family: var(--furo-font); font-weight: 300; font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -0.02em; line-height: 1; display: block; margin-bottom: var(--furo-s2); color: var(--furo-orange-deep); }
.stat-num .a { color: var(--furo-orange-deep); }
/* Het euroteken hoort bij het getal maar is geen cijfer: gedempt, kleiner en met
   lucht erna. Hier stond eerst een groter-dan-teken, maar dat betekent letterlijk
   "meer dan 300" en dat leest als een drempel. De boodschap is juist dat het klein
   kan beginnen. */
.stat-num .teken { color: inherit; font-size: .62em; vertical-align: .12em; margin-right: .12em; }
.stat-label { font-size: 14px; color: var(--furo-thunder); line-height: 1.55; max-width: 30ch; }
@media (max-width: 720px) {
  .stats-row { grid-template-columns: 1fr; }
  .stat { border-right: none; border-top: 1px solid var(--furo-fog); }
  .stat:first-child { border-top: none; }
}

/* ═══ input / formulier ═══ */
.input-group { display: flex; flex-direction: column; gap: 6px; }
/* 11px, gelijk aan elk ander mono-label in het ontwerpsysteem. Stond op 10px
   en was daarmee de enige uitschieter naar beneden op de hele site. */
.input-group label { font-family: var(--furo-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.48); }
section.s:not(.dark) .input-group label { color: var(--furo-graphite); }
.furo-input {
  /* 16px en geen 15: Safari op iOS zoomt de hele pagina in zodra je een veld
     aanraakt met een kleinere lettergrootte, en zoomt daarna niet terug. */
  font-family: var(--furo-font); font-size: 16px; padding: 13px 14px;
  border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #fff;
  border-radius: 0; width: 100%; transition: border-color var(--furo-dur-fast); resize: none;
}
.furo-input::placeholder { color: rgba(255,255,255,.35); }
.furo-input:hover { border-color: rgba(255,255,255,.3); }
.furo-input:focus { border-color: var(--furo-orange); outline: none; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--furo-s3); }
@media (max-width: 520px) { .form-row { grid-template-columns: 1fr; } }
#cf-status { font-family: var(--furo-mono); font-size: 12px; text-align: center; min-height: 18px; color: rgba(255,255,255,.5); margin-top: var(--furo-s3); }
#cf-status.ok { color: var(--furo-ok); }
#cf-status.err { color: var(--furo-error); }
/* De statusregel kan een mailto bevatten als het formulier niets kan afleveren.
   Zonder onderstreping leest die niet als link, want de kleur erft van de
   foutmelding eromheen. */
#cf-status a { text-decoration: underline; text-underline-offset: 3px; }

/* Lokvakje tegen bots. Niet display:none: sommige bots slaan onzichtbare
   velden over. Wel volledig buiten beeld, buiten de tabvolgorde en met
   aria-hidden, dus een schermlezer komt er ook niet langs. */
.veld-weg { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ═══ trust row ═══ */
.trust-row { display: flex; gap: var(--furo-s6); justify-content: center; flex-wrap: wrap; margin-top: var(--furo-s6); }
.trust-item { text-align: center; }
.trust-item .furo-marking { display: block; margin-bottom: 4px; font-size: 11px; }
.trust-item .v { font-size: 13px; color: rgba(255,255,255,.55); }

/* ═══ FAQ (native details) ═══ */
.faq-list { border-top: 1px solid var(--furo-fog); }
.faq-item { border-bottom: 1px solid var(--furo-fog); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: var(--furo-s4) 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--furo-s4);
  font-size: 16px; transition: color var(--furo-dur-fast);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--furo-orange-deep); }
.faq-item .faq-plus { font-family: var(--furo-mono); font-size: 18px; color: var(--furo-orange); flex-shrink: 0; transition: transform var(--furo-dur-base) var(--furo-ease-out); }
.faq-item[open] .faq-plus { transform: rotate(45deg); }
.faq-item .faq-a { font-size: 15px; color: var(--furo-thunder); line-height: 1.7; padding-bottom: var(--furo-s4); max-width: 640px; }

/* ═══ footer — donker, macron-gradient bovenaan ═══ */
footer {
  background: var(--furo-black); color: rgba(255,255,255,.5);
  padding: var(--furo-s6) 0 var(--furo-s4); position: relative;
}
footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, var(--furo-orange), transparent); }
.footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--furo-s5); padding-bottom: var(--furo-s4); border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand { font-family: var(--furo-font); font-weight: 300; font-size: 20px; color: #fff; margin-bottom: var(--furo-s2); }
.footer-sub { font-size: 13px; line-height: 1.7; max-width: 240px; }
.footer-col-title { margin-bottom: var(--furo-s3); }
.footer-link { display: block; font-size: 13px; color: rgba(255,255,255,.5); text-decoration: none; background: none; border: none; cursor: pointer; text-align: left; margin-bottom: 10px; padding: 0; transition: color var(--furo-dur-fast); }
.footer-link:hover { color: #fff; }
.footer-bottom { font-family: var(--furo-mono); font-size: 11px; color: rgba(255,255,255,.32); margin-top: var(--furo-s4); line-height: 2; }
/* Colofon op twee regels: adres, kvk en btw moeten volgens art. 3:15d BW op elke
   pagina vindbaar zijn, en dat past niet meer op één regel van 11px. */
.footer-bottom > div + div { color: rgba(255,255,255,.26); }
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: #fff; }

/* ═══ breadcrumb (case-pagina's) ═══ */
.breadcrumb { background: var(--furo-black); padding: 90px 0 4px; font-size: 12px; color: rgba(255,255,255,.4); }
.breadcrumb a { color: rgba(255,255,255,.4); text-decoration: none; display: inline-block; padding: 14px 2px; }
.breadcrumb a:hover { color: var(--furo-orange); }
.breadcrumb .sep { margin: 0 6px; color: rgba(255,255,255,.2); }
.breadcrumb .current { display: inline-block; padding: 14px 2px; }
.breadcrumb .current { color: #fff; }

/* ═══ case-header ═══ */
.case-header { background: var(--furo-black); color: #fff; padding: var(--furo-s4) 0 var(--furo-s6); }
.case-header h1 { font-family: var(--furo-font); font-weight: 300; font-size: clamp(32px, 5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; margin: var(--furo-s3) 0 var(--furo-s5); max-width: 880px; }
.case-meta { display: flex; flex-wrap: wrap; gap: var(--furo-s5); padding-top: var(--furo-s4); border-top: 1px solid rgba(255,255,255,.1); }
.case-meta-item .furo-label { color: rgba(255,255,255,.48); margin-bottom: 6px; }
.case-meta-item .furo-label::before { background: var(--furo-orange); }
.case-meta-item .v { font-size: 14px; color: rgba(255,255,255,.9); }

/* ═══ case-content ═══
   De casetekst stond op max-width:780 met margin:0 auto en dus gecentreerd in
   het venster: op 1440 begon hij op 330px terwijl de h1 erboven op 186 stond, en
   op een telefoon raakte hij de rand omdat er geen zijmarge was. De geometrie
   komt nu uit de gedeelde regel bovenaan (1180 + marges); de leesbreedte van
   780px zit op de secties zelf. */
.case-content { padding-block: var(--furo-s7); }
/* De leesbreedte per blok benoemen in plaats van via `> *`: het uitkomstblok is
   de enige andere directe bewoner van deze kolom en moet even breed zijn. */
.case-section, .case-content > .result-block { max-width: 780px; }
.case-section { margin-bottom: var(--furo-s7); }
.case-section .furo-label { margin-bottom: var(--furo-s3); }
/* h2 en h3 allebei: de sectiekoppen zijn h2 (na de h1 van de pagina hoort geen
   sprong naar h3), maar de h3-vorm blijft staan voor een eventueel dieper niveau. */
.case-section h2,
.case-section h3 { font-family: var(--furo-font); font-weight: 300; font-size: clamp(22px, 2.8vw, 30px); line-height: 1.25; letter-spacing: -0.01em; margin-bottom: var(--furo-s4); }
.case-section p { font-size: 16px; color: var(--furo-thunder); line-height: 1.75; margin-bottom: var(--furo-s3); max-width: 680px; }
.case-section ul { list-style: none; margin: var(--furo-s4) 0; }
.case-section li { font-size: 15px; color: var(--furo-thunder); line-height: 1.7; padding-left: var(--furo-s4); margin-bottom: var(--furo-s2); position: relative; }
.case-section li::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 5px; background: var(--furo-orange); }
.tech-tags { display: flex; flex-wrap: wrap; gap: var(--furo-s2); margin-top: var(--furo-s3); }

/* ═══ result-block (case-pagina uitkomst) ═══ */
.result-block { background: var(--furo-black); color: #fff; padding: var(--furo-s6); margin: var(--furo-s6) 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: var(--furo-s5); align-items: center; }
.result-block .result-num { font-family: var(--furo-font); font-weight: 300; font-size: clamp(48px, 6vw, 72px); line-height: 1; letter-spacing: -0.02em; }
.result-block .furo-marking { display: block; margin-top: var(--furo-s3); }
.result-block p { font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.82); }
.result-block strong { color: #fff; font-weight: 500; }
@media (max-width: 720px) { .result-block { grid-template-columns: 1fr; } }

/* ═══ next-case ═══ */
.next-case { background: var(--furo-bg-raise); padding: var(--furo-s5) 0; border-top: 1px solid var(--furo-fog); }
.next-case-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--furo-s4); flex-wrap: wrap; }
.next-case-link { text-decoration: none; color: inherit; display: flex; align-items: center; gap: var(--furo-s4); }
.next-case-link:hover .card-link { gap: 12px; }
.next-case-link .furo-label { margin-bottom: 6px; }
.next-case-title { font-family: var(--furo-font); font-weight: 300; font-size: 19px; color: var(--furo-black); }
.back-link { font-size: 12px; color: var(--furo-graphite); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 1px solid var(--furo-fog); transition: border-color var(--furo-dur-fast), color var(--furo-dur-fast); }
.back-link:hover { border-color: var(--furo-black); color: var(--furo-black); }

/* ═══ cta-slot (donker, gecentreerd) ═══ */
/* Links uitgelijnd, net als elke andere sectie. Dit blok stond gecentreerd en
   was daarmee op vier van de zeven pagina's het enige dat niet op de ankerlijn
   begon; als afsluiter van de pagina viel dat juist extra op. */
.cta-slot { background: var(--furo-black); color: #fff; padding: var(--furo-s7) 0; }
.cta-slot h2 { font-family: var(--furo-font); font-weight: 300; font-size: clamp(26px, 3.6vw, 40px); line-height: 1.15; letter-spacing: -0.02em; max-width: 640px; margin: 0 0 var(--furo-s3); }
.cta-slot p { font-size: 15px; color: rgba(255,255,255,.55); max-width: 460px; margin: 0 0 var(--furo-s4); }

/* ═══ document/light pages (privacy) ═══ */
.doc-header { background: var(--furo-black); color: #fff; padding: 104px 0 var(--furo-s5); }
.doc-header h1 { font-family: var(--furo-font); font-weight: 300; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.02em; margin-top: var(--furo-s3); }
.doc-header .updated { font-family: var(--furo-mono); font-size: 12px; color: rgba(255,255,255,.4); margin-top: var(--furo-s3); }
/* Zelfde geometrie als de casetekst: op de ankerlijn, met de leesbreedte op het
   blok in plaats van een gecentreerde kolom. */
.doc-content { max-width: 1180px; margin-inline: auto; padding: var(--furo-s6) var(--furo-marge-r) var(--furo-s7) var(--furo-marge-l); }
.doc-content > * { max-width: 680px; }
.doc-content .furo-label { margin: var(--furo-s5) 0 var(--furo-s3); }
.doc-content .furo-label:first-child { margin-top: 0; }
.doc-content p { font-size: 15px; color: var(--furo-thunder); margin-bottom: var(--furo-s3); }
.doc-content ul { margin: 0 0 var(--furo-s3) var(--furo-s4); }
.doc-content li { font-size: 15px; color: var(--furo-thunder); margin-bottom: 8px; }
.doc-content a { color: var(--furo-orange-deep); }
.todo-box { border: 1px solid var(--furo-orange); background: var(--furo-orange-soft); padding: var(--furo-s3) var(--furo-s4); font-size: 13px; color: var(--furo-orange-deep); margin: var(--furo-s3) 0; }
.todo-box strong { display: block; font-family: var(--furo-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }

/* ═══ 404 ═══ */
.nf { min-height: 100vh; min-height: 100svh; background: var(--furo-black); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--furo-s4); }
.nf-inner { max-width: 460px; }
.nf .furo-label { justify-content: center; color: rgba(255,255,255,.48); margin-bottom: var(--furo-s4); }
.nf .furo-label::before { background: var(--furo-orange); }
.nf-code { font-family: var(--furo-font); font-weight: 300; font-size: clamp(64px, 10vw, 104px); line-height: 1; margin-bottom: var(--furo-s4); }
.nf p { font-size: 15px; color: rgba(255,255,255,.6); line-height: 1.7; margin-bottom: var(--furo-s5); }

/* ═══ responsive: nav ═══
   Omslagpunt op 900 en niet op 720: met zes items plus de CTA botst de
   navigatie op een tablet van 768px tegen het woordmerk. Gemeten: bij 768px
   begint .nav-links op x=72 en eindigt het woordmerk op x=72. 900 is een van
   de vier toegestane breekpunten uit het ontwerpsysteem. ═══ */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
}

/* Aanraakvlakken: op een telefoon moet een link te raken zijn, ook in de voet. */
@media (max-width: 900px) {
  .footer-link { padding: 11px 0; margin-bottom: 0; }
  .footer-bottom { line-height: 2.6; }
  .footer-bottom a { display: inline-block; padding: 12px 6px; }
}